@cloudflare/kumo 1.13.1 → 1.14.1

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 (181) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/ai/component-registry.json +57 -30
  3. package/ai/component-registry.md +247 -19
  4. package/ai/schemas.ts +3 -2
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +10 -2
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +175 -173
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/Legend-mkh1v83sz972e29d.js +407 -0
  11. package/dist/chunks/Legend-mkh1v83sz972e29d.js.map +1 -0
  12. package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js → breadcrumbs-gr907zcoo65rpn90.js} +2 -2
  13. package/dist/chunks/{breadcrumbs-e564gabk59go37cg.js.map → breadcrumbs-gr907zcoo65rpn90.js.map} +1 -1
  14. package/dist/chunks/{button-b1yp3lbrhjr9eg07.js → button-d82sexqgnd834eaa.js} +2 -2
  15. package/dist/chunks/{button-b1yp3lbrhjr9eg07.js.map → button-d82sexqgnd834eaa.js.map} +1 -1
  16. package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js → checkbox-f4qsbq6xycaji7qw.js} +3 -3
  17. package/dist/chunks/{checkbox-khvh0efmlzvlo6qi.js.map → checkbox-f4qsbq6xycaji7qw.js.map} +1 -1
  18. package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js → clipboard-text-fvggzgqrza82t5om.js} +4 -4
  19. package/dist/chunks/{clipboard-text-jvrlvyz5ulm49h5b.js.map → clipboard-text-fvggzgqrza82t5om.js.map} +1 -1
  20. package/dist/chunks/{combobox-i3mdp6f01dvpoc5j.js → combobox-om4zw74o076sa00p.js} +61 -50
  21. package/dist/chunks/combobox-om4zw74o076sa00p.js.map +1 -0
  22. package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js → command-palette-ejoszjfivybu9yi5.js} +3 -3
  23. package/dist/chunks/{command-palette-l8dym46a74o7j8ci.js.map → command-palette-ejoszjfivybu9yi5.js.map} +1 -1
  24. package/dist/chunks/{dialog-emk68n0piw8u7hkb.js → dialog-gkmecnx48ge38jrr.js} +11 -11
  25. package/dist/chunks/dialog-gkmecnx48ge38jrr.js.map +1 -0
  26. package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js → dropdown-i8n7nv3cvkvb1x3e.js} +2 -2
  27. package/dist/chunks/{dropdown-ejgjnn9gq3daua1h.js.map → dropdown-i8n7nv3cvkvb1x3e.js.map} +1 -1
  28. package/dist/chunks/{empty-crbntv0dhud7besh.js → empty-h3qhwtx0z8arupc9.js} +2 -2
  29. package/dist/chunks/{empty-crbntv0dhud7besh.js.map → empty-h3qhwtx0z8arupc9.js.map} +1 -1
  30. package/dist/chunks/{field-ftrgblg9mbmz9eo3.js → field-lc4gr226y5aqlctf.js} +3 -3
  31. package/dist/chunks/{field-ftrgblg9mbmz9eo3.js.map → field-lc4gr226y5aqlctf.js.map} +1 -1
  32. package/dist/chunks/input-area-ce3bf8m8wvot44kg.js +74 -0
  33. package/dist/chunks/input-area-ce3bf8m8wvot44kg.js.map +1 -0
  34. package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js → input-group-kttdor9mr32k289o.js} +3 -3
  35. package/dist/chunks/{input-group-g6qyhe5jvpe02hee.js.map → input-group-kttdor9mr32k289o.js.map} +1 -1
  36. package/dist/chunks/{input-me56hug8sl0u650q.js → input-nvne68upfj8b2bk6.js} +20 -20
  37. package/dist/chunks/input-nvne68upfj8b2bk6.js.map +1 -0
  38. package/dist/chunks/{label-eooot7dhtfvw7n3x.js → label-e42o95ab0dxmchxb.js} +3 -3
  39. package/dist/chunks/{label-eooot7dhtfvw7n3x.js.map → label-e42o95ab0dxmchxb.js.map} +1 -1
  40. package/dist/chunks/{layer-card-8azgeai6zsrdbeoj.js → layer-card-mu2w82x6ko1nhhtr.js} +7 -7
  41. package/dist/chunks/{layer-card-8azgeai6zsrdbeoj.js.map → layer-card-mu2w82x6ko1nhhtr.js.map} +1 -1
  42. package/dist/chunks/{link-moetfdbgxda0yhwg.js → link-lpzl5s47pmobk361.js} +2 -2
  43. package/dist/chunks/{link-moetfdbgxda0yhwg.js.map → link-lpzl5s47pmobk361.js.map} +1 -1
  44. package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js → menubar-ifxxdoa35zz79z1q.js} +2 -2
  45. package/dist/chunks/{menubar-c2zwv4mbo3xqq7is.js.map → menubar-ifxxdoa35zz79z1q.js.map} +1 -1
  46. package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js → meter-fbtqfg0okpwmaiju.js} +2 -2
  47. package/dist/chunks/{meter-em2hfu8j2rhmf5ae.js.map → meter-fbtqfg0okpwmaiju.js.map} +1 -1
  48. package/dist/chunks/{pagination-xt93wvwvow4z44lc.js → pagination-owm6h66jjgv1tjoe.js} +3 -3
  49. package/dist/chunks/{pagination-xt93wvwvow4z44lc.js.map → pagination-owm6h66jjgv1tjoe.js.map} +1 -1
  50. package/dist/chunks/{popover-irccwetx73p8pnua.js → popover-dd7hi5ajeoq9od1i.js} +2 -2
  51. package/dist/chunks/{popover-irccwetx73p8pnua.js.map → popover-dd7hi5ajeoq9od1i.js.map} +1 -1
  52. package/dist/chunks/radio-ff1csb328f12smd4.js +200 -0
  53. package/dist/chunks/radio-ff1csb328f12smd4.js.map +1 -0
  54. package/dist/chunks/{select-jxxef2rf76pgdrf8.js → select-go7a0z3evkh9cfxq.js} +41 -34
  55. package/dist/chunks/select-go7a0z3evkh9cfxq.js.map +1 -0
  56. package/dist/chunks/{sensitive-input-i7ey1w0ky7nco012.js → sensitive-input-gtzk3vit4i35n95g.js} +34 -34
  57. package/dist/chunks/sensitive-input-gtzk3vit4i35n95g.js.map +1 -0
  58. package/dist/chunks/switch-cpbp0i75jnazkani.js +241 -0
  59. package/dist/chunks/switch-cpbp0i75jnazkani.js.map +1 -0
  60. package/dist/chunks/{table-d4ql7fjvok30xs1f.js → table-g41yb7ruredizqr8.js} +3 -3
  61. package/dist/chunks/table-g41yb7ruredizqr8.js.map +1 -0
  62. package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js → tabs-hy6oa7xtf96d9mxt.js} +27 -27
  63. package/dist/chunks/{tabs-n3rcvuzx0gbslyy6.js.map → tabs-hy6oa7xtf96d9mxt.js.map} +1 -1
  64. package/dist/chunks/{toast-j05qj3vk688ht1i1.js → toast-j5gtfc50xpzzd0hc.js} +3 -3
  65. package/dist/chunks/{toast-j05qj3vk688ht1i1.js.map → toast-j5gtfc50xpzzd0hc.js.map} +1 -1
  66. package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js → tooltip-k68wcv9mrigb7rcb.js} +2 -2
  67. package/dist/chunks/{tooltip-es2dwwbhftg4k2jy.js.map → tooltip-k68wcv9mrigb7rcb.js.map} +1 -1
  68. package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js → vendor-base-ui-cpvkrhz4zgw9nw2b.js} +18 -18
  69. package/dist/chunks/{vendor-base-ui-kxxocm122zr4pipe.js.map → vendor-base-ui-cpvkrhz4zgw9nw2b.js.map} +1 -1
  70. package/dist/code.js +1 -1
  71. package/dist/code.js.map +1 -1
  72. package/dist/components/breadcrumbs.js +1 -1
  73. package/dist/components/button.js +1 -1
  74. package/dist/components/chart.js +1 -1
  75. package/dist/components/checkbox.js +1 -1
  76. package/dist/components/clipboard-text.js +1 -1
  77. package/dist/components/combobox.js +1 -1
  78. package/dist/components/command-palette.js +1 -1
  79. package/dist/components/dialog.js +1 -1
  80. package/dist/components/dropdown.js +1 -1
  81. package/dist/components/empty.js +1 -1
  82. package/dist/components/field.js +1 -1
  83. package/dist/components/flow.js +1435 -1431
  84. package/dist/components/flow.js.map +1 -1
  85. package/dist/components/input.js +3 -3
  86. package/dist/components/label.js +1 -1
  87. package/dist/components/layer-card.js +1 -1
  88. package/dist/components/link.js +1 -1
  89. package/dist/components/menubar.js +1 -1
  90. package/dist/components/meter.js +1 -1
  91. package/dist/components/pagination.js +1 -1
  92. package/dist/components/popover.js +1 -1
  93. package/dist/components/radio.js +1 -1
  94. package/dist/components/select.js +1 -1
  95. package/dist/components/sensitive-input.js +1 -1
  96. package/dist/components/switch.js +1 -1
  97. package/dist/components/table.js +1 -1
  98. package/dist/components/tabs.js +1 -1
  99. package/dist/components/toast.js +2 -2
  100. package/dist/components/tooltip.js +1 -1
  101. package/dist/index.js +70 -69
  102. package/dist/primitives/accordion.js +1 -1
  103. package/dist/primitives/alert-dialog.js +1 -1
  104. package/dist/primitives/autocomplete.js +1 -1
  105. package/dist/primitives/avatar.js +1 -1
  106. package/dist/primitives/button.js +1 -1
  107. package/dist/primitives/checkbox-group.js +1 -1
  108. package/dist/primitives/checkbox.js +1 -1
  109. package/dist/primitives/collapsible.js +1 -1
  110. package/dist/primitives/combobox.js +1 -1
  111. package/dist/primitives/context-menu.js +1 -1
  112. package/dist/primitives/csp-provider.js +1 -1
  113. package/dist/primitives/dialog.js +1 -1
  114. package/dist/primitives/direction-provider.js +1 -1
  115. package/dist/primitives/drawer.js +1 -1
  116. package/dist/primitives/field.js +1 -1
  117. package/dist/primitives/fieldset.js +1 -1
  118. package/dist/primitives/form.js +1 -1
  119. package/dist/primitives/input.js +1 -1
  120. package/dist/primitives/menu.js +1 -1
  121. package/dist/primitives/menubar.js +1 -1
  122. package/dist/primitives/meter.js +1 -1
  123. package/dist/primitives/navigation-menu.js +1 -1
  124. package/dist/primitives/number-field.js +1 -1
  125. package/dist/primitives/popover.js +1 -1
  126. package/dist/primitives/preview-card.js +1 -1
  127. package/dist/primitives/progress.js +1 -1
  128. package/dist/primitives/radio-group.js +1 -1
  129. package/dist/primitives/radio.js +1 -1
  130. package/dist/primitives/scroll-area.js +1 -1
  131. package/dist/primitives/select.js +1 -1
  132. package/dist/primitives/separator.js +1 -1
  133. package/dist/primitives/slider.js +1 -1
  134. package/dist/primitives/switch.js +1 -1
  135. package/dist/primitives/tabs.js +1 -1
  136. package/dist/primitives/toast.js +1 -1
  137. package/dist/primitives/toggle-group.js +1 -1
  138. package/dist/primitives/toggle.js +1 -1
  139. package/dist/primitives/toolbar.js +1 -1
  140. package/dist/primitives/tooltip.js +1 -1
  141. package/dist/primitives.js +1 -1
  142. package/dist/scripts/theme-generator/config.d.ts.map +1 -1
  143. package/dist/scripts/theme-generator/config.js +12 -3
  144. package/dist/scripts/theme-generator/config.js.map +1 -1
  145. package/dist/src/code/code-highlighted.d.ts +2 -2
  146. package/dist/src/code/code-highlighted.d.ts.map +1 -1
  147. package/dist/src/code/provider.d.ts +2 -2
  148. package/dist/src/code/provider.d.ts.map +1 -1
  149. package/dist/src/components/chart/EChart.d.ts +7 -2
  150. package/dist/src/components/chart/EChart.d.ts.map +1 -1
  151. package/dist/src/components/combobox/combobox.d.ts.map +1 -1
  152. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  153. package/dist/src/components/input/input-area.d.ts.map +1 -1
  154. package/dist/src/components/radio/index.d.ts +1 -1
  155. package/dist/src/components/radio/index.d.ts.map +1 -1
  156. package/dist/src/components/radio/radio.d.ts +43 -4
  157. package/dist/src/components/radio/radio.d.ts.map +1 -1
  158. package/dist/src/components/select/select.d.ts.map +1 -1
  159. package/dist/src/components/switch/switch.d.ts +8 -8
  160. package/dist/src/components/switch/switch.d.ts.map +1 -1
  161. package/dist/src/index.d.ts +1 -1
  162. package/dist/src/index.d.ts.map +1 -1
  163. package/dist/styles/kumo-binding.css +5 -0
  164. package/dist/styles/kumo-standalone.css +1 -1
  165. package/dist/styles/theme-kumo.css +7 -0
  166. package/package.json +3 -6
  167. package/scripts/theme-generator/config.ts +12 -3
  168. package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js +0 -402
  169. package/dist/chunks/Legend-fu32ev5ph2ehbfzy.js.map +0 -1
  170. package/dist/chunks/combobox-i3mdp6f01dvpoc5j.js.map +0 -1
  171. package/dist/chunks/dialog-emk68n0piw8u7hkb.js.map +0 -1
  172. package/dist/chunks/input-area-hxtyrqpp44m18j72.js +0 -59
  173. package/dist/chunks/input-area-hxtyrqpp44m18j72.js.map +0 -1
  174. package/dist/chunks/input-me56hug8sl0u650q.js.map +0 -1
  175. package/dist/chunks/radio-394mfs3au5m8cgd8.js +0 -125
  176. package/dist/chunks/radio-394mfs3au5m8cgd8.js.map +0 -1
  177. package/dist/chunks/select-jxxef2rf76pgdrf8.js.map +0 -1
  178. package/dist/chunks/sensitive-input-i7ey1w0ky7nco012.js.map +0 -1
  179. package/dist/chunks/switch-b0xo8fxsfzv87krj.js +0 -257
  180. package/dist/chunks/switch-b0xo8fxsfzv87krj.js.map +0 -1
  181. package/dist/chunks/table-d4ql7fjvok30xs1f.js.map +0 -1
