native-variants 0.1.63 → 0.1.69

package/dist/lib/media-query.d.ts

@@ -1,2 +1,84 @@
-export declare const wq: (widthPercent: number | string) => number;
-export declare const hq: (heightPercent: number | string) => number;
+/**
+ * Width Query - Calculates a width value based on screen percentage.
+ * Returns a pixel-rounded value proportional to screen width.
+ *
+ * @param widthPercent - Percentage of screen width (0-100) as number or string
+ * @returns Pixel value rounded to nearest pixel ratio
+ *
+ * @example
+ * ```ts
+ * // Get 50% of screen width
+ * const halfWidth = wq(50);
+ *
+ * // Using string percentage
+ * const quarterWidth = wq("25");
+ *
+ * // In styles
+ * const styles = {
+ *   container: {
+ *     width: wq(80), // 80% of screen width
+ *     marginHorizontal: wq(10), // 10% margin on each side
+ *   }
+ * };
+ * ```
+ */
+export declare function wq(widthPercent: number | string): number;
+/**
+ * Height Query - Calculates a height value based on screen percentage.
+ * Returns a pixel-rounded value proportional to screen height.
+ *
+ * @param heightPercent - Percentage of screen height (0-100) as number or string
+ * @returns Pixel value rounded to nearest pixel ratio
+ *
+ * @example
+ * ```ts
+ * // Get 50% of screen height
+ * const halfHeight = hq(50);
+ *
+ * // Using string percentage
+ * const quarterHeight = hq("25");
+ *
+ * // In styles
+ * const styles = {
+ *   hero: {
+ *     height: hq(40), // 40% of screen height
+ *     minHeight: hq(30), // Minimum 30% of screen height
+ *   }
+ * };
+ * ```
+ */
+export declare function hq(heightPercent: number | string): number;
+/**
+ * Gets the current screen dimensions.
+ * Useful for calculations that need both width and height.
+ *
+ * @returns Object containing screen width and height in pixels
+ *
+ * @example
+ * ```ts
+ * const { width, height } = getScreenDimensions();
+ * const isLandscape = width > height;
+ * ```
+ */
+export declare function getScreenDimensions(): {
+    width: number;
+    height: number;
+};
+/**
+ * Calculates a responsive font size based on screen width.
+ * Ensures text scales appropriately across different device sizes.
+ *
+ * @param baseFontSize - The base font size in pixels
+ * @param scaleFactor - Optional scale factor (default: 0.5, meaning 50% responsive)
+ * @returns Scaled font size rounded to nearest pixel
+ *
+ * @example
+ * ```ts
+ * // Responsive font that scales with screen size
+ * const titleSize = responsiveFontSize(24);
+ *
+ * // Less responsive (only 30% scaling)
+ * const subtitleSize = responsiveFontSize(18, 0.3);
+ * ```
+ */
+export declare function responsiveFontSize(baseFontSize: number, scaleFactor?: number): number;

package/dist/lib/media-query.js

@@ -1,19 +1,113 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hq = exports.wq = void 0;
+exports.wq = wq;
+exports.hq = hq;
+exports.getScreenDimensions = getScreenDimensions;
+exports.responsiveFontSize = responsiveFontSize;
 const react_native_1 = require("react-native");
