@webority/mobile-ui 0.88.1 → 0.90.0

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

@@ -1,21 +1,8 @@
 import type { TextStyle } from "react-native";
-import type { Theme, TypographyScale } from "./types";
-export type FontWeightKey = keyof TypographyScale["fontWeight"];
+import type { Theme, WeightName } from "./types";
 /**
- * Resolve text-weight style for the active theme.
- *
- * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
- * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
- * two reliably across iOS/Android once a custom face is in play, so the brand
- * file controls the weight glyph itself. Falls back to `fontWeight` when no
- * brand font is registered for that weight.
- *
- * `face: 'display'` picks `fontFamily.display` when the theme sets it and is
- * otherwise identical to the call without it.
- *
- * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
- * `regular` (the conventional font-name suffix). The helper maps between
- * them transparently.
+ * A face file carries its own weight, and the platform cannot combine a custom
+ * face with a numeric weight reliably, so a registered face replaces it.
  */
-export declare const fontFor: (theme: Theme, weight: FontWeightKey, face?: "display") => Pick<TextStyle, "fontFamily" | "fontWeight">;
+export declare const fontFor: (theme: Theme, weight: WeightName, family?: "display") => Pick<TextStyle, "fontFamily" | "fontWeight">;
 //# sourceMappingURL=textStyle.d.ts.map

package/lib/typescript/commonjs/theme/tokens.generated.d.ts

