@novi-ui/tactile 0.1.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 (190) hide show
  1. package/README.md +195 -0
  2. package/dist/accordion/accordion.d.mts +31 -0
  3. package/dist/accordion/accordion.d.mts.map +1 -0
  4. package/dist/accordion/accordion.mjs +88 -0
  5. package/dist/accordion/accordion.mjs.map +1 -0
  6. package/dist/accordion/accordion.styles.d.mts +61 -0
  7. package/dist/accordion/accordion.styles.d.mts.map +1 -0
  8. package/dist/accordion/accordion.styles.mjs +83 -0
  9. package/dist/accordion/accordion.styles.mjs.map +1 -0
  10. package/dist/accordion/index.d.mts +3 -0
  11. package/dist/avatar/avatar.d.mts +19 -0
  12. package/dist/avatar/avatar.d.mts.map +1 -0
  13. package/dist/avatar/avatar.mjs +57 -0
  14. package/dist/avatar/avatar.mjs.map +1 -0
  15. package/dist/avatar/avatar.styles.d.mts +49 -0
  16. package/dist/avatar/avatar.styles.d.mts.map +1 -0
  17. package/dist/avatar/avatar.styles.mjs +45 -0
  18. package/dist/avatar/avatar.styles.mjs.map +1 -0
  19. package/dist/avatar/index.d.mts +3 -0
  20. package/dist/badge/badge.d.mts +15 -0
  21. package/dist/badge/badge.d.mts.map +1 -0
  22. package/dist/badge/badge.mjs +39 -0
  23. package/dist/badge/badge.mjs.map +1 -0
  24. package/dist/badge/badge.styles.d.mts +67 -0
  25. package/dist/badge/badge.styles.d.mts.map +1 -0
  26. package/dist/badge/badge.styles.mjs +99 -0
  27. package/dist/badge/badge.styles.mjs.map +1 -0
  28. package/dist/badge/index.d.mts +3 -0
  29. package/dist/breadcrumbs/breadcrumbs.d.mts +33 -0
  30. package/dist/breadcrumbs/breadcrumbs.d.mts.map +1 -0
  31. package/dist/breadcrumbs/breadcrumbs.mjs +79 -0
  32. package/dist/breadcrumbs/breadcrumbs.mjs.map +1 -0
  33. package/dist/breadcrumbs/breadcrumbs.styles.d.mts +46 -0
  34. package/dist/breadcrumbs/breadcrumbs.styles.d.mts.map +1 -0
  35. package/dist/breadcrumbs/breadcrumbs.styles.mjs +38 -0
  36. package/dist/breadcrumbs/breadcrumbs.styles.mjs.map +1 -0
  37. package/dist/breadcrumbs/index.d.mts +3 -0
  38. package/dist/button/button.d.mts +17 -0
  39. package/dist/button/button.d.mts.map +1 -0
  40. package/dist/button/button.mjs +78 -0
  41. package/dist/button/button.mjs.map +1 -0
  42. package/dist/button/button.styles.d.mts +82 -0
  43. package/dist/button/button.styles.d.mts.map +1 -0
  44. package/dist/button/button.styles.mjs +136 -0
  45. package/dist/button/button.styles.mjs.map +1 -0
  46. package/dist/button/index.d.mts +3 -0
  47. package/dist/card/card.d.mts +51 -0
  48. package/dist/card/card.d.mts.map +1 -0
  49. package/dist/card/card.mjs +96 -0
  50. package/dist/card/card.mjs.map +1 -0
  51. package/dist/card/card.styles.d.mts +70 -0
  52. package/dist/card/card.styles.d.mts.map +1 -0
  53. package/dist/card/card.styles.mjs +61 -0
  54. package/dist/card/card.styles.mjs.map +1 -0
  55. package/dist/card/index.d.mts +3 -0
  56. package/dist/checkbox/checkbox.d.mts +24 -0
  57. package/dist/checkbox/checkbox.d.mts.map +1 -0
  58. package/dist/checkbox/checkbox.mjs +124 -0
  59. package/dist/checkbox/checkbox.mjs.map +1 -0
  60. package/dist/checkbox/checkbox.styles.d.mts +111 -0
  61. package/dist/checkbox/checkbox.styles.d.mts.map +1 -0
  62. package/dist/checkbox/checkbox.styles.mjs +99 -0
  63. package/dist/checkbox/checkbox.styles.mjs.map +1 -0
  64. package/dist/checkbox/index.d.mts +3 -0
  65. package/dist/index.d.mts +61 -0
  66. package/dist/index.mjs +42 -0
  67. package/dist/input/index.d.mts +3 -0
  68. package/dist/input/input.d.mts +20 -0
  69. package/dist/input/input.d.mts.map +1 -0
  70. package/dist/input/input.mjs +86 -0
  71. package/dist/input/input.mjs.map +1 -0
  72. package/dist/input/input.styles.d.mts +81 -0
  73. package/dist/input/input.styles.d.mts.map +1 -0
  74. package/dist/input/input.styles.mjs +88 -0
  75. package/dist/input/input.styles.mjs.map +1 -0
  76. package/dist/menu/index.d.mts +3 -0
  77. package/dist/menu/menu.d.mts +62 -0
  78. package/dist/menu/menu.d.mts.map +1 -0
  79. package/dist/menu/menu.mjs +115 -0
  80. package/dist/menu/menu.mjs.map +1 -0
  81. package/dist/menu/menu.styles.d.mts +90 -0
  82. package/dist/menu/menu.styles.d.mts.map +1 -0
  83. package/dist/menu/menu.styles.mjs +42 -0
  84. package/dist/menu/menu.styles.mjs.map +1 -0
  85. package/dist/modal/index.d.mts +3 -0
  86. package/dist/modal/modal.d.mts +55 -0
  87. package/dist/modal/modal.d.mts.map +1 -0
  88. package/dist/modal/modal.mjs +122 -0
  89. package/dist/modal/modal.mjs.map +1 -0
  90. package/dist/modal/modal.styles.d.mts +58 -0
  91. package/dist/modal/modal.styles.d.mts.map +1 -0
  92. package/dist/modal/modal.styles.mjs +91 -0
  93. package/dist/modal/modal.styles.mjs.map +1 -0
  94. package/dist/popover/index.d.mts +3 -0
  95. package/dist/popover/popover.d.mts +40 -0
  96. package/dist/popover/popover.d.mts.map +1 -0
  97. package/dist/popover/popover.mjs +86 -0
  98. package/dist/popover/popover.mjs.map +1 -0
  99. package/dist/popover/popover.styles.d.mts +81 -0
  100. package/dist/popover/popover.styles.d.mts.map +1 -0
  101. package/dist/popover/popover.styles.mjs +53 -0
  102. package/dist/popover/popover.styles.mjs.map +1 -0
  103. package/dist/progress/index.d.mts +3 -0
  104. package/dist/progress/progress.d.mts +14 -0
  105. package/dist/progress/progress.d.mts.map +1 -0
  106. package/dist/progress/progress.mjs +54 -0
  107. package/dist/progress/progress.mjs.map +1 -0
  108. package/dist/progress/progress.styles.d.mts +70 -0
  109. package/dist/progress/progress.styles.d.mts.map +1 -0
  110. package/dist/progress/progress.styles.mjs +54 -0
  111. package/dist/progress/progress.styles.mjs.map +1 -0
  112. package/dist/radio/index.d.mts +3 -0
  113. package/dist/radio/radio.d.mts +22 -0
  114. package/dist/radio/radio.d.mts.map +1 -0
  115. package/dist/radio/radio.mjs +95 -0
  116. package/dist/radio/radio.mjs.map +1 -0
  117. package/dist/radio/radio.styles.d.mts +111 -0
  118. package/dist/radio/radio.styles.d.mts.map +1 -0
  119. package/dist/radio/radio.styles.mjs +95 -0
  120. package/dist/radio/radio.styles.mjs.map +1 -0
  121. package/dist/select/index.d.mts +3 -0
  122. package/dist/select/select.d.mts +34 -0
  123. package/dist/select/select.d.mts.map +1 -0
  124. package/dist/select/select.mjs +136 -0
  125. package/dist/select/select.mjs.map +1 -0
  126. package/dist/select/select.styles.d.mts +85 -0
  127. package/dist/select/select.styles.d.mts.map +1 -0
  128. package/dist/select/select.styles.mjs +109 -0
  129. package/dist/select/select.styles.mjs.map +1 -0
  130. package/dist/skeleton/index.d.mts +3 -0
  131. package/dist/skeleton/skeleton.d.mts +15 -0
  132. package/dist/skeleton/skeleton.d.mts.map +1 -0
  133. package/dist/skeleton/skeleton.mjs +26 -0
  134. package/dist/skeleton/skeleton.mjs.map +1 -0
  135. package/dist/skeleton/skeleton.styles.d.mts +31 -0
  136. package/dist/skeleton/skeleton.styles.d.mts.map +1 -0
  137. package/dist/skeleton/skeleton.styles.mjs +22 -0
  138. package/dist/skeleton/skeleton.styles.mjs.map +1 -0
  139. package/dist/spinner/index.d.mts +3 -0
  140. package/dist/spinner/spinner.d.mts +15 -0
  141. package/dist/spinner/spinner.d.mts.map +1 -0
  142. package/dist/spinner/spinner.mjs +55 -0
  143. package/dist/spinner/spinner.mjs.map +1 -0
  144. package/dist/spinner/spinner.styles.d.mts +46 -0
  145. package/dist/spinner/spinner.styles.d.mts.map +1 -0
  146. package/dist/spinner/spinner.styles.mjs +37 -0
  147. package/dist/spinner/spinner.styles.mjs.map +1 -0
  148. package/dist/styles/focus-ring.mjs +23 -0
  149. package/dist/styles/focus-ring.mjs.map +1 -0
  150. package/dist/styles/tap-target.mjs +25 -0
  151. package/dist/styles/tap-target.mjs.map +1 -0
  152. package/dist/switch/index.d.mts +3 -0
  153. package/dist/switch/switch.d.mts +17 -0
  154. package/dist/switch/switch.d.mts.map +1 -0
  155. package/dist/switch/switch.mjs +57 -0
  156. package/dist/switch/switch.mjs.map +1 -0
  157. package/dist/switch/switch.styles.d.mts +58 -0
  158. package/dist/switch/switch.styles.d.mts.map +1 -0
  159. package/dist/switch/switch.styles.mjs +79 -0
  160. package/dist/switch/switch.styles.mjs.map +1 -0
  161. package/dist/tabs/index.d.mts +3 -0
  162. package/dist/tabs/tabs.d.mts +57 -0
  163. package/dist/tabs/tabs.d.mts.map +1 -0
  164. package/dist/tabs/tabs.mjs +91 -0
  165. package/dist/tabs/tabs.mjs.map +1 -0
  166. package/dist/tabs/tabs.styles.d.mts +58 -0
  167. package/dist/tabs/tabs.styles.d.mts.map +1 -0
  168. package/dist/tabs/tabs.styles.mjs +92 -0
  169. package/dist/tabs/tabs.styles.mjs.map +1 -0
  170. package/dist/tactile.css +528 -0
  171. package/dist/tactile.scoped.css +528 -0
  172. package/dist/textarea/index.d.mts +3 -0
  173. package/dist/textarea/textarea.d.mts +15 -0
  174. package/dist/textarea/textarea.d.mts.map +1 -0
  175. package/dist/textarea/textarea.mjs +70 -0
  176. package/dist/textarea/textarea.mjs.map +1 -0
  177. package/dist/textarea/textarea.styles.d.mts +73 -0
  178. package/dist/textarea/textarea.styles.d.mts.map +1 -0
  179. package/dist/textarea/textarea.styles.mjs +83 -0
  180. package/dist/textarea/textarea.styles.mjs.map +1 -0
  181. package/dist/toast/index.d.mts +3 -0
  182. package/dist/toast/toast.d.mts +38 -0
  183. package/dist/toast/toast.d.mts.map +1 -0
  184. package/dist/toast/toast.mjs +86 -0
  185. package/dist/toast/toast.mjs.map +1 -0
  186. package/dist/toast/toast.styles.d.mts +61 -0
  187. package/dist/toast/toast.styles.d.mts.map +1 -0
  188. package/dist/toast/toast.styles.mjs +59 -0
  189. package/dist/toast/toast.styles.mjs.map +1 -0
  190. package/package.json +68 -0