-let screenWidth = react_native_1.Dimensions.get("window").width;
-let screenHeight = react_native_1.Dimensions.get("window").height;
-const wq = (widthPercent) => {
+/**
+ * Current screen dimensions.
+ * These values are captured at module load time.
+ * For responsive updates, consider using useWindowDimensions hook instead.
+ */
+const screenWidth = react_native_1.Dimensions.get("window").width;
+const screenHeight = react_native_1.Dimensions.get("window").height;
+/**
+ * Width Query - Calculates a width value based on screen percentage.
+ * Returns a pixel-rounded value proportional to screen width.
+ *
+ * @param widthPercent - Percentage of screen width (0-100) as number or string
+ * @returns Pixel value rounded to nearest pixel ratio
+ *
+ * @example
+ * ```ts
+ * // Get 50% of screen width
+ * const halfWidth = wq(50);
+ *
+ * // Using string percentage
+ * const quarterWidth = wq("25");
+ *
+ * // In styles
+ * const styles = {
+ *   container: {
+ *     width: wq(80), // 80% of screen width
+ *     marginHorizontal: wq(10), // 10% margin on each side
+ *   }
+ * };
+ * ```
+ */
+function wq(widthPercent) {
     const elemWidth = typeof widthPercent === "number" ? widthPercent : parseFloat(widthPercent);
     return react_native_1.PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
-};
-exports.wq = wq;
-const hq = (heightPercent) => {
+}
+/**
+ * Height Query - Calculates a height value based on screen percentage.
+ * Returns a pixel-rounded value proportional to screen height.
+ *
+ * @param heightPercent - Percentage of screen height (0-100) as number or string
+ * @returns Pixel value rounded to nearest pixel ratio
+ *
+ * @example
+ * ```ts
+ * // Get 50% of screen height
+ * const halfHeight = hq(50);
+ *
+ * // Using string percentage
+ * const quarterHeight = hq("25");
+ *
+ * // In styles
+ * const styles = {
+ *   hero: {
+ *     height: hq(40), // 40% of screen height
+ *     minHeight: hq(30), // Minimum 30% of screen height
+ *   }
+ * };
+ * ```
+ */
+function hq(heightPercent) {
     const elemHeight = typeof heightPercent === "number"
         ? heightPercent
         : parseFloat(heightPercent);
     return react_native_1.PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
-};
-exports.hq = hq;
+}
+/**
+ * Gets the current screen dimensions.
+ * Useful for calculations that need both width and height.
+ *
+ * @returns Object containing screen width and height in pixels
+ *
+ * @example
+ * ```ts
+ * const { width, height } = getScreenDimensions();
+ * const isLandscape = width > height;
+ * ```
+ */
+function getScreenDimensions() {
+    return {
+        width: screenWidth,
+        height: screenHeight,
+    };
+}
+/**
+ * Calculates a responsive font size based on screen width.
+ * Ensures text scales appropriately across different device sizes.
+ *
+ * @param baseFontSize - The base font size in pixels
+ * @param scaleFactor - Optional scale factor (default: 0.5, meaning 50% responsive)
+ * @returns Scaled font size rounded to nearest pixel
+ *
+ * @example
+ * ```ts
+ * // Responsive font that scales with screen size
+ * const titleSize = responsiveFontSize(24);
+ *
+ * // Less responsive (only 30% scaling)
+ * const subtitleSize = responsiveFontSize(18, 0.3);
+ * ```
+ */
+function responsiveFontSize(baseFontSize, scaleFactor = 0.5) {
+    const scale = screenWidth / 375; // Base scale on iPhone 8/SE width
+    const newSize = baseFontSize + (baseFontSize * (scale - 1) * scaleFactor);
+    return react_native_1.PixelRatio.roundToNearestPixel(newSize);
+}
 //# sourceMappingURL=media-query.js.map

