@xaui/native 0.9.1-alpha.0 → 0.9.1-alpha.1

package/dist/theme/index.d.ts

@@ -1,157 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-
-/** The source layer — the only surface a consumer writes by hand, per mode. */
-type XAUISourceColors = {
-    background: string;
-    foreground: string;
-    surface: string;
-    surfaceForeground: string;
-    surfaceSecondary: string;
-    surfaceSecondaryForeground: string;
-    surfaceTertiary: string;
-    surfaceTertiaryForeground: string;
-    overlay: string;
-    overlayForeground: string;
-    backdrop: string;
-    muted: string;
-    default: string;
-    defaultForeground: string;
-    accent: string;
-    accentForeground: string;
-    fieldBackground: string;
-    fieldForeground: string;
-    fieldPlaceholder: string;
-    fieldBorder: string;
-    success: string;
-    successForeground: string;
-    warning: string;
-    warningForeground: string;
-    danger: string;
-    dangerForeground: string;
-    segment: string;
-    segmentForeground: string;
-    border: string;
-    separator: string;
-    focus: string;
-    link: string;
-};
-/** The derived layer — computed by `deriveColors`, never written by hand. */
-type XAUIDerivedColors = {
-    accentPressed: string;
-    successPressed: string;
-    warningPressed: string;
-    dangerPressed: string;
-    defaultPressed: string;
-    surfacePressed: string;
-    defaultSoft: string;
-    defaultSoftForeground: string;
-    defaultSoftPressed: string;
-    accentSoft: string;
-    accentSoftForeground: string;
-    accentSoftPressed: string;
-    successSoft: string;
-    successSoftForeground: string;
-    successSoftPressed: string;
-    warningSoft: string;
-    warningSoftForeground: string;
-    warningSoftPressed: string;
-    dangerSoft: string;
-    dangerSoftForeground: string;
-    dangerSoftPressed: string;
-    backgroundSecondary: string;
-    backgroundTertiary: string;
-    backgroundInverse: string;
-    borderSecondary: string;
-    borderTertiary: string;
-    separatorSecondary: string;
-    separatorTertiary: string;
-    fieldPressed: string;
-    fieldFocus: string;
-    fieldBorderPressed: string;
-    fieldBorderFocus: string;
-};
-/** Constant across both modes. */
-type XAUIPrimitiveColors = {
-    white: string;
-    black: string;
-    snow: string;
-    eclipse: string;
-};
-/** Everything a component reads, flattened. */
-type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
-type ColorMode = 'light' | 'dark';
-type Size = 'xs' | 'sm' | 'md' | 'lg';
-type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
-type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
-type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
-type XAUIRadius = Record<RadiusKey, number>;
-type XAUIShadow = {
-    shadowColor: string;
-    shadowOffset: {
-        width: number;
-        height: number;
-    };
-    shadowOpacity: number;
-    shadowRadius: number;
-    elevation: number;
-};
-type XAUITheme = {
-    id: string;
-    mode: ColorMode;
-    colors: XAUIColors;
-    /** Base 4 — `spacing(3) === 12`. A function, so there is no "what do we call 12px". */
-    spacing: (steps: number) => number;
-    radius: XAUIRadius;
-    borderWidth: {
-        default: number;
-        field: number;
-    };
-    fontSizes: Record<FontSizeKey, number>;
-    lineHeights: Record<FontSizeKey, number>;
-    fontWeights: Record<FontWeightKey, string>;
-    fontFamilies: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    /** Semantic roles, not a scale: dark mode drops the surface shadow entirely. */
-    shadows: {
-        surface: XAUIShadow;
-        overlay: XAUIShadow;
-        field: XAUIShadow;
-    };
-    opacity: {
-        disabled: number;
-    };
-    controlHeights: Record<Size, number>;
-};
-type XAUIThemeConfig = {
-    colors?: {
-        light?: Partial<XAUISourceColors & XAUIDerivedColors>;
-        dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
-    };
-    /** The single base the whole radius scale derives from. */
-    radius?: number;
-    spacingUnit?: number;
-    borderWidth?: Partial<XAUITheme['borderWidth']>;
-    fontSizes?: Partial<XAUITheme['fontSizes']>;
-    lineHeights?: Partial<XAUITheme['lineHeights']>;
-    fontWeights?: Partial<XAUITheme['fontWeights']>;
-    fontFamilies?: Partial<XAUITheme['fontFamilies']>;
-    /** Per role, and `shadowOffset` is replaced whole — a half-set offset is not a shadow. */
-    shadows?: {
-        [K in keyof XAUITheme['shadows']]?: Partial<XAUIShadow>;
-    };
-    opacity?: Partial<XAUITheme['opacity']>;
-    controlHeights?: Partial<XAUITheme['controlHeights']>;
-};
-/** What `createTheme` returns: both modes, resolved, sharing one id. */
-type XAUIThemeSet = {
-    id: string;
-    light: XAUITheme;
-    dark: XAUITheme;
-};
+import { i as XAUIThemeSet, h as XAUIThemeConfig, f as XAUISourceColors, b as XAUIDerivedColors, g as XAUITheme, d as XAUIRadius, C as ColorMode, X as XAUIColors } from '../theme.type-B3ODSLbB.js';
+export { F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, c as XAUIPrimitiveColors, e as XAUIShadow } from '../theme.type-B3ODSLbB.js';
 
 /** `'system'` follows the device; the resolved value is never `'system'`. */
 type ColorModePreference = 'light' | 'dark' | 'system';
