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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
// @ts-nocheck
import * as mod from "./select"
import { create } from "../storybook/scaffold"
const docs = `### Overview
Select menu for choosing a single option with optional grouping.
Use \`children\` to customize option rendering.
### API
- Required: \`options\`.
- Optional: \`current\`, \`placeholder\`, \`value\`, \`label\`, \`groupBy\`.
- Accepts Button props for the trigger (\`variant\`, \`size\`).
### Variants and states
- Trigger supports "settings" style via \`triggerVariant\`.
### Behavior
- Uses Kobalte Select with optional item highlight callbacks.
### Accessibility
- TODO: confirm keyboard navigation and aria attributes from Kobalte.
### Theming/tokens
- Uses \`data-component="select"\` with slot attributes.
`
const story = create({
title: "UI/Select",
mod,
args: {
options: ["One", "Two", "Three"],
current: "One",
placeholder: "Choose...",
variant: "secondary",
size: "normal",
},
})
export default {
title: "UI/Select",
id: "components-select",
component: story.meta.component,
tags: ["autodocs"],
parameters: {
docs: {
description: {
component: docs,
},
},
},
argTypes: {
triggerVariant: {
control: "select",
options: ["settings", undefined],
},
},
}
export const Basic = story.Basic
export const Grouped = {
render: () => {
const options = [
{ id: "alpha", label: "Alpha", group: "Group A" },
{ id: "bravo", label: "Bravo", group: "Group A" },
{ id: "delta", label: "Delta", group: "Group B" },
]
return (
<mod.Select
options={options}
current={options[0]}
value={(item) => item.id}
label={(item) => item.label}
groupBy={(item) => item.group}
placeholder="Choose..."
variant="secondary"
/>
)
},
}
export const SettingsTrigger = {
args: {
triggerVariant: "settings",
},
}
export const CustomRender = {
render: () => (
<mod.Select
options={["Primary", "Secondary", "Ghost"]}
current="Primary"
placeholder="Choose..."
variant="secondary"
>
{(item) => <span style={{ "text-transform": "uppercase" }}>{item}</span>}
</mod.Select>
),
}
export const CustomTriggerStyle = {
args: {
triggerStyle: { "min-width": "180px", "justify-content": "space-between" },
},
}
export const Disabled = {
args: {
disabled: true,
},
}
|
