@robin-ux/native 0.1.3 → 0.1.5

package/build/components/Card.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import { spacing } from "../utils/styles";
+type CardVariant = "default" | "elevated" | "outlined";
+export interface CardProps extends Omit<ViewProps, "style"> {
+    variant?: CardVariant;
+    padding?: keyof typeof spacing;
+    style?: ViewProps["style"];
+    children: React.ReactNode;
+    bg?: "primary" | "secondary";
+}
+export declare function Card({ variant, padding, style, children, bg, ...props }: CardProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/build/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3D,OAAO,EAAyB,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEjE,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAEvD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CAChC;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAmB,EAAE,OAAc,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,qBA+BrG"}

package/build/components/Card.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { useTheme } from "../theme";
+import { borderRadius, shadows, spacing } from "../utils/styles";
+export function Card({ variant = "default", padding = "md", style, children, bg, ...props }) {
+    const { colors } = useTheme();
+    let backgroundColor = colors.card;
+    if (bg === "primary") {
+        backgroundColor = colors.background;
+    }
+    else if (bg === "secondary") {
+        backgroundColor = colors.background;
+    }
+    const variantStyles = {
+        default: {
+            backgroundColor: backgroundColor,
+        },
+        elevated: {
+            backgroundColor: backgroundColor,
+            ...shadows.md,
+        },
+        outlined: {
+            backgroundColor: backgroundColor,
+            borderWidth: 1,
+            borderColor: colors.border,
+        },
+    }[variant];
+    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];
+    return (<View style={cardStyle} {...props}>
+            {children}
+        </View>);
+}
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: borderRadius.lg,
+    },
+});
+//# sourceMappingURL=Card.js.map

package/build/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAYjE,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAa;IAClG,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC9B,IAAI,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC;IAClC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;QACnB,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IACxC,CAAC;SAAM,IAAI,EAAE,KAAK,WAAW,EAAE,CAAC;QAC5B,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC;IACxC,CAAC;IAED,MAAM,aAAa,GAAG;QAClB,OAAO,EAAE;YACL,eAAe,EAAE,eAAe;SACnC;QACD,QAAQ,EAAE;YACN,eAAe,EAAE,eAAe;YAChC,GAAG,OAAO,CAAC,EAAE;SAChB;QACD,QAAQ,EAAE;YACN,eAAe,EAAE,eAAe;YAChC,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,MAAM,CAAC,MAAM;SAC7B;KACJ,CAAC,OAAO,CAAC,CAAC;IAEX,MAAM,SAAS,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAErF,OAAO,CACH,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAC9B;YAAA,CAAC,QAAQ,CACb;QAAA,EAAE,IAAI,CAAC,CACV,CAAC;AACN,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC7B,IAAI,EAAE;QACF,YAAY,EAAE,YAAY,CAAC,EAAE;KAChC;CACJ,CAAC,CAAC","sourcesContent":["import React from \"react\";\nimport { StyleSheet, View, ViewProps } from \"react-native\";\nimport { useTheme } from \"../theme\";\nimport { borderRadius, shadows, spacing } from \"../utils/styles\";\n\ntype CardVariant = \"default\" | \"elevated\" | \"outlined\";\n\nexport interface CardProps extends Omit<ViewProps, \"style\"> {\n    variant?: CardVariant;\n    padding?: keyof typeof spacing;\n    style?: ViewProps[\"style\"];\n    children: React.ReactNode;\n    bg?: \"primary\" | \"secondary\";\n}\n\nexport function Card({ variant = \"default\", padding = \"md\", style, children, bg, ...props }: CardProps) {\n    const { colors } = useTheme();\n    let backgroundColor = colors.card;\n    if (bg === \"primary\") {\n        backgroundColor = colors.background;\n    } else if (bg === \"secondary\") {\n        backgroundColor = colors.background;\n    }\n\n    const variantStyles = {\n        default: {\n            backgroundColor: backgroundColor,\n        },\n        elevated: {\n            backgroundColor: backgroundColor,\n            ...shadows.md,\n        },\n        outlined: {\n            backgroundColor: backgroundColor,\n            borderWidth: 1,\n            borderColor: colors.border,\n        },\n    }[variant];\n\n    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];\n\n    return (\n        <View style={cardStyle} {...props}>\n            {children}\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    card: {\n        borderRadius: borderRadius.lg,\n    },\n});\n"]}

