@spelyco/react-lib 1.2.0 → 1.3.0

package/README.md

@@ -85,18 +85,15 @@ function Search() {
 
 ---
 
-## Utils
+## Theme types
 
-### `theme`
-
-A pre-configured Mantine theme object with Spelyco defaults. Used internally by `SpelycoProvider`.
+Framework-agnostic theme contract consumed by both `@spelyco/react` and `@spelyco/react-native`.
 
 ```ts
-import { theme } from "@spelyco/react-lib";
-// MantineTheme with defaultRadius: "md" and button defaults
+import type { SpelycoTheme, SpelycoThemeOverride, ColorTuple } from "@spelyco/react-lib";
 ```
 
-You probably don't need this directly — it's applied automatically by `SpelycoProvider`.
+The runtime helpers that produce a theme live in the platform packages — `theme()` from `@spelyco/react` for web (Mantine), and `SpelycoProvider`'s defaults for React Native.
 
 ---
 

package/dist/index.d.mts

@@ -1,5 +1,125 @@
-import * as _mantine_core from '@mantine/core';
-import { MantineColor } from '@mantine/core';
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/**
+ * 10-shade color tuple. Index 0 = lightest, 9 = darkest.
+ * Matches Mantine's color palette structure so palettes are portable across platforms.
+ */
+type ColorTuple = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+type SpelycoColorScheme = "light" | "dark" | "auto";
+type SpelycoComputedColorScheme = "light" | "dark";
+type SpelycoSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SpelycoRadiusKey = SpelycoSize | "pill";
+type SpelycoColors = Record<string, ColorTuple>;
+type SpelycoSpacing = Record<SpelycoSize, number>;
+type SpelycoRadius = Record<SpelycoRadiusKey, number>;
+type SpelycoFontSizes = Record<SpelycoSize, number>;
+type SpelycoLineHeights = Record<SpelycoSize, number>;
+type SpelycoShadows = Record<SpelycoSize, string>;
+type SpelycoBreakpoints = Record<SpelycoSize, number>;
+/**
+ * Which shade index of a color tuple becomes the "primary" color.
+ * Use a single number for both schemes, or an object to differ between light/dark.
+ */
+type SpelycoPrimaryShade = number | {
+    light: number;
+    dark: number;
+};
+/**
+ * Status/navigation bar config used by the RN provider via expo-system-ui and
+ * react-native-edge-to-edge. Web ignores this field.
+ */
+interface SpelycoSystemBars {
+    statusBarStyle: "light" | "dark" | "auto";
+    statusBarBackgroundColor?: string;
+    navigationBarColor?: string;
+    navigationBarStyle?: "light" | "dark";
+}
+/**
+ * Per-component theme override. Keyed by component name (e.g. "Button").
+ * Generic over the component's props so `defaultProps` is typed.
+ */
+interface SpelycoComponentOverride<TProps = unknown> {
+    defaultProps?: Partial<TProps>;
+}
+type SpelycoComponents = Record<string, SpelycoComponentOverride>;
+/**
+ * Fully resolved theme. Produced by `resolveTheme(override)` and consumed by
+ * components and the provider. All fields are required at this stage.
+ */
+interface SpelycoTheme {
+    colors: SpelycoColors;
+    primaryColor: string;
+    primaryShade: SpelycoPrimaryShade;
+    spacing: SpelycoSpacing;
+    radius: SpelycoRadius;
+    fontSizes: SpelycoFontSizes;
+    lineHeights: SpelycoLineHeights;
+    shadows: SpelycoShadows;
+    breakpoints: SpelycoBreakpoints;
+    fontFamily: string;
+    fontFamilyMono: string;
+    defaultRadius: SpelycoRadiusKey | number;
+    components: SpelycoComponents;
+    /** Only consumed by RN provider. Web ignores. */
+    systemBars?: {
+        light: SpelycoSystemBars;
+        dark: SpelycoSystemBars;
+    };
+    /** Free-form custom tokens. Consumers augment via module declaration. */
+    other: Record<string, unknown>;
+}
+/**
+ * What you pass to `<SpelycoProvider theme={...}>`. Every field is optional and
+ * gets deep-merged with the defaults.
+ */
+type SpelycoThemeOverride = Partial<SpelycoTheme>;
+
+interface CreateComponentConfig<TProps extends object> {
+    /** Used as the key for `theme.components[name]` overrides. */
+    name: string;
+    defaultProps?: Partial<TProps>;
+    render: (props: TProps) => ReactElement | null;
+}
+interface SpelycoComponent<TProps extends object> {
+    (props: TProps): ReactElement | null;
+    displayName: string;
+    /**
+     * Helper for building a `theme.components[name]` override object — purely
+     * sugar, returns its argument with the right shape.
+     */
+    extend: (override: SpelycoComponentOverride<TProps>) => SpelycoComponentOverride<TProps>;
+}
+/**
+ * Wraps a render function into a Spelyco component that:
+ *   - reads `theme.components[name].defaultProps` for runtime overrides
+ *   - merges factory defaults → theme defaults → user props (later wins)
+ *   - exposes `.extend()` so consumers can produce override objects
+ *   - sets `displayName` to the provided `name`
+ */
+declare function createComponent<TProps extends object>(config: CreateComponentConfig<TProps>): SpelycoComponent<TProps>;
+
+/**
+ * Merges three sources of props in precedence order (later wins):
+ *   1. factory defaults — declared inside `createComponent({ defaultProps })`
+ *   2. theme defaults  — declared via `theme.components[name].defaultProps`
+ *   3. user props      — passed at the call site
+ *
+ * `undefined` values in user props are skipped so partially-controlled inputs
+ * fall back to defaults instead of forcing `undefined`.
+ */
+declare function useProps<TProps extends object>(componentName: string, factoryDefaults: Partial<TProps> | undefined, props: TProps): TProps;
 
 interface UseBooleanReturn {
     value: boolean;
@@ -12,152 +132,58 @@ declare function useBoolean(initialValue?: boolean): UseBooleanReturn;
 
 declare function useDebounce<T>(value: T, delay?: number): T;
 
-declare const theme: (primaryColor?: MantineColor) => {
-    focusRing?: "auto" | "always" | "never" | undefined;
-    scale?: number | undefined;
-    fontSmoothing?: boolean | undefined;
-    white?: string | undefined;
-    black?: string | undefined;
-    colors?: {
-        [x: string & {}]: _mantine_core.MantineColorsTuple | undefined;
-        dark?: _mantine_core.MantineColorsTuple | undefined;
-        gray?: _mantine_core.MantineColorsTuple | undefined;
-        red?: _mantine_core.MantineColorsTuple | undefined;
-        pink?: _mantine_core.MantineColorsTuple | undefined;
-        grape?: _mantine_core.MantineColorsTuple | undefined;
-        violet?: _mantine_core.MantineColorsTuple | undefined;
-        indigo?: _mantine_core.MantineColorsTuple | undefined;
-        blue?: _mantine_core.MantineColorsTuple | undefined;
-        cyan?: _mantine_core.MantineColorsTuple | undefined;
-        green?: _mantine_core.MantineColorsTuple | undefined;
-        lime?: _mantine_core.MantineColorsTuple | undefined;
-        yellow?: _mantine_core.MantineColorsTuple | undefined;
-        orange?: _mantine_core.MantineColorsTuple | undefined;
-        teal?: _mantine_core.MantineColorsTuple | undefined;
-    } | undefined;
-    primaryShade?: _mantine_core.MantineColorShade | {
-        light?: _mantine_core.MantineColorShade | undefined;
-        dark?: _mantine_core.MantineColorShade | undefined;
-    } | undefined;
-    primaryColor?: string | undefined;
-    variantColorResolver?: _mantine_core.VariantColorsResolver | undefined;
-    autoContrast?: boolean | undefined;
-    luminanceThreshold?: number | undefined;
-    fontFamily?: string | undefined;
-    fontFamilyMonospace?: string | undefined;
-    headings?: {
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
-        sizes?: {
-            h1?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h2?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h3?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h4?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h5?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h6?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-        } | undefined;
-    } | undefined;
-    radius?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    defaultRadius?: _mantine_core.MantineRadius | undefined;
-    spacing?: {
-        [x: number]: string | undefined;
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    fontSizes?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    lineHeights?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    fontWeights?: {
-        [x: string & {}]: string | undefined;
-        bold?: string | undefined;
-        regular?: string | undefined;
-        medium?: string | undefined;
-    } | undefined;
-    breakpoints?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    shadows?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    respectReducedMotion?: boolean | undefined;
-    cursorType?: "default" | "pointer" | undefined;
-    defaultGradient?: {
-        from?: string | undefined;
-        to?: string | undefined;
-        deg?: number | undefined;
-    } | undefined;
-    activeClassName?: string | undefined;
-    focusClassName?: string | undefined;
-    components?: {
-        [x: string]: {
-            classNames?: any;
-            styles?: any;
-            vars?: any;
-            defaultProps?: any;
-        } | undefined;
-    } | undefined;
-    other?: {
-        [x: string]: any;
-    } | undefined;
-};
+/**
+ * Wraps an array of 10 color strings into a typed `ColorTuple`. Throws if the
+ * array isn't exactly 10 items, which catches palette typos at boot time.
+ *
+ * For algorithmic shade generation from a single base color, prefer importing
+ * shades from a curated palette (e.g. Tailwind) — this lib intentionally ships
+ * without an HSL-based generator to keep the surface area small.
+ */
+declare function createColorTuple(shades: readonly string[]): ColorTuple;
+
+/**
+ * Default palettes. Index 0 is the lightest, 9 is the darkest. Sourced from
+ * Tailwind's 50–900 ramps (the 950 step is dropped to keep the tuple length
+ * at 10).
+ */
+declare const DEFAULT_BRAND: ColorTuple;
+declare const DEFAULT_NEUTRAL: ColorTuple;
+declare const DEFAULT_RED: ColorTuple;
+declare const DEFAULT_GREEN: ColorTuple;
+declare const DEFAULT_COLORS: SpelycoColors;
+declare const DEFAULT_SPACING: SpelycoSpacing;
+declare const DEFAULT_RADIUS: SpelycoRadius;
+declare const DEFAULT_FONT_SIZES: SpelycoFontSizes;
+declare const DEFAULT_LINE_HEIGHTS: SpelycoLineHeights;
+/**
+ * CSS box-shadow strings. RN consumers can map these to elevation locally.
+ */
+declare const DEFAULT_SHADOWS: SpelycoShadows;
+/**
+ * `xs: 0` is intentional — Unistyles treats it as the always-active breakpoint.
+ */
+declare const DEFAULT_BREAKPOINTS: SpelycoBreakpoints;
+declare const DEFAULT_SYSTEM_BARS_LIGHT: SpelycoSystemBars;
+declare const DEFAULT_SYSTEM_BARS_DARK: SpelycoSystemBars;
+/**
+ * Fully-resolved default theme. Override fields with `<SpelycoProvider theme>`.
+ */
+declare const DEFAULT_THEME: SpelycoTheme;
+
+/**
+ * Merges a partial theme override with the default theme, returning a fully
+ * resolved `SpelycoTheme`. Color tuples and arrays are replaced wholesale;
+ * plain objects (spacing, components, etc.) are merged key-by-key.
+ */
+declare function resolveTheme(override?: SpelycoThemeOverride): SpelycoTheme;
+
+/**
+ * Holds the resolved theme. Platform-specific providers (`SpelycoProvider` in
+ * the RN and web packages) write to this context after deep-merging user
+ * overrides with `DEFAULT_THEME`.
+ */
+declare const SpelycoThemeContext: react.Context<SpelycoTheme>;
+declare function useSpelycoTheme(): SpelycoTheme;
 
-export { theme, useBoolean, useDebounce };
+export { type ColorTuple, type CreateComponentConfig, DEFAULT_BRAND, DEFAULT_BREAKPOINTS, DEFAULT_COLORS, DEFAULT_FONT_SIZES, DEFAULT_GREEN, DEFAULT_LINE_HEIGHTS, DEFAULT_NEUTRAL, DEFAULT_RADIUS, DEFAULT_RED, DEFAULT_SHADOWS, DEFAULT_SPACING, DEFAULT_SYSTEM_BARS_DARK, DEFAULT_SYSTEM_BARS_LIGHT, DEFAULT_THEME, type SpelycoBreakpoints, type SpelycoColorScheme, type SpelycoColors, type SpelycoComponent, type SpelycoComponentOverride, type SpelycoComponents, type SpelycoComputedColorScheme, type SpelycoFontSizes, type SpelycoLineHeights, type SpelycoPrimaryShade, type SpelycoRadius, type SpelycoRadiusKey, type SpelycoShadows, type SpelycoSize, type SpelycoSpacing, type SpelycoSystemBars, type SpelycoTheme, SpelycoThemeContext, type SpelycoThemeOverride, createColorTuple, createComponent, resolveTheme, useBoolean, useDebounce, useProps, useSpelycoTheme };

package/dist/index.d.ts

@@ -1,5 +1,125 @@
-import * as _mantine_core from '@mantine/core';
-import { MantineColor } from '@mantine/core';
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/**
+ * 10-shade color tuple. Index 0 = lightest, 9 = darkest.
+ * Matches Mantine's color palette structure so palettes are portable across platforms.
+ */
+type ColorTuple = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+type SpelycoColorScheme = "light" | "dark" | "auto";
+type SpelycoComputedColorScheme = "light" | "dark";
+type SpelycoSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SpelycoRadiusKey = SpelycoSize | "pill";
+type SpelycoColors = Record<string, ColorTuple>;
+type SpelycoSpacing = Record<SpelycoSize, number>;
+type SpelycoRadius = Record<SpelycoRadiusKey, number>;
+type SpelycoFontSizes = Record<SpelycoSize, number>;
+type SpelycoLineHeights = Record<SpelycoSize, number>;
+type SpelycoShadows = Record<SpelycoSize, string>;
+type SpelycoBreakpoints = Record<SpelycoSize, number>;
+/**
+ * Which shade index of a color tuple becomes the "primary" color.
+ * Use a single number for both schemes, or an object to differ between light/dark.
+ */
+type SpelycoPrimaryShade = number | {
+    light: number;
+    dark: number;
+};
+/**
+ * Status/navigation bar config used by the RN provider via expo-system-ui and
+ * react-native-edge-to-edge. Web ignores this field.
+ */
+interface SpelycoSystemBars {
+    statusBarStyle: "light" | "dark" | "auto";
+    statusBarBackgroundColor?: string;
+    navigationBarColor?: string;
+    navigationBarStyle?: "light" | "dark";
+}
+/**
+ * Per-component theme override. Keyed by component name (e.g. "Button").
+ * Generic over the component's props so `defaultProps` is typed.
+ */
+interface SpelycoComponentOverride<TProps = unknown> {
+    defaultProps?: Partial<TProps>;
+}
+type SpelycoComponents = Record<string, SpelycoComponentOverride>;
+/**
+ * Fully resolved theme. Produced by `resolveTheme(override)` and consumed by
+ * components and the provider. All fields are required at this stage.
+ */
+interface SpelycoTheme {
+    colors: SpelycoColors;
+    primaryColor: string;
+    primaryShade: SpelycoPrimaryShade;
+    spacing: SpelycoSpacing;
+    radius: SpelycoRadius;
+    fontSizes: SpelycoFontSizes;
+    lineHeights: SpelycoLineHeights;
+    shadows: SpelycoShadows;
+    breakpoints: SpelycoBreakpoints;
+    fontFamily: string;
+    fontFamilyMono: string;
+    defaultRadius: SpelycoRadiusKey | number;
+    components: SpelycoComponents;
+    /** Only consumed by RN provider. Web ignores. */
+    systemBars?: {
+        light: SpelycoSystemBars;
+        dark: SpelycoSystemBars;
+    };
+    /** Free-form custom tokens. Consumers augment via module declaration. */
+    other: Record<string, unknown>;
+}
+/**
+ * What you pass to `<SpelycoProvider theme={...}>`. Every field is optional and
+ * gets deep-merged with the defaults.
+ */
+type SpelycoThemeOverride = Partial<SpelycoTheme>;
+
+interface CreateComponentConfig<TProps extends object> {
+    /** Used as the key for `theme.components[name]` overrides. */
+    name: string;
+    defaultProps?: Partial<TProps>;
+    render: (props: TProps) => ReactElement | null;
+}
+interface SpelycoComponent<TProps extends object> {
+    (props: TProps): ReactElement | null;
+    displayName: string;
+    /**
+     * Helper for building a `theme.components[name]` override object — purely
+     * sugar, returns its argument with the right shape.
+     */
+    extend: (override: SpelycoComponentOverride<TProps>) => SpelycoComponentOverride<TProps>;
+}
+/**
+ * Wraps a render function into a Spelyco component that:
+ *   - reads `theme.components[name].defaultProps` for runtime overrides
+ *   - merges factory defaults → theme defaults → user props (later wins)
+ *   - exposes `.extend()` so consumers can produce override objects
+ *   - sets `displayName` to the provided `name`
+ */
+declare function createComponent<TProps extends object>(config: CreateComponentConfig<TProps>): SpelycoComponent<TProps>;
+
+/**
+ * Merges three sources of props in precedence order (later wins):
+ *   1. factory defaults — declared inside `createComponent({ defaultProps })`
+ *   2. theme defaults  — declared via `theme.components[name].defaultProps`
+ *   3. user props      — passed at the call site
+ *
+ * `undefined` values in user props are skipped so partially-controlled inputs
+ * fall back to defaults instead of forcing `undefined`.
+ */
+declare function useProps<TProps extends object>(componentName: string, factoryDefaults: Partial<TProps> | undefined, props: TProps): TProps;
 
 interface UseBooleanReturn {
     value: boolean;
@@ -12,152 +132,58 @@ declare function useBoolean(initialValue?: boolean): UseBooleanReturn;
 
 declare function useDebounce<T>(value: T, delay?: number): T;
 
-declare const theme: (primaryColor?: MantineColor) => {
-    focusRing?: "auto" | "always" | "never" | undefined;
-    scale?: number | undefined;
-    fontSmoothing?: boolean | undefined;
-    white?: string | undefined;
-    black?: string | undefined;
-    colors?: {
-        [x: string & {}]: _mantine_core.MantineColorsTuple | undefined;
-        dark?: _mantine_core.MantineColorsTuple | undefined;
-        gray?: _mantine_core.MantineColorsTuple | undefined;
-        red?: _mantine_core.MantineColorsTuple | undefined;
-        pink?: _mantine_core.MantineColorsTuple | undefined;
-        grape?: _mantine_core.MantineColorsTuple | undefined;
-        violet?: _mantine_core.MantineColorsTuple | undefined;
-        indigo?: _mantine_core.MantineColorsTuple | undefined;
-        blue?: _mantine_core.MantineColorsTuple | undefined;
-        cyan?: _mantine_core.MantineColorsTuple | undefined;
-        green?: _mantine_core.MantineColorsTuple | undefined;
-        lime?: _mantine_core.MantineColorsTuple | undefined;
-        yellow?: _mantine_core.MantineColorsTuple | undefined;
-        orange?: _mantine_core.MantineColorsTuple | undefined;
-        teal?: _mantine_core.MantineColorsTuple | undefined;
-    } | undefined;
-    primaryShade?: _mantine_core.MantineColorShade | {
-        light?: _mantine_core.MantineColorShade | undefined;
-        dark?: _mantine_core.MantineColorShade | undefined;
-    } | undefined;
-    primaryColor?: string | undefined;
-    variantColorResolver?: _mantine_core.VariantColorsResolver | undefined;
-    autoContrast?: boolean | undefined;
-    luminanceThreshold?: number | undefined;
-    fontFamily?: string | undefined;
-    fontFamilyMonospace?: string | undefined;
-    headings?: {
-        fontFamily?: string | undefined;
-        fontWeight?: string | undefined;
-        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
-        sizes?: {
-            h1?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h2?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h3?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h4?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h5?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-            h6?: {
-                fontSize?: string | undefined;
-                fontWeight?: string | undefined;
-                lineHeight?: string | undefined;
-            } | undefined;
-        } | undefined;
-    } | undefined;
-    radius?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    defaultRadius?: _mantine_core.MantineRadius | undefined;
-    spacing?: {
-        [x: number]: string | undefined;
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    fontSizes?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    lineHeights?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    fontWeights?: {
-        [x: string & {}]: string | undefined;
-        bold?: string | undefined;
-        regular?: string | undefined;
-        medium?: string | undefined;
-    } | undefined;
-    breakpoints?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    shadows?: {
-        [x: string & {}]: string | undefined;
-        md?: string | undefined;
-        xs?: string | undefined;
-        sm?: string | undefined;
-        lg?: string | undefined;
-        xl?: string | undefined;
-    } | undefined;
-    respectReducedMotion?: boolean | undefined;
-    cursorType?: "default" | "pointer" | undefined;
-    defaultGradient?: {
-        from?: string | undefined;
-        to?: string | undefined;
-        deg?: number | undefined;
-    } | undefined;
-    activeClassName?: string | undefined;
-    focusClassName?: string | undefined;
-    components?: {
-        [x: string]: {
-            classNames?: any;
-            styles?: any;
-            vars?: any;
-            defaultProps?: any;
-        } | undefined;
-    } | undefined;
-    other?: {
-        [x: string]: any;
-    } | undefined;
-};
+/**
+ * Wraps an array of 10 color strings into a typed `ColorTuple`. Throws if the
+ * array isn't exactly 10 items, which catches palette typos at boot time.
+ *
+ * For algorithmic shade generation from a single base color, prefer importing
+ * shades from a curated palette (e.g. Tailwind) — this lib intentionally ships
+ * without an HSL-based generator to keep the surface area small.
+ */
+declare function createColorTuple(shades: readonly string[]): ColorTuple;
+
+/**
+ * Default palettes. Index 0 is the lightest, 9 is the darkest. Sourced from
+ * Tailwind's 50–900 ramps (the 950 step is dropped to keep the tuple length
+ * at 10).
+ */
+declare const DEFAULT_BRAND: ColorTuple;
+declare const DEFAULT_NEUTRAL: ColorTuple;
+declare const DEFAULT_RED: ColorTuple;
+declare const DEFAULT_GREEN: ColorTuple;
+declare const DEFAULT_COLORS: SpelycoColors;
+declare const DEFAULT_SPACING: SpelycoSpacing;
+declare const DEFAULT_RADIUS: SpelycoRadius;
+declare const DEFAULT_FONT_SIZES: SpelycoFontSizes;
+declare const DEFAULT_LINE_HEIGHTS: SpelycoLineHeights;
+/**
+ * CSS box-shadow strings. RN consumers can map these to elevation locally.
+ */
+declare const DEFAULT_SHADOWS: SpelycoShadows;
+/**
+ * `xs: 0` is intentional — Unistyles treats it as the always-active breakpoint.
+ */
+declare const DEFAULT_BREAKPOINTS: SpelycoBreakpoints;
+declare const DEFAULT_SYSTEM_BARS_LIGHT: SpelycoSystemBars;
+declare const DEFAULT_SYSTEM_BARS_DARK: SpelycoSystemBars;
+/**
+ * Fully-resolved default theme. Override fields with `<SpelycoProvider theme>`.
+ */
+declare const DEFAULT_THEME: SpelycoTheme;
+
+/**
+ * Merges a partial theme override with the default theme, returning a fully
+ * resolved `SpelycoTheme`. Color tuples and arrays are replaced wholesale;
+ * plain objects (spacing, components, etc.) are merged key-by-key.
+ */
+declare function resolveTheme(override?: SpelycoThemeOverride): SpelycoTheme;
+
+/**
+ * Holds the resolved theme. Platform-specific providers (`SpelycoProvider` in
+ * the RN and web packages) write to this context after deep-merging user
+ * overrides with `DEFAULT_THEME`.
+ */
+declare const SpelycoThemeContext: react.Context<SpelycoTheme>;
+declare function useSpelycoTheme(): SpelycoTheme;
 
-export { theme, useBoolean, useDebounce };
+export { type ColorTuple, type CreateComponentConfig, DEFAULT_BRAND, DEFAULT_BREAKPOINTS, DEFAULT_COLORS, DEFAULT_FONT_SIZES, DEFAULT_GREEN, DEFAULT_LINE_HEIGHTS, DEFAULT_NEUTRAL, DEFAULT_RADIUS, DEFAULT_RED, DEFAULT_SHADOWS, DEFAULT_SPACING, DEFAULT_SYSTEM_BARS_DARK, DEFAULT_SYSTEM_BARS_LIGHT, DEFAULT_THEME, type SpelycoBreakpoints, type SpelycoColorScheme, type SpelycoColors, type SpelycoComponent, type SpelycoComponentOverride, type SpelycoComponents, type SpelycoComputedColorScheme, type SpelycoFontSizes, type SpelycoLineHeights, type SpelycoPrimaryShade, type SpelycoRadius, type SpelycoRadiusKey, type SpelycoShadows, type SpelycoSize, type SpelycoSpacing, type SpelycoSystemBars, type SpelycoTheme, SpelycoThemeContext, type SpelycoThemeOverride, createColorTuple, createComponent, resolveTheme, useBoolean, useDebounce, useProps, useSpelycoTheme };

package/dist/index.js

@@ -1,9 +1,183 @@
 'use strict';
 
 var react = require('react');
-var core = require('@mantine/core');
 
-// src/hooks/useBoolean.ts
+// src/theme/ThemeContext.ts
+
+// src/theme/createColorTuple.ts
+function createColorTuple(shades) {
+  if (shades.length !== 10) {
+    throw new Error(`createColorTuple expects exactly 10 shades, got ${shades.length}`);
+  }
+  return shades;
+}
+
+// src/theme/defaults.ts
+var DEFAULT_BRAND = createColorTuple([
+  "#eef2ff",
+  "#e0e7ff",
+  "#c7d2fe",
+  "#a5b4fc",
+  "#818cf8",
+  "#6366f1",
+  "#4f46e5",
+  "#4338ca",
+  "#3730a3",
+  "#312e81"
+]);
+var DEFAULT_NEUTRAL = createColorTuple([
+  "#fafafa",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#d4d4d8",
+  "#a1a1aa",
+  "#71717a",
+  "#52525b",
+  "#3f3f46",
+  "#27272a",
+  "#18181b"
+]);
+var DEFAULT_RED = createColorTuple([
+  "#fef2f2",
+  "#fee2e2",
+  "#fecaca",
+  "#fca5a5",
+  "#f87171",
+  "#ef4444",
+  "#dc2626",
+  "#b91c1c",
+  "#991b1b",
+  "#7f1d1d"
+]);
+var DEFAULT_GREEN = createColorTuple([
+  "#ecfdf5",
+  "#d1fae5",
+  "#a7f3d0",
+  "#6ee7b7",
+  "#34d399",
+  "#10b981",
+  "#059669",
+  "#047857",
+  "#065f46",
+  "#064e3b"
+]);
+var DEFAULT_COLORS = {
+  brand: DEFAULT_BRAND,
+  neutral: DEFAULT_NEUTRAL,
+  red: DEFAULT_RED,
+  green: DEFAULT_GREEN
+};
+var DEFAULT_SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24
+};
+var DEFAULT_RADIUS = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  pill: 9999
+};
+var DEFAULT_FONT_SIZES = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+var DEFAULT_LINE_HEIGHTS = {
+  xs: 1.4,
+  sm: 1.45,
+  md: 1.55,
+  lg: 1.6,
+  xl: 1.65
+};
+var DEFAULT_SHADOWS = {
+  xs: "0 1px 2px rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03)"
+};
+var DEFAULT_BREAKPOINTS = {
+  xs: 0,
+  sm: 360,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+var DEFAULT_SYSTEM_BARS_LIGHT = {
+  statusBarStyle: "dark",
+  statusBarBackgroundColor: "#ffffff",
+  navigationBarColor: "#ffffff",
+  navigationBarStyle: "dark"
+};
+var DEFAULT_SYSTEM_BARS_DARK = {
+  statusBarStyle: "light",
+  statusBarBackgroundColor: "#0b0b0f",
+  navigationBarColor: "#0b0b0f",
+  navigationBarStyle: "light"
+};
+var DEFAULT_THEME = {
+  colors: DEFAULT_COLORS,
+  primaryColor: "brand",
+  primaryShade: { light: 6, dark: 4 },
+  spacing: DEFAULT_SPACING,
+  radius: DEFAULT_RADIUS,
+  fontSizes: DEFAULT_FONT_SIZES,
+  lineHeights: DEFAULT_LINE_HEIGHTS,
+  shadows: DEFAULT_SHADOWS,
+  breakpoints: DEFAULT_BREAKPOINTS,
+  fontFamily: "System",
+  fontFamilyMono: "Menlo, monospace",
+  defaultRadius: "md",
+  components: {},
+  systemBars: {
+    light: DEFAULT_SYSTEM_BARS_LIGHT,
+    dark: DEFAULT_SYSTEM_BARS_DARK
+  },
+  other: {}
+};
+
+// src/theme/ThemeContext.ts
+var SpelycoThemeContext = react.createContext(DEFAULT_THEME);
+function useSpelycoTheme() {
+  return react.useContext(SpelycoThemeContext);
+}
+
+// src/factory/useProps.ts
+function useProps(componentName, factoryDefaults, props) {
+  const theme = useSpelycoTheme();
+  const themeOverride = theme.components[componentName];
+  const themeDefaults = themeOverride?.defaultProps;
+  const merged = {
+    ...factoryDefaults,
+    ...themeDefaults
+  };
+  const propsRecord = props;
+  for (const key in propsRecord) {
+    if (propsRecord[key] !== void 0) {
+      merged[key] = propsRecord[key];
+    }
+  }
+  return merged;
+}
+
+// src/factory/createComponent.ts
+function createComponent(config) {
+  const { name, defaultProps, render } = config;
+  const Component = ((props) => {
+    const merged = useProps(name, defaultProps, props);
+    return render(merged);
+  });
+  Component.displayName = name;
+  Component.extend = (override) => override;
+  return Component;
+}
 function useBoolean(initialValue = false) {
   const [value, setValue] = react.useState(initialValue);
   const setTrue = react.useCallback(() => setValue(true), []);
@@ -19,31 +193,52 @@ function useDebounce(value, delay = 300) {
   }, [value, delay]);
   return debouncedValue;
 }
-var theme = (primaryColor) => core.createTheme({
-  primaryColor: primaryColor ?? "dark",
-  defaultRadius: "md",
-  components: {
-    Button: core.Button.extend({
-      defaultProps: {
-        variant: "default"
-      }
-    }),
-    ActionIcon: core.ActionIcon.extend({
-      defaultProps: {
-        variant: "transparent"
-      }
-    }),
-    NavLink: core.NavLink.extend({
-      defaultProps: {
-        color: "gray",
-        variant: "light"
-      }
-    })
+
+// src/theme/resolveTheme.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideValue = override[key];
+    if (overrideValue === void 0) continue;
+    const baseValue = base[key];
+    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
   }
-});
+  return result;
+}
+function resolveTheme(override) {
+  if (!override) return DEFAULT_THEME;
+  return deepMerge(
+    DEFAULT_THEME,
+    override
+  );
+}
 
-exports.theme = theme;
+exports.DEFAULT_BRAND = DEFAULT_BRAND;
+exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
+exports.DEFAULT_COLORS = DEFAULT_COLORS;
+exports.DEFAULT_FONT_SIZES = DEFAULT_FONT_SIZES;
+exports.DEFAULT_GREEN = DEFAULT_GREEN;
+exports.DEFAULT_LINE_HEIGHTS = DEFAULT_LINE_HEIGHTS;
+exports.DEFAULT_NEUTRAL = DEFAULT_NEUTRAL;
+exports.DEFAULT_RADIUS = DEFAULT_RADIUS;
+exports.DEFAULT_RED = DEFAULT_RED;
+exports.DEFAULT_SHADOWS = DEFAULT_SHADOWS;
+exports.DEFAULT_SPACING = DEFAULT_SPACING;
+exports.DEFAULT_SYSTEM_BARS_DARK = DEFAULT_SYSTEM_BARS_DARK;
+exports.DEFAULT_SYSTEM_BARS_LIGHT = DEFAULT_SYSTEM_BARS_LIGHT;
+exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.SpelycoThemeContext = SpelycoThemeContext;
+exports.createColorTuple = createColorTuple;
+exports.createComponent = createComponent;
+exports.resolveTheme = resolveTheme;
 exports.useBoolean = useBoolean;
 exports.useDebounce = useDebounce;
+exports.useProps = useProps;
+exports.useSpelycoTheme = useSpelycoTheme;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/theme.ts"],"names":["useState","useCallback","useEffect","createTheme","Button","ActionIcon","NavLink"],"mappings":";;;;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAUC,iBAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAWA,iBAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAASA,iBAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAID,eAAY,KAAK,CAAA;AAE7D,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;ACTO,IAAM,KAAA,GAAQ,CAAC,YAAA,KACpBC,gBAAA,CAAY;AAAA,EACV,cAAc,YAAA,IAAgB,MAAA;AAAA,EAC9B,aAAA,EAAe,IAAA;AAAA,EACf,UAAA,EAAY;AAAA,IACV,MAAA,EAAQC,YAAO,MAAA,CAAO;AAAA,MACpB,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD,CAAA;AAAA,IACD,UAAA,EAAYC,gBAAW,MAAA,CAAO;AAAA,MAC5B,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD,CAAA;AAAA,IACD,OAAA,EAASC,aAAQ,MAAA,CAAO;AAAA,MACtB,YAAA,EAAc;AAAA,QACZ,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,EAAS;AAAA;AACX,KACD;AAAA;AAEL,CAAC","file":"index.js","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","import { ActionIcon, Button, createTheme, type MantineColor, NavLink } from \"@mantine/core\";\n\nexport const theme = (primaryColor?: MantineColor) =>\n  createTheme({\n    primaryColor: primaryColor ?? \"dark\",\n    defaultRadius: \"md\",\n    components: {\n      Button: Button.extend({\n        defaultProps: {\n          variant: \"default\",\n        },\n      }),\n      ActionIcon: ActionIcon.extend({\n        defaultProps: {\n          variant: \"transparent\",\n        },\n      }),\n      NavLink: NavLink.extend({\n        defaultProps: {\n          color: \"gray\",\n          variant: \"light\",\n        },\n      }),\n    },\n  });\n"]}
+{"version":3,"sources":["../src/theme/createColorTuple.ts","../src/theme/defaults.ts","../src/theme/ThemeContext.ts","../src/factory/useProps.ts","../src/factory/createComponent.ts","../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/theme/resolveTheme.ts"],"names":["createContext","useContext","useState","useCallback","useEffect"],"mappings":";;;;;;;AAUO,SAAS,iBAAiB,MAAA,EAAuC;AACtE,EAAA,IAAI,MAAA,CAAO,WAAW,EAAA,EAAI;AACxB,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,gDAAA,EAAmD,MAAA,CAAO,MAAM,CAAA,CAAE,CAAA;AAAA,EACpF;AACA,EAAA,OAAO,MAAA;AACT;;;ACIO,IAAM,gBAA4B,gBAAA,CAAiB;AAAA,EACxD,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,kBAA8B,gBAAA,CAAiB;AAAA,EAC1D,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,cAA0B,gBAAA,CAAiB;AAAA,EACtD,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,gBAA4B,gBAAA,CAAiB;AAAA,EACxD,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAC;AAEM,IAAM,cAAA,GAAgC;AAAA,EAC3C,KAAA,EAAO,aAAA;AAAA,EACP,OAAA,EAAS,eAAA;AAAA,EACT,GAAA,EAAK,WAAA;AAAA,EACL,KAAA,EAAO;AACT;AAEO,IAAM,eAAA,GAAkC;AAAA,EAC7C,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,cAAA,GAAgC;AAAA,EAC3C,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,IAAA,EAAM;AACR;AAEO,IAAM,kBAAA,GAAuC;AAAA,EAClD,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,oBAAA,GAA2C;AAAA,EACtD,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAKO,IAAM,eAAA,GAAkC;AAAA,EAC7C,EAAA,EAAI,+BAAA;AAAA,EACJ,EAAA,EAAI,8DAAA;AAAA,EACJ,EAAA,EAAI,8DAAA;AAAA,EACJ,EAAA,EAAI,gEAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAKO,IAAM,mBAAA,GAA0C;AAAA,EACrD,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,yBAAA,GAA+C;AAAA,EAC1D,cAAA,EAAgB,MAAA;AAAA,EAChB,wBAAA,EAA0B,SAAA;AAAA,EAC1B,kBAAA,EAAoB,SAAA;AAAA,EACpB,kBAAA,EAAoB;AACtB;AAEO,IAAM,wBAAA,GAA8C;AAAA,EACzD,cAAA,EAAgB,OAAA;AAAA,EAChB,wBAAA,EAA0B,SAAA;AAAA,EAC1B,kBAAA,EAAoB,SAAA;AAAA,EACpB,kBAAA,EAAoB;AACtB;AAKO,IAAM,aAAA,GAA8B;AAAA,EACzC,MAAA,EAAQ,cAAA;AAAA,EACR,YAAA,EAAc,OAAA;AAAA,EACd,YAAA,EAAc,EAAE,KAAA,EAAO,CAAA,EAAG,MAAM,CAAA,EAAE;AAAA,EAElC,OAAA,EAAS,eAAA;AAAA,EACT,MAAA,EAAQ,cAAA;AAAA,EACR,SAAA,EAAW,kBAAA;AAAA,EACX,WAAA,EAAa,oBAAA;AAAA,EACb,OAAA,EAAS,eAAA;AAAA,EACT,WAAA,EAAa,mBAAA;AAAA,EAEb,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,kBAAA;AAAA,EAEhB,aAAA,EAAe,IAAA;AAAA,EAEf,YAAY,EAAC;AAAA,EAEb,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,yBAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACR;AAAA,EAEA,OAAO;AACT;;;ACtKO,IAAM,mBAAA,GAAsBA,oBAA4B,aAAa;AAErE,SAAS,eAAA,GAAgC;AAC9C,EAAA,OAAOC,iBAAW,mBAAmB,CAAA;AACvC;;;ACDO,SAAS,QAAA,CACd,aAAA,EACA,eAAA,EACA,KAAA,EACQ;AACR,EAAA,MAAM,QAAQ,eAAA,EAAgB;AAC9B,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,UAAA,CAAW,aAAa,CAAA;AAGpD,EAAA,MAAM,gBAAgB,aAAA,EAAe,YAAA;AAErC,EAAA,MAAM,MAAA,GAAkC;AAAA,IACtC,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,WAAA,GAAc,KAAA;AACpB,EAAA,KAAA,MAAW,OAAO,WAAA,EAAa;AAC7B,IAAA,IAAI,WAAA,CAAY,GAAG,CAAA,KAAM,MAAA,EAAW;AAClC,MAAA,MAAA,CAAO,GAAG,CAAA,GAAI,WAAA,CAAY,GAAG,CAAA;AAAA,IAC/B;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;;;ACRO,SAAS,gBACd,MAAA,EAC0B;AAC1B,EAAA,MAAM,EAAE,IAAA,EAAM,YAAA,EAAc,MAAA,EAAO,GAAI,MAAA;AAEvC,EAAA,MAAM,SAAA,IAAa,CAAC,KAAA,KAAkB;AACpC,IAAA,MAAM,MAAA,GAAS,QAAA,CAAiB,IAAA,EAAM,YAAA,EAAc,KAAK,CAAA;AACzD,IAAA,OAAO,OAAO,MAAM,CAAA;AAAA,EACtB,CAAA,CAAA;AAEA,EAAA,SAAA,CAAU,WAAA,GAAc,IAAA;AACxB,EAAA,SAAA,CAAU,MAAA,GAAS,CAAC,QAAA,KAAa,QAAA;AAEjC,EAAA,OAAO,SAAA;AACT;AChCO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,eAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAUC,iBAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAWA,iBAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAASA,iBAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAID,eAAY,KAAK,CAAA;AAE7D,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACNA,IAAM,aAAA,GAAgB,CAAC,KAAA,KACrB,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,IAAQ,CAAC,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA;AAErE,SAAS,SAAA,CAAU,MAAmB,QAAA,EAAoC;AACxE,EAAA,MAAM,MAAA,GAAsB,EAAE,GAAG,IAAA,EAAK;AACtC,EAAA,KAAA,MAAW,GAAA,IAAO,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA,EAAG;AACvC,IAAA,MAAM,aAAA,GAAgB,SAAS,GAAG,CAAA;AAClC,IAAA,IAAI,kBAAkB,MAAA,EAAW;AAEjC,IAAA,MAAM,SAAA,GAAY,KAAK,GAAG,CAAA;AAC1B,IAAA,IAAI,aAAA,CAAc,SAAS,CAAA,IAAK,aAAA,CAAc,aAAa,CAAA,EAAG;AAC5D,MAAA,MAAA,CAAO,GAAG,CAAA,GAAI,SAAA,CAAU,SAAA,EAAW,aAAa,CAAA;AAAA,IAClD,CAAA,MAAO;AACL,MAAA,MAAA,CAAO,GAAG,CAAA,GAAI,aAAA;AAAA,IAChB;AAAA,EACF;AACA,EAAA,OAAO,MAAA;AACT;AAOO,SAAS,aAAa,QAAA,EAA+C;AAC1E,EAAA,IAAI,CAAC,UAAU,OAAO,aAAA;AACtB,EAAA,OAAO,SAAA;AAAA,IACL,aAAA;AAAA,IACA;AAAA,GACF;AACF","file":"index.js","sourcesContent":["import type { ColorTuple } from \"./types\";\n\n/**\n * Wraps an array of 10 color strings into a typed `ColorTuple`. Throws if the\n * array isn't exactly 10 items, which catches palette typos at boot time.\n *\n * For algorithmic shade generation from a single base color, prefer importing\n * shades from a curated palette (e.g. Tailwind) — this lib intentionally ships\n * without an HSL-based generator to keep the surface area small.\n */\nexport function createColorTuple(shades: readonly string[]): ColorTuple {\n  if (shades.length !== 10) {\n    throw new Error(`createColorTuple expects exactly 10 shades, got ${shades.length}`);\n  }\n  return shades as unknown as ColorTuple;\n}\n","import { createColorTuple } from \"./createColorTuple\";\nimport type {\n  ColorTuple,\n  SpelycoBreakpoints,\n  SpelycoColors,\n  SpelycoFontSizes,\n  SpelycoLineHeights,\n  SpelycoRadius,\n  SpelycoShadows,\n  SpelycoSpacing,\n  SpelycoSystemBars,\n  SpelycoTheme,\n} from \"./types\";\n\n/**\n * Default palettes. Index 0 is the lightest, 9 is the darkest. Sourced from\n * Tailwind's 50–900 ramps (the 950 step is dropped to keep the tuple length\n * at 10).\n */\nexport const DEFAULT_BRAND: ColorTuple = createColorTuple([\n  \"#eef2ff\",\n  \"#e0e7ff\",\n  \"#c7d2fe\",\n  \"#a5b4fc\",\n  \"#818cf8\",\n  \"#6366f1\",\n  \"#4f46e5\",\n  \"#4338ca\",\n  \"#3730a3\",\n  \"#312e81\",\n]);\n\nexport const DEFAULT_NEUTRAL: ColorTuple = createColorTuple([\n  \"#fafafa\",\n  \"#f4f4f5\",\n  \"#e4e4e7\",\n  \"#d4d4d8\",\n  \"#a1a1aa\",\n  \"#71717a\",\n  \"#52525b\",\n  \"#3f3f46\",\n  \"#27272a\",\n  \"#18181b\",\n]);\n\nexport const DEFAULT_RED: ColorTuple = createColorTuple([\n  \"#fef2f2\",\n  \"#fee2e2\",\n  \"#fecaca\",\n  \"#fca5a5\",\n  \"#f87171\",\n  \"#ef4444\",\n  \"#dc2626\",\n  \"#b91c1c\",\n  \"#991b1b\",\n  \"#7f1d1d\",\n]);\n\nexport const DEFAULT_GREEN: ColorTuple = createColorTuple([\n  \"#ecfdf5\",\n  \"#d1fae5\",\n  \"#a7f3d0\",\n  \"#6ee7b7\",\n  \"#34d399\",\n  \"#10b981\",\n  \"#059669\",\n  \"#047857\",\n  \"#065f46\",\n  \"#064e3b\",\n]);\n\nexport const DEFAULT_COLORS: SpelycoColors = {\n  brand: DEFAULT_BRAND,\n  neutral: DEFAULT_NEUTRAL,\n  red: DEFAULT_RED,\n  green: DEFAULT_GREEN,\n};\n\nexport const DEFAULT_SPACING: SpelycoSpacing = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n};\n\nexport const DEFAULT_RADIUS: SpelycoRadius = {\n  xs: 2,\n  sm: 4,\n  md: 8,\n  lg: 12,\n  xl: 16,\n  pill: 9999,\n};\n\nexport const DEFAULT_FONT_SIZES: SpelycoFontSizes = {\n  xs: 12,\n  sm: 14,\n  md: 16,\n  lg: 18,\n  xl: 20,\n};\n\nexport const DEFAULT_LINE_HEIGHTS: SpelycoLineHeights = {\n  xs: 1.4,\n  sm: 1.45,\n  md: 1.55,\n  lg: 1.6,\n  xl: 1.65,\n};\n\n/**\n * CSS box-shadow strings. RN consumers can map these to elevation locally.\n */\nexport const DEFAULT_SHADOWS: SpelycoShadows = {\n  xs: \"0 1px 2px rgba(0, 0, 0, 0.05)\",\n  sm: \"0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)\",\n  md: \"0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)\",\n  lg: \"0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)\",\n  xl: \"0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03)\",\n};\n\n/**\n * `xs: 0` is intentional — Unistyles treats it as the always-active breakpoint.\n */\nexport const DEFAULT_BREAKPOINTS: SpelycoBreakpoints = {\n  xs: 0,\n  sm: 360,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n};\n\nexport const DEFAULT_SYSTEM_BARS_LIGHT: SpelycoSystemBars = {\n  statusBarStyle: \"dark\",\n  statusBarBackgroundColor: \"#ffffff\",\n  navigationBarColor: \"#ffffff\",\n  navigationBarStyle: \"dark\",\n};\n\nexport const DEFAULT_SYSTEM_BARS_DARK: SpelycoSystemBars = {\n  statusBarStyle: \"light\",\n  statusBarBackgroundColor: \"#0b0b0f\",\n  navigationBarColor: \"#0b0b0f\",\n  navigationBarStyle: \"light\",\n};\n\n/**\n * Fully-resolved default theme. Override fields with `<SpelycoProvider theme>`.\n */\nexport const DEFAULT_THEME: SpelycoTheme = {\n  colors: DEFAULT_COLORS,\n  primaryColor: \"brand\",\n  primaryShade: { light: 6, dark: 4 },\n\n  spacing: DEFAULT_SPACING,\n  radius: DEFAULT_RADIUS,\n  fontSizes: DEFAULT_FONT_SIZES,\n  lineHeights: DEFAULT_LINE_HEIGHTS,\n  shadows: DEFAULT_SHADOWS,\n  breakpoints: DEFAULT_BREAKPOINTS,\n\n  fontFamily: \"System\",\n  fontFamilyMono: \"Menlo, monospace\",\n\n  defaultRadius: \"md\",\n\n  components: {},\n\n  systemBars: {\n    light: DEFAULT_SYSTEM_BARS_LIGHT,\n    dark: DEFAULT_SYSTEM_BARS_DARK,\n  },\n\n  other: {},\n};\n","import { createContext, useContext } from \"react\";\nimport { DEFAULT_THEME } from \"./defaults\";\nimport type { SpelycoTheme } from \"./types\";\n\n/**\n * Holds the resolved theme. Platform-specific providers (`SpelycoProvider` in\n * the RN and web packages) write to this context after deep-merging user\n * overrides with `DEFAULT_THEME`.\n */\nexport const SpelycoThemeContext = createContext<SpelycoTheme>(DEFAULT_THEME);\n\nexport function useSpelycoTheme(): SpelycoTheme {\n  return useContext(SpelycoThemeContext);\n}\n","import { useSpelycoTheme } from \"../theme/ThemeContext\";\nimport type { SpelycoComponentOverride } from \"../theme/types\";\n\n/**\n * Merges three sources of props in precedence order (later wins):\n *   1. factory defaults — declared inside `createComponent({ defaultProps })`\n *   2. theme defaults  — declared via `theme.components[name].defaultProps`\n *   3. user props      — passed at the call site\n *\n * `undefined` values in user props are skipped so partially-controlled inputs\n * fall back to defaults instead of forcing `undefined`.\n */\nexport function useProps<TProps extends object>(\n  componentName: string,\n  factoryDefaults: Partial<TProps> | undefined,\n  props: TProps\n): TProps {\n  const theme = useSpelycoTheme();\n  const themeOverride = theme.components[componentName] as\n    | SpelycoComponentOverride<TProps>\n    | undefined;\n  const themeDefaults = themeOverride?.defaultProps;\n\n  const merged: Record<string, unknown> = {\n    ...factoryDefaults,\n    ...themeDefaults,\n  };\n\n  const propsRecord = props as Record<string, unknown>;\n  for (const key in propsRecord) {\n    if (propsRecord[key] !== undefined) {\n      merged[key] = propsRecord[key];\n    }\n  }\n\n  return merged as TProps;\n}\n","import type { ReactElement } from \"react\";\nimport type { SpelycoComponentOverride } from \"../theme/types\";\nimport { useProps } from \"./useProps\";\n\nexport interface CreateComponentConfig<TProps extends object> {\n  /** Used as the key for `theme.components[name]` overrides. */\n  name: string;\n  defaultProps?: Partial<TProps>;\n  render: (props: TProps) => ReactElement | null;\n}\n\nexport interface SpelycoComponent<TProps extends object> {\n  (props: TProps): ReactElement | null;\n  displayName: string;\n  /**\n   * Helper for building a `theme.components[name]` override object — purely\n   * sugar, returns its argument with the right shape.\n   */\n  extend: (override: SpelycoComponentOverride<TProps>) => SpelycoComponentOverride<TProps>;\n}\n\n/**\n * Wraps a render function into a Spelyco component that:\n *   - reads `theme.components[name].defaultProps` for runtime overrides\n *   - merges factory defaults → theme defaults → user props (later wins)\n *   - exposes `.extend()` so consumers can produce override objects\n *   - sets `displayName` to the provided `name`\n */\nexport function createComponent<TProps extends object>(\n  config: CreateComponentConfig<TProps>\n): SpelycoComponent<TProps> {\n  const { name, defaultProps, render } = config;\n\n  const Component = ((props: TProps) => {\n    const merged = useProps<TProps>(name, defaultProps, props);\n    return render(merged);\n  }) as SpelycoComponent<TProps>;\n\n  Component.displayName = name;\n  Component.extend = (override) => override;\n\n  return Component;\n}\n","import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","import { DEFAULT_THEME } from \"./defaults\";\nimport type { SpelycoTheme, SpelycoThemeOverride } from \"./types\";\n\ntype PlainObject = Record<string, unknown>;\n\nconst isPlainObject = (value: unknown): value is PlainObject =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\nfunction deepMerge(base: PlainObject, override: PlainObject): PlainObject {\n  const result: PlainObject = { ...base };\n  for (const key of Object.keys(override)) {\n    const overrideValue = override[key];\n    if (overrideValue === undefined) continue;\n\n    const baseValue = base[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n  return result;\n}\n\n/**\n * Merges a partial theme override with the default theme, returning a fully\n * resolved `SpelycoTheme`. Color tuples and arrays are replaced wholesale;\n * plain objects (spacing, components, etc.) are merged key-by-key.\n */\nexport function resolveTheme(override?: SpelycoThemeOverride): SpelycoTheme {\n  if (!override) return DEFAULT_THEME;\n  return deepMerge(\n    DEFAULT_THEME as unknown as PlainObject,\n    override as unknown as PlainObject\n  ) as unknown as SpelycoTheme;\n}\n"]}

