@webority/mobile-ui 0.88.0 → 0.89.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

@@ -0,0 +1,362 @@
+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];
+export declare const RADIUS_NAMES: readonly ["none", "sm", "md", "lg", "xl", "pill"];
+export type RadiusName = (typeof RADIUS_NAMES)[number];
+export declare const TEXT_NAMES: readonly ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export type TextName = (typeof TEXT_NAMES)[number];
+export declare const WEIGHT_NAMES: readonly ["normal", "medium", "semibold", "bold"];
+export type WeightName = (typeof WEIGHT_NAMES)[number];
+export declare const LEADING_NAMES: readonly ["tight", "normal", "relaxed"];
+export type LeadingName = (typeof LEADING_NAMES)[number];
+export declare const LETTER_SPACING_NAMES: readonly ["tight", "normal", "wide"];
+export type LetterSpacingName = (typeof LETTER_SPACING_NAMES)[number];
+export declare const FONT_NAMES: readonly ["ui", "display", "mono"];
+export type FontName = (typeof FONT_NAMES)[number];
+export declare const SHADOW_NAMES: readonly ["card", "elevated", "popover", "modal", "drawer"];
+export type ShadowName = (typeof SHADOW_NAMES)[number];
+export declare const DURATION_NAMES: readonly ["instant", "fast", "default", "slow", "slower"];
+export type DurationName = (typeof DURATION_NAMES)[number];
+export declare const EASE_NAMES: readonly ["in-out", "accelerate", "decelerate", "sharp"];
+export type EaseName = (typeof EASE_NAMES)[number];
+export declare const SIZE_NAMES: readonly ["border"];
+export type SizeName = (typeof SIZE_NAMES)[number];
+export type FontWeightValue = "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+/** Face name per weight; an empty object means the platform system font. */
+export type FontFaces = Partial<Record<WeightName, string>>;
+export interface PhoneShadow {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+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 {
+    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, EmptyStateSizeTokens>;
+    "list-item": Sized<L3, {
+        "padding-y": SpaceName;
+        "title-text": TextName;
+        "subtitle-text": TextName;
+        "min-height": number;
+    }>;
+    badge: Sized<"sm" | "md", BadgeSizeTokens> & BadgeTokens;
+    chip: Sized<"sm" | "md", ChipSizeTokens>;
+    checkbox: Sized<L3, {
+        "box-size": number;
+    }> & {
+        "label-gap": SpaceName;
+    };
+    radio: Sized<L3, {
+        outer: number;
+        inner: number;
+    }> & {
+        "label-gap": SpaceName;
+    };
+    switch: Sized<L3, {
+        "track-width": number;
+        "track-height": number;
+        "thumb-size": number;
+        padding: SpaceName;
+    }>;
+    "otp-input": Sized<L3, {
+        cell: number;
+        text: TextName;
+        radius: RadiusName;
+        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, FloatingActionButtonSizeTokens> & FloatingActionButtonTokens;
+    dialog: {
+        "icon-wrapper-size": number;
+        "action-button-min-height": number;
+    };
+    toast: {
+        "icon-circle-size": number;
+        "icon-glyph-text": TextName;
+        "tint-bar-width": number;
+        "action-min-height": number;
+    };
+    banner: {
+        "tint-bar-width": 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 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";
+    colors: Record<ColorName, string>;
+    space: Record<SpaceName, number>;
+    radius: Record<RadiusName, number>;
+    text: Record<TextName, {
+        size: number;
+        lineHeight: number;
+    }>;
+    weight: Record<WeightName, FontWeightValue>;
+    leading: Record<LeadingName, number>;
+    "letter-spacing": Record<LetterSpacingName, number>;
+    font: Record<FontName, FontFaces>;
+    shadow: Record<ShadowName, PhoneShadow>;
+    motion: {
+        duration: Record<DurationName, number>;
+        ease: Record<EaseName, readonly [number, number, number, number]>;
+    };
+    size: Record<SizeName, number>;
+    components: ComponentTokens;
+}
+export declare const lightTokens: TokenSet;
+export declare const darkTokens: TokenSet;
+export {};
+//# sourceMappingURL=tokens.generated.d.ts.map