@nkanish/liquidglass-ui 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +138 -2
- package/THIRD_PARTY_NOTICES.md +41 -0
- package/dist/index.cjs +6199 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +722 -0
- package/dist/index.d.ts +722 -0
- package/dist/index.js +6100 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +425 -0
- package/package.json +104 -4
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,722 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ElementType, RefObject } from 'react';
|
|
3
|
+
|
|
4
|
+
type Theme = 'light' | 'dark' | 'system';
|
|
5
|
+
type ResolvedTheme = 'light' | 'dark';
|
|
6
|
+
interface RefractionConfig {
|
|
7
|
+
enabled: boolean;
|
|
8
|
+
depth: number;
|
|
9
|
+
dome: number;
|
|
10
|
+
shine: number;
|
|
11
|
+
lightAngle: number;
|
|
12
|
+
}
|
|
13
|
+
interface GlassConfig {
|
|
14
|
+
blur?: number;
|
|
15
|
+
saturation?: number;
|
|
16
|
+
bendStrength?: number;
|
|
17
|
+
accentColor?: string;
|
|
18
|
+
reducedMotion?: boolean;
|
|
19
|
+
reducedTransparency?: boolean;
|
|
20
|
+
refraction?: Partial<RefractionConfig>;
|
|
21
|
+
}
|
|
22
|
+
interface GlassContextValue {
|
|
23
|
+
theme: Theme;
|
|
24
|
+
resolvedTheme: ResolvedTheme;
|
|
25
|
+
setTheme: (theme: Theme) => void;
|
|
26
|
+
config: GlassConfig;
|
|
27
|
+
setConfig: (config: Partial<GlassConfig>) => void;
|
|
28
|
+
refraction: RefractionConfig;
|
|
29
|
+
}
|
|
30
|
+
interface GlassProviderProps {
|
|
31
|
+
children: ReactNode;
|
|
32
|
+
defaultTheme?: Theme;
|
|
33
|
+
config?: GlassConfig;
|
|
34
|
+
storageKey?: string;
|
|
35
|
+
}
|
|
36
|
+
declare function GlassProvider({ children, defaultTheme, config: initialConfig, storageKey, }: GlassProviderProps): react.JSX.Element;
|
|
37
|
+
declare function useGlass(): GlassContextValue;
|
|
38
|
+
declare function useTheme(): Pick<GlassContextValue, 'theme' | 'resolvedTheme' | 'setTheme'>;
|
|
39
|
+
declare function useRefraction(): RefractionConfig;
|
|
40
|
+
|
|
41
|
+
interface GlassProps extends HTMLAttributes<HTMLDivElement> {
|
|
42
|
+
/** Visual variant */
|
|
43
|
+
variant?: 'default' | 'elevated' | 'subtle' | 'solid';
|
|
44
|
+
/** Blur intensity in pixels */
|
|
45
|
+
blur?: number;
|
|
46
|
+
/** Color saturation multiplier */
|
|
47
|
+
saturation?: number;
|
|
48
|
+
/** Custom tint color */
|
|
49
|
+
tint?: string;
|
|
50
|
+
/** Enable pointer tracking for highlight effect */
|
|
51
|
+
interactive?: boolean;
|
|
52
|
+
/** Show rim light gradient (legacy, superseded by refraction) */
|
|
53
|
+
rimLight?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Enable glisse-style edge refraction with chromatic aberration and specular highlights.
|
|
56
|
+
* Defaults to true. Set to false to disable.
|
|
57
|
+
*/
|
|
58
|
+
refraction?: boolean;
|
|
59
|
+
/** Refraction depth in pixels from edge. Default: 8 */
|
|
60
|
+
refractionDepth?: number;
|
|
61
|
+
/** Dome curvature for lens effect. Default: 4 */
|
|
62
|
+
refractionDome?: number;
|
|
63
|
+
/** Specular shine intensity (-2 to 2). Default: 0.3 */
|
|
64
|
+
shine?: number;
|
|
65
|
+
/** Light angle in degrees for rim and refraction. Default: 225 */
|
|
66
|
+
lightAngle?: number;
|
|
67
|
+
}
|
|
68
|
+
declare const Glass: react.ForwardRefExoticComponent<GlassProps & react.RefAttributes<HTMLDivElement>>;
|
|
69
|
+
|
|
70
|
+
interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
71
|
+
variant?: 'default' | 'elevated' | 'outlined';
|
|
72
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
73
|
+
radius?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
74
|
+
hoverable?: boolean;
|
|
75
|
+
/** Disable glisse refraction effect. Defaults to false (refraction enabled). */
|
|
76
|
+
disableRefraction?: boolean;
|
|
77
|
+
}
|
|
78
|
+
declare const GlassCard: react.ForwardRefExoticComponent<GlassCardProps & react.RefAttributes<HTMLDivElement>>;
|
|
79
|
+
|
|
80
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
81
|
+
variant?: 'glass' | 'filled' | 'outlined' | 'ghost';
|
|
82
|
+
size?: 'sm' | 'md' | 'lg';
|
|
83
|
+
icon?: ReactNode;
|
|
84
|
+
iconPosition?: 'start' | 'end';
|
|
85
|
+
destructive?: boolean;
|
|
86
|
+
tint?: string;
|
|
87
|
+
loading?: boolean;
|
|
88
|
+
fullWidth?: boolean;
|
|
89
|
+
/** Disable glisse refraction effect. Defaults to false (refraction enabled for glass variant). */
|
|
90
|
+
disableRefraction?: boolean;
|
|
91
|
+
}
|
|
92
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
93
|
+
|
|
94
|
+
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
95
|
+
icon: ReactNode;
|
|
96
|
+
variant?: 'glass' | 'filled' | 'ghost';
|
|
97
|
+
size?: 'sm' | 'md' | 'lg';
|
|
98
|
+
destructive?: boolean;
|
|
99
|
+
tint?: string;
|
|
100
|
+
loading?: boolean;
|
|
101
|
+
'aria-label': string;
|
|
102
|
+
}
|
|
103
|
+
declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
104
|
+
|
|
105
|
+
interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
106
|
+
pressed?: boolean;
|
|
107
|
+
defaultPressed?: boolean;
|
|
108
|
+
onPressedChange?: (pressed: boolean) => void;
|
|
109
|
+
size?: 'sm' | 'md' | 'lg';
|
|
110
|
+
variant?: 'default' | 'outline';
|
|
111
|
+
icon?: ReactNode;
|
|
112
|
+
}
|
|
113
|
+
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
|
|
114
|
+
|
|
115
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size'> {
|
|
116
|
+
value?: string;
|
|
117
|
+
defaultValue?: string;
|
|
118
|
+
onValueChange?: (value: string) => void;
|
|
119
|
+
icon?: ReactNode;
|
|
120
|
+
rightElement?: ReactNode;
|
|
121
|
+
size?: 'sm' | 'md' | 'lg';
|
|
122
|
+
error?: boolean;
|
|
123
|
+
clearable?: boolean;
|
|
124
|
+
onClear?: () => void;
|
|
125
|
+
}
|
|
126
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
127
|
+
|
|
128
|
+
interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange'> {
|
|
129
|
+
value?: string;
|
|
130
|
+
defaultValue?: string;
|
|
131
|
+
onValueChange?: (value: string) => void;
|
|
132
|
+
error?: boolean;
|
|
133
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
134
|
+
}
|
|
135
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
136
|
+
|
|
137
|
+
type SearchFieldProps = Omit<InputProps, 'type' | 'icon'>;
|
|
138
|
+
declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
|
|
139
|
+
|
|
140
|
+
interface SelectOption {
|
|
141
|
+
value: string;
|
|
142
|
+
label: ReactNode;
|
|
143
|
+
disabled?: boolean;
|
|
144
|
+
}
|
|
145
|
+
interface SelectProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
|
|
146
|
+
options: SelectOption[];
|
|
147
|
+
value?: string;
|
|
148
|
+
defaultValue?: string;
|
|
149
|
+
onValueChange?: (value: string) => void;
|
|
150
|
+
placeholder?: string;
|
|
151
|
+
size?: 'sm' | 'md' | 'lg';
|
|
152
|
+
error?: boolean;
|
|
153
|
+
}
|
|
154
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
|
|
155
|
+
|
|
156
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'defaultChecked' | 'onChange' | 'size'> {
|
|
157
|
+
checked?: boolean;
|
|
158
|
+
defaultChecked?: boolean;
|
|
159
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
160
|
+
label?: string;
|
|
161
|
+
size?: 'sm' | 'md' | 'lg';
|
|
162
|
+
indeterminate?: boolean;
|
|
163
|
+
}
|
|
164
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
165
|
+
|
|
166
|
+
interface RadioGroupProps {
|
|
167
|
+
children: ReactNode;
|
|
168
|
+
name: string;
|
|
169
|
+
value?: string;
|
|
170
|
+
defaultValue?: string;
|
|
171
|
+
onValueChange?: (value: string) => void;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
size?: 'sm' | 'md' | 'lg';
|
|
174
|
+
orientation?: 'horizontal' | 'vertical';
|
|
175
|
+
className?: string;
|
|
176
|
+
}
|
|
177
|
+
declare function RadioGroup({ children, name, value: controlledValue, defaultValue, onValueChange, disabled, size, orientation, className, }: RadioGroupProps): react.JSX.Element;
|
|
178
|
+
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
179
|
+
label?: string;
|
|
180
|
+
size?: 'sm' | 'md' | 'lg';
|
|
181
|
+
}
|
|
182
|
+
declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
|
|
183
|
+
|
|
184
|
+
interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
|
|
185
|
+
checked?: boolean;
|
|
186
|
+
defaultChecked?: boolean;
|
|
187
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
188
|
+
/** Visual scale. `md` matches glisse exactly. */
|
|
189
|
+
size?: 'sm' | 'md' | 'lg';
|
|
190
|
+
}
|
|
191
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
|
|
192
|
+
|
|
193
|
+
interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange'> {
|
|
194
|
+
value?: number;
|
|
195
|
+
defaultValue?: number;
|
|
196
|
+
onValueChange?: (value: number) => void;
|
|
197
|
+
min?: number;
|
|
198
|
+
max?: number;
|
|
199
|
+
step?: number;
|
|
200
|
+
showValue?: boolean;
|
|
201
|
+
formatValue?: (value: number) => string;
|
|
202
|
+
}
|
|
203
|
+
declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
|
|
204
|
+
|
|
205
|
+
interface TabBarItem {
|
|
206
|
+
value: string;
|
|
207
|
+
label: ReactNode;
|
|
208
|
+
icon?: ReactNode;
|
|
209
|
+
href?: string;
|
|
210
|
+
}
|
|
211
|
+
interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
|
|
212
|
+
items: TabBarItem[];
|
|
213
|
+
value?: string | null;
|
|
214
|
+
defaultValue?: string | null;
|
|
215
|
+
onValueChange?: (value: string) => void;
|
|
216
|
+
link?: ElementType;
|
|
217
|
+
showLabels?: boolean;
|
|
218
|
+
}
|
|
219
|
+
declare const TabBar: react.ForwardRefExoticComponent<TabBarProps & react.RefAttributes<HTMLDivElement>>;
|
|
220
|
+
|
|
221
|
+
interface SegmentedControlItem {
|
|
222
|
+
value: string;
|
|
223
|
+
label: ReactNode;
|
|
224
|
+
disabled?: boolean;
|
|
225
|
+
}
|
|
226
|
+
interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
|
|
227
|
+
items: SegmentedControlItem[];
|
|
228
|
+
value?: string | null;
|
|
229
|
+
defaultValue?: string | null;
|
|
230
|
+
onValueChange?: (value: string) => void;
|
|
231
|
+
size?: 'sm' | 'md' | 'lg';
|
|
232
|
+
}
|
|
233
|
+
declare const SegmentedControl: react.ForwardRefExoticComponent<SegmentedControlProps & react.RefAttributes<HTMLDivElement>>;
|
|
234
|
+
|
|
235
|
+
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
|
|
236
|
+
value?: string;
|
|
237
|
+
defaultValue?: string;
|
|
238
|
+
onValueChange?: (value: string) => void;
|
|
239
|
+
orientation?: 'horizontal' | 'vertical';
|
|
240
|
+
}
|
|
241
|
+
declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
242
|
+
interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
|
|
243
|
+
children: ReactNode;
|
|
244
|
+
}
|
|
245
|
+
declare const TabsList: react.ForwardRefExoticComponent<TabsListProps & react.RefAttributes<HTMLDivElement>>;
|
|
246
|
+
interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
247
|
+
value: string;
|
|
248
|
+
disabled?: boolean;
|
|
249
|
+
children: ReactNode;
|
|
250
|
+
}
|
|
251
|
+
declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
252
|
+
interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
253
|
+
value: string;
|
|
254
|
+
children: ReactNode;
|
|
255
|
+
}
|
|
256
|
+
declare const TabsContent: react.ForwardRefExoticComponent<TabsContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
257
|
+
|
|
258
|
+
interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
259
|
+
logo?: ReactNode;
|
|
260
|
+
children?: ReactNode;
|
|
261
|
+
actions?: ReactNode;
|
|
262
|
+
sticky?: boolean;
|
|
263
|
+
bordered?: boolean;
|
|
264
|
+
}
|
|
265
|
+
declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
|
|
266
|
+
interface NavbarLinkProps extends HTMLAttributes<HTMLAnchorElement> {
|
|
267
|
+
href: string;
|
|
268
|
+
active?: boolean;
|
|
269
|
+
children: ReactNode;
|
|
270
|
+
}
|
|
271
|
+
declare const NavbarLink: react.ForwardRefExoticComponent<NavbarLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
272
|
+
|
|
273
|
+
interface SidebarContextValue {
|
|
274
|
+
isCollapsed: boolean;
|
|
275
|
+
toggleCollapsed: () => void;
|
|
276
|
+
setCollapsed: (collapsed: boolean) => void;
|
|
277
|
+
}
|
|
278
|
+
declare function useSidebar(): SidebarContextValue;
|
|
279
|
+
interface SidebarProviderProps {
|
|
280
|
+
children: ReactNode;
|
|
281
|
+
defaultCollapsed?: boolean;
|
|
282
|
+
}
|
|
283
|
+
declare function SidebarProvider({ children, defaultCollapsed }: SidebarProviderProps): react.JSX.Element;
|
|
284
|
+
interface SidebarProps extends HTMLAttributes<HTMLElement> {
|
|
285
|
+
children: ReactNode;
|
|
286
|
+
width?: number;
|
|
287
|
+
collapsedWidth?: number;
|
|
288
|
+
}
|
|
289
|
+
declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
|
|
290
|
+
interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
291
|
+
children: ReactNode;
|
|
292
|
+
}
|
|
293
|
+
declare const SidebarHeader: react.ForwardRefExoticComponent<SidebarHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
294
|
+
interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
295
|
+
children: ReactNode;
|
|
296
|
+
}
|
|
297
|
+
declare const SidebarContent: react.ForwardRefExoticComponent<SidebarContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
298
|
+
interface SidebarItemProps {
|
|
299
|
+
icon?: ReactNode;
|
|
300
|
+
label: string;
|
|
301
|
+
active?: boolean;
|
|
302
|
+
href?: string;
|
|
303
|
+
onClick?: () => void;
|
|
304
|
+
className?: string;
|
|
305
|
+
}
|
|
306
|
+
declare const SidebarItem: react.ForwardRefExoticComponent<SidebarItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
307
|
+
interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
308
|
+
title?: string;
|
|
309
|
+
children: ReactNode;
|
|
310
|
+
}
|
|
311
|
+
declare const SidebarGroup: react.ForwardRefExoticComponent<SidebarGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
|
|
313
|
+
interface DockItem {
|
|
314
|
+
id: string;
|
|
315
|
+
icon: ReactNode;
|
|
316
|
+
label: string;
|
|
317
|
+
onClick?: () => void;
|
|
318
|
+
href?: string;
|
|
319
|
+
badge?: number;
|
|
320
|
+
}
|
|
321
|
+
interface DockProps extends HTMLAttributes<HTMLDivElement> {
|
|
322
|
+
items: DockItem[];
|
|
323
|
+
magnification?: number;
|
|
324
|
+
distance?: number;
|
|
325
|
+
direction?: 'bottom' | 'left' | 'right';
|
|
326
|
+
}
|
|
327
|
+
declare const Dock: react.ForwardRefExoticComponent<DockProps & react.RefAttributes<HTMLDivElement>>;
|
|
328
|
+
|
|
329
|
+
interface ModalProps extends HTMLAttributes<HTMLDivElement> {
|
|
330
|
+
open: boolean;
|
|
331
|
+
onOpenChange: (open: boolean) => void;
|
|
332
|
+
children: ReactNode;
|
|
333
|
+
title?: string;
|
|
334
|
+
description?: string;
|
|
335
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
336
|
+
closeOnOverlayClick?: boolean;
|
|
337
|
+
closeOnEscape?: boolean;
|
|
338
|
+
showCloseButton?: boolean;
|
|
339
|
+
/** Disable glisse refraction effect. Defaults to false (refraction enabled). */
|
|
340
|
+
disableRefraction?: boolean;
|
|
341
|
+
}
|
|
342
|
+
declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
|
|
343
|
+
interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
344
|
+
children: ReactNode;
|
|
345
|
+
}
|
|
346
|
+
declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
347
|
+
|
|
348
|
+
interface SheetProps extends HTMLAttributes<HTMLDivElement> {
|
|
349
|
+
open: boolean;
|
|
350
|
+
onOpenChange: (open: boolean) => void;
|
|
351
|
+
children: ReactNode;
|
|
352
|
+
side?: 'bottom' | 'top' | 'left' | 'right';
|
|
353
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
354
|
+
showHandle?: boolean;
|
|
355
|
+
/** Disable glisse refraction effect. Defaults to false (refraction enabled). */
|
|
356
|
+
disableRefraction?: boolean;
|
|
357
|
+
}
|
|
358
|
+
declare const Sheet: react.ForwardRefExoticComponent<SheetProps & react.RefAttributes<HTMLDivElement>>;
|
|
359
|
+
|
|
360
|
+
interface MenuItem {
|
|
361
|
+
label: ReactNode;
|
|
362
|
+
icon?: ReactNode;
|
|
363
|
+
onSelect?: () => void;
|
|
364
|
+
destructive?: boolean;
|
|
365
|
+
disabled?: boolean;
|
|
366
|
+
shortcut?: string;
|
|
367
|
+
}
|
|
368
|
+
type MenuEntry = MenuItem | 'separator';
|
|
369
|
+
interface MenuProps extends HTMLAttributes<HTMLDivElement> {
|
|
370
|
+
items: MenuEntry[];
|
|
371
|
+
trigger: ReactNode;
|
|
372
|
+
align?: 'start' | 'end';
|
|
373
|
+
}
|
|
374
|
+
declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLDivElement>>;
|
|
375
|
+
|
|
376
|
+
interface TooltipProps {
|
|
377
|
+
content: ReactNode;
|
|
378
|
+
children: ReactNode;
|
|
379
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
380
|
+
align?: 'start' | 'center' | 'end';
|
|
381
|
+
delay?: number;
|
|
382
|
+
disabled?: boolean;
|
|
383
|
+
}
|
|
384
|
+
declare function Tooltip({ content, children, side, align, delay, disabled, }: TooltipProps): react.JSX.Element;
|
|
385
|
+
|
|
386
|
+
interface ToastProps extends HTMLAttributes<HTMLDivElement> {
|
|
387
|
+
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
388
|
+
title?: string;
|
|
389
|
+
description?: string;
|
|
390
|
+
icon?: ReactNode;
|
|
391
|
+
action?: ReactNode;
|
|
392
|
+
duration?: number;
|
|
393
|
+
onClose?: () => void;
|
|
394
|
+
}
|
|
395
|
+
declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
|
|
396
|
+
interface ToastData extends Omit<ToastProps, 'onClose'> {
|
|
397
|
+
id: string;
|
|
398
|
+
}
|
|
399
|
+
interface ToastContextValue {
|
|
400
|
+
toasts: ToastData[];
|
|
401
|
+
toast: (props: Omit<ToastData, 'id'>) => string;
|
|
402
|
+
dismiss: (id: string) => void;
|
|
403
|
+
dismissAll: () => void;
|
|
404
|
+
}
|
|
405
|
+
declare function ToastProvider({ children }: {
|
|
406
|
+
children: ReactNode;
|
|
407
|
+
}): react.JSX.Element;
|
|
408
|
+
declare function useToast(): Omit<ToastContextValue, 'toasts'>;
|
|
409
|
+
|
|
410
|
+
interface AlertProps extends HTMLAttributes<HTMLDivElement> {
|
|
411
|
+
variant?: 'default' | 'info' | 'success' | 'warning' | 'error';
|
|
412
|
+
title?: string;
|
|
413
|
+
icon?: ReactNode;
|
|
414
|
+
action?: ReactNode;
|
|
415
|
+
onClose?: () => void;
|
|
416
|
+
}
|
|
417
|
+
declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
|
|
418
|
+
|
|
419
|
+
interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
420
|
+
value?: number;
|
|
421
|
+
max?: number;
|
|
422
|
+
variant?: 'linear' | 'circular';
|
|
423
|
+
size?: 'sm' | 'md' | 'lg';
|
|
424
|
+
color?: string;
|
|
425
|
+
showValue?: boolean;
|
|
426
|
+
indeterminate?: boolean;
|
|
427
|
+
}
|
|
428
|
+
declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
|
|
429
|
+
|
|
430
|
+
interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
431
|
+
size?: 'sm' | 'md' | 'lg' | number;
|
|
432
|
+
color?: string;
|
|
433
|
+
thickness?: number;
|
|
434
|
+
label?: string;
|
|
435
|
+
}
|
|
436
|
+
declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;
|
|
437
|
+
|
|
438
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
439
|
+
variant?: 'default' | 'secondary' | 'success' | 'warning' | 'destructive' | 'outline';
|
|
440
|
+
size?: 'sm' | 'md' | 'lg';
|
|
441
|
+
dot?: boolean;
|
|
442
|
+
icon?: ReactNode;
|
|
443
|
+
}
|
|
444
|
+
declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
|
|
445
|
+
|
|
446
|
+
interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
447
|
+
src?: string;
|
|
448
|
+
alt?: string;
|
|
449
|
+
fallback?: ReactNode;
|
|
450
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
451
|
+
shape?: 'circle' | 'square';
|
|
452
|
+
status?: 'online' | 'offline' | 'busy' | 'away';
|
|
453
|
+
}
|
|
454
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
455
|
+
|
|
456
|
+
interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
|
|
457
|
+
variant?: 'filled' | 'outlined' | 'glass';
|
|
458
|
+
size?: 'sm' | 'md' | 'lg';
|
|
459
|
+
color?: string;
|
|
460
|
+
icon?: ReactNode;
|
|
461
|
+
onRemove?: () => void;
|
|
462
|
+
removable?: boolean;
|
|
463
|
+
selected?: boolean;
|
|
464
|
+
onClick?: () => void;
|
|
465
|
+
}
|
|
466
|
+
declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
|
|
467
|
+
|
|
468
|
+
interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
|
|
469
|
+
type?: 'single' | 'multiple';
|
|
470
|
+
defaultValue?: string | string[];
|
|
471
|
+
collapsible?: boolean;
|
|
472
|
+
}
|
|
473
|
+
declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
|
|
474
|
+
interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
475
|
+
value: string;
|
|
476
|
+
disabled?: boolean;
|
|
477
|
+
}
|
|
478
|
+
declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
479
|
+
interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
480
|
+
children: ReactNode;
|
|
481
|
+
}
|
|
482
|
+
declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
483
|
+
interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
484
|
+
children: ReactNode;
|
|
485
|
+
}
|
|
486
|
+
declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
487
|
+
|
|
488
|
+
interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
489
|
+
orientation?: 'horizontal' | 'vertical';
|
|
490
|
+
decorative?: boolean;
|
|
491
|
+
}
|
|
492
|
+
declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
493
|
+
|
|
494
|
+
interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
|
|
495
|
+
variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
|
|
496
|
+
width?: number | string;
|
|
497
|
+
height?: number | string;
|
|
498
|
+
animation?: 'pulse' | 'wave' | 'none';
|
|
499
|
+
}
|
|
500
|
+
declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
|
|
501
|
+
|
|
502
|
+
interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
|
|
503
|
+
open: boolean;
|
|
504
|
+
onOpenChange: (open: boolean) => void;
|
|
505
|
+
children: ReactNode;
|
|
506
|
+
side?: 'left' | 'right';
|
|
507
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
508
|
+
title?: string;
|
|
509
|
+
description?: string;
|
|
510
|
+
showCloseButton?: boolean;
|
|
511
|
+
closeOnOverlayClick?: boolean;
|
|
512
|
+
closeOnEscape?: boolean;
|
|
513
|
+
}
|
|
514
|
+
declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
|
|
515
|
+
|
|
516
|
+
interface PopoverProps {
|
|
517
|
+
children: ReactNode;
|
|
518
|
+
content: ReactNode;
|
|
519
|
+
open?: boolean;
|
|
520
|
+
onOpenChange?: (open: boolean) => void;
|
|
521
|
+
defaultOpen?: boolean;
|
|
522
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
523
|
+
align?: 'start' | 'center' | 'end';
|
|
524
|
+
sideOffset?: number;
|
|
525
|
+
closeOnClickOutside?: boolean;
|
|
526
|
+
closeOnEscape?: boolean;
|
|
527
|
+
trigger?: 'click' | 'hover';
|
|
528
|
+
}
|
|
529
|
+
declare function Popover({ children, content, open: controlledOpen, onOpenChange, defaultOpen, side, align, sideOffset, closeOnClickOutside, closeOnEscape, trigger, }: PopoverProps): react.JSX.Element;
|
|
530
|
+
|
|
531
|
+
interface ContextMenuItem {
|
|
532
|
+
label: ReactNode;
|
|
533
|
+
icon?: ReactNode;
|
|
534
|
+
onSelect?: () => void;
|
|
535
|
+
destructive?: boolean;
|
|
536
|
+
disabled?: boolean;
|
|
537
|
+
shortcut?: string;
|
|
538
|
+
}
|
|
539
|
+
type ContextMenuEntry = ContextMenuItem | 'separator';
|
|
540
|
+
interface ContextMenuProps {
|
|
541
|
+
children: ReactNode;
|
|
542
|
+
items: ContextMenuEntry[];
|
|
543
|
+
disabled?: boolean;
|
|
544
|
+
onOpenChange?: (open: boolean) => void;
|
|
545
|
+
}
|
|
546
|
+
declare function ContextMenu({ children, items, disabled, onOpenChange, }: ContextMenuProps): react.JSX.Element;
|
|
547
|
+
|
|
548
|
+
interface CommandItem {
|
|
549
|
+
id: string;
|
|
550
|
+
label: string;
|
|
551
|
+
description?: string;
|
|
552
|
+
icon?: ReactNode;
|
|
553
|
+
shortcut?: string;
|
|
554
|
+
onSelect: () => void;
|
|
555
|
+
keywords?: string[];
|
|
556
|
+
group?: string;
|
|
557
|
+
disabled?: boolean;
|
|
558
|
+
}
|
|
559
|
+
interface CommandPaletteProps {
|
|
560
|
+
open: boolean;
|
|
561
|
+
onOpenChange: (open: boolean) => void;
|
|
562
|
+
items: CommandItem[];
|
|
563
|
+
placeholder?: string;
|
|
564
|
+
emptyMessage?: string;
|
|
565
|
+
groups?: Record<string, string>;
|
|
566
|
+
}
|
|
567
|
+
declare function CommandPalette({ open, onOpenChange, items, placeholder, emptyMessage, groups, }: CommandPaletteProps): react.ReactPortal | null;
|
|
568
|
+
|
|
569
|
+
interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
|
|
570
|
+
children: ReactNode;
|
|
571
|
+
autoPlay?: boolean;
|
|
572
|
+
autoPlayInterval?: number;
|
|
573
|
+
showDots?: boolean;
|
|
574
|
+
showArrows?: boolean;
|
|
575
|
+
loop?: boolean;
|
|
576
|
+
slidesToShow?: number;
|
|
577
|
+
gap?: number;
|
|
578
|
+
}
|
|
579
|
+
declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<HTMLDivElement>>;
|
|
580
|
+
|
|
581
|
+
interface FloatingActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
582
|
+
icon: ReactNode;
|
|
583
|
+
size?: 'sm' | 'md' | 'lg';
|
|
584
|
+
variant?: 'primary' | 'secondary' | 'glass';
|
|
585
|
+
position?: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left';
|
|
586
|
+
extended?: boolean;
|
|
587
|
+
label?: string;
|
|
588
|
+
'aria-label': string;
|
|
589
|
+
}
|
|
590
|
+
declare const FloatingActionButton: react.ForwardRefExoticComponent<FloatingActionButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
591
|
+
|
|
592
|
+
interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'> {
|
|
593
|
+
value?: Date | null;
|
|
594
|
+
defaultValue?: Date | null;
|
|
595
|
+
onValueChange?: (date: Date | null) => void;
|
|
596
|
+
placeholder?: string;
|
|
597
|
+
disabled?: boolean;
|
|
598
|
+
minDate?: Date;
|
|
599
|
+
maxDate?: Date;
|
|
600
|
+
locale?: string;
|
|
601
|
+
formatDate?: (date: Date) => string;
|
|
602
|
+
}
|
|
603
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
|
|
604
|
+
|
|
605
|
+
declare function useReducedMotion(): boolean;
|
|
606
|
+
|
|
607
|
+
declare function useReducedTransparency(): boolean;
|
|
608
|
+
|
|
609
|
+
interface PointerPosition {
|
|
610
|
+
x: number;
|
|
611
|
+
y: number;
|
|
612
|
+
percentX: number;
|
|
613
|
+
percentY: number;
|
|
614
|
+
isInside: boolean;
|
|
615
|
+
}
|
|
616
|
+
declare function usePointerPosition(ref: RefObject<HTMLElement | null>, options?: {
|
|
617
|
+
enabled?: boolean;
|
|
618
|
+
}): PointerPosition;
|
|
619
|
+
|
|
620
|
+
declare function useMounted(): boolean;
|
|
621
|
+
|
|
622
|
+
interface UseControllableOptions<T> {
|
|
623
|
+
value?: T;
|
|
624
|
+
defaultValue?: T;
|
|
625
|
+
onChange?: (value: T) => void;
|
|
626
|
+
}
|
|
627
|
+
declare function useControllable<T>(options: UseControllableOptions<T>): [T | undefined, (value: T) => void, boolean];
|
|
628
|
+
|
|
629
|
+
interface UsePressedStateOptions {
|
|
630
|
+
disabled?: boolean;
|
|
631
|
+
onPressStart?: () => void;
|
|
632
|
+
onPressEnd?: () => void;
|
|
633
|
+
}
|
|
634
|
+
interface PressedState {
|
|
635
|
+
isPressed: boolean;
|
|
636
|
+
pressHandlers: {
|
|
637
|
+
onPointerDown: (e: React.PointerEvent) => void;
|
|
638
|
+
onPointerUp: (e: React.PointerEvent) => void;
|
|
639
|
+
onPointerCancel: (e: React.PointerEvent) => void;
|
|
640
|
+
onPointerLeave: (e: React.PointerEvent) => void;
|
|
641
|
+
onKeyDown: (e: React.KeyboardEvent) => void;
|
|
642
|
+
onKeyUp: (e: React.KeyboardEvent) => void;
|
|
643
|
+
};
|
|
644
|
+
}
|
|
645
|
+
declare function usePressedState(options?: UsePressedStateOptions): PressedState;
|
|
646
|
+
|
|
647
|
+
declare function useId(providedId?: string): string;
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* Glisse-compatible glass refraction effect hook
|
|
651
|
+
*
|
|
652
|
+
* Based on glisse (MIT License)
|
|
653
|
+
* https://github.com/0kzh/glisse
|
|
654
|
+
* Copyright (c) 2024 Kelvin Zhang
|
|
655
|
+
*/
|
|
656
|
+
|
|
657
|
+
interface UseGlisseEffectOptions {
|
|
658
|
+
enabled?: boolean;
|
|
659
|
+
depth?: number;
|
|
660
|
+
dome?: number;
|
|
661
|
+
splay?: number;
|
|
662
|
+
shine?: number;
|
|
663
|
+
density?: number;
|
|
664
|
+
lightAngle?: number;
|
|
665
|
+
}
|
|
666
|
+
interface GlisseEffectResult {
|
|
667
|
+
filterUrl: string | null;
|
|
668
|
+
rimGradient: string;
|
|
669
|
+
isReady: boolean;
|
|
670
|
+
}
|
|
671
|
+
declare function useGlisseEffect(ref: RefObject<HTMLElement | null>, options?: UseGlisseEffectOptions): GlisseEffectResult;
|
|
672
|
+
declare function clearGlisseCache(): void;
|
|
673
|
+
|
|
674
|
+
/**
|
|
675
|
+
* SVG Filter System for Liquid Glass Refraction Effects
|
|
676
|
+
* Creates dynamic SVG filters for lens/refraction effects
|
|
677
|
+
*/
|
|
678
|
+
interface RefractionFilterOptions {
|
|
679
|
+
bendStrength?: number;
|
|
680
|
+
dispersion?: number;
|
|
681
|
+
blur?: number;
|
|
682
|
+
brightness?: number;
|
|
683
|
+
saturation?: number;
|
|
684
|
+
rimShine?: number;
|
|
685
|
+
}
|
|
686
|
+
interface GlassFilterResult {
|
|
687
|
+
id: string;
|
|
688
|
+
remove: () => void;
|
|
689
|
+
update: (options: Partial<RefractionFilterOptions>) => void;
|
|
690
|
+
}
|
|
691
|
+
declare function createRefractionFilter(options?: RefractionFilterOptions): GlassFilterResult;
|
|
692
|
+
interface LensFilterOptions {
|
|
693
|
+
bendX?: number;
|
|
694
|
+
bendY?: number;
|
|
695
|
+
dispersion?: number;
|
|
696
|
+
chromatic?: boolean;
|
|
697
|
+
}
|
|
698
|
+
declare function createLensFilter(options?: LensFilterOptions): GlassFilterResult;
|
|
699
|
+
interface RimLightOptions {
|
|
700
|
+
intensity?: number;
|
|
701
|
+
angle?: number;
|
|
702
|
+
spread?: number;
|
|
703
|
+
}
|
|
704
|
+
declare function createRimLightGradient(options?: RimLightOptions): string;
|
|
705
|
+
declare function createSpecularHighlight(x: number, y: number, radius?: number, intensity?: number): string;
|
|
706
|
+
declare function cleanupFilters(): void;
|
|
707
|
+
declare function supportsBackdropFilter(): boolean;
|
|
708
|
+
declare function supportsSVGFilters(): boolean;
|
|
709
|
+
|
|
710
|
+
type ClassValue = string | number | boolean | undefined | null | ClassValue[];
|
|
711
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
712
|
+
|
|
713
|
+
declare function clamp(value: number, min: number, max: number): number;
|
|
714
|
+
declare function lerp(start: number, end: number, t: number): number;
|
|
715
|
+
declare function mapRange(value: number, inMin: number, inMax: number, outMin: number, outMax: number): number;
|
|
716
|
+
declare function debounce<T extends (...args: unknown[]) => unknown>(fn: T, delay: number): (...args: Parameters<T>) => void;
|
|
717
|
+
declare function throttle<T extends (...args: unknown[]) => unknown>(fn: T, delay: number): (...args: Parameters<T>) => void;
|
|
718
|
+
declare function noop(): void;
|
|
719
|
+
declare function isServer(): boolean;
|
|
720
|
+
declare function isBrowser(): boolean;
|
|
721
|
+
|
|
722
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type CommandItem, CommandPalette, type CommandPaletteProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, DatePicker, type DatePickerProps, Dock, type DockItem, type DockProps, Drawer, type DrawerProps, FloatingActionButton as FAB, FloatingActionButton, type FloatingActionButtonProps, Glass, GlassCard, type GlassCardProps, type GlassConfig, type GlassContextValue, type GlassFilterResult, type GlassProps, GlassProvider, type GlassProviderProps, type GlisseEffectResult, IconButton, type IconButtonProps, Input, type InputProps, type LensFilterOptions, Menu, type MenuEntry, type MenuItem, type MenuProps, Modal, ModalFooter, type ModalFooterProps, type ModalProps, Navbar, NavbarLink, type NavbarLinkProps, type NavbarProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RefractionConfig, type RefractionFilterOptions, type ResolvedTheme, type RimLightOptions, SearchField, type SearchFieldProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarProvider, type SidebarProviderProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type Theme, Toast, type ToastProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipProps, type UseGlisseEffectOptions, clamp, cleanupFilters, clearGlisseCache, cn, createLensFilter, createRefractionFilter, createRimLightGradient, createSpecularHighlight, debounce, isBrowser, isServer, lerp, mapRange, noop, supportsBackdropFilter, supportsSVGFilters, throttle, useControllable, useGlass, useGlisseEffect, useId, useMounted, usePointerPosition, usePressedState, useReducedMotion, useReducedTransparency, useRefraction, useSidebar, useTheme, useToast };
|