@novi-ui/raster 0.6.0 → 0.7.0

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.
Files changed (51) hide show
  1. package/dist/combo-box/combo-box.d.mts +36 -0
  2. package/dist/combo-box/combo-box.d.mts.map +1 -0
  3. package/dist/combo-box/combo-box.mjs +128 -0
  4. package/dist/combo-box/combo-box.mjs.map +1 -0
  5. package/dist/combo-box/combo-box.styles.d.mts +88 -0
  6. package/dist/combo-box/combo-box.styles.d.mts.map +1 -0
  7. package/dist/combo-box/combo-box.styles.mjs +110 -0
  8. package/dist/combo-box/combo-box.styles.mjs.map +1 -0
  9. package/dist/combo-box/index.d.mts +3 -0
  10. package/dist/date-picker/date-picker.d.mts +15 -0
  11. package/dist/date-picker/date-picker.d.mts.map +1 -0
  12. package/dist/date-picker/date-picker.mjs +161 -0
  13. package/dist/date-picker/date-picker.mjs.map +1 -0
  14. package/dist/date-picker/date-picker.styles.d.mts +103 -0
  15. package/dist/date-picker/date-picker.styles.d.mts.map +1 -0
  16. package/dist/date-picker/date-picker.styles.mjs +126 -0
  17. package/dist/date-picker/date-picker.styles.mjs.map +1 -0
  18. package/dist/date-picker/index.d.mts +3 -0
  19. package/dist/index.d.mts +16 -1
  20. package/dist/index.mjs +11 -1
  21. package/dist/number-field/index.d.mts +3 -0
  22. package/dist/number-field/number-field.d.mts +15 -0
  23. package/dist/number-field/number-field.d.mts.map +1 -0
  24. package/dist/number-field/number-field.mjs +114 -0
  25. package/dist/number-field/number-field.mjs.map +1 -0
  26. package/dist/number-field/number-field.styles.d.mts +76 -0
  27. package/dist/number-field/number-field.styles.d.mts.map +1 -0
  28. package/dist/number-field/number-field.styles.mjs +90 -0
  29. package/dist/number-field/number-field.styles.mjs.map +1 -0
  30. package/dist/pagination/index.d.mts +3 -0
  31. package/dist/pagination/pagination.d.mts +13 -0
  32. package/dist/pagination/pagination.d.mts.map +1 -0
  33. package/dist/pagination/pagination.mjs +97 -0
  34. package/dist/pagination/pagination.mjs.map +1 -0
  35. package/dist/pagination/pagination.styles.d.mts +73 -0
  36. package/dist/pagination/pagination.styles.d.mts.map +1 -0
  37. package/dist/pagination/pagination.styles.mjs +95 -0
  38. package/dist/pagination/pagination.styles.mjs.map +1 -0
  39. package/dist/select/select.d.mts +1 -1
  40. package/dist/select/select.mjs +1 -1
  41. package/dist/select/select.mjs.map +1 -1
  42. package/dist/table/index.d.mts +3 -0
  43. package/dist/table/table.d.mts +104 -0
  44. package/dist/table/table.d.mts.map +1 -0
  45. package/dist/table/table.mjs +172 -0
  46. package/dist/table/table.mjs.map +1 -0
  47. package/dist/table/table.styles.d.mts +58 -0
  48. package/dist/table/table.styles.d.mts.map +1 -0
  49. package/dist/table/table.styles.mjs +82 -0
  50. package/dist/table/table.styles.mjs.map +1 -0
  51. package/package.json +3 -2
