@aviala-design/spiral 0.0.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.
@@ -0,0 +1,971 @@
1
+ import * as react from 'react';
2
+ import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, AnchorHTMLAttributes } from 'react';
3
+ import { ThemeMode, PaletteConfig, BaseNumbersDensity, ThemePreset } from '@aviala-design/tokens';
4
+ export { BaseNumbersDensity, DEFAULT_PALETTE_CONFIG, HueFamily, PALETTE_HUE_FAMILIES, PaletteConfig } from '@aviala-design/tokens';
5
+ import * as class_variance_authority_types from 'class-variance-authority/types';
6
+ import { VariantProps } from 'class-variance-authority';
7
+ import * as SelectPrimitive from '@radix-ui/react-select';
8
+ import * as LabelPrimitive from '@radix-ui/react-label';
9
+ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
10
+ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
11
+ import * as SwitchPrimitive from '@radix-ui/react-switch';
12
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
13
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
14
+ import { ClassValue } from 'clsx';
15
+
16
+ type ThemeProviderProps = {
17
+ children: ReactNode;
18
+ defaultMode?: ThemeMode;
19
+ defaultPrimary?: string;
20
+ defaultPresetId?: string;
21
+ defaultPaletteConfig?: PaletteConfig;
22
+ defaultDensity?: BaseNumbersDensity;
23
+ storageKey?: string;
24
+ onThemeChange?: (vars: Record<string, string>) => void;
25
+ };
26
+ type ThemeContextValue = {
27
+ mode: ThemeMode;
28
+ setMode: (mode: ThemeMode) => void;
29
+ primaryColor: string;
30
+ setPrimaryColor: (color: string) => void;
31
+ presetId: string | undefined;
32
+ applyPreset: (id: string) => void;
33
+ presets: ThemePreset[];
34
+ /** True when the active preset is a frozen ALD theme (palette engine bypassed). */
35
+ isStaticTheme: boolean;
36
+ density: BaseNumbersDensity;
37
+ setDensity: (density: BaseNumbersDensity) => void;
38
+ paletteConfig: PaletteConfig;
39
+ setPaletteConfig: (config: Partial<PaletteConfig>) => void;
40
+ resetPaletteConfig: () => void;
41
+ themeVars: Record<string, string>;
42
+ };
43
+ declare function ThemeProvider({ children, defaultMode, defaultPrimary, defaultPresetId, defaultPaletteConfig, defaultDensity, storageKey, onThemeChange, }: ThemeProviderProps): react.JSX.Element;
44
+ declare function useTheme(): ThemeContextValue;
45
+ declare function ThemeScript({ storageKey, defaultMode, defaultPrimary, defaultDensity, }: {
46
+ storageKey?: string;
47
+ defaultMode?: ThemeMode;
48
+ defaultPrimary?: string;
49
+ defaultDensity?: BaseNumbersDensity;
50
+ }): react.JSX.Element;
51
+
52
+ /** Figma Components → Basic Input → Button */
53
+ type ButtonMode = "primary" | "second" | "default" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive";
54
+ type ButtonSize = "tiny" | "small" | "regular" | "big";
55
+ declare const buttonVariants: (props?: ({
56
+ mode?: "primary" | "destructive" | "default" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | null | undefined;
57
+ size?: "big" | "small" | "tiny" | "regular" | null | undefined;
58
+ allRound?: boolean | null | undefined;
59
+ iconOnly?: boolean | null | undefined;
60
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
61
+ type LegacyVariant = "default" | "secondary" | "outline" | "ghost" | "destructive" | "link";
62
+ type LegacySize = "default" | "sm" | "lg" | "icon";
63
+ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<typeof buttonVariants>, "mode" | "size"> & {
64
+ /** Figma `Mode` — preferred over legacy `variant`. */
65
+ mode?: ButtonMode;
66
+ /** Figma `Size` — preferred over legacy shadcn sizes. */
67
+ size?: ButtonSize | LegacySize;
68
+ /** Figma `All-Round` */
69
+ allRound?: boolean;
70
+ /** Figma `IconOnly` */
71
+ iconOnly?: boolean;
72
+ /** @deprecated Use `mode` instead. */
73
+ variant?: LegacyVariant;
74
+ loading?: boolean;
75
+ /** @deprecated Use `leftIcon`. */
76
+ icon?: ReactNode;
77
+ leftIcon?: ReactNode;
78
+ rightIcon?: ReactNode;
79
+ asChild?: boolean;
80
+ };
81
+ declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<(props?: ({
82
+ mode?: "primary" | "destructive" | "default" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | null | undefined;
83
+ size?: "big" | "small" | "tiny" | "regular" | null | undefined;
84
+ allRound?: boolean | null | undefined;
85
+ iconOnly?: boolean | null | undefined;
86
+ } & class_variance_authority_types.ClassProp) | undefined) => string>, "mode" | "size"> & {
87
+ /** Figma `Mode` — preferred over legacy `variant`. */
88
+ mode?: ButtonMode;
89
+ /** Figma `Size` — preferred over legacy shadcn sizes. */
90
+ size?: ButtonSize | LegacySize;
91
+ /** Figma `All-Round` */
92
+ allRound?: boolean;
93
+ /** Figma `IconOnly` */
94
+ iconOnly?: boolean;
95
+ /** @deprecated Use `mode` instead. */
96
+ variant?: LegacyVariant;
97
+ loading?: boolean;
98
+ /** @deprecated Use `leftIcon`. */
99
+ icon?: ReactNode;
100
+ leftIcon?: ReactNode;
101
+ rightIcon?: ReactNode;
102
+ asChild?: boolean;
103
+ } & react.RefAttributes<HTMLButtonElement>>;
104
+
105
+ /** Figma Components → Information Collect → BaseInput */
106
+ type InputSize = "regular" | "big";
107
+ declare const inputRootVariants: (props?: ({
108
+ size?: "big" | "regular" | null | undefined;
109
+ allRound?: boolean | null | undefined;
110
+ fullWidth?: boolean | null | undefined;
111
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
112
+ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<typeof inputRootVariants> & {
113
+ /** Figma `Size` */
114
+ size?: InputSize;
115
+ /** Figma `All-Round` */
116
+ allRound?: boolean;
117
+ leftIcon?: ReactNode;
118
+ rightIcon?: ReactNode;
119
+ /** Figma badge area — left slot inside BaseInput */
120
+ leftBadge?: ReactNode;
121
+ /** Figma badge area — right slot inside BaseInput */
122
+ rightBadge?: ReactNode;
123
+ /** When false, input sizes to content (e.g. ColorPicker panel row) */
124
+ fullWidth?: boolean;
125
+ error?: boolean;
126
+ };
127
+ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
128
+ size?: "big" | "regular" | null | undefined;
129
+ allRound?: boolean | null | undefined;
130
+ fullWidth?: boolean | null | undefined;
131
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & {
132
+ /** Figma `Size` */
133
+ size?: InputSize;
134
+ /** Figma `All-Round` */
135
+ allRound?: boolean;
136
+ leftIcon?: ReactNode;
137
+ rightIcon?: ReactNode;
138
+ /** Figma badge area — left slot inside BaseInput */
139
+ leftBadge?: ReactNode;
140
+ /** Figma badge area — right slot inside BaseInput */
141
+ rightBadge?: ReactNode;
142
+ /** When false, input sizes to content (e.g. ColorPicker panel row) */
143
+ fullWidth?: boolean;
144
+ error?: boolean;
145
+ } & react.RefAttributes<HTMLInputElement>>;
146
+
147
+ /** Figma Components → Information Collect → TextareaInput */
148
+ type TextareaSize = "regular" | "big";
149
+ type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
150
+ /** Figma `Size` */
151
+ size?: TextareaSize;
152
+ leftIcon?: ReactNode;
153
+ rightIcon?: ReactNode;
154
+ /** Figma `Controller` — character counter + resize affordance */
155
+ showController?: boolean;
156
+ error?: boolean;
157
+ };
158
+ declare const Textarea: react.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
159
+ /** Figma `Size` */
160
+ size?: TextareaSize;
161
+ leftIcon?: ReactNode;
162
+ rightIcon?: ReactNode;
163
+ /** Figma `Controller` — character counter + resize affordance */
164
+ showController?: boolean;
165
+ error?: boolean;
166
+ } & react.RefAttributes<HTMLTextAreaElement>>;
167
+
168
+ /** Figma Components → Information Collect → Select */
169
+ type SelectSize = "regular" | "big";
170
+ /** Figma Select Menu Item `Function` variant */
171
+ type SelectItemFunction = "action" | "simple" | "checkbox" | "form-checkbox" | "radio" | "form-radio";
172
+ /** Figma Select Menu Item `Type` variant */
173
+ type SelectItemLayout = "default" | "title" | "people" | "checked";
174
+ type SelectSubMenuMarkerProps = {
175
+ children: ReactNode;
176
+ className?: string;
177
+ side?: "left" | "right";
178
+ sideOffset?: number;
179
+ portalled?: boolean;
180
+ };
181
+ /** Marker child for {@link SelectSubItem} — extracted and rendered in the flyout panel. */
182
+ declare function SelectSubMenu(_props: SelectSubMenuMarkerProps): null;
183
+ declare namespace SelectSubMenu {
184
+ var displayName: string;
185
+ }
186
+ type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;
187
+ /**
188
+ * Radix Select closes on `window` blur (e.g. focusing DevTools). Suppress only
189
+ * blur-initiated closes; pointer-down (outside click, item select, trigger toggle)
190
+ * and Escape must still dismiss on the first interaction.
191
+ */
192
+ declare function Select({ open: openProp, defaultOpen, onOpenChange, ...props }: SelectProps): react.JSX.Element;
193
+ declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
194
+ declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
195
+ type SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
196
+ size?: SelectSize;
197
+ allRound?: boolean;
198
+ leftIcon?: ReactNode;
199
+ rightIcon?: ReactNode;
200
+ /** Override chevron expand icon (defaults to DirectionArrowDownLight). */
201
+ expandIcon?: ReactNode;
202
+ placeholder?: string;
203
+ error?: boolean;
204
+ };
205
+ declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
206
+ size?: SelectSize;
207
+ allRound?: boolean;
208
+ leftIcon?: ReactNode;
209
+ rightIcon?: ReactNode;
210
+ /** Override chevron expand icon (defaults to DirectionArrowDownLight). */
211
+ expandIcon?: ReactNode;
212
+ placeholder?: string;
213
+ error?: boolean;
214
+ } & react.RefAttributes<HTMLButtonElement>>;
215
+ type SelectContentProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
216
+ /** Render without Portal — use inside nested overlays (e.g. ColorPicker popover). */
217
+ portalled?: boolean;
218
+ };
219
+ declare const SelectContent: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
220
+ /** Render without Portal — use inside nested overlays (e.g. ColorPicker popover). */
221
+ portalled?: boolean;
222
+ } & react.RefAttributes<HTMLDivElement>>;
223
+ type SelectLabelProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Label>;
224
+ declare const SelectLabel: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
225
+ type SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
226
+ /** Figma Function variant (default Action Item) */
227
+ itemFunction?: SelectItemFunction;
228
+ /** Figma Type variant */
229
+ layout?: SelectItemLayout;
230
+ leftIcon?: ReactNode;
231
+ showLeftIcon?: boolean;
232
+ rightIcon?: ReactNode;
233
+ showRightIcon?: boolean;
234
+ badge?: ReactNode;
235
+ showBadge?: boolean;
236
+ showMoreFunction?: boolean;
237
+ /** Inline action before the function icon (Figma MoreFunction) */
238
+ moreAction?: ReactNode;
239
+ /** Override trailing function slot (Figma function icon) */
240
+ icon?: ReactNode;
241
+ /** Show trailing function icon (Figma showFunctionIcon; hidden when layout=`checked` and selected) */
242
+ showFunctionIcon?: boolean;
243
+ /** People layout — 26px avatar node; defaults to UsersUserCircle */
244
+ avatar?: ReactNode;
245
+ /** People layout — secondary caption line */
246
+ subtitle?: ReactNode;
247
+ };
248
+ declare const SelectItem: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
249
+ /** Figma Function variant (default Action Item) */
250
+ itemFunction?: SelectItemFunction;
251
+ /** Figma Type variant */
252
+ layout?: SelectItemLayout;
253
+ leftIcon?: ReactNode;
254
+ showLeftIcon?: boolean;
255
+ rightIcon?: ReactNode;
256
+ showRightIcon?: boolean;
257
+ badge?: ReactNode;
258
+ showBadge?: boolean;
259
+ showMoreFunction?: boolean;
260
+ /** Inline action before the function icon (Figma MoreFunction) */
261
+ moreAction?: ReactNode;
262
+ /** Override trailing function slot (Figma function icon) */
263
+ icon?: ReactNode;
264
+ /** Show trailing function icon (Figma showFunctionIcon; hidden when layout=`checked` and selected) */
265
+ showFunctionIcon?: boolean;
266
+ /** People layout — 26px avatar node; defaults to UsersUserCircle */
267
+ avatar?: ReactNode;
268
+ /** People layout — secondary caption line */
269
+ subtitle?: ReactNode;
270
+ } & react.RefAttributes<HTMLDivElement>>;
271
+ type SelectSubMenuProps = SelectSubMenuMarkerProps;
272
+ type SelectSubItemProps = {
273
+ children: ReactNode;
274
+ className?: string;
275
+ disabled?: boolean;
276
+ /** Figma Function variant (default Action Item — trailing chevron) */
277
+ itemFunction?: SelectItemFunction;
278
+ /** Figma Type variant */
279
+ layout?: SelectItemLayout;
280
+ leftIcon?: ReactNode;
281
+ showLeftIcon?: boolean;
282
+ rightIcon?: ReactNode;
283
+ showRightIcon?: boolean;
284
+ badge?: ReactNode;
285
+ showBadge?: boolean;
286
+ showMoreFunction?: boolean;
287
+ moreAction?: ReactNode;
288
+ icon?: ReactNode;
289
+ showFunctionIcon?: boolean;
290
+ avatar?: ReactNode;
291
+ subtitle?: ReactNode;
292
+ /** Popover side when space allows (default right). Flips to left on collision. */
293
+ side?: "left" | "right";
294
+ sideOffset?: number;
295
+ /** Render flyout in a Portal (default false — keeps panel inside SelectContent). */
296
+ portalled?: boolean;
297
+ };
298
+ /**
299
+ * Figma Select Menu Item with nested sub-menu — opens a flyout panel on hover/focus.
300
+ * Compose with {@link SelectSubMenu} for sub-menu items.
301
+ */
302
+ declare const SelectSubItem: react.ForwardRefExoticComponent<SelectSubItemProps & react.RefAttributes<HTMLDivElement>>;
303
+ /** People layout convenience alias — same as `<SelectSubItem layout="people" … />`. */
304
+ type SelectSubItemPeopleProps = Omit<SelectSubItemProps, "layout">;
305
+ declare const SelectSubItemPeople: react.ForwardRefExoticComponent<SelectSubItemPeopleProps & react.RefAttributes<HTMLDivElement>>;
306
+ /** People layout convenience alias — same as `<SelectItem layout="people" … />`. */
307
+ type SelectItemPeopleProps = Omit<SelectItemProps, "layout">;
308
+ declare const SelectItemPeople: react.ForwardRefExoticComponent<SelectItemPeopleProps & react.RefAttributes<HTMLDivElement>>;
309
+ type SelectSeparatorProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>;
310
+ declare const SelectSeparator: react.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
311
+ /** Convenience wrapper matching Figma Select Menu Item Group */
312
+ type SelectItemGroupProps = {
313
+ label?: ReactNode;
314
+ showDivider?: boolean;
315
+ children: ReactNode;
316
+ className?: string;
317
+ };
318
+ declare function SelectItemGroup({ label, showDivider, children, className, }: SelectItemGroupProps): react.JSX.Element;
319
+
320
+ declare const Label: react.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
321
+
322
+ /** Figma Components → Information Display → Badge (also used in BaseInput badge area) */
323
+ type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
324
+ leftIcon?: ReactNode;
325
+ rightIcon?: ReactNode;
326
+ children: ReactNode;
327
+ };
328
+ declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
329
+ leftIcon?: ReactNode;
330
+ rightIcon?: ReactNode;
331
+ children: ReactNode;
332
+ } & react.RefAttributes<HTMLSpanElement>>;
333
+
334
+ /** Figma Components → Loading Icon */
335
+ type LoadingLevel = "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption";
336
+ type LoadingMode = "theme" | "themeText" | "black" | "white" | "inherit";
337
+ declare const loadingVariants: (props?: ({
338
+ level?: "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption" | null | undefined;
339
+ mode?: "theme" | "themeText" | "black" | "white" | "inherit" | null | undefined;
340
+ lineHeightFix?: boolean | null | undefined;
341
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
342
+ declare const BUTTON_SIZE_TO_LOADING_LEVEL: {
343
+ readonly tiny: "caption";
344
+ readonly small: "text";
345
+ readonly regular: "text";
346
+ readonly big: "text";
347
+ };
348
+ type LoadingButtonSize = keyof typeof BUTTON_SIZE_TO_LOADING_LEVEL;
349
+ declare function loadingLevelForButtonSize(size: LoadingButtonSize): LoadingLevel;
350
+ type LoadingProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof loadingVariants> & {
351
+ /** Accessible name; omit when decorative (`aria-hidden`). */
352
+ label?: string;
353
+ };
354
+ declare const Loading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
355
+ level?: "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption" | null | undefined;
356
+ mode?: "theme" | "themeText" | "black" | "white" | "inherit" | null | undefined;
357
+ lineHeightFix?: boolean | null | undefined;
358
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & {
359
+ /** Accessible name; omit when decorative (`aria-hidden`). */
360
+ label?: string;
361
+ } & react.RefAttributes<HTMLSpanElement>>;
362
+
363
+ /** Figma Components → Information Collect → Checkbox */
364
+ type CheckboxGroupDirection = "vertical" | "horizontal";
365
+ type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
366
+ /** Figma Checkbox `Round` */
367
+ round?: boolean;
368
+ };
369
+ declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
370
+ /** Figma Checkbox `Round` */
371
+ round?: boolean;
372
+ } & react.RefAttributes<HTMLButtonElement>>;
373
+ type CheckboxGroupProps = ComponentPropsWithoutRef<"div"> & {
374
+ /** Figma Checkbox Input Group `Direction` */
375
+ direction?: CheckboxGroupDirection;
376
+ };
377
+ declare const CheckboxGroup: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
378
+ /** Figma Checkbox Input Group `Direction` */
379
+ direction?: CheckboxGroupDirection;
380
+ } & react.RefAttributes<HTMLDivElement>>;
381
+ type CheckboxInputProps = Omit<CheckboxProps, "children"> & {
382
+ /** Figma Typeface primary line */
383
+ title: ReactNode;
384
+ /** Figma Typeface caption line */
385
+ description?: ReactNode;
386
+ icon?: ReactNode;
387
+ };
388
+ declare const CheckboxInput: react.ForwardRefExoticComponent<Omit<CheckboxProps, "children"> & {
389
+ /** Figma Typeface primary line */
390
+ title: ReactNode;
391
+ /** Figma Typeface caption line */
392
+ description?: ReactNode;
393
+ icon?: ReactNode;
394
+ } & react.RefAttributes<HTMLButtonElement>>;
395
+
396
+ /** Figma Components → Information Collect → Radio */
397
+ type RadioGroupDirection = "vertical" | "horizontal";
398
+ type RadioInputVariant = "normal" | "card";
399
+ type RadioGroupProps = ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
400
+ /** Figma Radio Input Group `Direction` */
401
+ direction?: RadioGroupDirection;
402
+ };
403
+ declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
404
+ /** Figma Radio Input Group `Direction` */
405
+ direction?: RadioGroupDirection;
406
+ } & react.RefAttributes<HTMLDivElement>>;
407
+ type RadioGroupItemProps = ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
408
+ declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
409
+ type RadioInputProps = Omit<RadioGroupItemProps, "children"> & {
410
+ /** Figma Typeface primary line */
411
+ title: ReactNode;
412
+ /** Figma Typeface caption line */
413
+ description?: ReactNode;
414
+ icon?: ReactNode;
415
+ /** Figma Radio Input `Style` */
416
+ variant?: RadioInputVariant;
417
+ };
418
+ declare const RadioInput: react.ForwardRefExoticComponent<Omit<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref">, "children"> & {
419
+ /** Figma Typeface primary line */
420
+ title: ReactNode;
421
+ /** Figma Typeface caption line */
422
+ description?: ReactNode;
423
+ icon?: ReactNode;
424
+ /** Figma Radio Input `Style` */
425
+ variant?: RadioInputVariant;
426
+ } & react.RefAttributes<HTMLButtonElement>>;
427
+
428
+ /** Figma Components → Basic Input → Switch */
429
+ type SwitchSize = "regular" | "small";
430
+ type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
431
+ size?: SwitchSize;
432
+ };
433
+ declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
434
+ size?: SwitchSize;
435
+ } & react.RefAttributes<HTMLButtonElement>>;
436
+
437
+ /** Figma Components → Basic Input → Link */
438
+ type LinkLevel = "caption" | "text";
439
+ type LinkMode = "noBackground" | "noBackgroundCustom";
440
+ type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "disabled"> & {
441
+ level?: LinkLevel;
442
+ mode?: LinkMode;
443
+ iconOnly?: boolean;
444
+ leftIcon?: ReactNode;
445
+ rightIcon?: ReactNode;
446
+ asChild?: boolean;
447
+ disabled?: boolean;
448
+ };
449
+ declare const Link: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "disabled"> & {
450
+ level?: LinkLevel;
451
+ mode?: LinkMode;
452
+ iconOnly?: boolean;
453
+ leftIcon?: ReactNode;
454
+ rightIcon?: ReactNode;
455
+ asChild?: boolean;
456
+ disabled?: boolean;
457
+ } & react.RefAttributes<HTMLAnchorElement>>;
458
+
459
+ /** Figma Components → Basic Input → Segmentator */
460
+ type SegmentatorMode = "nested" | "tiled";
461
+ type SegmentatorGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
462
+ value?: string;
463
+ defaultValue?: string;
464
+ onValueChange?: (value: string) => void;
465
+ mode?: SegmentatorMode;
466
+ allRound?: boolean;
467
+ disabled?: boolean;
468
+ };
469
+ declare const SegmentatorGroup: react.ForwardRefExoticComponent<Omit<react.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
470
+ value?: string;
471
+ defaultValue?: string;
472
+ onValueChange?: (value: string) => void;
473
+ mode?: SegmentatorMode;
474
+ allRound?: boolean;
475
+ disabled?: boolean;
476
+ } & react.RefAttributes<HTMLDivElement>>;
477
+ type SegmentatorItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
478
+ value: string;
479
+ leftIcon?: ReactNode;
480
+ rightIcon?: ReactNode;
481
+ iconOnly?: boolean;
482
+ };
483
+ declare const SegmentatorItem: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> & {
484
+ value: string;
485
+ leftIcon?: ReactNode;
486
+ rightIcon?: ReactNode;
487
+ iconOnly?: boolean;
488
+ } & react.RefAttributes<HTMLButtonElement>>;
489
+
490
+ type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
491
+ label?: string;
492
+ htmlFor?: string;
493
+ description?: ReactNode;
494
+ error?: string;
495
+ required?: boolean;
496
+ };
497
+ declare const FormField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
498
+ label?: string;
499
+ htmlFor?: string;
500
+ description?: ReactNode;
501
+ error?: string;
502
+ required?: boolean;
503
+ } & react.RefAttributes<HTMLDivElement>>;
504
+
505
+ /** Figma Components → System Composition → Typography (128:85) */
506
+ type TypographyLevel = "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption";
507
+ type TypographyContent = "text" | "number";
508
+ type TypographyTone = "default" | "white";
509
+ declare const typographyVariants: (props?: ({
510
+ level?: "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption" | null | undefined;
511
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
512
+ type TypographyProps = HTMLAttributes<HTMLElement> & VariantProps<typeof typographyVariants> & {
513
+ /** Figma `Content` — text vs numeric styling */
514
+ content?: TypographyContent;
515
+ /** Figma `White` — light text on dark surfaces */
516
+ tone?: TypographyTone;
517
+ asChild?: boolean;
518
+ as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label";
519
+ };
520
+ declare const Typography: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
521
+ level?: "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption" | null | undefined;
522
+ } & class_variance_authority_types.ClassProp) | undefined) => string> & {
523
+ /** Figma `Content` — text vs numeric styling */
524
+ content?: TypographyContent;
525
+ /** Figma `White` — light text on dark surfaces */
526
+ tone?: TypographyTone;
527
+ asChild?: boolean;
528
+ as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label";
529
+ } & react.RefAttributes<HTMLSpanElement>>;
530
+
531
+ /** Figma Components → System Composition → Typeface (527:56311) */
532
+ type TypefaceContent = "allCustom" | "textCaption" | "textCaptionSubtitle" | "textTitle" | "textHeadline2" | "textHeadline1";
533
+ type TypefaceProps = Omit<HTMLAttributes<HTMLDivElement>, "content"> & {
534
+ /** Figma `Content` preset */
535
+ content?: TypefaceContent;
536
+ /** Primary line — overrides preset first line */
537
+ primary?: ReactNode;
538
+ /** Secondary line — overrides preset second line */
539
+ secondary?: ReactNode;
540
+ /** Tertiary line — used by `textCaptionSubtitle` */
541
+ tertiary?: ReactNode;
542
+ /** Per-line content mode for numeric text */
543
+ primaryContent?: TypographyContent;
544
+ secondaryContent?: TypographyContent;
545
+ tertiaryContent?: TypographyContent;
546
+ tone?: TypographyTone;
547
+ };
548
+ declare const Typeface: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "content"> & {
549
+ /** Figma `Content` preset */
550
+ content?: TypefaceContent;
551
+ /** Primary line — overrides preset first line */
552
+ primary?: ReactNode;
553
+ /** Secondary line — overrides preset second line */
554
+ secondary?: ReactNode;
555
+ /** Tertiary line — used by `textCaptionSubtitle` */
556
+ tertiary?: ReactNode;
557
+ /** Per-line content mode for numeric text */
558
+ primaryContent?: TypographyContent;
559
+ secondaryContent?: TypographyContent;
560
+ tertiaryContent?: TypographyContent;
561
+ tone?: TypographyTone;
562
+ } & react.RefAttributes<HTMLDivElement>>;
563
+ /** Convenience helper for two-line label + caption pairs (Radio, Checkbox, etc.) */
564
+ type TypefacePairProps = Omit<TypefaceProps, "content"> & {
565
+ title: ReactNode;
566
+ description?: ReactNode;
567
+ };
568
+ declare const TypefacePair: react.ForwardRefExoticComponent<Omit<TypefaceProps, "content"> & {
569
+ title: ReactNode;
570
+ description?: ReactNode;
571
+ } & react.RefAttributes<HTMLDivElement>>;
572
+
573
+ type InputGroupProps = HTMLAttributes<HTMLDivElement> & {
574
+ orientation?: "horizontal" | "vertical";
575
+ };
576
+ declare const InputGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
577
+ orientation?: "horizontal" | "vertical";
578
+ } & react.RefAttributes<HTMLDivElement>>;
579
+ declare const InputGroupAddon: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
580
+
581
+ type StackProps = HTMLAttributes<HTMLDivElement> & {
582
+ gap?: "inside" | "component" | "content" | "block" | "page";
583
+ direction?: "row" | "column";
584
+ };
585
+ declare const Stack: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
586
+ gap?: "inside" | "component" | "content" | "block" | "page";
587
+ direction?: "row" | "column";
588
+ } & react.RefAttributes<HTMLDivElement>>;
589
+ declare const Fieldset: react.ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
590
+ legend?: string;
591
+ } & react.RefAttributes<HTMLFieldSetElement>>;
592
+
593
+ type ColorFormat = "hex" | "rgb" | "hsl";
594
+ type HSVA = {
595
+ h: number;
596
+ s: number;
597
+ v: number;
598
+ a: number;
599
+ };
600
+ declare const DEFAULT_COLOR = "#FF0000";
601
+
602
+ type ColorPickerChangeMeta = {
603
+ source?: string;
604
+ };
605
+ type UseColorPickerStateOptions = {
606
+ value?: string;
607
+ defaultValue?: string;
608
+ onChange?: (value: string, meta?: ColorPickerChangeMeta) => void;
609
+ format?: ColorFormat;
610
+ defaultFormat?: ColorFormat;
611
+ onFormatChange?: (format: ColorFormat) => void;
612
+ };
613
+ declare function useColorPickerState({ value: controlledValue, defaultValue, onChange, format: controlledFormat, defaultFormat, onFormatChange, }: UseColorPickerStateOptions): {
614
+ value: string;
615
+ format: ColorFormat;
616
+ setValue: (next: string, meta?: ColorPickerChangeMeta) => void;
617
+ hsva: HSVA;
618
+ setHsva: (partial: Partial<HSVA>, meta?: ColorPickerChangeMeta) => void;
619
+ setFormat: (next: ColorFormat) => void;
620
+ };
621
+
622
+ type ColorPickerProps = UseColorPickerStateOptions & {
623
+ children: ReactNode;
624
+ className?: string;
625
+ disabled?: boolean;
626
+ presets?: string[];
627
+ onPresetsChange?: (presets: string[]) => void;
628
+ maxPresets?: number;
629
+ open?: boolean;
630
+ defaultOpen?: boolean;
631
+ onOpenChange?: (open: boolean) => void;
632
+ };
633
+ declare function ColorPicker({ children, className, disabled, presets, onPresetsChange, maxPresets, value, defaultValue, onChange, format, defaultFormat, onFormatChange, open: controlledOpen, defaultOpen, onOpenChange, }: ColorPickerProps): react.JSX.Element;
634
+ type ColorPickerTriggerProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
635
+ size?: "regular" | "big";
636
+ allRound?: boolean;
637
+ placeholder?: string;
638
+ className?: string;
639
+ };
640
+ declare const ColorPickerTrigger: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
641
+ size?: "regular" | "big";
642
+ allRound?: boolean;
643
+ placeholder?: string;
644
+ className?: string;
645
+ } & react.RefAttributes<HTMLButtonElement>>;
646
+ type ColorPickerContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
647
+ showEyedropper?: boolean;
648
+ showPresets?: boolean;
649
+ };
650
+ declare const ColorPickerContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
651
+ showEyedropper?: boolean;
652
+ showPresets?: boolean;
653
+ } & react.RefAttributes<HTMLDivElement>>;
654
+
655
+ type ColorPickerPanelProps = UseColorPickerStateOptions & {
656
+ className?: string;
657
+ disabled?: boolean;
658
+ presets?: string[];
659
+ onPresetsChange?: (presets: string[]) => void;
660
+ maxPresets?: number;
661
+ showEyedropper?: boolean;
662
+ showPresets?: boolean;
663
+ };
664
+ declare function ColorPickerPanel({ className, disabled, presets, onPresetsChange, maxPresets, showEyedropper, showPresets, value, defaultValue, onChange, format, defaultFormat, onFormatChange, }: ColorPickerPanelProps): react.JSX.Element;
665
+
666
+ type ColorPickButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
667
+ color: string;
668
+ selected?: boolean;
669
+ };
670
+ declare const ColorPickButton: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
671
+ color: string;
672
+ selected?: boolean;
673
+ } & react.RefAttributes<HTMLButtonElement>>;
674
+
675
+ type ColorPickerAreaProps = {
676
+ className?: string;
677
+ disabled?: boolean;
678
+ } & Pick<UseColorPickerStateOptions, "value" | "defaultValue" | "onChange">;
679
+ declare function ColorPickerArea({ className, disabled, value: valueProp, defaultValue, onChange, }: ColorPickerAreaProps): react.JSX.Element;
680
+
681
+ type ColorPickerSliderKind = "hue" | "alpha";
682
+ type ColorPickerSliderProps = {
683
+ kind: ColorPickerSliderKind;
684
+ className?: string;
685
+ disabled?: boolean;
686
+ } & Pick<UseColorPickerStateOptions, "value" | "defaultValue" | "onChange">;
687
+ declare function ColorPickerSlider({ kind, className, disabled, value: valueProp, defaultValue, onChange, }: ColorPickerSliderProps): react.JSX.Element;
688
+
689
+ declare global {
690
+ interface Window {
691
+ EyeDropper?: new () => {
692
+ open: () => Promise<{
693
+ sRGBHex: string;
694
+ }>;
695
+ };
696
+ }
697
+ }
698
+ type ColorPickerInputsProps = {
699
+ className?: string;
700
+ disabled?: boolean;
701
+ showEyedropper?: boolean;
702
+ } & Pick<UseColorPickerStateOptions, "value" | "defaultValue" | "onChange" | "format" | "onFormatChange">;
703
+ declare function ColorPickerInputs({ className, disabled, showEyedropper, value: valueProp, defaultValue, onChange, format: formatProp, onFormatChange, }: ColorPickerInputsProps): react.JSX.Element;
704
+
705
+ type ColorPickerPresetsProps = {
706
+ className?: string;
707
+ presets?: string[];
708
+ onPresetsChange?: (presets: string[]) => void;
709
+ maxPresets?: number;
710
+ disabled?: boolean;
711
+ };
712
+ declare function ColorPickerPresets({ className, presets: presetsProp, onPresetsChange: onPresetsChangeProp, maxPresets: maxPresetsProp, disabled, }: ColorPickerPresetsProps): react.JSX.Element;
713
+
714
+ /** Figma Components → Information Collect → Cascader Input */
715
+ type CascaderSize = "regular" | "big";
716
+ /** Figma Cascader Menu Item `Function` variant */
717
+ type CascaderItemFunction = "simple" | "checkbox" | "form-checkbox" | "radio" | "form-radio" | "search" | "custom";
718
+ /** Figma Cascader Menu Item `Type` variant */
719
+ type CascaderItemLayout = "default" | "title" | "custom";
720
+ type CascaderOption = {
721
+ value: string;
722
+ label: ReactNode;
723
+ disabled?: boolean;
724
+ children?: CascaderOption[];
725
+ };
726
+ type CascaderProps = {
727
+ children: ReactNode;
728
+ options?: CascaderOption[];
729
+ value?: string[];
730
+ defaultValue?: string[];
731
+ onValueChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
732
+ open?: boolean;
733
+ defaultOpen?: boolean;
734
+ onOpenChange?: (open: boolean) => void;
735
+ disabled?: boolean;
736
+ size?: CascaderSize;
737
+ /** Select parent nodes — Figma allows any-level selection (default true). */
738
+ changeOnSelect?: boolean;
739
+ className?: string;
740
+ };
741
+ /**
742
+ * Radix Popover closes on `window` blur (e.g. focusing DevTools). Suppress only
743
+ * blur-initiated closes; pointer-down (outside click, item select, trigger toggle)
744
+ * and Escape must still dismiss on the first interaction.
745
+ */
746
+ declare function Cascader({ children, options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, disabled, size, changeOnSelect, className, }: CascaderProps): react.JSX.Element;
747
+ type CascaderTriggerProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
748
+ size?: CascaderSize;
749
+ allRound?: boolean;
750
+ leftIcon?: ReactNode;
751
+ rightIcon?: ReactNode;
752
+ placeholder?: string;
753
+ error?: boolean;
754
+ /** Override display when using manual composition without `options`. */
755
+ displayValue?: ReactNode;
756
+ separator?: string;
757
+ className?: string;
758
+ };
759
+ declare const CascaderTrigger: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
760
+ size?: CascaderSize;
761
+ allRound?: boolean;
762
+ leftIcon?: ReactNode;
763
+ rightIcon?: ReactNode;
764
+ placeholder?: string;
765
+ error?: boolean;
766
+ /** Override display when using manual composition without `options`. */
767
+ displayValue?: ReactNode;
768
+ separator?: string;
769
+ className?: string;
770
+ } & react.RefAttributes<HTMLButtonElement>>;
771
+ type CascaderContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
772
+ portalled?: boolean;
773
+ className?: string;
774
+ };
775
+ declare const CascaderContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
776
+ portalled?: boolean;
777
+ className?: string;
778
+ } & react.RefAttributes<HTMLDivElement>>;
779
+ type CascaderMenuProps = {
780
+ children?: ReactNode;
781
+ className?: string;
782
+ };
783
+ /** Figma Cascader Menu — horizontal column container (`348:13915`). */
784
+ declare const CascaderMenu: react.ForwardRefExoticComponent<CascaderMenuProps & react.RefAttributes<HTMLDivElement>>;
785
+ type CascaderColumnProps = {
786
+ children: ReactNode;
787
+ className?: string;
788
+ /** Slide + fade in when a new cascade column appears (options-driven menus set this automatically). */
789
+ animateEnter?: boolean;
790
+ /** Slide + fade out before unmount when a cascade column is removed (options-driven menus set this automatically). */
791
+ animateExit?: boolean;
792
+ /** Frozen layout slot for exit overlay columns (keeps flex width stable while animating out). */
793
+ exitLayout?: {
794
+ left: number;
795
+ width: number;
796
+ };
797
+ };
798
+ /** Figma Cascader Menu Item Group Group — single cascade column (`345:20543`). */
799
+ declare const CascaderColumn: react.ForwardRefExoticComponent<CascaderColumnProps & react.RefAttributes<HTMLDivElement>>;
800
+ type CascaderItemGroupProps = {
801
+ label?: ReactNode;
802
+ showDivider?: boolean;
803
+ children: ReactNode;
804
+ className?: string;
805
+ };
806
+ /** Figma Cascader Menu Item Group (`345:16552`). */
807
+ declare function CascaderItemGroup({ label, showDivider, children, className, }: CascaderItemGroupProps): react.JSX.Element;
808
+ type CascaderItemProps = {
809
+ value: string;
810
+ pathPrefix?: string[];
811
+ itemFunction?: CascaderItemFunction;
812
+ layout?: CascaderItemLayout;
813
+ leftIcon?: ReactNode;
814
+ showLeftIcon?: boolean;
815
+ rightIcon?: ReactNode;
816
+ showRightIcon?: boolean;
817
+ badge?: ReactNode;
818
+ showBadge?: boolean;
819
+ showFunctionIcon?: boolean;
820
+ icon?: ReactNode;
821
+ disabled?: boolean;
822
+ children?: ReactNode;
823
+ className?: string;
824
+ hasChildren?: boolean;
825
+ };
826
+ /** Figma Cascader Menu Item (`345:12487`). */
827
+ declare const CascaderItem: react.ForwardRefExoticComponent<CascaderItemProps & react.RefAttributes<HTMLButtonElement>>;
828
+ type CascaderOptionsMenuProps = {
829
+ className?: string;
830
+ };
831
+ /** Renders cascade columns from `Cascader` `options` prop. */
832
+ declare function CascaderOptionsMenu({ className }: CascaderOptionsMenuProps): react.JSX.Element;
833
+ type CascaderFieldProps = Omit<CascaderProps, "children"> & Omit<CascaderTriggerProps, "displayValue"> & {
834
+ contentClassName?: string;
835
+ menuClassName?: string;
836
+ };
837
+ /** Convenience field — trigger + options-driven menu. */
838
+ declare function CascaderField({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, size, changeOnSelect, className, contentClassName, menuClassName, allRound, leftIcon, rightIcon, placeholder, error, separator, ...triggerProps }: CascaderFieldProps): react.JSX.Element;
839
+
840
+ type PopoverProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
841
+ /**
842
+ * Radix Popover closes on `window` blur (e.g. focusing DevTools). Suppress only
843
+ * blur-initiated closes; pointer-down (outside click, trigger toggle) and Escape
844
+ * must still dismiss on the first interaction.
845
+ */
846
+ declare function Popover({ open: openProp, defaultOpen, onOpenChange, modal, ...props }: PopoverProps): react.JSX.Element;
847
+ declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
848
+ declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
849
+ type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
850
+ /** Render without Portal — use inside nested overlays. */
851
+ portalled?: boolean;
852
+ /** Show a caret arrow pointing at the trigger (Figma with-arrow variant). */
853
+ showArrow?: boolean;
854
+ };
855
+ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
856
+ /** Render without Portal — use inside nested overlays. */
857
+ portalled?: boolean;
858
+ /** Show a caret arrow pointing at the trigger (Figma with-arrow variant). */
859
+ showArrow?: boolean;
860
+ } & react.RefAttributes<HTMLDivElement>>;
861
+
862
+ /** Default show delay — 300ms per ALD / Radix convention. */
863
+ declare const TOOLTIP_DELAY_DURATION = 300;
864
+ type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
865
+ declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }: TooltipProviderProps): react.JSX.Element;
866
+ declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
867
+ declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
868
+ type TooltipContentProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
869
+ /** Show a caret arrow pointing at the trigger (default true). */
870
+ showArrow?: boolean;
871
+ };
872
+ declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
873
+ /** Show a caret arrow pointing at the trigger (default true). */
874
+ showArrow?: boolean;
875
+ } & react.RefAttributes<HTMLDivElement>>;
876
+
877
+ /** Figma List item `Type` variant (738:148304, 647:87555) */
878
+ type ListItemType = "action" | "switch" | "select";
879
+ /** Figma List item `left icon setting` variant */
880
+ type ListItemLeading = "shaped" | "default" | "none";
881
+ type ListProps = HTMLAttributes<HTMLDivElement> & {
882
+ /** Optional section title above the list card */
883
+ title?: ReactNode;
884
+ };
885
+ /** Figma Structure Navigation → List root */
886
+ declare const List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
887
+ /** Optional section title above the list card */
888
+ title?: ReactNode;
889
+ } & react.RefAttributes<HTMLDivElement>>;
890
+ type ListTitleProps = HTMLAttributes<HTMLDivElement>;
891
+ /** Figma List title row — Typography text level */
892
+ declare const ListTitle: react.ForwardRefExoticComponent<ListTitleProps & react.RefAttributes<HTMLDivElement>>;
893
+ type ListGroupProps = HTMLAttributes<HTMLDivElement>;
894
+ /** Figma List card container — rounded white surface for items */
895
+ declare const ListGroup: react.ForwardRefExoticComponent<ListGroupProps & react.RefAttributes<HTMLDivElement>>;
896
+ type ListItemGroupProps = {
897
+ label?: ReactNode;
898
+ children: ReactNode;
899
+ className?: string;
900
+ };
901
+ /** Convenience wrapper — titled list section (Figma List title + card) */
902
+ declare function ListItemGroup({ label, children, className }: ListItemGroupProps): react.JSX.Element;
903
+ type ListDividerProps = HTMLAttributes<HTMLSpanElement>;
904
+ /** Vertical divider between trailing actions (Figma `last` separator) */
905
+ declare const ListDivider: react.ForwardRefExoticComponent<ListDividerProps & react.RefAttributes<HTMLSpanElement>>;
906
+ type ListSeparatorProps = HTMLAttributes<HTMLHRElement>;
907
+ /** Horizontal separator between list groups */
908
+ declare const ListSeparator: react.ForwardRefExoticComponent<ListSeparatorProps & react.RefAttributes<HTMLHRElement>>;
909
+ type ListItemProps = ComponentPropsWithoutRef<"div"> & {
910
+ /** Figma `Type` variant */
911
+ itemType?: ListItemType;
912
+ /** Figma `left icon setting` variant */
913
+ leading?: ListItemLeading;
914
+ /** Leading icon node — defaults to GeneralSetting */
915
+ icon?: ReactNode;
916
+ /** Primary line (Typeface text) */
917
+ title: ReactNode;
918
+ /** Secondary line (Typeface caption) */
919
+ subtitle?: ReactNode;
920
+ /** Primary trailing button label */
921
+ actionLabel?: ReactNode;
922
+ /** Override primary trailing button */
923
+ action?: ReactNode;
924
+ /** Secondary icon-only button for `action` type */
925
+ secondaryAction?: ReactNode;
926
+ /** Trailing select slot for `select` type */
927
+ select?: ReactNode;
928
+ /** Trailing switch props for `switch` type */
929
+ switchProps?: Omit<SwitchProps, "size">;
930
+ /** Fully custom trailing region — overrides type presets */
931
+ trailing?: ReactNode;
932
+ selected?: boolean;
933
+ disabled?: boolean;
934
+ /** Enables hover highlight (auto when `onClick` is set) */
935
+ interactive?: boolean;
936
+ };
937
+ /** Figma Structure Navigation → List item */
938
+ declare const ListItem: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
939
+ /** Figma `Type` variant */
940
+ itemType?: ListItemType;
941
+ /** Figma `left icon setting` variant */
942
+ leading?: ListItemLeading;
943
+ /** Leading icon node — defaults to GeneralSetting */
944
+ icon?: ReactNode;
945
+ /** Primary line (Typeface text) */
946
+ title: ReactNode;
947
+ /** Secondary line (Typeface caption) */
948
+ subtitle?: ReactNode;
949
+ /** Primary trailing button label */
950
+ actionLabel?: ReactNode;
951
+ /** Override primary trailing button */
952
+ action?: ReactNode;
953
+ /** Secondary icon-only button for `action` type */
954
+ secondaryAction?: ReactNode;
955
+ /** Trailing select slot for `select` type */
956
+ select?: ReactNode;
957
+ /** Trailing switch props for `switch` type */
958
+ switchProps?: Omit<SwitchProps, "size">;
959
+ /** Fully custom trailing region — overrides type presets */
960
+ trailing?: ReactNode;
961
+ selected?: boolean;
962
+ disabled?: boolean;
963
+ /** Enables hover highlight (auto when `onClick` is set) */
964
+ interactive?: boolean;
965
+ } & react.RefAttributes<HTMLDivElement>>;
966
+
967
+ /** Toggle `html[data-aviala-keyboard-focus]` for keyboard-only focus ring CSS. */
968
+ declare function initKeyboardFocus(): void;
969
+ declare function cn(...inputs: ClassValue[]): string;
970
+
971
+ export { Badge, type BadgeProps, Button, type ButtonMode, type ButtonProps, type ButtonSize, Cascader, CascaderColumn, type CascaderColumnProps, CascaderContent, type CascaderContentProps, CascaderField, type CascaderFieldProps, CascaderItem, type CascaderItemFunction, CascaderItemGroup, type CascaderItemGroupProps, type CascaderItemLayout, type CascaderItemProps, CascaderMenu, type CascaderMenuProps, type CascaderOption, CascaderOptionsMenu, type CascaderOptionsMenuProps, type CascaderProps, type CascaderSize, CascaderTrigger, type CascaderTriggerProps, Checkbox, CheckboxGroup, type CheckboxGroupDirection, type CheckboxGroupProps, CheckboxInput, type CheckboxInputProps, type CheckboxProps, type ColorFormat, ColorPickButton, type ColorPickButtonProps, ColorPicker, ColorPickerArea, type ColorPickerAreaProps, ColorPickerContent, type ColorPickerContentProps, ColorPickerInputs, type ColorPickerInputsProps, ColorPickerPanel, type ColorPickerPanelProps, ColorPickerPresets, type ColorPickerPresetsProps, type ColorPickerProps, ColorPickerSlider, type ColorPickerSliderProps, ColorPickerTrigger, type ColorPickerTriggerProps, DEFAULT_COLOR, Fieldset, FormField, type FormFieldProps, type HSVA, Input, InputGroup, InputGroupAddon, type InputGroupProps, type InputProps, type InputSize, Label, Link, type LinkLevel, type LinkMode, type LinkProps, List, ListDivider, type ListDividerProps, ListGroup, type ListGroupProps, ListItem, ListItemGroup, type ListItemGroupProps, type ListItemLeading, type ListItemProps, type ListItemType, type ListProps, ListSeparator, type ListSeparatorProps, ListTitle, type ListTitleProps, Loading, type LoadingButtonSize, type LoadingLevel, type LoadingMode, type LoadingProps, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, RadioGroup, type RadioGroupDirection, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RadioInput, type RadioInputProps, type RadioInputVariant, SegmentatorGroup, type SegmentatorGroupProps, SegmentatorItem, type SegmentatorItemProps, type SegmentatorMode, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemFunction, SelectItemGroup, type SelectItemGroupProps, type SelectItemLayout, SelectItemPeople, type SelectItemPeopleProps, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectSeparator, type SelectSeparatorProps, type SelectSize, SelectSubItem, SelectSubItemPeople, type SelectSubItemPeopleProps, type SelectSubItemProps, SelectSubMenu, type SelectSubMenuProps, SelectTrigger, type SelectTriggerProps, SelectValue, Stack, type StackProps, Switch, type SwitchProps, type SwitchSize, TOOLTIP_DELAY_DURATION, Textarea, type TextareaProps, type TextareaSize, ThemeProvider, type ThemeProviderProps, ThemeScript, initKeyboardFocus, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, Typeface, type TypefaceContent, TypefacePair, type TypefacePairProps, type TypefaceProps, Typography, type TypographyContent, type TypographyLevel, type TypographyProps, type TypographyTone, type UseColorPickerStateOptions, buttonVariants, cn, inputRootVariants, loadingLevelForButtonSize, typographyVariants, useColorPickerState, useTheme };