{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "type": "registry:ui",
  "title": "Radio-group",
  "description": "A radio-group component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/radio-group/radio-group.tsx",
      "content": "import * as React from \"react\"\nimport { View, Text, Pressable } from \"react-native\"\nimport { cn } from \"@/lib/utils\"\n\ninterface RadioGroupRootProps extends React.ComponentPropsWithoutRef<typeof View> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n}\n\ninterface RadioGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {\n  value: string\n  disabled?: boolean\n  id?: string\n}\n\ninterface RadioGroupLabelProps extends React.ComponentPropsWithoutRef<typeof Text> {\n  disabled?: boolean\n  htmlFor?: string\n}\n\nconst RadioGroupContext = React.createContext<{\n  value?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n}>({})\n\nfunction RadioGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  children,\n  ...props\n}: RadioGroupRootProps) {\n  const [innerValue, setInnerValue] = React.useState<string | undefined>(value ?? defaultValue)\n  const currentValue = value !== undefined ? value : innerValue\n\n  const handleValueChange = React.useCallback((newValue: string) => {\n    if (disabled) return\n\n    if (value === undefined) {\n      setInnerValue(newValue)\n    }\n\n    onValueChange?.(newValue)\n  }, [value, onValueChange, disabled])\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ value: currentValue, onValueChange: handleValueChange, disabled }}\n    >\n      <View\n        className={cn(\"space-y-4\", className)}\n        accessibilityRole=\"radiogroup\"\n        {...props}\n      >\n        {children}\n      </View>\n    </RadioGroupContext.Provider>\n  )\n}\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof Pressable>,\n  RadioGroupItemProps\n>(({ className, value, disabled, id, ...props }, ref) => {\n  const { value: groupValue, onValueChange, disabled: groupDisabled } = React.useContext(RadioGroupContext)\n  const isDisabled = disabled || groupDisabled\n  const isChecked = value === groupValue\n\n  const handlePress = () => {\n    if (!isDisabled) {\n      onValueChange?.(value)\n    }\n  }\n\n  return (\n    <Pressable\n      ref={ref}\n      accessibilityRole=\"radio\"\n      accessibilityState={{ checked: isChecked, disabled: isDisabled }}\n      onPress={handlePress}\n      disabled={isDisabled}\n      className={cn(\n        \"h-6 w-6 rounded-full border-2 justify-center items-center\",\n        isChecked\n          ? \"border-primary bg-primary/10\"\n          : \"border-border bg-transparent\",\n        isDisabled && \"opacity-50\",\n        className\n      )}\n      accessibilityLabel={id}\n      {...props}\n    >\n      {isChecked && (\n        <View className=\"h-3 w-3 rounded-full bg-primary\" />\n      )}\n    </Pressable>\n  )\n})\n\nconst RadioGroupLabel = React.forwardRef<\n  React.ElementRef<typeof Text>,\n  RadioGroupLabelProps\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\nRadioGroupItem.displayName = \"RadioGroupItem\"\nRadioGroupLabel.displayName = \"RadioGroupLabel\"\n\nexport { RadioGroup, RadioGroupItem, RadioGroupLabel }\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import {\n    RadioGroup,\n    RadioGroupItem,\n    RadioGroupLabel,\n} from \"@/components/ui/radio-group\";\nimport * as React from \"react\";\nimport { View } from \"react-native\";\n\nexport default function RadioGroupExample() {\n    const [layoutPreference, setLayoutPreference] = React.useState(\"comfortable\");\n\n    return (\n        <RadioGroup\n            value={layoutPreference}\n            onValueChange={setLayoutPreference}\n            className=\"space-y-0\"\n        >\n            <View className=\"flex-row items-center\">\n                <RadioGroupItem value=\"default\" id=\"r1\" />\n                <RadioGroupLabel htmlFor=\"r1\">Default</RadioGroupLabel>\n            </View>\n            <View className=\"flex-row items-center mt-2\">\n                <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n                <RadioGroupLabel htmlFor=\"r2\">Comfortable</RadioGroupLabel>\n            </View>\n            <View className=\"flex-row items-center mt-2\">\n                <RadioGroupItem value=\"compact\" id=\"r3\" />\n                <RadioGroupLabel htmlFor=\"r3\">Compact</RadioGroupLabel>\n            </View>\n        </RadioGroup>\n    );\n}\n",
  "customPreview": "import {\n    RadioGroup,\n    RadioGroupItem,\n    RadioGroupLabel,\n} from \"@/components/ui/radio-group\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function RadioGroupExample() {\n    const [layoutPreference, setLayoutPreference] = React.useState(\"comfortable\");\n    const [notification, setNotification] = React.useState(\"all\");\n    const [theme, setTheme] = React.useState(\"system\");\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                            Radio Group\n                        </Text>\n                        <Text className=\"text-base mb-6 text-muted-foreground\">\n                            A set of checkable buttons where only one can be checked at a\n                            time.\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                            <RadioGroup\n                                value={layoutPreference}\n                                onValueChange={setLayoutPreference}\n                                className=\"space-y-0\"\n                            >\n                                <View className=\"flex-row items-center\">\n                                    <RadioGroupItem value=\"default\" id=\"r1\" />\n                                    <RadioGroupLabel htmlFor=\"r1\">Default</RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n                                    <RadioGroupLabel htmlFor=\"r2\">Comfortable</RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"compact\" id=\"r3\" />\n                                    <RadioGroupLabel htmlFor=\"r3\">Compact</RadioGroupLabel>\n                                </View>\n                            </RadioGroup>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Notifications Settings\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <Text className=\"text-base font-medium mb-4 text-foreground\">\n                                Notification Preferences\n                            </Text>\n                            <RadioGroup\n                                value={notification}\n                                onValueChange={setNotification}\n                                className=\"space-y-0\"\n                            >\n                                <View className=\"flex-row items-start\">\n                                    <RadioGroupItem value=\"all\" id=\"n1\" />\n                                    <View className=\"\">\n                                        <RadioGroupLabel htmlFor=\"n1\" className=\"font-medium\">\n                                            All Notifications\n                                        </RadioGroupLabel>\n                                        <Text className=\"text-sm text-muted-foreground mt-1 ml-3\">\n                                            Receive notifications for all activities and updates.\n                                        </Text>\n                                    </View>\n                                </View>\n                                <View className=\"flex-row items-start mt-4\">\n                                    <RadioGroupItem value=\"important\" id=\"n2\" />\n                                    <View className=\"\">\n                                        <RadioGroupLabel htmlFor=\"n2\" className=\"font-medium\">\n                                            Important Only\n                                        </RadioGroupLabel>\n                                        <Text className=\"text-sm text-muted-foreground mt-1 ml-3\">\n                                            Only receive notifications for important updates.\n                                        </Text>\n                                    </View>\n                                </View>\n                                <View className=\"flex-row items-start mt-4\">\n                                    <RadioGroupItem value=\"none\" id=\"n3\" />\n                                    <View className=\"\">\n                                        <RadioGroupLabel htmlFor=\"n3\" className=\"font-medium\">\n                                            None\n                                        </RadioGroupLabel>\n                                        <Text className=\"text-sm text-muted-foreground mt-1 ml-3\">\n                                            Turn off all notifications.\n                                        </Text>\n                                    </View>\n                                </View>\n                            </RadioGroup>\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                            <RadioGroup disabled value=\"light\" className=\"space-y-0\">\n                                <View className=\"flex-row items-center\">\n                                    <RadioGroupItem value=\"light\" id=\"t1\" />\n                                    <RadioGroupLabel htmlFor=\"t1\" disabled>\n                                        Light\n                                    </RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"dark\" id=\"t2\" />\n                                    <RadioGroupLabel htmlFor=\"t2\" disabled>\n                                        Dark\n                                    </RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"system\" id=\"t3\" />\n                                    <RadioGroupLabel htmlFor=\"t3\" disabled>\n                                        System\n                                    </RadioGroupLabel>\n                                </View>\n                            </RadioGroup>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-10\">\n                        <Text className=\"text-xl font-semibold mb-5 text-foreground\">\n                            Theme Selection\n                        </Text>\n                        <View className=\"rounded-lg\">\n                            <RadioGroup\n                                value={theme}\n                                onValueChange={setTheme}\n                                className=\"space-y-0\"\n                            >\n                                <View className=\"flex-row items-center\">\n                                    <RadioGroupItem value=\"light\" id=\"th1\" />\n                                    <RadioGroupLabel htmlFor=\"th1\">Light</RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"dark\" id=\"th2\" />\n                                    <RadioGroupLabel htmlFor=\"th2\">Dark</RadioGroupLabel>\n                                </View>\n                                <View className=\"flex-row items-center mt-2\">\n                                    <RadioGroupItem value=\"system\" id=\"th3\" />\n                                    <RadioGroupLabel htmlFor=\"th3\">System</RadioGroupLabel>\n                                </View>\n                            </RadioGroup>\n                            <Text className=\"text-sm text-muted-foreground mt-4\">\n                                Current selection: {theme}\n                            </Text>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}