@robin-ux/native 0.1.2 → 0.1.4

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/FormView.d.ts

@@ -0,0 +1,18 @@
+import { Ionicons } from "@expo/vector-icons";
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Edge } from "react-native-safe-area-context";
+export interface FormViewProps {
+    title: string;
+    onBack?: () => void;
+    backIcon?: keyof typeof Ionicons.glyphMap;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    loading?: boolean;
+    edges?: Edge[];
+    containerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    isModal?: boolean;
+}
+export declare function FormView({ title, onBack, backIcon, children, footer, loading, edges, containerStyle, contentContainerStyle, isModal, }: FormViewProps): React.JSX.Element;
+//# sourceMappingURL=FormView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormView.d.ts","sourceRoot":"","sources":["../../src/components/FormView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA8C,SAAS,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AACxH,OAAO,EAAE,IAAI,EAAgB,MAAM,gCAAgC,CAAC;AAKpE,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,MAAM,EACN,QAAuB,EACvB,QAAQ,EACR,MAAM,EACN,OAAe,EACf,KAA0C,EAC1C,cAAc,EACd,qBAAqB,EACrB,OAAe,GAClB,EAAE,aAAa,qBAoEf"}

package/build/components/FormView.js

@@ -0,0 +1,68 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useTheme } from "../theme";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { Text } from "./Text";
+export function FormView({ title, onBack, backIcon = "arrow-back", children, footer, loading = false, edges = ["top", "left", "right", "bottom"], containerStyle, contentContainerStyle, isModal = false, }) {
+    const { isDark, colors } = useTheme();
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: isModal ? "transparent" : colors.background,
+        },
+        header: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.md,
+            borderBottomWidth: isModal ? 0 : 1,
+            borderBottomColor: colors.border,
+        },
+        headerTitle: {
+            flex: 1,
+            textAlign: "left",
+        },
+        backButton: {
+            marginRight: spacing.md,
+            padding: 4,
+        },
+        formScrollView: {
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.lg,
+        },
+        footer: {
+            paddingHorizontal: spacing.lg,
+            paddingBottom: spacing.xl,
+            paddingTop: spacing.md,
+        },
+    }));
+    const content = (<KeyboardAvoidingView style={layouts.flex1} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+            <View style={styles.header}>
+                {onBack && (<TouchableOpacity onPress={onBack} style={styles.backButton} disabled={loading}>
+                        <Ionicons name={backIcon} size={24} color={colors.icon}/>
+                    </TouchableOpacity>)}
+                <Text variant="subheading" weight="extrabold" style={styles.headerTitle}>
+                    {title}
+                </Text>
+                {onBack && !isModal && <View style={{ width: 32 }}/>}
+            </View>
+
+            <ScrollView style={layouts.flex1} contentContainerStyle={contentContainerStyle} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+                <View style={[styles.formScrollView, containerStyle]}>{children}</View>
+            </ScrollView>
+
+            {footer && <View style={styles.footer}>{footer}</View>}
+        </KeyboardAvoidingView>);
+    if (isModal) {
+        return <View style={styles.container}>{content}</View>;
+    }
+    return (<SafeAreaView style={styles.container} edges={edges}>
+            <StatusBar style={isDark ? "light" : "dark"}/>
+            {content}
+        </SafeAreaView>);
+}
+//# sourceMappingURL=FormView.js.map

