@cloudflare/kumo 1.10.0 → 1.11.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 (179) hide show
  1. package/CHANGELOG.md +97 -0
  2. package/ai/component-registry.json +21 -32
  3. package/ai/component-registry.md +66 -60
  4. package/ai/schemas.ts +2 -2
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.js +1 -2
  7. package/dist/ai/schemas.js.map +1 -1
  8. package/dist/checkbox-ZiHzIOCx.js +220 -0
  9. package/dist/checkbox-ZiHzIOCx.js.map +1 -0
  10. package/dist/{clipboard-text-DbvIaZ3g.js → clipboard-text-DXs1GdOt.js} +3 -3
  11. package/dist/{clipboard-text-DbvIaZ3g.js.map → clipboard-text-DXs1GdOt.js.map} +1 -1
  12. package/dist/code.js +62 -62
  13. package/dist/code.js.map +1 -1
  14. package/dist/{collapsible-OBNkTO48.js → collapsible-C3LJ1dfZ.js} +13 -11
  15. package/dist/collapsible-C3LJ1dfZ.js.map +1 -0
  16. package/dist/{combobox-CJqgoue6.js → combobox--ec3iibR.js} +63 -63
  17. package/dist/combobox--ec3iibR.js.map +1 -0
  18. package/dist/{command-palette-xctZ--ZT.js → command-palette-B_J7o7P-.js} +8 -8
  19. package/dist/{command-palette-xctZ--ZT.js.map → command-palette-B_J7o7P-.js.map} +1 -1
  20. package/dist/components/checkbox.js +1 -1
  21. package/dist/components/clipboard-text.js +1 -1
  22. package/dist/components/collapsible.js +1 -1
  23. package/dist/components/combobox.js +1 -1
  24. package/dist/components/command-palette.js +1 -1
  25. package/dist/components/dialog.js +1 -1
  26. package/dist/components/dropdown.js +1 -1
  27. package/dist/components/field.js +1 -1
  28. package/dist/components/flow.js +1857 -1803
  29. package/dist/components/flow.js.map +1 -1
  30. package/dist/components/input.js +3 -3
  31. package/dist/components/label.js +1 -1
  32. package/dist/components/link.js +1 -1
  33. package/dist/components/menubar.js +1 -1
  34. package/dist/components/meter.js +1 -1
  35. package/dist/components/pagination.js +1 -1
  36. package/dist/components/popover.js +1 -1
  37. package/dist/components/radio.js +1 -1
  38. package/dist/components/select.js +1 -1
  39. package/dist/components/sensitive-input.js +1 -1
  40. package/dist/components/switch.js +1 -1
  41. package/dist/components/table.js +1 -1
  42. package/dist/components/tabs.js +1 -1
  43. package/dist/components/toast.js +2 -2
  44. package/dist/components/tooltip.js +1 -1
  45. package/dist/{dialog-1pa-ezdL.js → dialog-DGaQTZVR.js} +2 -2
  46. package/dist/{dialog-1pa-ezdL.js.map → dialog-DGaQTZVR.js.map} +1 -1
  47. package/dist/{dropdown-BXg01-8j.js → dropdown-DBfVqi0v.js} +74 -75
  48. package/dist/dropdown-DBfVqi0v.js.map +1 -0
  49. package/dist/{field-BYaOyOtJ.js → field-CQmGKOVZ.js} +7 -7
  50. package/dist/{field-BYaOyOtJ.js.map → field-CQmGKOVZ.js.map} +1 -1
  51. package/dist/index.js +28 -28
  52. package/dist/{input-area-C3ddZhEo.js → input-area-BgpN8siO.js} +3 -3
  53. package/dist/{input-area-C3ddZhEo.js.map → input-area-BgpN8siO.js.map} +1 -1
  54. package/dist/{input-BXn3ElmF.js → input-gGpJCiT7.js} +3 -3
  55. package/dist/{input-BXn3ElmF.js.map → input-gGpJCiT7.js.map} +1 -1
  56. package/dist/{input-group-BiUKE2TR.js → input-group-DwPPwJEW.js} +2 -2
  57. package/dist/{input-group-BiUKE2TR.js.map → input-group-DwPPwJEW.js.map} +1 -1
  58. package/dist/label-hoE9-Nzo.js +62 -0
  59. package/dist/label-hoE9-Nzo.js.map +1 -0
  60. package/dist/{link-CfCaX9Ks.js → link-BFszrye7.js} +20 -14
  61. package/dist/link-BFszrye7.js.map +1 -0
  62. package/dist/{menubar-be9R8bE-.js → menubar-DF-6twXU.js} +2 -2
  63. package/dist/{menubar-be9R8bE-.js.map → menubar-DF-6twXU.js.map} +1 -1
  64. package/dist/{meter-CCpXrH8B.js → meter-CP6NBKRN.js} +2 -2
  65. package/dist/{meter-CCpXrH8B.js.map → meter-CP6NBKRN.js.map} +1 -1
  66. package/dist/{pagination-CaHm6TKa.js → pagination-BWkeDEqb.js} +44 -40
  67. package/dist/pagination-BWkeDEqb.js.map +1 -0
  68. package/dist/{popover-CHafAVT6.js → popover-B5CWcu7v.js} +2 -2
  69. package/dist/{popover-CHafAVT6.js.map → popover-B5CWcu7v.js.map} +1 -1
  70. package/dist/primitives/accordion.js +1 -1
  71. package/dist/primitives/alert-dialog.js +1 -1
  72. package/dist/primitives/autocomplete.js +1 -1
  73. package/dist/primitives/avatar.js +1 -1
  74. package/dist/primitives/button.js +1 -1
  75. package/dist/primitives/checkbox-group.js +1 -1
  76. package/dist/primitives/checkbox.js +1 -1
  77. package/dist/primitives/collapsible.js +1 -1
  78. package/dist/primitives/combobox.js +1 -1
  79. package/dist/primitives/context-menu.js +1 -1
  80. package/dist/primitives/csp-provider.js +1 -1
  81. package/dist/primitives/dialog.js +1 -1
  82. package/dist/primitives/direction-provider.js +1 -1
  83. package/dist/primitives/drawer.js +1 -1
  84. package/dist/primitives/field.js +1 -1
  85. package/dist/primitives/fieldset.js +1 -1
  86. package/dist/primitives/form.js +1 -1
  87. package/dist/primitives/input.js +1 -1
  88. package/dist/primitives/menu.js +1 -1
  89. package/dist/primitives/menubar.js +1 -1
  90. package/dist/primitives/meter.js +1 -1
  91. package/dist/primitives/navigation-menu.js +1 -1
  92. package/dist/primitives/number-field.js +1 -1
  93. package/dist/primitives/popover.js +1 -1
  94. package/dist/primitives/preview-card.js +1 -1
  95. package/dist/primitives/progress.js +1 -1
  96. package/dist/primitives/radio-group.js +1 -1
  97. package/dist/primitives/radio.js +1 -1
  98. package/dist/primitives/scroll-area.js +1 -1
  99. package/dist/primitives/select.js +1 -1
  100. package/dist/primitives/separator.js +1 -1
  101. package/dist/primitives/slider.js +1 -1
  102. package/dist/primitives/switch.js +1 -1
  103. package/dist/primitives/tabs.js +1 -1
  104. package/dist/primitives/toast.js +1 -1
  105. package/dist/primitives/toggle-group.js +1 -1
  106. package/dist/primitives/toggle.js +1 -1
  107. package/dist/primitives/toolbar.js +1 -1
  108. package/dist/primitives/tooltip.js +1 -1
  109. package/dist/primitives.js +1 -1
  110. package/dist/{radio-DZ1uS-zK.js → radio-BQTXNBkS.js} +6 -6
  111. package/dist/radio-BQTXNBkS.js.map +1 -0
  112. package/dist/scripts/theme-generator/config.js +1 -1
  113. package/dist/scripts/theme-generator/config.js.map +1 -1
  114. package/dist/scripts/theme-generator/generate-css.d.ts.map +1 -1
  115. package/dist/select-BWUNPPHQ.js +123 -0
  116. package/dist/select-BWUNPPHQ.js.map +1 -0
  117. package/dist/{sensitive-input-CI-gtdfw.js → sensitive-input-A6Kw7URa.js} +4 -4
  118. package/dist/{sensitive-input-CI-gtdfw.js.map → sensitive-input-A6Kw7URa.js.map} +1 -1
  119. package/dist/src/code/code-highlighted.d.ts.map +1 -1
  120. package/dist/src/components/collapsible/collapsible.d.ts.map +1 -1
  121. package/dist/src/components/dropdown/dropdown.d.ts.map +1 -1
  122. package/dist/src/components/flow/connectors.d.ts +4 -0
  123. package/dist/src/components/flow/connectors.d.ts.map +1 -1
  124. package/dist/src/components/flow/diagram.d.ts +27 -2
  125. package/dist/src/components/flow/diagram.d.ts.map +1 -1
  126. package/dist/src/components/flow/node.d.ts +6 -1
  127. package/dist/src/components/flow/node.d.ts.map +1 -1
  128. package/dist/src/components/flow/parallel.d.ts.map +1 -1
  129. package/dist/src/components/flow/use-children.d.ts +12 -1
  130. package/dist/src/components/flow/use-children.d.ts.map +1 -1
  131. package/dist/src/components/label/label.d.ts.map +1 -1
  132. package/dist/src/components/link/link.d.ts +2 -2
  133. package/dist/src/components/link/link.d.ts.map +1 -1
  134. package/dist/src/components/pagination/pagination.d.ts.map +1 -1
  135. package/dist/src/components/radio/radio.d.ts.map +1 -1
  136. package/dist/src/components/select/select.d.ts +29 -6
  137. package/dist/src/components/select/select.d.ts.map +1 -1
  138. package/dist/src/components/switch/switch.d.ts.map +1 -1
  139. package/dist/src/components/tabs/tabs.d.ts +6 -2
  140. package/dist/src/components/tabs/tabs.d.ts.map +1 -1
  141. package/dist/src/components/toast/toast.d.ts +1 -0
  142. package/dist/src/components/toast/toast.d.ts.map +1 -1
  143. package/dist/src/components/tooltip/tooltip.d.ts.map +1 -1
  144. package/dist/styles/kumo-binding.css +19 -0
  145. package/dist/styles/kumo-standalone.css +1 -1
  146. package/dist/styles/theme-fedramp.css +13 -0
  147. package/dist/styles/theme-kumo.css +77 -1
  148. package/dist/{switch-BxnAwAse.js → switch-CmUFBiJv.js} +4 -4
  149. package/dist/switch-CmUFBiJv.js.map +1 -0
  150. package/dist/{table-CdcsAm5X.js → table-CbU4Oe3o.js} +2 -2
  151. package/dist/{table-CdcsAm5X.js.map → table-CbU4Oe3o.js.map} +1 -1
  152. package/dist/{tabs-Cf12PXHz.js → tabs-uLzHh6SR.js} +14 -13
  153. package/dist/tabs-uLzHh6SR.js.map +1 -0
  154. package/dist/{toast-BzvG5cpW.js → toast-B-d56fkl.js} +124 -92
  155. package/dist/toast-B-d56fkl.js.map +1 -0
  156. package/dist/{tooltip-2KqOpTj0.js → tooltip-C7p2iJ0y.js} +24 -18
  157. package/dist/tooltip-C7p2iJ0y.js.map +1 -0
  158. package/dist/{vendor-base-ui-DvXlzG7n.js → vendor-base-ui-DN1j_aJS.js} +50 -49
  159. package/dist/{vendor-base-ui-DvXlzG7n.js.map → vendor-base-ui-DN1j_aJS.js.map} +1 -1
  160. package/package.json +3 -1
  161. package/scripts/theme-generator/config.ts +1 -1
  162. package/scripts/theme-generator/generate-css.test.ts +30 -0
  163. package/scripts/theme-generator/generate-css.ts +104 -6
  164. package/dist/checkbox-z5gO1lL8.js +0 -224
  165. package/dist/checkbox-z5gO1lL8.js.map +0 -1
  166. package/dist/collapsible-OBNkTO48.js.map +0 -1
  167. package/dist/combobox-CJqgoue6.js.map +0 -1
  168. package/dist/dropdown-BXg01-8j.js.map +0 -1
  169. package/dist/label-ByOtGj7z.js +0 -58
  170. package/dist/label-ByOtGj7z.js.map +0 -1
  171. package/dist/link-CfCaX9Ks.js.map +0 -1
  172. package/dist/pagination-CaHm6TKa.js.map +0 -1
  173. package/dist/radio-DZ1uS-zK.js.map +0 -1
  174. package/dist/select-BXZAlFAV.js +0 -113
  175. package/dist/select-BXZAlFAV.js.map +0 -1
  176. package/dist/switch-BxnAwAse.js.map +0 -1
  177. package/dist/tabs-Cf12PXHz.js.map +0 -1
  178. package/dist/toast-BzvG5cpW.js.map +0 -1
  179. package/dist/tooltip-2KqOpTj0.js.map +0 -1
