{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "A checkbox component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/checkbox/checkbox.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Ionicons } from \"@expo/vector-icons\"\nimport { useColorScheme } from \"nativewind\"\nimport * as React from \"react\"\nimport { Pressable, Text } from \"react-native\"\n\ninterface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {\n  checked?: boolean\n  defaultChecked?: boolean\n  onCheckedChange?: (checked: boolean) => void\n  disabled?: boolean\n  id?: string\n}\n\ninterface CheckboxLabelProps extends React.ComponentPropsWithoutRef<typeof Text> {\n  disabled?: boolean\n  htmlFor?: string\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof Pressable>,\n  CheckboxProps\n>(({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled,\n  id,\n  ...props\n}, ref) => {\n  const { colorScheme } = useColorScheme()\n  const [innerChecked, setInnerChecked] = React.useState<boolean>(\n    checked !== undefined ? checked : defaultChecked || false\n  )\n  const isChecked = checked !== undefined ? checked : innerChecked\n\n  const handlePress = React.useCallback(() => {\n    if (disabled) return\n\n    const newValue = !isChecked\n\n    if (checked === undefined) {\n      setInnerChecked(newValue)\n    }\n\n    onCheckedChange?.(newValue)\n  }, [checked, isChecked, onCheckedChange, disabled])\n\n  React.useEffect(() => {\n    if (checked !== undefined) {\n      setInnerChecked(checked)\n    }\n  }, [checked])\n\n  return (\n    <Pressable\n      ref={ref}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={{ checked: isChecked, disabled }}\n      onPress={handlePress}\n      disabled={disabled}\n      className={cn(\n        \"h-6 w-6 rounded-md border-2 justify-center items-center\",\n        isChecked\n          ? \"border-primary bg-primary\"\n          : \"border-border bg-transparent\",\n        disabled && \"opacity-50\",\n        className\n      )}\n      accessibilityLabel={id}\n      {...props}\n    >\n      {isChecked && (\n        <Ionicons\n          name=\"checkmark-sharp\"\n          size={18}\n          className=\"color-primary-foreground\"\n        />\n      )}\n    </Pressable>\n  )\n})\n\nconst CheckboxLabel = React.forwardRef<\n  React.ElementRef<typeof Text>,\n  CheckboxLabelProps\n>(({ className, disabled, htmlFor, ...props }, ref) => {\n  return (\n    <Text\n      ref={ref}\n      className={cn(\n        \"text-base text-foreground ml-3\",\n        disabled && \"text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\n\nCheckbox.displayName = \"Checkbox\"\nCheckboxLabel.displayName = \"CheckboxLabel\"\n\nexport { Checkbox, CheckboxLabel }\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Checkbox, CheckboxLabel } from \"@/components/ui/checkbox\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nexport default function CheckboxExample() {\n    const [termsAccepted, setTermsAccepted] = React.useState(false);\n\n    return (\n        <View className=\"flex-row items-center\">\n            <Checkbox\n                id=\"terms\"\n                checked={termsAccepted}\n                onCheckedChange={setTermsAccepted}\n            />\n            <CheckboxLabel htmlFor=\"terms\">\n                Accept terms and conditions\n            </CheckboxLabel>\n        </View>\n    );\n}\n",
  "customPreview": "import { Checkbox, CheckboxLabel } from \"@/components/ui/checkbox\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function CheckboxExample() {\n    const [termsAccepted, setTermsAccepted] = React.useState(false);\n    const [notifications, setNotifications] = React.useState({\n        email: true,\n        push: false,\n        sms: false,\n    });\n    const [selectedOptions, setSelectedOptions] = React.useState<string[]>([\n        \"option1\",\n    ]);\n\n    const toggleOption = (option: string) => {\n        setSelectedOptions((prev) =>\n            prev.includes(option)\n                ? prev.filter((item) => item !== option)\n                : [...prev, option]\n        );\n    };\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-8\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Checkbox\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            A control that allows the user to toggle between checked and not\n                            checked.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Basic Example\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <View className=\"flex-row items-center\">\n                                <Checkbox\n                                    id=\"terms\"\n                                    checked={termsAccepted}\n                                    onCheckedChange={setTermsAccepted}\n                                />\n                                <CheckboxLabel htmlFor=\"terms\">\n                                    Accept terms and conditions\n                                </CheckboxLabel>\n                            </View>\n                            <Text className=\"text-sm text-muted-foreground mt-4\">\n                                Current status: {termsAccepted ? \"Accepted\" : \"Not accepted\"}\n                            </Text>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Notification Preferences\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <Text className=\"text-base font-medium mb-4 text-foreground\">\n                                How would you like to be notified?\n                            </Text>\n                            <View className=\"space-y-3\">\n                                <View className=\"flex-row items-center\">\n                                    <Checkbox\n                                        id=\"email\"\n                                        checked={notifications.email}\n                                        onCheckedChange={(checked) =>\n                                            setNotifications((prev) => ({ ...prev, email: checked }))\n                                        }\n                                    />\n                                    <CheckboxLabel htmlFor=\"email\">Email</CheckboxLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <Checkbox\n                                        id=\"push\"\n                                        checked={notifications.push}\n                                        onCheckedChange={(checked) =>\n                                            setNotifications((prev) => ({ ...prev, push: checked }))\n                                        }\n                                    />\n                                    <CheckboxLabel htmlFor=\"push\">Push Notifications</CheckboxLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <Checkbox\n                                        id=\"sms\"\n                                        checked={notifications.sms}\n                                        onCheckedChange={(checked) =>\n                                            setNotifications((prev) => ({ ...prev, sms: checked }))\n                                        }\n                                    />\n                                    <CheckboxLabel htmlFor=\"sms\">SMS</CheckboxLabel>\n                                </View>\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Disabled State\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <View className=\"flex-row items-center mb-3\">\n                                <Checkbox id=\"disabled-unchecked\" disabled />\n                                <CheckboxLabel htmlFor=\"disabled-unchecked\" disabled>\n                                    Disabled unchecked\n                                </CheckboxLabel>\n                            </View>\n                            <View className=\"flex-row items-center\">\n                                <Checkbox id=\"disabled-checked\" disabled checked />\n                                <CheckboxLabel htmlFor=\"disabled-checked\" disabled>\n                                    Disabled checked\n                                </CheckboxLabel>\n                            </View>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Multiple Selection\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <Text className=\"text-base font-medium mb-4 text-foreground\">\n                                Select your interests:\n                            </Text>\n                            <View className=\"space-y-3\">\n                                <View className=\"flex-row items-center\">\n                                    <Checkbox\n                                        id=\"option1\"\n                                        checked={selectedOptions.includes(\"option1\")}\n                                        onCheckedChange={() => toggleOption(\"option1\")}\n                                    />\n                                    <CheckboxLabel htmlFor=\"option1\">Technology</CheckboxLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <Checkbox\n                                        id=\"option2\"\n                                        checked={selectedOptions.includes(\"option2\")}\n                                        onCheckedChange={() => toggleOption(\"option2\")}\n                                    />\n                                    <CheckboxLabel htmlFor=\"option2\">Sports</CheckboxLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <Checkbox\n                                        id=\"option3\"\n                                        checked={selectedOptions.includes(\"option3\")}\n                                        onCheckedChange={() => toggleOption(\"option3\")}\n                                    />\n                                    <CheckboxLabel htmlFor=\"option3\">Art & Design</CheckboxLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <Checkbox\n                                        id=\"option4\"\n                                        checked={selectedOptions.includes(\"option4\")}\n                                        onCheckedChange={() => toggleOption(\"option4\")}\n                                    />\n                                    <CheckboxLabel htmlFor=\"option4\">Music</CheckboxLabel>\n                                </View>\n                            </View>\n                            <Text className=\"text-sm text-muted-foreground mt-4\">\n                                Selected: {selectedOptions.join(\", \") || \"None\"}\n                            </Text>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}