@@ -1,4 +1,4 @@
-export declare const COLOR_NAMES: readonly ["bg", "bg-subtle", "bg-muted", "surface", "surface-inverse", "text", "text-body", "text-muted", "text-subtle", "text-inverse", "link", "border", "border-subtle", "field-bg", "field-border", "field-border-focus", "focus-ring", "scrim", "on-scrim", "primary", "primary-hover", "primary-soft", "primary-text", "on-primary", "neutral", "neutral-hover", "on-neutral", "success", "success-text", "on-success", "warning", "warning-text", "on-warning", "danger", "danger-border", "danger-text", "on-danger", "info", "info-text", "on-info", "primary-pressed", "on-neutral-strong", "text-disabled", "surface-pressed", "surface-hover", "surface-selected", "surface-disabled", "skeleton", "skeleton-highlight", "glass-fill", "glass-border", "on-glass", "glass-badge", "field-bg-focus", "field-bg-disabled", "field-border-error", "field-label", "field-text", "field-text-disabled", "field-placeholder", "field-placeholder-disabled", "field-icon", "field-icon-focus", "field-icon-disabled", "field-caret", "field-message", "avatar-1", "avatar-2", "avatar-3", "avatar-4", "avatar-5", "avatar-6", "avatar-7", "avatar-8", "thumb", "success-soft", "warning-soft", "danger-soft", "info-soft", "neutral-text", "primary-wash", "primary-wash-strong"];
+export declare const COLOR_NAMES: readonly ["bg", "bg-subtle", "bg-muted", "surface", "surface-inverse", "text", "text-body", "text-muted", "text-subtle", "text-inverse", "link", "border", "border-subtle", "field-bg", "field-border", "field-border-focus", "focus-ring", "scrim", "on-scrim", "thumb", "primary", "primary-hover", "primary-soft", "primary-text", "on-primary", "primary-wash", "primary-wash-strong", "neutral", "neutral-hover", "neutral-text", "on-neutral", "success", "success-soft", "success-text", "on-success", "warning", "warning-soft", "warning-text", "on-warning", "danger", "danger-soft", "danger-border", "danger-text", "on-danger", "info", "info-soft", "info-text", "on-info", "primary-pressed", "on-neutral-strong", "text-disabled", "surface-pressed", "surface-hover", "surface-selected", "surface-disabled", "skeleton", "skeleton-highlight", "glass-fill", "glass-border", "on-glass", "glass-badge", "field-bg-focus", "field-bg-disabled", "field-border-error", "field-label", "field-text", "field-text-disabled", "field-placeholder", "field-placeholder-disabled", "field-icon", "field-icon-focus", "field-icon-disabled", "field-caret", "field-message", "avatar-1", "avatar-2", "avatar-3", "avatar-4", "avatar-5", "avatar-6", "avatar-7", "avatar-8"];
 export type ColorName = (typeof COLOR_NAMES)[number];
 export declare const SPACE_NAMES: readonly ["none", "xxs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
 export type SpaceName = (typeof SPACE_NAMES)[number];
@@ -38,68 +38,118 @@ export interface PhoneShadow {
 export type ComponentKind = "space" | "text" | "radius" | "px" | "number" | "ms";
 type Sized<S extends string, T> = Record<S, T>;
 type L3 = "sm" | "md" | "lg";
+export interface FieldSizeTokens {
+    radius: RadiusName;
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    "min-height": number;
+    text: TextName;
+    icon: number;
+    "label-text": TextName;
+    "label-gap": SpaceName;
+    "message-text": TextName;
+    "message-gap": SpaceName;
+}
+export interface ButtonSizeTokens {
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    "min-height": number;
+    text: TextName;
+    radius: RadiusName;
+    icon: number;
+    "badge-icon": number;
+}
+export interface EmptyStateSizeTokens {
+    icon: number;
+    "title-text": TextName;
+    "description-text": TextName;
+    "padding-y": SpaceName;
+    "title-gap": SpaceName;
+    "description-gap": SpaceName;
+}
+export interface BadgeSizeTokens {
+    text: TextName;
+    "min-width": number;
+    height: number;
+    "padding-x": SpaceName;
+    "dot-size": number;
+}
+export interface BadgeTokens {
+    "border-width": number;
+    "anchor-offset": number;
+}
+export interface ChipSizeTokens {
+    "padding-x": SpaceName;
+    "padding-y": SpaceName;
+    text: TextName;
+    "min-height": number;
+    "close-size": number;
+    "close-text": TextName;
+    gap: SpaceName;
+    icon: number;
+}
+export interface SegmentedControlSizeTokens {
+    height: number;
+    text: TextName;
+    "padding-x": SpaceName;
+    icon: number;
+}
+export interface SegmentedControlTokens {
+    "track-padding": SpaceName;
+    "underline-height": number;
+    "pill-inset": SpaceName;
+}
+export interface TabsSizeTokens {
+    text: TextName;
+    "padding-y": SpaceName;
+    "padding-x": SpaceName;
+    "scrollable-padding-x": SpaceName;
+    icon: number;
+}
+export interface TabsTokens {
+    "icon-gap": SpaceName;
+    "track-padding": SpaceName;
+    "underline-height": number;
+    "pill-inset": SpaceName;
+    "disabled-opacity": number;
+    "badge-gap": SpaceName;
+}
+export interface FloatingActionButtonSizeTokens {
+    diameter: number;
+    icon: number;
+    text: TextName;
+    "label-padding-x": SpaceName;
+}
+export interface FloatingActionButtonTokens {
+    "edge-offset": SpaceName;
+    "bottom-offset": SpaceName;
+    "secondary-gap": SpaceName;
+    "stagger-ms": number;
+}
 export interface ComponentTokens {
-    button: Sized<"xs" | L3 | "xl", {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        "min-height": number;
-        text: TextName;
-        radius: RadiusName;
-        icon: number;
-        "badge-icon": number;
-    }>;
-    field: Sized<L3, {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        "min-height": number;
-        text: TextName;
-        radius: RadiusName;
-        icon: number;
-        "label-text": TextName;
-        "label-gap": SpaceName;
-        "message-text": TextName;
-        "message-gap": SpaceName;
-    }>;
+    field: Sized<L3, FieldSizeTokens>;
+    press: {
+        opacity: number;
+    };
+    disabled: {
+        opacity: number;
+    };
+    button: Sized<"xs" | "sm" | "md" | "lg" | "xl", ButtonSizeTokens>;
     input: Sized<L3, {
         "multiline-min-height": number;
     }>;
     "search-bar": Sized<L3, {
         radius: RadiusName;
     }>;
-    "empty-state": Sized<L3, {
-        icon: number;
-        "title-text": TextName;
-        "description-text": TextName;
-        "padding-y": SpaceName;
-        "title-gap": SpaceName;
-        "description-gap": SpaceName;
-    }>;
+    "empty-state": Sized<L3, EmptyStateSizeTokens>;
     "list-item": Sized<L3, {
         "padding-y": SpaceName;
         "title-text": TextName;
         "subtitle-text": TextName;
         "min-height": number;
     }>;
-    badge: Sized<"sm" | "md", {
-        text: TextName;
-        "min-width": number;
-        height: number;
-        "padding-x": SpaceName;
-        "dot-size": number;
-    }> & {
-        "border-width": number;
-        "anchor-offset": number;
-    };
-    chip: Sized<"sm" | "md", {
-        "padding-x": SpaceName;
-        "padding-y": SpaceName;
-        text: TextName;
-        "min-height": number;
-        "close-size": number;
-        "close-text": TextName;
-        gap: SpaceName;
-        icon: number;
-    }>;
+    badge: Sized<"sm" | "md", BadgeSizeTokens> & BadgeTokens;
+    chip: Sized<"sm" | "md", ChipSizeTokens>;
     checkbox: Sized<L3, {
         "box-size": number;
     }> & {
@@ -123,45 +173,13 @@ export interface ComponentTokens {
         radius: RadiusName;
         gap: SpaceName;
     }>;
-    "segmented-control": Sized<L3, {
-        height: number;
-        text: TextName;
-        "padding-x": SpaceName;
-        icon: number;
-    }> & {
-        "track-padding": SpaceName;
-        "underline-height": number;
-        "pill-inset": SpaceName;
-    };
-    tabs: Sized<L3, {
-        text: TextName;
-        "padding-y": SpaceName;
-        "padding-x": SpaceName;
-        "scrollable-padding-x": SpaceName;
-        icon: number;
-    }> & {
-        "icon-gap": SpaceName;
-        "track-padding": SpaceName;
-        "underline-height": number;
-        "pill-inset": SpaceName;
-        "disabled-opacity": number;
-        "badge-gap": SpaceName;
-    };
+    "segmented-control": Sized<L3, SegmentedControlSizeTokens> & SegmentedControlTokens;
+    tabs: Sized<L3, TabsSizeTokens> & TabsTokens;
     slider: Sized<L3, {
         "track-height": number;
         "thumb-diameter": number;
     }>;
-    "floating-action-button": Sized<L3, {
-        diameter: number;
-        icon: number;
-        text: TextName;
-        "label-padding-x": SpaceName;
-    }> & {
-        "edge-offset": SpaceName;
-        "bottom-offset": SpaceName;
-        "secondary-gap": SpaceName;
-        "stagger-ms": number;
-    };
+    "floating-action-button": Sized<L3, FloatingActionButtonSizeTokens> & FloatingActionButtonTokens;
     dialog: {
         "icon-wrapper-size": number;
         "action-button-min-height": number;
@@ -175,18 +193,147 @@ export interface ComponentTokens {
     banner: {
         "tint-bar-width": number;
     };
-    disabled: {
-        opacity: number;
-    };
-    press: {
-        opacity: number;
-    };
 }
 export type ComponentName = keyof ComponentTokens;
 type SizeKeysOf<C extends ComponentName> = Extract<keyof ComponentTokens[C], "xs" | "sm" | "md" | "lg" | "xl">;
 export type ComponentSizeTokens<C extends ComponentName> = ComponentTokens[C][SizeKeysOf<C>];
 export declare const COMPONENT_KINDS: {
-    readonly [C in ComponentName]: Readonly<Record<string, ComponentKind>>;
+    readonly field: {
+        readonly radius: "radius";
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly "min-height": "px";
+        readonly text: "text";
+        readonly icon: "px";
+        readonly "label-text": "text";
+        readonly "label-gap": "space";
+        readonly "message-text": "text";
+        readonly "message-gap": "space";
+    };
+    readonly press: {
+        readonly opacity: "number";
+    };
+    readonly disabled: {
+        readonly opacity: "number";
+    };
+    readonly button: {
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly "min-height": "px";
+        readonly text: "text";
+        readonly radius: "radius";
+        readonly icon: "px";
+        readonly "badge-icon": "px";
+    };
+    readonly input: {
+        readonly "multiline-min-height": "px";
+    };
+    readonly "search-bar": {
+        readonly radius: "radius";
+    };
+    readonly "empty-state": {
+        readonly icon: "px";
+        readonly "title-text": "text";
+        readonly "description-text": "text";
+        readonly "padding-y": "space";
+        readonly "title-gap": "space";
+        readonly "description-gap": "space";
+    };
+    readonly "list-item": {
+        readonly "padding-y": "space";
+        readonly "title-text": "text";
+        readonly "subtitle-text": "text";
+        readonly "min-height": "px";
+    };
+    readonly badge: {
+        readonly text: "text";
+        readonly "min-width": "px";
+        readonly height: "px";
+        readonly "padding-x": "space";
+        readonly "dot-size": "px";
+        readonly "border-width": "px";
+        readonly "anchor-offset": "px";
+    };
+    readonly chip: {
+        readonly "padding-x": "space";
+        readonly "padding-y": "space";
+        readonly text: "text";
+        readonly "min-height": "px";
+        readonly "close-size": "px";
+        readonly "close-text": "text";
+        readonly gap: "space";
+        readonly icon: "px";
+    };
+    readonly checkbox: {
+        readonly "box-size": "px";
+        readonly "label-gap": "space";
+    };
+    readonly radio: {
+        readonly outer: "px";
+        readonly inner: "px";
+        readonly "label-gap": "space";
+    };
+    readonly switch: {
+        readonly "track-width": "px";
+        readonly "track-height": "px";
+        readonly "thumb-size": "px";
+        readonly padding: "space";
+    };
+    readonly "otp-input": {
+        readonly cell: "px";
+        readonly text: "text";
+        readonly radius: "radius";
+        readonly gap: "space";
+    };
+    readonly "segmented-control": {
+        readonly height: "px";
+        readonly text: "text";
+        readonly "padding-x": "space";
+        readonly icon: "px";
+        readonly "track-padding": "space";
+        readonly "underline-height": "px";
+        readonly "pill-inset": "space";
+    };
+    readonly tabs: {
+        readonly text: "text";
+        readonly "padding-y": "space";
+        readonly "padding-x": "space";
+        readonly "scrollable-padding-x": "space";
+        readonly icon: "px";
+        readonly "icon-gap": "space";
+        readonly "track-padding": "space";
+        readonly "underline-height": "px";
+        readonly "pill-inset": "space";
+        readonly "disabled-opacity": "number";
+        readonly "badge-gap": "space";
+    };
+    readonly slider: {
+        readonly "track-height": "px";
+        readonly "thumb-diameter": "px";
+    };
+    readonly "floating-action-button": {
+        readonly diameter: "px";
+        readonly icon: "px";
+        readonly text: "text";
+        readonly "label-padding-x": "space";
+        readonly "edge-offset": "space";
+        readonly "bottom-offset": "space";
+        readonly "secondary-gap": "space";
+        readonly "stagger-ms": "ms";
+    };
+    readonly dialog: {
+        readonly "icon-wrapper-size": "px";
+        readonly "action-button-min-height": "px";
+    };
+    readonly toast: {
+        readonly "icon-circle-size": "px";
+        readonly "icon-glyph-text": "text";
+        readonly "tint-bar-width": "px";
+        readonly "action-min-height": "px";
+    };
+    readonly banner: {
+        readonly "tint-bar-width": "px";
+    };
 };
 export interface TokenSet {
     mode: "light" | "dark";