flikkui 0.2.0-beta.2 → 0.2.0-beta.4

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 (214) hide show
  1. package/dist/components/ai/PromptInput/PromptInput.js +23 -15
  2. package/dist/components/ai/PromptSuggestions/PromptSuggestion.d.ts +27 -0
  3. package/dist/components/ai/PromptSuggestions/PromptSuggestion.js +62 -0
  4. package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.d.ts +10 -0
  5. package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js +12 -0
  6. package/dist/components/ai/PromptSuggestions/PromptSuggestion.types.d.ts +53 -0
  7. package/dist/components/ai/PromptSuggestions/index.d.ts +4 -2
  8. package/dist/components/ai/index.d.ts +2 -12
  9. package/dist/components/charts/ActivityRings/ActivityRings.js +70 -58
  10. package/dist/components/charts/ActivityRings/ActivityRings.theme.js +0 -1
  11. package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts +17 -0
  12. package/dist/components/charts/BarChart/BarChart.js +8 -4
  13. package/dist/components/charts/BarChart/BarChart.types.d.ts +14 -0
  14. package/dist/components/charts/DonutChart/DonutChart.js +11 -8
  15. package/dist/components/charts/DonutChart/DonutChart.theme.d.ts +3 -0
  16. package/dist/components/charts/DonutChart/DonutChart.theme.js +5 -4
  17. package/dist/components/charts/DonutChart/donut-utils.d.ts +5 -0
  18. package/dist/components/charts/DonutChart/donut-utils.js +26 -1
  19. package/dist/components/charts/Heatmap/Heatmap.theme.js +2 -2
  20. package/dist/components/charts/shared/ChartAxis/XAxis.d.ts +2 -2
  21. package/dist/components/charts/shared/ChartAxis/XAxis.js +4 -4
  22. package/dist/components/charts/shared/ChartAxis/YAxis.d.ts +2 -2
  23. package/dist/components/charts/shared/ChartAxis/YAxis.js +8 -7
  24. package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts +1 -1
  25. package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js +2 -2
  26. package/dist/components/charts/theme/chart.theme.d.ts +1 -1
  27. package/dist/components/charts/theme/chart.theme.js +39 -39
  28. package/dist/components/core/Accordion/Accordion.d.ts +1 -1
  29. package/dist/components/core/Accordion/Accordion.js +2 -2
  30. package/dist/components/core/Accordion/Accordion.types.d.ts +8 -0
  31. package/dist/components/core/Badge/Badge.js +11 -15
  32. package/dist/components/core/Badge/Badge.theme.js +7 -21
  33. package/dist/components/core/Badge/Badge.types.d.ts +9 -1
  34. package/dist/components/core/Button/Button.js +2 -2
  35. package/dist/components/core/Button/Button.theme.js +1 -1
  36. package/dist/components/core/Button/Button.types.d.ts +8 -0
  37. package/dist/components/core/Card/Card.js +8 -2
  38. package/dist/components/core/Card/Card.theme.js +1 -1
  39. package/dist/components/core/Card/Card.types.d.ts +24 -1
  40. package/dist/components/core/Drawer/Drawer.d.ts +1 -1
  41. package/dist/components/core/Drawer/Drawer.js +10 -40
  42. package/dist/components/core/Drawer/Drawer.theme.js +2 -1
  43. package/dist/components/core/Drawer/Drawer.types.d.ts +8 -0
  44. package/dist/components/core/Dropdown/Dropdown.d.ts +1 -1
  45. package/dist/components/core/Dropdown/Dropdown.js +2 -2
  46. package/dist/components/core/Dropdown/Dropdown.types.d.ts +8 -0
  47. package/dist/components/core/Metric/Metric.d.ts +1 -1
  48. package/dist/components/core/Metric/Metric.js +9 -5
  49. package/dist/components/core/Metric/Metric.theme.d.ts +1 -1
  50. package/dist/components/core/Metric/Metric.theme.js +38 -28
  51. package/dist/components/core/Metric/Metric.types.d.ts +27 -8
  52. package/dist/components/core/Modal/Modal.d.ts +1 -1
  53. package/dist/components/core/Modal/Modal.js +17 -40
  54. package/dist/components/core/Modal/Modal.theme.js +8 -3
  55. package/dist/components/core/Modal/Modal.types.d.ts +18 -0
  56. package/dist/components/core/Modal/index.d.ts +1 -1
  57. package/dist/components/core/Notification/Notification.js +2 -0
  58. package/dist/components/core/Pill/Pill.d.ts +6 -11
  59. package/dist/components/core/Pill/Pill.theme.d.ts +2 -2
  60. package/dist/components/core/Pill/Pill.types.d.ts +9 -22
  61. package/dist/components/core/Pill/index.d.ts +1 -1
  62. package/dist/components/core/Popover/Popover.d.ts +1 -1
  63. package/dist/components/core/Popover/Popover.js +2 -2
  64. package/dist/components/core/Popover/Popover.types.d.ts +8 -0
  65. package/dist/components/core/Progress/Progress.d.ts +28 -0
  66. package/dist/components/core/Progress/Progress.js +114 -0
  67. package/dist/components/core/Progress/Progress.theme.d.ts +5 -0
  68. package/dist/components/core/Progress/Progress.theme.js +33 -0
  69. package/dist/components/core/Progress/Progress.types.d.ts +92 -0
  70. package/dist/components/core/Progress/index.d.ts +2 -0
  71. package/dist/components/core/Tabs/Tabs.js +2 -2
  72. package/dist/components/core/Tabs/Tabs.types.d.ts +8 -0
  73. package/dist/components/core/Tag/Tag.animations.d.ts +3 -0
  74. package/dist/components/core/Tag/Tag.animations.js +31 -0
  75. package/dist/components/core/Tag/Tag.d.ts +14 -0
  76. package/dist/components/core/Tag/Tag.js +45 -0
  77. package/dist/components/core/Tag/Tag.theme.d.ts +2 -0
  78. package/dist/components/core/Tag/Tag.theme.js +21 -0
  79. package/dist/components/core/Tag/Tag.types.d.ts +40 -0
  80. package/dist/components/core/Tag/index.d.ts +3 -0
  81. package/dist/components/core/Tooltip/Tooltip.d.ts +1 -1
  82. package/dist/components/core/Tooltip/Tooltip.js +3 -3
  83. package/dist/components/core/Tooltip/Tooltip.theme.js +1 -1
  84. package/dist/components/core/Tooltip/Tooltip.types.d.ts +17 -0
  85. package/dist/components/core/index.d.ts +2 -1
  86. package/dist/components/core/index.js +3 -2
  87. package/dist/components/effects/CustomCursor/CustomCursor.d.ts +0 -13
  88. package/dist/components/effects/CustomCursor/CustomCursor.js +26 -2
  89. package/dist/components/effects/CustomCursor/CustomCursor.theme.js +12 -1
  90. package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts +14 -1
  91. package/dist/components/forms/Combobox/Combobox.d.ts +25 -0
  92. package/dist/components/forms/Combobox/Combobox.js +412 -0
  93. package/dist/components/forms/Combobox/Combobox.theme.d.ts +6 -0
  94. package/dist/components/forms/Combobox/Combobox.theme.js +60 -0
  95. package/dist/components/forms/Combobox/Combobox.types.d.ts +111 -0
  96. package/dist/components/forms/Combobox/index.d.ts +3 -0
  97. package/dist/components/forms/FileUpload/FileUpload.js +2 -0
  98. package/dist/components/forms/Input/Input.js +25 -28
  99. package/dist/components/forms/Input/inputMasks.d.ts +15 -0
  100. package/dist/components/forms/Input/inputMasks.js +72 -1
  101. package/dist/components/forms/InputTag/InputTag.d.ts +40 -0
  102. package/dist/components/forms/InputTag/InputTag.js +491 -0
  103. package/dist/components/forms/InputTag/InputTag.theme.d.ts +2 -0
  104. package/dist/components/forms/InputTag/InputTag.theme.js +16 -0
  105. package/dist/components/forms/InputTag/InputTag.types.d.ts +107 -0
  106. package/dist/components/forms/InputTag/index.d.ts +3 -0
  107. package/dist/components/forms/Select/Select.d.ts +101 -2
  108. package/dist/components/forms/Select/Select.js +128 -132
  109. package/dist/components/forms/Select/Select.theme.js +10 -14
  110. package/dist/components/forms/Select/Select.types.d.ts +6 -2
  111. package/dist/components/forms/Select/index.d.ts +7 -4
  112. package/dist/components/forms/Select/useSelectState.d.ts +66 -0
  113. package/dist/components/forms/Select/useSelectState.js +134 -0
  114. package/dist/components/forms/SelectExpand/SelectExpand.animations.d.ts +20 -0
  115. package/dist/components/forms/SelectExpand/SelectExpand.animations.js +74 -0
  116. package/dist/components/forms/SelectExpand/SelectExpand.d.ts +9 -0
  117. package/dist/components/forms/SelectExpand/SelectExpand.js +223 -0
  118. package/dist/components/forms/SelectExpand/SelectExpand.theme.d.ts +5 -0
  119. package/dist/components/forms/SelectExpand/SelectExpand.theme.js +74 -0
  120. package/dist/components/forms/SelectExpand/SelectExpand.types.d.ts +126 -0
  121. package/dist/components/forms/SelectExpand/index.d.ts +4 -0
  122. package/dist/components/forms/Switch/Switch.js +3 -3
  123. package/dist/components/forms/Switch/Switch.theme.d.ts +1 -1
  124. package/dist/components/forms/Switch/Switch.theme.js +2 -2
  125. package/dist/components/forms/TimePicker/TimePicker.animations.d.ts +0 -46
  126. package/dist/components/forms/TimePicker/TimePicker.d.ts +15 -6
  127. package/dist/components/forms/TimePicker/TimePicker.js +285 -124
  128. package/dist/components/forms/TimePicker/TimePicker.theme.d.ts +1 -1
  129. package/dist/components/forms/TimePicker/TimePicker.theme.js +39 -22
  130. package/dist/components/forms/TimePicker/TimePicker.types.d.ts +88 -34
  131. package/dist/components/forms/TimePicker/TimePickerContent.d.ts +7 -10
  132. package/dist/components/forms/TimePicker/TimePickerContent.js +149 -16
  133. package/dist/components/forms/TimePicker/TimePickerTrigger.d.ts +3 -3
  134. package/dist/components/forms/TimePicker/TimePickerTrigger.js +22 -19
  135. package/dist/components/forms/TimePicker/WheelColumn.d.ts +14 -0
  136. package/dist/components/forms/TimePicker/WheelColumn.js +90 -0
  137. package/dist/components/forms/TimePicker/index.d.ts +4 -1
  138. package/dist/components/forms/TimePicker/useWheelPicker.d.ts +37 -0
  139. package/dist/components/forms/TimePicker/useWheelPicker.js +138 -0
  140. package/dist/components/forms/forms.theme.d.ts +14 -0
  141. package/dist/components/forms/forms.theme.js +31 -0
  142. package/dist/components/forms/index.d.ts +9 -3
  143. package/dist/components/forms/index.js +73 -2
  144. package/dist/hooks/index.d.ts +0 -4
  145. package/dist/icons/Icon.d.ts +7 -0
  146. package/dist/icons/Icon.js +6 -2
  147. package/dist/index.js +12 -16
  148. package/dist/styles.css +1 -1
  149. package/dist/utils/index.d.ts +0 -1
  150. package/dist/utils/optimisticErrors.js +1 -70
  151. package/package.json +1 -1
  152. package/dist/components/ai/EditingIndicator/EditingIndicator.animations.d.ts +0 -31
  153. package/dist/components/ai/EditingIndicator/EditingIndicator.animations.js +0 -115
  154. package/dist/components/ai/EditingIndicator/EditingIndicator.d.ts +0 -35
  155. package/dist/components/ai/EditingIndicator/EditingIndicator.js +0 -94
  156. package/dist/components/ai/EditingIndicator/EditingIndicator.theme.d.ts +0 -2
  157. package/dist/components/ai/EditingIndicator/EditingIndicator.theme.js +0 -13
  158. package/dist/components/ai/EditingIndicator/EditingIndicator.types.d.ts +0 -54
  159. package/dist/components/ai/EditingIndicator/index.d.ts +0 -9
  160. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.d.ts +0 -3
  161. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.js +0 -126
  162. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.d.ts +0 -2
  163. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.js +0 -8
  164. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.types.d.ts +0 -45
  165. package/dist/components/ai/GenerativeRenderer/index.d.ts +0 -3
  166. package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.d.ts +0 -17
  167. package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.js +0 -56
  168. package/dist/components/ai/PresenceIndicator/PresenceIndicator.d.ts +0 -38
  169. package/dist/components/ai/PresenceIndicator/PresenceIndicator.js +0 -110
  170. package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.d.ts +0 -2
  171. package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.js +0 -13
  172. package/dist/components/ai/PresenceIndicator/PresenceIndicator.types.d.ts +0 -53
  173. package/dist/components/ai/PresenceIndicator/index.d.ts +0 -8
  174. package/dist/components/ai/PresenceProvider/PresenceContext.d.ts +0 -24
  175. package/dist/components/ai/PresenceProvider/PresenceContext.js +0 -34
  176. package/dist/components/ai/PresenceProvider/PresenceProvider.d.ts +0 -32
  177. package/dist/components/ai/PresenceProvider/PresenceProvider.js +0 -321
  178. package/dist/components/ai/PresenceProvider/PresenceProvider.types.d.ts +0 -140
  179. package/dist/components/ai/PresenceProvider/adapters/MockAdapter.d.ts +0 -102
  180. package/dist/components/ai/PresenceProvider/adapters/MockAdapter.js +0 -331
  181. package/dist/components/ai/PresenceProvider/adapters/PresenceAdapter.d.ts +0 -93
  182. package/dist/components/ai/PresenceProvider/adapters/SupabaseAdapter.d.ts +0 -134
  183. package/dist/components/ai/PresenceProvider/adapters/WebSocketAdapter.d.ts +0 -149
  184. package/dist/components/ai/PresenceProvider/adapters/index.d.ts +0 -11
  185. package/dist/components/ai/PresenceProvider/index.d.ts +0 -10
  186. package/dist/components/ai/PromptSuggestions/PromptSuggestions.d.ts +0 -27
  187. package/dist/components/ai/PromptSuggestions/PromptSuggestions.js +0 -61
  188. package/dist/components/ai/PromptSuggestions/PromptSuggestions.types.d.ts +0 -65
  189. package/dist/components/ai/VersionSlider/VersionSlider.d.ts +0 -3
  190. package/dist/components/ai/VersionSlider/VersionSlider.js +0 -97
  191. package/dist/components/ai/VersionSlider/VersionSlider.theme.d.ts +0 -2
  192. package/dist/components/ai/VersionSlider/VersionSlider.theme.js +0 -18
  193. package/dist/components/ai/VersionSlider/VersionSlider.types.d.ts +0 -77
  194. package/dist/components/ai/VersionSlider/index.d.ts +0 -3
  195. package/dist/components/core/Pill/Pill.animations.js +0 -25
  196. package/dist/components/core/Pill/Pill.js +0 -145
  197. package/dist/components/core/Pill/Pill.theme.js +0 -65
  198. package/dist/components/core/RetryBoundary/RetryBoundary.d.ts +0 -35
  199. package/dist/components/core/RetryBoundary/RetryBoundary.js +0 -154
  200. package/dist/components/core/RetryBoundary/RetryBoundary.theme.d.ts +0 -2
  201. package/dist/components/core/RetryBoundary/RetryBoundary.theme.js +0 -7
  202. package/dist/components/core/RetryBoundary/RetryBoundary.types.d.ts +0 -51
  203. package/dist/components/core/RetryBoundary/index.d.ts +0 -3
  204. package/dist/components/forms/OptimisticForm/OptimisticForm.d.ts +0 -33
  205. package/dist/components/forms/OptimisticForm/OptimisticForm.js +0 -87
  206. package/dist/components/forms/OptimisticForm/OptimisticForm.theme.d.ts +0 -2
  207. package/dist/components/forms/OptimisticForm/OptimisticForm.theme.js +0 -8
  208. package/dist/components/forms/OptimisticForm/OptimisticForm.types.d.ts +0 -74
  209. package/dist/components/forms/OptimisticForm/index.d.ts +0 -3
  210. package/dist/hooks/useOptimisticMutation.d.ts +0 -109
  211. package/dist/hooks/useOptimisticMutation.js +0 -171
  212. package/dist/hooks/usePresence.d.ts +0 -88
  213. package/dist/utils/presenceUtils.d.ts +0 -66
  214. package/dist/utils/presenceUtils.js +0 -107