@@ -0,0 +1,36 @@
1
+ import { ReactNode } from "react";
2
+ import { ComboBoxProps } from "@novi-ui/core";
3
+ //#region src/combo-box/combo-box.d.ts
4
+ interface ComboBoxItemProps {
5
+ /** 選択値。`onSelectionChange` に渡る */
6
+ id: string;
7
+ isDisabled?: boolean;
8
+ children?: ReactNode;
9
+ className?: string;
10
+ }
11
+ /**
12
+ * ComboBox の選択肢。`ComboBox` の子として置く。
13
+ *
14
+ * 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する
15
+ * 文字列を持てないため、絞り込みの対象にならない。
16
+ *
17
+ * @example
18
+ * <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
19
+ */
20
+ declare function ComboBoxItem({ id, isDisabled, children, className }: ComboBoxItemProps): import("react").JSX.Element;
21
+ /**
22
+ * 文字を打って絞り込み、一覧から1つ選ぶ。
23
+ *
24
+ * 一覧は入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。
25
+ * IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。
26
+ *
27
+ * @example
28
+ * <ComboBox label="都道府県" onSelectionChange={setPref}>
29
+ * <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
30
+ * <ComboBoxItem id="osaka">大阪府</ComboBoxItem>
31
+ * </ComboBox>
32
+ */
33
+ declare function ComboBox({ variant, size, radius, label, placeholder, description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger, onOpenChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: ComboBoxProps): import("react").JSX.Element;
34
+ //#endregion
35
+ export { ComboBox, ComboBoxItem, ComboBoxItemProps };
36
+ //# sourceMappingURL=combo-box.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combo-box.d.mts","names":[],"sources":["../../src/combo-box/combo-box.tsx"],"mappings":";;;UA4BiB;;EAEf;EACA;EACA,WAAW;EACX;;;;;;;;;;;iBAYc,eAAe,IAAI,YAAY,UAAU,aAAa,oCAAiB,IAAA;;;;;;;;;;;;;iBA0BvE,WACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,aACA,oBACA,mBACA,YACA,mBACA,eACA,mBACA,aACA,cACA,WACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,gCAAa,IAAA"}
@@ -0,0 +1,128 @@
1
+ "use client";
2
+ import { comboBoxStyles } from "./combo-box.styles.mjs";
3
+ import { Button, ComboBox, FieldError, Group, Input, Label, ListBox, ListBoxItem, Popover, Text } from "react-aria-components";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { useImeSafeKeys } from "@novi-ui/core/client";
6
+ //#region src/combo-box/combo-box.tsx
7
+ /** 開閉を示す記号。Select と同じ上下の線。 */
8
+ function TriggerIcon() {
9
+ return /* @__PURE__ */ jsx("svg", {
10
+ viewBox: "0 0 16 16",
11
+ width: "0.75em",
12
+ height: "0.75em",
13
+ fill: "none",
14
+ "aria-hidden": "true",
15
+ children: /* @__PURE__ */ jsx("path", {
16
+ d: "M4 6.5l4 4 4-4",
17
+ stroke: "currentColor",
18
+ strokeWidth: "1.5"
19
+ })
20
+ });
21
+ }
22
+ /**
23
+ * ComboBox の選択肢。`ComboBox` の子として置く。
24
+ *
25
+ * 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する
26
+ * 文字列を持てないため、絞り込みの対象にならない。
27
+ *
28
+ * @example
29
+ * <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
30
+ */
31
+ function ComboBoxItem({ id, isDisabled, children, className }) {
32
+ return /* @__PURE__ */ jsx(ListBoxItem, {
33
+ id,
34
+ isDisabled,
35
+ textValue: typeof children === "string" ? children : void 0,
36
+ "data-slot": "option",
37
+ className: className ?? comboBoxStyles().option(),
38
+ children
39
+ });
40
+ }
41
+ /**
42
+ * 文字を打って絞り込み、一覧から1つ選ぶ。
43
+ *
44
+ * 一覧は入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。
45
+ * IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。
46
+ *
47
+ * @example
48
+ * <ComboBox label="都道府県" onSelectionChange={setPref}>
49
+ * <ComboBoxItem id="tokyo">東京都</ComboBoxItem>
50
+ * <ComboBoxItem id="osaka">大阪府</ComboBoxItem>
51
+ * </ComboBox>
52
+ */
53
+ function ComboBox$1({ variant, size, radius, label, placeholder, description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger, onOpenChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
54
+ const s = comboBoxStyles({
55
+ variant,
56
+ size,
57
+ radius
58
+ });
59
+ const keyProps = useImeSafeKeys(onKeyDown);
60
+ return /* @__PURE__ */ jsxs(ComboBox, {
61
+ id,
62
+ name,
63
+ selectedKey,
64
+ defaultSelectedKey,
65
+ onSelectionChange: (key) => onSelectionChange?.(key === null ? null : String(key)),
66
+ inputValue,
67
+ defaultInputValue,
68
+ onInputChange,
69
+ allowsCustomValue,
70
+ menuTrigger,
71
+ onOpenChange,
72
+ isDisabled,
73
+ isReadOnly,
74
+ isRequired,
75
+ isInvalid,
76
+ "data-slot": "root",
77
+ className: s.root({ class: [className, classNames?.root] }),
78
+ children: [
79
+ label !== void 0 && /* @__PURE__ */ jsx(Label, {
80
+ "data-slot": "label",
81
+ className: s.label({ class: classNames?.label }),
82
+ children: label
83
+ }),
84
+ /* @__PURE__ */ jsxs(Group, {
85
+ "data-slot": "inputWrapper",
86
+ className: s.inputWrapper({ class: classNames?.inputWrapper }),
87
+ children: [/* @__PURE__ */ jsx(Input, {
88
+ "data-slot": "input",
89
+ placeholder,
90
+ className: s.input({ class: classNames?.input }),
91
+ ...keyProps
92
+ }), /* @__PURE__ */ jsx(Button, {
93
+ "data-slot": "trigger",
94
+ className: s.trigger({ class: classNames?.trigger }),
95
+ children: /* @__PURE__ */ jsx("span", {
96
+ "data-slot": "icon",
97
+ className: s.icon({ class: classNames?.icon }),
98
+ children: /* @__PURE__ */ jsx(TriggerIcon, {})
99
+ })
100
+ })]
101
+ }),
102
+ description !== void 0 && /* @__PURE__ */ jsx(Text, {
103
+ slot: "description",
104
+ "data-slot": "description",
105
+ className: s.description({ class: classNames?.description }),
106
+ children: description
107
+ }),
108
+ /* @__PURE__ */ jsx(FieldError, {
109
+ "data-slot": "errorMessage",
110
+ className: s.errorMessage({ class: classNames?.errorMessage }),
111
+ children: errorMessage
112
+ }),
113
+ /* @__PURE__ */ jsx(Popover, {
114
+ "data-slot": "popover",
115
+ className: s.popover({ class: classNames?.popover }),
116
+ children: /* @__PURE__ */ jsx(ListBox, {
117
+ "data-slot": "listbox",
118
+ className: s.listbox({ class: classNames?.listbox }),
119
+ children
120
+ })
121
+ })
122
+ ]
123
+ });
124
+ }
125
+ //#endregion
126
+ export { ComboBox$1 as ComboBox, ComboBoxItem };
127
+
128
+ //# sourceMappingURL=combo-box.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combo-box.mjs","names":["ComboBox","RACComboBox"],"sources":["../../src/combo-box/combo-box.tsx"],"sourcesContent":["'use client'\n\nimport type { ComboBoxProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport type { ReactNode } from 'react'\nimport {\n Button,\n FieldError,\n Group,\n Input,\n Label,\n ListBox,\n ListBoxItem,\n Popover,\n ComboBox as RACComboBox,\n Text,\n} from 'react-aria-components'\nimport { comboBoxStyles } from './combo-box.styles'\n\n/** 開閉を示す記号。Select と同じ上下の線。 */\nfunction TriggerIcon() {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M4 6.5l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n </svg>\n )\n}\n\nexport interface ComboBoxItemProps {\n /** 選択値。`onSelectionChange` に渡る */\n id: string\n isDisabled?: boolean\n children?: ReactNode\n className?: string\n}\n\n/**\n * ComboBox の選択肢。`ComboBox` の子として置く。\n *\n * 絞り込みは文字列の子に対して働く。要素を子にするときは `textValue` に相当する\n * 文字列を持てないため、絞り込みの対象にならない。\n *\n * @example\n * <ComboBoxItem id=\"tokyo\">東京都</ComboBoxItem>\n */\nexport function ComboBoxItem({ id, isDisabled, children, className }: ComboBoxItemProps) {\n return (\n <ListBoxItem\n id={id}\n isDisabled={isDisabled}\n textValue={typeof children === 'string' ? children : undefined}\n data-slot=\"option\"\n className={className ?? comboBoxStyles().option()}\n >\n {children}\n </ListBoxItem>\n )\n}\n\n/**\n * 文字を打って絞り込み、一覧から1つ選ぶ。\n *\n * 一覧は入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。\n * IME 変換中の Enter と矢印キーは一覧に届かず、変換確定で誤選択しない。\n *\n * @example\n * <ComboBox label=\"都道府県\" onSelectionChange={setPref}>\n * <ComboBoxItem id=\"tokyo\">東京都</ComboBoxItem>\n * <ComboBoxItem id=\"osaka\">大阪府</ComboBoxItem>\n * </ComboBox>\n */\nexport function ComboBox({\n variant,\n size,\n radius,\n label,\n placeholder,\n description,\n errorMessage,\n name,\n selectedKey,\n defaultSelectedKey,\n onSelectionChange,\n inputValue,\n defaultInputValue,\n onInputChange,\n allowsCustomValue,\n menuTrigger,\n onOpenChange,\n onKeyDown,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n children,\n className,\n classNames,\n id,\n}: ComboBoxProps) {\n const s = comboBoxStyles({ variant, size, radius })\n const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n return (\n <RACComboBox\n id={id}\n name={name}\n selectedKey={selectedKey}\n defaultSelectedKey={defaultSelectedKey}\n onSelectionChange={(key) => onSelectionChange?.(key === null ? null : String(key))}\n inputValue={inputValue}\n defaultInputValue={defaultInputValue}\n onInputChange={onInputChange}\n allowsCustomValue={allowsCustomValue}\n menuTrigger={menuTrigger}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n data-slot=\"root\"\n className={s.root({ class: [className, classNames?.root] })}\n >\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n\n <Group\n data-slot=\"inputWrapper\"\n className={s.inputWrapper({ class: classNames?.inputWrapper })}\n >\n <Input\n data-slot=\"input\"\n placeholder={placeholder}\n className={s.input({ class: classNames?.input })}\n {...keyProps}\n />\n <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n <span data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n <TriggerIcon />\n </span>\n </Button>\n </Group>\n\n {description !== undefined && (\n <Text\n slot=\"description\"\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </Text>\n )}\n\n <FieldError\n data-slot=\"errorMessage\"\n className={s.errorMessage({ class: classNames?.errorMessage })}\n >\n {errorMessage}\n </FieldError>\n\n <Popover data-slot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n {children}\n </ListBox>\n </Popover>\n </RACComboBox>\n )\n}\n"],"mappings":";;;;;;;AAoBA,SAAS,cAAc;CACrB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAiB,QAAO;GAAe,aAAY;EAAO,CAAA;CAC/D,CAAA;AAET;;;;;;;;;;AAmBA,SAAgB,aAAa,EAAE,IAAI,YAAY,UAAU,aAAgC;CACvF,OACE,oBAAC,aAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,aAAa,eAAe,CAAC,CAAC,OAAO;EAE/C;CACU,CAAA;AAEjB;;;;;;;;;;;;;AAcA,SAAgBA,WAAS,EACvB,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,aACA,oBACA,mBACA,YACA,mBACA,eACA,mBACA,aACA,cACA,WACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAS;EAAM;CAAO,CAAC;CAClD,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAACC,UAAD;EACM;EACE;EACO;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC;EACrE;EACO;EACJ;EACI;EACN;EACC;EACF;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAjB5D,UAAA;GAmBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,OAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAF/D,UAAA,CAIE,oBAAC,OAAD;KACE,aAAU;KACG;KACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;KAC/C,GAAI;IACL,CAAA,GACD,oBAAC,QAAD;KAAQ,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E,UAAA,oBAAC,QAAD;MAAM,aAAU;MAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;MAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;KACV,CAAA;IACA,CAAA,CACH;;GAEN,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;GAEZ,oBAAC,SAAD;IAAS,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAC9E,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACF,CAAA;EACE;;AAEjB"}
@@ -0,0 +1,88 @@
1
+ import { VariantMap } from "@novi-ui/core";
2
+ //#region src/combo-box/combo-box.styles.d.ts
3
+ /**
4
+ * ComboBox のスタイル定義。
5
+ *
6
+ * @example
7
+ * import { comboBoxStyles } from '@novi-ui/raster'
8
+ * import { tv } from 'tailwind-variants'
9
+ *
10
+ * const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })
11
+ */
12
+ declare const comboBoxStyles: import("tailwind-variants").TVReturnType<{
13
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
14
+ inputWrapper: string;
15
+ }>;
16
+ size: VariantMap<"sm" | "md" | "lg", {
17
+ inputWrapper: string;
18
+ input: string;
19
+ option: string;
20
+ }>;
21
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
22
+ inputWrapper: string;
23
+ }>;
24
+ }, {
25
+ root: string;
26
+ label: string;
27
+ inputWrapper: string;
28
+ input: string;
29
+ trigger: string;
30
+ icon: string;
31
+ popover: string;
32
+ listbox: string;
33
+ option: string;
34
+ description: string;
35
+ errorMessage: string;
36
+ }, undefined, {
37
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
38
+ inputWrapper: string;
39
+ }>;
40
+ size: VariantMap<"sm" | "md" | "lg", {
41
+ inputWrapper: string;
42
+ input: string;
43
+ option: string;
44
+ }>;
45
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
46
+ inputWrapper: string;
47
+ }>;
48
+ }, {
49
+ root: string;
50
+ label: string;
51
+ inputWrapper: string;
52
+ input: string;
53
+ trigger: string;
54
+ icon: string;
55
+ popover: string;
56
+ listbox: string;
57
+ option: string;
58
+ description: string;
59
+ errorMessage: string;
60
+ }, import("tailwind-variants").TVReturnTypeLike<{
61
+ variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
62
+ inputWrapper: string;
63
+ }>;
64
+ size: VariantMap<"sm" | "md" | "lg", {
65
+ inputWrapper: string;
66
+ input: string;
67
+ option: string;
68
+ }>;
69
+ radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
70
+ inputWrapper: string;
71
+ }>;
72
+ }, {
73
+ root: string;
74
+ label: string;
75
+ inputWrapper: string;
76
+ input: string;
77
+ trigger: string;
78
+ icon: string;
79
+ popover: string;
80
+ listbox: string;
81
+ option: string;
82
+ description: string;
83
+ errorMessage: string;
84
+ }>>;
85
+ type ComboBoxStyleProps = Parameters<typeof comboBoxStyles>[0];
86
+ //#endregion
87
+ export { ComboBoxStyleProps, comboBoxStyles };
88
+ //# sourceMappingURL=combo-box.styles.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combo-box.styles.d.mts","names":[],"sources":["../../src/combo-box/combo-box.styles.ts"],"mappings":";;;;;;;;;;;cAsHa,4CAAc;;IAhD4B;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;;IA/BE;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;;IA/BE;;;IAaN;IAAe;IAAgB;;;IAkB3B;;;;;;;;;;;;;;;KAuBzC,qBAAqB,kBAAkB"}
@@ -0,0 +1,110 @@
1
+ import { disabledState, focusRing } from "../styles/focus-ring.mjs";
2
+ import { tv } from "tailwind-variants";
3
+ //#region src/combo-box/combo-box.styles.ts
4
+ const slots = {
5
+ root: "flex flex-col gap-1.5",
6
+ label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
7
+ inputWrapper: [
8
+ "text-[var(--novi-color-fg)]",
9
+ "flex items-center w-full overflow-hidden",
10
+ "bg-[var(--novi-color-bg)]",
11
+ "border border-[var(--novi-color-border-strong)]",
12
+ "transition-[border-color,opacity]",
13
+ "duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
14
+ "data-[invalid]:border-[var(--novi-color-danger)]",
15
+ focusRing,
16
+ disabledState
17
+ ].join(" "),
18
+ input: [
19
+ "w-full min-w-0 bg-transparent outline-none",
20
+ "text-[var(--novi-color-fg)]",
21
+ "placeholder:text-[var(--novi-color-muted)]"
22
+ ].join(" "),
23
+ trigger: [
24
+ "shrink-0 self-stretch inline-flex items-center justify-center w-8",
25
+ "text-[var(--novi-color-muted)]",
26
+ "border-l border-[var(--novi-color-border)]",
27
+ "outline-none",
28
+ "hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
29
+ "data-[focus-visible]:text-[var(--novi-color-fg)]",
30
+ "data-[disabled]:opacity-40 data-[disabled]:cursor-default",
31
+ "transition-[color,background-color]",
32
+ "duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
33
+ ].join(" "),
34
+ icon: "shrink-0 inline-flex",
35
+ popover: [
36
+ "bg-[var(--novi-color-bg)]",
37
+ "text-[var(--novi-color-fg)]",
38
+ "border border-[var(--novi-color-border)]",
39
+ "rounded-[var(--novi-radius-lg)]",
40
+ "shadow-[var(--novi-shadow-md)]",
41
+ "w-[var(--trigger-width)]",
42
+ "overflow-auto max-h-64"
43
+ ].join(" "),
44
+ listbox: "outline-none p-1 flex flex-col",
45
+ option: [
46
+ "flex items-center justify-between gap-[var(--novi-gap-inline)]",
47
+ "px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none",
48
+ "text-[var(--novi-color-fg)]",
49
+ "rounded-[var(--novi-radius-sm)]",
50
+ "data-[focused]:bg-[var(--novi-color-subtle)]",
51
+ "data-[selected]:font-medium",
52
+ "data-[disabled]:opacity-40 data-[disabled]:cursor-default"
53
+ ].join(" "),
54
+ description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
55
+ errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
56
+ };
57
+ /**
58
+ * ComboBox のスタイル定義。
59
+ *
60
+ * @example
61
+ * import { comboBoxStyles } from '@novi-ui/raster'
62
+ * import { tv } from 'tailwind-variants'
63
+ *
64
+ * const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })
65
+ */
66
+ const comboBoxStyles = tv({
67
+ slots,
68
+ variants: {
69
+ variant: {
70
+ solid: { inputWrapper: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]" },
71
+ outline: { inputWrapper: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
72
+ soft: { inputWrapper: "bg-[var(--novi-color-subtle)] border-transparent" },
73
+ ghost: { inputWrapper: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
74
+ plain: { inputWrapper: "bg-transparent border-transparent" }
75
+ },
76
+ size: {
77
+ sm: {
78
+ inputWrapper: "h-8",
79
+ input: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
80
+ option: "text-[length:var(--novi-text-sm)]"
81
+ },
82
+ md: {
83
+ inputWrapper: "h-10",
84
+ input: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]",
85
+ option: "text-[length:var(--novi-text-base)]"
86
+ },
87
+ lg: {
88
+ inputWrapper: "h-12",
89
+ input: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]",
90
+ option: "text-[length:var(--novi-text-base)]"
91
+ }
92
+ },
93
+ radius: {
94
+ none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
95
+ sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
96
+ md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
97
+ lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
98
+ full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
99
+ }
100
+ },
101
+ defaultVariants: {
102
+ variant: "outline",
103
+ size: "md",
104
+ radius: "md"
105
+ }
106
+ });
107
+ //#endregion
108
+ export { comboBoxStyles };
109
+
110
+ //# sourceMappingURL=combo-box.styles.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combo-box.styles.mjs","names":[],"sources":["../../src/combo-box/combo-box.styles.ts"],"sourcesContent":["import type {\n comboBoxRequiredSlots,\n comboBoxSlots,\n NoviRadius,\n NoviSize,\n NoviVariant,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n root: 'flex flex-col gap-1.5',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n // Input と同じ枠。開くボタンを枠の縁まで届かせるため、左右の余白は input 側に置く\n inputWrapper: [\n 'text-[var(--novi-color-fg)]',\n 'flex items-center w-full overflow-hidden',\n 'bg-[var(--novi-color-bg)]',\n 'border border-[var(--novi-color-border-strong)]',\n 'transition-[border-color,opacity]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'data-[invalid]:border-[var(--novi-color-danger)]',\n focusRing,\n disabledState,\n ].join(' '),\n input: [\n 'w-full min-w-0 bg-transparent outline-none',\n 'text-[var(--novi-color-fg)]',\n 'placeholder:text-[var(--novi-color-muted)]',\n ].join(' '),\n // 開くボタン。1px の縦線で区切るだけで面は持たない(NumberField の増減と同じ型)\n trigger: [\n 'shrink-0 self-stretch inline-flex items-center justify-center w-8',\n 'text-[var(--novi-color-muted)]',\n 'border-l border-[var(--novi-color-border)]',\n 'outline-none',\n 'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n 'data-[focus-visible]:text-[var(--novi-color-fg)]',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n 'transition-[color,background-color]',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n ].join(' '),\n icon: 'shrink-0 inline-flex',\n // 影を使わず、1px の境界線と背景の差だけで浮かせる(Select と同じ)\n popover: [\n 'bg-[var(--novi-color-bg)]',\n 'text-[var(--novi-color-fg)]',\n 'border border-[var(--novi-color-border)]',\n 'rounded-[var(--novi-radius-lg)]',\n 'shadow-[var(--novi-shadow-md)]',\n // 入力欄と同じ幅に揃える\n 'w-[var(--trigger-width)]',\n 'overflow-auto max-h-64',\n ].join(' '),\n listbox: 'outline-none p-1 flex flex-col',\n option: [\n 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n 'px-[var(--novi-pad-control-x-sm)] py-1.5 cursor-pointer outline-none',\n 'text-[var(--novi-color-fg)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'data-[focused]:bg-[var(--novi-color-subtle)]',\n 'data-[selected]:font-medium',\n 'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n ].join(' '),\n description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof comboBoxSlots, (typeof comboBoxRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n solid: {\n inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n },\n outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n ghost: {\n inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n },\n plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button / Input と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string; option: string }> = {\n sm: {\n inputWrapper: 'h-8',\n input: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n option: 'text-[length:var(--novi-text-sm)]',\n },\n md: {\n inputWrapper: 'h-10',\n input: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n option: 'text-[length:var(--novi-text-base)]',\n },\n lg: {\n inputWrapper: 'h-12',\n input: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\n option: 'text-[length:var(--novi-text-base)]',\n },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * ComboBox のスタイル定義。\n *\n * @example\n * import { comboBoxStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myComboBox = tv({ extend: comboBoxStyles, slots: { popover: 'max-h-96' } })\n */\nexport const comboBoxStyles = tv({\n slots,\n variants: { variant, size, radius },\n defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type ComboBoxStyleProps = Parameters<typeof comboBoxStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CAEP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AAkDA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAjDZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAyC/C;EAAS;GApCrB,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;GACA,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;GACA,IAAI;IACF,cAAc;IACd,OAAO;IACP,QAAQ;GACV;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAc/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { ComboBox, ComboBoxItem, ComboBoxItemProps } from "./combo-box.mjs";
2
+ import { ComboBoxStyleProps, comboBoxStyles } from "./combo-box.styles.mjs";
3
+ export { ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxStyleProps, comboBoxStyles };
@@ -0,0 +1,15 @@
1
+ import { DatePickerProps } from "@novi-ui/core";
2
+ //#region src/date-picker/date-picker.d.ts
3
+ /**
4
+ * 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。
5
+ *
6
+ * カレンダーは入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。
7
+ * 値は `@internationalized/date` の `CalendarDate`(ADR-B6)。
8
+ *
9
+ * @example
10
+ * <DatePicker label="出荷日" value={date} onChange={setDate} minValue={today} />
11
+ */
12
+ declare function DatePicker({ variant, size, radius, label, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, placeholderValue, isOpen, defaultOpen, onOpenChange, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }: DatePickerProps): import("react").JSX.Element;
13
+ //#endregion
14
+ export { DatePicker };
15
+ //# sourceMappingURL=date-picker.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-picker.d.mts","names":[],"sources":["../../src/date-picker/date-picker.tsx"],"mappings":";;;;;;;;;;;iBAgDgB,aACd,SACA,MACA,QACA,OACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,mBACA,kBACA,QACA,aACA,cACA,YACA,YACA,YACA,WACA,WACA,YACA,MACC,kCAAe,IAAA"}
@@ -0,0 +1,161 @@
1
+ "use client";
2
+ import { datePickerStyles } from "./date-picker.styles.mjs";
3
+ import { Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateSegment, Dialog, FieldError, Group, Heading, Label, Popover, Text } from "react-aria-components";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ //#region src/date-picker/date-picker.tsx
6
+ function CalendarIcon() {
7
+ return /* @__PURE__ */ jsxs("svg", {
8
+ viewBox: "0 0 16 16",
9
+ width: "0.85em",
10
+ height: "0.85em",
11
+ fill: "none",
12
+ "aria-hidden": "true",
13
+ children: [/* @__PURE__ */ jsx("rect", {
14
+ x: "2.5",
15
+ y: "3.5",
16
+ width: "11",
17
+ height: "10",
18
+ stroke: "currentColor",
19
+ strokeWidth: "1.5"
20
+ }), /* @__PURE__ */ jsx("path", {
21
+ d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
22
+ stroke: "currentColor",
23
+ strokeWidth: "1.5"
24
+ })]
25
+ });
26
+ }
27
+ function ChevronIcon({ direction }) {
28
+ return /* @__PURE__ */ jsx("svg", {
29
+ viewBox: "0 0 16 16",
30
+ width: "0.75em",
31
+ height: "0.75em",
32
+ fill: "none",
33
+ "aria-hidden": "true",
34
+ children: /* @__PURE__ */ jsx("path", {
35
+ d: direction === "prev" ? "M10 4l-4 4 4 4" : "M6 4l4 4-4 4",
36
+ stroke: "currentColor",
37
+ strokeWidth: "1.5"
38
+ })
39
+ });
40
+ }
41
+ /**
42
+ * 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。
43
+ *
44
+ * カレンダーは入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。
45
+ * 値は `@internationalized/date` の `CalendarDate`(ADR-B6)。
46
+ *
47
+ * @example
48
+ * <DatePicker label="出荷日" value={date} onChange={setDate} minValue={today} />
49
+ */
50
+ function DatePicker$1({ variant, size, radius, label, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, placeholderValue, isOpen, defaultOpen, onOpenChange, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }) {
51
+ const s = datePickerStyles({
52
+ variant,
53
+ size,
54
+ radius
55
+ });
56
+ return /* @__PURE__ */ jsxs(DatePicker, {
57
+ id,
58
+ name,
59
+ value,
60
+ defaultValue,
61
+ onChange,
62
+ minValue,
63
+ maxValue,
64
+ isDateUnavailable,
65
+ placeholderValue,
66
+ isOpen,
67
+ defaultOpen,
68
+ onOpenChange,
69
+ isDisabled,
70
+ isReadOnly,
71
+ isRequired,
72
+ isInvalid,
73
+ granularity: "day",
74
+ "data-slot": "root",
75
+ className: `group ${s.root({ class: [className, classNames?.root] })}`,
76
+ children: [
77
+ label !== void 0 && /* @__PURE__ */ jsx(Label, {
78
+ "data-slot": "label",
79
+ className: s.label({ class: classNames?.label }),
80
+ children: label
81
+ }),
82
+ /* @__PURE__ */ jsxs(Group, {
83
+ "data-slot": "inputWrapper",
84
+ className: s.inputWrapper({ class: classNames?.inputWrapper }),
85
+ children: [/* @__PURE__ */ jsx(DateInput, {
86
+ "data-slot": "dateInput",
87
+ className: s.dateInput({ class: classNames?.dateInput }),
88
+ children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
89
+ segment,
90
+ "data-slot": "segment",
91
+ className: s.segment({ class: classNames?.segment })
92
+ })
93
+ }), /* @__PURE__ */ jsx(Button, {
94
+ "data-slot": "trigger",
95
+ className: s.trigger({ class: classNames?.trigger }),
96
+ children: /* @__PURE__ */ jsx("span", {
97
+ "data-slot": "icon",
98
+ className: s.icon({ class: classNames?.icon }),
99
+ children: /* @__PURE__ */ jsx(CalendarIcon, {})
100
+ })
101
+ })]
102
+ }),
103
+ description !== void 0 && /* @__PURE__ */ jsx(Text, {
104
+ slot: "description",
105
+ "data-slot": "description",
106
+ className: s.description({ class: classNames?.description }),
107
+ children: description
108
+ }),
109
+ /* @__PURE__ */ jsx(FieldError, {
110
+ "data-slot": "errorMessage",
111
+ className: s.errorMessage({ class: classNames?.errorMessage }),
112
+ children: errorMessage
113
+ }),
114
+ /* @__PURE__ */ jsx(Popover, {
115
+ "data-slot": "popover",
116
+ className: s.popover({ class: classNames?.popover }),
117
+ children: /* @__PURE__ */ jsx(Dialog, {
118
+ className: "outline-none",
119
+ children: /* @__PURE__ */ jsxs(Calendar, {
120
+ "data-slot": "calendar",
121
+ className: s.calendar({ class: classNames?.calendar }),
122
+ children: [/* @__PURE__ */ jsxs("header", {
123
+ "data-slot": "calendarHeader",
124
+ className: s.calendarHeader({ class: classNames?.calendarHeader }),
125
+ children: [
126
+ /* @__PURE__ */ jsx(Button, {
127
+ slot: "previous",
128
+ "data-slot": "prevButton",
129
+ className: s.prevButton({ class: classNames?.prevButton }),
130
+ children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "prev" })
131
+ }),
132
+ /* @__PURE__ */ jsx(Heading, {
133
+ "data-slot": "calendarTitle",
134
+ className: s.calendarTitle({ class: classNames?.calendarTitle })
135
+ }),
136
+ /* @__PURE__ */ jsx(Button, {
137
+ slot: "next",
138
+ "data-slot": "nextButton",
139
+ className: s.nextButton({ class: classNames?.nextButton }),
140
+ children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "next" })
141
+ })
142
+ ]
143
+ }), /* @__PURE__ */ jsx(CalendarGrid, {
144
+ "data-slot": "calendarGrid",
145
+ className: s.calendarGrid({ class: classNames?.calendarGrid }),
146
+ children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
147
+ date,
148
+ "data-slot": "calendarCell",
149
+ className: s.calendarCell({ class: classNames?.calendarCell })
150
+ })
151
+ })]
152
+ })
153
+ })
154
+ })
155
+ ]
156
+ });
157
+ }
158
+ //#endregion
159
+ export { DatePicker$1 as DatePicker };
160
+
161
+ //# sourceMappingURL=date-picker.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-picker.mjs","names":["DatePicker","RACDatePicker"],"sources":["../../src/date-picker/date-picker.tsx"],"sourcesContent":["'use client'\n\nimport type { DatePickerProps } from '@novi-ui/core'\nimport {\n Button,\n Calendar,\n CalendarCell,\n CalendarGrid,\n DateInput,\n DateSegment,\n Dialog,\n FieldError,\n Group,\n Heading,\n Label,\n Popover,\n DatePicker as RACDatePicker,\n Text,\n} from 'react-aria-components'\nimport { datePickerStyles } from './date-picker.styles'\n\nfunction CalendarIcon() {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.85em\" height=\"0.85em\" fill=\"none\" aria-hidden=\"true\">\n <rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n <path d=\"M2.5 6.5h11M5.5 2v3M10.5 2v3\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n </svg>\n )\n}\n\nfunction ChevronIcon({ direction }: { direction: 'prev' | 'next' }) {\n const d = direction === 'prev' ? 'M10 4l-4 4 4 4' : 'M6 4l4 4-4 4'\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n <path d={d} stroke=\"currentColor\" strokeWidth=\"1.5\" />\n </svg>\n )\n}\n\n/**\n * 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。\n *\n * カレンダーは入力欄の隣に浮く(Tactile は画面下端のシート、Flatlay はフロー内に展開)。\n * 値は `@internationalized/date` の `CalendarDate`(ADR-B6)。\n *\n * @example\n * <DatePicker label=\"出荷日\" value={date} onChange={setDate} minValue={today} />\n */\nexport function DatePicker({\n variant,\n size,\n radius,\n label,\n description,\n errorMessage,\n name,\n value,\n defaultValue,\n onChange,\n minValue,\n maxValue,\n isDateUnavailable,\n placeholderValue,\n isOpen,\n defaultOpen,\n onOpenChange,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n className,\n classNames,\n id,\n}: DatePickerProps) {\n const s = datePickerStyles({ variant, size, radius })\n\n return (\n <RACDatePicker\n id={id}\n name={name}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\n minValue={minValue}\n maxValue={maxValue}\n isDateUnavailable={isDateUnavailable}\n placeholderValue={placeholderValue}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n granularity=\"day\"\n data-slot=\"root\"\n className={`group ${s.root({ class: [className, classNames?.root] })}`}\n >\n {label !== undefined && (\n <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {label}\n </Label>\n )}\n\n <Group\n data-slot=\"inputWrapper\"\n className={s.inputWrapper({ class: classNames?.inputWrapper })}\n >\n <DateInput data-slot=\"dateInput\" className={s.dateInput({ class: classNames?.dateInput })}>\n {(segment) => (\n <DateSegment\n segment={segment}\n data-slot=\"segment\"\n className={s.segment({ class: classNames?.segment })}\n />\n )}\n </DateInput>\n <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n <span data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n <CalendarIcon />\n </span>\n </Button>\n </Group>\n\n {description !== undefined && (\n <Text\n slot=\"description\"\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </Text>\n )}\n\n <FieldError\n data-slot=\"errorMessage\"\n className={s.errorMessage({ class: classNames?.errorMessage })}\n >\n {errorMessage}\n </FieldError>\n\n <Popover data-slot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n <Dialog className=\"outline-none\">\n <Calendar data-slot=\"calendar\" className={s.calendar({ class: classNames?.calendar })}>\n <header\n data-slot=\"calendarHeader\"\n className={s.calendarHeader({ class: classNames?.calendarHeader })}\n >\n <Button\n slot=\"previous\"\n data-slot=\"prevButton\"\n className={s.prevButton({ class: classNames?.prevButton })}\n >\n <ChevronIcon direction=\"prev\" />\n </Button>\n <Heading\n data-slot=\"calendarTitle\"\n className={s.calendarTitle({ class: classNames?.calendarTitle })}\n />\n <Button\n slot=\"next\"\n data-slot=\"nextButton\"\n className={s.nextButton({ class: classNames?.nextButton })}\n >\n <ChevronIcon direction=\"next\" />\n </Button>\n </header>\n <CalendarGrid\n data-slot=\"calendarGrid\"\n className={s.calendarGrid({ class: classNames?.calendarGrid })}\n >\n {(date) => (\n <CalendarCell\n date={date}\n data-slot=\"calendarCell\"\n className={s.calendarCell({ class: classNames?.calendarCell })}\n />\n )}\n </CalendarGrid>\n </Calendar>\n </Dialog>\n </Popover>\n </RACDatePicker>\n )\n}\n"],"mappings":"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"}