@mgcrea/react-native-tailwind 0.3.0 → 0.5.0

package/dist/babel/index.d.ts

@@ -4,8 +4,9 @@
  */
 import type { PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
+import { StyleObject } from "src/types.js";
 type PluginState = PluginPass & {
-    styleRegistry: Map<string, Record<string, string | number>>;
+    styleRegistry: Map<string, StyleObject>;
     hasClassNames: boolean;
     hasStyleSheetImport: boolean;
     customColors: Record<string, string>;

package/dist/babel/index.ts

@@ -11,22 +11,28 @@
 
 import type { NodePath, PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
-import { parseClassName as parseClassNameFn } from "../parser/index.js";
+import { StyleObject } from "src/types.js";
+import type { ModifierType, ParsedModifier } from "../parser/index.js";
+import { parseClassName as parseClassNameFn, splitModifierClasses } from "../parser/index.js";
 import { generateStyleKey as generateStyleKeyFn } from "../utils/styleKey.js";
 import { extractCustomColors } from "./config-loader.js";
 
 type PluginState = PluginPass & {
-  styleRegistry: Map<string, Record<string, string | number>>;
+  styleRegistry: Map<string, StyleObject>;
   hasClassNames: boolean;
   hasStyleSheetImport: boolean;
   customColors: Record<string, string>;
 };
 
+// Use a unique identifier to avoid conflicts with user's own styles
+const STYLES_IDENTIFIER = "_twStyles";
+
 /**
  * Supported className-like attributes
  */
 const SUPPORTED_CLASS_ATTRIBUTES = [
   "className",
+  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
@@ -37,6 +43,9 @@ const SUPPORTED_CLASS_ATTRIBUTES = [
  * Get the target style prop name based on the className attribute
  */
 function getTargetStyleProp(attributeName: string): string {
+  if (attributeName === "containerClassName") {
+    return "containerStyle";
+  }
   if (attributeName === "contentContainerClassName") {
     return "contentContainerStyle";
   }
@@ -52,6 +61,49 @@ function getTargetStyleProp(attributeName: string): string {
   return "style";
 }
 
+/**
+ * Check if a JSX element supports modifiers and determine which modifiers are supported
+ * Returns an object with component info and supported modifiers
+ */
+function getComponentModifierSupport(
+  jsxElement: any,
+  t: typeof BabelTypes,
+): { component: string; supportedModifiers: ModifierType[] } | null {
+  if (!t.isJSXOpeningElement(jsxElement)) {
+    return null;
+  }
+
+  const name = jsxElement.name;
+  let componentName: string | null = null;
+
+  // Handle simple identifier: <Pressable>
+  if (t.isJSXIdentifier(name)) {
+    componentName = name.name;
+  }
+
+  // Handle member expression: <ReactNative.Pressable>
+  if (t.isJSXMemberExpression(name)) {
+    const property = name.property;
+    if (t.isJSXIdentifier(property)) {
+      componentName = property.name;
+    }
+  }
+
+  if (!componentName) {
+    return null;
+  }
+
+  // Map components to their supported modifiers
+  switch (componentName) {
+    case "Pressable":
+      return { component: "Pressable", supportedModifiers: ["active", "hover", "focus", "disabled"] };
+    case "TextInput":
+      return { component: "TextInput", supportedModifiers: ["focus", "disabled"] };
+    default:
+      return null;
+  }
+}
+
 /**
  * Result of processing a dynamic expression
  */
@@ -117,7 +169,7 @@ function processTemplateLiteral(
         staticParts.push(cls);
 
         // Add to parts array
-        parts.push(t.memberExpression(t.identifier("styles"), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
       }
     }
 
@@ -216,7 +268,7 @@ function processStringOrExpression(node: any, state: PluginState, t: typeof Babe
     const styleKey = generateStyleKey(className);
     state.styleRegistry.set(styleKey, styleObject);
 
-    return t.memberExpression(t.identifier("styles"), t.identifier(styleKey));
+    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
   }
 
   // Handle nested expressions recursively
@@ -239,6 +291,118 @@ function processStringOrExpression(node: any, state: PluginState, t: typeof Babe
   return null;
 }
 
+/**
+ * Process a static className string that contains modifiers
+ * Returns a style function expression for Pressable components
+ */
+function processStaticClassNameWithModifiers(
+  className: string,
+  state: PluginState,
+  t: typeof BabelTypes,
+): any {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+
+  // Parse and register base classes
+  let baseStyleExpression: any = null;
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+    baseStyleExpression = t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(baseStyleKey));
+  }
+
+  // Parse and register modifier classes
+  // Group by modifier type for better organization
+  const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+
+  // Build style function: ({ pressed }) => [baseStyle, pressed && modifierStyle]
+  const styleArrayElements: any[] = [];
+
+  // Add base style first
+  if (baseStyleExpression) {
+    styleArrayElements.push(baseStyleExpression);
+  }
+
+  // Add conditional styles for each modifier type
+  for (const [modifierType, modifiers] of modifiersByType) {
+    // Parse all modifier classes together
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+
+    // Create conditional: pressed && styles._active_bg_blue_700
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    const conditionalExpression = t.logicalExpression(
+      "&&",
+      t.identifier(stateProperty),
+      t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(modifierStyleKey)),
+    );
+
+    styleArrayElements.push(conditionalExpression);
+  }
+
+  // If only base style, return it directly; otherwise return array
+  if (styleArrayElements.length === 1) {
+    return styleArrayElements[0];
+  }
+
+  return t.arrayExpression(styleArrayElements);
+}
+
+/**
+ * Get the state property name for a modifier type
+ * Maps modifier types to component state parameter properties
+ */
+function getStatePropertyForModifier(modifier: ModifierType): string {
+  switch (modifier) {
+    case "active":
+      return "pressed";
+    case "hover":
+      return "hovered";
+    case "focus":
+      return "focused";
+    case "disabled":
+      return "disabled";
+    default:
+      return "pressed"; // fallback
+  }
+}
+
+/**
+ * Create a style function for Pressable: ({ pressed }) => styleExpression
+ */
+function createStyleFunction(styleExpression: any, modifierTypes: ModifierType[], t: typeof BabelTypes): any {
+  // Build parameter object: { pressed, hovered, focused }
+  const paramProperties: any[] = [];
+  const usedStateProps = new Set<string>();
+
+  for (const modifierType of modifierTypes) {
+    const stateProperty = getStatePropertyForModifier(modifierType);
+    if (!usedStateProps.has(stateProperty)) {
+      usedStateProps.add(stateProperty);
+      paramProperties.push(
+        t.objectProperty(t.identifier(stateProperty), t.identifier(stateProperty), false, true),
+      );
+    }
+  }
+
+  const param = t.objectPattern(paramProperties);
+
+  // Create arrow function: ({ pressed }) => styleExpression
+  return t.arrowFunctionExpression([param], styleExpression);
+}
+
 export default function reactNativeTailwindBabelPlugin({
   types: t,
 }: {
@@ -311,7 +475,7 @@ export default function reactNativeTailwindBabelPlugin({
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals (original behavior)
+        // Handle static string literals
         if (t.isStringLiteral(value)) {
           const className = value.value.trim();
 
@@ -323,13 +487,99 @@ export default function reactNativeTailwindBabelPlugin({
 
           state.hasClassNames = true;
 
-          // Parse className to React Native styles
-          const styleObject = parseClassName(className, state.customColors);
+          // Check if className contains modifiers (active:, hover:, focus:)
+          const { baseClasses, modifierClasses } = splitModifierClasses(className);
 
-          // Generate unique style key
-          const styleKey = generateStyleKey(className);
+          // If there are modifiers, check if this component supports them
+          if (modifierClasses.length > 0) {
+            // Get the JSX opening element (the direct parent of the attribute)
+            const jsxOpeningElement = path.parent;
+            const componentSupport = getComponentModifierSupport(jsxOpeningElement, t);
+
+            if (componentSupport) {
+              // Get modifier types used in className
+              const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+
+              // Check if all modifiers are supported by this component
+              const unsupportedModifiers = usedModifiers.filter(
+                (mod) => !componentSupport.supportedModifiers.includes(mod),
+              );
+
+              if (unsupportedModifiers.length > 0) {
+                // Warn about unsupported modifiers
+                if (process.env.NODE_ENV !== "production") {
+                  console.warn(
+                    `[react-native-tailwind] Modifiers (${unsupportedModifiers.map((m) => `${m}:`).join(", ")}) are not supported on ${componentSupport.component} component at ${state.file.opts.filename ?? "unknown"}. ` +
+                      `Supported modifiers: ${componentSupport.supportedModifiers.join(", ")}`,
+                  );
+                }
+                // Filter out unsupported modifiers
+                const supportedModifierClasses = modifierClasses.filter((m) =>
+                  componentSupport.supportedModifiers.includes(m.modifier),
+                );
+
+                // If no supported modifiers remain, fall through to normal processing
+                if (supportedModifierClasses.length === 0) {
+                  // Continue to normal processing
+                } else {
+                  // Process only supported modifiers
+                  const filteredClassName =
+                    baseClasses.join(" ") +
+                    " " +
+                    supportedModifierClasses.map((m) => `${m.modifier}:${m.baseClass}`).join(" ");
+                  const styleExpression = processStaticClassNameWithModifiers(
+                    filteredClassName.trim(),
+                    state,
+                    t,
+                  );
+                  const modifierTypes = Array.from(new Set(supportedModifierClasses.map((m) => m.modifier)));
+                  const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+
+                  const parent = path.parent as any;
+                  const styleAttribute = parent.attributes.find(
+                    (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+                  );
+
+                  if (styleAttribute) {
+                    mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+                  } else {
+                    replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+                  }
+                  return;
+                }
+              } else {
+                // All modifiers are supported - process normally
+                const styleExpression = processStaticClassNameWithModifiers(className, state, t);
+                const modifierTypes = usedModifiers;
+                const styleFunctionExpression = createStyleFunction(styleExpression, modifierTypes, t);
+
+                const parent = path.parent as any;
+                const styleAttribute = parent.attributes.find(
+                  (attr: any) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp,
+                );
+
+                if (styleAttribute) {
+                  mergeStyleFunctionAttribute(path, styleAttribute, styleFunctionExpression, t);
+                } else {
+                  replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
+                }
+                return;
+              }
+            } else {
+              // Component doesn't support any modifiers
+              if (process.env.NODE_ENV !== "production") {
+                const usedModifiers = Array.from(new Set(modifierClasses.map((m) => m.modifier)));
+                console.warn(
+                  `[react-native-tailwind] Modifiers (${usedModifiers.map((m) => `${m}:`).join(", ")}) can only be used on compatible components (Pressable, TextInput). Found on unsupported element at ${state.file.opts.filename ?? "unknown"}`,
+                );
+              }
+              // Fall through to normal processing (ignore modifiers)
+            }
+          }
 
-          // Store in registry
+          // Normal processing without modifiers
+          const styleObject = parseClassName(className, state.customColors);
+          const styleKey = generateStyleKey(className);
           state.styleRegistry.set(styleKey, styleObject);
 
           // Check if there's already a style prop on this element
@@ -426,7 +676,7 @@ function replaceWithStyleAttribute(
 ) {
   const styleAttribute = t.jsxAttribute(
     t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier("styles"), t.identifier(styleKey))),
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey))),
   );
 
   classNamePath.replaceWith(styleAttribute);
@@ -446,7 +696,7 @@ function mergeStyleAttribute(
   // Create array with className styles first, then existing styles
   // This allows existing styles to override className styles
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier("styles"), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
     existingStyle,
   ]);
 
@@ -502,13 +752,72 @@ function mergeDynamicStyleAttribute(
 }
 
 /**
- * Inject StyleSheet.create with all collected styles
+ * Replace className with style function attribute (for Pressable with modifiers)
  */
-function injectStyles(
-  path: NodePath,
-  styleRegistry: Map<string, Record<string, string | number>>,
+function replaceWithStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleFunctionExpression: any,
+  targetStyleProp: string,
   t: typeof BabelTypes,
 ) {
+  const styleAttribute = t.jsxAttribute(
+    t.jsxIdentifier(targetStyleProp),
+    t.jsxExpressionContainer(styleFunctionExpression),
+  );
+
+  classNamePath.replaceWith(styleAttribute);
+}
+
+/**
+ * Merge className style function with existing style prop (for Pressable with modifiers)
+ */
+function mergeStyleFunctionAttribute(
+  classNamePath: NodePath,
+  styleAttribute: any,
+  styleFunctionExpression: any,
+  t: typeof BabelTypes,
+) {
+  const existingStyle = styleAttribute.value.expression;
+
+  // Create a wrapper function that merges both styles
+  // ({ pressed }) => [styleFunctionResult, existingStyle]
+  // We need to call the style function and merge results
+
+  // If existing is already a function, we need to handle it specially
+  if (t.isArrowFunctionExpression(existingStyle) || t.isFunctionExpression(existingStyle)) {
+    // Both are functions - create wrapper that calls both
+    // (_state) => [newStyleFn(_state), existingStyleFn(_state)]
+    // Create an identifier for the parameter to pass to the function calls
+    const paramIdentifier = t.identifier("_state");
+
+    const newFunctionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const existingFunctionCall = t.callExpression(existingStyle, [paramIdentifier]);
+
+    const mergedArray = t.arrayExpression([newFunctionCall, existingFunctionCall]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  } else {
+    // Existing is static - create function that returns array
+    // (_state) => [styleFunctionResult, existingStyle]
+    // Create an identifier for the parameter to pass to the function call
+    const paramIdentifier = t.identifier("_state");
+
+    const functionCall = t.callExpression(styleFunctionExpression, [paramIdentifier]);
+    const mergedArray = t.arrayExpression([functionCall, existingStyle]);
+    const wrapperFunction = t.arrowFunctionExpression([paramIdentifier], mergedArray);
+
+    styleAttribute.value = t.jsxExpressionContainer(wrapperFunction);
+  }
+
+  // Remove the className attribute
+  classNamePath.remove();
+}
+
+/**
+ * Inject StyleSheet.create with all collected styles
+ */
+function injectStyles(path: NodePath, styleRegistry: Map<string, StyleObject>, t: typeof BabelTypes) {
   // Build style object properties
   const styleProperties: any[] = [];
 
@@ -531,10 +840,10 @@ function injectStyles(
     styleProperties.push(t.objectProperty(t.identifier(key), t.objectExpression(properties)));
   }
 
-  // Create: const styles = StyleSheet.create({ ... })
+  // Create: const _tailwindStyles = StyleSheet.create({ ... })
   const styleSheet = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier("styles"),
+      t.identifier(STYLES_IDENTIFIER),
       t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
         t.objectExpression(styleProperties),
       ]),
@@ -546,10 +855,7 @@ function injectStyles(
 }
 
 // Helper functions that use the imported parser
-function parseClassName(
-  className: string,
-  customColors: Record<string, string>,
-): Record<string, string | number> {
+function parseClassName(className: string, customColors: Record<string, string>): StyleObject {
   return parseClassNameFn(className, customColors);
 }
 

package/dist/components/Pressable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Enhanced Pressable component with modifier support
+ * Injects disabled state into style function for disabled: modifier support
+ */
+import { type PressableStateCallbackType, type PressableProps as RNPressableProps, type StyleProp, type ViewStyle } from "react-native";
+type EnhancedPressableState = PressableStateCallbackType & {
+    disabled: boolean | null | undefined;
+};
+export type PressableProps = Omit<RNPressableProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives Pressable state + disabled
+     */
+    style?: StyleProp<ViewStyle> | ((state: EnhancedPressableState) => StyleProp<ViewStyle>);
+};
+/**
+ * Enhanced Pressable that supports the disabled: modifier
+ *
+ * @example
+ * <Pressable
+ *   disabled={isLoading}
+ *   className="bg-blue-500 active:bg-blue-700 disabled:bg-gray-400"
+ * >
+ *   <Text>Submit</Text>
+ * </Pressable>
+ */
+export declare const Pressable: import("react").ForwardRefExoticComponent<Omit<RNPressableProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives Pressable state + disabled
+     */
+    style?: StyleProp<ViewStyle> | ((state: EnhancedPressableState) => StyleProp<ViewStyle>);
+} & import("react").RefAttributes<import("react-native").View>>;
+export {};

package/dist/components/Pressable.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Pressable=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=require("react");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="/Users/olivier/Projects/github/react-native-tailwind/src/components/Pressable.tsx";var _excluded=["style","disabled"];var Pressable=exports.Pressable=(0,_react.forwardRef)(function Pressable(_ref,ref){var style=_ref.style,_ref$disabled=_ref.disabled,disabled=_ref$disabled===void 0?false:_ref$disabled,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var resolvedStyle=typeof style==="function"?function(state){return style(Object.assign({},state,{disabled:disabled}));}:style;return(0,_jsxRuntime.jsx)(_reactNative.Pressable,Object.assign({ref:ref,disabled:disabled,style:resolvedStyle},props));});

package/dist/components/TextInput.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Enhanced TextInput component with focus state support for focus: modifier
+ *
+ * This component wraps React Native's TextInput and manages focus state internally,
+ * allowing the style prop to be a function that receives { focused: boolean }.
+ *
+ * @example
+ * ```tsx
+ * import { TextInput } from '@mgcrea/react-native-tailwind';
+ *
+ * <TextInput
+ *   className="border-2 border-gray-300 focus:border-blue-500 p-3 rounded-lg"
+ *   placeholder="Email"
+ * />
+ * ```
+ */
+import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps } from "react-native";
+export type TextInputProps = Omit<RNTextInputProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives focus and disabled state
+     */
+    style?: RNTextInputProps["style"] | ((state: {
+        focused: boolean;
+        disabled: boolean;
+    }) => RNTextInputProps["style"]);
+    /**
+     * Convenience prop for disabled state (overrides editable if provided)
+     * When true, sets editable to false
+     */
+    disabled?: boolean;
+};
+/**
+ * Enhanced TextInput with focus and disabled state support
+ *
+ * Manages focus state internally and passes it to style functions,
+ * enabling the use of focus: and disabled: modifiers in className.
+ *
+ * Note: TextInput uses `editable` prop internally. You can pass either:
+ * - `disabled={true}` - convenience prop (sets editable to false)
+ * - `editable={false}` - React Native's native prop
+ * If both are provided, `disabled` takes precedence.
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<RNTextInputProps, "style"> & {
+    /**
+     * Style can be a static style object/array or a function that receives focus and disabled state
+     */
+    style?: RNTextInputProps["style"] | ((state: {
+        focused: boolean;
+        disabled: boolean;
+    }) => RNTextInputProps["style"]);
+    /**
+     * Convenience prop for disabled state (overrides editable if provided)
+     * When true, sets editable to false
+     */
+    disabled?: boolean;
+} & import("react").RefAttributes<RNTextInput>>;

package/dist/components/TextInput.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.TextInput=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=require("react");var _reactNative=require("react-native");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="/Users/olivier/Projects/github/react-native-tailwind/src/components/TextInput.tsx";var _excluded=["style","onFocus","onBlur","disabled","editable"];var TextInput=exports.TextInput=(0,_react.forwardRef)(function TextInput(_ref,ref){var style=_ref.style,onFocus=_ref.onFocus,onBlur=_ref.onBlur,disabled=_ref.disabled,_ref$editable=_ref.editable,editable=_ref$editable===void 0?true:_ref$editable,props=(0,_objectWithoutProperties2.default)(_ref,_excluded);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),focused=_useState2[0],setFocused=_useState2[1];var handleFocus=(0,_react.useCallback)(function(e){setFocused(true);onFocus==null||onFocus(e);},[onFocus]);var handleBlur=(0,_react.useCallback)(function(e){setFocused(false);onBlur==null||onBlur(e);},[onBlur]);var isEditable=disabled!==undefined?!disabled:editable;var isDisabled=!isEditable;var resolvedStyle=typeof style==="function"?style({focused:focused,disabled:isDisabled}):style;return(0,_jsxRuntime.jsx)(_reactNative.TextInput,Object.assign({ref:ref,style:resolvedStyle,editable:isEditable,onFocus:handleFocus,onBlur:handleBlur},props));});

package/dist/index.d.ts

@@ -5,8 +5,15 @@
 export { parseClass, parseClassName } from "./parser";
 export { generateStyleKey } from "./utils/styleKey";
 export type { RNStyle, StyleObject } from "./types";
-export { parseBorder, parseColor, parseLayout, parseSizing, parseSpacing, parseTypography } from "./parser";
+export { parseAspectRatio, parseBorder, parseColor, parseLayout, parseShadow, parseSizing, parseSpacing, parseTypography, } from "./parser";
+export { ASPECT_RATIO_PRESETS } from "./parser/aspectRatio";
 export { COLORS } from "./parser/colors";
+export { INSET_SCALE, Z_INDEX_SCALE } from "./parser/layout";
+export { SHADOW_SCALE } from "./parser/shadows";
 export { SIZE_PERCENTAGES, SIZE_SCALE } from "./parser/sizing";
 export { SPACING_SCALE } from "./parser/spacing";
-export { FONT_SIZES } from "./parser/typography";
+export { FONT_SIZES, LETTER_SPACING_SCALE } from "./parser/typography";
+export { Pressable } from "./components/Pressable";
+export type { PressableProps } from "./components/Pressable";
+export { TextInput } from "./components/TextInput";
+export type { TextInputProps } from "./components/TextInput";

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"COLORS",{enumerable:true,get:function get(){return _colors.COLORS;}});Object.defineProperty(exports,"FONT_SIZES",{enumerable:true,get:function get(){return _typography.FONT_SIZES;}});Object.defineProperty(exports,"SIZE_PERCENTAGES",{enumerable:true,get:function get(){return _sizing.SIZE_PERCENTAGES;}});Object.defineProperty(exports,"SIZE_SCALE",{enumerable:true,get:function get(){return _sizing.SIZE_SCALE;}});Object.defineProperty(exports,"SPACING_SCALE",{enumerable:true,get:function get(){return _spacing.SPACING_SCALE;}});Object.defineProperty(exports,"generateStyleKey",{enumerable:true,get:function get(){return _styleKey.generateStyleKey;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _parser.parseBorder;}});Object.defineProperty(exports,"parseClass",{enumerable:true,get:function get(){return _parser.parseClass;}});Object.defineProperty(exports,"parseClassName",{enumerable:true,get:function get(){return _parser.parseClassName;}});Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _parser.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _parser.parseLayout;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _parser.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _parser.parseSpacing;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _parser.parseTypography;}});var _parser=require("./parser");var _styleKey=require("./utils/styleKey");var _colors=require("./parser/colors");var _sizing=require("./parser/sizing");var _spacing=require("./parser/spacing");var _typography=require("./parser/typography");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ASPECT_RATIO_PRESETS",{enumerable:true,get:function get(){return _aspectRatio.ASPECT_RATIO_PRESETS;}});Object.defineProperty(exports,"COLORS",{enumerable:true,get:function get(){return _colors.COLORS;}});Object.defineProperty(exports,"FONT_SIZES",{enumerable:true,get:function get(){return _typography.FONT_SIZES;}});Object.defineProperty(exports,"INSET_SCALE",{enumerable:true,get:function get(){return _layout.INSET_SCALE;}});Object.defineProperty(exports,"LETTER_SPACING_SCALE",{enumerable:true,get:function get(){return _typography.LETTER_SPACING_SCALE;}});Object.defineProperty(exports,"Pressable",{enumerable:true,get:function get(){return _Pressable.Pressable;}});Object.defineProperty(exports,"SHADOW_SCALE",{enumerable:true,get:function get(){return _shadows.SHADOW_SCALE;}});Object.defineProperty(exports,"SIZE_PERCENTAGES",{enumerable:true,get:function get(){return _sizing.SIZE_PERCENTAGES;}});Object.defineProperty(exports,"SIZE_SCALE",{enumerable:true,get:function get(){return _sizing.SIZE_SCALE;}});Object.defineProperty(exports,"SPACING_SCALE",{enumerable:true,get:function get(){return _spacing.SPACING_SCALE;}});Object.defineProperty(exports,"TextInput",{enumerable:true,get:function get(){return _TextInput.TextInput;}});Object.defineProperty(exports,"Z_INDEX_SCALE",{enumerable:true,get:function get(){return _layout.Z_INDEX_SCALE;}});Object.defineProperty(exports,"generateStyleKey",{enumerable:true,get:function get(){return _styleKey.generateStyleKey;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _parser.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _parser.parseBorder;}});Object.defineProperty(exports,"parseClass",{enumerable:true,get:function get(){return _parser.parseClass;}});Object.defineProperty(exports,"parseClassName",{enumerable:true,get:function get(){return _parser.parseClassName;}});Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _parser.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _parser.parseLayout;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _parser.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _parser.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _parser.parseSpacing;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _parser.parseTypography;}});var _parser=require("./parser");var _styleKey=require("./utils/styleKey");var _aspectRatio=require("./parser/aspectRatio");var _colors=require("./parser/colors");var _layout=require("./parser/layout");var _shadows=require("./parser/shadows");var _sizing=require("./parser/sizing");var _spacing=require("./parser/spacing");var _typography=require("./parser/typography");var _Pressable=require("./components/Pressable");var _TextInput=require("./components/TextInput");