@@ -0,0 +1,37 @@
1
+ /**
2
+ * Options for the useWheelPicker hook
3
+ */
4
+ export interface UseWheelPickerOptions<T> {
5
+ /** Array of options to display in the wheel */
6
+ options: T[];
7
+ /** Currently selected value */
8
+ value: T;
9
+ /** Callback when value changes */
10
+ onChange: (value: T) => void;
11
+ /** Height of each item in pixels */
12
+ itemHeight?: number;
13
+ /** Number of visible items (should be odd for center selection) */
14
+ visibleItems?: number;
15
+ }
16
+ /**
17
+ * Return type for the useWheelPicker hook
18
+ */
19
+ export interface UseWheelPickerReturn {
20
+ /** Ref to attach to the scrollable container */
21
+ containerRef: React.RefObject<HTMLDivElement | null>;
22
+ /** Scroll to a specific value programmatically */
23
+ scrollToValue: (value: number | string, behavior?: ScrollBehavior) => void;
24
+ /** Current scroll position index */
25
+ currentIndex: number;
26
+ /** Padding needed at top/bottom to center first/last items */
27
+ paddingY: number;
28
+ /** Whether the user is currently dragging */
29
+ isDragging: boolean;
30
+ }
31
+ /**
32
+ * Custom hook for iOS-style wheel picker scroll behavior
33
+ *
34
+ * Uses CSS scroll-snap for native snapping behavior and
35
+ * detects scroll end to trigger onChange callback.
36
+ */
37
+ export declare function useWheelPicker<T>({ options, value, onChange, itemHeight, visibleItems, }: UseWheelPickerOptions<T>): UseWheelPickerReturn;
@@ -0,0 +1,138 @@
1
+ import { useRef, useState, useCallback, useEffect } from 'react';
2
+
3
+ /**
4
+ * Custom hook for iOS-style wheel picker scroll behavior
5
+ *
6
+ * Uses CSS scroll-snap for native snapping behavior and
7
+ * detects scroll end to trigger onChange callback.
8
+ */
9
+ function useWheelPicker({ options, value, onChange, itemHeight = 40, visibleItems = 5, }) {
10
+ const containerRef = useRef(null);
11
+ const scrollTimeoutRef = useRef(null);
12
+ const isScrollingRef = useRef(false);
13
+ const lastScrollTopRef = useRef(0);
14
+ // Mouse drag state
15
+ const [isDragging, setIsDragging] = useState(false);
16
+ const isDraggingRef = useRef(false);
17
+ const dragStartYRef = useRef(0);
18
+ const dragStartScrollTopRef = useRef(0);
19
+ // Calculate padding to center first/last items
20
+ const paddingY = Math.floor((visibleItems - 1) / 2) * itemHeight;
21
+ // Find current index based on value
22
+ const currentIndex = options.findIndex(opt => opt === value);
23
+ // Scroll to a specific value
24
+ const scrollToValue = useCallback((targetValue, behavior = 'smooth') => {
25
+ if (!containerRef.current)
26
+ return;
27
+ const targetIndex = options.findIndex(opt => opt === targetValue);
28
+ if (targetIndex === -1)
29
+ return;
30
+ const scrollTop = targetIndex * itemHeight;
31
+ containerRef.current.scrollTo({
32
+ top: scrollTop,
33
+ behavior,
34
+ });
35
+ }, [options, itemHeight]);
36
+ // Handle scroll end detection with debounce
37
+ const handleScrollEnd = useCallback(() => {
38
+ if (!containerRef.current)
39
+ return;
40
+ const scrollTop = containerRef.current.scrollTop;
41
+ const nearestIndex = Math.round(scrollTop / itemHeight);
42
+ const clampedIndex = Math.max(0, Math.min(nearestIndex, options.length - 1));
43
+ // Only trigger onChange if the index actually changed
44
+ if (options[clampedIndex] !== value) {
45
+ onChange(options[clampedIndex]);
46
+ }
47
+ isScrollingRef.current = false;
48
+ }, [itemHeight, options, value, onChange]);
49
+ // Handle scroll event with debounced end detection
50
+ const handleScroll = useCallback(() => {
51
+ if (!containerRef.current)
52
+ return;
53
+ isScrollingRef.current = true;
54
+ lastScrollTopRef.current = containerRef.current.scrollTop;
55
+ // Clear existing timeout
56
+ if (scrollTimeoutRef.current) {
57
+ clearTimeout(scrollTimeoutRef.current);
58
+ }
59
+ // Set new timeout for scroll end detection
60
+ // 100ms debounce to detect when scrolling stops
61
+ scrollTimeoutRef.current = setTimeout(() => {
62
+ handleScrollEnd();
63
+ }, 100);
64
+ }, [handleScrollEnd]);
65
+ // Attach scroll listener
66
+ useEffect(() => {
67
+ const container = containerRef.current;
68
+ if (!container)
69
+ return;
70
+ container.addEventListener('scroll', handleScroll, { passive: true });
71
+ return () => {
72
+ container.removeEventListener('scroll', handleScroll);
73
+ if (scrollTimeoutRef.current) {
74
+ clearTimeout(scrollTimeoutRef.current);
75
+ }
76
+ };
77
+ }, [handleScroll]);
78
+ // Scroll to initial value on mount and when value changes externally
79
+ useEffect(() => {
80
+ if (!isScrollingRef.current && containerRef.current) {
81
+ const targetIndex = options.findIndex(opt => opt === value);
82
+ if (targetIndex !== -1) {
83
+ // Use instant scroll on initial mount to avoid jarring animation
84
+ const scrollTop = targetIndex * itemHeight;
85
+ containerRef.current.scrollTo({
86
+ top: scrollTop,
87
+ behavior: 'instant',
88
+ });
89
+ }
90
+ }
91
+ }, [value, options, itemHeight]);
92
+ // Mouse drag-to-scroll support (desktop)
93
+ useEffect(() => {
94
+ const container = containerRef.current;
95
+ if (!container)
96
+ return;
97
+ const handleMouseDown = (e) => {
98
+ isDraggingRef.current = false;
99
+ dragStartYRef.current = e.clientY;
100
+ dragStartScrollTopRef.current = container.scrollTop;
101
+ const handleMouseMove = (e) => {
102
+ const deltaY = dragStartYRef.current - e.clientY;
103
+ // Only start dragging after a small threshold to allow clicks
104
+ if (!isDraggingRef.current && Math.abs(deltaY) > 3) {
105
+ isDraggingRef.current = true;
106
+ setIsDragging(true);
107
+ }
108
+ if (isDraggingRef.current) {
109
+ container.scrollTop = dragStartScrollTopRef.current + deltaY;
110
+ }
111
+ };
112
+ const handleMouseUp = () => {
113
+ document.removeEventListener('mousemove', handleMouseMove);
114
+ document.removeEventListener('mouseup', handleMouseUp);
115
+ // Reset dragging state after a tick so click handlers can check it
116
+ requestAnimationFrame(() => {
117
+ isDraggingRef.current = false;
118
+ setIsDragging(false);
119
+ });
120
+ };
121
+ document.addEventListener('mousemove', handleMouseMove);
122
+ document.addEventListener('mouseup', handleMouseUp);
123
+ };
124
+ container.addEventListener('mousedown', handleMouseDown);
125
+ return () => {
126
+ container.removeEventListener('mousedown', handleMouseDown);
127
+ };
128
+ }, []);
129
+ return {
130
+ containerRef,
131
+ scrollToValue,
132
+ currentIndex,
133
+ paddingY,
134
+ isDragging,
135
+ };
136
+ }
137
+
138
+ export { useWheelPicker };
@@ -51,4 +51,18 @@ export declare const formsBaseTheme: {
51
51
  right: string;
52
52
  };