package/build/components/Input.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Control } from 'react-hook-form';
-import { TextInput, TextInputProps, ViewStyle } from 'react-native';
-export interface InputProps extends Omit<TextInputProps, 'style'> {
+import React from "react";
+import { Control } from "react-hook-form";
+import { TextInput, TextInputProps, ViewStyle } from "react-native";
+export interface InputProps extends Omit<TextInputProps, "style"> {
     /** Field label */
     label?: string;
     /** Error message to display */
@@ -9,7 +9,7 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     /** Helper text below input */
     helperText?: string;
     /** Custom input style */
-    style?: TextInputProps['style'];
+    style?: TextInputProps["style"];
     /** Container style */
     containerStyle?: ViewStyle;
     /** Input ref */
@@ -22,11 +22,13 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
     control?: Control<any>;
     /** Field name for React Hook Form (optional) */
     name?: string;
+    maxLength?: number;
+    required?: boolean;
 }
 /**
  * Base input wrapper providing label, error, and helper text layout.
  */
-export declare function BaseInput({ label, error, helperText, containerStyle, children, }: Pick<InputProps, 'label' | 'error' | 'helperText' | 'containerStyle' | 'children'>): React.JSX.Element;
+export declare function BaseInput({ label, error, helperText, containerStyle, children, maxLength, value, required, }: Pick<InputProps, "label" | "error" | "helperText" | "containerStyle" | "children" | "maxLength" | "value" | "required">): React.JSX.Element;
 /**
  * Password input with visibility toggle.
  *

package/build/components/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAM1E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,sBAAsB;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACxC,gDAAgD;IAChD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACvB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AASD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,GACT,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,gBAAgB,GAAG,UAAU,CAAC,qBAgCpF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuE9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoDtC,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAM1E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC7D,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,sBAAsB;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gBAAgB;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACxC,gDAAgD;IAChD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACvB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AASD;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,GACX,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,qBAwCzH;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2D9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6CtC,CAAC"}

package/build/components/Input.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import { useController } from 'react-hook-form';
-import { TextInput, View } from 'react-native';
-import { useThemeSafe } from '../theme';
-import { borderRadius, spacing, useThemedStyles } from '../utils/styles';
-import { Button } from './Button';
-import { Text } from './Text';
+import React, { useState } from "react";
+import { useController } from "react-hook-form";
+import { TextInput, View } from "react-native";
+import { useThemeSafe } from "../theme";
+import { borderRadius, spacing, useThemedStyles } from "../utils/styles";
+import { Button } from "./Button";
+import { Text } from "./Text";
 const inputStyles = {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.md,
@@ -14,7 +14,7 @@ const inputStyles = {
 /**
  * Base input wrapper providing label, error, and helper text layout.
  */
-export function BaseInput({ label, error, helperText, containerStyle, children, }) {
+export function BaseInput({ label, error, helperText, containerStyle, children, maxLength, value, required, }) {
     const styles = useThemedStyles((colors) => ({
         label: {
             marginBottom: spacing.xs,
@@ -24,19 +24,25 @@ export function BaseInput({ label, error, helperText, containerStyle, children,
         helperText: {
             marginTop: spacing.xs,
         },
+        charCount: {
+            textAlign: "right",
+        },
     }));
     return (<View style={containerStyle}>
-      {label && (<Text variant="body" weight="medium" style={styles.label}>
-          {label}
-        </Text>)}
-      {children}
-      {error && (<Text variant="caption" color="error" style={styles.helperText}>
-          {error}
-        </Text>)}
-      {!error && helperText && (<Text variant="caption" color="secondary" style={styles.helperText}>
-          {helperText}
-        </Text>)}
-    </View>);
+            {label && (<Text variant="body" weight="medium" style={styles.label}>
+                    {label} {required && <Text color="error">*</Text>}
+                </Text>)}
+            {children}
+            {error && (<Text variant="caption" color="error" style={styles.helperText}>
+                    {error}
+                </Text>)}
+            {!error && helperText && (<Text variant="caption" color="secondary" style={styles.helperText}>
+                    {helperText}
+                </Text>)}
+            {maxLength && (<Text variant="label" color="tertiary" style={styles.charCount}>
+                    {value?.length || 0}/{maxLength} characters
+                </Text>)}
+        </View>);
 }
 /**
  * Password input with visibility toggle.
@@ -68,28 +74,28 @@ export const PasswordInput = ({ value, onChangeText, style, onSubmitEditing, ref
     const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
     const inputRef = controller ? controller.field.ref : ref;
     const hasError = error || controller?.fieldState.error;
-    return (<BaseInput label={props.label} error={error || controller?.fieldState.error?.message} helperText={props.helperText} containerStyle={props.containerStyle}>
-      <View style={[
+    return (<BaseInput value={inputValue} label={props.label} error={error || controller?.fieldState.error?.message} helperText={props.helperText} containerStyle={props.containerStyle} required={props.required} maxLength={props.maxLength}>
+            <View style={[
             {
                 backgroundColor: colors.backgroundSecondary,
                 borderColor: hasError ? colors.error : colors.border,
                 borderWidth: hasError ? 1 : 0,
-                flexDirection: 'row',
-                alignItems: 'center',
+                flexDirection: "row",
+                alignItems: "center",
                 borderRadius: borderRadius.lg,
             },
             style,
         ]}>
-        <TextInput placeholderTextColor={colors.foregroundSecondary} ref={inputRef} {...props} style={[
+                <TextInput placeholderTextColor={colors.foregroundSecondary} ref={inputRef} {...props} style={[
             inputStyles,
             {
                 flex: 1,
                 color: colors.foreground,
             },
         ]} value={inputValue} onChangeText={inputOnChange} autoCapitalize="none" onBlur={inputOnBlur} onSubmitEditing={onSubmitEditing} secureTextEntry={!showPassword}/>
-        <Button variant="ghost" icon={showPassword ? 'eye-off' : 'eye'} size="sm" onPress={() => setShowPassword(!showPassword)}/>
-      </View>
-    </BaseInput>);
+                <Button variant="ghost" icon={showPassword ? "eye-off" : "eye"} size="sm" onPress={() => setShowPassword(!showPassword)}/>
+            </View>
+        </BaseInput>);
 };
 /**
  * Text input component with label, error, and helper text support.
@@ -121,8 +127,8 @@ export const Input = ({ value, error, onChangeText, onSubmitEditing, style, ref,
     const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
     const inputRef = controller ? controller.field.ref : ref;
     const hasError = error || controller?.fieldState.error;
-    return (<BaseInput label={props.label} error={error || controller?.fieldState.error?.message} helperText={props.helperText} containerStyle={props.containerStyle}>
-      <TextInput placeholderTextColor={colors.foregroundSecondary} ref={inputRef} value={inputValue} onChangeText={inputOnChange} onBlur={inputOnBlur} onSubmitEditing={onSubmitEditing} {...props} style={[
+    return (<BaseInput label={props.label} value={inputValue} error={error || controller?.fieldState.error?.message} helperText={props.helperText} containerStyle={props.containerStyle} required={props.required} maxLength={props.maxLength}>
+            <TextInput placeholderTextColor={colors.foregroundSecondary} ref={inputRef} value={inputValue} onChangeText={inputOnChange} onBlur={inputOnBlur} onSubmitEditing={onSubmitEditing} {...props} style={[
             inputStyles,
             {
                 backgroundColor: colors.backgroundSecondary,
@@ -133,6 +139,6 @@ export const Input = ({ value, error, onChangeText, onSubmitEditing, style, ref,
             },
             style,
         ]}/>
-    </BaseInput>);
+        </BaseInput>);
 };
 //# sourceMappingURL=Input.js.map

package/build/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Control, useController } from 'react-hook-form';\nimport { TextInput, TextInputProps, View, ViewStyle } from 'react-native';\nimport { useThemeSafe } from '../theme';\nimport { borderRadius, spacing, useThemedStyles } from '../utils/styles';\nimport { Button } from './Button';\nimport { Text } from './Text';\n\nexport interface InputProps extends Omit<TextInputProps, 'style'> {\n  /** Field label */\n  label?: string;\n  /** Error message to display */\n  error?: string;\n  /** Helper text below input */\n  helperText?: string;\n  /** Custom input style */\n  style?: TextInputProps['style'];\n  /** Container style */\n  containerStyle?: ViewStyle;\n  /** Input ref */\n  ref?: React.RefObject<TextInput | null>;\n  /** Element to render at the end of the input */\n  endElement?: React.ReactNode;\n  /** Child elements */\n  children?: React.ReactNode;\n  /** React Hook Form control object (optional) */\n  control?: Control<any>;\n  /** Field name for React Hook Form (optional) */\n  name?: string;\n}\n\nconst inputStyles = {\n  paddingHorizontal: spacing.md,\n  paddingVertical: spacing.md,\n  borderRadius: borderRadius.lg,\n  fontSize: 16,\n};\n\n/**\n * Base input wrapper providing label, error, and helper text layout.\n */\nexport function BaseInput({\n  label,\n  error,\n  helperText,\n  containerStyle,\n  children,\n}: Pick<InputProps, 'label' | 'error' | 'helperText' | 'containerStyle' | 'children'>) {\n  const styles = useThemedStyles((colors) => ({\n    label: {\n      marginBottom: spacing.xs,\n      color: colors.foregroundSecondary,\n      fontSize: 14,\n    },\n    helperText: {\n      marginTop: spacing.xs,\n    },\n  }));\n\n  return (\n    <View style={containerStyle}>\n      {label && (\n        <Text variant=\"body\" weight=\"medium\" style={styles.label}>\n          {label}\n        </Text>\n      )}\n      {children}\n      {error && (\n        <Text variant=\"caption\" color=\"error\" style={styles.helperText}>\n          {error}\n        </Text>\n      )}\n      {!error && helperText && (\n        <Text variant=\"caption\" color=\"secondary\" style={styles.helperText}>\n          {helperText}\n        </Text>\n      )}\n    </View>\n  );\n}\n\n/**\n * Password input with visibility toggle.\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   label=\"Password\"\n *   placeholder=\"Enter your password\"\n *   value={password}\n *   onChangeText={setPassword}\n * />\n *\n * // With React Hook Form\n * <PasswordInput\n *   label=\"Password\"\n *   control={control}\n *   name=\"password\"\n * />\n * ```\n */\nexport const PasswordInput: React.FC<InputProps> = ({\n  value,\n  onChangeText,\n  style,\n  onSubmitEditing,\n  ref,\n  error,\n  control,\n  name,\n  ...props\n}) => {\n  const [showPassword, setShowPassword] = useState(false);\n  const { colors } = useThemeSafe();\n\n  // Use useController if control and name are provided\n  const controller = control && name ? useController({ control, name }) : null;\n\n  const inputValue = controller ? controller.field.value : value;\n  const inputOnChange = controller ? controller.field.onChange : onChangeText;\n  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;\n  const inputRef = controller ? controller.field.ref : ref;\n\n  const hasError = error || controller?.fieldState.error;\n\n  return (\n    <BaseInput\n      label={props.label}\n      error={error || controller?.fieldState.error?.message}\n      helperText={props.helperText}\n      containerStyle={props.containerStyle}\n    >\n      <View\n        style={[\n          {\n            backgroundColor: colors.backgroundSecondary,\n            borderColor: hasError ? colors.error : colors.border,\n            borderWidth: hasError ? 1 : 0,\n            flexDirection: 'row',\n            alignItems: 'center',\n            borderRadius: borderRadius.lg,\n          },\n          style as ViewStyle,\n        ]}\n      >\n        <TextInput\n          placeholderTextColor={colors.foregroundSecondary}\n          ref={inputRef as any}\n          {...props}\n          style={[\n            inputStyles,\n            {\n              flex: 1,\n              color: colors.foreground,\n            },\n          ]}\n          value={inputValue}\n          onChangeText={inputOnChange}\n          autoCapitalize=\"none\"\n          onBlur={inputOnBlur}\n          onSubmitEditing={onSubmitEditing}\n          secureTextEntry={!showPassword}\n        />\n        <Button\n          variant=\"ghost\"\n          icon={showPassword ? 'eye-off' : 'eye'}\n          size=\"sm\"\n          onPress={() => setShowPassword(!showPassword)}\n        />\n      </View>\n    </BaseInput>\n  );\n};\n\n/**\n * Text input component with label, error, and helper text support.\n *\n * @example\n * ```tsx\n * <Input\n *   label=\"Email\"\n *   placeholder=\"Enter your email\"\n *   value={email}\n *   onChangeText={setEmail}\n *   keyboardType=\"email-address\"\n * />\n *\n * // With React Hook Form\n * <Input\n *   label=\"Email\"\n *   control={control}\n *   name=\"email\"\n * />\n * ```\n */\nexport const Input: React.FC<InputProps> = ({\n  value,\n  error,\n  onChangeText,\n  onSubmitEditing,\n  style,\n  ref,\n  control,\n  name,\n  ...props\n}) => {\n  const { colors } = useThemeSafe();\n\n  // Use useController if control and name are provided\n  const controller = control && name ? useController({ control, name }) : null;\n\n  const inputValue = controller ? controller.field.value : value;\n  const inputOnChange = controller ? controller.field.onChange : onChangeText;\n  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;\n  const inputRef = controller ? controller.field.ref : ref;\n\n  const hasError = error || controller?.fieldState.error;\n\n  return (\n    <BaseInput\n      label={props.label}\n      error={error || controller?.fieldState.error?.message}\n      helperText={props.helperText}\n      containerStyle={props.containerStyle}\n    >\n      <TextInput\n        placeholderTextColor={colors.foregroundSecondary}\n        ref={inputRef as any}\n        value={inputValue}\n        onChangeText={inputOnChange}\n        onBlur={inputOnBlur}\n        onSubmitEditing={onSubmitEditing}\n        {...props}\n        style={[\n          inputStyles,\n          {\n            backgroundColor: colors.backgroundSecondary,\n            color: colors.foreground,\n            borderColor: hasError ? colors.error : colors.border,\n            borderWidth: hasError ? 1 : 0,\n            borderRadius: borderRadius.lg,\n          },\n          style,\n        ]}\n      />\n    </BaseInput>\n  );\n};\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from \"react\";\nimport { Control, useController } from \"react-hook-form\";\nimport { TextInput, TextInputProps, View, ViewStyle } from \"react-native\";\nimport { useThemeSafe } from \"../theme\";\nimport { borderRadius, spacing, useThemedStyles } from \"../utils/styles\";\nimport { Button } from \"./Button\";\nimport { Text } from \"./Text\";\n\nexport interface InputProps extends Omit<TextInputProps, \"style\"> {\n    /** Field label */\n    label?: string;\n    /** Error message to display */\n    error?: string;\n    /** Helper text below input */\n    helperText?: string;\n    /** Custom input style */\n    style?: TextInputProps[\"style\"];\n    /** Container style */\n    containerStyle?: ViewStyle;\n    /** Input ref */\n    ref?: React.RefObject<TextInput | null>;\n    /** Element to render at the end of the input */\n    endElement?: React.ReactNode;\n    /** Child elements */\n    children?: React.ReactNode;\n    /** React Hook Form control object (optional) */\n    control?: Control<any>;\n    /** Field name for React Hook Form (optional) */\n    name?: string;\n    maxLength?: number;\n    required?: boolean;\n}\n\nconst inputStyles = {\n    paddingHorizontal: spacing.md,\n    paddingVertical: spacing.md,\n    borderRadius: borderRadius.lg,\n    fontSize: 16,\n};\n\n/**\n * Base input wrapper providing label, error, and helper text layout.\n */\nexport function BaseInput({\n    label,\n    error,\n    helperText,\n    containerStyle,\n    children,\n    maxLength,\n    value,\n    required,\n}: Pick<InputProps, \"label\" | \"error\" | \"helperText\" | \"containerStyle\" | \"children\" | \"maxLength\" | \"value\" | \"required\">) {\n    const styles = useThemedStyles((colors) => ({\n        label: {\n            marginBottom: spacing.xs,\n            color: colors.foregroundSecondary,\n            fontSize: 14,\n        },\n        helperText: {\n            marginTop: spacing.xs,\n        },\n        charCount: {\n            textAlign: \"right\",\n        },\n    }));\n\n    return (\n        <View style={containerStyle}>\n            {label && (\n                <Text variant=\"body\" weight=\"medium\" style={styles.label}>\n                    {label} {required && <Text color=\"error\">*</Text>}\n                </Text>\n            )}\n            {children}\n            {error && (\n                <Text variant=\"caption\" color=\"error\" style={styles.helperText}>\n                    {error}\n                </Text>\n            )}\n            {!error && helperText && (\n                <Text variant=\"caption\" color=\"secondary\" style={styles.helperText}>\n                    {helperText}\n                </Text>\n            )}\n            {maxLength && (\n                <Text variant=\"label\" color=\"tertiary\" style={styles.charCount}>\n                    {value?.length || 0}/{maxLength} characters\n                </Text>\n            )}\n        </View>\n    );\n}\n\n/**\n * Password input with visibility toggle.\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   label=\"Password\"\n *   placeholder=\"Enter your password\"\n *   value={password}\n *   onChangeText={setPassword}\n * />\n *\n * // With React Hook Form\n * <PasswordInput\n *   label=\"Password\"\n *   control={control}\n *   name=\"password\"\n * />\n * ```\n */\nexport const PasswordInput: React.FC<InputProps> = ({ value, onChangeText, style, onSubmitEditing, ref, error, control, name, ...props }) => {\n    const [showPassword, setShowPassword] = useState(false);\n    const { colors } = useThemeSafe();\n\n    // Use useController if control and name are provided\n    const controller = control && name ? useController({ control, name }) : null;\n\n    const inputValue = controller ? controller.field.value : value;\n    const inputOnChange = controller ? controller.field.onChange : onChangeText;\n    const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;\n    const inputRef = controller ? controller.field.ref : ref;\n\n    const hasError = error || controller?.fieldState.error;\n\n    return (\n        <BaseInput\n            value={inputValue}\n            label={props.label}\n            error={error || controller?.fieldState.error?.message}\n            helperText={props.helperText}\n            containerStyle={props.containerStyle}\n            required={props.required}\n            maxLength={props.maxLength}\n        >\n            <View\n                style={[\n                    {\n                        backgroundColor: colors.backgroundSecondary,\n                        borderColor: hasError ? colors.error : colors.border,\n                        borderWidth: hasError ? 1 : 0,\n                        flexDirection: \"row\",\n                        alignItems: \"center\",\n                        borderRadius: borderRadius.lg,\n                    },\n                    style as ViewStyle,\n                ]}\n            >\n                <TextInput\n                    placeholderTextColor={colors.foregroundSecondary}\n                    ref={inputRef as any}\n                    {...props}\n                    style={[\n                        inputStyles,\n                        {\n                            flex: 1,\n                            color: colors.foreground,\n                        },\n                    ]}\n                    value={inputValue}\n                    onChangeText={inputOnChange}\n                    autoCapitalize=\"none\"\n                    onBlur={inputOnBlur}\n                    onSubmitEditing={onSubmitEditing}\n                    secureTextEntry={!showPassword}\n                />\n                <Button variant=\"ghost\" icon={showPassword ? \"eye-off\" : \"eye\"} size=\"sm\" onPress={() => setShowPassword(!showPassword)} />\n            </View>\n        </BaseInput>\n    );\n};\n\n/**\n * Text input component with label, error, and helper text support.\n *\n * @example\n * ```tsx\n * <Input\n *   label=\"Email\"\n *   placeholder=\"Enter your email\"\n *   value={email}\n *   onChangeText={setEmail}\n *   keyboardType=\"email-address\"\n * />\n *\n * // With React Hook Form\n * <Input\n *   label=\"Email\"\n *   control={control}\n *   name=\"email\"\n * />\n * ```\n */\nexport const Input: React.FC<InputProps> = ({ value, error, onChangeText, onSubmitEditing, style, ref, control, name, ...props }) => {\n    const { colors } = useThemeSafe();\n\n    // Use useController if control and name are provided\n    const controller = control && name ? useController({ control, name }) : null;\n\n    const inputValue = controller ? controller.field.value : value;\n    const inputOnChange = controller ? controller.field.onChange : onChangeText;\n    const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;\n    const inputRef = controller ? controller.field.ref : ref;\n\n    const hasError = error || controller?.fieldState.error;\n\n    return (\n        <BaseInput\n            label={props.label}\n            value={inputValue}\n            error={error || controller?.fieldState.error?.message}\n            helperText={props.helperText}\n            containerStyle={props.containerStyle}\n            required={props.required}\n            maxLength={props.maxLength}\n        >\n            <TextInput\n                placeholderTextColor={colors.foregroundSecondary}\n                ref={inputRef as any}\n                value={inputValue}\n                onChangeText={inputOnChange}\n                onBlur={inputOnBlur}\n                onSubmitEditing={onSubmitEditing}\n                {...props}\n                style={[\n                    inputStyles,\n                    {\n                        backgroundColor: colors.backgroundSecondary,\n                        color: colors.foreground,\n                        borderColor: hasError ? colors.error : colors.border,\n                        borderWidth: hasError ? 1 : 0,\n                        borderRadius: borderRadius.lg,\n                    },\n                    style,\n                ]}\n            />\n        </BaseInput>\n    );\n};\n"]}

package/build/components/TextArea.d.ts

@@ -10,6 +10,7 @@ export interface TextAreaProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<ViewStyle>;
     control?: Control<any>;
     name?: string;
+    maxLength?: number;
 }
-export declare function TextArea({ label, error, helperText, minHeight, maxHeight, style, control, name, value, onChangeText, onBlur, ...props }: TextAreaProps): React.JSX.Element;
+export declare function TextArea({ label, error, helperText, minHeight, maxHeight, style, control, name, value, onChangeText, onBlur, maxLength, ...props }: TextAreaProps): React.JSX.Element;
 //# sourceMappingURL=TextArea.d.ts.map

package/build/components/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAa,cAAc,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAoE5J"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAiB,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAa,cAAc,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAKrF,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,SAAe,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,qBAkFvK"}

package/build/components/TextArea.js

@@ -4,7 +4,7 @@ import { TextInput, View } from "react-native";
 import { useTheme } from "../theme";
 import { borderRadius, spacing, useThemedStyles } from "../utils";
 import { Text } from "./Text";
-export function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, ...props }) {
+export function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, maxLength, ...props }) {
     const { colors } = useTheme();
     // Use useController if control and name are provided
     const controller = control && name ? useController({ control, name }) : null;
@@ -37,6 +37,13 @@ export function TextArea({ label, error, helperText, minHeight = 120, maxHeight,
         helperText: {
             marginTop: spacing.xs,
             fontSize: 12,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            paddingHorizontal: spacing.xs,
+        },
+        charCount: {
+            marginTop: spacing.xs,
+            fontSize: 12,
         },
     }));
     return (<View style={[styles.container, style]}>
@@ -44,12 +51,17 @@ export function TextArea({ label, error, helperText, minHeight = 120, maxHeight,
                     {label}
                 </Text>)}
             <TextInput ref={inputRef} value={inputValue} onChangeText={inputOnChange} onBlur={inputOnBlur} placeholderTextColor={colors.foregroundSecondary} multiline {...props} style={styles.textArea}/>
-            {(error || controller?.fieldState.error?.message) && (<Text variant="caption" color="error" style={styles.helperText}>
-                    {error || controller?.fieldState.error?.message}
-                </Text>)}
-            {!error && !controller?.fieldState.error && helperText && (<Text variant="caption" color="secondary" style={styles.helperText}>
-                    {helperText}
-                </Text>)}
+            <View style={styles.helperText}>
+                {(error || controller?.fieldState.error?.message) && (<Text variant="caption" color="error">
+                        {error || controller?.fieldState.error?.message}
+                    </Text>)}
+                {!error && !controller?.fieldState.error && helperText && (<Text variant="caption" color="secondary">
+                        {helperText}
+                    </Text>)}
+                {maxLength && (<Text variant="caption" color="tertiary">
+                        {inputValue.length}/{maxLength}
+                    </Text>)}
+            </View>
         </View>);
 }
 //# sourceMappingURL=TextArea.js.map