@@ -1,58 +0,0 @@
1
- "use client";
2
- import { jsx as e, jsxs as m, Fragment as f } from "react/jsx-runtime";
3
- import { Info as u } from "@phosphor-icons/react";
4
- import { c as n } from "./cn-Bhsu1vx2.js";
5
- import { T as p } from "./tooltip-2KqOpTj0.js";
6
- const N = {
7
- // Label currently has no variant options but structure is ready for future additions
8
- }, _ = {};
9
- function b(t = {}) {
10
- return n(
11
- // Base styles - when used standalone, apply text styling
12
- // When used inside Field, the parent FieldBase.Label provides these styles
13
- "text-base font-medium text-kumo-default"
14
- );
15
- }
16
- function s() {
17
- return n(
18
- // Content wrapper styles - always applied
19
- "inline-flex items-center gap-1"
20
- );
21
- }
22
- function d({
23
- children: t,
24
- showOptional: l = !1,
25
- tooltip: a,
26
- className: r,
27
- htmlFor: i,
28
- asContent: c = !1
29
- }) {
30
- const o = /* @__PURE__ */ m(f, { children: [
31
- t,
32
- l && /* @__PURE__ */ e("span", { className: "font-normal text-kumo-strong", children: "(optional)" }),
33
- a && /* @__PURE__ */ e(p, { content: a, children: /* @__PURE__ */ e(
34
- u,
35
- {
36
- className: "size-4 cursor-help text-kumo-strong",
37
- "aria-label": "More information"
38
- }
39
- ) })
40
- ] });
41
- return c ? /* @__PURE__ */ e("span", { className: n(s(), r), children: o }) : /* @__PURE__ */ e(
42
- "label",
43
- {
44
- htmlFor: i,
45
- className: n(b(), s(), r),
46
- children: o
47
- }
48
- );
49
- }
50
- d.displayName = "Label";
51
- export {
52
- N as K,
53
- d as L,
54
- s as a,
55
- _ as b,
56
- b as l
57
- };
58
- //# sourceMappingURL=label-ByOtGj7z.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"label-ByOtGj7z.js","sources":["../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n return cn(\n // Base styles - when used standalone, apply text styling\n // When used inside Field, the parent FieldBase.Label provides these styles\n \"text-base font-medium text-kumo-default\",\n );\n}\n\nexport function labelContentVariants() {\n return cn(\n // Content wrapper styles - always applied\n \"inline-flex items-center gap-1\",\n );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n /** The label content — can be a string or any React node. */\n children: ReactNode;\n /** When `true`, shows gray \"(optional)\" text after the label. */\n showOptional?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n tooltip?: ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The id of the form element this label is associated with */\n htmlFor?: string;\n /**\n * When true, only renders the inline content (indicators, tooltip) without\n * the outer label element with font styling. Useful when composed inside another\n * label element that already provides the text styling.\n * @default false\n */\n asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n * <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n children,\n showOptional = false,\n tooltip,\n className,\n htmlFor,\n asContent = false,\n}: LabelProps) {\n const content = (\n <>\n {children}\n {showOptional && (\n <span className=\"font-normal text-kumo-strong\">(optional)</span>\n )}\n {tooltip && (\n <Tooltip content={tooltip}>\n <Info\n className=\"size-4 cursor-help text-kumo-strong\"\n aria-label=\"More information\"\n />\n </Tooltip>\n )}\n </>\n );\n\n // When used as content inside another styled element, just render inline\n if (asContent) {\n return (\n <span className={cn(labelContentVariants(), className)}>{content}</span>\n );\n }\n\n // When used standalone, render as <label> for accessibility\n return (\n <label\n htmlFor={htmlFor}\n className={cn(labelVariants(), labelContentVariants(), className)}\n >\n {content}\n </label>\n );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Info"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAChB,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,cAAW;AAAA,MAAA;AAAA,IAAA,EACb,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIN,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"link-CfCaX9Ks.js","sources":["../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n useLinkComponent,\n type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n <svg\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n className=\"link-external-icon\"\n {...props}\n >\n <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n variant: {\n inline: {\n classes:\n \"text-primary underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Inline text link that flows with content\",\n },\n current: {\n classes:\n \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n description: \"Link that inherits color from parent text\",\n },\n plain: {\n classes: \"text-primary hover:text-primary/70 transition-colors\",\n description: \"Link without underline decoration\",\n },\n },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n /**\n * Visual style of the link.\n * - `\"inline\"` — Inline text link that flows with content\n * - `\"current\"` — Link that inherits color from parent text\n * - `\"plain\"` — Link without underline decoration\n * @default \"inline\"\n */\n variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n LinkComponentProps &\n KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n * Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n * Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n { className, variant = \"inline\", render, ...props },\n ref,\n) {\n const LinkComponent = useLinkComponent();\n\n const defaultProps: useRender.ElementProps<\"a\"> = {\n className: cn(\n linkVariants({ variant }),\n \"group/link inline-flex items-center gap-[0.1875em]\",\n ),\n };\n\n const element = useRender({\n render: render ?? <LinkComponent />,\n ref,\n props: mergeProps<\"a\">(defaultProps, props, { className }),\n });\n\n return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"pagination-CaHm6TKa.js","sources":["../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n page: number;\n perPage?: number;\n totalCount?: number;\n maxPage: number;\n pageShowingRange: string;\n setPage: (page: number) => void;\n editingPage: number;\n setEditingPage: (page: number) => void;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error(\n \"Pagination compound components must be used within a Pagination component\",\n );\n }\n return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n /** Custom render function for the info text */\n children?: (props: {\n page: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n const { page, perPage, totalCount, pageShowingRange } =\n usePaginationContext();\n\n const content = children\n ? children({ page, perPage, totalCount, pageShowingRange })\n : totalCount && totalCount > 0\n ? (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n )\n : null;\n\n return (\n <div\n data-slot=\"pagination-info\"\n className={cn(\"text-sm text-kumo-strong\", className)}\n >\n {content}\n </div>\n );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n /** Current page size value */\n value: number;\n /** Callback when page size changes */\n onChange: (size: number) => void;\n /** Available page size options */\n options?: number[];\n /** Label text shown before the selector */\n label?: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationPageSize({\n value,\n onChange,\n options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n label = \"Per page:\",\n className,\n}: PaginationPageSizeProps) {\n return (\n <div\n data-slot=\"pagination-page-size\"\n className={cn(\"flex items-center gap-2\", className)}\n >\n {label && <span className=\"text-sm text-kumo-strong\">{label}</span>}\n <Select\n label=\"Page size\"\n value={value}\n onValueChange={(v) => onChange(v as number)}\n >\n {options.map((size) => (\n <Select.Option key={size} value={size}>\n {size}\n </Select.Option>\n ))}\n </Select>\n </div>\n );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n return (\n <div\n data-slot=\"pagination-separator\"\n className={cn(\"mx-2 h-6 border-l border-kumo-line\", className)}\n />\n );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Additional CSS classes for the container */\n className?: string;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n /**\n * Compound component children for custom layouts.\n * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n */\n children: ReactNode;\n controls?: never;\n text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n extends PaginationBaseProps,\n KumoPaginationVariantsProps {\n children?: never;\n /** @deprecated Use Pagination.Info with children prop instead */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Separator />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n const { page = 1, perPage, totalCount, setPage, children, className } = props;\n\n // Extract legacy props (only present when children is not provided)\n const text = \"text\" in props ? props.text : undefined;\n const controls =\n \"controls\" in props\n ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n const [editingPage, setEditingPage] = useState<number>(1);\n\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const contextValue: PaginationContextValue = {\n page,\n perPage,\n totalCount,\n maxPage,\n pageShowingRange,\n setPage,\n editingPage,\n setEditingPage,\n };\n\n // Compound component mode: render children within context\n if (children) {\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n {children}\n </div>\n </PaginationContext.Provider>\n );\n }\n\n // Legacy mode: render default layout for backwards compatibility\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n );\n }\n return null;\n };\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n <div\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-strong\"\n >\n {getPaginationText()}\n </div>\n <PaginationControls controls={controls} />\n </div>\n </PaginationContext.Provider>\n );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Info: PaginationInfo,\n PageSize: PaginationPageSize,\n Controls: PaginationControls,\n Separator: PaginationSeparator,\n});\n\nexport {\n PaginationInfo,\n PaginationPageSize,\n PaginationControls,\n PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"radio-DZ1uS-zK.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 \"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 && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\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,113 +0,0 @@
1
- "use client";
2
- import { jsxs as o, jsx as e } from "react/jsx-runtime";
3
- import { CaretUpDownIcon as j, CheckIcon as C } from "@phosphor-icons/react";
4
- import { useId as F } from "react";
5
- import { c as v } from "./cn-Bhsu1vx2.js";
6
- import { b as O } from "./button-Bh96oxRL.js";
7
- import { S as A } from "./skeleton-line-CtpS1u1J.js";
8
- import { F as P } from "./field-BYaOyOtJ.js";
9
- import { aT as T, aU as V, aV as U, aW as W, aX as $, aY as z, aZ as B, a_ as D, a$ as E, b0 as R } from "./vendor-base-ui-DvXlzG7n.js";
10
- function X(n) {
11
- return Array.isArray(n) ? n.filter((a) => a.value !== null).map((a, s) => /* @__PURE__ */ e(
12
- c,
13
- {
14
- value: a.value,
15
- children: a.label
16
- },
17
- typeof a.value == "string" ? a.value : `option-${s}`
18
- )) : Object.entries(n).map(([a, s]) => /* @__PURE__ */ e(c, { value: a, children: s }, a));
19
- }
20
- function Y({
21
- children: n,
22
- className: a,
23
- renderValue: s,
24
- label: i,
25
- hideLabel: y = !0,
26
- placeholder: d,
27
- loading: m,
28
- labelTooltip: x,
29
- description: r,
30
- error: t,
31
- required: S,
32
- ...l
33
- }) {
34
- const u = F(), f = l, k = f["aria-label"], I = f["aria-labelledby"], w = typeof i == "string" ? i : d, g = i && !y, p = g ? void 0 : I ?? (i ? u : void 0), N = k ?? (p ? void 0 : w), L = n ?? (l.items ? X(l.items) : null), h = /* @__PURE__ */ o(
35
- T,
36
- {
37
- ...l,
38
- items: l.items,
39
- disabled: m || l.disabled,
40
- children: [
41
- /* @__PURE__ */ o(
42
- V,
43
- {
44
- className: v(
45
- O(),
46
- "justify-between font-normal",
47
- "outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100",
48
- l.disabled && "cursor-not-allowed opacity-50",
49
- a
50
- ),
51
- "aria-label": N,
52
- "aria-labelledby": p,
53
- children: [
54
- m ? /* @__PURE__ */ e(A, { className: "w-32" }) : /* @__PURE__ */ e(U, { placeholder: d, children: s }),
55
- /* @__PURE__ */ e(W, { className: "flex items-center", children: /* @__PURE__ */ e(j, {}) })
56
- ]
57
- }
58
- ),
59
- /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(
60
- B,
61
- {
62
- className: v(
63
- "overflow-hidden bg-kumo-control text-kumo-default",
64
- // background
65
- "rounded-lg shadow-lg ring ring-kumo-line",
66
- // border part
67
- // 3px adjustment to account for padding + border differences
68
- "min-w-[calc(var(--anchor-width)+3px)] p-1.5"
69
- // spacing
70
- ),
71
- children: L
72
- }
73
- ) }) })
74
- ]
75
- }
76
- );
77
- if (g)
78
- return /* @__PURE__ */ e(
79
- P,
80
- {
81
- label: i,
82
- required: S,
83
- labelTooltip: x,
84
- description: r,
85
- error: t ? typeof t == "string" ? { message: t, match: !0 } : t : void 0,
86
- children: h
87
- }
88
- );
89
- const b = t ? typeof t == "string" ? { message: t } : t : void 0;
90
- return /* @__PURE__ */ o("div", { className: "grid gap-2", children: [
91
- i && /* @__PURE__ */ e("span", { id: u, className: "sr-only", children: i }),
92
- h,
93
- b ? /* @__PURE__ */ e("span", { className: "text-sm text-kumo-danger", children: b.message }) : r && /* @__PURE__ */ e("span", { className: "text-sm leading-snug text-kumo-subtle", children: r })
94
- ] });
95
- }
96
- function c({ children: n, value: a }) {
97
- return /* @__PURE__ */ o(
98
- D,
99
- {
100
- value: a,
101
- className: "group flex cursor-pointer items-center justify-between gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay",
102
- children: [
103
- /* @__PURE__ */ e(E, { children: n }),
104
- /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(C, {}) })
105
- ]
106
- }
107
- );
108
- }
109
- Y.Option = c;
110
- export {
111
- Y as S
112
- };
113
- //# sourceMappingURL=select-BXZAlFAV.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"select-BXZAlFAV.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 * 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 // Handle object map format: { key: \"Label\" }\n if (!Array.isArray(items)) {\n return Object.entries(items).map(([key, label]) => (\n <Option key={key} value={key as T}>\n {label}\n </Option>\n ));\n }\n\n // Handle array format: [{ value, label }] - filter out null values\n return items\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 /** Label content for the select (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Visually hide the label (sr-only). Set to `false` for a visible label. @default true */\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 * @example\n * ```tsx\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 */\nexport interface SelectProps {\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Label content for the select (enables Field wrapper) — can be a string or any React node. */\n label?: ReactNode;\n /**\n * Visually hide the label while keeping it accessible to screen readers.\n * Set to `false` to show a visible label above the select via the Field wrapper.\n * @default true\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 = true,\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 // Use Field wrapper when label is provided and not hidden\n const useFieldWrapper = label && !hideLabel;\n const triggerLabelledBy = useFieldWrapper\n ? undefined\n : (ariaLabelledby ?? (label ? labelId : undefined));\n const triggerAriaLabel =\n ariaLabel ?? (!triggerLabelledBy ? fallbackLabel : 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={props.items}\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":["renderOptionsFromItems","items","item","index","jsx","Option","key","label","Select","children","className","renderValue","hideLabel","placeholder","loading","labelTooltip","description","error","required","props","labelId","useId","propLookup","ariaLabel","ariaLabelledby","fallbackLabel","useFieldWrapper","triggerLabelledBy","triggerAriaLabel","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":"switch-BxnAwAse.js","sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport {\n forwardRef,\n type ButtonHTMLAttributes,\n type Ref,\n type ReactNode,\n createContext,\n useContext,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Field } from \"../field/field\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\n\n/** Switch size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_SWITCH_VARIANTS = {\n size: {\n sm: {\n classes: \"h-5.5 w-8.5\",\n description: \"Small switch for compact UIs\",\n },\n base: {\n classes: \"h-6.5 w-10.5\",\n description: \"Default switch size\",\n },\n lg: {\n classes: \"h-7.5 w-12.5\",\n description: \"Large switch for prominent toggles\",\n },\n },\n variant: {\n default: {\n classes: \"\",\n description: \"Default switch appearance\",\n },\n error: {\n classes: \"ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_SWITCH_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_SWITCH_VARIANTS\nexport type KumoSwitchSize = keyof typeof KUMO_SWITCH_VARIANTS.size;\nexport type KumoSwitchVariant = keyof typeof KUMO_SWITCH_VARIANTS.variant;\n\nexport interface KumoSwitchVariantsProps {\n /**\n * Switch size.\n * - `\"sm\"` — Small for compact UIs\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent toggles\n * @default \"base\"\n */\n size?: KumoSwitchSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard switch appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoSwitchVariant;\n}\n\nexport function switchVariants({\n size = KUMO_SWITCH_DEFAULT_VARIANTS.size,\n variant = KUMO_SWITCH_DEFAULT_VARIANTS.variant,\n}: KumoSwitchVariantsProps = {}) {\n return cn(\n KUMO_SWITCH_VARIANTS.size[size].classes,\n KUMO_SWITCH_VARIANTS.variant[variant].classes,\n );\n}\n\n// Legacy type aliases for backwards compatibility\nexport type SwitchSize = KumoSwitchSize;\nexport type SwitchVariant = KumoSwitchVariant;\n\n// Context for passing controlFirst from Group to Items\nconst SwitchGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single switch component props (with built-in Field)\n *\n * Usage patterns:\n *\n * Basic usage:\n * ```tsx\n * <Switch label=\"Enable notifications\" checked={true} onCheckedChange={setChecked} />\n * ```\n *\n * Label first layout:\n * ```tsx\n * <Switch label=\"Dark mode\" checked={false} onCheckedChange={setChecked} controlFirst={false} />\n * ```\n *\n * Error variant (visual only, no error text):\n * ```tsx\n * <Switch label=\"Required setting\" variant=\"error\" checked={false} onCheckedChange={setChecked} />\n * ```\n *\n * @property {string} label - Label text for the switch (Field wrapper is built-in)\n * @property {boolean} [controlFirst] - When true (default), switch appears before label\n */\nexport type SwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"children\"\n> & {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: SwitchVariant;\n /** Label content for the switch (Field wrapper is built-in) - can be a string or any React node. Optional when used standalone for visual-only purposes. */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /**\n * Whether the switch is required.\n * When explicitly false, shows \"(optional)\" text after the label.\n */\n required?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n size?: KumoSwitchSize;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n transitioning?: boolean;\n};\n\n/**\n * Switch group component props (with built-in Fieldset)\n *\n * Usage:\n * ```tsx\n * <Switch.Group\n * legend=\"Notification settings\"\n * error=\"You must enable at least one notification type\"\n * >\n * <Switch.Item label=\"Email notifications\" value=\"email\" />\n * <Switch.Item label=\"SMS notifications\" value=\"sms\" />\n * </Switch.Group>\n * ```\n */\nexport interface SwitchGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Switch.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single switches) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Whether all switches in the group are disabled */\n disabled?: boolean;\n /** When true (default), switch appears before label. When false, label appears before switch. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual switch item within a group\n */\nexport type SwitchItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: SwitchVariant;\n /** Label text displayed next to switch */\n label: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n disabled?: boolean;\n onCheckedChange?: (checked: boolean) => void;\n size?: KumoSwitchSize;\n transitioning?: boolean;\n};\n\n// Single switch with built-in Field\nconst SwitchBase = forwardRef<HTMLButtonElement, SwitchProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n required,\n controlFirst = true,\n onCheckedChange,\n transitioning,\n ...props\n },\n ref,\n ) => {\n // For aria-label, only use string labels (ReactNode labels can't be used for aria-label)\n const ariaLabelFallback = typeof label === \"string\" ? label : \"Switch\";\n const switchControl = (\n <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const mergedClassName = cn(\n \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n switchVariants({ size, variant }),\n {\n \"bg-kumo-brand\": state.checked && !disabled && variant !== \"error\",\n \"bg-kumo-danger\": state.checked && !disabled && variant === \"error\",\n \"hover:bg-kumo-brand-hover\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant !== \"error\",\n \"hover:bg-kumo-danger/90\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant === \"error\",\n \"hover:bg-kumo-interact\": !state.checked && !transitioning && !disabled,\n \"cursor-not-allowed opacity-50\": disabled,\n },\n transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n className,\n baseClassName,\n );\n\n const role =\n (props.role as string | undefined) ?? baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n {...props}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n aria-label={props[\"aria-label\"] ?? ariaLabelFallback}\n className={mergedClassName}\n >\n <BaseSwitch.Thumb\n className={cn(\n \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n {\n \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n },\n )}\n />\n </button>\n );\n }}\n />\n );\n\n // Wrap in Field (built-in) - no description for single switches\n // If no label provided, return bare switch (for use in other components)\n if (!label) {\n return switchControl;\n }\n\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n controlFirst={controlFirst}\n >\n {switchControl}\n </Field>\n );\n },\n);\n\nSwitchBase.displayName = \"Switch\";\n\n// Switch.Item for use within Switch.Group\nconst SwitchItem = forwardRef<HTMLButtonElement, SwitchItemProps>(\n (\n {\n className,\n checked,\n disabled,\n size = \"base\",\n variant = \"default\",\n label,\n onCheckedChange,\n transitioning,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(SwitchGroupContext);\n\n return (\n <label\n className={cn(\n \"relative inline-flex items-center gap-2\",\n // Control first (default): switch before label\n // Label first: label before switch using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseSwitch.Root\n ref={ref}\n checked={checked}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n nativeButton\n render={(rootProps, state) => {\n const {\n ref: rootRef,\n className: baseClassName,\n role: baseRole,\n \"aria-checked\": _ariaChecked,\n \"aria-pressed\": _ariaPressed,\n ...restRootProps\n } = rootProps as typeof rootProps & {\n ref?: Ref<HTMLButtonElement>;\n className?: string;\n role?: string;\n \"aria-checked\"?: boolean;\n \"aria-pressed\"?: boolean;\n };\n\n const mergedClassName = cn(\n \"interactive flex items-center gap-2 rounded-full border border-transparent bg-kumo-recessed p-1 transition-colors\",\n switchVariants({ size, variant }),\n {\n \"bg-kumo-brand\": state.checked && !disabled && variant !== \"error\",\n \"bg-kumo-danger\": state.checked && !disabled && variant === \"error\",\n \"hover:bg-kumo-brand-hover\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant !== \"error\",\n \"hover:bg-kumo-danger/90\":\n state.checked &&\n !transitioning &&\n !disabled &&\n variant === \"error\",\n \"hover:bg-kumo-interact\": !state.checked && !transitioning && !disabled,\n \"cursor-not-allowed opacity-50\": disabled,\n },\n transitioning ? \"cursor-wait\" : !disabled ? \"cursor-pointer\" : \"\",\n baseClassName,\n );\n\n const role = baseRole ?? \"switch\";\n const checkedA11yProps =\n role === \"switch\"\n ? { \"aria-checked\": state.checked }\n : { \"aria-pressed\": state.checked };\n\n return (\n <button\n {...restRootProps}\n ref={rootRef}\n type=\"button\"\n role={role}\n {...checkedA11yProps}\n aria-busy={transitioning || undefined}\n className={mergedClassName}\n >\n <BaseSwitch.Thumb\n className={cn(\n \"pointer-events-none aspect-square h-full rounded-full bg-white transition-all\",\n {\n \"translate-x-full rtl:translate-x-[-100%]\": state.checked,\n },\n )}\n />\n </button>\n );\n }}\n />\n <span className=\"text-base font-medium text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nSwitchItem.displayName = \"Switch.Item\";\n\n// Switch.Group with built-in Fieldset\nfunction SwitchGroup({\n legend,\n children,\n error,\n description,\n disabled,\n controlFirst = true,\n className,\n}: SwitchGroupProps) {\n return (\n <SwitchGroupContext.Provider value={{ controlFirst }}>\n <Fieldset.Root\n className={cn(\n \"flex flex-col gap-4 rounded-lg border border-kumo-line p-4\",\n className,\n )}\n disabled={disabled}\n >\n <Fieldset.Legend className=\"text-lg font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && <p className=\"text-sm text-kumo-subtle\">{description}</p>}\n </Fieldset.Root>\n </SwitchGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Switch = Object.assign(SwitchBase, {\n Item: SwitchItem,\n Group: SwitchGroup,\n});\n\nSwitch.displayName = \"Switch\";\n"],"names":["KUMO_SWITCH_VARIANTS","KUMO_SWITCH_DEFAULT_VARIANTS","switchVariants","size","variant","cn","SwitchGroupContext","createContext","SwitchBase","forwardRef","className","checked","disabled","label","labelTooltip","required","controlFirst","onCheckedChange","transitioning","props","ref","ariaLabelFallback","switchControl","jsx","BaseSwitch.Root","rootProps","state","rootRef","baseClassName","baseRole","_ariaChecked","_ariaPressed","restRootProps","mergedClassName","role","checkedA11yProps","BaseSwitch.Thumb","Field","SwitchItem","useContext","jsxs","SwitchGroup","legend","children","error","description","Fieldset.Root","Fieldset.Legend","Switch"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"tabs-Cf12PXHz.js","sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tabs variant definitions. */\nexport const KUMO_TABS_VARIANTS = {\n variant: [\"segmented\", \"underline\"],\n} as const;\n\nexport const KUMO_TABS_DEFAULT_VARIANTS = {\n variant: \"segmented\",\n} as const;\n\nexport const KUMO_TABS_STYLING = {\n container: {\n height: 34,\n borderRadius: 8,\n background: \"color-accent\",\n padding: 1,\n },\n tab: {\n paddingX: 10,\n verticalMargin: 1,\n fontSize: 16,\n fontWeight: 500,\n borderRadius: 8,\n activeColor: \"text-color-surface\",\n inactiveColor: \"text-color-label\",\n },\n indicator: {\n background: \"color-surface-secondary\",\n ring: \"color-color-2\",\n borderRadius: 6,\n shadow: \"shadow-sm\",\n },\n} as const;\n\n// Derived types from KUMO_TABS_VARIANTS\nexport interface KumoTabsVariantsProps {\n /**\n * Tab style.\n * - `\"segmented\"` — Pill-shaped indicator on a filled track\n * - `\"underline\"` — Underline indicator below tab text\n * @default \"segmented\"\n */\n variant?: (typeof KUMO_TABS_VARIANTS.variant)[number];\n}\n\n/** Configuration for a single tab within the Tabs component. */\nexport type TabsItem = {\n /** Unique identifier for the tab, used as the controlled value. */\n value: string;\n /** Display content for the tab trigger. */\n label: ReactNode;\n /** Additional CSS classes for this tab trigger. */\n className?: string;\n /** Custom render function to replace the tab element (e.g. for link-based tabs). */\n render?: (props: Record<string, unknown>) => React.ReactElement;\n};\n\n/**\n * Tabs component props.\n *\n * @example\n * ```tsx\n * <Tabs\n * tabs={[\n * { value: \"overview\", label: \"Overview\" },\n * { value: \"settings\", label: \"Settings\" },\n * ]}\n * value={activeTab}\n * onValueChange={setActiveTab}\n * />\n * ```\n */\nexport type TabsProps = KumoTabsVariantsProps & {\n /** Array of tab items to render. */\n tabs?: TabsItem[];\n /** Controlled value. When set, component becomes controlled. */\n value?: string;\n /** Default selected value for uncontrolled mode. Ignored when `value` is set. */\n selectedValue?: string;\n /** Callback fired when the active tab changes. */\n onValueChange?: (value: string) => void;\n /**\n * When `true`, tabs are activated immediately upon receiving focus via arrow keys.\n * When `false` (default), tabs receive focus but require Enter/Space to activate.\n */\n activateOnFocus?: boolean;\n /** Additional CSS classes for the root element. */\n className?: string;\n /** Additional CSS classes for the tab list element. */\n listClassName?: string;\n /** Additional CSS classes for the indicator element. */\n indicatorClassName?: string;\n};\n\n/**\n * Tab navigation component with segmented or underline style.\n * Built on Base UI Tabs with animated active indicator.\n *\n * @example\n * ```tsx\n * <Tabs\n * variant=\"segmented\"\n * tabs={[{ value: \"tab1\", label: \"Tab 1\" }, { value: \"tab2\", label: \"Tab 2\" }]}\n * value={active}\n * onValueChange={setActive}\n * />\n * ```\n */\nexport function Tabs({\n tabs,\n value,\n selectedValue,\n onValueChange,\n activateOnFocus,\n className,\n listClassName,\n indicatorClassName,\n variant = KUMO_TABS_DEFAULT_VARIANTS.variant,\n}: TabsProps) {\n const items: TabsItem[] = tabs ?? [];\n\n if (items.length === 0) {\n return null;\n }\n\n const fallbackValue = items[0]?.value;\n const isControlled = value !== undefined;\n const rootProps = {\n value: isControlled ? value : undefined,\n defaultValue: isControlled ? undefined : (selectedValue ?? fallbackValue),\n };\n\n const isSegmented = variant === \"segmented\";\n const isUnderline = variant === \"underline\";\n\n return (\n <TabsPrimitive.Root\n {...rootProps}\n className={cn(\"relative isolate min-w-0 font-medium\", className)}\n onValueChange={(nextValue) => {\n const stringValue = String(nextValue);\n onValueChange?.(stringValue);\n }}\n >\n {/* Background element for segmented variant */}\n {isSegmented && (\n <div className=\"absolute inset-x-0 top-1/2 z-0 h-8.5 -translate-y-1/2 rounded-lg bg-kumo-tint\" />\n )}\n <TabsPrimitive.List\n activateOnFocus={activateOnFocus}\n className={cn(\n \"scrollbar-hide relative flex min-w-0 shrink items-stretch\",\n isSegmented && \"h-8.5 rounded-lg bg-kumo-tint px-px\",\n isUnderline && \"h-7 gap-4 border-b border-kumo-line pb-2\",\n listClassName,\n )}\n >\n {items.map((tab) => (\n <TabsPrimitive.Tab\n key={tab.value}\n value={tab.value}\n className={cn(\n \"relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap hover:border-kumo-tint focus-visible:rounded-none focus-visible:ring-kumo-ring focus-visible:outline-offset-3\",\n isSegmented &&\n \"my-px rounded-lg px-2.5 text-kumo-strong aria-selected:text-kumo-default\",\n isUnderline &&\n \"mb-2 text-kumo-strong hover:text-kumo-subtle aria-selected:font-medium aria-selected:text-kumo-default\",\n tab.className,\n )}\n >\n {tab.label}\n </TabsPrimitive.Tab>\n ))}\n <TabsPrimitive.Indicator\n className={cn(\n \"absolute z-1 transition-[left,width,transform] duration-200 ease-out\",\n \"data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0\",\n \"left-(--active-tab-left) w-(--active-tab-width)\",\n isSegmented &&\n \"top-(--active-tab-top) h-(--active-tab-height) rounded-lg bg-kumo-overlay shadow-sm ring ring-kumo-fill-hover\",\n isUnderline && \"bottom-0 h-0.5 bg-kumo-brand\",\n indicatorClassName,\n )}\n />\n </TabsPrimitive.List>\n </TabsPrimitive.Root>\n );\n}\n"],"names":["KUMO_TABS_DEFAULT_VARIANTS","Tabs","tabs","value","selectedValue","onValueChange","activateOnFocus","className","listClassName","indicatorClassName","variant","items","fallbackValue","isControlled","rootProps","isSegmented","isUnderline","jsxs","TabsPrimitive.Root","cn","nextValue","stringValue","jsx","TabsPrimitive.List","tab","TabsPrimitive.Tab","TabsPrimitive.Indicator"],"mappings":";;;;AASO,MAAMA,IAA6B;AAAA,EACxC,SAAS;AACX;AAoGO,SAASC,EAAK;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC,IAAUV,EAA2B;AACvC,GAAc;AACZ,QAAMW,IAAoBT,KAAQ,CAAA;AAElC,MAAIS,EAAM,WAAW;AACnB,WAAO;AAGT,QAAMC,IAAgBD,EAAM,CAAC,GAAG,OAC1BE,IAAeV,MAAU,QACzBW,IAAY;AAAA,IAChB,OAAOD,IAAeV,IAAQ;AAAA,IAC9B,cAAcU,IAAe,SAAaT,KAAiBQ;AAAA,EAAA,GAGvDG,IAAcL,MAAY,aAC1BM,IAAcN,MAAY;AAEhC,SACE,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,WAAWK,EAAG,wCAAwCZ,CAAS;AAAA,MAC/D,eAAe,CAACa,MAAc;AAC5B,cAAMC,IAAc,OAAOD,CAAS;AACpC,QAAAf,IAAgBgB,CAAW;AAAA,MAC7B;AAAA,MAGC,UAAA;AAAA,QAAAN,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,gFAAA,CAAgF;AAAA,QAEjG,gBAAAL;AAAA,UAACM;AAAAA,UAAA;AAAA,YACC,iBAAAjB;AAAA,YACA,WAAWa;AAAA,cACT;AAAA,cACAJ,KAAe;AAAA,cACfC,KAAe;AAAA,cACfR;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAG,EAAM,IAAI,CAACa,MACV,gBAAAF;AAAA,gBAACG;AAAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAI;AAAA,kBACX,WAAWL;AAAA,oBACT;AAAA,oBACAJ,KACE;AAAA,oBACFC,KACE;AAAA,oBACFQ,EAAI;AAAA,kBAAA;AAAA,kBAGL,UAAAA,EAAI;AAAA,gBAAA;AAAA,gBAXAA,EAAI;AAAA,cAAA,CAaZ;AAAA,cACD,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACC,WAAWP;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACAJ,KACE;AAAA,oBACFC,KAAe;AAAA,oBACfP;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast-BzvG5cpW.js","sources":["../../../node_modules/.pnpm/@phosphor-icons+react@2.1.10_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@phosphor-icons/react/dist/lib/SSRBase.es.js","../../../node_modules/.pnpm/@phosphor-icons+react@2.1.10_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@phosphor-icons/react/dist/defs/Warning.es.js","../../../node_modules/.pnpm/@phosphor-icons+react@2.1.10_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@phosphor-icons/react/dist/ssr/Warning.es.js","../../../node_modules/.pnpm/@phosphor-icons+react@2.1.10_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@phosphor-icons/react/dist/defs/WarningOctagon.es.js","../../../node_modules/.pnpm/@phosphor-icons+react@2.1.10_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@phosphor-icons/react/dist/ssr/WarningOctagon.es.js","../src/components/toast/toast.tsx"],"sourcesContent":["import * as e from \"react\";\nconst w = e.forwardRef((l, s) => {\n const {\n alt: r,\n color: a = \"currentColor\",\n size: t = \"1em\",\n weight: o = \"regular\",\n mirrored: i = !1,\n children: n,\n weights: c,\n ...m\n } = l;\n return /* @__PURE__ */ e.createElement(\n \"svg\",\n {\n ref: s,\n xmlns: \"http://www.w3.org/2000/svg\",\n width: t,\n height: t,\n fill: a,\n viewBox: \"0 0 256 256\",\n transform: i ? \"scale(-1, 1)\" : void 0,\n ...m\n },\n !!r && /* @__PURE__ */ e.createElement(\"title\", null, r),\n n,\n c.get(o)\n );\n});\nw.displayName = \"SSRBase\";\nexport {\n w as default\n};\n","import * as a from \"react\";\nconst e = /* @__PURE__ */ new Map([\n [\n \"bold\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M240.26,186.1,152.81,34.23h0a28.74,28.74,0,0,0-49.62,0L15.74,186.1a27.45,27.45,0,0,0,0,27.71A28.31,28.31,0,0,0,40.55,228h174.9a28.31,28.31,0,0,0,24.79-14.19A27.45,27.45,0,0,0,240.26,186.1Zm-20.8,15.7a4.46,4.46,0,0,1-4,2.2H40.55a4.46,4.46,0,0,1-4-2.2,3.56,3.56,0,0,1,0-3.73L124,46.2a4.77,4.77,0,0,1,8,0l87.44,151.87A3.56,3.56,0,0,1,219.46,201.8ZM116,136V104a12,12,0,0,1,24,0v32a12,12,0,0,1-24,0Zm28,40a16,16,0,1,1-16-16A16,16,0,0,1,144,176Z\" }))\n ],\n [\n \"duotone\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\n \"path\",\n {\n d: \"M215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22c6.3-11,22.52-11,28.82,0l87.46,151.87C236,202.79,228.08,216,215.46,216Z\",\n opacity: \"0.2\"\n }\n ), /* @__PURE__ */ a.createElement(\"path\", { d: \"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\" }))\n ],\n [\n \"fill\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z\" }))\n ],\n [\n \"light\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M235.07,189.09,147.61,37.22h0a22.75,22.75,0,0,0-39.22,0L20.93,189.09a21.53,21.53,0,0,0,0,21.72A22.35,22.35,0,0,0,40.55,222h174.9a22.35,22.35,0,0,0,19.6-11.19A21.53,21.53,0,0,0,235.07,189.09ZM224.66,204.8a10.46,10.46,0,0,1-9.21,5.2H40.55a10.46,10.46,0,0,1-9.21-5.2,9.51,9.51,0,0,1,0-9.72L118.79,43.21a10.75,10.75,0,0,1,18.42,0l87.46,151.87A9.51,9.51,0,0,1,224.66,204.8ZM122,144V104a6,6,0,0,1,12,0v40a6,6,0,0,1-12,0Zm16,36a10,10,0,1,1-10-10A10,10,0,0,1,138,180Z\" }))\n ],\n [\n \"regular\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z\" }))\n ],\n [\n \"thin\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M233.34,190.09,145.88,38.22h0a20.75,20.75,0,0,0-35.76,0L22.66,190.09a19.52,19.52,0,0,0,0,19.71A20.36,20.36,0,0,0,40.54,220H215.46a20.36,20.36,0,0,0,17.86-10.2A19.52,19.52,0,0,0,233.34,190.09ZM226.4,205.8a12.47,12.47,0,0,1-10.94,6.2H40.54a12.47,12.47,0,0,1-10.94-6.2,11.45,11.45,0,0,1,0-11.72L117.05,42.21a12.76,12.76,0,0,1,21.9,0L226.4,194.08A11.45,11.45,0,0,1,226.4,205.8ZM124,144V104a4,4,0,0,1,8,0v40a4,4,0,0,1-8,0Zm12,36a8,8,0,1,1-8-8A8,8,0,0,1,136,180Z\" }))\n ]\n]);\nexport {\n e as default\n};\n","import * as r from \"react\";\nimport e from \"../lib/SSRBase.es.js\";\nimport t from \"../defs/Warning.es.js\";\nconst o = r.forwardRef((a, n) => /* @__PURE__ */ r.createElement(e, { ref: n, ...a, weights: t }));\no.displayName = \"WarningIcon\";\nconst s = o;\nexport {\n s as Warning,\n o as WarningIcon\n};\n","import * as a from \"react\";\nconst e = /* @__PURE__ */ new Map([\n [\n \"bold\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M116,132V80a12,12,0,0,1,24,0v52a12,12,0,0,1-24,0ZM236,91.55v72.9a19.86,19.86,0,0,1-5.86,14.14l-51.55,51.55A19.85,19.85,0,0,1,164.45,236H91.55a19.85,19.85,0,0,1-14.14-5.86L25.86,178.59A19.86,19.86,0,0,1,20,164.45V91.55a19.86,19.86,0,0,1,5.86-14.14L77.41,25.86A19.85,19.85,0,0,1,91.55,20h72.9a19.85,19.85,0,0,1,14.14,5.86l51.55,51.55A19.86,19.86,0,0,1,236,91.55Zm-24,1.66L162.79,44H93.21L44,93.21v69.58L93.21,212h69.58L212,162.79ZM128,156a16,16,0,1,0,16,16A16,16,0,0,0,128,156Z\" }))\n ],\n [\n \"duotone\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\n \"path\",\n {\n d: \"M224,91.55v72.9a8,8,0,0,1-2.34,5.66l-51.55,51.55a8,8,0,0,1-5.66,2.34H91.55a8,8,0,0,1-5.66-2.34L34.34,170.11A8,8,0,0,1,32,164.45V91.55a8,8,0,0,1,2.34-5.66L85.89,34.34A8,8,0,0,1,91.55,32h72.9a8,8,0,0,1,5.66,2.34l51.55,51.55A8,8,0,0,1,224,91.55Z\",\n opacity: \"0.2\"\n }\n ), /* @__PURE__ */ a.createElement(\"path\", { d: \"M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z\" }))\n ],\n [\n \"fill\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M227.31,80.23,175.77,28.69A16.13,16.13,0,0,0,164.45,24H91.55a16.13,16.13,0,0,0-11.32,4.69L28.69,80.23A16.13,16.13,0,0,0,24,91.55v72.9a16.13,16.13,0,0,0,4.69,11.32l51.54,51.54A16.13,16.13,0,0,0,91.55,232h72.9a16.13,16.13,0,0,0,11.32-4.69l51.54-51.54A16.13,16.13,0,0,0,232,164.45V91.55A16.13,16.13,0,0,0,227.31,80.23ZM120,80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z\" }))\n ],\n [\n \"light\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M122,136V80a6,6,0,0,1,12,0v56a6,6,0,0,1-12,0ZM230,91.55v72.9a13.92,13.92,0,0,1-4.1,9.9L174.35,225.9a13.92,13.92,0,0,1-9.9,4.1H91.55a13.92,13.92,0,0,1-9.9-4.1L30.1,174.35a13.92,13.92,0,0,1-4.1-9.9V91.55a13.92,13.92,0,0,1,4.1-9.9L81.65,30.1a13.92,13.92,0,0,1,9.9-4.1h72.9a13.92,13.92,0,0,1,9.9,4.1L225.9,81.65A13.92,13.92,0,0,1,230,91.55Zm-12,0a2,2,0,0,0-.59-1.42L165.87,38.59a2,2,0,0,0-1.42-.59H91.55a2,2,0,0,0-1.41.59L38.58,90.13A2,2,0,0,0,38,91.55v72.9a2,2,0,0,0,.59,1.42l51.54,51.54a2,2,0,0,0,1.42.59h72.9a2,2,0,0,0,1.41-.59l51.56-51.54a2,2,0,0,0,.58-1.42ZM128,162a10,10,0,1,0,10,10A10,10,0,0,0,128,162Z\" }))\n ],\n [\n \"regular\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M120,136V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0ZM232,91.55v72.9a15.86,15.86,0,0,1-4.69,11.31l-51.55,51.55A15.86,15.86,0,0,1,164.45,232H91.55a15.86,15.86,0,0,1-11.31-4.69L28.69,175.76A15.86,15.86,0,0,1,24,164.45V91.55a15.86,15.86,0,0,1,4.69-11.31L80.24,28.69A15.86,15.86,0,0,1,91.55,24h72.9a15.86,15.86,0,0,1,11.31,4.69l51.55,51.55A15.86,15.86,0,0,1,232,91.55Zm-16,0L164.45,40H91.55L40,91.55v72.9L91.55,216h72.9L216,164.45ZM128,160a12,12,0,1,0,12,12A12,12,0,0,0,128,160Z\" }))\n ],\n [\n \"thin\",\n /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(\"path\", { d: \"M124,136V80a4,4,0,0,1,8,0v56a4,4,0,0,1-8,0ZM228,91.55v72.9a12,12,0,0,1-3.51,8.49l-51.55,51.55a12,12,0,0,1-8.49,3.51H91.55a12,12,0,0,1-8.49-3.51L31.51,172.94A12,12,0,0,1,28,164.45V91.55a12,12,0,0,1,3.51-8.49L83.06,31.51A12,12,0,0,1,91.55,28h72.9a12,12,0,0,1,8.49,3.51l51.55,51.55A12,12,0,0,1,228,91.55Zm-8,0a4,4,0,0,0-1.17-2.83L167.28,37.17A4.06,4.06,0,0,0,164.45,36H91.55a4.06,4.06,0,0,0-2.83,1.17L37.17,88.72A4,4,0,0,0,36,91.55v72.9a4,4,0,0,0,1.17,2.83l51.55,51.55A4.06,4.06,0,0,0,91.55,220h72.9a4.06,4.06,0,0,0,2.83-1.17l51.55-51.55a4,4,0,0,0,1.17-2.83ZM128,164a8,8,0,1,0,8,8A8,8,0,0,0,128,164Z\" }))\n ]\n]);\nexport {\n e as default\n};\n","import * as o from \"react\";\nimport t from \"../lib/SSRBase.es.js\";\nimport e from \"../defs/WarningOctagon.es.js\";\nconst a = o.forwardRef((n, r) => /* @__PURE__ */ o.createElement(t, { ref: r, ...n, weights: e }));\na.displayName = \"WarningOctagonIcon\";\nconst m = a;\nexport {\n m as WarningOctagon,\n a as WarningOctagonIcon\n};\n","import {\n Toast,\n ToastManagerAddOptions,\n ToastObject,\n} from \"@base-ui/react/toast\";\nimport type React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button, ButtonProps } from \"../../components/button\";\nimport {\n WarningIcon,\n WarningOctagonIcon,\n} from \"@phosphor-icons/react/dist/ssr\";\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Toast has no user-facing variants but documents the styling structure.\n */\nexport const KUMO_TOAST_VARIANTS = {\n root: {\n classes:\n \"rounded-lg border border-kumo-fill bg-kumo-control p-4 shadow-lg text-kumo-default\",\n description: \"Toast container with background, border, and shadow\",\n },\n title: {\n classes: \"text-[0.975rem] leading-5 font-medium text-kumo-default\",\n description: \"Toast title with primary text color\",\n },\n description: {\n classes: \"text-[0.925rem] leading-5 text-kumo-subtle\",\n description: \"Toast description with muted text color\",\n },\n close: {\n classes:\n \"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded border-none bg-transparent text-kumo-subtle hover:bg-kumo-fill-hover hover:text-kumo-strong\",\n description: \"Close button with X icon\",\n },\n variant: {\n default: {\n classes: \"border-kumo-fill bg-kumo-control\",\n description: \"Default toast style\",\n },\n error: {\n classes:\n \"border-kumo-fill bg-kumo-control [&_[data-toast-icon]]:text-[light-dark(var(--color-red-600),var(--color-red-400))] [&_[data-toast-title]]:text-[light-dark(var(--color-red-600),var(--color-red-400))]\",\n description: \"Error toast for critical issues\",\n icon: WarningOctagonIcon,\n },\n warning: {\n classes:\n \"border-kumo-fill bg-kumo-control [&_[data-toast-icon]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))] [&_[data-toast-title]]:text-[light-dark(var(--color-amber-700),var(--color-amber-500))]\",\n description: \"Warning toast for cautionary messages\",\n icon: WarningIcon,\n },\n },\n} as const;\n\nexport const KUMO_TOAST_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n/**\n * Toast styling configuration for Figma plugin consumption.\n * Provides structured metadata for generating Toast components in Figma.\n */\nexport const KUMO_TOAST_STYLING = {\n container: {\n width: 300,\n padding: 16,\n borderRadius: 8,\n background: \"color-secondary\",\n border: \"color-color\",\n shadow: \"shadow-lg\",\n gap: 4,\n },\n title: {\n fontSize: 16,\n fontWeight: 500,\n color: \"text-color-surface\",\n },\n description: {\n fontSize: 15,\n fontWeight: 400,\n color: \"text-color-muted\",\n },\n closeButton: {\n size: 20,\n iconSize: 16,\n iconName: \"ph-x\",\n iconColor: \"text-color-muted\",\n hoverBackground: \"color-color-2\",\n hoverColor: \"text-color-label\",\n borderRadius: 4,\n },\n} as const;\n\n// Derived types from KUMO_TOAST_VARIANTS\nexport type KumoToastVariant = keyof typeof KUMO_TOAST_VARIANTS.variant;\n\nexport interface KumoToastVariantsProps {\n variant?: KumoToastVariant;\n}\n\nexport function toastVariants({\n variant = KUMO_TOAST_DEFAULT_VARIANTS.variant,\n}: KumoToastVariantsProps = {}) {\n return cn(\n // Base styles for toast root\n \"rounded-xl border bg-clip-padding p-4 shadow-lg\",\n // Apply variant styles from KUMO_TOAST_VARIANTS\n KUMO_TOAST_VARIANTS.variant[variant].classes,\n );\n}\n\n/**\n * Toasty component props.\n *\n * Wrap your app with `<Toasty>` to enable toast notifications.\n * Use `Toast.useToastManager().notify(…)` to create toasts.\n *\n * @example\n * ```tsx\n * // 1. Wrap your app\n * <Toasty>\n * <App />\n * </Toasty>\n *\n * // 2. Show a toast from any child component\n * const toasts = Toast.useToastManager();\n * toasts.notify({ title: \"Saved\", description: \"Changes saved successfully.\" });\n * ```\n */\nexport interface ToastyProps extends KumoToastVariantsProps {\n /** Application content. Toasts render via a portal above this. */\n children: React.ReactNode;\n}\n\ntype KumoToastOptionsBase = {\n variant?: KumoToastVariant;\n content?: React.ReactNode;\n actions?: Array<ButtonProps>;\n};\n\nexport type KumoToastOptions<Data extends object> = ToastObject<Data> &\n KumoToastOptionsBase;\n\nexport type KumoToastManagerAddOptions<Data extends object> =\n ToastManagerAddOptions<Data> & KumoToastOptionsBase;\n\nfunction wrapManagerMethods<\n T extends { add: Function; update: Function; promise: Function },\n>(manager: T) {\n return {\n ...manager,\n\n add: (options: KumoToastManagerAddOptions<any>) => {\n return manager.add({\n ...options,\n });\n },\n\n update: (id: string, options: Partial<KumoToastManagerAddOptions<any>>) => {\n return manager.update(id, {\n ...options,\n });\n },\n\n promise: <T,>(\n promise: Promise<T>,\n options: {\n loading: KumoToastManagerAddOptions<any>;\n success:\n | KumoToastManagerAddOptions<any>\n | ((data: T) => KumoToastManagerAddOptions<any>);\n error:\n | KumoToastManagerAddOptions<any>\n | ((error: Error) => KumoToastManagerAddOptions<any>);\n },\n ) => {\n return manager.promise(promise, {\n loading: { ...options.loading },\n success:\n typeof options.success === \"function\"\n ? (data: T) => ({\n ...(\n options.success as (\n data: T,\n ) => KumoToastManagerAddOptions<any>\n )(data),\n })\n : { ...options.success },\n error:\n typeof options.error === \"function\"\n ? (error: Error) => ({\n ...(\n options.error as (\n error: Error,\n ) => KumoToastManagerAddOptions<any>\n )(error),\n })\n : { ...options.error },\n });\n },\n };\n}\n\nexport const useKumoToastManager = () => {\n const manager = Toast.useToastManager();\n return {\n ...wrapManagerMethods(manager),\n toasts: manager.toasts as Array<KumoToastOptions<any>>,\n };\n};\n\nexport const createKumoToastManager = () => {\n return wrapManagerMethods(Toast.createToastManager());\n};\n\n/**\n * Toasty — toast notification provider and viewport.\n *\n * Renders a `Toast.Provider` with a fixed-position viewport in the bottom-right corner.\n * Toasts stack with smooth enter/exit animations, swipe-to-dismiss, and expand-on-hover.\n *\n * Built on `@base-ui/react/toast`.\n *\n * @example\n * ```tsx\n * <Toasty>\n * <App />\n * </Toasty>\n * ```\n */\nexport function Toasty({ children }: ToastyProps) {\n return (\n <Toast.Provider>\n {children}\n <Toast.Portal>\n <Toast.Viewport className=\"fixed top-auto right-4 bottom-4 z-1 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]\">\n <ToastList />\n </Toast.Viewport>\n </Toast.Portal>\n </Toast.Provider>\n );\n}\n\n/** Alias for Toasty — provided for discoverability when migrating from other libraries */\nexport const ToastProvider = Toasty;\n\nfunction ToastList() {\n const { toasts } = useKumoToastManager();\n return toasts.map((toast) => (\n <Toast.Root\n key={toast.id}\n toast={toast}\n className={cn(\n \"absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none\",\n toastVariants({ variant: toast.variant }),\n \"[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]\",\n \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]\",\n \"after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n \"data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]\",\n \"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n \"data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]\",\n \"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]\",\n \"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n \"[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]\",\n )}\n >\n <div className=\"absolute inset-0 rounded-[11px] bg-kumo-control/90\"></div>\n <Toast.Content className=\"isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100\">\n {toast.content ?? (\n <>\n <div className=\"flex items-start gap-2\">\n <ToastIcon variant={toast.variant} />\n <div className=\"flex flex-col gap-1 overflow-hidden\">\n <Toast.Title\n data-toast-title\n className=\"text-[0.975rem] leading-5 font-medium text-kumo-default\"\n />\n <Toast.Description className=\"text-[0.925rem] leading-5 text-kumo-subtle\" />\n\n {!!toast.actions && (\n <div className=\"mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px\">\n {toast.actions.map((actionProps, idx) => (\n <Button key={idx} {...actionProps} />\n ))}\n </div>\n )}\n </div>\n </div>\n </>\n )}\n <Toast.Close\n className=\"absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-kumo-contrast/10 hover:text-current\"\n aria-label=\"Close\"\n >\n <XIcon className=\"h-3 w-3\" />\n </Toast.Close>\n </Toast.Content>\n </Toast.Root>\n ));\n}\n\nfunction ToastIcon({ variant }: { variant?: KumoToastVariant }) {\n if (!variant || variant === \"default\") return null;\n const variantConfig = KUMO_TOAST_VARIANTS.variant[variant];\n if (!(\"icon\" in variantConfig)) return null;\n const Icon = variantConfig.icon;\n return (\n <Icon data-toast-icon className=\"mt-0.5 h-4 w-4 shrink-0\" weight=\"fill\" />\n );\n}\n\nfunction XIcon(props: React.ComponentProps<\"svg\">) {\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n {...props}\n >\n <path d=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n );\n}\n"],"names":["w","e","l","s","a","t","o","i","n","c","m","r","KUMO_TOAST_VARIANTS","WarningOctagonIcon","WarningIcon","KUMO_TOAST_DEFAULT_VARIANTS","toastVariants","variant","cn","wrapManagerMethods","manager","options","id","promise","data","error","useKumoToastManager","Toast.useToastManager","createKumoToastManager","Toast.createToastManager","Toasty","children","jsxs","Toast.Provider","jsx","Toast.Portal","Toast.Viewport","ToastList","ToastProvider","toasts","toast","Toast.Root","Toast.Content","Fragment","ToastIcon","Toast.Title","Toast.Description","actionProps","idx","Button","Toast.Close","XIcon","variantConfig","Icon","props"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip-2KqOpTj0.js","sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipBase } from \"@base-ui/react/tooltip\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Tooltip side variant definitions mapping positions to their Tailwind classes. */\nexport const KUMO_TOOLTIP_VARIANTS = {\n side: {\n top: {\n classes: \"\",\n description: \"Tooltip appears above the trigger\",\n },\n bottom: {\n classes: \"\",\n description: \"Tooltip appears below the trigger\",\n },\n left: {\n classes: \"\",\n description: \"Tooltip appears to the left of the trigger\",\n },\n right: {\n classes: \"\",\n description: \"Tooltip appears to the right of the trigger\",\n },\n },\n} as const;\n\nexport const KUMO_TOOLTIP_DEFAULT_VARIANTS = {\n side: \"top\",\n} as const;\n\n// Derived types from KUMO_TOOLTIP_VARIANTS\nexport type KumoTooltipSide = keyof typeof KUMO_TOOLTIP_VARIANTS.side;\n\nexport interface KumoTooltipVariantsProps {\n /**\n * Preferred side of the trigger to render the tooltip.\n * - `\"top\"` — Tooltip appears above the trigger\n * - `\"bottom\"` — Tooltip appears below the trigger\n * - `\"left\"` — Tooltip appears to the left of the trigger\n * - `\"right\"` — Tooltip appears to the right of the trigger\n * @default \"top\"\n */\n side?: KumoTooltipSide;\n}\n\nexport function tooltipVariants({\n side = KUMO_TOOLTIP_DEFAULT_VARIANTS.side,\n}: KumoTooltipVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-1 outline-kumo-fill\",\n \"transition-[transform,opacity] duration-150\",\n \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n \"data-[instant]:duration-0\",\n // Apply side-specific styles (currently none, but extensible)\n KUMO_TOOLTIP_VARIANTS.side[side].classes,\n );\n}\n\nexport const TooltipProvider = TooltipBase.Provider;\n\ntype BaseTooltipProps = ComponentPropsWithoutRef<typeof TooltipBase.Root>;\n\ntype TriggerProps = ComponentPropsWithoutRef<typeof TooltipBase.Trigger>;\n\n/** Alignment options for tooltip positioning. Source: PositionerProps[\"align\"] */\ntype TooltipAlign = \"start\" | \"center\" | \"end\";\n\n/**\n * Tooltip component props.\n *\n * @example\n * ```tsx\n * <TooltipProvider>\n * <Tooltip content=\"Add new item\" asChild>\n * <Button shape=\"square\" icon={PlusIcon} />\n * </Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport type TooltipProps = BaseTooltipProps &\n KumoTooltipVariantsProps & {\n /**\n * Alignment on the axis perpendicular to `side`.\n * - `\"start\"` — Align to the start edge\n * - `\"center\"` — Center-aligned\n * - `\"end\"` — Align to the end edge\n */\n align?: TooltipAlign;\n /** When `true`, the trigger wraps the child element instead of adding a wrapper. */\n asChild?: boolean;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Content to display inside the tooltip popup. */\n content: ReactNode;\n };\n\n/**\n * Accessible popup that shows additional information on hover/focus.\n * Wrap your app or section with `<TooltipProvider>` to enable delay grouping.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save changes\" asChild>\n * <Button variant=\"primary\">Save</Button>\n * </Tooltip>\n * ```\n */\nexport function Tooltip({\n content,\n children,\n align,\n asChild,\n side,\n className,\n ...props\n}: TooltipProps) {\n return (\n <TooltipBase.Root {...props}>\n <TooltipBase.Trigger\n className={className}\n render={asChild ? (children as TriggerProps[\"render\"]) : undefined}\n >\n {asChild ? undefined : (children as ReactNode)}\n </TooltipBase.Trigger>\n <TooltipBase.Portal>\n <TooltipBase.Positioner align={align} side={side} sideOffset={10}>\n <TooltipBase.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-2.5 py-1.5 text-sm text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n \"transition-[transform,opacity] duration-150\",\n \"data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n \"data-[ending-style]:scale-90 data-[ending-style]:opacity-0\",\n \"data-[instant]:duration-0\",\n \"kumo-tooltip-popup\",\n )}\n >\n <TooltipBase.Arrow\n className={cn(\n \"flex\",\n \"data-[side=bottom]:top-[-8px]\",\n \"data-[side=left]:right-[-13px] data-[side=left]:rotate-90\",\n \"data-[side=right]:left-[-13px] data-[side=right]:-rotate-90\",\n \"data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n )}\n >\n <ArrowSvg />\n </TooltipBase.Arrow>\n {content}\n </TooltipBase.Popup>\n </TooltipBase.Positioner>\n </TooltipBase.Portal>\n </TooltipBase.Root>\n );\n}\n\n/**\n * Arrow SVG with three paths for proper border rendering in both light and dark modes.\n * This approach matches Base UI's tooltip implementation.\n *\n * The three paths are:\n * 1. ArrowFill - The main arrow body, matches tooltip background\n * 2. ArrowOuterStroke - Border visible in light mode only (transparent in dark)\n * 3. ArrowInnerStroke - Border visible in dark mode only (transparent in light)\n *\n * This is necessary because the outer and inner stroke paths have different geometries,\n * and using both ensures the arrow border aligns perfectly with the tooltip's outline\n * in both color modes.\n *\n * @see https://base-ui.com/react/components/tooltip\n */\nfunction ArrowSvg(props: React.ComponentProps<\"svg\">) {\n return (\n <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n <path\n d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n className=\"fill-kumo-base\"\n />\n <path\n d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n className=\"fill-kumo-tip-shadow\"\n />\n <path\n d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n className=\"fill-kumo-tip-stroke\"\n />\n </svg>\n );\n}\n"],"names":["TooltipProvider","TooltipBase.Provider","Tooltip","content","children","align","asChild","side","className","props","jsxs","TooltipBase.Root","jsx","TooltipBase.Trigger","TooltipBase.Portal","TooltipBase.Positioner","TooltipBase.Popup","cn","TooltipBase.Arrow","ArrowSvg"],"mappings":";;;;AA6DO,MAAMA,IAAkBC;AAiDxB,SAASC,EAAQ;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,SACE,gBAAAC,EAACC,GAAA,EAAkB,GAAGF,GACpB,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAAL;AAAA,QACA,QAAQF,IAAWF,IAAsC;AAAA,QAExD,cAAU,SAAaA;AAAA,MAAA;AAAA,IAAA;AAAA,IAE1B,gBAAAQ,EAACE,GAAA,EACC,UAAA,gBAAAF,EAACG,GAAA,EAAuB,OAAAV,GAAc,MAAAE,GAAY,YAAY,IAC5D,UAAA,gBAAAG;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAL;AAAA,YAACM;AAAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGF,4BAACE,GAAA,CAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXhB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAiBA,SAASgB,EAASV,GAAoC;AACpD,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAQ,GAAGD,GAC9D,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}