@webority-technologies/mobile 0.0.6 → 0.0.8

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

@@ -1,5 +1,32 @@
 import type { TextStyle, ViewStyle } from 'react-native';
 export type ColorMode = 'light' | 'dark';
+/**
+ * A linear gradient definition used by Button, Card and consumer components.
+ * `colors` must have at least 2 entries. `start`/`end` follow the
+ * react-native-linear-gradient convention: { x: 0..1, y: 0..1 }.
+ */
+export interface GradientDefinition {
+    colors: string[];
+    locations?: number[];
+    start?: {
+        x: number;
+        y: number;
+    };
+    end?: {
+        x: number;
+        y: number;
+    };
+}
+export interface GradientScale {
+    /** Brand-primary gradient — used by `Button gradient` and `Card gradient="primary"`. */
+    primary?: GradientDefinition;
+    /** Secondary brand gradient. */
+    secondary?: GradientDefinition;
+    /** Backdrop / banner gradient (for hero sections). */
+    surface?: GradientDefinition;
+    /** Free-form named gradients. Consumer extends as needed. */
+    [key: string]: GradientDefinition | undefined;
+}
 export interface ColorPalette {
     primary: string;
     primaryHover: string;
@@ -44,6 +71,13 @@ export interface ColorPalette {
         highlight: string;
     };
 }
