@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
|
@@ -39,49 +39,51 @@ export default function Demo() {
|
|
|
39
39
|
</CardDescription>
|
|
40
40
|
</CardHeader>
|
|
41
41
|
<CardContent>
|
|
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
|
-
label="承認状態"
|
|
68
|
-
required
|
|
69
|
-
helper="承認ワークフローで使用します"
|
|
70
|
-
error="承認状態を選択してください"
|
|
71
|
-
>
|
|
72
|
-
<Select
|
|
42
|
+
<Form>
|
|
43
|
+
<Flex direction="col" gap="md">
|
|
44
|
+
<FormField id="ff-name" label="取引先名" required helper="最大50文字">
|
|
45
|
+
<Input id="ff-name" placeholder="株式会社..." />
|
|
46
|
+
</FormField>
|
|
47
|
+
<FormField
|
|
48
|
+
id="ff-email"
|
|
49
|
+
label="メール"
|
|
50
|
+
error="メールアドレスの形式が正しくありません"
|
|
51
|
+
>
|
|
52
|
+
<Input id="ff-email" type="email" defaultValue="invalid@" />
|
|
53
|
+
</FormField>
|
|
54
|
+
<FormField id="ff-status" label="状態" helper="未選択の場合は下書きになります">
|
|
55
|
+
<Select
|
|
56
|
+
id="ff-status"
|
|
57
|
+
name="status"
|
|
58
|
+
value="paid"
|
|
59
|
+
onValueChange={() => {}}
|
|
60
|
+
options={[
|
|
61
|
+
{ value: "draft", label: "下書き" },
|
|
62
|
+
{ value: "paid", label: "入金済" },
|
|
63
|
+
]}
|
|
64
|
+
/>
|
|
65
|
+
</FormField>
|
|
66
|
+
<FormField
|
|
73
67
|
id="ff-required-status"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
68
|
+
label="承認状態"
|
|
69
|
+
required
|
|
70
|
+
helper="承認ワークフローで使用します"
|
|
71
|
+
error="承認状態を選択してください"
|
|
72
|
+
>
|
|
73
|
+
<Select
|
|
74
|
+
id="ff-required-status"
|
|
75
|
+
name="approval_status"
|
|
76
|
+
value=""
|
|
77
|
+
onValueChange={() => {}}
|
|
78
|
+
placeholder="状態を選択"
|
|
79
|
+
options={[
|
|
80
|
+
{ value: "pending", label: "承認待ち" },
|
|
81
|
+
{ value: "approved", label: "承認済み" },
|
|
82
|
+
]}
|
|
83
|
+
/>
|
|
84
|
+
</FormField>
|
|
85
|
+
</Flex>
|
|
86
|
+
</Form>
|
|
85
87
|
</CardContent>
|
|
86
88
|
</Card>
|
|
87
89
|
|
|
@@ -261,21 +263,23 @@ export default function Demo() {
|
|
|
261
263
|
</CardDescription>
|
|
262
264
|
</CardHeader>
|
|
263
265
|
<CardContent>
|
|
264
|
-
<
|
|
265
|
-
<
|
|
266
|
-
<
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
<
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
266
|
+
<Form>
|
|
267
|
+
<Flex direction="col" gap="md">
|
|
268
|
+
<FormField id="state-readonly" label="作成者" helper="システム管理項目">
|
|
269
|
+
<Input id="state-readonly" readOnly defaultValue="山田 太郎" />
|
|
270
|
+
</FormField>
|
|
271
|
+
<FormField id="state-disabled" label="契約番号">
|
|
272
|
+
<Input id="state-disabled" disabled defaultValue="CTR-2026-0042" />
|
|
273
|
+
</FormField>
|
|
274
|
+
<FormField
|
|
275
|
+
id="state-server"
|
|
276
|
+
label="組織名"
|
|
277
|
+
error="保存できませんでした。しばらくしてから再試行してください。"
|
|
278
|
+
>
|
|
279
|
+
<Input id="state-server" defaultValue="株式会社アクメ" />
|
|
280
|
+
</FormField>
|
|
281
|
+
</Flex>
|
|
282
|
+
</Form>
|
|
279
283
|
</CardContent>
|
|
280
284
|
</Card>
|
|
281
285
|
|
package/docs/data-entry/form.tsx
CHANGED
|
@@ -773,45 +773,47 @@ export default function Demo() {
|
|
|
773
773
|
</CardDescription>
|
|
774
774
|
</CardHeader>
|
|
775
775
|
<CardContent>
|
|
776
|
-
<
|
|
777
|
-
<
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
<
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
{
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
<
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
{
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
776
|
+
<Form>
|
|
777
|
+
<Flex direction="col" gap="md">
|
|
778
|
+
<Field
|
|
779
|
+
id="f-terms"
|
|
780
|
+
label="利用規約に同意する"
|
|
781
|
+
description="同意しないと送信できません"
|
|
782
|
+
>
|
|
783
|
+
<Checkbox id="f-terms" checked={terms} onCheckedChange={(c) => setTerms(!!c)} />
|
|
784
|
+
</Field>
|
|
785
|
+
<FormField id="f-channels" label="通知チャネル" helper="複数選択可">
|
|
786
|
+
<CheckboxGroup
|
|
787
|
+
value={channels}
|
|
788
|
+
onValueChange={setChannels}
|
|
789
|
+
options={[
|
|
790
|
+
{ value: "email", label: "メール" },
|
|
791
|
+
{ value: "slack", label: "Slack" },
|
|
792
|
+
{ value: "sms", label: "SMS" },
|
|
793
|
+
]}
|
|
794
|
+
/>
|
|
795
|
+
</FormField>
|
|
796
|
+
<FormField id="f-rounding" label="端数処理">
|
|
797
|
+
<RadioGroup
|
|
798
|
+
value={rounding}
|
|
799
|
+
onValueChange={setRounding}
|
|
800
|
+
orientation="horizontal"
|
|
801
|
+
options={[
|
|
802
|
+
{ value: "round", label: "四捨五入" },
|
|
803
|
+
{ value: "floor", label: "切り捨て" },
|
|
804
|
+
{ value: "ceil", label: "切り上げ" },
|
|
805
|
+
]}
|
|
806
|
+
/>
|
|
807
|
+
</FormField>
|
|
808
|
+
<Field
|
|
809
|
+
id="f-active"
|
|
810
|
+
label="取引を有効にする"
|
|
811
|
+
description="無効にすると新規取引を登録できません"
|
|
812
|
+
>
|
|
813
|
+
<Switch id="f-active" checked={active} onCheckedChange={setActive} />
|
|
814
|
+
</Field>
|
|
815
|
+
</Flex>
|
|
816
|
+
</Form>
|
|
815
817
|
</CardContent>
|
|
816
818
|
</Card>
|
|
817
819
|
|
|
@@ -823,28 +825,30 @@ export default function Demo() {
|
|
|
823
825
|
</CardDescription>
|
|
824
826
|
</CardHeader>
|
|
825
827
|
<CardContent>
|
|
826
|
-
<
|
|
827
|
-
<
|
|
828
|
-
<
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
<
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
828
|
+
<Form>
|
|
829
|
+
<Flex direction="col" gap="md">
|
|
830
|
+
<FormField id="f-tax" label={`消費税率: ${taxRate[0]}%`} helper="0% / 8% / 10%">
|
|
831
|
+
<Slider
|
|
832
|
+
id="f-tax"
|
|
833
|
+
value={taxRate}
|
|
834
|
+
onValueChange={setTaxRate}
|
|
835
|
+
min={0}
|
|
836
|
+
max={10}
|
|
837
|
+
step={2}
|
|
838
|
+
name="tax_rate"
|
|
839
|
+
aria-label="消費税率"
|
|
840
|
+
/>
|
|
841
|
+
</FormField>
|
|
842
|
+
<FormField id="f-score" label="取引先評価">
|
|
843
|
+
<Rating
|
|
844
|
+
name="vendor_score"
|
|
845
|
+
aria-label="取引先評価"
|
|
846
|
+
value={score}
|
|
847
|
+
onValueChange={setScore}
|
|
848
|
+
/>
|
|
849
|
+
</FormField>
|
|
850
|
+
</Flex>
|
|
851
|
+
</Form>
|
|
848
852
|
</CardContent>
|
|
849
853
|
</Card>
|
|
850
854
|
|
|
@@ -931,51 +935,53 @@ export default function Demo() {
|
|
|
931
935
|
</CardDescription>
|
|
932
936
|
</CardHeader>
|
|
933
937
|
<CardContent>
|
|
934
|
-
<
|
|
935
|
-
<
|
|
936
|
-
<
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
<
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
<
|
|
958
|
-
<
|
|
959
|
-
<
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
<
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
938
|
+
<Form>
|
|
939
|
+
<Flex direction="col" gap="md">
|
|
940
|
+
<FormField id="f-tags" label="ラベル" helper="Enter またはカンマで追加">
|
|
941
|
+
<TagInput
|
|
942
|
+
value={tags}
|
|
943
|
+
onValueChange={setTags}
|
|
944
|
+
placeholder="ラベルを追加…"
|
|
945
|
+
name="labels"
|
|
946
|
+
/>
|
|
947
|
+
</FormField>
|
|
948
|
+
<FormField id="f-period2" label="集計期間">
|
|
949
|
+
<ToggleGroup
|
|
950
|
+
type="single"
|
|
951
|
+
value={period2}
|
|
952
|
+
onValueChange={(v) => {
|
|
953
|
+
if (v) setPeriod2(v);
|
|
954
|
+
}}
|
|
955
|
+
>
|
|
956
|
+
<ToggleGroupItem value="daily">日次</ToggleGroupItem>
|
|
957
|
+
<ToggleGroupItem value="monthly">月次</ToggleGroupItem>
|
|
958
|
+
<ToggleGroupItem value="yearly">年次</ToggleGroupItem>
|
|
959
|
+
</ToggleGroup>
|
|
960
|
+
</FormField>
|
|
961
|
+
<FormField id="f-otp" label="認証コード" helper="メールに届いた6桁の数字">
|
|
962
|
+
<InputOTP id="f-otp" maxLength={6} value={otp} onChange={setOtp}>
|
|
963
|
+
<InputOTPGroup>
|
|
964
|
+
<InputOTPSlot index={0} />
|
|
965
|
+
<InputOTPSlot index={1} />
|
|
966
|
+
<InputOTPSlot index={2} />
|
|
967
|
+
<InputOTPSlot index={3} />
|
|
968
|
+
<InputOTPSlot index={4} />
|
|
969
|
+
<InputOTPSlot index={5} />
|
|
970
|
+
</InputOTPGroup>
|
|
971
|
+
</InputOTP>
|
|
972
|
+
</FormField>
|
|
973
|
+
<FormField id="f-files" label="添付ファイル" helper="PDF・Excel（最大5件）">
|
|
974
|
+
<Upload
|
|
975
|
+
variant="dropzone"
|
|
976
|
+
value={files}
|
|
977
|
+
onValueChange={setFiles}
|
|
978
|
+
accept=".pdf,.xlsx,.csv"
|
|
979
|
+
maxCount={5}
|
|
980
|
+
onUpload={noopUpload}
|
|
981
|
+
/>
|
|
982
|
+
</FormField>
|
|
983
|
+
</Flex>
|
|
984
|
+
</Form>
|
|
979
985
|
</CardContent>
|
|
980
986
|
</Card>
|
|
981
987
|
|