@weave-design-system/react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (230) hide show
  1. package/dist/index.cjs +7729 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +677 -0
  4. package/dist/index.d.ts +677 -0
  5. package/dist/index.js +7654 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/theme.css +2 -0
  8. package/dist/tokens.cjs +78 -0
  9. package/dist/tokens.cjs.map +1 -0
  10. package/dist/tokens.d.cts +67 -0
  11. package/dist/tokens.d.ts +67 -0
  12. package/dist/tokens.js +70 -0
  13. package/dist/tokens.js.map +1 -0
  14. package/package.json +103 -0
  15. package/src/data-display/activity-feed/ActivityFeed.stories.tsx +16 -0
  16. package/src/data-display/activity-feed/ActivityFeed.test.tsx +11 -0
  17. package/src/data-display/activity-feed/ActivityFeed.tsx +34 -0
  18. package/src/data-display/activity-feed/index.ts +2 -0
  19. package/src/data-display/circular-progress/CircularProgress.stories.tsx +10 -0
  20. package/src/data-display/circular-progress/CircularProgress.test.tsx +11 -0
  21. package/src/data-display/circular-progress/CircularProgress.tsx +35 -0
  22. package/src/data-display/circular-progress/index.ts +2 -0
  23. package/src/data-display/empty-state/EmptyState.stories.tsx +15 -0
  24. package/src/data-display/empty-state/EmptyState.test.tsx +18 -0
  25. package/src/data-display/empty-state/EmptyState.tsx +34 -0
  26. package/src/data-display/empty-state/index.ts +2 -0
  27. package/src/data-display/progress-bar/ProgressBar.stories.tsx +10 -0
  28. package/src/data-display/progress-bar/ProgressBar.test.tsx +15 -0
  29. package/src/data-display/progress-bar/ProgressBar.tsx +38 -0
  30. package/src/data-display/progress-bar/index.ts +2 -0
  31. package/src/data-display/stat-card/StatCard.stories.tsx +10 -0
  32. package/src/data-display/stat-card/StatCard.test.tsx +15 -0
  33. package/src/data-display/stat-card/StatCard.tsx +40 -0
  34. package/src/data-display/stat-card/index.ts +2 -0
  35. package/src/data-display/table/Table.stories.tsx +44 -0
  36. package/src/data-display/table/Table.test.tsx +16 -0
  37. package/src/data-display/table/Table.tsx +71 -0
  38. package/src/data-display/table/index.ts +1 -0
  39. package/src/data-display/timeline/Timeline.stories.tsx +16 -0
  40. package/src/data-display/timeline/Timeline.test.tsx +11 -0
  41. package/src/data-display/timeline/Timeline.tsx +44 -0
  42. package/src/data-display/timeline/index.ts +2 -0
  43. package/src/docs/ComponentOverview.mdx +192 -0
  44. package/src/docs/DesignTokens.mdx +235 -0
  45. package/src/docs/GettingStarted.mdx +145 -0
  46. package/src/feedback/alert-banner/AlertBanner.stories.tsx +10 -0
  47. package/src/feedback/alert-banner/AlertBanner.test.tsx +16 -0
  48. package/src/feedback/alert-banner/AlertBanner.tsx +47 -0
  49. package/src/feedback/alert-banner/index.ts +2 -0
  50. package/src/feedback/modal/Modal.stories.tsx +31 -0
  51. package/src/feedback/modal/Modal.test.tsx +33 -0
  52. package/src/feedback/modal/Modal.tsx +88 -0
  53. package/src/feedback/modal/index.ts +2 -0
  54. package/src/feedback/skeleton-loader/SkeletonLoader.stories.tsx +23 -0
  55. package/src/feedback/skeleton-loader/SkeletonLoader.test.tsx +14 -0
  56. package/src/feedback/skeleton-loader/SkeletonLoader.tsx +61 -0
  57. package/src/feedback/skeleton-loader/index.ts +2 -0
  58. package/src/feedback/toast/Toast.stories.tsx +27 -0
  59. package/src/feedback/toast/Toast.test.tsx +32 -0
  60. package/src/feedback/toast/Toast.tsx +106 -0
  61. package/src/feedback/toast/index.ts +2 -0
  62. package/src/hooks/index.ts +3 -0
  63. package/src/hooks/use-controllable-state.ts +34 -0
  64. package/src/hooks/use-focus-trap.ts +56 -0
  65. package/src/hooks/use-reduced-motion.ts +17 -0
  66. package/src/index.ts +148 -0
  67. package/src/layout/card/Card.stories.tsx +45 -0
  68. package/src/layout/card/Card.test.tsx +23 -0
  69. package/src/layout/card/Card.tsx +42 -0
  70. package/src/layout/card/Card.types.ts +6 -0
  71. package/src/layout/card/index.ts +2 -0
  72. package/src/layout/command-palette/CommandPalette.stories.tsx +34 -0
  73. package/src/layout/command-palette/CommandPalette.test.tsx +43 -0
  74. package/src/layout/command-palette/CommandPalette.tsx +188 -0
  75. package/src/layout/command-palette/CommandPalette.types.ts +18 -0
  76. package/src/layout/command-palette/index.ts +2 -0
  77. package/src/layout/sidebar/Sidebar.stories.tsx +60 -0
  78. package/src/layout/sidebar/Sidebar.test.tsx +27 -0
  79. package/src/layout/sidebar/Sidebar.tsx +57 -0
  80. package/src/layout/sidebar/Sidebar.types.ts +14 -0
  81. package/src/layout/sidebar/index.ts +2 -0
  82. package/src/layout/top-bar/TopBar.stories.tsx +51 -0
  83. package/src/layout/top-bar/TopBar.test.tsx +18 -0
  84. package/src/layout/top-bar/TopBar.tsx +19 -0
  85. package/src/layout/top-bar/TopBar.types.ts +10 -0
  86. package/src/layout/top-bar/index.ts +2 -0
  87. package/src/navigation/breadcrumbs/Breadcrumbs.stories.tsx +30 -0
  88. package/src/navigation/breadcrumbs/Breadcrumbs.test.tsx +43 -0
  89. package/src/navigation/breadcrumbs/Breadcrumbs.tsx +45 -0
  90. package/src/navigation/breadcrumbs/Breadcrumbs.types.ts +12 -0
  91. package/src/navigation/breadcrumbs/index.ts +2 -0
  92. package/src/navigation/sidebar-nav-item/SidebarNavItem.stories.tsx +41 -0
  93. package/src/navigation/sidebar-nav-item/SidebarNavItem.test.tsx +46 -0
  94. package/src/navigation/sidebar-nav-item/SidebarNavItem.tsx +38 -0
  95. package/src/navigation/sidebar-nav-item/SidebarNavItem.types.ts +12 -0
  96. package/src/navigation/sidebar-nav-item/index.ts +2 -0
  97. package/src/navigation/tabs/Tabs.stories.tsx +47 -0
  98. package/src/navigation/tabs/Tabs.test.tsx +67 -0
  99. package/src/navigation/tabs/Tabs.tsx +111 -0
  100. package/src/navigation/tabs/Tabs.types.ts +36 -0
  101. package/src/navigation/tabs/index.ts +2 -0
  102. package/src/patterns/accordion/Accordion.stories.tsx +25 -0
  103. package/src/patterns/accordion/Accordion.test.tsx +44 -0
  104. package/src/patterns/accordion/Accordion.tsx +92 -0
  105. package/src/patterns/accordion/index.ts +2 -0
  106. package/src/patterns/action-menu/ActionMenu.stories.tsx +18 -0
  107. package/src/patterns/action-menu/ActionMenu.test.tsx +18 -0
  108. package/src/patterns/action-menu/ActionMenu.tsx +41 -0
  109. package/src/patterns/action-menu/index.ts +2 -0
  110. package/src/patterns/carousel/Carousel.stories.tsx +16 -0
  111. package/src/patterns/carousel/Carousel.test.tsx +16 -0
  112. package/src/patterns/carousel/Carousel.tsx +69 -0
  113. package/src/patterns/carousel/index.ts +2 -0
  114. package/src/patterns/image-placeholder/ImagePlaceholder.stories.tsx +9 -0
  115. package/src/patterns/image-placeholder/ImagePlaceholder.test.tsx +10 -0
  116. package/src/patterns/image-placeholder/ImagePlaceholder.tsx +21 -0
  117. package/src/patterns/image-placeholder/index.ts +2 -0
  118. package/src/patterns/notification-dot/NotificationDot.stories.tsx +17 -0
  119. package/src/patterns/notification-dot/NotificationDot.test.tsx +14 -0
  120. package/src/patterns/notification-dot/NotificationDot.tsx +18 -0
  121. package/src/patterns/notification-dot/index.ts +2 -0
  122. package/src/patterns/pagination/Pagination.stories.tsx +14 -0
  123. package/src/patterns/pagination/Pagination.test.tsx +22 -0
  124. package/src/patterns/pagination/Pagination.tsx +67 -0
  125. package/src/patterns/pagination/index.ts +2 -0
  126. package/src/primitives/avatar/Avatar.stories.tsx +46 -0
  127. package/src/primitives/avatar/Avatar.test.tsx +35 -0
  128. package/src/primitives/avatar/Avatar.tsx +49 -0
  129. package/src/primitives/avatar/Avatar.types.ts +21 -0
  130. package/src/primitives/avatar/AvatarGroup.tsx +27 -0
  131. package/src/primitives/avatar/index.ts +3 -0
  132. package/src/primitives/badge/Badge.stories.tsx +28 -0
  133. package/src/primitives/badge/Badge.test.tsx +23 -0
  134. package/src/primitives/badge/Badge.tsx +44 -0
  135. package/src/primitives/badge/Badge.types.ts +14 -0
  136. package/src/primitives/badge/index.ts +2 -0
  137. package/src/primitives/button/Button.stories.tsx +81 -0
  138. package/src/primitives/button/Button.test.tsx +64 -0
  139. package/src/primitives/button/Button.tsx +85 -0
  140. package/src/primitives/button/Button.types.ts +17 -0
  141. package/src/primitives/button/index.ts +2 -0
  142. package/src/primitives/checkbox/Checkbox.stories.tsx +27 -0
  143. package/src/primitives/checkbox/Checkbox.test.tsx +30 -0
  144. package/src/primitives/checkbox/Checkbox.tsx +79 -0
  145. package/src/primitives/checkbox/Checkbox.types.ts +12 -0
  146. package/src/primitives/checkbox/index.ts +2 -0
  147. package/src/primitives/combobox/Combobox.stories.tsx +44 -0
  148. package/src/primitives/combobox/Combobox.test.tsx +44 -0
  149. package/src/primitives/combobox/Combobox.tsx +201 -0
  150. package/src/primitives/combobox/Combobox.types.ts +25 -0
  151. package/src/primitives/combobox/index.ts +2 -0
  152. package/src/primitives/date-input/DateInput.stories.tsx +23 -0
  153. package/src/primitives/date-input/DateInput.test.tsx +22 -0
  154. package/src/primitives/date-input/DateInput.tsx +66 -0
  155. package/src/primitives/date-input/DateInput.types.ts +10 -0
  156. package/src/primitives/date-input/index.ts +2 -0
  157. package/src/primitives/file-upload/FileUploadDropzone.stories.tsx +27 -0
  158. package/src/primitives/file-upload/FileUploadDropzone.test.tsx +26 -0
  159. package/src/primitives/file-upload/FileUploadDropzone.tsx +99 -0
  160. package/src/primitives/file-upload/FileUploadDropzone.types.ts +14 -0
  161. package/src/primitives/file-upload/index.ts +2 -0
  162. package/src/primitives/input/InputGroup.stories.tsx +31 -0
  163. package/src/primitives/input/InputGroup.test.tsx +40 -0
  164. package/src/primitives/input/InputGroup.tsx +65 -0
  165. package/src/primitives/input/InputGroup.types.ts +12 -0
  166. package/src/primitives/input/index.ts +2 -0
  167. package/src/primitives/link/Link.stories.tsx +28 -0
  168. package/src/primitives/link/Link.test.tsx +23 -0
  169. package/src/primitives/link/Link.tsx +28 -0
  170. package/src/primitives/link/Link.types.ts +8 -0
  171. package/src/primitives/link/index.ts +2 -0
  172. package/src/primitives/radio/Radio.stories.tsx +29 -0
  173. package/src/primitives/radio/Radio.test.tsx +32 -0
  174. package/src/primitives/radio/Radio.tsx +59 -0
  175. package/src/primitives/radio/Radio.types.ts +6 -0
  176. package/src/primitives/radio/index.ts +2 -0
  177. package/src/primitives/select/SelectGroup.stories.tsx +33 -0
  178. package/src/primitives/select/SelectGroup.test.tsx +34 -0
  179. package/src/primitives/select/SelectGroup.tsx +72 -0
  180. package/src/primitives/select/SelectGroup.types.ts +12 -0
  181. package/src/primitives/select/index.ts +2 -0
  182. package/src/primitives/slider/Slider.stories.tsx +23 -0
  183. package/src/primitives/slider/Slider.test.tsx +28 -0
  184. package/src/primitives/slider/Slider.tsx +80 -0
  185. package/src/primitives/slider/Slider.types.ts +22 -0
  186. package/src/primitives/slider/index.ts +2 -0
  187. package/src/primitives/textarea/TextareaGroup.stories.tsx +27 -0
  188. package/src/primitives/textarea/TextareaGroup.test.tsx +24 -0
  189. package/src/primitives/textarea/TextareaGroup.tsx +59 -0
  190. package/src/primitives/textarea/TextareaGroup.types.ts +10 -0
  191. package/src/primitives/textarea/index.ts +2 -0
  192. package/src/primitives/toggle/Toggle.stories.tsx +27 -0
  193. package/src/primitives/toggle/Toggle.test.tsx +31 -0
  194. package/src/primitives/toggle/Toggle.tsx +65 -0
  195. package/src/primitives/toggle/Toggle.types.ts +16 -0
  196. package/src/primitives/toggle/index.ts +2 -0
  197. package/src/primitives/tooltip/Tooltip.stories.tsx +45 -0
  198. package/src/primitives/tooltip/Tooltip.test.tsx +28 -0
  199. package/src/primitives/tooltip/Tooltip.tsx +94 -0
  200. package/src/primitives/tooltip/Tooltip.types.ts +16 -0
  201. package/src/primitives/tooltip/index.ts +2 -0
  202. package/src/productivity/comment-thread/CommentThread.stories.tsx +20 -0
  203. package/src/productivity/comment-thread/CommentThread.test.tsx +21 -0
  204. package/src/productivity/comment-thread/CommentThread.tsx +47 -0
  205. package/src/productivity/comment-thread/index.ts +2 -0
  206. package/src/productivity/kanban-board/KanbanBoard.tsx +41 -0
  207. package/src/productivity/kanban-board/index.ts +2 -0
  208. package/src/productivity/kanban-column/KanbanColumn.stories.tsx +131 -0
  209. package/src/productivity/kanban-column/KanbanColumn.test.tsx +18 -0
  210. package/src/productivity/kanban-column/KanbanColumn.tsx +58 -0
  211. package/src/productivity/kanban-column/SortableTaskCard.tsx +46 -0
  212. package/src/productivity/kanban-column/index.ts +4 -0
  213. package/src/productivity/priority-selector/PrioritySelector.stories.tsx +14 -0
  214. package/src/productivity/priority-selector/PrioritySelector.test.tsx +18 -0
  215. package/src/productivity/priority-selector/PrioritySelector.tsx +40 -0
  216. package/src/productivity/priority-selector/index.ts +2 -0
  217. package/src/productivity/rich-text-toolbar/RichTextToolbar.stories.tsx +19 -0
  218. package/src/productivity/rich-text-toolbar/RichTextToolbar.test.tsx +21 -0
  219. package/src/productivity/rich-text-toolbar/RichTextToolbar.tsx +50 -0
  220. package/src/productivity/rich-text-toolbar/index.ts +2 -0
  221. package/src/productivity/task-card/TaskCard.stories.tsx +20 -0
  222. package/src/productivity/task-card/TaskCard.test.tsx +21 -0
  223. package/src/productivity/task-card/TaskCard.tsx +76 -0
  224. package/src/productivity/task-card/index.ts +2 -0
  225. package/src/test-setup.ts +1 -0
  226. package/src/tokens/index.ts +1 -0
  227. package/src/tokens/tokens.ts +71 -0
  228. package/src/tokens/weave-theme.css +168 -0
  229. package/src/utils/cn.ts +6 -0
  230. package/src/utils/index.ts +1 -0
