@cloudflare/kumo 2.2.2 → 2.3.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 (192) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/ai/component-registry.json +28 -5
  3. package/ai/component-registry.md +64 -7
  4. package/ai/schemas.ts +1 -0
  5. package/dist/.build-complete +1 -1
  6. package/dist/ai/schemas.d.ts +12 -4
  7. package/dist/ai/schemas.d.ts.map +1 -1
  8. package/dist/ai/schemas.js +2 -0
  9. package/dist/ai/schemas.js.map +1 -1
  10. package/dist/chunks/SankeyChart-krkvltewpn3bbupw.js +651 -0
  11. package/dist/chunks/{SankeyChart-dkq90770ad7hgzx3.js.map → SankeyChart-krkvltewpn3bbupw.js.map} +1 -1
  12. package/dist/chunks/{autocomplete-mhrvtq4y5n21vr0t.js → autocomplete-h39m8kzoq0csjh9l.js} +82 -68
  13. package/dist/chunks/autocomplete-h39m8kzoq0csjh9l.js.map +1 -0
  14. package/dist/chunks/{badge-kqox9toi0sygfbno.js → badge-e9w8qrjmeu9nocf6.js} +80 -19
  15. package/dist/chunks/badge-e9w8qrjmeu9nocf6.js.map +1 -0
  16. package/dist/chunks/{breadcrumbs-ohstavaqvycoremm.js → breadcrumbs-g4pyoikibpoxsgw4.js} +2 -2
  17. package/dist/chunks/{breadcrumbs-ohstavaqvycoremm.js.map → breadcrumbs-g4pyoikibpoxsgw4.js.map} +1 -1
  18. package/dist/chunks/{button-oevxukl0zmwoq4tb.js → button-fxdpoacmq5rv1adk.js} +2 -2
  19. package/dist/chunks/{button-oevxukl0zmwoq4tb.js.map → button-fxdpoacmq5rv1adk.js.map} +1 -1
  20. package/dist/chunks/{checkbox-h6vkv17lnq854z2c.js → checkbox-dtoq56ieijj9m6vr.js} +3 -3
  21. package/dist/chunks/{checkbox-h6vkv17lnq854z2c.js.map → checkbox-dtoq56ieijj9m6vr.js.map} +1 -1
  22. package/dist/chunks/{clipboard-text-kyy71jmx7umdh8k8.js → clipboard-text-nvdsloomefwgcxat.js} +4 -4
  23. package/dist/chunks/{clipboard-text-kyy71jmx7umdh8k8.js.map → clipboard-text-nvdsloomefwgcxat.js.map} +1 -1
  24. package/dist/chunks/{collapsible-ej6p2bq758sw30nk.js → collapsible-cnsxmp7dko87pgx0.js} +2 -2
  25. package/dist/chunks/{collapsible-ej6p2bq758sw30nk.js.map → collapsible-cnsxmp7dko87pgx0.js.map} +1 -1
  26. package/dist/chunks/{combobox-g3cudlfajecou4va.js → combobox-jcqn64ixr4557a0s.js} +126 -126
  27. package/dist/chunks/combobox-jcqn64ixr4557a0s.js.map +1 -0
  28. package/dist/chunks/{command-palette-eep807rf6iapoz8r.js → command-palette-jrq7p16tff6n46nj.js} +11 -11
  29. package/dist/chunks/{command-palette-eep807rf6iapoz8r.js.map → command-palette-jrq7p16tff6n46nj.js.map} +1 -1
  30. package/dist/chunks/dialog-gndju3sqg1lmpb3f.js +118 -0
  31. package/dist/chunks/{dialog-fo3qhv9fgiadq5gp.js.map → dialog-gndju3sqg1lmpb3f.js.map} +1 -1
  32. package/dist/chunks/{dropdown-cobpydatw4vlb3ov.js → dropdown-k6orz4j043xybf54.js} +2 -2
  33. package/dist/chunks/{dropdown-cobpydatw4vlb3ov.js.map → dropdown-k6orz4j043xybf54.js.map} +1 -1
  34. package/dist/chunks/{empty-n3r7xutkb9sxjaso.js → empty-ni12ufom1kkakbuc.js} +2 -2
  35. package/dist/chunks/{empty-n3r7xutkb9sxjaso.js.map → empty-ni12ufom1kkakbuc.js.map} +1 -1
  36. package/dist/chunks/{field-l1oapopp6kjnephi.js → field-n16udu32tpyq5udz.js} +3 -3
  37. package/dist/chunks/{field-l1oapopp6kjnephi.js.map → field-n16udu32tpyq5udz.js.map} +1 -1
  38. package/dist/chunks/{input-area-gudamx1ruz8rxiw2.js → input-area-hhhpgg0ev8bowtrk.js} +4 -4
  39. package/dist/chunks/{input-area-gudamx1ruz8rxiw2.js.map → input-area-hhhpgg0ev8bowtrk.js.map} +1 -1
  40. package/dist/chunks/{input-group-gy08vju7eoogil8k.js → input-group-kkw5j7rwzhj66h10.js} +70 -70
  41. package/dist/chunks/input-group-kkw5j7rwzhj66h10.js.map +1 -0
  42. package/dist/chunks/{input-i3os21puacqw4r75.js → input-mv7giprcc6hfkpq3.js} +3 -3
  43. package/dist/chunks/{input-i3os21puacqw4r75.js.map → input-mv7giprcc6hfkpq3.js.map} +1 -1
  44. package/dist/chunks/{label-i0bj94d43irz0k1x.js → label-f6yvqca8qhbpvkq8.js} +3 -3
  45. package/dist/chunks/{label-i0bj94d43irz0k1x.js.map → label-f6yvqca8qhbpvkq8.js.map} +1 -1
  46. package/dist/chunks/{layer-card-hyz8lfxceudt05pv.js → layer-card-gegkqhkjy65l1ueo.js} +2 -2
  47. package/dist/chunks/{layer-card-hyz8lfxceudt05pv.js.map → layer-card-gegkqhkjy65l1ueo.js.map} +1 -1
  48. package/dist/chunks/{link-lkzjiitte3l29q87.js → link-jjk7qolyol7s1jkk.js} +2 -2
  49. package/dist/chunks/{link-lkzjiitte3l29q87.js.map → link-jjk7qolyol7s1jkk.js.map} +1 -1
  50. package/dist/chunks/{menubar-jalggrag4utvdpey.js → menubar-d5s6h96nw8ggy04a.js} +2 -2
  51. package/dist/chunks/{menubar-jalggrag4utvdpey.js.map → menubar-d5s6h96nw8ggy04a.js.map} +1 -1
  52. package/dist/chunks/{meter-jbxkh6gfggx1kjna.js → meter-kxn34sy6l2mz5dwq.js} +2 -2
  53. package/dist/chunks/{meter-jbxkh6gfggx1kjna.js.map → meter-kxn34sy6l2mz5dwq.js.map} +1 -1
  54. package/dist/chunks/{pagination-ceetno8sc1rd0wr2.js → pagination-ixbq8ssuuo0jxaa4.js} +3 -3
  55. package/dist/chunks/{pagination-ceetno8sc1rd0wr2.js.map → pagination-ixbq8ssuuo0jxaa4.js.map} +1 -1
  56. package/dist/chunks/{popover-i4opvl9g0as52fyx.js → popover-js5ds3szd43kspja.js} +2 -2
  57. package/dist/chunks/{popover-i4opvl9g0as52fyx.js.map → popover-js5ds3szd43kspja.js.map} +1 -1
  58. package/dist/chunks/{radio-g56o5rftpu1qpxuv.js → radio-nyw89v4eafptepmz.js} +2 -2
  59. package/dist/chunks/{radio-g56o5rftpu1qpxuv.js.map → radio-nyw89v4eafptepmz.js.map} +1 -1
  60. package/dist/chunks/{select-g1xvti1k1hj7xe5t.js → select-o2i7aovnu8v1zv8t.js} +39 -38
  61. package/dist/chunks/{select-g1xvti1k1hj7xe5t.js.map → select-o2i7aovnu8v1zv8t.js.map} +1 -1
  62. package/dist/chunks/{sensitive-input-hokm527ollnz9dqc.js → sensitive-input-bjg6m791yz7g6bn3.js} +93 -90
  63. package/dist/chunks/sensitive-input-bjg6m791yz7g6bn3.js.map +1 -0
  64. package/dist/chunks/{sidebar-oan40ylmqkyui21w.js → sidebar-izcfqkrzt4vqn8ez.js} +37 -37
  65. package/dist/chunks/{sidebar-oan40ylmqkyui21w.js.map → sidebar-izcfqkrzt4vqn8ez.js.map} +1 -1
  66. package/dist/chunks/{surface-ck1nt2uqfzmod4sz.js → surface-lzwbh3f5t0gxc83t.js} +2 -2
  67. package/dist/chunks/{surface-ck1nt2uqfzmod4sz.js.map → surface-lzwbh3f5t0gxc83t.js.map} +1 -1
  68. package/dist/chunks/{switch-fv0ttj24uhocvuh8.js → switch-d9cs31oj4rjtg717.js} +3 -3
  69. package/dist/chunks/{switch-fv0ttj24uhocvuh8.js.map → switch-d9cs31oj4rjtg717.js.map} +1 -1
  70. package/dist/chunks/{table-nsfcgpo93gfetrhh.js → table-c6qemc2jmv22cv3p.js} +2 -2
  71. package/dist/chunks/{table-nsfcgpo93gfetrhh.js.map → table-c6qemc2jmv22cv3p.js.map} +1 -1
  72. package/dist/chunks/{tabs-g8ier5pehjpfxauf.js → tabs-f0ztlooi91ko9g04.js} +2 -2
  73. package/dist/chunks/{tabs-g8ier5pehjpfxauf.js.map → tabs-f0ztlooi91ko9g04.js.map} +1 -1
  74. package/dist/chunks/{toast-ofqlfmddcyka091n.js → toast-ejfm5cbt9yulqhol.js} +3 -3
  75. package/dist/chunks/{toast-ofqlfmddcyka091n.js.map → toast-ejfm5cbt9yulqhol.js.map} +1 -1
  76. package/dist/chunks/{tooltip-icvb67awe1zolz61.js → tooltip-o6xfw9jjclv9pxaj.js} +16 -16
  77. package/dist/chunks/{tooltip-icvb67awe1zolz61.js.map → tooltip-o6xfw9jjclv9pxaj.js.map} +1 -1
  78. package/dist/chunks/vendor-base-ui-mzjqwv5teijixz8h.js +24703 -0
  79. package/dist/chunks/vendor-base-ui-mzjqwv5teijixz8h.js.map +1 -0
  80. package/dist/chunks/{vendor-floating-ui-dwag5e88viikh2zs.js → vendor-floating-ui-c4mwmh0xmfzevy9l.js} +5 -5
  81. package/dist/chunks/{vendor-floating-ui-dwag5e88viikh2zs.js.map → vendor-floating-ui-c4mwmh0xmfzevy9l.js.map} +1 -1
  82. package/dist/chunks/vendor-utils-m5h2xu7s2rs3pgk5.js +217 -0
  83. package/dist/chunks/vendor-utils-m5h2xu7s2rs3pgk5.js.map +1 -0
  84. package/dist/code.js +1 -1
  85. package/dist/components/autocomplete.js +1 -1
  86. package/dist/components/badge.js +1 -1
  87. package/dist/components/breadcrumbs.js +1 -1
  88. package/dist/components/button.js +1 -1
  89. package/dist/components/chart.js +1 -1
  90. package/dist/components/checkbox.js +1 -1
  91. package/dist/components/clipboard-text.js +1 -1
  92. package/dist/components/collapsible.js +1 -1
  93. package/dist/components/combobox.js +1 -1
  94. package/dist/components/command-palette.js +1 -1
  95. package/dist/components/dialog.js +1 -1
  96. package/dist/components/dropdown.js +1 -1
  97. package/dist/components/empty.js +1 -1
  98. package/dist/components/field.js +1 -1
  99. package/dist/components/input-group.js +1 -1
  100. package/dist/components/input.js +3 -3
  101. package/dist/components/label.js +1 -1
  102. package/dist/components/layer-card.js +1 -1
  103. package/dist/components/link.js +1 -1
  104. package/dist/components/menubar.js +1 -1
  105. package/dist/components/meter.js +1 -1
  106. package/dist/components/pagination.js +1 -1
  107. package/dist/components/popover.js +1 -1
  108. package/dist/components/radio.js +1 -1
  109. package/dist/components/select.js +1 -1
  110. package/dist/components/sensitive-input.js +1 -1
  111. package/dist/components/sidebar.js +1 -1
  112. package/dist/components/surface.js +1 -1
  113. package/dist/components/switch.js +1 -1
  114. package/dist/components/table.js +1 -1
  115. package/dist/components/tabs.js +1 -1
  116. package/dist/components/toast.js +2 -2
  117. package/dist/components/tooltip.js +1 -1
  118. package/dist/index.js +38 -38
  119. package/dist/primitives/accordion.js +1 -1
  120. package/dist/primitives/alert-dialog.js +1 -1
  121. package/dist/primitives/autocomplete.js +1 -1
  122. package/dist/primitives/avatar.js +1 -1
  123. package/dist/primitives/button.js +1 -1
  124. package/dist/primitives/checkbox-group.js +1 -1
  125. package/dist/primitives/checkbox.js +1 -1
  126. package/dist/primitives/collapsible.js +1 -1
  127. package/dist/primitives/combobox.js +1 -1
  128. package/dist/primitives/context-menu.js +1 -1
  129. package/dist/primitives/csp-provider.js +1 -1
  130. package/dist/primitives/dialog.js +1 -1
  131. package/dist/primitives/direction-provider.js +1 -1
  132. package/dist/primitives/drawer.js +1 -1
  133. package/dist/primitives/field.js +1 -1
  134. package/dist/primitives/fieldset.js +1 -1
  135. package/dist/primitives/form.js +1 -1
  136. package/dist/primitives/input.js +1 -1
  137. package/dist/primitives/menu.js +1 -1
  138. package/dist/primitives/menubar.js +1 -1
  139. package/dist/primitives/meter.js +1 -1
  140. package/dist/primitives/navigation-menu.js +1 -1
  141. package/dist/primitives/number-field.js +1 -1
  142. package/dist/primitives/otp-field.js +1 -1
  143. package/dist/primitives/popover.js +1 -1
  144. package/dist/primitives/preview-card.js +1 -1
  145. package/dist/primitives/progress.js +1 -1
  146. package/dist/primitives/radio-group.js +1 -1
  147. package/dist/primitives/radio.js +1 -1
  148. package/dist/primitives/scroll-area.js +1 -1
  149. package/dist/primitives/select.js +1 -1
  150. package/dist/primitives/separator.js +1 -1
  151. package/dist/primitives/slider.js +1 -1
  152. package/dist/primitives/switch.js +1 -1
  153. package/dist/primitives/tabs.js +1 -1
  154. package/dist/primitives/toast.js +1 -1
  155. package/dist/primitives/toggle-group.js +1 -1
  156. package/dist/primitives/toggle.js +1 -1
  157. package/dist/primitives/toolbar.js +1 -1
  158. package/dist/primitives/tooltip.js +1 -1
  159. package/dist/primitives.js +1 -1
  160. package/dist/scripts/theme-generator/config.js +3 -3
  161. package/dist/scripts/theme-generator/config.js.map +1 -1
  162. package/dist/src/components/autocomplete/autocomplete.d.ts.map +1 -1
  163. package/dist/src/components/badge/badge.d.ts +51 -3
  164. package/dist/src/components/badge/badge.d.ts.map +1 -1
  165. package/dist/src/components/chart/SankeyChart.d.ts +6 -1
  166. package/dist/src/components/chart/SankeyChart.d.ts.map +1 -1
  167. package/dist/src/components/combobox/combobox.d.ts.map +1 -1
  168. package/dist/src/components/dialog/dialog.d.ts +11 -4
  169. package/dist/src/components/dialog/dialog.d.ts.map +1 -1
  170. package/dist/src/components/input-group/input-group-button.d.ts.map +1 -1
  171. package/dist/src/components/input-group/input-group-input.d.ts.map +1 -1
  172. package/dist/src/components/input-group/input-group.d.ts.map +1 -1
  173. package/dist/src/components/select/select.d.ts.map +1 -1
  174. package/dist/src/components/sensitive-input/sensitive-input.d.ts.map +1 -1
  175. package/dist/src/components/toast/toast.d.ts.map +1 -1
  176. package/dist/styles/kumo-binding.css +0 -18
  177. package/dist/styles/kumo-standalone.css +1 -1
  178. package/dist/styles/theme-kumo.css +6 -6
  179. package/package.json +2 -2
  180. package/scripts/generate-primitives.ts +6 -1
  181. package/scripts/theme-generator/config.ts +3 -3
  182. package/dist/chunks/SankeyChart-dkq90770ad7hgzx3.js +0 -635
  183. package/dist/chunks/autocomplete-mhrvtq4y5n21vr0t.js.map +0 -1
  184. package/dist/chunks/badge-kqox9toi0sygfbno.js.map +0 -1
  185. package/dist/chunks/combobox-g3cudlfajecou4va.js.map +0 -1
  186. package/dist/chunks/dialog-fo3qhv9fgiadq5gp.js +0 -115
  187. package/dist/chunks/input-group-gy08vju7eoogil8k.js.map +0 -1
  188. package/dist/chunks/sensitive-input-hokm527ollnz9dqc.js.map +0 -1
  189. package/dist/chunks/vendor-base-ui-nbyiqqi138hcoz52.js +0 -24639
  190. package/dist/chunks/vendor-base-ui-nbyiqqi138hcoz52.js.map +0 -1
  191. package/dist/chunks/vendor-utils-ixnhxmehwihk5tr7.js +0 -534
  192. package/dist/chunks/vendor-utils-ixnhxmehwihk5tr7.js.map +0 -1
