native-variants 0.1.63 → 0.1.69

package/dist/lib/cn.js

@@ -1,21 +1,151 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cn = cn;
+exports.cnView = cnView;
+exports.cnText = cnText;
+exports.cnImage = cnImage;
+/**
+ * Flattens a potentially nested style into an array of style objects.
+ * Handles arrays, nested arrays, and single style objects.
+ *
+ * @template T - The style type
+ * @param style - The style to flatten
+ * @returns An array of flattened style objects
+ */
 function flattenStyle(style) {
     if (!style)
         return [];
     if (Array.isArray(style)) {
-        return style.flat
-            ? style.flat().filter(Boolean)
-            : style.filter(Boolean);
+        const result = [];
+        for (let i = 0; i < style.length; i++) {
+            const item = style[i];
+            if (item) {
+                if (Array.isArray(item)) {
+                    // Handle nested arrays
+                    const nested = flattenStyle(item);
+                    for (let j = 0; j < nested.length; j++) {
+                        result.push(nested[j]);
+                    }
+                }
+                else {
+                    result.push(item);
+                }
+            }
+        }
+        return result;
     }
-    // @ts-ignore
     return [style];
 }
+/**
+ * Merges multiple style objects into a single style object.
+ * Optimized for performance with early returns and efficient iteration.
+ *
+ * @template T - The output style type
+ * @param styles - Array of styles to merge
+ * @returns A single merged style object
+ */
+function mergeStyles(styles) {
+    if (styles.length === 0)
+        return {};
+    if (styles.length === 1 && styles[0] && typeof styles[0] === "object") {
+        return styles[0];
+    }
+    const result = {};
+    for (let i = 0; i < styles.length; i++) {
+        const style = styles[i];
+        if (!style || typeof style !== "object")
+            continue;
+        const keys = Object.keys(style);
+        for (let j = 0; j < keys.length; j++) {
+            const key = keys[j];
+            const value = style[key];
+            if (value !== undefined) {
+                result[key] = value;
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Combines multiple style objects into a single merged style.
+ * Supports React Native StyleProp, animated styles from react-native-reanimated,
+ * and regular style objects.
+ *
+ * Features:
+ * - Handles nested style arrays
+ * - Compatible with react-native-reanimated animated styles
+ * - Filters out null/undefined values
+ * - Returns a properly typed style object
+ *
+ * @param styles - Variable number of style inputs to merge
+ * @returns A single merged style object
+ *
+ * @example
+ * ```ts
+ * // Basic usage
+ * const style = cn(styles.root, { padding: 16 });
+ *
+ * // With animated styles (react-native-reanimated)
+ * const animatedStyle = useAnimatedStyle(() => ({
+ *   transform: [{ translateX: translateX.value }],
+ * }));
+ * const style = cn(styles.wrapper, animatedStyle);
+ *
+ * // Multiple styles
+ * const style = cn(
+ *   baseStyles,
+ *   conditionalStyles,
+ *   { opacity: isVisible ? 1 : 0 }
+ * );
+ * ```
+ */
 function cn(...styles) {
-    return styles
-        .flatMap(flattenStyle)
-        .filter((s) => !!s)
-        .reduce((acc, style) => ({ ...acc, ...style }), {});
+    const flattened = [];
+    for (let i = 0; i < styles.length; i++) {
+        const style = styles[i];
+        if (!style)
+            continue;
+        if (Array.isArray(style)) {
+            const nested = flattenStyle(style);
+            for (let j = 0; j < nested.length; j++) {
+                if (nested[j])
+                    flattened.push(nested[j]);
+            }
+        }
+        else if (typeof style === "object") {
+            flattened.push(style);
+        }
+    }
+    return mergeStyles(flattened);
+}
+/**
+ * Type-safe version of cn specifically for ViewStyle.
+ * Use this when you need explicit ViewStyle typing.
+ *
+ * @param styles - Variable number of style inputs to merge
+ * @returns A merged ViewStyle object
+ */
+function cnView(...styles) {
+    return cn(...styles);
+}
+/**
+ * Type-safe version of cn specifically for TextStyle.
+ * Use this when you need explicit TextStyle typing.
+ *
+ * @param styles - Variable number of style inputs to merge
+ * @returns A merged TextStyle object
+ */
+function cnText(...styles) {
+    return cn(...styles);
+}
+/**
+ * Type-safe version of cn specifically for ImageStyle.
+ * Use this when you need explicit ImageStyle typing.
+ *
+ * @param styles - Variable number of style inputs to merge
+ * @returns A merged ImageStyle object
+ */
+function cnImage(...styles) {
+    return cn(...styles);
 }
 //# sourceMappingURL=cn.js.map

package/dist/lib/cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":";;AAaA,gBAKC;AAhBD,SAAS,YAAY,CAAI,KAAmB;IAC1C,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IACtB,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,IAAI;YACf,CAAC,CAAE,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,OAAO,CAAS;YACvC,CAAC,CAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAS,CAAC;IACrC,CAAC;IACD,aAAa;IACb,OAAO,CAAC,KAAK,CAAC,CAAC;AACjB,CAAC;AAED,SAAgB,EAAE,CAAmB,GAAG,MAAsB;IAC5D,OAAO,MAAM;SACV,OAAO,CAAC,YAAY,CAAC;SACrB,MAAM,CAAC,CAAC,CAAC,EAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B,MAAM,CAAI,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC,EAAE,EAAO,CAAC,CAAC;AAChE,CAAC"}
+{"version":3,"file":"cn.js","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"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"}

package/dist/lib/create-nva.d.ts

@@ -1,11 +1,214 @@
-import type { Base, Config, DefaultVariants, DefineConfig, Theme, Variants } from "../types.js";
+import type { Base, ColorSchemeConfig, Config, ConfigWithUtils, DefaultVariants, DefaultVariantsWithUtils, UtilsConfig, Variants, VariantsWithUtils } from "../types.js";
+import { tailwindColors, tailwindSpacing, tailwindFontSizes, tailwindRadii, tailwindShadows, tailwindZIndex, tailwindOpacity, tailwindLineHeights, tailwindFontWeights, tailwindLetterSpacing, tailwindBorderWidths, tailwindDurations } from "../tokens/default-tokens.js";
+/**
+ * Creates a styled component function with variant support.
+ * Provides caching for optimal performance in React Native.
+ *
+ * @template S - Union type of slot names
+ * @template V - Variants configuration type
+ *
+ * @param config - The styled component configuration
+ * @returns A function that computes styles based on variant props
+ *
+ * @example
+ * ```ts
+ * const buttonStyles = styled({
+ *   slots: ["root", "text"],
+ *   base: {
+ *     root: { padding: 16 },
+ *     text: { fontSize: 14 }
+ *   },
+ *   variants: {
+ *     size: {
+ *       small: { root: { padding: 8 } },
+ *       large: { root: { padding: 24 } }
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     size: "small"
+ *   }
+ * });
+ *
+ * // Usage
+ * const styles = buttonStyles({ size: "large" });
+ * ```
+ */
 export declare function styled<const S extends string, V extends Variants<S>>(config: Config<S, V>): (props?: DefaultVariants<S, V>) => Base<S>;
-export declare function createNVA<Tokens extends Theme>({ theme, }?: {
-    theme?: Tokens;
+/**
+ * Validates that two record types have the same keys.
+ * Returns true type if valid, error message type if not.
+ */
+type ValidateColorKeys<D extends Record<string, string>, K extends Record<string, string>> = Exclude<keyof K, keyof D> extends never ? Exclude<keyof D, keyof K> extends never ? true : {
+    _error: "⚠️ 'dark' is missing colors that exist in 'default'";
+    missingInDark: Exclude<keyof D, keyof K>;
+} : {
+    _error: "⚠️ 'default' is missing colors that exist in 'dark'";
+    missingInDefault: Exclude<keyof K, keyof D>;
+};
+/**
+ * Theme configuration input for createNVA.
+ * Colors must have matching keys in default and dark.
+ */
+interface CreateNVATheme<D extends Record<string, string>, K extends Record<string, string>> {
+    colors: {
+        /** Light theme colors (default) */
+        default: D;
+        /** Dark theme colors - must have exactly the same keys as default */
+        dark: ValidateColorKeys<D, K> extends true ? K : ValidateColorKeys<D, K>;
+    };
+}
+/**
+ * Creates a themed NVA (Native Variants API) instance.
+ * Provides a styled function with access to theme tokens and custom utils.
+ *
+ * Colors support light/dark mode via `default` and `dark` keys.
+ * Both must have the same color keys for type safety - TypeScript will
+ * error if dark is missing any keys from default or vice versa.
+ *
+ * Utils are style shortcuts that expand to multiple CSS properties.
+ * They work like Stitches utils - you define them once and use them
+ * throughout your styles.
+ *
+ * Tailwind CSS tokens (spacing, fontSizes, radii, etc.) are included by default.
+ *
+ * @template D - Default colors type (inferred from colors.default)
+ * @template K - Dark colors type (must have same keys as D)
+ * @template U - Utils configuration type
+ *
+ * @param options - Configuration options
+ * @param options.theme - Theme configuration with colors (default/dark)
+ * @param options.utils - Custom style utilities (like Stitches)
+ * @returns An object containing the flattened theme, styled function, and utils
+ *
+ * @example
+ * ```ts
+ * const { styled, theme, colorScheme, utils } = createNVA({
+ *   theme: {
+ *     colors: {
+ *       default: {
+ *         primary: "#007AFF",
+ *         background: "#FFFFFF",
+ *       },
+ *       dark: {
+ *         primary: "#0A84FF",
+ *         background: "#000000",
+ *       },
+ *     },
+ *   },
+ *   utils: {
+ *     // Margin shortcuts
+ *     mx: (value) => ({ marginLeft: value, marginRight: value }),
+ *     my: (value) => ({ marginTop: value, marginBottom: value }),
+ *     // Padding shortcuts
+ *     px: (value) => ({ paddingLeft: value, paddingRight: value }),
+ *     py: (value) => ({ paddingTop: value, paddingBottom: value }),
+ *     // Size shortcut
+ *     size: (value) => ({ width: value, height: value }),
+ *   },
+ * });
+ *
+ * // Use utils in your styles!
+ * const buttonStyles = styled((ctx, t) => ctx({
+ *   slots: ["root"],
+ *   base: {
+ *     root: {
+ *       backgroundColor: t.colors.primary,
+ *       px: 16,  // → paddingLeft: 16, paddingRight: 16
+ *       py: 12,  // → paddingTop: 12, paddingBottom: 12
+ *     },
+ *   },
+ * }));
+ * ```
+ */
+export declare function createNVA<D extends Record<string, string>, K extends Record<string, string> = D, U extends UtilsConfig = {}>(options?: {
+    theme?: CreateNVATheme<D, K>;
+    utils?: U;
 }): {
-    theme: Tokens;
+    /**
+     * The resolved theme object with flattened colors.
+     * Colors use the default (light) scheme.
+     * Use ThemeProvider to access dark mode colors.
+     */
+    theme: {
+        /**
+         * Colors: User-defined semantic colors merged with Tailwind palette.
+         * User colors override Tailwind colors if keys conflict.
+         */
+        colors: typeof tailwindColors & D;
+        /** Spacing scale (0, px, 0.5, 1, 2, 4, 8, etc.) */
+        spacing: typeof tailwindSpacing;
+        /** Font size scale (xs, sm, base, lg, xl, 2xl, etc.) */
+        fontSizes: typeof tailwindFontSizes;
+        /** Border radius scale (none, sm, md, lg, xl, full, etc.) */
+        radii: typeof tailwindRadii;
+        /** Shadow definitions for iOS and Android */
+        shadows: typeof tailwindShadows;
+        /** Z-index scale (0, 10, 20, 30, 40, 50) */
+        zIndex: typeof tailwindZIndex;
+        /** Opacity scale (0, 5, 10, ..., 95, 100) */
+        opacity: typeof tailwindOpacity;
+        /** Line height scale (3, 4, ..., 10, none, tight, normal, etc.) */
+        lineHeights: typeof tailwindLineHeights;
+        /** Font weight scale (thin, light, normal, medium, bold, etc.) */
+        fontWeights: typeof tailwindFontWeights;
+        /** Letter spacing scale (tighter, tight, normal, wide, wider, widest) */
+        letterSpacing: typeof tailwindLetterSpacing;
+        /** Border width scale (0, DEFAULT, 2, 4, 8) */
+        borderWidths: typeof tailwindBorderWidths;
+        /** Animation duration scale (0, 75, 100, 150, 200, 300, 500, 700, 1000) */
+        durations: typeof tailwindDurations;
+    };
+    /**
+     * The color scheme configuration with both default and dark colors.
+     * Pass this to ThemeProvider for dark mode support.
+     */
+    colorScheme: ColorSchemeConfig<D> | undefined;
+    /**
+     * Creates styled components with variant support and theme access.
+     * Utils defined in createNVA are automatically expanded in styles.
+     */
     styled: {
-        <S extends string, V extends Variants<S>>(config: Config<S, V>): (props?: DefaultVariants<S, V>) => Base<S>;
-        <const S extends string, V extends Variants<S>>(configFactory: (defineConfig: DefineConfig, theme: Tokens) => Config<S, V>): (props?: DefaultVariants<S, V>) => Base<S>;
+        <const S extends string, const V extends VariantsWithUtils<S, U>>(config: ConfigWithUtils<S, V, U>): (props?: DefaultVariantsWithUtils<S, V, U>) => Base<S>;
+        <const S extends string, const V extends VariantsWithUtils<S, U>>(configFactory: (defineConfig: <const S_1 extends string, const V_1 extends VariantsWithUtils<S_1, U>>(config: ConfigWithUtils<S_1, V_1, U>) => ConfigWithUtils<S_1, V_1, U>, theme: {
+            /**
+             * Colors: User-defined semantic colors merged with Tailwind palette.
+             * User colors override Tailwind colors if keys conflict.
+             */
+            colors: typeof tailwindColors & D;
+            /** Spacing scale (0, px, 0.5, 1, 2, 4, 8, etc.) */
+            spacing: typeof tailwindSpacing;
+            /** Font size scale (xs, sm, base, lg, xl, 2xl, etc.) */
+            fontSizes: typeof tailwindFontSizes;
+            /** Border radius scale (none, sm, md, lg, xl, full, etc.) */
+            radii: typeof tailwindRadii;
+            /** Shadow definitions for iOS and Android */
+            shadows: typeof tailwindShadows;
+            /** Z-index scale (0, 10, 20, 30, 40, 50) */
+            zIndex: typeof tailwindZIndex;
+            /** Opacity scale (0, 5, 10, ..., 95, 100) */
+            opacity: typeof tailwindOpacity;
+            /** Line height scale (3, 4, ..., 10, none, tight, normal, etc.) */
+            lineHeights: typeof tailwindLineHeights;
+            /** Font weight scale (thin, light, normal, medium, bold, etc.) */
+            fontWeights: typeof tailwindFontWeights;
+            /** Letter spacing scale (tighter, tight, normal, wide, wider, widest) */
+            letterSpacing: typeof tailwindLetterSpacing;
+            /** Border width scale (0, DEFAULT, 2, 4, 8) */
+            borderWidths: typeof tailwindBorderWidths;
+            /** Animation duration scale (0, 75, 100, 150, 200, 300, 500, 700, 1000) */
+            durations: typeof tailwindDurations;
+        }) => ConfigWithUtils<S, V, U>): (props?: DefaultVariantsWithUtils<S, V, U>) => Base<S>;
     };
+    /**
+     * The utils configuration for use outside of styled.
+     * Useful for applying utils to inline styles.
+     */
+    utils: U;
 };
+/**
+ * Clears all style caches. Useful for testing or hot reloading scenarios.
+ * Note: This only clears the primitive cache. WeakMap entries are
+ * automatically garbage collected when their keys are no longer referenced.
+ */
+export declare function clearStyleCache(): void;
+export {};