@aviala-design/spiral 2.5.0 → 2.6.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/dist/component-changelogs.json +133 -0
- package/dist/index.cjs +2447 -1526
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +298 -24
- package/dist/index.d.ts +298 -24
- package/dist/index.js +2249 -1312
- package/dist/index.js.map +1 -1
- package/dist/props.json +129 -30
- package/dist/styles.css +35 -3
- package/package.json +8 -4
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, MouseEvent, AnchorHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNode, CSSProperties, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, MouseEvent, AnchorHTMLAttributes, Ref, ReactElement } from 'react';
|
|
3
3
|
import { ThemeMode, PaletteConfig, BaseNumbersDensity, ThemePreset } from '@aviala-design/tokens';
|
|
4
4
|
export { BaseNumbersDensity, DEFAULT_PALETTE_CONFIG, HueFamily, PALETTE_HUE_FAMILIES, PaletteConfig } from '@aviala-design/tokens';
|
|
5
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
@@ -9,6 +9,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
9
9
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
10
10
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
11
11
|
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
12
|
+
import * as react_hook_form from 'react-hook-form';
|
|
13
|
+
import { FieldValues, FieldPath, UseControllerProps, Control, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
|
|
12
14
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
13
15
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
14
16
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
@@ -53,11 +55,172 @@ declare function ThemeScript({ storageKey, defaultMode, defaultPrimary, defaultD
|
|
|
53
55
|
defaultDensity?: BaseNumbersDensity;
|
|
54
56
|
}): react.JSX.Element;
|
|
55
57
|
|
|
58
|
+
/** Spiral locale pack — Semi-style component dictionaries + BCP 47 `code` for Intl. */
|
|
59
|
+
type LocaleDatePicker = {
|
|
60
|
+
placeholder: string;
|
|
61
|
+
placeholderWithTime: string;
|
|
62
|
+
rangePlaceholder: string;
|
|
63
|
+
selectDate: string;
|
|
64
|
+
selectDateRange: string;
|
|
65
|
+
rangeTo: string;
|
|
66
|
+
calendar: string;
|
|
67
|
+
dateTimeSwitch: string;
|
|
68
|
+
previousMonth: string;
|
|
69
|
+
nextMonth: string;
|
|
70
|
+
previousYear: string;
|
|
71
|
+
nextYear: string;
|
|
72
|
+
selectMonthYear: string;
|
|
73
|
+
closeMonthYear: string;
|
|
74
|
+
/** Monday-first weekday short labels (7). */
|
|
75
|
+
weekdays: readonly [string, string, string, string, string, string, string];
|
|
76
|
+
year: string;
|
|
77
|
+
month: string;
|
|
78
|
+
selectYearMonth: string;
|
|
79
|
+
};
|
|
80
|
+
type LocaleTimePicker = {
|
|
81
|
+
placeholder: string;
|
|
82
|
+
panel: string;
|
|
83
|
+
selectTime: string;
|
|
84
|
+
hour: string;
|
|
85
|
+
minute: string;
|
|
86
|
+
};
|
|
87
|
+
type LocalePagination = {
|
|
88
|
+
jumpTo: string;
|
|
89
|
+
pageSize: string;
|
|
90
|
+
/** Template: `${size}` */
|
|
91
|
+
items: string;
|
|
92
|
+
pagePlaceholder: string;
|
|
93
|
+
morePages: string;
|
|
94
|
+
previous: string;
|
|
95
|
+
next: string;
|
|
96
|
+
pagination: string;
|
|
97
|
+
pageSizeAria: string;
|
|
98
|
+
};
|
|
99
|
+
type LocaleUpload = {
|
|
100
|
+
label: string;
|
|
101
|
+
title: string;
|
|
102
|
+
description: string;
|
|
103
|
+
};
|
|
104
|
+
type LocaleColorPicker = {
|
|
105
|
+
placeholder: string;
|
|
106
|
+
hue: string;
|
|
107
|
+
opacity: string;
|
|
108
|
+
saturationBrightness: string;
|
|
109
|
+
pickFromScreen: string;
|
|
110
|
+
hex: string;
|
|
111
|
+
rgb: string;
|
|
112
|
+
hsl: string;
|
|
113
|
+
opacityPercent: string;
|
|
114
|
+
};
|
|
115
|
+
type Locale = {
|
|
116
|
+
code: string;
|
|
117
|
+
DatePicker: LocaleDatePicker;
|
|
118
|
+
TimePicker: LocaleTimePicker;
|
|
119
|
+
Pagination: LocalePagination;
|
|
120
|
+
Upload: LocaleUpload;
|
|
121
|
+
Modal: {
|
|
122
|
+
close: string;
|
|
123
|
+
};
|
|
124
|
+
Feedback: {
|
|
125
|
+
close: string;
|
|
126
|
+
};
|
|
127
|
+
Alert: {
|
|
128
|
+
close: string;
|
|
129
|
+
};
|
|
130
|
+
ColorPicker: LocaleColorPicker;
|
|
131
|
+
Cascader: {
|
|
132
|
+
placeholder: string;
|
|
133
|
+
};
|
|
134
|
+
Loading: {
|
|
135
|
+
label: string;
|
|
136
|
+
};
|
|
137
|
+
Tag: {
|
|
138
|
+
remove: string;
|
|
139
|
+
};
|
|
140
|
+
NumberInput: {
|
|
141
|
+
increment: string;
|
|
142
|
+
decrement: string;
|
|
143
|
+
};
|
|
144
|
+
Textarea: {
|
|
145
|
+
resize: string;
|
|
146
|
+
};
|
|
147
|
+
Card: {
|
|
148
|
+
more: string;
|
|
149
|
+
};
|
|
150
|
+
List: {
|
|
151
|
+
more: string;
|
|
152
|
+
};
|
|
153
|
+
Breadcrumb: {
|
|
154
|
+
label: string;
|
|
155
|
+
showMore: string;
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
type LocaleComponentName = Exclude<keyof Locale, "code">;
|
|
159
|
+
|
|
160
|
+
/** Replace `${name}` placeholders (Semi-style). Unknown keys stay as-is. */
|
|
161
|
+
declare function interpolate(template: string, values: Record<string, string | number>): string;
|
|
162
|
+
|
|
163
|
+
type LocaleProviderProps = {
|
|
164
|
+
children: ReactNode;
|
|
165
|
+
/** Locale pack. Defaults to `zhCN`. */
|
|
166
|
+
locale?: Locale;
|
|
167
|
+
};
|
|
168
|
+
declare function LocaleProvider({ children, locale }: LocaleProviderProps): react.JSX.Element;
|
|
169
|
+
|
|
170
|
+
/** Current locale pack (falls back to zh-CN when no Provider). */
|
|
171
|
+
declare function useLocale(): Locale;
|
|
172
|
+
/** Messages for one component block (e.g. `Pagination`). */
|
|
173
|
+
declare function useLocaleMessages<K extends LocaleComponentName>(component: K): Locale[K];
|
|
174
|
+
|
|
175
|
+
declare const zhCN: Locale;
|
|
176
|
+
|
|
177
|
+
declare const enUS: Locale;
|
|
178
|
+
|
|
179
|
+
type Direction = "ltr" | "rtl";
|
|
180
|
+
|
|
181
|
+
type ConfigProviderProps = {
|
|
182
|
+
children: ReactNode;
|
|
183
|
+
/** Writing direction. Defaults to `ltr`. */
|
|
184
|
+
direction?: Direction;
|
|
185
|
+
/**
|
|
186
|
+
* When true (default), the outermost ConfigProvider that opts in writes
|
|
187
|
+
* `document.documentElement.dir` so portalled overlays inherit direction.
|
|
188
|
+
* Nested providers only set `dir` on their local wrapper.
|
|
189
|
+
*/
|
|
190
|
+
syncDocumentDir?: boolean;
|
|
191
|
+
/** Optional locale pack — nests `LocaleProvider` when provided. */
|
|
192
|
+
locale?: Locale;
|
|
193
|
+
className?: string;
|
|
194
|
+
style?: CSSProperties;
|
|
195
|
+
};
|
|
196
|
+
declare function ConfigProvider({ children, direction, syncDocumentDir, locale, className, style, }: ConfigProviderProps): react.JSX.Element;
|
|
197
|
+
|
|
198
|
+
/** Current writing direction (`ltr` when no ConfigProvider). */
|
|
199
|
+
declare function useDirection(): Direction;
|
|
200
|
+
/** Convenience: `true` when direction is `rtl`. */
|
|
201
|
+
declare function useRtl(): boolean;
|
|
202
|
+
|
|
203
|
+
type PhysicalSide = "left" | "right";
|
|
204
|
+
/** Mirror a physical side under RTL (left ↔ right). */
|
|
205
|
+
declare function mirrorSide(side: PhysicalSide, rtl: boolean): PhysicalSide;
|
|
206
|
+
/** Same as `mirrorSide` but from a Direction value. */
|
|
207
|
+
declare function mirrorSideForDirection(side: PhysicalSide, direction: Direction): PhysicalSide;
|
|
208
|
+
/**
|
|
209
|
+
* Chevron that points toward "forward" / "expand" / "next" in the reading direction.
|
|
210
|
+
* LTR → right; RTL → left.
|
|
211
|
+
*/
|
|
212
|
+
declare function forwardChevronSide(direction: Direction): PhysicalSide;
|
|
213
|
+
/**
|
|
214
|
+
* Chevron that points toward "back" / "previous" in the reading direction.
|
|
215
|
+
* LTR → left; RTL → right.
|
|
216
|
+
*/
|
|
217
|
+
declare function backChevronSide(direction: Direction): PhysicalSide;
|
|
218
|
+
|
|
56
219
|
/** Figma Components → Basic Input → Button */
|
|
57
|
-
type ButtonMode = "primary" | "second" | "default" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive";
|
|
220
|
+
type ButtonMode = "primary" | "second" | "default" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive";
|
|
58
221
|
type ButtonSize = "tiny" | "small" | "regular" | "big";
|
|
59
222
|
declare const buttonVariants: (props?: ({
|
|
60
|
-
mode?: "default" | "primary" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
|
|
223
|
+
mode?: "default" | "primary" | "second" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
|
|
61
224
|
allRound?: boolean | null | undefined;
|
|
62
225
|
compact?: boolean | null | undefined;
|
|
63
226
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
@@ -82,7 +245,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<t
|
|
|
82
245
|
asChild?: boolean;
|
|
83
246
|
};
|
|
84
247
|
declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<(props?: ({
|
|
85
|
-
mode?: "default" | "primary" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
|
|
248
|
+
mode?: "default" | "primary" | "second" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
|
|
86
249
|
allRound?: boolean | null | undefined;
|
|
87
250
|
compact?: boolean | null | undefined;
|
|
88
251
|
} & class_variance_authority_types.ClassProp) | undefined) => string>, "mode"> & {
|
|
@@ -695,13 +858,16 @@ declare const AnchorItem: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttribu
|
|
|
695
858
|
|
|
696
859
|
/** Figma Components → Basic Input → Segmentator */
|
|
697
860
|
type SegmentatorMode = "nested" | "tiled";
|
|
861
|
+
type SegmentatorDirection = "horizontal" | "vertical";
|
|
698
862
|
type SegmentatorGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
|
|
699
863
|
value?: string;
|
|
700
864
|
defaultValue?: string;
|
|
701
865
|
onValueChange?: (value: string) => void;
|
|
702
866
|
mode?: SegmentatorMode;
|
|
867
|
+
/** Figma `direction` — horizontal (default) or vertical stack. */
|
|
868
|
+
direction?: SegmentatorDirection;
|
|
703
869
|
allRound?: boolean;
|
|
704
|
-
/** When true, the group fills its container and items split the
|
|
870
|
+
/** When true, the group fills its container and items split the main axis equally. */
|
|
705
871
|
equalWidth?: boolean;
|
|
706
872
|
disabled?: boolean;
|
|
707
873
|
};
|
|
@@ -710,8 +876,10 @@ declare const SegmentatorGroup: react.ForwardRefExoticComponent<Omit<react.HTMLA
|
|
|
710
876
|
defaultValue?: string;
|
|
711
877
|
onValueChange?: (value: string) => void;
|
|
712
878
|
mode?: SegmentatorMode;
|
|
879
|
+
/** Figma `direction` — horizontal (default) or vertical stack. */
|
|
880
|
+
direction?: SegmentatorDirection;
|
|
713
881
|
allRound?: boolean;
|
|
714
|
-
/** When true, the group fills its container and items split the
|
|
882
|
+
/** When true, the group fills its container and items split the main axis equally. */
|
|
715
883
|
equalWidth?: boolean;
|
|
716
884
|
disabled?: boolean;
|
|
717
885
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
@@ -730,7 +898,8 @@ declare const SegmentatorItem: react.ForwardRefExoticComponent<Omit<ButtonHTMLAt
|
|
|
730
898
|
|
|
731
899
|
/** Figma Components → System Composition → Form (527:57461 / 527:57641) */
|
|
732
900
|
type FormFieldDirection = "vertical" | "horizontal";
|
|
733
|
-
|
|
901
|
+
/** Layout mode — the original props-driven wrapper */
|
|
902
|
+
type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {
|
|
734
903
|
label?: ReactNode;
|
|
735
904
|
htmlFor?: string;
|
|
736
905
|
description?: ReactNode;
|
|
@@ -741,19 +910,64 @@ type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
741
910
|
required?: boolean;
|
|
742
911
|
/** Figma `Direction` — vertical stacks label above control; horizontal places label beside */
|
|
743
912
|
direction?: FormFieldDirection;
|
|
913
|
+
children?: ReactNode;
|
|
744
914
|
};
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
915
|
+
/** Render arguments passed to `render` in react-hook-form mode */
|
|
916
|
+
type FormFieldRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
|
|
917
|
+
field: ControllerRenderProps<TFieldValues, TName>;
|
|
918
|
+
fieldState: ControllerFieldState;
|
|
919
|
+
formState: UseFormStateReturn<TFieldValues>;
|
|
920
|
+
/**
|
|
921
|
+
* Auto-generated control id. The field label is already wired to it via
|
|
922
|
+
* `htmlFor` — pass it to the underlying input (`<Input id={id} />`).
|
|
923
|
+
*/
|
|
924
|
+
id: string;
|
|
925
|
+
};
|
|
926
|
+
/**
|
|
927
|
+
* react-hook-form mode — bind the field to a form via `name` (+ optional
|
|
928
|
+
* `control`; falls back to the surrounding `<Form>` context). Validation
|
|
929
|
+
* errors from the resolver (zod etc.) are rendered automatically unless the
|
|
930
|
+
* `error` prop overrides them.
|
|
931
|
+
*/
|
|
932
|
+
type FormFieldControlledProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldLayoutProps, "children" | "htmlFor"> & Pick<UseControllerProps<TFieldValues, TName>, "rules" | "defaultValue" | "shouldUnregister" | "disabled"> & {
|
|
933
|
+
name: TName;
|
|
934
|
+
control?: Control<TFieldValues>;
|
|
935
|
+
render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;
|
|
936
|
+
/** Overrides the validation error message shown under the control */
|
|
749
937
|
error?: ReactNode;
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
938
|
+
};
|
|
939
|
+
type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;
|
|
940
|
+
/**
|
|
941
|
+
* FormField — layout wrapper around a form control, or a react-hook-form
|
|
942
|
+
* bound field when given `name` + `render` (shadcn-style).
|
|
943
|
+
*
|
|
944
|
+
* @example Layout mode
|
|
945
|
+
* <FormField label="Email" htmlFor="email" description="...">
|
|
946
|
+
* <Input id="email" />
|
|
947
|
+
* </FormField>
|
|
948
|
+
*
|
|
949
|
+
* @example react-hook-form + zod mode
|
|
950
|
+
* <Form {...form}>
|
|
951
|
+
* <form onSubmit={form.handleSubmit(onSubmit)}>
|
|
952
|
+
* <FormField
|
|
953
|
+
* control={form.control}
|
|
954
|
+
* name="email"
|
|
955
|
+
* label="Email"
|
|
956
|
+
* render={({ field, fieldState, id }) => (
|
|
957
|
+
* <Input id={id} error={fieldState.invalid} {...field} />
|
|
958
|
+
* )}
|
|
959
|
+
* />
|
|
960
|
+
* </form>
|
|
961
|
+
* </Form>
|
|
962
|
+
*/
|
|
963
|
+
declare const FormField: {
|
|
964
|
+
<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> & {
|
|
965
|
+
ref?: Ref<HTMLDivElement>;
|
|
966
|
+
}): ReactElement | null;
|
|
967
|
+
displayName?: string;
|
|
968
|
+
};
|
|
969
|
+
/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */
|
|
970
|
+
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
|
757
971
|
|
|
758
972
|
/** Figma Components → System Composition → Typography (128:85) */
|
|
759
973
|
type TypographyLevel = "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption";
|
|
@@ -889,6 +1103,10 @@ type UseColorPickerStateOptions = {
|
|
|
889
1103
|
defaultFormat?: ColorFormat;
|
|
890
1104
|
onFormatChange?: (format: ColorFormat) => void;
|
|
891
1105
|
};
|
|
1106
|
+
/**
|
|
1107
|
+
* Keep HSVA as interaction source of truth so hue 360° (≡ hex red / 0°) does
|
|
1108
|
+
* not snap the spectrum thumb back to the start after a hex round-trip.
|
|
1109
|
+
*/
|
|
892
1110
|
declare function useColorPickerState({ value: controlledValue, defaultValue, onChange, format: controlledFormat, defaultFormat, onFormatChange, }: UseColorPickerStateOptions): {
|
|
893
1111
|
value: string;
|
|
894
1112
|
format: ColorFormat;
|
|
@@ -1536,8 +1754,13 @@ declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimit
|
|
|
1536
1754
|
level?: TooltipContentLevel;
|
|
1537
1755
|
} & react.RefAttributes<HTMLDivElement>>;
|
|
1538
1756
|
|
|
1757
|
+
/** Default hold duration before a touch tooltip opens. */
|
|
1758
|
+
declare const RESPONSIVE_TOOLTIP_LONG_PRESS_MS = 500;
|
|
1539
1759
|
interface ResponsiveTooltipProps {
|
|
1540
|
-
/**
|
|
1760
|
+
/**
|
|
1761
|
+
* Tooltip body — the same content is shown on desktop (hover) and touch
|
|
1762
|
+
* (long-press).
|
|
1763
|
+
*/
|
|
1541
1764
|
content: ReactNode;
|
|
1542
1765
|
/** The trigger element. Rendered with `asChild`, so pass a single element. */
|
|
1543
1766
|
children: ReactNode;
|
|
@@ -1559,6 +1782,11 @@ interface ResponsiveTooltipProps {
|
|
|
1559
1782
|
* Requires a TooltipProvider ancestor for shared delay context.
|
|
1560
1783
|
*/
|
|
1561
1784
|
delayDuration?: number;
|
|
1785
|
+
/**
|
|
1786
|
+
* Hold duration on touch before the tip opens, in ms.
|
|
1787
|
+
* Defaults to 500 (`RESPONSIVE_TOOLTIP_LONG_PRESS_MS`).
|
|
1788
|
+
*/
|
|
1789
|
+
longPressMs?: number;
|
|
1562
1790
|
/** Controlled open state. */
|
|
1563
1791
|
open?: boolean;
|
|
1564
1792
|
/** Uncontrolled initial open state. */
|
|
@@ -1576,8 +1804,9 @@ interface ResponsiveTooltipProps {
|
|
|
1576
1804
|
* right primitive for the device:
|
|
1577
1805
|
* - Desktop (`pointer: fine`): Radix Tooltip — opens on hover and keyboard focus.
|
|
1578
1806
|
* - Touch (`pointer: coarse`): Radix Popover with `appearance="tooltip"` — opens on
|
|
1579
|
-
*
|
|
1580
|
-
*
|
|
1807
|
+
* **long-press** (short tap still reaches the trigger’s own `onClick`), dismisses
|
|
1808
|
+
* on outside tap / Escape, and keeps the tooltip visual skin (dark surface,
|
|
1809
|
+
* caption text, solid caret) so it looks identical to desktop.
|
|
1581
1810
|
*
|
|
1582
1811
|
* The consumer API and the look are unchanged between devices; only the trigger
|
|
1583
1812
|
* gesture differs. Animations are handled by the respective effect CSS
|
|
@@ -1591,7 +1820,7 @@ interface ResponsiveTooltipProps {
|
|
|
1591
1820
|
* </ResponsiveTooltip>
|
|
1592
1821
|
* </TooltipProvider>
|
|
1593
1822
|
*/
|
|
1594
|
-
declare function ResponsiveTooltip({ content, children, side, align, sideOffset, collisionPadding, showArrow, level, delayDuration, open, defaultOpen, onOpenChange, contentClassName, }: ResponsiveTooltipProps): react.JSX.Element;
|
|
1823
|
+
declare function ResponsiveTooltip({ content, children, side, align, sideOffset, collisionPadding, showArrow, level, delayDuration, longPressMs, open: openProp, defaultOpen, onOpenChange, contentClassName, }: ResponsiveTooltipProps): react.JSX.Element;
|
|
1595
1824
|
|
|
1596
1825
|
/** Figma Components → Response And Feedback → Feedback (553:58620) */
|
|
1597
1826
|
type FeedbackType = "information" | "warning" | "wrong" | "success" | "normal";
|
|
@@ -1891,7 +2120,7 @@ declare const NavigationItemMenuTrigger: react.ForwardRefExoticComponent<Omit<Om
|
|
|
1891
2120
|
children: ReactNode;
|
|
1892
2121
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1893
2122
|
type NavigationItemMenuContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
|
|
1894
|
-
/** Flyout surface —
|
|
2123
|
+
/** Flyout surface — forward of the item in vertical (LTR right / RTL left), below it in horizontal. */
|
|
1895
2124
|
declare const NavigationItemMenuContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1896
2125
|
type NavigationItemMenuItemProps = Omit<ComponentPropsWithoutRef<"button">, "children" | "value"> & {
|
|
1897
2126
|
value: string;
|
|
@@ -1911,6 +2140,51 @@ declare const NavigationItemMenuItem: react.ForwardRefExoticComponent<Omit<Omit<
|
|
|
1911
2140
|
children: ReactNode;
|
|
1912
2141
|
} & react.RefAttributes<HTMLButtonElement>>;
|
|
1913
2142
|
|
|
2143
|
+
/** Figma Components → Structure Navigation → Tab `Style` */
|
|
2144
|
+
type TabStyle = "default" | "card" | "tiled";
|
|
2145
|
+
/** Figma Components → Structure Navigation → Tab `Background` */
|
|
2146
|
+
type TabBackground = "none" | "default";
|
|
2147
|
+
type TabProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> & {
|
|
2148
|
+
/** Figma `Style` */
|
|
2149
|
+
style?: TabStyle;
|
|
2150
|
+
/** Figma `Background` */
|
|
2151
|
+
background?: TabBackground;
|
|
2152
|
+
value?: string;
|
|
2153
|
+
defaultValue?: string;
|
|
2154
|
+
onValueChange?: (value: string) => void;
|
|
2155
|
+
disabled?: boolean;
|
|
2156
|
+
/** Leading accessory (Figma SoltRight — visual start). */
|
|
2157
|
+
startSlot?: ReactNode;
|
|
2158
|
+
/** Trailing accessory (Figma SoltLeft / SoltLeft2 — visual end). */
|
|
2159
|
+
endSlot?: ReactNode;
|
|
2160
|
+
};
|
|
2161
|
+
/** Figma Components → Structure Navigation → Tab */
|
|
2162
|
+
declare const Tab: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "style" | "onChange"> & {
|
|
2163
|
+
/** Figma `Style` */
|
|
2164
|
+
style?: TabStyle;
|
|
2165
|
+
/** Figma `Background` */
|
|
2166
|
+
background?: TabBackground;
|
|
2167
|
+
value?: string;
|
|
2168
|
+
defaultValue?: string;
|
|
2169
|
+
onValueChange?: (value: string) => void;
|
|
2170
|
+
disabled?: boolean;
|
|
2171
|
+
/** Leading accessory (Figma SoltRight — visual start). */
|
|
2172
|
+
startSlot?: ReactNode;
|
|
2173
|
+
/** Trailing accessory (Figma SoltLeft / SoltLeft2 — visual end). */
|
|
2174
|
+
endSlot?: ReactNode;
|
|
2175
|
+
} & react.RefAttributes<HTMLDivElement>>;
|
|
2176
|
+
type TabItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children"> & {
|
|
2177
|
+
value: string;
|
|
2178
|
+
leftIcon?: ReactNode;
|
|
2179
|
+
children?: ReactNode;
|
|
2180
|
+
};
|
|
2181
|
+
/** Figma Components → Structure Navigation → TabItem (nested Button). */
|
|
2182
|
+
declare const TabItem: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value"> & {
|
|
2183
|
+
value: string;
|
|
2184
|
+
leftIcon?: ReactNode;
|
|
2185
|
+
children?: ReactNode;
|
|
2186
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
2187
|
+
|
|
1914
2188
|
/** Figma Components → Information Collect → Slider (384:21585) */
|
|
1915
2189
|
type SliderSize = "default" | "big";
|
|
1916
2190
|
type SliderType = "default" | "range";
|
|
@@ -2264,4 +2538,4 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
2264
2538
|
*/
|
|
2265
2539
|
declare function initKeyboardFocus(): void;
|
|
2266
2540
|
|
|
2267
|
-
export { Alert, type AlertAppearance, type AlertProps, type AlertSize, type AlertType, Anchor, type AnchorIndentLevel, AnchorItem, type AnchorItemProps, type AnchorProps, Avatar, type AvatarContent, type AvatarLevel, type AvatarProps, Badge, type BadgeLevel, type BadgeLineHeightFix, type BadgeProps, type BadgeStyle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisItem, type BreadcrumbEllipsisItemProps, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type BreadcrumbSize, Button, type ButtonMode, type ButtonProps, type ButtonSize, Card, CardBody, type CardBodyProps, CardBottom, type CardBottomProps, CardHead, type CardHeadProps, type CardProps, type CardSlotType, 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 CheckboxSize, 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, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerContent, type DatePickerContentProps, DatePickerField, type DatePickerFieldProps, type DatePickerMode, type DatePickerPanel, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSize, type DatePickerTimeValue, DatePickerTrigger, type DatePickerTriggerProps, type DateRange, Feedback, type FeedbackMode, type FeedbackProps, type FeedbackSize, type FeedbackType, Fieldset, type FieldsetProps, FormField, type FormFieldDirection, type FormFieldProps, type HSVA, HoverPopover, type HoverPopoverProps, 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, Modal, ModalBody, type ModalBodyProps, ModalClose, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHeaderText, type ModalHeaderTextProps, ModalOverlay, type ModalOverlayProps, ModalPortal, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, ModalTrigger, Navigation, NavigationActions, type NavigationActionsProps, NavigationActionsSlot, type NavigationActionsSlotProps, type NavigationBackground, NavigationBrand, type NavigationBrandProps, NavigationBrandTitle, type NavigationBrandTitleProps, type NavigationDirection, NavigationGroup, type NavigationGroupProps, NavigationItem, NavigationItemGroup, type NavigationItemGroupProps, NavigationItemMenu, NavigationItemMenuContent, type NavigationItemMenuContentProps, NavigationItemMenuItem, type NavigationItemMenuItemProps, type NavigationItemMenuProps, NavigationItemMenuTrigger, type NavigationItemMenuTriggerProps, type NavigationItemProps, type NavigationItemType, type NavigationProps, NavigationSection, type NavigationSectionProps, NumberInput, type NumberInputProps, type NumberInputStyle, Pagehead, type PageheadProps, Pagination, type PaginationProps, Popover, PopoverAnchor, type PopoverAppearance, PopoverContent, type PopoverContentLevel, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressShape, type ProgressSize, type ProgressType, RadioGroup, type RadioGroupDirection, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RadioInput, type RadioInputProps, type RadioInputVariant, ResponsiveTooltip, type ResponsiveTooltipProps, Scroll, type ScrollOrientation, ScrollPicker, ScrollPickerColumn, type ScrollPickerColumnProps, ScrollPickerItem, type ScrollPickerItemProps, type ScrollPickerProps, type ScrollProps, type ScrollSize, 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, Slider, type SliderProps, type SliderSize, type SliderType, Stack, type StackProps, Steps, type StepsDirection, StepsIcon, type StepsIconProps, StepsItem, type StepsItemProps, type StepsProps, type StepsState, Switch, type SwitchProps, type SwitchSize, TOOLTIP_DELAY_DURATION, Table, TableCell, type TableCellContent, type TableCellProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tag, TagClose, type TagCloseProps, type TagContent, type TagLevel, type TagLineHeightFix, type TagProps, Textarea, type TextareaProps, type TextareaSize, ThemeProvider, type ThemeProviderProps, ThemeScript, TimePicker, TimePickerContent, type TimePickerContentProps, TimePickerField, type TimePickerFieldProps, TimePickerPanel, type TimePickerPanelProps, type TimePickerProps, type TimePickerSize, TimePickerTrigger, type TimePickerTriggerProps, type TimePickerValue, TimePickerWheels, type TimePickerWheelsValue, Tooltip, TooltipContent, type TooltipContentLevel, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, Typeface, type TypefaceContent, TypefacePair, type TypefacePairProps, type TypefaceProps, Typography, type TypographyContent, type TypographyLevel, type TypographyProps, type TypographyTone, Upload, type UploadProps, type UploadStyle, type UseColorPickerStateOptions, alertVariants, buttonVariants, cn, formatDisplayDate, formatMonthYear, formatTimeValue, initKeyboardFocus, inputRootVariants, loadingLevelForButtonSize, modalContentVariants, numberInputRootVariants, parseDateInput, parseDateRangeInput, typographyVariants, useColorPickerState, useTheme, useThemeLayoutKey };
|
|
2541
|
+
export { Alert, type AlertAppearance, type AlertProps, type AlertSize, type AlertType, Anchor, type AnchorIndentLevel, AnchorItem, type AnchorItemProps, type AnchorProps, Avatar, type AvatarContent, type AvatarLevel, type AvatarProps, Badge, type BadgeLevel, type BadgeLineHeightFix, type BadgeProps, type BadgeStyle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisItem, type BreadcrumbEllipsisItemProps, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, type BreadcrumbSize, Button, type ButtonMode, type ButtonProps, type ButtonSize, Card, CardBody, type CardBodyProps, CardBottom, type CardBottomProps, CardHead, type CardHeadProps, type CardProps, type CardSlotType, 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 CheckboxSize, 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, ConfigProvider, type ConfigProviderProps, DEFAULT_COLOR, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerContent, type DatePickerContentProps, DatePickerField, type DatePickerFieldProps, type DatePickerMode, type DatePickerPanel, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSize, type DatePickerTimeValue, DatePickerTrigger, type DatePickerTriggerProps, type DateRange, type Direction, Feedback, type FeedbackMode, type FeedbackProps, type FeedbackSize, type FeedbackType, Fieldset, type FieldsetProps, Form, FormField, type FormFieldControlledProps, type FormFieldDirection, type FormFieldLayoutProps, type FormFieldProps, type FormFieldRenderProps, type HSVA, HoverPopover, type HoverPopoverProps, 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, type Locale, type LocaleComponentName, LocaleProvider, type LocaleProviderProps, Modal, ModalBody, type ModalBodyProps, ModalClose, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHeaderText, type ModalHeaderTextProps, ModalOverlay, type ModalOverlayProps, ModalPortal, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, ModalTrigger, Navigation, NavigationActions, type NavigationActionsProps, NavigationActionsSlot, type NavigationActionsSlotProps, type NavigationBackground, NavigationBrand, type NavigationBrandProps, NavigationBrandTitle, type NavigationBrandTitleProps, type NavigationDirection, NavigationGroup, type NavigationGroupProps, NavigationItem, NavigationItemGroup, type NavigationItemGroupProps, NavigationItemMenu, NavigationItemMenuContent, type NavigationItemMenuContentProps, NavigationItemMenuItem, type NavigationItemMenuItemProps, type NavigationItemMenuProps, NavigationItemMenuTrigger, type NavigationItemMenuTriggerProps, type NavigationItemProps, type NavigationItemType, type NavigationProps, NavigationSection, type NavigationSectionProps, NumberInput, type NumberInputProps, type NumberInputStyle, Pagehead, type PageheadProps, Pagination, type PaginationProps, type PhysicalSide, Popover, PopoverAnchor, type PopoverAppearance, PopoverContent, type PopoverContentLevel, type PopoverContentProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, type ProgressShape, type ProgressSize, type ProgressType, RESPONSIVE_TOOLTIP_LONG_PRESS_MS, RadioGroup, type RadioGroupDirection, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RadioInput, type RadioInputProps, type RadioInputVariant, ResponsiveTooltip, type ResponsiveTooltipProps, Scroll, type ScrollOrientation, ScrollPicker, ScrollPickerColumn, type ScrollPickerColumnProps, ScrollPickerItem, type ScrollPickerItemProps, type ScrollPickerProps, type ScrollProps, type ScrollSize, type SegmentatorDirection, 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, Slider, type SliderProps, type SliderSize, type SliderType, Stack, type StackProps, Steps, type StepsDirection, StepsIcon, type StepsIconProps, StepsItem, type StepsItemProps, type StepsProps, type StepsState, Switch, type SwitchProps, type SwitchSize, TOOLTIP_DELAY_DURATION, Tab, type TabBackground, TabItem, type TabItemProps, type TabProps, type TabStyle, Table, TableCell, type TableCellContent, type TableCellProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tag, TagClose, type TagCloseProps, type TagContent, type TagLevel, type TagLineHeightFix, type TagProps, Textarea, type TextareaProps, type TextareaSize, ThemeProvider, type ThemeProviderProps, ThemeScript, TimePicker, TimePickerContent, type TimePickerContentProps, TimePickerField, type TimePickerFieldProps, TimePickerPanel, type TimePickerPanelProps, type TimePickerProps, type TimePickerSize, TimePickerTrigger, type TimePickerTriggerProps, type TimePickerValue, TimePickerWheels, type TimePickerWheelsValue, Tooltip, TooltipContent, type TooltipContentLevel, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, Typeface, type TypefaceContent, TypefacePair, type TypefacePairProps, type TypefaceProps, Typography, type TypographyContent, type TypographyLevel, type TypographyProps, type TypographyTone, Upload, type UploadProps, type UploadStyle, type UseColorPickerStateOptions, alertVariants, backChevronSide, buttonVariants, cn, enUS, formatDisplayDate, formatMonthYear, formatTimeValue, forwardChevronSide, initKeyboardFocus, inputRootVariants, interpolate, loadingLevelForButtonSize, mirrorSide, mirrorSideForDirection, modalContentVariants, numberInputRootVariants, parseDateInput, parseDateRangeInput, typographyVariants, useColorPickerState, useDirection, useLocale, useLocaleMessages, useRtl, useTheme, useThemeLayoutKey, zhCN };
|