@@ -0,0 +1,124 @@
1
+ "use client";
2
+ import { checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
3
+ import { Checkbox, CheckboxGroup, FieldError, Label, Text } from "react-aria-components";
4
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
5
+ //#region src/checkbox/checkbox.tsx
6
+ /** チェック記号。三角矢印や塗りつぶしではなく 1px の線で描く(Raster の規律)。 */
7
+ function CheckMark({ isIndeterminate }) {
8
+ return /* @__PURE__ */ jsx("svg", {
9
+ viewBox: "0 0 16 16",
10
+ width: "0.75em",
11
+ height: "0.75em",
12
+ fill: "none",
13
+ "aria-hidden": "true",
14
+ children: isIndeterminate ? /* @__PURE__ */ jsx("path", {
15
+ d: "M3 8h10",
16
+ stroke: "currentColor",
17
+ strokeWidth: "2"
18
+ }) : /* @__PURE__ */ jsx("path", {
19
+ d: "M2.5 8.5l3.5 3.5 7.5-8",
20
+ stroke: "currentColor",
21
+ strokeWidth: "2"
22
+ })
23
+ });
24
+ }
25
+ /**
26
+ * チェックボックス。
27
+ *
28
+ * @example
29
+ * <Checkbox isSelected={agreed} onChange={setAgreed}>
30
+ * 利用規約に同意する
31
+ * </Checkbox>
32
+ */
33
+ function Checkbox$1({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }) {
34
+ const s = checkboxStyles({
35
+ size,
36
+ color
37
+ });
38
+ return /* @__PURE__ */ jsx(Checkbox, {
39
+ id,
40
+ value,
41
+ isSelected,
42
+ defaultSelected,
43
+ onChange,
44
+ isIndeterminate,
45
+ isDisabled,
46
+ isReadOnly,
47
+ isRequired,
48
+ isInvalid,
49
+ "data-slot": "root",
50
+ className: `group ${s.root({ class: [className, classNames?.root] })}`,
51
+ children: ({ isSelected: selected, isIndeterminate: indeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
52
+ "data-slot": "control",
53
+ className: s.control({ class: classNames?.control }),
54
+ children: (selected || indeterminate) && /* @__PURE__ */ jsx("span", {
55
+ "data-slot": "indicator",
56
+ className: s.indicator({ class: classNames?.indicator }),
57
+ children: /* @__PURE__ */ jsx(CheckMark, { isIndeterminate: indeterminate })
58
+ })
59
+ }), children !== void 0 && /* @__PURE__ */ jsxs("span", {
60
+ className: "flex flex-col gap-0.5",
61
+ children: [/* @__PURE__ */ jsx("span", {
62
+ "data-slot": "label",
63
+ className: s.label({ class: classNames?.label }),
64
+ children
65
+ }), description !== void 0 && /* @__PURE__ */ jsx("span", {
66
+ "data-slot": "description",
67
+ className: s.description({ class: classNames?.description }),
68
+ children: description
69
+ })]
70
+ })] })
71
+ });
72
+ }
73
+ /**
74
+ * チェックボックスのグループ。ラベルとエラーをまとめて扱う。
75
+ *
76
+ * @example
77
+ * <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
78
+ * <Checkbox value="email">メール</Checkbox>
79
+ * <Checkbox value="sms">SMS</Checkbox>
80
+ * </CheckboxGroup>
81
+ */
82
+ function CheckboxGroup$1({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
83
+ const s = checkboxGroupStyles({ orientation });
84
+ return /* @__PURE__ */ jsxs(CheckboxGroup, {
85
+ id,
86
+ name,
87
+ value,
88
+ defaultValue,
89
+ onChange,
90
+ isDisabled,
91
+ isReadOnly,
92
+ isRequired,
93
+ isInvalid,
94
+ "data-slot": "root",
95
+ className: s.root({ class: [className, classNames?.root] }),
96
+ children: [
97
+ label !== void 0 && /* @__PURE__ */ jsx(Label, {
98
+ "data-slot": "label",
99
+ className: s.label({ class: classNames?.label }),
100
+ children: label
101
+ }),
102
+ /* @__PURE__ */ jsx("div", {
103
+ "data-slot": "list",
104
+ className: s.list({ class: classNames?.list }),
105
+ children
106
+ }),
107
+ description !== void 0 && /* @__PURE__ */ jsx(Text, {
108
+ slot: "description",
109
+ "data-slot": "description",
110
+ className: s.description({ class: classNames?.description }),
111
+ children: description
112
+ }),
113
+ /* @__PURE__ */ jsx(FieldError, {
114
+ "data-slot": "errorMessage",
115
+ className: s.errorMessage({ class: classNames?.errorMessage }),
116
+ children: errorMessage
117
+ })
118
+ ]
119
+ });
120
+ }
121
+ //#endregion
122
+ export { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };
123
+
124
+ //# sourceMappingURL=checkbox.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.mjs","names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport type { CheckboxGroupProps, CheckboxProps } from '@novi-ui/core'\nimport {\n FieldError,\n Label,\n Checkbox as RACCheckbox,\n CheckboxGroup as RACCheckboxGroup,\n Text,\n} from 'react-aria-components'\nimport { checkboxGroupStyles, checkboxStyles } from './checkbox.styles'\n\n/** チェック記号。三角矢印や塗りつぶしではなく 1px の線で描く(Raster の規律)。 */\nfunction CheckMark({ isIndeterminate }: { isIndeterminate: boolean }) {\n return (\n <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n {isIndeterminate ? (\n <path d=\"M3 8h10\" stroke=\"currentColor\" strokeWidth=\"2\" />\n ) : (\n <path d=\"M2.5 8.5l3.5 3.5 7.5-8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n )}\n </svg>\n )\n}\n\n/**\n * チェックボックス。\n *\n * @example\n * <Checkbox isSelected={agreed} onChange={setAgreed}>\n * 利用規約に同意する\n * </Checkbox>\n */\nexport function Checkbox({\n size,\n color,\n value,\n isSelected,\n defaultSelected,\n onChange,\n isIndeterminate,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n description,\n children,\n className,\n classNames,\n id,\n}: CheckboxProps) {\n const s = checkboxStyles({ size, color })\n\n return (\n <RACCheckbox\n id={id}\n value={value}\n isSelected={isSelected}\n defaultSelected={defaultSelected}\n onChange={onChange}\n isIndeterminate={isIndeterminate}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n isRequired={isRequired}\n isInvalid={isInvalid}\n data-slot=\"root\"\n // control 側から選択状態を参照するために group を付ける\n className={`group ${s.root({ class: [className, classNames?.root] })}`}\n >\n {({ isSelected: selected, isIndeterminate: indeterminate }) => (\n <>\n <span data-slot=\"control\" className={s.control({ class: classNames?.control })}>\n {(selected || indeterminate) && (\n <span data-slot=\"indicator\" className={s.indicator({ class: classNames?.indicator })}>\n <CheckMark isIndeterminate={indeterminate} />\n </span>\n )}\n </span>\n\n {children !== undefined && (\n <span className=\"flex flex-col gap-0.5\">\n <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n {children}\n </span>\n {description !== undefined && (\n <span\n data-slot=\"description\"\n className={s.description({ class: classNames?.description })}\n >\n {description}\n </span>\n )}\n </span>\n )}\n </>\n )}\n </RACCheckbox>\n )\n}\n\n/**\n * チェックボックスのグループ。ラベルとエラーをまとめて扱う。\n *\n * @example\n * <CheckboxGroup label=\"通知方法\" value={ways} onChange={setWays}>\n * <Checkbox value=\"email\">メール</Checkbox>\n * <Checkbox value=\"sms\">SMS</Checkbox>\n * </CheckboxGroup>\n */\nexport function CheckboxGroup({\n label,\n description,\n errorMessage,\n name,\n value,\n defaultValue,\n onChange,\n orientation,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n children,\n className,\n classNames,\n id,\n}: CheckboxGroupProps) {\n const s = checkboxGroupStyles({ orientation })\n\n return (\n <RACCheckboxGroup\n id={id}\n name={name}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\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 <div data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n {children}\n </div>\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 </RACCheckboxGroup>\n )\n}\n"],"mappings":";;;;;;AAaA,SAAS,UAAU,EAAE,mBAAiD;CACpE,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC7E,UAAA,kBACC,oBAAC,QAAD;GAAM,GAAE;GAAU,QAAO;GAAe,aAAY;EAAK,CAAA,IAEzD,oBAAC,QAAD;GAAM,GAAE;GAAyB,QAAO;GAAe,aAAY;EAAK,CAAA;CAEvE,CAAA;AAET;;;;;;;;;AAUA,SAAgBA,WAAS,EACvB,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAM;CAAM,CAAC;CAExC,OACE,oBAACC,UAAD;EACM;EACG;EACK;EACK;EACP;EACO;EACL;EACA;EACA;EACD;EACX,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEjE,WAAA,EAAE,YAAY,UAAU,iBAAiB,oBACzC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;GACzE,WAAA,YAAY,kBACZ,oBAAC,QAAD;IAAM,aAAU;IAAY,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACjF,UAAA,oBAAC,WAAD,EAAW,iBAAiB,cAAgB,CAAA;GACxC,CAAA;EAEJ,CAAA,GAEL,aAAa,KAAA,KACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA,GACL,gBAAgB,KAAA,KACf,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA,CAEJ;EAER,CAAA,CAAA,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;AAWA,SAAgBC,gBAAc,EAC5B,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACqB;CACrB,MAAM,IAAI,oBAAoB,EAAE,YAAY,CAAC;CAE7C,OACE,qBAACC,eAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,aAAU;IAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAChE;GACE,CAAA;GAEJ,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;EACI;;AAEtB"}
@@ -0,0 +1,111 @@
1
+ import { VariantMap } from "@novi-ui/core";
2
+ //#region src/checkbox/checkbox.styles.d.ts
3
+ /**
4
+ * Checkbox のスタイル定義。
5
+ *
6
+ * @example
7
+ * import { checkboxStyles } from '@novi-ui/tactile'
8
+ * import { tv } from 'tailwind-variants'
9
+ *
10
+ * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
11
+ */
12
+ declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
13
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
14
+ root: string;
15
+ }>;
16
+ size: VariantMap<"sm" | "md" | "lg", {
17
+ control: string;
18
+ label: string;
19
+ }>;
20
+ }, {
21
+ root: string;
22
+ control: string;
23
+ indicator: string;
24
+ label: string;
25
+ description: string;
26
+ }, undefined, {
27
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
28
+ root: string;
29
+ }>;
30
+ size: VariantMap<"sm" | "md" | "lg", {
31
+ control: string;
32
+ label: string;
33
+ }>;
34
+ }, {
35
+ root: string;
36
+ control: string;
37
+ indicator: string;
38
+ label: string;
39
+ description: string;
40
+ }, import("tailwind-variants").TVReturnTypeLike<{
41
+ color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
42
+ root: string;
43
+ }>;
44
+ size: VariantMap<"sm" | "md" | "lg", {
45
+ control: string;
46
+ label: string;
47
+ }>;
48
+ }, {
49
+ root: string;
50
+ control: string;
51
+ indicator: string;
52
+ label: string;
53
+ description: string;
54
+ }>>;
55
+ /**
56
+ * CheckboxGroup のスタイル定義。
57
+ *
58
+ * @example
59
+ * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
60
+ */
61
+ declare const checkboxGroupStyles: import("tailwind-variants").TVReturnType<{
62
+ orientation: {
63
+ vertical: {
64
+ list: string;
65
+ };
66
+ horizontal: {
67
+ list: string;
68
+ };
69
+ };
70
+ }, {
71
+ root: string;
72
+ label: string;
73
+ list: string;
74
+ description: string;
75
+ errorMessage: string;
76
+ }, undefined, {
77
+ orientation: {
78
+ vertical: {
79
+ list: string;
80
+ };
81
+ horizontal: {
82
+ list: string;
83
+ };
84
+ };
85
+ }, {
86
+ root: string;
87
+ label: string;
88
+ list: string;
89
+ description: string;
90
+ errorMessage: string;
91
+ }, import("tailwind-variants").TVReturnTypeLike<{
92
+ orientation: {
93
+ vertical: {
94
+ list: string;
95
+ };
96
+ horizontal: {
97
+ list: string;
98
+ };
99
+ };
100
+ }, {
101
+ root: string;
102
+ label: string;
103
+ list: string;
104
+ description: string;
105
+ errorMessage: string;
106
+ }>>;
107
+ type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0];
108
+ type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0];
109
+ //#endregion
110
+ export { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };
111
+ //# sourceMappingURL=checkbox.styles.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cAsFa,4CAAc;;IAxCgB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;IAzBhB;;;IAyBC;IAAe;;;;;;;;;;;;;;;cAmC9C,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}
@@ -0,0 +1,99 @@
1
+ import { disabledState, focusRing } from "../styles/focus-ring.mjs";
2
+ import { tapTarget } from "../styles/tap-target.mjs";
3
+ import { tv } from "tailwind-variants";
4
+ //#region src/checkbox/checkbox.styles.ts
5
+ /**
6
+ * Tactile の Checkbox は**視覚寸法とタップ寸法を分ける**(AC-01-5)。
7
+ *
8
+ * 箱は 24px 前後で小さく見せてよいが、指が当たる範囲は 44px 以上ないと押し直しが起きる。
9
+ * 擬似要素で当たり判定だけを広げるので、見た目を変えずに下限を満たせる。
10
+ * 行全体(root)も押せるようにして、ラベルを狙っても切り替わるようにする。
11
+ */
12
+ const slots = {
13
+ root: [
14
+ "inline-flex items-center gap-3 min-h-12 py-1",
15
+ "cursor-pointer",
16
+ tapTarget,
17
+ disabledState
18
+ ].join(" "),
19
+ control: [
20
+ "shrink-0 inline-grid place-items-center",
21
+ "ring-1 ring-[var(--novi-color-border-strong)]",
22
+ "rounded-[var(--novi-radius-sm)]",
23
+ "bg-[var(--novi-color-surface)]",
24
+ "transition-[background-color,box-shadow,scale]",
25
+ "group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100",
26
+ "duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
27
+ "group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]",
28
+ "group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:ring-[var(--c)]",
29
+ "group-data-[invalid]:ring-[var(--novi-color-danger)]",
30
+ focusRing
31
+ ].join(" "),
32
+ indicator: "text-[var(--c-fg)] pointer-events-none",
33
+ label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
34
+ description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]"
35
+ };
36
+ /**
37
+ * Checkbox のスタイル定義。
38
+ *
39
+ * @example
40
+ * import { checkboxStyles } from '@novi-ui/tactile'
41
+ * import { tv } from 'tailwind-variants'
42
+ *
43
+ * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
44
+ */
45
+ const checkboxStyles = tv({
46
+ slots,
47
+ variants: {
48
+ color: {
49
+ default: { root: "[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]" },
50
+ primary: { root: "[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]" },
51
+ secondary: { root: "[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]" },
52
+ success: { root: "[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]" },
53
+ warning: { root: "[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]" },
54
+ danger: { root: "[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]" }
55
+ },
56
+ size: {
57
+ sm: {
58
+ control: "size-5",
59
+ label: "text-[length:var(--novi-text-sm)]"
60
+ },
61
+ md: {
62
+ control: "size-6",
63
+ label: "text-[length:var(--novi-text-base)]"
64
+ },
65
+ lg: {
66
+ control: "size-7",
67
+ label: "text-[length:var(--novi-text-base)]"
68
+ }
69
+ }
70
+ },
71
+ defaultVariants: {
72
+ color: "default",
73
+ size: "md"
74
+ }
75
+ });
76
+ /**
77
+ * CheckboxGroup のスタイル定義。
78
+ *
79
+ * @example
80
+ * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
81
+ */
82
+ const checkboxGroupStyles = tv({
83
+ slots: {
84
+ root: "flex flex-col gap-2",
85
+ label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
86
+ list: "flex flex-col gap-2",
87
+ description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
88
+ errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
89
+ },
90
+ variants: { orientation: {
91
+ vertical: { list: "flex-col gap-2" },
92
+ horizontal: { list: "flex-row gap-4 flex-wrap" }
93
+ } },
94
+ defaultVariants: { orientation: "vertical" }
95
+ });
96
+ //#endregion
97
+ export { checkboxGroupStyles, checkboxStyles };
98
+
99
+ //# sourceMappingURL=checkbox.styles.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n checkboxGroupRequiredSlots,\n checkboxGroupSlots,\n checkboxRequiredSlots,\n checkboxSlots,\n NoviColor,\n NoviSize,\n SlotMap,\n VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile の Checkbox は**視覚寸法とタップ寸法を分ける**(AC-01-5)。\n *\n * 箱は 24px 前後で小さく見せてよいが、指が当たる範囲は 44px 以上ないと押し直しが起きる。\n * 擬似要素で当たり判定だけを広げるので、見た目を変えずに下限を満たせる。\n * 行全体(root)も押せるようにして、ラベルを狙っても切り替わるようにする。\n */\nconst slots = {\n root: [\n 'inline-flex items-center gap-3 min-h-12 py-1',\n 'cursor-pointer',\n tapTarget,\n disabledState,\n ].join(' '),\n control: [\n 'shrink-0 inline-grid place-items-center',\n 'ring-1 ring-[var(--novi-color-border-strong)]',\n 'rounded-[var(--novi-radius-sm)]',\n 'bg-[var(--novi-color-surface)]',\n 'transition-[background-color,box-shadow,scale]',\n 'group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100',\n 'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n 'group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]',\n 'group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:ring-[var(--c)]',\n 'group-data-[invalid]:ring-[var(--novi-color-danger)]',\n focusRing,\n ].join(' '),\n indicator: 'text-[var(--c-fg)] pointer-events-none',\n label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof checkboxSlots, (typeof checkboxRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n default: {\n root: '[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]',\n },\n primary: {\n root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]',\n },\n secondary: {\n root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]',\n },\n success: {\n root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]',\n },\n warning: {\n root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]',\n },\n danger: {\n root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]',\n },\n}\n\n/**\n * 20 / 24 / 28px。**これは視覚寸法**で、当たり判定は root の `tapTarget` が 44px を保つ。\n * 小さく見せることと押しやすさは両立できる(AC-01-5)。\n */\nconst size: VariantMap<NoviSize, { control: string; label: string }> = {\n sm: { control: 'size-5', label: 'text-[length:var(--novi-text-sm)]' },\n md: { control: 'size-6', label: 'text-[length:var(--novi-text-base)]' },\n lg: { control: 'size-7', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })\n */\nexport const checkboxStyles = tv({\n slots,\n variants: { color, size },\n defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n root: 'flex flex-col gap-2',\n label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n list: 'flex flex-col gap-2',\n description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof checkboxGroupSlots, (typeof checkboxGroupRequiredSlots)[number]>\n\n/**\n * CheckboxGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const checkboxGroupStyles = tv({\n slots: groupSlots,\n variants: {\n orientation: {\n vertical: { list: 'flex-col gap-2' },\n horizontal: { list: 'flex-row gap-4 flex-wrap' },\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0]\nexport type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0]\n"],"mappings":";;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;CACP,aAAa;AACf;;;;;;;;;;AA0CA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GAzCZ,SAAS,EACP,MAAM,2DACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,WAAW,EACT,MAAM,4EACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,SAAS,EACP,MAAM,wEACR;GACA,QAAQ,EACN,MAAM,sEACR;EAwBY;EAAO;GAhBnB,IAAI;IAAE,SAAS;IAAU,OAAO;GAAoC;GACpE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;GACtE,IAAI;IAAE,SAAS;IAAU,OAAO;GAAsC;EAcnD;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;;;;;;;AAgBD,MAAa,sBAAsB,GAAG;CACpC,OAAO;EAdP,MAAM;EACN,OAAO;EACP,MAAM;EACN,aAAa;EACb,cAAc;CAUP;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { Checkbox, CheckboxGroup } from "./checkbox.mjs";
2
+ import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
3
+ export { Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };
@@ -0,0 +1,61 @@
1
+ import { Accordion, AccordionItem, AccordionItemProps } from "./accordion/accordion.mjs";
2
+ import { AccordionStyleProps, accordionStyles } from "./accordion/accordion.styles.mjs";
3
+ import "./accordion/index.mjs";
4
+ import { Avatar, initialsOf } from "./avatar/avatar.mjs";
5
+ import { AvatarStyleProps, avatarStyles } from "./avatar/avatar.styles.mjs";
6
+ import "./avatar/index.mjs";
7
+ import { Badge } from "./badge/badge.mjs";
8
+ import { BadgeStyleProps, badgeStyles } from "./badge/badge.styles.mjs";
9
+ import "./badge/index.mjs";
10
+ import { Breadcrumb, BreadcrumbProps, Breadcrumbs } from "./breadcrumbs/breadcrumbs.mjs";
11
+ import { BreadcrumbsStyleProps, breadcrumbsStyles } from "./breadcrumbs/breadcrumbs.styles.mjs";
12
+ import "./breadcrumbs/index.mjs";
13
+ import { Button } from "./button/button.mjs";
14
+ import { ButtonStyleProps, buttonStyles } from "./button/button.styles.mjs";
15
+ import "./button/index.mjs";
16
+ import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
17
+ import { CardStyleProps, cardStyles } from "./card/card.styles.mjs";
18
+ import "./card/index.mjs";
19
+ import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
20
+ import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
21
+ import "./checkbox/index.mjs";
22
+ import { Input } from "./input/input.mjs";
23
+ import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
24
+ import "./input/index.mjs";
25
+ import { Menu, MenuItemComponent, MenuItemProps, MenuSection, MenuSeparator } from "./menu/menu.mjs";
26
+ import { MenuStyleProps, menuStyles } from "./menu/menu.styles.mjs";
27
+ import "./menu/index.mjs";
28
+ import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
29
+ import { ModalStyleProps, modalStyles } from "./modal/modal.styles.mjs";
30
+ import "./modal/index.mjs";
31
+ import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
32
+ import { PopoverStyleProps, TooltipStyleProps, popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
33
+ import "./popover/index.mjs";
34
+ import { Progress } from "./progress/progress.mjs";
35
+ import { ProgressStyleProps, progressStyles } from "./progress/progress.styles.mjs";
36
+ import "./progress/index.mjs";
37
+ import { Radio, RadioGroup } from "./radio/radio.mjs";
38
+ import { RadioGroupStyleProps, RadioStyleProps, radioGroupStyles, radioStyles } from "./radio/radio.styles.mjs";
39
+ import "./radio/index.mjs";
40
+ import { Select, SelectItem, SelectItemProps } from "./select/select.mjs";
41
+ import { SelectStyleProps, selectStyles } from "./select/select.styles.mjs";
42
+ import "./select/index.mjs";
43
+ import { Skeleton } from "./skeleton/skeleton.mjs";
44
+ import { SkeletonStyleProps, skeletonStyles } from "./skeleton/skeleton.styles.mjs";
45
+ import "./skeleton/index.mjs";
46
+ import { Spinner } from "./spinner/spinner.mjs";
47
+ import { SpinnerStyleProps, spinnerStyles } from "./spinner/spinner.styles.mjs";
48
+ import "./spinner/index.mjs";
49
+ import { Switch } from "./switch/switch.mjs";
50
+ import { SwitchStyleProps, switchStyles } from "./switch/switch.styles.mjs";
51
+ import "./switch/index.mjs";
52
+ import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
53
+ import { TabsStyleProps, tabsStyles } from "./tabs/tabs.styles.mjs";
54
+ import "./tabs/index.mjs";
55
+ import { TextArea } from "./textarea/textarea.mjs";
56
+ import { TextareaStyleProps, textareaStyles } from "./textarea/textarea.styles.mjs";
57
+ import "./textarea/index.mjs";
58
+ import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
59
+ import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
60
+ import "./toast/index.mjs";
61
+ export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
package/dist/index.mjs ADDED
@@ -0,0 +1,42 @@
1
+ "use client";
2
+ import { accordionStyles } from "./accordion/accordion.styles.mjs";
3
+ import { Accordion, AccordionItem } from "./accordion/accordion.mjs";
4
+ import { avatarStyles } from "./avatar/avatar.styles.mjs";
5
+ import { Avatar, initialsOf } from "./avatar/avatar.mjs";
6
+ import { badgeStyles } from "./badge/badge.styles.mjs";
7
+ import { Badge } from "./badge/badge.mjs";
8
+ import { breadcrumbsStyles } from "./breadcrumbs/breadcrumbs.styles.mjs";
9
+ import { Breadcrumb, Breadcrumbs } from "./breadcrumbs/breadcrumbs.mjs";
10
+ import { buttonStyles } from "./button/button.styles.mjs";
11
+ import { Button } from "./button/button.mjs";
12
+ import { cardStyles } from "./card/card.styles.mjs";
13
+ import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
14
+ import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
15
+ import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
16
+ import { inputStyles } from "./input/input.styles.mjs";
17
+ import { Input } from "./input/input.mjs";
18
+ import { menuStyles } from "./menu/menu.styles.mjs";
19
+ import { Menu, MenuItemComponent, MenuSection, MenuSeparator } from "./menu/menu.mjs";
20
+ import { modalStyles } from "./modal/modal.styles.mjs";
21
+ import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
22
+ import { popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
23
+ import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
24
+ import { progressStyles } from "./progress/progress.styles.mjs";
25
+ import { Progress } from "./progress/progress.mjs";
26
+ import { radioGroupStyles, radioStyles } from "./radio/radio.styles.mjs";
27
+ import { Radio, RadioGroup } from "./radio/radio.mjs";
28
+ import { selectStyles } from "./select/select.styles.mjs";
29
+ import { Select, SelectItem } from "./select/select.mjs";
30
+ import { skeletonStyles } from "./skeleton/skeleton.styles.mjs";
31
+ import { Skeleton } from "./skeleton/skeleton.mjs";
32
+ import { spinnerStyles } from "./spinner/spinner.styles.mjs";
33
+ import { Spinner } from "./spinner/spinner.mjs";
34
+ import { switchStyles } from "./switch/switch.styles.mjs";
35
+ import { Switch } from "./switch/switch.mjs";
36
+ import { tabsStyles } from "./tabs/tabs.styles.mjs";
37
+ import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
38
+ import { textareaStyles } from "./textarea/textarea.styles.mjs";
39
+ import { TextArea } from "./textarea/textarea.mjs";
40
+ import { toastStyles } from "./toast/toast.styles.mjs";
41
+ import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
42
+ export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
@@ -0,0 +1,3 @@
1
+ import { Input } from "./input.mjs";
2
+ import { InputStyleProps, inputStyles } from "./input.styles.mjs";
3
+ export { Input, type InputStyleProps, inputStyles };
@@ -0,0 +1,20 @@
1
+ import { InputProps } from "@novi-ui/core";
2
+ //#region src/input/input.d.ts
3
+ /**
4
+ * 1行テキスト入力。
5
+ *
6
+ * `onKeyDown` は IME 変換中のキーを受け取らない。
7
+ * 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。
8
+ *
9
+ * @example
10
+ * <Input
11
+ * label="メールアドレス"
12
+ * type="email"
13
+ * isRequired
14
+ * description="ログインに使用します"
15
+ * />
16
+ */
17
+ declare function Input({ variant, size, radius, label, placeholder, description, errorMessage, type, name, value, defaultValue, onChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, startContent, endContent, className, classNames, id }: InputProps): import("react").JSX.Element;
18
+ //#endregion
19
+ export { Input };
20
+ //# sourceMappingURL=input.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.d.mts","names":[],"sources":["../../src/input/input.tsx"],"mappings":";;;;;;;;;;;;;;;;iBAqBgB,QACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,MACA,OACA,cACA,UACA,WACA,YACA,YACA,YACA,WACA,cACA,YACA,WACA,YACA,MACC,6BAAU,IAAA"}
@@ -0,0 +1,86 @@
1
+ "use client";
2
+ import { inputStyles } from "./input.styles.mjs";
3
+ import { FieldError, Group, Input, Label, Text, TextField } from "react-aria-components";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { useImeSafeKeys } from "@novi-ui/core/client";
6
+ //#region src/input/input.tsx
7
+ /**
8
+ * 1行テキスト入力。
9
+ *
10
+ * `onKeyDown` は IME 変換中のキーを受け取らない。
11
+ * 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。
12
+ *
13
+ * @example
14
+ * <Input
15
+ * label="メールアドレス"
16
+ * type="email"
17
+ * isRequired
18
+ * description="ログインに使用します"
19
+ * />
20
+ */
21
+ function Input$1({ variant, size, radius, label, placeholder, description, errorMessage, type = "text", name, value, defaultValue, onChange, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, startContent, endContent, className, classNames, id }) {
22
+ const s = inputStyles({
23
+ variant,
24
+ size,
25
+ radius
26
+ });
27
+ const keyProps = useImeSafeKeys(onKeyDown);
28
+ return /* @__PURE__ */ jsxs(TextField, {
29
+ id,
30
+ name,
31
+ type,
32
+ value,
33
+ defaultValue,
34
+ onChange,
35
+ isDisabled,
36
+ isReadOnly,
37
+ isRequired,
38
+ isInvalid,
39
+ "data-slot": "root",
40
+ className: s.root({ class: [className, classNames?.root] }),
41
+ children: [
42
+ label !== void 0 && /* @__PURE__ */ jsx(Label, {
43
+ "data-slot": "label",
44
+ className: s.label({ class: classNames?.label }),
45
+ children: label
46
+ }),
47
+ /* @__PURE__ */ jsxs(Group, {
48
+ "data-slot": "inputWrapper",
49
+ className: s.inputWrapper({ class: classNames?.inputWrapper }),
50
+ children: [
51
+ startContent !== void 0 && /* @__PURE__ */ jsx("span", {
52
+ "data-slot": "startContent",
53
+ className: s.startContent({ class: classNames?.startContent }),
54
+ children: startContent
55
+ }),
56
+ /* @__PURE__ */ jsx(Input, {
57
+ "data-slot": "input",
58
+ placeholder,
59
+ className: s.input({ class: classNames?.input }),
60
+ ...keyProps
61
+ }),
62
+ endContent !== void 0 && /* @__PURE__ */ jsx("span", {
63
+ "data-slot": "endContent",
64
+ className: s.endContent({ class: classNames?.endContent }),
65
+ children: endContent
66
+ })
67
+ ]
68
+ }),
69
+ description !== void 0 && /* @__PURE__ */ jsx(Text, {
70
+ slot: "description",
71
+ "data-slot": "description",
72
+ className: s.description({ class: classNames?.description }),
73
+ children: description
74
+ }),
75
+ /* @__PURE__ */ jsx(FieldError, {
76
+ "data-slot": "errorMessage",
77
+ className: s.errorMessage({ class: classNames?.errorMessage }),
78
+ children: errorMessage
79
+ })
80
+ ]
81
+ });
82
+ }
83
+ //#endregion
84
+ export { Input$1 as Input };
85
+
86
+ //# sourceMappingURL=input.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input.mjs","names":["Input","RACInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["'use client'\n\nimport type { InputProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport { FieldError, Group, Label, Input as RACInput, Text, TextField } from 'react-aria-components'\nimport { inputStyles } from './input.styles'\n\n/**\n * 1行テキスト入力。\n *\n * `onKeyDown` は IME 変換中のキーを受け取らない。\n * 日本語の変換確定 Enter で送信が暴発する事故を、利用側が意識せずに防げる。\n *\n * @example\n * <Input\n * label=\"メールアドレス\"\n * type=\"email\"\n * isRequired\n * description=\"ログインに使用します\"\n * />\n */\nexport function Input({\n variant,\n size,\n radius,\n label,\n placeholder,\n description,\n errorMessage,\n type = 'text',\n name,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n isDisabled,\n isReadOnly,\n isRequired,\n isInvalid,\n startContent,\n endContent,\n className,\n classNames,\n id,\n}: InputProps) {\n const s = inputStyles({ variant, size, radius })\n const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n return (\n <TextField\n id={id}\n name={name}\n type={type}\n value={value}\n defaultValue={defaultValue}\n onChange={onChange}\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 {startContent !== undefined && (\n <span\n data-slot=\"startContent\"\n className={s.startContent({ class: classNames?.startContent })}\n >\n {startContent}\n </span>\n )}\n\n <RACInput\n data-slot=\"input\"\n placeholder={placeholder}\n className={s.input({ class: classNames?.input })}\n {...keyProps}\n />\n\n {endContent !== undefined && (\n <span data-slot=\"endContent\" className={s.endContent({ class: classNames?.endContent })}>\n {endContent}\n </span>\n )}\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 {/* 色だけに頼らずテキストを必ず伴う(WCAG 1.4.1) */}\n <FieldError\n data-slot=\"errorMessage\"\n className={s.errorMessage({ class: classNames?.errorMessage })}\n >\n {errorMessage}\n </FieldError>\n </TextField>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,SAAgBA,QAAM,EACpB,SACA,MACA,QACA,OACA,aACA,aACA,cACA,OAAO,QACP,MACA,OACA,cACA,UACA,WACA,YACA,YACA,YACA,WACA,cACA,YACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY;EAAE;EAAS;EAAM;CAAO,CAAC;CAC/C,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAAC,WAAD;EACM;EACE;EACA;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAZ5D,UAAA;GAcG,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;KAIG,iBAAiB,KAAA,KAChB,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;MAE5D,UAAA;KACG,CAAA;KAGR,oBAACC,OAAD;MACE,aAAU;MACG;MACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;MAC/C,GAAI;KACL,CAAA;KAEA,eAAe,KAAA,KACd,oBAAC,QAAD;MAAM,aAAU;MAAa,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;MACnF,UAAA;KACG,CAAA;IAEH;;GAEN,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAIR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}