@@ -1,59 +0,0 @@
1
- "use client";
2
- import { jsx as i } from "react/jsx-runtime";
3
- import { i as C } from "./input-me56hug8sl0u650q.js";
4
- import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
5
- import * as I from "react";
6
- import { useCallback as y } from "react";
7
- import { F as N } from "./field-ftrgblg9mbmz9eo3.js";
8
- const c = I.forwardRef(
9
- (l, m) => {
10
- const {
11
- className: p,
12
- onValueChange: r,
13
- size: u = "base",
14
- variant: f = "default",
15
- onChange: e,
16
- label: t,
17
- labelTooltip: d,
18
- description: h,
19
- error: a,
20
- ...o
21
- } = l, { required: g } = o, x = y(
22
- (n) => {
23
- e?.(n), r?.(n.target.value);
24
- },
25
- [e, r]
26
- ), s = /* @__PURE__ */ i(
27
- "textarea",
28
- {
29
- ref: m,
30
- className: b(
31
- C({ size: u, variant: f, focusIndicator: !0 }),
32
- "h-auto py-2",
33
- // Input variant always come with size, but it does not apply for textarea
34
- p
35
- ),
36
- onChange: x,
37
- ...o
38
- }
39
- );
40
- return t ? /* @__PURE__ */ i(
41
- N,
42
- {
43
- label: t,
44
- required: g,
45
- labelTooltip: d,
46
- description: h,
47
- error: a ? typeof a == "string" ? { message: a, match: !0 } : a : void 0,
48
- children: s
49
- }
50
- ) : s;
51
- }
52
- );
53
- c.displayName = "InputArea";
54
- const j = c;
55
- export {
56
- c as I,
57
- j as T
58
- };
59
- //# sourceMappingURL=input-area-hxtyrqpp44m18j72.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-area-hxtyrqpp44m18j72.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n (props, ref) => {\n const {\n className,\n onValueChange,\n size = \"base\",\n variant = \"default\",\n onChange,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n onValueChange?.(event.target.value);\n },\n [onChange, onValueChange],\n );\n\n const textarea = (\n <textarea\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always come with size, but it does not apply for textarea\n className,\n )}\n onChange={handleChange}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <KumoField\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {textarea}\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return textarea;\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n onValueChange?: (value: string) => void;\n variant?: \"default\" | \"error\";\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n // Then other custom props\n children?: React.ReactNode;\n className?: string;\n /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the textarea */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textarea","jsx","cn","inputVariants","KumoField","Textarea"],"mappings":";;;;;;;AAMO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,WAAWiB;AAAA,UACTC,EAAc,EAAE,MAAAf,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,UACrD;AAAA;AAAA,UACAH;AAAA,QAAA;AAAA,QAEF,UAAUW;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAKR,WAAIJ,IAEA,gBAAAU;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAM;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAlB,EAAU,cAAc;AAGjB,MAAMuB,IAAWvB;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-me56hug8sl0u650q.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles\n \"outline-none placeholder:text-kumo-subtle disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
@@ -1,125 +0,0 @@
1
- "use client";
2
- import { jsx as e, jsxs as c } from "react/jsx-runtime";
3
- import { forwardRef as b, createContext as h, useContext as k } from "react";
4
- import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
5
- import { R as N, P as I, Q as w, bi as y, bj as A } from "./vendor-base-ui-kxxocm122zr4pipe.js";
6
- const j = {
7
- variant: {
8
- default: {
9
- classes: "ring-kumo-line",
10
- description: "Default radio appearance"
11
- },
12
- error: {
13
- classes: "ring-destructive",
14
- description: "Error state for validation failures"
15
- }
16
- }
17
- }, G = {
18
- variant: "default"
19
- };
20
- function P({
21
- variant: r = G.variant
22
- } = {}) {
23
- return a(j.variant[r].classes);
24
- }
25
- const u = h({
26
- controlPosition: "start"
27
- }), d = b(
28
- ({ className: r, disabled: t, variant: i = "default", label: o, value: s }, n) => {
29
- const { controlPosition: l } = k(u);
30
- return /* @__PURE__ */ c(
31
- "label",
32
- {
33
- className: a(
34
- "m-0 group relative inline-flex items-center gap-2",
35
- // "start" (default): radio before label
36
- // "end": label before radio using flex-row-reverse
37
- l === "end" && "flex-row-reverse justify-end",
38
- t ? "cursor-not-allowed opacity-50" : "cursor-pointer",
39
- r
40
- ),
41
- children: [
42
- /* @__PURE__ */ e(
43
- y,
44
- {
45
- ref: n,
46
- value: s,
47
- disabled: t,
48
- className: a(
49
- "relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
50
- i === "error" ? "ring-kumo-danger" : "ring-kumo-line",
51
- !t && "group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3",
52
- "data-checked:bg-kumo-contrast"
53
- ),
54
- children: /* @__PURE__ */ e(A, { className: "flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-kumo-base" }) })
55
- }
56
- ),
57
- /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: o })
58
- ]
59
- }
60
- );
61
- }
62
- );
63
- d.displayName = "Radio.Item";
64
- function m({
65
- legend: r,
66
- children: t,
67
- orientation: i = "vertical",
68
- error: o,
69
- description: s,
70
- defaultValue: n,
71
- value: l,
72
- onValueChange: f,
73
- disabled: p,
74
- controlPosition: x = "start",
75
- name: g,
76
- className: R
77
- }) {
78
- return /* @__PURE__ */ e(u.Provider, { value: { controlPosition: x }, children: /* @__PURE__ */ e(
79
- N,
80
- {
81
- defaultValue: n,
82
- value: l,
83
- onValueChange: (v) => f?.(v),
84
- disabled: p,
85
- name: g,
86
- children: /* @__PURE__ */ c(
87
- I,
88
- {
89
- className: a(
90
- "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
91
- R
92
- ),
93
- children: [
94
- /* @__PURE__ */ e(w, { className: "text-lg font-medium text-kumo-default", children: r }),
95
- /* @__PURE__ */ e(
96
- "div",
97
- {
98
- className: a(
99
- "flex gap-2",
100
- i === "vertical" ? "flex-col" : "flex-row flex-wrap"
101
- ),
102
- children: t
103
- }
104
- ),
105
- o && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: o }),
106
- s && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: s })
107
- ]
108
- }
109
- )
110
- }
111
- ) });
112
- }
113
- m.displayName = "Radio.Group";
114
- const V = {
115
- Item: d,
116
- Group: m
117
- };
118
- export {
119
- j as K,
120
- V as R,
121
- m as a,
122
- G as b,
123
- P as r
124
- };
125
- //# sourceMappingURL=radio-394mfs3au5m8cgd8.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"radio-394mfs3au5m8cgd8.js","sources":["../../src/components/radio/radio.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\n\n/** Radio variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_RADIO_VARIANTS = {\n variant: {\n default: {\n classes: \"ring-kumo-line\",\n description: \"Default radio appearance\",\n },\n error: {\n classes: \"ring-destructive\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_RADIO_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_RADIO_VARIANTS\nexport type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;\n\nexport interface KumoRadioVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard radio appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoRadioVariant;\n}\n\nexport function radioVariants({\n variant = KUMO_RADIO_DEFAULT_VARIANTS.variant,\n}: KumoRadioVariantsProps = {}) {\n return cn(KUMO_RADIO_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type RadioVariant = KumoRadioVariant;\n\n/** Position of the radio control relative to its label */\nexport type RadioControlPosition = \"start\" | \"end\";\n\n// Context for passing controlPosition from Group to Items\nconst RadioGroupContext = createContext<{\n controlPosition: RadioControlPosition;\n}>({\n controlPosition: \"start\",\n});\n\n/**\n * Radio group component props (with built-in Fieldset and RadioGroup)\n *\n * @example\n * // Basic usage\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Horizontal layout\n * ```tsx\n * <Radio.Group legend=\"Size\" orientation=\"horizontal\" defaultValue=\"md\">\n * <Radio.Item label=\"Small\" value=\"sm\" />\n * <Radio.Item label=\"Medium\" value=\"md\" />\n * <Radio.Item label=\"Large\" value=\"lg\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // With error and description\n * ```tsx\n * <Radio.Group\n * legend=\"Payment method\"\n * error=\"Please select a payment method\"\n * description=\"Choose how you'd like to pay\"\n * >\n * <Radio.Item label=\"Credit Card\" value=\"card\" />\n * <Radio.Item label=\"PayPal\" value=\"paypal\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Controlled\n * ```tsx\n * const [value, setValue] = useState(\"email\");\n * <Radio.Group legend=\"Contact\" value={value} onValueChange={setValue}>\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"Phone\" value=\"phone\" />\n * </Radio.Group>\n * ```\n *\n * @example\n * // Label before radio (controlPosition=\"end\")\n * ```tsx\n * <Radio.Group legend=\"Options\" controlPosition=\"end\" defaultValue=\"a\">\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * <Radio.Item label=\"Option B\" value=\"b\" />\n * </Radio.Group>\n * ```\n */\nexport interface RadioGroupProps {\n /** Legend text for the group (required for accessibility) */\n legend: string;\n /** Child Radio.Item components */\n children: ReactNode;\n /** Layout direction of the radio items */\n orientation?: \"vertical\" | \"horizontal\";\n /** Error message for the group */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Value of the radio that should be initially selected (uncontrolled) */\n defaultValue?: string;\n /** Value of the radio that should be selected (controlled) */\n value?: string;\n /** Event handler called when radio value changes */\n onValueChange?: (value: string) => void;\n /** Whether all radios in the group are disabled */\n disabled?: boolean;\n /** Position of radio control relative to label: \"start\" (default) puts radio before label, \"end\" puts label before radio */\n controlPosition?: RadioControlPosition;\n /** Form submission name for the radio group */\n name?: string;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual radio item within a group\n *\n * @example\n * ```tsx\n * <Radio.Item label=\"Option A\" value=\"a\" />\n * ```\n *\n * @example\n * // Disabled item\n * ```tsx\n * <Radio.Item label=\"Unavailable\" value=\"unavailable\" disabled />\n * ```\n */\nexport type RadioItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: RadioVariant;\n /** Label text displayed next to radio (required) */\n label: string;\n /** Value of the radio (required) */\n value: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n /** Whether the radio is disabled */\n disabled?: boolean;\n};\n\n// Radio.Item for use within Radio.Group\nconst RadioItem = forwardRef<HTMLButtonElement, RadioItemProps>(\n ({ className, disabled, variant = \"default\", label, value }, ref) => {\n const { controlPosition } = useContext(RadioGroupContext);\n\n return (\n <label\n className={cn(\n \"m-0 group relative inline-flex items-center gap-2\",\n // \"start\" (default): radio before label\n // \"end\": label before radio using flex-row-reverse\n controlPosition === \"end\" && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseRadio.Root\n ref={ref}\n value={value}\n disabled={disabled}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-full border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n !disabled &&\n \"group-hover:ring-kumo-ring focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n \"data-checked:bg-kumo-contrast\",\n )}\n >\n <BaseRadio.Indicator className=\"flex items-center justify-center\">\n <span className=\"h-2 w-2 rounded-full bg-kumo-base\" />\n </BaseRadio.Indicator>\n </BaseRadio.Root>\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nRadioItem.displayName = \"Radio.Item\";\n\n// Radio.Group with built-in Fieldset and RadioGroup\nfunction RadioGroup({\n legend,\n children,\n orientation = \"vertical\",\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n disabled,\n controlPosition = \"start\",\n name,\n className,\n}: RadioGroupProps) {\n return (\n <RadioGroupContext.Provider value={{ controlPosition }}>\n <BaseRadioGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={(newValue) => onValueChange?.(newValue as string)}\n disabled={disabled}\n name={name}\n >\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div\n className={cn(\n \"flex gap-2\",\n orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n )}\n >\n {children}\n </div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseRadioGroup>\n </RadioGroupContext.Provider>\n );\n}\n\nRadioGroup.displayName = \"Radio.Group\";\n\n// Export RadioGroup directly for external usage\nexport { RadioGroup };\n\n/**\n * Radio — radio button group for single-select choices.\n *\n * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.\n * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.\n *\n * @example\n * ```tsx\n * <Radio.Group legend=\"Notification preference\" defaultValue=\"email\">\n * <Radio.Item label=\"Email\" value=\"email\" />\n * <Radio.Item label=\"SMS\" value=\"sms\" />\n * <Radio.Item label=\"Push\" value=\"push\" />\n * </Radio.Group>\n * ```\n */\nexport const Radio = {\n Item: RadioItem,\n Group: RadioGroup,\n};\n"],"names":["KUMO_RADIO_VARIANTS","KUMO_RADIO_DEFAULT_VARIANTS","radioVariants","variant","cn","RadioGroupContext","createContext","RadioItem","forwardRef","className","disabled","label","value","ref","controlPosition","useContext","jsxs","jsx","BaseRadio.Root","BaseRadio.Indicator","RadioGroup","legend","children","orientation","error","description","defaultValue","onValueChange","name","BaseRadioGroup","newValue","Fieldset.Root","Fieldset.Legend","Radio"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"select-jxxef2rf76pgdrf8.js","sources":["../../src/components/select/select.tsx"],"sourcesContent":["import { Select as SelectBase } from \"@base-ui/react/select\";\nimport { CaretUpDownIcon, CheckIcon } from \"@phosphor-icons/react\";\nimport { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { buttonVariants } from \"../button\";\nimport { SkeletonLine } from \"../loader\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Select variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_SELECT_VARIANTS = {\n // Select currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_SELECT_DEFAULT_VARIANTS = {} as const;\n\n/**\n * Select component styling metadata for Figma plugin code generation\n * Extracted from select.tsx implementation (source of truth)\n */\nexport const KUMO_SELECT_STYLING = {\n trigger: {\n height: 36, // h-9\n paddingX: 12, // px-3\n borderRadius: 8, // rounded-lg\n background: \"color-secondary\",\n text: \"text-color-surface\",\n ring: \"color-border\",\n fontSize: 16, // text-base\n fontWeight: 400, // font-normal\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n disabled: { opacity: 0.5 },\n },\n icons: {\n caret: { name: \"ph-caret-up-down\", size: 20 },\n check: { name: \"ph-check\", size: 20 },\n },\n popup: {\n background: \"color-secondary\",\n ring: \"color-border\",\n borderRadius: 8, // rounded-lg\n padding: 6, // p-1.5\n },\n option: {\n paddingX: 8, // px-2\n paddingY: 6, // py-1.5\n borderRadius: 4, // rounded\n fontSize: 16, // text-base\n highlightBackground: \"color-surface-secondary\",\n },\n} as const;\n\n// Derived types from KUMO_SELECT_VARIANTS\nexport interface KumoSelectVariantsProps {}\n\nexport function selectVariants(_props: KumoSelectVariantsProps = {}) {\n return cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n );\n}\n\n/**\n * Normalizes items to array format for Base UI.\n * Object maps are converted to array format so Base UI can properly\n * handle value matching and placeholder display.\n */\nfunction normalizeItems<T>(\n items:\n | Record<string, ReactNode>\n | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReadonlyArray<{ label: ReactNode; value: T }> {\n if (Array.isArray(items)) {\n return items;\n }\n // Convert object map to array format\n return Object.entries(items).map(([key, label]) => ({\n value: key as T,\n label,\n }));\n}\n\n/**\n * Auto-generates Select.Option elements from items prop.\n * Only used when children are not explicitly provided.\n * Filters out null values (typically used for placeholders).\n */\nfunction renderOptionsFromItems<T>(\n items:\n | Record<string, ReactNode>\n | ReadonlyArray<{ label: ReactNode; value: T }>,\n): ReactNode {\n const normalizedItems = normalizeItems(items);\n\n // Filter out null values and render options\n return normalizedItems\n .filter((item) => item.value !== null)\n .map((item, index) => (\n <Option\n key={typeof item.value === \"string\" ? item.value : `option-${index}`}\n value={item.value}\n >\n {item.label}\n </Option>\n ));\n}\n\ntype SelectPropsGeneric<\n T,\n Multiple extends boolean | undefined = false,\n> = SelectBase.Root.Props<T, Multiple> &\n KumoSelectVariantsProps & {\n multiple?: Multiple;\n renderValue?: (value: Multiple extends true ? T[] : T) => ReactNode;\n className?: string;\n /**\n * Label content for the select.\n * When provided, enables the Field wrapper with a visible label.\n * For accessibility without a visible label, use `aria-label` instead.\n */\n label?: ReactNode;\n /**\n * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n * This prop will be removed in a future version.\n */\n hideLabel?: boolean;\n placeholder?: string;\n loading?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the select */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n\n/**\n * Select component props.\n *\n * **Accessible Name Required:** Select should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with visible label\n * 2. `aria-label` - for selects without visible label (accessibility-only)\n * 3. `aria-labelledby` - for custom label association\n *\n * @example\n * ```tsx\n * // With visible label (recommended)\n * <Select label=\"Country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * <Select.Option value=\"uk\">United Kingdom</Select.Option>\n * </Select>\n *\n * // Without visible label (use aria-label for accessibility)\n * <Select aria-label=\"Select a country\" onValueChange={setValue}>\n * <Select.Option value=\"us\">United States</Select.Option>\n * </Select>\n * ```\n */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /**\n * Label content for the select.\n * When provided, enables the Field wrapper with a visible label above the select.\n * For accessibility without a visible label, use `aria-label` instead.\n */\n label?: ReactNode;\n /**\n * @deprecated Use `aria-label` for hidden labels instead of `label` + `hideLabel={true}`.\n * When `label` is provided without `hideLabel`, the label is now visible by default (matching Input behavior).\n * This prop will be removed in a future version.\n */\n hideLabel?: boolean;\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** When `true`, shows a skeleton loader in place of the selected value. */\n loading?: boolean;\n /** Whether the select is disabled. */\n disabled?: boolean;\n /** Whether the select is required. When `false`, shows \"(optional)\" text. */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Currently selected value (controlled mode). */\n value?: unknown;\n /** Initial value for uncontrolled mode. */\n defaultValue?: unknown;\n /** Callback fired when the selected value changes. */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode. */\n multiple?: boolean;\n /** `Select.Option` elements to render in the dropdown. */\n children?: ReactNode;\n /** Helper text displayed below the select. */\n description?: ReactNode;\n /** Error message string or validation error object with `match` key. */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Dropdown for selecting a value from a list of options.\n * Wraps Base UI Select with Kumo styling and optional Field integration.\n *\n * @example\n * ```tsx\n * <Select label=\"Fruit\" onValueChange={setFruit}>\n * <Select.Option value=\"apple\">Apple</Select.Option>\n * <Select.Option value=\"banana\">Banana</Select.Option>\n * </Select>\n * ```\n */\nexport function Select<T, Multiple extends boolean | undefined = false>({\n children,\n className,\n renderValue,\n label,\n hideLabel,\n placeholder,\n loading,\n labelTooltip,\n description,\n error,\n required,\n ...props\n}: SelectPropsGeneric<T, Multiple> & { required?: boolean }) {\n const labelId = useId();\n const propLookup = props as Record<string, unknown>;\n const ariaLabel = propLookup[\"aria-label\"] as string | undefined;\n const ariaLabelledby = propLookup[\"aria-labelledby\"] as string | undefined;\n // For aria-label, use string label or placeholder (ReactNode labels can't be used for aria-label)\n const fallbackLabel = typeof label === \"string\" ? label : placeholder;\n\n // Deprecation warning for hideLabel\n if (process.env.NODE_ENV !== \"production\" && hideLabel !== undefined) {\n console.warn(\n \"[Kumo Select]: `hideLabel` is deprecated. For hidden labels, use `aria-label` instead of `label` + `hideLabel={true}`.\\n\" +\n \" Migration:\\n\" +\n ' - For visible labels: <Select label=\"Country\" /> (hideLabel no longer needed)\\n' +\n ' - For hidden labels: <Select aria-label=\"Select a country\" /> (remove label and hideLabel)',\n );\n }\n\n // New behavior: label presence determines Field wrapper visibility (like Input)\n // hideLabel is only respected for backward compatibility when explicitly set to true\n const useFieldWrapper = label && hideLabel !== true;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : undefined);\n\n // Normalize items to array format for Base UI compatibility\n // This fixes placeholder not showing with object map items\n const normalizedItems = props.items ? normalizeItems(props.items) : undefined;\n\n // Auto-render children from items if children not provided\n const renderedChildren =\n children ?? (props.items ? renderOptionsFromItems(props.items) : null);\n\n const selectControl = (\n <SelectBase.Root\n {...props}\n items={normalizedItems}\n disabled={loading || props.disabled}\n >\n <SelectBase.Trigger\n className={cn(\n buttonVariants(),\n \"justify-between font-normal\",\n \"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100\",\n props.disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n aria-label={triggerAriaLabel}\n aria-labelledby={triggerLabelledBy}\n >\n {loading ? (\n <SkeletonLine className=\"w-32\" />\n ) : (\n <SelectBase.Value placeholder={placeholder}>\n {renderValue}\n </SelectBase.Value>\n )}\n <SelectBase.Icon className=\"flex items-center\">\n <CaretUpDownIcon />\n </SelectBase.Icon>\n </SelectBase.Trigger>\n <SelectBase.Portal>\n <SelectBase.Positioner>\n <SelectBase.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n // 3px adjustment to account for padding + border differences\n \"min-w-[calc(var(--anchor-width)+3px)] p-1.5\", // spacing\n )}\n >\n {renderedChildren}\n </SelectBase.Popup>\n </SelectBase.Positioner>\n </SelectBase.Portal>\n </SelectBase.Root>\n );\n\n // Use Field wrapper when label is provided and not hidden\n if (useFieldWrapper) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {selectControl}\n </Field>\n );\n }\n\n // Render with standalone label when label is hidden (sr-only)\n // Still show description/error for accessibility and UX\n const normalizedError = error\n ? typeof error === \"string\"\n ? { message: error, match: true as const }\n : error\n : undefined;\n\n return (\n <div className=\"grid gap-2\">\n {label && (\n <span id={labelId} className=\"sr-only\">\n {label}\n </span>\n )}\n {selectControl}\n {normalizedError ? (\n <span className=\"text-sm text-kumo-danger\">\n {normalizedError.message}\n </span>\n ) : (\n description && (\n <span className=\"text-sm leading-snug text-kumo-subtle\">\n {description}\n </span>\n )\n )}\n </div>\n );\n}\n\ntype OptionProps<T> = {\n children: ReactNode;\n value: T;\n};\n\nfunction Option<T>({ children, value }: OptionProps<T>) {\n return (\n <SelectBase.Item\n value={value}\n className=\"group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n >\n <SelectBase.ItemText>{children}</SelectBase.ItemText>\n <SelectBase.ItemIndicator>\n <CheckIcon />\n </SelectBase.ItemIndicator>\n </SelectBase.Item>\n );\n}\n\nSelect.Option = Option;\n"],"names":["normalizeItems","items","key","label","renderOptionsFromItems","item","index","jsx","Option","Select","children","className","renderValue","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","normalizedItems","renderedChildren","selectControl","jsxs","SelectBase.Root","SelectBase.Trigger","cn","buttonVariants","SkeletonLine","SelectBase.Value","SelectBase.Icon","CaretUpDownIcon","SelectBase.Portal","SelectBase.Positioner","SelectBase.Popup","Field","normalizedError","value","SelectBase.Item","SelectBase.ItemText","SelectBase.ItemIndicator","CheckIcon"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"sensitive-input-i7ey1w0ky7nco012.js","sources":["../../src/components/sensitive-input/sensitive-input.tsx"],"sourcesContent":["import { Eye, EyeSlash } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n type KumoInputVariant,\n} from \"../input/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\nexport const KUMO_SENSITIVE_INPUT_VARIANTS = KUMO_INPUT_VARIANTS;\n\nexport const KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\ntype Mode = \"masked\" | \"revealed\" | \"empty\";\n\n/**\n * SensitiveInput component props.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * <SensitiveInput label=\"Secret\" value={secret} onValueChange={setSecret} />\n * ```\n */\nexport interface SensitiveInputProps\n extends Omit<\n ComponentPropsWithoutRef<\"input\">,\n \"size\" | \"type\" | \"value\" | \"defaultValue\"\n > {\n /** Controlled value */\n value?: string;\n /** Uncontrolled default value */\n defaultValue?: string;\n /** Simplified change handler receiving just the value */\n onValueChange?: (value: string) => void;\n /** Callback fired after value is copied to clipboard */\n onCopy?: () => void;\n /**\n * Size of the input.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default input size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Style variant of the input.\n * - `\"default\"` — Default input appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n /** Label content for the input (enables Field wrapper and sets masked state label) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\n/**\n * Password/secret input that masks its value by default and reveals on click.\n * Includes a built-in copy-to-clipboard button on hover.\n *\n * @example\n * ```tsx\n * <SensitiveInput label=\"API Key\" defaultValue=\"sk_live_abc123xyz789\" />\n * ```\n */\nexport const SensitiveInput = forwardRef<HTMLInputElement, SensitiveInputProps>(\n (\n {\n value: controlledValue,\n defaultValue = \"\",\n onChange,\n onValueChange,\n onCopy,\n size = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.size,\n variant = KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS.variant,\n disabled = false,\n readOnly = false,\n id,\n autoComplete = \"off\",\n className,\n label,\n labelTooltip,\n description,\n error,\n required,\n ...inputProps\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback =\n typeof label === \"string\" ? label : \"Sensitive value\";\n const isControlled = controlledValue !== undefined;\n const [internalValue, setInternalValue] = useState(defaultValue);\n const value = isControlled ? controlledValue : internalValue;\n const hasValue = value.length > 0;\n\n const [mode, setMode] = useState<Mode>(() =>\n hasValue ? \"masked\" : \"empty\",\n );\n\n const [copied, setCopied] = useState(false);\n\n const inputRef = useRef<HTMLInputElement | null>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const liveRegionId = useId();\n const generatedId = useId();\n const inputId = id ?? generatedId;\n const maskedInstructionId = useId();\n\n const mergedRef = useCallback(\n (node: HTMLInputElement | null) => {\n inputRef.current = node;\n if (typeof ref === \"function\") {\n ref(node);\n } else if (ref) {\n ref.current = node;\n }\n },\n [ref],\n );\n\n // Reset copied state after 2 seconds\n useEffect(() => {\n if (copied) {\n const timeoutId = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeoutId);\n }\n }, [copied]);\n\n const copyToClipboard = useCallback(\n async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(value);\n setCopied(true);\n onCopy?.();\n return;\n }\n } catch {\n // Fall through to manual fallback\n }\n\n if (typeof document !== \"undefined\") {\n const textarea = document.createElement(\"textarea\");\n textarea.value = value;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n setCopied(true);\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n },\n [value, onCopy],\n );\n\n // Sync mode when value changes externally\n const prevHasValueRef = useRef(hasValue);\n if (prevHasValueRef.current !== hasValue) {\n prevHasValueRef.current = hasValue;\n if (!hasValue && mode === \"masked\") {\n setMode(\"empty\");\n }\n }\n\n const handleContainerClick = useCallback(\n (e: React.MouseEvent) => {\n if (disabled) return;\n // Ignore clicks that originated from outside (e.g., label click focusing input)\n // Label clicks trigger a click on the input, but the click coordinates are outside the container\n if (containerRef.current) {\n const rect = containerRef.current.getBoundingClientRect();\n const isClickInsideContainer =\n e.clientX >= rect.left &&\n e.clientX <= rect.right &&\n e.clientY >= rect.top &&\n e.clientY <= rect.bottom;\n if (!isClickInsideContainer) return;\n }\n if (mode === \"masked\" && hasValue) {\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleToggleVisibility = useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n if (mode === \"revealed\") {\n setMode(\"masked\");\n } else if (mode === \"empty\" && hasValue) {\n setMode(\"revealed\");\n }\n },\n [mode, hasValue],\n );\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n if (!isControlled) {\n setInternalValue(newValue);\n }\n onChange?.(e);\n onValueChange?.(newValue);\n },\n [isControlled, onChange, onValueChange],\n );\n\n const handleBlur = useCallback(\n (e: React.FocusEvent<HTMLInputElement>) => {\n // Don't mask if focus is moving to a button inside the container (copy/eye buttons)\n if (\n containerRef.current &&\n e.relatedTarget instanceof Node &&\n containerRef.current.contains(e.relatedTarget)\n ) {\n return;\n }\n if (hasValue) {\n setMode(\"masked\");\n }\n },\n [hasValue],\n );\n\n const handleContainerKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (disabled) return;\n if (mode === \"masked\" && hasValue) {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n setMode(\"revealed\");\n if (!readOnly) {\n setTimeout(() => inputRef.current?.focus(), 0);\n }\n }\n }\n },\n [mode, hasValue, disabled, readOnly],\n );\n\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (mode === \"revealed\" && e.key === \"Escape\") {\n setMode(\"masked\");\n // Move focus to container to avoid focus trap (input becomes tabIndex={-1})\n setTimeout(() => containerRef.current?.focus(), 0);\n }\n },\n [mode],\n );\n\n const isMaskedWithValue = mode === \"masked\" && hasValue;\n const showEyeButton =\n !disabled && (mode === \"revealed\" || (mode === \"empty\" && hasValue));\n\n // Icon sizes matching input sizes\n const iconSize = size === \"xs\" || size === \"sm\" ? \"size-3\" : \"size-4\";\n\n const containerClassName = cn(\n inputVariants({ size, variant, parentFocusIndicator: true }),\n \"group/container relative flex w-full items-center\",\n isMaskedWithValue && !disabled && \"cursor-pointer\",\n disabled && \"cursor-not-allowed\",\n className,\n );\n\n const containerContent = (\n <>\n {/* Input - defines the width, always rendered */}\n <BaseInput\n ref={mergedRef}\n id={inputId}\n type={mode === \"revealed\" ? \"text\" : \"password\"}\n value={value}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleInputKeyDown}\n disabled={disabled}\n readOnly={readOnly || isMaskedWithValue}\n autoComplete={autoComplete}\n tabIndex={isMaskedWithValue ? -1 : 0}\n className={cn(\n \"w-full border-0 bg-transparent p-0 text-kumo-default ring-0 outline-none placeholder:text-kumo-subtle disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n size === \"xs\" && \"pr-5\",\n size === \"sm\" && \"pr-6\",\n size === \"base\" && \"pr-8\",\n size === \"lg\" && \"pr-10\",\n isMaskedWithValue && \"pointer-events-none text-transparent\",\n )}\n aria-hidden={isMaskedWithValue}\n {...inputProps}\n />\n\n {/* Mask overlay - absolutely positioned, doesn't affect layout */}\n <span\n className={cn(\n \"pointer-events-none absolute inset-y-0 left-0 flex items-center overflow-hidden select-none\",\n // Match input pr padding (space for icon)\n size === \"xs\" && \"right-5\",\n size === \"sm\" && \"right-6\",\n size === \"base\" && \"right-8\",\n size === \"lg\" && \"right-10\",\n // Match the padding from inputVariants\n size === \"xs\" && \"px-1.5\",\n size === \"sm\" && \"px-2\",\n size === \"base\" && \"px-3\",\n size === \"lg\" && \"px-4\",\n // Hidden when not masked\n !isMaskedWithValue && \"invisible\",\n // When masked: enable pointer events\n isMaskedWithValue && \"pointer-events-auto\",\n // Text color - use text-kumo-default to contrast with bg-kumo-control input background\n \"text-kumo-default\",\n // Hover state - pure CSS, no React state (group for children)\n \"group/mask\",\n )}\n aria-hidden=\"true\"\n >\n {/* Both texts rendered, stacked. Visibility toggled on hover to prevent layout shift */}\n <span className=\"relative\">\n <span\n className={cn(\n isMaskedWithValue &&\n !disabled &&\n \"group-focus-within/container:invisible group-hover/mask:invisible\",\n )}\n >\n ••••••••\n </span>\n {isMaskedWithValue && !disabled && (\n <span className=\"invisible absolute left-0 top-0 whitespace-nowrap text-kumo-subtle group-focus-within/container:visible group-hover/mask:visible\">\n Click to reveal\n </span>\n )}\n </span>\n </span>\n\n {/* Eye button - absolutely positioned to the right */}\n <button\n type=\"button\"\n onClick={handleToggleVisibility}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={mode === \"revealed\" ? \"Hide value\" : \"Reveal value\"}\n tabIndex={showEyeButton ? 0 : -1}\n className={cn(\n \"absolute top-1/2 right-0 -translate-y-1/2 cursor-pointer text-kumo-subtle outline-none hover:text-kumo-default focus:text-kumo-default\",\n // Match right padding from inputVariants\n size === \"xs\" && \"right-1.5\",\n size === \"sm\" && \"right-2\",\n size === \"base\" && \"right-3\",\n size === \"lg\" && \"right-4\",\n iconSize,\n !showEyeButton && \"pointer-events-none opacity-0\",\n )}\n >\n {mode === \"revealed\" ? (\n <EyeSlash className=\"size-full\" />\n ) : (\n <Eye className=\"size-full\" />\n )}\n </button>\n\n {/* Copy tab - appears on hover/focus at top right (hidden when disabled) */}\n {hasValue && !disabled && (\n <button\n type=\"button\"\n onClick={copyToClipboard}\n onKeyDown={(e) => e.stopPropagation()}\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n className={cn(\n \"absolute -top-px right-2 -translate-y-full cursor-pointer rounded-t-md bg-kumo-brand px-2 py-0.5 text-xs text-white opacity-0 transition-opacity group-focus-within/container:opacity-100 group-hover/container:opacity-100 hover:brightness-120 focus-visible:outline focus-visible:outline-offset-1 focus-visible:outline-kumo-ring\",\n )}\n >\n {copied ? \"Copied\" : \"Copy\"}\n </button>\n )}\n </>\n );\n\n const input = (\n <div>\n {isMaskedWithValue ? (\n <div\n ref={containerRef}\n // Cannot use <button> here because containerContent contains interactive button elements (Copy, Reveal).\n // Using role=\"button\" with proper keyboard handling instead.\n // oxlint-disable-next-line prefer-tag-over-role\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n className={containerClassName}\n onClick={handleContainerClick}\n onKeyDown={handleContainerKeyDown}\n aria-label={`${ariaLabelFallback}, masked.`}\n aria-describedby={`${maskedInstructionId} ${liveRegionId}`}\n aria-disabled={disabled}\n >\n {containerContent}\n </div>\n ) : (\n <div ref={containerRef} className={containerClassName}>\n {containerContent}\n </div>\n )}\n {isMaskedWithValue && (\n <span id={maskedInstructionId} className=\"sr-only\">\n Click or press Enter to reveal.\n </span>\n )}\n <span id={liveRegionId} className=\"sr-only\" aria-live=\"polite\">\n {mode === \"masked\" && hasValue && \"Value hidden\"}\n {copied && \"Copied to clipboard\"}\n </span>\n </div>\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n },\n);\n\nSensitiveInput.displayName = \"SensitiveInput\";\n"],"names":["KUMO_SENSITIVE_INPUT_VARIANTS","KUMO_INPUT_VARIANTS","KUMO_SENSITIVE_INPUT_DEFAULT_VARIANTS","SensitiveInput","forwardRef","controlledValue","defaultValue","onChange","onValueChange","onCopy","size","variant","disabled","readOnly","id","autoComplete","className","label","labelTooltip","description","error","required","inputProps","ref","ariaLabelFallback","isControlled","internalValue","setInternalValue","useState","value","hasValue","mode","setMode","copied","setCopied","inputRef","useRef","containerRef","liveRegionId","useId","generatedId","inputId","maskedInstructionId","mergedRef","useCallback","node","useEffect","timeoutId","copyToClipboard","textarea","selection","previousRange","prevHasValueRef","handleContainerClick","rect","handleToggleVisibility","handleChange","newValue","handleBlur","handleContainerKeyDown","handleInputKeyDown","isMaskedWithValue","showEyeButton","iconSize","containerClassName","cn","inputVariants","containerContent","jsxs","Fragment","jsx","BaseInput","EyeSlash","Eye","input","Field"],"mappings":";;;;;;;;AAqBO,MAAMA,KAAgCC,IAEhCC,IAAwC;AAAA,EACnD,MAAM;AAAA,EACN,SAAS;AACX,GA6DaC,KAAiBC;AAAA,EAC5B,CACE;AAAA,IACE,OAAOC;AAAA,IACP,cAAAC,IAAe;AAAA,IACf,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAOR,EAAsC;AAAA,IAC7C,SAAAS,IAAUT,EAAsC;AAAA,IAChD,UAAAU,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,IAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAEH,UAAMC,IACJ,OAAOP,KAAU,WAAWA,IAAQ,mBAChCQ,IAAepB,MAAoB,QACnC,CAACqB,GAAeC,CAAgB,IAAIC,EAAStB,CAAY,GACzDuB,IAAQJ,IAAepB,IAAkBqB,GACzCI,IAAWD,EAAM,SAAS,GAE1B,CAACE,GAAMC,CAAO,IAAIJ;AAAA,MAAe,MACrCE,IAAW,WAAW;AAAA,IAAA,GAGlB,CAACG,GAAQC,CAAS,IAAIN,EAAS,EAAK,GAEpCO,IAAWC,EAAgC,IAAI,GAC/CC,IAAeD,EAAuB,IAAI,GAC1CE,IAAeC,EAAA,GACfC,IAAcD,EAAA,GACdE,IAAU3B,KAAM0B,GAChBE,IAAsBH,EAAA,GAEtBI,IAAYC;AAAA,MAChB,CAACC,MAAkC;AACjC,QAAAV,EAAS,UAAUU,GACf,OAAOtB,KAAQ,aACjBA,EAAIsB,CAAI,IACCtB,MACTA,EAAI,UAAUsB;AAAA,MAElB;AAAA,MACA,CAACtB,CAAG;AAAA,IAAA;AAIN,IAAAuB,GAAU,MAAM;AACd,UAAIb,GAAQ;AACV,cAAMc,IAAY,WAAW,MAAMb,EAAU,EAAK,GAAG,GAAI;AACzD,eAAO,MAAM,aAAaa,CAAS;AAAA,MACrC;AAAA,IACF,GAAG,CAACd,CAAM,CAAC;AAEX,UAAMe,KAAkBJ;AAAA,MACtB,OAAO,MAA2C;AAChD,UAAE,gBAAA;AACF,YAAI;AACF,cACE,OAAO,YAAc,OACrB,UAAU,aACV,OAAO,UAAU,UAAU,aAAc,YACzC;AACA,kBAAM,UAAU,UAAU,UAAUf,CAAK,GACzCK,EAAU,EAAI,GACdzB,IAAA;AACA;AAAA,UACF;AAAA,QACF,QAAQ;AAAA,QAER;AAEA,YAAI,OAAO,WAAa,KAAa;AACnC,gBAAMwC,IAAW,SAAS,cAAc,UAAU;AAClD,UAAAA,EAAS,QAAQpB,GACjBoB,EAAS,aAAa,YAAY,EAAE,GACpCA,EAAS,MAAM,WAAW,YAC1BA,EAAS,MAAM,OAAO,WACtB,SAAS,KAAK,YAAYA,CAAQ;AAClC,gBAAMC,IAAY,SAAS,aAAA,GACrBC,IAAgBD,GAAW,aAC7BA,EAAU,WAAW,CAAC,IACtB;AACJ,UAAAD,EAAS,OAAA;AACT,cAAI;AACF,qBAAS,YAAY,MAAM,GAC3Bf,EAAU,EAAI,GACdzB,IAAA;AAAA,UACF,SAASW,IAAO;AACd,oBAAQ,KAAK,yBAAyBA,EAAK;AAAA,UAC7C,UAAA;AACE,qBAAS,KAAK,YAAY6B,CAAQ,GAC9BE,MACFD,GAAW,gBAAA,GACXA,GAAW,SAASC,CAAa;AAAA,UAErC;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAACtB,GAAOpB,CAAM;AAAA,IAAA,GAIV2C,IAAkBhB,EAAON,CAAQ;AACvC,IAAIsB,EAAgB,YAAYtB,MAC9BsB,EAAgB,UAAUtB,GACtB,CAACA,KAAYC,MAAS,YACxBC,EAAQ,OAAO;AAInB,UAAMqB,KAAuBT;AAAA,MAC3B,CAAC,MAAwB;AACvB,YAAI,CAAAhC,GAGJ;AAAA,cAAIyB,EAAa,SAAS;AACxB,kBAAMiB,IAAOjB,EAAa,QAAQ,sBAAA;AAMlC,gBAAI,EAJF,EAAE,WAAWiB,EAAK,QAClB,EAAE,WAAWA,EAAK,SAClB,EAAE,WAAWA,EAAK,OAClB,EAAE,WAAWA,EAAK,QACS;AAAA,UAC/B;AACA,UAAIvB,MAAS,YAAYD,MACvBE,EAAQ,UAAU,GACbnB,KACH,WAAW,MAAMsB,EAAS,SAAS,MAAA,GAAS,CAAC;AAAA;AAAA,MAGnD;AAAA,MACA,CAACJ,GAAMD,GAAUlB,GAAUC,CAAQ;AAAA,IAAA,GAG/B0C,KAAyBX;AAAA,MAC7B,CAAC,MAA2C;AAC1C,UAAE,gBAAA,GACEb,MAAS,aACXC,EAAQ,QAAQ,IACPD,MAAS,WAAWD,KAC7BE,EAAQ,UAAU;AAAA,MAEtB;AAAA,MACA,CAACD,GAAMD,CAAQ;AAAA,IAAA,GAGX0B,KAAeZ;AAAA,MACnB,CAAC,MAA2C;AAC1C,cAAMa,IAAW,EAAE,OAAO;AAC1B,QAAKhC,KACHE,EAAiB8B,CAAQ,GAE3BlD,IAAW,CAAC,GACZC,IAAgBiD,CAAQ;AAAA,MAC1B;AAAA,MACA,CAAChC,GAAclB,GAAUC,CAAa;AAAA,IAAA,GAGlCkD,KAAad;AAAA,MACjB,CAAC,MAA0C;AAEzC,QACEP,EAAa,WACb,EAAE,yBAAyB,QAC3BA,EAAa,QAAQ,SAAS,EAAE,aAAa,KAI3CP,KACFE,EAAQ,QAAQ;AAAA,MAEpB;AAAA,MACA,CAACF,CAAQ;AAAA,IAAA,GAGL6B,KAAyBf;AAAA,MAC7B,CAAC,MAA2C;AAC1C,QAAIhC,KACAmB,MAAS,YAAYD,MACnB,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFE,EAAQ,UAAU,GACbnB,KACH,WAAW,MAAMsB,EAAS,SAAS,MAAA,GAAS,CAAC;AAAA,MAIrD;AAAA,MACA,CAACJ,GAAMD,GAAUlB,GAAUC,CAAQ;AAAA,IAAA,GAG/B+C,KAAqBhB;AAAA,MACzB,CAAC,MAA6C;AAC5C,QAAIb,MAAS,cAAc,EAAE,QAAQ,aACnCC,EAAQ,QAAQ,GAEhB,WAAW,MAAMK,EAAa,SAAS,MAAA,GAAS,CAAC;AAAA,MAErD;AAAA,MACA,CAACN,CAAI;AAAA,IAAA,GAGD8B,IAAoB9B,MAAS,YAAYD,GACzCgC,IACJ,CAAClD,MAAamB,MAAS,cAAeA,MAAS,WAAWD,IAGtDiC,KAAWrD,MAAS,QAAQA,MAAS,OAAO,WAAW,UAEvDsD,IAAqBC;AAAA,MACzBC,GAAc,EAAE,MAAAxD,GAAM,SAAAC,GAAS,sBAAsB,IAAM;AAAA,MAC3D;AAAA,MACAkD,KAAqB,CAACjD,KAAY;AAAA,MAClCA,KAAY;AAAA,MACZI;AAAA,IAAA,GAGImD,IACJ,gBAAAC,EAAAC,IAAA,EAEE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,KAAK5B;AAAA,UACL,IAAIF;AAAA,UACJ,MAAMV,MAAS,aAAa,SAAS;AAAA,UACrC,OAAAF;AAAA,UACA,UAAU2B;AAAA,UACV,QAAQE;AAAA,UACR,WAAWE;AAAA,UACX,UAAAhD;AAAA,UACA,UAAUC,KAAYgD;AAAA,UACtB,cAAA9C;AAAA,UACA,UAAU8C,IAAoB,KAAK;AAAA,UACnC,WAAWI;AAAA,YACT;AAAA,YACAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA,YACjBmD,KAAqB;AAAA,UAAA;AAAA,UAEvB,eAAaA;AAAA,UACZ,GAAGvC;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAgD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWL;AAAA,YACT;AAAA;AAAA,YAEAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA;AAAA,YAEjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA;AAAA,YAEjB,CAACmD,KAAqB;AAAA;AAAA,YAEtBA,KAAqB;AAAA;AAAA,YAErB;AAAA;AAAA,YAEA;AAAA,UAAA;AAAA,UAEF,eAAY;AAAA,UAGZ,UAAA,gBAAAO,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWL;AAAA,kBACTJ,KACE,CAACjD,KACD;AAAA,gBAAA;AAAA,gBAEL,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGAiD,KAAqB,CAACjD,uBACpB,QAAA,EAAK,WAAU,oIAAmI,UAAA,kBAAA,CAEnJ;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIF,gBAAA0D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASf;AAAA,UACT,WAAW,CAAC,MAAM,EAAE,gBAAA;AAAA,UACpB,cAAYxB,MAAS,aAAa,eAAe;AAAA,UACjD,UAAU+B,IAAgB,IAAI;AAAA,UAC9B,WAAWG;AAAA,YACT;AAAA;AAAA,YAEAvD,MAAS,QAAQ;AAAA,YACjBA,MAAS,QAAQ;AAAA,YACjBA,MAAS,UAAU;AAAA,YACnBA,MAAS,QAAQ;AAAA,YACjBqD;AAAA,YACA,CAACD,KAAiB;AAAA,UAAA;AAAA,UAGnB,UAAA/B,MAAS,aACR,gBAAAuC,EAACE,IAAA,EAAS,WAAU,aAAY,IAEhC,gBAAAF,EAACG,IAAA,EAAI,WAAU,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAK9B3C,KAAY,CAAClB,KACZ,gBAAA0D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAStB;AAAA,UACT,WAAW,CAAC,MAAM,EAAE,gBAAA;AAAA,UACpB,cAAYf,IAAS,WAAW;AAAA,UAChC,WAAWgC;AAAA,YACT;AAAA,UAAA;AAAA,UAGD,cAAS,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GAEJ,GAGIS,sBACH,OAAA,EACE,UAAA;AAAA,MAAAb,IACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKjC;AAAA,UAIL,MAAK;AAAA,UACL,UAAUzB,IAAW,KAAK;AAAA,UAC1B,WAAWoD;AAAA,UACX,SAASX;AAAA,UACT,WAAWM;AAAA,UACX,cAAY,GAAGnC,CAAiB;AAAA,UAChC,oBAAkB,GAAGkB,CAAmB,IAAIJ,CAAY;AAAA,UACxD,iBAAe1B;AAAA,UAEd,UAAAuD;AAAA,QAAA;AAAA,MAAA,IAGH,gBAAAG,EAAC,OAAA,EAAI,KAAKjC,GAAc,WAAW2B,GAChC,UAAAG,GACH;AAAA,MAEDN,KACC,gBAAAS,EAAC,QAAA,EAAK,IAAI5B,GAAqB,WAAU,WAAU,UAAA,mCAEnD;AAAA,wBAED,QAAA,EAAK,IAAIJ,GAAc,WAAU,WAAU,aAAU,UACnD,UAAA;AAAA,QAAAP,MAAS,YAAYD,KAAY;AAAA,QACjCG,KAAU;AAAA,MAAA,EAAA,CACb;AAAA,IAAA,GACF;AAIF,WAAIhB,IAEA,gBAAAqD;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,OAAA1D;AAAA,QACA,UAAAI;AAAA,QACA,cAAAH;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGL,UAAAsD;AAAA,MAAA;AAAA,IAAA,IAMAA;AAAA,EACT;AACF;AAEAvE,GAAe,cAAc;"}
@@ -1,257 +0,0 @@
1
- "use client";
2
- import { jsx as o, jsxs as R } from "react/jsx-runtime";
3
- import { forwardRef as _, createContext as B, useContext as D } from "react";
4
- import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
5
- import { F as G } from "./field-ftrgblg9mbmz9eo3.js";
6
- import { P as K, Q as O, b2 as F, b3 as I } from "./vendor-base-ui-kxxocm122zr4pipe.js";
7
- const y = {
8
- size: {
9
- sm: {
10
- classes: "h-5.5 w-8.5",
11
- description: "Small switch for compact UIs"
12
- },
13
- base: {
14
- classes: "h-6.5 w-10.5",
15
- description: "Default switch size"
16
- },
17
- lg: {
18
- classes: "h-7.5 w-12.5",
19
- description: "Large switch for prominent toggles"
20
- }
21
- },
22
- variant: {
23
- default: {
24
- classes: "",
25
- description: "Default switch appearance"
26
- },
27
- error: {
28
- classes: "ring-kumo-danger",
29
- description: "Error state for validation failures"
30
- }
31
- }
32
- }, C = {
33
- size: "base",
34
- variant: "default"
35
- };
36
- function P({
37
- size: a = C.size,
38
- variant: l = C.variant
39
- } = {}) {
40
- return u(
41
- y.size[a].classes,
42
- y.variant[l].classes
43
- );
44
- }
45
- const A = B({
46
- controlFirst: !0
47
- }), T = _(
48
- ({
49
- className: a,
50
- checked: l,
51
- disabled: e,
52
- size: d = "base",
53
- variant: r = "default",
54
- label: t,
55
- labelTooltip: h,
56
- required: n,
57
- controlFirst: f = !0,
58
- onCheckedChange: k,
59
- transitioning: i,
60
- ...c
61
- }, w) => {
62
- const b = typeof t == "string" ? t : "Switch", m = /* @__PURE__ */ o(
63
- F,
64
- {
65
- ref: w,
66
- checked: l,
67
- disabled: e,
68
- onCheckedChange: k,
69
- nativeButton: !0,
70
- render: (N, s) => {
71
- const {
72
- ref: g,
73
- className: x,
74
- role: p,
75
- "aria-checked": v,
76
- "aria-pressed": E,
77
- ...j
78
- } = N, L = u(
79
- "interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
80
- P({ size: d, variant: r }),
81
- {
82
- "bg-kumo-brand": s.checked && !e && r !== "error",
83
- "bg-kumo-danger": s.checked && !e && r === "error",
84
- "hover:bg-kumo-brand-hover": s.checked && !i && !e && r !== "error",
85
- "hover:bg-kumo-danger/90": s.checked && !i && !e && r === "error",
86
- "hover:bg-kumo-interact": !s.checked && !i && !e,
87
- "cursor-not-allowed opacity-50": e
88
- },
89
- i ? "cursor-wait" : e ? "" : "cursor-pointer",
90
- a,
91
- x
92
- ), S = c.role ?? p ?? "switch", U = S === "switch" ? { "aria-checked": s.checked } : { "aria-pressed": s.checked };
93
- return /* @__PURE__ */ o(
94
- "button",
95
- {
96
- ...j,
97
- ...c,
98
- ref: g,
99
- type: "button",
100
- role: S,
101
- ...U,
102
- "aria-busy": i || void 0,
103
- "aria-label": c["aria-label"] ?? b,
104
- className: L,
105
- children: /* @__PURE__ */ o(
106
- I,
107
- {
108
- className: u(
109
- "pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
110
- {
111
- "translate-x-full rtl:translate-x-[-100%]": s.checked
112
- }
113
- )
114
- }
115
- )
116
- }
117
- );
118
- }
119
- }
120
- );
121
- return t ? /* @__PURE__ */ o(
122
- G,
123
- {
124
- label: t,
125
- required: n,
126
- labelTooltip: h,
127
- controlFirst: f,
128
- children: m
129
- }
130
- ) : m;
131
- }
132
- );
133
- T.displayName = "Switch";
134
- const z = _(
135
- ({
136
- className: a,
137
- checked: l,
138
- disabled: e,
139
- size: d = "base",
140
- variant: r = "default",
141
- label: t,
142
- onCheckedChange: h,
143
- transitioning: n
144
- }, f) => {
145
- const { controlFirst: k } = D(A);
146
- return /* @__PURE__ */ R(
147
- "label",
148
- {
149
- className: u(
150
- "m-0 relative inline-flex items-center gap-2",
151
- // Control first (default): switch before label
152
- // Label first: label before switch using flex-row-reverse
153
- !k && "flex-row-reverse justify-end",
154
- e ? "cursor-not-allowed opacity-50" : "cursor-pointer",
155
- a
156
- ),
157
- children: [
158
- /* @__PURE__ */ o(
159
- F,
160
- {
161
- ref: f,
162
- checked: l,
163
- disabled: e,
164
- onCheckedChange: h,
165
- nativeButton: !0,
166
- render: (i, c) => {
167
- const {
168
- ref: w,
169
- className: b,
170
- role: m,
171
- "aria-checked": N,
172
- "aria-pressed": s,
173
- ...g
174
- } = i, x = u(
175
- "interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors",
176
- P({ size: d, variant: r }),
177
- {
178
- "bg-kumo-brand": c.checked && !e && r !== "error",
179
- "bg-kumo-danger": c.checked && !e && r === "error",
180
- "hover:bg-kumo-brand-hover": c.checked && !n && !e && r !== "error",
181
- "hover:bg-kumo-danger/90": c.checked && !n && !e && r === "error",
182
- "hover:bg-kumo-interact": !c.checked && !n && !e,
183
- "cursor-not-allowed opacity-50": e
184
- },
185
- n ? "cursor-wait" : e ? "" : "cursor-pointer",
186
- b
187
- ), p = m ?? "switch", v = p === "switch" ? { "aria-checked": c.checked } : { "aria-pressed": c.checked };
188
- return /* @__PURE__ */ o(
189
- "button",
190
- {
191
- ...g,
192
- ref: w,
193
- type: "button",
194
- role: p,
195
- ...v,
196
- "aria-busy": n || void 0,
197
- className: x,
198
- children: /* @__PURE__ */ o(
199
- I,
200
- {
201
- className: u(
202
- "pointer-events-none aspect-square h-full rounded-full bg-white transition-all",
203
- {
204
- "translate-x-full rtl:translate-x-[-100%]": c.checked
205
- }
206
- )
207
- }
208
- )
209
- }
210
- );
211
- }
212
- }
213
- ),
214
- /* @__PURE__ */ o("span", { className: "text-base font-medium text-kumo-default", children: t })
215
- ]
216
- }
217
- );
218
- }
219
- );
220
- z.displayName = "Switch.Item";
221
- function V({
222
- legend: a,
223
- children: l,
224
- error: e,
225
- description: d,
226
- disabled: r,
227
- controlFirst: t = !0,
228
- className: h
229
- }) {
230
- return /* @__PURE__ */ o(A.Provider, { value: { controlFirst: t }, children: /* @__PURE__ */ R(
231
- K,
232
- {
233
- className: u(
234
- "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
235
- h
236
- ),
237
- disabled: r,
238
- children: [
239
- /* @__PURE__ */ o(O, { className: "text-lg font-medium text-kumo-default", children: a }),
240
- /* @__PURE__ */ o("div", { className: "flex flex-col gap-2", children: l }),
241
- e && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-danger", children: e }),
242
- d && /* @__PURE__ */ o("p", { className: "text-sm text-kumo-subtle", children: d })
243
- ]
244
- }
245
- ) });
246
- }
247
- const q = Object.assign(T, {
248
- Item: z,
249
- Group: V
250
- });
251
- q.displayName = "Switch";
252
- export {
253
- y as K,
254
- q as S,
255
- C as a
256
- };
257
- //# sourceMappingURL=switch-b0xo8fxsfzv87krj.js.map