package/build/components/FormView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormView.js","sourceRoot":"","sources":["../../src/components/FormView.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Ionicons } from \"@expo/vector-icons\";\nimport { StatusBar } from \"expo-status-bar\";\nimport React from \"react\";\nimport { KeyboardAvoidingView, Platform, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle } from \"react-native\";\nimport { Edge, SafeAreaView } from \"react-native-safe-area-context\";\nimport { useTheme } from \"../theme\";\nimport { layouts, spacing, useThemedStyles } from \"../utils\";\nimport { Text } from \"./Text\";\n\nexport interface FormViewProps {\n    title: string;\n    onBack?: () => void;\n    backIcon?: keyof typeof Ionicons.glyphMap;\n    children: React.ReactNode;\n    footer?: React.ReactNode;\n    loading?: boolean;\n    edges?: Edge[];\n    containerStyle?: StyleProp<ViewStyle>;\n    contentContainerStyle?: StyleProp<ViewStyle>;\n    isModal?: boolean;\n}\n\nexport function FormView({\n    title,\n    onBack,\n    backIcon = \"arrow-back\",\n    children,\n    footer,\n    loading = false,\n    edges = [\"top\", \"left\", \"right\", \"bottom\"],\n    containerStyle,\n    contentContainerStyle,\n    isModal = false,\n}: FormViewProps) {\n    const { isDark, colors } = useTheme();\n\n    const styles = useThemedStyles((colors) => ({\n        container: {\n            flex: 1,\n            backgroundColor: isModal ? \"transparent\" : colors.background,\n        },\n        header: {\n            flexDirection: \"row\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            paddingHorizontal: spacing.lg,\n            paddingVertical: spacing.md,\n            borderBottomWidth: isModal ? 0 : 1,\n            borderBottomColor: colors.border,\n        },\n        headerTitle: {\n            flex: 1,\n            textAlign: \"left\",\n        },\n        backButton: {\n            marginRight: spacing.md,\n            padding: 4,\n        },\n        formScrollView: {\n            paddingHorizontal: spacing.lg,\n            paddingVertical: spacing.lg,\n        },\n        footer: {\n            paddingHorizontal: spacing.lg,\n            paddingBottom: spacing.xl,\n            paddingTop: spacing.md,\n        },\n    }));\n\n    const content = (\n        <KeyboardAvoidingView style={layouts.flex1} behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}>\n            <View style={styles.header}>\n                {onBack && (\n                    <TouchableOpacity onPress={onBack} style={styles.backButton} disabled={loading}>\n                        <Ionicons name={backIcon} size={24} color={colors.icon} />\n                    </TouchableOpacity>\n                )}\n                <Text variant=\"subheading\" weight=\"extrabold\" style={styles.headerTitle}>\n                    {title}\n                </Text>\n                {onBack && !isModal && <View style={{ width: 32 }} />}\n            </View>\n\n            <ScrollView style={layouts.flex1} contentContainerStyle={contentContainerStyle} keyboardShouldPersistTaps=\"handled\" showsVerticalScrollIndicator={false}>\n                <View style={[styles.formScrollView, containerStyle]}>{children}</View>\n            </ScrollView>\n\n            {footer && <View style={styles.footer}>{footer}</View>}\n        </KeyboardAvoidingView>\n    );\n\n    if (isModal) {\n        return <View style={styles.container}>{content}</View>;\n    }\n\n    return (\n        <SafeAreaView style={styles.container} edges={edges}>\n            <StatusBar style={isDark ? \"light\" : \"dark\"} />\n            {content}\n        </SafeAreaView>\n    );\n}\n"]}

package/build/components/TextArea.d.ts

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

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

@@ -0,0 +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"}