53
53
  };
54
+ dropdownStyles: {
55
+ container: string;
56
+ option: string;
57
+ optionSelected: string;
58
+ optionHighlighted: string;
59
+ optionDisabled: string;
60
+ optionCreate: string;
61
+ emptyMessage: string;
62
+ };
63
+ placeholderStyle: string;
64
+ helperTextStates: {
65
+ default: string;
66
+ disabled: string;
67
+ };
54
68
  };
@@ -85,6 +85,37 @@ const formsBaseTheme = {
85
85
  right: "pr-10",
86
86
  },
87
87
  },
88
+ // Dropdown/listbox styles for Select, Combobox, and similar components
89
+ dropdownStyles: {
90
+ // Container for dropdown panel
91
+ container: "fixed z-[1000] max-h-[var(--select-content-available-height,20rem)] overflow-auto overscroll-contain " +
92
+ "rounded-[var(--form-rounded)] bg-white/90 backdrop-blur-md text-sm border border-[var(--color-border)] " +
93
+ "shadow-real-lg ring-1 ring-[var(--color-border)] focus:outline-none " +
94
+ "dark:bg-[var(--color-neutral-900)]/90 dark:ring-[var(--color-neutral-700)]",
95
+ // Base option style
96
+ option: "relative cursor-pointer select-none py-2 px-3 text-[var(--color-text-primary)] " +
97
+ "hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)]/50 " +
98
+ "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)] " +
99
+ "dark:hover:bg-[var(--color-primary-900)]/50",
100
+ // Selected option modifier
101
+ optionSelected: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
102
+ // Highlighted option (keyboard navigation)
103
+ optionHighlighted: "text-[var(--color-primary)] bg-[var(--color-primary-50)]/50 " +
104
+ "dark:text-[var(--color-primary-400)] dark:bg-[var(--color-primary-900)]/50",
105
+ // Disabled option modifier
106
+ optionDisabled: "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-[var(--color-text-primary)]",
107
+ // Create new option style
108
+ optionCreate: "font-medium text-[var(--color-primary)] dark:text-[var(--color-primary-400)]",
109
+ // Empty state message
110
+ emptyMessage: "py-3 px-3 text-center text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
111
+ },
112
+ // Placeholder text style (shared across input-like components)
113
+ placeholderStyle: "text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
114
+ // Helper text state variants (beyond base helperText)
115
+ helperTextStates: {
116
+ default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
117
+ disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
118
+ },
88
119
  };
