@classytic/fluid 0.2.4 → 0.3.2

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 (69) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +149 -62
  3. package/dist/api-pagination-CJ0vR_w6.d.mts +34 -0
  4. package/dist/api-pagination-DBTE0yk4.mjs +190 -0
  5. package/dist/chunk-DQk6qfdC.mjs +18 -0
  6. package/dist/client/calendar.d.mts +105 -0
  7. package/dist/client/calendar.mjs +202 -0
  8. package/dist/client/core.d.mts +1614 -0
  9. package/dist/client/core.mjs +2779 -0
  10. package/dist/client/error.d.mts +125 -0
  11. package/dist/client/error.mjs +166 -0
  12. package/dist/client/hooks.d.mts +162 -0
  13. package/dist/client/hooks.mjs +447 -0
  14. package/dist/client/table.d.mts +84 -0
  15. package/dist/client/table.mjs +373 -0
  16. package/dist/client/theme.d.mts +6 -0
  17. package/dist/client/theme.mjs +65 -0
  18. package/dist/command.d.mts +134 -0
  19. package/dist/command.mjs +132 -0
  20. package/dist/compact.d.mts +359 -0
  21. package/dist/compact.mjs +892 -0
  22. package/dist/dashboard.d.mts +778 -0
  23. package/dist/dashboard.mjs +1617 -0
  24. package/dist/filter-utils-DqMmy_v-.mjs +72 -0
  25. package/dist/filter-utils-IZ0GtuPo.d.mts +40 -0
  26. package/dist/forms.d.mts +1549 -0
  27. package/dist/forms.mjs +3740 -0
  28. package/dist/index.d.mts +296 -0
  29. package/dist/index.mjs +432 -0
  30. package/dist/layouts.d.mts +215 -0
  31. package/dist/layouts.mjs +460 -0
  32. package/dist/search-context-DR7DBs7S.mjs +19 -0
  33. package/dist/search.d.mts +254 -0
  34. package/dist/search.mjs +523 -0
  35. package/dist/sheet-wrapper-CWNCvYMD.mjs +211 -0
  36. package/dist/use-base-search-BGgWnWaF.d.mts +35 -0
  37. package/dist/use-debounce-xmZucz5e.mjs +53 -0
  38. package/dist/use-keyboard-shortcut-Bl6YM5Q7.mjs +82 -0
  39. package/dist/use-keyboard-shortcut-_mRCh3QO.d.mts +24 -0
  40. package/dist/use-media-query-BnVNIKT4.mjs +17 -0
  41. package/dist/use-mobile-BX3SQVo2.mjs +20 -0
  42. package/dist/use-scroll-detection-CsgsQYvy.mjs +43 -0
  43. package/dist/utils-CDue7cEt.d.mts +6 -0
  44. package/dist/utils-DQ5SCVoW.mjs +10 -0
  45. package/package.json +85 -45
  46. package/styles.css +2 -2
  47. package/dist/chunk-GUHK2DTW.js +0 -15
  48. package/dist/chunk-GUHK2DTW.js.map +0 -1
  49. package/dist/chunk-H3NFL3GJ.js +0 -57
  50. package/dist/chunk-H3NFL3GJ.js.map +0 -1
  51. package/dist/chunk-J2YRTQE4.js +0 -293
  52. package/dist/chunk-J2YRTQE4.js.map +0 -1
  53. package/dist/compact.d.ts +0 -217
  54. package/dist/compact.js +0 -986
  55. package/dist/compact.js.map +0 -1
  56. package/dist/dashboard.d.ts +0 -387
  57. package/dist/dashboard.js +0 -1032
  58. package/dist/dashboard.js.map +0 -1
  59. package/dist/index.d.ts +0 -2140
  60. package/dist/index.js +0 -6422
  61. package/dist/index.js.map +0 -1
  62. package/dist/layout.d.ts +0 -25
  63. package/dist/layout.js +0 -4
  64. package/dist/layout.js.map +0 -1
  65. package/dist/search.d.ts +0 -172
  66. package/dist/search.js +0 -341
  67. package/dist/search.js.map +0 -1
  68. package/dist/use-base-search-AS5Z3SAy.d.ts +0 -64
  69. package/dist/utils-Cbsgs0XP.d.ts +0 -5