@@ -196,6 +46,26 @@ declare const defaultTheme: XAUIThemeSet;
  */
 declare function deriveColors(s: XAUISourceColors): XAUIDerivedColors;
 
+/**
+ * A raw tint, expanded into the slices a variant consumes. One `color` gives the base;
+ * the other five come out of the same OKLab formulas as `deriveColors`, so a free tint
+ * behaves exactly like `accent` or `danger` — same ratios, same rendering — instead of
+ * following a parallel mechanic.
+ */
+type XAUITint = {
+    base: string;
+    foreground: string;
+    soft: string;
+    softForeground: string;
+    pressed: string;
+    softPressed: string;
+};
+/**
+ * Memoized per tint *and* theme: sRGB → OKLab → sRGB is not free per render, and
+ * `softForeground` mixes with the theme's `foreground`, which differs between modes.
+ */
+declare function deriveTint(tint: string, theme: XAUITheme): XAUITint;
+
 /**
  * The raw palette — Tailwind's scale, 22 families x 11 shades.
  *
@@ -666,4 +536,4 @@ declare function useColorMode(): ColorMode;
 declare function useThemeColor(token: keyof XAUIColors): string;
 declare function useThemeColor(tokens: Array<keyof XAUIColors>): string[];
 
-export { type ColorMode, type ColorModePreference, type FontSizeKey, type FontWeightKey, type PaletteFamily, type PaletteShade, type RadiusKey, type Size, ThemeContext, type XAUIColors, type XAUIDerivedColors, type XAUIPrimitiveColors, XAUIProvider, type XAUIProviderProps, type XAUIRadius, type XAUIShadow, type XAUISourceColors, type XAUITheme, type XAUIThemeConfig, type XAUIThemeSet, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme };
+export { ColorMode, type ColorModePreference, type PaletteFamily, type PaletteShade, ThemeContext, XAUIColors, XAUIDerivedColors, XAUIProvider, type XAUIProviderProps, XAUIRadius, XAUISourceColors, XAUITheme, XAUIThemeConfig, XAUIThemeSet, type XAUITint, buildRadius, buildShadows, createTheme, defaultTheme, deriveColors, deriveTint, palette, primitives, sourceKeys, tokens, useColorMode, useThemeColor, useXAUITheme };

package/dist/theme/index.js

@@ -13,7 +13,10 @@ import {
   useColorMode,
   useThemeColor,
   useXAUITheme
-} from "../chunk-T3ZI2PZ6.js";
+} from "../chunk-PBVPOX7D.js";
+import {
+  deriveTint
+} from "../chunk-RBNCR5KB.js";
 export {
   ThemeContext,
   XAUIProvider,
@@ -22,6 +25,7 @@ export {
   createTheme,
   defaultTheme,
   deriveColors,
+  deriveTint,
   palette,
   primitives,
   sourceKeys,

package/dist/theme.type-B3ODSLbB.d.cts

@@ -0,0 +1,153 @@
+/** The source layer — the only surface a consumer writes by hand, per mode. */
+type XAUISourceColors = {
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    surfaceSecondary: string;
+    surfaceSecondaryForeground: string;
+    surfaceTertiary: string;
+    surfaceTertiaryForeground: string;
+    overlay: string;
+    overlayForeground: string;
+    backdrop: string;
+    muted: string;
+    default: string;
+    defaultForeground: string;
+    accent: string;
+    accentForeground: string;
+    fieldBackground: string;
+    fieldForeground: string;
+    fieldPlaceholder: string;
+    fieldBorder: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    danger: string;
+    dangerForeground: string;
+    segment: string;
+    segmentForeground: string;
+    border: string;
+    separator: string;
+    focus: string;
+    link: string;
+};
+/** The derived layer — computed by `deriveColors`, never written by hand. */
+type XAUIDerivedColors = {
+    accentPressed: string;
+    successPressed: string;
+    warningPressed: string;
+    dangerPressed: string;
+    defaultPressed: string;
+    surfacePressed: string;
+    defaultSoft: string;
+    defaultSoftForeground: string;
+    defaultSoftPressed: string;
+    accentSoft: string;
+    accentSoftForeground: string;
+    accentSoftPressed: string;
+    successSoft: string;
+    successSoftForeground: string;
+    successSoftPressed: string;
+    warningSoft: string;
+    warningSoftForeground: string;
+    warningSoftPressed: string;
+    dangerSoft: string;
+    dangerSoftForeground: string;
+    dangerSoftPressed: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    backgroundInverse: string;
+    borderSecondary: string;
+    borderTertiary: string;
+    separatorSecondary: string;
+    separatorTertiary: string;
+    fieldPressed: string;
+    fieldFocus: string;
+    fieldBorderPressed: string;
+    fieldBorderFocus: string;
+};
+/** Constant across both modes. */
+type XAUIPrimitiveColors = {
+    white: string;
+    black: string;
+    snow: string;
+    eclipse: string;
+};
+/** Everything a component reads, flattened. */
+type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
+type ColorMode = 'light' | 'dark';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
+type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
+type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
+type XAUIRadius = Record<RadiusKey, number>;
+type XAUIShadow = {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+};
+type XAUITheme = {
+    id: string;
+    mode: ColorMode;
+    colors: XAUIColors;
+    /** Base 4 — `spacing(3) === 12`. A function, so there is no "what do we call 12px". */
+    spacing: (steps: number) => number;
+    radius: XAUIRadius;
+    borderWidth: {
+        default: number;
+        field: number;
+    };
+    fontSizes: Record<FontSizeKey, number>;
+    lineHeights: Record<FontSizeKey, number>;
+    fontWeights: Record<FontWeightKey, string>;
+    fontFamilies: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    /** Semantic roles, not a scale: dark mode drops the surface shadow entirely. */
+    shadows: {
+        surface: XAUIShadow;
+        overlay: XAUIShadow;
+        field: XAUIShadow;
+    };
+    opacity: {
+        disabled: number;
+    };
+    controlHeights: Record<Size, number>;
+};
+type XAUIThemeConfig = {
+    colors?: {
+        light?: Partial<XAUISourceColors & XAUIDerivedColors>;
+        dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
+    };
+    /** The single base the whole radius scale derives from. */
+    radius?: number;
+    spacingUnit?: number;
+    borderWidth?: Partial<XAUITheme['borderWidth']>;
+    fontSizes?: Partial<XAUITheme['fontSizes']>;
+    lineHeights?: Partial<XAUITheme['lineHeights']>;
+    fontWeights?: Partial<XAUITheme['fontWeights']>;
+    fontFamilies?: Partial<XAUITheme['fontFamilies']>;
+    /** Per role, and `shadowOffset` is replaced whole — a half-set offset is not a shadow. */
+    shadows?: {
+        [K in keyof XAUITheme['shadows']]?: Partial<XAUIShadow>;
+    };
+    opacity?: Partial<XAUITheme['opacity']>;
+    controlHeights?: Partial<XAUITheme['controlHeights']>;
+};
+/** What `createTheme` returns: both modes, resolved, sharing one id. */
+type XAUIThemeSet = {
+    id: string;
+    light: XAUITheme;
+    dark: XAUITheme;
+};
+
+export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/dist/theme.type-B3ODSLbB.d.ts

