@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.
- package/LICENSE +21 -0
- package/README.md +149 -62
- package/dist/api-pagination-CJ0vR_w6.d.mts +34 -0
- package/dist/api-pagination-DBTE0yk4.mjs +190 -0
- package/dist/chunk-DQk6qfdC.mjs +18 -0
- package/dist/client/calendar.d.mts +105 -0
- package/dist/client/calendar.mjs +202 -0
- package/dist/client/core.d.mts +1614 -0
- package/dist/client/core.mjs +2779 -0
- package/dist/client/error.d.mts +125 -0
- package/dist/client/error.mjs +166 -0
- package/dist/client/hooks.d.mts +162 -0
- package/dist/client/hooks.mjs +447 -0
- package/dist/client/table.d.mts +84 -0
- package/dist/client/table.mjs +373 -0
- package/dist/client/theme.d.mts +6 -0
- package/dist/client/theme.mjs +65 -0
- package/dist/command.d.mts +134 -0
- package/dist/command.mjs +132 -0
- package/dist/compact.d.mts +359 -0
- package/dist/compact.mjs +892 -0
- package/dist/dashboard.d.mts +778 -0
- package/dist/dashboard.mjs +1617 -0
- package/dist/filter-utils-DqMmy_v-.mjs +72 -0
- package/dist/filter-utils-IZ0GtuPo.d.mts +40 -0
- package/dist/forms.d.mts +1549 -0
- package/dist/forms.mjs +3740 -0
- package/dist/index.d.mts +296 -0
- package/dist/index.mjs +432 -0
- package/dist/layouts.d.mts +215 -0
- package/dist/layouts.mjs +460 -0
- package/dist/search-context-DR7DBs7S.mjs +19 -0
- package/dist/search.d.mts +254 -0
- package/dist/search.mjs +523 -0
- package/dist/sheet-wrapper-CWNCvYMD.mjs +211 -0
- package/dist/use-base-search-BGgWnWaF.d.mts +35 -0
- package/dist/use-debounce-xmZucz5e.mjs +53 -0
- package/dist/use-keyboard-shortcut-Bl6YM5Q7.mjs +82 -0
- package/dist/use-keyboard-shortcut-_mRCh3QO.d.mts +24 -0
- package/dist/use-media-query-BnVNIKT4.mjs +17 -0
- package/dist/use-mobile-BX3SQVo2.mjs +20 -0
- package/dist/use-scroll-detection-CsgsQYvy.mjs +43 -0
- package/dist/utils-CDue7cEt.d.mts +6 -0
- package/dist/utils-DQ5SCVoW.mjs +10 -0
- package/package.json +85 -45
- package/styles.css +2 -2
- package/dist/chunk-GUHK2DTW.js +0 -15
- package/dist/chunk-GUHK2DTW.js.map +0 -1
- package/dist/chunk-H3NFL3GJ.js +0 -57
- package/dist/chunk-H3NFL3GJ.js.map +0 -1
- package/dist/chunk-J2YRTQE4.js +0 -293
- package/dist/chunk-J2YRTQE4.js.map +0 -1
- package/dist/compact.d.ts +0 -217
- package/dist/compact.js +0 -986
- package/dist/compact.js.map +0 -1
- package/dist/dashboard.d.ts +0 -386
- package/dist/dashboard.js +0 -1032
- package/dist/dashboard.js.map +0 -1
- package/dist/index.d.ts +0 -2141
- package/dist/index.js +0 -6460
- package/dist/index.js.map +0 -1
- package/dist/layout.d.ts +0 -25
- package/dist/layout.js +0 -4
- package/dist/layout.js.map +0 -1
- package/dist/search.d.ts +0 -172
- package/dist/search.js +0 -341
- package/dist/search.js.map +0 -1
- package/dist/use-base-search-AS5Z3SAy.d.ts +0 -64
- 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 };
|