@aviala-design/spiral 2.4.1 → 2.6.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, MouseEvent, AnchorHTMLAttributes } from 'react';
+import { ReactNode, CSSProperties, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, ImgHTMLAttributes, MouseEvent, AnchorHTMLAttributes, Ref, ReactElement } from 'react';
 import { ThemeMode, PaletteConfig, BaseNumbersDensity, ThemePreset } from '@aviala-design/tokens';
 export { BaseNumbersDensity, DEFAULT_PALETTE_CONFIG, HueFamily, PALETTE_HUE_FAMILIES, PaletteConfig } from '@aviala-design/tokens';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -9,6 +9,8 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, UseControllerProps, Control, ControllerRenderProps, ControllerFieldState, UseFormStateReturn } from 'react-hook-form';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -53,11 +55,172 @@ declare function ThemeScript({ storageKey, defaultMode, defaultPrimary, defaultD
     defaultDensity?: BaseNumbersDensity;
 }): react.JSX.Element;
 
+/** Spiral locale pack — Semi-style component dictionaries + BCP 47 `code` for Intl. */
+type LocaleDatePicker = {
+    placeholder: string;
+    placeholderWithTime: string;
+    rangePlaceholder: string;
+    selectDate: string;
+    selectDateRange: string;
+    rangeTo: string;
+    calendar: string;
+    dateTimeSwitch: string;
+    previousMonth: string;
+    nextMonth: string;
+    previousYear: string;
+    nextYear: string;
+    selectMonthYear: string;
+    closeMonthYear: string;
+    /** Monday-first weekday short labels (7). */
+    weekdays: readonly [string, string, string, string, string, string, string];
+    year: string;
+    month: string;
+    selectYearMonth: string;
+};
+type LocaleTimePicker = {
+    placeholder: string;
+    panel: string;
+    selectTime: string;
+    hour: string;
+    minute: string;
+};
+type LocalePagination = {
+    jumpTo: string;
+    pageSize: string;
+    /** Template: `${size}` */
+    items: string;
+    pagePlaceholder: string;
+    morePages: string;
+    previous: string;
+    next: string;
+    pagination: string;
+    pageSizeAria: string;
+};
+type LocaleUpload = {
+    label: string;
+    title: string;
+    description: string;
+};
+type LocaleColorPicker = {
+    placeholder: string;
+    hue: string;
+    opacity: string;
+    saturationBrightness: string;
+    pickFromScreen: string;
+    hex: string;
+    rgb: string;
+    hsl: string;
+    opacityPercent: string;
+};
+type Locale = {
+    code: string;
+    DatePicker: LocaleDatePicker;
+    TimePicker: LocaleTimePicker;
+    Pagination: LocalePagination;
+    Upload: LocaleUpload;
+    Modal: {
+        close: string;
+    };
+    Feedback: {
+        close: string;
+    };
+    Alert: {
+        close: string;
+    };
+    ColorPicker: LocaleColorPicker;
+    Cascader: {
+        placeholder: string;
+    };
+    Loading: {
+        label: string;
+    };
+    Tag: {
+        remove: string;
+    };
+    NumberInput: {
+        increment: string;
+        decrement: string;
+    };
+    Textarea: {
+        resize: string;
+    };
+    Card: {
+        more: string;
+    };
+    List: {
+        more: string;
+    };
+    Breadcrumb: {
+        label: string;
+        showMore: string;
+    };
+};
+type LocaleComponentName = Exclude<keyof Locale, "code">;
+
+/** Replace `${name}` placeholders (Semi-style). Unknown keys stay as-is. */
+declare function interpolate(template: string, values: Record<string, string | number>): string;
+
+type LocaleProviderProps = {
+    children: ReactNode;
+    /** Locale pack. Defaults to `zhCN`. */
+    locale?: Locale;
+};
+declare function LocaleProvider({ children, locale }: LocaleProviderProps): react.JSX.Element;
+
+/** Current locale pack (falls back to zh-CN when no Provider). */
+declare function useLocale(): Locale;
+/** Messages for one component block (e.g. `Pagination`). */
+declare function useLocaleMessages<K extends LocaleComponentName>(component: K): Locale[K];
+
+declare const zhCN: Locale;
+
+declare const enUS: Locale;
+
+type Direction = "ltr" | "rtl";
+
+type ConfigProviderProps = {
+    children: ReactNode;
+    /** Writing direction. Defaults to `ltr`. */
+    direction?: Direction;
+    /**
+     * When true (default), the outermost ConfigProvider that opts in writes
+     * `document.documentElement.dir` so portalled overlays inherit direction.
+     * Nested providers only set `dir` on their local wrapper.
+     */
+    syncDocumentDir?: boolean;
+    /** Optional locale pack — nests `LocaleProvider` when provided. */
+    locale?: Locale;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function ConfigProvider({ children, direction, syncDocumentDir, locale, className, style, }: ConfigProviderProps): react.JSX.Element;
+
+/** Current writing direction (`ltr` when no ConfigProvider). */
+declare function useDirection(): Direction;
+/** Convenience: `true` when direction is `rtl`. */
+declare function useRtl(): boolean;
+
+type PhysicalSide = "left" | "right";
+/** Mirror a physical side under RTL (left ↔ right). */
+declare function mirrorSide(side: PhysicalSide, rtl: boolean): PhysicalSide;
+/** Same as `mirrorSide` but from a Direction value. */
+declare function mirrorSideForDirection(side: PhysicalSide, direction: Direction): PhysicalSide;
+/**
+ * Chevron that points toward "forward" / "expand" / "next" in the reading direction.
+ * LTR → right; RTL → left.
+ */
+declare function forwardChevronSide(direction: Direction): PhysicalSide;
+/**
+ * Chevron that points toward "back" / "previous" in the reading direction.
+ * LTR → left; RTL → right.
+ */
+declare function backChevronSide(direction: Direction): PhysicalSide;
+
 /** Figma Components → Basic Input → Button */
-type ButtonMode = "primary" | "second" | "default" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive";
+type ButtonMode = "primary" | "second" | "default" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive";
 type ButtonSize = "tiny" | "small" | "regular" | "big";
 declare const buttonVariants: (props?: ({
-    mode?: "default" | "primary" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
+    mode?: "default" | "primary" | "second" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
     allRound?: boolean | null | undefined;
     compact?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -82,7 +245,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<t
     asChild?: boolean;
 };
 declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & Omit<VariantProps<(props?: ({
-    mode?: "default" | "primary" | "second" | "defaultCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
+    mode?: "default" | "primary" | "second" | "defaultCustom" | "outline" | "outlineCustom" | "noBackground" | "noBackgroundCustom" | "destructive" | null | undefined;
     allRound?: boolean | null | undefined;
     compact?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string>, "mode"> & {
@@ -572,13 +735,19 @@ declare const Loading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanEl
 
 /** Figma Components → Information Collect → Checkbox */
 type CheckboxGroupDirection = "vertical" | "horizontal";
+/** Figma Checkbox `Size` — Default → `default`, Huge → `huge` */
+type CheckboxSize = "default" | "huge";
 type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
     /** Figma Checkbox `Round` */
     round?: boolean;
+    /** Figma Checkbox `Size` */
+    size?: CheckboxSize;
 };
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     /** Figma Checkbox `Round` */
     round?: boolean;
+    /** Figma Checkbox `Size` */
+    size?: CheckboxSize;
 } & react.RefAttributes<HTMLButtonElement>>;
 type CheckboxGroupProps = ComponentPropsWithoutRef<"div"> & {
     /** Figma Checkbox Input Group `Direction` */
@@ -689,13 +858,16 @@ declare const AnchorItem: react.ForwardRefExoticComponent<Omit<AnchorHTMLAttribu
 
 /** Figma Components → Basic Input → Segmentator */
 type SegmentatorMode = "nested" | "tiled";
+type SegmentatorDirection = "horizontal" | "vertical";
 type SegmentatorGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     mode?: SegmentatorMode;
+    /** Figma `direction` — horizontal (default) or vertical stack. */
+    direction?: SegmentatorDirection;
     allRound?: boolean;
-    /** When true, the group fills its container and items split the width equally. */
+    /** When true, the group fills its container and items split the main axis equally. */
     equalWidth?: boolean;
     disabled?: boolean;
 };
@@ -704,8 +876,10 @@ declare const SegmentatorGroup: react.ForwardRefExoticComponent<Omit<react.HTMLA
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     mode?: SegmentatorMode;
+    /** Figma `direction` — horizontal (default) or vertical stack. */
+    direction?: SegmentatorDirection;
     allRound?: boolean;
-    /** When true, the group fills its container and items split the width equally. */
+    /** When true, the group fills its container and items split the main axis equally. */
     equalWidth?: boolean;
     disabled?: boolean;
 } & react.RefAttributes<HTMLDivElement>>;
@@ -724,7 +898,8 @@ declare const SegmentatorItem: react.ForwardRefExoticComponent<Omit<ButtonHTMLAt
 
 /** Figma Components → System Composition → Form (527:57461 / 527:57641) */
 type FormFieldDirection = "vertical" | "horizontal";
-type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
+/** Layout mode — the original props-driven wrapper */
+type FormFieldLayoutProps = HTMLAttributes<HTMLDivElement> & {
     label?: ReactNode;
     htmlFor?: string;
     description?: ReactNode;
@@ -735,19 +910,64 @@ type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
     required?: boolean;
     /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */
     direction?: FormFieldDirection;
+    children?: ReactNode;
 };
-declare const FormField: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    label?: ReactNode;
-    htmlFor?: string;
-    description?: ReactNode;
+/** Render arguments passed to `render` in react-hook-form mode */
+type FormFieldRenderProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    field: ControllerRenderProps<TFieldValues, TName>;
+    fieldState: ControllerFieldState;
+    formState: UseFormStateReturn<TFieldValues>;
+    /**
+     * Auto-generated control id. The field label is already wired to it via
+     * `htmlFor` — pass it to the underlying input (`<Input id={id} />`).
+     */
+    id: string;
+};
+/**
+ * react-hook-form mode — bind the field to a form via `name` (+ optional
+ * `control`; falls back to the surrounding `<Form>` context). Validation
+ * errors from the resolver (zod etc.) are rendered automatically unless the
+ * `error` prop overrides them.
+ */
+type FormFieldControlledProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldLayoutProps, "children" | "htmlFor"> & Pick<UseControllerProps<TFieldValues, TName>, "rules" | "defaultValue" | "shouldUnregister" | "disabled"> & {
+    name: TName;
+    control?: Control<TFieldValues>;
+    render: (props: FormFieldRenderProps<TFieldValues, TName>) => ReactNode;
+    /** Overrides the validation error message shown under the control */
     error?: ReactNode;
-    info?: ReactNode;
-    /** Optional Alert / Feedback under the control */
-    alert?: ReactNode;
-    required?: boolean;
-    /** Figma `Direction` — vertical stacks label above control; horizontal places label beside */
-    direction?: FormFieldDirection;
-} & react.RefAttributes<HTMLDivElement>>;
+};
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldLayoutProps | FormFieldControlledProps<TFieldValues, TName>;
+/**
+ * FormField — layout wrapper around a form control, or a react-hook-form
+ * bound field when given `name` + `render` (shadcn-style).
+ *
+ * @example Layout mode
+ * <FormField label="Email" htmlFor="email" description="...">
+ *   <Input id="email" />
+ * </FormField>
+ *
+ * @example react-hook-form + zod mode
+ * <Form {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <FormField
+ *       control={form.control}
+ *       name="email"
+ *       label="Email"
+ *       render={({ field, fieldState, id }) => (
+ *         <Input id={id} error={fieldState.invalid} {...field} />
+ *       )}
+ *     />
+ *   </form>
+ * </Form>
+ */
+declare const FormField: {
+    <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> & {
+        ref?: Ref<HTMLDivElement>;
+    }): ReactElement | null;
+    displayName?: string;
+};
+/** Alias of react-hook-form's FormProvider — wrap your form with it (shadcn-style `<Form {...form}>`) */
+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;
 
 /** Figma Components → System Composition → Typography (128:85) */
 type TypographyLevel = "display" | "headline1" | "headline2" | "title" | "subtitle" | "text" | "caption";
@@ -883,6 +1103,10 @@ type UseColorPickerStateOptions = {
     defaultFormat?: ColorFormat;
     onFormatChange?: (format: ColorFormat) => void;
 };
+/**
+ * Keep HSVA as interaction source of truth so hue 360° (≡ hex red / 0°) does
+ * not snap the spectrum thumb back to the start after a hex round-trip.
+ */
 declare function useColorPickerState({ value: controlledValue, defaultValue, onChange, format: controlledFormat, defaultFormat, onFormatChange, }: UseColorPickerStateOptions): {
     value: string;
     format: ColorFormat;
@@ -1322,6 +1546,7 @@ declare function Popover({ open: openProp, defaultOpen, onOpenChange, modal, ...
 declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
 type PopoverAppearance = "default" | "tooltip" | "primary";
+type PopoverContentLevel = "caption" | "text";
 type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
     /** Render without Portal — use inside nested overlays. */
     portalled?: boolean;
@@ -1332,10 +1557,15 @@ type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Cont
     /**
      * Visual skin of the surface:
      * - `default` — light bordered panel (select-menu aligned), text typography, stroked caret.
-     * - `tooltip` — shared inverted tooltip skin (dark, caption text, borderless, solid caret).
+     * - `tooltip` — shared inverted tooltip skin (dark, caption text by default, borderless, solid caret).
      * - `primary` — brand primary surface with white text, borderless, solid caret.
      */
     appearance?: PopoverAppearance;
+    /**
+     * Typography level for the surface copy.
+     * Defaults to `caption` for `appearance="tooltip"`, otherwise `text`.
+     */
+    level?: PopoverContentLevel;
 };
 declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     /** Render without Portal — use inside nested overlays. */
@@ -1347,10 +1577,15 @@ declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimit
     /**
      * Visual skin of the surface:
      * - `default` — light bordered panel (select-menu aligned), text typography, stroked caret.
-     * - `tooltip` — shared inverted tooltip skin (dark, caption text, borderless, solid caret).
+     * - `tooltip` — shared inverted tooltip skin (dark, caption text by default, borderless, solid caret).
      * - `primary` — brand primary surface with white text, borderless, solid caret.
      */
     appearance?: PopoverAppearance;
+    /**
+     * Typography level for the surface copy.
+     * Defaults to `caption` for `appearance="tooltip"`, otherwise `text`.
+     */
+    level?: PopoverContentLevel;
 } & react.RefAttributes<HTMLDivElement>>;
 
 interface HoverPopoverProps {
@@ -1478,21 +1713,54 @@ declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & re
 
 /** Default show delay — 300ms per ALD / Radix convention. */
 declare const TOOLTIP_DELAY_DURATION = 300;
-type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
-declare function TooltipProvider({ delayDuration, skipDelayDuration, ...props }: TooltipProviderProps): react.JSX.Element;
+interface TooltipProviderProps {
+    children: ReactNode;
+    /**
+     * Delay before the tooltip opens on hover, in ms.
+     * Defaults to `TOOLTIP_DELAY_DURATION` (300). Pass `0` for instant open on hover.
+     */
+    delayDuration?: number;
+    /**
+     * When moving between tooltips, skip the open delay within this window (ms).
+     */
+    skipDelayDuration?: number;
+    /** When true, hovering the tooltip content itself does not keep it open. */
+    disableHoverableContent?: boolean;
+}
+/**
+ * Provides shared hover-delay state for nested Tooltips.
+ * Pass `delayDuration={0}` for instant open on hover.
+ */
+declare function TooltipProvider({ children, delayDuration, skipDelayDuration, ...props }: TooltipProviderProps): react.JSX.Element;
 declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+type TooltipContentLevel = "caption" | "text";
 type TooltipContentProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
     /** Show a caret arrow pointing at the trigger (default true). */
     showArrow?: boolean;
+    /**
+     * Typography level for the surface copy.
+     * Figma default is `caption`; pass `text` for body-sized tooltip copy.
+     */
+    level?: TooltipContentLevel;
 };
 declare const TooltipContent: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     /** Show a caret arrow pointing at the trigger (default true). */
     showArrow?: boolean;
+    /**
+     * Typography level for the surface copy.
+     * Figma default is `caption`; pass `text` for body-sized tooltip copy.
+     */
+    level?: TooltipContentLevel;
 } & react.RefAttributes<HTMLDivElement>>;
 
+/** Default hold duration before a touch tooltip opens. */
+declare const RESPONSIVE_TOOLTIP_LONG_PRESS_MS = 500;
 interface ResponsiveTooltipProps {
-    /** Tooltip body — the same content is shown on desktop (hover) and touch (tap). */
+    /**
+     * Tooltip body — the same content is shown on desktop (hover) and touch
+     * (long-press).
+     */
     content: ReactNode;
     /** The trigger element. Rendered with `asChild`, so pass a single element. */
     children: ReactNode;
@@ -1506,8 +1774,19 @@ interface ResponsiveTooltipProps {
     collisionPadding?: number;
     /** Show the caret arrow pointing at the trigger. */
     showArrow?: boolean;
-    /** Hover open delay on desktop, in ms (ignored on touch). Requires a TooltipProvider ancestor. */
+    /** Typography level for the content surface (default `caption`). */
+    level?: TooltipContentLevel;
+    /**
+     * Hover open delay on desktop, in ms (ignored on touch).
+     * Defaults to 300 (`TOOLTIP_DELAY_DURATION`). Pass `0` for instant open on hover.
+     * Requires a TooltipProvider ancestor for shared delay context.
+     */
     delayDuration?: number;
+    /**
+     * Hold duration on touch before the tip opens, in ms.
+     * Defaults to 500 (`RESPONSIVE_TOOLTIP_LONG_PRESS_MS`).
+     */
+    longPressMs?: number;
     /** Controlled open state. */
     open?: boolean;
     /** Uncontrolled initial open state. */
@@ -1525,8 +1804,9 @@ interface ResponsiveTooltipProps {
  * right primitive for the device:
  * - Desktop (`pointer: fine`): Radix Tooltip — opens on hover and keyboard focus.
  * - Touch (`pointer: coarse`): Radix Popover with `appearance="tooltip"` — opens on
- *   tap, dismisses on outside tap / Escape, but keeps the tooltip visual skin
- *   (dark surface, caption text, solid caret) so it looks identical to desktop.
+ *   **long-press** (short tap still reaches the trigger’s own `onClick`), dismisses
+ *   on outside tap / Escape, and keeps the tooltip visual skin (dark surface,
+ *   caption text, solid caret) so it looks identical to desktop.
  *
  * The consumer API and the look are unchanged between devices; only the trigger
  * gesture differs. Animations are handled by the respective effect CSS
@@ -1540,7 +1820,7 @@ interface ResponsiveTooltipProps {
  *   </ResponsiveTooltip>
  * </TooltipProvider>
  */
-declare function ResponsiveTooltip({ content, children, side, align, sideOffset, collisionPadding, showArrow, delayDuration, open, defaultOpen, onOpenChange, contentClassName, }: ResponsiveTooltipProps): react.JSX.Element;
+declare function ResponsiveTooltip({ content, children, side, align, sideOffset, collisionPadding, showArrow, level, delayDuration, longPressMs, open: openProp, defaultOpen, onOpenChange, contentClassName, }: ResponsiveTooltipProps): react.JSX.Element;
 
 /** Figma Components → Response And Feedback → Feedback (553:58620) */
 type FeedbackType = "information" | "warning" | "wrong" | "success" | "normal";
@@ -1840,7 +2120,7 @@ declare const NavigationItemMenuTrigger: react.ForwardRefExoticComponent<Omit<Om
     children: ReactNode;
 } & react.RefAttributes<HTMLButtonElement>>;
 type NavigationItemMenuContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
-/** Flyout surface — right of the item in vertical, below it in horizontal. */
+/** Flyout surface — forward of the item in vertical (LTR right / RTL left), below it in horizontal. */
 declare const NavigationItemMenuContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 type NavigationItemMenuItemProps = Omit<ComponentPropsWithoutRef<"button">, "children" | "value"> & {
     value: string;
@@ -1860,23 +2140,83 @@ declare const NavigationItemMenuItem: react.ForwardRefExoticComponent<Omit<Omit<
     children: ReactNode;
 } & react.RefAttributes<HTMLButtonElement>>;
 
+/** Figma Components → Structure Navigation → Tab `Style` */
+type TabStyle = "default" | "card" | "tiled";
+/** Figma Components → Structure Navigation → Tab `Background` */
+type TabBackground = "none" | "default";
+type TabProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "style"> & {
+    /** Figma `Style` */
+    style?: TabStyle;
+    /** Figma `Background` */
+    background?: TabBackground;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    /** Leading accessory (Figma SoltRight — visual start). */
+    startSlot?: ReactNode;
+    /** Trailing accessory (Figma SoltLeft / SoltLeft2 — visual end). */
+    endSlot?: ReactNode;
+};
+/** Figma Components → Structure Navigation → Tab */
+declare const Tab: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "style" | "onChange"> & {
+    /** Figma `Style` */
+    style?: TabStyle;
+    /** Figma `Background` */
+    background?: TabBackground;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    /** Leading accessory (Figma SoltRight — visual start). */
+    startSlot?: ReactNode;
+    /** Trailing accessory (Figma SoltLeft / SoltLeft2 — visual end). */
+    endSlot?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+type TabItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children"> & {
+    value: string;
+    leftIcon?: ReactNode;
+    children?: ReactNode;
+};
+/** Figma Components → Structure Navigation → TabItem (nested Button). */
+declare const TabItem: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "value"> & {
+    value: string;
+    leftIcon?: ReactNode;
+    children?: ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
 /** Figma Components → Information Collect → Slider (384:21585) */
 type SliderSize = "default" | "big";
 type SliderType = "default" | "range";
+type SliderRootProps = Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "orientation">;
 declare const sliderVariants: (props?: ({
     size?: "default" | "big" | null | undefined;
     type?: "default" | "range" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type SliderProps = Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "orientation"> & VariantProps<typeof sliderVariants> & {
+type SliderProps = SliderRootProps & VariantProps<typeof sliderVariants> & {
     /** Figma `Type` — single thumb vs range (two thumbs) */
     type?: SliderType;
+    /**
+     * When true, hovering a thumb (and while dragging it) shows a value
+     * tooltip bound to that thumb.
+     */
+    showValueTooltip?: boolean;
+    /** Format the value tooltip label. Defaults to `String(value)`. */
+    formatValueTooltip?: (value: number, index: number) => ReactNode;
 };
-declare const Slider: react.ForwardRefExoticComponent<Omit<Omit<SliderPrimitive.SliderProps & react.RefAttributes<HTMLSpanElement>, "ref">, "orientation"> & VariantProps<(props?: ({
+declare const Slider: react.ForwardRefExoticComponent<SliderRootProps & VariantProps<(props?: ({
     size?: "default" | "big" | null | undefined;
     type?: "default" | "range" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Figma `Type` — single thumb vs range (two thumbs) */
     type?: SliderType;
+    /**
+     * When true, hovering a thumb (and while dragging it) shows a value
+     * tooltip bound to that thumb.
+     */
+    showValueTooltip?: boolean;
+    /** Format the value tooltip label. Defaults to `String(value)`. */
+    formatValueTooltip?: (value: number, index: number) => ReactNode;
 } & react.RefAttributes<HTMLSpanElement>>;
 
 /** Figma Components → Information Collect → Upload (527:56239) */
@@ -2198,4 +2538,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function initKeyboardFocus(): void;
 
-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 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 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 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 };
+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 };