@godxjp/ui 30.8.0 → 31.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -2
- package/agent/START-HERE.md +1 -1
- package/agent/components/PrefetchLink.json +3 -3
- package/agent/components-index.json +1 -1
- package/agent/components.json +3 -3
- package/agent/index.json +2 -2
- package/agent/llms.txt +3 -3
- package/agent/patterns/settings-page-responsive.json +1 -1
- package/agent/patterns.json +1 -1
- package/dist/components/query/index.d.ts +0 -2
- package/dist/components/query/index.js +0 -2
- package/dist/components/react-router/index.d.ts +2 -0
- package/dist/components/react-router/index.js +4 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/styles/alert-layout.css +4 -2
- package/dist/styles/layers.json +1182 -0
- package/dist/styles/vendor-day-picker.css +2 -0
- package/dist/styles/vendor-sonner.css +2 -0
- package/docs/CONSUMER-RULES.md +1 -1
- package/docs/data-display/permission-matrix.tsx +30 -28
- package/docs/data-entry/cascader.tsx +22 -20
- package/docs/data-entry/date-picker.tsx +47 -43
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +80 -76
- package/docs/data-entry/form-field/examples/create-form.tsx +33 -31
- package/docs/data-entry/form-field/index.tsx +61 -57
- package/docs/data-entry/form.tsx +112 -106
- package/docs/data-entry/input.tsx +297 -270
- package/docs/data-entry/label.tsx +11 -9
- package/docs/data-entry/number-input.tsx +86 -78
- package/docs/data-entry/radio-group.tsx +33 -26
- package/docs/data-entry/rating.tsx +29 -25
- package/docs/data-entry/select-matrix.tsx +49 -47
- package/docs/data-entry/select.tsx +38 -35
- package/docs/data-entry/slider.tsx +45 -41
- package/docs/data-entry/textarea.tsx +44 -42
- package/docs/data-entry/time-picker.tsx +51 -47
- package/docs/feedback/sheet.tsx +84 -79
- package/docs/foundation/theme-editor.tsx +133 -124
- package/docs/general/button/examples/form-actions.tsx +17 -15
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +31 -29
- package/docs/layout/auth-shell-registration.tsx +75 -72
- package/docs/layout/auth-shell-variants.tsx +55 -51
- package/docs/layout/space-compact.tsx +11 -8
- package/docs/{query → react-router}/prefetch-link.tsx +1 -1
- package/docs/showcase/caimono-price-comparison.tsx +59 -51
- package/docs/showcase/case3-approval-workflow.tsx +27 -25
- package/docs/showcase/case4-login.tsx +37 -34
- package/docs/showcase/permission-matrix.tsx +44 -42
- package/docs/showcase/theme-customization.tsx +108 -99
- package/package.json +10 -3
- package/scripts/cli.mjs +15 -0
- package/scripts/consumer-rule.md +14 -0
- package/scripts/prune-css.mjs +221 -0
- package/scripts/ui-audit.mjs +99 -2
- /package/dist/components/{query → react-router}/prefetch-link.d.ts +0 -0
- /package/dist/components/{query → react-router}/prefetch-link.js +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
|
|
2
|
-
import { Checkbox, FormField, Input, Label, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
2
|
+
import { Form, Checkbox, FormField, Input, Label, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
3
3
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -84,14 +84,16 @@ export default function Demo() {
|
|
|
84
84
|
</CardDescription>
|
|
85
85
|
</CardHeader>
|
|
86
86
|
<CardContent>
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
87
|
+
<Form>
|
|
88
|
+
<Flex direction="col" gap="md">
|
|
89
|
+
<FormField id="invoice-no" label="請求書番号" required helper="例: INV-2024-001">
|
|
90
|
+
<Input id="invoice-no" placeholder="INV-2024-001" />
|
|
91
|
+
</FormField>
|
|
92
|
+
<FormField id="note" label="摘要" error="摘要は必須です">
|
|
93
|
+
<Input id="note" defaultValue="" />
|
|
94
|
+
</FormField>
|
|
95
|
+
</Flex>
|
|
96
|
+
</Form>
|
|
95
97
|
</CardContent>
|
|
96
98
|
</Card>
|
|
97
99
|
</Flex>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
|
|
3
3
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
|
|
4
|
-
import { FormField, NumberInput } from "@godxjp/ui/data-entry";
|
|
4
|
+
import { Form, FormField, NumberInput } from "@godxjp/ui/data-entry";
|
|
5
5
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
6
6
|
import { Heading, Text } from "@godxjp/ui/general";
|
|
7
7
|
|
|
@@ -117,32 +117,34 @@ export default function Demo() {
|
|
|
117
117
|
</CardDescription>
|
|
118
118
|
</CardHeader>
|
|
119
119
|
<CardContent>
|
|
120
|
-
<
|
|
121
|
-
<
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
120
|
+
<Form>
|
|
121
|
+
<Flex direction="row" gap="md" wrap>
|
|
122
|
+
<FormField id="ni-price" label="価格">
|
|
123
|
+
<NumberInput
|
|
124
|
+
id="ni-price"
|
|
125
|
+
name="price"
|
|
126
|
+
value={price}
|
|
127
|
+
onValueChange={setPrice}
|
|
128
|
+
prefix="¥"
|
|
129
|
+
step={10}
|
|
130
|
+
min={0}
|
|
131
|
+
aria-label="価格"
|
|
132
|
+
/>
|
|
133
|
+
</FormField>
|
|
134
|
+
<FormField id="ni-discount" label="割引率">
|
|
135
|
+
<NumberInput
|
|
136
|
+
id="ni-discount"
|
|
137
|
+
name="discount"
|
|
138
|
+
value={discount}
|
|
139
|
+
onValueChange={setDiscount}
|
|
140
|
+
suffix="%"
|
|
141
|
+
min={0}
|
|
142
|
+
max={100}
|
|
143
|
+
aria-label="割引率"
|
|
144
|
+
/>
|
|
145
|
+
</FormField>
|
|
146
|
+
</Flex>
|
|
147
|
+
</Form>
|
|
146
148
|
</CardContent>
|
|
147
149
|
</Card>
|
|
148
150
|
|
|
@@ -175,26 +177,28 @@ export default function Demo() {
|
|
|
175
177
|
</CardDescription>
|
|
176
178
|
</CardHeader>
|
|
177
179
|
<CardContent>
|
|
178
|
-
<
|
|
179
|
-
<
|
|
180
|
-
<
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
180
|
+
<Form>
|
|
181
|
+
<Flex direction="row" gap="md" wrap>
|
|
182
|
+
<FormField id="ni-disabled" label="確定数量 (disabled)">
|
|
183
|
+
<NumberInput
|
|
184
|
+
id="ni-disabled"
|
|
185
|
+
name="locked_qty"
|
|
186
|
+
value={3}
|
|
187
|
+
disabled
|
|
188
|
+
aria-label="確定数量"
|
|
189
|
+
/>
|
|
190
|
+
</FormField>
|
|
191
|
+
<FormField id="ni-readonly" label="参照値 (readOnly)">
|
|
192
|
+
<NumberInput
|
|
193
|
+
id="ni-readonly"
|
|
194
|
+
name="ref_value"
|
|
195
|
+
value={128}
|
|
196
|
+
readOnly
|
|
197
|
+
aria-label="参照値"
|
|
198
|
+
/>
|
|
199
|
+
</FormField>
|
|
200
|
+
</Flex>
|
|
201
|
+
</Form>
|
|
198
202
|
</CardContent>
|
|
199
203
|
</Card>
|
|
200
204
|
|
|
@@ -206,20 +210,22 @@ export default function Demo() {
|
|
|
206
210
|
</CardDescription>
|
|
207
211
|
</CardHeader>
|
|
208
212
|
<CardContent>
|
|
209
|
-
<
|
|
210
|
-
<
|
|
211
|
-
<
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
<
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
<
|
|
221
|
-
|
|
222
|
-
|
|
213
|
+
<Form>
|
|
214
|
+
<Flex direction="col" gap="md">
|
|
215
|
+
<FormField id="ni-xs" label="xs">
|
|
216
|
+
<NumberInput id="ni-xs" size="xs" defaultValue={1} aria-label="xs サイズ" />
|
|
217
|
+
</FormField>
|
|
218
|
+
<FormField id="ni-sm" label="sm">
|
|
219
|
+
<NumberInput id="ni-sm" size="sm" defaultValue={2} aria-label="sm サイズ" />
|
|
220
|
+
</FormField>
|
|
221
|
+
<FormField id="ni-md" label="md (既定)">
|
|
222
|
+
<NumberInput id="ni-md" size="md" defaultValue={3} aria-label="md サイズ" />
|
|
223
|
+
</FormField>
|
|
224
|
+
<FormField id="ni-lg" label="lg">
|
|
225
|
+
<NumberInput id="ni-lg" size="lg" defaultValue={4} aria-label="lg サイズ" />
|
|
226
|
+
</FormField>
|
|
227
|
+
</Flex>
|
|
228
|
+
</Form>
|
|
223
229
|
</CardContent>
|
|
224
230
|
</Card>
|
|
225
231
|
|
|
@@ -234,23 +240,25 @@ export default function Demo() {
|
|
|
234
240
|
</CardDescription>
|
|
235
241
|
</CardHeader>
|
|
236
242
|
<CardContent>
|
|
237
|
-
<
|
|
238
|
-
<
|
|
239
|
-
<
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
<
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
243
|
+
<Form>
|
|
244
|
+
<Flex direction="col" gap="md" id="number-input-affixes">
|
|
245
|
+
<FormField id="ni-prefix" label="金額（前置き）">
|
|
246
|
+
<NumberInput id="ni-prefix" prefix="¥" defaultValue={1980} aria-label="金額" />
|
|
247
|
+
</FormField>
|
|
248
|
+
<FormField id="ni-suffix" label="日数（後置き）">
|
|
249
|
+
<NumberInput id="ni-suffix" suffix="日" defaultValue={7} aria-label="日数" />
|
|
250
|
+
</FormField>
|
|
251
|
+
<FormField id="ni-both" label="率（前後）">
|
|
252
|
+
<NumberInput
|
|
253
|
+
id="ni-both"
|
|
254
|
+
prefix="+"
|
|
255
|
+
suffix="%"
|
|
256
|
+
defaultValue={12}
|
|
257
|
+
aria-label="率"
|
|
258
|
+
/>
|
|
259
|
+
</FormField>
|
|
260
|
+
</Flex>
|
|
261
|
+
</Form>
|
|
254
262
|
</CardContent>
|
|
255
263
|
</Card>
|
|
256
264
|
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
CardHeader,
|
|
9
9
|
CardTitle,
|
|
10
10
|
} from "@godxjp/ui/data-display";
|
|
11
|
-
import { Field, FormField, RadioGroup, RadioItem } from "@godxjp/ui/data-entry";
|
|
11
|
+
import { Form, Field, FormField, RadioGroup, RadioItem } from "@godxjp/ui/data-entry";
|
|
12
12
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
13
13
|
|
|
14
14
|
/** 配送時間帯 · 選択肢が2〜4個を超えたときの見え方を確かめるための実データ。 */
|
|
@@ -218,33 +218,40 @@ export default function Demo() {
|
|
|
218
218
|
</CardDescription>
|
|
219
219
|
</CardHeader>
|
|
220
220
|
<CardContent>
|
|
221
|
-
<
|
|
222
|
-
<
|
|
223
|
-
<
|
|
221
|
+
<Form>
|
|
222
|
+
<Flex direction="col" gap="md">
|
|
223
|
+
<FormField
|
|
224
224
|
id="closing-day"
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
225
|
+
label="締め日"
|
|
226
|
+
required
|
|
227
|
+
error="締め日を選択してください"
|
|
228
|
+
>
|
|
229
|
+
<RadioGroup
|
|
230
|
+
id="closing-day"
|
|
231
|
+
name="closing_day"
|
|
232
|
+
orientation="horizontal"
|
|
233
|
+
options={CLOSING_DAYS.map((day) => ({ value: day, label: day }))}
|
|
234
|
+
/>
|
|
235
|
+
</FormField>
|
|
236
|
+
<FormField
|
|
236
237
|
id="tax-rounding"
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
238
|
+
label="消費税の端数処理"
|
|
239
|
+
helper="取引先との契約に合わせて選びます"
|
|
240
|
+
>
|
|
241
|
+
<RadioGroup
|
|
242
|
+
id="tax-rounding"
|
|
243
|
+
name="tax_rounding"
|
|
244
|
+
defaultValue="floor"
|
|
245
|
+
orientation="horizontal"
|
|
246
|
+
options={[
|
|
247
|
+
{ value: "round", label: "四捨五入" },
|
|
248
|
+
{ value: "floor", label: "切り捨て" },
|
|
249
|
+
{ value: "ceil", label: "切り上げ" },
|
|
250
|
+
]}
|
|
251
|
+
/>
|
|
252
|
+
</FormField>
|
|
253
|
+
</Flex>
|
|
254
|
+
</Form>
|
|
248
255
|
</CardContent>
|
|
249
256
|
</Card>
|
|
250
257
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
|
|
3
3
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
|
|
4
|
-
import { FormField, Rating } from "@godxjp/ui/data-entry";
|
|
4
|
+
import { Form, FormField, Rating } from "@godxjp/ui/data-entry";
|
|
5
5
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -29,19 +29,21 @@ export default function Demo() {
|
|
|
29
29
|
</CardDescription>
|
|
30
30
|
</CardHeader>
|
|
31
31
|
<CardContent>
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
32
|
+
<Form>
|
|
33
|
+
<Flex direction="col" gap="md">
|
|
34
|
+
<FormField id="vendor-rating" label="取引先評価">
|
|
35
|
+
<Rating name="vendor_rating" value={vendorScore} onValueChange={setVendorScore} />
|
|
36
|
+
</FormField>
|
|
37
|
+
<FormField id="quality-rating" label="品質スコア">
|
|
38
|
+
<Rating
|
|
39
|
+
name="quality_score"
|
|
40
|
+
value={qualityScore}
|
|
41
|
+
onValueChange={setQualityScore}
|
|
42
|
+
max={5}
|
|
43
|
+
/>
|
|
44
|
+
</FormField>
|
|
45
|
+
</Flex>
|
|
46
|
+
</Form>
|
|
45
47
|
</CardContent>
|
|
46
48
|
</Card>
|
|
47
49
|
|
|
@@ -54,17 +56,19 @@ export default function Demo() {
|
|
|
54
56
|
</CardDescription>
|
|
55
57
|
</CardHeader>
|
|
56
58
|
<CardContent>
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
59
|
+
<Form>
|
|
60
|
+
<Flex direction="col" gap="md">
|
|
61
|
+
<FormField id="avg-payment" label="支払い信頼性 (平均)">
|
|
62
|
+
<Rating value={4} readOnly />
|
|
63
|
+
</FormField>
|
|
64
|
+
<FormField id="avg-response" label="対応速度 (平均)">
|
|
65
|
+
<Rating value={3} readOnly />
|
|
66
|
+
</FormField>
|
|
67
|
+
<FormField id="avg-accuracy" label="請求正確性 (平均)">
|
|
68
|
+
<Rating value={5} readOnly />
|
|
69
|
+
</FormField>
|
|
70
|
+
</Flex>
|
|
71
|
+
</Form>
|
|
68
72
|
</CardContent>
|
|
69
73
|
</Card>
|
|
70
74
|
|
|
@@ -40,55 +40,57 @@ export default function Demo() {
|
|
|
40
40
|
{/* data-axe-open on the region: the gate presses the first `[role="combobox"]` inside it,
|
|
41
41
|
which is the compound SelectTrigger. */}
|
|
42
42
|
<CardContent data-axe-open>
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
43
|
+
<Form>
|
|
44
|
+
<Flex direction="col" gap="md">
|
|
45
|
+
<FormField
|
|
46
|
+
id="compound-controlled"
|
|
47
|
+
label="Controlled priority"
|
|
48
|
+
helper="Arrow keys move between enabled options"
|
|
49
|
+
>
|
|
50
|
+
<Select value={controlled} onValueChange={setControlled}>
|
|
51
|
+
<SelectTrigger id="compound-controlled" size="sm">
|
|
52
|
+
<SelectValue placeholder="選択" />
|
|
53
|
+
</SelectTrigger>
|
|
54
|
+
<SelectContent collisionPadding={16}>
|
|
55
|
+
<SelectGroup>
|
|
56
|
+
<SelectLabel>日本</SelectLabel>
|
|
57
|
+
<SelectItem value="tokyo">東京</SelectItem>
|
|
58
|
+
<SelectItem value="osaka">大阪</SelectItem>
|
|
59
|
+
</SelectGroup>
|
|
60
|
+
<SelectSeparator />
|
|
61
|
+
<SelectGroup>
|
|
62
|
+
<SelectLabel>Việt Nam</SelectLabel>
|
|
63
|
+
<SelectItem value="hcm">Thành phố Hồ Chí Minh</SelectItem>
|
|
64
|
+
<SelectItem value="danang" disabled>
|
|
65
|
+
Đà Nẵng（利用不可）
|
|
66
|
+
</SelectItem>
|
|
67
|
+
</SelectGroup>
|
|
68
|
+
</SelectContent>
|
|
69
|
+
</Select>
|
|
70
|
+
</FormField>
|
|
71
|
+
<FormField id="compound-uncontrolled" label="Uncontrolled default">
|
|
72
|
+
<Select defaultValue="osaka">
|
|
73
|
+
<SelectTrigger id="compound-uncontrolled" size="md">
|
|
74
|
+
<SelectValue />
|
|
75
|
+
</SelectTrigger>
|
|
76
|
+
<SelectContent position="popper" sideOffset={8} collisionPadding={24}>
|
|
56
77
|
<SelectItem value="tokyo">東京</SelectItem>
|
|
57
78
|
<SelectItem value="osaka">大阪</SelectItem>
|
|
58
|
-
</
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<SelectValue />
|
|
74
|
-
</SelectTrigger>
|
|
75
|
-
<SelectContent position="popper" sideOffset={8} collisionPadding={24}>
|
|
76
|
-
<SelectItem value="tokyo">東京</SelectItem>
|
|
77
|
-
<SelectItem value="osaka">大阪</SelectItem>
|
|
78
|
-
</SelectContent>
|
|
79
|
-
</Select>
|
|
80
|
-
</FormField>
|
|
81
|
-
<FormField id="compound-disabled" label="Disabled control">
|
|
82
|
-
<Select defaultValue="tokyo" disabled>
|
|
83
|
-
<SelectTrigger id="compound-disabled">
|
|
84
|
-
<SelectValue />
|
|
85
|
-
</SelectTrigger>
|
|
86
|
-
<SelectContent>
|
|
87
|
-
<SelectItem value="tokyo">東京</SelectItem>
|
|
88
|
-
</SelectContent>
|
|
89
|
-
</Select>
|
|
90
|
-
</FormField>
|
|
91
|
-
</Flex>
|
|
79
|
+
</SelectContent>
|
|
80
|
+
</Select>
|
|
81
|
+
</FormField>
|
|
82
|
+
<FormField id="compound-disabled" label="Disabled control">
|
|
83
|
+
<Select defaultValue="tokyo" disabled>
|
|
84
|
+
<SelectTrigger id="compound-disabled">
|
|
85
|
+
<SelectValue />
|
|
86
|
+
</SelectTrigger>
|
|
87
|
+
<SelectContent>
|
|
88
|
+
<SelectItem value="tokyo">東京</SelectItem>
|
|
89
|
+
</SelectContent>
|
|
90
|
+
</Select>
|
|
91
|
+
</FormField>
|
|
92
|
+
</Flex>
|
|
93
|
+
</Form>
|
|
92
94
|
</CardContent>
|
|
93
95
|
</Card>
|
|
94
96
|
|
|
@@ -11,6 +11,7 @@ import {
|
|
|
11
11
|
CardTitle,
|
|
12
12
|
} from "@godxjp/ui/data-display";
|
|
13
13
|
import {
|
|
14
|
+
Form,
|
|
14
15
|
FormField,
|
|
15
16
|
Select,
|
|
16
17
|
SelectContent,
|
|
@@ -334,44 +335,46 @@ export default function Demo() {
|
|
|
334
335
|
</CardDescription>
|
|
335
336
|
</CardHeader>
|
|
336
337
|
<CardContent>
|
|
337
|
-
<
|
|
338
|
-
<
|
|
339
|
-
<
|
|
340
|
-
<
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
<
|
|
345
|
-
<SelectItem value="medium">中</SelectItem>
|
|
346
|
-
<SelectItem value="low">低</SelectItem>
|
|
347
|
-
</SelectContent>
|
|
348
|
-
</Select>
|
|
349
|
-
</FormField>
|
|
350
|
-
<FormField id="priority" label="優先度 (size=sm)">
|
|
351
|
-
<Select value={priority} onValueChange={setPriority}>
|
|
352
|
-
<SelectTrigger size="sm" id="priority" aria-labelledby="priority-label">
|
|
353
|
-
<SelectValue placeholder="優先度" />
|
|
354
|
-
</SelectTrigger>
|
|
355
|
-
<SelectContent>
|
|
356
|
-
<SelectGroup>
|
|
357
|
-
<SelectLabel>標準</SelectLabel>
|
|
338
|
+
<Form>
|
|
339
|
+
<Flex direction="col" gap="md">
|
|
340
|
+
<FormField id="priority-md" label="優先度 (size=md)">
|
|
341
|
+
<Select value={priorityMd} onValueChange={setPriorityMd}>
|
|
342
|
+
<SelectTrigger size="md" id="priority-md" aria-labelledby="priority-md-label">
|
|
343
|
+
<SelectValue placeholder="優先度" />
|
|
344
|
+
</SelectTrigger>
|
|
345
|
+
<SelectContent>
|
|
358
346
|
<SelectItem value="high">高</SelectItem>
|
|
359
347
|
<SelectItem value="medium">中</SelectItem>
|
|
360
348
|
<SelectItem value="low">低</SelectItem>
|
|
361
|
-
</
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
349
|
+
</SelectContent>
|
|
350
|
+
</Select>
|
|
351
|
+
</FormField>
|
|
352
|
+
<FormField id="priority" label="優先度 (size=sm)">
|
|
353
|
+
<Select value={priority} onValueChange={setPriority}>
|
|
354
|
+
<SelectTrigger size="sm" id="priority" aria-labelledby="priority-label">
|
|
355
|
+
<SelectValue placeholder="優先度" />
|
|
356
|
+
</SelectTrigger>
|
|
357
|
+
<SelectContent>
|
|
358
|
+
<SelectGroup>
|
|
359
|
+
<SelectLabel>標準</SelectLabel>
|
|
360
|
+
<SelectItem value="high">高</SelectItem>
|
|
361
|
+
<SelectItem value="medium">中</SelectItem>
|
|
362
|
+
<SelectItem value="low">低</SelectItem>
|
|
363
|
+
</SelectGroup>
|
|
364
|
+
<SelectSeparator />
|
|
365
|
+
<SelectGroup>
|
|
366
|
+
<SelectLabel>追加レベル</SelectLabel>
|
|
367
|
+
{Array.from({ length: 24 }, (_, index) => (
|
|
368
|
+
<SelectItem key={index} value={`level-${index + 1}`}>
|
|
369
|
+
レベル {index + 1}
|
|
370
|
+
</SelectItem>
|
|
371
|
+
))}
|
|
372
|
+
</SelectGroup>
|
|
373
|
+
</SelectContent>
|
|
374
|
+
</Select>
|
|
375
|
+
</FormField>
|
|
376
|
+
</Flex>
|
|
377
|
+
</Form>
|
|
375
378
|
</CardContent>
|
|
376
379
|
</Card>
|
|
377
380
|
<Card>
|