89
120
 
90
121
  export { formsBaseTheme };
@@ -53,7 +53,13 @@ export { InputCounter } from "./InputCounter";
53
53
  export type { InputCounterProps, InputCounterTheme } from "./InputCounter";
54
54
  export { inputCounterTheme } from "./InputCounter";
55
55
  export { formsBaseTheme } from "./forms.theme";
56
- export { OptimisticForm } from "./OptimisticForm";
57
- export type { OptimisticFormProps, OptimisticFormState, OptimisticFormStatus, OptimisticFormTheme, } from "./OptimisticForm";
58
- export { optimisticFormTheme } from "./OptimisticForm";
59
56
  export * from "./StepperForm";
57
+ export { SelectExpand } from "./SelectExpand";
58
+ export type { SelectExpandProps, SelectExpandOption, SelectExpandSize, SelectExpandState, SelectExpandTheme, SelectExpandThemeOverrides, } from "./SelectExpand";
59
+ export { selectExpandTheme } from "./SelectExpand";
60
+ export { InputTag } from "./InputTag";
61
+ export type { InputTagProps, InputTagSize, InputTagState, InputTagTheme, InputTagThemeOverrides, InputTagOption, } from "./InputTag";
62
+ export { inputTagTheme } from "./InputTag";
63
+ export { Combobox } from "./Combobox";
64
+ export type { ComboboxProps, ComboboxOption, ComboboxSize, ComboboxState, ComboboxTheme, ComboboxThemeOverrides, } from "./Combobox";
65
+ export { comboboxTheme } from "./Combobox";
@@ -23,6 +23,73 @@ import 'clsx';
23
23
  import 'tailwind-merge';
