@classytic/fluid 0.2.1 → 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 -386
  57. package/dist/dashboard.js +0 -1032
  58. package/dist/dashboard.js.map +0 -1
  59. package/dist/index.d.ts +0 -2141
  60. package/dist/index.js +0 -6460
  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,2141 +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 to display — pass a LucideIcon or ReactNode */
558
- icon?: LucideIcon | 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 — Shown when content is empty, search has no results, etc.
572
- *
573
- * @example Default
574
- * ```tsx
575
- * <EmptyState
576
- * title="No projects yet"
577
- * description="Create your first project to get started."
578
- * icon={FolderPlus}
579
- * action={<Button>Create Project</Button>}
580
- * />
581
- * ```
582
- *
583
- * @example Compact (inline)
584
- * ```tsx
585
- * <EmptyState variant="compact" title="No items" />
586
- * ```
587
- *
588
- * @example With preset
589
- * ```tsx
590
- * <EmptyStateNoResults action={<Button onClick={clearFilters}>Clear filters</Button>} />
591
- * ```
592
- */
593
- declare function EmptyState({ title, description, icon: IconProp, action, secondaryAction, variant, className, children, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
594
- type EmptyStatePresetProps = Omit<EmptyStateProps, "icon" | "title" | "description"> & {
595
- title?: string;
596
- description?: string;
597
- };
598
- /** No search results — with search icon */
599
- declare function EmptyStateNoResults(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
600
- /** No data — with inbox icon */
601
- declare function EmptyStateNoData(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
602
- /** Not found — with file-x icon */
603
- declare function EmptyStateNotFound(props: EmptyStatePresetProps): react_jsx_runtime.JSX.Element;
604
-
605
- interface LoadingStateProps {
606
- /** Loading message text */
607
- text?: string;
608
- /** Visual variant */
609
- variant?: "default" | "inline" | "overlay" | "minimal";
610
- /** Spinner size */
611
- size?: "sm" | "md" | "lg";
612
- /** Additional className */
613
- className?: string;
614
- }
615
- interface LoadingOverlayProps {
616
- /** Loading message text */
617
- text?: string;
618
- /** Whether the overlay is visible */
619
- visible?: boolean;
620
- /** Additional className */
621
- className?: string;
622
- /** Children to render behind the overlay */
623
- children?: React.ReactNode;
624
- }
625
- /**
626
- * LoadingState — Versatile loading indicator
627
- *
628
- * @example Default (centered, full area)
629
- * ```tsx
630
- * <LoadingState text="Loading projects..." />
631
- * ```
632
- *
633
- * @example Inline (in a row)
634
- * ```tsx
635
- * <LoadingState variant="inline" text="Saving..." size="sm" />
636
- * ```
637
- *
638
- * @example Minimal (just the spinner)
639
- * ```tsx
640
- * <LoadingState variant="minimal" />
641
- * ```
642
- */
643
- declare function LoadingState({ text, variant, size, className, }: LoadingStateProps): react_jsx_runtime.JSX.Element;
644
- /**
645
- * LoadingOverlay — Renders children with an overlay spinner on top
646
- *
647
- * @example
648
- * ```tsx
649
- * <LoadingOverlay visible={isSaving} text="Saving changes...">
650
- * <MyFormContent />
651
- * </LoadingOverlay>
652
- * ```
653
- */
654
- declare function LoadingOverlay({ text, visible, className, children, }: LoadingOverlayProps): react_jsx_runtime.JSX.Element;
655
-
656
- type StatusBannerVariant = "info" | "warning" | "success" | "error";
657
- interface StatusBannerProps {
658
- /** The banner variant/severity */
659
- variant?: StatusBannerVariant;
660
- /** Main message text or node */
661
- children: React.ReactNode;
662
- /** Optional custom icon */
663
- icon?: LucideIcon;
664
- /** Whether the banner can be dismissed */
665
- dismissible?: boolean;
666
- /** Callback when dismissed */
667
- onDismiss?: () => void;
668
- /** Optional action element (e.g. a link or button) */
669
- action?: React.ReactNode;
670
- /** Additional className */
671
- className?: string;
672
- }
673
- /**
674
- * StatusBanner — A persistent info/warning/success/error banner.
675
- *
676
- * @example
677
- * ```tsx
678
- * <StatusBanner variant="warning" dismissible>
679
- * Your trial expires in 3 days. <a href="/pricing">Upgrade now</a>
680
- * </StatusBanner>
681
- *
682
- * <StatusBanner variant="success" action={<Button size="sm">View</Button>}>
683
- * Your project was deployed successfully.
684
- * </StatusBanner>
685
- * ```
686
- */
687
- declare function StatusBanner({ variant, children, icon: CustomIcon, dismissible, onDismiss, action, className, }: StatusBannerProps): react_jsx_runtime.JSX.Element | null;
688
-
689
- interface StepperStep {
690
- /** Step label */
691
- label: string;
692
- /** Optional description shown below the label */
693
- description?: string;
694
- /** Optional icon for the step (replaces the number) */
695
- icon?: React.ReactNode;
696
- /** Whether this step is optional */
697
- optional?: boolean;
698
- }
699
- interface StepperProps {
700
- /** Array of step definitions */
701
- steps: (string | StepperStep)[];
702
- /** Active step index (0-based) */
703
- currentStep: number;
704
- /** Variant */
705
- variant?: "default" | "compact";
706
- /** Orientation */
707
- orientation?: "horizontal" | "vertical";
708
- /** Additional className */
709
- className?: string;
710
- /** Callback when a completed step is clicked */
711
- onStepClick?: (stepIndex: number) => void;
712
- /** Children (StepContent panels) */
713
- children?: React.ReactNode;
714
- }
715
- interface StepContentProps {
716
- /** Step index this content belongs to (0-based) */
717
- step: number;
718
- /** Currently active step */
719
- currentStep: number;
720
- /** Children to render */
721
- children: React.ReactNode;
722
- /** Additional className */
723
- className?: string;
724
- /** Keep mounted when inactive (useful for forms) */
725
- keepMounted?: boolean;
726
- }
727
- /**
728
- * Stepper — Multi-step progress indicator
729
- *
730
- * Features:
731
- * - Horizontal layout: circles in a row with labels below, proper connectors
732
- * - Vertical layout: circles on the left with labels to the right
733
- * - Compact variant for tight spaces
734
- * - Handles many steps gracefully without scrollbars
735
- * - Clickable completed steps for navigation
736
- * - Accessible: role="list", aria-current="step"
737
- *
738
- * @example Basic
739
- * ```tsx
740
- * const [step, setStep] = useState(0);
741
- *
742
- * <Stepper steps={["Details", "Config", "Review"]} currentStep={step}>
743
- * <StepContent step={0} currentStep={step}>
744
- * <DetailsForm onNext={() => setStep(1)} />
745
- * </StepContent>
746
- * </Stepper>
747
- * ```
748
- *
749
- * @example With step objects
750
- * ```tsx
751
- * <Stepper
752
- * steps={[
753
- * { label: "Account", description: "Set up your account" },
754
- * { label: "Profile", description: "Add your details", optional: true },
755
- * { label: "Complete", description: "Review and submit" },
756
- * ]}
757
- * currentStep={1}
758
- * onStepClick={(i) => setStep(i)}
759
- * />
760
- * ```
761
- */
762
- declare function Stepper({ steps, currentStep, variant, orientation, className, onStepClick, children, ...props }: StepperProps): react_jsx_runtime.JSX.Element;
763
- /**
764
- * StepContent — Renders content for a specific step.
765
- * Only visible when `step === currentStep`.
766
- *
767
- * @example
768
- * ```tsx
769
- * <StepContent step={0} currentStep={current}>
770
- * <MyForm />
771
- * </StepContent>
772
- * ```
773
- */
774
- declare function StepContent({ step, currentStep, children, className, keepMounted, }: StepContentProps): react_jsx_runtime.JSX.Element | null;
775
-
776
- interface CopyButtonProps {
777
- value: string;
778
- className?: string;
779
- size?: "default" | "sm" | "lg" | "icon";
780
- variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
781
- showToast?: boolean;
782
- toastMessage?: string;
783
- errorMessage?: string;
784
- timeout?: number;
785
- children?: ReactNode;
786
- }
787
- declare function CopyButton({ value, className, size, variant, showToast, toastMessage, errorMessage, timeout, children, ...props }: CopyButtonProps): react_jsx_runtime.JSX.Element;
788
- interface CopyTextProps {
789
- value: string;
790
- displayValue?: string;
791
- className?: string;
792
- textClassName?: string;
793
- buttonClassName?: string;
794
- maxLength?: number;
795
- showButton?: boolean;
796
- }
797
- declare function CopyText({ value, displayValue, className, textClassName, buttonClassName, maxLength, showButton, ...buttonProps }: CopyTextProps): react_jsx_runtime.JSX.Element;
798
- interface CopyCodeBlockProps {
799
- value: string;
800
- className?: string;
801
- language?: string;
802
- showLineNumbers?: boolean;
803
- }
804
- declare function CopyCodeBlock({ value, className, language, showLineNumbers, ...buttonProps }: CopyCodeBlockProps): react_jsx_runtime.JSX.Element;
805
-
806
- interface CustomPaginationProps {
807
- page: number;
808
- pages: number;
809
- hasNext: boolean;
810
- hasPrev: boolean;
811
- onPageChange: (page: number) => void;
812
- }
813
- declare function CustomPagination({ page, onPageChange, pages, hasPrev, hasNext, }: CustomPaginationProps): react_jsx_runtime.JSX.Element | null;
814
- interface PaginationInfoProps {
815
- page: number;
816
- total: number;
817
- limit?: number;
818
- }
819
- declare function PaginationInfo({ page, total, limit }: PaginationInfoProps): react_jsx_runtime.JSX.Element;
820
-
821
- interface DataTablePaginationProps extends Partial<ApiPaginationData> {
822
- onPageChange?: (page: number) => void;
823
- }
824
- interface DataTableProps<TData, TValue> {
825
- columns: ColumnDef<TData, TValue>[];
826
- data: TData[];
827
- isLoading?: boolean;
828
- pagination?: DataTablePaginationProps;
829
- enableSorting?: boolean;
830
- enableRowSelection?: boolean;
831
- onRowSelectionChange?: (selectedRows: TData[]) => void;
832
- className?: string;
833
- /** Custom loading state renderer */
834
- loadingState?: React__default.ReactNode;
835
- /** Custom empty state renderer */
836
- emptyState?: React__default.ReactNode;
837
- }
838
- 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;
839
-
840
- declare const SIZE_VARIANTS$1: {
841
- readonly sm: "sm:max-w-sm";
842
- readonly default: "sm:max-w-md";
843
- readonly lg: "sm:max-w-lg md:max-w-2xl";
844
- readonly xl: "sm:max-w-2xl md:max-w-4xl";
845
- readonly "2xl": "sm:max-w-4xl md:max-w-6xl";
846
- readonly full: "max-w-[95vw] h-[95vh]";
847
- };
848
- type SizeVariant$1 = keyof typeof SIZE_VARIANTS$1;
849
- interface DialogWrapperProps {
850
- open: boolean;
851
- onOpenChange: (open: boolean) => void;
852
- title?: ReactNode;
853
- description?: ReactNode;
854
- children?: ReactNode;
855
- footer?: ReactNode;
856
- trigger?: ReactNode;
857
- size?: SizeVariant$1;
858
- className?: string;
859
- headerClassName?: string;
860
- contentClassName?: string;
861
- footerClassName?: string;
862
- hideHeader?: boolean;
863
- hideTitle?: boolean;
864
- hideDescription?: boolean;
865
- hideCloseButton?: boolean;
866
- }
867
- 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;
868
- interface FormDialogProps extends Omit<DialogWrapperProps, "footer"> {
869
- onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
870
- onCancel?: () => void;
871
- submitText?: string;
872
- cancelText?: string;
873
- isLoading?: boolean;
874
- submitDisabled?: boolean;
875
- }
876
- declare function FormDialog({ open, onOpenChange, title, description, children, onSubmit, onCancel, submitText, cancelText, isLoading, submitDisabled, ...props }: FormDialogProps): react_jsx_runtime.JSX.Element;
877
-
878
- interface DropdownWrapperProps {
879
- trigger: React.ReactNode;
880
- children: React.ReactNode;
881
- align?: "start" | "center" | "end";
882
- side?: "top" | "right" | "bottom" | "left";
883
- sideOffset?: number;
884
- className?: string;
885
- contentClassName?: string;
886
- }
887
- declare function DropdownWrapper({ trigger, children, align, side, sideOffset, className, contentClassName, ...props }: DropdownWrapperProps): react_jsx_runtime.JSX.Element;
888
- interface ActionDropdownItem {
889
- type?: "item" | "separator" | "label" | "group";
890
- key?: string;
891
- label?: string | (() => string);
892
- icon?: LucideIcon;
893
- onClick?: (e: React.MouseEvent) => void;
894
- disabled?: boolean;
895
- hidden?: boolean;
896
- variant?: "default" | "destructive";
897
- shortcut?: string;
898
- className?: string;
899
- items?: ActionDropdownItem[];
900
- }
901
- interface ActionDropdownProps {
902
- items?: ActionDropdownItem[];
903
- triggerIcon?: LucideIcon;
904
- triggerVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
905
- triggerSize?: "default" | "sm" | "lg" | "icon";
906
- triggerClassName?: string;
907
- triggerLabel?: string;
908
- showOnHover?: boolean;
909
- align?: "start" | "center" | "end";
910
- contentClassName?: string;
911
- onOpenChange?: (open: boolean) => void;
912
- stopPropagation?: boolean;
913
- }
914
- declare function ActionDropdown({ items, triggerIcon: TriggerIcon, triggerVariant, triggerSize, triggerClassName, triggerLabel, showOnHover, align, contentClassName, onOpenChange, stopPropagation, ...props }: ActionDropdownProps): react_jsx_runtime.JSX.Element;
915
- interface SelectDropdownOption {
916
- value: string;
917
- label: string;
918
- icon?: LucideIcon;
919
- }
920
- interface SelectDropdownProps {
921
- value?: string;
922
- onValueChange?: (value: string) => void;
923
- placeholder?: string;
924
- options?: SelectDropdownOption[];
925
- triggerClassName?: string;
926
- contentClassName?: string;
927
- disabled?: boolean;
928
- }
929
- declare function SelectDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: SelectDropdownProps): react_jsx_runtime.JSX.Element;
930
- interface CheckboxDropdownProps {
931
- values?: string[];
932
- onValuesChange?: (values: string[]) => void;
933
- placeholder?: string;
934
- options?: SelectDropdownOption[];
935
- triggerClassName?: string;
936
- contentClassName?: string;
937
- disabled?: boolean;
938
- showSelectedCount?: boolean;
939
- }
940
- declare function CheckboxDropdown({ values, onValuesChange, placeholder, options, triggerClassName, contentClassName, disabled, showSelectedCount, ...props }: CheckboxDropdownProps): react_jsx_runtime.JSX.Element;
941
- interface RadioDropdownProps {
942
- value?: string;
943
- onValueChange?: (value: string) => void;
944
- placeholder?: string;
945
- options?: SelectDropdownOption[];
946
- triggerClassName?: string;
947
- contentClassName?: string;
948
- disabled?: boolean;
949
- }
950
- declare function RadioDropdown({ value, onValueChange, placeholder, options, triggerClassName, contentClassName, disabled, ...props }: RadioDropdownProps): react_jsx_runtime.JSX.Element;
951
-
952
- interface InfoRowProps {
953
- label: string;
954
- value: ReactNode;
955
- copyable?: boolean;
956
- icon?: ComponentType<LucideProps>;
957
- }
958
- declare function InfoRow({ label, value, copyable, icon: Icon }: InfoRowProps): react_jsx_runtime.JSX.Element | null;
959
-
960
- /**
961
- * Item Component Helpers
962
- */
963
- declare const iconItemMediaVariants: (props?: ({
964
- iconBg?: "primary" | "gradient" | "none" | "gold" | "muted" | null | undefined;
965
- iconSize?: "lg" | "xl" | "sm" | "md" | null | undefined;
966
- } & class_variance_authority_types.ClassProp) | undefined) => string;
967
- interface IconItemMediaProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconItemMediaVariants> {
968
- icon?: React.ReactNode;
969
- children?: React.ReactNode;
970
- }
971
- declare const IconItemMedia: React.NamedExoticComponent<IconItemMediaProps>;
972
- interface FeatureItemProps {
973
- icon?: React.ReactNode;
974
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
975
- iconSize?: "sm" | "md" | "lg" | "xl";
976
- title?: React.ReactNode;
977
- description?: React.ReactNode;
978
- variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
979
- size?: "sm" | "default" | "lg";
980
- layout?: "vertical" | "horizontal";
981
- titleAs?: React.ElementType;
982
- className?: string;
983
- titleClassName?: string;
984
- descriptionClassName?: string;
985
- iconClassName?: string;
986
- children?: React.ReactNode;
987
- }
988
- declare const FeatureItem: React.NamedExoticComponent<FeatureItemProps>;
989
- interface FeatureListItem {
990
- id?: string;
991
- icon?: React.ReactNode;
992
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
993
- iconSize?: "sm" | "md" | "lg" | "xl";
994
- title: string;
995
- description?: string;
996
- }
997
- interface FeatureListProps {
998
- items?: FeatureListItem[];
999
- columns?: 2 | 3 | 4;
1000
- variant?: "default" | "outline" | "ghost" | "gradient-light" | "gradient";
1001
- iconBg?: "primary" | "gold" | "muted" | "gradient" | "none";
1002
- iconSize?: "sm" | "md" | "lg" | "xl";
1003
- layout?: "vertical" | "horizontal";
1004
- className?: string;
1005
- itemClassName?: string;
1006
- }
1007
- declare function FeatureList({ items, columns, variant, iconBg, iconSize, layout, className, itemClassName, ...props }: FeatureListProps): react_jsx_runtime.JSX.Element;
1008
- declare namespace FeatureList {
1009
- var displayName: string;
1010
- }
1011
-
1012
- declare function ModeToggle(): react_jsx_runtime.JSX.Element;
1013
-
1014
- interface PhoneCountry {
1015
- code: string;
1016
- name: string;
1017
- dialCode: string;
1018
- flag: string;
1019
- }
1020
- declare const DEFAULT_COUNTRIES: PhoneCountry[];
1021
- interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
1022
- onChange?: (value: string) => void;
1023
- defaultCountry?: string;
1024
- /** Custom list of countries to show. Defaults to a built-in list of ~50 countries. */
1025
- countries?: PhoneCountry[];
1026
- ref?: React.Ref<HTMLInputElement>;
1027
- }
1028
- declare function PhoneInput({ className, onChange, value, defaultCountry, countries, disabled, placeholder, ref, ...props }: PhoneInputProps): react_jsx_runtime.JSX.Element;
1029
-
1030
- interface PillProps {
1031
- variant?: "default" | "secondary" | "destructive" | "outline";
1032
- themed?: boolean;
1033
- className?: string;
1034
- children?: ReactNode;
1035
- }
1036
- declare function Pill({ variant, themed, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
1037
- interface PillAvatarProps {
1038
- fallback?: string;
1039
- className?: string;
1040
- src?: string;
1041
- alt?: string;
1042
- }
1043
- declare function PillAvatar({ fallback, className, src, alt, ...props }: PillAvatarProps): react_jsx_runtime.JSX.Element;
1044
- interface PillButtonProps {
1045
- className?: string;
1046
- children?: ReactNode;
1047
- onClick?: () => void;
1048
- }
1049
- declare function PillButton({ className, ...props }: PillButtonProps): react_jsx_runtime.JSX.Element;
1050
- interface PillStatusProps {
1051
- children?: ReactNode;
1052
- className?: string;
1053
- }
1054
- declare function PillStatus({ children, className, ...props }: PillStatusProps): react_jsx_runtime.JSX.Element;
1055
- interface PillIndicatorProps {
1056
- variant?: "success" | "error" | "warning" | "info";
1057
- pulse?: boolean;
1058
- }
1059
- declare function PillIndicator({ variant, pulse }: PillIndicatorProps): react_jsx_runtime.JSX.Element;
1060
- interface PillDeltaProps {
1061
- className?: string;
1062
- delta?: number;
1063
- }
1064
- declare function PillDelta({ className, delta }: PillDeltaProps): react_jsx_runtime.JSX.Element;
1065
- interface PillIconProps extends LucideProps {
1066
- icon: ComponentType<LucideProps>;
1067
- className?: string;
1068
- }
1069
- declare function PillIcon({ icon: Icon, className, ...props }: PillIconProps): react_jsx_runtime.JSX.Element;
1070
- interface PillAvatarGroupProps {
1071
- children?: ReactNode;
1072
- className?: string;
1073
- }
1074
- declare function PillAvatarGroup({ children, className, ...props }: PillAvatarGroupProps): react_jsx_runtime.JSX.Element;
1075
-
1076
- interface PanelConfig {
1077
- title?: string;
1078
- icon?: ReactNode;
1079
- content: ReactNode;
1080
- badge?: ReactNode;
1081
- }
1082
- interface ResponsiveSplitLayoutProps {
1083
- leftPanel: PanelConfig;
1084
- rightPanel: PanelConfig;
1085
- className?: string;
1086
- leftPanelClassName?: string;
1087
- rightPanelClassName?: string;
1088
- variant?: "default" | "tabs" | "fixed";
1089
- desktopVariant?: "default" | "tabs" | "fixed";
1090
- mobileVariant?: "default" | "tabs" | "fixed";
1091
- defaultLayout?: [number, number];
1092
- minSizes?: [number, number];
1093
- rightPanelWidth?: number;
1094
- persistLayoutKey?: string;
1095
- mobileBreakpoint?: "sm" | "md" | "lg" | "xl";
1096
- forceMobile?: boolean;
1097
- forceDesktop?: boolean;
1098
- }
1099
- declare function ResponsiveSplitLayout({ leftPanel, rightPanel, className, leftPanelClassName, rightPanelClassName, variant, desktopVariant, mobileVariant, defaultLayout, minSizes, rightPanelWidth, persistLayoutKey, mobileBreakpoint, forceMobile, forceDesktop, }: ResponsiveSplitLayoutProps): react_jsx_runtime.JSX.Element;
1100
-
1101
- declare const SIZE_VARIANTS: {
1102
- readonly sm: "sm:!max-w-md";
1103
- readonly default: "w-full sm:!max-w-md md:!max-w-lg";
1104
- readonly lg: "w-full sm:!max-w-lg md:!max-w-2xl lg:!max-w-4xl";
1105
- readonly xl: "w-full sm:!max-w-2xl md:!max-w-4xl lg:!max-w-5xl";
1106
- readonly full: "w-full !max-w-full";
1107
- readonly mobile: "w-[85%] !max-w-sm";
1108
- readonly "mobile-nav": "!w-[300px] sm:!w-[350px]";
1109
- };
1110
- type SizeVariant = keyof typeof SIZE_VARIANTS;
1111
- interface SheetWrapperProps {
1112
- open: boolean;
1113
- onOpenChange: (open: boolean) => void;
1114
- title?: string;
1115
- description?: string;
1116
- children?: ReactNode;
1117
- footer?: ReactNode;
1118
- header?: ReactNode;
1119
- side?: "top" | "bottom" | "left" | "right";
1120
- size?: SizeVariant;
1121
- modal?: boolean;
1122
- className?: string;
1123
- headerClassName?: string;
1124
- contentClassName?: string;
1125
- footerClassName?: string;
1126
- innerClassName?: string;
1127
- hideHeader?: boolean;
1128
- hideTitle?: boolean;
1129
- hideDescription?: boolean;
1130
- hideCloseButton?: boolean;
1131
- disableContentPadding?: boolean;
1132
- }
1133
- declare const SheetWrapper: React.NamedExoticComponent<SheetWrapperProps>;
1134
- interface FormSheetProps extends Omit<SheetWrapperProps, "footer"> {
1135
- onSubmit?: () => void;
1136
- onCancel?: () => void;
1137
- submitLabel?: string;
1138
- cancelLabel?: string;
1139
- submitDisabled?: boolean;
1140
- submitLoading?: boolean;
1141
- formId?: string;
1142
- }
1143
- declare const FormSheet: React.NamedExoticComponent<FormSheetProps>;
1144
- interface ConfirmSheetProps extends Omit<SheetWrapperProps, "footer"> {
1145
- onConfirm?: () => void;
1146
- onCancel?: () => void;
1147
- confirmLabel?: string;
1148
- cancelLabel?: string;
1149
- confirmVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
1150
- confirmDisabled?: boolean;
1151
- confirmLoading?: boolean;
1152
- }
1153
- declare const ConfirmSheet: React.NamedExoticComponent<ConfirmSheetProps>;
1154
-
1155
- interface TableWrapperColumn {
1156
- key?: string;
1157
- header: ReactNode;
1158
- className?: string;
1159
- cellClassName?: string;
1160
- render?: (item: any, index: number) => ReactNode;
1161
- }
1162
- interface TableWrapperEmptyState {
1163
- icon?: ReactNode;
1164
- title?: string;
1165
- description?: string;
1166
- }
1167
- interface TableWrapperProps {
1168
- title?: ReactNode;
1169
- description?: ReactNode;
1170
- icon?: ReactNode;
1171
- children?: ReactNode;
1172
- columns?: TableWrapperColumn[];
1173
- data?: any[];
1174
- renderRow?: (item: any, index: number) => ReactNode;
1175
- emptyState?: TableWrapperEmptyState;
1176
- className?: string;
1177
- tableClassName?: string;
1178
- maxHeight?: string;
1179
- }
1180
- declare function TableWrapper({ title, description, icon, children, columns, data, renderRow, emptyState, className, tableClassName, maxHeight, ...props }: TableWrapperProps): react_jsx_runtime.JSX.Element;
1181
- interface SimpleTableProps extends Omit<TableWrapperProps, "renderRow" | "children"> {
1182
- columns: TableWrapperColumn[];
1183
- data: any[];
1184
- }
1185
- declare function SimpleTable({ title, data, columns, emptyState, className, ...props }: SimpleTableProps): react_jsx_runtime.JSX.Element;
1186
-
1187
- interface TabsWrapperProps {
1188
- defaultValue?: string;
1189
- value?: string;
1190
- onValueChange?: (value: string) => void;
1191
- children: ReactNode;
1192
- className?: string;
1193
- listClassName?: string;
1194
- contentClassName?: string;
1195
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1196
- orientation?: "horizontal" | "vertical";
1197
- layout?: "default" | "flex" | "sidebar";
1198
- withScrollArea?: boolean;
1199
- scrollAreaClassName?: string;
1200
- }
1201
- declare const TabsWrapper: React.NamedExoticComponent<TabsWrapperProps>;
1202
- interface TabTriggerProps {
1203
- value: string;
1204
- children: ReactNode;
1205
- className?: string;
1206
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1207
- icon?: ReactNode;
1208
- hideTextOnMobile?: boolean;
1209
- disabled?: boolean;
1210
- }
1211
- declare const TabTrigger: React.NamedExoticComponent<TabTriggerProps>;
1212
- interface TabContentProps {
1213
- value: string;
1214
- children: ReactNode;
1215
- className?: string;
1216
- withScrollArea?: boolean;
1217
- scrollAreaClassName?: string;
1218
- padding?: boolean;
1219
- keepMounted?: boolean;
1220
- }
1221
- declare const TabContent: React.NamedExoticComponent<TabContentProps>;
1222
- interface DynamicTabItem {
1223
- value: string;
1224
- label: ReactNode;
1225
- content: ReactNode;
1226
- icon?: ReactNode;
1227
- disabled?: boolean;
1228
- hideTextOnMobile?: boolean;
1229
- }
1230
- interface DynamicTabsProps {
1231
- tabs?: DynamicTabItem[];
1232
- defaultValue?: string;
1233
- value?: string;
1234
- onValueChange?: (value: string) => void;
1235
- variant?: "default" | "primary" | "secondary" | "outline" | "ghost" | "underline";
1236
- layout?: "default" | "flex" | "sidebar";
1237
- className?: string;
1238
- listClassName?: string;
1239
- listWrapperClassName?: string;
1240
- contentClassName?: string;
1241
- scrollable?: boolean;
1242
- }
1243
- declare const DynamicTabs: React.NamedExoticComponent<DynamicTabsProps>;
1244
-
1245
- interface TooltipWrapperProps {
1246
- children: ReactNode;
1247
- content: ReactNode;
1248
- side?: "top" | "right" | "bottom" | "left";
1249
- align?: "start" | "center" | "end";
1250
- delay?: number;
1251
- sideOffset?: number;
1252
- className?: string;
1253
- contentClassName?: string;
1254
- disabled?: boolean;
1255
- }
1256
- declare function TooltipWrapper({ children, content, side, align, delay, sideOffset, className, contentClassName, disabled, ...props }: TooltipWrapperProps): react_jsx_runtime.JSX.Element;
1257
- interface ButtonTooltipProps extends Omit<TooltipWrapperProps, "content"> {
1258
- tooltip: ReactNode;
1259
- variant?: "default" | "outline" | "ghost";
1260
- size?: "default" | "sm" | "lg" | "icon";
1261
- }
1262
- declare function ButtonTooltip({ children, tooltip, variant, size, className, ...props }: ButtonTooltipProps): react_jsx_runtime.JSX.Element;
1263
- interface IconTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
1264
- icon: ReactNode;
1265
- tooltip: ReactNode;
1266
- iconClassName?: string;
1267
- size?: number;
1268
- }
1269
- declare function IconTooltip({ icon, tooltip, className, iconClassName, size, ...props }: IconTooltipProps): react_jsx_runtime.JSX.Element;
1270
- interface InfoTooltipProps extends Omit<TooltipWrapperProps, "content" | "children"> {
1271
- tooltip: ReactNode;
1272
- size?: number;
1273
- }
1274
- declare function InfoTooltip({ tooltip, className, size, ...props }: InfoTooltipProps): react_jsx_runtime.JSX.Element;
1275
- interface ActionTooltipProps extends Omit<TooltipWrapperProps, "content"> {
1276
- tooltip: ReactNode;
1277
- action?: () => void;
1278
- variant?: "ghost" | "outline";
1279
- size?: "sm" | "icon";
1280
- }
1281
- declare function ActionTooltip({ children, tooltip, action, variant, size, className, ...props }: ActionTooltipProps): react_jsx_runtime.JSX.Element;
1282
-
1283
- interface TransformFunctions {
1284
- input?: (value: unknown) => string;
1285
- output?: (value: string) => unknown;
1286
- }
1287
- interface FormInputProps<TFieldValues extends FieldValues = FieldValues> {
1288
- control?: Control<TFieldValues>;
1289
- name: FieldPath<TFieldValues> | string;
1290
- label?: string;
1291
- placeholder?: string;
1292
- description?: string;
1293
- helperText?: string;
1294
- required?: boolean;
1295
- disabled?: boolean;
1296
- readOnly?: boolean;
1297
- type?: string;
1298
- className?: string;
1299
- labelClassName?: string;
1300
- inputClassName?: string;
1301
- inputGroupClassName?: string;
1302
- iconLeft?: ReactNode;
1303
- iconRight?: ReactNode;
1304
- addonLeft?: ReactNode;
1305
- addonRight?: ReactNode;
1306
- transform?: TransformFunctions;
1307
- onValueChange?: (value: unknown) => void;
1308
- value?: string | number;
1309
- onChange?: (value: unknown) => void;
1310
- min?: number | string;
1311
- max?: number | string;
1312
- step?: number | string;
1313
- minLength?: number;
1314
- maxLength?: number;
1315
- pattern?: string;
1316
- autoComplete?: string;
1317
- autoFocus?: boolean;
1318
- inputMode?: InputHTMLAttributes<HTMLInputElement>["inputMode"];
1319
- enterKeyHint?: InputHTMLAttributes<HTMLInputElement>["enterKeyHint"];
1320
- }
1321
- /**
1322
- * FormInput - Text input with react-hook-form integration
1323
- *
1324
- * Features:
1325
- * - Works with react-hook-form Controller
1326
- * - Supports input groups with icons/addons
1327
- * - Value transformation (input/output)
1328
- * - Can be used standalone without form
1329
- *
1330
- * @example
1331
- * ```tsx
1332
- * // With react-hook-form
1333
- * <FormInput
1334
- * control={form.control}
1335
- * name="email"
1336
- * type="email"
1337
- * label="Email"
1338
- * placeholder="user@example.com"
1339
- * required
1340
- * />
1341
- *
1342
- * // With icon
1343
- * <FormInput
1344
- * control={form.control}
1345
- * name="search"
1346
- * iconLeft={<SearchIcon />}
1347
- * placeholder="Search..."
1348
- * />
1349
- * ```
1350
- */
1351
- 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;
1352
-
1353
- interface FormTextareaProps<TFieldValues extends FieldValues = FieldValues> {
1354
- control?: Control<TFieldValues>;
1355
- name: FieldPath<TFieldValues> | string;
1356
- label?: string;
1357
- placeholder?: string;
1358
- description?: string;
1359
- helperText?: string;
1360
- required?: boolean;
1361
- disabled?: boolean;
1362
- readOnly?: boolean;
1363
- rows?: number;
1364
- value?: string;
1365
- onChange?: (value: string) => void;
1366
- onValueChange?: (value: string) => void;
1367
- className?: string;
1368
- labelClassName?: string;
1369
- textareaClassName?: string;
1370
- inputGroupClassName?: string;
1371
- iconLeft?: React.ReactNode;
1372
- iconRight?: React.ReactNode;
1373
- addonLeft?: React.ReactNode;
1374
- addonRight?: React.ReactNode;
1375
- minLength?: number;
1376
- maxLength?: number;
1377
- autoComplete?: string;
1378
- autoFocus?: boolean;
1379
- }
1380
- /**
1381
- * FormTextarea - Textarea with react-hook-form integration
1382
- *
1383
- * @example
1384
- * ```tsx
1385
- * <FormTextarea
1386
- * control={form.control}
1387
- * name="bio"
1388
- * label="Biography"
1389
- * placeholder="Tell us about yourself..."
1390
- * rows={5}
1391
- * />
1392
- * ```
1393
- */
1394
- 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;
1395
-
1396
- interface SelectOption {
1397
- value: string | number;
1398
- label: string;
1399
- disabled?: boolean;
1400
- }
1401
- interface SelectOptionGroup {
1402
- label: string;
1403
- items: SelectOption[];
1404
- }
1405
- interface SelectInputProps<TFieldValues extends FieldValues = FieldValues> {
1406
- control?: Control<TFieldValues>;
1407
- name: FieldPath<TFieldValues> | string;
1408
- label?: string;
1409
- placeholder?: string;
1410
- description?: string;
1411
- helperText?: string;
1412
- required?: boolean;
1413
- disabled?: boolean;
1414
- items?: SelectOption[];
1415
- groups?: SelectOptionGroup[];
1416
- allOption?: SelectOption;
1417
- valueKey?: string;
1418
- displayKey?: string;
1419
- value?: string | number;
1420
- onValueChange?: (value: string) => void;
1421
- className?: string;
1422
- labelClassName?: string;
1423
- triggerClassName?: string;
1424
- contentClassName?: string;
1425
- itemClassName?: string;
1426
- Icon?: React.ComponentType<{
1427
- className?: string;
1428
- }>;
1429
- defaultOpen?: boolean;
1430
- side?: "top" | "bottom" | "left" | "right";
1431
- sideOffset?: number;
1432
- align?: "start" | "center" | "end";
1433
- alignOffset?: number;
1434
- }
1435
- /**
1436
- * SelectInput - Select dropdown with react-hook-form integration
1437
- *
1438
- * Features:
1439
- * - Flat and grouped options
1440
- * - Custom placeholder
1441
- * - Optional "All" option (use placeholder text to match)
1442
- * - Custom styling
1443
- *
1444
- * Note: For "All" options with value="", the placeholder will be shown when selected.
1445
- * Make sure your placeholder text matches what you want to display for "All".
1446
- *
1447
- * @example
1448
- * ```tsx
1449
- * // Basic usage
1450
- * <SelectInput
1451
- * control={form.control}
1452
- * name="role"
1453
- * label="Role"
1454
- * items={[
1455
- * { value: "admin", label: "Admin" },
1456
- * { value: "user", label: "User" },
1457
- * ]}
1458
- * />
1459
- *
1460
- * // With "All" option - placeholder shows when "All" is selected
1461
- * <SelectInput
1462
- * name="status"
1463
- * label="Status"
1464
- * items={[
1465
- * { value: "", label: "All" }, // This will show placeholder when selected
1466
- * { value: "active", label: "Active" },
1467
- * ]}
1468
- * placeholder="All" // Make sure this matches the "All" label
1469
- * />
1470
- * ```
1471
- */
1472
- 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;
1473
-
1474
- interface CheckboxItem {
1475
- id: string;
1476
- label: string;
1477
- disabled?: boolean;
1478
- }
1479
- interface CheckboxInputProps<TFieldValues extends FieldValues = FieldValues> {
1480
- control?: Control<TFieldValues>;
1481
- name: FieldPath<TFieldValues> | string;
1482
- label?: string;
1483
- description?: string;
1484
- helperText?: string;
1485
- required?: boolean;
1486
- disabled?: boolean;
1487
- items?: CheckboxItem[];
1488
- value?: string[];
1489
- onChange?: (values: string[]) => void;
1490
- onValueChange?: (values: string[]) => void;
1491
- className?: string;
1492
- labelClassName?: string;
1493
- checkboxClassName?: string;
1494
- itemClassName?: string;
1495
- itemLabelClassName?: string;
1496
- }
1497
- /**
1498
- * CheckboxInput - Checkbox group with react-hook-form integration
1499
- *
1500
- * Features:
1501
- * - Multiple checkbox items
1502
- * - Array value support
1503
- * - Can be used standalone
1504
- *
1505
- * @example
1506
- * ```tsx
1507
- * <CheckboxInput
1508
- * control={form.control}
1509
- * name="features"
1510
- * label="Features"
1511
- * items={[
1512
- * { id: "wifi", label: "WiFi" },
1513
- * { id: "parking", label: "Parking" },
1514
- * { id: "pool", label: "Pool" },
1515
- * ]}
1516
- * />
1517
- * ```
1518
- */
1519
- 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;
1520
-
1521
- interface RadioChoice {
1522
- value: string;
1523
- label: string;
1524
- disabled?: boolean;
1525
- }
1526
- interface RadioInputProps<TFieldValues extends FieldValues = FieldValues> {
1527
- control?: Control<TFieldValues>;
1528
- name: FieldPath<TFieldValues> | string;
1529
- label?: string;
1530
- description?: string;
1531
- helperText?: string;
1532
- required?: boolean;
1533
- disabled?: boolean;
1534
- choices?: RadioChoice[];
1535
- items?: RadioChoice[];
1536
- orientation?: "vertical" | "horizontal";
1537
- value?: string;
1538
- onChange?: (value: string) => void;
1539
- onValueChange?: (value: string) => void;
1540
- className?: string;
1541
- labelClassName?: string;
1542
- radioGroupClassName?: string;
1543
- radioItemClassName?: string;
1544
- radioLabelClassName?: string;
1545
- }
1546
- /**
1547
- * RadioInput - Radio group with react-hook-form integration
1548
- *
1549
- * @example
1550
- * ```tsx
1551
- * <RadioInput
1552
- * control={form.control}
1553
- * name="plan"
1554
- * label="Select Plan"
1555
- * choices={[
1556
- * { value: "free", label: "Free" },
1557
- * { value: "pro", label: "Pro" },
1558
- * { value: "enterprise", label: "Enterprise" },
1559
- * ]}
1560
- * orientation="horizontal"
1561
- * />
1562
- * ```
1563
- */
1564
- 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;
1565
-
1566
- interface SwitchInputProps<TFieldValues extends FieldValues = FieldValues> {
1567
- control?: Control<TFieldValues>;
1568
- name: FieldPath<TFieldValues> | string;
1569
- label?: string;
1570
- description?: string;
1571
- helperText?: string;
1572
- required?: boolean;
1573
- disabled?: boolean;
1574
- orientation?: "horizontal" | "vertical";
1575
- value?: boolean;
1576
- onChange?: (value: boolean) => void;
1577
- onValueChange?: (value: boolean) => void;
1578
- className?: string;
1579
- labelClassName?: string;
1580
- switchClassName?: string;
1581
- }
1582
- /**
1583
- * SwitchInput - Toggle switch with react-hook-form integration
1584
- *
1585
- * @example
1586
- * ```tsx
1587
- * <SwitchInput
1588
- * control={form.control}
1589
- * name="notifications"
1590
- * label="Enable notifications"
1591
- * description="Receive email updates"
1592
- * />
1593
- * ```
1594
- */
1595
- 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;
1596
-
1597
- type DateValue = Date | string | null | undefined;
1598
- interface DateInputProps<TFieldValues extends FieldValues = FieldValues> {
1599
- control?: Control<TFieldValues>;
1600
- name: FieldPath<TFieldValues> | string;
1601
- label?: string;
1602
- placeholder?: string;
1603
- description?: string;
1604
- helperText?: string;
1605
- required?: boolean;
1606
- disabled?: boolean;
1607
- minDate?: DateValue;
1608
- maxDate?: DateValue;
1609
- value?: DateValue;
1610
- onChange?: (date: Date | undefined) => void;
1611
- onValueChange?: (date: Date | undefined) => void;
1612
- className?: string;
1613
- labelClassName?: string;
1614
- inputClassName?: string;
1615
- Icon?: React.ComponentType<{
1616
- className?: string;
1617
- }>;
1618
- allowClear?: boolean;
1619
- }
1620
- /**
1621
- * DateInput - Date picker with react-hook-form integration
1622
- *
1623
- * @example
1624
- * ```tsx
1625
- * <DateInput
1626
- * control={form.control}
1627
- * name="birthDate"
1628
- * label="Date of Birth"
1629
- * minDate="1900-01-01"
1630
- * maxDate={new Date()}
1631
- * />
1632
- * ```
1633
- */
1634
- 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;
1635
-
1636
- interface TagInputProps {
1637
- control?: Control<FieldValues>;
1638
- name: string;
1639
- label?: string;
1640
- placeholder?: string;
1641
- description?: string;
1642
- helperText?: string;
1643
- required?: boolean;
1644
- disabled?: boolean;
1645
- maxTags?: number;
1646
- allowDuplicates?: boolean;
1647
- delimiter?: string;
1648
- suggestions?: string[];
1649
- suggestionLimit?: number;
1650
- value?: string[];
1651
- onChange?: (tags: string[]) => void;
1652
- onValueChange?: (tags: string[]) => void;
1653
- validateTag?: (tag: string) => boolean;
1654
- transformTag?: (tag: string) => string;
1655
- formatTag?: (tag: string) => string;
1656
- className?: string;
1657
- labelClassName?: string;
1658
- inputClassName?: string;
1659
- [key: string]: unknown;
1660
- }
1661
- /**
1662
- * TagInput - Tag/chip input with react-hook-form integration
1663
- *
1664
- * @example
1665
- * ```tsx
1666
- * <TagInput
1667
- * control={form.control}
1668
- * name="tags"
1669
- * label="Tags"
1670
- * placeholder="Add tags..."
1671
- * maxTags={10}
1672
- * suggestions={["react", "typescript", "nextjs"]}
1673
- * />
1674
- * ```
1675
- */
1676
- 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;
1677
-
1678
- interface TagChoiceItem {
1679
- value: string;
1680
- label: string;
1681
- disabled?: boolean;
1682
- }
1683
- interface TagChoiceInputProps<TFieldValues extends FieldValues = FieldValues> {
1684
- control?: Control<TFieldValues>;
1685
- name: FieldPath<TFieldValues> | string;
1686
- label?: string;
1687
- placeholder?: string;
1688
- description?: string;
1689
- helperText?: string;
1690
- required?: boolean;
1691
- disabled?: boolean;
1692
- items?: TagChoiceItem[];
1693
- value?: string[];
1694
- onValueChange?: (values: string[]) => void;
1695
- className?: string;
1696
- }
1697
- /**
1698
- * TagChoiceInput - Multi-select with tags display
1699
- *
1700
- * @example
1701
- * ```tsx
1702
- * <TagChoiceInput
1703
- * control={form.control}
1704
- * name="categories"
1705
- * label="Categories"
1706
- * items={[
1707
- * { value: "tech", label: "Technology" },
1708
- * { value: "design", label: "Design" },
1709
- * ]}
1710
- * />
1711
- * ```
1712
- */
1713
- 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;
1714
- declare namespace TagChoiceInput {
1715
- var displayName: string;
1716
- }
1717
-
1718
- interface ComboboxOption {
1719
- value: string;
1720
- label: string;
1721
- disabled?: boolean;
1722
- }
1723
- interface ComboboxInputProps<TFieldValues extends FieldValues = FieldValues> {
1724
- control?: Control<TFieldValues>;
1725
- name: FieldPath<TFieldValues> | string;
1726
- label?: string;
1727
- placeholder?: string;
1728
- emptyText?: string;
1729
- description?: string;
1730
- helperText?: string;
1731
- required?: boolean;
1732
- disabled?: boolean;
1733
- items?: ComboboxOption[];
1734
- value?: string;
1735
- onChange?: (value: string) => void;
1736
- onValueChange?: (value: string) => void;
1737
- className?: string;
1738
- labelClassName?: string;
1739
- inputClassName?: string;
1740
- renderOption?: (option: ComboboxOption) => ReactNode;
1741
- }
1742
- /**
1743
- * ComboboxInput - Searchable select with react-hook-form integration using Base UI
1744
- *
1745
- * Features:
1746
- * - Works with react-hook-form Controller
1747
- * - Supports Base UI Combobox primitives
1748
- * - Custom option rendering
1749
- * - Can be used standalone without form
1750
- *
1751
- * @example
1752
- * ```tsx
1753
- * // With react-hook-form
1754
- * <ComboboxInput
1755
- * control={form.control}
1756
- * name="country"
1757
- * label="Country"
1758
- * items={[
1759
- * { value: "us", label: "United States" },
1760
- * { value: "uk", label: "United Kingdom" },
1761
- * ]}
1762
- * placeholder="Select a country..."
1763
- * />
1764
- *
1765
- * // Standalone
1766
- * <ComboboxInput
1767
- * name="country"
1768
- * label="Country"
1769
- * items={items}
1770
- * value={selectedCountry}
1771
- * onValueChange={setSelectedCountry}
1772
- * />
1773
- * ```
1774
- */
1775
- 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;
1776
-
1777
- interface SlugFieldProps {
1778
- control?: Control<FieldValues>;
1779
- name: string;
1780
- label?: string;
1781
- placeholder?: string;
1782
- description?: string;
1783
- helperText?: string;
1784
- required?: boolean;
1785
- disabled?: boolean;
1786
- sourceValue?: string;
1787
- onGenerate?: (sourceValue: string) => string;
1788
- value?: string;
1789
- onChange?: (e: {
1790
- target: {
1791
- value: string;
1792
- };
1793
- }) => void;
1794
- onValueChange?: (value: string) => void;
1795
- className?: string;
1796
- labelClassName?: string;
1797
- inputClassName?: string;
1798
- error?: FieldError;
1799
- ref?: Ref<HTMLInputElement>;
1800
- }
1801
- /**
1802
- * Generates a URL-friendly slug from a string
1803
- */
1804
- declare function generateSlug(text: string | undefined): string;
1805
- /**
1806
- * SlugField - URL slug input with auto-generation
1807
- *
1808
- * @example
1809
- * ```tsx
1810
- * <SlugField
1811
- * control={form.control}
1812
- * name="slug"
1813
- * label="URL Slug"
1814
- * sourceValue={form.watch("title")}
1815
- * description="This will be used in the page URL"
1816
- * required
1817
- * />
1818
- * ```
1819
- */
1820
- 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;
1821
-
1822
- interface FormErrorSummaryProps {
1823
- /** Form errors object from react-hook-form */
1824
- errors?: Record<string, unknown>;
1825
- /** Additional CSS classes */
1826
- className?: string;
1827
- /** Custom title text */
1828
- title?: string;
1829
- }
1830
- /**
1831
- * FormErrorSummary - Displays a summary of form validation errors
1832
- *
1833
- * Takes react-hook-form errors object and displays all errors in a list.
1834
- * Automatically flattens nested errors for complex form structures.
1835
- */
1836
- declare function FormErrorSummary({ errors, className, title, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
1837
-
1838
- interface DateRange {
1839
- from?: Date;
1840
- to?: Date;
1841
- }
1842
- interface DateRangeFilterProps {
1843
- /** Initial start date */
1844
- initialStartDate?: Date;
1845
- /** Initial end date */
1846
- initialEndDate?: Date;
1847
- /** Callback when filter is applied (receives startDate, endDate) */
1848
- onFilter?: (startDate: Date | null, endDate: Date | null) => void;
1849
- /** Callback when filter is cleared */
1850
- onClear?: () => void;
1851
- /** Additional classes for the container */
1852
- className?: string;
1853
- /** Additional classes for trigger button */
1854
- buttonClassName?: string;
1855
- /** Placeholder text when no date selected */
1856
- placeholder?: string;
1857
- /** Minimum selectable date */
1858
- minDate?: Date;
1859
- /** Maximum selectable date */
1860
- maxDate?: Date;
1861
- /** Align popover to the right */
1862
- alignRight?: boolean;
1863
- /** Number of months to display */
1864
- numberOfMonths?: number;
1865
- }
1866
- /**
1867
- * DateRangeFilter - A date range picker for filtering
1868
- *
1869
- * Features:
1870
- * - Only applies filter when explicitly submitted
1871
- * - Supports clearing filters
1872
- * - Uses Popover to show calendar on click
1873
- * - Configurable min/max dates
1874
- */
1875
- declare function DateRangeFilter({ initialStartDate, initialEndDate, onFilter, onClear, className, buttonClassName, placeholder, minDate, maxDate, alignRight, numberOfMonths, }: DateRangeFilterProps): react_jsx_runtime.JSX.Element;
1876
-
1877
- interface DateRangeValue {
1878
- from?: Date | string;
1879
- to?: Date | string;
1880
- }
1881
- interface DateRangeInputProps<TFieldValues extends FieldValues = FieldValues> {
1882
- /** React Hook Form control */
1883
- control?: Control<TFieldValues>;
1884
- /** Field name for form registration */
1885
- name: FieldPath<TFieldValues> | string;
1886
- /** Field label */
1887
- label?: string;
1888
- /** Description text below the input */
1889
- description?: string;
1890
- /** Placeholder text */
1891
- placeholder?: string;
1892
- /** Whether the field is required */
1893
- required?: boolean;
1894
- /** Whether the field is disabled */
1895
- disabled?: boolean;
1896
- /** Additional className for the wrapper */
1897
- className?: string;
1898
- /** Additional className for the label */
1899
- labelClassName?: string;
1900
- /** Additional className for the button */
1901
- buttonClassName?: string;
1902
- /** Additional className for the calendar popover */
1903
- calendarClassName?: string;
1904
- /** Minimum selectable date */
1905
- minDate?: Date;
1906
- /** Maximum selectable date */
1907
- maxDate?: Date;
1908
- /** Array of disabled dates */
1909
- disabledDates?: Date[];
1910
- /** Array of disabled days (0-6, where 0 is Sunday) */
1911
- disabledDays?: number[];
1912
- /** Callback when value changes */
1913
- onValueChange?: (range: DateRangeValue) => void;
1914
- /** Custom validation function for date range */
1915
- validateDateRange?: (range: DateRangeValue) => boolean;
1916
- /** Function to clear form errors */
1917
- clearErrors?: (name: string) => void;
1918
- /** Custom description component */
1919
- descriptionComponent?: ReactNode;
1920
- /** Whether to show clear button */
1921
- allowClear?: boolean;
1922
- /** Whether to show badge with date range */
1923
- showBadge?: boolean;
1924
- /** Custom icon component */
1925
- Icon?: LucideIcon;
1926
- /** Transform functions for input/output */
1927
- transform?: {
1928
- input: (value: any) => DateRangeValue;
1929
- output: (range: DateRangeValue) => any;
1930
- };
1931
- }
1932
- /**
1933
- * DateRangeInput - Date range picker with react-hook-form integration
1934
- *
1935
- * @example
1936
- * ```tsx
1937
- * <DateRangeInput
1938
- * control={control}
1939
- * name="dateRange"
1940
- * label="Select Dates"
1941
- * placeholder="Pick a date range"
1942
- * />
1943
- * ```
1944
- */
1945
- 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;
1946
-
1947
- interface CalendarEvent {
1948
- id: string;
1949
- date: Date | string;
1950
- [key: string]: any;
1951
- }
1952
- interface EventCalendarProps<T extends CalendarEvent> {
1953
- /** Events to display on the calendar */
1954
- events?: T[];
1955
- /** Currently selected date */
1956
- selectedDate?: Date | null;
1957
- /** Callback when a date is selected */
1958
- onDateSelect?: (date: Date, events: T[]) => void;
1959
- /** Callback when month changes */
1960
- onMonthChange?: (date: Date) => void;
1961
- /** Initial month to display */
1962
- initialMonth?: Date;
1963
- /** Custom render for day cell content */
1964
- renderDayContent?: (date: Date, events: T[], isSelected: boolean) => ReactNode;
1965
- /** Custom render for event indicators */
1966
- renderEventIndicators?: (events: T[]) => ReactNode;
1967
- /** Get events for a specific date (custom filtering) */
1968
- getEventsForDate?: (date: Date, events: T[]) => T[];
1969
- /** Additional class names */
1970
- className?: string;
1971
- /** Header content (left side) */
1972
- headerLeft?: ReactNode;
1973
- /** Header content (right side, before navigation) */
1974
- headerRight?: ReactNode;
1975
- /** Minimum cell height */
1976
- minCellHeight?: string;
1977
- /** Show week numbers */
1978
- showWeekNumbers?: boolean;
1979
- /** Loading state */
1980
- isLoading?: boolean;
1981
- }
1982
- /**
1983
- * EventCalendar - A reusable calendar component for displaying events
1984
- *
1985
- * Can be used for attendance tracking, scheduling, etc.
1986
- */
1987
- 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;
1988
- /**
1989
- * CalendarDayDetail - Side panel component for showing selected day details
1990
- */
1991
- interface CalendarDayDetailProps {
1992
- date: Date | null;
1993
- title?: string;
1994
- emptyMessage?: string;
1995
- children?: ReactNode;
1996
- className?: string;
1997
- }
1998
- declare function CalendarDayDetail({ date, title, emptyMessage, children, className, }: CalendarDayDetailProps): react_jsx_runtime.JSX.Element;
1999
- /**
2000
- * CalendarWithDetail - Calendar with integrated detail panel
2001
- */
2002
- interface CalendarWithDetailProps<T extends CalendarEvent> extends Omit<EventCalendarProps<T>, "onDateSelect"> {
2003
- /** Render detail panel content */
2004
- renderDetail?: (date: Date, events: T[]) => ReactNode;
2005
- /** Detail panel title when no date selected */
2006
- detailTitle?: string;
2007
- /** Detail panel empty message */
2008
- detailEmptyMessage?: string;
2009
- /** Layout direction */
2010
- layout?: "horizontal" | "vertical";
2011
- /** Detail panel position */
2012
- detailPosition?: "left" | "right" | "top" | "bottom";
2013
- /** Callback when date is selected */
2014
- onDateSelect?: (date: Date, events: T[]) => void;
2015
- }
2016
- declare function CalendarWithDetail<T extends CalendarEvent>({ renderDetail, detailTitle, detailEmptyMessage, layout, detailPosition, onDateSelect, ...calendarProps }: CalendarWithDetailProps<T>): react_jsx_runtime.JSX.Element;
2017
-
2018
- /** Available entrance animation types */
2019
- type Animation = "fadeIn" | "fadeInUp" | "scaleIn" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
2020
- /** Slide direction for SlideIn component */
2021
- type SlideDirection = "left" | "right" | "up" | "down";
2022
- /** Options for the useInView hook */
2023
- interface UseInViewOptions {
2024
- /** IntersectionObserver rootMargin (default: "0px") */
2025
- margin?: string;
2026
- /** Trigger only once (default: true) */
2027
- once?: boolean;
2028
- /** Enable/disable observation (default: true) */
2029
- enabled?: boolean;
2030
- }
2031
- /** Shared base props for animation components */
2032
- interface AnimateBaseProps {
2033
- children?: ReactNode;
2034
- /** Delay in ms before animation starts */
2035
- delay?: number;
2036
- /** Animation duration in ms */
2037
- duration?: number;
2038
- /** Only animate when element scrolls into viewport */
2039
- inView?: boolean;
2040
- /** IntersectionObserver rootMargin for inView trigger */
2041
- inViewMargin?: string;
2042
- /** Fire animation only once (default: true) */
2043
- once?: boolean;
2044
- /** Disable animation entirely — renders children immediately */
2045
- disabled?: boolean;
2046
- className?: string;
2047
- /** HTML element to render as (default: "div") */
2048
- as?: ElementType;
2049
- }
2050
- interface SlideInProps extends AnimateBaseProps {
2051
- /** Direction to slide from */
2052
- direction?: SlideDirection;
2053
- }
2054
- interface StaggerChildrenProps {
2055
- children?: ReactNode;
2056
- /** Animation type for each child */
2057
- animation?: Animation;
2058
- /** Delay between each child in ms */
2059
- staggerDelay?: number;
2060
- /** Initial delay before first child animates */
2061
- initialDelay?: number;
2062
- /** Duration per child animation */
2063
- duration?: number;
2064
- inView?: boolean;
2065
- inViewMargin?: string;
2066
- once?: boolean;
2067
- disabled?: boolean;
2068
- className?: string;
2069
- /** Extra classes applied to each child wrapper div */
2070
- childClassName?: string;
2071
- as?: ElementType;
2072
- }
2073
- interface AnimatedTextProps {
2074
- /** The text string to animate */
2075
- text: string;
2076
- as?: ElementType;
2077
- animation?: Animation;
2078
- /** Split text by word or character */
2079
- splitBy?: "word" | "character";
2080
- /** Delay between each segment in ms */
2081
- staggerDelay?: number;
2082
- delay?: number;
2083
- duration?: number;
2084
- inView?: boolean;
2085
- inViewMargin?: string;
2086
- once?: boolean;
2087
- disabled?: boolean;
2088
- className?: string;
2089
- /** Extra classes on each animated text segment */
2090
- segmentClassName?: string;
2091
- }
2092
- interface AnimatedCounterProps {
2093
- /** Start value (default: 0) */
2094
- from?: number;
2095
- /** Target value to count to */
2096
- to: number;
2097
- /** Count-up duration in ms (default: 2000) */
2098
- duration?: number;
2099
- /** Delay before counting starts in ms */
2100
- delay?: number;
2101
- /** Intl.NumberFormat locale for number formatting (e.g. "en-US") */
2102
- locale?: string;
2103
- /** Text rendered before the number */
2104
- prefix?: string;
2105
- /** Text rendered after the number */
2106
- suffix?: string;
2107
- /** Decimal places (default: 0) */
2108
- decimals?: number;
2109
- /** Custom number formatter — overrides locale/decimals */
2110
- formatter?: (value: number) => string;
2111
- inView?: boolean;
2112
- inViewMargin?: string;
2113
- once?: boolean;
2114
- disabled?: boolean;
2115
- className?: string;
2116
- as?: ElementType;
2117
- }
2118
- /**
2119
- * useInView — observe when an element enters the viewport.
2120
- *
2121
- * @example
2122
- * ```tsx
2123
- * const ref = useRef<HTMLDivElement>(null);
2124
- * const isInView = useInView(ref, { once: true, margin: "-100px" });
2125
- * return <div ref={ref}>{isInView ? "Visible!" : "Hidden"}</div>;
2126
- * ```
2127
- */
2128
- declare function useInView(ref: RefObject<Element | null>, options?: UseInViewOptions): boolean;
2129
- /** Fade in with opacity transition */
2130
- declare function FadeIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2131
- /** Fade in with upward motion */
2132
- declare function FadeInUp(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2133
- /** Scale up into view */
2134
- declare function ScaleIn(props: AnimateBaseProps): react_jsx_runtime.JSX.Element;
2135
- /** Slide in from a specified direction */
2136
- declare function SlideIn({ direction, ...props }: SlideInProps): react_jsx_runtime.JSX.Element;
2137
- declare function StaggerChildren({ children, animation, staggerDelay, initialDelay, duration, inView, inViewMargin, once, disabled, className, childClassName, as, }: StaggerChildrenProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
2138
- declare function AnimatedText({ text, as, animation, splitBy, staggerDelay, delay, duration, inView, inViewMargin, once, disabled, className, segmentClassName, }: AnimatedTextProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
2139
- 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>>;
2140
-
2141
- 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 };