package/build/components/TextArea.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { useController } from "react-hook-form";
+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 }) {
+    const { colors } = useTheme();
+    // 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 : onBlur;
+    const inputRef = controller ? controller.field.ref : undefined;
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            width: "100%",
+        },
+        label: {
+            marginBottom: spacing.xs,
+            color: colors.foregroundSecondary,
+            fontSize: 14,
+        },
+        textArea: {
+            backgroundColor: colors.backgroundSecondary,
+            borderRadius: borderRadius.lg,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.md,
+            color: colors.foreground,
+            fontSize: 16,
+            minHeight: minHeight,
+            maxHeight: maxHeight,
+            textAlignVertical: "top",
+            borderWidth: error || controller?.fieldState.error ? 1 : 0,
+            borderColor: error || controller?.fieldState.error ? colors.error : "transparent",
+        },
+        helperText: {
+            marginTop: spacing.xs,
+            fontSize: 12,
+        },
+    }));
+    return (<View style={[styles.container, style]}>
+            {label && (<Text variant="body" weight="medium" style={styles.label}>
+                    {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>);
+}
+//# sourceMappingURL=TextArea.js.map

package/build/components/TextArea.js.map

@@ -0,0 +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"]}

package/build/components/index.d.ts

@@ -12,4 +12,10 @@ export { DynamicStatusBar } from "./DynamicStatusBar";
 export type { DynamicStatusBarProps } from "./DynamicStatusBar";
 export { HeaderView } from "./HeaderView";
 export type { HeaderViewProps } from "./HeaderView";
+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"}
+{"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

@@ -11,4 +11,7 @@ export { Badge } from "./Badge";
 // DynamicStatusBar
 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","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"]}
+{"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, HeaderView, Input, PasswordInput, SegmentedControl, Text } from "./components";
-export type { BadgeProps, BadgeStatus, ButtonProps, ButtonSize, ButtonVariant, DynamicStatusBarProps, InputProps, Segment, SegmentedControlProps, TextAlign, 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,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpI,YAAY,EACR,UAAU,EACV,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,OAAO,EACP,qBAAqB,EACrB,SAAS,EACT,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, HeaderView, Input, PasswordInput, SegmentedControl, Text } 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,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAmBpI,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, HeaderView, Input, PasswordInput, SegmentedControl, Text } from \"./components\";\n\nexport type {\n    BadgeProps,\n    BadgeStatus,\n    ButtonProps,\n    ButtonSize,\n    ButtonVariant,\n    DynamicStatusBarProps,\n    InputProps,\n    Segment,\n    SegmentedControlProps,\n    TextAlign,\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/build/theme/defaultTheme.d.ts

@@ -1,4 +1,4 @@
-import { Theme, ThemeColors } from './types';
+import { Theme, ThemeColors } from "./types";
 /**
  * Default light theme colors - a neutral, accessible color palette.
  */

package/build/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAgChC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAgC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,WAiChC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,WAiC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC"}

package/build/theme/defaultTheme.js

@@ -3,62 +3,64 @@
  */
 export const defaultLightColors = {
     // Backgrounds
-    background: '#ffffff',
-    backgroundSecondary: '#f5f5f5',
+    background: "#ffffff",
+    backgroundSecondary: "#f5f5f5",
     // Foreground (text)
-    foreground: '#1a1a1a',
-    foregroundSecondary: '#666666',
-    foregroundTertiary: '#999999',
+    foreground: "#1a1a1a",
+    foregroundSecondary: "#666666",
+    foregroundTertiary: "#999999",
     // Primary brand colors
-    primary: '#3b82f6',
-    primaryLight: '#60a5fa',
-    primaryDark: '#2563eb',
+    primary: "#3b82f6",
+    primaryLight: "#60a5fa",
+    primaryDark: "#2563eb",
     // Accent colors
-    accent: '#8b5cf6',
-    accentLight: '#a78bfa',
+    accent: "#8b5cf6",
+    accentLight: "#a78bfa",
+    icon: "#1a1a1a",
     // Semantic/status colors
-    destructive: '#ef4444',
-    destructiveForeground: '#ffffff',
-    success: '#10b981',
-    warning: '#f59e0b',
-    error: '#ef4444',
-    info: '#3b82f6',
+    destructive: "#ef4444",
+    destructiveForeground: "#ffffff",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
     // UI element colors
-    border: '#e5e5e5',
-    muted: '#f5f5f5',
-    mutedForeground: '#666666',
-    card: '#ffffff',
+    border: "#e5e5e5",
+    muted: "#f5f5f5",
+    mutedForeground: "#666666",
+    card: "#ffffff",
 };
 /**
  * Default dark theme colors - a neutral, accessible dark color palette.
  */
 export const defaultDarkColors = {
     // Backgrounds
-    background: '#0a0a0a',
-    backgroundSecondary: '#171717',
+    background: "#0a0a0a",
+    backgroundSecondary: "#171717",
     // Foreground (text)
-    foreground: '#fafafa',
-    foregroundSecondary: '#a3a3a3',
-    foregroundTertiary: '#737373',
+    foreground: "#fafafa",
+    foregroundSecondary: "#a3a3a3",
+    foregroundTertiary: "#737373",
     // Primary brand colors
-    primary: '#60a5fa',
-    primaryLight: '#93c5fd',
-    primaryDark: '#3b82f6',
+    primary: "#60a5fa",
+    primaryLight: "#93c5fd",
+    primaryDark: "#3b82f6",
     // Accent colors
-    accent: '#a78bfa',
-    accentLight: '#c4b5fd',
+    accent: "#a78bfa",
+    accentLight: "#c4b5fd",
+    icon: "#fafafa",
     // Semantic/status colors
-    destructive: '#f87171',
-    destructiveForeground: '#ffffff',
-    success: '#34d399',
-    warning: '#fbbf24',
-    error: '#f87171',
-    info: '#60a5fa',
+    destructive: "#f87171",
+    destructiveForeground: "#ffffff",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#60a5fa",
     // UI element colors
-    border: '#262626',
-    muted: '#262626',
-    mutedForeground: '#a3a3a3',
-    card: '#171717',
+    border: "#262626",
+    muted: "#262626",
+    mutedForeground: "#a3a3a3",
+    card: "#171717",
 };
 /**
  * Default light theme - used as fallback when no ThemeProvider is present.

package/build/theme/defaultTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.js","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAgB;IAC7C,cAAc;IACd,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAE9B,oBAAoB;IACpB,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,kBAAkB,EAAE,SAAS;IAE7B,uBAAuB;IACvB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IAEtB,gBAAgB;IAChB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IAEtB,yBAAyB;IACzB,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IAEf,oBAAoB;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,cAAc;IACd,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAE9B,oBAAoB;IACpB,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,kBAAkB,EAAE,SAAS;IAE7B,uBAAuB;IACvB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IAEtB,gBAAgB;IAChB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IAEtB,yBAAyB;IACzB,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IAEf,oBAAoB;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,IAAI,EAAE,SAAS;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,MAAM,EAAE,kBAAkB;IAC1B,MAAM,EAAE,KAAK;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,iBAAiB;IACzB,MAAM,EAAE,IAAI;CACb,CAAC","sourcesContent":["import { Theme, ThemeColors } from './types';\n\n/**\n * Default light theme colors - a neutral, accessible color palette.\n */\nexport const defaultLightColors: ThemeColors = {\n  // Backgrounds\n  background: '#ffffff',\n  backgroundSecondary: '#f5f5f5',\n\n  // Foreground (text)\n  foreground: '#1a1a1a',\n  foregroundSecondary: '#666666',\n  foregroundTertiary: '#999999',\n\n  // Primary brand colors\n  primary: '#3b82f6',\n  primaryLight: '#60a5fa',\n  primaryDark: '#2563eb',\n\n  // Accent colors\n  accent: '#8b5cf6',\n  accentLight: '#a78bfa',\n\n  // Semantic/status colors\n  destructive: '#ef4444',\n  destructiveForeground: '#ffffff',\n  success: '#10b981',\n  warning: '#f59e0b',\n  error: '#ef4444',\n  info: '#3b82f6',\n\n  // UI element colors\n  border: '#e5e5e5',\n  muted: '#f5f5f5',\n  mutedForeground: '#666666',\n  card: '#ffffff',\n};\n\n/**\n * Default dark theme colors - a neutral, accessible dark color palette.\n */\nexport const defaultDarkColors: ThemeColors = {\n  // Backgrounds\n  background: '#0a0a0a',\n  backgroundSecondary: '#171717',\n\n  // Foreground (text)\n  foreground: '#fafafa',\n  foregroundSecondary: '#a3a3a3',\n  foregroundTertiary: '#737373',\n\n  // Primary brand colors\n  primary: '#60a5fa',\n  primaryLight: '#93c5fd',\n  primaryDark: '#3b82f6',\n\n  // Accent colors\n  accent: '#a78bfa',\n  accentLight: '#c4b5fd',\n\n  // Semantic/status colors\n  destructive: '#f87171',\n  destructiveForeground: '#ffffff',\n  success: '#34d399',\n  warning: '#fbbf24',\n  error: '#f87171',\n  info: '#60a5fa',\n\n  // UI element colors\n  border: '#262626',\n  muted: '#262626',\n  mutedForeground: '#a3a3a3',\n  card: '#171717',\n};\n\n/**\n * Default light theme - used as fallback when no ThemeProvider is present.\n */\nexport const defaultTheme: Theme = {\n  colors: defaultLightColors,\n  isDark: false,\n};\n\n/**\n * Default dark theme variant.\n */\nexport const defaultDarkTheme: Theme = {\n  colors: defaultDarkColors,\n  isDark: true,\n};\n"]}
+{"version":3,"file":"defaultTheme.js","sourceRoot":"","sources":["../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAgB;IAC3C,cAAc;IACd,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAE9B,oBAAoB;IACpB,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,kBAAkB,EAAE,SAAS;IAE7B,uBAAuB;IACvB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IAEtB,gBAAgB;IAChB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IAEf,yBAAyB;IACzB,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IAEf,oBAAoB;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,IAAI,EAAE,SAAS;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC1C,cAAc;IACd,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAE9B,oBAAoB;IACpB,UAAU,EAAE,SAAS;IACrB,mBAAmB,EAAE,SAAS;IAC9B,kBAAkB,EAAE,SAAS;IAE7B,uBAAuB;IACvB,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,SAAS;IACvB,WAAW,EAAE,SAAS;IAEtB,gBAAgB;IAChB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,SAAS;IAEf,yBAAyB;IACzB,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IAEf,oBAAoB;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,IAAI,EAAE,SAAS;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAU;IAC/B,MAAM,EAAE,kBAAkB;IAC1B,MAAM,EAAE,KAAK;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACnC,MAAM,EAAE,iBAAiB;IACzB,MAAM,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { Theme, ThemeColors } from \"./types\";\n\n/**\n * Default light theme colors - a neutral, accessible color palette.\n */\nexport const defaultLightColors: ThemeColors = {\n    // Backgrounds\n    background: \"#ffffff\",\n    backgroundSecondary: \"#f5f5f5\",\n\n    // Foreground (text)\n    foreground: \"#1a1a1a\",\n    foregroundSecondary: \"#666666\",\n    foregroundTertiary: \"#999999\",\n\n    // Primary brand colors\n    primary: \"#3b82f6\",\n    primaryLight: \"#60a5fa\",\n    primaryDark: \"#2563eb\",\n\n    // Accent colors\n    accent: \"#8b5cf6\",\n    accentLight: \"#a78bfa\",\n    icon: \"#1a1a1a\",\n\n    // Semantic/status colors\n    destructive: \"#ef4444\",\n    destructiveForeground: \"#ffffff\",\n    success: \"#10b981\",\n    warning: \"#f59e0b\",\n    error: \"#ef4444\",\n    info: \"#3b82f6\",\n\n    // UI element colors\n    border: \"#e5e5e5\",\n    muted: \"#f5f5f5\",\n    mutedForeground: \"#666666\",\n    card: \"#ffffff\",\n};\n\n/**\n * Default dark theme colors - a neutral, accessible dark color palette.\n */\nexport const defaultDarkColors: ThemeColors = {\n    // Backgrounds\n    background: \"#0a0a0a\",\n    backgroundSecondary: \"#171717\",\n\n    // Foreground (text)\n    foreground: \"#fafafa\",\n    foregroundSecondary: \"#a3a3a3\",\n    foregroundTertiary: \"#737373\",\n\n    // Primary brand colors\n    primary: \"#60a5fa\",\n    primaryLight: \"#93c5fd\",\n    primaryDark: \"#3b82f6\",\n\n    // Accent colors\n    accent: \"#a78bfa\",\n    accentLight: \"#c4b5fd\",\n    icon: \"#fafafa\",\n\n    // Semantic/status colors\n    destructive: \"#f87171\",\n    destructiveForeground: \"#ffffff\",\n    success: \"#34d399\",\n    warning: \"#fbbf24\",\n    error: \"#f87171\",\n    info: \"#60a5fa\",\n\n    // UI element colors\n    border: \"#262626\",\n    muted: \"#262626\",\n    mutedForeground: \"#a3a3a3\",\n    card: \"#171717\",\n};\n\n/**\n * Default light theme - used as fallback when no ThemeProvider is present.\n */\nexport const defaultTheme: Theme = {\n    colors: defaultLightColors,\n    isDark: false,\n};\n\n/**\n * Default dark theme variant.\n */\nexport const defaultDarkTheme: Theme = {\n    colors: defaultDarkColors,\n    isDark: true,\n};\n"]}

package/build/theme/types.d.ts

@@ -19,6 +19,7 @@ export interface ThemeColors {
     warning: string;
     error: string;
     info: string;
+    icon: string;
     border: string;
     muted: string;
     mutedForeground: string;

package/build/theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,WAAW;IAE1B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAG5B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAGpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAGb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,WAAW;IAExB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAG5B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAG3B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IAGpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,KAAK,CAAC;CAChB"}

package/build/theme/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Theme color definitions for @robin-ux/native components.\n * These define all the semantic colors used by components.\n */\nexport interface ThemeColors {\n  // Backgrounds\n  background: string;\n  backgroundSecondary: string;\n\n  // Foreground (text)\n  foreground: string;\n  foregroundSecondary: string;\n  foregroundTertiary: string;\n\n  // Primary brand colors\n  primary: string;\n  primaryLight: string;\n  primaryDark: string;\n\n  // Accent colors\n  accent: string;\n  accentLight: string;\n\n  // Semantic/status colors\n  destructive: string;\n  destructiveForeground: string;\n  success: string;\n  warning: string;\n  error: string;\n  info: string;\n\n  // UI element colors\n  border: string;\n  muted: string;\n  mutedForeground: string;\n  card: string;\n}\n\n/**\n * Complete theme object containing colors and mode information.\n */\nexport interface Theme {\n  colors: ThemeColors;\n  isDark: boolean;\n}\n\n/**\n * Theme context value type.\n */\nexport interface ThemeContextValue {\n  theme: Theme;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Theme color definitions for @robin-ux/native components.\n * These define all the semantic colors used by components.\n */\nexport interface ThemeColors {\n    // Backgrounds\n    background: string;\n    backgroundSecondary: string;\n\n    // Foreground (text)\n    foreground: string;\n    foregroundSecondary: string;\n    foregroundTertiary: string;\n\n    // Primary brand colors\n    primary: string;\n    primaryLight: string;\n    primaryDark: string;\n\n    // Accent colors\n    accent: string;\n    accentLight: string;\n\n    // Semantic/status colors\n    destructive: string;\n    destructiveForeground: string;\n    success: string;\n    warning: string;\n    error: string;\n    info: string;\n    icon: string;\n    // UI element colors\n    border: string;\n    muted: string;\n    mutedForeground: string;\n    card: string;\n}\n\n/**\n * Complete theme object containing colors and mode information.\n */\nexport interface Theme {\n    colors: ThemeColors;\n    isDark: boolean;\n}\n\n/**\n * Theme context value type.\n */\nexport interface ThemeContextValue {\n    theme: Theme;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@robin-ux/native",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "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/FormView.tsx

@@ -0,0 +1,102 @@
+import { Ionicons } from "@expo/vector-icons";
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import { KeyboardAvoidingView, Platform, ScrollView, StyleProp, TouchableOpacity, View, ViewStyle } from "react-native";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
+import { useTheme } from "../theme";
+import { layouts, spacing, useThemedStyles } from "../utils";
+import { Text } from "./Text";
+
+export interface FormViewProps {
+    title: string;
+    onBack?: () => void;
+    backIcon?: keyof typeof Ionicons.glyphMap;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    loading?: boolean;
+    edges?: Edge[];
+    containerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    isModal?: boolean;
+}
+
+export function FormView({
+    title,
+    onBack,
+    backIcon = "arrow-back",
+    children,
+    footer,
+    loading = false,
+    edges = ["top", "left", "right", "bottom"],
+    containerStyle,
+    contentContainerStyle,
+    isModal = false,
+}: FormViewProps) {
+    const { isDark, colors } = useTheme();
+
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            flex: 1,
+            backgroundColor: isModal ? "transparent" : colors.background,
+        },
+        header: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.md,
+            borderBottomWidth: isModal ? 0 : 1,
+            borderBottomColor: colors.border,
+        },
+        headerTitle: {
+            flex: 1,
+            textAlign: "left",
+        },
+        backButton: {
+            marginRight: spacing.md,
+            padding: 4,
+        },
+        formScrollView: {
+            paddingHorizontal: spacing.lg,
+            paddingVertical: spacing.lg,
+        },
+        footer: {
+            paddingHorizontal: spacing.lg,
+            paddingBottom: spacing.xl,
+            paddingTop: spacing.md,
+        },
+    }));
+
+    const content = (
+        <KeyboardAvoidingView style={layouts.flex1} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+            <View style={styles.header}>
+                {onBack && (
+                    <TouchableOpacity onPress={onBack} style={styles.backButton} disabled={loading}>
+                        <Ionicons name={backIcon} size={24} color={colors.icon} />
+                    </TouchableOpacity>
+                )}
+                <Text variant="subheading" weight="extrabold" style={styles.headerTitle}>
+                    {title}
+                </Text>
+                {onBack && !isModal && <View style={{ width: 32 }} />}
+            </View>
+
+            <ScrollView style={layouts.flex1} contentContainerStyle={contentContainerStyle} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+                <View style={[styles.formScrollView, containerStyle]}>{children}</View>
+            </ScrollView>
+
+            {footer && <View style={styles.footer}>{footer}</View>}
+        </KeyboardAvoidingView>
+    );
+
+    if (isModal) {
+        return <View style={styles.container}>{content}</View>;
+    }
+
+    return (
+        <SafeAreaView style={styles.container} edges={edges}>
+            <StatusBar style={isDark ? "light" : "dark"} />
+            {content}
+        </SafeAreaView>
+    );
+}

package/src/components/TextArea.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { Control, useController } from "react-hook-form";
+import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { useTheme } from "../theme";
+import { borderRadius, spacing, useThemedStyles } from "../utils";
+import { Text } from "./Text";
+
+export interface TextAreaProps extends Omit<TextInputProps, "style"> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    minHeight?: number;
+    maxHeight?: number;
+    style?: StyleProp<ViewStyle>;
+    control?: Control<any>;
+    name?: string;
+}
+
+export function TextArea({ label, error, helperText, minHeight = 120, maxHeight, style, control, name, value, onChangeText, onBlur, ...props }: TextAreaProps) {
+    const { colors } = useTheme();
+
+    // 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 : onBlur;
+    const inputRef = controller ? controller.field.ref : undefined;
+
+    const styles = useThemedStyles((colors) => ({
+        container: {
+            width: "100%",
+        },
+        label: {
+            marginBottom: spacing.xs,
+            color: colors.foregroundSecondary,
+            fontSize: 14,
+        },
+        textArea: {
+            backgroundColor: colors.backgroundSecondary,
+            borderRadius: borderRadius.lg,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.md,
+            color: colors.foreground,
+            fontSize: 16,
+            minHeight: minHeight,
+            maxHeight: maxHeight,
+            textAlignVertical: "top",
+            borderWidth: error || controller?.fieldState.error ? 1 : 0,
+            borderColor: error || controller?.fieldState.error ? colors.error : "transparent",
+        },
+        helperText: {
+            marginTop: spacing.xs,
+            fontSize: 12,
+        },
+    }));
+
+    return (
+        <View style={[styles.container, style]}>
+            {label && (
+                <Text variant="body" weight="medium" style={styles.label}>
+                    {label}
+                </Text>
+            )}
+            <TextInput
+                ref={inputRef as any}
+                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>
+    );
+}

