{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "title": "Toggle-group",
  "description": "A toggle-group component for React Native applications.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/toggle-group/toggle-group.tsx",
      "content": "import * as React from \"react\";\nimport { View, Pressable, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ToggleGroupProps {\n  type?: \"single\" | \"multiple\";\n  value?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  variant?: \"default\" | \"outline\";\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n\ninterface ToggleGroupItemProps {\n  value: string;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  variant?: \"default\" | \"outline\";\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n\nconst ToggleGroupContext = React.createContext<{\n  type: \"single\" | \"multiple\";\n  value: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  disabled?: boolean;\n  variant?: \"default\" | \"outline\";\n  size?: \"default\" | \"sm\" | \"lg\";\n}>({\n  type: \"single\",\n  value: \"\",\n});\n\nconst ToggleGroup = React.forwardRef<View, ToggleGroupProps>(\n  (\n    {\n      type = \"single\",\n      value,\n      onValueChange,\n      disabled,\n      children,\n      className,\n      variant = \"default\",\n      size = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <ToggleGroupContext.Provider\n        value={{\n          type,\n          value: value || (type === \"single\" ? \"\" : []),\n          onValueChange,\n          disabled,\n          variant,\n          size,\n        }}\n      >\n        <View\n          ref={ref}\n          className={cn(\n            \"flex-row items-center justify-center\",\n            Platform.OS === \"ios\" ? \"gap-2\" : \"gap-1\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </View>\n      </ToggleGroupContext.Provider>\n    );\n  }\n);\n\nToggleGroup.displayName = \"ToggleGroup\";\n\nconst ToggleGroupItem = React.forwardRef<View, ToggleGroupItemProps>(\n  ({ value, disabled, children, className, variant, size, ...props }, ref) => {\n    const context = React.useContext(ToggleGroupContext);\n    const isSelected =\n      context.type === \"single\"\n        ? context.value === value\n        : (context.value as string[]).includes(value);\n\n    const handlePress = () => {\n      if (disabled || context.disabled) return;\n\n      if (context.type === \"single\") {\n        context.onValueChange?.(value);\n      } else {\n        const currentValue = context.value as string[];\n        const newValue = currentValue.includes(value)\n          ? currentValue.filter((v) => v !== value)\n          : [...currentValue, value];\n        context.onValueChange?.(newValue);\n      }\n    };\n\n    const getSizeStyles = () => {\n      const sizeToUse = context.size || size;\n      switch (sizeToUse) {\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      const variantToUse = context.variant || variant;\n      switch (variantToUse) {\n        case \"outline\":\n          return \"border border-input bg-transparent\";\n        default:\n          return \"bg-transparent\";\n      }\n    };\n\n    return (\n      <Pressable\n        ref={ref}\n        onPress={handlePress}\n        disabled={disabled || context.disabled}\n        className={cn(\n          \"flex-row items-center justify-center rounded-lg\",\n          getSizeStyles(),\n          getVariantStyles(),\n          isSelected ? \"bg-accent\" : \"bg-transparent\",\n          isSelected ? \"text-accent-foreground\" : \"text-foreground\",\n          (disabled || context.disabled) && \"opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n);\n\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport * as React from \"react\";\nimport { Text } from \"react-native\";\n\nexport default function ToggleGroupExampleScreen() {\n    const [singleValue, setSingleValue] = React.useState<string>(\"center\");\n\n    const handleSingleValueChange = (value: string) => {\n        setSingleValue(value);\n    };\n\n    return (\n        <ToggleGroup\n            type=\"single\"\n            value={singleValue}\n            onValueChange={handleSingleValueChange}\n            className=\"flex-wrap\"\n        >\n            <ToggleGroupItem value=\"left\">\n                <Text className=\"text-foreground font-medium\">Left</Text>\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"center\">\n                <Text className=\"text-foreground font-medium\">Center</Text>\n            </ToggleGroupItem>\n            <ToggleGroupItem value=\"right\">\n                <Text className=\"text-foreground font-medium\">Right</Text>\n            </ToggleGroupItem>\n        </ToggleGroup>\n    );\n}\n",
  "customPreview": "import { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-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 ToggleGroupExampleScreen() {\n    // Single selection examples\n    const [singleValue, setSingleValue] = React.useState<string>(\"center\");\n    const [outlineSingleValue, setOutlineSingleValue] = React.useState<string>(\"center\");\n\n    // Multiple selection examples\n    const [multipleValue, setMultipleValue] = React.useState<string[]>([]);\n    const [outlineMultipleValue, setOutlineMultipleValue] = React.useState<string[]>([]);\n\n    // Size examples\n    const [smallValue, setSmallValue] = React.useState<string>(\"center\");\n    const [defaultValue, setDefaultValue] = React.useState<string>(\"center\");\n    const [largeValue, setLargeValue] = React.useState<string>(\"center\");\n\n    const handleSingleValueChange = React.useCallback((value: string | string[]) => {\n        if (typeof value === \"string\") {\n            setSingleValue(value);\n        }\n    }, []);\n\n    const handleOutlineSingleValueChange = React.useCallback((value: string | string[]) => {\n        if (typeof value === \"string\") {\n            setOutlineSingleValue(value);\n        }\n    }, []);\n\n    const handleMultipleValueChange = React.useCallback((value: string | string[]) => {\n        if (Array.isArray(value)) {\n            setMultipleValue(value);\n        }\n    }, []);\n\n    const handleOutlineMultipleValueChange = React.useCallback((value: string | string[]) => {\n        if (Array.isArray(value)) {\n            setOutlineMultipleValue(value);\n        }\n    }, []);\n\n    const handleSmallValueChange = React.useCallback((value: string | string[]) => {\n        if (typeof value === \"string\") {\n            setSmallValue(value);\n        }\n    }, []);\n\n    const handleDefaultValueChange = React.useCallback((value: string | string[]) => {\n        if (typeof value === \"string\") {\n            setDefaultValue(value);\n        }\n    }, []);\n\n    const handleLargeValueChange = React.useCallback((value: string | string[]) => {\n        if (typeof value === \"string\") {\n            setLargeValue(value);\n        }\n    }, []);\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 Group\n                        </Text>\n                        <Text className=\"text-foreground mb-6 text-muted-foreground\">\n                            A set of two-state buttons that can be toggled 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                            Single Selection\n                        </Text>\n                        <ToggleGroup\n                            type=\"single\"\n                            value={singleValue}\n                            onValueChange={handleSingleValueChange}\n                            className=\"flex-wrap\"\n                        >\n                            <ToggleGroupItem value=\"left\">\n                                <Text className=\"text-foreground font-medium\">Left</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"center\">\n                                <Text className=\"text-foreground font-medium\">Center</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"right\">\n                                <Text className=\"text-foreground font-medium\">Right</Text>\n                            </ToggleGroupItem>\n                        </ToggleGroup>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Multiple Selection\n                        </Text>\n                        <ToggleGroup\n                            type=\"multiple\"\n                            value={multipleValue}\n                            onValueChange={handleMultipleValueChange}\n                            className=\"flex-wrap\"\n                        >\n                            <ToggleGroupItem value=\"bold\">\n                                <Text className=\"text-foreground font-medium\">Bold</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"italic\">\n                                <Text className=\"text-foreground font-medium\">Italic</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"underline\">\n                                <Text className=\"text-foreground font-medium\">Underline</Text>\n                            </ToggleGroupItem>\n                        </ToggleGroup>\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=\"space-y-4\">\n                            <ToggleGroup\n                                type=\"single\"\n                                variant=\"outline\"\n                                value={outlineSingleValue}\n                                onValueChange={handleOutlineSingleValueChange}\n                                className=\"flex-wrap\"\n                            >\n                                <ToggleGroupItem value=\"left\">\n                                    <Text className=\"text-foreground font-medium\">Left</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"center\">\n                                    <Text className=\"text-foreground font-medium\">Center</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"right\">\n                                    <Text className=\"text-foreground font-medium\">Right</Text>\n                                </ToggleGroupItem>\n                            </ToggleGroup>\n\n                            <ToggleGroup\n                                type=\"multiple\"\n                                variant=\"outline\"\n                                value={outlineMultipleValue}\n                                onValueChange={handleOutlineMultipleValueChange}\n                                className=\"flex-wrap\"\n                            >\n                                <ToggleGroupItem value=\"bold\">\n                                    <Text className=\"text-foreground font-medium\">Bold</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"italic\">\n                                    <Text className=\"text-foreground font-medium\">Italic</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"underline\">\n                                    <Text className=\"text-foreground font-medium\">Underline</Text>\n                                </ToggleGroupItem>\n                            </ToggleGroup>\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=\"space-y-4\">\n                            <ToggleGroup\n                                type=\"single\"\n                                size=\"sm\"\n                                value={smallValue}\n                                onValueChange={handleSmallValueChange}\n                                className=\"flex-wrap\"\n                            >\n                                <ToggleGroupItem value=\"left\">\n                                    <Text className=\"text-foreground text-sm font-medium\">Left</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"center\">\n                                    <Text className=\"text-foreground text-sm font-medium\">Center</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"right\">\n                                    <Text className=\"text-foreground text-sm font-medium\">Right</Text>\n                                </ToggleGroupItem>\n                            </ToggleGroup>\n\n                            <ToggleGroup\n                                type=\"single\"\n                                size=\"default\"\n                                value={defaultValue}\n                                onValueChange={handleDefaultValueChange}\n                                className=\"flex-wrap\"\n                            >\n                                <ToggleGroupItem value=\"left\">\n                                    <Text className=\"text-foreground font-medium\">Left</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"center\">\n                                    <Text className=\"text-foreground font-medium\">Center</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"right\">\n                                    <Text className=\"text-foreground font-medium\">Right</Text>\n                                </ToggleGroupItem>\n                            </ToggleGroup>\n\n                            <ToggleGroup\n                                type=\"single\"\n                                size=\"lg\"\n                                value={largeValue}\n                                onValueChange={handleLargeValueChange}\n                                className=\"flex-wrap\"\n                            >\n                                <ToggleGroupItem value=\"left\">\n                                    <Text className=\"text-foreground text-lg font-medium\">Left</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"center\">\n                                    <Text className=\"text-foreground text-lg font-medium\">Center</Text>\n                                </ToggleGroupItem>\n                                <ToggleGroupItem value=\"right\">\n                                    <Text className=\"text-foreground text-lg font-medium\">Right</Text>\n                                </ToggleGroupItem>\n                            </ToggleGroup>\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                        <ToggleGroup\n                            type=\"multiple\"\n                            value={multipleValue}\n                            onValueChange={handleMultipleValueChange}\n                            className=\"flex-wrap\"\n                        >\n                            <ToggleGroupItem value=\"bold\" className=\"gap-2\">\n                                <Text className=\"text-foreground\">🔤</Text>\n                                <Text className=\"text-foreground font-medium\">Bold</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"italic\" className=\"gap-2\">\n                                <Text className=\"text-foreground\">📝</Text>\n                                <Text className=\"text-foreground font-medium\">Italic</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"underline\" className=\"gap-2\">\n                                <Text className=\"text-foreground\">📏</Text>\n                                <Text className=\"text-foreground font-medium\">Underline</Text>\n                            </ToggleGroupItem>\n                        </ToggleGroup>\n                    </View>\n\n                    <View className=\"mb-8\">\n                        <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n                            Disabled State\n                        </Text>\n                        <ToggleGroup\n                            type=\"single\"\n                            value={singleValue}\n                            onValueChange={handleSingleValueChange}\n                            disabled\n                            className=\"flex-wrap\"\n                        >\n                            <ToggleGroupItem value=\"left\">\n                                <Text className=\"text-foreground font-medium\">Left</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"center\">\n                                <Text className=\"text-foreground font-medium\">Center</Text>\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"right\">\n                                <Text className=\"text-foreground font-medium\">Right</Text>\n                            </ToggleGroupItem>\n                        </ToggleGroup>\n                    </View>\n                </ScrollView>\n            </SafeAreaView>\n        </>\n    );\n}\n"
}