@xaui/native 0.2.7 → 0.9.1-alpha.0

package/dist/theme/index.d.ts

@@ -0,0 +1,669 @@
+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;
+};
+
+/** `'system'` follows the device; the resolved value is never `'system'`. */
+type ColorModePreference = 'light' | 'dark' | 'system';
+type XAUIProviderProps = {
+    children: ReactNode;
+    /** Build it once with `createTheme`, at module level. */
+    theme?: XAUIThemeSet;
+    /** Controlled: the library owns neither the state nor its persistence. */
+    colorMode?: ColorModePreference;
+};
+
+/**
+ * Wraps the app once.
+ *
+ * `theme` is expected to come from `createTheme` at module level. The provider selects a
+ * mode from an already-resolved set rather than memoizing on the prop's identity — which
+ * is what the v0 provider did, rebuilding every style in the app on each parent render.
+ */
+declare function XAUIProvider({ children, theme, colorMode, }: XAUIProviderProps): react.JSX.Element;
+
+/**
+ * Build a theme once, at module level:
+ *
+ * ```ts
+ * export const appTheme = createTheme({ colors: { light: { accent: '#3b82f6' } } })
+ * ```
+ *
+ * Module level is not a style preference — it is what makes the memoization bug
+ * impossible. A literal object passed to the provider changes identity on every parent
+ * render and rebuilds every style in the app.
+ */
+declare function createTheme(config?: XAUIThemeConfig): XAUIThemeSet;
+declare const defaultTheme: XAUIThemeSet;
+
+/**
+ * The derived layer: ~30 tokens computed from the source layer, never written by hand.
+ * Override `accent` and `accentPressed`, `accentSoft`, `accentSoftForeground` follow.
+ *
+ * These are HeroUI's `color-mix(in oklab, …)` formulas transposed to JS, because React
+ * Native has no `color-mix()`. Their `-hover` names became `-pressed`: what they feed is
+ * the press overlay, and the web name was a leftover.
+ */
+declare function deriveColors(s: XAUISourceColors): XAUIDerivedColors;
+
+/**
+ * The raw palette — Tailwind's scale, 22 families x 11 shades.
+ *
+ * It sits **outside** the theme on purpose: components read semantic tokens
+ * (`accent`, `danger`, `surface`), never `zinc[500]`. This is the material a theme is
+ * built from, exposed so an app can build its own source layer from the same scale.
+ */
+declare const palette: {
+    readonly slate: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly gray: {
+        readonly 50: "#f9fafb";
+        readonly 100: "#f3f4f6";
+        readonly 200: "#e5e7eb";
+        readonly 300: "#d1d5db";
+        readonly 400: "#9ca3af";
+        readonly 500: "#6b7280";
+        readonly 600: "#4b5563";
+        readonly 700: "#374151";
+        readonly 800: "#1f2937";
+        readonly 900: "#111827";
+        readonly 950: "#030712";
+    };
+    readonly zinc: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f4f4f5";
+        readonly 200: "#e4e4e7";
+        readonly 300: "#d4d4d8";
+        readonly 400: "#a1a1aa";
+        readonly 500: "#71717a";
+        readonly 600: "#52525b";
+        readonly 700: "#3f3f46";
+        readonly 800: "#27272a";
+        readonly 900: "#18181b";
+        readonly 950: "#09090b";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly stone: {
+        readonly 50: "#fafaf9";
+        readonly 100: "#f5f5f4";
+        readonly 200: "#e7e5e4";
+        readonly 300: "#d6d3d1";
+        readonly 400: "#a8a29e";
+        readonly 500: "#78716c";
+        readonly 600: "#57534e";
+        readonly 700: "#44403c";
+        readonly 800: "#292524";
+        readonly 900: "#1c1917";
+        readonly 950: "#0c0a09";
+    };
+    readonly red: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+    readonly orange: {
+        readonly 50: "#fff7ed";
+        readonly 100: "#ffedd5";
+        readonly 200: "#fed7aa";
+        readonly 300: "#fdba74";
+        readonly 400: "#fb923c";
+        readonly 500: "#f97316";
+        readonly 600: "#ea580c";
+        readonly 700: "#c2410c";
+        readonly 800: "#9a3412";
+        readonly 900: "#7c2d12";
+        readonly 950: "#431407";
+    };
+    readonly amber: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly yellow: {
+        readonly 50: "#fefce8";
+        readonly 100: "#fef9c3";
+        readonly 200: "#fef08a";
+        readonly 300: "#fde047";
+        readonly 400: "#facc15";
+        readonly 500: "#eab308";
+        readonly 600: "#ca8a04";
+        readonly 700: "#a16207";
+        readonly 800: "#854d0e";
+        readonly 900: "#713f12";
+        readonly 950: "#422006";
+    };
+    readonly lime: {
+        readonly 50: "#f7fee7";
+        readonly 100: "#ecfccb";
+        readonly 200: "#d9f99d";
+        readonly 300: "#bef264";
+        readonly 400: "#a3e635";
+        readonly 500: "#84cc16";
+        readonly 600: "#65a30d";
+        readonly 700: "#4d7c0f";
+        readonly 800: "#3f6212";
+        readonly 900: "#365314";
+        readonly 950: "#1a2e05";
+    };
+    readonly green: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly emerald: {
+        readonly 50: "#ecfdf5";
+        readonly 100: "#d1fae5";
+        readonly 200: "#a7f3d0";
+        readonly 300: "#6ee7b7";
+        readonly 400: "#34d399";
+        readonly 500: "#10b981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065f46";
+        readonly 900: "#064e3b";
+        readonly 950: "#022c22";
+    };
+    readonly teal: {
+        readonly 50: "#f0fdfa";
+        readonly 100: "#ccfbf1";
+        readonly 200: "#99f6e4";
+        readonly 300: "#5eead4";
+        readonly 400: "#2dd4bf";
+        readonly 500: "#14b8a6";
+        readonly 600: "#0d9488";
+        readonly 700: "#0f766e";
+        readonly 800: "#115e59";
+        readonly 900: "#134e4a";
+        readonly 950: "#042f2e";
+    };
+    readonly cyan: {
+        readonly 50: "#ecfeff";
+        readonly 100: "#cffafe";
+        readonly 200: "#a5f3fc";
+        readonly 300: "#67e8f9";
+        readonly 400: "#22d3ee";
+        readonly 500: "#06b6d4";
+        readonly 600: "#0891b2";
+        readonly 700: "#0e7490";
+        readonly 800: "#155e75";
+        readonly 900: "#164e63";
+        readonly 950: "#083344";
+    };
+    readonly sky: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+        readonly 950: "#082f49";
+    };
+    readonly blue: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly indigo: {
+        readonly 50: "#eef2ff";
+        readonly 100: "#e0e7ff";
+        readonly 200: "#c7d2fe";
+        readonly 300: "#a5b4fc";
+        readonly 400: "#818cf8";
+        readonly 500: "#6366f1";
+        readonly 600: "#4f46e5";
+        readonly 700: "#4338ca";
+        readonly 800: "#3730a3";
+        readonly 900: "#312e81";
+        readonly 950: "#1e1b4b";
+    };
+    readonly violet: {
+        readonly 50: "#f5f3ff";
+        readonly 100: "#ede9fe";
+        readonly 200: "#ddd6fe";
+        readonly 300: "#c4b5fd";
+        readonly 400: "#a78bfa";
+        readonly 500: "#8b5cf6";
+        readonly 600: "#7c3aed";
+        readonly 700: "#6d28d9";
+        readonly 800: "#5b21b6";
+        readonly 900: "#4c1d95";
+        readonly 950: "#2e1065";
+    };
+    readonly purple: {
+        readonly 50: "#faf5ff";
+        readonly 100: "#f3e8ff";
+        readonly 200: "#e9d5ff";
+        readonly 300: "#d8b4fe";
+        readonly 400: "#c084fc";
+        readonly 500: "#a855f7";
+        readonly 600: "#9333ea";
+        readonly 700: "#7e22ce";
+        readonly 800: "#6b21a8";
+        readonly 900: "#581c87";
+        readonly 950: "#3b0764";
+    };
+    readonly fuchsia: {
+        readonly 50: "#fdf4ff";
+        readonly 100: "#fae8ff";
+        readonly 200: "#f5d0fe";
+        readonly 300: "#f0abfc";
+        readonly 400: "#e879f9";
+        readonly 500: "#d946ef";
+        readonly 600: "#c026d3";
+        readonly 700: "#a21caf";
+        readonly 800: "#86198f";
+        readonly 900: "#701a75";
+        readonly 950: "#4a044e";
+    };
+    readonly pink: {
+        readonly 50: "#fdf2f8";
+        readonly 100: "#fce7f3";
+        readonly 200: "#fbcfe8";
+        readonly 300: "#f9a8d4";
+        readonly 400: "#f472b6";
+        readonly 500: "#ec4899";
+        readonly 600: "#db2777";
+        readonly 700: "#be185d";
+        readonly 800: "#9d174d";
+        readonly 900: "#831843";
+        readonly 950: "#500724";
+    };
+    readonly rose: {
+        readonly 50: "#fff1f2";
+        readonly 100: "#ffe4e6";
+        readonly 200: "#fecdd3";
+        readonly 300: "#fda4af";
+        readonly 400: "#fb7185";
+        readonly 500: "#f43f5e";
+        readonly 600: "#e11d48";
+        readonly 700: "#be123c";
+        readonly 800: "#9f1239";
+        readonly 900: "#881337";
+        readonly 950: "#4c0519";
+    };
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+    readonly transparent: "transparent";
+};
+/** Constant across both modes. */
+declare const primitives: {
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly snow: "#fafafa";
+    readonly eclipse: "#18181b";
+};
+type PaletteFamily = keyof typeof palette;
+type PaletteShade = keyof (typeof palette)['zinc'];
+
+/** One value redraws every corner in the library. */
+declare function buildRadius(base: number): XAUIRadius;
+/**
+ * Three roles, not an sm→xl scale — which is what lets dark mode drop the surface shadow
+ * entirely instead of shipping a scale that reads as dirt on a dark background.
+ */
+declare function buildShadows(mode: ColorMode): XAUITheme['shadows'];
+
+declare const tokens: {
+    readonly light: {
+        readonly background: "#fafafa";
+        readonly foreground: "#18181b";
+        readonly surface: "#ffffff";
+        readonly surfaceForeground: "#18181b";
+        readonly surfaceSecondary: "#f4f4f5";
+        readonly surfaceSecondaryForeground: "#18181b";
+        readonly surfaceTertiary: "#e4e4e7";
+        readonly surfaceTertiaryForeground: "#18181b";
+        readonly overlay: "#ffffff";
+        readonly overlayForeground: "#18181b";
+        readonly backdrop: "rgba(0, 0, 0, 0.2)";
+        readonly muted: "#71717a";
+        readonly default: "#f4f4f5";
+        readonly defaultForeground: "#18181b";
+        readonly accent: "#9333ea";
+        readonly accentForeground: "#faf5ff";
+        readonly fieldBackground: "#ffffff";
+        readonly fieldForeground: "#18181b";
+        readonly fieldPlaceholder: "#71717a";
+        readonly fieldBorder: "#e4e4e7";
+        readonly success: "#15803d";
+        readonly successForeground: "#fafafa";
+        readonly warning: "#b45309";
+        readonly warningForeground: "#fafafa";
+        readonly danger: "#dc2626";
+        readonly dangerForeground: "#fafafa";
+        readonly segment: "#ffffff";
+        readonly segmentForeground: "#18181b";
+        readonly border: "#e4e4e7";
+        readonly separator: "#d4d4d8";
+        readonly focus: "#9333ea";
+        readonly link: "#18181b";
+        readonly accentPressed: "#9c4eee";
+        readonly successPressed: "#378c50";
+        readonly warningPressed: "#bd642f";
+        readonly dangerPressed: "#e2473f";
+        readonly defaultPressed: "#eaeaeb";
+        readonly surfacePressed: "#eaeaea";
+        readonly defaultSoft: "rgba(244, 244, 245, 0.5)";
+        readonly defaultSoftForeground: "#18181b";
+        readonly defaultSoftPressed: "rgba(244, 244, 245, 0.6)";
+        readonly accentSoft: "rgba(147, 51, 234, 0.15)";
+        readonly accentSoftForeground: "#7833bc";
+        readonly accentSoftPressed: "rgba(147, 51, 234, 0.2)";
+        readonly successSoft: "rgba(21, 128, 61, 0.15)";
+        readonly successSoftForeground: "#205f34";
+        readonly successSoftPressed: "rgba(21, 128, 61, 0.2)";
+        readonly warningSoft: "rgba(180, 83, 9, 0.15)";
+        readonly warningSoftForeground: "#793f1e";
+        readonly warningSoftPressed: "rgba(180, 83, 9, 0.2)";
+        readonly dangerSoft: "rgba(220, 38, 38, 0.15)";
+        readonly dangerSoftForeground: "#b22b28";
+        readonly dangerSoftPressed: "rgba(220, 38, 38, 0.2)";
+        readonly backgroundSecondary: "#f0f0f0";
+        readonly backgroundTertiary: "#e5e5e6";
+        readonly backgroundInverse: "#18181b";
+        readonly borderSecondary: "#c6c6c7";
+        readonly borderTertiary: "#a8a8a9";
+        readonly separatorSecondary: "#d8d8d8";
+        readonly separatorTertiary: "#cdcdce";
+        readonly fieldPressed: "#e5e5e5";
+        readonly fieldFocus: "#ffffff";
+        readonly fieldBorderPressed: "#c8c8cb";
+        readonly fieldBorderFocus: "#a9a9ac";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+    readonly dark: {
+        readonly background: "#09090b";
+        readonly foreground: "#fafafa";
+        readonly surface: "#18181b";
+        readonly surfaceForeground: "#fafafa";
+        readonly surfaceSecondary: "#27272a";
+        readonly surfaceSecondaryForeground: "#fafafa";
+        readonly surfaceTertiary: "#3f3f46";
+        readonly surfaceTertiaryForeground: "#fafafa";
+        readonly overlay: "#18181b";
+        readonly overlayForeground: "#fafafa";
+        readonly backdrop: "rgba(0, 0, 0, 0.5)";
+        readonly muted: "#a1a1aa";
+        readonly default: "#27272a";
+        readonly defaultForeground: "#fafafa";
+        readonly accent: "#c084fc";
+        readonly accentForeground: "#18181b";
+        readonly fieldBackground: "#18181b";
+        readonly fieldForeground: "#fafafa";
+        readonly fieldPlaceholder: "#a1a1aa";
+        readonly fieldBorder: "#3f3f46";
+        readonly success: "#4ade80";
+        readonly successForeground: "#18181b";
+        readonly warning: "#fbbf24";
+        readonly warningForeground: "#18181b";
+        readonly danger: "#f87171";
+        readonly dangerForeground: "#18181b";
+        readonly segment: "#3f3f46";
+        readonly segmentForeground: "#fafafa";
+        readonly border: "#27272a";
+        readonly separator: "#52525b";
+        readonly focus: "#c084fc";
+        readonly link: "#fafafa";
+        readonly accentPressed: "#ad78e3";
+        readonly successPressed: "#47c875";
+        readonly warningPressed: "#e1ac2b";
+        readonly dangerPressed: "#df6868";
+        readonly defaultPressed: "#2e2e31";
+        readonly surfacePressed: "#27272a";
+        readonly defaultSoft: "rgba(39, 39, 42, 0.5)";
+        readonly defaultSoftForeground: "#fafafa";
+        readonly defaultSoftPressed: "rgba(39, 39, 42, 0.6)";
+        readonly accentSoft: "rgba(192, 132, 252, 0.15)";
+        readonly accentSoftForeground: "#cb9dfd";
+        readonly accentSoftPressed: "rgba(192, 132, 252, 0.2)";
+        readonly successSoft: "rgba(74, 222, 128, 0.15)";
+        readonly successSoftForeground: "#8de8a6";
+        readonly successSoftPressed: "rgba(74, 222, 128, 0.2)";
+        readonly warningSoft: "rgba(251, 191, 36, 0.15)";
+        readonly warningSoftForeground: "#fbd586";
+        readonly warningSoftPressed: "rgba(251, 191, 36, 0.2)";
+        readonly dangerSoft: "rgba(248, 113, 113, 0.15)";
+        readonly dangerSoftForeground: "#fc8f8c";
+        readonly dangerSoftPressed: "rgba(248, 113, 113, 0.2)";
+        readonly backgroundSecondary: "#101012";
+        readonly backgroundTertiary: "#18181a";
+        readonly backgroundInverse: "#fafafa";
+        readonly borderSecondary: "#424245";
+        readonly borderTertiary: "#5b5b5e";
+        readonly separatorSecondary: "#343437";
+        readonly separatorTertiary: "#3c3c3f";
+        readonly fieldPressed: "#2a2a2d";
+        readonly fieldFocus: "#18181b";
+        readonly fieldBorderPressed: "#535359";
+        readonly fieldBorderFocus: "#6b6b71";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+};
+/** Which keys belong to the source layer — the rest is derived or primitive. */
+declare const sourceKeys: readonly ["background", "foreground", "surface", "surfaceForeground", "surfaceSecondary", "surfaceSecondaryForeground", "surfaceTertiary", "surfaceTertiaryForeground", "overlay", "overlayForeground", "backdrop", "muted", "default", "defaultForeground", "accent", "accentForeground", "fieldBackground", "fieldForeground", "fieldPlaceholder", "fieldBorder", "success", "successForeground", "warning", "warningForeground", "danger", "dangerForeground", "segment", "segmentForeground", "border", "separator", "focus", "link"];
+
+/** Bare context. `null` is what lets the hooks throw a named error outside the provider. */
+declare const ThemeContext: react.Context<XAUITheme | null>;
+
+declare function useXAUITheme(): XAUITheme;
+/** The resolved mode — never `'system'`. */
+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 };

package/dist/theme/index.js

@@ -0,0 +1,32 @@
+import {
+  ThemeContext,
+  XAUIProvider,
+  buildRadius,
+  buildShadows,
+  createTheme,
+  defaultTheme,
+  deriveColors,
+  palette,
+  primitives,
+  sourceKeys,
+  tokens,
+  useColorMode,
+  useThemeColor,
+  useXAUITheme
+} from "../chunk-T3ZI2PZ6.js";
+export {
+  ThemeContext,
+  XAUIProvider,
+  buildRadius,
+  buildShadows,
+  createTheme,
+  defaultTheme,
+  deriveColors,
+  palette,
+  primitives,
+  sourceKeys,
+  tokens,
+  useColorMode,
+  useThemeColor,
+  useXAUITheme
+};