package/src/components/index.ts

@@ -24,3 +24,12 @@ export type { DynamicStatusBarProps } from "./DynamicStatusBar";
 
 export { HeaderView } from "./HeaderView";
 export type { HeaderViewProps } from "./HeaderView";
+
+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";

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, HeaderView, Input, PasswordInput, SegmentedControl, Text } from "./components";
+export { Badge, BaseInput, Button, Card, DynamicStatusBar, FormView, HeaderView, Input, PasswordInput, SegmentedControl, Text, TextArea } from "./components";
 
 export type {
     BadgeProps,
@@ -16,11 +16,14 @@ export type {
     ButtonProps,
     ButtonSize,
     ButtonVariant,
+    CardProps,
     DynamicStatusBarProps,
+    FormViewProps,
     InputProps,
     Segment,
     SegmentedControlProps,
     TextAlign,
+    TextAreaProps,
     TextColor,
     TextProps,
     TextVariant,

package/src/theme/defaultTheme.ts

@@ -1,91 +1,93 @@
-import { Theme, ThemeColors } from './types';
+import { Theme, ThemeColors } from "./types";
 
 /**
  * Default light theme colors - a neutral, accessible color palette.
  */
 export const defaultLightColors: ThemeColors = {
-  // Backgrounds
-  background: '#ffffff',
-  backgroundSecondary: '#f5f5f5',
+    // Backgrounds
+    background: "#ffffff",
+    backgroundSecondary: "#f5f5f5",
 
-  // Foreground (text)
-  foreground: '#1a1a1a',
-  foregroundSecondary: '#666666',
-  foregroundTertiary: '#999999',
+    // Foreground (text)
+    foreground: "#1a1a1a",
+    foregroundSecondary: "#666666",
+    foregroundTertiary: "#999999",
 
-  // Primary brand colors
-  primary: '#3b82f6',
-  primaryLight: '#60a5fa',
-  primaryDark: '#2563eb',
+    // Primary brand colors
+    primary: "#3b82f6",
+    primaryLight: "#60a5fa",
+    primaryDark: "#2563eb",
 
-  // Accent colors
-  accent: '#8b5cf6',
-  accentLight: '#a78bfa',
+    // Accent colors
+    accent: "#8b5cf6",
+    accentLight: "#a78bfa",
+    icon: "#1a1a1a",
 
-  // Semantic/status colors
-  destructive: '#ef4444',
-  destructiveForeground: '#ffffff',
-  success: '#10b981',
-  warning: '#f59e0b',
-  error: '#ef4444',
-  info: '#3b82f6',
+    // Semantic/status colors
+    destructive: "#ef4444",
+    destructiveForeground: "#ffffff",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
 
-  // UI element colors
-  border: '#e5e5e5',
-  muted: '#f5f5f5',
-  mutedForeground: '#666666',
-  card: '#ffffff',
+    // UI element colors
+    border: "#e5e5e5",
+    muted: "#f5f5f5",
+    mutedForeground: "#666666",
+    card: "#ffffff",
 };
 
 /**
  * Default dark theme colors - a neutral, accessible dark color palette.
  */
 export const defaultDarkColors: ThemeColors = {
-  // Backgrounds
-  background: '#0a0a0a',
-  backgroundSecondary: '#171717',
+    // Backgrounds
+    background: "#0a0a0a",
+    backgroundSecondary: "#171717",
 
-  // Foreground (text)
-  foreground: '#fafafa',
-  foregroundSecondary: '#a3a3a3',
-  foregroundTertiary: '#737373',
+    // Foreground (text)
+    foreground: "#fafafa",
+    foregroundSecondary: "#a3a3a3",
+    foregroundTertiary: "#737373",
 
-  // Primary brand colors
-  primary: '#60a5fa',
-  primaryLight: '#93c5fd',
-  primaryDark: '#3b82f6',
+    // Primary brand colors
+    primary: "#60a5fa",
+    primaryLight: "#93c5fd",
+    primaryDark: "#3b82f6",
 
-  // Accent colors
-  accent: '#a78bfa',
-  accentLight: '#c4b5fd',
+    // Accent colors
+    accent: "#a78bfa",
+    accentLight: "#c4b5fd",
+    icon: "#fafafa",
 
-  // Semantic/status colors
-  destructive: '#f87171',
-  destructiveForeground: '#ffffff',
-  success: '#34d399',
-  warning: '#fbbf24',
-  error: '#f87171',
-  info: '#60a5fa',
+    // Semantic/status colors
+    destructive: "#f87171",
+    destructiveForeground: "#ffffff",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#60a5fa",
 
-  // UI element colors
-  border: '#262626',
-  muted: '#262626',
-  mutedForeground: '#a3a3a3',
-  card: '#171717',
+    // UI element colors
+    border: "#262626",
+    muted: "#262626",
+    mutedForeground: "#a3a3a3",
+    card: "#171717",
 };
 
 /**
  * Default light theme - used as fallback when no ThemeProvider is present.
  */
 export const defaultTheme: Theme = {
-  colors: defaultLightColors,
-  isDark: false,
+    colors: defaultLightColors,
+    isDark: false,
 };
 
 /**
  * Default dark theme variant.
  */
 export const defaultDarkTheme: Theme = {
-  colors: defaultDarkColors,
-  isDark: true,
+    colors: defaultDarkColors,
+    isDark: true,
 };

package/src/theme/types.ts

@@ -3,50 +3,50 @@
  * These define all the semantic colors used by components.
  */
 export interface ThemeColors {
-  // Backgrounds
-  background: string;
-  backgroundSecondary: string;
+    // Backgrounds
+    background: string;
+    backgroundSecondary: string;
 
-  // Foreground (text)
-  foreground: string;
-  foregroundSecondary: string;
-  foregroundTertiary: string;
+    // Foreground (text)
+    foreground: string;
+    foregroundSecondary: string;
+    foregroundTertiary: string;
 
-  // Primary brand colors
-  primary: string;
-  primaryLight: string;
-  primaryDark: string;
+    // Primary brand colors
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
 
-  // Accent colors
-  accent: string;
-  accentLight: string;
+    // Accent colors
+    accent: string;
+    accentLight: string;
 
-  // Semantic/status colors
-  destructive: string;
-  destructiveForeground: string;
-  success: string;
-  warning: string;
-  error: string;
-  info: string;
-
-  // UI element colors
-  border: string;
-  muted: string;
-  mutedForeground: string;
-  card: string;
+    // Semantic/status colors
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    icon: string;
+    // UI element colors
+    border: string;
+    muted: string;
+    mutedForeground: string;
+    card: string;
 }
 
 /**
  * Complete theme object containing colors and mode information.
  */
 export interface Theme {
-  colors: ThemeColors;
-  isDark: boolean;
+    colors: ThemeColors;
+    isDark: boolean;
 }
 
 /**
  * Theme context value type.
  */
 export interface ThemeContextValue {
-  theme: Theme;
+    theme: Theme;
 }