native-variants 0.1.63 → 0.1.69

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Matheus Figueiredo
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Matheus Figueiredo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,126 +1,126 @@
-
-<h1 align='center'>native-variants</h1>
-
-Simplify and streamline style management in React 
-Native with TypeScript support
-
- 
-<h4>Installation</h4>
-
-
-Install `native-variants` using npm or yarn:
-
-
-```bash
-npm install native-variants
-//or
-yarn add native-variants
-```
-
-<h4>Overview</h4>
-
-`native-variants` provides a powerful utility to define, organize, and apply component styling for React Native. It supports multiple slots, variants, default settings, and compound variants, enabling a clean and reusable way to manage styles.
-
-<h3>Getting Started</h3>
-
-Here’s a quick example of how to use `native-variants` to style a button component.
-
-
-<h4>Defining Variants</h4>
-
-```tsx
-import { nv, type VariantProps } from "native-variants";
-
-const buttonVariants = nv({
-  slots: ["root", "text"], // Define slots for styling
-  base: {
-    root: { paddingHorizontal: 16, paddingVertical: 12 }, // Base styles for root
-    text: { color: "white", textAlign: "center" }, // Base styles for text
-  },
-  variants: {
-    variant: {
-      solid: {
-        root: { backgroundColor: "#ff0006" },
-        text: { color: "white" },
-      },
-      ghost: {
-        root: { backgroundColor: "transparent" },
-        text: { color: "#ff0006" },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "solid", // Default variant configuration
-  },
-  compoundVariants: [
-    {
-      variant: "ghost",
-      css: {
-        root: { borderWidth: 1, borderColor: "#fff006" },
-      },
-    },
-  ],
-});
-```
-
-<h4>Using the Variants</h4>
-
-Create a styled `Button` component:
-
-```tsx
-import React from "react";
-import { Text, TouchableOpacity } from "react-native";
-
-export interface ButtonProps
-  extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
-    VariantProps<typeof buttonVariants> {}
-
-export const Button = React.forwardRef<
-  React.ComponentRef<typeof TouchableOpacity>,
-  ButtonProps
->(({ children, variant, ...props }, ref) => {
-  const { root, text } = buttonVariants({ variant });
-
-  return (
-    <TouchableOpacity {...props} ref={ref} style={root}>
-      <Text style={text}>{children}</Text>
-    </TouchableOpacity>
-  );
-});
-
-Button.displayName = "Button";
-```
-
-<h4>Usage Example</h4>
-
-
-```tsx
-import { Button } from "./Button";
-
-export default function App() {
-  return (
-    <>
-      <Button variant="solid">Solid Button</Button>
-      <Button variant="ghost">Ghost Button</Button>
-    </>
-  );
-}
-```
-
-<h3>Features</h3>
-
-1. **Multi-Slot Styling**: Define styles for multiple slots (e.g., `root`, `text`).
-2. **Variant Management**: Easily handle variations like `solid` or `ghost`.
-3. **Default Variants**: Define fallback styles for missing configurations.
-4. **Compound Variants**: Apply conditional styles based on combined properties.
-
-<h3>Contributing</h3>
-
-Feel free to contribute by submitting issues or pull requests. For questions, reach out to the maintainer:
-
-Email: matheussdev3@gmail.com
-Maintainer: [matheussatoshi](https://github.com/matheussatoshi)
-
-<h3>License</h3>
-
+
+<h1 align='center'>native-variants</h1>
+
+Simplify and streamline style management in React 
+Native with TypeScript support
+
+ 
+<h4>Installation</h4>
+
+
+Install `native-variants` using npm or yarn:
+
+
+```bash
+npm install native-variants
+//or
+yarn add native-variants
+```
+
+<h4>Overview</h4>
+
+`native-variants` provides a powerful utility to define, organize, and apply component styling for React Native. It supports multiple slots, variants, default settings, and compound variants, enabling a clean and reusable way to manage styles.
+
+<h3>Getting Started</h3>
+
+Here’s a quick example of how to use `native-variants` to style a button component.
+
+
+<h4>Defining Variants</h4>
+
+```tsx
+import { nv, type VariantProps } from "native-variants";
+
+const buttonVariants = nv({
+  slots: ["root", "text"], // Define slots for styling
+  base: {
+    root: { paddingHorizontal: 16, paddingVertical: 12 }, // Base styles for root
+    text: { color: "white", textAlign: "center" }, // Base styles for text
+  },
+  variants: {
+    variant: {
+      solid: {
+        root: { backgroundColor: "#ff0006" },
+        text: { color: "white" },
+      },
+      ghost: {
+        root: { backgroundColor: "transparent" },
+        text: { color: "#ff0006" },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "solid", // Default variant configuration
+  },
+  compoundVariants: [
+    {
+      variant: "ghost",
+      css: {
+        root: { borderWidth: 1, borderColor: "#fff006" },
+      },
+    },
+  ],
+});
+```
+
+<h4>Using the Variants</h4>
+
+Create a styled `Button` component:
+
+```tsx
+import React from "react";
+import { Text, TouchableOpacity } from "react-native";
+
+export interface ButtonProps
+  extends React.ComponentPropsWithoutRef<typeof TouchableOpacity>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = React.forwardRef<
+  React.ComponentRef<typeof TouchableOpacity>,
+  ButtonProps
+>(({ children, variant, ...props }, ref) => {
+  const { root, text } = buttonVariants({ variant });
+
+  return (
+    <TouchableOpacity {...props} ref={ref} style={root}>
+      <Text style={text}>{children}</Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = "Button";
+```
+
+<h4>Usage Example</h4>
+
+
+```tsx
+import { Button } from "./Button";
+
+export default function App() {
+  return (
+    <>
+      <Button variant="solid">Solid Button</Button>
+      <Button variant="ghost">Ghost Button</Button>
+    </>
+  );
+}
+```
+
+<h3>Features</h3>
+
+1. **Multi-Slot Styling**: Define styles for multiple slots (e.g., `root`, `text`).
+2. **Variant Management**: Easily handle variations like `solid` or `ghost`.
+3. **Default Variants**: Define fallback styles for missing configurations.
+4. **Compound Variants**: Apply conditional styles based on combined properties.
+
+<h3>Contributing</h3>
+
+Feel free to contribute by submitting issues or pull requests. For questions, reach out to the maintainer:
+
+Email: matheussdev3@gmail.com
+Maintainer: [matheussatoshi](https://github.com/matheussatoshi)
+
+<h3>License</h3>
+
 This library is licensed under the MIT License.

package/dist/example.js

@@ -0,0 +1 @@
+import{createNVA}from"./lib/create-nva.js";const{styled,theme,utils}=createNVA({theme:{colors:{default:{primary:"#3b82f6",background:"#ffffff",foreground:"#000000"},dark:{primary:"#60a5fa",background:"#000000",foreground:"#ffffff"}}},utils:{mx:value=>({marginLeft:value,marginRight:value}),my:value=>({marginTop:value,marginBottom:value}),px:value=>({paddingLeft:value,paddingRight:value}),py:value=>({paddingTop:value,paddingBottom:value}),size:value=>({width:value,height:value}),brd:value=>({borderWidth:value,borderStyle:"solid"})}});const buttonVariants=styled((ctx,t)=>ctx({slots:["root","text"],base:{root:{backgroundColor:t.colors.primary,px:16,py:12,borderRadius:t.radii.lg},text:{color:t.colors.background,fontSize:t.fontSizes.base}},variants:{size:{sm:{root:{px:12,py:8},text:{fontSize:t.fontSizes.sm}},lg:{root:{px:24,py:16},text:{fontSize:t.fontSizes.lg}}},square:{true:{root:{size:48,px:0,py:0}}}},compoundVariants:[{size:"lg",square:true,css:{root:{size:64}}}]}));const styles=buttonVariants({size:"lg"});console.log(styles.root);const squareStyles=buttonVariants({square:true});console.log(squareStyles.root);const combined=buttonVariants({size:"sm",square:false});console.log(combined.root);console.log(theme.colors.primary);console.log(theme.colors.blue500);console.log(theme.spacing["4"]);console.log(theme.fontSizes.lg);console.log(utils.mx(10));

package/dist/index.d.ts

@@ -1,8 +1,17 @@
-export * from "./lib/cn.js";
-export * from "./lib/create-nva.js";
-export * from "./lib/media-query.js";
-export * from "./provider/create-provider.js";
-export * from "./types.js";
-export * from "./utils/alpha.js";
-export * from "./utils/compose-refs.js";
-export * from "./utils/compose-text.js";
+/**
+ * Native Variants - A type-safe styling library for React Native
+ * with Tailwind CSS inspired design tokens.
+ *
+ * @packageDocumentation
+ */
+export { cn, cnView, cnText, cnImage } from "./lib/cn.js";
+export { styled, createNVA, clearStyleCache } from "./lib/create-nva.js";
+export { wq, hq, getScreenDimensions, responsiveFontSize } from "./lib/media-query.js";
+export { createCTX } from "./provider/create-provider.js";
+export { ThemeProvider, useTheme, useThemeColors, useIsDark, useColorScheme, createThemedStyles, } from "./provider/theme-provider.js";
+export type { ColorScheme, ThemeMode, ThemeContextValue, ThemeProviderProps, } from "./provider/theme-provider.js";
+export type { Styles, Base, DefaultVariants, CompoundVariant, Variants, MappedVariants, DefineConfig, Config, VariantProps, Theme, ThemeInput, ThemeOutput, ColorSchemeConfig, ColorsInput, UtilFunction, UtilsConfig, UtilParamType, StylesWithUtils, BaseWithUtils, VariantsWithUtils, CompoundVariantWithUtils, DefaultVariantsWithUtils, ConfigWithUtils, } from "./types.js";
+export { alpha, hexToRgba, lighten, darken } from "./utils/alpha.js";
+export { composeText, hasTextStyles, composeView } from "./utils/compose-text.js";
+export { defaultTheme, extendTheme, tailwindColors, tailwindSpacing, tailwindFontSizes, tailwindRadii, tailwindShadows, tailwindZIndex, tailwindOpacity, tailwindLineHeights, tailwindFontWeights, tailwindLetterSpacing, tailwindBorderWidths, tailwindMaxWidths, tailwindDurations, defaultColors, defaultSpacing, defaultFontSizes, defaultRadii, defaultShadows, defaultZIndex, defaultOpacity, defaultLineHeights, defaultFontWeights, defaultLetterSpacing, } from "./tokens/default-tokens.js";
+export type { DefaultTheme, TailwindColors, TailwindSpacing, TailwindFontSizes, TailwindRadii, TailwindShadows, TailwindZIndex, TailwindOpacity, TailwindLineHeights, TailwindFontWeights, TailwindLetterSpacing, TailwindBorderWidths, TailwindMaxWidths, TailwindDurations, DefaultColors, DefaultSpacing, DefaultFontSizes, DefaultRadii, DefaultShadows, DefaultZIndex, DefaultOpacity, DefaultLineHeights, DefaultFontWeights, DefaultLetterSpacing, } from "./tokens/default-tokens.js";

package/dist/index.js

@@ -1,25 +1,75 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
+/**
+ * Native Variants - A type-safe styling library for React Native
+ * with Tailwind CSS inspired design tokens.
+ *
+ * @packageDocumentation
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./lib/cn.js"), exports);
-__exportStar(require("./lib/create-nva.js"), exports);
-__exportStar(require("./lib/media-query.js"), exports);
-__exportStar(require("./provider/create-provider.js"), exports);
-__exportStar(require("./types.js"), exports);
-__exportStar(require("./utils/alpha.js"), exports);
-__exportStar(require("./utils/compose-refs.js"), exports);
-__exportStar(require("./utils/compose-text.js"), exports);
+exports.defaultLetterSpacing = exports.defaultFontWeights = exports.defaultLineHeights = exports.defaultOpacity = exports.defaultZIndex = exports.defaultShadows = exports.defaultRadii = exports.defaultFontSizes = exports.defaultSpacing = exports.defaultColors = exports.tailwindDurations = exports.tailwindMaxWidths = exports.tailwindBorderWidths = exports.tailwindLetterSpacing = exports.tailwindFontWeights = exports.tailwindLineHeights = exports.tailwindOpacity = exports.tailwindZIndex = exports.tailwindShadows = exports.tailwindRadii = exports.tailwindFontSizes = exports.tailwindSpacing = exports.tailwindColors = exports.extendTheme = exports.defaultTheme = exports.composeView = exports.hasTextStyles = exports.composeText = exports.darken = exports.lighten = exports.hexToRgba = exports.alpha = exports.createThemedStyles = exports.useColorScheme = exports.useIsDark = exports.useThemeColors = exports.useTheme = exports.ThemeProvider = exports.createCTX = exports.responsiveFontSize = exports.getScreenDimensions = exports.hq = exports.wq = exports.clearStyleCache = exports.createNVA = exports.styled = exports.cnImage = exports.cnText = exports.cnView = exports.cn = void 0;
+// Core styling utilities
+var cn_1 = require("./lib/cn.js");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return cn_1.cn; } });
+Object.defineProperty(exports, "cnView", { enumerable: true, get: function () { return cn_1.cnView; } });
+Object.defineProperty(exports, "cnText", { enumerable: true, get: function () { return cn_1.cnText; } });
+Object.defineProperty(exports, "cnImage", { enumerable: true, get: function () { return cn_1.cnImage; } });
+var create_nva_1 = require("./lib/create-nva.js");
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return create_nva_1.styled; } });
+Object.defineProperty(exports, "createNVA", { enumerable: true, get: function () { return create_nva_1.createNVA; } });
+Object.defineProperty(exports, "clearStyleCache", { enumerable: true, get: function () { return create_nva_1.clearStyleCache; } });
+var media_query_1 = require("./lib/media-query.js");
+Object.defineProperty(exports, "wq", { enumerable: true, get: function () { return media_query_1.wq; } });
+Object.defineProperty(exports, "hq", { enumerable: true, get: function () { return media_query_1.hq; } });
+Object.defineProperty(exports, "getScreenDimensions", { enumerable: true, get: function () { return media_query_1.getScreenDimensions; } });
+Object.defineProperty(exports, "responsiveFontSize", { enumerable: true, get: function () { return media_query_1.responsiveFontSize; } });
+// Context provider utilities
+var create_provider_1 = require("./provider/create-provider.js");
+Object.defineProperty(exports, "createCTX", { enumerable: true, get: function () { return create_provider_1.createCTX; } });
+// Theme provider and hooks
+var theme_provider_1 = require("./provider/theme-provider.js");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_provider_1.ThemeProvider; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_provider_1.useTheme; } });
+Object.defineProperty(exports, "useThemeColors", { enumerable: true, get: function () { return theme_provider_1.useThemeColors; } });
+Object.defineProperty(exports, "useIsDark", { enumerable: true, get: function () { return theme_provider_1.useIsDark; } });
+Object.defineProperty(exports, "useColorScheme", { enumerable: true, get: function () { return theme_provider_1.useColorScheme; } });
+Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_provider_1.createThemedStyles; } });
+// Utility functions
+var alpha_1 = require("./utils/alpha.js");
+Object.defineProperty(exports, "alpha", { enumerable: true, get: function () { return alpha_1.alpha; } });
+Object.defineProperty(exports, "hexToRgba", { enumerable: true, get: function () { return alpha_1.hexToRgba; } });
+Object.defineProperty(exports, "lighten", { enumerable: true, get: function () { return alpha_1.lighten; } });
+Object.defineProperty(exports, "darken", { enumerable: true, get: function () { return alpha_1.darken; } });
+var compose_text_1 = require("./utils/compose-text.js");
+Object.defineProperty(exports, "composeText", { enumerable: true, get: function () { return compose_text_1.composeText; } });
+Object.defineProperty(exports, "hasTextStyles", { enumerable: true, get: function () { return compose_text_1.hasTextStyles; } });
+Object.defineProperty(exports, "composeView", { enumerable: true, get: function () { return compose_text_1.composeView; } });
+// Default tokens (Tailwind CSS)
+var default_tokens_1 = require("./tokens/default-tokens.js");
+Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return default_tokens_1.defaultTheme; } });
+Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return default_tokens_1.extendTheme; } });
+// Tailwind exports
+Object.defineProperty(exports, "tailwindColors", { enumerable: true, get: function () { return default_tokens_1.tailwindColors; } });
+Object.defineProperty(exports, "tailwindSpacing", { enumerable: true, get: function () { return default_tokens_1.tailwindSpacing; } });
+Object.defineProperty(exports, "tailwindFontSizes", { enumerable: true, get: function () { return default_tokens_1.tailwindFontSizes; } });
+Object.defineProperty(exports, "tailwindRadii", { enumerable: true, get: function () { return default_tokens_1.tailwindRadii; } });
+Object.defineProperty(exports, "tailwindShadows", { enumerable: true, get: function () { return default_tokens_1.tailwindShadows; } });
+Object.defineProperty(exports, "tailwindZIndex", { enumerable: true, get: function () { return default_tokens_1.tailwindZIndex; } });
+Object.defineProperty(exports, "tailwindOpacity", { enumerable: true, get: function () { return default_tokens_1.tailwindOpacity; } });
+Object.defineProperty(exports, "tailwindLineHeights", { enumerable: true, get: function () { return default_tokens_1.tailwindLineHeights; } });
+Object.defineProperty(exports, "tailwindFontWeights", { enumerable: true, get: function () { return default_tokens_1.tailwindFontWeights; } });
+Object.defineProperty(exports, "tailwindLetterSpacing", { enumerable: true, get: function () { return default_tokens_1.tailwindLetterSpacing; } });
+Object.defineProperty(exports, "tailwindBorderWidths", { enumerable: true, get: function () { return default_tokens_1.tailwindBorderWidths; } });
+Object.defineProperty(exports, "tailwindMaxWidths", { enumerable: true, get: function () { return default_tokens_1.tailwindMaxWidths; } });
+Object.defineProperty(exports, "tailwindDurations", { enumerable: true, get: function () { return default_tokens_1.tailwindDurations; } });
+// Legacy exports (backwards compatibility)
+Object.defineProperty(exports, "defaultColors", { enumerable: true, get: function () { return default_tokens_1.defaultColors; } });
+Object.defineProperty(exports, "defaultSpacing", { enumerable: true, get: function () { return default_tokens_1.defaultSpacing; } });
+Object.defineProperty(exports, "defaultFontSizes", { enumerable: true, get: function () { return default_tokens_1.defaultFontSizes; } });
+Object.defineProperty(exports, "defaultRadii", { enumerable: true, get: function () { return default_tokens_1.defaultRadii; } });
+Object.defineProperty(exports, "defaultShadows", { enumerable: true, get: function () { return default_tokens_1.defaultShadows; } });
+Object.defineProperty(exports, "defaultZIndex", { enumerable: true, get: function () { return default_tokens_1.defaultZIndex; } });
+Object.defineProperty(exports, "defaultOpacity", { enumerable: true, get: function () { return default_tokens_1.defaultOpacity; } });
+Object.defineProperty(exports, "defaultLineHeights", { enumerable: true, get: function () { return default_tokens_1.defaultLineHeights; } });
+Object.defineProperty(exports, "defaultFontWeights", { enumerable: true, get: function () { return default_tokens_1.defaultFontWeights; } });
+Object.defineProperty(exports, "defaultLetterSpacing", { enumerable: true, get: function () { return default_tokens_1.defaultLetterSpacing; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,mDAAiC;AACjC,oDAAkC;AAClC,6DAA2C;AAC3C,0CAAwB;AACxB,gDAA8B;AAC9B,uDAAqC;AACrC,uDAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEH,yBAAyB;AACzB,+BAAuD;AAA9C,wFAAA,EAAE,OAAA;AAAE,4FAAA,MAAM,OAAA;AAAE,4FAAA,MAAM,OAAA;AAAE,6FAAA,OAAO,OAAA;AACpC,+CAAsE;AAA7D,oGAAA,MAAM,OAAA;AAAE,uGAAA,SAAS,OAAA;AAAE,6GAAA,eAAe,OAAA;AAC3C,iDAAoF;AAA3E,iGAAA,EAAE,OAAA;AAAE,iGAAA,EAAE,OAAA;AAAE,kHAAA,mBAAmB,OAAA;AAAE,iHAAA,kBAAkB,OAAA;AAExD,6BAA6B;AAC7B,8DAAuD;AAA9C,4GAAA,SAAS,OAAA;AAElB,2BAA2B;AAC3B,4DAOmC;AANjC,+GAAA,aAAa,OAAA;AACb,0GAAA,QAAQ,OAAA;AACR,gHAAA,cAAc,OAAA;AACd,2GAAA,SAAS,OAAA;AACT,gHAAA,cAAc,OAAA;AACd,oHAAA,kBAAkB,OAAA;AAsCpB,oBAAoB;AACpB,uCAAkE;AAAzD,8FAAA,KAAK,OAAA;AAAE,kGAAA,SAAS,OAAA;AAAE,gGAAA,OAAO,OAAA;AAAE,+FAAA,MAAM,OAAA;AAC1C,qDAA+E;AAAtE,2GAAA,WAAW,OAAA;AAAE,6GAAA,aAAa,OAAA;AAAE,2GAAA,WAAW,OAAA;AAEhD,gCAAgC;AAChC,0DA4BiC;AA3B/B,8GAAA,YAAY,OAAA;AACZ,6GAAA,WAAW,OAAA;AACX,mBAAmB;AACnB,gHAAA,cAAc,OAAA;AACd,iHAAA,eAAe,OAAA;AACf,mHAAA,iBAAiB,OAAA;AACjB,+GAAA,aAAa,OAAA;AACb,iHAAA,eAAe,OAAA;AACf,gHAAA,cAAc,OAAA;AACd,iHAAA,eAAe,OAAA;AACf,qHAAA,mBAAmB,OAAA;AACnB,qHAAA,mBAAmB,OAAA;AACnB,uHAAA,qBAAqB,OAAA;AACrB,sHAAA,oBAAoB,OAAA;AACpB,mHAAA,iBAAiB,OAAA;AACjB,mHAAA,iBAAiB,OAAA;AACjB,2CAA2C;AAC3C,+GAAA,aAAa,OAAA;AACb,gHAAA,cAAc,OAAA;AACd,kHAAA,gBAAgB,OAAA;AAChB,8GAAA,YAAY,OAAA;AACZ,gHAAA,cAAc,OAAA;AACd,+GAAA,aAAa,OAAA;AACb,gHAAA,cAAc,OAAA;AACd,oHAAA,kBAAkB,OAAA;AAClB,oHAAA,kBAAkB,OAAA;AAClB,sHAAA,oBAAoB,OAAA"}

package/dist/lib/cn.d.ts

@@ -1,2 +1,82 @@
-import type { StyleProp } from "react-native";
-export declare function cn<T extends object>(...styles: StyleProp<T>[]): T;
+import type { FlexStyle, ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+/**
+ * Base style type that covers all React Native style types.
+ */
+type BaseStyle = ViewStyle | TextStyle | ImageStyle | FlexStyle;
+/**
+ * Animated style type compatible with react-native-reanimated.
+ * Allows for animated values in style properties.
+ */
+type AnimatedStyle<T> = {
+    [K in keyof T]: T[K] | {
+        value: T[K];
+    };
+};
+/**
+ * Combined style input type that accepts:
+ * - Regular React Native styles (ViewStyle, TextStyle, etc.)
+ * - Animated styles from react-native-reanimated
+ * - Partial style objects
+ * - Style arrays
+ * - null/undefined values
+ */
+type StyleInput = StyleProp<BaseStyle> | AnimatedStyle<BaseStyle> | Partial<BaseStyle> | Record<string, unknown> | null | undefined;
+/**
+ * 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 }
+ * );
+ * ```
+ */
+export declare function cn<T extends BaseStyle = ViewStyle>(...styles: StyleInput[]): T;
+/**
+ * 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
+ */
+export declare function cnView(...styles: StyleInput[]): ViewStyle;
+/**
+ * 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
+ */
+export declare function cnText(...styles: StyleInput[]): TextStyle;
+/**
+ * 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
+ */
+export declare function cnImage(...styles: StyleInput[]): ImageStyle;
+export {};