@accelint/design-toolkit 9.8.0 → 9.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/catalog-info.yaml +7 -4
  2. package/dist/components/accordion/context.d.ts +2 -2
  3. package/dist/components/accordion/group.d.ts +2 -2
  4. package/dist/components/accordion/header.d.ts +2 -2
  5. package/dist/components/accordion/index.d.ts +2 -2
  6. package/dist/components/accordion/panel.d.ts +2 -2
  7. package/dist/components/accordion/trigger.d.ts +2 -2
  8. package/dist/components/action-bar/index.d.ts +2 -2
  9. package/dist/components/audio/index.d.ts +2 -2
  10. package/dist/components/avatar/context.d.ts +4 -4
  11. package/dist/components/avatar/index.d.ts +2 -2
  12. package/dist/components/badge/context.d.ts +4 -4
  13. package/dist/components/badge/index.d.ts +2 -2
  14. package/dist/components/breadcrumbs/index.d.ts +2 -2
  15. package/dist/components/button/__internal__/clear.js +1 -0
  16. package/dist/components/button/__internal__/clear.js.map +1 -1
  17. package/dist/components/button/context.d.ts +8 -8
  18. package/dist/components/button/index.d.ts +2 -2
  19. package/dist/components/button/link.d.ts +2 -2
  20. package/dist/components/button/toggle.d.ts +2 -2
  21. package/dist/components/checkbox/context.d.ts +3 -3
  22. package/dist/components/checkbox/group.d.ts +2 -2
  23. package/dist/components/checkbox/index.d.ts +2 -2
  24. package/dist/components/chip/context.d.ts +4 -4
  25. package/dist/components/chip/deletable.d.ts +2 -2
  26. package/dist/components/chip/index.d.ts +2 -2
  27. package/dist/components/chip/list.d.ts +4 -4
  28. package/dist/components/chip/selectable.d.ts +2 -2
  29. package/dist/components/classification-badge/context.d.ts +4 -4
  30. package/dist/components/classification-badge/index.d.ts +2 -2
  31. package/dist/components/classification-banner/context.d.ts +4 -4
  32. package/dist/components/classification-banner/index.d.ts +2 -2
  33. package/dist/components/clock/index.d.ts +2 -2
  34. package/dist/components/color-picker/index.d.ts +7 -45
  35. package/dist/components/color-picker/index.js +34 -52
  36. package/dist/components/color-picker/index.js.map +1 -1
  37. package/dist/components/color-picker/styles.module.css +5 -1
  38. package/dist/components/color-picker/types.d.ts +17 -4
  39. package/dist/components/combobox-field/context.d.ts +4 -4
  40. package/dist/components/combobox-field/index.d.ts +2 -2
  41. package/dist/components/combobox-field/index.js +19 -1
  42. package/dist/components/combobox-field/index.js.map +1 -1
  43. package/dist/components/coordinate-field/context.d.ts +6 -6
  44. package/dist/components/coordinate-field/index.d.ts +2 -2
  45. package/dist/components/coordinate-field/index.js +49 -42
  46. package/dist/components/coordinate-field/index.js.map +1 -1
  47. package/dist/components/coordinate-field/segment.d.ts +2 -2
  48. package/dist/components/coordinate-field/types.d.ts +5 -0
  49. package/dist/components/coordinate-field/types.js.map +1 -1
  50. package/dist/components/date-field/index.d.ts +2 -2
  51. package/dist/components/deferred-collection/index.d.ts +2 -2
  52. package/dist/components/details-list/context.d.ts +4 -4
  53. package/dist/components/details-list/index.d.ts +2 -2
  54. package/dist/components/details-list/label.d.ts +2 -2
  55. package/dist/components/details-list/value.d.ts +2 -2
  56. package/dist/components/dialog/content.d.ts +2 -2
  57. package/dist/components/dialog/context.d.ts +2 -2
  58. package/dist/components/dialog/footer.d.ts +2 -2
  59. package/dist/components/dialog/index.d.ts +2 -2
  60. package/dist/components/dialog/title.d.ts +2 -2
  61. package/dist/components/divider/context.d.ts +4 -4
  62. package/dist/components/divider/index.d.ts +2 -2
  63. package/dist/components/drawer/back.d.ts +2 -2
  64. package/dist/components/drawer/close.d.ts +2 -2
  65. package/dist/components/drawer/content.d.ts +2 -2
  66. package/dist/components/drawer/context.d.ts +3 -3
  67. package/dist/components/drawer/footer.d.ts +2 -2
  68. package/dist/components/drawer/header-title.d.ts +2 -2
  69. package/dist/components/drawer/header.d.ts +2 -2
  70. package/dist/components/drawer/index.d.ts +2 -2
  71. package/dist/components/drawer/layout-main.d.ts +2 -2
  72. package/dist/components/drawer/layout.d.ts +2 -2
  73. package/dist/components/drawer/menu-item.d.ts +2 -2
  74. package/dist/components/drawer/menu-item.js +2 -2
  75. package/dist/components/drawer/menu.d.ts +2 -2
  76. package/dist/components/drawer/panel.d.ts +2 -2
  77. package/dist/components/drawer/trigger.d.ts +2 -2
  78. package/dist/components/drawer/types.d.ts +1 -1
  79. package/dist/components/drawer/view.d.ts +2 -2
  80. package/dist/components/flashcard/index.d.ts +9 -9
  81. package/dist/components/floating-card/context.d.ts +2 -2
  82. package/dist/components/floating-card/index.d.ts +2 -2
  83. package/dist/components/floating-card/provider.d.ts +2 -2
  84. package/dist/components/floating-card/provider.js +2 -2
  85. package/dist/components/floating-card/provider.js.map +1 -1
  86. package/dist/components/floating-card/styles.module.css +1 -1
  87. package/dist/components/hero/context.d.ts +2 -2
  88. package/dist/components/hero/index.d.ts +2 -2
  89. package/dist/components/hero/subtitle.d.ts +3 -3
  90. package/dist/components/hero/title.d.ts +2 -2
  91. package/dist/components/hotkey/context.d.ts +4 -4
  92. package/dist/components/hotkey/index.d.ts +2 -2
  93. package/dist/components/hotkey/set.d.ts +2 -2
  94. package/dist/components/icon/context.d.ts +4 -4
  95. package/dist/components/icon/index.d.ts +2 -2
  96. package/dist/components/input/context.d.ts +2 -2
  97. package/dist/components/input/index.d.ts +2 -2
  98. package/dist/components/input/styles.module.css +8 -0
  99. package/dist/components/kanban/card-body.d.ts +2 -2
  100. package/dist/components/kanban/card-header-actions.d.ts +2 -2
  101. package/dist/components/kanban/card-header-title.d.ts +2 -2
  102. package/dist/components/kanban/card-header.d.ts +2 -2
  103. package/dist/components/kanban/card.d.ts +2 -2
  104. package/dist/components/kanban/column-actions.d.ts +2 -2
  105. package/dist/components/kanban/column-container.d.ts +2 -2
  106. package/dist/components/kanban/column-content.d.ts +2 -2
  107. package/dist/components/kanban/column-header-actions.d.ts +2 -2
  108. package/dist/components/kanban/column-header-drag-handle.d.ts +2 -2
  109. package/dist/components/kanban/column-header-title.d.ts +2 -2
  110. package/dist/components/kanban/column-header.d.ts +2 -2
  111. package/dist/components/kanban/column.d.ts +2 -2
  112. package/dist/components/kanban/context.d.ts +2 -2
  113. package/dist/components/kanban/header-actions.d.ts +2 -2
  114. package/dist/components/kanban/header-search.d.ts +2 -2
  115. package/dist/components/kanban/header-title.d.ts +2 -2
  116. package/dist/components/kanban/header.d.ts +2 -2
  117. package/dist/components/kanban/kanban.d.ts +4 -4
  118. package/dist/components/label/context.d.ts +4 -4
  119. package/dist/components/label/index.d.ts +2 -2
  120. package/dist/components/lines/index.d.ts +2 -2
  121. package/dist/components/link/context.d.ts +2 -2
  122. package/dist/components/link/index.d.ts +2 -2
  123. package/dist/components/list/context.d.ts +2 -2
  124. package/dist/components/list/index.d.ts +2 -2
  125. package/dist/components/list/item-content.d.ts +2 -2
  126. package/dist/components/list/item-description.d.ts +2 -2
  127. package/dist/components/list/item-title.d.ts +2 -2
  128. package/dist/components/list/item.d.ts +2 -2
  129. package/dist/components/media-controls/context.d.ts +4 -4
  130. package/dist/components/media-controls/fullscreen-button.d.ts +2 -2
  131. package/dist/components/media-controls/index.d.ts +2 -2
  132. package/dist/components/media-controls/mute-button.d.ts +2 -2
  133. package/dist/components/media-controls/play-button.d.ts +2 -2
  134. package/dist/components/media-controls/playback-rate.d.ts +2 -2
  135. package/dist/components/media-controls/seek-button.d.ts +2 -2
  136. package/dist/components/media-controls/time-display.d.ts +2 -2
  137. package/dist/components/media-controls/time-range.d.ts +2 -2
  138. package/dist/components/media-controls/volume-slider.d.ts +2 -2
  139. package/dist/components/menu/context.d.ts +2 -2
  140. package/dist/components/menu/index.d.ts +2 -2
  141. package/dist/components/menu/item-description.d.ts +2 -2
  142. package/dist/components/menu/item-label.d.ts +2 -2
  143. package/dist/components/menu/item.d.ts +2 -2
  144. package/dist/components/menu/section.d.ts +2 -2
  145. package/dist/components/menu/separator.d.ts +2 -2
  146. package/dist/components/menu/submenu.d.ts +3 -3
  147. package/dist/components/notice/index.d.ts +2 -2
  148. package/dist/components/notice/list.d.ts +2 -2
  149. package/dist/components/notice/list.js +1 -1
  150. package/dist/components/notice/notice-icon.d.ts +2 -2
  151. package/dist/components/notice/types.d.ts +1 -1
  152. package/dist/components/options/context.d.ts +2 -2
  153. package/dist/components/options/index.d.ts +2 -2
  154. package/dist/components/options/item-content.d.ts +2 -2
  155. package/dist/components/options/item-description.d.ts +2 -2
  156. package/dist/components/options/item-label.d.ts +3 -2
  157. package/dist/components/options/item-label.js +20 -4
  158. package/dist/components/options/item-label.js.map +1 -1
  159. package/dist/components/options/item.d.ts +2 -2
  160. package/dist/components/options/section.d.ts +2 -2
  161. package/dist/components/options/styles.module.css +20 -0
  162. package/dist/components/pagination/context.d.ts +2 -2
  163. package/dist/components/pagination/pages.d.ts +2 -2
  164. package/dist/components/popover/content.d.ts +2 -2
  165. package/dist/components/popover/footer.d.ts +2 -2
  166. package/dist/components/popover/index.d.ts +2 -2
  167. package/dist/components/popover/title.d.ts +2 -2
  168. package/dist/components/popover/trigger.d.ts +2 -2
  169. package/dist/components/query-builder/action-element.d.ts +2 -2
  170. package/dist/components/query-builder/actions.d.ts +4 -4
  171. package/dist/components/query-builder/combinator-selector.d.ts +2 -2
  172. package/dist/components/query-builder/index.d.ts +2 -2
  173. package/dist/components/query-builder/rule-group.d.ts +4 -4
  174. package/dist/components/query-builder/rule.d.ts +2 -2
  175. package/dist/components/query-builder/value-editor.d.ts +2 -2
  176. package/dist/components/query-builder/value-selector.d.ts +2 -2
  177. package/dist/components/radio/context.d.ts +3 -3
  178. package/dist/components/radio/group.d.ts +2 -2
  179. package/dist/components/radio/index.d.ts +2 -2
  180. package/dist/components/search-field/context.d.ts +4 -4
  181. package/dist/components/search-field/index.d.ts +2 -2
  182. package/dist/components/select-field/context.d.ts +4 -4
  183. package/dist/components/select-field/index.d.ts +2 -2
  184. package/dist/components/sidenav/avatar.d.ts +2 -2
  185. package/dist/components/sidenav/content.d.ts +2 -2
  186. package/dist/components/sidenav/context.d.ts +2 -2
  187. package/dist/components/sidenav/footer.d.ts +2 -2
  188. package/dist/components/sidenav/header.d.ts +2 -2
  189. package/dist/components/sidenav/index.d.ts +2 -2
  190. package/dist/components/sidenav/item.d.ts +2 -2
  191. package/dist/components/sidenav/link.d.ts +2 -2
  192. package/dist/components/sidenav/menu-item.d.ts +2 -2
  193. package/dist/components/sidenav/menu.d.ts +2 -2
  194. package/dist/components/sidenav/trigger.d.ts +2 -2
  195. package/dist/components/sidenav/trigger.js +1 -1
  196. package/dist/components/sidenav/types.d.ts +1 -1
  197. package/dist/components/skeleton/index.d.ts +2 -2
  198. package/dist/components/slider/index.d.ts +2 -2
  199. package/dist/components/slider/styles.module.css +3 -2
  200. package/dist/components/status-indicator/index.d.ts +2 -2
  201. package/dist/components/switch/context.d.ts +4 -4
  202. package/dist/components/switch/index.d.ts +2 -2
  203. package/dist/components/table/body.d.ts +2 -2
  204. package/dist/components/table/cell.d.ts +2 -2
  205. package/dist/components/table/context.d.ts +2 -2
  206. package/dist/components/table/header-cell.d.ts +2 -2
  207. package/dist/components/table/header.d.ts +2 -2
  208. package/dist/components/table/index.d.ts +2 -2
  209. package/dist/components/table/row.d.ts +2 -2
  210. package/dist/components/tabs/context.d.ts +6 -6
  211. package/dist/components/tabs/index.d.ts +2 -2
  212. package/dist/components/tabs/list.d.ts +2 -2
  213. package/dist/components/tabs/panel.d.ts +2 -2
  214. package/dist/components/tabs/tab.d.ts +2 -2
  215. package/dist/components/text-area-field/context.d.ts +4 -4
  216. package/dist/components/text-area-field/index.d.ts +2 -2
  217. package/dist/components/text-field/context.d.ts +4 -4
  218. package/dist/components/text-field/index.d.ts +2 -2
  219. package/dist/components/time-field/index.d.ts +2 -2
  220. package/dist/components/tooltip/index.d.ts +2 -2
  221. package/dist/components/tooltip/trigger.d.ts +2 -2
  222. package/dist/components/tooltip/trigger.js +1 -1
  223. package/dist/components/tree/index.d.ts +2 -2
  224. package/dist/components/tree/index.js +6 -4
  225. package/dist/components/tree/index.js.map +1 -1
  226. package/dist/components/tree/item-actions.d.ts +2 -2
  227. package/dist/components/tree/item-content.d.ts +2 -2
  228. package/dist/components/tree/item-content.js +9 -5
  229. package/dist/components/tree/item-content.js.map +1 -1
  230. package/dist/components/tree/item-description.d.ts +2 -2
  231. package/dist/components/tree/item-label.d.ts +2 -2
  232. package/dist/components/tree/item-prefix-icon.d.ts +2 -2
  233. package/dist/components/tree/item.d.ts +2 -2
  234. package/dist/components/tree/lines.d.ts +4 -2
  235. package/dist/components/tree/lines.js +8 -4
  236. package/dist/components/tree/lines.js.map +1 -1
  237. package/dist/components/tree/styles.module.css +23 -3
  238. package/dist/components/video/index.d.ts +2 -2
  239. package/dist/components/view-stack/context.d.ts +2 -2
  240. package/dist/components/view-stack/index.d.ts +2 -2
  241. package/dist/components/view-stack/index.js +1 -1
  242. package/dist/components/view-stack/trigger.d.ts +2 -2
  243. package/dist/components/view-stack/types.d.ts +1 -1
  244. package/dist/components/view-stack/view.d.ts +2 -2
  245. package/dist/hooks/use-tree/state/index.js +7 -14
  246. package/dist/hooks/use-tree/state/index.js.map +1 -1
  247. package/dist/index.js +3 -3
  248. package/dist/node_modules/.pnpm/@react-aria_collections@3.0.0-rc.7_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/collections/dist/BaseCollection.js +134 -0
  249. package/dist/node_modules/.pnpm/@react-aria_collections@3.0.0-rc.7_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/collections/dist/BaseCollection.js.map +1 -0
  250. package/dist/providers/portal.js +1 -1
  251. package/dist/providers/theme-provider.d.ts +2 -2
  252. package/package.json +14 -9
