ixia-ui-react 1.8.0 → 2.0.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 (270) hide show
  1. package/README.md +24 -1
  2. package/dist/accordion/index.d.ts +41 -0
  3. package/dist/accordion/index.js +142 -0
  4. package/dist/accordion/index.js.map +1 -0
  5. package/dist/alert/index.d.ts +22 -0
  6. package/dist/alert/index.js +1 -0
  7. package/dist/alert-Dcu9R8CY.js +73 -0
  8. package/dist/alert-Dcu9R8CY.js.map +1 -0
  9. package/dist/alert-dialog/index.d.ts +39 -0
  10. package/dist/alert-dialog/index.js +134 -0
  11. package/dist/alert-dialog/index.js.map +1 -0
  12. package/dist/autocomplete/index.d.ts +2 -0
  13. package/dist/autocomplete/index.js +1 -0
  14. package/dist/autocomplete-BfpWVO1l.js +169 -0
  15. package/dist/autocomplete-BfpWVO1l.js.map +1 -0
  16. package/dist/avatar/index.d.ts +2 -0
  17. package/dist/avatar/index.js +1 -0
  18. package/dist/avatar-Bp4gZh21.js +93 -0
  19. package/dist/avatar-Bp4gZh21.js.map +1 -0
  20. package/dist/badge/index.d.ts +2 -0
  21. package/dist/badge/index.js +1 -0
  22. package/dist/badge-Cl-9WTW-.js +160 -0
  23. package/dist/badge-Cl-9WTW-.js.map +1 -0
  24. package/dist/bento-box/index.d.ts +30 -0
  25. package/dist/bento-box/index.js +103 -0
  26. package/dist/bento-box/index.js.map +1 -0
  27. package/dist/breadcrumb/index.d.ts +18 -0
  28. package/dist/breadcrumb/index.js +58 -0
  29. package/dist/breadcrumb/index.js.map +1 -0
  30. package/dist/button/index.d.ts +3 -0
  31. package/dist/button/index.js +1 -0
  32. package/dist/button-BpUC-R1J.js +307 -0
  33. package/dist/button-BpUC-R1J.js.map +1 -0
  34. package/dist/button-group/index.d.ts +2 -0
  35. package/dist/button-group/index.js +1 -0
  36. package/dist/button-group-7azbqlcO.js +269 -0
  37. package/dist/button-group-7azbqlcO.js.map +1 -0
  38. package/dist/button.types-BFKrBCGd.d.ts +10 -0
  39. package/dist/calendar/index.d.ts +63 -0
  40. package/dist/calendar/index.js +292 -0
  41. package/dist/calendar/index.js.map +1 -0
  42. package/dist/chart/index.d.ts +87 -0
  43. package/dist/chart/index.js +262 -0
  44. package/dist/chart/index.js.map +1 -0
  45. package/dist/checkbox/index.d.ts +2 -0
  46. package/dist/checkbox/index.js +1 -0
  47. package/dist/checkbox-BuUZ1Lly.js +54 -0
  48. package/dist/checkbox-BuUZ1Lly.js.map +1 -0
  49. package/dist/checkbox-group/index.d.ts +6 -0
  50. package/dist/checkbox-group/index.js +17 -0
  51. package/dist/checkbox-group/index.js.map +1 -0
  52. package/dist/cn-BDi0DfT5.js +29 -0
  53. package/dist/cn-BDi0DfT5.js.map +1 -0
  54. package/dist/code-block/index.d.ts +50 -0
  55. package/dist/code-block/index.js +208 -0
  56. package/dist/code-block/index.js.map +1 -0
  57. package/dist/collapsible/index.d.ts +2 -0
  58. package/dist/collapsible/index.js +1 -0
  59. package/dist/collapsible-BVqrh0Q0.js +44 -0
  60. package/dist/collapsible-BVqrh0Q0.js.map +1 -0
  61. package/dist/color-channel-slider/index.d.ts +2 -0
  62. package/dist/color-channel-slider/index.js +1 -0
  63. package/dist/color-channel-slider-h8mUPJ35.js +70 -0
  64. package/dist/color-channel-slider-h8mUPJ35.js.map +1 -0
  65. package/dist/color-picker/index.d.ts +137 -0
  66. package/dist/color-picker/index.js +621 -0
  67. package/dist/color-picker/index.js.map +1 -0
  68. package/dist/combobox/index.d.ts +64 -0
  69. package/dist/combobox/index.js +289 -0
  70. package/dist/combobox/index.js.map +1 -0
  71. package/dist/context-menu/index.d.ts +49 -0
  72. package/dist/context-menu/index.js +166 -0
  73. package/dist/context-menu/index.js.map +1 -0
  74. package/dist/dialog/index.d.ts +36 -0
  75. package/dist/dialog/index.js +119 -0
  76. package/dist/dialog/index.js.map +1 -0
  77. package/dist/drawer/index.d.ts +31 -0
  78. package/dist/drawer/index.js +95 -0
  79. package/dist/drawer/index.js.map +1 -0
  80. package/dist/dropzone/index.d.ts +70 -0
  81. package/dist/dropzone/index.js +479 -0
  82. package/dist/dropzone/index.js.map +1 -0
  83. package/dist/field/index.d.ts +2 -0
  84. package/dist/field/index.js +1 -0
  85. package/dist/field-DTL7eA5y.js +254 -0
  86. package/dist/field-DTL7eA5y.js.map +1 -0
  87. package/dist/form/index.d.ts +220 -0
  88. package/dist/form/index.js +3 -0
  89. package/dist/form-BxMg796f.js +192 -0
  90. package/dist/form-BxMg796f.js.map +1 -0
  91. package/dist/has-single-element-child-DLGI0Dh2.js +12 -0
  92. package/dist/has-single-element-child-DLGI0Dh2.js.map +1 -0
  93. package/dist/hooks/index.d.ts +26 -0
  94. package/dist/hooks/index.js +1 -0
  95. package/dist/hooks-DUm-q_ig.js +68 -0
  96. package/dist/hooks-DUm-q_ig.js.map +1 -0
  97. package/dist/icon/index.d.ts +2 -0
  98. package/dist/icon/index.js +1 -0
  99. package/dist/icon-D3JWfCa2.js +85 -0
  100. package/dist/icon-D3JWfCa2.js.map +1 -0
  101. package/dist/icon-container/index.d.ts +10 -0
  102. package/dist/icon-container/index.js +64 -0
  103. package/dist/icon-container/index.js.map +1 -0
  104. package/dist/index-0ZQzIKoE.d.ts +11 -0
  105. package/dist/index-B3MK1QYh.d.ts +11 -0
  106. package/dist/index-BJVMIPq4.d.ts +54 -0
  107. package/dist/index-BsV-u_jc.d.ts +4 -0
  108. package/dist/index-BygR7cUT.d.ts +22 -0
  109. package/dist/index-BzTOLSgZ.d.ts +9 -0
  110. package/dist/index-C15xiG9O.d.ts +14 -0
  111. package/dist/index-C2zco6-C.d.ts +15 -0
  112. package/dist/index-CIDOd4Z8.d.ts +56 -0
  113. package/dist/index-CQti9gFb.d.ts +49 -0
  114. package/dist/index-CiE-Rqit.d.ts +70 -0
  115. package/dist/index-D1kkOg9k.d.ts +14 -0
  116. package/dist/index-DLfdAked.d.ts +34 -0
  117. package/dist/index-DMaW_XF1.d.ts +24 -0
  118. package/dist/index-Db_QGr6S.d.ts +5 -0
  119. package/dist/index-DdFxZ3Xr.d.ts +22 -0
  120. package/dist/index-DfNHJF0t.d.ts +33 -0
  121. package/dist/index-DyQYoAUf.d.ts +29 -0
  122. package/dist/index-N2CBSUDu.d.ts +14 -0
  123. package/dist/index-PuhTRMce.d.ts +11 -0
  124. package/dist/index-Wb_tILYa.d.ts +24 -0
  125. package/dist/index-bVyqfhJS.d.ts +4 -0
  126. package/dist/index-x4f8gnaI.d.ts +15 -0
  127. package/dist/input/index.d.ts +3 -0
  128. package/dist/input/index.js +1 -0
  129. package/dist/input-Laj6dwtK.js +179 -0
  130. package/dist/input-Laj6dwtK.js.map +1 -0
  131. package/dist/input-group/index.d.ts +2 -0
  132. package/dist/input-group/index.js +1 -0
  133. package/dist/input-group-CgdazGrY.js +111 -0
  134. package/dist/input-group-CgdazGrY.js.map +1 -0
  135. package/dist/input-otp/index.d.ts +13 -0
  136. package/dist/input-otp/index.js +44 -0
  137. package/dist/input-otp/index.js.map +1 -0
  138. package/dist/input.types-816rEVWU.d.ts +20 -0
  139. package/dist/input.types-D0gyoaQv.js +48 -0
  140. package/dist/input.types-D0gyoaQv.js.map +1 -0
  141. package/dist/kbd/index.d.ts +9 -0
  142. package/dist/kbd/index.js +25 -0
  143. package/dist/kbd/index.js.map +1 -0
  144. package/dist/label/index.d.ts +8 -0
  145. package/dist/label/index.js +1 -0
  146. package/dist/label-BgpayDvN.js +27 -0
  147. package/dist/label-BgpayDvN.js.map +1 -0
  148. package/dist/layer-tree/index.d.ts +728 -0
  149. package/dist/layer-tree/index.js +685 -0
  150. package/dist/layer-tree/index.js.map +1 -0
  151. package/dist/map/google/index.d.ts +143 -0
  152. package/dist/map/google/index.js +445 -0
  153. package/dist/map/google/index.js.map +1 -0
  154. package/dist/map/index.d.ts +94 -0
  155. package/dist/map/index.js +208 -0
  156. package/dist/map/index.js.map +1 -0
  157. package/dist/map.context-Dw1D7E8m.js +11 -0
  158. package/dist/map.context-Dw1D7E8m.js.map +1 -0
  159. package/dist/menu/index.d.ts +2 -0
  160. package/dist/menu/index.js +1 -0
  161. package/dist/menu-sf13cnGp.js +173 -0
  162. package/dist/menu-sf13cnGp.js.map +1 -0
  163. package/dist/menu-tone-DWBEHoX2.js +22 -0
  164. package/dist/menu-tone-DWBEHoX2.js.map +1 -0
  165. package/dist/meter/index.d.ts +2 -0
  166. package/dist/meter/index.js +1 -0
  167. package/dist/meter-HD5taq57.js +116 -0
  168. package/dist/meter-HD5taq57.js.map +1 -0
  169. package/dist/nav-bar/index.d.ts +25 -0
  170. package/dist/nav-bar/index.js +133 -0
  171. package/dist/nav-bar/index.js.map +1 -0
  172. package/dist/navigation-menu/index.d.ts +43 -0
  173. package/dist/navigation-menu/index.js +176 -0
  174. package/dist/navigation-menu/index.js.map +1 -0
  175. package/dist/number-field/index.d.ts +14 -0
  176. package/dist/number-field/index.js +116 -0
  177. package/dist/number-field/index.js.map +1 -0
  178. package/dist/popover/index.d.ts +2 -0
  179. package/dist/popover/index.js +1 -0
  180. package/dist/popover-B1s4xXrX.js +114 -0
  181. package/dist/popover-B1s4xXrX.js.map +1 -0
  182. package/dist/preview-card/index.d.ts +13 -0
  183. package/dist/preview-card/index.js +35 -0
  184. package/dist/preview-card/index.js.map +1 -0
  185. package/dist/profile/index.d.ts +21 -0
  186. package/dist/profile/index.js +52 -0
  187. package/dist/profile/index.js.map +1 -0
  188. package/dist/progress/index.d.ts +23 -0
  189. package/dist/progress/index.js +97 -0
  190. package/dist/progress/index.js.map +1 -0
  191. package/dist/radar-ping/index.d.ts +11 -0
  192. package/dist/radar-ping/index.js +49 -0
  193. package/dist/radar-ping/index.js.map +1 -0
  194. package/dist/radio-group/index.d.ts +2 -0
  195. package/dist/radio-group/index.js +1 -0
  196. package/dist/radio-group-Dj43u35Z.js +47 -0
  197. package/dist/radio-group-Dj43u35Z.js.map +1 -0
  198. package/dist/resizeable/index.d.ts +11 -0
  199. package/dist/resizeable/index.js +31 -0
  200. package/dist/resizeable/index.js.map +1 -0
  201. package/dist/scroll-area/index.d.ts +11 -0
  202. package/dist/scroll-area/index.js +51 -0
  203. package/dist/scroll-area/index.js.map +1 -0
  204. package/dist/select/index.d.ts +2 -0
  205. package/dist/select/index.js +1 -0
  206. package/dist/select-DncJXYim.js +159 -0
  207. package/dist/select-DncJXYim.js.map +1 -0
  208. package/dist/separator/index.d.ts +2 -0
  209. package/dist/separator/index.js +1 -0
  210. package/dist/separator-DgIQp1cB.js +97 -0
  211. package/dist/separator-DgIQp1cB.js.map +1 -0
  212. package/dist/sidebar/index.d.ts +80 -0
  213. package/dist/sidebar/index.js +334 -0
  214. package/dist/sidebar/index.js.map +1 -0
  215. package/dist/site-header/index.d.ts +22 -0
  216. package/dist/site-header/index.js +55 -0
  217. package/dist/site-header/index.js.map +1 -0
  218. package/dist/skeleton/index.d.ts +4 -0
  219. package/dist/skeleton/index.js +1 -0
  220. package/dist/skeleton-DSG3FWby.js +13 -0
  221. package/dist/skeleton-DSG3FWby.js.map +1 -0
  222. package/dist/slider/index.d.ts +2 -0
  223. package/dist/slider/index.js +1 -0
  224. package/dist/slider-D_XlV4OW.js +114 -0
  225. package/dist/slider-D_XlV4OW.js.map +1 -0
  226. package/dist/slider-group/index.d.ts +46 -0
  227. package/dist/slider-group/index.js +198 -0
  228. package/dist/slider-group/index.js.map +1 -0
  229. package/dist/styles.css +4 -1
  230. package/dist/switch/index.d.ts +2 -0
  231. package/dist/switch/index.js +1 -0
  232. package/dist/switch-DXHixGHe.js +23 -0
  233. package/dist/switch-DXHixGHe.js.map +1 -0
  234. package/dist/table/index.d.ts +920 -0
  235. package/dist/table/index.js +1544 -0
  236. package/dist/table/index.js.map +1 -0
  237. package/dist/tabs/index.d.ts +2 -0
  238. package/dist/tabs/index.js +1 -0
  239. package/dist/tabs-DTC7coap.js +270 -0
  240. package/dist/tabs-DTC7coap.js.map +1 -0
  241. package/dist/text-area/index.d.ts +2 -0
  242. package/dist/text-area/index.js +1 -0
  243. package/dist/text-area-H6HjKnv_.js +50 -0
  244. package/dist/text-area-H6HjKnv_.js.map +1 -0
  245. package/dist/toast/index.d.ts +65 -0
  246. package/dist/toast/index.js +216 -0
  247. package/dist/toast/index.js.map +1 -0
  248. package/dist/toggle/index.d.ts +2 -0
  249. package/dist/toggle/index.js +1 -0
  250. package/dist/toggle-ZT9thVmz.js +73 -0
  251. package/dist/toggle-ZT9thVmz.js.map +1 -0
  252. package/dist/toggle-group/index.d.ts +10 -0
  253. package/dist/toggle-group/index.js +63 -0
  254. package/dist/toggle-group/index.js.map +1 -0
  255. package/dist/toggle-group-context-CBNZEf1I.js +6 -0
  256. package/dist/toggle-group-context-CBNZEf1I.js.map +1 -0
  257. package/dist/tooltip/index.d.ts +18 -0
  258. package/dist/tooltip/index.js +1 -0
  259. package/dist/tooltip-B6z3tDbW.js +41 -0
  260. package/dist/tooltip-B6z3tDbW.js.map +1 -0
  261. package/dist/trim-text-children-CQRFg2fL.js +33 -0
  262. package/dist/trim-text-children-CQRFg2fL.js.map +1 -0
  263. package/dist/utils/index.d.ts +4 -0
  264. package/dist/utils/index.js +3 -0
  265. package/dist/utils-BI2x7nW5.js +5 -0
  266. package/dist/utils-BI2x7nW5.js.map +1 -0
  267. package/package.json +100 -31
  268. package/dist/index.d.ts +0 -8000
  269. package/dist/index.js +0 -17274
  270. package/dist/index.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["ColorPicker","FIRST_VALUE_INDEX","getSliderValue","ColorPickerRoot"],"sources":["../../src/components/color-picker/color-picker.types.ts","../../src/components/color-picker/color-picker.tsx","../../src/components/color-picker/color-picker-area.tsx","../../src/components/color-picker/color-picker-group.tsx","../../src/components/color-channel-slider/color-channel-slider.utils.ts","../../src/components/color-picker/color-picker-hue-slider.tsx","../../src/components/color-picker/color-picker-input.tsx","../../src/components/color-picker/color-picker-label.tsx","../../src/components/color-picker/color-picker-lightness-slider.tsx","../../src/components/color-picker/color-picker-palette-add.tsx","../../src/components/color-picker/color-picker-palette-limit.tsx","../../src/components/color-picker/color-picker-palette-swatch.tsx","../../src/components/color-picker/color-picker-palette-list.tsx","../../src/components/color-picker/color-picker-row.tsx","../../src/components/color-picker/color-picker-transparency-slider.tsx","../../src/components/color-picker/color-picker-value-type.tsx","../../src/components/color-picker/index.ts"],"sourcesContent":["import chroma from 'chroma-js'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport type { ColorChannelSlider } from '../color-channel-slider'\nimport type { InputGroup } from '../input-group'\nimport type { SelectTrigger } from '../select'\n\ninterface ColorPickerContextType {\n color: chroma.Color\n setColor: (color: chroma.Color) => void\n hue: number\n saturation: number\n value: number\n alpha: number\n setHue: (hue: number) => void\n setSaturation: (saturation: number) => void\n setValue: (value: number) => void\n setSaturationValue: (saturation: number, value: number) => void\n setAlpha: (alpha: number) => void\n setLightness: (lightness: number) => void\n valueType: ValueType\n setValueType: (valueType: ValueType) => void\n palette: chroma.Color[]\n setPalette: (palette: chroma.Color[]) => void\n addPaletteColor: (color: chroma.Color) => void\n paletteLimit?: number\n}\n\ninterface ColorPickerState {\n hue: number\n saturation: number\n value: number\n alpha: number\n valueType: ValueType\n palette: chroma.Color[]\n}\n\ntype ColorPickerAction =\n | { type: 'set_color'; color: chroma.Color }\n | { type: 'set_hue'; hue: number }\n | { type: 'set_saturation'; saturation: number }\n | { type: 'set_value'; value: number }\n | { type: 'set_saturation_value'; saturation: number; value: number }\n | { type: 'set_alpha'; alpha: number }\n | { type: 'set_lightness'; lightness: number }\n | { type: 'set_value_type'; valueType: ValueType }\n | { type: 'set_palette'; palette: chroma.Color[] }\n | { type: 'add_palette_color'; color: chroma.Color }\n\ntype ColorPickerProps = React.ComponentProps<'div'> &\n VariantProps<typeof colorPickerVariants> & {\n value?: string\n onValueChange?: (color: string) => void\n defaultColor?: string\n palette?: string[]\n defaultPalette?: string[]\n onPaletteChange?: (palette: string[]) => void\n paletteLimit?: number\n defaultValueType?: ValueTypeValue\n }\n\nconst colorPickerVariants = cva('flex flex-col space-y-sm', {\n defaultVariants: {\n variant: 'elevated',\n },\n variants: {\n variant: {\n elevated: 'rounded-xl bg-surface p-md shadow-2xs',\n ghost: '',\n outline: 'rounded-xl border border-border p-md',\n },\n },\n }),\n colorPickerSwatchVariants = cva(\n 'overflow-hidden border border-border hover:cursor-pointer focus:outline-2 focus:outline-offset-2',\n {\n defaultVariants: {\n size: 'medium',\n },\n variants: {\n size: {\n large: 'size-lg rounded-lg',\n medium: 'size-md rounded-md',\n small: 'size-sm rounded-sm',\n },\n },\n },\n ),\n RGB_CHANNEL_COUNT = 3,\n DECIMAL_RADIX = 10,\n VALUE_TYPES: ValueType[] = [\n {\n getValue: (color: chroma.Color) => color.rgb(),\n label: 'RGB',\n parseValue: (value: string) => {\n const rgbChannels = value\n .split(',')\n .map((channelText) => parseInt(channelText.trim(), DECIMAL_RADIX))\n if (\n rgbChannels.length === RGB_CHANNEL_COUNT &&\n rgbChannels.every((channel) => !Number.isNaN(channel))\n ) {\n const [red, green, blue] = rgbChannels\n return chroma.rgb(red, green, blue)\n }\n return undefined\n },\n value: 'rgb',\n },\n {\n getValue: (color: chroma.Color) => color.css(),\n label: 'CSS',\n parseValue: (value: string) => {\n try {\n return chroma(value)\n } catch {\n return undefined\n }\n },\n value: 'css',\n },\n {\n getValue: (color: chroma.Color) => color.hex('rgb'),\n label: 'HEX',\n parseValue: (value: string) => {\n try {\n return chroma(value)\n } catch {\n return undefined\n }\n },\n value: 'hex',\n },\n {\n getValue: (color: chroma.Color) => color.hsl(),\n label: 'HSL',\n parseValue: (value: string) => {\n try {\n return chroma(value)\n } catch {\n return undefined\n }\n },\n value: 'hsl',\n },\n {\n getValue: (color: chroma.Color) => color.hsv(),\n label: 'HSV',\n parseValue: (value: string) => {\n try {\n return chroma(value)\n } catch {\n return undefined\n }\n },\n value: 'hsv',\n },\n ]\ninterface ValueType {\n label: string\n value: string\n getValue: (color: chroma.Color) => string | number[]\n parseValue: (value: string) => chroma.Color | undefined\n}\n\ntype ValueTypeValue = 'rgb' | 'css' | 'hex' | 'hsl' | 'hsv'\n\ntype ColorPickerInputProps = React.ComponentProps<typeof InputGroup> & {\n showPopover?: boolean\n showTransparencyField?: boolean\n}\ntype ColorPickerAreaProps = React.ComponentProps<'div'>\ntype ColorPickerHueSliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>\ntype ColorPickerLightnessSliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>\ntype ColorPickerTransparencySliderProps = Partial<React.ComponentProps<typeof ColorChannelSlider>>\ntype ColorPickerValueTypeProps = React.ComponentProps<typeof SelectTrigger>\ntype ColorPickerRowProps = React.ComponentProps<'div'>\ntype ColorPickerGroupProps = React.ComponentProps<'div'>\ntype ColorPickerLabelProps = React.ComponentProps<'span'>\ntype ColorPickerPaletteListChild = (props: { color: string; index: number }) => React.ReactNode\n\ntype ColorPickerPaletteListProps = React.ComponentProps<'div'>\ntype ColorPickerPaletteSwatchProps = Omit<React.ComponentProps<'button'>, 'color'> &\n VariantProps<typeof colorPickerSwatchVariants> & {\n color: string\n }\ntype ColorPickerPaletteAddProps = React.ComponentProps<'button'>\ntype ColorPickerPaletteLimitProps = React.ComponentProps<'span'>\n\nexport type {\n ColorPickerContextType,\n ColorPickerState,\n ColorPickerAction,\n ColorPickerProps,\n ValueType,\n ValueTypeValue,\n ColorPickerInputProps,\n ColorPickerAreaProps,\n ColorPickerHueSliderProps,\n ColorPickerLightnessSliderProps,\n ColorPickerTransparencySliderProps,\n ColorPickerValueTypeProps,\n ColorPickerRowProps,\n ColorPickerGroupProps,\n ColorPickerLabelProps,\n ColorPickerPaletteListChild,\n ColorPickerPaletteListProps,\n ColorPickerPaletteSwatchProps,\n ColorPickerPaletteAddProps,\n ColorPickerPaletteLimitProps,\n}\nexport { colorPickerVariants, colorPickerSwatchVariants, VALUE_TYPES }\n","import chroma from 'chroma-js'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { colorPickerVariants, VALUE_TYPES } from './color-picker.types'\nimport type {\n ColorPickerAction,\n ColorPickerContextType,\n ColorPickerProps,\n ColorPickerState,\n} from './color-picker.types'\n\nconst MIN_COLOR_CHANNEL = 0,\n FIRST_VALUE_TYPE_INDEX = 0,\n ColorPickerContext = React.createContext<ColorPickerContextType | undefined>(undefined),\n normalizeToColor = (value: string | chroma.Color, fallback: chroma.Color): chroma.Color => {\n try {\n if (typeof value === 'string') {\n return chroma(value.trim())\n }\n\n return chroma(value)\n } catch {\n return fallback\n }\n },\n getValidChannel = (channel: number | undefined, fallback: number): number => {\n if (channel === undefined || Number.isNaN(channel)) {\n return fallback\n }\n return channel\n },\n updateColorState = (\n { saturation: previousSaturation, ...state }: ColorPickerState,\n color: chroma.Color,\n ): ColorPickerState => {\n const [nextHue, nextSaturation, nextValue] = color.hsv()\n let saturation = previousSaturation\n if (nextValue !== MIN_COLOR_CHANNEL) {\n saturation = getValidChannel(nextSaturation, previousSaturation)\n }\n\n return {\n ...state,\n alpha: color.alpha(),\n hue: getValidChannel(nextHue, state.hue),\n saturation,\n value: nextValue,\n }\n },\n updateSimpleState = (state: ColorPickerState, action: ColorPickerAction): ColorPickerState => {\n switch (action.type) {\n case 'set_hue': {\n return { ...state, hue: action.hue }\n }\n case 'set_saturation': {\n return { ...state, saturation: action.saturation }\n }\n case 'set_value': {\n return { ...state, value: action.value }\n }\n case 'set_saturation_value': {\n return { ...state, saturation: action.saturation, value: action.value }\n }\n case 'set_alpha': {\n return { ...state, alpha: action.alpha }\n }\n case 'set_lightness': {\n return { ...state, value: action.lightness }\n }\n case 'set_value_type': {\n return { ...state, valueType: action.valueType }\n }\n default: {\n return state\n }\n }\n },\n colorPickerReducer = (state: ColorPickerState, action: ColorPickerAction): ColorPickerState => {\n switch (action.type) {\n case 'set_color': {\n return updateColorState(state, action.color)\n }\n case 'set_palette': {\n return { ...state, palette: action.palette }\n }\n case 'add_palette_color': {\n return { ...state, palette: [...state.palette, action.color] }\n }\n default: {\n return updateSimpleState(state, action)\n }\n }\n }\n\nfunction ColorPicker({\n variant,\n value: controlledValue,\n defaultColor,\n palette: controlledPalette,\n defaultPalette,\n onPaletteChange,\n paletteLimit,\n defaultValueType,\n onValueChange,\n className,\n ref,\n ...props\n}: ColorPickerProps) {\n const [state, dispatch] = React.useReducer(\n colorPickerReducer,\n { controlledPalette, controlledValue, defaultColor, defaultPalette, defaultValueType },\n ({\n controlledValue: initialControlledValue,\n controlledPalette: initialControlledPalette,\n defaultColor: initialDefaultColor,\n defaultPalette: initialDefaultPalette,\n defaultValueType: initialDefaultValueType,\n }): ColorPickerState => {\n const initialColor = normalizeToColor(\n initialControlledValue ?? initialDefaultColor ?? '#ffffff',\n chroma('#ffffff'),\n ),\n [initialHue, initialSaturation, initialValue] = initialColor.hsv()\n\n return {\n alpha: initialColor.alpha(),\n hue: getValidChannel(initialHue, MIN_COLOR_CHANNEL),\n palette: (initialControlledPalette ?? initialDefaultPalette ?? []).map((colorOption) =>\n chroma(colorOption),\n ),\n saturation: getValidChannel(initialSaturation, MIN_COLOR_CHANNEL),\n value: initialValue,\n valueType:\n VALUE_TYPES.find((typeOption) => typeOption.value === initialDefaultValueType) ??\n VALUE_TYPES[FIRST_VALUE_TYPE_INDEX],\n }\n },\n ),\n {\n hue: internalHue,\n saturation: internalSaturation,\n value: internalValue,\n alpha: internalAlpha,\n valueType,\n palette,\n } = state,\n color = chroma.hsv(internalHue, internalSaturation, internalValue).alpha(internalAlpha),\n hue = internalHue,\n saturation = internalSaturation,\n value = internalValue,\n alpha = internalAlpha,\n lastSyncedColorRef = React.useRef<string | undefined>(undefined),\n lastSyncedPaletteRef = React.useRef<string | undefined>(undefined),\n setColor = (nextColor: chroma.Color) => {\n dispatch({ color: nextColor, type: 'set_color' })\n onValueChange?.(nextColor.hex())\n },\n setHue = (nextHue: number) => {\n dispatch({ hue: nextHue, type: 'set_hue' })\n onValueChange?.(chroma.hsv(nextHue, saturation, value).alpha(alpha).hex())\n },\n setSaturation = (nextSaturation: number) => {\n dispatch({ saturation: nextSaturation, type: 'set_saturation' })\n onValueChange?.(chroma.hsv(hue, nextSaturation, value).alpha(alpha).hex())\n },\n setValue = (nextValue: number) => {\n dispatch({ type: 'set_value', value: nextValue })\n onValueChange?.(chroma.hsv(hue, saturation, nextValue).alpha(alpha).hex())\n },\n setSaturationValue = (nextSaturation: number, nextValue: number) => {\n dispatch({ saturation: nextSaturation, type: 'set_saturation_value', value: nextValue })\n onValueChange?.(chroma.hsv(hue, nextSaturation, nextValue).alpha(alpha).hex())\n },\n setAlpha = (nextAlpha: number) => setColor(color.alpha(nextAlpha)),\n setLightness = (nextLightness: number) => setColor(color.set('hsl.l', nextLightness)),\n setValueType = (nextValueType: ColorPickerState['valueType']) =>\n dispatch({ type: 'set_value_type', valueType: nextValueType }),\n setPalette = (nextPalette: chroma.Color[]) => {\n lastSyncedPaletteRef.current = nextPalette\n .map((paletteColor) => paletteColor.hex('rgba'))\n .join('|')\n dispatch({ palette: nextPalette, type: 'set_palette' })\n onPaletteChange?.(nextPalette.map((paletteColor) => paletteColor.hex()))\n },\n addPaletteColor = (nextColor: chroma.Color) => {\n if (paletteLimit && palette.length >= paletteLimit) {\n return\n }\n\n const nextPalette = [...palette, nextColor]\n lastSyncedPaletteRef.current = nextPalette\n .map((paletteColor) => paletteColor.hex('rgba'))\n .join('|')\n dispatch({ color: nextColor, type: 'add_palette_color' })\n onPaletteChange?.(nextPalette.map((paletteColor) => paletteColor.hex()))\n }\n\n React.useEffect(() => {\n if (controlledValue === undefined) {\n return\n }\n\n const nextColor = normalizeToColor(controlledValue, color),\n nextKey = nextColor.hex('rgba')\n\n if (nextKey === lastSyncedColorRef.current) {\n return\n }\n\n lastSyncedColorRef.current = nextKey\n\n if (nextKey !== color.hex('rgba')) {\n dispatch({ color: nextColor, type: 'set_color' })\n }\n }, [controlledValue, color])\n\n React.useEffect(() => {\n if (controlledPalette === undefined) {\n return\n }\n\n const parsedPalette = controlledPalette.map((colorOption) => chroma(colorOption)),\n nextKey = parsedPalette.map((paletteColor) => paletteColor.hex('rgba')).join('|')\n\n if (nextKey === lastSyncedPaletteRef.current) {\n return\n }\n\n lastSyncedPaletteRef.current = nextKey\n dispatch({ palette: parsedPalette, type: 'set_palette' })\n }, [controlledPalette])\n\n return (\n <ColorPickerContext.Provider\n value={{\n addPaletteColor,\n alpha,\n color,\n hue,\n palette,\n paletteLimit,\n saturation,\n setAlpha,\n setColor,\n setHue,\n setLightness,\n setPalette,\n setSaturation,\n setSaturationValue,\n setValue,\n setValueType,\n value,\n valueType,\n }}\n >\n <div className={cn(colorPickerVariants({ variant }), className)} ref={ref} {...props} />\n </ColorPickerContext.Provider>\n )\n}\n\nfunction useColorPicker() {\n const context = React.useContext(ColorPickerContext)\n\n if (!context) {\n throw new Error('useColorPicker must be used within a ColorPicker')\n }\n\n return context\n}\n\nexport { ColorPicker, useColorPicker }\n","import chroma from 'chroma-js'\n\nimport { cn } from '@/utils/cn'\n\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerAreaProps } from './color-picker.types'\n\nconst PERCENTAGE_SCALE = 100,\n MIN_NORMALIZED_VALUE = 0,\n MAX_NORMALIZED_VALUE = 1\n\nexport function ColorPickerArea({ className, ref, ...props }: ColorPickerAreaProps) {\n const { color, hue, saturation, value, setSaturationValue } = useColorPicker(),\n hueColor = chroma.hsv(hue, MAX_NORMALIZED_VALUE, MAX_NORMALIZED_VALUE).hex(),\n updateColor = (event: React.PointerEvent<HTMLDivElement>) => {\n const bounds = event.currentTarget.getBoundingClientRect(),\n nextSaturation = Math.min(\n Math.max((event.clientX - bounds.left) / bounds.width, MIN_NORMALIZED_VALUE),\n MAX_NORMALIZED_VALUE,\n ),\n nextValue = Math.min(\n Math.max(\n MAX_NORMALIZED_VALUE - (event.clientY - bounds.top) / bounds.height,\n MIN_NORMALIZED_VALUE,\n ),\n MAX_NORMALIZED_VALUE,\n )\n\n setSaturationValue(nextSaturation, nextValue)\n },\n handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n event.currentTarget.setPointerCapture(event.pointerId)\n updateColor(event)\n }\n\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n 'relative aspect-square grow touch-none rounded-lg active:cursor-grabbing',\n className,\n )}\n style={{\n background: `\n linear-gradient(to top, black, transparent),\n linear-gradient(to right, white, ${hueColor})\n `,\n ...props.style,\n }}\n onPointerDown={handlePointerDown}\n onPointerMove={(event) => {\n if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n updateColor(event)\n }\n }}\n >\n <div\n className=\"pointer-events-none absolute size-md -translate-x-1/2 -translate-y-1/2 rounded-full border-3 border-white\"\n style={{\n backgroundColor: color.hex(),\n left: `${saturation * PERCENTAGE_SCALE}%`,\n top: `${(MAX_NORMALIZED_VALUE - value) * PERCENTAGE_SCALE}%`,\n }}\n />\n </div>\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ColorPickerGroupProps } from './color-picker.types'\n\nexport function ColorPickerGroup({ className, ref, ...props }: ColorPickerGroupProps) {\n return <div className={cn('flex flex-col gap-sm', className)} ref={ref} {...props} />\n}\n","import chroma from 'chroma-js'\n\nconst HSL_SATURATION = 1,\n HSL_LIGHTNESS = 0.5,\n HUE_TRACK_LENGTH = 361,\n SATURATION_TRACK_LENGTH = 101,\n LIGHTNESS_TRACK_LENGTH = 101,\n TRANSPARENCY_TRACK_LENGTH = 101,\n TRACK_DIVISIONS = 100,\n getHueTrack = () =>\n Array.from({ length: HUE_TRACK_LENGTH }, (_value, hue) =>\n chroma.hsl(hue, HSL_SATURATION, HSL_LIGHTNESS).hex(),\n ),\n getTransparencyTrack = (baseColor: string) =>\n Array.from({ length: TRANSPARENCY_TRACK_LENGTH }, (_value, index) =>\n chroma(baseColor)\n .alpha(index / TRACK_DIVISIONS)\n .css(),\n ),\n getSaturationTrack = (baseColor: string) =>\n Array.from({ length: SATURATION_TRACK_LENGTH }, (_value, index) =>\n chroma(baseColor)\n .set('hsl.s', index / TRACK_DIVISIONS)\n .css(),\n ),\n getLightnessTrack = (baseColor: string) =>\n Array.from({ length: LIGHTNESS_TRACK_LENGTH }, (_value, index) =>\n chroma(baseColor)\n .set('hsl.l', index / TRACK_DIVISIONS)\n .css(),\n )\n\nexport { getHueTrack, getTransparencyTrack, getSaturationTrack, getLightnessTrack }\n","import { cn } from '@/utils/cn'\n\nimport { ColorChannelSlider } from '../color-channel-slider'\nimport { getHueTrack } from '../color-channel-slider/color-channel-slider.utils'\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerHueSliderProps } from './color-picker.types'\n\nconst HUE_VALUE_INDEX = 0\n\nexport function ColorPickerHueSlider({ className, ref, ...props }: ColorPickerHueSliderProps) {\n const { hue, setHue } = useColorPicker(),\n handleChange = (value: number | readonly number[]) => {\n if (typeof value === 'number') {\n setHue(value)\n return\n }\n\n setHue(value[HUE_VALUE_INDEX])\n }\n\n return (\n <ColorChannelSlider\n aria-label=\"Hue\"\n {...props}\n min={0}\n max={360}\n value={hue}\n onValueChange={handleChange}\n trackStyle={getHueTrack()}\n className={cn('', className)}\n ref={ref}\n />\n )\n}\n","import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport { InputGroup, InputGroupAddon, InputGroupInput } from '../input-group'\nimport { Popover, PopoverTrigger, PopoverContent, PopoverPanel } from '../popover'\nimport { Separator } from '../separator'\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerInputProps } from './color-picker.types'\n\nconst TRANSPARENCY_MULTIPLIER = 100\n\nexport function ColorPickerInput({\n showPopover = false,\n showTransparencyField = true,\n className,\n children,\n ref,\n ...props\n}: ColorPickerInputProps) {\n const { color, setColor, valueType } = useColorPicker(),\n [inputValue, setInputValue] = React.useState<string>(String(valueType.getValue(color))),\n [transparency, setTransparency] = React.useState<string>(\n Math.round(color.alpha() * TRANSPARENCY_MULTIPLIER).toString(),\n ),\n [prevColor, setPrevColor] = React.useState(color),\n [prevValueType, setPrevValueType] = React.useState(valueType),\n handleValueChange = (value: string) => {\n setInputValue(value)\n },\n handleTransparencyChange = (value: string) => {\n setTransparency(value)\n },\n handleValueBlur = () => {\n const newColor = valueType.parseValue(inputValue)\n if (newColor) {\n setColor(newColor)\n }\n },\n handleTransparencyBlur = () => {\n const alpha = parseFloat(transparency)\n if (!Number.isNaN(alpha)) {\n setColor(color.alpha(alpha / TRANSPARENCY_MULTIPLIER))\n }\n },\n handleValueKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleValueBlur()\n }\n },\n handleTransparencyKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n handleTransparencyBlur()\n }\n }\n\n if (color !== prevColor || valueType !== prevValueType) {\n setPrevColor(color)\n setPrevValueType(valueType)\n setInputValue(String(valueType.getValue(color)))\n setTransparency(Math.round(color.alpha() * TRANSPARENCY_MULTIPLIER).toString())\n }\n\n return (\n <InputGroup variant=\"secondary\" className={cn('', className)} ref={ref} {...props}>\n {showPopover && (\n <Popover>\n <PopoverTrigger aria-label=\"Open color picker\" nativeButton={false}>\n <InputGroupAddon\n style={{\n backgroundColor: color.hex(),\n }}\n className=\"aspect-square h-1/2 rounded-lg hover:cursor-pointer\"\n />\n </PopoverTrigger>\n <PopoverPanel>\n <PopoverContent className=\"flex w-[300px] flex-col gap-sm\">{children}</PopoverContent>\n </PopoverPanel>\n </Popover>\n )}\n {!showPopover && (\n <InputGroupAddon\n style={{\n backgroundColor: color.hex(),\n }}\n className=\"aspect-square size-md rounded-md\"\n />\n )}\n <InputGroupInput\n aria-label=\"Color value\"\n onBlur={handleValueBlur}\n onKeyDown={handleValueKeyDown}\n onValueChange={handleValueChange}\n value={inputValue}\n className=\"uppercase\"\n />\n {showTransparencyField && (\n <>\n <Separator orientation=\"vertical\" className=\"h-md\" />\n <InputGroupAddon>\n <Icon name=\"percent\" />\n </InputGroupAddon>\n <InputGroupInput\n aria-label=\"Transparency percentage\"\n type=\"number\"\n min={0}\n max={100}\n value={transparency}\n onValueChange={handleTransparencyChange}\n onBlur={handleTransparencyBlur}\n onKeyDown={handleTransparencyKeyDown}\n className=\"w-xl\"\n />\n </>\n )}\n </InputGroup>\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ColorPickerLabelProps } from './color-picker.types'\n\nexport function ColorPickerLabel({ className, ref, ...props }: ColorPickerLabelProps) {\n return <span className={cn('style-text-default-0', className)} ref={ref} {...props} />\n}\n","import { cn } from '@/utils/cn'\n\nimport { ColorChannelSlider } from '../color-channel-slider'\nimport { getLightnessTrack } from '../color-channel-slider/color-channel-slider.utils'\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerLightnessSliderProps } from './color-picker.types'\n\nconst MIN_LIGHTNESS = 0,\n MAX_LIGHTNESS = 100,\n LIGHTNESS_SCALE = 100,\n FIRST_VALUE_INDEX = 0\n\nfunction getSliderValue(value: number | readonly number[]): number {\n if (typeof value === 'number') {\n return value\n }\n return value[FIRST_VALUE_INDEX]\n}\n\nexport function ColorPickerLightnessSlider({\n className,\n ref,\n ...props\n}: ColorPickerLightnessSliderProps) {\n const { color, setColor } = useColorPicker(),\n hslLightness = color.get('hsl.l'),\n lightness = hslLightness || MIN_LIGHTNESS,\n handleChange = (value: number | readonly number[]) => {\n setColor(color.set('hsl.l', getSliderValue(value) / LIGHTNESS_SCALE))\n }\n\n return (\n <ColorChannelSlider\n aria-label=\"Lightness\"\n {...props}\n min={MIN_LIGHTNESS}\n max={MAX_LIGHTNESS}\n value={lightness * LIGHTNESS_SCALE}\n onValueChange={handleChange}\n trackStyle={getLightnessTrack(color.hex())}\n className={cn('', className)}\n ref={ref}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerPaletteAddProps } from './color-picker.types'\n\nexport function ColorPickerPaletteAdd({\n className,\n children,\n ref,\n ...props\n}: ColorPickerPaletteAddProps) {\n const { color, addPaletteColor } = useColorPicker(),\n handleClick = () => {\n addPaletteColor(color)\n }\n\n return (\n <button\n type=\"button\"\n aria-label=\"Add current color to palette\"\n onClick={handleClick}\n className={cn(\n 'flex size-md items-center justify-center rounded-lg border border-border-strong text-border-strong hover:cursor-pointer [&>svg]:size-xs',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children ?? <Icon name=\"add\" />}\n </button>\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerPaletteLimitProps } from './color-picker.types'\n\nexport function ColorPickerPaletteLimit({\n className,\n children,\n ref,\n ...props\n}: ColorPickerPaletteLimitProps) {\n const { palette, paletteLimit } = useColorPicker(),\n isAtLimit = paletteLimit && palette.length >= paletteLimit\n\n return (\n Boolean(paletteLimit) && (\n <span\n className={cn(\n 'style-text-prose--2 text-on-surface-variant',\n isAtLimit && 'text-error-default',\n className,\n )}\n ref={ref}\n {...props}\n >\n {children}\n {palette.length} / {paletteLimit}\n </span>\n )\n )\n}\n","import chroma from 'chroma-js'\n\nimport { cn } from '@/utils/cn'\n\nimport { useColorPicker } from './color-picker'\nimport { colorPickerSwatchVariants } from './color-picker.types'\nimport type { ColorPickerPaletteSwatchProps } from './color-picker.types'\n\nexport function ColorPickerPaletteSwatch({\n size,\n color,\n className,\n children,\n ref,\n ...props\n}: ColorPickerPaletteSwatchProps) {\n const { setColor } = useColorPicker(),\n handleClick = () => {\n setColor(chroma(color))\n }\n\n return (\n <button\n type=\"button\"\n aria-label={`Select color ${color}`}\n onClick={handleClick}\n className={cn(colorPickerSwatchVariants({ size }), className)}\n ref={ref}\n style={{\n color,\n }}\n {...props}\n >\n {children}\n <div className=\"size-full\" style={{ backgroundColor: color }} />\n </button>\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { useColorPicker } from './color-picker'\nimport { ColorPickerPaletteSwatch } from './color-picker-palette-swatch'\nimport type { ColorPickerPaletteListProps } from './color-picker.types'\n\nconst DEFAULT_OCCURRENCE = 0,\n OCCURRENCE_INCREMENT = 1\n\nexport function ColorPickerPaletteList({\n className,\n children,\n ref,\n ...props\n}: ColorPickerPaletteListProps) {\n const { palette } = useColorPicker(),\n occurrences = new Map<string, number>()\n\n return (\n <div\n className={cn('flex flex-wrap items-center justify-start gap-2xs', className)}\n ref={ref}\n {...props}\n >\n {palette.map((color) => {\n const value = color.hex('rgba'),\n occurrence = occurrences.get(value) ?? DEFAULT_OCCURRENCE\n occurrences.set(value, occurrence + OCCURRENCE_INCREMENT)\n\n return (\n <ColorPickerPaletteSwatch\n key={`${value}-${occurrence}`}\n color={color.css()}\n size=\"medium\"\n />\n )\n })}\n {children}\n </div>\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { ColorPickerRowProps } from './color-picker.types'\n\nexport function ColorPickerRow({ className, ref, ...props }: ColorPickerRowProps) {\n return (\n <div\n className={cn('flex items-center justify-between gap-xs', className)}\n ref={ref}\n {...props}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { ColorChannelSlider } from '../color-channel-slider'\nimport { getTransparencyTrack } from '../color-channel-slider/color-channel-slider.utils'\nimport { useColorPicker } from './color-picker'\nimport type { ColorPickerTransparencySliderProps } from './color-picker.types'\n\nconst FIRST_VALUE_INDEX = 0,\n ALPHA_PERCENTAGE_SCALE = 100\n\nfunction getSliderValue(value: number | readonly number[]): number {\n if (typeof value === 'number') {\n return value\n }\n return value[FIRST_VALUE_INDEX]\n}\n\nexport function ColorPickerTransparencySlider({\n className,\n ref,\n ...props\n}: ColorPickerTransparencySliderProps) {\n const { color, setColor } = useColorPicker(),\n alpha = color.alpha(),\n handleChange = (value: number | readonly number[]) => {\n const nextAlpha = getSliderValue(value)\n setColor(color.alpha(nextAlpha / ALPHA_PERCENTAGE_SCALE))\n }\n\n return (\n <ColorChannelSlider\n aria-label=\"Transparency\"\n {...props}\n min={0}\n max={ALPHA_PERCENTAGE_SCALE}\n value={alpha * ALPHA_PERCENTAGE_SCALE}\n onValueChange={handleChange}\n trackStyle={getTransparencyTrack(color.hex())}\n className={cn('', className)}\n ref={ref}\n />\n )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport {\n Select,\n SelectIcon,\n SelectItem,\n SelectList,\n SelectPopup,\n SelectTrigger,\n SelectValue,\n} from '../select'\nimport { useColorPicker } from './color-picker'\nimport { VALUE_TYPES } from './color-picker.types'\nimport type { ColorPickerValueTypeProps } from './color-picker.types'\n\nconst [defaultValueType] = VALUE_TYPES\n\nexport function ColorPickerValueType({\n className,\n children,\n ref,\n ...props\n}: ColorPickerValueTypeProps) {\n const { valueType, setValueType } = useColorPicker(),\n handleChange = (value: unknown) => {\n setValueType(VALUE_TYPES.find((type) => type.value === value) ?? defaultValueType)\n }\n\n return (\n <Select value={valueType.value} onValueChange={handleChange}>\n <SelectTrigger\n aria-label=\"Color value format\"\n variant=\"secondary\"\n className={cn('', className)}\n ref={ref}\n {...props}\n >\n {children}\n <SelectValue>\n {(value: string) => VALUE_TYPES.find((type) => type.value === value)?.label ?? value}\n </SelectValue>\n <SelectIcon>\n <Icon name=\"chevronsUpDown\" />\n </SelectIcon>\n </SelectTrigger>\n <SelectPopup sideOffset={8}>\n <SelectList>\n {VALUE_TYPES.map(({ label, value }) => (\n <SelectItem key={label} value={value}>\n {label}\n </SelectItem>\n ))}\n </SelectList>\n </SelectPopup>\n </Select>\n )\n}\n","import { ColorPicker as ColorPickerRoot } from './color-picker'\nimport { ColorPickerArea } from './color-picker-area'\nimport { ColorPickerGroup } from './color-picker-group'\nimport { ColorPickerHueSlider } from './color-picker-hue-slider'\nimport { ColorPickerInput } from './color-picker-input'\nimport { ColorPickerLabel } from './color-picker-label'\nimport { ColorPickerLightnessSlider } from './color-picker-lightness-slider'\nimport { ColorPickerPaletteAdd } from './color-picker-palette-add'\nimport { ColorPickerPaletteLimit } from './color-picker-palette-limit'\nimport { ColorPickerPaletteList } from './color-picker-palette-list'\nimport { ColorPickerPaletteSwatch } from './color-picker-palette-swatch'\nimport { ColorPickerRow } from './color-picker-row'\nimport { ColorPickerTransparencySlider } from './color-picker-transparency-slider'\nimport { ColorPickerValueType } from './color-picker-value-type'\n\nconst ColorPicker = Object.assign(ColorPickerRoot, {\n Area: ColorPickerArea,\n Group: ColorPickerGroup,\n HueSlider: ColorPickerHueSlider,\n Input: ColorPickerInput,\n Label: ColorPickerLabel,\n LightnessSlider: ColorPickerLightnessSlider,\n PaletteAdd: ColorPickerPaletteAdd,\n PaletteLimit: ColorPickerPaletteLimit,\n PaletteList: ColorPickerPaletteList,\n PaletteSwatch: ColorPickerPaletteSwatch,\n Row: ColorPickerRow,\n TransparencySlider: ColorPickerTransparencySlider,\n ValueType: ColorPickerValueType,\n})\n\nexport { ColorPickerArea } from './color-picker-area'\nexport { ColorPickerGroup } from './color-picker-group'\nexport { ColorPickerHueSlider } from './color-picker-hue-slider'\nexport { ColorPickerInput } from './color-picker-input'\nexport { ColorPickerLabel } from './color-picker-label'\nexport { ColorPickerPaletteLimit } from './color-picker-palette-limit'\nexport { ColorPickerPaletteList } from './color-picker-palette-list'\nexport { ColorPickerPaletteSwatch } from './color-picker-palette-swatch'\nexport { ColorPickerRow } from './color-picker-row'\nexport { ColorPickerTransparencySlider } from './color-picker-transparency-slider'\nexport { ColorPickerValueType } from './color-picker-value-type'\nexport { ColorPickerLightnessSlider } from './color-picker-lightness-slider'\n\nexport type {\n ColorPickerProps,\n ColorPickerPaletteAddProps,\n ColorPickerState,\n ColorPickerAction,\n ColorPickerAreaProps,\n ColorPickerContextType,\n ColorPickerGroupProps,\n ColorPickerHueSliderProps,\n ColorPickerInputProps,\n ColorPickerLabelProps,\n ColorPickerPaletteLimitProps,\n ColorPickerPaletteListProps,\n ColorPickerPaletteSwatchProps,\n ColorPickerRowProps,\n ColorPickerTransparencySliderProps,\n ColorPickerValueTypeProps,\n ColorPickerLightnessSliderProps,\n} from './color-picker.types'\n\nexport { ColorPicker }\n"],"mappings":"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"}
