@webority/mobile-ui 0.18.0 → 0.19.0

package/lib/typescript/module/theme/componentTokens.d.ts

@@ -0,0 +1,762 @@
+import type { TextStyle } from 'react-native';
+import type { FontSizeKey, RadiusKey, SpacingKey, TypographyScale } from './types.js';
+/**
+ * Every component's themable dimensions. Spacing, text size and corner values
+ * are scale names (`'md'`, `'base'`), resolved against the active theme at
+ * render, so a ThemeProvider override of a scale reaches every component.
+ * Dimensions no scale covers (heights, icon boxes, track widths, tap targets)
+ * are pixel numbers.
+ *
+ * A component with a size ladder holds every key for every size in the
+ * default theme; optional keys are derived slots (left empty, they follow the
+ * colour, motion or component the JSDoc names) or overrides of a default the
+ * component keeps in code.
+ */
+export type ComponentSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type Ladder<Size extends string, T> = Record<Size, T>;
+export interface ButtonSizeTokens {
+    paddingX: SpacingKey;
+    paddingY: SpacingKey;
+    minHeight: number;
+    text: FontSizeKey;
+    radius: RadiusKey;
+    /** Pixel size of a `leftIcon` / `rightIcon` given by name. */
+    icon: number;
+    /** Pixel size of the icon inside a badge disc. */
+    badgeIcon: number;
+}
+/**
+ * The unified field box every input-like control draws through FieldBase:
+ * Input, Select, SearchBar, NumberInput, PickerTrigger, PhoneNumberInput and
+ * the pickers built on them.
+ */
+export interface FieldSizeTokens {
+    paddingX: SpacingKey;
+    paddingY: SpacingKey;
+    minHeight: number;
+    text: FontSizeKey;
+    radius: RadiusKey;
+    icon: number;
+    /** Static label above the field. */
+    labelText: FontSizeKey;
+    /** Between the static label and the field box. */
+    labelGap: SpacingKey;
+    /** Helper and error message below the field. */
+    messageText: FontSizeKey;
+    /** Between the field box and the message. */
+    messageGap: SpacingKey;
+}
+/**
+ * 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 Ladder<'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 InputSizeTokens {
+    /** Height of a multiline field before it grows with its text. */
+    multilineMinHeight: number;
+}
+export interface InputComponentTokens extends Ladder<'sm' | 'md' | 'lg', 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';
+    /**
+     * 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;
+    };
+}
+/**
+ * SearchBar shares the field box (`field.<size>`) with Input and Select, so
+ * the two line up side by side; only its corner is its own.
+ */
+export interface SearchBarSizeTokens {
+    radius: RadiusKey;
+}
+export interface SearchBarTokens extends Ladder<'sm' | 'md' | 'lg', 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';
+}
+export interface EmptyStateSizeTokens {
+    icon: number;
+    titleText: FontSizeKey;
+    descriptionText: FontSizeKey;
+    paddingY: SpacingKey;
+    /** Between the icon and the title. */
+    titleGap: SpacingKey;
+    /** Between the title and the description. */
+    descriptionGap: SpacingKey;
+}
+export interface ListItemSizeTokens {
+    paddingY: SpacingKey;
+    titleText: FontSizeKey;
+    subtitleText: FontSizeKey;
+    minHeight: number;
+}
+export interface BadgeSizeTokens {
+    text: FontSizeKey;
+    minWidth: number;
+    height: number;
+    paddingX: SpacingKey;
+    dotSize: number;
+}
+export interface BadgeTokens extends Ladder<'sm' | 'md', BadgeSizeTokens> {
+    borderWidth: number;
+    /** How far the badge sits outside its anchor corner. */
+    anchorOffset: number;
+}
+export interface ChipSizeTokens {
+    paddingX: SpacingKey;
+    paddingY: SpacingKey;
+    text: FontSizeKey;
+    minHeight: number;
+    closeSize: number;
+    closeText: FontSizeKey;
+    gap: SpacingKey;
+    /** Pixel size of a `leftIcon` given by name. */
+    icon: number;
+}
+export interface CheckboxSizeTokens {
+    boxSize: number;
+}
+export interface CheckboxTokens extends Ladder<'sm' | 'md' | 'lg', CheckboxSizeTokens> {
+    labelGap: SpacingKey;
+}
+export interface RadioSizeTokens {
+    outer: number;
+    inner: number;
+}
+export interface RadioTokens extends Ladder<'sm' | 'md' | 'lg', RadioSizeTokens> {
+    labelGap: SpacingKey;
+}
+export interface SwitchSizeTokens {
+    trackWidth: number;
+    trackHeight: number;
+    thumbSize: number;
+    /** Inset between the track edge and the thumb. */
+    padding: number;
+}
+export interface SwitchTokens extends Ladder<'sm' | 'md' | 'lg', SwitchSizeTokens> {
+    thumbColor?: string;
+}
+export interface OTPInputSizeTokens {
+    cell: number;
+    text: FontSizeKey;
+    radius: RadiusKey;
+    gap: SpacingKey;
+}
+export interface OTPInputTokens extends Ladder<'sm' | 'md' | 'lg', OTPInputSizeTokens> {
+    /** When true, the row shakes horizontally on first error transition. Library default: false. */
+    shakeOnError?: boolean;
+}
+export interface SegmentedControlSizeTokens {
+    height: number;
+    text: FontSizeKey;
+    paddingX: SpacingKey;
+    /** Pixel size a named icon is drawn at. */
+    icon: number;
+}
+export interface SegmentedControlTokens extends Ladder<'sm' | 'md' | 'lg', SegmentedControlSizeTokens> {
+    /** Between the track edge and the selected indicator (segmented variant). */
+    trackPadding: SpacingKey;
+    /** Underline indicator thickness (underline variant). */
+    underlineHeight: number;
+    /** Vertical inset of the pill indicator from the row edges (pills variant). */
+    pillInset: SpacingKey;
+    /**
+     * Corner for the segmented track (the thumb nests inside it), the pill and
+     * the underline ends; the `radius` prop wins over it. Empty: each variant
+     * keeps its own corner (md track, sm thumb, pill, square underline).
+     */
+    radius?: RadiusKey;
+}
+export interface TabsSizeTokens {
+    text: FontSizeKey;
+    paddingY: SpacingKey;
+    /** Horizontal padding of an equal-width tab. */
+    paddingX: SpacingKey;
+    /** Horizontal padding of a scrollable tab. */
+    scrollablePaddingX: SpacingKey;
+    /** Pixel size a named icon is drawn at. */
+    icon: number;
+}
+export interface TabsTokens extends Ladder<'sm' | 'md' | 'lg', TabsSizeTokens> {
+    /** Between a leading icon and the label. */
+    iconGap: SpacingKey;
+    /** Between the segmented track's edge and its thumb. */
+    trackPadding: SpacingKey;
+    /** Underline indicator thickness (underline variant). */
+    underlineHeight: number;
+    /** Vertical inset of the pill indicator from the row edges (pills variant). */
+    pillInset: SpacingKey;
+    /** Opacity applied to disabled tabs. */
+    disabledOpacity: number;
+    /** Between the label and an inline badge. */
+    badgeGap: SpacingKey;
+    /**
+     * Corner for the segmented track, the pill and the underline ends; the
+     * `radius` prop wins over it. Empty: each variant keeps its own corner
+     * (md track, sm thumb, pill, square underline).
+     */
+    radius?: RadiusKey;
+}
+export interface SliderSizeTokens {
+    trackHeight: number;
+    thumbDiameter: number;
+}
+export interface SliderTokens extends Ladder<'sm' | 'md' | 'lg', 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 FloatingActionButtonSizeTokens {
+    diameter: number;
+    icon: number;
+    text: FontSizeKey;
+    /** Horizontal padding of the extended (labelled) button. */
+    labelPaddingX: SpacingKey;
+}
+export interface FloatingActionButtonTokens extends Ladder<'sm' | 'md' | 'lg', FloatingActionButtonSizeTokens> {
+    /** Inset from the screen edge for the bottomLeft and bottomRight positions. */
+    edgeOffset: SpacingKey;
+    /** Default `bottomOffset` when the prop is not passed. */
+    bottomOffset: SpacingKey;
+    /** Between stacked secondary actions in the group. */
+    secondaryGap: SpacingKey;
+    /** Per-item stagger delay in ms when opening/closing the group. */
+    staggerMs: number;
+}
+export interface DialogTokens {
+    /** Diameter of the circle behind the tone icon; its corner is always a pill. */
+    iconWrapperSize: number;
+    actionButtonMinHeight: number;
+}
+export interface ToastTokens {
+    /** Diameter of the circle behind the tone icon; its corner is always a pill. */
+    iconCircleSize: number;
+    iconGlyphText: FontSizeKey;
+    /** Width of the leading tone bar: 0 draws none and the icon carries the tone; 4 restores the bar. */
+    tintBarWidth: number;
+    /** Tap-target floor of the action button, whatever its padding. */
+    actionMinHeight: 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 BannerTokens {
+    /** Width of the leading tone bar: 0 draws none and the icon carries the tone; 4 restores the bar. */
+    tintBarWidth: number;
+    /** Diameter of the circle behind the tone icon; its corner is always a pill. */
+    iconCircleSize?: number;
+    iconGlyphText?: FontSizeKey;
+    iconGlyphLineHeight?: number;
+    /** Diameter of the close button; its corner is always a pill. */
+    closeButtonSize?: number;
+    closeGlyphText?: FontSizeKey;
+    closeButtonMarginLeft?: SpacingKey;
+    containerPaddingLeft?: SpacingKey;
+    iconGap?: SpacingKey;
+    textBlockPaddingRight?: SpacingKey;
+    actionsRowMarginTop?: SpacingKey;
+    actionsRowGap?: SpacingKey;
+    actionButtonPaddingX?: SpacingKey;
+    actionButtonPaddingY?: SpacingKey;
+    actionButtonRadius?: RadiusKey;
+}
+export interface FormFieldTokens {
+    /** Width of the inline label column when `layout="inline"`. Accepts CSS-like string ("35%") or number. */
+    inlineLabelWidth: number | `${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 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;
+}
+export interface BottomSheetTokens {
+    /** Colour of the grab-handle rendered above the sheet content. Library default: `colors.border.primary`. */
+    handleColor?: string;
+}
+export interface ChoiceGroupTokens {
+    /** Corner of the default card template. Library default: `'md'`. */
+    radius?: RadiusKey;
+    /** Opacity of the option colour used as the selected card's fill (0–1). Library default: 0.12. */
+    selectedFillOpacity?: number;
+}
+export interface FilePickerTokens {
+    /** Corner of the trigger card and file tiles. Library default: `'md'`. */
+    radius?: RadiusKey;
+    /** 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 OptionSheetTokens {
+    /**
+     * Mark on the selected row of a single-choice sheet (Select, InlineSelect,
+     * PhoneNumberInput and every other OptionSheet): `'dot'` is an 8 px dot,
+     * `'icon'` the `tick-circle` icon in its bulk style at 20 px. Both are drawn
+     * in `colors.primary`. Multi-select keeps its checkbox. Library default: `'dot'`.
+     */
+    selectedMarker?: 'dot' | 'icon';
+}
+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';
+    /**
+     * 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 BottomNavigationTokens {
+    /** Corner of the docked bar's own surface. Library default: `'none'`. */
+    radius?: RadiusKey;
+    /** Pixel size of tab icons. Library default: 18. */
+    iconSize?: number;
+    /** Height of the pill background drawn behind the active tab when `variant="pill"`. Library default: the icon size plus 12 (30). */
+    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: `'lg'`. */
+    pillInset?: SpacingKey;
+    /** 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: `'lg'`. */
+    floatingMargin?: SpacingKey;
+    /** Corner of the detached capsule when `variant="floating"`. Library default: `'xl'`. */
+    floatingRadius?: RadiusKey;
+    /** 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;
+    /** Size of the nav chevron text. Default: `'2xl'`. */
+    navText?: FontSizeKey;
+    /** Line height of the nav chevron text. Default: 26. */
+    navTextLineHeight?: number;
+    /** Padding around each day cell. Default: `'xxs'`. */
+    dayCellPadding?: SpacingKey;
+    /** Corner of the inner day pill. Default: `'pill'`. */
+    dayInnerRadius?: RadiusKey;
+    /** Padding around each year/decade cell. Default: `'xs'`. */
+    yearCellPadding?: SpacingKey;
+    /** Corner of the inner year/decade pill. Default: `'lg'`. */
+    yearInnerRadius?: RadiusKey;
+    /** Margin above the decade range subtitle text. Default: `'xxs'`. */
+    decadeRangeMarginTop?: SpacingKey;
+    /** 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;
+    /** Size of the nav chevron text. Default: `'2xl'`. */
+    navText?: FontSizeKey;
+    /** Line height of the nav chevron text. Default: 26. */
+    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;
+    /**
+     * Initials text size at every avatar size. Wins over `fontSizeRatio` when set.
+     * Use only when the design needs a fixed size regardless of avatar dimension.
+     */
+    text?: FontSizeKey;
+    /**
+     * 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: `'xs'`. */
+    cardPaddingY?: SpacingKey;
+}
+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?: SpacingKey;
+    /** Width/height of each action button (square). Library default: 44. */
+    actionButtonSize?: number;
+    /** Size of the glyph inside an action button; also the built-in back arrow. Drives `gutter`'s optical inset. Library default: 24. */
+    iconSize?: number;
+    /** Thickness of the bottom divider. Library default: the platform hairline. */
+    dividerWidth?: number;
+    /** Diameter of the unread dot on an action. Library default: 8. */
+    dotSize?: number;
+    /** Top/right inset of the unread dot. Library default: 10. */
+    dotOffset?: 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. */
+    badgePaddingX?: SpacingKey;
+    /** Size of the badge count text. */
+    badgeText?: FontSizeKey;
+    /** Line height of the badge count text. */
+    badgeLineHeight?: 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 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 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;
+}
+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;
+    /** Between a halo's edge and the connector or rail that leaves it. Library default: `'xs'`. */
+    connectorGap?: SpacingKey;
+}
+export interface TooltipTokens {
+    /** Between the trigger and the tooltip card. Library default: `'sm'`. */
+    gap?: SpacingKey;
+    /** Minimum padding from screen edges. Library default: `'sm'`. */
+    screenPadding?: SpacingKey;
+    /** 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;
+    badge: BadgeTokens;
+    banner: BannerTokens;
+    bottomNavigation?: BottomNavigationTokens;
+    bottomSheet?: BottomSheetTokens;
+    button: Ladder<ComponentSizeKey, ButtonSizeTokens>;
+    checkbox: CheckboxTokens;
+    chip: Ladder<'sm' | 'md', ChipSizeTokens>;
+    choiceGroup?: ChoiceGroupTokens;
+    datePicker?: DatePickerTokens;
+    dateRangePicker?: DateRangePickerTokens;
+    dialog: DialogTokens;
+    drawer?: DrawerTokens;
+    emptyState: Ladder<'sm' | 'md' | 'lg', EmptyStateSizeTokens>;
+    field: FieldTokens;
+    filePicker?: FilePickerTokens;
+    floatingActionButton: FloatingActionButtonTokens;
+    formField: FormFieldTokens;
+    imageGallery?: ImageGalleryTokens;
+    inlineSelect?: InlineSelectTokens;
+    input: InputComponentTokens;
+    listItem: Ladder<'sm' | 'md' | 'lg', ListItemSizeTokens>;
+    modal?: ModalTokens;
+    numberInput?: NumberInputTokens;
+    optionSheet?: OptionSheetTokens;
+    otpInput: OTPInputTokens;
+    profilePicker?: ProfilePickerTokens;
+    progressBar?: ProgressBarTokens;
+    progressRing?: ProgressRingTokens;
+    radio: RadioTokens;
+    rating?: RatingTokens;
+    searchBar: SearchBarTokens;
+    segmentedControl: SegmentedControlTokens;
+    select?: SelectTokens;
+    slider: SliderTokens;
+    stepper?: StepperTokens;
+    swipeable?: SwipeableTokens;
+    switch: SwitchTokens;
+    tabs: TabsTokens;
+    timePicker?: TimePickerTokens;
+    timeline?: TimelineTokens;
+    toast: ToastTokens;
+    tooltip?: TooltipTokens;
+}
+export {};
+//# sourceMappingURL=componentTokens.d.ts.map