24
24
  import 'motion/react';
25
25
  import 'react-dom';
26
+ import '../core/Accordion/Accordion.js';
27
+ import '../core/AlertDialog/AlertDialog.js';
28
+ import '../core/Avatar/Avatar.js';
29
+ import '../core/AvatarGroup/AvatarGroup.js';
30
+ import '../core/Badge/Badge.js';
31
+ import '../core/Breadcrumbs/Breadcrumbs.js';
32
+ import '../core/Breadcrumbs/Breadcrumbs.theme.js';
33
+ import '../core/Button/Button.js';
34
+ import '../core/ButtonGroup/ButtonGroup.js';
35
+ import '../core/ButtonGroup/ButtonGroupSeparator.js';
36
+ import '../core/ButtonGroup/ButtonGroupText.js';
37
+ import '../core/Calendar/CalendarMini/CalendarMini.js';
38
+ import '../core/Card/Card.js';
39
+ import '../core/CardStack/CardStack.js';
40
+ import '../core/Carousel/Carousel.js';
41
+ import '../core/Kbd/Kbd.js';
42
+ import '../effects/Overlay/Overlay.js';
43
+ import '../core/Divider/Divider.js';
44
+ import '../core/Drawer/Drawer.js';
45
+ import '../core/Dropdown/Dropdown.js';
46
+ import '../core/Dropdown/DropdownTrigger.js';
47
+ import '../core/Dropdown/DropdownMenu.js';
48
+ import '../core/Dropdown/DropdownItem.js';
49
+ import '../core/Dropdown/DropdownSection.js';
50
+ import '../core/Dropdown/DropdownSeparator.js';
51
+ import '../core/Link/Link.js';
52
+ import '../core/Loader/Loader.js';
53
+ import '../core/Modal/Modal.js';
54
+ import '../core/Pagination/Pagination.js';
55
+ import '../core/Popover/Popover.js';
56
+ import '../core/Popover/PopoverContext.js';
57
+ import '../core/Progress/Progress.js';
58
+ import '../core/ProgressiveBlur/ProgressiveBlur.js';
59
+ import '../core/Segmented/Segmented.js';
60
+ import '../core/Skeleton/Skeleton.js';
61
+ import '../core/SlidingNumber/SlidingNumber.js';
62
+ import '../core/Stepper/Stepper.js';
63
+ import '../core/Tabs/Tabs.js';
64
+ import '../core/Tabs/TabsList.js';
65
+ import '../core/Tabs/TabsTrigger.js';
66
+ import '../core/Tabs/TabsContent.js';
67
+ import '../core/Tabs/TabsContext.js';
68
+ import '../core/Tooltip/Tooltip.js';
69
+ import '../core/Tooltip/Tooltip.animations.js';
70
+ import '../core/Tree/Tree.js';
71
+ import '../core/Tag/Tag.js';
72
+ import '../core/Alert/Alert.js';
73
+ import '../core/Toast/Toast.js';
74
+ import '../core/Toast/ToastProvider.js';
75
+ import '../core/Notification/Notification.js';
76
+ import '@heroicons/react/24/solid';
77
+ import '../core/Message/Message.js';
78
+ import '../core/Message/TypeWriter.js';
79
+ import '../core/Empty/Empty.js';
80
+ import '../core/Table/index.js';
81
+ import '../core/DragDrop/DragDrop.js';
82
+ import '../core/Sortable/Sortable.js';
83
+ import '../core/NavItem/NavItem.js';
84
+ import '../core/Sidebar/Sidebar.js';
85
+ import '../core/Sidebar/SidebarHeader.js';
86
+ import '../core/Sidebar/SidebarContent.js';
87
+ import '../core/Sidebar/SidebarFooter.js';
88
+ import '../core/Sidebar/SidebarNav.js';
89
+ import '../core/Sidebar/SidebarNavGroup.js';
90
+ import '../core/Sidebar/SidebarToggle.js';
91
+ import '../core/Sidebar/SidebarContext.js';
92
+ import './TimePicker/WheelColumn.js';
26
93
  export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