@@ -12,7 +12,7 @@
12
12
 
13
13
  import { ClassificationBadgeProps } from "./types.js";
14
14
  import "client-only";
15
- import * as react_jsx_runtime26 from "react/jsx-runtime";
15
+ import * as react_jsx_runtime21 from "react/jsx-runtime";
16
16
 
17
17
  //#region src/components/classification-badge/index.d.ts
18
18
 
@@ -51,7 +51,7 @@ import * as react_jsx_runtime26 from "react/jsx-runtime";
51
51
  declare function ClassificationBadge({
52
52
  ref,
53
53
  ...props
54
- }: ClassificationBadgeProps): react_jsx_runtime26.JSX.Element;
54
+ }: ClassificationBadgeProps): react_jsx_runtime21.JSX.Element;
55
55
  //#endregion
56
56
  export { ClassificationBadge };
57
57
  //# sourceMappingURL=index.d.ts.map
@@ -13,13 +13,13 @@
13
13
  import { ProviderProps } from "../../lib/types.js";
14
14
  import { ClassificationBannerProps } from "./types.js";
15
15
  import "client-only";
16
- import * as react10 from "react";
16
+ import * as react5 from "react";
17
17
  import { ContextValue } from "react-aria-components";
18
- import * as react_jsx_runtime30 from "react/jsx-runtime";
18
+ import * as react_jsx_runtime24 from "react/jsx-runtime";
19
19
 
