@cruxkit/core 0.0.1
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 +964 -0
- package/dist/index.cjs +211 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +828 -0
- package/dist/index.d.ts +828 -0
- package/dist/index.js +211 -0
- package/dist/index.js.map +1 -0
- package/package.json +58 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,828 @@
|
|
|
1
|
+
import * as _minejs_signals from '@minejs/signals';
|
|
2
|
+
import { JSXElement } from '@minejs/jsx';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Merge class names, filtering out falsy values
|
|
6
|
+
*/
|
|
7
|
+
declare function cn(...classes: (string | undefined | null | false | 0)[]): string;
|
|
8
|
+
/**
|
|
9
|
+
* Conditionally apply classes based on variants
|
|
10
|
+
*/
|
|
11
|
+
declare function clsx(base: string, variants?: Record<string, string | boolean | undefined>): string;
|
|
12
|
+
/**
|
|
13
|
+
* Create a portal container and mount content
|
|
14
|
+
*/
|
|
15
|
+
declare function createPortal(children: JSXElement, container?: HTMLElement): void;
|
|
16
|
+
/**
|
|
17
|
+
* Portal component for rendering outside the component tree
|
|
18
|
+
*/
|
|
19
|
+
declare function Portal(props: {
|
|
20
|
+
children: JSXElement;
|
|
21
|
+
container?: HTMLElement;
|
|
22
|
+
}): null;
|
|
23
|
+
/**
|
|
24
|
+
* Focus trap - keep focus within a container
|
|
25
|
+
*/
|
|
26
|
+
declare function useFocusTrap(containerRef: {
|
|
27
|
+
current: HTMLElement | null;
|
|
28
|
+
}): void;
|
|
29
|
+
/**
|
|
30
|
+
* Return focus to previously focused element
|
|
31
|
+
*/
|
|
32
|
+
declare function useReturnFocus(): void;
|
|
33
|
+
/**
|
|
34
|
+
* Detect clicks outside an element
|
|
35
|
+
*/
|
|
36
|
+
declare function useOutsideClick(ref: {
|
|
37
|
+
current: HTMLElement | null;
|
|
38
|
+
}, callback: (e: MouseEvent) => void): void;
|
|
39
|
+
/**
|
|
40
|
+
* Detect escape key press
|
|
41
|
+
*/
|
|
42
|
+
declare function useEscapeKey(callback: () => void): void;
|
|
43
|
+
type Theme = 'light' | 'dark';
|
|
44
|
+
/**
|
|
45
|
+
* Manage theme state and persistence
|
|
46
|
+
*/
|
|
47
|
+
declare function useTheme(): {
|
|
48
|
+
theme: _minejs_signals.Signal<Theme>;
|
|
49
|
+
setTheme: (value: Theme) => void;
|
|
50
|
+
toggle: () => void;
|
|
51
|
+
isDark: () => boolean;
|
|
52
|
+
isLight: () => boolean;
|
|
53
|
+
};
|
|
54
|
+
type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
55
|
+
/**
|
|
56
|
+
* Get current breakpoint
|
|
57
|
+
*/
|
|
58
|
+
declare function useBreakpoint(): {
|
|
59
|
+
current: _minejs_signals.Signal<Breakpoint>;
|
|
60
|
+
isXs: () => boolean;
|
|
61
|
+
isSm: () => boolean;
|
|
62
|
+
isMd: () => boolean;
|
|
63
|
+
isLg: () => boolean;
|
|
64
|
+
isXl: () => boolean;
|
|
65
|
+
is2Xl: () => boolean;
|
|
66
|
+
isAbove: (bp: Breakpoint) => boolean;
|
|
67
|
+
isBelow: (bp: Breakpoint) => boolean;
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* Listen to media query changes
|
|
71
|
+
*/
|
|
72
|
+
declare function useMediaQuery(query: string): _minejs_signals.Signal<boolean>;
|
|
73
|
+
/**
|
|
74
|
+
* Lock body scroll (for modals, drawers)
|
|
75
|
+
*/
|
|
76
|
+
declare function useScrollLock(locked?: boolean): void;
|
|
77
|
+
/**
|
|
78
|
+
* Debounce a function
|
|
79
|
+
*/
|
|
80
|
+
declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;
|
|
81
|
+
/**
|
|
82
|
+
* Throttle a function
|
|
83
|
+
*/
|
|
84
|
+
declare function throttle<T extends (...args: any[]) => any>(func: T, limit: number): (...args: Parameters<T>) => void;
|
|
85
|
+
/**
|
|
86
|
+
* Generate a random ID for accessibility
|
|
87
|
+
*/
|
|
88
|
+
declare function useId(prefix?: string): string;
|
|
89
|
+
/**
|
|
90
|
+
* Copy text to clipboard
|
|
91
|
+
*/
|
|
92
|
+
declare function copyToClipboard(text: string): Promise<boolean>;
|
|
93
|
+
/**
|
|
94
|
+
* Hook for clipboard operations
|
|
95
|
+
*/
|
|
96
|
+
declare function useClipboard(timeout?: number): {
|
|
97
|
+
copied: _minejs_signals.Signal<boolean>;
|
|
98
|
+
copy: (text: string) => Promise<boolean>;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* Get current text direction
|
|
102
|
+
*/
|
|
103
|
+
declare function useDirection(): {
|
|
104
|
+
dir: _minejs_signals.Signal<"ltr" | "rtl">;
|
|
105
|
+
isRtl: () => boolean;
|
|
106
|
+
isLtr: () => boolean;
|
|
107
|
+
toggle: () => void;
|
|
108
|
+
};
|
|
109
|
+
|
|
110
|
+
interface TextProps {
|
|
111
|
+
as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em';
|
|
112
|
+
size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
113
|
+
weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
114
|
+
align?: 'start' | 'center' | 'end' | 'justify';
|
|
115
|
+
color?: '1' | '2' | '3' | '4' | 'inverse' | 'brand' | 'success' | 'warning' | 'error';
|
|
116
|
+
italic?: boolean;
|
|
117
|
+
underline?: boolean;
|
|
118
|
+
lineThrough?: boolean;
|
|
119
|
+
truncate?: boolean;
|
|
120
|
+
noWrap?: boolean;
|
|
121
|
+
display?: 'block' | 'inline' | 'inline-block';
|
|
122
|
+
children?: JSXElement | string | number;
|
|
123
|
+
class?: string;
|
|
124
|
+
id?: string;
|
|
125
|
+
title?: string;
|
|
126
|
+
'aria-label'?: string;
|
|
127
|
+
role?: string;
|
|
128
|
+
}
|
|
129
|
+
declare function Text(props: TextProps): JSXElement;
|
|
130
|
+
|
|
131
|
+
interface ButtonProps {
|
|
132
|
+
variant?: 'solid' | 'outline' | 'ghost' | 'link';
|
|
133
|
+
color?: 'brand' | 'success' | 'warning' | 'error' | 'neutral';
|
|
134
|
+
size?: 'sm' | 'md' | 'lg';
|
|
135
|
+
disabled?: boolean;
|
|
136
|
+
loading?: boolean;
|
|
137
|
+
active?: boolean;
|
|
138
|
+
fullWidth?: boolean;
|
|
139
|
+
leftIcon?: JSXElement;
|
|
140
|
+
rightIcon?: JSXElement;
|
|
141
|
+
children?: JSXElement | string;
|
|
142
|
+
onClick?: (e: MouseEvent) => void;
|
|
143
|
+
onPointerDown?: (e: PointerEvent) => void;
|
|
144
|
+
onPointerUp?: (e: PointerEvent) => void;
|
|
145
|
+
type?: 'button' | 'submit' | 'reset';
|
|
146
|
+
class?: string;
|
|
147
|
+
id?: string;
|
|
148
|
+
name?: string;
|
|
149
|
+
value?: string;
|
|
150
|
+
form?: string;
|
|
151
|
+
'aria-label'?: string;
|
|
152
|
+
'aria-describedby'?: string;
|
|
153
|
+
'aria-pressed'?: boolean;
|
|
154
|
+
'aria-expanded'?: boolean;
|
|
155
|
+
role?: string;
|
|
156
|
+
}
|
|
157
|
+
interface ButtonGroupProps {
|
|
158
|
+
children?: JSXElement | JSXElement[];
|
|
159
|
+
attached?: boolean;
|
|
160
|
+
spacing?: 0 | 1 | 2 | 3 | 4;
|
|
161
|
+
class?: string;
|
|
162
|
+
}
|
|
163
|
+
interface IconButtonProps extends Omit<ButtonProps, 'leftIcon' | 'rightIcon' | 'children'> {
|
|
164
|
+
icon: JSXElement;
|
|
165
|
+
'aria-label': string;
|
|
166
|
+
}
|
|
167
|
+
declare function Button(props: ButtonProps): JSXElement;
|
|
168
|
+
declare function IconButton(props: IconButtonProps): JSXElement;
|
|
169
|
+
declare function ButtonGroup(props: ButtonGroupProps): JSXElement;
|
|
170
|
+
|
|
171
|
+
interface InputProps {
|
|
172
|
+
variant?: 'outline' | 'filled' | 'flushed';
|
|
173
|
+
size?: 'sm' | 'md' | 'lg';
|
|
174
|
+
disabled?: boolean;
|
|
175
|
+
readOnly?: boolean;
|
|
176
|
+
required?: boolean;
|
|
177
|
+
invalid?: boolean;
|
|
178
|
+
fullWidth?: boolean;
|
|
179
|
+
leftIcon?: JSXElement;
|
|
180
|
+
rightIcon?: JSXElement;
|
|
181
|
+
leftAddon?: JSXElement | string;
|
|
182
|
+
rightAddon?: JSXElement | string;
|
|
183
|
+
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local';
|
|
184
|
+
value?: string | number;
|
|
185
|
+
defaultValue?: string | number;
|
|
186
|
+
placeholder?: string;
|
|
187
|
+
name?: string;
|
|
188
|
+
id?: string;
|
|
189
|
+
autocomplete?: string;
|
|
190
|
+
pattern?: string;
|
|
191
|
+
min?: number | string;
|
|
192
|
+
max?: number | string;
|
|
193
|
+
step?: number | string;
|
|
194
|
+
maxLength?: number;
|
|
195
|
+
minLength?: number;
|
|
196
|
+
onInput?: (e: InputEvent) => void;
|
|
197
|
+
onChange?: (e: Event) => void;
|
|
198
|
+
onFocus?: (e: FocusEvent) => void;
|
|
199
|
+
onBlur?: (e: FocusEvent) => void;
|
|
200
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
201
|
+
onKeyUp?: (e: KeyboardEvent) => void;
|
|
202
|
+
class?: string;
|
|
203
|
+
inputClass?: string;
|
|
204
|
+
'aria-label'?: string;
|
|
205
|
+
'aria-describedby'?: string;
|
|
206
|
+
'aria-invalid'?: boolean;
|
|
207
|
+
'aria-required'?: boolean;
|
|
208
|
+
}
|
|
209
|
+
interface InputGroupProps {
|
|
210
|
+
children?: JSXElement | JSXElement[];
|
|
211
|
+
class?: string;
|
|
212
|
+
}
|
|
213
|
+
interface TextareaProps extends Omit<InputProps, 'type' | 'leftIcon' | 'rightIcon' | 'leftAddon' | 'rightAddon'> {
|
|
214
|
+
rows?: number;
|
|
215
|
+
cols?: number;
|
|
216
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
217
|
+
}
|
|
218
|
+
declare function Input(props: InputProps): JSXElement;
|
|
219
|
+
declare function InputGroup(props: InputGroupProps): JSXElement;
|
|
220
|
+
declare function Textarea(props: TextareaProps): JSXElement;
|
|
221
|
+
|
|
222
|
+
interface AvatarProps {
|
|
223
|
+
src?: string;
|
|
224
|
+
alt?: string;
|
|
225
|
+
name?: string;
|
|
226
|
+
fallback?: string;
|
|
227
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
228
|
+
rounded?: 'base' | 'full';
|
|
229
|
+
badge?: JSXElement;
|
|
230
|
+
badgePosition?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
231
|
+
class?: string;
|
|
232
|
+
onClick?: (e: MouseEvent) => void;
|
|
233
|
+
'aria-label'?: string;
|
|
234
|
+
}
|
|
235
|
+
interface AvatarGroupProps {
|
|
236
|
+
children?: JSXElement | JSXElement[];
|
|
237
|
+
max?: number;
|
|
238
|
+
spacing?: 'tight' | 'normal' | 'loose';
|
|
239
|
+
size?: AvatarProps['size'];
|
|
240
|
+
class?: string;
|
|
241
|
+
}
|
|
242
|
+
declare function Avatar(props: AvatarProps): JSXElement;
|
|
243
|
+
declare function AvatarGroup(props: AvatarGroupProps): JSXElement;
|
|
244
|
+
|
|
245
|
+
interface BadgeProps {
|
|
246
|
+
variant?: 'solid' | 'outline' | 'subtle';
|
|
247
|
+
color?: 'brand' | 'success' | 'warning' | 'error' | 'neutral';
|
|
248
|
+
size?: 'sm' | 'md' | 'lg';
|
|
249
|
+
rounded?: 'base' | 'full';
|
|
250
|
+
children?: JSXElement | string | number;
|
|
251
|
+
leftIcon?: JSXElement;
|
|
252
|
+
rightIcon?: JSXElement;
|
|
253
|
+
dot?: boolean;
|
|
254
|
+
class?: string;
|
|
255
|
+
'aria-label'?: string;
|
|
256
|
+
}
|
|
257
|
+
declare function Badge(props: BadgeProps): JSXElement;
|
|
258
|
+
|
|
259
|
+
interface SpinnerProps {
|
|
260
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
261
|
+
color?: 'current' | 'brand' | 'success' | 'warning' | 'error';
|
|
262
|
+
thickness?: 'thin' | 'normal' | 'thick';
|
|
263
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
264
|
+
class?: string;
|
|
265
|
+
'aria-label'?: string;
|
|
266
|
+
}
|
|
267
|
+
declare function Spinner(props: SpinnerProps): JSXElement;
|
|
268
|
+
|
|
269
|
+
interface SkeletonProps {
|
|
270
|
+
width?: string;
|
|
271
|
+
height?: string;
|
|
272
|
+
variant?: 'text' | 'circular' | 'rectangular';
|
|
273
|
+
animate?: boolean;
|
|
274
|
+
class?: string;
|
|
275
|
+
}
|
|
276
|
+
declare function Skeleton(props: SkeletonProps): JSXElement;
|
|
277
|
+
|
|
278
|
+
interface ContainerProps {
|
|
279
|
+
maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
280
|
+
px?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12;
|
|
281
|
+
py?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12;
|
|
282
|
+
centerContent?: boolean;
|
|
283
|
+
children?: JSXElement | JSXElement[];
|
|
284
|
+
class?: string;
|
|
285
|
+
id?: string;
|
|
286
|
+
as?: 'div' | 'main' | 'section' | 'article' | 'aside' | 'header' | 'footer';
|
|
287
|
+
}
|
|
288
|
+
declare function Container(props: ContainerProps): JSXElement;
|
|
289
|
+
|
|
290
|
+
interface StackProps {
|
|
291
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
|
|
292
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
293
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
294
|
+
reverse?: boolean;
|
|
295
|
+
wrap?: boolean;
|
|
296
|
+
children?: JSXElement | JSXElement[];
|
|
297
|
+
class?: string;
|
|
298
|
+
id?: string;
|
|
299
|
+
as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol';
|
|
300
|
+
}
|
|
301
|
+
declare function Stack(props: StackProps): JSXElement;
|
|
302
|
+
|
|
303
|
+
interface GroupProps {
|
|
304
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
|
|
305
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
306
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
307
|
+
reverse?: boolean;
|
|
308
|
+
wrap?: boolean;
|
|
309
|
+
children?: JSXElement | JSXElement[];
|
|
310
|
+
class?: string;
|
|
311
|
+
id?: string;
|
|
312
|
+
as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'ul' | 'ol';
|
|
313
|
+
}
|
|
314
|
+
declare function Group(props: GroupProps): JSXElement;
|
|
315
|
+
|
|
316
|
+
interface GridProps {
|
|
317
|
+
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
318
|
+
colsSm?: GridProps['cols'];
|
|
319
|
+
colsMd?: GridProps['cols'];
|
|
320
|
+
colsLg?: GridProps['cols'];
|
|
321
|
+
colsXl?: GridProps['cols'];
|
|
322
|
+
rows?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
323
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
|
|
324
|
+
gapX?: GridProps['gap'];
|
|
325
|
+
gapY?: GridProps['gap'];
|
|
326
|
+
align?: 'start' | 'center' | 'end' | 'stretch';
|
|
327
|
+
justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
328
|
+
flow?: 'row' | 'col' | 'dense' | 'row-dense' | 'col-dense';
|
|
329
|
+
children?: JSXElement | JSXElement[];
|
|
330
|
+
class?: string;
|
|
331
|
+
id?: string;
|
|
332
|
+
as?: 'div' | 'section' | 'article' | 'ul' | 'ol';
|
|
333
|
+
}
|
|
334
|
+
declare function Grid(props: GridProps): JSXElement;
|
|
335
|
+
|
|
336
|
+
interface SpacerProps {
|
|
337
|
+
size?: 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
|
|
338
|
+
axis?: 'x' | 'y' | 'both';
|
|
339
|
+
flex?: boolean;
|
|
340
|
+
class?: string;
|
|
341
|
+
}
|
|
342
|
+
declare function Spacer(props: SpacerProps): JSXElement;
|
|
343
|
+
|
|
344
|
+
interface DividerProps {
|
|
345
|
+
orientation?: 'horizontal' | 'vertical';
|
|
346
|
+
variant?: 'solid' | 'dashed' | 'dotted';
|
|
347
|
+
thickness?: 'thin' | 'medium' | 'thick';
|
|
348
|
+
color?: '1' | '2' | '3' | 'brand' | 'current';
|
|
349
|
+
label?: string | JSXElement;
|
|
350
|
+
labelPosition?: 'start' | 'center' | 'end';
|
|
351
|
+
spacing?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12;
|
|
352
|
+
class?: string;
|
|
353
|
+
role?: string;
|
|
354
|
+
'aria-orientation'?: 'horizontal' | 'vertical';
|
|
355
|
+
}
|
|
356
|
+
declare function Divider(props: DividerProps): JSXElement;
|
|
357
|
+
|
|
358
|
+
interface CenterProps {
|
|
359
|
+
inline?: boolean;
|
|
360
|
+
children?: JSXElement | JSXElement[];
|
|
361
|
+
class?: string;
|
|
362
|
+
id?: string;
|
|
363
|
+
as?: 'div' | 'section' | 'article';
|
|
364
|
+
}
|
|
365
|
+
declare function Center(props: CenterProps): JSXElement;
|
|
366
|
+
|
|
367
|
+
interface BoxProps {
|
|
368
|
+
children?: JSXElement | JSXElement[];
|
|
369
|
+
class?: string;
|
|
370
|
+
id?: string;
|
|
371
|
+
as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav' | 'span';
|
|
372
|
+
onClick?: (e: MouseEvent) => void;
|
|
373
|
+
role?: string;
|
|
374
|
+
'aria-label'?: string;
|
|
375
|
+
}
|
|
376
|
+
declare function Box(props: BoxProps): JSXElement;
|
|
377
|
+
|
|
378
|
+
interface AlertProps {
|
|
379
|
+
status?: 'info' | 'success' | 'warning' | 'error';
|
|
380
|
+
variant?: 'solid' | 'subtle' | 'left-accent' | 'top-accent';
|
|
381
|
+
title?: string | JSXElement;
|
|
382
|
+
description?: string | JSXElement;
|
|
383
|
+
children?: JSXElement | string;
|
|
384
|
+
icon?: JSXElement;
|
|
385
|
+
showIcon?: boolean;
|
|
386
|
+
closable?: boolean;
|
|
387
|
+
onClose?: () => void;
|
|
388
|
+
actions?: JSXElement;
|
|
389
|
+
class?: string;
|
|
390
|
+
role?: 'alert' | 'status';
|
|
391
|
+
'aria-live'?: 'polite' | 'assertive';
|
|
392
|
+
}
|
|
393
|
+
declare function Alert(props: AlertProps): JSXElement | null;
|
|
394
|
+
|
|
395
|
+
interface ToastProps {
|
|
396
|
+
status?: 'info' | 'success' | 'warning' | 'error';
|
|
397
|
+
title?: string | JSXElement;
|
|
398
|
+
description?: string | JSXElement;
|
|
399
|
+
duration?: number;
|
|
400
|
+
closable?: boolean;
|
|
401
|
+
icon?: JSXElement;
|
|
402
|
+
action?: JSXElement;
|
|
403
|
+
onClose?: () => void;
|
|
404
|
+
id?: string;
|
|
405
|
+
class?: string;
|
|
406
|
+
}
|
|
407
|
+
declare function Toast(props: ToastProps): JSXElement | null;
|
|
408
|
+
|
|
409
|
+
interface ProgressProps {
|
|
410
|
+
value?: number;
|
|
411
|
+
max?: number;
|
|
412
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
413
|
+
color?: 'brand' | 'success' | 'warning' | 'error';
|
|
414
|
+
variant?: 'linear' | 'circular';
|
|
415
|
+
label?: string | JSXElement;
|
|
416
|
+
showValue?: boolean;
|
|
417
|
+
indeterminate?: boolean;
|
|
418
|
+
striped?: boolean;
|
|
419
|
+
animated?: boolean;
|
|
420
|
+
class?: string;
|
|
421
|
+
'aria-label'?: string;
|
|
422
|
+
}
|
|
423
|
+
declare function Progress(props: ProgressProps): JSXElement;
|
|
424
|
+
|
|
425
|
+
interface NotificationProps extends Omit<AlertProps, 'variant'> {
|
|
426
|
+
position?: 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
427
|
+
duration?: number;
|
|
428
|
+
}
|
|
429
|
+
declare function Notification(props: NotificationProps): JSXElement | null;
|
|
430
|
+
|
|
431
|
+
interface ModalProps {
|
|
432
|
+
isOpen?: boolean;
|
|
433
|
+
onClose?: () => void;
|
|
434
|
+
title?: string | JSXElement;
|
|
435
|
+
description?: string | JSXElement;
|
|
436
|
+
children?: JSXElement | string;
|
|
437
|
+
actions?: JSXElement;
|
|
438
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
439
|
+
backdrop?: boolean;
|
|
440
|
+
closeOnBackdrop?: boolean;
|
|
441
|
+
class?: string;
|
|
442
|
+
role?: 'dialog' | 'alertdialog';
|
|
443
|
+
'aria-modal'?: boolean;
|
|
444
|
+
'aria-labelledby'?: string;
|
|
445
|
+
'aria-describedby'?: string;
|
|
446
|
+
}
|
|
447
|
+
declare function Modal(props: ModalProps): JSXElement | null;
|
|
448
|
+
|
|
449
|
+
interface DrawerProps {
|
|
450
|
+
isOpen?: boolean;
|
|
451
|
+
onClose?: () => void;
|
|
452
|
+
title?: string | JSXElement;
|
|
453
|
+
children?: JSXElement | string;
|
|
454
|
+
position?: 'left' | 'right' | 'top' | 'bottom';
|
|
455
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
456
|
+
backdrop?: boolean;
|
|
457
|
+
closeOnBackdrop?: boolean;
|
|
458
|
+
class?: string;
|
|
459
|
+
role?: 'dialog' | 'navigation';
|
|
460
|
+
'aria-modal'?: boolean;
|
|
461
|
+
'aria-labelledby'?: string;
|
|
462
|
+
}
|
|
463
|
+
declare function Drawer(props: DrawerProps): JSXElement | null;
|
|
464
|
+
|
|
465
|
+
interface PopoverProps {
|
|
466
|
+
trigger?: JSXElement;
|
|
467
|
+
children?: JSXElement | string;
|
|
468
|
+
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
469
|
+
isOpen?: boolean;
|
|
470
|
+
onOpenChange?: (open: boolean) => void;
|
|
471
|
+
closeOnClickOutside?: boolean;
|
|
472
|
+
closeOnEscape?: boolean;
|
|
473
|
+
class?: string;
|
|
474
|
+
role?: 'dialog' | 'tooltip';
|
|
475
|
+
'aria-label'?: string;
|
|
476
|
+
}
|
|
477
|
+
declare function Popover(props: PopoverProps): JSXElement;
|
|
478
|
+
|
|
479
|
+
interface TooltipProps {
|
|
480
|
+
content?: string | JSXElement;
|
|
481
|
+
children?: JSXElement;
|
|
482
|
+
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
483
|
+
delayShow?: number;
|
|
484
|
+
delayHide?: number;
|
|
485
|
+
class?: string;
|
|
486
|
+
contentClass?: string;
|
|
487
|
+
role?: 'tooltip';
|
|
488
|
+
'aria-label'?: string;
|
|
489
|
+
}
|
|
490
|
+
declare function Tooltip(props: TooltipProps): JSXElement;
|
|
491
|
+
|
|
492
|
+
interface DropdownMenuItemProps {
|
|
493
|
+
label: string | JSXElement;
|
|
494
|
+
onClick?: () => void;
|
|
495
|
+
disabled?: boolean;
|
|
496
|
+
variant?: 'default' | 'danger';
|
|
497
|
+
icon?: JSXElement;
|
|
498
|
+
class?: string;
|
|
499
|
+
}
|
|
500
|
+
interface DropdownMenuProps {
|
|
501
|
+
trigger?: JSXElement;
|
|
502
|
+
items: DropdownMenuItemProps[];
|
|
503
|
+
position?: 'top' | 'bottom';
|
|
504
|
+
isOpen?: boolean;
|
|
505
|
+
onOpenChange?: (open: boolean) => void;
|
|
506
|
+
closeOnSelect?: boolean;
|
|
507
|
+
closeOnClickOutside?: boolean;
|
|
508
|
+
class?: string;
|
|
509
|
+
role?: 'menu';
|
|
510
|
+
}
|
|
511
|
+
declare function DropdownMenu(props: DropdownMenuProps): JSXElement;
|
|
512
|
+
|
|
513
|
+
interface FormProps {
|
|
514
|
+
children?: JSXElement | JSXElement[];
|
|
515
|
+
onSubmit?: (e: SubmitEvent) => void;
|
|
516
|
+
onChange?: (e: Event) => void;
|
|
517
|
+
class?: string;
|
|
518
|
+
id?: string;
|
|
519
|
+
method?: 'GET' | 'POST';
|
|
520
|
+
action?: string;
|
|
521
|
+
noValidate?: boolean;
|
|
522
|
+
}
|
|
523
|
+
interface FormFieldProps {
|
|
524
|
+
label?: string | JSXElement;
|
|
525
|
+
error?: string;
|
|
526
|
+
required?: boolean;
|
|
527
|
+
hint?: string;
|
|
528
|
+
class?: string;
|
|
529
|
+
children?: JSXElement;
|
|
530
|
+
}
|
|
531
|
+
interface FormLabelProps {
|
|
532
|
+
for?: string;
|
|
533
|
+
required?: boolean;
|
|
534
|
+
children?: JSXElement | string;
|
|
535
|
+
class?: string;
|
|
536
|
+
}
|
|
537
|
+
interface FormErrorProps {
|
|
538
|
+
children?: JSXElement | string;
|
|
539
|
+
class?: string;
|
|
540
|
+
}
|
|
541
|
+
interface FormHintProps {
|
|
542
|
+
children?: JSXElement | string;
|
|
543
|
+
class?: string;
|
|
544
|
+
}
|
|
545
|
+
declare function Form(props: FormProps): JSXElement;
|
|
546
|
+
declare function FormField(props: FormFieldProps): JSXElement;
|
|
547
|
+
declare function FormLabel(props: FormLabelProps): JSXElement;
|
|
548
|
+
declare function FormError(props: FormErrorProps): JSXElement;
|
|
549
|
+
declare function FormHint(props: FormHintProps): JSXElement;
|
|
550
|
+
|
|
551
|
+
interface CheckboxProps {
|
|
552
|
+
checked?: boolean;
|
|
553
|
+
onChange?: (checked: boolean) => void;
|
|
554
|
+
label?: string | JSXElement;
|
|
555
|
+
disabled?: boolean;
|
|
556
|
+
class?: string;
|
|
557
|
+
id?: string;
|
|
558
|
+
name?: string;
|
|
559
|
+
value?: string;
|
|
560
|
+
'aria-label'?: string;
|
|
561
|
+
'aria-describedby'?: string;
|
|
562
|
+
}
|
|
563
|
+
declare function Checkbox(props: CheckboxProps): JSXElement;
|
|
564
|
+
|
|
565
|
+
interface RadioProps {
|
|
566
|
+
value: string;
|
|
567
|
+
checked?: boolean;
|
|
568
|
+
onChange?: (value: string) => void;
|
|
569
|
+
label?: string | JSXElement;
|
|
570
|
+
disabled?: boolean;
|
|
571
|
+
class?: string;
|
|
572
|
+
id?: string;
|
|
573
|
+
name?: string;
|
|
574
|
+
'aria-label'?: string;
|
|
575
|
+
'aria-describedby'?: string;
|
|
576
|
+
}
|
|
577
|
+
interface RadioGroupProps {
|
|
578
|
+
value?: string;
|
|
579
|
+
onChange?: (value: string) => void;
|
|
580
|
+
options: {
|
|
581
|
+
value: string;
|
|
582
|
+
label: string | JSXElement;
|
|
583
|
+
disabled?: boolean;
|
|
584
|
+
}[];
|
|
585
|
+
direction?: 'vertical' | 'horizontal';
|
|
586
|
+
disabled?: boolean;
|
|
587
|
+
class?: string;
|
|
588
|
+
name?: string;
|
|
589
|
+
}
|
|
590
|
+
declare function Radio(props: RadioProps): JSXElement;
|
|
591
|
+
declare function RadioGroup(props: RadioGroupProps): JSXElement;
|
|
592
|
+
|
|
593
|
+
interface SwitchProps {
|
|
594
|
+
checked?: boolean;
|
|
595
|
+
onChange?: (checked: boolean) => void;
|
|
596
|
+
label?: string | JSXElement;
|
|
597
|
+
disabled?: boolean;
|
|
598
|
+
class?: string;
|
|
599
|
+
id?: string;
|
|
600
|
+
name?: string;
|
|
601
|
+
'aria-label'?: string;
|
|
602
|
+
'aria-describedby'?: string;
|
|
603
|
+
}
|
|
604
|
+
declare function Switch(props: SwitchProps): JSXElement;
|
|
605
|
+
|
|
606
|
+
interface SelectOption {
|
|
607
|
+
value: string;
|
|
608
|
+
label: string;
|
|
609
|
+
disabled?: boolean;
|
|
610
|
+
}
|
|
611
|
+
interface SelectProps {
|
|
612
|
+
value?: string;
|
|
613
|
+
onChange?: (value: string) => void;
|
|
614
|
+
options: SelectOption[];
|
|
615
|
+
placeholder?: string;
|
|
616
|
+
disabled?: boolean;
|
|
617
|
+
class?: string;
|
|
618
|
+
id?: string;
|
|
619
|
+
name?: string;
|
|
620
|
+
'aria-label'?: string;
|
|
621
|
+
'aria-describedby'?: string;
|
|
622
|
+
}
|
|
623
|
+
declare function Select(props: SelectProps): JSXElement;
|
|
624
|
+
|
|
625
|
+
interface SliderProps {
|
|
626
|
+
value?: number;
|
|
627
|
+
onChange?: (value: number) => void;
|
|
628
|
+
min?: number;
|
|
629
|
+
max?: number;
|
|
630
|
+
step?: number;
|
|
631
|
+
label?: string | JSXElement;
|
|
632
|
+
showValue?: boolean;
|
|
633
|
+
disabled?: boolean;
|
|
634
|
+
class?: string;
|
|
635
|
+
id?: string;
|
|
636
|
+
name?: string;
|
|
637
|
+
'aria-label'?: string;
|
|
638
|
+
'aria-describedby'?: string;
|
|
639
|
+
}
|
|
640
|
+
declare function Slider(props: SliderProps): JSXElement;
|
|
641
|
+
|
|
642
|
+
interface NavItem {
|
|
643
|
+
label: string | JSXElement;
|
|
644
|
+
href: string;
|
|
645
|
+
active?: boolean;
|
|
646
|
+
disabled?: boolean;
|
|
647
|
+
icon?: JSXElement;
|
|
648
|
+
}
|
|
649
|
+
interface NavProps {
|
|
650
|
+
items: NavItem[];
|
|
651
|
+
orientation?: 'horizontal' | 'vertical';
|
|
652
|
+
class?: string;
|
|
653
|
+
role?: 'navigation' | 'menubar';
|
|
654
|
+
'aria-label'?: string;
|
|
655
|
+
}
|
|
656
|
+
declare function Nav(props: NavProps): JSXElement;
|
|
657
|
+
|
|
658
|
+
interface TabItem {
|
|
659
|
+
id: string;
|
|
660
|
+
label: string | JSXElement;
|
|
661
|
+
content?: JSXElement | string;
|
|
662
|
+
disabled?: boolean;
|
|
663
|
+
icon?: JSXElement;
|
|
664
|
+
}
|
|
665
|
+
interface TabsProps {
|
|
666
|
+
tabs: TabItem[];
|
|
667
|
+
defaultTab?: string;
|
|
668
|
+
activeTab?: string;
|
|
669
|
+
onTabChange?: (tabId: string) => void;
|
|
670
|
+
variant?: 'line' | 'solid' | 'outline';
|
|
671
|
+
class?: string;
|
|
672
|
+
tabsClass?: string;
|
|
673
|
+
contentClass?: string;
|
|
674
|
+
role?: 'tablist';
|
|
675
|
+
}
|
|
676
|
+
declare function Tabs(props: TabsProps): JSXElement;
|
|
677
|
+
|
|
678
|
+
interface BreadcrumbItem {
|
|
679
|
+
label: string | JSXElement;
|
|
680
|
+
href?: string;
|
|
681
|
+
active?: boolean;
|
|
682
|
+
icon?: JSXElement;
|
|
683
|
+
}
|
|
684
|
+
interface BreadcrumbProps {
|
|
685
|
+
items: BreadcrumbItem[];
|
|
686
|
+
separator?: JSXElement | string;
|
|
687
|
+
class?: string;
|
|
688
|
+
itemClass?: string;
|
|
689
|
+
role?: 'navigation';
|
|
690
|
+
}
|
|
691
|
+
declare function Breadcrumb(props: BreadcrumbProps): JSXElement;
|
|
692
|
+
|
|
693
|
+
interface PaginationProps {
|
|
694
|
+
current: number;
|
|
695
|
+
total: number;
|
|
696
|
+
onChange: (page: number) => void;
|
|
697
|
+
siblingCount?: number;
|
|
698
|
+
showFirstLast?: boolean;
|
|
699
|
+
class?: string;
|
|
700
|
+
buttonClass?: string;
|
|
701
|
+
activeButtonClass?: string;
|
|
702
|
+
role?: 'navigation';
|
|
703
|
+
}
|
|
704
|
+
declare function Pagination(props: PaginationProps): JSXElement;
|
|
705
|
+
|
|
706
|
+
interface CardProps {
|
|
707
|
+
children: JSXElement;
|
|
708
|
+
class?: string;
|
|
709
|
+
variant?: 'elevated' | 'outlined' | 'filled';
|
|
710
|
+
padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
|
|
711
|
+
rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
712
|
+
hover?: boolean;
|
|
713
|
+
clickable?: boolean;
|
|
714
|
+
onClick?: () => void;
|
|
715
|
+
}
|
|
716
|
+
interface CardHeaderProps {
|
|
717
|
+
children: JSXElement;
|
|
718
|
+
class?: string;
|
|
719
|
+
divider?: boolean;
|
|
720
|
+
}
|
|
721
|
+
interface CardBodyProps {
|
|
722
|
+
children: JSXElement;
|
|
723
|
+
class?: string;
|
|
724
|
+
}
|
|
725
|
+
interface CardFooterProps {
|
|
726
|
+
children: JSXElement;
|
|
727
|
+
class?: string;
|
|
728
|
+
divider?: boolean;
|
|
729
|
+
}
|
|
730
|
+
declare function Card(props: CardProps): JSXElement;
|
|
731
|
+
declare function CardHeader(props: CardHeaderProps): JSXElement;
|
|
732
|
+
declare function CardBody(props: CardBodyProps): JSXElement;
|
|
733
|
+
declare function CardFooter(props: CardFooterProps): JSXElement;
|
|
734
|
+
|
|
735
|
+
interface TableColumn<T = any> {
|
|
736
|
+
key: keyof T;
|
|
737
|
+
label: string;
|
|
738
|
+
width?: string | number;
|
|
739
|
+
align?: 'left' | 'center' | 'right';
|
|
740
|
+
sortable?: boolean;
|
|
741
|
+
render?: (value: any, row: T, index: number) => JSXElement | string;
|
|
742
|
+
}
|
|
743
|
+
interface TableProps<T = any> {
|
|
744
|
+
data: T[];
|
|
745
|
+
columns: TableColumn<T>[];
|
|
746
|
+
striped?: boolean;
|
|
747
|
+
bordered?: boolean;
|
|
748
|
+
hoverable?: boolean;
|
|
749
|
+
compact?: boolean;
|
|
750
|
+
sortBy?: keyof T;
|
|
751
|
+
sortOrder?: 'asc' | 'desc';
|
|
752
|
+
onSort?: (column: keyof T, order: 'asc' | 'desc') => void;
|
|
753
|
+
class?: string;
|
|
754
|
+
headerClass?: string;
|
|
755
|
+
rowClass?: string;
|
|
756
|
+
cellClass?: string;
|
|
757
|
+
}
|
|
758
|
+
interface TableHeaderProps<T = any> {
|
|
759
|
+
columns: TableColumn<T>[];
|
|
760
|
+
sortBy?: keyof T;
|
|
761
|
+
sortOrder?: 'asc' | 'desc';
|
|
762
|
+
onSort?: (column: keyof T, order: 'asc' | 'desc') => void;
|
|
763
|
+
headerClass?: string;
|
|
764
|
+
cellClass?: string;
|
|
765
|
+
}
|
|
766
|
+
interface TableBodyProps<T = any> {
|
|
767
|
+
data: T[];
|
|
768
|
+
columns: TableColumn<T>[];
|
|
769
|
+
striped?: boolean;
|
|
770
|
+
hoverable?: boolean;
|
|
771
|
+
rowClass?: string;
|
|
772
|
+
cellClass?: string;
|
|
773
|
+
}
|
|
774
|
+
declare function Table<T = any>(props: TableProps<T>): JSXElement;
|
|
775
|
+
declare function TableHeader<T = any>(props: TableHeaderProps<T>): JSXElement;
|
|
776
|
+
declare function TableBody<T = any>(props: TableBodyProps<T>): JSXElement;
|
|
777
|
+
|
|
778
|
+
interface ListItem<T = any> {
|
|
779
|
+
id?: string | number;
|
|
780
|
+
label?: string | JSXElement;
|
|
781
|
+
description?: string | JSXElement;
|
|
782
|
+
icon?: JSXElement;
|
|
783
|
+
avatar?: JSXElement;
|
|
784
|
+
trailing?: JSXElement;
|
|
785
|
+
disabled?: boolean;
|
|
786
|
+
onClick?: () => void;
|
|
787
|
+
data?: T;
|
|
788
|
+
}
|
|
789
|
+
interface ListProps<T = any> {
|
|
790
|
+
items: ListItem<T>[];
|
|
791
|
+
variant?: 'simple' | 'divider' | 'spaced';
|
|
792
|
+
size?: 'sm' | 'md' | 'lg';
|
|
793
|
+
class?: string;
|
|
794
|
+
itemClass?: string;
|
|
795
|
+
selectable?: boolean;
|
|
796
|
+
onItemClick?: (item: ListItem<T>, index: number) => void;
|
|
797
|
+
}
|
|
798
|
+
declare function List<T = any>(props: ListProps<T>): JSXElement;
|
|
799
|
+
|
|
800
|
+
interface TagProps {
|
|
801
|
+
children: JSXElement | string;
|
|
802
|
+
icon?: JSXElement;
|
|
803
|
+
variant?: 'solid' | 'outline' | 'subtle';
|
|
804
|
+
color?: 'primary' | 'success' | 'warning' | 'error';
|
|
805
|
+
size?: 'sm' | 'md' | 'lg';
|
|
806
|
+
closeable?: boolean;
|
|
807
|
+
onClose?: () => void;
|
|
808
|
+
disabled?: boolean;
|
|
809
|
+
class?: string;
|
|
810
|
+
}
|
|
811
|
+
declare function Tag(props: TagProps): JSXElement;
|
|
812
|
+
|
|
813
|
+
interface StatProps {
|
|
814
|
+
value: string | number | JSXElement;
|
|
815
|
+
label: string | JSXElement;
|
|
816
|
+
description?: string | JSXElement;
|
|
817
|
+
icon?: JSXElement;
|
|
818
|
+
class?: string;
|
|
819
|
+
variant?: 'card' | 'simple' | 'bordered';
|
|
820
|
+
size?: 'sm' | 'md' | 'lg';
|
|
821
|
+
change?: number;
|
|
822
|
+
changeLabel?: string;
|
|
823
|
+
trend?: 'up' | 'down' | 'neutral';
|
|
824
|
+
color?: 'primary' | 'success' | 'warning' | 'error';
|
|
825
|
+
}
|
|
826
|
+
declare function Stat(props: StatProps): JSXElement;
|
|
827
|
+
|
|
828
|
+
export { Alert, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type Breakpoint, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Center, type CenterProps, Checkbox, type CheckboxProps, Container, type ContainerProps, Divider, type DividerProps, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItemProps, type DropdownMenuProps, Form, FormError, type FormErrorProps, FormField, type FormFieldProps, FormHint, type FormHintProps, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, Group, type GroupProps, IconButton, type IconButtonProps, Input, InputGroup, type InputGroupProps, type InputProps, List, type ListItem, type ListProps, Modal, type ModalProps, Nav, type NavItem, type NavProps, Notification, type NotificationProps, Pagination, type PaginationProps, Popover, type PopoverProps, Portal, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, type SwitchProps, type TabItem, Table, TableBody, type TableBodyProps, type TableColumn, TableHeader, type TableHeaderProps, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type Theme, Toast, type ToastProps, Tooltip, type TooltipProps, clsx, cn, copyToClipboard, createPortal, debounce, throttle, useBreakpoint, useClipboard, useDirection, useEscapeKey, useFocusTrap, useId, useMediaQuery, useOutsideClick, useReturnFocus, useScrollLock, useTheme };
|