@webority/mobile-ui 0.88.1 → 0.90.0

package/lib/typescript/commonjs/components/Box/Box.d.ts

@@ -1,32 +1,32 @@
 import type React from "react";
 import type { View as RNView, StyleProp, ViewProps, ViewStyle } from "react-native";
-import type { ColorPalette, RadiusKey, SpacingKey, Theme } from "../../theme/types";
-export type BackgroundToken = keyof ColorPalette["background"];
+import type { RadiusName, SpaceName, Theme } from "../../theme/types";
+export type BackgroundToken = "bg" | "bg-subtle" | "bg-muted" | "surface" | "scrim" | "surface-inverse";
 export interface BoxProps extends ViewProps {
     /** padding (all sides) */
-    p?: SpacingKey;
+    p?: SpaceName;
     /** paddingHorizontal */
-    px?: SpacingKey;
+    px?: SpaceName;
     /** paddingVertical */
-    py?: SpacingKey;
-    pt?: SpacingKey;
-    pr?: SpacingKey;
-    pb?: SpacingKey;
-    pl?: SpacingKey;
+    py?: SpaceName;
+    pt?: SpaceName;
+    pr?: SpaceName;
+    pb?: SpaceName;
+    pl?: SpaceName;
     /** margin (all sides) */
-    m?: SpacingKey;
-    mx?: SpacingKey;
-    my?: SpacingKey;
-    mt?: SpacingKey;
-    mr?: SpacingKey;
-    mb?: SpacingKey;
-    ml?: SpacingKey;
+    m?: SpaceName;
+    mx?: SpaceName;
+    my?: SpaceName;
+    mt?: SpaceName;
+    mr?: SpaceName;
+    mb?: SpaceName;
+    ml?: SpaceName;
     /** Flexbox gap between children (spacing token). */
-    gap?: SpacingKey;
-    /** Background — a `colors.background.*` token or a raw colour string. */
+    gap?: SpaceName;
+    /** Background: a colour name (bg, bg-subtle, bg-muted, surface, scrim, surface-inverse) or a raw colour string. */
     bg?: BackgroundToken | (string & {});
-    radius?: RadiusKey;
-    /** Draw a hairline border in `colors.border.primary`. */
+    radius?: RadiusName;
+    /** Draw a hairline border in `colors.border`. */
     border?: boolean;
     flex?: number;
     align?: ViewStyle["alignItems"];
@@ -46,7 +46,7 @@ export type RowProps = Omit<BoxProps, "direction">;
 declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<RNView>>;
 export interface SpacerProps {
     /** Fixed spacer of this spacing token. Omit for a flexible spacer (`flex: 1`). */
-    size?: SpacingKey;
+    size?: SpaceName;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/commonjs/components/Button/Button.d.ts

@@ -13,11 +13,11 @@ import type { SlotIcon } from "../AppIcon/slotIcon";
  * the left on press and stays. `glass` is the odd one out: a frosted white
  * fill with a bright rim and dark ink, for a button sitting on a brand
  * gradient or a photo, where a tone fill would fight the surface. Its
- * colours come from `theme.colors.glass`, the same in both schemes, and the
+ * colours are the `glass-*` tokens, the same in both schemes, and the
  * tone only inks a badged icon.
  */
 export type ButtonVariant = "solid" | "soft" | "outline" | "ghost" | "link" | "glass";
-export type ButtonTone = "primary" | "secondary" | "success" | "warning" | "error" | "neutral";
+export type ButtonTone = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
 export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export interface ButtonProps extends Omit<PressableProps, "style" | "children"> {
     /** The label, and the button's accessible name unless `accessibilityLabel` is set. */
@@ -65,7 +65,7 @@ export interface ButtonProps extends Omit<PressableProps, "style" | "children">
     haptic?: HapticType | false;
     rounded?: boolean;
     /**
-     * Optional gradient background. Pass either a key from `theme.gradients`
+     * Optional gradient background. Pass either a key from `theme.settings.gradients`
      * (e.g. `"primary"`) or a `GradientDefinition` literal.
      */
     gradient?: string | GradientDefinition;

package/lib/typescript/commonjs/components/Calendar/Calendar.d.ts

@@ -14,7 +14,7 @@ export interface CalendarMarkedDate {
     kind: CalendarMarkKind;
     /** What the day is ("Dussehra", "Casual leave"); read aloud before the kind. */
     label?: string;
-    /** Dot colour. Default: `error` for a holiday, `primary` for an event, `warning` for pending. */
+    /** Dot colour. Default: `danger` for a holiday, `primary` for an event, `warning` for pending. */
     tone?: StatusBadgeTone;
 }
 /** A selection. Single mode uses `start` only; a range in progress has no `end` yet. */

package/lib/typescript/commonjs/components/Calendar/calendarStyles.d.ts

@@ -19,7 +19,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         borderCurve: "continuous";
         width: number;
         height: number;
-        borderRadius: 9999;
+        borderRadius: number;
     };
     navBtnPressed: {
         backgroundColor: string;
@@ -28,8 +28,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         opacity: number;
     };
     navText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         lineHeight: number;
         color: string;
@@ -39,8 +39,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         alignItems: "center";
     };
     headerLabel: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         color: string;
     };
