{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "textarea",
  "type": "registry:ui",
  "title": "Textarea",
  "description": "Multiline TextInput.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/utils.json",
    "https://raw.githubusercontent.com/truongnat/rnui/main/registry/dist/nativewind/theme.json"
  ],
  "files": [
    {
      "path": "registry/shared/ui/textarea.tsx",
      "type": "registry:ui",
      "target": "components/ui/textarea.tsx",
      "content": "import { forwardRef, useContext, useState } from 'react';\nimport { StyleSheet, TextInput, type TextInputProps, type TextStyle } from 'react-native';\nimport { cn, FormFieldContext, useThemeColor } from '@/lib/utils';\n\nexport interface TextareaProps extends TextInputProps {\n  className?: string;\n  placeholderClassName?: string;\n  /**\n   * Mirrors shadcn `aria-invalid` — renders a destructive border.\n   * Auto-detected from <FormField error> when inside one.\n   */\n  invalid?: boolean;\n  /** Alias for `editable={false}` plus disabled styling. */\n  disabled?: boolean;\n}\n\nexport const Textarea = forwardRef<TextInput, TextareaProps>(\n  (\n    {\n      className,\n      placeholderClassName,\n      invalid,\n      disabled,\n      editable,\n      multiline = true,\n      onFocus,\n      onBlur,\n      selectionColor,\n      cursorColor,\n      nativeID,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const [focused, setFocused] = useState(false);\n    const field = useContext(FormFieldContext);\n    const colors = useThemeColor();\n    const isInvalid = invalid ?? !!field?.error;\n    const isDisabled = disabled || editable === false;\n\n    const placeholder = cn('text-muted-foreground/60', placeholderClassName);\n    const placeholderProps = {\n      placeholderClassName: placeholder,\n      placeholderTextColorClassName: placeholder,\n    };\n\n    const dynamicStyle: TextStyle = {\n      borderColor: isInvalid\n        ? colors.destructive\n        : focused\n          ? colors.ring || colors.primary\n          : colors.input || colors.border,\n      borderWidth: focused || isInvalid ? 1.5 : 1,\n      backgroundColor: colors.background,\n    };\n\n    return (\n      <TextInput\n        ref={ref}\n        nativeID={nativeID ?? field?.id}\n        editable={!isDisabled}\n        accessibilityState={{ disabled: !!isDisabled }}\n        multiline={multiline}\n        textAlignVertical=\"top\"\n        className={cn(\n          'min-h-[100px] w-full rounded-xl p-3.5 text-base text-foreground',\n          isDisabled && 'opacity-50',\n          className\n        )}\n        style={[\n          styles.baseTextarea,\n          dynamicStyle,\n          style,\n        ]}\n        placeholderTextColor={colors.mutedForeground}\n        selectionColor={selectionColor ?? colors.primary}\n        cursorColor={cursorColor ?? colors.primary}\n        onFocus={(e) => {\n          setFocused(true);\n          onFocus?.(e);\n        }}\n        onBlur={(e) => {\n          setFocused(false);\n          onBlur?.(e);\n        }}\n        {...(placeholderProps as Partial<TextInputProps>)}\n        {...props}\n      />\n    );\n  }\n);\nTextarea.displayName = 'Textarea';\n\nconst styles = StyleSheet.create({\n  baseTextarea: {\n    borderCurve: 'continuous',\n    fontSize: 15,\n  },\n});\n"
    }
  ]
}