1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
// @ts-nocheck
import * as mod from "./radio-group"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Segmented radio group for choosing a single option.
Use for view toggles or mode selection.
### API
- Required: \`options\`.
- Optional: \`current\`, \`defaultValue\`, \`value\`, \`label\`, \`onSelect\`.
- Optional layout: \`size\`, \`fill\`, \`pad\`.
### Variants and states
- Size variants: small, medium.
- Optional fill and padding behavior.
### Behavior
- Maps options to segmented items and manages selection.
### Accessibility
- TODO: confirm role/aria attributes from Kobalte SegmentedControl.
### Theming/tokens
- Uses \`data-component="radio-group"\` with size/pad data attributes.
`
const story = create({
title: "UI/RadioGroup",
mod,
args: {
options: ["One", "Two", "Three"],
defaultValue: "One",
},
})
export default {
title: "UI/RadioGroup",
id: "components-radio-group",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
argTypes: {
size: {
control: "select",
options: ["small", "medium"],
},
pad: {
control: "select",
options: ["none", "normal"],
},
fill: {
control: "boolean",
},
},
}
export const Basic = story.Basic
export const Sizes = {
render: () => (
<div style={{ display: "grid", gap: "12px" }}>
<mod.RadioGroup options={["One", "Two"]} defaultValue="One" size="small" />
<mod.RadioGroup options={["One", "Two"]} defaultValue="One" size="medium" />
</div>
),
}
export const Filled = {
args: {
fill: true,
pad: "none",
},
}
export const CustomLabels = {
render: () => (
<mod.RadioGroup
options={["list", "grid"]}
defaultValue="list"
label={(value) => (value === "list" ? "List view" : "Grid view")}
/>
),
}
|