@@ -0,0 +1,677 @@
1
+ import * as react from 'react';
2
+ import { ComponentPropsWithoutRef } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { Placement } from '@floating-ui/react';
5
+ import { DragEndEvent, DragOverEvent } from '@dnd-kit/core';
6
+ import { ClassValue } from 'clsx';
7
+
8
+ type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
9
+ type ButtonSize = 'sm' | 'md' | 'lg';
10
+ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
11
+ /** Visual style variant */
12
+ variant?: ButtonVariant;
13
+ /** Size of the button */
14
+ size?: ButtonSize;
15
+ /** Show loading spinner and disable interaction */
16
+ loading?: boolean;
17
+ /** Icon element to show before children */
18
+ leftIcon?: React.ReactNode;
19
+ /** Icon element to show after children */
20
+ rightIcon?: React.ReactNode;
21
+ }
22
+
23
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
24
+
25
+ interface InputGroupProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
26
+ /** Label text displayed above the input */
27
+ label: string;
28
+ /** Helper text displayed below the input */
29
+ helperText?: string;
30
+ /** Error message — sets the input to error state */
31
+ error?: string;
32
+ /** Success message — sets the input to success state */
33
+ success?: string;
34
+ }
35
+
36
+ declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLInputElement>>;
37
+
38
+ interface TextareaGroupProps extends ComponentPropsWithoutRef<'textarea'> {
39
+ /** Label text displayed above the textarea */
40
+ label: string;
41
+ /** Helper text displayed below the textarea */
42
+ helperText?: string;
43
+ /** Error message — sets the textarea to error state */
44
+ error?: string;
45
+ }
46
+
47
+ declare const TextareaGroup: react.ForwardRefExoticComponent<TextareaGroupProps & react.RefAttributes<HTMLTextAreaElement>>;
48
+
49
+ interface SelectGroupProps extends ComponentPropsWithoutRef<'select'> {
50
+ /** Label text displayed above the select */
51
+ label: string;
52
+ /** Helper text displayed below the select */
53
+ helperText?: string;
54
+ /** Error message — sets the select to error state */
55
+ error?: string;
56
+ /** Placeholder option text */
57
+ placeholder?: string;
58
+ }
59
+
60
+ declare const SelectGroup: react.ForwardRefExoticComponent<SelectGroupProps & react.RefAttributes<HTMLSelectElement>>;
61
+
62
+ interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
63
+ /** Label text displayed next to the checkbox */
64
+ label: string;
65
+ /** Controlled checked state */
66
+ checked?: boolean;
67
+ /** Default checked state for uncontrolled usage */
68
+ defaultChecked?: boolean;
69
+ /** Change handler */
70
+ onCheckedChange?: (checked: boolean) => void;
71
+ }
72
+
73
+ declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
74
+
75
+ interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
76
+ /** Label text displayed next to the radio button */
77
+ label: string;
78
+ }
79
+
80
+ declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
81
+
82
+ interface ToggleProps {
83
+ /** Label text displayed next to the toggle */
84
+ label: string;
85
+ /** Controlled on/off state */
86
+ checked?: boolean;
87
+ /** Default state for uncontrolled usage */
88
+ defaultChecked?: boolean;
89
+ /** Change handler */
90
+ onCheckedChange?: (checked: boolean) => void;
91
+ /** Whether the toggle is disabled */
92
+ disabled?: boolean;
93
+ /** Additional CSS classes */
94
+ className?: string;
95
+ /** Accessible name override */
96
+ 'aria-label'?: string;
97
+ }
98
+
99
+ declare function Toggle({ label, checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, 'aria-label': ariaLabel, }: ToggleProps): react_jsx_runtime.JSX.Element;
100
+
101
+ type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
102
+ interface BadgeProps {
103
+ /** Badge content */
104
+ children: React.ReactNode;
105
+ /** Visual variant */
106
+ variant?: BadgeVariant;
107
+ /** Show a remove button */
108
+ removable?: boolean;
109
+ /** Called when the remove button is clicked */
110
+ onRemove?: () => void;
111
+ /** Additional CSS classes */
112
+ className?: string;
113
+ }
114
+
115
+ declare function Badge({ children, variant, removable, onRemove, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
116
+
117
+ type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
118
+ interface AvatarProps {
119
+ /** Full name — used for initials fallback and alt text */
120
+ name: string;
121
+ /** Image URL */
122
+ src?: string;
123
+ /** Size variant */
124
+ size?: AvatarSize;
125
+ /** Additional CSS classes */
126
+ className?: string;
127
+ }
128
+ interface AvatarGroupProps {
129
+ /** Avatar elements */
130
+ children: React.ReactNode;
131
+ /** Maximum number to display before +N overflow */
132
+ max?: number;
133
+ /** Additional CSS classes */
134
+ className?: string;
135
+ }
136
+
137
+ declare function Avatar({ name, src, size, className }: AvatarProps): react_jsx_runtime.JSX.Element;
138
+
139
+ declare function AvatarGroup({ children, max, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
140
+
141
+ type LinkVariant = 'inline' | 'withIcon';
142
+ interface LinkProps extends ComponentPropsWithoutRef<'a'> {
143
+ /** Visual variant */
144
+ variant?: LinkVariant;
145
+ }
146
+
147
+ declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
148
+
149
+ type TooltipVariant = 'dark' | 'light';
150
+ interface TooltipProps {
151
+ /** Tooltip content */
152
+ content: React.ReactNode;
153
+ /** The trigger element */
154
+ children: React.ReactElement;
155
+ /** Visual variant */
156
+ variant?: TooltipVariant;
157
+ /** Placement relative to trigger */
158
+ placement?: Placement;
159
+ /** Delay before showing (ms) */
160
+ delayMs?: number;
161
+ }
162
+
163
+ declare function Tooltip({ content, children, variant, placement, delayMs, }: TooltipProps): react_jsx_runtime.JSX.Element;
164
+
165
+ interface SliderProps {
166
+ /** Label text */
167
+ label: string;
168
+ /** Current value (controlled) */
169
+ value?: number;
170
+ /** Default value (uncontrolled) */
171
+ defaultValue?: number;
172
+ /** Minimum value */
173
+ min?: number;
174
+ /** Maximum value */
175
+ max?: number;
176
+ /** Step increment */
177
+ step?: number;
178
+ /** Change handler */
179
+ onChange?: (value: number) => void;
180
+ /** Whether the slider is disabled */
181
+ disabled?: boolean;
182
+ /** Show value label next to the slider */
183
+ showValue?: boolean;
184
+ /** Additional CSS classes */
185
+ className?: string;
186
+ }
187
+
188
+ declare function Slider({ label, value: controlledValue, defaultValue, min, max, step, onChange, disabled, showValue, className, }: SliderProps): react_jsx_runtime.JSX.Element;
189
+
190
+ interface DateInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
191
+ /** Label text displayed above the input */
192
+ label: string;
193
+ /** Helper text displayed below the input */
194
+ helperText?: string;
195
+ /** Error message */
196
+ error?: string;
197
+ }
198
+
199
+ declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
200
+
201
+ interface ComboboxOption {
202
+ value: string;
203
+ label: string;
204
+ }
205
+ interface ComboboxProps {
206
+ /** Label text */
207
+ label: string;
208
+ /** Available options */
209
+ options: ComboboxOption[];
210
+ /** Controlled selected value */
211
+ value?: string;
212
+ /** Default selected value */
213
+ defaultValue?: string;
214
+ /** Change handler */
215
+ onChange?: (value: string) => void;
216
+ /** Placeholder text */
217
+ placeholder?: string;
218
+ /** Error message */
219
+ error?: string;
220
+ /** Whether the combobox is disabled */
221
+ disabled?: boolean;
222
+ /** Additional CSS classes */
223
+ className?: string;
224
+ }
225
+
226
+ declare function Combobox({ label, options, value: controlledValue, defaultValue, onChange, placeholder, error, disabled, className, }: ComboboxProps): react_jsx_runtime.JSX.Element;
227
+
228
+ interface FileUploadDropzoneProps {
229
+ /** Called when files are dropped or selected */
230
+ onFiles?: (files: File[]) => void;
231
+ /** Accepted file types (e.g., "image/*,.pdf") */
232
+ accept?: string;
233
+ /** Allow multiple files */
234
+ multiple?: boolean;
235
+ /** Whether the dropzone is disabled */
236
+ disabled?: boolean;
237
+ /** Description text */
238
+ description?: string;
239
+ /** Additional CSS classes */
240
+ className?: string;
241
+ }
242
+
243
+ declare function FileUploadDropzone({ onFiles, accept, multiple, disabled, description, className, }: FileUploadDropzoneProps): react_jsx_runtime.JSX.Element;
244
+
245
+ interface CardProps extends ComponentPropsWithoutRef<'div'> {
246
+ }
247
+ interface CardHeaderProps extends ComponentPropsWithoutRef<'div'> {
248
+ }
249
+ interface CardContentProps extends ComponentPropsWithoutRef<'div'> {
250
+ }
251
+ interface CardActionsProps extends ComponentPropsWithoutRef<'div'> {
252
+ }
253
+
254
+ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
255
+ Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
256
+ Content: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
257
+ Actions: react.ForwardRefExoticComponent<CardActionsProps & react.RefAttributes<HTMLDivElement>>;
258
+ };
259
+
260
+ interface SidebarProps {
261
+ /** Whether the sidebar is collapsed to rail mode (56px) */
262
+ collapsed?: boolean;
263
+ /** Called when collapse state changes */
264
+ onCollapsedChange?: (collapsed: boolean) => void;
265
+ /** Header slot (logo area) */
266
+ header?: React.ReactNode;
267
+ /** Navigation slot */
268
+ children: React.ReactNode;
269
+ /** Footer slot */
270
+ footer?: React.ReactNode;
271
+ /** Additional CSS classes */
272
+ className?: string;
273
+ }
274
+
275
+ declare const SidebarContext: react.Context<{
276
+ collapsed: boolean;
277
+ }>;
278
+ declare const useSidebar: () => {
279
+ collapsed: boolean;
280
+ };
281
+ declare function Sidebar({ collapsed, onCollapsedChange, header, children, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
282
+
283
+ interface TopBarProps {
284
+ /** Logo or brand element */
285
+ logo?: React.ReactNode;
286
+ /** Navigation tabs or links */
287
+ navigation?: React.ReactNode;
288
+ /** Right-side actions (search, notifications, avatar) */
289
+ actions?: React.ReactNode;
290
+ /** Additional CSS classes */
291
+ className?: string;
292
+ }
293
+
294
+ declare function TopBar({ logo, navigation, actions, className }: TopBarProps): react_jsx_runtime.JSX.Element;
295
+
296
+ interface CommandItem {
297
+ id: string;
298
+ label: string;
299
+ icon?: React.ReactNode;
300
+ section?: string;
301
+ onSelect: () => void;
302
+ }
303
+ interface CommandPaletteProps {
304
+ /** Whether the palette is open */
305
+ open: boolean;
306
+ /** Called when open state changes */
307
+ onOpenChange: (open: boolean) => void;
308
+ /** Available command items */
309
+ items: CommandItem[];
310
+ /** Placeholder text for the search input */
311
+ placeholder?: string;
312
+ }
313
+
314
+ declare function CommandPalette({ open, onOpenChange, items, placeholder, }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
315
+
316
+ interface SidebarNavItemProps {
317
+ /** Icon element */
318
+ icon: React.ReactNode;
319
+ /** Label text */
320
+ label: string;
321
+ /** Whether this item is currently active */
322
+ active?: boolean;
323
+ /** Click handler */
324
+ onClick?: () => void;
325
+ /** Additional CSS classes */
326
+ className?: string;
327
+ }
328
+
329
+ declare function SidebarNavItem({ icon, label, active, onClick, className, }: SidebarNavItemProps): react_jsx_runtime.JSX.Element;
330
+
331
+ type TabsVariant = 'underline' | 'pill';
332
+ interface TabsProps {
333
+ /** Controlled active tab value */
334
+ value?: string;
335
+ /** Default active tab value */
336
+ defaultValue?: string;
337
+ /** Called when active tab changes */
338
+ onValueChange?: (value: string) => void;
339
+ /** Visual variant */
340
+ variant?: TabsVariant;
341
+ /** Tab content */
342
+ children: React.ReactNode;
343
+ /** Additional CSS classes */
344
+ className?: string;
345
+ }
346
+ interface TabsListProps {
347
+ children: React.ReactNode;
348
+ className?: string;
349
+ }
350
+ interface TabsTriggerProps {
351
+ /** Unique value identifying this tab */
352
+ value: string;
353
+ children: React.ReactNode;
354
+ className?: string;
355
+ disabled?: boolean;
356
+ }
357
+ interface TabsPanelProps {
358
+ /** Value matching the corresponding trigger */
359
+ value: string;
360
+ children: React.ReactNode;
361
+ className?: string;
362
+ }
363
+
364
+ declare function TabsRoot({ value: controlledValue, defaultValue, onValueChange, variant, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
365
+ declare function TabsList({ children, className }: TabsListProps): react_jsx_runtime.JSX.Element;
366
+ declare function TabsTrigger({ value, children, className, disabled }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
367
+ declare function TabsPanel({ value, children, className }: TabsPanelProps): react_jsx_runtime.JSX.Element | null;
368
+ declare const Tabs: typeof TabsRoot & {
369
+ List: typeof TabsList;
370
+ Trigger: typeof TabsTrigger;
371
+ Panel: typeof TabsPanel;
372
+ };
373
+
374
+ interface BreadcrumbItem {
375
+ label: string;
376
+ href?: string;
377
+ onClick?: () => void;
378
+ }
379
+ interface BreadcrumbsProps {
380
+ /** Breadcrumb items — last item is treated as active/current */
381
+ items: BreadcrumbItem[];
382
+ /** Additional CSS classes */
383
+ className?: string;
384
+ }
385
+
386
+ declare function Breadcrumbs({ items, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
387
+
388
+ interface StatCardProps {
389
+ label: string;
390
+ value: string | number;
391
+ trend?: {
392
+ value: number;
393
+ direction: 'up' | 'down';
394
+ };
395
+ className?: string;
396
+ }
397
+ declare function StatCard({ label, value, trend, className }: StatCardProps): react_jsx_runtime.JSX.Element;
398
+
399
+ interface ProgressBarProps {
400
+ label?: string;
401
+ value: number;
402
+ max?: number;
403
+ showValue?: boolean;
404
+ className?: string;
405
+ }
406
+ declare function ProgressBar({ label, value, max, showValue, className }: ProgressBarProps): react_jsx_runtime.JSX.Element;
407
+
408
+ interface CircularProgressProps {
409
+ value: number;
410
+ max?: number;
411
+ size?: number;
412
+ strokeWidth?: number;
413
+ className?: string;
414
+ }
415
+ declare function CircularProgress({ value, max, size, strokeWidth, className }: CircularProgressProps): react_jsx_runtime.JSX.Element;
416
+
417
+ declare const Table: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & react.RefAttributes<HTMLTableElement>> & {
418
+ Head: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
419
+ Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
420
+ Row: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
421
+ HeaderCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & react.RefAttributes<HTMLTableCellElement>>;
422
+ Cell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableCellElement>>;
423
+ };
424
+
425
+ type TimelineColor = 'rust' | 'forest' | 'default';
426
+ interface TimelineItem {
427
+ id: string;
428
+ title: string;
429
+ description?: string;
430
+ timestamp: string;
431
+ color?: TimelineColor;
432
+ }
433
+ interface TimelineProps {
434
+ items: TimelineItem[];
435
+ className?: string;
436
+ }
437
+ declare function Timeline({ items, className }: TimelineProps): react_jsx_runtime.JSX.Element;
438
+
439
+ interface ActivityItem {
440
+ id: string;
441
+ name: string;
442
+ avatarSrc?: string;
443
+ action: string;
444
+ timestamp: string;
445
+ }
446
+ interface ActivityFeedProps {
447
+ items: ActivityItem[];
448
+ className?: string;
449
+ }
450
+ declare function ActivityFeed({ items, className }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
451
+
452
+ interface EmptyStateProps {
453
+ icon: React.ReactNode;
454
+ title: string;
455
+ description?: string;
456
+ actionLabel?: string;
457
+ onAction?: () => void;
458
+ className?: string;
459
+ }
460
+ declare function EmptyState({ icon, title, description, actionLabel, onAction, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
461
+
462
+ type ToastVariant = 'success' | 'error' | 'warning' | 'info';
463
+ interface ToastData {
464
+ id: string;
465
+ title: string;
466
+ message?: string;
467
+ variant: ToastVariant;
468
+ duration?: number;
469
+ }
470
+ interface ToastContextValue {
471
+ toast: (data: Omit<ToastData, 'id'>) => void;
472
+ }
473
+ declare const useToast: () => ToastContextValue;
474
+ declare function ToastProvider({ children }: {
475
+ children: React.ReactNode;
476
+ }): react_jsx_runtime.JSX.Element;
477
+
478
+ interface ModalProps {
479
+ open: boolean;
480
+ onClose: () => void;
481
+ children: React.ReactNode;
482
+ className?: string;
483
+ }
484
+ declare function ModalRoot({ open, onClose, children, className }: ModalProps): react_jsx_runtime.JSX.Element | null;
485
+ declare const Modal: typeof ModalRoot & {
486
+ Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
487
+ onClose?: () => void;
488
+ } & react.RefAttributes<HTMLDivElement>>;
489
+ Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
490
+ Footer: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
491
+ };
492
+
493
+ type AlertBannerVariant = 'info' | 'warning' | 'error';
494
+ interface AlertBannerProps {
495
+ message: string;
496
+ variant?: AlertBannerVariant;
497
+ dismissible?: boolean;
498
+ className?: string;
499
+ }
500
+ declare function AlertBanner({ message, variant, dismissible, className }: AlertBannerProps): react_jsx_runtime.JSX.Element | null;
501
+
502
+ type SkeletonShape = 'text' | 'avatar' | 'image' | 'custom';
503
+ interface SkeletonLoaderProps {
504
+ shape?: SkeletonShape;
505
+ width?: string | number;
506
+ height?: string | number;
507
+ lines?: number;
508
+ className?: string;
509
+ }
510
+ declare function SkeletonLoader({ shape, width, height, lines, className }: SkeletonLoaderProps): react_jsx_runtime.JSX.Element;
511
+
512
+ interface AccordionProps {
513
+ children: React.ReactNode;
514
+ className?: string;
515
+ }
516
+ interface AccordionItemProps {
517
+ value: string;
518
+ children: React.ReactNode;
519
+ className?: string;
520
+ }
521
+ interface AccordionTriggerProps {
522
+ children: React.ReactNode;
523
+ className?: string;
524
+ }
525
+ interface AccordionContentProps {
526
+ children: React.ReactNode;
527
+ className?: string;
528
+ }
529
+ declare function AccordionRoot({ children, className }: AccordionProps): react_jsx_runtime.JSX.Element;
530
+ declare function AccordionItem({ value, children, className }: AccordionItemProps): react_jsx_runtime.JSX.Element;
531
+ declare function AccordionTrigger({ children, className }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
532
+ declare function AccordionContent({ children, className }: AccordionContentProps): react_jsx_runtime.JSX.Element;
533
+ declare const Accordion: typeof AccordionRoot & {
534
+ Item: typeof AccordionItem;
535
+ Trigger: typeof AccordionTrigger;
536
+ Content: typeof AccordionContent;
537
+ };
538
+
539
+ interface ActionMenuItem {
540
+ label: string;
541
+ icon?: React.ReactNode;
542
+ onClick?: () => void;
543
+ destructive?: boolean;
544
+ divider?: boolean;
545
+ }
546
+ interface ActionMenuProps {
547
+ items: ActionMenuItem[];
548
+ className?: string;
549
+ }
550
+ declare function ActionMenu({ items, className }: ActionMenuProps): react_jsx_runtime.JSX.Element;
551
+
552
+ interface PaginationProps {
553
+ currentPage: number;
554
+ totalPages: number;
555
+ onPageChange: (page: number) => void;
556
+ className?: string;
557
+ }
558
+ declare function Pagination({ currentPage, totalPages, onPageChange, className }: PaginationProps): react_jsx_runtime.JSX.Element;
559
+
560
+ interface NotificationDotProps {
561
+ children: React.ReactNode;
562
+ show?: boolean;
563
+ className?: string;
564
+ }
565
+ declare function NotificationDot({ children, show, className }: NotificationDotProps): react_jsx_runtime.JSX.Element;
566
+
567
+ interface CarouselProps {
568
+ children: React.ReactNode;
569
+ className?: string;
570
+ }
571
+ declare function Carousel({ children, className }: CarouselProps): react_jsx_runtime.JSX.Element;
572
+
573
+ interface ImagePlaceholderProps {
574
+ width?: string | number;
575
+ height?: string | number;
576
+ label?: string;
577
+ className?: string;
578
+ }
579
+ declare function ImagePlaceholder({ width, height, label, className }: ImagePlaceholderProps): react_jsx_runtime.JSX.Element;
580
+
581
+ interface TaskCardProps {
582
+ /** Unique identifier for drag-and-drop */
583
+ id?: string;
584
+ title: string;
585
+ priority?: 'urgent' | 'high' | 'medium' | 'low';
586
+ labels?: {
587
+ text: string;
588
+ variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
589
+ }[];
590
+ assignee?: {
591
+ name: string;
592
+ src?: string;
593
+ };
594
+ dueDate?: string;
595
+ className?: string;
596
+ onClick?: () => void;
597
+ /** Show drag grip handle */
598
+ draggable?: boolean;
599
+ /** Props spread from useSortable — used internally by KanbanBoard */
600
+ dragHandleProps?: Record<string, unknown>;
601
+ }
602
+ declare function TaskCard({ title, priority, labels, assignee, dueDate, className, onClick, draggable, dragHandleProps }: TaskCardProps): react_jsx_runtime.JSX.Element;
603
+
604
+ interface KanbanColumnProps {
605
+ /** Unique column identifier for drop targeting */
606
+ id: string;
607
+ title: string;
608
+ count?: number;
609
+ onAdd?: () => void;
610
+ /** Item IDs for sortable context */
611
+ itemIds?: string[];
612
+ children: React.ReactNode;
613
+ className?: string;
614
+ }
615
+ declare function KanbanColumn({ id, title, count, onAdd, itemIds, children, className }: KanbanColumnProps): react_jsx_runtime.JSX.Element;
616
+
617
+ interface SortableTaskCardProps extends TaskCardProps {
618
+ /** Unique sortable ID — required */
619
+ id: string;
620
+ }
621
+ declare function SortableTaskCard({ id, className, ...props }: SortableTaskCardProps): react_jsx_runtime.JSX.Element;
622
+
623
+ interface KanbanBoardProps {
624
+ /** Called when an item is dropped */
625
+ onDragEnd?: (event: DragEndEvent) => void;
626
+ /** Called when dragging over a new container */
627
+ onDragOver?: (event: DragOverEvent) => void;
628
+ children: React.ReactNode;
629
+ className?: string;
630
+ }
631
+ declare function KanbanBoard({ onDragEnd, onDragOver, children, className }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
632
+
633
+ type Priority = 'urgent' | 'high' | 'medium' | 'low';
634
+ interface PrioritySelectorProps {
635
+ value?: Priority;
636
+ onChange?: (priority: Priority) => void;
637
+ className?: string;
638
+ }
639
+ declare function PrioritySelector({ value, onChange, className }: PrioritySelectorProps): react_jsx_runtime.JSX.Element;
640
+
641
+ interface Comment {
642
+ id: string;
643
+ author: {
644
+ name: string;
645
+ avatarSrc?: string;
646
+ };
647
+ content: string;
648
+ timestamp: string;
649
+ replies?: Comment[];
650
+ }
651
+ interface CommentThreadProps {
652
+ comments: Comment[];
653
+ className?: string;
654
+ }
655
+ declare function CommentThread({ comments, className }: CommentThreadProps): react_jsx_runtime.JSX.Element;
656
+
657
+ interface RichTextToolbarProps {
658
+ activeFormats?: string[];
659
+ onFormatToggle?: (format: string) => void;
660
+ className?: string;
661
+ }
662
+ declare function RichTextToolbar({ activeFormats, onFormatToggle, className }: RichTextToolbarProps): react_jsx_runtime.JSX.Element;
663
+
664
+ declare function useReducedMotion(): boolean;
665
+
666
+ interface UseControllableStateParams<T> {
667
+ value?: T;
668
+ defaultValue: T;
669
+ onChange?: (value: T) => void;
670
+ }
671
+ declare function useControllableState<T>({ value: controlledValue, defaultValue, onChange, }: UseControllableStateParams<T>): [T, (value: T) => void];
672
+
673
+ declare function useFocusTrap<T extends HTMLElement>(active?: boolean): react.RefObject<T>;
674
+
675
+ declare function cn(...inputs: ClassValue[]): string;
676
+
677
+ export { Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionMenu, type ActionMenuItem, type ActionMenuProps, ActivityFeed, type ActivityFeedProps, type ActivityItem, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardActionsProps, type CardContentProps, type CardHeaderProps, type CardProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, type Comment, CommentThread, type CommentThreadProps, DateInput, type DateInputProps, EmptyState, type EmptyStateProps, FileUploadDropzone, type FileUploadDropzoneProps, ImagePlaceholder, type ImagePlaceholderProps, InputGroup, type InputGroupProps, KanbanBoard, type KanbanBoardProps, KanbanColumn, type KanbanColumnProps, Link, type LinkProps, type LinkVariant, Modal, type ModalProps, NotificationDot, type NotificationDotProps, Pagination, type PaginationProps, type Priority, PrioritySelector, type PrioritySelectorProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RichTextToolbar, type RichTextToolbarProps, SelectGroup, type SelectGroupProps, Sidebar, SidebarContext, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SkeletonLoader, type SkeletonLoaderProps, type SkeletonShape, Slider, type SliderProps, SortableTaskCard, type SortableTaskCardProps, StatCard, type StatCardProps, Table, Tabs, type TabsListProps, type TabsPanelProps, type TabsProps, type TabsTriggerProps, type TabsVariant, TaskCard, type TaskCardProps, TextareaGroup, type TextareaGroupProps, Timeline, type TimelineColor, type TimelineItem, type TimelineProps, type ToastData, ToastProvider, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipProps, type TooltipVariant, TopBar, type TopBarProps, cn, useControllableState, useFocusTrap, useReducedMotion, useSidebar, useToast };