@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/theme/index.d.cts

@@ -0,0 +1,539 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+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.cjs';
+export { F as FontSizeKey, a as FontWeightKey, R as RadiusKey, S as Size, c as XAUIPrimitiveColors, e as XAUIShadow } from '../theme.type-B3ODSLbB.cjs';
+
+/** `'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;
+
+/**
+ * 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.
+ *
+ * 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 { 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 };