package/dist/lib/media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-query.js","sourceRoot":"","sources":["../../src/lib/media-query.ts"],"names":[],"mappings":";;;AAAA,+CAAsD;AAEtD,IAAI,WAAW,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;AACjD,IAAI,YAAY,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;AAE5C,MAAM,EAAE,GAAG,CAAC,YAA6B,EAAU,EAAE;IAC1D,MAAM,SAAS,GACb,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE7E,OAAO,yBAAU,CAAC,mBAAmB,CAAC,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;AACzE,CAAC,CAAC;AALW,QAAA,EAAE,MAKb;AAEK,MAAM,EAAE,GAAG,CAAC,aAA8B,EAAU,EAAE;IAC3D,MAAM,UAAU,GACd,OAAO,aAAa,KAAK,QAAQ;QAC/B,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEhC,OAAO,yBAAU,CAAC,mBAAmB,CAAC,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC;AAC3E,CAAC,CAAC;AAPW,QAAA,EAAE,MAOb"}
+{"version":3,"file":"media-query.js","sourceRoot":"","sources":["../../src/lib/media-query.ts"],"names":[],"mappings":";;AAkCA,gBAKC;AA0BD,gBAOC;AAcD,kDAKC;AAmBD,gDAOC;AArHD,+CAAsD;AAEtD;;;;GAIG;AACH,MAAM,WAAW,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;AACnD,MAAM,YAAY,GAAG,yBAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,EAAE,CAAC,YAA6B;IAC9C,MAAM,SAAS,GACb,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE7E,OAAO,yBAAU,CAAC,mBAAmB,CAAC,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;AACzE,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,SAAgB,EAAE,CAAC,aAA8B;IAC/C,MAAM,UAAU,GACd,OAAO,aAAa,KAAK,QAAQ;QAC/B,CAAC,CAAC,aAAa;QACf,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEhC,OAAO,yBAAU,CAAC,mBAAmB,CAAC,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC;AAC3E,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAgB,mBAAmB;IACjC,OAAO;QACL,KAAK,EAAE,WAAW;QAClB,MAAM,EAAE,YAAY;KACrB,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,SAAgB,kBAAkB,CAChC,YAAoB,EACpB,cAAsB,GAAG;IAEzB,MAAM,KAAK,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,kCAAkC;IACnE,MAAM,OAAO,GAAG,YAAY,GAAG,CAAC,YAAY,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC;IAC1E,OAAO,yBAAU,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACjD,CAAC"}

package/dist/provider/create-provider.d.ts