package/dist/parser/aspectRatio.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Aspect ratio utilities for React Native
+ * Uses aspectRatio style property (React Native 0.71+)
+ */
+import type { StyleObject } from "../types";
+/**
+ * Preset aspect ratios
+ */
+declare const ASPECT_RATIO_PRESETS: Record<string, number | undefined>;
+/**
+ * Parse aspect ratio classes
+ * @param cls - Class name to parse
+ * @returns Style object or null if not an aspect ratio class
+ */
+export declare function parseAspectRatio(cls: string): StyleObject | null;
+export { ASPECT_RATIO_PRESETS };

package/dist/parser/aspectRatio.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.ASPECT_RATIO_PRESETS=void 0;exports.parseAspectRatio=parseAspectRatio;var ASPECT_RATIO_PRESETS=exports.ASPECT_RATIO_PRESETS={"aspect-auto":undefined,"aspect-square":1,"aspect-video":16/9};function parseArbitraryAspectRatio(value){var match=value.match(/^\[(\d+)\/(\d+)\]$/);if(match){var numerator=Number.parseInt(match[1],10);var denominator=Number.parseInt(match[2],10);if(denominator===0){if(process.env.NODE_ENV!=="production"){console.warn(`[react-native-tailwind] Invalid aspect ratio: ${value}. Denominator cannot be zero.`);}return null;}return numerator/denominator;}return null;}function parseAspectRatio(cls){if(!cls.startsWith("aspect-")){return null;}if(cls in ASPECT_RATIO_PRESETS){var _aspectRatio=ASPECT_RATIO_PRESETS[cls];if(_aspectRatio===undefined){return{};}return{aspectRatio:_aspectRatio};}var arbitraryValue=cls.substring(7);var aspectRatio=parseArbitraryAspectRatio(arbitraryValue);if(aspectRatio!==null){return{aspectRatio:aspectRatio};}return null;}