package/dist/index.mjs

@@ -1,7 +1,181 @@
-import { useState, useCallback, useEffect } from 'react';
-import { createTheme, NavLink, ActionIcon, Button } from '@mantine/core';
+import { createContext, useContext, useState, useCallback, useEffect } from 'react';
 
-// src/hooks/useBoolean.ts
+// src/theme/ThemeContext.ts
+
+// src/theme/createColorTuple.ts
+function createColorTuple(shades) {
+  if (shades.length !== 10) {
+    throw new Error(`createColorTuple expects exactly 10 shades, got ${shades.length}`);
+  }
+  return shades;
+}
+
+// src/theme/defaults.ts
+var DEFAULT_BRAND = createColorTuple([
+  "#eef2ff",
+  "#e0e7ff",
+  "#c7d2fe",
+  "#a5b4fc",
+  "#818cf8",
+  "#6366f1",
+  "#4f46e5",
+  "#4338ca",
+  "#3730a3",
+  "#312e81"
+]);
+var DEFAULT_NEUTRAL = createColorTuple([
+  "#fafafa",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#d4d4d8",
+  "#a1a1aa",
+  "#71717a",
+  "#52525b",
+  "#3f3f46",
+  "#27272a",
+  "#18181b"
+]);
+var DEFAULT_RED = createColorTuple([
+  "#fef2f2",
+  "#fee2e2",
+  "#fecaca",
+  "#fca5a5",
+  "#f87171",
+  "#ef4444",
+  "#dc2626",
+  "#b91c1c",
+  "#991b1b",
+  "#7f1d1d"
+]);
+var DEFAULT_GREEN = createColorTuple([
+  "#ecfdf5",
+  "#d1fae5",
+  "#a7f3d0",
+  "#6ee7b7",
+  "#34d399",
+  "#10b981",
+  "#059669",
+  "#047857",
+  "#065f46",
+  "#064e3b"
+]);
+var DEFAULT_COLORS = {
+  brand: DEFAULT_BRAND,
+  neutral: DEFAULT_NEUTRAL,
+  red: DEFAULT_RED,
+  green: DEFAULT_GREEN
+};
+var DEFAULT_SPACING = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24
+};
+var DEFAULT_RADIUS = {
+  xs: 2,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  pill: 9999
+};
+var DEFAULT_FONT_SIZES = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20
+};
+var DEFAULT_LINE_HEIGHTS = {
+  xs: 1.4,
+  sm: 1.45,
+  md: 1.55,
+  lg: 1.6,
+  xl: 1.65
+};
+var DEFAULT_SHADOWS = {
+  xs: "0 1px 2px rgba(0, 0, 0, 0.05)",
+  sm: "0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)",
+  xl: "0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03)"
+};
+var DEFAULT_BREAKPOINTS = {
+  xs: 0,
+  sm: 360,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+var DEFAULT_SYSTEM_BARS_LIGHT = {
+  statusBarStyle: "dark",
+  statusBarBackgroundColor: "#ffffff",
+  navigationBarColor: "#ffffff",
+  navigationBarStyle: "dark"
+};
+var DEFAULT_SYSTEM_BARS_DARK = {
+  statusBarStyle: "light",
+  statusBarBackgroundColor: "#0b0b0f",
+  navigationBarColor: "#0b0b0f",
+  navigationBarStyle: "light"
+};
+var DEFAULT_THEME = {
+  colors: DEFAULT_COLORS,
+  primaryColor: "brand",
+  primaryShade: { light: 6, dark: 4 },
+  spacing: DEFAULT_SPACING,
+  radius: DEFAULT_RADIUS,
+  fontSizes: DEFAULT_FONT_SIZES,
+  lineHeights: DEFAULT_LINE_HEIGHTS,
+  shadows: DEFAULT_SHADOWS,
+  breakpoints: DEFAULT_BREAKPOINTS,
+  fontFamily: "System",
+  fontFamilyMono: "Menlo, monospace",
+  defaultRadius: "md",
+  components: {},
+  systemBars: {
+    light: DEFAULT_SYSTEM_BARS_LIGHT,
+    dark: DEFAULT_SYSTEM_BARS_DARK
+  },
+  other: {}
+};
+
+// src/theme/ThemeContext.ts
+var SpelycoThemeContext = createContext(DEFAULT_THEME);
+function useSpelycoTheme() {
+  return useContext(SpelycoThemeContext);
+}
+
+// src/factory/useProps.ts
+function useProps(componentName, factoryDefaults, props) {
+  const theme = useSpelycoTheme();
+  const themeOverride = theme.components[componentName];
+  const themeDefaults = themeOverride?.defaultProps;
+  const merged = {
+    ...factoryDefaults,
+    ...themeDefaults
+  };
+  const propsRecord = props;
+  for (const key in propsRecord) {
+    if (propsRecord[key] !== void 0) {
+      merged[key] = propsRecord[key];
+    }
+  }
+  return merged;
+}
+
+// src/factory/createComponent.ts
+function createComponent(config) {
+  const { name, defaultProps, render } = config;
+  const Component = ((props) => {
+    const merged = useProps(name, defaultProps, props);
+    return render(merged);
+  });
+  Component.displayName = name;
+  Component.extend = (override) => override;
+  return Component;
+}
 function useBoolean(initialValue = false) {
   const [value, setValue] = useState(initialValue);
   const setTrue = useCallback(() => setValue(true), []);
@@ -17,29 +191,31 @@ function useDebounce(value, delay = 300) {
   }, [value, delay]);
   return debouncedValue;
 }