package/build/components/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Control, useController } from \"react-hook-form\";\nimport { StyleProp, TextInput, TextInputProps, View, ViewStyle } from \"react-native\";\nimport { useTheme } from \"../theme\";\nimport { borderRadius, spacing, useThemedStyles } from \"../utils\";\nimport { Text } from \"./Text\";\n\nexport interface TextAreaProps extends Omit<TextInputProps, \"style\"> {\n    label?: string;\n    error?: string;\n    helperText?: string;\n    minHeight?: number;\n    maxHeight?: number;\n    style?: StyleProp<ViewStyle>;\n    control?: Control<any>;\n    name?: string;\n}\n\nexport function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, ...props }: TextAreaProps) {\n    const { colors } = useTheme();\n\n    // Use useController if control and name are provided\n    const controller = control && name ? useController({ control, name }) : null;\n\n    const inputValue = controller ? controller.field.value : value;\n    const inputOnChange = controller ? controller.field.onChange : onChangeText;\n    const inputOnBlur = controller ? controller.field.onBlur : onBlur;\n    const inputRef = controller ? controller.field.ref : undefined;\n\n    const styles = useThemedStyles((colors) => ({\n        container: {\n            width: \"100%\",\n        },\n        label: {\n            marginBottom: spacing.xs,\n            color: colors.foregroundSecondary,\n            fontSize: 14,\n        },\n        textArea: {\n            backgroundColor: colors.backgroundSecondary,\n            borderRadius: borderRadius.lg,\n            paddingHorizontal: spacing.md,\n            paddingVertical: spacing.md,\n            color: colors.foreground,\n            fontSize: 16,\n            minHeight: minHeight,\n            maxHeight: maxHeight,\n            textAlignVertical: \"top\",\n            borderWidth: error || controller?.fieldState.error ? 1 : 0,\n            borderColor: error || controller?.fieldState.error ? colors.error : \"transparent\",\n        },\n        helperText: {\n            marginTop: spacing.xs,\n            fontSize: 12,\n        },\n    }));\n\n    return (\n        <View style={[styles.container, style]}>\n            {label && (\n                <Text variant=\"body\" weight=\"medium\" style={styles.label}>\n                    {label}\n                </Text>\n            )}\n            <TextInput\n                ref={inputRef as any}\n                value={inputValue}\n                onChangeText={inputOnChange}\n                onBlur={inputOnBlur}\n                placeholderTextColor={colors.foregroundSecondary}\n                multiline\n                {...props}\n                style={styles.textArea}\n            />\n            {(error || controller?.fieldState.error?.message) && (\n                <Text variant=\"caption\" color=\"error\" style={styles.helperText}>\n                    {error || controller?.fieldState.error?.message}\n                </Text>\n            )}\n            {!error && !controller?.fieldState.error && helperText && (\n                <Text variant=\"caption\" color=\"secondary\" style={styles.helperText}>\n                    {helperText}\n                </Text>\n            )}\n        </View>\n    );\n}\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/components/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport { Control, useController } from \"react-hook-form\";\nimport { StyleProp, TextInput, TextInputProps, View, ViewStyle } from \"react-native\";\nimport { useTheme } from \"../theme\";\nimport { borderRadius, spacing, useThemedStyles } from \"../utils\";\nimport { Text } from \"./Text\";\n\nexport interface TextAreaProps extends Omit<TextInputProps, \"style\"> {\n    label?: string;\n    error?: string;\n    helperText?: string;\n    minHeight?: number;\n    maxHeight?: number;\n    style?: StyleProp<ViewStyle>;\n    control?: Control<any>;\n    name?: string;\n    maxLength?: number;\n}\n\nexport function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, maxLength, ...props }: TextAreaProps) {\n    const { colors } = useTheme();\n\n    // Use useController if control and name are provided\n    const controller = control && name ? useController({ control, name }) : null;\n\n    const inputValue = controller ? controller.field.value : value;\n    const inputOnChange = controller ? controller.field.onChange : onChangeText;\n    const inputOnBlur = controller ? controller.field.onBlur : onBlur;\n    const inputRef = controller ? controller.field.ref : undefined;\n\n    const styles = useThemedStyles((colors) => ({\n        container: {\n            width: \"100%\",\n        },\n        label: {\n            marginBottom: spacing.xs,\n            color: colors.foregroundSecondary,\n            fontSize: 14,\n        },\n        textArea: {\n            backgroundColor: colors.backgroundSecondary,\n            borderRadius: borderRadius.lg,\n            paddingHorizontal: spacing.md,\n            paddingVertical: spacing.md,\n            color: colors.foreground,\n            fontSize: 16,\n            minHeight: minHeight,\n            maxHeight: maxHeight,\n            textAlignVertical: \"top\",\n            borderWidth: error || controller?.fieldState.error ? 1 : 0,\n            borderColor: error || controller?.fieldState.error ? colors.error : \"transparent\",\n        },\n        helperText: {\n            marginTop: spacing.xs,\n            fontSize: 12,\n            flexDirection: \"row\",\n            justifyContent: \"space-between\",\n            paddingHorizontal: spacing.xs,\n        },\n        charCount: {\n            marginTop: spacing.xs,\n            fontSize: 12,\n        },\n    }));\n\n    return (\n        <View style={[styles.container, style]}>\n            {label && (\n                <Text variant=\"body\" weight=\"medium\" style={styles.label}>\n                    {label}\n                </Text>\n            )}\n            <TextInput\n                ref={inputRef as any}\n                value={inputValue}\n                onChangeText={inputOnChange}\n                onBlur={inputOnBlur}\n                placeholderTextColor={colors.foregroundSecondary}\n                multiline\n                {...props}\n                style={styles.textArea}\n            />\n            <View style={styles.helperText}>\n                {(error || controller?.fieldState.error?.message) && (\n                    <Text variant=\"caption\" color=\"error\">\n                        {error || controller?.fieldState.error?.message}\n                    </Text>\n                )}\n                {!error && !controller?.fieldState.error && helperText && (\n                    <Text variant=\"caption\" color=\"secondary\">\n                        {helperText}\n                    </Text>\n                )}\n                {maxLength && (\n                    <Text variant=\"caption\" color=\"tertiary\">\n                        {inputValue.length}/{maxLength}\n                    </Text>\n                )}\n            </View>\n        </View>\n    );\n}\n"]}