20
20
  //#region src/components/classification-banner/context.d.ts
21
21
  /** React context for sharing ClassificationBanner configuration across components. */
22
- declare const ClassificationBannerContext: react10.Context<ContextValue<ClassificationBannerProps, HTMLDivElement>>;
22
+ declare const ClassificationBannerContext: react5.Context<ContextValue<ClassificationBannerProps, HTMLDivElement>>;
23
23
  /**
24
24
  * Context provider for setting default props across multiple ClassificationBanner components.
25
25
  *
@@ -38,7 +38,7 @@ declare const ClassificationBannerContext: react10.Context<ContextValue<Classifi
38
38
  declare function ClassificationBannerProvider({
39
39
  children,
40
40
  ...props
41
- }: ProviderProps<ClassificationBannerProps>): react_jsx_runtime30.JSX.Element;
41
+ }: ProviderProps<ClassificationBannerProps>): react_jsx_runtime24.JSX.Element;
42
42
  //#endregion
43
43
  export { ClassificationBannerContext, ClassificationBannerProvider };
44
44
  //# sourceMappingURL=context.d.ts.map
@@ -12,7 +12,7 @@
12
12
 
13
13
  import { ClassificationBannerProps } from "./types.js";
14
14
  import "client-only";
15
- import * as react_jsx_runtime34 from "react/jsx-runtime";
15
+ import * as react_jsx_runtime154 from "react/jsx-runtime";
16
16
 
17
17
  //#region src/components/classification-banner/index.d.ts
18
18
 
@@ -39,7 +39,7 @@ import * as react_jsx_runtime34 from "react/jsx-runtime";
39
39
  declare function ClassificationBanner({
40
40
  ref,
41
41
  ...props
42
- }: ClassificationBannerProps): react_jsx_runtime34.JSX.Element;
42
+ }: ClassificationBannerProps): react_jsx_runtime154.JSX.Element;
43
43
  //#endregion
44
44
  export { ClassificationBanner };
45
45
  //# sourceMappingURL=index.d.ts.map
@@ -12,7 +12,7 @@
12
12
 
13
13
  import { ClockProps } from "./types.js";
14
14
  import "client-only";
15
- import * as react_jsx_runtime62 from "react/jsx-runtime";
15
+ import * as react_jsx_runtime70 from "react/jsx-runtime";
16
16
 
17
17
  //#region src/components/clock/index.d.ts
18
18
 
@@ -58,7 +58,7 @@ import * as react_jsx_runtime62 from "react/jsx-runtime";
58
58
  declare function Clock({
59
59
  formatter,
60
60
  ...rest
61
- }: ClockProps): react_jsx_runtime62.JSX.Element;
61
+ }: ClockProps): react_jsx_runtime70.JSX.Element;
62
62
  //#endregion
63
63
  export { Clock };
64
64
  //# sourceMappingURL=index.d.ts.map
@@ -12,57 +12,19 @@
12
12
 
13
13
  import { ColorPickerProps } from "./types.js";
14
14
  import "client-only";
15
- import * as react_jsx_runtime54 from "react/jsx-runtime";
15
+ import * as react_jsx_runtime71 from "react/jsx-runtime";
16
16
 
17
17
  //#region src/components/color-picker/index.d.ts
18
-
19
- /**
20
- * A color picker component that renders a grid of color swatches for selection.
21
- *
22
- * This component provides a simple interface for users to select from a predefined
23
- * set of colors. It renders each color as an interactive swatch that can be clicked
24
- * to select that color. The component supports keyboard navigation, accessibility
25
- * features, and fine-grained styling control through the classNames prop.
26
- *
27
- * @param props - The color picker props.
28
- * @param props.items - Array of color values to display as selectable swatches.
29
- * @param props.classNames - Custom class names for sub-elements.
30
- * @param props.classNames.picker - Class name for the picker container.
31
- * @param props.classNames.item - Class name for individual swatch items.
32
- * @param props.classNames.swatch - Class name for the color swatch elements.
33
- * @returns The color picker component.
34
- *
35
- * @example
36
- * ```tsx
37
- * const colors = [
38
- * '#ff0000',
39
- * '#00ff00',
40
- * '#0000ff',
41
- * ];
42
- *
43
- * <ColorPicker
44
- * items={colors}
45
- * value="#ff0000"
46
- * onChange={(color) => console.log('Selected:', color)}
47
- * classNames={{
48
- * picker: 'gap-4',
49
- * item: 'rounded-lg',
50
- * swatch: 'w-8 h-8',
51
- * }}
52
- * />
53
- * ```
54
- *
55
- * @remarks
56
- * - Colors can be provided as Color objects or color strings
57
- * - The component automatically handles color parsing and validation
58
- * - Supports all accessibility features from react-aria-components
59
- * - Uses a grid layout by default but can be customized via the layout prop
60
- */
61
18
  declare function ColorPicker({
62
19
  classNames,
20
+ defaultValue,
21
+ isRequired,
63
22
  items,
23
+ label,
24
+ ref,
25
+ value,
64
26
  ...rest
65
- }: ColorPickerProps): react_jsx_runtime54.JSX.Element;
27
+ }: ColorPickerProps): react_jsx_runtime71.JSX.Element;
66
28
  //#endregion
67
29
  export { ColorPicker };
68
30
  //# sourceMappingURL=index.d.ts.map
@@ -13,64 +13,46 @@
13
13
 
14
14
  'use client';
15
15
 
16
+ import { Label as Label$1 } from "../label/index.js";
16
17
  import "client-only";
18
+ import { useMemo } from "react";
17
19
  import { clsx } from "@accelint/design-foundation/lib/utils";
18
20
  import { ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, composeRenderProps } from "react-aria-components";