package/dist/parser/aspectRatio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/parser/aspectRatio.test.js

@@ -0,0 +1 @@
+var _vitest=require("vitest");var _aspectRatio=require("./aspectRatio");(0,_vitest.describe)("ASPECT_RATIO_PRESETS",function(){(0,_vitest.it)("should export aspect ratio presets",function(){(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS).toMatchSnapshot();});(0,_vitest.it)("should have all preset values",function(){(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS).toHaveProperty("aspect-auto");(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS).toHaveProperty("aspect-square");(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS).toHaveProperty("aspect-video");});(0,_vitest.it)("should have correct preset values",function(){(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS["aspect-auto"]).toBeUndefined();(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS["aspect-square"]).toBe(1);(0,_vitest.expect)(_aspectRatio.ASPECT_RATIO_PRESETS["aspect-video"]).toBe(16/9);});});(0,_vitest.describe)("parseAspectRatio - preset values",function(){(0,_vitest.it)("should parse aspect-square",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-square")).toEqual({aspectRatio:1});});(0,_vitest.it)("should parse aspect-video",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-video")).toEqual({aspectRatio:16/9});});(0,_vitest.it)("should parse aspect-auto",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-auto")).toEqual({});});});(0,_vitest.describe)("parseAspectRatio - arbitrary values",function(){(0,_vitest.it)("should parse arbitrary aspect ratio values",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4/3]")).toEqual({aspectRatio:4/3});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[16/9]")).toEqual({aspectRatio:16/9});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[21/9]")).toEqual({aspectRatio:21/9});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[1/1]")).toEqual({aspectRatio:1});});(0,_vitest.it)("should handle arbitrary ratios with different aspect values",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[2/1]")).toEqual({aspectRatio:2});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[3/2]")).toEqual({aspectRatio:1.5});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[9/16]")).toEqual({aspectRatio:9/16});});(0,_vitest.it)("should handle arbitrary ratios with large numbers",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[100/50]")).toEqual({aspectRatio:2});(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[1920/1080]")).toEqual({aspectRatio:1920/1080});});(0,_vitest.it)("should calculate correct aspect ratio values",function(){var result=(0,_aspectRatio.parseAspectRatio)("aspect-[4/3]");(0,_vitest.expect)(result==null?void 0:result.aspectRatio).toBeCloseTo(1.333,3);var result2=(0,_aspectRatio.parseAspectRatio)("aspect-[16/9]");(0,_vitest.expect)(result2==null?void 0:result2.aspectRatio).toBeCloseTo(1.778,3);});});(0,_vitest.describe)("parseAspectRatio - edge cases",function(){(0,_vitest.it)("should return null for division by zero",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4/0]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[16/0]")).toBeNull();});(0,_vitest.it)("should return null for invalid arbitrary values",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[/3]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4/3/2]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[abc/def]")).toBeNull();});(0,_vitest.it)("should return null for malformed brackets",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4/3")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-4/3]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-4/3")).toBeNull();});(0,_vitest.it)("should return null for invalid class prefixes",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("ratio-[4/3]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("ar-[4/3]")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspectRatio-[4/3]")).toBeNull();});});(0,_vitest.describe)("parseAspectRatio - invalid classes",function(){(0,_vitest.it)("should return null for non-aspect classes",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("bg-blue-500")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("p-4")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("text-white")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("w-full")).toBeNull();});(0,_vitest.it)("should return null for invalid aspect class names",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-invalid")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-16-9")).toBeNull();});(0,_vitest.it)("should return null for empty or whitespace input",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("   ")).toBeNull();});});(0,_vitest.describe)("parseAspectRatio - type validation",function(){(0,_vitest.it)("should return objects with correct property types",function(){var square=(0,_aspectRatio.parseAspectRatio)("aspect-square");(0,_vitest.expect)(typeof(square==null?void 0:square.aspectRatio)).toBe("number");var video=(0,_aspectRatio.parseAspectRatio)("aspect-video");(0,_vitest.expect)(typeof(video==null?void 0:video.aspectRatio)).toBe("number");var arbitrary=(0,_aspectRatio.parseAspectRatio)("aspect-[4/3]");(0,_vitest.expect)(typeof(arbitrary==null?void 0:arbitrary.aspectRatio)).toBe("number");});(0,_vitest.it)("should return null or object, never undefined",function(){var valid=(0,_aspectRatio.parseAspectRatio)("aspect-square");(0,_vitest.expect)(valid).not.toBeUndefined();(0,_vitest.expect)(typeof valid).toBe("object");var invalid=(0,_aspectRatio.parseAspectRatio)("invalid");(0,_vitest.expect)(invalid).toBeNull();});});(0,_vitest.describe)("parseAspectRatio - comprehensive coverage",function(){(0,_vitest.it)("should parse all preset variants without errors",function(){var presets=["aspect-auto","aspect-square","aspect-video"];presets.forEach(function(preset){var result=(0,_aspectRatio.parseAspectRatio)(preset);(0,_vitest.expect)(result).toBeTruthy();(0,_vitest.expect)(typeof result).toBe("object");});});(0,_vitest.it)("should return consistent results for same input",function(){var result1=(0,_aspectRatio.parseAspectRatio)("aspect-square");var result2=(0,_aspectRatio.parseAspectRatio)("aspect-square");(0,_vitest.expect)(result1).toEqual(result2);var result3=(0,_aspectRatio.parseAspectRatio)("aspect-[4/3]");var result4=(0,_aspectRatio.parseAspectRatio)("aspect-[4/3]");(0,_vitest.expect)(result3).toEqual(result4);});(0,_vitest.it)("should handle case-sensitive class names",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("ASPECT-square")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("Aspect-video")).toBeNull();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-SQUARE")).toBeNull();});(0,_vitest.it)("should handle common aspect ratios",function(){(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[1/1]")).toBeTruthy();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[4/3]")).toBeTruthy();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[16/9]")).toBeTruthy();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[21/9]")).toBeTruthy();(0,_vitest.expect)((0,_aspectRatio.parseAspectRatio)("aspect-[9/16]")).toBeTruthy();});(0,_vitest.it)("should differentiate between preset and arbitrary values",function(){var preset=(0,_aspectRatio.parseAspectRatio)("aspect-video");(0,_vitest.expect)(preset).toEqual({aspectRatio:16/9});var arbitrary=(0,_aspectRatio.parseAspectRatio)("aspect-[16/9]");(0,_vitest.expect)(arbitrary).toEqual({aspectRatio:16/9});(0,_vitest.expect)(preset).toEqual(arbitrary);});(0,_vitest.it)("should handle fractional results correctly",function(){var result=(0,_aspectRatio.parseAspectRatio)("aspect-[5/7]");(0,_vitest.expect)(result==null?void 0:result.aspectRatio).toBeCloseTo(0.714,3);var result2=(0,_aspectRatio.parseAspectRatio)("aspect-[3/4]");(0,_vitest.expect)(result2==null?void 0:result2.aspectRatio).toBe(0.75);});});