-var theme = (primaryColor) => createTheme({
-  primaryColor: primaryColor ?? "dark",
-  defaultRadius: "md",
-  components: {
-    Button: Button.extend({
-      defaultProps: {
-        variant: "default"
-      }
-    }),
-    ActionIcon: ActionIcon.extend({
-      defaultProps: {
-        variant: "transparent"
-      }
-    }),
-    NavLink: NavLink.extend({
-      defaultProps: {
-        color: "gray",
-        variant: "light"
-      }
-    })
+
+// src/theme/resolveTheme.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const overrideValue = override[key];
+    if (overrideValue === void 0) continue;
+    const baseValue = base[key];
+    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
   }
-});
+  return result;
+}
+function resolveTheme(override) {
+  if (!override) return DEFAULT_THEME;
+  return deepMerge(
+    DEFAULT_THEME,
+    override
+  );
+}
 
-export { theme, useBoolean, useDebounce };
+export { DEFAULT_BRAND, DEFAULT_BREAKPOINTS, DEFAULT_COLORS, DEFAULT_FONT_SIZES, DEFAULT_GREEN, DEFAULT_LINE_HEIGHTS, DEFAULT_NEUTRAL, DEFAULT_RADIUS, DEFAULT_RED, DEFAULT_SHADOWS, DEFAULT_SPACING, DEFAULT_SYSTEM_BARS_DARK, DEFAULT_SYSTEM_BARS_LIGHT, DEFAULT_THEME, SpelycoThemeContext, createColorTuple, createComponent, resolveTheme, useBoolean, useDebounce, useProps, useSpelycoTheme };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/theme.ts"],"names":["useState"],"mappings":";;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAU,WAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAW,WAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,SAAY,KAAK,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;ACTO,IAAM,KAAA,GAAQ,CAAC,YAAA,KACpB,WAAA,CAAY;AAAA,EACV,cAAc,YAAA,IAAgB,MAAA;AAAA,EAC9B,aAAA,EAAe,IAAA;AAAA,EACf,UAAA,EAAY;AAAA,IACV,MAAA,EAAQ,OAAO,MAAA,CAAO;AAAA,MACpB,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD,CAAA;AAAA,IACD,UAAA,EAAY,WAAW,MAAA,CAAO;AAAA,MAC5B,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD,CAAA;AAAA,IACD,OAAA,EAAS,QAAQ,MAAA,CAAO;AAAA,MACtB,YAAA,EAAc;AAAA,QACZ,KAAA,EAAO,MAAA;AAAA,QACP,OAAA,EAAS;AAAA;AACX,KACD;AAAA;AAEL,CAAC","file":"index.mjs","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","import { ActionIcon, Button, createTheme, type MantineColor, NavLink } from \"@mantine/core\";\n\nexport const theme = (primaryColor?: MantineColor) =>\n  createTheme({\n    primaryColor: primaryColor ?? \"dark\",\n    defaultRadius: \"md\",\n    components: {\n      Button: Button.extend({\n        defaultProps: {\n          variant: \"default\",\n        },\n      }),\n      ActionIcon: ActionIcon.extend({\n        defaultProps: {\n          variant: \"transparent\",\n        },\n      }),\n      NavLink: NavLink.extend({\n        defaultProps: {\n          color: \"gray\",\n          variant: \"light\",\n        },\n      }),\n    },\n  });\n"]}
+{"version":3,"sources":["../src/theme/createColorTuple.ts","../src/theme/defaults.ts","../src/theme/ThemeContext.ts","../src/factory/useProps.ts","../src/factory/createComponent.ts","../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/theme/resolveTheme.ts"],"names":["useState"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { ColorTuple } from \"./types\";\n\n/**\n * Wraps an array of 10 color strings into a typed `ColorTuple`. Throws if the\n * array isn't exactly 10 items, which catches palette typos at boot time.\n *\n * For algorithmic shade generation from a single base color, prefer importing\n * shades from a curated palette (e.g. Tailwind) — this lib intentionally ships\n * without an HSL-based generator to keep the surface area small.\n */\nexport function createColorTuple(shades: readonly string[]): ColorTuple {\n  if (shades.length !== 10) {\n    throw new Error(`createColorTuple expects exactly 10 shades, got ${shades.length}`);\n  }\n  return shades as unknown as ColorTuple;\n}\n","import { createColorTuple } from \"./createColorTuple\";\nimport type {\n  ColorTuple,\n  SpelycoBreakpoints,\n  SpelycoColors,\n  SpelycoFontSizes,\n  SpelycoLineHeights,\n  SpelycoRadius,\n  SpelycoShadows,\n  SpelycoSpacing,\n  SpelycoSystemBars,\n  SpelycoTheme,\n} from \"./types\";\n\n/**\n * Default palettes. Index 0 is the lightest, 9 is the darkest. Sourced from\n * Tailwind's 50–900 ramps (the 950 step is dropped to keep the tuple length\n * at 10).\n */\nexport const DEFAULT_BRAND: ColorTuple = createColorTuple([\n  \"#eef2ff\",\n  \"#e0e7ff\",\n  \"#c7d2fe\",\n  \"#a5b4fc\",\n  \"#818cf8\",\n  \"#6366f1\",\n  \"#4f46e5\",\n  \"#4338ca\",\n  \"#3730a3\",\n  \"#312e81\",\n]);\n\nexport const DEFAULT_NEUTRAL: ColorTuple = createColorTuple([\n  \"#fafafa\",\n  \"#f4f4f5\",\n  \"#e4e4e7\",\n  \"#d4d4d8\",\n  \"#a1a1aa\",\n  \"#71717a\",\n  \"#52525b\",\n  \"#3f3f46\",\n  \"#27272a\",\n  \"#18181b\",\n]);\n\nexport const DEFAULT_RED: ColorTuple = createColorTuple([\n  \"#fef2f2\",\n  \"#fee2e2\",\n  \"#fecaca\",\n  \"#fca5a5\",\n  \"#f87171\",\n  \"#ef4444\",\n  \"#dc2626\",\n  \"#b91c1c\",\n  \"#991b1b\",\n  \"#7f1d1d\",\n]);\n\nexport const DEFAULT_GREEN: ColorTuple = createColorTuple([\n  \"#ecfdf5\",\n  \"#d1fae5\",\n  \"#a7f3d0\",\n  \"#6ee7b7\",\n  \"#34d399\",\n  \"#10b981\",\n  \"#059669\",\n  \"#047857\",\n  \"#065f46\",\n  \"#064e3b\",\n]);\n\nexport const DEFAULT_COLORS: SpelycoColors = {\n  brand: DEFAULT_BRAND,\n  neutral: DEFAULT_NEUTRAL,\n  red: DEFAULT_RED,\n  green: DEFAULT_GREEN,\n};\n\nexport const DEFAULT_SPACING: SpelycoSpacing = {\n  xs: 4,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  xl: 24,\n};\n\nexport const DEFAULT_RADIUS: SpelycoRadius = {\n  xs: 2,\n  sm: 4,\n  md: 8,\n  lg: 12,\n  xl: 16,\n  pill: 9999,\n};\n\nexport const DEFAULT_FONT_SIZES: SpelycoFontSizes = {\n  xs: 12,\n  sm: 14,\n  md: 16,\n  lg: 18,\n  xl: 20,\n};\n\nexport const DEFAULT_LINE_HEIGHTS: SpelycoLineHeights = {\n  xs: 1.4,\n  sm: 1.45,\n  md: 1.55,\n  lg: 1.6,\n  xl: 1.65,\n};\n\n/**\n * CSS box-shadow strings. RN consumers can map these to elevation locally.\n */\nexport const DEFAULT_SHADOWS: SpelycoShadows = {\n  xs: \"0 1px 2px rgba(0, 0, 0, 0.05)\",\n  sm: \"0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04)\",\n  md: \"0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04)\",\n  lg: \"0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04)\",\n  xl: \"0 20px 25px rgba(0, 0, 0, 0.08), 0 10px 10px rgba(0, 0, 0, 0.03)\",\n};\n\n/**\n * `xs: 0` is intentional — Unistyles treats it as the always-active breakpoint.\n */\nexport const DEFAULT_BREAKPOINTS: SpelycoBreakpoints = {\n  xs: 0,\n  sm: 360,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n};\n\nexport const DEFAULT_SYSTEM_BARS_LIGHT: SpelycoSystemBars = {\n  statusBarStyle: \"dark\",\n  statusBarBackgroundColor: \"#ffffff\",\n  navigationBarColor: \"#ffffff\",\n  navigationBarStyle: \"dark\",\n};\n\nexport const DEFAULT_SYSTEM_BARS_DARK: SpelycoSystemBars = {\n  statusBarStyle: \"light\",\n  statusBarBackgroundColor: \"#0b0b0f\",\n  navigationBarColor: \"#0b0b0f\",\n  navigationBarStyle: \"light\",\n};\n\n/**\n * Fully-resolved default theme. Override fields with `<SpelycoProvider theme>`.\n */\nexport const DEFAULT_THEME: SpelycoTheme = {\n  colors: DEFAULT_COLORS,\n  primaryColor: \"brand\",\n  primaryShade: { light: 6, dark: 4 },\n\n  spacing: DEFAULT_SPACING,\n  radius: DEFAULT_RADIUS,\n  fontSizes: DEFAULT_FONT_SIZES,\n  lineHeights: DEFAULT_LINE_HEIGHTS,\n  shadows: DEFAULT_SHADOWS,\n  breakpoints: DEFAULT_BREAKPOINTS,\n\n  fontFamily: \"System\",\n  fontFamilyMono: \"Menlo, monospace\",\n\n  defaultRadius: \"md\",\n\n  components: {},\n\n  systemBars: {\n    light: DEFAULT_SYSTEM_BARS_LIGHT,\n    dark: DEFAULT_SYSTEM_BARS_DARK,\n  },\n\n  other: {},\n};\n","import { createContext, useContext } from \"react\";\nimport { DEFAULT_THEME } from \"./defaults\";\nimport type { SpelycoTheme } from \"./types\";\n\n/**\n * Holds the resolved theme. Platform-specific providers (`SpelycoProvider` in\n * the RN and web packages) write to this context after deep-merging user\n * overrides with `DEFAULT_THEME`.\n */\nexport const SpelycoThemeContext = createContext<SpelycoTheme>(DEFAULT_THEME);\n\nexport function useSpelycoTheme(): SpelycoTheme {\n  return useContext(SpelycoThemeContext);\n}\n","import { useSpelycoTheme } from \"../theme/ThemeContext\";\nimport type { SpelycoComponentOverride } from \"../theme/types\";\n\n/**\n * Merges three sources of props in precedence order (later wins):\n *   1. factory defaults — declared inside `createComponent({ defaultProps })`\n *   2. theme defaults  — declared via `theme.components[name].defaultProps`\n *   3. user props      — passed at the call site\n *\n * `undefined` values in user props are skipped so partially-controlled inputs\n * fall back to defaults instead of forcing `undefined`.\n */\nexport function useProps<TProps extends object>(\n  componentName: string,\n  factoryDefaults: Partial<TProps> | undefined,\n  props: TProps\n): TProps {\n  const theme = useSpelycoTheme();\n  const themeOverride = theme.components[componentName] as\n    | SpelycoComponentOverride<TProps>\n    | undefined;\n  const themeDefaults = themeOverride?.defaultProps;\n\n  const merged: Record<string, unknown> = {\n    ...factoryDefaults,\n    ...themeDefaults,\n  };\n\n  const propsRecord = props as Record<string, unknown>;\n  for (const key in propsRecord) {\n    if (propsRecord[key] !== undefined) {\n      merged[key] = propsRecord[key];\n    }\n  }\n\n  return merged as TProps;\n}\n","import type { ReactElement } from \"react\";\nimport type { SpelycoComponentOverride } from \"../theme/types\";\nimport { useProps } from \"./useProps\";\n\nexport interface CreateComponentConfig<TProps extends object> {\n  /** Used as the key for `theme.components[name]` overrides. */\n  name: string;\n  defaultProps?: Partial<TProps>;\n  render: (props: TProps) => ReactElement | null;\n}\n\nexport interface SpelycoComponent<TProps extends object> {\n  (props: TProps): ReactElement | null;\n  displayName: string;\n  /**\n   * Helper for building a `theme.components[name]` override object — purely\n   * sugar, returns its argument with the right shape.\n   */\n  extend: (override: SpelycoComponentOverride<TProps>) => SpelycoComponentOverride<TProps>;\n}\n\n/**\n * Wraps a render function into a Spelyco component that:\n *   - reads `theme.components[name].defaultProps` for runtime overrides\n *   - merges factory defaults → theme defaults → user props (later wins)\n *   - exposes `.extend()` so consumers can produce override objects\n *   - sets `displayName` to the provided `name`\n */\nexport function createComponent<TProps extends object>(\n  config: CreateComponentConfig<TProps>\n): SpelycoComponent<TProps> {\n  const { name, defaultProps, render } = config;\n\n  const Component = ((props: TProps) => {\n    const merged = useProps<TProps>(name, defaultProps, props);\n    return render(merged);\n  }) as SpelycoComponent<TProps>;\n\n  Component.displayName = name;\n  Component.extend = (override) => override;\n\n  return Component;\n}\n","import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n  value: boolean;\n  setTrue: () => void;\n  setFalse: () => void;\n  toggle: () => void;\n  setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n  const [value, setValue] = useState(initialValue);\n\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n  const toggle = useCallback(() => setValue((v) => !v), []);\n\n  return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => setDebouncedValue(value), delay);\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n}\n","import { DEFAULT_THEME } from \"./defaults\";\nimport type { SpelycoTheme, SpelycoThemeOverride } from \"./types\";\n\ntype PlainObject = Record<string, unknown>;\n\nconst isPlainObject = (value: unknown): value is PlainObject =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\nfunction deepMerge(base: PlainObject, override: PlainObject): PlainObject {\n  const result: PlainObject = { ...base };\n  for (const key of Object.keys(override)) {\n    const overrideValue = override[key];\n    if (overrideValue === undefined) continue;\n\n    const baseValue = base[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n  return result;\n}\n\n/**\n * Merges a partial theme override with the default theme, returning a fully\n * resolved `SpelycoTheme`. Color tuples and arrays are replaced wholesale;\n * plain objects (spacing, components, etc.) are merged key-by-key.\n */\nexport function resolveTheme(override?: SpelycoThemeOverride): SpelycoTheme {\n  if (!override) return DEFAULT_THEME;\n  return deepMerge(\n    DEFAULT_THEME as unknown as PlainObject,\n    override as unknown as PlainObject\n  ) as unknown as SpelycoTheme;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spelyco/react-lib",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Shared React hooks and utilities for Spelyco UI packages",
   "keywords": [
     "react",
@@ -32,11 +32,9 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
-    "@mantine/core": ">=9",
     "react": ">=18"
   },
   "devDependencies": {
-    "@mantine/core": "^9.0.1",
     "@spelyco/tsconfig": "*",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.2.14",