@@ -1,7 +1,47 @@
-import { type PropsWithChildren } from "react";
-export declare const createCTX: <T>() => {
-    CTXProvider: ({ children, props, }: PropsWithChildren & {
+import React from "react";
+/**
+ * Creates a type-safe context with provider and hook.
+ * Useful for creating component-level contexts for sharing props.
+ *
+ * @template T - The type of props to share via context
+ * @returns Object containing CTXProvider component and useCTX hook
+ *
+ * @example
+ * ```ts
+ * // Define props type
+ * type ButtonContextProps = {
+ *   size: "sm" | "md" | "lg";
+ *   variant: "primary" | "secondary";
+ *   disabled?: boolean;
+ * };
+ *
+ * // Create context
+ * const { CTXProvider: ButtonProvider, useCTX: useButtonContext } =
+ *   createCTX<ButtonContextProps>();
+ *
+ * // Use in parent component
+ * function ButtonGroup({ children }) {
+ *   return (
+ *     <ButtonProvider props={{ size: "md", variant: "primary" }}>
+ *       {children}
+ *     </ButtonProvider>
+ *   );
+ * }
+ *
+ * // Use in child component
+ * function ButtonText() {
+ *   const context = useButtonContext();
+ *   // context?.size, context?.variant, etc.
+ * }
+ * ```
+ */
+export declare function createCTX<T>(): {
+    /** Provider component that makes context available to children */
+    CTXProvider: ({ children, props, }: React.PropsWithChildren<{
         props: T;
-    }) => import("react").JSX.Element;
+    }>) => React.JSX.Element;
+    /** Hook to optionally consume context (returns undefined if outside provider) */
     useCTX: () => T | undefined;
+    /** Hook that requires context (throws if outside provider) */
+    useRequiredCTX: (componentName?: string) => T;
 };

package/dist/provider/create-provider.js

@@ -1 +1 @@
-import{createContext,useContext,useMemo}from"react";export const createCTX=()=>{const Context=createContext(undefined);const CTXProvider=({children,props})=>{const value=useMemo(()=>({props}),[props]);return React.createElement(Context.Provider,{value:value},children)};const useCTX=()=>{const context=useContext(Context);if(!context){return undefined}return context.props};return{CTXProvider,useCTX}};
+import React,{createContext,useContext,useMemo}from"react";export function createCTX(){const Context=createContext(undefined);function CTXProvider({children,props}){const value=useMemo(()=>({props}),[props]);return React.createElement(Context.Provider,{value:value},children)}function useCTX(){const context=useContext(Context);if(!context){return undefined}return context.props}function useRequiredCTX(componentName="Component"){const context=useContext(Context);if(!context){throw new Error(`${componentName} must be used within a CTXProvider. `+`Make sure to wrap your component tree with the appropriate provider.`)}return context.props}return{CTXProvider,useCTX,useRequiredCTX}}

package/dist/provider/create-provider.jsx

@@ -1,24 +1,125 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCTX = void 0;
-const react_1 = require("react");
-const createCTX = () => {
+exports.createCTX = createCTX;
+const react_1 = __importStar(require("react"));
+/**
+ * Creates a type-safe context with provider and hook.
+ * Useful for creating component-level contexts for sharing props.
+ *
+ * @template T - The type of props to share via context
+ * @returns Object containing CTXProvider component and useCTX hook
+ *
+ * @example
+ * ```ts
+ * // Define props type
+ * type ButtonContextProps = {
+ *   size: "sm" | "md" | "lg";
+ *   variant: "primary" | "secondary";
+ *   disabled?: boolean;
+ * };
+ *
+ * // Create context
+ * const { CTXProvider: ButtonProvider, useCTX: useButtonContext } =
+ *   createCTX<ButtonContextProps>();
+ *
+ * // Use in parent component
+ * function ButtonGroup({ children }) {
+ *   return (
+ *     <ButtonProvider props={{ size: "md", variant: "primary" }}>
+ *       {children}
+ *     </ButtonProvider>
+ *   );
+ * }
+ *
+ * // Use in child component
+ * function ButtonText() {
+ *   const context = useButtonContext();
+ *   // context?.size, context?.variant, etc.
+ * }
+ * ```
+ */
+function createCTX() {
     const Context = (0, react_1.createContext)(undefined);
-    const CTXProvider = ({ children, props, }) => {
+    /**
+     * Context Provider component.
+     * Wraps children and provides the props value to all descendants.
+     *
+     * @param children - React children nodes
+     * @param props - The props object to provide to context consumers
+     */
+    function CTXProvider({ children, props, }) {
         const value = (0, react_1.useMemo)(() => ({ props }), [props]);
         return <Context.Provider value={value}>{children}</Context.Provider>;
-    };
-    const useCTX = () => {
+    }
+    /**
+     * Hook to consume the context value.
+     * Returns undefined if used outside of a CTXProvider.
+     *
+     * @returns The context props or undefined if outside provider
+     */
+    function useCTX() {
         const context = (0, react_1.useContext)(Context);
         if (!context) {
             return undefined;
         }
         return context.props;
-    };
+    }
+    /**
+     * Hook that requires context to be present.
+     * Throws an error if used outside of a CTXProvider.
+     *
+     * @param componentName - Name of the component using the hook (for error messages)
+     * @returns The context props (guaranteed to be defined)
+     * @throws Error if used outside of CTXProvider
+     */
+    function useRequiredCTX(componentName = "Component") {
+        const context = (0, react_1.useContext)(Context);
+        if (!context) {
+            throw new Error(`${componentName} must be used within a CTXProvider. ` +
+                `Make sure to wrap your component tree with the appropriate provider.`);
+        }
+        return context.props;
+    }
     return {
+        /** Provider component that makes context available to children */
         CTXProvider,
+        /** Hook to optionally consume context (returns undefined if outside provider) */
         useCTX,
+        /** Hook that requires context (throws if outside provider) */
+        useRequiredCTX,
     };
-};
-exports.createCTX = createCTX;
+}
 //# sourceMappingURL=create-provider.jsx.map

package/dist/provider/create-provider.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"create-provider.jsx","sourceRoot":"","sources":["../../src/provider/create-provider.tsx"],"names":[],"mappings":";;;AAAA,iCAAmF;AAM5E,MAAM,SAAS,GAAG,GAAO,EAAE;IAChC,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAgC,SAAS,CAAC,CAAC;IAExE,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,GAGN,EAAE,EAAE;QACH,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAElD,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,GAAkB,EAAE;QACjC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,OAAO,CAAC,KAAU,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO;QACL,WAAW;QACX,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,SAAS,aA4BpB"}
+{"version":3,"file":"create-provider.jsx","sourceRoot":"","sources":["../../src/provider/create-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,8BAgEC;AAhHD,+CAAkE;AAYlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,SAAgB,SAAS;IACvB,MAAM,OAAO,GAAG,IAAA,qBAAa,EAAgC,SAAS,CAAC,CAAC;IAExE;;;;;;OAMG;IACH,SAAS,WAAW,CAAC,EACnB,QAAQ,EACR,KAAK,GACiC;QACtC,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAElD,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IACvE,CAAC;IAED;;;;;OAKG;IACH,SAAS,MAAM;QACb,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,OAAO,CAAC,KAAK,CAAC;IACvB,CAAC;IAED;;;;;;;OAOG;IACH,SAAS,cAAc,CAAC,gBAAwB,WAAW;QACzD,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,MAAM,IAAI,KAAK,CACb,GAAG,aAAa,sCAAsC;gBACtD,sEAAsE,CACvE,CAAC;QACJ,CAAC;QAED,OAAO,OAAO,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,OAAO;QACL,kEAAkE;QAClE,WAAW;QACX,iFAAiF;QACjF,MAAM;QACN,8DAA8D;QAC9D,cAAc;KACf,CAAC;AACJ,CAAC"}

package/dist/provider/theme-provider.d.ts

@@ -0,0 +1,266 @@
+import React from "react";
+import type { ColorSchemeConfig } from "../types.js";
+/**
+ * Color scheme options for the theme.
+ */
+export type ColorScheme = "light" | "dark";
+/**
+ * Theme mode options.
+ * - "light": Always use light theme
+ * - "dark": Always use dark theme
+ * - "system": Follow system preference
+ */
+export type ThemeMode = ColorScheme | "system";
+/**
+ * Theme context value interface.
+ *
+ * @template T - The colors type
+ */
+export interface ThemeContextValue<T extends Record<string, string>> {
+    /** Current color scheme (resolved from mode) */
+    colorScheme: ColorScheme;
+    /** Current theme mode setting */
+    mode: ThemeMode;
+    /** Whether dark mode is active */
+    isDark: boolean;
+    /** Current theme colors based on color scheme */
+    colors: T;
+    /** Set theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Toggle between light and dark (ignores system) */
+    toggle: () => void;
+}
+/**
+ * Props for ThemeProvider component.
+ *
+ * @template T - The colors type
+ */
+export interface ThemeProviderProps<T extends Record<string, string>> {
+    /** Child components */
+    children: React.ReactNode;
+    /**
+     * Color scheme configuration with default (light) and dark colors.
+     * Get this from createNVA's colorScheme output.
+     *
+     * @example
+     * ```tsx
+     * const { colorScheme } = createNVA({
+     *   theme: {
+     *     colors: {
+     *       default: { primary: "#000" },
+     *       dark: { primary: "#fff" },
+     *     },
+     *   },
+     * });
+     *
+     * <ThemeProvider colors={colorScheme}>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     */
+    colors: ColorSchemeConfig<T>;
+    /** Initial theme mode (default: "system") */
+    defaultMode?: ThemeMode;
+    /** Custom storage get function for persisting theme preference */
+    onGetStorage?: () => Promise<ThemeMode | null>;
+    /** Custom storage set function for persisting theme preference */
+    onSetStorage?: (mode: ThemeMode) => Promise<void>;
+}
+/**
+ * ThemeProvider component.
+ * Provides theme context with dark/light mode support.
+ *
+ * **Important:** This provider requires colors to be passed explicitly.
+ * Get colors from createNVA's colorScheme output.
+ *
+ * @template T - The colors type
+ *
+ * @example
+ * ```tsx
+ * // 1. Create your theme with createNVA
+ * const { theme, colorScheme, styled } = createNVA({
+ *   theme: {
+ *     colors: {
+ *       default: {
+ *         background: "#ffffff",
+ *         foreground: "#000000",
+ *         primary: "#3b82f6",
+ *       },
+ *       dark: {
+ *         background: "#0a0a0a",
+ *         foreground: "#ffffff",
+ *         primary: "#60a5fa",
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * // 2. Wrap your app with ThemeProvider
+ * function App() {
+ *   return (
+ *     <ThemeProvider colors={colorScheme}>
+ *       <MyApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // 3. Use colors in components
+ * function MyComponent() {
+ *   const { colors, isDark, toggle } = useTheme();
+ *
+ *   return (
+ *     <View style={{ backgroundColor: colors.background }}>
+ *       <Text style={{ color: colors.foreground }}>
+ *         {isDark ? "Dark Mode" : "Light Mode"}
+ *       </Text>
+ *       <Button onPress={toggle} title="Toggle" />
+ *     </View>
+ *   );
+ * }
+ *
+ * // With AsyncStorage persistence
+ * import AsyncStorage from "@react-native-async-storage/async-storage";
+ *
+ * <ThemeProvider
+ *   colors={colorScheme}
+ *   defaultMode="system"
+ *   onGetStorage={async () => {
+ *     const mode = await AsyncStorage.getItem("theme-mode");
+ *     return mode as ThemeMode | null;
+ *   }}
+ *   onSetStorage={async (mode) => {
+ *     await AsyncStorage.setItem("theme-mode", mode);
+ *   }}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export declare function ThemeProvider<T extends Record<string, string>>({ children, colors, defaultMode, onGetStorage, onSetStorage, }: ThemeProviderProps<T>): React.JSX.Element | null;
+/**
+ * Hook to access theme context.
+ * Must be used within a ThemeProvider.
+ *
+ * @template T - The colors type
+ * @returns Theme context value with colors and controls
+ * @throws Error if used outside ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { colors, isDark, toggle, setMode } = useTheme<MyColors>();
+ *
+ *   return (
+ *     <View style={{ backgroundColor: colors.background }}>
+ *       <Text style={{ color: colors.foreground }}>
+ *         Current mode: {isDark ? "Dark" : "Light"}
+ *       </Text>
+ *       <Button onPress={toggle} title="Toggle Theme" />
+ *       <Button onPress={() => setMode("system")} title="Use System" />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTheme<T extends Record<string, string>>(): ThemeContextValue<T>;
+/**
+ * Hook to access only theme colors.
+ * Convenience wrapper around useTheme that returns just the colors.
+ *
+ * @template T - The colors type
+ * @returns Current theme colors
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const colors = useThemeColors<MyColors>();
+ *
+ *   return (
+ *     <View style={{ backgroundColor: colors.background }}>
+ *       <Text style={{ color: colors.primary }}>Hello</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function useThemeColors<T extends Record<string, string>>(): T;
+/**
+ * Hook to check if dark mode is active.
+ * Convenience wrapper for quick dark mode checks.
+ *
+ * @returns Boolean indicating if dark mode is active
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isDark = useIsDark();
+ *
+ *   return (
+ *     <Image source={isDark ? darkLogo : lightLogo} />
+ *   );
+ * }
+ * ```
+ */
+export declare function useIsDark(): boolean;
+/**
+ * Hook to get the current color scheme.
+ * Returns "light" or "dark" based on current theme.
+ *
+ * @returns Current color scheme
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const colorScheme = useColorScheme();
+ *
+ *   return (
+ *     <StatusBar barStyle={colorScheme === "dark" ? "light-content" : "dark-content"} />
+ *   );
+ * }
+ * ```
+ */
+export declare function useColorScheme(): ColorScheme;
+/**
+ * Creates a themed style helper that automatically uses current theme colors.
+ * Useful for creating styled components with theme access.
+ *
+ * @template T - The colors type
+ * @template S - The styles record type
+ * @param styleFactory - Function that receives colors and returns styles
+ * @returns Hook that returns computed styles
+ *
+ * @example
+ * ```tsx
+ * type MyColors = { card: string; border: string; cardForeground: string };
+ *
+ * const useCardStyles = createThemedStyles<MyColors, {
+ *   container: ViewStyle;
+ *   title: TextStyle;
+ * }>((colors) => ({
+ *   container: {
+ *     backgroundColor: colors.card,
+ *     borderColor: colors.border,
+ *     borderWidth: 1,
+ *     borderRadius: 8,
+ *     padding: 16,
+ *   },
+ *   title: {
+ *     color: colors.cardForeground,
+ *     fontSize: 18,
+ *     fontWeight: "600",
+ *   },
+ * }));
+ *
+ * function Card({ title, children }) {
+ *   const styles = useCardStyles();
+ *
+ *   return (
+ *     <View style={styles.container}>
+ *       <Text style={styles.title}>{title}</Text>
+ *       {children}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function createThemedStyles<T extends Record<string, string>, S extends Record<string, object>>(styleFactory: (colors: T) => S): () => S;

package/dist/provider/theme-provider.js

@@ -0,0 +1 @@
+import React,{createContext,useCallback,useContext,useEffect,useMemo,useState}from"react";import{Appearance}from"react-native";const ThemeContext=createContext(undefined);function resolveColorScheme(mode,systemScheme){if(mode==="system"){return systemScheme==="dark"?"dark":"light"}return mode}export function ThemeProvider({children,colors,defaultMode="system",onGetStorage,onSetStorage}){const[mode,setModeState]=useState(defaultMode);const[systemScheme,setSystemScheme]=useState(Appearance.getColorScheme());const[isHydrated,setIsHydrated]=useState(!onGetStorage);useEffect(()=>{if(onGetStorage){onGetStorage().then(storedMode=>{if(storedMode){setModeState(storedMode)}setIsHydrated(true)})}},[onGetStorage]);useEffect(()=>{const subscription=Appearance.addChangeListener(({colorScheme})=>{setSystemScheme(colorScheme)});return()=>subscription.remove()},[]);const setMode=useCallback(newMode=>{setModeState(newMode);if(onSetStorage){onSetStorage(newMode)}},[onSetStorage]);const toggle=useCallback(()=>{const currentScheme=resolveColorScheme(mode,systemScheme);const newMode=currentScheme==="light"?"dark":"light";setMode(newMode)},[mode,systemScheme,setMode]);const value=useMemo(()=>{const colorScheme=resolveColorScheme(mode,systemScheme);return{colorScheme,mode,isDark:colorScheme==="dark",colors:colorScheme==="dark"?colors.dark:colors.default,setMode,toggle}},[mode,systemScheme,colors,setMode,toggle]);if(!isHydrated){return null}return React.createElement(ThemeContext.Provider,{value:value},children)}export function useTheme(){const context=useContext(ThemeContext);if(!context){throw new Error("useTheme must be used within a ThemeProvider. "+"Make sure to wrap your app with <ThemeProvider colors={colorScheme}>.")}return context}export function useThemeColors(){const{colors}=useTheme();return colors}export function useIsDark(){const{isDark}=useTheme();return isDark}export function useColorScheme(){const{colorScheme}=useTheme();return colorScheme}export function createThemedStyles(styleFactory){return function useThemedStyles(){const{colors}=useTheme();return useMemo(()=>styleFactory(colors),[colors])}}