@@ -54,8 +54,8 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         paddingVertical: number;
     };
     weekdayText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
         color: string;
         letterSpacing: number;
@@ -67,7 +67,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
     dayCell: {
         alignItems: "center";
         justifyContent: "center";
-        padding: 0;
+        padding: number;
     };
     barLeft: {
         position: "absolute";
@@ -92,17 +92,17 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         height: "90%";
         alignItems: "center";
         justifyContent: "center";
-        borderRadius: 9999;
+        borderRadius: number;
     };
     dayEdge: {
         backgroundColor: string;
     };
     dayMid: {
-        borderRadius: 0;
+        borderRadius: number;
     };
     dayText: {
-        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontFamily?: string | undefined | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "ultralight" | "thin" | "light" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | "black" | undefined | undefined;
         fontSize: number;
     };
     dayStruck: {
@@ -118,7 +118,7 @@ export declare const buildCalendarStyles: (theme: Theme) => {
         borderCurve: "continuous";
         width: number;
         height: number;
-        borderRadius: 9999;
+        borderRadius: number;
     };
 };
 export type CalendarStyles = ReturnType<typeof buildCalendarStyles>;

package/lib/typescript/commonjs/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from "react-native";
-import type { ColorPalette, GradientDefinition } from "../../theme/types";
+import type { GradientDefinition, ShadowName } from "../../theme/types";
 import type { HapticType } from "../../utils/hapticUtils";
 import type { ContextMenuConfig } from "../Menu/useContextMenu";
 export type CardVariant = "elevated" | "outlined" | "filled" | "flat";
@@ -10,10 +10,12 @@ export interface CardTextAction {
     onPress: () => void;
     accessibilityLabel?: string;
 }
-export type CardElevation = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type CardElevation = "none" | ShadowName;
 export type CardRadius = "sm" | "md" | "lg" | "xl";
 export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