27
94
  export { Slider } from './Slider/Slider.js';
28
95
  export { sliderTheme } from './Slider/Slider.theme.js';
@@ -41,11 +108,15 @@ export { inputDateTheme } from './InputDate/InputDate.theme.js';
41
108
  export { InputCounter } from './InputCounter/InputCounter.js';
42
109
  export { inputCounterTheme } from './InputCounter/InputCounter.theme.js';
43
110
  export { formsBaseTheme } from './forms.theme.js';
44
- export { OptimisticForm } from './OptimisticForm/OptimisticForm.js';
45
- export { optimisticFormTheme } from './OptimisticForm/OptimisticForm.theme.js';
46
111
  export { StepperForm } from './StepperForm/StepperForm.js';
47
112
  export { StepperFormContext, useStepperFormContext } from './StepperForm/StepperForm.types.js';
48
113
  export { stepperFormTheme } from './StepperForm/StepperForm.theme.js';
114
+ export { SelectExpand } from './SelectExpand/SelectExpand.js';
115
+ export { selectExpandTheme } from './SelectExpand/SelectExpand.theme.js';
116
+ export { InputTag } from './InputTag/InputTag.js';
117
+ export { inputTagTheme } from './InputTag/InputTag.theme.js';
118
+ export { Combobox } from './Combobox/Combobox.js';
119
+ export { comboboxTheme } from './Combobox/Combobox.theme.js';
49
120
  export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';
