{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "A textarea component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/textarea/textarea.tsx",
      "content": "import * as React from \"react\"\nimport { TextInput, Platform } from \"react-native\"\nimport { cn } from \"@/lib/utils\"\n\nconst TextArea = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(\n  ({ className, ...props }, ref) => {\n    const [isFocused, setIsFocused] = React.useState(false)\n\n    return (\n      <TextInput\n        className={cn(\n          \"min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-3 text-primary shadow-sm\",\n          \"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          \"text-base multiline\",\n          isFocused ? \"border-ring ring-1 ring-ring\" : \"\",\n          Platform.OS === \"ios\" ? \"ios:shadow-sm ios:shadow-foreground/10\" : \"android:elevation-1\",\n          className\n        )}\n        ref={ref}\n        multiline={true}\n        textAlignVertical=\"top\"\n        underlineColorAndroid=\"transparent\"\n        onFocus={() => setIsFocused(true)}\n        onBlur={() => setIsFocused(false)}\n        {...props}\n      />\n    )\n  }\n)\n\nTextArea.displayName = \"TextArea\"\n\nexport { TextArea }\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { TextArea } from \"@/components/ui/textarea\";\nimport * as React from \"react\";\n\nexport default function TextAreaExample() {\n\n    return (\n        <TextArea\n            placeholder=\"Type your message here...\"\n            numberOfLines={4}\n        />\n    );\n}\n",
  "customPreview": "import { Button } from \"@/components/ui/button\";\nimport { TextArea } from \"@/components/ui/textarea\";\nimport * as React from \"react\";\nimport { KeyboardAvoidingView, Platform, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function TextAreaExample() {\n    const [text, setText] = React.useState(\"\");\n    const characterLimit = 200;\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <KeyboardAvoidingView\n                    behavior={Platform.OS === \"ios\" ? \"padding\" : \"height\"}\n                    style={{ flex: 1 }}\n                    keyboardVerticalOffset={100}\n                >\n                    <ScrollView\n                        className=\"p-4\"\n                        keyboardShouldPersistTaps=\"handled\"\n                        keyboardDismissMode=\"on-drag\"\n                    >\n                        <View className=\"mb-6\">\n                            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                                TextArea\n                            </Text>\n                            <Text className=\"text-base mb-6 text-muted-foreground\">\n                                Displays a multi-line text input field for longer form content.\n                            </Text>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Default TextArea\n                            </Text>\n                            <TextArea\n                                placeholder=\"Type your message here...\"\n                                numberOfLines={4}\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Character Limit\n                            </Text>\n                            <View>\n                                <TextArea\n                                    placeholder=\"Write your bio (max 200 characters)...\"\n                                    value={text}\n                                    onChangeText={setText}\n                                    numberOfLines={4}\n                                    maxLength={characterLimit}\n                                />\n                                <Text className=\"text-sm text-muted-foreground text-right mt-1\">\n                                    {text.length}/{characterLimit}\n                                </Text>\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Label\n                            </Text>\n                            <View>\n                                <Text className=\"text-sm font-medium mb-2 text-foreground\">\n                                    Feedback\n                                </Text>\n                                <TextArea\n                                    placeholder=\"Tell us what you think...\"\n                                    numberOfLines={4}\n                                />\n                            </View>\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Taller TextArea\n                            </Text>\n                            <TextArea\n                                placeholder=\"For longer content...\"\n                                numberOfLines={8}\n                                className=\"min-h-[200px]\"\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                Disabled TextArea\n                            </Text>\n                            <TextArea\n                                editable={false}\n                                placeholder=\"This textarea is disabled\"\n                                className=\"opacity-50\"\n                                numberOfLines={4}\n                            />\n                        </View>\n\n                        <View className=\"mb-8\">\n                            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                                With Submit Button\n                            </Text>\n                            <View>\n                                <TextArea\n                                    placeholder=\"Type your comment here...\"\n                                    numberOfLines={4}\n                                    className=\"mb-3\"\n                                />\n                                <Button>\n                                    <Text className=\"font-bold text-primary-foreground\">\n                                        Submit\n                                    </Text>\n                                </Button>\n                            </View>\n                        </View>\n                    </ScrollView>\n                </KeyboardAvoidingView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}