@@ -3,7 +3,7 @@ import { jsx as o, jsxs as g } from "react/jsx-runtime";
3
3
  import { CaretDownIcon as u } from "@phosphor-icons/react";
4
4
  import { forwardRef as r } from "react";
5
5
  import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
6
- import { aO as C, aP as i, aQ as n } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
6
+ import { aP as C, aQ as i, aR as n } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
7
7
  function s({ className: e, ...l }) {
8
8
  return /* @__PURE__ */ o(C, { className: e, ...l });
9
9
  }
@@ -69,4 +69,4 @@ const T = Object.assign(s, {
69
69
  export {
70
70
  T as C
71
71
  };
72
- //# sourceMappingURL=collapsible-ej6p2bq758sw30nk.js.map
72
+ //# sourceMappingURL=collapsible-cnsxmp7dko87pgx0.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"collapsible-ej6p2bq758sw30nk.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n return cn();\n}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={cn(\"cursor-pointer\", className)}\n {...props}\n />\n );\n },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n * <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={className}\n {...props}\n />\n );\n },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n /** Label text displayed in the trigger */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={cn(\n // Defensive resets to prevent global button styles from polluting the trigger\n \"bg-transparent border-none shadow-none p-0 m-0\",\n // Base styles for the trigger\n \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n className,\n )}\n >\n {children}{\" \"}\n <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n </CollapsibleBase.Trigger>\n );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps extends BasePanelProps {\n /** Panel content */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with default styling</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n HTMLDivElement,\n CollapsibleDefaultPanelProps\n>(({ children, className, ...props }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n {...props}\n >\n {children}\n </CollapsibleBase.Panel>\n );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Show details\n * </Collapsible.Trigger>\n * <Collapsible.Panel className=\"mt-2\">\n * <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with border-left accent</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n * <Collapsible.Root\n * key={i}\n * open={activeIndex === i}\n * onOpenChange={(open) => setActiveIndex(open ? i : null)}\n * >\n * <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Panel: CollapsiblePanel,\n DefaultTrigger: CollapsibleDefaultTrigger,\n DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,GAAW,GAAGC,EAAA,GAASI,MAElC,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IACzE,GAAGC;AAAA,IAEH,UAAAW;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}
1
+ {"version":3,"file":"collapsible-cnsxmp7dko87pgx0.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n return cn();\n}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={cn(\"cursor-pointer\", className)}\n {...props}\n />\n );\n },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n * <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={className}\n {...props}\n />\n );\n },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n /** Label text displayed in the trigger */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={cn(\n // Defensive resets to prevent global button styles from polluting the trigger\n \"bg-transparent border-none shadow-none p-0 m-0\",\n // Base styles for the trigger\n \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n className,\n )}\n >\n {children}{\" \"}\n <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n </CollapsibleBase.Trigger>\n );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps extends BasePanelProps {\n /** Panel content */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with default styling</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n HTMLDivElement,\n CollapsibleDefaultPanelProps\n>(({ children, className, ...props }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n {...props}\n >\n {children}\n </CollapsibleBase.Panel>\n );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Show details\n * </Collapsible.Trigger>\n * <Collapsible.Panel className=\"mt-2\">\n * <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with border-left accent</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n * <Collapsible.Root\n * key={i}\n * open={activeIndex === i}\n * onOpenChange={(open) => setActiveIndex(open ? i : null)}\n * >\n * <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Panel: CollapsiblePanel,\n DefaultTrigger: CollapsibleDefaultTrigger,\n DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,GAAW,GAAGC,EAAA,GAASI,MAElC,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IACzE,GAAGC;AAAA,IAEH,UAAAW;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}
@@ -1,59 +1,59 @@
1
1
  "use client";
2
2
  import { jsx as e, jsxs as m } from "react/jsx-runtime";
3
- import { CheckIcon as S, XIcon as C, CaretDownIcon as N } from "@phosphor-icons/react";
4
- import { createContext as T, useContext as g, Fragment as V } from "react";
5
- import { i as p, K as P } from "./input-i3os21puacqw4r75.js";
6
- import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
7
- import { F as j } from "./field-l1oapopp6kjnephi.js";
3
+ import { CheckIcon as T, XIcon as C, CaretDownIcon as N } from "@phosphor-icons/react";
4
+ import { createContext as E, useContext as h, Fragment as V } from "react";
5
+ import { i as p, K as j } from "./input-mv7giprcc6hfkpq3.js";
6
+ import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
7
+ import { F as P } from "./field-n16udu32tpyq5udz.js";
8
8
  import { u as G } from "./portal-provider-hwmkdmkpvct0cb76.js";
9
- import { a6 as h, a7 as x, a8 as f, a9 as L, aa as M, ab as F, ac as _, ad as A, ae as E, af as b, ag as K, ah as O, ai as U, aj as W, ak as D, al as H, am as X, an as q, ao as B } from "./vendor-base-ui-nbyiqqi138hcoz52.js";
10
- P.size;
11
- const u = T("base");
9
+ import { a6 as g, a7 as x, a8 as f, a9 as L, aa as M, ab as F, ac as _, ad as A, ae as K, af as b, ag as O, ah as U, ai as W, aj as B, ak as D, al as H, am as X, an as q, ao as J } from "./vendor-base-ui-mzjqwv5teijixz8h.js";
10
+ j.size;
11
+ const u = E({ size: "base", hasError: !1 });
12
12
  function y({
13
- label: o,
14
- required: a,
13
+ label: a,
14
+ required: o,
15
15
  labelTooltip: r,
16
- description: n,
17
- error: i,
18
- children: c,
19
- size: s = "base",
16
+ description: s,
17
+ error: t,
18
+ children: n,
19
+ size: d = "base",
20
20
  ...l
21
21
  }) {
22
- const d = /* @__PURE__ */ e(u.Provider, { value: s, children: /* @__PURE__ */ e(M, { ...l, children: c }) });
23
- return o ? /* @__PURE__ */ e(
24
- j,
22
+ const c = /* @__PURE__ */ e(u, { value: { size: d, hasError: !!t }, children: /* @__PURE__ */ e(M, { ...l, children: n }) });
23
+ return a ? /* @__PURE__ */ e(
24
+ P,
25
25
  {
26
- label: o,
27
- required: a,
26
+ label: a,
27
+ required: o,
28
28
  labelTooltip: r,
29
- description: n,
30
- error: i ? typeof i == "string" ? { message: i, match: !0 } : i : void 0,
31
- children: d
29
+ description: s,
30
+ error: t ? typeof t == "string" ? { message: t, match: !0 } : t : void 0,
31
+ children: c
32
32
  }
33
- ) : d;
33
+ ) : c;
34
34
  }
35
35
  function v({
36
- children: o,
37
- className: a,
36
+ children: a,
37
+ className: o,
38
38
  align: r = "start",
39
- sideOffset: n = 4,
40
- alignOffset: i,
41
- side: c,
42
- container: s
39
+ sideOffset: s = 4,
40
+ alignOffset: t,
41
+ side: n,
42
+ container: d
43
43
  }) {
44
44
  const l = G();
45
- return /* @__PURE__ */ e(X, { container: s ?? l ?? void 0, children: /* @__PURE__ */ e(
45
+ return /* @__PURE__ */ e(X, { container: d ?? l ?? void 0, children: /* @__PURE__ */ e(
46
46
  q,
47
47
  {
48
48
  className: "",
49
49
  align: r,
50
- sideOffset: n,
51
- alignOffset: i,
52
- side: c,
50
+ sideOffset: s,
51
+ alignOffset: t,
52
+ side: n,
53
53
  children: /* @__PURE__ */ e(
54
- B,
54
+ J,
55
55
  {
56
- className: t(
56
+ className: i(
57
57
  "flex flex-col",
58
58
  // flexbox layout for sticky input + scrollable list
59
59
  "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5",
@@ -61,53 +61,53 @@ function v({
61
61
  // background
62
62
  "rounded-lg shadow-lg ring ring-kumo-line",
63
63
  // border part
64
- a
64
+ o
65
65
  ),
66
- children: o
66
+ children: a
67
67
  }
68
68
  )
69
69
  }
70
70
  ) });
71
71
  }
72
- const J = {
72
+ const Q = {
73
73
  xs: { padding: "pr-5", iconSize: 12, iconRight: "right-1" },
74
74
  sm: { padding: "pr-6", iconSize: 14, iconRight: "right-1.5" },
75
75
  base: { padding: "pr-8", iconSize: 16, iconRight: "right-2" },
76
76
  lg: { padding: "pr-10", iconSize: 18, iconRight: "right-3" }
77
77
  };
78
78
  function z({
79
- className: o,
80
- ...a
79
+ className: a,
80
+ ...o
81
81
  }) {
82
- const r = g(u), n = J[r];
82
+ const { size: r, hasError: s } = h(u), t = Q[r];
83
83
  return /* @__PURE__ */ m(
84
84
  f,
85
85
  {
86
- className: t(
87
- p({ size: r }),
86
+ className: i(
87
+ p({ size: r, variant: s ? "error" : "default" }),
88
88
  "relative flex items-center",
89
89
  "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
90
90
  "data-[placeholder]:text-kumo-placeholder",
91
- n.padding,
92
- o
91
+ t.padding,
92
+ a
93
93
  ),
94
94
  children: [
95
- /* @__PURE__ */ e(x, { ...a }),
95
+ /* @__PURE__ */ e(x, { ...o }),
96
96
  /* @__PURE__ */ e(
97
- h,
97
+ g,
98
98
  {
99
- className: t(
99
+ className: i(
100
100
  "absolute top-1/2 -translate-y-1/2 flex items-center text-kumo-subtle",
101
- n.iconRight
101
+ t.iconRight
102
102
  ),
103
- children: /* @__PURE__ */ e(N, { size: n.iconSize, className: "fill-current" })
103
+ children: /* @__PURE__ */ e(N, { size: t.iconSize, className: "fill-current" })
104
104
  }
105
105
  )
106
106
  ]
107
107
  }
108
108
  );
109
109
  }
110
- const Q = {
110
+ const Y = {
111
111
  xs: {
112
112
  padding: "pr-7",
113
113
  iconSize: 12,
@@ -134,15 +134,15 @@ const Q = {
134
134
  }
135
135
  };
136
136
  function R({
137
- clearLabel: o = "Clear selection",
138
- showOptionsLabel: a = "Show options",
137
+ clearLabel: a = "Clear selection",
138
+ showOptionsLabel: o = "Show options",
139
139
  ...r
140
140
  }) {
141
- const n = g(u), i = Q[n];
141
+ const { size: s, hasError: t } = h(u), n = Y[s];
142
142
  return /* @__PURE__ */ m(
143
143
  "div",
144
144
  {
145
- className: t(
145
+ className: i(
146
146
  "relative inline-block w-full max-w-xs",
147
147
  "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
148
148
  r.className
@@ -152,10 +152,10 @@ function R({
152
152
  b,
153
153
  {
154
154
  ...r,
155
- className: t(
156
- p({ size: n }),
155
+ className: i(
156
+ p({ size: s, variant: t ? "error" : "default" }),
157
157
  "w-full",
158
- i.padding,
158
+ n.padding,
159
159
  "disabled:cursor-not-allowed"
160
160
  )
161
161
  }
@@ -163,26 +163,26 @@ function R({
163
163
  /* @__PURE__ */ e(
164
164
  H,
165
165
  {
166
- "aria-label": o,
167
- className: t(
166
+ "aria-label": a,
167
+ className: i(
168
168
  "absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0",
169
169
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-0",
170
- i.clearRight
170
+ n.clearRight
171
171
  ),
172
- children: /* @__PURE__ */ e(C, { size: i.iconSize })
172
+ children: /* @__PURE__ */ e(C, { size: n.iconSize })
173
173
  }
174
174
  ),
175
175
  /* @__PURE__ */ e(
176
176
  f,
177
177
  {
178
- "aria-label": a,
179
- className: t(
178
+ "aria-label": o,
179
+ className: i(
180
180
  "absolute top-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer text-kumo-subtle",
181
181
  "m-0 bg-transparent p-0",
182
182
  // Reset Stratus global button styles
183
- i.caretRight
183
+ n.caretRight
184
184
  ),
185
- children: /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(N, { size: i.iconSize, className: "fill-current" }) })
185
+ children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(N, { size: n.iconSize, className: "fill-current" }) })
186
186
  }
187
187
  )
188
188
  ]
@@ -190,100 +190,100 @@ function R({
190
190
  );
191
191
  }
192
192
  function w({
193
- children: o,
194
- className: a,
193
+ children: a,
194
+ className: o,
195
195
  ...r
196
196
  }) {
197
197
  return /* @__PURE__ */ m(
198
- K,
198
+ O,
199
199
  {
200
200
  ...r,
201
- className: t(
201
+ className: i(
202
202
  "group mx-1.5 grid grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base",
203
203
  "cursor-pointer data-highlighted:bg-kumo-tint",
204
204
  // Disabled rows: muted text, no pointer, suppress highlight bg even
205
205
  // when keyboard nav lands on them. Base UI sets `data-disabled` on
206
206
  // the element when the `disabled` prop is true.
207
207
  "data-[disabled]:cursor-not-allowed data-[disabled]:text-kumo-subtle data-[disabled]:opacity-60 data-[disabled]:data-highlighted:bg-transparent",
208
- a
208
+ o
209
209
  ),
210
210
  children: [
211
- /* @__PURE__ */ e("div", { className: "col-start-1", children: o }),
212
- /* @__PURE__ */ e(O, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(S, {}) })
211
+ /* @__PURE__ */ e("div", { className: "col-start-1", children: a }),
212
+ /* @__PURE__ */ e(U, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(T, {}) })
213
213
  ]
214
214
  }
215
215
  );
216
216
  }
217
- function Y(o) {
217
+ function Z(a) {
218
218
  return /* @__PURE__ */ e(
219
- E,
219
+ K,
220
220
  {
221
- ...o,
222
- className: t(
221
+ ...a,
222
+ className: i(
223
223
  "mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0"
224
224
  ),
225
- children: o.children ?? "No labels found."
225
+ children: a.children ?? "No labels found."
226
226
  }
227
227
  );
228
228
  }
229
- function Z(o) {
229
+ function $(a) {
230
230
  return /* @__PURE__ */ e(
231
231
  b,
232
232
  {
233
- ...o,
234
- className: t(
233
+ ...a,
234
+ className: i(
235
235
  p(),
236
236
  "mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2",
237
- o.className
237
+ a.className
238
238
  )
239
239
  }
240
240
  );
241
241
  }
242
- function $({
243
- className: o,
244
- ...a
242
+ function ee({
243
+ className: a,
244
+ ...o
245
245
  }) {
246
246
  return /* @__PURE__ */ e(
247
247
  F,
248
248
  {
249
- ...a,
250
- className: t(
249
+ ...o,
250
+ className: i(
251
251
  "min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2",
252
- o
252
+ a
253
253
  )
254
254
  }
255
255
  );
256
256
  }
257
- function ee(o) {
257
+ function ae(a) {
258
258
  return /* @__PURE__ */ e(
259
259
  A,
260
260
  {
261
- ...o,
262
- className: t(
261
+ ...a,
262
+ className: i(
263
263
  "mx-1.5 px-2 py-1.5 text-sm text-kumo-subtle",
264
- o.className
264
+ a.className
265
265
  )
266
266
  }
267
267
  );
268
268
  }
269
- function oe(o) {
269
+ function oe(a) {
270
270
  return /* @__PURE__ */ e(
271
271
  _,
272
272
  {
273
- ...o,
273
+ ...a,
274
274
  className: "border-t border-kumo-hairline mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0"
275
275
  }
276
276
  );
277
277
  }
278
278
  function I({
279
- removeLabel: o = "Remove",
280
- ...a
279
+ removeLabel: a = "Remove",
280
+ ...o
281
281
  }) {
282
282
  return /* @__PURE__ */ m(
283
- U,
283
+ W,
284
284
  {
285
- ...a,
286
- className: t(
285
+ ...o,
286
+ className: i(
287
287
  "flex items-center gap-2.5",
288
288
  // Layout
289
289
  "h-6 pl-2 pr-[3px]",
@@ -296,12 +296,12 @@ function I({
296
296
  // Typography
297
297
  ),
298
298
  children: [
299
- a.children,
299
+ o.children,
300
300
  /* @__PURE__ */ e(
301
- W,
301
+ B,
302
302
  {
303
- "aria-label": o,
304
- className: t(
303
+ "aria-label": a,
304
+ className: i(
305
305
  "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover",
306
306
  "bg-transparent flex"
307
307
  ),
@@ -312,47 +312,47 @@ function I({
312
312
  }
313
313
  );
314
314
  }
315
- const ae = {
315
+ const te = {
316
316
  xs: "min-h-5",
317
317
  sm: "min-h-6.5",
318
318
  base: "min-h-9",
319
319
  lg: "min-h-10"
320
320
  };
321
321
  function k({
322
- placeholder: o,
323
- renderItem: a,
322
+ placeholder: a,
323
+ renderItem: o,
324
324
  className: r,
325
- inputSide: n = "right",
326
- value: i
325
+ inputSide: s = "right",
326
+ value: t
327
327
  }) {
328
- const c = g(u), s = i;
328
+ const { size: n, hasError: d } = h(u), l = t;
329
329
  return /* @__PURE__ */ m(
330
330
  D,
331
331
  {
332
- className: t(
333
- p({ size: c }),
332
+ className: i(
333
+ p({ size: n, variant: d ? "error" : "default" }),
334
334
  "flex flex-col",
335
335
  "gap-1 py-1 px-1.5",
336
- ae[c],
336
+ te[n],
337
337
  "h-auto",
338
338
  "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed",
339
339
  r
340
340
  ),
341
341
  children: [
342
- n === "top" && /* @__PURE__ */ e(
342
+ s === "top" && /* @__PURE__ */ e(
343
343
  b,
344
344
  {
345
- placeholder: o,
345
+ placeholder: a,
346
346
  className: "w-full px-2 py-1 border-0 bg-inherit"
347
347
  }
348
348
  ),
349
349
  /* @__PURE__ */ m("div", { className: "flex items-center flex-wrap gap-1.5 flex-1", children: [
350
- s !== void 0 && s.length > 0 && s.map((l) => a(l)),
351
- /* @__PURE__ */ e(x, { children: (l) => s !== void 0 ? null : /* @__PURE__ */ e(V, { children: l.map((d) => a(d)) }) }),
352
- n === "right" && /* @__PURE__ */ e(
350
+ l !== void 0 && l.length > 0 && l.map((c) => o(c)),
351
+ /* @__PURE__ */ e(x, { children: (c) => l !== void 0 ? null : /* @__PURE__ */ e(V, { children: c.map((S) => o(S)) }) }),
352
+ s === "right" && /* @__PURE__ */ e(
353
353
  b,
354
354
  {
355
- placeholder: o,
355
+ placeholder: a,
356
356
  className: "min-w-[100px] flex-1 px-2 py-1 border-0 bg-inherit"
357
357
  }
358
358
  )
@@ -368,7 +368,7 @@ R.displayName = "Combobox.TriggerInput";
368
368
  w.displayName = "Combobox.Item";
369
369
  I.displayName = "Combobox.Chip";
370
370
  k.displayName = "Combobox.TriggerMultipleWithInput";
371
- const de = Object.assign(y, {
371
+ const be = Object.assign(y, {
372
372
  // Helper components
373
373
  Content: v,
374
374
  TriggerValue: z,
@@ -378,19 +378,19 @@ const de = Object.assign(y, {
378
378
  Chip: I,
379
379
  Item: w,
380
380
  // Styled BaseUI
381
- Input: Z,
382
- Empty: Y,
383
- GroupLabel: ee,
381
+ Input: $,
382
+ Empty: Z,
383
+ GroupLabel: ae,
384
384
  Group: oe,
385
385
  // Styled BaseUI
386
- List: $,
386
+ List: ee,
387
387
  // BaseUI
388
388
  Collection: L,
389
389
  Trigger: f,
390
390
  Value: x,
391
- Icon: h
391
+ Icon: g
392
392
  });
393
393
  export {
394
- de as C
394
+ be as C
395
395
  };
396
- //# sourceMappingURL=combobox-g3cudlfajecou4va.js.map
396
+ //# sourceMappingURL=combobox-jcqn64ixr4557a0s.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"combobox-jcqn64ixr4557a0s.js","sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport {\n Fragment,\n createContext,\n useContext,\n type PropsWithChildren,\n type ReactNode,\n} from \"react\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n} from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Combobox variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n inputSide: {\n right: {\n classes: \"\",\n description: \"Input positioned inline to the right of chips\",\n },\n top: {\n classes: \"\",\n description: \"Input positioned above chips\",\n },\n },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n size: \"base\",\n inputSide: \"right\",\n} as const;\n\n// Context to pass size and error state down to sub-components\nconst ComboboxContext = createContext<{\n size: KumoInputSize;\n hasError: boolean;\n}>({ size: \"base\", hasError: false });\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxSize = keyof typeof KUMO_COMBOBOX_VARIANTS.size;\nexport type KumoComboboxInputSide =\n keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n /**\n * Size of the combobox trigger. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoComboboxSize;\n /**\n * Position of the text input relative to chips in multi-select mode.\n * - `\"right\"` — Input inline to the right of chips\n * - `\"top\"` — Input above chips\n * @default \"right\"\n */\n inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n return cn(\n resolveVariant(\n KUMO_COMBOBOX_VARIANTS.inputSide,\n inputSide,\n KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n ).classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\nexport type ComboboxSize = KumoComboboxSize;\n\nexport type ComboboxRootProps<\n Value = unknown,\n Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n * <Combobox.TriggerInput placeholder=\"Search…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * <Combobox.Empty>No results</Combobox.Empty>\n * </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n * <Combobox.TriggerMultipleWithInput\n * placeholder=\"Add tag…\"\n * renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n * />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** Currently selected value(s) */\n value?: unknown;\n /** Callback when selection changes */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode */\n multiple?: boolean;\n /** Combobox content (trigger, content, items) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Whether the combobox is required */\n required?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the combobox */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n size = \"base\",\n ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n size?: KumoComboboxSize;\n}) {\n const comboboxControl = (\n <ComboboxContext value={{ size, hasError: Boolean(error) }}>\n <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n </ComboboxContext>\n );\n\n // Render with Field wrapper if label, description, or error are provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {comboboxControl}\n </Field>\n );\n }\n\n // Render bare combobox without Field wrapper\n return comboboxControl;\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n container: containerProp,\n}: PropsWithChildren<{\n className?: string;\n align?: ComboboxBase.Positioner.Props[\"align\"];\n alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n side?: ComboboxBase.Positioner.Props[\"side\"];\n sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n /**\n * Container element for the portal. Use this to render the combobox inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n */\n container?: PortalContainer;\n}>) {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n return (\n <ComboboxBase.Portal container={container}>\n <ComboboxBase.Positioner\n className=\"\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <ComboboxBase.Popup\n className={cn(\n \"flex flex-col\", // flexbox layout for sticky input + scrollable list\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-base text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n className,\n )}\n >\n {children}\n </ComboboxBase.Popup>\n </ComboboxBase.Positioner>\n </ComboboxBase.Portal>\n );\n}\n\n// Size-dependent styles for TriggerValue icon\nconst triggerValueIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; iconRight: string }\n> = {\n xs: { padding: \"pr-5\", iconSize: 12, iconRight: \"right-1\" },\n sm: { padding: \"pr-6\", iconSize: 14, iconRight: \"right-1.5\" },\n base: { padding: \"pr-8\", iconSize: 16, iconRight: \"right-2\" },\n lg: { padding: \"pr-10\", iconSize: 18, iconRight: \"right-3\" },\n};\n\nfunction TriggerValue({\n className,\n ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n const { size, hasError } = useContext(ComboboxContext);\n const iconStyles = triggerValueIconStyles[size];\n\n return (\n <ComboboxBase.Trigger\n className={cn(\n inputVariants({ size, variant: hasError ? \"error\" : \"default\" }),\n \"relative flex items-center\",\n \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n \"data-[placeholder]:text-kumo-placeholder\",\n iconStyles.padding,\n className,\n )}\n >\n <ComboboxBase.Value {...props} />\n <ComboboxBase.Icon\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center text-kumo-subtle\",\n iconStyles.iconRight,\n )}\n >\n <CaretDownIcon size={iconStyles.iconSize} className=\"fill-current\" />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n );\n}\n\n// Size-dependent styles for TriggerInput icons\nconst triggerInputIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; clearRight: string; caretRight: string }\n> = {\n xs: {\n padding: \"pr-7\",\n iconSize: 12,\n clearRight: \"right-5\",\n caretRight: \"right-1\",\n },\n sm: {\n padding: \"pr-9\",\n iconSize: 14,\n clearRight: \"right-6\",\n caretRight: \"right-1.5\",\n },\n base: {\n padding: \"pr-12\",\n iconSize: 16,\n clearRight: \"right-8\",\n caretRight: \"right-2\",\n },\n lg: {\n padding: \"pr-14\",\n iconSize: 18,\n clearRight: \"right-9\",\n caretRight: \"right-3\",\n },\n};\n\nfunction TriggerInput({\n clearLabel = \"Clear selection\",\n showOptionsLabel = \"Show options\",\n ...props\n}: ComboboxBase.Input.Props & {\n /** Accessible label for the clear button. Pass a translated string for i18n.\n * @default \"Clear selection\"\n */\n clearLabel?: string;\n /** Accessible label for the dropdown trigger. Pass a translated string for i18n.\n * @default \"Show options\"\n */\n showOptionsLabel?: string;\n}) {\n const { size, hasError } = useContext(ComboboxContext);\n const iconStyles = triggerInputIconStyles[size];\n\n return (\n <div\n className={cn(\n \"relative inline-block w-full max-w-xs\",\n \"has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed\",\n props.className,\n )}\n >\n <ComboboxBase.Input\n {...props}\n className={cn(\n inputVariants({ size, variant: hasError ? \"error\" : \"default\" }),\n \"w-full\",\n iconStyles.padding,\n \"disabled:cursor-not-allowed\",\n )}\n />\n\n <ComboboxBase.Clear\n aria-label={clearLabel}\n className={cn(\n \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\",\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-0\",\n iconStyles.clearRight,\n )}\n >\n <XIcon size={iconStyles.iconSize} />\n </ComboboxBase.Clear>\n\n <ComboboxBase.Trigger\n aria-label={showOptionsLabel}\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer text-kumo-subtle\",\n \"m-0 bg-transparent p-0\", // Reset Stratus global button styles\n iconStyles.caretRight,\n )}\n >\n <ComboboxBase.Icon>\n <CaretDownIcon size={iconStyles.iconSize} className=\"fill-current\" />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n </div>\n );\n}\n\nfunction Item({\n children,\n className,\n ...props\n}: ComboboxBase.Item.Props & { className?: string }) {\n return (\n <ComboboxBase.Item\n {...props}\n className={cn(\n \"group mx-1.5 grid grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base\",\n \"cursor-pointer data-highlighted:bg-kumo-tint\",\n // Disabled rows: muted text, no pointer, suppress highlight bg even\n // when keyboard nav lands on them. Base UI sets `data-disabled` on\n // the element when the `disabled` prop is true.\n \"data-[disabled]:cursor-not-allowed data-[disabled]:text-kumo-subtle data-[disabled]:opacity-60 data-[disabled]:data-highlighted:bg-transparent\",\n className,\n )}\n >\n <div className=\"col-start-1\">{children}</div>\n <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n <CheckIcon />\n </ComboboxBase.ItemIndicator>\n </ComboboxBase.Item>\n );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n return (\n <ComboboxBase.Empty\n {...props}\n className={cn(\n \"mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n )}\n children={props.children ?? \"No labels found.\"}\n />\n );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n return (\n <ComboboxBase.Input\n {...props}\n className={cn(\n inputVariants(),\n \"mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2\",\n props.className,\n )}\n />\n );\n}\n\nfunction List({\n className,\n ...props\n}: ComboboxBase.List.Props & { className?: string }) {\n return (\n <ComboboxBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n return (\n <ComboboxBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-subtle\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n return (\n <ComboboxBase.Group\n {...props}\n className=\"border-t border-kumo-hairline mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Chip({\n removeLabel = \"Remove\",\n ...props\n}: ComboboxBase.Chip.Props & {\n /** Accessible label for the chip remove button. Pass a translated string for i18n.\n * @default \"Remove\"\n */\n removeLabel?: string;\n}) {\n return (\n <ComboboxBase.Chip\n {...props}\n className={cn(\n \"flex items-center gap-2.5\", // Layout\n \"h-6 pl-2 pr-[3px]\", // Dimensions\n \"rounded-sm ring-1 ring-kumo-hairline\", // Border\n \"bg-kumo-overlay\", // Background\n \"text-sm\", // Typography\n )}\n >\n {props.children}\n <ComboboxBase.ChipRemove\n aria-label={removeLabel}\n className={cn(\n \"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\",\n \"bg-transparent flex\",\n )}\n >\n <XIcon size={10} />\n </ComboboxBase.ChipRemove>\n </ComboboxBase.Chip>\n );\n}\n\n// Map size to min-height class for TriggerMultipleWithInput\nconst sizeToMinHeight: Record<KumoComboboxSize, string> = {\n xs: \"min-h-5\",\n sm: \"min-h-6.5\",\n base: \"min-h-9\",\n lg: \"min-h-10\",\n};\n\nfunction TriggerMultipleWithInput<ValueType>({\n placeholder,\n renderItem,\n className,\n inputSide = \"right\",\n value: controlledValue,\n}: {\n placeholder?: string;\n renderItem: (value: ValueType) => React.ReactNode;\n className?: string;\n inputSide?: \"right\" | \"top\";\n /** Optional controlled value for rendering chips (use when pre-selecting values) */\n value?: ValueType[];\n}) {\n const { size, hasError } = useContext(ComboboxContext);\n // Determine which value to use for rendering chips\n const chipsToRender = controlledValue;\n\n return (\n <ComboboxBase.Chips\n className={cn(\n inputVariants({ size, variant: hasError ? \"error\" : \"default\" }),\n \"flex flex-col\",\n \"gap-1 py-1 px-1.5\",\n sizeToMinHeight[size],\n \"h-auto\",\n \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n className,\n )}\n >\n {inputSide === \"top\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"w-full px-2 py-1 border-0 bg-inherit\"\n />\n )}\n {/* Chips container */}\n <div className=\"flex items-center flex-wrap gap-1.5 flex-1\">\n {/* Render chips from controlled value if provided */}\n {chipsToRender !== undefined &&\n chipsToRender.length > 0 &&\n chipsToRender.map((item) => renderItem(item))}\n {/* Also render from BaseUI's internal value for user selections */}\n <ComboboxBase.Value>\n {(internalValue: ValueType[]) => {\n // Skip rendering if using controlled value (to avoid duplicates)\n if (chipsToRender !== undefined) return null;\n return (\n <Fragment>\n {internalValue.map((item) => renderItem(item))}\n </Fragment>\n );\n }}\n </ComboboxBase.Value>\n {inputSide === \"right\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"min-w-[100px] flex-1 px-2 py-1 border-0 bg-inherit\"\n />\n )}\n </div>\n </ComboboxBase.Chips>\n );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n * <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n // Helper components\n Content,\n TriggerValue,\n TriggerInput,\n TriggerMultipleWithInput,\n\n // Slightly modified BaseUI\n Chip,\n Item,\n\n // Styled BaseUI\n Input,\n Empty,\n GroupLabel,\n Group,\n\n // Styled BaseUI\n List,\n\n // BaseUI\n Collection: ComboboxBase.Collection,\n\n Trigger: ComboboxBase.Trigger,\n Value: ComboboxBase.Value,\n Icon: ComboboxBase.Icon,\n});\n"],"names":["KUMO_INPUT_VARIANTS","ComboboxContext","createContext","Root","label","required","labelTooltip","description","error","children","size","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","containerProp","contextContainer","usePortalContainer","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","triggerValueIconStyles","TriggerValue","hasError","useContext","iconStyles","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","triggerInputIconStyles","TriggerInput","clearLabel","showOptionsLabel","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","List","ComboboxBase.List","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","removeLabel","ComboboxBase.Chip","ComboboxBase.ChipRemove","sizeToMinHeight","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.Collection"],"mappings":"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"}