50
121
  export { DatePickerContent } from './DatePicker/DatePickerContent.js';
51
122
  export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';
@@ -7,8 +7,4 @@ export { useStreamingSSE } from "./useStreamingSSE";
7
7
  export type { UseStreamingSSEOptions, UseStreamingSSEReturn, } from "./useStreamingSSE";
8
8
  export { useNetworkStatus } from "./useNetworkStatus";
9
9
  export type { NetworkStatusReturn } from "./useNetworkStatus";
10
- export { useOptimisticMutation } from "./useOptimisticMutation";
11
10
  export * from "./useFormStateMachine";
12
- export type { OptimisticMutationOptions, OptimisticMutationReturn, MutationStatus, } from "./useOptimisticMutation";
13
- export { usePresence } from "./usePresence";
14
- export type { UsePresenceOptions, UsePresenceReturn } from "./usePresence";
@@ -4,6 +4,13 @@ export interface IconProps extends React.SVGProps<SVGSVGElement> {
4
4
  color?: string;
5
5
  strokeWidth?: number;
6
6
  className?: string;
7
+ /**
8
+ * Force dark mode styling for the icon. Use when placing the icon
9
+ * on a dark background while the page is in light mode. This applies the
10
+ * 'dark' class to the container, making the icon use light colors for visibility.
11
+ * @default false
12
+ */
13
+ darkMode?: boolean;
7
14
  }
