@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/typescript/commonjs/theme/types.d.ts

@@ -0,0 +1,1111 @@
+import type React from 'react';
+import type { TextStyle, ViewStyle } from 'react-native';
+export type ColorMode = 'light' | 'dark';
+/**
+ * A linear gradient definition used by Button, Card and consumer components.
+ * `colors` must have at least 2 entries. `start`/`end` are unit vectors in a
+ * y-down space: { x: 0..1, y: 0..1 }.
+ */
+export interface GradientDefinition {
+    colors: string[];
+    locations?: number[];
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+}
+export interface GradientScale {
+    /** Brand-primary gradient — used by `Button gradient` and `Card gradient="primary"`. */
+    primary?: GradientDefinition;
+    /** Secondary brand gradient. */
+    secondary?: GradientDefinition;
+    /** Backdrop / banner gradient (for hero sections). */
+    surface?: GradientDefinition;
+    /** Free-form named gradients. Consumer extends as needed. */
+    [key: string]: GradientDefinition | undefined;
+}
+export interface ColorPalette {
+    primary: string;
+    primaryHover: string;
+    primaryPressed: string;
+    primaryMuted: string;
+    secondary: string;
+    secondaryHover: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    /**
+     * Foreground (text/icon) colour to render ON a solid fill of each semantic
+     * tone. Solid Button / Badge / Chip / Banner backgrounds read these instead
+     * of assuming `text.inverse` (white) — white-on-pale (notably `warning`
+     * amber) fails contrast. Library defaults keep the historical white for
+     * primary/success/error/info, use dark ink for `warning`, and `text.primary`
+     * for the surface-like `secondary` tone. Override per-brand to match your
+     * palette's luminance.
+     */
+    onPrimary: string;
+    onSecondary: string;
+    onSuccess: string;
+    onWarning: string;
+    onError: string;
+    onInfo: string;
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        inverse: string;
+        disabled: string;
+        link: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        elevated: string;
+        overlay: string;
+        inverse: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        focus: string;
+        error: string;
+        /**
+         * Global outline thickness shared by every input-style control —
+         * Input, SearchBar, Select, OTPInput, Checkbox, Radio, outlined Card,
+         * outline Chip, Avatar border, outline Button, etc. Library default: 1.5.
+         * Component-specific tokens (e.g. `theme.components.input.borderWidth`)
+         * still win when set.
+         */
+        width: number;
+    };
+    /**
+     * The field family's own palette — Input, Select, SearchBar, NumberInput,
+     * PhoneNumberInput, the picker triggers: everything that composes
+     * FieldBase. Kept apart from the brand tones because a field's resting fill,
+     * hairline border and focus ring are a quieter set than `primary` /
+     * `border.focus` (the design spec draws the focus ring in a soft blue while
+     * buttons stay on the brand colour). Each key names the state it paints.
+     */
+    field: {
+        /** Resting fill (idle, empty or filled alike). */
+        background: string;
+        /** Fill while focused. */
+        backgroundFocused: string;
+        /** Fill while disabled. */
+        backgroundDisabled: string;
+        /** Resting hairline border (outlined box, underline rule, leading-icon divider). */
+        border: string;
+        /** Border while focused. */
+        borderFocused: string;
+        /** Border while in error. */
+        borderError: string;
+        /** Static label above the field. Stays put across focus/error. */
+        label: string;
+        /** Typed value. */
+        text: string;
+        /** Typed value while disabled; the spec dims it to the disabled placeholder ink. */
+        textDisabled: string;
+        /** Placeholder while enabled. */
+        placeholder: string;
+        /** Placeholder while disabled. */
+        placeholderDisabled: string;
+        /** Leading / trailing icon while idle. */
+        icon: string;
+        /** Leading / trailing icon while focused. */
+        iconFocused: string;
+        /** Leading / trailing icon while disabled. */
+        iconDisabled: string;
+        /** Caret and text-selection tint. */
+        caret: string;
+        /** Error message text and its glyph below the field. */
+        message: string;
+    };
+    surface: {
+        pressed: string;
+        hovered: string;
+        selected: string;
+        disabled: string;
+    };
+    /**
+     * A frosted control on a coloured or gradient surface: the `glass` variant
+     * of Button and IconButton (a "Switch" pill on a brand-colour card, a back
+     * button over a hero image). The surface under it is the brand colour in
+     * both colour schemes, so unlike every other group these values are the
+     * SAME in the light and dark themes. Bound to `text.inverse` they would
+     * flip with the scheme and put near-white ink on a pale fill in dark mode.
+     * A brand whose gradients are pale overrides the group.
+     */
+    glass: {
+        /** Translucent white fill; the surface shows through it. */
+        fill: string;
+        /** Specular rim, a step brighter than the fill, so the box has an edge. */
+        border: string;
+        /** Label and icon ink on the fill. */
+        on: string;
+        /** Opaque disc behind a badged slot icon (`Button leftIconBadge`). */
+        badge: string;
+    };
+    skeleton: {
+        background: string;
+        highlight: string;
+    };
+    /**
+     * Fixed hue set Avatar hashes a user's name against to pick an initials
+     * background — same index always resolves to the same colour for a given
+     * name. Light/dark themes each tune the 8 hues for contrast against their
+     * own surface; the hues themselves stay recognisably paired across modes.
+     */
+    avatarPalette: readonly string[];
+}
+export interface FontFamilyScale {
+    /** Font family for normal-weight text. Falls back to platform system font when undefined. */
+    regular?: string;
+    medium?: string;
+    semibold?: string;
+    bold?: string;
+}
+export interface TypographyScale {
+    fontSize: {
+        xs: number;
+        sm: number;
+        base: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        '4xl': number;
+    };
+    fontWeight: {
+        normal: TextStyle['fontWeight'];
+        medium: TextStyle['fontWeight'];
+        semibold: TextStyle['fontWeight'];
+        bold: TextStyle['fontWeight'];
+    };
+    /**
+     * Optional brand font families. When set, library text components prefer
+     * `fontFamily.<weight>` over `fontWeight.<weight>` to match the consumer
+     * app's typeface. Each key is independently optional — leave undefined to
+     * fall back to the system font for that weight.
+     */
+    fontFamily?: FontFamilyScale;
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+    letterSpacing: {
+        tight: number;
+        normal: number;
+        wide: number;
+    };
+}
+export interface SpacingScale {
+    none: 0;
+    xxs: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+}
+export interface RadiusScale {
+    none: 0;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    full: 9999;
+}
+export interface ShadowDefinition {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+export interface ShadowScale {
+    none: ViewStyle;
+    xs: ShadowDefinition;
+    sm: ShadowDefinition;
+    md: ShadowDefinition;
+    lg: ShadowDefinition;
+    xl: ShadowDefinition;
+    '2xl': ShadowDefinition;
+}
+export interface MotionScale {
+    duration: {
+        instant: number;
+        fast: number;
+        normal: number;
+        slow: number;
+        slower: number;
+    };
+    easing: {
+        standard: readonly [number, number, number, number];
+        accelerate: readonly [number, number, number, number];
+        decelerate: readonly [number, number, number, number];
+        sharp: readonly [number, number, number, number];
+    };
+    spring: {
+        gentle: {
+            damping: number;
+            stiffness: number;
+            mass: number;
+        };
+        bouncy: {
+            damping: number;
+            stiffness: number;
+            mass: number;
+        };
+        snappy: {
+            damping: number;
+            stiffness: number;
+            mass: number;
+        };
+    };
+}
+/**
+ * Per-component size tokens. Each component that exposes a `size` prop
+ * resolves dimensions via `theme.components.<name>[size]`. Library ships
+ * sensible defaults; consumer overrides win via `mergeTheme`.
+ *
+ * Keep entries here as components gain themable per-size dimensions —
+ * this is the single home for "X is X tall, has Y radius, uses Z font size".
+ */
+export type ComponentSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    minHeight: number;
+    fontSize: number;
+    borderRadius: number;
+    /** Pixel size of a `leftIcon` / `rightIcon` given by name. */
+    iconSize?: number;
+}
+export interface InputSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    minHeight: number;
+    multilineMinHeight: number;
+    fontSize: number;
+    borderRadius: number;
+    iconSize: number;
+}
+/**
+ * Per-size overrides laid over `components.field.<size>`: SearchBar shares
+ * the field family's height, padding, font and icon sizes with Input and
+ * Select, so the two line up side by side. Only `borderRadius` is set by
+ * default (`radius.full`, the pill); brands wanting the rounded-rect shape
+ * drop it to the matching `field.borderRadius`.
+ */
+export interface SearchBarSizeTokens {
+    minHeight?: number;
+    paddingHorizontal?: number;
+    fontSize?: number;
+    iconSize?: number;
+    borderRadius?: number;
+}
+export interface EmptyStateSizeTokens {
+    iconSize: number;
+    /** Resolves against the active theme's typography.fontSize scale, e.g. "lg", "xl", "2xl". */
+    titleFontSize: keyof TypographyScale['fontSize'];
+    descriptionFontSize: keyof TypographyScale['fontSize'];
+    /** Resolves against the active theme's spacing scale. */
+    paddingVertical: keyof SpacingScale;
+}
+export interface ListItemSizeTokens {
+    /** Resolves against the active theme's spacing scale. */
+    paddingVertical: keyof SpacingScale;
+    titleFontSize: keyof TypographyScale['fontSize'];
+    subtitleFontSize: keyof TypographyScale['fontSize'];
+    minHeight: number;
+}
+export interface BadgeSizeTokens {
+    fontSize: number;
+    minWidth: number;
+    height: number;
+    paddingHorizontal: number;
+    dotSize: number;
+}
+export interface ChipSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fontSize: number;
+    minHeight: number;
+    closeSize: number;
+    closeFontSize: number;
+    gap: number;
+    /** Pixel size of a `leftIcon` given by name. */
+    iconSize?: number;
+}
+export interface SwitchSizeTokens {
+    trackWidth: number;
+    trackHeight: number;
+    thumbSize: number;
+    padding: number;
+}
+export interface OTPInputSizeTokens {
+    cell: number;
+    fontSize: number;
+    borderRadius: number;
+    gap: number;
+}
+export interface DialogTokens {
+    iconWrapperSize: number;
+    iconWrapperBorderRadius: number;
+    actionButtonMinHeight: number;
+}
+export interface ToastTokens {
+    iconCircleSize: number;
+    iconCircleBorderRadius: number;
+    iconGlyphFontSize: number;
+    tintBarWidth: number;
+    /** Default auto-dismiss duration (ms) when toast.duration is unset. 0 = persistent. Library default: 3000. */
+    defaultDurationMs?: number;
+    /** Enable swipe-to-dismiss pan responder. Library default: true. */
+    enableSwipeDismiss?: boolean;
+    /** Horizontal swipe distance to dismiss. Library default: 80. */
+    swipeDismissThreshold?: number;
+    /** Horizontal swipe velocity to dismiss. Library default: 0.5. */
+    swipeVelocityThreshold?: number;
+    /** Vertical translate per stacked toast. Library default: 8. */
+    stackOffset?: number;
+    /** Scale decrement per stack index. Library default: 0.04. */
+    stackScaleStep?: number;
+    /** Lower bound for stack scale. Library default: 0.9. */
+    stackMinScale?: number;
+    /** Enter-spring damping. Library default: 18. */
+    enterSpringDamping?: number;
+    /** Enter-spring stiffness. Library default: 180. */
+    enterSpringStiffness?: number;
+    /** Enter-spring mass. Library default: 1. */
+    enterSpringMass?: number;
+}
+export interface FormFieldTokens {
+    /** Width of the inline label column when `layout="inline"`. Accepts CSS-like string ("35%") or number. */
+    inlineLabelWidth: number | `${number}%`;
+}
+export interface BadgeTokens extends Partial<Record<'sm' | 'md', BadgeSizeTokens>> {
+    borderWidth?: number;
+    anchorOffset?: number;
+}
+export interface CheckboxSizeTokens {
+    boxSize: number;
+}
+export interface CheckboxTokens extends Partial<Record<ComponentSizeKey, CheckboxSizeTokens>> {
+    labelGap?: number;
+}
+export type ChipTokens = Partial<Record<ComponentSizeKey, ChipSizeTokens>>;
+export type ListItemTokens = Partial<Record<ComponentSizeKey, ListItemSizeTokens>>;
+export interface RadioSizeTokens {
+    outer: number;
+    inner: number;
+}
+export interface RadioTokens extends Partial<Record<ComponentSizeKey, RadioSizeTokens>> {
+    labelGap?: number;
+}
+export interface NumberInputTokens {
+    /** Milliseconds before long-press auto-repeat kicks in. Library default: 500. */
+    longPressDelayMs?: number;
+    /** Milliseconds between auto-repeated step ticks while long-pressed. Library default: 80. */
+    longPressIntervalMs?: number;
+}
+export interface OTPInputTokens extends Partial<Record<ComponentSizeKey, OTPInputSizeTokens>> {
+    /** When true, the row shakes horizontally on first error transition. Library default: false. */
+    shakeOnError?: boolean;
+}
+export interface ProgressBarTokens {
+    /** Duration in ms of the indeterminate-loop animation cycle. Library default: 1500. */
+    indeterminateLoopDuration?: number;
+    /** Width of the moving bar in indeterminate mode (% string or number). Library default: '30%'. */
+    indeterminateWidth?: number | `${number}%`;
+    /** Duration in ms of the determinate progress tween. Library default: 400. */
+    determinateAnimationDuration?: number;
+}
+export interface ProgressRingTokens {
+    /** Duration in ms of the fill sweep between two progress values. Library default: 600. */
+    animationDuration?: number;
+    /** Stroke width of the track and the fill. Library default: 4. */
+    strokeWidth?: number;
+    /** Track colour. Library default: `colors.surface.disabled`. */
+    trackColor?: string;
+    /**
+     * The two thresholds of `colorByProgress`, as fractions: below the first
+     * the fill is `colors.error`, from there to the second `colors.warning`,
+     * from the second `colors.success`. Library default: `[1/3, 2/3]`.
+     */
+    colorStops?: [number, number];
+}
+export interface RatingTokens {
+    /** When true, the tapped star plays a pulse-scale animation. Library default: false. */
+    pulseOnPress?: boolean;
+    /** Peak scale of the pulse animation. Library default: 1.2. */
+    pulseScale?: number;
+}
+/**
+ * Per-size dimensions for the unified field box (FieldBase). Every
+ * input-like control (Input, Select, SearchBar, NumberInput, OTPInput cell,
+ * PickerTrigger) inherits these defaults so heights, radii, padding and
+ * font sizes stay aligned across the library. Component-specific tokens
+ * (e.g. `theme.components.input[size]`) still win when set.
+ */
+export interface FieldSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    minHeight: number;
+    fontSize: number;
+    borderRadius: number;
+    iconSize: number;
+    /** Static label above the field: type size. Falls back to the size ladder default. */
+    labelFontSize?: number;
+    /** Gap between the static label's baseline box and the field box. */
+    labelGap?: number;
+    /** Helper / error message below the field: type size. */
+    messageFontSize?: number;
+    /** Gap between the field box and the helper / error message. */
+    messageGap?: number;
+}
+/** `FieldSizeTokens` with every optional dimension filled in by the resolver. */
+export type ResolvedFieldSizeTokens = Required<FieldSizeTokens>;
+/**
+ * One of the four field-box sides. Used everywhere the library accepts
+ * per-side overrides for border width / colour.
+ */
+export type FieldSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Shorthand-or-longhand value. A bare `T` means "apply to all four sides";
+ * an object form lets a consumer set specific sides while the others fall
+ * through to whatever the resolver decided. Mirrors how React Native's
+ * `borderWidth` + `borderXWidth` (and CSS `border` + `border-X`) compose.
+ */
+export type FieldPerSide<T> = T | Partial<Record<FieldSide, T>>;
+/** Border colour value: a single colour string or a per-side colour map. */
+export type FieldBorderColor = FieldPerSide<string>;
+/** Border width value: a single width or a per-side width map. */
+export type FieldBorderWidth = FieldPerSide<number>;
+/**
+ * State-aware fill + border colours for a field variant. Resolution order
+ * inside FieldBase: variant token → library default. Idle distinguishes
+ * empty vs filled so consumers can tint the resting field differently once
+ * the user has typed. When focused/error/disabled fills are omitted, the
+ * box animates from the current idle fill to itself (no fill change).
+ *
+ * Border colour + width are `FieldPerSide` values — pass a bare string /
+ * number to set all four sides (the common case), or an object like
+ * `{ bottom: '#1A73E8' }` to draw only one side. Sides not specified in the
+ * object fall through to the shorthand default.
+ */
+export interface FieldVariantTokens {
+    backgroundIdleEmpty: string;
+    backgroundIdleFilled?: string;
+    backgroundFocused?: string;
+    backgroundError?: string;
+    backgroundDisabled: string;
+    borderIdle: FieldBorderColor;
+    borderFocused: FieldBorderColor;
+    borderError: FieldBorderColor;
+    borderDisabled: FieldBorderColor;
+    borderWidth: FieldBorderWidth;
+}
+export interface FieldTokens extends Partial<Record<'sm' | 'md' | 'lg', FieldSizeTokens>> {
+    /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
+    /** State-aware fill + border colours per variant. */
+    outlined?: Partial<FieldVariantTokens>;
+    filled?: Partial<FieldVariantTokens>;
+    /** Bottom-border-only variant — Material-style underline inputs. */
+    underline?: Partial<FieldVariantTokens>;
+    /** Text colour for the editable / displayed value. Defaults to `colors.text.primary`. */
+    textColor?: string;
+    /** Text colour when the field is disabled. Defaults to `colors.text.disabled`. */
+    disabledTextColor?: string;
+    /** Placeholder text colour. Defaults to `colors.text.tertiary`. */
+    placeholderColor?: string;
+    /** Font weight for the value text. Defaults to `typography.fontWeight.medium`. */
+    fontWeight?: TextStyle['fontWeight'];
+    /**
+     * Marker appended (after a space) to a field's label when `required` is set.
+     * Shared by the whole field family — Input, Select, FormField, PickerTrigger
+     * and the pickers built on it. Defaults to `'*'`.
+     */
+    requiredMarker?: string;
+    /** Colour of the required marker. Defaults to `colors.error`. */
+    requiredMarkerColor?: string;
+}
+export interface InputFillTokens {
+    /** Background colour while idle and the field is empty (no value). */
+    idleEmpty?: string;
+    /** Background colour while idle and the field has a value. Falls back to `idleEmpty` if undefined. */
+    idleFilled?: string;
+    /** Background colour while focused. Falls back to the current idle fill if undefined. */
+    focus?: string;
+    /** Background colour while in error state. Falls back to the current idle fill if undefined. */
+    error?: string;
+    /** Background colour while disabled. Falls back to `colors.surface.disabled`. */
+    disabled?: string;
+}
+export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, InputSizeTokens>> {
+    /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
+    /** Default `labelMode` when caller doesn't pass one. Library default: 'float'. */
+    defaultLabelMode?: 'float' | 'top';
+    /** Corner radius in pixels for the field wrapper. Library default: size-driven (sm=10, md=12, lg=14). */
+    borderRadius?: number;
+    /**
+     * When true, the label switches to `colors.border.focus` while the field is
+     * focused. Library default is false — the label stays its resting colour on
+     * focus and only the border tints. Error state always uses `colors.error`
+     * regardless of this flag.
+     */
+    tintLabelOnFocus?: boolean;
+    /**
+     * When true, the field shakes horizontally and fires an error haptic the
+     * moment an error first appears. Library default is false — the border and
+     * message turn red without any motion. Opt in for a more Material-Design
+     * feel.
+     */
+    shakeOnError?: boolean;
+    /**
+     * State-aware fill colours per variant. When omitted, the library falls
+     * back to `colors.background.primary` for outlined idle, `colors.background.secondary`
+     * for filled idle, `colors.surface.disabled` when disabled, and keeps focus/error
+     * the same as idle. The component interpolates between these the same way
+     * it animates the border, so transitions are smooth.
+     */
+    fillColors?: {
+        outlined?: InputFillTokens;
+        filled?: InputFillTokens;
+        underline?: InputFillTokens;
+    };
+}
+export interface BottomSheetTokens {
+    /** Colour of the grab-handle rendered above the sheet content. Library default: `colors.border.primary`. */
+    handleColor?: string;
+}
+export interface ChoiceGroupTokens {
+    /** Corner radius of the default card template. Library default: `radius.md`. */
+    borderRadius?: number;
+    /** Opacity of the option colour used as the selected card's fill (0–1). Library default: 0.12. */
+    selectedFillOpacity?: number;
+}
+export interface FilePickerTokens {
+    /** Corner radius of the trigger card and file tiles. Library default: `radius.md`. */
+    borderRadius?: number;
+    /** Square size of card-variant thumbnails in px. Library default: 84. */
+    thumbnailSize?: number;
+    /** Colour of the dashed trigger border. Library default: `colors.primary`. */
+    dashedBorderColor?: string;
+}
+export interface ProfilePickerTokens {
+    /** Default `tone` of the camera badge when the prop is not passed. Library default: `'primary'`. */
+    defaultTone?: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Default `variant` of the camera badge when the prop is not passed. Library default: `'solid'`. */
+    defaultVariant?: 'solid' | 'soft' | 'outline';
+    /**
+     * Default `avatarTone` of the initials disc and the empty placeholder when
+     * the prop is not passed. Library default: none (the Avatar's per-name
+     * palette, and a grey placeholder).
+     */
+    defaultAvatarTone?: 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * The badge's colour in place of the tone's: the fill when solid, the tint
+     * and the icon when soft, the ring and the icon when outline. Library
+     * default: the tone's colour.
+     */
+    badgeColor?: string;
+    /** Exact icon colour of the badge, winning over the variant's. Library default: the variant's ink. */
+    badgeIconColor?: string;
+}
+export interface InlineSelectTokens {
+    /** Trigger text + chevron colour. Library default: `colors.primary`. */
+    color?: string;
+}
+export interface SelectTokens {
+    /** Colour of the grab-handle rendered above the bottom-sheet picker. Library default: `colors.border.primary`. */
+    handleColor?: string;
+    /** Default `variant` when caller doesn't pass one. Falls through to `components.field.defaultVariant`, then 'outlined'. */
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
+    /** Corner radius in pixels for the trigger field. Library default: size-driven (sm=10, md=12, lg=14). */
+    borderRadius?: number;
+    /**
+     * State-aware fill colours per variant for the trigger field. Mirrors
+     * `components.input.fillColors`; when omitted the library falls back to the
+     * same defaults FieldBase uses for each variant.
+     */
+    fillColors?: {
+        outlined?: InputFillTokens;
+        filled?: InputFillTokens;
+        underline?: InputFillTokens;
+    };
+}
+export interface PhoneNumberInputTokens {
+    /** Corner radius in pixels for the field box. Library default: the shared field radius (`components.field.<size>.borderRadius`). */
+    borderRadius?: number;
+}
+export interface BottomNavigationTokens {
+    /**
+     * Corner radius of the bar's own surface: the docked bar, or the detached
+     * capsule when `variant="floating"`. Library default: 0 docked, 28 floating.
+     */
+    borderRadius?: number;
+    /** Pixel size of tab icons. Library default: 24. */
+    iconSize?: number;
+    /** Height of the pill background drawn behind the active tab when `variant="pill"`. Library default: 36. */
+    pillHeight?: number;
+    /** Maximum width of the pill background, however wide its tab cell. Library default: 64. */
+    pillMaxWidth?: number;
+    /** Horizontal inset of the pill from the edges of its tab cell. Library default: 16. */
+    pillInset?: number;
+    /** Thickness of the underline indicator when `variant="underline"`. Library default: 3. */
+    underlineHeight?: number;
+    /** Gap between the detached capsule and the screen edges when `variant="floating"`. Library default: 16. */
+    floatingMargin?: number;
+    /** Corner radius of the detached capsule when `variant="floating"`. Library default: 28. */
+    floatingRadius?: number;
+    /** Diameter of the filled circle behind the active icon when `variant="bubble"`. Library default: 48. */
+    bubbleSize?: number;
+    /** How far the active icon and its circle rise above their resting spot when `variant="bubble"`. Library default: 14. */
+    bubbleLift?: number;
+}
+export interface DatePickerTokens {
+    /** Pixel offset for the month-slide animation. Default: 32. */
+    monthSlideDistance?: number;
+    /** Outgoing month-slide animation duration (ms). Default: theme.motion.duration.fast or 140. */
+    monthSlideOutDuration?: number;
+    /** Incoming month-slide animation duration (ms). Default: theme.motion.duration.fast or 160. */
+    monthSlideInDuration?: number;
+    /** Day/year/decade view-transition fade+scale duration (ms). Default: theme.motion.duration.normal or 200. */
+    viewTransitionDuration?: number;
+    /** Header press-in scale animation duration (ms). Default: 80. */
+    headerPressDuration?: number;
+    /** Header release scale animation duration (ms). Default: 100. */
+    headerReleaseDuration?: number;
+    /** Width/height of the nav (prev/next) buttons. Default: 36. */
+    navButtonSize?: number;
+    /** Font size of the nav chevron text. Default: 22. */
+    navTextFontSize?: number;
+    /** Line height of the nav chevron text. Default: 24. */
+    navTextLineHeight?: number;
+    /** Padding around each day cell. Default: 2. */
+    dayCellPadding?: number;
+    /** Border radius of the inner day pill. Default: theme.radius.full. */
+    dayInnerBorderRadius?: number;
+    /** Padding around each year/decade cell. Default: 4. */
+    yearCellPadding?: number;
+    /** Border radius of the inner year/decade pill. Default: theme.radius.lg. */
+    yearInnerBorderRadius?: number;
+    /** Margin above the decade range subtitle text. Default: 2. */
+    decadeRangeMarginTop?: number;
+    /** Min height for the footer cancel/confirm buttons. Default: 40. */
+    footerButtonMinHeight?: number;
+}
+export interface DateRangePickerTokens {
+    /** Pixel offset for the month-slide animation. Default: 32. */
+    monthSlideDistance?: number;
+    /** Outgoing month-slide animation duration (ms). Default: theme.motion.duration.fast or 140. */
+    monthSlideOutDuration?: number;
+    /** Incoming month-slide animation duration (ms). Default: theme.motion.duration.fast or 160. */
+    monthSlideInDuration?: number;
+    /** Width/height of the nav (prev/next) buttons. Default: 36. */
+    navButtonSize?: number;
+    /** Font size of the nav chevron text. Default: 22. */
+    navTextFontSize?: number;
+    /** Line height of the nav chevron text. Default: 24. */
+    navTextLineHeight?: number;
+    /** Min height for the footer cancel/confirm buttons. Default: 40. */
+    footerButtonMinHeight?: number;
+}
+export interface TimePickerTokens {
+    /** Debounce window between scroll-haptic ticks (ms). Default: 35. */
+    hapticDebounceMs?: number;
+    /** Width of the bottom-sheet drag handle. Default: 36. */
+    handleWidth?: number;
+    /** Height of the bottom-sheet drag handle. Default: 4. */
+    handleHeight?: number;
+}
+export interface AvatarTokens {
+    /** Border width applied to the avatar wrapper. Library default: 0. */
+    borderWidth?: number;
+    /** Border colour applied to the avatar wrapper. Falls back to `colors.border.primary`. */
+    borderColor?: string;
+    /** Border width of the status indicator's ring. Library default: 2. */
+    statusBorderWidth?: number;
+    /** Border colour of the status indicator's ring. Falls back to `colors.background.elevated`. */
+    statusBorderColor?: string;
+    /**
+     * Width of the ring drawn for `status="verified"` and `status="pending"`.
+     * Library default: 1.5 at every size.
+     */
+    ringWidth?: number;
+    /**
+     * Clear gap between that ring and the picture. Library default: the ring
+     * width. The gap shows whatever is behind the avatar.
+     */
+    ringGap?: number;
+    /**
+     * Initials font size as a fraction of avatar dimension. Library default: 0.4
+     * (i.e. md avatar at 48px → 19px initials). Increase for larger initials.
+     */
+    fontSizeRatio?: number;
+    /**
+     * Absolute initials font size in pixels. Wins over `fontSizeRatio` when set.
+     * Use only when the design needs a fixed size regardless of avatar dimension.
+     */
+    fontSize?: number;
+    /**
+     * Font weight key for the initials text. Library default: 'semibold'.
+     */
+    fontWeight?: keyof TypographyScale['fontWeight'];
+}
+export interface AccordionTokens {
+    /** Vertical padding inside the `card` variant container. Library default: 4. */
+    cardPaddingVertical?: number;
+}
+export interface AppBarTokens {
+    /** Min-width of the left/right side action slots. Library default: 48. */
+    sideSlotMinWidth?: number;
+    /** Translate-Y distance (px, negative) the large title travels when collapsing. Library default: -20. */
+    collapseTranslateDistance?: number;
+    /** Margin between title and subtitle. */
+    subtitleMarginTop?: number;
+    /** Width/height of each action button (square). */
+    actionButtonSize?: number;
+    /** Top/right inset of the right-action badge bubble. */
+    badgeOffset?: number;
+    /** Min-width of the right-action badge bubble. */
+    badgeMinWidth?: number;
+    /** Height of the right-action badge bubble. */
+    badgeHeight?: number;
+    /** Horizontal padding inside the right-action badge bubble. */
+    badgePaddingHorizontal?: number;
+    /** Font size of the badge count text. */
+    badgeFontSize?: number;
+    /** Line height of the badge count text. */
+    badgeLineHeight?: number;
+}
+export interface BannerTokens {
+    tintBarWidth?: number;
+    iconCircleSize?: number;
+    iconCircleRadius?: number;
+    iconGlyphFontSize?: number;
+    iconGlyphLineHeight?: number;
+    closeButtonSize?: number;
+    closeButtonRadius?: number;
+    closeGlyphFontSize?: number;
+    closeButtonMarginLeft?: number;
+    containerPaddingLeft?: number;
+    iconGap?: number;
+    textBlockPaddingRight?: number;
+    actionsRowMarginTop?: number;
+    actionsRowGap?: number;
+    actionButtonPaddingHorizontal?: number;
+    actionButtonPaddingVertical?: number;
+    actionButtonRadius?: number;
+}
+export interface DrawerTokens {
+    /** Pixel velocity above which a fling closes the drawer. Library default: 1000. */
+    closeVelocityThreshold?: number;
+    /** Pixel drag distance before the gesture is recognised. Library default: 10. */
+    dragActivationOffset?: number;
+}
+export interface FloatingActionButtonTokens {
+    /** Horizontal inset from screen edge for bottomLeft/bottomRight positions. Library default: 24. */
+    edgeOffset?: number;
+    /** Default `bottomOffset` when the prop is not passed. Library default: 24. */
+    bottomOffset?: number;
+    /** Vertical gap between stacked secondary actions in the group. Library default: 16. */
+    secondaryGap?: number;
+    /** Per-item stagger delay in ms when opening/closing the group. Library default: 50. */
+    staggerMs?: number;
+}
+export interface ImageGalleryTokens {
+    /** Maximum pinch-zoom scale. Library default: 4. */
+    maxScale?: number;
+    /** Minimum pinch-zoom scale (1 = fit). Library default: 1. */
+    minScale?: number;
+    /** Scale applied on double-tap at rest. Library default: 2. */
+    doubleTapScale?: number;
+}
+export interface ModalTokens {
+    /** Initial scale value for the centred presentation enter animation. Library default: 0.9. */
+    scaleStartValue?: number;
+}
+export interface SegmentedControlSizeTokens {
+    height?: number;
+    fontSize?: number;
+    paddingHorizontal?: number;
+    /** Pixel size a named icon is drawn at. Library defaults: sm 14, md 16, lg 18. */
+    iconSize?: number;
+}
+export interface SegmentedControlTokens extends Partial<Record<'sm' | 'md' | 'lg', SegmentedControlSizeTokens>> {
+    /** Padding between the track edge and the selected indicator (segmented variant). Library default: 4. */
+    trackPadding?: number;
+    /**
+     * Corner radius in pixels for the segmented track (the thumb nests inside
+     * it), the pill and the underline ends; the `radius` prop wins over it.
+     * Library default: none (each variant keeps its own corner: md track, sm
+     * thumb, full pill, square underline).
+     */
+    radius?: number;
+    /** Underline indicator thickness (underline variant). Library default: 2. */
+    underlineHeight?: number;
+    /** Vertical inset of the pill indicator from the row edges (pills variant). Library default: 4. */
+    pillInset?: number;
+}
+export interface SliderSizeTokens {
+    trackHeight?: number;
+    thumbDiameter?: number;
+}
+export interface SliderTokens extends Partial<Record<ComponentSizeKey, SliderSizeTokens>> {
+    /** When true, the thumb plays a scale-up animation while pressed. Library default: false. */
+    thumbPressAnimation?: boolean;
+    /** Peak scale of the thumb press animation. Library default: 1.15. */
+    thumbPressScale?: number;
+    /** Duration in ms of the bubble-label fade. Library default: 120. */
+    labelShowDuration?: number;
+    /** Final opacity of the bubble label when visible. Library default: 1. */
+    labelOpacity?: number;
+}
+export interface StepperTokens {
+    /** Diameter of each step circle. Library default: 24. */
+    circleSize?: number;
+    /** Diameter of the surrounding pulse ring. Library default: 32. */
+    pulseSize?: number;
+    /** Duration in ms of one pulse cycle. Library default: 1100. */
+    pulseDuration?: number;
+    /** When true, the active step animates a continuous pulse ring. Library default: false. */
+    pulseAnimation?: boolean;
+}
+export interface SwipeableTokens {
+    /** Pixel distance after which a partial-swipe action commits on release. Library default: 64. */
+    threshold?: number;
+    /** Pixel distance after which a full-swipe (delete) gesture fires. Library default: 240. */
+    fullSwipeThreshold?: number;
+    /** Pixel drag offset before the horizontal gesture activates. Library default: 10. */
+    dragActivationOffset?: number;
+    /** Rubber-band resistance factor when swiping past the action area. Library default: 0.25. */
+    rubberBandFactor?: number;
+    /** Vertical pixel offset before the gesture is rejected (lets vertical scroll win). Library default: 15. */
+    failOffsetY?: number;
+    /** Spring damping for snap-back animation. */
+    springDamping?: number;
+    /** Spring stiffness for snap-back animation. */
+    springStiffness?: number;
+    /** Spring mass for snap-back animation. */
+    springMass?: number;
+}
+/** Per-size overrides for Tabs; a value here wins over the flat token of the same meaning. */
+export interface TabsSizeTokens {
+    /** Label type size. Library defaults: sm 13, md 15, lg 17. */
+    fontSize?: number;
+    /** Vertical padding of each tab. Library defaults: sm 8, md 12, lg 16. */
+    paddingVertical?: number;
+    /** Horizontal padding of an equal-width tab. Library defaults: sm 4, md 8, lg 12. */
+    paddingHorizontal?: number;
+    /** Horizontal padding of a scrollable tab. Library defaults: sm 12, md 16, lg 24. */
+    scrollablePaddingHorizontal?: number;
+    /** Pixel size a named icon is drawn at. Library defaults: sm 16, md 18, lg 20. */
+    iconSize?: number;
+}
+export interface TabsTokens extends Partial<Record<'sm' | 'md' | 'lg', TabsSizeTokens>> {
+    /** Horizontal padding of each tab, every size. Library default: per size (see TabsSizeTokens). */
+    tabPaddingHorizontal?: number;
+    /** Vertical padding of each tab, every size. Library default: per size. */
+    tabPaddingVertical?: number;
+    /** Gap between leading icon and label. Library default: 6. */
+    tabIconSpacing?: number;
+    /** Pixel size a named icon is drawn at, every size. Library default: per size. */
+    tabIconSize?: number;
+    /** Inset between the segmented track's edge and its thumb. Library default: 4. */
+    trackPadding?: number;
+    /**
+     * Corner radius in pixels for the segmented track, the pill and the underline
+     * ends; the `radius` prop wins over it. Library default: none (each variant
+     * keeps its own corner: md track, sm thumb, full pill, square underline).
+     */
+    radius?: number;
+    /** Underline indicator thickness (underline variant). Library default: 2. */
+    underlineHeight?: number;
+    /** Vertical inset of pill indicator from row edges (pills variant). Library default: 4. */
+    pillInset?: number;
+    /** Opacity applied to disabled tabs. Library default: 0.45. */
+    disabledOpacity?: number;
+    /** Gap between label and inline badge. Library default: 6. */
+    badgeGap?: number;
+}
+export interface TimelineTokens {
+    /** Diameter of the status dot. Library default: 12. */
+    dotSize?: number;
+    /** Width of the soft halo ring around the dot, on each side. Library default: 6. */
+    haloWidth?: number;
+    /** Gap between a halo's edge and the connector or rail that leaves it. Library default: 4. */
+    connectorGap?: number;
+}
+export interface TooltipTokens {
+    /** Gap between trigger and tooltip card. Library default: 8. */
+    gap?: number;
+    /** Minimum padding from screen edges. Library default: 8. */
+    screenPadding?: number;
+    /** Auto-hide delay for `trigger='press'`. Library default: 4000. */
+    pressAutoHideMs?: number;
+    /** Half the arrow base width. Library default: 4. */
+    arrowHalfWidth?: number;
+    /** Arrow height (pointing dimension). Library default: 6. */
+    arrowHeight?: number;
+    /** Min distance of arrow tip from card corner. Library default: 12. */
+    arrowCornerPadding?: number;
+    /** Default `maxWidth` when prop is unset. Library default: 240. */
+    maxWidth?: number;
+    /** Message Text lineHeight. Library default: 18. */
+    lineHeight?: number;
+    /** Opt-in scale-from-0.85 entry/exit animation. Library default: false (opacity-only). */
+    enableScaleAnimation?: boolean;
+    /** Duration of fade/scale exit. Library default: 150. */
+    exitDurationMs?: number;
+}
+export interface ComponentTokens {
+    accordion?: AccordionTokens;
+    appBar?: AppBarTokens;
+    avatar?: AvatarTokens;
+    banner?: BannerTokens;
+    button?: Partial<Record<ComponentSizeKey, ButtonSizeTokens>>;
+    badge?: BadgeTokens;
+    bottomNavigation?: BottomNavigationTokens;
+    bottomSheet?: BottomSheetTokens;
+    checkbox?: CheckboxTokens;
+    chip?: ChipTokens;
+    choiceGroup?: ChoiceGroupTokens;
+    datePicker?: DatePickerTokens;
+    dateRangePicker?: DateRangePickerTokens;
+    dialog?: DialogTokens;
+    drawer?: DrawerTokens;
+    emptyState?: Partial<Record<ComponentSizeKey, EmptyStateSizeTokens>>;
+    /**
+     * Shared dimensions + state colours for every input-like control. Acts as
+     * the single source of truth for height / radius / padding / fill / border
+     * across Input, Select, SearchBar, NumberInput, OTPInput cells and
+     * PickerTrigger. Per-component tokens still override when set.
+     */
+    field?: FieldTokens;
+    filePicker?: FilePickerTokens;
+    floatingActionButton?: FloatingActionButtonTokens;
+    formField?: FormFieldTokens;
+    imageGallery?: ImageGalleryTokens;
+    inlineSelect?: InlineSelectTokens;
+    input?: InputComponentTokens;
+    listItem?: ListItemTokens;
+    modal?: ModalTokens;
+    numberInput?: NumberInputTokens;
+    otpInput?: OTPInputTokens;
+    phoneNumberInput?: PhoneNumberInputTokens;
+    profilePicker?: ProfilePickerTokens;
+    progressBar?: ProgressBarTokens;
+    progressRing?: ProgressRingTokens;
+    radio?: RadioTokens;
+    rating?: RatingTokens;
+    searchBar?: Partial<Record<ComponentSizeKey, SearchBarSizeTokens>> & {
+        /**
+         * Default `variant` when caller doesn't pass one. Library default:
+         * `'filled'` (pill-shaped, borderless). Set this to `'outlined'` to make
+         * SearchBar pick up the same fill / border / focus treatment as Input,
+         * Select, OTPInput etc. — useful when a brand has unified its inputs.
+         * Falls through to `components.field.defaultVariant` when undefined.
+         */
+        defaultVariant?: 'outlined' | 'filled' | 'underline';
+    };
+    segmentedControl?: SegmentedControlTokens;
+    select?: SelectTokens;
+    slider?: SliderTokens;
+    stepper?: StepperTokens;
+    swipeable?: SwipeableTokens;
+    switch?: Partial<Record<ComponentSizeKey, SwitchSizeTokens>> & {
+        thumbColor?: string;
+    };
+    tabs?: TabsTokens;
+    timePicker?: TimePickerTokens;
+    timeline?: TimelineTokens;
+    toast?: ToastTokens;
+    tooltip?: TooltipTokens;
+}
+/**
+ * Renderer signature for theme-level icons. Each registry entry receives a
+ * pixel `size` and a `color` and returns whatever JSX the consumer wants —
+ * an SVG, a vector-icons glyph, an Image, an emoji-wrapped Text, anything.
+ */
+export type IconRenderer = (props: {
+    size: number;
+    color: string;
+}) => React.ReactNode;
+/**
+ * Theme-level icon registry. Library components read from this when they
+ * need to render an icon internally (Input password toggle, SearchBar
+ * magnifier/clear, ImageGallery close, etc.). Consumers provide the
+ * implementations — the library ships with no icon dependency.
+ *
+ * Slots default to `undefined` — if a slot is missing the library renders
+ * a small text/SVG fallback (or nothing, depending on the call site).
+ */
+export interface IconRegistry {
+    /** Magnifier icon — SearchBar leading slot when no `leftIcon` prop. */
+    search?: IconRenderer;
+    /** Close/dismiss icon — SearchBar clear, ImageGallery close, etc. */
+    close?: IconRenderer;
+    /** Show-password icon — Input password toggle (visible state). */
+    eye?: IconRenderer;
+    /** Hide-password icon — Input password toggle (masked state). */
+    eyeOff?: IconRenderer;
+    /** Paperclip/attachment icon — FilePicker trigger. Text-only trigger when unset. */
+    attachment?: IconRenderer;
+    /**
+     * Circled-exclamation glyph drawn before a field's error message. When
+     * unset the field family draws a small ring-and-bang of its own, so the
+     * message never renders without the glyph.
+     */
+    error?: IconRenderer;
+    /**
+     * Dropdown indicator: Select, InlineSelect, PickerTrigger, PhoneNumberInput's
+     * country trigger and Accordion's header. The library's default is the
+     * icon set's line chevron (`chevron-down`).
+     */
+    chevronDown?: IconRenderer;
+    /** Trailing "goes somewhere" chevron on ListItem. Default `chevron-right`. */
+    chevronRight?: IconRenderer;
+}
+export interface Theme {
+    mode: ColorMode;
+    colors: ColorPalette;
+    typography: TypographyScale;
+    spacing: SpacingScale;
+    radius: RadiusScale;
+    shadows: ShadowScale;
+    motion: MotionScale;
+    components: ComponentTokens;
+    /** Theme-level icon registry — see {@link IconRegistry}. */
+    icons?: IconRegistry;
+    /**
+     * Optional brand gradient palette. Empty by default — consumers register
+     * their own via theme overrides. Components that accept gradient inputs
+     * (Button, Card) read from here when consumers pass a string token, OR
+     * accept a `GradientDefinition` literal directly.
+     */
+    gradients: GradientScale;
+}
+export type DeepPartial<T> = T extends object ? {
+    [K in keyof T]?: DeepPartial<T[K]>;
+} : T;
+export type ThemeOverrides = DeepPartial<Theme>;
+//# sourceMappingURL=types.d.ts.map