@@ -0,0 +1,64 @@
1
+ import { n as inputVariants } from "../input.types-816rEVWU.js";
2
+ import { VariantProps } from "class-variance-authority";
3
+ import React$1 from "react";
4
+ import { Combobox as Combobox$1, ComboboxEmptyProps as ComboboxEmptyProps$1 } from "@base-ui/react/combobox";
5
+ import { Virtualizer } from "@tanstack/react-virtual";
6
+ type ComboboxEmptyProps = React.ComponentProps<typeof Combobox$1.Empty>;
7
+ type ComboboxInputProps = Omit<React.ComponentProps<typeof Combobox$1.Input>, 'size'> & VariantProps<typeof inputVariants> & {
8
+ inline?: boolean;
9
+ };
10
+ type ComboboxItemProps = React.ComponentProps<typeof Combobox$1.Item>;
11
+ type ComboboxListProps = React.ComponentProps<typeof Combobox$1.List>;
12
+ type ComboboxPopupProps = React.ComponentProps<typeof Combobox$1.Positioner>;
13
+ type ComboboxProps = React.ComponentProps<typeof Combobox$1.Root>;
14
+ type ComboboxChipsProps = React.ComponentProps<typeof Combobox$1.Chips>;
15
+ type ComboboxChipProps = React.ComponentProps<typeof Combobox$1.Chip>;
16
+ type ComboboxValueProps = React.ComponentProps<typeof Combobox$1.Value>;
17
+ type ComboboxTriggerProps = React.ComponentProps<typeof Combobox$1.Trigger> & {
18
+ placeholder?: string;
19
+ };
20
+ type ComboboxGroupProps = React.ComponentProps<typeof Combobox$1.Group>;
21
+ type ComboboxGroupLabelProps = React.ComponentProps<typeof Combobox$1.GroupLabel>;
22
+ type ComboboxCollectionProps = React.ComponentProps<typeof Combobox$1.Collection>;
23
+ type ComboboxStatusProps = React.ComponentProps<typeof Combobox$1.Status>;
24
+ type ComboboxVirtualizedListProps<TItem> = Omit<React.ComponentProps<'div'>, 'children'> & {
25
+ open: boolean;
26
+ virtualizerRef?: React.RefObject<Virtualizer<HTMLDivElement, HTMLDivElement> | null>;
27
+ estimateSize?: number;
28
+ overscan?: number;
29
+ children?: React.ReactNode | ((item: TItem) => React.ReactNode);
30
+ };
31
+ declare const useFilter: typeof Combobox$1.useFilter, useFilteredItems: typeof Combobox$1.useFilteredItems;
32
+ declare function Combobox$2({ ...props }: ComboboxProps): import("react").JSX.Element;
33
+ export declare function ComboboxChip({ className, children, ref, ...props }: ComboboxChipProps): import("react").JSX.Element;
34
+ export declare function ComboboxChips({ className, ref, ...props }: ComboboxChipsProps): import("react").JSX.Element;
35
+ export declare function ComboboxCollection({ ...props }: ComboboxCollectionProps): import("react").JSX.Element;
36
+ export declare function ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps$1): import("react").JSX.Element;
37
+ export declare function ComboboxGroup({ className, ref, ...props }: ComboboxGroupProps): import("react").JSX.Element;
38
+ export declare function ComboboxGroupLabel({ className, ref, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
39
+ export declare function ComboboxInput({ inline, variant, size, className, children, ref, ...props }: ComboboxInputProps): React$1.JSX.Element;
40
+ export declare function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps): import("react").JSX.Element;
41
+ export declare function ComboboxList({ className, ref, ...props }: ComboboxListProps): import("react").JSX.Element;
42
+ export declare function ComboboxPopup({ className, children, ref, ...props }: ComboboxPopupProps): import("react").JSX.Element;
43
+ export declare function ComboboxStatus({ className, ref, ...props }: ComboboxStatusProps): import("react").JSX.Element;
44
+ export declare function ComboboxTrigger({ placeholder, className, children, ref, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
45
+ export declare function ComboboxValue({ ...props }: ComboboxValueProps): import("react").JSX.Element;
46
+ export declare function ComboboxVirtualizedList<TItem>({ open, virtualizerRef, estimateSize, overscan, className, children, ...props }: ComboboxVirtualizedListProps<TItem>): React$1.JSX.Element;
47
+ declare const Combobox: typeof Combobox$2 & {
48
+ Chip: typeof ComboboxChip;
49
+ Chips: typeof ComboboxChips;
50
+ Collection: typeof ComboboxCollection;
51
+ Empty: typeof ComboboxEmpty;
52
+ Group: typeof ComboboxGroup;
53
+ GroupLabel: typeof ComboboxGroupLabel;
54
+ Input: typeof ComboboxInput;
55
+ Item: typeof ComboboxItem;
56
+ List: typeof ComboboxList;
57
+ Popup: typeof ComboboxPopup;
58
+ Status: typeof ComboboxStatus;
59
+ Trigger: typeof ComboboxTrigger;
60
+ Value: typeof ComboboxValue;
61
+ VirtualizedList: typeof ComboboxVirtualizedList;
62
+ };
63
+ export { Combobox, type ComboboxChipProps, type ComboboxChipsProps, type ComboboxCollectionProps, type ComboboxEmptyProps, type ComboboxGroupLabelProps, type ComboboxGroupProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxPopupProps, type ComboboxProps, type ComboboxStatusProps, type ComboboxTriggerProps, type ComboboxValueProps, type ComboboxVirtualizedListProps, useFilter, useFilteredItems };
64
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,289 @@
1
+ import { t as cn } from "../cn-BDi0DfT5.js";
2
+ import { n as Icon } from "../icon-D3JWfCa2.js";
3
+ import { t as trimTextChildren } from "../trim-text-children-CQRFg2fL.js";
4
+ import { t as Button } from "../button-BpUC-R1J.js";
5
+ import { i as InputGroupAddon, t as InputGroup } from "../input-group-CgdazGrY.js";
6
+ import { t as Separator } from "../separator-DgIQp1cB.js";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ import React from "react";
9
+ import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
10
+ import { useVirtualizer } from "@tanstack/react-virtual";
11
+ // src/components/combobox/combobox.tsx
12
+ function Combobox$2({ ...props }) {
13
+ return /* @__PURE__ */ jsx(Combobox$1.Root, { ...props });
14
+ }
15
+ // src/components/combobox/combobox-chip.tsx
16
+ function ComboboxChip({ className, children, ref, ...props }) {
17
+ return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
18
+ className: cn("inline-flex h-lg items-center justify-center gap-xs rounded-lg bg-neutral-container pr-3xs pl-xs style-text-default-0 text-neutral-on-container", className),
19
+ ref,
20
+ ...props,
21
+ children: [trimTextChildren(children), /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
22
+ "aria-label": "Remove",
23
+ render: (innerProps) => /* @__PURE__ */ jsx(Button, {
24
+ "aria-label": "Remove",
25
+ onClick: () => innerProps.onClick,
26
+ variant: "ghost",
27
+ tone: "error",
28
+ size: "extraSmall",
29
+ children: /* @__PURE__ */ jsx(Icon, {
30
+ name: "close",
31
+ className: "size-sm"
32
+ })
33
+ })
34
+ })]
35
+ });
36
+ }
37
+ // src/components/combobox/combobox-chips.tsx
38
+ function ComboboxChips({ className, ref, ...props }) {
39
+ return /* @__PURE__ */ jsx(Combobox$1.Chips, {
40
+ "data-chips": true,
41
+ className: cn("group flex flex-wrap items-center gap-2xs empty:hidden", className),
42
+ ref,
43
+ ...props
44
+ });
45
+ }
46
+ // src/components/combobox/combobox-collection.tsx
47
+ function ComboboxCollection({ ...props }) {
48
+ return /* @__PURE__ */ jsx(Combobox$1.Collection, { ...props });
49
+ }
50
+ // src/components/combobox/combobox-empty.tsx
51
+ function ComboboxEmpty({ className, ref, ...props }) {
52
+ return /* @__PURE__ */ jsx(Combobox$1.Empty, {
53
+ className: cn("max-h-[min(23rem,var(--available-height))] scroll-py-[0.5rem] overflow-y-auto overscroll-contain p-xs empty:m-[0px] empty:p-[0px]", className),
54
+ ref,
55
+ ...props
56
+ });
57
+ }
58
+ // src/components/combobox/combobox-group.tsx
59
+ function ComboboxGroup({ className, ref, ...props }) {
60
+ return /* @__PURE__ */ jsx(Combobox$1.Group, {
61
+ className: cn("block pb-3xs", className),
62
+ ref,
63
+ ...props
64
+ });
65
+ }
66
+ // src/components/combobox/combobox-group-label.tsx
67
+ function ComboboxGroupLabel({ className, ref, ...props }) {
68
+ return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
69
+ className: cn("sticky top-[0px] z-1 my-[0px] mr-[0px] -ml-2xs bg-surface-2 px-sm pt-2xs pb-3xs style-text-strong--2 text-on-surface-variant", className),
70
+ ref,
71
+ ...props
72
+ });
73
+ }
74
+ // src/components/combobox/combobox-input.tsx
75
+ function getChipsMinHeightClass(size) {
76
+ if (size === "small") return "[&:has([data-chips]:not(:empty))]:min-h-lg";
77
+ if (size === "large") return "[&:has([data-chips]:not(:empty))]:min-h-2xl";
78
+ return "[&:has([data-chips]:not(:empty))]:min-h-xl";
79
+ }
80
+ function getTriggerVariant(isOpen) {
81
+ if (isOpen) return "fill";
82
+ return "ghost";
83
+ }
84
+ function ComboboxInput({ inline = false, variant, size = "medium", className, children, ref, ...props }) {
85
+ const id = React.useId(), chipsMinHeightClass = getChipsMinHeightClass(size);
86
+ if (inline) return /* @__PURE__ */ jsx("div", {
87
+ className: "h-(--input-container-height) py-2xs pr-2xs",
88
+ children: /* @__PURE__ */ jsx(Combobox$1.Input, {
89
+ className: cn("h-xl w-full rounded-lg bg-surface-low px-sm outline-border transition-all not-active:outline-1 focus-within:outline-2 hover:outline-2 focus:caret-brand-default focus:outline-brand-border data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", "placeholder:opacity-60", "disabled:cursor-not-allowed", "text-ellipsis", className),
90
+ id,
91
+ ref,
92
+ ...props
93
+ })
94
+ });
95
+ return /* @__PURE__ */ jsxs(InputGroup, {
96
+ variant,
97
+ size,
98
+ className: cn("flex-col items-start justify-center [&:has([data-chips]:empty)>[role=separator]]:hidden [&:has([data-chips]:h-fit)]:flex [&:has([data-chips]:h-fit)]:flex-wrap [&:has([data-chips]:h-fit)]:py-xs [&:has([data-chips]:not(:empty))]:h-auto [&:has([data-chips]:not(:empty))]:rounded-xl [&:not(:has([data-chips]))>[role=separator]]:hidden", chipsMinHeightClass, className),
99
+ children: [
100
+ children,
101
+ /* @__PURE__ */ jsx(Separator, { weight: "thinnest" }),
102
+ /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
103
+ className: "relative flex w-full items-center justify-between [&>input]:pr-[2rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]",
104
+ children: [/* @__PURE__ */ jsx(Combobox$1.Input, {
105
+ className: cn("w-full text-ellipsis outline-none placeholder:opacity-60 disabled:cursor-not-allowed", className),
106
+ id,
107
+ ref,
108
+ ...props
109
+ }), /* @__PURE__ */ jsxs(InputGroupAddon, { children: [/* @__PURE__ */ jsx(Combobox$1.Clear, {
110
+ "aria-label": "Clear selection",
111
+ keepMounted: true,
112
+ render: ({ onClick }) => /* @__PURE__ */ jsx(Button, {
113
+ "aria-label": "Clear selection",
114
+ onClick,
115
+ size: "extraSmall",
116
+ variant: "ghost",
117
+ tone: "error",
118
+ children: /* @__PURE__ */ jsx(Icon, { name: "close" })
119
+ })
120
+ }), /* @__PURE__ */ jsx(Combobox$1.Trigger, {
121
+ "aria-label": "Open popup",
122
+ render: ({ onClick }, state) => /* @__PURE__ */ jsx(Button, {
123
+ "aria-label": "Open popup",
124
+ onClick,
125
+ size: "extraSmall",
126
+ variant: getTriggerVariant(state.open),
127
+ tone: "brand",
128
+ children: /* @__PURE__ */ jsx(Icon, { name: "chevronDown" })
129
+ })
130
+ })] })]
131
+ })
132
+ ]
133
+ });
134
+ }
135
+ // src/components/combobox/combobox-item.tsx
136
+ function ComboboxItem({ className, children, ref, ...props }) {
137
+ return /* @__PURE__ */ jsxs(Combobox$1.Item, {
138
+ className: cn("mr-2xs grid cursor-default grid-cols-[1fr_0.75rem] items-center gap-xs rounded-md px-2xs py-3xs style-text-default-0 transition-colors duration-100 select-none group-data-[side=none]:pr-xs group-data-[side=none]:leading-lg first-of-type:mt-2xs last-of-type:mb-2xs hover:cursor-pointer data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container data-highlighted:before:absolute data-highlighted:before:inset-x-3xs data-highlighted:before:inset-y-[0px] data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-selected:bg-neutral-default data-selected:text-neutral-on-default pointer-coarse:py-xs", className),
139
+ ref,
140
+ ...props,
141
+ children: [/* @__PURE__ */ jsx("span", {
142
+ className: "col-start-1",
143
+ children
144
+ }), /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
145
+ className: "col-start-2 place-self-end self-center",
146
+ children: /* @__PURE__ */ jsx(Icon, {
147
+ name: "selected",
148
+ className: "size-sm"
149
+ })
150
+ })]
151
+ });
152
+ }
153
+ // src/components/combobox/combobox-list.tsx
154
+ function ComboboxList({ className, ref, ...props }) {
155
+ return /* @__PURE__ */ jsx(Combobox$1.List, {
156
+ className: cn("max-h-[min(calc(23rem-var(--input-container-height,0rem)),calc(var(--available-height)-var(--input-container-height,0rem)))] scroll-py-[0.5rem] space-y-3xs overflow-y-auto overscroll-contain data-empty:p-[0px]", className),
157
+ ref,
158
+ ...props
159
+ });
160
+ }
161
+ // src/components/combobox/combobox-popup.tsx
162
+ function ComboboxPopup({ className, children, ref, ...props }) {
163
+ return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
164
+ className: cn("", className),
165
+ ref,
166
+ sideOffset: 20,
167
+ ...props,
168
+ children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
169
+ className: "max-h-[23rem] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-xl bg-surface-2 pl-2xs shadow-md transition-[transform,scale,opacity] duration-100 [--input-container-height:4rem] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
170
+ children
171
+ })
172
+ }) });
173
+ }
174
+ // src/components/combobox/combobox-status.tsx
175
+ function ComboboxStatus({ className, ref, ...props }) {
176
+ return /* @__PURE__ */ jsx(Combobox$1.Status, {
177
+ className: cn("flex items-center gap-2xs p-xs style-text-prose--1 text-on-surface-variant empty:hidden", className),
178
+ ref,
179
+ ...props
180
+ });
181
+ }
182
+ // src/components/combobox/combobox-trigger.tsx
183
+ function getPlaceholderLabel(placeholder) {
184
+ if (typeof placeholder === "string") return placeholder;
185
+ }
186
+ function ComboboxTrigger({ placeholder, className, children, ref, ...props }) {
187
+ return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
188
+ "aria-label": getPlaceholderLabel(placeholder),
189
+ className: cn("inline-flex h-xl items-center justify-between gap-xl rounded-xl bg-surface pr-sm pl-md style-text-default-0 outline-2 outline-transparent transition-all hover:cursor-pointer hover:outline-border data-popup-open:outline-brand-border", className),
190
+ ref,
191
+ ...props,
192
+ children: [
193
+ /* @__PURE__ */ jsx(Combobox$1.Value, { placeholder: /* @__PURE__ */ jsx("span", {
194
+ className: "opacity-70",
195
+ children: placeholder
196
+ }) }),
197
+ /* @__PURE__ */ jsx(Combobox$1.Icon, { children: /* @__PURE__ */ jsx(Icon, { name: "chevronsUpDown" }) }),
198
+ children
199
+ ]
200
+ });
201
+ }
202
+ // src/components/combobox/combobox-value.tsx
203
+ function ComboboxValue({ ...props }) {
204
+ return /* @__PURE__ */ jsx(Combobox$1.Value, { ...props });
205
+ }
206
+ // src/components/combobox/combobox.types.ts
207
+ const { useFilter } = Combobox$1, { useFilteredItems } = Combobox$1;
208
+ // src/components/combobox/combobox-virtualized-list.tsx
209
+ const DEFAULT_ESTIMATE_SIZE = 32;
210
+ const DEFAULT_OVERSCAN = 20;
211
+ const PADDING = 8;
212
+ const FIRST_POSITION = 1;
213
+ function renderItem(children, item) {
214
+ if (typeof children === "function") return children(item);
215
+ return children;
216
+ }
217
+ function ComboboxVirtualizedList({ open, virtualizerRef, estimateSize = DEFAULT_ESTIMATE_SIZE, overscan = DEFAULT_OVERSCAN, className, children, ...props }) {
218
+ const filteredItems = useFilteredItems(), scrollElementRef = React.useRef(null), virtualizer = useVirtualizer({
219
+ count: filteredItems.length,
220
+ directDomUpdates: true,
221
+ enabled: open,
222
+ estimateSize: () => estimateSize,
223
+ getScrollElement: () => scrollElementRef.current,
224
+ overscan,
225
+ paddingEnd: PADDING,
226
+ paddingStart: PADDING,
227
+ scrollPaddingEnd: PADDING,
228
+ scrollPaddingStart: PADDING
229
+ }), handleScrollElementRef = React.useCallback((element) => {
230
+ scrollElementRef.current = element;
231
+ if (element) virtualizer.measure();
232
+ }, [virtualizer]), totalSize = virtualizer.getTotalSize(), totalSizeStyle = { "--total-size": `${totalSize}px` };
233
+ React.useEffect(() => {
234
+ if (virtualizerRef) virtualizerRef.current = virtualizer;
235
+ }, [virtualizer, virtualizerRef]);
236
+ return /* @__PURE__ */ jsx("div", {
237
+ role: "presentation",
238
+ ref: handleScrollElementRef,
239
+ style: totalSizeStyle,
240
+ className: cn("h-[min(22.5rem,var(--total-size))] max-h-(--available-height) scroll-py-3xs overflow-auto overscroll-contain", className),
241
+ ...props,
242
+ children: /* @__PURE__ */ jsx("div", {
243
+ role: "presentation",
244
+ className: "relative w-full",
245
+ style: { height: totalSize },
246
+ children: virtualizer.getVirtualItems().map((virtualItem) => {
247
+ const item = filteredItems[virtualItem.index];
248
+ if (!item) return;
249
+ return /* @__PURE__ */ jsx(ComboboxItem, {
250
+ index: virtualItem.index,
251
+ "data-index": virtualItem.index,
252
+ ref: virtualizer.measureElement,
253
+ value: item,
254
+ "aria-setsize": filteredItems.length,
255
+ "aria-posinset": virtualItem.index + FIRST_POSITION,
256
+ className: "first-of-type:mt-0!",
257
+ style: {
258
+ left: 0,
259
+ position: "absolute",
260
+ top: 0,
261
+ transform: `translateY(${virtualItem.start}px)`,
262
+ width: "100%"
263
+ },
264
+ children: renderItem(children, item)
265
+ }, virtualItem.key);
266
+ })
267
+ })
268
+ });
269
+ }
270
+ // src/components/combobox/index.ts
271
+ const Combobox = Object.assign(Combobox$2, {
272
+ Chip: ComboboxChip,
273
+ Chips: ComboboxChips,
274
+ Collection: ComboboxCollection,
275
+ Empty: ComboboxEmpty,
276
+ Group: ComboboxGroup,
277
+ GroupLabel: ComboboxGroupLabel,
278
+ Input: ComboboxInput,
279
+ Item: ComboboxItem,
280
+ List: ComboboxList,
281
+ Popup: ComboboxPopup,
282
+ Status: ComboboxStatus,
283
+ Trigger: ComboboxTrigger,
284
+ Value: ComboboxValue,
285
+ VirtualizedList: ComboboxVirtualizedList
286
+ });
287
+ export { Combobox, ComboboxChip, ComboboxChips, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxStatus, ComboboxTrigger, ComboboxValue, ComboboxVirtualizedList, useFilter, useFilteredItems };
288
+
289
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["Combobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","ComboboxRoot"],"sources":["../../src/components/combobox/combobox.tsx","../../src/components/combobox/combobox-chip.tsx","../../src/components/combobox/combobox-chips.tsx","../../src/components/combobox/combobox-collection.tsx","../../src/components/combobox/combobox-empty.tsx","../../src/components/combobox/combobox-group.tsx","../../src/components/combobox/combobox-group-label.tsx","../../src/components/combobox/combobox-input.tsx","../../src/components/combobox/combobox-item.tsx","../../src/components/combobox/combobox-list.tsx","../../src/components/combobox/combobox-popup.tsx","../../src/components/combobox/combobox-status.tsx","../../src/components/combobox/combobox-trigger.tsx","../../src/components/combobox/combobox-value.tsx","../../src/components/combobox/combobox.types.ts","../../src/components/combobox/combobox-virtualized-list.tsx","../../src/components/combobox/index.ts"],"sourcesContent":["import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport type { ComboboxProps } from './combobox.types'\n\nexport function Combobox({ ...props }: ComboboxProps) {\n return <BaseCombobox.Root {...props} />\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\nimport { trimTextChildren } from '@/utils/trim-text-children'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport type { ComboboxChipProps } from './combobox.types'\n\nexport function ComboboxChip({ className, children, ref, ...props }: ComboboxChipProps) {\n return (\n <BaseCombobox.Chip\n className={cn(\n 'inline-flex h-lg items-center justify-center gap-xs rounded-lg bg-neutral-container pr-3xs pl-xs style-text-default-0 text-neutral-on-container',\n className,\n )}\n ref={ref}\n {...props}\n >\n {trimTextChildren(children)}\n <BaseCombobox.ChipRemove\n aria-label=\"Remove\"\n render={(innerProps) => (\n <Button\n aria-label=\"Remove\"\n onClick={() => innerProps.onClick}\n variant=\"ghost\"\n tone=\"error\"\n size=\"extraSmall\"\n >\n <Icon name=\"close\" className=\"size-sm\" />\n </Button>\n )}\n />\n </BaseCombobox.Chip>\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxChipsProps } from './combobox.types'\n\nexport function ComboboxChips({ className, ref, ...props }: ComboboxChipsProps) {\n return (\n <BaseCombobox.Chips\n data-chips\n className={cn('group flex flex-wrap items-center gap-2xs empty:hidden', className)}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport type { ComboboxCollectionProps } from './combobox.types'\n\nexport function ComboboxCollection({ ...props }: ComboboxCollectionProps) {\n return <BaseCombobox.Collection {...props} />\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\nimport type { ComboboxEmptyProps } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nexport function ComboboxEmpty({ className, ref, ...props }: ComboboxEmptyProps) {\n return (\n <BaseCombobox.Empty\n className={cn(\n 'max-h-[min(23rem,var(--available-height))] scroll-py-[0.5rem] overflow-y-auto overscroll-contain p-xs empty:m-[0px] empty:p-[0px]',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxGroupProps } from './combobox.types'\n\nexport function ComboboxGroup({ className, ref, ...props }: ComboboxGroupProps) {\n return <BaseCombobox.Group className={cn('block pb-3xs', className)} ref={ref} {...props} />\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxGroupLabelProps } from './combobox.types'\n\nexport function ComboboxGroupLabel({ className, ref, ...props }: ComboboxGroupLabelProps) {\n return (\n <BaseCombobox.GroupLabel\n className={cn(\n 'sticky top-[0px] z-1 my-[0px] mr-[0px] -ml-2xs bg-surface-2 px-sm pt-2xs pb-3xs style-text-strong--2 text-on-surface-variant',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\nimport { InputGroup, InputGroupAddon } from '../input-group'\nimport { Separator } from '../separator'\nimport type { ComboboxInputProps } from './combobox.types'\n\nfunction getChipsMinHeightClass(size: ComboboxInputProps['size']): string {\n if (size === 'small') {\n return '[&:has([data-chips]:not(:empty))]:min-h-lg'\n }\n if (size === 'large') {\n return '[&:has([data-chips]:not(:empty))]:min-h-2xl'\n }\n return '[&:has([data-chips]:not(:empty))]:min-h-xl'\n}\n\nfunction getTriggerVariant(isOpen: boolean): 'fill' | 'ghost' {\n if (isOpen) {\n return 'fill'\n }\n return 'ghost'\n}\n\nexport function ComboboxInput({\n inline = false,\n variant,\n size = 'medium',\n className,\n children,\n ref,\n ...props\n}: ComboboxInputProps) {\n const id = React.useId(),\n chipsMinHeightClass = getChipsMinHeightClass(size)\n\n if (inline) {\n return (\n <div className=\"h-(--input-container-height) py-2xs pr-2xs\">\n <BaseCombobox.Input\n className={cn(\n 'h-xl w-full rounded-lg bg-surface-low px-sm outline-border transition-all not-active:outline-1 focus-within:outline-2 hover:outline-2 focus:caret-brand-default focus:outline-brand-border data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',\n 'placeholder:opacity-60',\n 'disabled:cursor-not-allowed',\n 'text-ellipsis',\n className,\n )}\n id={id}\n ref={ref}\n {...props}\n />\n </div>\n )\n }\n\n return (\n <InputGroup\n variant={variant}\n size={size}\n className={cn(\n 'flex-col items-start justify-center [&:has([data-chips]:empty)>[role=separator]]:hidden [&:has([data-chips]:h-fit)]:flex [&:has([data-chips]:h-fit)]:flex-wrap [&:has([data-chips]:h-fit)]:py-xs [&:has([data-chips]:not(:empty))]:h-auto [&:has([data-chips]:not(:empty))]:rounded-xl [&:not(:has([data-chips]))>[role=separator]]:hidden',\n chipsMinHeightClass,\n className,\n )}\n >\n {children}\n <Separator weight=\"thinnest\" />\n <BaseCombobox.InputGroup className=\"relative flex w-full items-center justify-between [&>input]:pr-[2rem] has-[.combobox-clear]:[&>input]:pr-[calc(0.5rem+1.5rem*2)]\">\n <BaseCombobox.Input\n className={cn(\n 'w-full text-ellipsis outline-none placeholder:opacity-60 disabled:cursor-not-allowed',\n className,\n )}\n id={id}\n ref={ref}\n {...props}\n />\n <InputGroupAddon>\n <BaseCombobox.Clear\n aria-label=\"Clear selection\"\n keepMounted\n render={({ onClick }) => (\n <Button\n aria-label=\"Clear selection\"\n onClick={onClick}\n size=\"extraSmall\"\n variant=\"ghost\"\n tone=\"error\"\n >\n <Icon name=\"close\" />\n </Button>\n )}\n />\n <BaseCombobox.Trigger\n aria-label=\"Open popup\"\n render={({ onClick }, state) => (\n <Button\n aria-label=\"Open popup\"\n onClick={onClick}\n size=\"extraSmall\"\n variant={getTriggerVariant(state.open)}\n tone=\"brand\"\n >\n <Icon name=\"chevronDown\" />\n </Button>\n )}\n />\n </InputGroupAddon>\n </BaseCombobox.InputGroup>\n </InputGroup>\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport type { ComboboxItemProps } from './combobox.types'\n\nexport function ComboboxItem({ className, children, ref, ...props }: ComboboxItemProps) {\n return (\n <BaseCombobox.Item\n className={cn(\n 'mr-2xs grid cursor-default grid-cols-[1fr_0.75rem] items-center gap-xs rounded-md px-2xs py-3xs style-text-default-0 transition-colors duration-100 select-none group-data-[side=none]:pr-xs group-data-[side=none]:leading-lg first-of-type:mt-2xs last-of-type:mb-2xs hover:cursor-pointer data-highlighted:relative data-highlighted:z-0 data-highlighted:bg-neutral-container-high data-highlighted:text-neutral-on-container data-highlighted:before:absolute data-highlighted:before:inset-x-3xs data-highlighted:before:inset-y-[0px] data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-selected:bg-neutral-default data-selected:text-neutral-on-default pointer-coarse:py-xs',\n className,\n )}\n ref={ref}\n {...props}\n >\n <span className=\"col-start-1\">{children}</span>\n <BaseCombobox.ItemIndicator className=\"col-start-2 place-self-end self-center\">\n <Icon name=\"selected\" className=\"size-sm\" />\n </BaseCombobox.ItemIndicator>\n </BaseCombobox.Item>\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxListProps } from './combobox.types'\n\nexport function ComboboxList({ className, ref, ...props }: ComboboxListProps) {\n return (\n <BaseCombobox.List\n className={cn(\n 'max-h-[min(calc(23rem-var(--input-container-height,0rem)),calc(var(--available-height)-var(--input-container-height,0rem)))] scroll-py-[0.5rem] space-y-3xs overflow-y-auto overscroll-contain data-empty:p-[0px]',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxPopupProps } from './combobox.types'\n\nexport function ComboboxPopup({ className, children, ref, ...props }: ComboboxPopupProps) {\n return (\n <BaseCombobox.Portal>\n <BaseCombobox.Positioner className={cn('', className)} ref={ref} sideOffset={20} {...props}>\n <BaseCombobox.Popup className=\"max-h-[23rem] w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-xl bg-surface-2 pl-2xs shadow-md transition-[transform,scale,opacity] duration-100 [--input-container-height:4rem] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\">\n {children}\n </BaseCombobox.Popup>\n </BaseCombobox.Positioner>\n </BaseCombobox.Portal>\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport type { ComboboxStatusProps } from './combobox.types'\n\nexport function ComboboxStatus({ className, ref, ...props }: ComboboxStatusProps) {\n return (\n <BaseCombobox.Status\n className={cn(\n 'flex items-center gap-2xs p-xs style-text-prose--1 text-on-surface-variant empty:hidden',\n className,\n )}\n ref={ref}\n {...props}\n />\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport { cn } from '@/utils/cn'\n\nimport { Icon } from '../icon'\nimport type { ComboboxTriggerProps } from './combobox.types'\n\nfunction getPlaceholderLabel(placeholder: ComboboxTriggerProps['placeholder']): string | undefined {\n if (typeof placeholder === 'string') {\n return placeholder\n }\n return undefined\n}\n\nexport function ComboboxTrigger({\n placeholder,\n className,\n children,\n ref,\n ...props\n}: ComboboxTriggerProps) {\n return (\n <BaseCombobox.Trigger\n aria-label={getPlaceholderLabel(placeholder)}\n className={cn(\n 'inline-flex h-xl items-center justify-between gap-xl rounded-xl bg-surface pr-sm pl-md style-text-default-0 outline-2 outline-transparent transition-all hover:cursor-pointer hover:outline-border data-popup-open:outline-brand-border',\n className,\n )}\n ref={ref}\n {...props}\n >\n <BaseCombobox.Value placeholder={<span className=\"opacity-70\">{placeholder}</span>} />\n <BaseCombobox.Icon>\n <Icon name=\"chevronsUpDown\" />\n </BaseCombobox.Icon>\n {children}\n </BaseCombobox.Trigger>\n )\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\n\nimport type { ComboboxValueProps } from './combobox.types'\n\nexport function ComboboxValue({ ...props }: ComboboxValueProps) {\n return <BaseCombobox.Value {...props} />\n}\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox'\nimport type { Virtualizer } from '@tanstack/react-virtual'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport type { inputVariants } from '../input/input.types'\n\ntype ComboboxEmptyProps = React.ComponentProps<typeof BaseCombobox.Empty>\ntype ComboboxInputProps = Omit<React.ComponentProps<typeof BaseCombobox.Input>, 'size'> &\n VariantProps<typeof inputVariants> & {\n inline?: boolean\n }\ntype ComboboxItemProps = React.ComponentProps<typeof BaseCombobox.Item>\ntype ComboboxListProps = React.ComponentProps<typeof BaseCombobox.List>\ntype ComboboxPopupProps = React.ComponentProps<typeof BaseCombobox.Positioner>\ntype ComboboxProps = React.ComponentProps<typeof BaseCombobox.Root>\ntype ComboboxChipsProps = React.ComponentProps<typeof BaseCombobox.Chips>\ntype ComboboxChipProps = React.ComponentProps<typeof BaseCombobox.Chip>\ntype ComboboxValueProps = React.ComponentProps<typeof BaseCombobox.Value>\ntype ComboboxTriggerProps = React.ComponentProps<typeof BaseCombobox.Trigger> & {\n placeholder?: string\n}\ntype ComboboxGroupProps = React.ComponentProps<typeof BaseCombobox.Group>\ntype ComboboxGroupLabelProps = React.ComponentProps<typeof BaseCombobox.GroupLabel>\ntype ComboboxCollectionProps = React.ComponentProps<typeof BaseCombobox.Collection>\ntype ComboboxStatusProps = React.ComponentProps<typeof BaseCombobox.Status>\ntype ComboboxVirtualizedListProps<TItem> = Omit<React.ComponentProps<'div'>, 'children'> & {\n open: boolean\n virtualizerRef?: React.RefObject<Virtualizer<HTMLDivElement, HTMLDivElement> | null>\n estimateSize?: number\n overscan?: number\n children?: React.ReactNode | ((item: TItem) => React.ReactNode)\n}\nconst { useFilter } = BaseCombobox,\n { useFilteredItems } = BaseCombobox\n\nexport type {\n ComboboxEmptyProps,\n ComboboxInputProps,\n ComboboxItemProps,\n ComboboxListProps,\n ComboboxPopupProps,\n ComboboxProps,\n ComboboxChipsProps,\n ComboboxChipProps,\n ComboboxValueProps,\n ComboboxTriggerProps,\n ComboboxGroupProps,\n ComboboxGroupLabelProps,\n ComboboxCollectionProps,\n ComboboxStatusProps,\n ComboboxVirtualizedListProps,\n}\nexport { useFilter, useFilteredItems }\n","import { useVirtualizer } from '@tanstack/react-virtual'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { ComboboxItem } from './combobox-item'\nimport { useFilteredItems } from './combobox.types'\nimport type { ComboboxVirtualizedListProps } from './combobox.types'\n\nconst DEFAULT_ESTIMATE_SIZE = 32,\n DEFAULT_OVERSCAN = 20,\n PADDING = 8,\n FIRST_POSITION = 1\ntype TotalSizeStyle = React.CSSProperties & { '--total-size': string }\n\nfunction renderItem<TItem>(\n children: React.ReactNode | ((item: TItem) => React.ReactNode),\n item: TItem,\n) {\n if (typeof children === 'function') {\n return children(item)\n }\n return children\n}\n\nexport function ComboboxVirtualizedList<TItem>({\n open,\n virtualizerRef,\n estimateSize = DEFAULT_ESTIMATE_SIZE,\n overscan = DEFAULT_OVERSCAN,\n className,\n children,\n ...props\n}: ComboboxVirtualizedListProps<TItem>) {\n const filteredItems = useFilteredItems<TItem>(),\n // oxlint-disable-next-line unicorn(no-null)\n scrollElementRef = React.useRef<HTMLDivElement | null>(null),\n // oxlint-disable-next-line react/incompatible-library\n virtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({\n count: filteredItems.length,\n directDomUpdates: true,\n enabled: open,\n estimateSize: () => estimateSize,\n getScrollElement: () => scrollElementRef.current,\n overscan,\n paddingEnd: PADDING,\n paddingStart: PADDING,\n scrollPaddingEnd: PADDING,\n scrollPaddingStart: PADDING,\n }),\n handleScrollElementRef = React.useCallback(\n (element: HTMLDivElement | null) => {\n scrollElementRef.current = element\n if (element) {\n virtualizer.measure()\n }\n },\n [virtualizer],\n ),\n totalSize = virtualizer.getTotalSize(),\n totalSizeStyle: TotalSizeStyle = { '--total-size': `${totalSize}px` }\n\n React.useEffect(() => {\n if (virtualizerRef) {\n virtualizerRef.current = virtualizer\n }\n }, [virtualizer, virtualizerRef])\n\n return (\n <div\n role=\"presentation\"\n ref={handleScrollElementRef}\n style={totalSizeStyle}\n className={cn(\n 'h-[min(22.5rem,var(--total-size))] max-h-(--available-height) scroll-py-3xs overflow-auto overscroll-contain',\n className,\n )}\n {...props}\n >\n <div role=\"presentation\" className=\"relative w-full\" style={{ height: totalSize }}>\n {virtualizer.getVirtualItems().map((virtualItem) => {\n const item = filteredItems[virtualItem.index]\n if (!item) {\n return undefined\n }\n\n return (\n <ComboboxItem\n key={virtualItem.key}\n index={virtualItem.index}\n data-index={virtualItem.index}\n ref={virtualizer.measureElement}\n value={item}\n aria-setsize={filteredItems.length}\n aria-posinset={virtualItem.index + FIRST_POSITION}\n className=\"first-of-type:mt-0!\"\n style={{\n left: 0,\n position: 'absolute',\n top: 0,\n transform: `translateY(${virtualItem.start}px)`,\n width: '100%',\n }}\n >\n {renderItem(children, item)}\n </ComboboxItem>\n )\n })}\n </div>\n </div>\n )\n}\n","import { Combobox as ComboboxRoot } from './combobox'\nimport { ComboboxChip } from './combobox-chip'\nimport { ComboboxChips } from './combobox-chips'\nimport { ComboboxCollection } from './combobox-collection'\nimport { ComboboxEmpty } from './combobox-empty'\nimport { ComboboxGroup } from './combobox-group'\nimport { ComboboxGroupLabel } from './combobox-group-label'\nimport { ComboboxInput } from './combobox-input'\nimport { ComboboxItem } from './combobox-item'\nimport { ComboboxList } from './combobox-list'\nimport { ComboboxPopup } from './combobox-popup'\nimport { ComboboxStatus } from './combobox-status'\nimport { ComboboxTrigger } from './combobox-trigger'\nimport { ComboboxValue } from './combobox-value'\nimport { ComboboxVirtualizedList } from './combobox-virtualized-list'\n\nconst Combobox = Object.assign(ComboboxRoot, {\n Chip: ComboboxChip,\n Chips: ComboboxChips,\n Collection: ComboboxCollection,\n Empty: ComboboxEmpty,\n Group: ComboboxGroup,\n GroupLabel: ComboboxGroupLabel,\n Input: ComboboxInput,\n Item: ComboboxItem,\n List: ComboboxList,\n Popup: ComboboxPopup,\n Status: ComboboxStatus,\n Trigger: ComboboxTrigger,\n Value: ComboboxValue,\n VirtualizedList: ComboboxVirtualizedList,\n})\n\nexport type {\n ComboboxChipProps,\n ComboboxChipsProps,\n ComboboxCollectionProps,\n ComboboxEmptyProps,\n ComboboxGroupLabelProps,\n ComboboxGroupProps,\n ComboboxInputProps,\n ComboboxItemProps,\n ComboboxListProps,\n ComboboxPopupProps,\n ComboboxProps,\n ComboboxStatusProps,\n ComboboxTriggerProps,\n ComboboxValueProps,\n ComboboxVirtualizedListProps,\n} from './combobox.types'\nexport { ComboboxChip } from './combobox-chip'\nexport { ComboboxChips } from './combobox-chips'\nexport { ComboboxCollection } from './combobox-collection'\nexport { ComboboxEmpty } from './combobox-empty'\nexport { ComboboxGroup } from './combobox-group'\nexport { ComboboxGroupLabel } from './combobox-group-label'\nexport { ComboboxInput } from './combobox-input'\nexport { ComboboxItem } from './combobox-item'\nexport { ComboboxList } from './combobox-list'\nexport { ComboboxPopup } from './combobox-popup'\nexport { ComboboxStatus } from './combobox-status'\nexport { ComboboxTrigger } from './combobox-trigger'\nexport { ComboboxValue } from './combobox-value'\nexport { ComboboxVirtualizedList } from './combobox-virtualized-list'\nexport { useFilter, useFilteredItems } from './combobox.types'\n\nexport { Combobox }\n"],"mappings":"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"}
@@ -0,0 +1,49 @@
1
+ import { VariantProps } from "class-variance-authority";
2
+ import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
3
+ type ContextMenuProps = React.ComponentProps<typeof ContextMenu$1.Root>;
4
+ type ContextMenuTriggerProps = React.ComponentProps<typeof ContextMenu$1.Trigger>;
5
+ type ContextMenuPopupProps = React.ComponentProps<typeof ContextMenu$1.Popup>;
6
+ type ContextMenuSeparatorProps = React.ComponentProps<typeof ContextMenu$1.Separator>;
7
+ type ContextMenuSubmenuProps = React.ComponentProps<typeof ContextMenu$1.SubmenuRoot>;
8
+ type ContextMenuShortcutProps = React.ComponentProps<'div'>;
9
+ type ContextMenuGroupProps = React.ComponentProps<typeof ContextMenu$1.Group>;
10
+ type ContextMenuGroupLabelProps = React.ComponentProps<typeof ContextMenu$1.GroupLabel>;
11
+ type ContextMenuCheckboxItemProps = React.ComponentProps<typeof ContextMenu$1.CheckboxItem> & VariantProps<typeof contextMenuItemVariants>;
12
+ type ContextMenuRadioItemProps = React.ComponentProps<typeof ContextMenu$1.RadioItem> & VariantProps<typeof contextMenuItemVariants>;
13
+ type ContextMenuRadioGroupProps = React.ComponentProps<typeof ContextMenu$1.RadioGroup>;
14
+ declare const contextMenuItemVariants: (props?: ({
15
+ tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
16
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string, contextMenuSubmenuTriggerVariants: (props?: ({
17
+ tone?: "accent" | "brand" | "error" | "info" | "neutral" | "success" | "warning" | null | undefined;
18
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
19
+ type ContextMenuItemProps = React.ComponentProps<typeof ContextMenu$1.Item> & VariantProps<typeof contextMenuItemVariants>;
20
+ type ContextMenuSubmenuTriggerProps = React.ComponentProps<typeof ContextMenu$1.SubmenuTrigger> & VariantProps<typeof contextMenuSubmenuTriggerVariants>;
21
+ declare function ContextMenu$2({ ...props }: ContextMenuProps): import("react").JSX.Element;
22
+ export declare function ContextMenuCheckboxItem({ className, children, ref, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
23
+ export declare function ContextMenuGroup({ className, ref, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
24
+ export declare function ContextMenuGroupLabel({ className, ref, ...props }: ContextMenuGroupLabelProps): import("react").JSX.Element;
25
+ export declare function ContextMenuItem({ className, tone, children, ref, ...props }: ContextMenuItemProps): import("react").JSX.Element;
26
+ export declare function ContextMenuPopup({ className, ref, ...props }: ContextMenuPopupProps): import("react").JSX.Element;
27
+ export declare function ContextMenuRadioGroup({ className, ref, ...props }: ContextMenuRadioGroupProps): import("react").JSX.Element;
28
+ export declare function ContextMenuRadioItem({ className, children, ref, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
29
+ export declare function ContextMenuSeparator({ className, ref, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
30
+ export declare function ContextMenuShortcut({ className, ref, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
31
+ export declare function ContextMenuSubmenu({ ...props }: ContextMenuSubmenuProps): import("react").JSX.Element;
32
+ export declare function ContextMenuSubmenuTrigger({ className, children, ref, tone, ...props }: ContextMenuSubmenuTriggerProps): import("react").JSX.Element;
33
+ export declare function ContextMenuTrigger({ className, ref, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
34
+ declare const ContextMenu: typeof ContextMenu$2 & {
35
+ CheckboxItem: typeof ContextMenuCheckboxItem;
36
+ Group: typeof ContextMenuGroup;
37
+ GroupLabel: typeof ContextMenuGroupLabel;
38
+ Item: typeof ContextMenuItem;
39
+ Popup: typeof ContextMenuPopup;
40
+ RadioGroup: typeof ContextMenuRadioGroup;
41
+ RadioItem: typeof ContextMenuRadioItem;
42
+ Separator: typeof ContextMenuSeparator;
43
+ Shortcut: typeof ContextMenuShortcut;
44
+ Submenu: typeof ContextMenuSubmenu;
45
+ SubmenuTrigger: typeof ContextMenuSubmenuTrigger;
46
+ Trigger: typeof ContextMenuTrigger;
47
+ };
48
+ export { ContextMenu, type ContextMenuCheckboxItemProps, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, type ContextMenuItemProps, type ContextMenuPopupProps, type ContextMenuProps, type ContextMenuRadioGroupProps, type ContextMenuRadioItemProps, type ContextMenuSeparatorProps, type ContextMenuShortcutProps, type ContextMenuSubmenuProps, type ContextMenuSubmenuTriggerProps, type ContextMenuTriggerProps };
49
+ //# sourceMappingURL=index.d.ts.map