+export interface FontFamilyScale {
+    /** Font family for normal-weight text. Falls back to platform system font when undefined. */
+    regular?: string;
+    medium?: string;
+    semibold?: string;
+    bold?: string;
+}
 export interface TypographyScale {
     fontSize: {
         xs: number;
@@ -61,6 +95,13 @@ export interface TypographyScale {
         semibold: TextStyle['fontWeight'];
         bold: TextStyle['fontWeight'];
     };
+    /**
+     * Optional brand font families. When set, library text components prefer
+     * `fontFamily.<weight>` over `fontWeight.<weight>` to match the consumer
+     * app's typeface. Each key is independently optional — leave undefined to
+     * fall back to the system font for that weight.
+     */
+    fontFamily?: FontFamilyScale;
     lineHeight: {
         tight: number;
         normal: number;
@@ -145,6 +186,135 @@ export interface MotionScale {
         };
     };
 }
+/**
+ * Per-component size tokens. Each component that exposes a `size` prop
+ * resolves dimensions via `theme.components.<name>[size]`. Library ships
+ * sensible defaults; consumer overrides win via `mergeTheme`.
+ *
+ * Keep entries here as components gain themable per-size dimensions —
+ * this is the single home for "X is X tall, has Y radius, uses Z font size".
+ */
+export type ComponentSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface ButtonSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    minHeight: number;
+    fontSize: number;
+    borderRadius: number;
+}
+export interface InputSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    minHeight: number;
+    multilineMinHeight: number;
+    fontSize: number;
+    borderRadius: number;
+    iconSize: number;
+}
+export interface SearchBarSizeTokens {
+    height: number;
+    paddingHorizontal: number;
+    fontSize: number;
+    iconSize: number;
+    gap: number;
+}
+export interface EmptyStateSizeTokens {
+    iconSize: number;
+    /** Resolves against the active theme's typography.fontSize scale, e.g. "lg", "xl", "2xl". */
+    titleFontSize: keyof TypographyScale['fontSize'];
+    descriptionFontSize: keyof TypographyScale['fontSize'];
+    /** Resolves against the active theme's spacing scale. */
+    paddingVertical: keyof SpacingScale;
+}
+export interface ListItemSizeTokens {
+    /** Resolves against the active theme's spacing scale. */
+    paddingVertical: keyof SpacingScale;
+    titleFontSize: keyof TypographyScale['fontSize'];
+    subtitleFontSize: keyof TypographyScale['fontSize'];
+    minHeight: number;
+}
+export interface BadgeSizeTokens {
+    fontSize: number;
+    minWidth: number;
+    height: number;
+    paddingHorizontal: number;
+    dotSize: number;
+}
+export interface ChipSizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fontSize: number;
+    minHeight: number;
+    closeSize: number;
+    closeFontSize: number;
+    gap: number;
+}
+export interface SwitchSizeTokens {
+    trackWidth: number;
+    trackHeight: number;
+    thumbSize: number;
+    padding: number;
+}
+export interface OTPInputSizeTokens {
+    cell: number;
+    fontSize: number;
+    borderRadius: number;
+    gap: number;
+}
+export interface DialogTokens {
+    iconWrapperSize: number;
+    iconWrapperBorderRadius: number;
+    actionButtonMinHeight: number;
+}
+export interface ToastTokens {
+    iconCircleSize: number;
+    iconCircleBorderRadius: number;
+    iconGlyphFontSize: number;
+    tintBarWidth: number;
+}
+export interface FormFieldTokens {
+    /** Width of the inline label column when `layout="inline"`. Accepts CSS-like string ("35%") or number. */
+    inlineLabelWidth: number | `${number}%`;
+}
+export interface BadgeTokens extends Partial<Record<'sm' | 'md', BadgeSizeTokens>> {
+    borderWidth?: number;
+    anchorOffset?: number;
+}
+export interface CheckboxSizeTokens {
+    boxSize: number;
+}
+export interface CheckboxTokens extends Partial<Record<ComponentSizeKey, CheckboxSizeTokens>> {
+    borderWidth?: number;
+    labelGap?: number;
+}
+export interface RadioSizeTokens {
+    outer: number;
+    inner: number;
+}
+export interface RadioTokens extends Partial<Record<ComponentSizeKey, RadioSizeTokens>> {
+    borderWidth?: number;
+    labelGap?: number;
+}
+export interface ComponentTokens {
+    button?: Partial<Record<ComponentSizeKey, ButtonSizeTokens>>;
+    input?: Partial<Record<ComponentSizeKey, InputSizeTokens>>;
+    searchBar?: Partial<Record<ComponentSizeKey, SearchBarSizeTokens>> & {
+        cancelButtonWidth?: number;
+    };
+    emptyState?: Partial<Record<ComponentSizeKey, EmptyStateSizeTokens>>;
+    listItem?: Partial<Record<ComponentSizeKey, ListItemSizeTokens>>;
+    badge?: BadgeTokens;
+    chip?: Partial<Record<ComponentSizeKey, ChipSizeTokens>>;
+    checkbox?: CheckboxTokens;
+    radio?: RadioTokens;
+    switch?: Partial<Record<ComponentSizeKey, SwitchSizeTokens>> & {
+        thumbColor?: string;
+    };
+    otpInput?: Partial<Record<ComponentSizeKey, OTPInputSizeTokens>>;
+    dialog?: DialogTokens;
+    toast?: ToastTokens;
+    formField?: FormFieldTokens;
+}
 export interface Theme {
     mode: ColorMode;
     colors: ColorPalette;
@@ -153,6 +323,14 @@ export interface Theme {
     radius: RadiusScale;
     shadows: ShadowScale;
     motion: MotionScale;
+    components: ComponentTokens;
+    /**
+     * Optional brand gradient palette. Empty by default — consumers register
+     * their own via theme overrides. Components that accept gradient inputs
+     * (Button, Card) read from here when consumers pass a string token, OR
+     * accept a `GradientDefinition` literal directly.
+     */
+    gradients: GradientScale;
 }
 export type DeepPartial<T> = T extends object ? {
     [K in keyof T]?: DeepPartial<T[K]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",
@@ -72,6 +72,7 @@
     "react-native-device-info": ">=14.0.0",
     "react-native-gesture-handler": "^2.21.0",
     "react-native-keychain": ">=9.0.0",
+    "react-native-linear-gradient": ">=2.8.0",
     "react-native-permissions": ">=4.0.0",
     "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": ">=5.4.0",
@@ -96,6 +97,9 @@
     "react-native-keychain": {
       "optional": true
     },
+    "react-native-linear-gradient": {
+      "optional": true
+    },
     "react-native-permissions": {
       "optional": true
     },