@@ -0,0 +1,153 @@
+/** The source layer — the only surface a consumer writes by hand, per mode. */
+type XAUISourceColors = {
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    surfaceSecondary: string;
+    surfaceSecondaryForeground: string;
+    surfaceTertiary: string;
+    surfaceTertiaryForeground: string;
+    overlay: string;
+    overlayForeground: string;
+    backdrop: string;
+    muted: string;
+    default: string;
+    defaultForeground: string;
+    accent: string;
+    accentForeground: string;
+    fieldBackground: string;
+    fieldForeground: string;
+    fieldPlaceholder: string;
+    fieldBorder: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    danger: string;
+    dangerForeground: string;
+    segment: string;
+    segmentForeground: string;
+    border: string;
+    separator: string;
+    focus: string;
+    link: string;
+};
+/** The derived layer — computed by `deriveColors`, never written by hand. */
+type XAUIDerivedColors = {
+    accentPressed: string;
+    successPressed: string;
+    warningPressed: string;
+    dangerPressed: string;
+    defaultPressed: string;
+    surfacePressed: string;
+    defaultSoft: string;
+    defaultSoftForeground: string;
+    defaultSoftPressed: string;
+    accentSoft: string;
+    accentSoftForeground: string;
+    accentSoftPressed: string;
+    successSoft: string;
+    successSoftForeground: string;
+    successSoftPressed: string;
+    warningSoft: string;
+    warningSoftForeground: string;
+    warningSoftPressed: string;
+    dangerSoft: string;
+    dangerSoftForeground: string;
+    dangerSoftPressed: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    backgroundInverse: string;
+    borderSecondary: string;
+    borderTertiary: string;
+    separatorSecondary: string;
+    separatorTertiary: string;
+    fieldPressed: string;
+    fieldFocus: string;
+    fieldBorderPressed: string;
+    fieldBorderFocus: string;
+};
+/** Constant across both modes. */
+type XAUIPrimitiveColors = {
+    white: string;
+    black: string;
+    snow: string;
+    eclipse: string;
+};
+/** Everything a component reads, flattened. */
+type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
+type ColorMode = 'light' | 'dark';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
+type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
+type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
+type XAUIRadius = Record<RadiusKey, number>;
+type XAUIShadow = {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+};
+type XAUITheme = {
+    id: string;
+    mode: ColorMode;
+    colors: XAUIColors;
+    /** Base 4 — `spacing(3) === 12`. A function, so there is no "what do we call 12px". */
+    spacing: (steps: number) => number;
+    radius: XAUIRadius;
+    borderWidth: {
+        default: number;
+        field: number;
+    };
+    fontSizes: Record<FontSizeKey, number>;
+    lineHeights: Record<FontSizeKey, number>;
+    fontWeights: Record<FontWeightKey, string>;
+    fontFamilies: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    /** Semantic roles, not a scale: dark mode drops the surface shadow entirely. */
+    shadows: {
+        surface: XAUIShadow;
+        overlay: XAUIShadow;
+        field: XAUIShadow;
+    };
+    opacity: {
+        disabled: number;
+    };
+    controlHeights: Record<Size, number>;
+};
+type XAUIThemeConfig = {
+    colors?: {
+        light?: Partial<XAUISourceColors & XAUIDerivedColors>;
+        dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
+    };
+    /** The single base the whole radius scale derives from. */
+    radius?: number;
+    spacingUnit?: number;
+    borderWidth?: Partial<XAUITheme['borderWidth']>;
+    fontSizes?: Partial<XAUITheme['fontSizes']>;
+    lineHeights?: Partial<XAUITheme['lineHeights']>;
+    fontWeights?: Partial<XAUITheme['fontWeights']>;
+    fontFamilies?: Partial<XAUITheme['fontFamilies']>;
+    /** Per role, and `shadowOffset` is replaced whole — a half-set offset is not a shadow. */
+    shadows?: {
+        [K in keyof XAUITheme['shadows']]?: Partial<XAUIShadow>;
+    };
+    opacity?: Partial<XAUITheme['opacity']>;
+    controlHeights?: Partial<XAUITheme['controlHeights']>;
+};
+/** What `createTheme` returns: both modes, resolved, sharing one id. */
+type XAUIThemeSet = {
+    id: string;
+    light: XAUITheme;
+    dark: XAUITheme;
+};
+
+export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.9.1-alpha.0",
+  "version": "0.9.1-alpha.1",
   "description": "Composition-first React Native UI components with native animations powered by Reanimated",
   "keywords": [
     "react-native",
@@ -22,6 +22,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./system": {
+      "types": "./dist/system/index.d.ts",
+      "import": "./dist/system/index.js",
+      "require": "./dist/system/index.js"
+    },
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "import": "./dist/theme/index.js",