8
15
  export interface IconComponent extends React.FC<IconProps> {
9
16
  displayName?: string;
@@ -7,7 +7,7 @@ import React__default from 'react';
7
7
  * @returns A standardized Icon component
8
8
  */
9
9
  function createIcon(Svg, displayName) {
10
- const Icon = ({ size = 'md', color = 'currentColor', strokeWidth = 2, className = '', ...props }) => {
10
+ const Icon = ({ size = 'md', color = 'currentColor', strokeWidth = 2, className = '', darkMode = false, ...props }) => {
11
11
  // Map size names to pixel values
12
12
  const sizeMap = {
13
13
  xs: '16px',
@@ -17,7 +17,11 @@ function createIcon(Svg, displayName) {
17
17
  xl: '40px',
18
18
  };
19
19
  const pixelSize = typeof size === 'string' ? sizeMap[size] || '24px' : `${size}px`;
20
- return (React__default.createElement(Svg, { width: pixelSize, height: pixelSize, fill: "none", stroke: color, strokeWidth: strokeWidth, className: `${className}`, "aria-hidden": "true", style: { width: pixelSize, height: pixelSize, ...props.style }, ...props }));
20
+ const svg = (React__default.createElement(Svg, { width: pixelSize, height: pixelSize, fill: "none", stroke: color, strokeWidth: strokeWidth, className: className, "aria-hidden": "true", style: { width: pixelSize, height: pixelSize, ...props.style }, ...props }));
21
+ if (darkMode) {
22
+ return (React__default.createElement("span", { className: "dark inline-flex" }, svg));
23
+ }
24
+ return svg;
21
25
  };
22
26
  Icon.displayName = displayName;
23
27
  return Icon;
package/dist/index.js CHANGED
@@ -36,6 +36,7 @@ export { Modal } from './components/core/Modal/Modal.js';
36
36
  export { Pagination } from './components/core/Pagination/Pagination.js';
37
37
  export { Popover } from './components/core/Popover/Popover.js';
38
38
  export { PopoverContext, usePopoverContext } from './components/core/Popover/PopoverContext.js';
39
+ export { Progress } from './components/core/Progress/Progress.js';
39
40
  export { default as ProgressiveBlur } from './components/core/ProgressiveBlur/ProgressiveBlur.js';
40
41
  export { Segmented } from './components/core/Segmented/Segmented.js';
41
42
  export { Skeleton } from './components/core/Skeleton/Skeleton.js';
@@ -50,6 +51,8 @@ export { Tooltip } from './components/core/Tooltip/Tooltip.js';
50
51
  export { baseTooltipVariants, getTooltipVariants, tooltipSpringConfig } from './components/core/Tooltip/Tooltip.animations.js';
51
52
  export { Tree } from './components/core/Tree/Tree.js';
52
53
  export { treeTheme } from './components/core/Tree/Tree.theme.js';
54
+ export { Tag } from './components/core/Tag/Tag.js';
55
+ export { tagTheme } from './components/core/Tag/Tag.theme.js';
53
56
  export { Alert } from './components/core/Alert/Alert.js';
54
57
  export { alertTheme } from './components/core/Alert/Alert.theme.js';
55
58
  export { Toast } from './components/core/Toast/Toast.js';
@@ -79,8 +82,6 @@ export { SidebarNavGroup } from './components/core/Sidebar/SidebarNavGroup.js';
79
82
  export { SidebarSubmenu } from './components/core/Sidebar/SidebarSubmenu.js';
80
83
  export { SidebarToggle } from './components/core/Sidebar/SidebarToggle.js';
81
84
  export { useSidebarContext } from './components/core/Sidebar/SidebarContext.js';
82
- export { RetryBoundary } from './components/core/RetryBoundary/RetryBoundary.js';
83
- export { retryBoundaryTheme } from './components/core/RetryBoundary/RetryBoundary.theme.js';
84
85
  export { OfflineIndicator } from './components/core/OfflineIndicator/OfflineIndicator.js';
85
86
  export { offlineIndicatorTheme } from './components/core/OfflineIndicator/OfflineIndicator.theme.js';
86
87
  export { Input } from './components/forms/Input/Input.js';
@@ -107,6 +108,7 @@ import '@heroicons/react/24/outline';
107
108
  export { cn } from './utils/cn.js';
108
109
  export { AnimatePresence } from 'motion/react';
109
110
  import 'react-dom';
111
+ import './components/forms/TimePicker/WheelColumn.js';
110
112
  export { timePickerTheme } from './components/forms/TimePicker/TimePicker.theme.js';
111
113
  export { Slider } from './components/forms/Slider/Slider.js';
112
114
  export { sliderTheme } from './components/forms/Slider/Slider.theme.js';
@@ -125,11 +127,15 @@ export { inputDateTheme } from './components/forms/InputDate/InputDate.theme.js'
125
127
  export { InputCounter } from './components/forms/InputCounter/InputCounter.js';
126
128
  export { inputCounterTheme } from './components/forms/InputCounter/InputCounter.theme.js';
127
129
  export { formsBaseTheme } from './components/forms/forms.theme.js';
128
- export { OptimisticForm } from './components/forms/OptimisticForm/OptimisticForm.js';
129
- export { optimisticFormTheme } from './components/forms/OptimisticForm/OptimisticForm.theme.js';
130
130
  export { StepperForm } from './components/forms/StepperForm/StepperForm.js';
131
131
  export { StepperFormContext, useStepperFormContext } from './components/forms/StepperForm/StepperForm.types.js';
132
132
  export { stepperFormTheme } from './components/forms/StepperForm/StepperForm.theme.js';
133
+ export { SelectExpand } from './components/forms/SelectExpand/SelectExpand.js';
134
+ export { selectExpandTheme } from './components/forms/SelectExpand/SelectExpand.theme.js';
135
+ export { InputTag } from './components/forms/InputTag/InputTag.js';
136
+ export { inputTagTheme } from './components/forms/InputTag/InputTag.theme.js';
137
+ export { Combobox } from './components/forms/Combobox/Combobox.js';
138
+ export { comboboxTheme } from './components/forms/Combobox/Combobox.theme.js';
133
139
  export { ChartContainer } from './components/charts/ChartContainer.js';
134
140
  export { BarChart } from './components/charts/BarChart/BarChart.js';
135
141
  export { StackedBarChart } from './components/charts/StackedBarChart/StackedBarChart.js';
@@ -181,7 +187,8 @@ export { thinkingIndicatorTheme } from './components/ai/ThinkingIndicator/Thinki
181
187
  export { TokenCounter } from './components/ai/TokenCounter/TokenCounter.js';
182
188
  export { tokenCounterTheme } from './components/ai/TokenCounter/TokenCounter.theme.js';
183
189
  export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './components/ai/TokenCounter/tokenUtils.js';
184
- export { PromptSuggestions } from './components/ai/PromptSuggestions/PromptSuggestions.js';
190
+ export { PromptSuggestion } from './components/ai/PromptSuggestions/PromptSuggestion.js';
191
+ export { promptSuggestionTheme } from './components/ai/PromptSuggestions/PromptSuggestion.theme.js';
185
192
  export { StreamingResponse } from './components/ai/StreamingResponse/StreamingResponse.js';
186
193
  export { ErrorDisplay } from './components/ai/StreamingResponse/ErrorDisplay.js';
187
194
  export { MarkdownRenderer } from './components/ai/StreamingResponse/MarkdownRenderer.js';
@@ -190,19 +197,8 @@ export { CodeBlock } from './components/ai/CodeBlock/CodeBlock.js';
190
197
  export { codeBlockTheme } from './components/ai/CodeBlock/CodeBlock.theme.js';
191
198
  export { ApprovalCard } from './components/ai/ApprovalCard/ApprovalCard.js';
192
199
  export { approvalCardTheme } from './components/ai/ApprovalCard/ApprovalCard.theme.js';
193
- export { EditingIndicator } from './components/ai/EditingIndicator/EditingIndicator.js';
194
- export { editingIndicatorTheme } from './components/ai/EditingIndicator/EditingIndicator.theme.js';
195
- export { PresenceIndicator } from './components/ai/PresenceIndicator/PresenceIndicator.js';
196
- export { presenceIndicatorTheme } from './components/ai/PresenceIndicator/PresenceIndicator.theme.js';
197
- export { PresenceProvider } from './components/ai/PresenceProvider/PresenceProvider.js';
198
- export { PresenceContext, usePresenceContext } from './components/ai/PresenceProvider/PresenceContext.js';
199
- export { MockPresenceAdapter } from './components/ai/PresenceProvider/adapters/MockAdapter.js';
200
200
  export { ArtifactContainer } from './components/ai/ArtifactContainer/ArtifactContainer.js';
201
201
  export { artifactContainerTheme, handleSizes } from './components/ai/ArtifactContainer/ArtifactContainer.theme.js';
202
- export { GenerativeRenderer } from './components/ai/GenerativeRenderer/GenerativeRenderer.js';
203
- export { generativeRendererTheme } from './components/ai/GenerativeRenderer/GenerativeRenderer.theme.js';
204
- export { VersionSlider } from './components/ai/VersionSlider/VersionSlider.js';
205
- export { versionSliderTheme } from './components/ai/VersionSlider/VersionSlider.theme.js';
206
202
  export { debounce } from './utils/debounce.js';
207
203
  export { useClickOutside } from './utils/useClickOutside.js';
208
204
  export { useOverlay } from './hooks/useOverlay.js';