package/dist/index.d.ts DELETED
@@ -1,2140 +0,0 @@
1
- export { c as cn } from './utils-Cbsgs0XP.js';
2
- export { F as FilterConfig, S as SearchConfig, e as UseBaseSearchConfig, U as UseBaseSearchReturn, b as buildFilterParams, c as buildListingStatusParams, a as buildSearchParams, d as clearSearchAndFilterParams, g as getApiParams, u as useBaseSearch } from './use-base-search-AS5Z3SAy.js';
3
- import * as React from 'react';
4
- import React__default, { RefObject, ReactNode, ElementType, ComponentType, InputHTMLAttributes, Ref } from 'react';
5
- import * as react_jsx_runtime from 'react/jsx-runtime';
6
- import { LucideIcon, LucideProps } from 'lucide-react';
7
- import { ColumnDef } from '@tanstack/react-table';
8
- import * as class_variance_authority_types from 'class-variance-authority/types';
9
- import { VariantProps } from 'class-variance-authority';
10
- import { FieldValues, Control, FieldPath, FieldError } from 'react-hook-form';
11
- export { Container, ContainerProps, Section, SectionProps } from './layout.js';
12
- import 'clsx';
13
-
14
- /**
15
- * A utility module for handling localStorage operations with error handling and SSR safety
16
- */
17
- /**
18
- * Gets an item from localStorage with parsing and expiry check
19
- * @param {string} key - The key to retrieve from localStorage
20
- * @param {any} defaultValue - Default value to return if key doesn't exist or on error
21
- * @returns {any} The parsed value or defaultValue
22
- */
23
- declare const getStorageItem: <T>(key: string, defaultValue?: T | null) => T | null;
24
- /**
25
- * Sets an item in localStorage with serialization and optional expiry
26
- * @param {string} key - The key to set in localStorage
27
- * @param {any} value - The value to serialize and store
28
- * @param {number} [ttl] - Time to live in milliseconds (optional)
29
- * @returns {boolean} Success status
30
- */
31
- declare const setStorageItem: <T>(key: string, value: T, ttl?: number | null) => boolean;
32
- /**
33
- * Removes an item from localStorage
34
- * @param {string} key - The key to remove from localStorage
35
- * @returns {boolean} Success status
36
- */
37
- declare const removeStorageItem: (key: string) => boolean;
38
- /**
39
- * Clears all items from localStorage
40
- * @returns {boolean} Success status
41
- */
42
- declare const clearStorage: () => boolean;
43
- /**
44
- * Checks if localStorage is empty for a specific key
45
- * @param {string} key - The key to check in localStorage
46
- * @returns {boolean} True if empty or doesn't exist
47
- */
48
- declare const isStorageEmpty: (key: string) => boolean;
49
- /**
50
- * Generates a UUID (v4)
51
- * Uses crypto.randomUUID() when available, with a fallback for older environments.
52
- * @returns {string} A random UUID
53
- */
54
- declare const generateUUID: () => string;
55
- /**
56
- * Common expiry durations in milliseconds
57
- */
58
- declare const TTL: {
59
- readonly MINUTE: number;
60
- readonly HOUR: number;
61
- readonly DAY: number;
62
- readonly WEEK: number;
63
- readonly MONTH: number;
64
- };
65
- /**
66
- * Shorthand object for all localStorage operations
67
- */
68
- declare const storage: {
69
- get: <T>(key: string, defaultValue?: T | null) => T | null;
70
- set: <T>(key: string, value: T, ttl?: number | null) => boolean;
71
- remove: (key: string) => boolean;
72
- clear: () => boolean;
73
- isEmpty: (key: string) => boolean;
74
- generateUUID: () => string;
75
- TTL: {
76
- readonly MINUTE: number;
77
- readonly HOUR: number;
78
- readonly DAY: number;
79
- readonly WEEK: number;
80
- readonly MONTH: number;
81
- };
82
- };
83
-
84
- declare function useIsMobile(): boolean;
85
-
86
- declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;
87
-
88
- declare const useScrollDetection: (ref: RefObject<HTMLDivElement | null>, delay?: number) => {
89
- checkScroll: () => void;
90
- canScrollLeft: boolean;
91
- canScrollRight: boolean;
92
- isScrollable: boolean;
93
- };
94
-
95
- /**
96
- * useDebounce — Returns a debounced version of the input value.
97
- *
98
- * @example
99
- * ```tsx
100
- * const [search, setSearch] = useState("");
101
- * const debouncedSearch = useDebounce(search, 300);
102
- *
103
- * useEffect(() => {
104
- * fetchResults(debouncedSearch);
105
- * }, [debouncedSearch]);
106
- * ```
107
- */
108
- declare function useDebounce<T>(value: T, delay?: number): T;
109
- /**
110
- * useDebouncedCallback — Returns a debounced version of a callback function.
111
- *
112
- * @example
113
- * ```tsx
114
- * const debouncedSave = useDebouncedCallback((value: string) => {
115
- * saveToApi(value);
116
- * }, 500);
117
- *
118
- * <Input onChange={(e) => debouncedSave(e.target.value)} />
119
- * ```
120
- */
121
- declare function useDebouncedCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): (...args: Parameters<T>) => void;
122
-
123
- interface UseCopyToClipboardReturn {
124
- /** Copy text to clipboard */
125
- copy: (text: string) => Promise<boolean>;
126
- /** Whether text was recently copied (resets after timeout) */
127
- copied: boolean;
128
- /** Any error that occurred during copy */
129
- error: Error | null;
130
- /** Reset the copied state manually */
131
- reset: () => void;
132
- }
133
- /**
134
- * useCopyToClipboard — Copy text to clipboard with status tracking.
135
- *
136
- * @param resetDelay - How long (ms) the `copied` state stays true. Default: 2000
137
- *
138
- * @example
139
- * ```tsx
140
- * const { copy, copied } = useCopyToClipboard();
141
- *
142
- * <Button onClick={() => copy(apiKey)}>
143
- * {copied ? "Copied!" : "Copy API Key"}
144
- * </Button>
145
- * ```
146
- */
147
- declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardReturn;
148
-
149
- /**
150
- * useLocalStorage — Persist state in localStorage with type safety and optional expiry.
151
- *
152
- * @param key - The localStorage key
153
- * @param initialValue - Default value if no stored value exists
154
- * @param ttl - Time to live in milliseconds (optional)
155
- *
156
- * @example
157
- * ```tsx
158
- * const [theme, setTheme] = useLocalStorage("theme", "light");
159
- * const [cache, setCache] = useLocalStorage("api-cache", {}, 60000); // 1 min TTL
160
- * ```
161
- */
162
- declare function useLocalStorage<T>(key: string, initialValue: T, ttl?: number): [T, (value: T | ((prev: T) => T)) => void, () => void];
163
-
164
- interface AccordionSectionProps {
165
- title: string;
166
- icon?: ReactNode;
167
- children: ReactNode;
168
- defaultOpen?: boolean;
169
- className?: string;
170
- badge?: ReactNode;
171
- }
172
- /**
173
- * AccordionSection - Single collapsible section with smooth animation
174
- *
175
- * @example
176
- * ```tsx
177
- * <AccordionSection title="Settings" icon={<Settings className="h-4 w-4" />}>
178
- * <div>Content here</div>
179
- * </AccordionSection>
180
- * ```
181
- */
182
- declare const AccordionSection: React.NamedExoticComponent<AccordionSectionProps>;
183
- interface FaqItem {
184
- id: string;
185
- question: string;
186
- answer: ReactNode;
187
- }
188
- interface FaqAccordionProps {
189
- items: FaqItem[];
190
- defaultOpen?: string;
191
- className?: string;
192
- /** Allow multiple items to be open at once */
193
- multiple?: boolean;
194
- }
195
- /**
196
- * FaqAccordion - FAQ-style accordion where only one item can be open by default
197
- *
198
- * @example
199
- * ```tsx
200
- * <FaqAccordion
201
- * items={[
202
- * { id: "1", question: "What is this?", answer: "A FAQ accordion" },
203
- * { id: "2", question: "How does it work?", answer: "Click to expand" },
204
- * ]}
205
- * />
206
- * ```
207
- */
208
- declare const FaqAccordion: React.NamedExoticComponent<FaqAccordionProps>;
209
-
210
- interface DisplayHeadingProps {
211
- children: ReactNode;
212
- size?: "lg" | "xl" | "2xl";
213
- align?: "left" | "center" | "right";
214
- className?: string;
215
- highlightText?: string;
216
- highlightColor?: "primary" | "secondary" | "accent" | "gradient";
217
- as?: ElementType;
218
- }
219
- /**
220
- * DisplayHeading - Reusable component for hero/display headings
221
- * Provides consistent typography across the platform
222
- */
223
- declare function DisplayHeading({ children, size, align, className, highlightText, highlightColor, as: Component, ...props }: DisplayHeadingProps): react_jsx_runtime.JSX.Element;
224
-
225
- declare const FacebookIcon: () => react_jsx_runtime.JSX.Element;
226
- declare const GoogleIcon: () => react_jsx_runtime.JSX.Element;
227
- declare const TwitterXIcon: () => react_jsx_runtime.JSX.Element;
228
- declare const InstagramIcon: () => react_jsx_runtime.JSX.Element;
229
- declare const WhatsAppIcon: () => react_jsx_runtime.JSX.Element;
230
-
231
- interface ThumbnailProps {
232
- src?: string;
233
- alt?: string;
234
- aspect?: "square" | "video" | "portrait";
235
- size?: "small" | "medium" | "large" | "full";
236
- className?: string;
237
- fallback?: string;
238
- onClick?: () => void;
239
- }
240
- declare function Thumbnail({ src, alt, aspect, size, className, fallback, onClick, }: ThumbnailProps): react_jsx_runtime.JSX.Element;
241
-
242
- interface ApiPaginationData {
243
- total: number;
244
- pages: number;
245
- page: number;
246
- limit: number;
247
- hasNext: boolean;
248
- hasPrev: boolean;
249
- }
250
- interface ApiPaginationProps extends Partial<ApiPaginationData> {
251
- onPageChange?: (page: number) => void;
252
- className?: string;
253
- showInfo?: boolean;
254
- infoPosition?: "left" | "right";
255
- }
256
- /**
257
- * ApiPagination - A reusable pagination component for API-driven data
258
- */
259
- declare function ApiPagination({ total, limit, pages, page, hasNext, hasPrev, onPageChange, className, showInfo, infoPosition, }: ApiPaginationProps): react_jsx_runtime.JSX.Element;
260
-
261
- declare const CARD_VARIANTS: {
262
- readonly default: "";
263
- readonly outline: "border-2";
264
- readonly ghost: "border-0 shadow-none bg-transparent";
265
- readonly elevated: "shadow-lg border-0";
266
- readonly primary: "border-primary/20 bg-primary/5";
267
- readonly secondary: "border-secondary/20 bg-secondary/5";
268
- readonly destructive: "border-destructive/20 bg-destructive/5";
269
- readonly success: "border-green-500/20 bg-green-500/5";
270
- readonly warning: "border-yellow-500/20 bg-yellow-500/5";
271
- };
272
- declare const CARD_SIZES: {
273
- readonly sm: "p-3";
274
- readonly default: "p-6";
275
- readonly lg: "p-8";
276
- readonly xl: "p-10";
277
- };
278
- interface CardWrapperProps {
279
- title?: ReactNode;
280
- description?: ReactNode;
281
- children?: ReactNode;
282
- footer?: ReactNode;
283
- className?: string;
284
- headerClassName?: string;
285
- contentClassName?: string;
286
- footerClassName?: string;
287
- variant?: keyof typeof CARD_VARIANTS;
288
- size?: keyof typeof CARD_SIZES;
289
- hideHeader?: boolean;
290
- }
291
- declare function CardWrapper({ title, description, children, footer, className, headerClassName, contentClassName, footerClassName, variant, size, hideHeader, ...props }: CardWrapperProps): react_jsx_runtime.JSX.Element;
292
- interface DataCardProps extends Omit<CardWrapperProps, "children"> {
293
- /** Each item's `color` should be a complete Tailwind class (e.g. "text-green-600") */
294
- data: Array<{
295
- label: string;
296
- value: ReactNode;
297
- color?: string;
298
- }>;
299
- }
300
- declare function DataCard({ title, data, className, ...props }: DataCardProps): react_jsx_runtime.JSX.Element;
301
- interface LoadingCardProps extends Omit<CardWrapperProps, "children"> {
302
- }
303
- declare function LoadingCard({ title, description, className, ...props }: LoadingCardProps): react_jsx_runtime.JSX.Element;
304
- interface StatsCardProps extends Omit<CardWrapperProps, "children" | "variant"> {
305
- value: ReactNode;
306
- icon?: ReactNode;
307
- trend?: {
308
- type: "up" | "down" | "neutral";
309
- value: string;
310
- };
311
- /** Visual variant for the card and icon styling */
312
- statsVariant?: "default" | "success" | "warning" | "danger" | "info";
313
- /** Additional class for the icon wrapper */
314
- iconClassName?: string;
315
- }
316
- declare function StatsCard({ title, value, description, icon, trend, className, statsVariant, iconClassName, ...props }: StatsCardProps): react_jsx_runtime.JSX.Element;
317
- interface DraggableCardProps extends Omit<CardWrapperProps, "children"> {
318
- subtitle?: ReactNode;
319
- badges?: ReactNode;
320
- actions?: ReactNode;
321
- details?: ReactNode;
322
- dragHandleProps?: any;
323
- isDragging?: boolean;
324
- isHidden?: boolean;
325
- children?: ReactNode;
326
- }
327
- declare function DraggableCard({ title, subtitle, badges, actions, details, dragHandleProps, className, isDragging, isHidden, children, ...props }: DraggableCardProps): react_jsx_runtime.JSX.Element;
328
-
329
- interface SkeletonTableProps {
330
- /** Number of skeleton rows */
331
- rows?: number;
332
- /** Number of skeleton columns */
333
- columns?: number;
334
- /** Optional column headers - if provided, shows text instead of skeleton */
335
- headers?: string[];
336
- /** Additional CSS classes */
337
- className?: string;
338
- }
339
- /**
340
- * SkeletonTable - Loading skeleton for tables
341
- * Matches DataTable structure for consistent loading states
342
- *
343
- * @example
344
- * ```tsx
345
- * <SkeletonTable rows={5} columns={4} />
346
- * <SkeletonTable headers={["Name", "Email", "Status"]} rows={10} />
347
- * ```
348
- */
349
- declare function SkeletonTable({ rows, columns, headers, className, }: SkeletonTableProps): react_jsx_runtime.JSX.Element;
350
- interface SkeletonListProps {
351
- /** Number of skeleton items */
352
- items?: number;
353
- /** Additional CSS classes */
354
- className?: string;
355
- /** Show avatar placeholder */
356
- showAvatar?: boolean;
357
- /** Avatar shape */
358
- avatarShape?: "circle" | "square";
359
- }
360
- /**
361
- * SkeletonList - Compact skeleton for lists with avatars
362
- *
363
- * @example
364
- * ```tsx
365
- * <SkeletonList items={5} />
366
- * <SkeletonList items={3} showAvatar={false} />
367
- * ```
368
- */
369
- declare function SkeletonList({ items, className, showAvatar, avatarShape, }: SkeletonListProps): react_jsx_runtime.JSX.Element;
370
- interface SkeletonCardProps {
371
- /** Additional CSS classes */
372
- className?: string;
373
- /** Show action buttons placeholder */
374
- showActions?: boolean;
375
- /** Number of text lines */
376
- lines?: number;
377
- }
378
- /**
379
- * SkeletonCard - Card skeleton for grid layouts
380
- *
381
- * @example
382
- * ```tsx
383
- * <SkeletonCard />
384
- * <SkeletonCard showActions={false} lines={2} />
385
- * ```
386
- */
387
- declare function SkeletonCard({ className, showActions, lines, }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
388
- interface SkeletonGridProps {
389
- /** Number of skeleton cards */
390
- cards?: number;
391
- /** Grid columns configuration */
392
- columns?: 1 | 2 | 3 | 4;
393
- /** Additional CSS classes */
394
- className?: string;
395
- /** Props passed to each SkeletonCard */
396
- cardProps?: Omit<SkeletonCardProps, "className">;
397
- }
398
- /**
399
- * SkeletonGrid - Grid of skeleton cards
400
- *
401
- * @example
402
- * ```tsx
403
- * <SkeletonGrid cards={6} columns={3} />
404
- * ```
405
- */
406
- declare function SkeletonGrid({ cards, columns, className, cardProps, }: SkeletonGridProps): react_jsx_runtime.JSX.Element;
407
-
408
- interface ClientSubmitButtonProps {
409
- children: ReactNode;
410
- disabled?: boolean;
411
- loading?: boolean;
412
- loadingText?: string;
413
- className?: string;
414
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
415
- size?: "default" | "sm" | "lg" | "icon";
416
- form?: string;
417
- }
418
- declare function ClientSubmitButton({ children, disabled, loading, loadingText, className, variant, size, form, ...props }: ClientSubmitButtonProps): react_jsx_runtime.JSX.Element;
419
-
420
- interface CollapsibleWrapperProps {
421
- children: ReactNode;
422
- trigger: ReactNode;
423
- defaultOpen?: boolean;
424
- open?: boolean;
425
- onOpenChange?: (open: boolean) => void;
426
- /** @deprecated Use render prop pattern with trigger element instead */
427
- triggerAsChild?: boolean;
428
- triggerVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
429
- triggerSize?: "default" | "sm" | "lg" | "icon";
430
- triggerClassName?: string;
431
- contentClassName?: string;
432
- className?: string;
433
- showChevron?: boolean;
434
- chevronPosition?: "left" | "right";
435
- disabled?: boolean;
436
- }
437
- declare function CollapsibleWrapper({ children, trigger, defaultOpen, open, onOpenChange, triggerAsChild, triggerVariant, triggerSize, triggerClassName, contentClassName, className, showChevron, chevronPosition, disabled, ...props }: CollapsibleWrapperProps): react_jsx_runtime.JSX.Element;
438
- interface CollapsibleCardProps {
439
- title: ReactNode;
440
- children: ReactNode;
441
- defaultOpen?: boolean;
442
- className?: string;
443
- headerClassName?: string;
444
- contentClassName?: string;
445
- }
446
- declare function CollapsibleCard({ title, children, defaultOpen, className, headerClassName, contentClassName, ...props }: CollapsibleCardProps): react_jsx_runtime.JSX.Element;
447
- interface CollapsibleSectionProps {
448
- label: ReactNode;
449
- children: ReactNode;
450
- defaultOpen?: boolean;
451
- className?: string;
452
- labelClassName?: string;
453
- contentClassName?: string;
454
- }
455
- declare function CollapsibleSection({ label, children, defaultOpen, className, labelClassName, contentClassName, ...props }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
456
-
457
- interface ConfirmDialogProps {
458
- open: boolean;
459
- onOpenChange: (open: boolean) => void;
460
- /** Trigger element that opens the dialog */
461
- trigger?: React.ReactElement;
462
- title?: string;
463
- description?: string;
464
- confirmText?: string;
465
- cancelText?: string;
466
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
467
- isLoading?: boolean;
468
- onConfirm?: () => void;
469
- onCancel?: () => void;
470
- icon?: ReactNode;
471
- children?: ReactNode;
472
- className?: string;
473
- /** Header className */
474
- headerClassName?: string;
475
- /** Description className */
476
- descriptionClassName?: string;
477
- /** Footer className */
478
- footerClassName?: string;
479
- /** Whether to show the cancel button (default: true) */
480
- showCancel?: boolean;
481
- }
482
- declare function ConfirmDialog({ open, onOpenChange, trigger, title, description, confirmText, cancelText, variant, isLoading, onConfirm, onCancel, icon, children, className, headerClassName, descriptionClassName, footerClassName, showCancel, ...props }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
483
- interface DeleteConfirmDialogProps {
484
- open: boolean;
485
- onOpenChange: (open: boolean) => void;
486
- onConfirm?: () => void;
487
- isLoading?: boolean;
488
- itemName?: string;
489
- itemDetails?: ReactNode;
490
- }
491
- declare function DeleteConfirmDialog({ open, onOpenChange, onConfirm, isLoading, itemName, itemDetails, ...props }: DeleteConfirmDialogProps): react_jsx_runtime.JSX.Element;
492
- interface InfoAlertProps extends Omit<ConfirmDialogProps, "showCancel" | "variant"> {
493
- confirmText?: string;
494
- }
495
- /**
496
- * InfoAlert - Information/warning alert with only confirm button (no cancel)
497
- *
498
- * @example
499
- * ```tsx
500
- * <InfoAlert
501
- * open={open}
502
- * onOpenChange={setOpen}
503
- * title="Session expired"
504
- * description="Please log in again"
505
- * confirmText="OK"
506
- * onConfirm={() => setOpen(false)}
507
- * />
508
- * ```
509
- */
510
- declare function InfoAlert({ title, description, confirmText, onConfirm, onOpenChange, ...props }: InfoAlertProps): react_jsx_runtime.JSX.Element;
511
-
512
- interface ErrorStateProps {
513
- /** Error title */
514
- title?: string;
515
- /** Error message or Error object */
516
- error: string | Error | {
517
- message?: string;
518
- } | null | undefined;
519
- /** Optional retry callback */
520
- onRetry?: () => void;
521
- /** Alert variant */
522
- variant?: "default" | "destructive";
523
- /** Additional CSS classes */
524
- className?: string;
525
- /** Custom icon */
526
- icon?: ReactNode;
527
- }
528
- /**
529
- * ErrorState Component
530
- *
531
- * Reusable error display component with retry functionality
532
- * Used for consistent error handling across pages
533
- */
534
- declare function ErrorState({ title, error, onRetry, variant, className, icon, }: ErrorStateProps): react_jsx_runtime.JSX.Element;
535
- interface ErrorStateInlineProps {
536
- /** Error message or Error object */
537
- error: string | Error | {
538
- message?: string;
539
- } | null | undefined;
540
- /** Optional retry callback */
541
- onRetry?: () => void;
542
- /** Additional CSS classes */
543
- className?: string;
544
- /** Custom icon */
545
- icon?: ReactNode;
546
- }
547
- /**
548
- * Inline ErrorState variant - more compact for table cells
549
- */
550
- declare function ErrorStateInline({ error, onRetry, className, icon, }: ErrorStateInlineProps): react_jsx_runtime.JSX.Element;
551
-
552
- interface EmptyStateProps {
553
- /** Title text */
554
- title?: string;
555
- /** Description / subtitle */
556
- description?: string;
557
- /** Icon element (ReactNode) — e.g. <SearchX /> or <MyCustomIcon /> */
558
- icon?: React.ReactNode;
559
- /** Primary action button */
560
- action?: React.ReactNode;
561
- /** Secondary action button */
562
- secondaryAction?: React.ReactNode;
563
- /** Visual variant */
564
- variant?: "default" | "compact" | "card";
565
- /** Additional className */
566
- className?: string;
567
- /** Children rendered below the description */
568
- children?: React.ReactNode;
569
- }
570
- /**
571
- * EmptyState — Higher-level wrapper around the composable Empty primitives.
572
- *
573
- * Composes: Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent
574
- *
575
- * @example Default
576
- * ```tsx
577
- * <EmptyState
578
- * title="No projects yet"
579
- * description="Create your first project to get started."
580
- * icon={<FolderPlus className="h-6 w-6" />}
581
- * action={<Button>Create Project</Button>}
582
- * />
583
- * ```
584
- *
585
- * @example Compact (inline)
586
- * ```tsx
587
- * <EmptyState variant="compact" title="No items" />
588
- * ```
589
- *
590
- * @example With preset
591
- * ```tsx
592
- * <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
593
- * ```
594
- */
595
- declare function EmptyState({ title, description, icon, action, secondaryAction, variant, className, children, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
596
- type EmptyStatePresetProps = Omit<EmptyStateProps, "icon" | "title" | "description"> & {
597
- title?: string;
598
- description?: string;
599
- };
600
- /** No search results — with search icon */
601
- declare function EmptyStateNoResults(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
602
- /** No data — with inbox icon */
603
- declare function EmptyStateNoData(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
604
- /** Not found — with file-x icon */
605
- declare function EmptyStateNotFound(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
606
-
607
- interface LoadingStateProps {
608
- /** Loading message text */
609
- text?: string;
610
- /** Visual variant */
611
- variant?: "default" | "inline" | "overlay" | "minimal";
612
- /** Spinner size */
613
- size?: "sm" | "md" | "lg";
614
- /** Additional className */
615
- className?: string;
616
- }
617
- interface LoadingOverlayProps {
618
- /** Loading message text */
619
- text?: string;
620
- /** Whether the overlay is visible */
621
- visible?: boolean;
622
- /** Additional className */
623
- className?: string;
624
- /** Children to render behind the overlay */
625
- children?: React.ReactNode;
626
- }
627
- /**
628
- * LoadingState — Versatile loading indicator
629
- *
630
- * @example Default (centered, full area)
631
- * ```tsx
632
- * <LoadingState text="Loading projects..." />
633
- * ```
634
- *
635
- * @example Inline (in a row)
636
- * ```tsx
637
- * <LoadingState variant="inline" text="Saving..." size="sm" />
638
- * ```
639
- *
640
- * @example Minimal (just the spinner)
641
- * ```tsx
642
- * <LoadingState variant="minimal" />
643
- * ```
644
- */
645
- declare function LoadingState({ text, variant, size, className, }: LoadingStateProps): react_jsx_runtime.JSX.Element;
646
- /**
647
- * LoadingOverlay — Renders children with an overlay spinner on top
648
- *
649
- * @example
650
- * ```tsx
651
- * <LoadingOverlay visible={isSaving} text="Saving changes...">
652
- * <MyFormContent />
653
- * </LoadingOverlay>
654
- * ```
655
- */
656
- declare function LoadingOverlay({ text, visible, className, children, }: LoadingOverlayProps): react_jsx_runtime.JSX.Element;
657
-
658
- type StatusBannerVariant = "info" | "warning" | "success" | "error";
659
- interface StatusBannerProps {
660
- /** The banner variant/severity */
661
- variant?: StatusBannerVariant;
662
- /** Main message text or node */
663
- children: React.ReactNode;
664
- /** Optional custom icon */
665
- icon?: LucideIcon;
666
- /** Whether the banner can be dismissed */
667
- dismissible?: boolean;
668
- /** Callback when dismissed */
669
- onDismiss?: () => void;
670
- /** Optional action element (e.g. a link or button) */
671
- action?: React.ReactNode;
672
- /** Additional className */
673
- className?: string;
674
- }
675
- /**
676
- * StatusBanner — A persistent info/warning/success/error banner.
677
- *
678
- * @example
679
- * ```tsx
680
- * <StatusBanner variant="warning" dismissible>
681
- * Your trial expires in 3 days. <a href="/pricing">Upgrade now</a>
682
- * </StatusBanner>
683
- *
684
- * <StatusBanner variant="success" action={<Button size="sm">View</Button>}>
685
- * Your project was deployed successfully.
686
- * </StatusBanner>
687
- * ```
688
- */
689
- declare function StatusBanner({ variant, children, icon: CustomIcon, dismissible, onDismiss, action, className, }: StatusBannerProps): react_jsx_runtime.JSX.Element | null;
690
-
691
- interface StepperStep {
692
- /** Step label */
693
- label: string;
694
- /** Optional description shown below the label */
695
- description?: string;
696
- /** Optional icon for the step (replaces the number) */
697
- icon?: React.ReactNode;
698
- /** Whether this step is optional */
699
- optional?: boolean;
700
- }
701
- interface StepperProps {
702
- /** Array of step definitions */
703
- steps: (string | StepperStep)[];
704
- /** Active step index (0-based) */
705
- currentStep: number;
706
- /** Variant */
707
- variant?: "default" | "compact";
708
- /** Orientation */
709
- orientation?: "horizontal" | "vertical";
710
- /** Additional className */
711
- className?: string;
712
- /** Callback when a completed step is clicked */
713
- onStepClick?: (stepIndex: number) => void;
714
- /** Children (StepContent panels) */
715
- children?: React.ReactNode;
716
- }
717
- interface StepContentProps {
718
- /** Step index this content belongs to (0-based) */
719
- step: number;
720
- /** Currently active step */
721
- currentStep: number;
722
- /** Children to render */
723
- children: React.ReactNode;
724
- /** Additional className */
725
- className?: string;
726
- /** Keep mounted when inactive (useful for forms) */
727
- keepMounted?: boolean;
728
- }
729
- /**
730
- * Stepper — Multi-step progress indicator
731
- *
732
- * Features:
733
- * - Horizontal layout: circles in a row with labels below, proper connectors
734
- * - Vertical layout: circles on the left with labels to the right
735
- * - Compact variant for tight spaces
736
- * - Handles many steps gracefully without scrollbars
737
- * - Clickable completed steps for navigation
738
- * - Accessible: role="list", aria-current="step"
739
- *
740
- * @example Basic
741
- * ```tsx
742
- * const [step, setStep] = useState(0);
743
- *
744
- * <Stepper steps={["Details", "Config", "Review"]} currentStep={step}>
745
- * <StepContent step={0} currentStep={step}>
746
- * <DetailsForm onNext={() => setStep(1)} />
747
- * </StepContent>
748
- * </Stepper>
749
- * ```
750
- *
751
- * @example With step objects
752
- * ```tsx
753
- * <Stepper
754
- * steps={[
755
- * { label: "Account", description: "Set up your account" },
756
- * { label: "Profile", description: "Add your details", optional: true },
757
- * { label: "Complete", description: "Review and submit" },
758
- * ]}
759
- * currentStep={1}
760
- * onStepClick={(i) => setStep(i)}
761
- * />
762
- * ```
763
- */
764
- declare function Stepper({ steps, currentStep, variant, orientation, className, onStepClick, children, ...props }: StepperProps): react_jsx_runtime.JSX.Element;
765
- /**
766
- * StepContent — Renders content for a specific step.
767
- * Only visible when `step === currentStep`.
768
- *
769
- * @example
770
- * ```tsx
771
- * <StepContent step={0} currentStep={current}>
772
- * <MyForm />
773
- * </StepContent>
774
- * ```
775
- */
776
- declare function StepContent({ step, currentStep, children, className, keepMounted, }: StepContentProps): react_jsx_runtime.JSX.Element | null;
777
-
778
- interface CopyButtonProps {
779
- value: string;
780
- className?: string;
781
- size?: "default" | "sm" | "lg" | "icon";
782
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
783
- showToast?: boolean;
784
- toastMessage?: string;
785
- errorMessage?: string;
786
- timeout?: number;
787
- children?: ReactNode;
788
- }
789
- declare function CopyButton({ value, className, size, variant, showToast, toastMessage, errorMessage, timeout, children, ...props }: CopyButtonProps): react_jsx_runtime.JSX.Element;
790
- interface CopyTextProps {
791
- value: string;
792
- displayValue?: string;
793
- className?: string;
794
- textClassName?: string;
795
- buttonClassName?: string;
796
- maxLength?: number;
797
- showButton?: boolean;
798
- }
799
- declare function CopyText({ value, displayValue, className, textClassName, buttonClassName, maxLength, showButton, ...buttonProps }: CopyTextProps): react_jsx_runtime.JSX.Element;
800
- interface CopyCodeBlockProps {
801
- value: string;
802
- className?: string;
803
- language?: string;
804
- showLineNumbers?: boolean;
805
- }
806
- declare function CopyCodeBlock({ value, className, language, showLineNumbers, ...buttonProps }: CopyCodeBlockProps): react_jsx_runtime.JSX.Element;
807
-
808
- interface CustomPaginationProps {
809
- page: number;
810
- pages: number;
811
- hasNext: boolean;
812
- hasPrev: boolean;
813
- onPageChange: (page: number) => void;
814
- }
815
- declare function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext, }: CustomPaginationProps): react_jsx_runtime.JSX.Element | null;
816
- interface PaginationInfoProps {
817
- page: number;
818
- total: number;
819
- limit?: number;
820
- }
821
- declare function PaginationInfo({ page, total, limit }: PaginationInfoProps): react_jsx_runtime.JSX.Element;
822
-
823
- interface DataTablePaginationProps extends Partial<ApiPaginationData> {
824
- onPageChange?: (page: number) => void;
825
- }
826
- interface DataTableProps<TData, TValue> {
827
- columns: ColumnDef<TData, TValue>[];
828
- data: TData[];
829
- isLoading?: boolean;
830
- pagination?: DataTablePaginationProps;
831
- enableSorting?: boolean;
832
- enableRowSelection?: boolean;
833
- onRowSelectionChange?: (selectedRows: TData[]) => void;
834
- className?: string;
835
- /** Custom loading state renderer */
836
- loadingState?: React__default.ReactNode;
837
- /** Custom empty state renderer */
838
- emptyState?: React__default.ReactNode;
839
- }
840
- declare function DataTable<TData, TValue>({ columns, data, isLoading, pagination, enableSorting, enableRowSelection, onRowSelectionChange, className, loadingState: customLoadingState, emptyState: customEmptyState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
841
-
842
- declare const SIZE_VARIANTS$1: {
843
- readonly sm: "sm:max-w-sm";
844
- readonly default: "sm:max-w-md";
845
- readonly lg: "sm:max-w-lg md:max-w-2xl";
846
- readonly xl: "sm:max-w-2xl md:max-w-4xl";
847
- readonly "2xl": "sm:max-w-4xl md:max-w-6xl";
848
- readonly full: "max-w-[95vw] h-[95vh]";
849
- };
850
- type SizeVariant$1 = keyof typeof SIZE_VARIANTS$1;
851
- interface DialogWrapperProps {
852
- open: boolean;
853
- onOpenChange: (open: boolean) => void;
854
- title?: ReactNode;
855
- description?: ReactNode;
856
- children?: ReactNode;
857
- footer?: ReactNode;
858
- trigger?: ReactNode;
859
- size?: SizeVariant$1;
860
- className?: string;
861
- headerClassName?: string;
862
- contentClassName?: string;
863
- footerClassName?: string;
864
- hideHeader?: boolean;
865
- hideTitle?: boolean;
866
- hideDescription?: boolean;
867
- hideCloseButton?: boolean;
868
- }
869
- declare function DialogWrapper({ open, onOpenChange, title, description, children, footer, trigger, size, className, headerClassName, contentClassName, footerClassName, hideHeader, hideTitle, hideDescription, hideCloseButton, ...props }: DialogWrapperProps): react_jsx_runtime.JSX.Element;
870
- interface FormDialogProps extends Omit<DialogWrapperProps, "footer"> {
871
- onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
872
- onCancel?: () => void;
873
- submitText?: string;
874
- cancelText?: string;
875
- isLoading?: boolean;
876
- submitDisabled?: boolean;
877
- }
878
- declare function FormDialog({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitText, cancelText, isLoading, submitDisabled, ...props }: FormDialogProps): react_jsx_runtime.JSX.Element;
879
-
880
- interface DropdownWrapperProps {
881
- trigger: React.ReactNode;
882
- children: React.ReactNode;
883
- align?: "start" | "center" | "end";
884
- side?: "top" | "right" | "bottom" | "left";
885
- sideOffset?: number;
886
- className?: string;
887
- contentClassName?: string;
888
- }
889
- declare function DropdownWrapper({ trigger, children, align, side, sideOffset, className, contentClassName, ...props }: DropdownWrapperProps): react_jsx_runtime.JSX.Element;
890
- interface ActionDropdownItem {
891
- type?: "item" | "separator" | "label" | "group";
892
- key?: string;
893
- label?: string | (() => string);
894
- icon?: LucideIcon;
895
- onClick?: (e: React.MouseEvent) => void;
896
- disabled?: boolean;
897
- hidden?: boolean;
898
- variant?: "default" | "destructive";
899
- shortcut?: string;
900
- className?: string;
901
- items?: ActionDropdownItem[];
902
- }
903
- interface ActionDropdownProps {
904
- items?: ActionDropdownItem[];
905
- triggerIcon?: LucideIcon;
906
- triggerVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
907
- triggerSize?: "default" | "sm" | "lg" | "icon";
908
- triggerClassName?: string;
909
- triggerLabel?: string;
910
- showOnHover?: boolean;
911
- align?: "start" | "center" | "end";
912
- contentClassName?: string;
913
- onOpenChange?: (open: boolean) => void;
914
- stopPropagation?: boolean;
915
- }
916
- declare function ActionDropdown({ items, triggerIcon: TriggerIcon, triggerVariant, triggerSize, triggerClassName, triggerLabel, showOnHover, align, contentClassName, onOpenChange, stopPropagation, ...props }: ActionDropdownProps): react_jsx_runtime.JSX.Element;
917
- interface SelectDropdownOption {
918
- value: string;
919
- label: string;
920
- icon?: LucideIcon;
921
- }
922
- interface SelectDropdownProps {
923
- value?: string;
924
- onValueChange?: (value: string) => void;
925
- placeholder?: string;
926
- options?: SelectDropdownOption[];
927
- triggerClassName?: string;
928
- contentClassName?: string;
929
- disabled?: boolean;
930
- }
931
- declare function SelectDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: SelectDropdownProps): react_jsx_runtime.JSX.Element;
932
- interface CheckboxDropdownProps {
933
- values?: string[];
934
- onValuesChange?: (values: string[]) => void;
935
- placeholder?: string;
936
- options?: SelectDropdownOption[];
937
- triggerClassName?: string;
938
- contentClassName?: string;
939
- disabled?: boolean;
940
- showSelectedCount?: boolean;
941
- }
942
- declare function CheckboxDropdown({ values, onValuesChange, placeholder, options, triggerClassName, contentClassName, disabled, showSelectedCount, ...props }: CheckboxDropdownProps): react_jsx_runtime.JSX.Element;
943
- interface RadioDropdownProps {
944
- value?: string;
945
- onValueChange?: (value: string) => void;
946
- placeholder?: string;
947
- options?: SelectDropdownOption[];
948
- triggerClassName?: string;
949
- contentClassName?: string;
950
- disabled?: boolean;
951
- }
952
- declare function RadioDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: RadioDropdownProps): react_jsx_runtime.JSX.Element;
953
-
954
- interface InfoRowProps {
955
- label: string;
956
- value: ReactNode;
957
- copyable?: boolean;
958
- icon?: ComponentType<LucideProps>;
959
- }
960
- declare function InfoRow({ label, value, copyable, icon: Icon }: InfoRowProps): react_jsx_runtime.JSX.Element | null;
961
-
962
- /**
963
- * Item Component Helpers
964
- */
965
- declare const iconItemMediaVariants: (props?: ({
966
- iconBg?: "primary" | "gradient" | "none" | "gold" | "muted" | null | undefined;
967
- iconSize?: "lg" | "xl" | "sm" | "md" | null | undefined;
968
- } & class_variance_authority_types.ClassProp) | undefined) => string;
969
- interface IconItemMediaProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconItemMediaVariants> {
970
- icon?: React.ReactNode;
971
- children?: React.ReactNode;
972
- }
973
- declare const IconItemMedia: React.NamedExoticComponent<IconItemMediaProps>;
974
- interface FeatureItemProps {
975
- icon?: React.ReactNode;
976
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
977
- iconSize?: "sm" | "md" | "lg" | "xl";
978
- title?: React.ReactNode;
979
- description?: React.ReactNode;
980
- variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
981
- size?: "sm" | "default" | "lg";
982
- layout?: "vertical" | "horizontal";
983
- titleAs?: React.ElementType;
984
- className?: string;
985
- titleClassName?: string;
986
- descriptionClassName?: string;
987
- iconClassName?: string;
988
- children?: React.ReactNode;
989
- }
990
- declare const FeatureItem: React.NamedExoticComponent<FeatureItemProps>;
991
- interface FeatureListItem {
992
- id?: string;
993
- icon?: React.ReactNode;
994
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
995
- iconSize?: "sm" | "md" | "lg" | "xl";
996
- title: string;
997
- description?: string;
998
- }
999
- interface FeatureListProps {
1000
- items?: FeatureListItem[];
1001
- columns?: 2 | 3 | 4;
1002
- variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
1003
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
1004
- iconSize?: "sm" | "md" | "lg" | "xl";
1005
- layout?: "vertical" | "horizontal";
1006
- className?: string;
1007
- itemClassName?: string;
1008
- }
1009
- declare function FeatureList({ items, columns, variant, iconBg, iconSize, layout, className, itemClassName, ...props }: FeatureListProps): react_jsx_runtime.JSX.Element;
1010
- declare namespace FeatureList {
1011
- var displayName: string;
1012
- }
1013
-
1014
- declare function ModeToggle(): react_jsx_runtime.JSX.Element;
1015
-
1016
- interface PhoneCountry {
1017
- code: string;
1018
- name: string;
1019
- dialCode: string;
1020
- flag: string;
1021
- }
1022
- declare const DEFAULT_COUNTRIES: PhoneCountry[];
1023
- interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
1024
- onChange?: (value: string) => void;
1025
- defaultCountry?: string;
1026
- /** Custom list of countries to show. Defaults to a built-in list of ~50 countries. */
1027
- countries?: PhoneCountry[];
1028
- ref?: React.Ref<HTMLInputElement>;
1029
- }
1030
- declare function PhoneInput({ className, onChange, value, defaultCountry, countries, disabled, placeholder, ref, ...props }: PhoneInputProps): react_jsx_runtime.JSX.Element;
1031
-
1032
- interface PillProps {
1033
- variant?: "default" | "secondary" | "destructive" | "outline";
1034
- themed?: boolean;
1035
- className?: string;
1036
- children?: ReactNode;
1037
- }
1038
- declare function Pill({ variant, themed, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
1039
- interface PillAvatarProps {
1040
- fallback?: string;
1041
- className?: string;
1042
- src?: string;
1043
- alt?: string;
1044
- }
1045
- declare function PillAvatar({ fallback, className, src, alt, ...props }: PillAvatarProps): react_jsx_runtime.JSX.Element;
1046
- interface PillButtonProps {
1047
- className?: string;
1048
- children?: ReactNode;
1049
- onClick?: () => void;
1050
- }
1051
- declare function PillButton({ className, ...props }: PillButtonProps): react_jsx_runtime.JSX.Element;
1052
- interface PillStatusProps {
1053
- children?: ReactNode;
1054
- className?: string;
1055
- }
1056
- declare function PillStatus({ children, className, ...props }: PillStatusProps): react_jsx_runtime.JSX.Element;
1057
- interface PillIndicatorProps {
1058
- variant?: "success" | "error" | "warning" | "info";
1059
- pulse?: boolean;
1060
- }
1061
- declare function PillIndicator({ variant, pulse }: PillIndicatorProps): react_jsx_runtime.JSX.Element;
1062
- interface PillDeltaProps {
1063
- className?: string;
1064
- delta?: number;
1065
- }
1066
- declare function PillDelta({ className, delta }: PillDeltaProps): react_jsx_runtime.JSX.Element;
1067
- interface PillIconProps extends LucideProps {
1068
- icon: ComponentType<LucideProps>;
1069
- className?: string;
1070
- }
1071
- declare function PillIcon({ icon: Icon, className, ...props }: PillIconProps): react_jsx_runtime.JSX.Element;
1072
- interface PillAvatarGroupProps {
1073
- children?: ReactNode;
1074
- className?: string;
1075
- }
1076
- declare function PillAvatarGroup({ children, className, ...props }: PillAvatarGroupProps): react_jsx_runtime.JSX.Element;
1077
-
1078
- interface PanelConfig {
1079
- title?: string;
1080
- icon?: ReactNode;
1081
- content: ReactNode;
1082
- badge?: ReactNode;
1083
- }
1084
- interface ResponsiveSplitLayoutProps {
1085
- leftPanel: PanelConfig;
1086
- rightPanel: PanelConfig;
1087
- className?: string;
1088
- leftPanelClassName?: string;
1089
- rightPanelClassName?: string;
1090
- variant?: "default" | "tabs" | "fixed";
1091
- desktopVariant?: "default" | "tabs" | "fixed";
1092
- mobileVariant?: "default" | "tabs" | "fixed";
1093
- defaultLayout?: [number, number];
1094
- minSizes?: [number, number];
1095
- rightPanelWidth?: number;
1096
- persistLayoutKey?: string;
1097
- mobileBreakpoint?: "sm" | "md" | "lg" | "xl";
1098
- forceMobile?: boolean;
1099
- forceDesktop?: boolean;
1100
- }
1101
- declare function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClassName, rightPanelClassName, variant, desktopVariant, mobileVariant, defaultLayout, minSizes, rightPanelWidth, persistLayoutKey, mobileBreakpoint, forceMobile, forceDesktop, }: ResponsiveSplitLayoutProps): react_jsx_runtime.JSX.Element;
1102
-
1103
- declare const SIZE_VARIANTS: {
1104
- readonly sm: "sm:!max-w-md";
1105
- readonly default: "w-full sm:!max-w-md md:!max-w-lg";
1106
- readonly lg: "w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl";
1107
- readonly xl: "w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl";
1108
- readonly full: "w-full !max-w-full";
1109
- readonly mobile: "w-[85%] !max-w-sm";
1110
- readonly "mobile-nav": "!w-[300px] sm:!w-[350px]";
1111
- };
1112
- type SizeVariant = keyof typeof SIZE_VARIANTS;
1113
- interface SheetWrapperProps {
1114
- open: boolean;
1115
- onOpenChange: (open: boolean) => void;
1116
- title?: string;
1117
- description?: string;
1118
- children?: ReactNode;
1119
- footer?: ReactNode;
1120
- header?: ReactNode;
1121
- side?: "top" | "bottom" | "left" | "right";
1122
- size?: SizeVariant;
1123
- modal?: boolean;
1124
- className?: string;
1125
- headerClassName?: string;
1126
- contentClassName?: string;
1127
- footerClassName?: string;
1128
- innerClassName?: string;
1129
- hideHeader?: boolean;
1130
- hideTitle?: boolean;
1131
- hideDescription?: boolean;
1132
- hideCloseButton?: boolean;
1133
- disableContentPadding?: boolean;
1134
- }
1135
- declare const SheetWrapper: React.NamedExoticComponent<SheetWrapperProps>;
1136
- interface FormSheetProps extends Omit<SheetWrapperProps, "footer"> {
1137
- onSubmit?: () => void;
1138
- onCancel?: () => void;
1139
- submitLabel?: string;
1140
- cancelLabel?: string;
1141
- submitDisabled?: boolean;
1142
- submitLoading?: boolean;
1143
- formId?: string;
1144
- }
1145
- declare const FormSheet: React.NamedExoticComponent<FormSheetProps>;
1146
- interface ConfirmSheetProps extends Omit<SheetWrapperProps, "footer"> {
1147
- onConfirm?: () => void;
1148
- onCancel?: () => void;
1149
- confirmLabel?: string;
1150
- cancelLabel?: string;
1151
- confirmVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
1152
- confirmDisabled?: boolean;
1153
- confirmLoading?: boolean;
1154
- }
1155
- declare const ConfirmSheet: React.NamedExoticComponent<ConfirmSheetProps>;
1156
-
1157
- interface TableWrapperColumn {
1158
- key?: string;
1159
- header: ReactNode;
1160
- className?: string;
1161
- cellClassName?: string;
1162
- render?: (item: any, index: number) => ReactNode;
1163
- }
1164
- interface TableWrapperEmptyState {
1165
- icon?: ReactNode;
1166
- title?: string;
1167
- description?: string;
1168
- }
1169
- interface TableWrapperProps {
1170
- title?: ReactNode;
1171
- description?: ReactNode;
1172
- icon?: ReactNode;
1173
- children?: ReactNode;
1174
- columns?: TableWrapperColumn[];
1175
- data?: any[];
1176
- renderRow?: (item: any, index: number) => ReactNode;
1177
- emptyState?: TableWrapperEmptyState;
1178
- className?: string;
1179
- tableClassName?: string;
1180
- maxHeight?: string;
1181
- }
1182
- declare function TableWrapper({ title, description, icon, children, columns, data, renderRow, emptyState, className, tableClassName, maxHeight, ...props }: TableWrapperProps): react_jsx_runtime.JSX.Element;
1183
- interface SimpleTableProps extends Omit<TableWrapperProps, "renderRow" | "children"> {
1184
- columns: TableWrapperColumn[];
1185
- data: any[];
1186
- }
1187
- declare function SimpleTable({ title, data, columns, emptyState, className, ...props }: SimpleTableProps): react_jsx_runtime.JSX.Element;
1188
-
1189
- interface TabsWrapperProps {
1190
- defaultValue?: string;
1191
- value?: string;
1192
- onValueChange?: (value: string) => void;
1193
- children: ReactNode;
1194
- className?: string;
1195
- listClassName?: string;
1196
- contentClassName?: string;
1197
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1198
- orientation?: "horizontal" | "vertical";
1199
- layout?: "default" | "flex" | "sidebar";
1200
- withScrollArea?: boolean;
1201
- scrollAreaClassName?: string;
1202
- }
1203
- declare const TabsWrapper: React.NamedExoticComponent<TabsWrapperProps>;
1204
- interface TabTriggerProps {
1205
- value: string;
1206
- children: ReactNode;
1207
- className?: string;
1208
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1209
- icon?: ReactNode;
1210
- hideTextOnMobile?: boolean;
1211
- disabled?: boolean;
1212
- }
1213
- declare const TabTrigger: React.NamedExoticComponent<TabTriggerProps>;
1214
- interface TabContentProps {
1215
- value: string;
1216
- children: ReactNode;
1217
- className?: string;
1218
- withScrollArea?: boolean;
1219
- scrollAreaClassName?: string;
1220
- padding?: boolean;
1221
- keepMounted?: boolean;
1222
- }
1223
- declare const TabContent: React.NamedExoticComponent<TabContentProps>;
1224
- interface DynamicTabItem {
1225
- value: string;
1226
- label: ReactNode;
1227
- content: ReactNode;
1228
- icon?: ReactNode;
1229
- disabled?: boolean;
1230
- hideTextOnMobile?: boolean;
1231
- }
1232
- interface DynamicTabsProps {
1233
- tabs?: DynamicTabItem[];
1234
- defaultValue?: string;
1235
- value?: string;
1236
- onValueChange?: (value: string) => void;
1237
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1238
- layout?: "default" | "flex" | "sidebar";
1239
- className?: string;
1240
- listClassName?: string;
1241
- listWrapperClassName?: string;
1242
- contentClassName?: string;
1243
- scrollable?: boolean;
1244
- }
1245
- declare const DynamicTabs: React.NamedExoticComponent<DynamicTabsProps>;
1246
-
1247
- interface TooltipWrapperProps {
1248
- children: ReactNode;
1249
- content: ReactNode;
1250
- side?: "top" | "right" | "bottom" | "left";
1251
- align?: "start" | "center" | "end";
1252
- delay?: number;
1253
- sideOffset?: number;
1254
- className?: string;
1255
- contentClassName?: string;
1256
- disabled?: boolean;
1257
- }
1258
- declare function TooltipWrapper({ children, content, side, align, delay, sideOffset, className, contentClassName, disabled, ...props }: TooltipWrapperProps): react_jsx_runtime.JSX.Element;
1259
- interface ButtonTooltipProps extends Omit<TooltipWrapperProps, "content"> {
1260
- tooltip: ReactNode;
1261
- variant?: "default" | "outline" | "ghost";
1262
- size?: "default" | "sm" | "lg" | "icon";
1263
- }
1264
- declare function ButtonTooltip({ children, tooltip, variant, size, className, ...props }: ButtonTooltipProps): react_jsx_runtime.JSX.Element;
1265
- interface IconTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
1266
- icon: ReactNode;
1267
- tooltip: ReactNode;
1268
- iconClassName?: string;
1269
- size?: number;
1270
- }
1271
- declare function IconTooltip({ icon, tooltip, className, iconClassName, size, ...props }: IconTooltipProps): react_jsx_runtime.JSX.Element;
1272
- interface InfoTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
1273
- tooltip: ReactNode;
1274
- size?: number;
1275
- }
1276
- declare function InfoTooltip({ tooltip, className, size, ...props }: InfoTooltipProps): react_jsx_runtime.JSX.Element;
1277
- interface ActionTooltipProps extends Omit<TooltipWrapperProps, "content"> {
1278
- tooltip: ReactNode;
1279
- action?: () => void;
1280
- variant?: "ghost" | "outline";
1281
- size?: "sm" | "icon";
1282
- }
1283
- declare function ActionTooltip({ children, tooltip, action, variant, size, className, ...props }: ActionTooltipProps): react_jsx_runtime.JSX.Element;
1284
-
1285
- interface TransformFunctions {
1286
- input?: (value: unknown) => string;
1287
- output?: (value: string) => unknown;
1288
- }
1289
- interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
1290
- control?: Control<TFieldValues>;
1291
- name: FieldPath<TFieldValues> | string;
1292
- label?: string;
1293
- placeholder?: string;
1294
- description?: string;
1295
- helperText?: string;
1296
- required?: boolean;
1297
- disabled?: boolean;
1298
- readOnly?: boolean;
1299
- type?: string;
1300
- className?: string;
1301
- labelClassName?: string;
1302
- inputClassName?: string;
1303
- inputGroupClassName?: string;
1304
- iconLeft?: ReactNode;
1305
- iconRight?: ReactNode;
1306
- addonLeft?: ReactNode;
1307
- addonRight?: ReactNode;
1308
- transform?: TransformFunctions;
1309
- onValueChange?: (value: unknown) => void;
1310
- value?: string | number;
1311
- onChange?: (value: unknown) => void;
1312
- min?: number | string;
1313
- max?: number | string;
1314
- step?: number | string;
1315
- minLength?: number;
1316
- maxLength?: number;
1317
- pattern?: string;
1318
- autoComplete?: string;
1319
- autoFocus?: boolean;
1320
- inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
1321
- enterKeyHint?: InputHTMLAttributes<HTMLInputElement>["enterKeyHint"];
1322
- }
1323
- /**
1324
- * FormInput - Text input with react-hook-form integration
1325
- *
1326
- * Features:
1327
- * - Works with react-hook-form Controller
1328
- * - Supports input groups with icons/addons
1329
- * - Value transformation (input/output)
1330
- * - Can be used standalone without form
1331
- *
1332
- * @example
1333
- * ```tsx
1334
- * // With react-hook-form
1335
- * <FormInput
1336
- * control={form.control}
1337
- * name="email"
1338
- * type="email"
1339
- * label="Email"
1340
- * placeholder="user@example.com"
1341
- * required
1342
- * />
1343
- *
1344
- * // With icon
1345
- * <FormInput
1346
- * control={form.control}
1347
- * name="search"
1348
- * iconLeft={<SearchIcon />}
1349
- * placeholder="Search..."
1350
- * />
1351
- * ```
1352
- */
1353
- declare function FormInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, placeholder, description, helperText, required, disabled, readOnly, type, className, labelClassName, inputClassName, inputGroupClassName, iconLeft, iconRight, addonLeft, addonRight, onValueChange, transform, value, onChange, min, max, step, minLength, maxLength, pattern, autoComplete, autoFocus, inputMode, enterKeyHint, }: FormInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1354
-
1355
- interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
1356
- control?: Control<TFieldValues>;
1357
- name: FieldPath<TFieldValues> | string;
1358
- label?: string;
1359
- placeholder?: string;
1360
- description?: string;
1361
- helperText?: string;
1362
- required?: boolean;
1363
- disabled?: boolean;
1364
- readOnly?: boolean;
1365
- rows?: number;
1366
- value?: string;
1367
- onChange?: (value: string) => void;
1368
- onValueChange?: (value: string) => void;
1369
- className?: string;
1370
- labelClassName?: string;
1371
- textareaClassName?: string;
1372
- inputGroupClassName?: string;
1373
- iconLeft?: React.ReactNode;
1374
- iconRight?: React.ReactNode;
1375
- addonLeft?: React.ReactNode;
1376
- addonRight?: React.ReactNode;
1377
- minLength?: number;
1378
- maxLength?: number;
1379
- autoComplete?: string;
1380
- autoFocus?: boolean;
1381
- }
1382
- /**
1383
- * FormTextarea - Textarea with react-hook-form integration
1384
- *
1385
- * @example
1386
- * ```tsx
1387
- * <FormTextarea
1388
- * control={form.control}
1389
- * name="bio"
1390
- * label="Biography"
1391
- * placeholder="Tell us about yourself..."
1392
- * rows={5}
1393
- * />
1394
- * ```
1395
- */
1396
- declare function FormTextarea<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, readOnly, placeholder, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, textareaClassName, inputGroupClassName, iconLeft, iconRight, addonLeft, addonRight, rows, minLength, maxLength, autoComplete, autoFocus, }: FormTextareaProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1397
-
1398
- interface SelectOption {
1399
- value: string | number;
1400
- label: string;
1401
- disabled?: boolean;
1402
- }
1403
- interface SelectOptionGroup {
1404
- label: string;
1405
- items: SelectOption[];
1406
- }
1407
- interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
1408
- control?: Control<TFieldValues>;
1409
- name: FieldPath<TFieldValues> | string;
1410
- label?: string;
1411
- placeholder?: string;
1412
- description?: string;
1413
- helperText?: string;
1414
- required?: boolean;
1415
- disabled?: boolean;
1416
- items?: SelectOption[];
1417
- groups?: SelectOptionGroup[];
1418
- allOption?: SelectOption;
1419
- valueKey?: string;
1420
- displayKey?: string;
1421
- value?: string | number;
1422
- onValueChange?: (value: string) => void;
1423
- className?: string;
1424
- labelClassName?: string;
1425
- triggerClassName?: string;
1426
- contentClassName?: string;
1427
- itemClassName?: string;
1428
- Icon?: React.ComponentType<{
1429
- className?: string;
1430
- }>;
1431
- defaultOpen?: boolean;
1432
- side?: "top" | "bottom" | "left" | "right";
1433
- sideOffset?: number;
1434
- align?: "start" | "center" | "end";
1435
- alignOffset?: number;
1436
- }
1437
- /**
1438
- * SelectInput - Select dropdown with react-hook-form integration
1439
- *
1440
- * Features:
1441
- * - Flat and grouped options
1442
- * - Custom placeholder
1443
- * - Optional "All" option (use placeholder text to match)
1444
- * - Custom styling
1445
- *
1446
- * Note: For "All" options with value="", the placeholder will be shown when selected.
1447
- * Make sure your placeholder text matches what you want to display for "All".
1448
- *
1449
- * @example
1450
- * ```tsx
1451
- * // Basic usage
1452
- * <SelectInput
1453
- * control={form.control}
1454
- * name="role"
1455
- * label="Role"
1456
- * items={[
1457
- * { value: "admin", label: "Admin" },
1458
- * { value: "user", label: "User" },
1459
- * ]}
1460
- * />
1461
- *
1462
- * // With "All" option - placeholder shows when "All" is selected
1463
- * <SelectInput
1464
- * name="status"
1465
- * label="Status"
1466
- * items={[
1467
- * { value: "", label: "All" }, // This will show placeholder when selected
1468
- * { value: "active", label: "Active" },
1469
- * ]}
1470
- * placeholder="All" // Make sure this matches the "All" label
1471
- * />
1472
- * ```
1473
- */
1474
- declare function SelectInput<TFieldValues extends FieldValues = FieldValues>({ control, items, groups, name, label, placeholder, allOption, description, helperText, required, disabled, className, labelClassName, triggerClassName, contentClassName, itemClassName, Icon, onValueChange, value: propValue, defaultOpen, side, sideOffset, align, alignOffset, }: SelectInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1475
-
1476
- interface CheckboxItem {
1477
- id: string;
1478
- label: string;
1479
- disabled?: boolean;
1480
- }
1481
- interface CheckboxInputProps<TFieldValues extends FieldValues = FieldValues> {
1482
- control?: Control<TFieldValues>;
1483
- name: FieldPath<TFieldValues> | string;
1484
- label?: string;
1485
- description?: string;
1486
- helperText?: string;
1487
- required?: boolean;
1488
- disabled?: boolean;
1489
- items?: CheckboxItem[];
1490
- value?: string[];
1491
- onChange?: (values: string[]) => void;
1492
- onValueChange?: (values: string[]) => void;
1493
- className?: string;
1494
- labelClassName?: string;
1495
- checkboxClassName?: string;
1496
- itemClassName?: string;
1497
- itemLabelClassName?: string;
1498
- }
1499
- /**
1500
- * CheckboxInput - Checkbox group with react-hook-form integration
1501
- *
1502
- * Features:
1503
- * - Multiple checkbox items
1504
- * - Array value support
1505
- * - Can be used standalone
1506
- *
1507
- * @example
1508
- * ```tsx
1509
- * <CheckboxInput
1510
- * control={form.control}
1511
- * name="features"
1512
- * label="Features"
1513
- * items={[
1514
- * { id: "wifi", label: "WiFi" },
1515
- * { id: "parking", label: "Parking" },
1516
- * { id: "pool", label: "Pool" },
1517
- * ]}
1518
- * />
1519
- * ```
1520
- */
1521
- declare function CheckboxInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, items, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, checkboxClassName, itemClassName, itemLabelClassName, }: CheckboxInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1522
-
1523
- interface RadioChoice {
1524
- value: string;
1525
- label: string;
1526
- disabled?: boolean;
1527
- }
1528
- interface RadioInputProps<TFieldValues extends FieldValues = FieldValues> {
1529
- control?: Control<TFieldValues>;
1530
- name: FieldPath<TFieldValues> | string;
1531
- label?: string;
1532
- description?: string;
1533
- helperText?: string;
1534
- required?: boolean;
1535
- disabled?: boolean;
1536
- choices?: RadioChoice[];
1537
- items?: RadioChoice[];
1538
- orientation?: "vertical" | "horizontal";
1539
- value?: string;
1540
- onChange?: (value: string) => void;
1541
- onValueChange?: (value: string) => void;
1542
- className?: string;
1543
- labelClassName?: string;
1544
- radioGroupClassName?: string;
1545
- radioItemClassName?: string;
1546
- radioLabelClassName?: string;
1547
- }
1548
- /**
1549
- * RadioInput - Radio group with react-hook-form integration
1550
- *
1551
- * @example
1552
- * ```tsx
1553
- * <RadioInput
1554
- * control={form.control}
1555
- * name="plan"
1556
- * label="Select Plan"
1557
- * choices={[
1558
- * { value: "free", label: "Free" },
1559
- * { value: "pro", label: "Pro" },
1560
- * { value: "enterprise", label: "Enterprise" },
1561
- * ]}
1562
- * orientation="horizontal"
1563
- * />
1564
- * ```
1565
- */
1566
- declare function RadioInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, choices, items, orientation, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, radioGroupClassName, radioItemClassName, radioLabelClassName, }: RadioInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1567
-
1568
- interface SwitchInputProps<TFieldValues extends FieldValues = FieldValues> {
1569
- control?: Control<TFieldValues>;
1570
- name: FieldPath<TFieldValues> | string;
1571
- label?: string;
1572
- description?: string;
1573
- helperText?: string;
1574
- required?: boolean;
1575
- disabled?: boolean;
1576
- orientation?: "horizontal" | "vertical";
1577
- value?: boolean;
1578
- onChange?: (value: boolean) => void;
1579
- onValueChange?: (value: boolean) => void;
1580
- className?: string;
1581
- labelClassName?: string;
1582
- switchClassName?: string;
1583
- }
1584
- /**
1585
- * SwitchInput - Toggle switch with react-hook-form integration
1586
- *
1587
- * @example
1588
- * ```tsx
1589
- * <SwitchInput
1590
- * control={form.control}
1591
- * name="notifications"
1592
- * label="Enable notifications"
1593
- * description="Receive email updates"
1594
- * />
1595
- * ```
1596
- */
1597
- declare function SwitchInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, required, disabled, orientation, value: propValue, onChange: propOnChange, onValueChange, className, labelClassName, switchClassName, }: SwitchInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1598
-
1599
- type DateValue = Date | string | null | undefined;
1600
- interface DateInputProps<TFieldValues extends FieldValues = FieldValues> {
1601
- control?: Control<TFieldValues>;
1602
- name: FieldPath<TFieldValues> | string;
1603
- label?: string;
1604
- placeholder?: string;
1605
- description?: string;
1606
- helperText?: string;
1607
- required?: boolean;
1608
- disabled?: boolean;
1609
- minDate?: DateValue;
1610
- maxDate?: DateValue;
1611
- value?: DateValue;
1612
- onChange?: (date: Date | undefined) => void;
1613
- onValueChange?: (date: Date | undefined) => void;
1614
- className?: string;
1615
- labelClassName?: string;
1616
- inputClassName?: string;
1617
- Icon?: React.ComponentType<{
1618
- className?: string;
1619
- }>;
1620
- allowClear?: boolean;
1621
- }
1622
- /**
1623
- * DateInput - Date picker with react-hook-form integration
1624
- *
1625
- * @example
1626
- * ```tsx
1627
- * <DateInput
1628
- * control={form.control}
1629
- * name="birthDate"
1630
- * label="Date of Birth"
1631
- * minDate="1900-01-01"
1632
- * maxDate={new Date()}
1633
- * />
1634
- * ```
1635
- */
1636
- declare function DateInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, placeholder, required, disabled, className, labelClassName, inputClassName, minDate, maxDate, onValueChange, value: propValue, onChange: propOnChange, Icon, allowClear, }: DateInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1637
-
1638
- interface TagInputProps {
1639
- control?: Control<FieldValues>;
1640
- name: string;
1641
- label?: string;
1642
- placeholder?: string;
1643
- description?: string;
1644
- helperText?: string;
1645
- required?: boolean;
1646
- disabled?: boolean;
1647
- maxTags?: number;
1648
- allowDuplicates?: boolean;
1649
- delimiter?: string;
1650
- suggestions?: string[];
1651
- suggestionLimit?: number;
1652
- value?: string[];
1653
- onChange?: (tags: string[]) => void;
1654
- onValueChange?: (tags: string[]) => void;
1655
- validateTag?: (tag: string) => boolean;
1656
- transformTag?: (tag: string) => string;
1657
- formatTag?: (tag: string) => string;
1658
- className?: string;
1659
- labelClassName?: string;
1660
- inputClassName?: string;
1661
- [key: string]: unknown;
1662
- }
1663
- /**
1664
- * TagInput - Tag/chip input with react-hook-form integration
1665
- *
1666
- * @example
1667
- * ```tsx
1668
- * <TagInput
1669
- * control={form.control}
1670
- * name="tags"
1671
- * label="Tags"
1672
- * placeholder="Add tags..."
1673
- * maxTags={10}
1674
- * suggestions={["react", "typescript", "nextjs"]}
1675
- * />
1676
- * ```
1677
- */
1678
- declare function TagInput({ control, name, label, description, helperText, placeholder, required, disabled, className, labelClassName, inputClassName, maxTags, allowDuplicates, suggestions, suggestionLimit, value: propValue, onChange: propOnChange, onValueChange, delimiter, validateTag, transformTag, formatTag, ...props }: TagInputProps): react_jsx_runtime.JSX.Element;
1679
-
1680
- interface TagChoiceItem {
1681
- value: string;
1682
- label: string;
1683
- disabled?: boolean;
1684
- }
1685
- interface TagChoiceInputProps<TFieldValues extends FieldValues = FieldValues> {
1686
- control?: Control<TFieldValues>;
1687
- name: FieldPath<TFieldValues> | string;
1688
- label?: string;
1689
- placeholder?: string;
1690
- description?: string;
1691
- helperText?: string;
1692
- required?: boolean;
1693
- disabled?: boolean;
1694
- items?: TagChoiceItem[];
1695
- value?: string[];
1696
- onValueChange?: (values: string[]) => void;
1697
- className?: string;
1698
- }
1699
- /**
1700
- * TagChoiceInput - Multi-select with tags display
1701
- *
1702
- * @example
1703
- * ```tsx
1704
- * <TagChoiceInput
1705
- * control={form.control}
1706
- * name="categories"
1707
- * label="Categories"
1708
- * items={[
1709
- * { value: "tech", label: "Technology" },
1710
- * { value: "design", label: "Design" },
1711
- * ]}
1712
- * />
1713
- * ```
1714
- */
1715
- declare function TagChoiceInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, helperText, placeholder, required, disabled, className, items, value: propValue, onValueChange, }: TagChoiceInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1716
- declare namespace TagChoiceInput {
1717
- var displayName: string;
1718
- }
1719
-
1720
- interface ComboboxOption {
1721
- value: string;
1722
- label: string;
1723
- disabled?: boolean;
1724
- }
1725
- interface ComboboxInputProps<TFieldValues extends FieldValues = FieldValues> {
1726
- control?: Control<TFieldValues>;
1727
- name: FieldPath<TFieldValues> | string;
1728
- label?: string;
1729
- placeholder?: string;
1730
- emptyText?: string;
1731
- description?: string;
1732
- helperText?: string;
1733
- required?: boolean;
1734
- disabled?: boolean;
1735
- items?: ComboboxOption[];
1736
- value?: string;
1737
- onChange?: (value: string) => void;
1738
- onValueChange?: (value: string) => void;
1739
- className?: string;
1740
- labelClassName?: string;
1741
- inputClassName?: string;
1742
- renderOption?: (option: ComboboxOption) => ReactNode;
1743
- }
1744
- /**
1745
- * ComboboxInput - Searchable select with react-hook-form integration using Base UI
1746
- *
1747
- * Passes `{ value, label }` objects to Base UI Combobox so it auto-resolves
1748
- * labels for display and filtering. The form value is always the string `value`.
1749
- *
1750
- * @example
1751
- * ```tsx
1752
- * // With react-hook-form
1753
- * <ComboboxInput
1754
- * control={form.control}
1755
- * name="country"
1756
- * label="Country"
1757
- * items={[
1758
- * { value: "us", label: "United States" },
1759
- * { value: "uk", label: "United Kingdom" },
1760
- * ]}
1761
- * placeholder="Select a country..."
1762
- * />
1763
- *
1764
- * // Standalone
1765
- * <ComboboxInput
1766
- * name="country"
1767
- * label="Country"
1768
- * items={items}
1769
- * value={selectedCountry}
1770
- * onValueChange={setSelectedCountry}
1771
- * />
1772
- * ```
1773
- */
1774
- declare function ComboboxInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, placeholder, emptyText, description, helperText, required, disabled, items, className, labelClassName, inputClassName, onValueChange, renderOption, value: propValue, onChange: propOnChange, }: ComboboxInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1775
-
1776
- interface SlugFieldProps {
1777
- control?: Control<FieldValues>;
1778
- name: string;
1779
- label?: string;
1780
- placeholder?: string;
1781
- description?: string;
1782
- helperText?: string;
1783
- required?: boolean;
1784
- disabled?: boolean;
1785
- sourceValue?: string;
1786
- onGenerate?: (sourceValue: string) => string;
1787
- value?: string;
1788
- onChange?: (e: {
1789
- target: {
1790
- value: string;
1791
- };
1792
- }) => void;
1793
- onValueChange?: (value: string) => void;
1794
- className?: string;
1795
- labelClassName?: string;
1796
- inputClassName?: string;
1797
- error?: FieldError;
1798
- ref?: Ref<HTMLInputElement>;
1799
- }
1800
- /**
1801
- * Generates a URL-friendly slug from a string
1802
- */
1803
- declare function generateSlug(text: string | undefined): string;
1804
- /**
1805
- * SlugField - URL slug input with auto-generation
1806
- *
1807
- * @example
1808
- * ```tsx
1809
- * <SlugField
1810
- * control={form.control}
1811
- * name="slug"
1812
- * label="URL Slug"
1813
- * sourceValue={form.watch("title")}
1814
- * description="This will be used in the page URL"
1815
- * required
1816
- * />
1817
- * ```
1818
- */
1819
- declare function SlugField({ control, name, description, helperText, required, label, placeholder, disabled, sourceValue, onGenerate, className, inputClassName, labelClassName, onValueChange, value, onChange, error, ref, }: SlugFieldProps): react_jsx_runtime.JSX.Element;
1820
-
1821
- interface FormErrorSummaryProps {
1822
- /** Form errors object from react-hook-form */
1823
- errors?: Record<string, unknown>;
1824
- /** Additional CSS classes */
1825
- className?: string;
1826
- /** Custom title text */
1827
- title?: string;
1828
- }
1829
- /**
1830
- * FormErrorSummary - Displays a summary of form validation errors
1831
- *
1832
- * Takes react-hook-form errors object and displays all errors in a list.
1833
- * Automatically flattens nested errors for complex form structures.
1834
- */
1835
- declare function FormErrorSummary({ errors, className, title, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
1836
-
1837
- interface DateRange {
1838
- from?: Date;
1839
- to?: Date;
1840
- }
1841
- interface DateRangeFilterProps {
1842
- /** Initial start date */
1843
- initialStartDate?: Date;
1844
- /** Initial end date */
1845
- initialEndDate?: Date;
1846
- /** Callback when filter is applied (receives startDate, endDate) */
1847
- onFilter?: (startDate: Date | null, endDate: Date | null) => void;
1848
- /** Callback when filter is cleared */
1849
- onClear?: () => void;
1850
- /** Additional classes for the container */
1851
- className?: string;
1852
- /** Additional classes for trigger button */
1853
- buttonClassName?: string;
1854
- /** Placeholder text when no date selected */
1855
- placeholder?: string;
1856
- /** Minimum selectable date */
1857
- minDate?: Date;
1858
- /** Maximum selectable date */
1859
- maxDate?: Date;
1860
- /** Align popover to the right */
1861
- alignRight?: boolean;
1862
- /** Number of months to display */
1863
- numberOfMonths?: number;
1864
- }
1865
- /**
1866
- * DateRangeFilter - A date range picker for filtering
1867
- *
1868
- * Features:
1869
- * - Only applies filter when explicitly submitted
1870
- * - Supports clearing filters
1871
- * - Uses Popover to show calendar on click
1872
- * - Configurable min/max dates
1873
- */
1874
- declare function DateRangeFilter({ initialStartDate, initialEndDate, onFilter, onClear, className, buttonClassName, placeholder, minDate, maxDate, alignRight, numberOfMonths, }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
1875
-
1876
- interface DateRangeValue {
1877
- from?: Date | string;
1878
- to?: Date | string;
1879
- }
1880
- interface DateRangeInputProps<TFieldValues extends FieldValues = FieldValues> {
1881
- /** React Hook Form control */
1882
- control?: Control<TFieldValues>;
1883
- /** Field name for form registration */
1884
- name: FieldPath<TFieldValues> | string;
1885
- /** Field label */
1886
- label?: string;
1887
- /** Description text below the input */
1888
- description?: string;
1889
- /** Placeholder text */
1890
- placeholder?: string;
1891
- /** Whether the field is required */
1892
- required?: boolean;
1893
- /** Whether the field is disabled */
1894
- disabled?: boolean;
1895
- /** Additional className for the wrapper */
1896
- className?: string;
1897
- /** Additional className for the label */
1898
- labelClassName?: string;
1899
- /** Additional className for the button */
1900
- buttonClassName?: string;
1901
- /** Additional className for the calendar popover */
1902
- calendarClassName?: string;
1903
- /** Minimum selectable date */
1904
- minDate?: Date;
1905
- /** Maximum selectable date */
1906
- maxDate?: Date;
1907
- /** Array of disabled dates */
1908
- disabledDates?: Date[];
1909
- /** Array of disabled days (0-6, where 0 is Sunday) */
1910
- disabledDays?: number[];
1911
- /** Callback when value changes */
1912
- onValueChange?: (range: DateRangeValue) => void;
1913
- /** Custom validation function for date range */
1914
- validateDateRange?: (range: DateRangeValue) => boolean;
1915
- /** Function to clear form errors */
1916
- clearErrors?: (name: string) => void;
1917
- /** Custom description component */
1918
- descriptionComponent?: ReactNode;
1919
- /** Whether to show clear button */
1920
- allowClear?: boolean;
1921
- /** Whether to show badge with date range */
1922
- showBadge?: boolean;
1923
- /** Custom icon component */
1924
- Icon?: LucideIcon;
1925
- /** Transform functions for input/output */
1926
- transform?: {
1927
- input: (value: any) => DateRangeValue;
1928
- output: (range: DateRangeValue) => any;
1929
- };
1930
- }
1931
- /**
1932
- * DateRangeInput - Date range picker with react-hook-form integration
1933
- *
1934
- * @example
1935
- * ```tsx
1936
- * <DateRangeInput
1937
- * control={control}
1938
- * name="dateRange"
1939
- * label="Select Dates"
1940
- * placeholder="Pick a date range"
1941
- * />
1942
- * ```
1943
- */
1944
- declare function DateRangeInput<TFieldValues extends FieldValues = FieldValues>({ control, name, label, description, placeholder, required, disabled, className, labelClassName, buttonClassName, calendarClassName, minDate, maxDate, disabledDates, disabledDays, onValueChange, validateDateRange, clearErrors, descriptionComponent, allowClear, showBadge, Icon, transform, }: DateRangeInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
1945
-
1946
- interface CalendarEvent {
1947
- id: string;
1948
- date: Date | string;
1949
- [key: string]: any;
1950
- }
1951
- interface EventCalendarProps<T extends CalendarEvent> {
1952
- /** Events to display on the calendar */
1953
- events?: T[];
1954
- /** Currently selected date */
1955
- selectedDate?: Date | null;
1956
- /** Callback when a date is selected */
1957
- onDateSelect?: (date: Date, events: T[]) => void;
1958
- /** Callback when month changes */
1959
- onMonthChange?: (date: Date) => void;
1960
- /** Initial month to display */
1961
- initialMonth?: Date;
1962
- /** Custom render for day cell content */
1963
- renderDayContent?: (date: Date, events: T[], isSelected: boolean) => ReactNode;
1964
- /** Custom render for event indicators */
1965
- renderEventIndicators?: (events: T[]) => ReactNode;
1966
- /** Get events for a specific date (custom filtering) */
1967
- getEventsForDate?: (date: Date, events: T[]) => T[];
1968
- /** Additional class names */
1969
- className?: string;
1970
- /** Header content (left side) */
1971
- headerLeft?: ReactNode;
1972
- /** Header content (right side, before navigation) */
1973
- headerRight?: ReactNode;
1974
- /** Minimum cell height */
1975
- minCellHeight?: string;
1976
- /** Show week numbers */
1977
- showWeekNumbers?: boolean;
1978
- /** Loading state */
1979
- isLoading?: boolean;
1980
- }
1981
- /**
1982
- * EventCalendar - A reusable calendar component for displaying events
1983
- *
1984
- * Can be used for attendance tracking, scheduling, etc.
1985
- */
1986
- declare function EventCalendar<T extends CalendarEvent>({ events, selectedDate: controlledSelectedDate, onDateSelect, onMonthChange, initialMonth, renderDayContent, renderEventIndicators, getEventsForDate, className, headerLeft, headerRight, minCellHeight, showWeekNumbers, isLoading, }: EventCalendarProps<T>): react_jsx_runtime.JSX.Element;
1987
- /**
1988
- * CalendarDayDetail - Side panel component for showing selected day details
1989
- */
1990
- interface CalendarDayDetailProps {
1991
- date: Date | null;
1992
- title?: string;
1993
- emptyMessage?: string;
1994
- children?: ReactNode;
1995
- className?: string;
1996
- }
1997
- declare function CalendarDayDetail({ date, title, emptyMessage, children, className, }: CalendarDayDetailProps): react_jsx_runtime.JSX.Element;
1998
- /**
1999
- * CalendarWithDetail - Calendar with integrated detail panel
2000
- */
2001
- interface CalendarWithDetailProps<T extends CalendarEvent> extends Omit<EventCalendarProps<T>, "onDateSelect"> {
2002
- /** Render detail panel content */
2003
- renderDetail?: (date: Date, events: T[]) => ReactNode;
2004
- /** Detail panel title when no date selected */
2005
- detailTitle?: string;
2006
- /** Detail panel empty message */
2007
- detailEmptyMessage?: string;
2008
- /** Layout direction */
2009
- layout?: "horizontal" | "vertical";
2010
- /** Detail panel position */
2011
- detailPosition?: "left" | "right" | "top" | "bottom";
2012
- /** Callback when date is selected */
2013
- onDateSelect?: (date: Date, events: T[]) => void;
2014
- }
2015
- declare function CalendarWithDetail<T extends CalendarEvent>({ renderDetail, detailTitle, detailEmptyMessage, layout, detailPosition, onDateSelect, ...calendarProps }: CalendarWithDetailProps<T>): react_jsx_runtime.JSX.Element;
2016
-
2017
- /** Available entrance animation types */
2018
- type Animation = "fadeIn" | "fadeInUp" | "scaleIn" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
2019
- /** Slide direction for SlideIn component */
2020
- type SlideDirection = "left" | "right" | "up" | "down";
2021
- /** Options for the useInView hook */
2022
- interface UseInViewOptions {
2023
- /** IntersectionObserver rootMargin (default: "0px") */
2024
- margin?: string;
2025
- /** Trigger only once (default: true) */
2026
- once?: boolean;
2027
- /** Enable/disable observation (default: true) */
2028
- enabled?: boolean;
2029
- }
2030
- /** Shared base props for animation components */
2031
- interface AnimateBaseProps {
2032
- children?: ReactNode;
2033
- /** Delay in ms before animation starts */
2034
- delay?: number;
2035
- /** Animation duration in ms */
2036
- duration?: number;
2037
- /** Only animate when element scrolls into viewport */
2038
- inView?: boolean;
2039
- /** IntersectionObserver rootMargin for inView trigger */
2040
- inViewMargin?: string;
2041
- /** Fire animation only once (default: true) */
2042
- once?: boolean;
2043
- /** Disable animation entirely — renders children immediately */
2044
- disabled?: boolean;
2045
- className?: string;
2046
- /** HTML element to render as (default: "div") */
2047
- as?: ElementType;
2048
- }
2049
- interface SlideInProps extends AnimateBaseProps {
2050
- /** Direction to slide from */
2051
- direction?: SlideDirection;
2052
- }
2053
- interface StaggerChildrenProps {
2054
- children?: ReactNode;
2055
- /** Animation type for each child */
2056
- animation?: Animation;
2057
- /** Delay between each child in ms */
2058
- staggerDelay?: number;
2059
- /** Initial delay before first child animates */
2060
- initialDelay?: number;
2061
- /** Duration per child animation */
2062
- duration?: number;
2063
- inView?: boolean;
2064
- inViewMargin?: string;
2065
- once?: boolean;
2066
- disabled?: boolean;
2067
- className?: string;
2068
- /** Extra classes applied to each child wrapper div */
2069
- childClassName?: string;
2070
- as?: ElementType;
2071
- }
2072
- interface AnimatedTextProps {
2073
- /** The text string to animate */
2074
- text: string;
2075
- as?: ElementType;
2076
- animation?: Animation;
2077
- /** Split text by word or character */
2078
- splitBy?: "word" | "character";
2079
- /** Delay between each segment in ms */
2080
- staggerDelay?: number;
2081
- delay?: number;
2082
- duration?: number;
2083
- inView?: boolean;
2084
- inViewMargin?: string;
2085
- once?: boolean;
2086
- disabled?: boolean;
2087
- className?: string;
2088
- /** Extra classes on each animated text segment */
2089
- segmentClassName?: string;
2090
- }
2091
- interface AnimatedCounterProps {
2092
- /** Start value (default: 0) */
2093
- from?: number;
2094
- /** Target value to count to */
2095
- to: number;
2096
- /** Count-up duration in ms (default: 2000) */
2097
- duration?: number;
2098
- /** Delay before counting starts in ms */
2099
- delay?: number;
2100
- /** Intl.NumberFormat locale for number formatting (e.g. "en-US") */
2101
- locale?: string;
2102
- /** Text rendered before the number */
2103
- prefix?: string;
2104
- /** Text rendered after the number */
2105
- suffix?: string;
2106
- /** Decimal places (default: 0) */
2107
- decimals?: number;
2108
- /** Custom number formatter — overrides locale/decimals */
2109
- formatter?: (value: number) => string;
2110
- inView?: boolean;
2111
- inViewMargin?: string;
2112
- once?: boolean;
2113
- disabled?: boolean;
2114
- className?: string;
2115
- as?: ElementType;
2116
- }
2117
- /**
2118
- * useInView — observe when an element enters the viewport.
2119
- *
2120
- * @example
2121
- * ```tsx
2122
- * const ref = useRef<HTMLDivElement>(null);
2123
- * const isInView = useInView(ref, { once: true, margin: "-100px" });
2124
- * return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
2125
- * ```
2126
- */
2127
- declare function useInView(ref: RefObject<Element | null>, options?: UseInViewOptions): boolean;
2128
- /** Fade in with opacity transition */
2129
- declare function FadeIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2130
- /** Fade in with upward motion */
2131
- declare function FadeInUp(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2132
- /** Scale up into view */
2133
- declare function ScaleIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2134
- /** Slide in from a specified direction */
2135
- declare function SlideIn({ direction, ...props }: SlideInProps): react_jsx_runtime.JSX.Element;
2136
- declare function StaggerChildren({ children, animation, staggerDelay, initialDelay, duration, inView, inViewMargin, once, disabled, className, childClassName, as, }: StaggerChildrenProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
2137
- declare function AnimatedText({ text, as, animation, splitBy, staggerDelay, delay, duration, inView, inViewMargin, once, disabled, className, segmentClassName, }: AnimatedTextProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
2138
- declare function AnimatedCounter({ from, to, duration, delay, locale, prefix, suffix, decimals, formatter, inView, inViewMargin, once, disabled, className, as, }: AnimatedCounterProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
2139
-
2140
- export { AccordionSection, type AccordionSectionProps, ActionDropdown, type ActionDropdownItem, type ActionDropdownProps, ActionTooltip, type ActionTooltipProps, type AnimateBaseProps, AnimatedCounter, type AnimatedCounterProps, AnimatedText, type AnimatedTextProps, type Animation, ApiPagination, type ApiPaginationData, type ApiPaginationProps, ButtonTooltip, type ButtonTooltipProps, CalendarDayDetail, type CalendarDayDetailProps, type CalendarEvent, CalendarWithDetail, type CalendarWithDetailProps, CardWrapper, type CardWrapperProps, CheckboxDropdown, type CheckboxDropdownProps, CheckboxInput, type CheckboxInputProps, type CheckboxItem, ClientSubmitButton, type ClientSubmitButtonProps, CollapsibleCard, type CollapsibleCardProps, CollapsibleSection, type CollapsibleSectionProps, CollapsibleWrapper, type CollapsibleWrapperProps, ComboboxInput, type ComboboxInputProps, type ComboboxOption, ConfirmDialog, type ConfirmDialogProps, ConfirmSheet, type ConfirmSheetProps, CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, CopyText, type CopyTextProps, CustomPagination, type CustomPaginationProps, DEFAULT_COUNTRIES, DataCard, type DataCardProps, DataTable, type DataTablePaginationProps, type DataTableProps, DateInput, type DateInputProps, type DateRange, DateRangeFilter, type DateRangeFilterProps, DateRangeInput, type DateRangeInputProps, type DateRangeValue, DeleteConfirmDialog, type DeleteConfirmDialogProps, DialogWrapper, type DialogWrapperProps, DisplayHeading, type DisplayHeadingProps, DraggableCard, type DraggableCardProps, DropdownWrapper, type DropdownWrapperProps, type DynamicTabItem, DynamicTabs, type DynamicTabsProps, EmptyState, EmptyStateNoData, EmptyStateNoResults, EmptyStateNotFound, type EmptyStatePresetProps, type EmptyStateProps, ErrorState, ErrorStateInline, type ErrorStateInlineProps, type ErrorStateProps, EventCalendar, type EventCalendarProps, FacebookIcon, FadeIn, FadeInUp, FaqAccordion, type FaqAccordionProps, type FaqItem, FeatureItem, type FeatureItemProps, FeatureList, type FeatureListItem, type FeatureListProps, FormDialog, type FormDialogProps, FormErrorSummary, type FormErrorSummaryProps, FormInput, type FormInputProps, FormSheet, type FormSheetProps, FormTextarea, type FormTextareaProps, GoogleIcon, IconItemMedia, type IconItemMediaProps, IconTooltip, type IconTooltipProps, InfoAlert, type InfoAlertProps, InfoRow, type InfoRowProps, InfoTooltip, type InfoTooltipProps, InstagramIcon, LoadingCard, type LoadingCardProps, LoadingOverlay, type LoadingOverlayProps, LoadingState, type LoadingStateProps, ModeToggle, PaginationInfo, type PaginationInfoProps, type PhoneCountry, PhoneInput, type PhoneInputProps, Pill, PillAvatar, PillAvatarGroup, type PillAvatarGroupProps, type PillAvatarProps, PillButton, type PillButtonProps, PillDelta, type PillDeltaProps, PillIcon, type PillIconProps, PillIndicator, type PillIndicatorProps, type PillProps, PillStatus, type PillStatusProps, type RadioChoice, RadioDropdown, type RadioDropdownProps, RadioInput, type RadioInputProps, ResponsiveSplitLayout, type ResponsiveSplitLayoutProps, ScaleIn, SelectDropdown, type SelectDropdownOption, type SelectDropdownProps, SelectInput, type SelectInputProps, type SelectOption, type SelectOptionGroup, SheetWrapper, type SheetWrapperProps, SimpleTable, type SimpleTableProps, SkeletonCard, type SkeletonCardProps, SkeletonGrid, type SkeletonGridProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, type SlideDirection, SlideIn, type SlideInProps, SlugField, type SlugFieldProps, StaggerChildren, type StaggerChildrenProps, StatsCard, type StatsCardProps, StatusBanner, type StatusBannerProps, type StatusBannerVariant, StepContent, type StepContentProps, Stepper, type StepperProps, type StepperStep, SwitchInput, type SwitchInputProps, TTL, TabContent, type TabContentProps, TabTrigger, type TabTriggerProps, TableWrapper, type TableWrapperColumn, type TableWrapperEmptyState, type TableWrapperProps, TabsWrapper, type TabsWrapperProps, TagChoiceInput, type TagChoiceInputProps, type TagChoiceItem, TagInput, type TagInputProps, Thumbnail, type ThumbnailProps, TooltipWrapper, type TooltipWrapperProps, TwitterXIcon, type UseCopyToClipboardReturn, type UseInViewOptions, WhatsAppIcon, clearStorage, generateSlug, generateUUID, getStorageItem, isStorageEmpty, removeStorageItem, setStorageItem, storage, useCopyToClipboard, useDebounce, useDebouncedCallback, useInView, useIsMobile, useLocalStorage, useMediaQuery, useScrollDetection };