19
- import { jsx } from "react/jsx-runtime";
21
+ import { jsx, jsxs } from "react/jsx-runtime";
22
+ import { rgba255TupleToHex } from "@accelint/converters/hex";
23
+ import { uuid } from "@accelint/core";
24
+ import { isRgba255Tuple } from "@accelint/predicates/is-rgba-255-tuple";
20
25
  import styles from "./styles.module.css";
21
26
 
22
27
  //#region src/components/color-picker/index.tsx
23
- /**
24
- * A color picker component that renders a grid of color swatches for selection.
25
- *
26
- * This component provides a simple interface for users to select from a predefined
27
- * set of colors. It renders each color as an interactive swatch that can be clicked
28
- * to select that color. The component supports keyboard navigation, accessibility
29
- * features, and fine-grained styling control through the classNames prop.
30
- *
31
- * @param props - The color picker props.
32
- * @param props.items - Array of color values to display as selectable swatches.
33
- * @param props.classNames - Custom class names for sub-elements.
34
- * @param props.classNames.picker - Class name for the picker container.
35
- * @param props.classNames.item - Class name for individual swatch items.
36
- * @param props.classNames.swatch - Class name for the color swatch elements.
37
- * @returns The color picker component.
38
- *
39
- * @example
40
- * ```tsx
41
- * const colors = [
42
- * '#ff0000',
43
- * '#00ff00',
44
- * '#0000ff',
45
- * ];
46
- *
47
- * <ColorPicker
48
- * items={colors}
49
- * value="#ff0000"
50
- * onChange={(color) => console.log('Selected:', color)}
51
- * classNames={{
52
- * picker: 'gap-4',
53
- * item: 'rounded-lg',
54
- * swatch: 'w-8 h-8',
55
- * }}
56
- * />
57
- * ```
58
- *
59
- * @remarks
60
- * - Colors can be provided as Color objects or color strings
61
- * - The component automatically handles color parsing and validation
62
- * - Supports all accessibility features from react-aria-components
63
- * - Uses a grid layout by default but can be customized via the layout prop
64
- */
65
- function ColorPicker({ classNames, items, ...rest }) {
66
- return /* @__PURE__ */ jsx(ColorSwatchPicker, {
67
- ...rest,
68
- className: composeRenderProps(classNames?.picker, (className) => clsx(styles.picker, className)),
69
- children: items.map((color) => /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
70
- className: composeRenderProps(classNames?.item, (className) => clsx(styles.item, className)),
71
- color,
72
- children: /* @__PURE__ */ jsx(ColorSwatch, { className: composeRenderProps(classNames?.swatch, (className) => clsx(styles.swatch, className)) })
73
- }, color.toString("hexa")))
28
+ function normalizeColor(value) {
29
+ return isRgba255Tuple(value) ? rgba255TupleToHex(value) : value;
30
+ }
31
+ function ColorPicker({ classNames, defaultValue, isRequired, items, label, ref, value, ...rest }) {
32
+ const labelId = useMemo(() => label ? uuid({ path: [label] }) : void 0, [label]);
33
+ return /* @__PURE__ */ jsxs("div", {
34
+ ref,
35
+ className: clsx(styles.container, classNames?.container),
36
+ children: [label && /* @__PURE__ */ jsx(Label$1, {
37
+ className: classNames?.label,
38
+ id: labelId,
39
+ isRequired,
40
+ children: label
41
+ }), /* @__PURE__ */ jsx(ColorSwatchPicker, {
42
+ ...rest,
43
+ "aria-labelledby": labelId,
44
+ defaultValue: normalizeColor(defaultValue),
45
+ value: normalizeColor(value),
46
+ className: composeRenderProps(classNames?.picker, (className) => clsx(styles.picker, className)),
47
+ children: items.map((item) => {
48
+ const color = normalizeColor(item);
49
+ return /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
50
+ className: composeRenderProps(classNames?.item, (className) => clsx(styles.item, className)),
51
+ color,
52
+ children: /* @__PURE__ */ jsx(ColorSwatch, { className: composeRenderProps(classNames?.swatch, (className) => clsx(styles.swatch, className)) })
53
+ }, typeof color === "string" ? color : color.toString("hexa"));
54
+ })
55
+ })]
74
56
  });
75
57
  }