-export type CardBackground = keyof ColorPalette["background"] | (string & {});
+declare const BACKGROUND_TOKENS: readonly ["bg", "bg-subtle", "bg-muted", "surface", "scrim", "surface-inverse"];
+type CardBackgroundToken = (typeof BACKGROUND_TOKENS)[number];
+export type CardBackground = CardBackgroundToken | (string & {});
 export interface CardProps extends Omit<PressableProps, "style" | "children"> {
     children?: React.ReactNode;
     variant?: CardVariant;
@@ -22,8 +24,7 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
     padding?: CardPadding;
     interactive?: boolean;
     /**
-     * Background colour: a `colors.background.*` token or any raw colour
-     * string. Applies on every variant and replaces the variant's default
+     * Background colour: a background colour name (`bg`, `bg-subtle`, `bg-muted`, `surface`, `scrim`, `surface-inverse`) or any raw colour string. Applies on every variant and replaces the variant's default
      * surface colour; `style` / `containerStyle` still win over it.
      */
     bg?: CardBackground;
@@ -64,7 +65,7 @@ export interface CardProps extends Omit<PressableProps, "style" | "children"> {
      */
     loading?: boolean;
     /**
-     * Optional gradient background. Pass a key from `theme.gradients` or a
+     * Optional gradient background. Pass a key from `theme.settings.gradients` or a
      * literal `GradientDefinition`. Layered behind the card's content so
      * existing variant/elevation/radius continue to work.
      */

package/lib/typescript/commonjs/components/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { PressableProps, View as RNView, StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
 export type CheckboxSize = "sm" | "md" | "lg";
-export type CheckboxTone = "primary" | "success" | "warning" | "error";
+export type CheckboxTone = "primary" | "success" | "warning" | "danger";
 export interface CheckboxProps extends Omit<PressableProps, "style" | "children" | "onPress"> {
     checked?: boolean;
     defaultChecked?: boolean;

package/lib/typescript/commonjs/components/Chip/Chip.d.ts

@@ -9,7 +9,7 @@ import type { SlotIcon } from "../AppIcon/slotIcon";
  * IconButton draw as `soft`).
  */
 export type ChipVariant = "filled" | "outlined" | "soft";
-export type ChipTone = "primary" | "neutral" | "success" | "warning" | "error" | "info";
+export type ChipTone = "primary" | "neutral" | "success" | "warning" | "danger" | "info";
 export type ChipSize = "sm" | "md";
 export type ChipSelectionMode = "single" | "multiple" | "radio";
 export interface ChipProps {

package/lib/typescript/commonjs/components/ChoiceGroup/ChoiceGroup.d.ts

@@ -89,7 +89,7 @@ interface BaseChoiceGroupProps<T = ChoiceOption> {
     indicatorPosition?: ChoiceGroupIndicatorPosition;
     /** Main axis of the option list. Default `'row'`. */
     direction?: ChoiceGroupDirection;
-    /** Gap between options. Default `theme.spacing.sm`. */
+    /** Gap between options. Default `theme.space.sm`. */
     gap?: number;
     /** Allow options to wrap onto multiple lines (swatch grids). Default `false`. */
     wrap?: boolean;

package/lib/typescript/commonjs/components/Dialog/Dialog.d.ts

@@ -1,8 +1,8 @@
 import type React from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
-export type DialogVariant = "default" | "success" | "warning" | "error" | "info";
-export type DialogActionTone = "primary" | "neutral" | "info" | "error";
+export type DialogVariant = "default" | "success" | "warning" | "danger" | "info";
+export type DialogActionTone = "primary" | "neutral" | "info" | "danger";
 export interface DialogAction {
     label: string;
     onPress: () => void;

package/lib/typescript/commonjs/components/FieldBase/Chevron.d.ts

@@ -4,7 +4,7 @@
  * One glyph for Select, InlineSelect, PickerTrigger and PhoneNumberInput so
  * the indicator never drifts between trigger components. It is the design
  * system's line chevron (AppIcon `chevron-down`), reached through the icon
- * registry so an app can swap it with `theme.icons.chevronDown`; it used to
+ * registry so an app can swap it with `theme.settings.icons.chevronDown`; it used to
  * be a filled triangle drawn with view borders. Pass `open` to get the 180°
  * rotate-on-open animation; omit it for a static chevron.
  */

package/lib/typescript/commonjs/components/FieldBase/FieldBase.d.ts

@@ -9,7 +9,7 @@
  * props or via theme tokens — never accidental drift.
  *
  * Responsibilities:
- *   - Resolve size / variant dimensions from `theme.components.field`.
+ *   - Resolve size dimensions from `theme.components.field`.
  *   - Animate the border + background between idle / focused / error.
  *   - Render leading + trailing slots either side of `children`.
  *   - Become Pressable when `onPress` is set (Select, PickerTrigger).
@@ -24,9 +24,10 @@
 import type React from "react";
 import type { AccessibilityRole, AccessibilityState, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { Animated } from "react-native";
-import type { FieldSide, FieldVariantTokens, Theme } from "../../theme/types";
+import type { Theme } from "../../theme/types";
 export type FieldBaseSize = "sm" | "md" | "lg";
 export type FieldBaseVariant = "outlined" | "filled" | "underline";
+type FieldSide = "top" | "right" | "bottom" | "left";
 /**
  * Pick the most "representative" side colour from a 4-side record. Used by
  * consumers (Input's selectionColor, focus rings, etc.) that need a single
@@ -40,7 +41,7 @@ export interface FieldBaseProps {
     size?: FieldBaseSize;
     /**
      * Controls the resting fill + border treatment. Override the theme default
-     * (`theme.components.field.defaultVariant`) via this prop. Default `'outlined'`.
+     * (`theme.settings.components.field.defaultVariant`) via this prop. Default `'outlined'`.
      */
     variant?: FieldBaseVariant;
     /** Parent-controlled focus state — drives the border + fill animation. */
@@ -124,7 +125,7 @@ export interface FieldBaseProps {
     borderBottomLeftRadius?: number;
     /** Bottom-right corner radius. Wins over `borderRadius`. */
     borderBottomRightRadius?: number;
-    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `colors.border.width`. */
+    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `size.border`. */
     borderWidth?: number;
     /** Top border width. Wins over `borderWidth`. */
     borderTopWidth?: number;
@@ -134,9 +135,8 @@ export interface FieldBaseProps {
     borderBottomWidth?: number;
     /** Left border width. Wins over `borderWidth`. */
     borderLeftWidth?: number;
-    /** Gap between leading / children / trailing. Defaults to `theme.spacing.md` (the spec's 12px). */
+    /** Gap between leading / children / trailing. Defaults to `theme.space.md` (the spec's 12px). */
     gap?: number;
-    fillOverrides?: Partial<FieldVariantTokens>;
     style?: StyleProp<ViewStyle>;
     testID?: string;
     accessibilityRole?: AccessibilityRole;
@@ -165,18 +165,17 @@ export interface FieldTextStyle {
     weightStyle: Pick<TextStyle, "fontFamily" | "fontWeight">;
 }
 /**
- * Resolve the canonical text style chunk for a field's value. Reads from
- * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
- * first, then the field palette (`theme.colors.field`); brand fonts wired via
- * `typography.fontFamily` apply via the shared `fontFor` helper.
+ * Resolve the canonical text style chunk for a field's value. Reads the field
+ * colours from the theme and the face through the shared `fontFor` helper, so
+ * every field component renders the same value and placeholder ink.
  */
 export declare const resolveFieldTextStyle: (theme: Theme, options?: FieldTextStyleResolverOptions) => FieldTextStyle;
 /**
  * The required-field marker appended to a field's label. Single source of
  * truth for the whole field family (Input, Select, FormField, PickerTrigger →
- * Date/Time/DateRange pickers). Themeable via
- * `theme.components.field.{requiredMarker,requiredMarkerColor}`; font family /
- * weight / size are inherited from the parent label `<Text>`.
+ * Date/Time/DateRange pickers). Its text is `theme.settings.components.field.requiredMarker`
+ * (default `*`) in `colors["danger-text"]`; font family / weight / size are
+ * inherited from the parent label `<Text>`.
  */
 export declare const RequiredMark: React.FC;
 /**
@@ -200,9 +199,9 @@ export declare const RequiredPlaceholder: React.FC<{
 }>;
 /**
  * The circled-exclamation glyph that leads a field's error message. Uses the
- * theme's `icons.error` renderer when one is registered; otherwise draws a
- * ring-and-bang from views so the message never renders bare. Shared by
- * every field component that shows an error line (Input, Select, FormField,
+ * theme's `settings.icons.error` renderer when one is registered; otherwise
+ * draws a ring-and-bang from views so the message never renders bare. Shared
+ * by every field component that shows an error line (Input, Select, FormField,
  * the pickers) so the message row reads identically across the family.
  */
 export declare const FieldErrorGlyph: React.FC<{
@@ -223,8 +222,8 @@ export declare const hasFieldText: (value: React.ReactNode) => boolean;
  */
 export declare const fieldTextAsString: (value: React.ReactNode) => string | undefined;
 /**
- * The static label above a field, per the design spec: `field.label` ink,
- * the size ladder's `labelFontSize`, semibold, `labelGap` below. It stays on
+ * The static label above a field, per the design spec: `field-label` ink,
+ * the size ladder's `label-text` size, semibold, `label-gap` below. It stays on
  * that ink through focus and error (the ring and the message row carry the
  * error). Shared by Input, Select, PickerTrigger, NumberInput. The label may
  * be a string or a node, and `help` (a glossary button, say) is drawn right
@@ -237,15 +236,15 @@ export declare const FieldLabel: React.FC<{
     required?: boolean;
     /** Drawn beside the label, after the required marker. */
     help?: React.ReactNode;
-    /** Label ink; defaults to `colors.field.label`. */
+    /** Label ink; defaults to `colors["field-label"]`. */
     color?: string;
     style?: StyleProp<TextStyle>;
 }>;
 /**
- * The helper / error line under a field: `messageFontSize`, `messageGap`
- * from the box, `field.message` red with the circled-exclamation glyph when
- * `error`, `text.secondary` otherwise. The text may be a string or a node.
- * Renders nothing without text.
+ * The helper / error line under a field: the `message-text` size and
+ * `message-gap` from the box, `field-message` red with the circled-exclamation
+ * glyph when `error`, `text-muted` otherwise. The text may be a string or a
+ * node. Renders nothing without text.
  */
 export declare const FieldMessage: React.FC<{
     text?: React.ReactNode;
@@ -254,12 +253,12 @@ export declare const FieldMessage: React.FC<{
     style?: StyleProp<TextStyle>;
 }>;
 /**
- * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every border colour / width is expanded to a 4-side record by the time
- * the box renders, so the animation pipeline can treat per-side and shorthand
- * the same way. `borderFocusedRepresentative` is a single colour pulled from
- * the focused sides — exposed for consumers (Input's selectionColor) that
- * need to mirror the visible focus indicator without re-resolving per side.
+ * Strict, fully-resolved colour set used internally. Every border colour /
+ * width is expanded to a 4-side record by the time the box renders, so the
+ * animation pipeline can treat per-side and shorthand the same way.
+ * `borderFocusedRepresentative` is a single colour pulled from the focused
+ * sides — exposed for consumers (Input's selectionColor) that need to mirror
+ * the visible focus indicator without re-resolving per side.
  */
 interface ResolvedFieldColors {
     backgroundIdleEmpty: string;
@@ -279,11 +278,11 @@ interface ResolvedFieldColors {
 }
 /**
  * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default. Border
- * colour + width are normalized to per-side records here; callers that need
- * a single colour read `borderFocusedRepresentative`.
+ * variant, from the field colour names. Border colour + width are normalized
+ * to per-side records here; callers that need a single colour read
+ * `borderFocusedRepresentative`.
  */
-export declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant, override?: Partial<FieldVariantTokens>) => ResolvedFieldColors;
+export declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant) => ResolvedFieldColors;
 export declare const FieldBase: React.FC<FieldBaseProps>;
 export default FieldBase;
 //# sourceMappingURL=FieldBase.d.ts.map

package/lib/typescript/commonjs/components/FieldBase/useFloatingLabel.d.ts

@@ -15,8 +15,7 @@
  */
 import type React from "react";
 import type { StyleProp, TextStyle } from "react-native";
-import { type Resolved } from "../../theme";
-import type { FieldSizeTokens } from "../../theme/types";
+import { type resolveFieldSize } from "../../theme";
 import type { FieldBaseProps, FieldBaseVariant } from "./FieldBase";
 /** The floated label's scale; the outlined notch is sized from it. */
 export declare const FLOATED_LABEL_SCALE = 0.85;
@@ -29,7 +28,7 @@ export interface UseFloatingLabelOptions {
     floated: boolean;
     required?: boolean;
     variant: FieldBaseVariant;
-    sizeTokens: Resolved<FieldSizeTokens>;
+    sizeTokens: ReturnType<typeof resolveFieldSize>;
     /** Where the text starts past the leading slot (icon, gaps, divider), px. */
     leadingOffset: number;
     /** Width the trailing slot takes, for a right-aligned label, px. */

package/lib/typescript/commonjs/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { HapticType } from "../../utils/hapticUtils";
 export type FloatingActionButtonSize = "sm" | "md" | "lg";
-export type FloatingActionButtonTone = "primary" | "success" | "warning" | "error" | "neutral";
+export type FloatingActionButtonTone = "primary" | "success" | "warning" | "danger" | "neutral";
 export type FloatingActionButtonPosition = "bottomRight" | "bottomLeft" | "bottomCenter";
 export interface FloatingActionButtonProps {
-    /** JSX element for the icon. The FAB sizes it via the `size` prop's iconSize token. */
+    /** JSX element for the icon. The FAB sizes it with the size's `icon` token. */
     icon: React.ReactNode;
     onPress: () => void;
     /** Text beside the icon; makes the button extended (a pill). */

package/lib/typescript/commonjs/components/FormField/FormField.d.ts

@@ -18,9 +18,8 @@ export interface FormFieldProps {
      */
     error?: React.ReactNode;
     /**
-     * Appends the required marker to the label. Marker text + colour come from
-     * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
-     * `'*'` in `colors.error`).
+     * Appends the required marker to the label. Marker text comes from
+     * `theme.settings.components.field.requiredMarker` (default `'*'` in `colors.danger`).
      */
     required?: boolean;
     /**

package/lib/typescript/commonjs/components/IconBadge/IconBadge.d.ts

@@ -2,7 +2,7 @@ import type { View as RNView, StyleProp, ViewStyle } from "react-native";
 import type { IconVariant } from "../AppIcon/AppIcon";
 import type { SlotIcon } from "../AppIcon/slotIcon";
 export type IconBadgeSize = "sm" | "md" | "lg";
-export type IconBadgeTone = "primary" | "secondary" | "success" | "warning" | "error" | "info" | "neutral";
+export type IconBadgeTone = "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "neutral";
 export interface IconBadgeProps {
     /**
      * The icon: an AppIcon name (`icon="shield-tick"`), `{ name, variant }`, a

package/lib/typescript/commonjs/components/IconButton/IconButton.d.ts

@@ -2,11 +2,11 @@ import type { GestureResponderEvent, View as RNView, StyleProp, ViewStyle } from
 import type { HapticType } from "../../utils";
 import type { IconVariant } from "../AppIcon/AppIcon";
 import type { SlotIcon } from "../AppIcon/slotIcon";
-export type IconButtonTone = "primary" | "secondary" | "success" | "warning" | "error" | "neutral";
+export type IconButtonTone = "primary" | "secondary" | "success" | "warning" | "danger" | "neutral";
 /**
  * `glass` is a frosted white fill with a bright rim and dark ink, for a
  * button over a brand gradient or a photo (a back button on a hero). Its
- * colours are `theme.colors.glass`, the same in both schemes; the tone is
+ * colours are the glass colours (`glass-fill`, `glass-border`, `on-glass`), the same in both schemes; the tone is
  * unused unless `active` forces the solid fill.
  */
 export type IconButtonVariant = "solid" | "soft" | "outline" | "ghost" | "glass";

package/lib/typescript/commonjs/components/InlineSelect/InlineSelect.d.ts

@@ -68,9 +68,8 @@ export interface InlineSelectProps<T = SelectOption> {
      */
     size?: InlineSelectSize;
     /**
-     * Trigger text + chevron colour. Resolution: prop →
-     * `theme.components.inlineSelect.color` → `colors.primary`
-     * (`text.disabled` when disabled).
+     * Trigger text and chevron colour. Resolution: prop, then `colors.primary`
+     * (`text-disabled` when disabled).
      */
     color?: string;
     /** Chevron colour override — falls back to `color`'s resolution. */

package/lib/typescript/commonjs/components/Input/Input.d.ts

@@ -21,7 +21,7 @@ export type InputKeyboardType = "default" | "email-address" | "numeric" | "phone
 export interface InputSlotState extends SlotIconState {
     focused: boolean;
     error: boolean;
-    /** The field palette's icon colour for this state (`colors.field.icon*`). */
+    /** The field palette's icon colour for this state (`field-icon`, `field-icon-focus`, `field-icon-disabled`). */
     color: string;
     /** The size ladder's icon size for the field's `size`. */
     size: number;
@@ -133,7 +133,7 @@ export interface InputProps extends Omit<TextInputProps, "style"> {
      * - `'float'`: Material-Design floating label that animates from inside the
      *   field to the top border on focus / when there's a value.
      *
-     * Theme override: `theme.components.input.defaultLabelMode`.
+     * Theme setting: `theme.settings.components.input.defaultLabelMode`.
      */
     labelMode?: InputLabelMode;
     required?: boolean;

package/lib/typescript/commonjs/components/Notation/Notation.d.ts

@@ -25,7 +25,7 @@ export interface NotationProps {
     desc?: string;
     /**
      * Subscript ink. Inside a field's or choice's label or message line it defaults to that line's
-     * ink, elsewhere to `colors.text.primary`; pass the parent's colour when it differs.
+     * ink, elsewhere to `colors["text-body"]`; pass the parent's colour when it differs.
      */
     color?: string;
     testID?: string;

package/lib/typescript/commonjs/components/OptionSheet/OptionSheet.d.ts

@@ -89,7 +89,7 @@ export interface OptionSheetProps {
     disabledOf: (option: unknown) => boolean;
     /**
      * A row that destroys something (ProfilePicker's "Remove photo"): its label
-     * is painted in `colors.error`. The row itself, its icon and its description
+     * is painted in `colors.danger`. The row itself, its icon and its description
      * are untouched, so the caller passes a matching icon. Default: none.
      */
     destructiveOf?: (option: unknown) => boolean;
@@ -101,7 +101,7 @@ export interface OptionSheetProps {
     /** Multi mode: checkboxes + Done footer instead of the selected dot. */
     multi?: boolean;
     searchable?: boolean;
-    /** Caret/selection colour of the search input — callers mirror their focus colour. Default: `colors.border.focus`. */
+    /** Caret/selection colour of the search input — callers mirror their focus colour. Default: `colors["focus-ring"]`. */
     searchSelectionColor?: string;
     accessibilityLabel?: string;
     /** Style for every option row container (padding, background, etc.). Wins over the row defaults. */

package/lib/typescript/commonjs/components/PickerTrigger/PickerTrigger.d.ts

@@ -33,9 +33,8 @@ export interface PickerTriggerProps {
      */
     error?: React.ReactNode;
     /**
-     * Appends the required marker to the label. Marker text + colour come from
-     * `theme.components.field.{requiredMarker,requiredMarkerColor}` (default
-     * `'*'` in `colors.error`).
+     * Appends the required marker to the label. Marker text comes from
+     * `theme.settings.components.field.requiredMarker` (default `'*'`).
      */
     required?: boolean;
     /** Tap handler — typically opens the modal picker. */

package/lib/typescript/commonjs/components/ProfileCompletion/ProfileCompletion.d.ts

@@ -46,14 +46,13 @@ export interface ProfileCompletionProps {
     avatarBackgroundColor?: string;
     /** Colour of the initials; wins over `avatarTone`. */
     avatarColor?: string;
-    /** Ring stroke width. Default `theme.components.progressRing.strokeWidth`, then `3`. */
+    /** Ring stroke width. Default `3`. */
     ringWidth?: number;
     /** Air between the avatar's edge and the ring's inner edge. Default `1`. */
     ringGap?: number;
     /**
-     * `'banded'` (default) colours the ring by progress: `error` below a
-     * third, `warning` to two thirds, `success` from there
-     * (`theme.components.progressRing.colorStops`). `'single'` draws it in one
+     * `'banded'` (default) colours the ring by progress: `danger` below a
+     * third, `warning` to two thirds, `success` from there. `'single'` draws it in one
      * colour, `tone` (default `'primary'`), at every progress.
      */
     ringVariant?: ProfileCompletionRingVariant;

package/lib/typescript/commonjs/components/ProfilePicker/ProfilePicker.d.ts

@@ -29,7 +29,7 @@ export type ProfilePickerShape = "circle" | "rounded" | "square";
  */
 export type ProfilePickerLayout = "stacked" | "inline" | "profile";
 /** Theme colour of the camera badge; the same set StatusBadge and Chip use. */
-export type ProfilePickerTone = "primary" | "success" | "warning" | "error" | "info" | "neutral";
+export type ProfilePickerTone = "primary" | "success" | "warning" | "danger" | "info" | "neutral";
 /**
  * Look of the camera badge. `solid`: the tone fills it, the icon in the
  * tone's ink. `soft`: a light tint of the tone, the icon in the tone. `outline`:
@@ -75,14 +75,13 @@ export interface ProfilePickerProps {
     /** Badge icon at the bottom-right: a name, or `{ name, variant }` for another Iconsax style. Default 'camera'. */
     badgeIcon?: IconName | SlotIconRef;
     /**
-     * Theme colour of the badge. Default `theme.components.profilePicker.defaultTone`,
-     * else 'primary'. `theme.components.profilePicker.badgeColor` replaces the
-     * tone's colour and `badgeIconColor` the icon's.
+     * Theme colour of the badge. Default `theme.settings.components["profile-picker"].defaultTone`,
+     * else 'primary'.
      */
     tone?: ProfilePickerTone;
     /**
      * Look of the badge: `solid` (default), `soft` or `outline`. Default
-     * `theme.components.profilePicker.defaultVariant`, else 'solid'.
+     * `theme.settings.components["profile-picker"].defaultVariant`, else 'solid'.
      */
     variant?: ProfilePickerVariant;
     /**
@@ -90,7 +89,7 @@ export interface ProfilePickerProps {
      * and the empty person placeholder take a soft tint of the tone with the
      * initials or icon in the tone, the Avatar's own `tone`. Unset keeps the
      * Avatar's per-name palette and the grey placeholder. Default
-     * `theme.components.profilePicker.defaultAvatarTone`.
+     * `theme.settings.components["profile-picker"].defaultAvatarTone`.
      */
     avatarTone?: AvatarTone;
     /** Fill behind the initials or the placeholder icon; wins over `avatarTone`. */