{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "A toggle component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/toggle/toggle.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, Pressable, View } from \"react-native\";\n\ninterface ToggleProps {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  variant?: \"default\" | \"outline\";\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n\nconst Toggle = React.forwardRef<View, ToggleProps>(\n  (\n    {\n      pressed,\n      onPressedChange,\n      disabled,\n      children,\n      className,\n      variant = \"default\",\n      size = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    const [isPressed, setIsPressed] = React.useState(pressed);\n\n    React.useEffect(() => {\n      setIsPressed(pressed);\n    }, [pressed]);\n\n    const handlePress = () => {\n      if (disabled) return;\n      const newValue = !isPressed;\n      setIsPressed(newValue);\n      onPressedChange?.(newValue);\n    };\n\n    const getSizeStyles = () => {\n      switch (size) {\n        case \"sm\":\n          return Platform.OS === \"ios\" ? \"h-10 px-3\" : \"h-12 px-3\";\n        case \"lg\":\n          return Platform.OS === \"ios\" ? \"h-12 px-4\" : \"h-14 px-4\";\n        default:\n          return Platform.OS === \"ios\" ? \"h-11 px-3.5\" : \"h-13 px-3.5\";\n      }\n    };\n\n    const getVariantStyles = () => {\n      switch (variant) {\n        case \"outline\":\n          return isPressed\n            ? \"border border-toggle-border bg-toggle-active/20\"\n            : \"border border-toggle-border bg-background/10\";\n        default:\n          return isPressed\n            ? \"bg-toggle-active/20\"\n            : \"bg-background/10\";\n      }\n    };\n\n    return (\n      <Pressable\n        ref={ref}\n        onPress={handlePress}\n        disabled={disabled}\n        className={cn(\n          \"flex-row items-center justify-center rounded-lg\",\n          getSizeStyles(),\n          getVariantStyles(),\n          isPressed\n            ? \"text-toggle-active-foreground\"\n            : \"text-foreground\",\n          disabled && \"opacity-50 bg-muted text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n);\n\nToggle.displayName = \"Toggle\";\n\nexport { Toggle };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Toggle } from \"@/components/ui/toggle\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function ToggleExampleScreen() {\n    const [basicToggle, setBasicToggle] = React.useState(false);\n\n    return (\n        <Toggle pressed={basicToggle} onPressedChange={setBasicToggle}>\n            <Text className=\"text-foreground font-medium\">Toggle 1</Text>\n        </Toggle>\n    );\n}\n",
  "customPreview": "import { Toggle } from \"@/components/ui/toggle\";\nimport * as React from \"react\";\nimport { ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nconst ToggleWithIcon = ({ pressed, onPressedChange }: { pressed?: boolean; onPressedChange?: (pressed: boolean) => void }) => (\n    <Toggle pressed={pressed} onPressedChange={onPressedChange} className=\"gap-2\">\n        <Text className=\"text-foreground font-medium\">Toggle with icon</Text>\n        <Text className=\"text-foreground\">🔔</Text>\n    </Toggle>\n);\n\nconst ToggleWithMultipleIcons = ({ pressed, onPressedChange }: { pressed?: boolean; onPressedChange?: (pressed: boolean) => void }) => (\n    <Toggle pressed={pressed} onPressedChange={onPressedChange} className=\"gap-2\">\n        <Text className=\"text-foreground\">🔔</Text>\n        <Text className=\"text-foreground font-medium\">Notifications</Text>\n        <Text className=\"text-foreground\">🔕</Text>\n    </Toggle>\n);\n\nexport default function ToggleExampleScreen() {\n    // Basic toggles\n    const [basicToggle, setBasicToggle] = React.useState(false);\n    const [basicToggle2, setBasicToggle2] = React.useState(false);\n\n    // Outline toggles\n    const [outlineToggle, setOutlineToggle] = React.useState(false);\n    const [outlineToggle2, setOutlineToggle2] = React.useState(false);\n\n    // Icon toggles\n    const [iconToggle, setIconToggle] = React.useState(false);\n    const [multiIconToggle, setMultiIconToggle] = React.useState(false);\n\n    // Size toggles\n    const [smallToggle, setSmallToggle] = React.useState(false);\n    const [defaultToggle, setDefaultToggle] = React.useState(false);\n    const [largeToggle, setLargeToggle] = React.useState(false);\n\n    return (\n        <>\n            <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n                <ScrollView className=\"p-4\">\n                    <View className=\"mb-6\">\n                        <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n                            Toggle\n                        </Text>\n                        <Text className=\"text-foreground mb-6 text-muted-foreground\">\n                            A two-state button that can be either on or off.\n                        </Text>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Basic Toggle\n                        </Text>\n                        <View className=\"flex-row gap-4 flex-wrap\">\n                            <Toggle pressed={basicToggle} onPressedChange={setBasicToggle}>\n                                <Text className=\"text-foreground font-medium\">Toggle 1</Text>\n                            </Toggle>\n                            <Toggle pressed={basicToggle2} onPressedChange={setBasicToggle2}>\n                                <Text className=\"text-foreground font-medium\">Toggle 2</Text>\n                            </Toggle>\n                            <Toggle disabled>\n                                <Text className=\"text-foreground font-medium\">Disabled</Text>\n                            </Toggle>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Outline Variant\n                        </Text>\n                        <View className=\"flex-row gap-4 flex-wrap\">\n                            <Toggle\n                                variant=\"outline\"\n                                pressed={outlineToggle}\n                                onPressedChange={setOutlineToggle}\n                            >\n                                <Text className=\"text-foreground font-medium\">Outline 1</Text>\n                            </Toggle>\n                            <Toggle\n                                variant=\"outline\"\n                                pressed={outlineToggle2}\n                                onPressedChange={setOutlineToggle2}\n                            >\n                                <Text className=\"text-foreground font-medium\">Outline 2</Text>\n                            </Toggle>\n                            <Toggle\n                                variant=\"outline\"\n                                disabled\n                            >\n                                <Text className=\"text-foreground font-medium\">Disabled</Text>\n                            </Toggle>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Different Sizes\n                        </Text>\n                        <View className=\"flex-col gap-4\">\n                            <Toggle size=\"sm\" pressed={smallToggle} onPressedChange={setSmallToggle}>\n                                <Text className=\"text-sm text-foreground font-medium\">Small Toggle</Text>\n                            </Toggle>\n                            <Toggle size=\"default\" pressed={defaultToggle} onPressedChange={setDefaultToggle}>\n                                <Text className=\"text-foreground font-medium\">Default Toggle</Text>\n                            </Toggle>\n                            <Toggle size=\"lg\" pressed={largeToggle} onPressedChange={setLargeToggle}>\n                                <Text className=\"text-lg text-foreground font-medium\">Large Toggle</Text>\n                            </Toggle>\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            With Icons\n                        </Text>\n                        <View className=\"flex-col gap-4\">\n                            <ToggleWithIcon\n                                pressed={iconToggle}\n                                onPressedChange={setIconToggle}\n                            />\n                            <ToggleWithMultipleIcons\n                                pressed={multiIconToggle}\n                                onPressedChange={setMultiIconToggle}\n                            />\n                        </View>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Combined Examples\n                        </Text>\n                        <View className=\"flex-col gap-4\">\n                            <Toggle\n                                variant=\"outline\"\n                                size=\"lg\"\n                                pressed={outlineToggle}\n                                onPressedChange={setOutlineToggle}\n                                className=\"gap-2\"\n                            >\n                                <Text className=\"text-foreground\">🔔</Text>\n                                <Text className=\"text-foreground text-lg font-medium\">Large Outline with Icon</Text>\n                            </Toggle>\n\n                            <Toggle\n                                size=\"sm\"\n                                pressed={smallToggle}\n                                onPressedChange={setSmallToggle}\n                                className=\"gap-2\"\n                            >\n                                <Text className=\"text-foreground text-sm font-medium\">Small with Icon</Text>\n                                <Text className=\"text-sm\">🔕</Text>\n                            </Toggle>\n                        </View>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}