76
58
 
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n ColorSwatch,\n ColorSwatchPicker,\n ColorSwatchPickerItem,\n composeRenderProps,\n} from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { ColorPickerProps } from './types';\n\n/**\n * A color picker component that renders a grid of color swatches for selection.\n *\n * This component provides a simple interface for users to select from a predefined\n * set of colors. It renders each color as an interactive swatch that can be clicked\n * to select that color. The component supports keyboard navigation, accessibility\n * features, and fine-grained styling control through the classNames prop.\n *\n * @param props - The color picker props.\n * @param props.items - Array of color values to display as selectable swatches.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.classNames.picker - Class name for the picker container.\n * @param props.classNames.item - Class name for individual swatch items.\n * @param props.classNames.swatch - Class name for the color swatch elements.\n * @returns The color picker component.\n *\n * @example\n * ```tsx\n * const colors = [\n * '#ff0000',\n * '#00ff00',\n * '#0000ff',\n * ];\n *\n * <ColorPicker\n * items={colors}\n * value=\"#ff0000\"\n * onChange={(color) => console.log('Selected:', color)}\n * classNames={{\n * picker: 'gap-4',\n * item: 'rounded-lg',\n * swatch: 'w-8 h-8',\n * }}\n * />\n * ```\n *\n * @remarks\n * - Colors can be provided as Color objects or color strings\n * - The component automatically handles color parsing and validation\n * - Supports all accessibility features from react-aria-components\n * - Uses a grid layout by default but can be customized via the layout prop\n */\nexport function ColorPicker({ classNames, items, ...rest }: ColorPickerProps) {\n return (\n <ColorSwatchPicker\n {...rest}\n className={composeRenderProps(classNames?.picker, (className) =>\n clsx(styles.picker, className),\n )}\n >\n {items.map((color) => (\n <ColorSwatchPickerItem\n key={color.toString('hexa')}\n className={composeRenderProps(classNames?.item, (className) =>\n clsx(styles.item, className),\n )}\n color={color}\n >\n <ColorSwatch\n className={composeRenderProps(classNames?.swatch, (className) =>\n clsx(styles.swatch, className),\n )}\n />\n </ColorSwatchPickerItem>\n ))}\n </ColorSwatchPicker>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAgB,YAAY,EAAE,YAAY,OAAO,GAAG,QAA0B;AAC5E,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B;YAEA,MAAM,KAAK,UACV,oBAAC;GAEC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;GACM;aAEP,oBAAC,eACC,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B,GACD;KAVG,MAAM,SAAS,OAAO,CAWL,CACxB;GACgB"}
1
+ {"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { rgba255TupleToHex } from '@accelint/converters/hex';\nimport { uuid } from '@accelint/core';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n isRgba255Tuple,\n type Rgba255Tuple,\n} from '@accelint/predicates/is-rgba-255-tuple';\nimport { useMemo } from 'react';\nimport {\n ColorSwatch,\n ColorSwatchPicker,\n ColorSwatchPickerItem,\n composeRenderProps,\n type Color,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { ColorPickerProps } from './types';\n\n/**\n * A color picker component that renders a grid of color swatches for selection.\n *\n * This component provides a simple interface for users to select from a predefined\n * set of colors. It renders each color as an interactive swatch that can be clicked\n * to select that color. The component supports keyboard navigation, accessibility\n * features, and fine-grained styling control through the classNames prop.\n *\n * @param props - The color picker props.\n * @param props.items - Array of color values to display as selectable swatches.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.classNames.container - Class name for the outer container element.\n * @param props.classNames.label - Class name for the label element.\n * @param props.classNames.picker - Class name for the picker container.\n * @param props.classNames.item - Class name for individual swatch items.\n * @param props.classNames.swatch - Class name for the color swatch elements.\n * @param props.label - Label text displayed above the picker.\n * @returns The color picker component.\n *\n * @example\n * ```tsx\n * const colors = [\n * '#ff0000',\n * '#00ff00',\n * '#0000ff',\n * ];\n *\n * <ColorPicker\n * items={colors}\n * value=\"#ff0000\"\n * onChange={(color) => console.log('Selected:', color)}\n * classNames={{\n * picker: 'gap-4',\n * item: 'rounded-lg',\n * swatch: 'w-8 h-8',\n * }}\n * />\n * ```\n *\n * @remarks\n * - Colors can be provided as Color objects or color strings\n * - The component automatically handles color parsing and validation\n * - Supports all accessibility features from react-aria-components\n * - Uses a grid layout by default but can be customized via the layout prop\n */\nfunction normalizeColor(value: string | Color | Rgba255Tuple): string | Color;\nfunction normalizeColor(\n value: string | Color | Rgba255Tuple | undefined,\n): string | Color | undefined;\nfunction normalizeColor(\n value: string | Color | Rgba255Tuple | undefined,\n): string | Color | undefined {\n return isRgba255Tuple(value) ? rgba255TupleToHex(value) : value;\n}\n\nexport function ColorPicker({\n classNames,\n defaultValue,\n isRequired,\n items,\n label,\n ref,\n value,\n ...rest\n}: ColorPickerProps) {\n const labelId = useMemo(\n () => (label ? uuid({ path: [label] }) : undefined),\n [label],\n );\n\n return (\n <div ref={ref} className={clsx(styles.container, classNames?.container)}>\n {label && (\n <Label\n className={classNames?.label}\n id={labelId}\n isRequired={isRequired}\n >\n {label}\n </Label>\n )}\n <ColorSwatchPicker\n {...rest}\n aria-labelledby={labelId}\n defaultValue={normalizeColor(defaultValue)}\n value={normalizeColor(value)}\n className={composeRenderProps(classNames?.picker, (className) =>\n clsx(styles.picker, className),\n )}\n >\n {items.map((item) => {\n const color = normalizeColor(item);\n return (\n <ColorSwatchPickerItem\n key={typeof color === 'string' ? color : color.toString('hexa')}\n className={composeRenderProps(classNames?.item, (className) =>\n clsx(styles.item, className),\n )}\n color={color}\n >\n <ColorSwatch\n className={composeRenderProps(classNames?.swatch, (className) =>\n clsx(styles.swatch, className),\n )}\n />\n </ColorSwatchPickerItem>\n );\n })}\n </ColorSwatchPicker>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAS,eACP,OAC4B;AAC5B,QAAO,eAAe,MAAM,GAAG,kBAAkB,MAAM,GAAG;;AAG5D,SAAgB,YAAY,EAC1B,YACA,cACA,YACA,OACA,OACA,KACA,OACA,GAAG,QACgB;CACnB,MAAM,UAAU,cACP,QAAQ,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,QACzC,CAAC,MAAM,CACR;AAED,QACE,qBAAC;EAAS;EAAK,WAAW,KAAK,OAAO,WAAW,YAAY,UAAU;aACpE,SACC,oBAACA;GACC,WAAW,YAAY;GACvB,IAAI;GACQ;aAEX;IACK,EAEV,oBAAC;GACC,GAAI;GACJ,mBAAiB;GACjB,cAAc,eAAe,aAAa;GAC1C,OAAO,eAAe,MAAM;GAC5B,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B;aAEA,MAAM,KAAK,SAAS;IACnB,MAAM,QAAQ,eAAe,KAAK;AAClC,WACE,oBAAC;KAEC,WAAW,mBAAmB,YAAY,OAAO,cAC/C,KAAK,OAAO,MAAM,UAAU,CAC7B;KACM;eAEP,oBAAC,eACC,WAAW,mBAAmB,YAAY,SAAS,cACjD,KAAK,OAAO,QAAQ,UAAU,CAC/B,GACD;OAVG,OAAO,UAAU,WAAW,QAAQ,MAAM,SAAS,OAAO,CAWzC;KAE1B;IACgB;GAChB"}
@@ -13,8 +13,12 @@
13
13
  @reference '@accelint/design-foundation/styles';
14
14
 
15
15
  @layer components.l1 {
16
+ .container {
17
+ @apply gap-xs flex flex-col;
18
+ }
19
+
16
20
  .picker {
17
- @apply gap-s flex flex-wrap;
21
+ @apply gap-s p-xxs flex flex-wrap;
18
22
  }
19
23
 
20
24
  .item {
@@ -11,15 +11,20 @@
11
11
  */
12
12
 
13
13
  import { RefAttributes } from "react";
14
- import { ColorSwatchPickerItemProps, ColorSwatchPickerProps, ColorSwatchProps } from "react-aria-components";
14
+ import { ColorSwatchPickerItemProps, ColorSwatchPickerProps, ColorSwatchProps, LabelProps } from "react-aria-components";
15
+ import { Rgba255Tuple } from "@accelint/predicates/is-rgba-255-tuple";
15
16
 
16
17
  //#region src/components/color-picker/types.d.ts
17
18
  /**
18
19
  * Props for the ColorPicker component.
19
20
  */
20
- type ColorPickerProps = Omit<ColorSwatchPickerProps, 'children' | 'layout'> & RefAttributes<HTMLDivElement> & {
21
+ type ColorPickerProps = Omit<ColorSwatchPickerProps, 'children' | 'defaultValue' | 'layout' | 'value'> & RefAttributes<HTMLDivElement> & {
21
22
  /** Custom class names for sub-elements. */
22
23
  classNames?: {
24
+ /** Class name for the outer container element. */
25
+ container?: string;
26
+ /** Class name for the label element. */
27
+ label?: LabelProps['className'];
23
28
  /** Class name for the picker container. */
24
29
  picker?: ColorSwatchPickerProps['className'];
25
30
  /** Class name for individual swatch items. */
@@ -27,8 +32,16 @@ type ColorPickerProps = Omit<ColorSwatchPickerProps, 'children' | 'layout'> & Re
27
32
  /** Class name for the color swatch elements. */
28
33
  swatch?: ColorSwatchProps['className'];
29
34
  };
30
- /** Array of color values to display as selectable swatches. */
31
- items: ColorSwatchPickerItemProps['color'][];
35
+ /** Default selected color value. Accepts a color string, Color object, or RGBA 255 tuple. */
36
+ defaultValue?: ColorSwatchPickerProps['defaultValue'] | Rgba255Tuple;
37
+ /** Controlled selected color value. Accepts a color string, Color object, or RGBA 255 tuple. */
38
+ value?: ColorSwatchPickerProps['defaultValue'] | Rgba255Tuple;
39
+ /** Array of color values to display as selectable swatches. Accepts color strings, Color objects, or RGBA 255 tuples. */
40
+ items: (ColorSwatchPickerItemProps['color'] | Rgba255Tuple)[];
41
+ /** Whether the associated field is required. */
42
+ isRequired?: boolean;
43
+ /** Label text displayed above the picker. */
44
+ label?: string;
32
45
  };
33
46
  //#endregion
34
47
  export { ColorPickerProps };
@@ -14,13 +14,13 @@ import { ProviderProps } from "../../lib/types.js";
14
14
  import { OptionsDataItem } from "../options/types.js";
15
15
  import { ComboBoxFieldProps } from "./types.js";
16
16
  import "client-only";
17
- import * as react25 from "react";
17
+ import * as react21 from "react";
18
18
  import { ContextValue } from "react-aria-components";
19
- import * as react_jsx_runtime66 from "react/jsx-runtime";
19
+ import * as react_jsx_runtime72 from "react/jsx-runtime";
20
20
 
21
21
  //#region src/components/combobox-field/context.d.ts
22
22
  /** React context for sharing ComboBoxField configuration across components. */
23
- declare const ComboBoxFieldContext: react25.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
23
+ declare const ComboBoxFieldContext: react21.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
24
24
  /**
25
25
  * Context provider for setting default props across multiple ComboBoxField components.
26
26
  *
@@ -39,7 +39,7 @@ declare const ComboBoxFieldContext: react25.Context<ContextValue<ComboBoxFieldPr
39
39
  declare function ComboBoxFieldProvider<T extends OptionsDataItem>({
40
40
  children,
41
41
  ...props
42
- }: ProviderProps<ComboBoxFieldProps<T>>): react_jsx_runtime66.JSX.Element;
42
+ }: ProviderProps<ComboBoxFieldProps<T>>): react_jsx_runtime72.JSX.Element;
43
43
  //#endregion
44
44
  export { ComboBoxFieldContext, ComboBoxFieldProvider };
45
45
  //# sourceMappingURL=context.d.ts.map
@@ -13,7 +13,7 @@
13
13
  import { OptionsDataItem } from "../options/types.js";
14
14
  import { ComboBoxFieldProps } from "./types.js";
15
15
  import "client-only";
16
- import * as react_jsx_runtime71 from "react/jsx-runtime";
16
+ import * as react_jsx_runtime73 from "react/jsx-runtime";
17
17
 
18
18
  //#region src/components/combobox-field/index.d.ts
19
19
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime71 from "react/jsx-runtime";
43
43
  declare function ComboBoxField<T extends OptionsDataItem>({
44
44
  ref,
45
45
  ...props
46
- }: ComboBoxFieldProps<T>): react_jsx_runtime71.JSX.Element;
46
+ }: ComboBoxFieldProps<T>): react_jsx_runtime73.JSX.Element;
47
47
  //#endregion
48
48
  export { ComboBoxField };
49
49
  //# sourceMappingURL=index.d.ts.map
@@ -16,10 +16,11 @@
16
16
  import { Icon } from "../icon/index.js";
17
17
  import { Label as Label$1 } from "../label/index.js";
18
18
  import { ComboBoxFieldContext } from "./context.js";
19
+ import { $23b9f4fcf0fe224b$export$d68d59712b04d9d1 } from "../../node_modules/.pnpm/@react-aria_collections@3.0.0-rc.7_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/collections/dist/BaseCollection.js";
19
20
  import { ClearButton } from "../button/__internal__/clear.js";
20
21
  import { Options } from "../options/index.js";
21
22
  import "client-only";
22
- import { useCallback } from "react";
23
+ import { useCallback, useRef } from "react";
23
24
  import { clsx } from "@accelint/design-foundation/lib/utils";
24
25
  import { Button, ComboBox, FieldError, Input, ListLayout, Popover, Text, Virtualizer, composeRenderProps, useContextProps } from "react-aria-components";
25
26
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -28,6 +29,12 @@ import { useControlledState } from "@react-stately/utils";
28
29
  import styles from "./styles.module.css";
29
30
 
30
31
  //#region src/components/combobox-field/index.tsx
32
+ if (Object.getOwnPropertyDescriptor($23b9f4fcf0fe224b$export$d68d59712b04d9d1.prototype, "childNodes")?.get) Object.defineProperty($23b9f4fcf0fe224b$export$d68d59712b04d9d1.prototype, "childNodes", {
33
+ get() {
34
+ return [];
35
+ },
36
+ configurable: true
37
+ });
31
38
  /**
32
39
  * ComboBoxField - Accessible searchable combobox with dropdown options
33
40
  *
@@ -55,6 +62,7 @@ function ComboBoxField({ ref, ...props }) {
55
62
  [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);
56
63
  const { children, classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, inputValue: inputValueProp, defaultInputValue = "", label: labelProp, layoutOptions, menuTrigger = "focus", size = "medium", isInvalid: isInvalidProp, isReadOnly = false, isClearable = true, onInputChange, onKeyDown, ...rest } = props;
57
64
  const [inputValue, setInputValue] = useControlledState(inputValueProp, defaultInputValue, onInputChange);
65
+ const pointerDownInsidePopoverRef = useRef(false);
58
66
  const errorMessage = errorMessageProp || null;
59
67
  const isSmall = size === "small";
60
68
  const handleClear = useCallback(() => {
@@ -124,6 +132,16 @@ function ComboBoxField({ ref, ...props }) {
124
132
  children: errorMessage
125
133
  }),
126
134
  /* @__PURE__ */ jsx(Popover, {
135
+ onPointerDownCapture: () => {
136
+ pointerDownInsidePopoverRef.current = true;
137
+ },
138
+ onPointerUpCapture: (e) => {
139
+ if (!pointerDownInsidePopoverRef.current) {
140
+ e.stopPropagation();
141
+ e.preventDefault();
142
+ }
143
+ pointerDownInsidePopoverRef.current = false;
144
+ },
127
145
  className: composeRenderProps(classNames?.popover, (className) => clsx(styles.popover, className)),
128
146
  children: /* @__PURE__ */ jsx(Virtualizer, {
129
147
  layout: ListLayout,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/combobox-field/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport { useControlledState } from '@react-stately/utils';\nimport { useCallback } from 'react';\nimport {\n Button,\n ComboBox,\n type ComboBoxProps,\n composeRenderProps,\n FieldError,\n Input,\n ListLayout,\n Popover,\n Text,\n useContextProps,\n Virtualizer,\n} from 'react-aria-components';\nimport { ClearButton } from '../button/__internal__/clear';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { ComboBoxFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem } from '../options/types';\nimport type { ComboBoxFieldProps } from './types';\n\n/**\n * ComboBoxField - Accessible searchable combobox with dropdown options\n *\n * A combobox field that provides a searchable input with virtualized dropdown\n * options and support for sections, icons, and rich content.\n *\n * @param props - The combobox field props.\n * @param props.ref - Reference to the field element.\n * @param props.children - Render function for options.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.label - Label text displayed above the field.\n * @param props.description - Helper text displayed below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.size - Size variant of the field.\n * @returns The combobox field component.\n *\n * @example\n * ```tsx\n * <ComboBoxField defaultItems={items}>\n * {(item) => <OptionsItem key={item.id} textValue={item.name}>{item.name}</OptionsItem>}\n * </ComboBoxField>\n * ```\n */\nexport function ComboBoxField<T extends OptionsDataItem>({\n ref,\n ...props\n}: ComboBoxFieldProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n const {\n children,\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n inputValue: inputValueProp,\n defaultInputValue = '',\n label: labelProp,\n layoutOptions,\n menuTrigger = 'focus',\n size = 'medium',\n isInvalid: isInvalidProp,\n isReadOnly = false,\n isClearable = true,\n onInputChange,\n onKeyDown,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useControlledState(\n inputValueProp,\n defaultInputValue,\n onInputChange,\n );\n\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n const handleClear = useCallback(() => {\n setInputValue('');\n }, [setInputValue]);\n\n const handleKeyDown = useCallback<Required<ComboBoxProps<T>>['onKeyDown']>(\n (event) => {\n onKeyDown?.(event);\n if (isClearable && event.key === 'Escape' && inputValue) {\n handleClear();\n }\n },\n [onKeyDown, isClearable, handleClear, inputValue],\n );\n\n return (\n <ComboBox<T>\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n clsx('group/combobox-field', styles.field, className),\n )}\n menuTrigger={menuTrigger}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n isReadOnly={isReadOnly}\n inputValue={inputValue}\n onInputChange={setInputValue}\n onKeyDown={handleKeyDown}\n data-size={size}\n data-empty={!inputValue || null}\n >\n {({ isDisabled, isInvalid, isRequired }) => {\n const shouldShowDescription =\n !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n return (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={clsx(styles.label, classNames?.label)}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <div\n className={clsx(styles.control, classNames?.control)}\n data-readonly={isReadOnly || null}\n >\n <Input\n {...inputProps}\n tabIndex={isReadOnly ? -1 : 0}\n className={composeRenderProps(classNames?.input, (className) =>\n clsx(styles.input, className),\n )}\n title={inputProps?.value ? String(inputProps?.value) : ''}\n />\n {!isReadOnly && isClearable && (\n <ClearButton\n className={composeRenderProps(\n classNames?.clear,\n (className) => clsx(styles.clear, className),\n )}\n isDisabled={isDisabled}\n onPress={handleClear}\n />\n )}\n {!isReadOnly && (\n <Button\n className={composeRenderProps(\n classNames?.trigger,\n (className) => clsx(styles.trigger, className),\n )}\n >\n <Icon size='small'>\n <ChevronDown />\n </Icon>\n </Button>\n )}\n </div>\n {shouldShowDescription && (\n <Text\n className={clsx(styles.description, classNames?.description)}\n slot='description'\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n clsx(styles.error, className),\n )}\n >\n {errorMessage}\n </FieldError>\n <Popover\n className={composeRenderProps(classNames?.popover, (className) =>\n clsx(styles.popover, className),\n )}\n >\n <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n <Options>{children}</Options>\n </Virtualizer>\n </Popover>\n </>\n );\n }}\n </ComboBox>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,cAAyC,EACvD,KACA,GAAG,SACqB;AACxB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,UACA,YACA,aAAa,iBACb,cAAc,kBACd,YACA,YAAY,gBACZ,oBAAoB,IACpB,OAAO,WACP,eACA,cAAc,SACd,OAAO,UACP,WAAW,eACX,aAAa,OACb,cAAc,MACd,eACA,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,iBAAiB,mBAClC,gBACA,mBACA,cACD;CAED,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;CAEzB,MAAM,cAAc,kBAAkB;AACpC,gBAAc,GAAG;IAChB,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB,aACnB,UAAU;AACT,cAAY,MAAM;AAClB,MAAI,eAAe,MAAM,QAAQ,YAAY,WAC3C,cAAa;IAGjB;EAAC;EAAW;EAAa;EAAa;EAAW,CAClD;AAED,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,wBAAwB,OAAO,OAAO,UAAU,CACtD;EACY;EACb,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACA;EACZ,eAAe;EACf,WAAW;EACX,aAAW;EACX,cAAY,CAAC,cAAc;aAEzB,EAAE,YAAY,WAAW,iBAAiB;GAC1C,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,UACE;IACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACA;KACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;KACpC;KACA;eAEX;MACK;IAEV,qBAAC;KACC,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;KACpD,iBAAe,cAAc;;MAE7B,oBAAC;OACC,GAAI;OACJ,UAAU,aAAa,KAAK;OAC5B,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;OACD,OAAO,YAAY,QAAQ,OAAO,YAAY,MAAM,GAAG;QACvD;MACD,CAAC,cAAc,eACd,oBAAC;OACC,WAAW,mBACT,YAAY,QACX,cAAc,KAAK,OAAO,OAAO,UAAU,CAC7C;OACW;OACZ,SAAS;QACT;MAEH,CAAC,cACA,oBAAC;OACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;iBAED,oBAAC;QAAK,MAAK;kBACT,oBAAC,gBAAc;SACV;QACA;;MAEP;IACL,yBACC,oBAAC;KACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;KAC5D,MAAK;eAEJ;MACI;IAET,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAEA;MACU;IACb,oBAAC;KACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;eAED,oBAAC;MAAY,QAAQ;MAA2B;gBAC9C,oBAAC,WAAS,WAAmB;OACjB;MACN;OACT;;GAGE"}
1
+ {"version":3,"file":"index.js","names":["CollectionNode","Label"],"sources":["../../../src/components/combobox-field/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport { CollectionNode } from '@react-aria/collections';\nimport { useControlledState } from '@react-stately/utils';\nimport { useCallback, useRef } from 'react';\n\n// Patch CollectionNode.childNodes getter to return an empty array instead of\n// throwing. React 19 dev-mode profiling (logComponentRender → addObjectDiffToProperties)\n// accesses this getter when diffing component props during commitPassiveMountOnFiber.\n// The thrown error prevents useComboBoxState's effect from running, breaking\n// internal state tracking and causing input value resets on every keystroke\n// with static children.\n// https://github.com/adobe/react-spectrum/issues/9405\nif (\n Object.getOwnPropertyDescriptor(CollectionNode.prototype, 'childNodes')?.get\n) {\n Object.defineProperty(CollectionNode.prototype, 'childNodes', {\n get() {\n return [];\n },\n configurable: true,\n });\n}\n\nimport {\n Button,\n ComboBox,\n type ComboBoxProps,\n composeRenderProps,\n FieldError,\n Input,\n ListLayout,\n Popover,\n Text,\n useContextProps,\n Virtualizer,\n} from 'react-aria-components';\nimport { ClearButton } from '../button/__internal__/clear';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { ComboBoxFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { OptionsDataItem } from '../options/types';\nimport type { ComboBoxFieldProps } from './types';\n\n/**\n * ComboBoxField - Accessible searchable combobox with dropdown options\n *\n * A combobox field that provides a searchable input with virtualized dropdown\n * options and support for sections, icons, and rich content.\n *\n * @param props - The combobox field props.\n * @param props.ref - Reference to the field element.\n * @param props.children - Render function for options.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.label - Label text displayed above the field.\n * @param props.description - Helper text displayed below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.size - Size variant of the field.\n * @returns The combobox field component.\n *\n * @example\n * ```tsx\n * <ComboBoxField defaultItems={items}>\n * {(item) => <OptionsItem key={item.id} textValue={item.name}>{item.name}</OptionsItem>}\n * </ComboBoxField>\n * ```\n */\nexport function ComboBoxField<T extends OptionsDataItem>({\n ref,\n ...props\n}: ComboBoxFieldProps<T>) {\n [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n const {\n children,\n classNames,\n description: descriptionProp,\n errorMessage: errorMessageProp,\n inputProps,\n inputValue: inputValueProp,\n defaultInputValue = '',\n label: labelProp,\n layoutOptions,\n menuTrigger = 'focus',\n size = 'medium',\n isInvalid: isInvalidProp,\n isReadOnly = false,\n isClearable = true,\n onInputChange,\n onKeyDown,\n ...rest\n } = props;\n\n const [inputValue, setInputValue] = useControlledState(\n inputValueProp,\n defaultInputValue,\n onInputChange,\n );\n\n const pointerDownInsidePopoverRef = useRef(false);\n const errorMessage = errorMessageProp || null; // Protect against empty string\n const isSmall = size === 'small';\n\n const handleClear = useCallback(() => {\n setInputValue('');\n }, [setInputValue]);\n\n const handleKeyDown = useCallback<Required<ComboBoxProps<T>>['onKeyDown']>(\n (event) => {\n onKeyDown?.(event);\n if (isClearable && event.key === 'Escape' && inputValue) {\n handleClear();\n }\n },\n [onKeyDown, isClearable, handleClear, inputValue],\n );\n\n return (\n <ComboBox<T>\n {...rest}\n ref={ref}\n className={composeRenderProps(classNames?.field, (className) =>\n clsx('group/combobox-field', styles.field, className),\n )}\n menuTrigger={menuTrigger}\n isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n isReadOnly={isReadOnly}\n inputValue={inputValue}\n onInputChange={setInputValue}\n onKeyDown={handleKeyDown}\n data-size={size}\n data-empty={!inputValue || null}\n >\n {({ isDisabled, isInvalid, isRequired }) => {\n const shouldShowDescription =\n !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n return (\n <>\n {!!labelProp && !isSmall && (\n <Label\n className={clsx(styles.label, classNames?.label)}\n isDisabled={isDisabled}\n isRequired={isRequired}\n >\n {labelProp}\n </Label>\n )}\n <div\n className={clsx(styles.control, classNames?.control)}\n data-readonly={isReadOnly || null}\n >\n <Input\n {...inputProps}\n tabIndex={isReadOnly ? -1 : 0}\n className={composeRenderProps(classNames?.input, (className) =>\n clsx(styles.input, className),\n )}\n title={inputProps?.value ? String(inputProps?.value) : ''}\n />\n {!isReadOnly && isClearable && (\n <ClearButton\n className={composeRenderProps(\n classNames?.clear,\n (className) => clsx(styles.clear, className),\n )}\n isDisabled={isDisabled}\n onPress={handleClear}\n />\n )}\n {!isReadOnly && (\n <Button\n className={composeRenderProps(\n classNames?.trigger,\n (className) => clsx(styles.trigger, className),\n )}\n >\n <Icon size='small'>\n <ChevronDown />\n </Icon>\n </Button>\n )}\n </div>\n {shouldShowDescription && (\n <Text\n className={clsx(styles.description, classNames?.description)}\n slot='description'\n >\n {descriptionProp}\n </Text>\n )}\n <FieldError\n className={composeRenderProps(classNames?.error, (className) =>\n clsx(styles.error, className),\n )}\n >\n {errorMessage}\n </FieldError>\n <Popover\n onPointerDownCapture={() => {\n pointerDownInsidePopoverRef.current = true;\n }}\n onPointerUpCapture={(e) => {\n if (!pointerDownInsidePopoverRef.current) {\n e.stopPropagation();\n e.preventDefault();\n }\n pointerDownInsidePopoverRef.current = false;\n }}\n className={composeRenderProps(classNames?.popover, (className) =>\n clsx(styles.popover, className),\n )}\n >\n <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n <Options>{children}</Options>\n </Virtualizer>\n </Popover>\n </>\n );\n }}\n </ComboBox>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IACE,OAAO,yBAAyBA,0CAAe,WAAW,aAAa,EAAE,IAEzE,QAAO,eAAeA,0CAAe,WAAW,cAAc;CAC5D,MAAM;AACJ,SAAO,EAAE;;CAEX,cAAc;CACf,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AAgDJ,SAAgB,cAAyC,EACvD,KACA,GAAG,SACqB;AACxB,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,UACA,YACA,aAAa,iBACb,cAAc,kBACd,YACA,YAAY,gBACZ,oBAAoB,IACpB,OAAO,WACP,eACA,cAAc,SACd,OAAO,UACP,WAAW,eACX,aAAa,OACb,cAAc,MACd,eACA,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,YAAY,iBAAiB,mBAClC,gBACA,mBACA,cACD;CAED,MAAM,8BAA8B,OAAO,MAAM;CACjD,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;CAEzB,MAAM,cAAc,kBAAkB;AACpC,gBAAc,GAAG;IAChB,CAAC,cAAc,CAAC;CAEnB,MAAM,gBAAgB,aACnB,UAAU;AACT,cAAY,MAAM;AAClB,MAAI,eAAe,MAAM,QAAQ,YAAY,WAC3C,cAAa;IAGjB;EAAC;EAAW;EAAa;EAAa;EAAW,CAClD;AAED,QACE,oBAAC;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,wBAAwB,OAAO,OAAO,UAAU,CACtD;EACY;EACb,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACA;EACZ,eAAe;EACf,WAAW;EACX,aAAW;EACX,cAAY,CAAC,cAAc;aAEzB,EAAE,YAAY,WAAW,iBAAiB;GAC1C,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,UACE;IACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACC;KACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;KACpC;KACA;eAEX;MACK;IAEV,qBAAC;KACC,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;KACpD,iBAAe,cAAc;;MAE7B,oBAAC;OACC,GAAI;OACJ,UAAU,aAAa,KAAK;OAC5B,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;OACD,OAAO,YAAY,QAAQ,OAAO,YAAY,MAAM,GAAG;QACvD;MACD,CAAC,cAAc,eACd,oBAAC;OACC,WAAW,mBACT,YAAY,QACX,cAAc,KAAK,OAAO,OAAO,UAAU,CAC7C;OACW;OACZ,SAAS;QACT;MAEH,CAAC,cACA,oBAAC;OACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;iBAED,oBAAC;QAAK,MAAK;kBACT,oBAAC,gBAAc;SACV;QACA;;MAEP;IACL,yBACC,oBAAC;KACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;KAC5D,MAAK;eAEJ;MACI;IAET,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAEA;MACU;IACb,oBAAC;KACC,4BAA4B;AAC1B,kCAA4B,UAAU;;KAExC,qBAAqB,MAAM;AACzB,UAAI,CAAC,4BAA4B,SAAS;AACxC,SAAE,iBAAiB;AACnB,SAAE,gBAAgB;;AAEpB,kCAA4B,UAAU;;KAExC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;eAED,oBAAC;MAAY,QAAQ;MAA2B;gBAC9C,oBAAC,WAAS,WAAmB;OACjB;MACN;OACT;;GAGE"}
@@ -12,9 +12,9 @@
12
12
 
13
13
  import { ProviderProps } from "../../lib/types.js";
14
14
  import { CoordinateFieldProps, CoordinateFieldState } from "./types.js";
15
- import * as react6 from "react";
15
+ import * as react19 from "react";
16
16
  import { ContextValue } from "react-aria-components";
17
- import * as react_jsx_runtime17 from "react/jsx-runtime";
17
+ import * as react_jsx_runtime68 from "react/jsx-runtime";
18
18
 
19
19
  //#region src/components/coordinate-field/context.d.ts
20
20
 
@@ -48,7 +48,7 @@ import * as react_jsx_runtime17 from "react/jsx-runtime";
48
48
  *
49
49
  * @see CoordinateFieldStateContext for internal runtime state
50
50
  */
51
- declare const CoordinateFieldContext: react6.Context<ContextValue<CoordinateFieldProps, HTMLDivElement>>;
51
+ declare const CoordinateFieldContext: react19.Context<ContextValue<CoordinateFieldProps, HTMLDivElement>>;
52
52
  /**
53
53
  * State Context for CoordinateField component.
54
54
  *
@@ -66,7 +66,7 @@ declare const CoordinateFieldContext: react6.Context<ContextValue<CoordinateFiel
66
66
  * const state = useCoordinateFieldStateContext();
67
67
  * const { segmentValues, isDisabled, registerTimeout } = state;
68
68
  */
69
- declare const CoordinateFieldStateContext: react6.Context<CoordinateFieldState | null>;
69
+ declare const CoordinateFieldStateContext: react19.Context<CoordinateFieldState | null>;
70
70
  /**
71
71
  * Provider component for CoordinateField context
72
72
  * Wraps children with CoordinateFieldContext
@@ -78,7 +78,7 @@ declare const CoordinateFieldStateContext: react6.Context<CoordinateFieldState |
78
78
  declare function CoordinateFieldProvider({
79
79
  children,
80
80
  ...props
81
- }: ProviderProps<CoordinateFieldProps>): react_jsx_runtime17.JSX.Element;
81
+ }: ProviderProps<CoordinateFieldProps>): react_jsx_runtime68.JSX.Element;
82
82
  /**
83
83
  * Provider component for CoordinateField state context
84
84
  * Wraps children with CoordinateFieldStateContext
@@ -94,7 +94,7 @@ declare function CoordinateFieldStateProvider({
94
94
  }: {
95
95
  children: React.ReactNode;
96
96
  value: CoordinateFieldState;
97
- }): react_jsx_runtime17.JSX.Element;
97
+ }): react_jsx_runtime68.JSX.Element;
98
98
  /**
99
99
  * Hook to access CoordinateField state context
100
100
  * Must be used within a CoordinateField component
@@ -12,7 +12,7 @@
12
12
 
13
13
  import { CoordinateFieldProps } from "./types.js";
14
14
  import "client-only";
15
- import * as react_jsx_runtime19 from "react/jsx-runtime";
15
+ import * as react_jsx_runtime89 from "react/jsx-runtime";
16
16
 
17
17
  //#region src/components/coordinate-field/index.d.ts
18
18
 
@@ -104,7 +104,7 @@ import * as react_jsx_runtime19 from "react/jsx-runtime";
104
104
  declare function CoordinateField({
105
105
  ref,
106
106
  ...props
107
- }: CoordinateFieldProps): react_jsx_runtime19.JSX.Element;
107
+ }: CoordinateFieldProps): react_jsx_runtime89.JSX.Element;
108
108
  //#endregion
109
109
  export { CoordinateField };
110
110
  //# sourceMappingURL=index.d.ts.map