package/build/components/index.d.ts

@@ -16,4 +16,6 @@ export { FormView } from "./FormView";
 export type { FormViewProps } from "./FormView";
 export { TextArea } from "./TextArea";
 export type { TextAreaProps } from "./TextArea";
+export { Card } from "./Card";
+export type { CardProps } from "./Card";
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAGvE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/build/components/index.js

@@ -13,4 +13,5 @@ export { DynamicStatusBar } from "./DynamicStatusBar";
 export { HeaderView } from "./HeaderView";
 export { FormView } from "./FormView";
 export { TextArea } from "./TextArea";
+export { Card } from "./Card";
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["// Button\nexport { Button } from \"./Button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./Button\";\n\n// Text\nexport { Text } from \"./Text\";\nexport type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from \"./Text\";\n\n// Input\nexport { BaseInput, Input, PasswordInput } from \"./Input\";\nexport type { InputProps } from \"./Input\";\n\n// SegmentedControl\nexport { SegmentedControl } from \"./SegmentedControl\";\nexport type { Segment, SegmentedControlProps } from \"./SegmentedControl\";\n\n// Badge\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeStatus } from \"./Badge\";\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from \"./DynamicStatusBar\";\nexport type { DynamicStatusBarProps } from \"./DynamicStatusBar\";\n\nexport { HeaderView } from \"./HeaderView\";\nexport type { HeaderViewProps } from \"./HeaderView\";\n\nexport { FormView } from \"./FormView\";\nexport type { FormViewProps } from \"./FormView\";\n\nexport { TextArea } from \"./TextArea\";\nexport type { TextAreaProps } from \"./TextArea\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO;AACP,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAQ;AACR,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG1D,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,QAAQ;AACR,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,mBAAmB;AACnB,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["// Button\nexport { Button } from \"./Button\";\nexport type { ButtonProps, ButtonSize, ButtonVariant } from \"./Button\";\n\n// Text\nexport { Text } from \"./Text\";\nexport type { TextAlign, TextColor, TextProps, TextVariant, TextWeight } from \"./Text\";\n\n// Input\nexport { BaseInput, Input, PasswordInput } from \"./Input\";\nexport type { InputProps } from \"./Input\";\n\n// SegmentedControl\nexport { SegmentedControl } from \"./SegmentedControl\";\nexport type { Segment, SegmentedControlProps } from \"./SegmentedControl\";\n\n// Badge\nexport { Badge } from \"./Badge\";\nexport type { BadgeProps, BadgeStatus } from \"./Badge\";\n\n// DynamicStatusBar\nexport { DynamicStatusBar } from \"./DynamicStatusBar\";\nexport type { DynamicStatusBarProps } from \"./DynamicStatusBar\";\n\nexport { HeaderView } from \"./HeaderView\";\nexport type { HeaderViewProps } from \"./HeaderView\";\n\nexport { FormView } from \"./FormView\";\nexport type { FormViewProps } from \"./FormView\";\n\nexport { TextArea } from \"./TextArea\";\nexport type { TextAreaProps } from \"./TextArea\";\n\nexport { Card } from \"./Card\";\nexport type { CardProps } from \"./Card\";\n"]}

package/build/index.d.ts

@@ -1,7 +1,7 @@
 export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
-export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, DynamicStatusBarProps, FormViewProps, InputProps, Segment, SegmentedControlProps, TextAlign, TextAreaProps, TextColor, TextProps, TextVariant, TextWeight, } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, CardProps, DynamicStatusBarProps, FormViewProps, InputProps, Segment, SegmentedControlProps, TextAlign, TextAreaProps, TextColor, TextProps, TextVariant, TextWeight, } from "./components";
 export { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from "./utils";
 export type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from "./utils";
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErJ,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGzF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExJ,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,aAAa,EACb,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,GACb,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAErJ,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGzF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE9J,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,SAAS,EACT,qBAAqB,EACrB,aAAa,EACb,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,aAAa,EACb,SAAS,EACT,SAAS,EACT,WAAW,EACX,UAAU,GACb,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAElH,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/build/index.js

@@ -4,7 +4,7 @@
 // Theme system
 export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from "./theme";
 // Components
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
 // Utilities
 export { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from "./utils";
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,0DAA0D;AAC1D,+EAA+E;AAE/E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIrJ,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAqBxJ,YAAY;AACZ,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// ============================================================================\n// @robin-ux/native - Themeable React Native UI Components\n// ============================================================================\n\n// Theme system\nexport { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from \"./theme\";\n\nexport type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from \"./theme\";\n\n// Components\nexport { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    DynamicStatusBarProps,\n    FormViewProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\n    TextAreaProps,\n    TextColor,\n    TextProps,\n    TextVariant,\n    TextWeight,\n} from \"./components\";\n\n// Utilities\nexport { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from \"./utils\";\n\nexport type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from \"./utils\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,0DAA0D;AAC1D,+EAA+E;AAE/E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIrJ,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsB9J,YAAY;AACZ,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC","sourcesContent":["// ============================================================================\n// @robin-ux/native - Themeable React Native UI Components\n// ============================================================================\n\n// Theme system\nexport { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme, ThemeContext, ThemeProvider, useTheme, useThemeSafe } from \"./theme\";\n\nexport type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from \"./theme\";\n\n// Components\nexport { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    CardProps,\n    DynamicStatusBarProps,\n    FormViewProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\n    TextAreaProps,\n    TextColor,\n    TextProps,\n    TextVariant,\n    TextWeight,\n} from \"./components\";\n\n// Utilities\nexport { borderRadius, createThemedStyle, layouts, shadows, spacing, typography, useThemedStyles } from \"./utils\";\n\nexport type { BorderRadiusKey, LayoutKey, ShadowKey, SpacingKey, TypographyVariant } from \"./utils\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@robin-ux/native",
-    "version": "0.1.3",
+    "version": "0.1.5",
     "description": "Themeable React Native UI components for Expo projects",
     "main": "build/index.js",
     "types": "build/index.d.ts",

package/src/components/Card.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { StyleSheet, View, ViewProps } from "react-native";
+import { useTheme } from "../theme";
+import { borderRadius, shadows, spacing } from "../utils/styles";
+
+type CardVariant = "default" | "elevated" | "outlined";
+
+export interface CardProps extends Omit<ViewProps, "style"> {
+    variant?: CardVariant;
+    padding?: keyof typeof spacing;
+    style?: ViewProps["style"];
+    children: React.ReactNode;
+    bg?: "primary" | "secondary";
+}
+
+export function Card({ variant = "default", padding = "md", style, children, bg, ...props }: CardProps) {
+    const { colors } = useTheme();
+    let backgroundColor = colors.card;
+    if (bg === "primary") {
+        backgroundColor = colors.background;
+    } else if (bg === "secondary") {
+        backgroundColor = colors.background;
+    }
+
+    const variantStyles = {
+        default: {
+            backgroundColor: backgroundColor,
+        },
+        elevated: {
+            backgroundColor: backgroundColor,
+            ...shadows.md,
+        },
+        outlined: {
+            backgroundColor: backgroundColor,
+            borderWidth: 1,
+            borderColor: colors.border,
+        },
+    }[variant];
+
+    const cardStyle = [styles.card, variantStyles, { padding: spacing[padding] }, style];
+
+    return (
+        <View style={cardStyle} {...props}>
+            {children}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: borderRadius.lg,
+    },
+});

package/src/components/Input.tsx

@@ -1,82 +1,95 @@
-import React, { useState } from 'react';
-import { Control, useController } from 'react-hook-form';
-import { TextInput, TextInputProps, View, ViewStyle } from 'react-native';
-import { useThemeSafe } from '../theme';
-import { borderRadius, spacing, useThemedStyles } from '../utils/styles';
-import { Button } from './Button';
-import { Text } from './Text';
+import React, { useState } from "react";
+import { Control, useController } from "react-hook-form";
+import { TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { useThemeSafe } from "../theme";
+import { borderRadius, spacing, useThemedStyles } from "../utils/styles";
+import { Button } from "./Button";
+import { Text } from "./Text";
 
-export interface InputProps extends Omit<TextInputProps, 'style'> {
-  /** Field label */
-  label?: string;
-  /** Error message to display */
-  error?: string;
-  /** Helper text below input */
-  helperText?: string;
-  /** Custom input style */
-  style?: TextInputProps['style'];
-  /** Container style */
-  containerStyle?: ViewStyle;
-  /** Input ref */
-  ref?: React.RefObject<TextInput | null>;
-  /** Element to render at the end of the input */
-  endElement?: React.ReactNode;
-  /** Child elements */
-  children?: React.ReactNode;
-  /** React Hook Form control object (optional) */
-  control?: Control<any>;
-  /** Field name for React Hook Form (optional) */
-  name?: string;
+export interface InputProps extends Omit<TextInputProps, "style"> {
+    /** Field label */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Helper text below input */
+    helperText?: string;
+    /** Custom input style */
+    style?: TextInputProps["style"];
+    /** Container style */
+    containerStyle?: ViewStyle;
+    /** Input ref */
+    ref?: React.RefObject<TextInput | null>;
+    /** Element to render at the end of the input */
+    endElement?: React.ReactNode;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** React Hook Form control object (optional) */
+    control?: Control<any>;
+    /** Field name for React Hook Form (optional) */
+    name?: string;
+    maxLength?: number;
+    required?: boolean;
 }
 
 const inputStyles = {
-  paddingHorizontal: spacing.md,
-  paddingVertical: spacing.md,
-  borderRadius: borderRadius.lg,
-  fontSize: 16,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    borderRadius: borderRadius.lg,
+    fontSize: 16,
 };
 
 /**
  * Base input wrapper providing label, error, and helper text layout.
  */
 export function BaseInput({
-  label,
-  error,
-  helperText,
-  containerStyle,
-  children,
-}: Pick<InputProps, 'label' | 'error' | 'helperText' | 'containerStyle' | 'children'>) {
-  const styles = useThemedStyles((colors) => ({
-    label: {
-      marginBottom: spacing.xs,
-      color: colors.foregroundSecondary,
-      fontSize: 14,
-    },
-    helperText: {
-      marginTop: spacing.xs,
-    },
-  }));
+    label,
+    error,
+    helperText,
+    containerStyle,
+    children,
+    maxLength,
+    value,
+    required,
+}: Pick<InputProps, "label" | "error" | "helperText" | "containerStyle" | "children" | "maxLength" | "value" | "required">) {
+    const styles = useThemedStyles((colors) => ({
+        label: {
+            marginBottom: spacing.xs,
+            color: colors.foregroundSecondary,
+            fontSize: 14,
+        },
+        helperText: {
+            marginTop: spacing.xs,
+        },
+        charCount: {
+            textAlign: "right",
+        },
+    }));
 
-  return (
-    <View style={containerStyle}>
-      {label && (
-        <Text variant="body" weight="medium" style={styles.label}>
-          {label}
-        </Text>
-      )}
-      {children}
-      {error && (
-        <Text variant="caption" color="error" style={styles.helperText}>
-          {error}
-        </Text>
-      )}
-      {!error && helperText && (
-        <Text variant="caption" color="secondary" style={styles.helperText}>
-          {helperText}
-        </Text>
-      )}
-    </View>
-  );
+    return (
+        <View style={containerStyle}>
+            {label && (
+                <Text variant="body" weight="medium" style={styles.label}>
+                    {label} {required && <Text color="error">*</Text>}
+                </Text>
+            )}
+            {children}
+            {error && (
+                <Text variant="caption" color="error" style={styles.helperText}>
+                    {error}
+                </Text>
+            )}
+            {!error && helperText && (
+                <Text variant="caption" color="secondary" style={styles.helperText}>
+                    {helperText}
+                </Text>
+            )}
+            {maxLength && (
+                <Text variant="label" color="tertiary" style={styles.charCount}>
+                    {value?.length || 0}/{maxLength} characters
+                </Text>
+            )}
+        </View>
+    );
 }
 
 /**
@@ -99,77 +112,65 @@ export function BaseInput({
  * />
  * ```
  */
-export const PasswordInput: React.FC<InputProps> = ({
-  value,
-  onChangeText,
-  style,
-  onSubmitEditing,
-  ref,
-  error,
-  control,
-  name,
-  ...props
-}) => {
-  const [showPassword, setShowPassword] = useState(false);
-  const { colors } = useThemeSafe();
+export const PasswordInput: React.FC<InputProps> = ({ value, onChangeText, style, onSubmitEditing, ref, error, control, name, ...props }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const { colors } = useThemeSafe();
 
-  // Use useController if control and name are provided
-  const controller = control && name ? useController({ control, name }) : null;
+    // Use useController if control and name are provided
+    const controller = control && name ? useController({ control, name }) : null;
 
-  const inputValue = controller ? controller.field.value : value;
-  const inputOnChange = controller ? controller.field.onChange : onChangeText;
-  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
-  const inputRef = controller ? controller.field.ref : ref;
+    const inputValue = controller ? controller.field.value : value;
+    const inputOnChange = controller ? controller.field.onChange : onChangeText;
+    const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
+    const inputRef = controller ? controller.field.ref : ref;
 
-  const hasError = error || controller?.fieldState.error;
+    const hasError = error || controller?.fieldState.error;
 
-  return (
-    <BaseInput
-      label={props.label}
-      error={error || controller?.fieldState.error?.message}
-      helperText={props.helperText}
-      containerStyle={props.containerStyle}
-    >
-      <View
-        style={[
-          {
-            backgroundColor: colors.backgroundSecondary,
-            borderColor: hasError ? colors.error : colors.border,
-            borderWidth: hasError ? 1 : 0,
-            flexDirection: 'row',
-            alignItems: 'center',
-            borderRadius: borderRadius.lg,
-          },
-          style as ViewStyle,
-        ]}
-      >
-        <TextInput
-          placeholderTextColor={colors.foregroundSecondary}
-          ref={inputRef as any}
-          {...props}
-          style={[
-            inputStyles,
-            {
-              flex: 1,
-              color: colors.foreground,
-            },
-          ]}
-          value={inputValue}
-          onChangeText={inputOnChange}
-          autoCapitalize="none"
-          onBlur={inputOnBlur}
-          onSubmitEditing={onSubmitEditing}
-          secureTextEntry={!showPassword}
-        />
-        <Button
-          variant="ghost"
-          icon={showPassword ? 'eye-off' : 'eye'}
-          size="sm"
-          onPress={() => setShowPassword(!showPassword)}
-        />
-      </View>
-    </BaseInput>
-  );
+    return (
+        <BaseInput
+            value={inputValue}
+            label={props.label}
+            error={error || controller?.fieldState.error?.message}
+            helperText={props.helperText}
+            containerStyle={props.containerStyle}
+            required={props.required}
+            maxLength={props.maxLength}
+        >
+            <View
+                style={[
+                    {
+                        backgroundColor: colors.backgroundSecondary,
+                        borderColor: hasError ? colors.error : colors.border,
+                        borderWidth: hasError ? 1 : 0,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        borderRadius: borderRadius.lg,
+                    },
+                    style as ViewStyle,
+                ]}
+            >
+                <TextInput
+                    placeholderTextColor={colors.foregroundSecondary}
+                    ref={inputRef as any}
+                    {...props}
+                    style={[
+                        inputStyles,
+                        {
+                            flex: 1,
+                            color: colors.foreground,
+                        },
+                    ]}
+                    value={inputValue}
+                    onChangeText={inputOnChange}
+                    autoCapitalize="none"
+                    onBlur={inputOnBlur}
+                    onSubmitEditing={onSubmitEditing}
+                    secureTextEntry={!showPassword}
+                />
+                <Button variant="ghost" icon={showPassword ? "eye-off" : "eye"} size="sm" onPress={() => setShowPassword(!showPassword)} />
+            </View>
+        </BaseInput>
+    );
 };
 
 /**
@@ -193,56 +194,49 @@ export const PasswordInput: React.FC<InputProps> = ({
  * />
  * ```
  */
-export const Input: React.FC<InputProps> = ({
-  value,
-  error,
-  onChangeText,
-  onSubmitEditing,
-  style,
-  ref,
-  control,
-  name,
-  ...props
-}) => {
-  const { colors } = useThemeSafe();
+export const Input: React.FC<InputProps> = ({ value, error, onChangeText, onSubmitEditing, style, ref, control, name, ...props }) => {
+    const { colors } = useThemeSafe();
 
-  // Use useController if control and name are provided
-  const controller = control && name ? useController({ control, name }) : null;
+    // Use useController if control and name are provided
+    const controller = control && name ? useController({ control, name }) : null;
 
-  const inputValue = controller ? controller.field.value : value;
-  const inputOnChange = controller ? controller.field.onChange : onChangeText;
-  const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
-  const inputRef = controller ? controller.field.ref : ref;
+    const inputValue = controller ? controller.field.value : value;
+    const inputOnChange = controller ? controller.field.onChange : onChangeText;
+    const inputOnBlur = controller ? controller.field.onBlur : props.onBlur;
+    const inputRef = controller ? controller.field.ref : ref;
 
-  const hasError = error || controller?.fieldState.error;
+    const hasError = error || controller?.fieldState.error;
 
-  return (
-    <BaseInput
-      label={props.label}
-      error={error || controller?.fieldState.error?.message}
-      helperText={props.helperText}
-      containerStyle={props.containerStyle}
-    >
-      <TextInput
-        placeholderTextColor={colors.foregroundSecondary}
-        ref={inputRef as any}
-        value={inputValue}
-        onChangeText={inputOnChange}
-        onBlur={inputOnBlur}
-        onSubmitEditing={onSubmitEditing}
-        {...props}
-        style={[
-          inputStyles,
-          {
-            backgroundColor: colors.backgroundSecondary,
-            color: colors.foreground,
-            borderColor: hasError ? colors.error : colors.border,
-            borderWidth: hasError ? 1 : 0,
-            borderRadius: borderRadius.lg,
-          },
-          style,
-        ]}
-      />
-    </BaseInput>
-  );
+    return (
+        <BaseInput
+            label={props.label}
+            value={inputValue}
+            error={error || controller?.fieldState.error?.message}
+            helperText={props.helperText}
+            containerStyle={props.containerStyle}
+            required={props.required}
+            maxLength={props.maxLength}
+        >
+            <TextInput
+                placeholderTextColor={colors.foregroundSecondary}
+                ref={inputRef as any}
+                value={inputValue}
+                onChangeText={inputOnChange}
+                onBlur={inputOnBlur}
+                onSubmitEditing={onSubmitEditing}
+                {...props}
+                style={[
+                    inputStyles,
+                    {
+                        backgroundColor: colors.backgroundSecondary,
+                        color: colors.foreground,
+                        borderColor: hasError ? colors.error : colors.border,
+                        borderWidth: hasError ? 1 : 0,
+                        borderRadius: borderRadius.lg,
+                    },
+                    style,
+                ]}
+            />
+        </BaseInput>
+    );
 };

package/src/components/TextArea.tsx

@@ -14,9 +14,10 @@ export interface TextAreaProps extends Omit<TextInputProps, "style"> {
     style?: StyleProp<ViewStyle>;
     control?: Control<any>;
     name?: string;
+    maxLength?: number;
 }
 
-export function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, ...props }: TextAreaProps) {
+export function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, maxLength, ...props }: TextAreaProps) {
     const { colors } = useTheme();
 
     // Use useController if control and name are provided
@@ -52,6 +53,13 @@ export function TextArea({ label, error, helperText, minHeight = 120, maxHeight,
         helperText: {
             marginTop: spacing.xs,
             fontSize: 12,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            paddingHorizontal: spacing.xs,
+        },
+        charCount: {
+            marginTop: spacing.xs,
+            fontSize: 12,
         },
     }));
 
@@ -72,16 +80,23 @@ export function TextArea({ label, error, helperText, minHeight = 120, maxHeight,
                 {...props}
                 style={styles.textArea}
             />
-            {(error || controller?.fieldState.error?.message) && (
-                <Text variant="caption" color="error" style={styles.helperText}>
-                    {error || controller?.fieldState.error?.message}
-                </Text>
-            )}
-            {!error && !controller?.fieldState.error && helperText && (
-                <Text variant="caption" color="secondary" style={styles.helperText}>
-                    {helperText}
-                </Text>
-            )}
+            <View style={styles.helperText}>
+                {(error || controller?.fieldState.error?.message) && (
+                    <Text variant="caption" color="error">
+                        {error || controller?.fieldState.error?.message}
+                    </Text>
+                )}
+                {!error && !controller?.fieldState.error && helperText && (
+                    <Text variant="caption" color="secondary">
+                        {helperText}
+                    </Text>
+                )}
+                {maxLength && (
+                    <Text variant="caption" color="tertiary">
+                        {inputValue.length}/{maxLength}
+                    </Text>
+                )}
+            </View>
         </View>
     );
 }

package/src/components/index.ts

@@ -30,3 +30,6 @@ export type { FormViewProps } from "./FormView";
 
 export { TextArea } from "./TextArea";
 export type { TextAreaProps } from "./TextArea";
+
+export { Card } from "./Card";
+export type { CardProps } from "./Card";

package/src/index.ts

@@ -8,7 +8,7 @@ export { defaultDarkColors, defaultDarkTheme, defaultLightColors, defaultTheme,
 export type { Theme, ThemeColors, ThemeContextValue, ThemeProviderProps } from "./theme";
 
 // Components
-export { Badge, BaseInput, Button, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
 
 export type {
     BadgeProps,
@@ -16,6 +16,7 @@ export type {
     ButtonProps,
     ButtonSize,
     ButtonVariant,
+    CardProps,
     DynamicStatusBarProps,
     FormViewProps,
     InputProps,