{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "A button component for React Native applications.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/button/button.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport {\n  Pressable,\n  type PressableStateCallbackType,\n  type PressableProps as RNPressableProps,\n  View,\n  type ViewStyle,\n} from \"react-native\";\n\nexport const buttonVariants = cva(\n\t\"flex-row items-center justify-center rounded-lg\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-primary text-primary-foreground shadow-sm\",\n\t\t\t\tdestructive: \"bg-destructive text-destructive-foreground shadow-sm\",\n\t\t\t\toutline: \"border-2 border-border bg-background text-foreground\",\n\t\t\t\tsecondary: \"bg-secondary text-secondary-foreground shadow-sm\",\n\t\t\t\tghost: \"text-foreground\",\n\t\t\t\tlink: \"text-primary underline\",\n\t\t\t\tselection: \"border-2 border-border bg-background\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-12 px-4\",\n\t\t\t\tsm: \"h-10 px-3\",\n\t\t\t\tlg: \"h-14 px-6\",\n\t\t\t\ticon: \"h-12 w-12\",\n\t\t\t},\n\t\t\tselected: {\n\t\t\t\ttrue: \"\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: \"selection\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary bg-primary/5\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: \"outline\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary ring-1 ring-primary/20\",\n\t\t\t},\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t\tselected: false,\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<RNPressableProps, \"style\">,\n\t\tVariantProps<typeof buttonVariants> {\n\tclassName?: string;\n\tstyle?: ViewStyle;\n\tasChild?: boolean;\n\tselected?: boolean;\n}\n\nconst Button = React.forwardRef<View, ButtonProps>(\n\t(\n\t\t{ className, variant, size, selected, asChild = false, children, ...props },\n\t\tref,\n\t) => {\n\t\tconst [isPressed, setIsPressed] = React.useState(false);\n\n\t\treturn (\n\t\t\t<Pressable\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, selected, className }))}\n\t\t\t\tref={ref}\n\t\t\t\tonPressIn={() => setIsPressed(true)}\n\t\t\t\tonPressOut={() => setIsPressed(false)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(state: PressableStateCallbackType) => (\n\t\t\t\t\t<View\n\t\t\t\t\t\tclassName={`flex-row items-center justify-center gap-2 ${\n\t\t\t\t\t\t\tstate.pressed || isPressed ? \"opacity-80\" : \"\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{typeof children === \"function\" ? children(state) : children}\n\t\t\t\t\t</View>\n\t\t\t\t)}\n\t\t\t</Pressable>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n",
      "type": "registry:ui"
    }
  ],
  "changelog": [],
  "customUsage": "import { Text, View } from \"react-native\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function ButtonScreen() {\n  return (\n    <View>\n      <Button\n        onPress={() => console.log(\"pressed!\")}\n      >\n        <Text className=\"text-secondary-foreground dark:text-secondary-foreground\">Press me</Text>\n      </Button>\n    </View>\n  );\n}\n",
  "customPreview": "import { Button } from \"@/components/ui/button\";\nimport { Feather } from \"@expo/vector-icons\";\nimport { useColorScheme } from \"nativewind\";\nimport React, { useState } from \"react\";\nimport { ActivityIndicator, ScrollView, Text, View } from \"react-native\";\nimport { SafeAreaView } from \"react-native-safe-area-context\";\n\nexport default function ButtonScreen() {\n  const [counter, setCounter] = useState(0);\n\n  const { colorScheme } = useColorScheme();\n  const isDark = colorScheme === 'dark';\n\n  return (\n    <>\n      <SafeAreaView className=\"flex-1 bg-background\" edges={[\"bottom\"]}>\n        <ScrollView className=\"px-5 py-5\">\n          <View className=\"mb-6\">\n            <Text className=\"text-2xl font-bold mb-2 text-foreground\">\n              Button\n            </Text>\n            <Text className=\"text-base mb-4 text-muted-foreground\">\n              A flexible button component with different variants and sizes\n            </Text>\n            <Text className=\"text-base mb-4 text-foreground\">\n              Current mode: {isDark ? 'dark' : 'light'}\n            </Text>\n          </View>\n\n          <Text className=\"text-base font-semibold text-foreground\">\n            Counter: {counter}\n          </Text>\n\n          <View className=\"mb-6 mt-6\">\n            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n              Button Variants\n            </Text>\n\n            <View className=\"gap-4\">\n              <View className=\"flex-row gap-3 flex-wrap\">\n                <Button\n                  variant=\"default\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground\">Default</Text>\n                </Button>\n\n                <Button\n                  variant=\"destructive\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Text className=\"text-destructive-foreground dark:text-destructive-foreground\">\n                    Destructive\n                  </Text>\n                </Button>\n\n                <Button\n                  variant=\"outline\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Text className=\"text-foreground dark:text-foreground\">Outline</Text>\n                </Button>\n              </View>\n\n              <View className=\"flex-row gap-3 flex-wrap\">\n                <Button\n                  variant=\"secondary\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Text className=\"text-secondary-foreground dark:text-secondary-foreground\">Secondary</Text>\n                </Button>\n\n                <Button variant=\"ghost\" onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-foreground dark:text-foreground\">Ghost</Text>\n                </Button>\n\n                <Button variant=\"link\" onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-primary dark:text-primary\">Link</Text>\n                </Button>\n              </View>\n            </View>\n          </View>\n\n          <View className=\"mb-6\">\n            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n              Button Sizes\n            </Text>\n\n            <View className=\"gap-4\">\n              <View className=\"flex-row gap-3 items-center flex-wrap\">\n                <Button size=\"sm\" onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground\">Small</Text>\n                </Button>\n\n                <Button size=\"default\" onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground\">Default</Text>\n                </Button>\n\n                <Button size=\"lg\" onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground\">Large</Text>\n                </Button>\n\n                <Button\n                  size=\"icon\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Feather name=\"plus\" size={16} />\n                </Button>\n              </View>\n            </View>\n          </View>\n\n          <View className=\"mb-6\">\n            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n              Button States\n            </Text>\n\n            <View className=\"gap-4\">\n              <View className=\"flex-row gap-3 flex-wrap\">\n                <Button disabled onPress={() => setCounter(counter + 1)}>\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground\">Disabled</Text>\n                </Button>\n                <Button onPress={() => setCounter(counter + 1)}>\n                  <ActivityIndicator size=\"small\" color={isDark ? \"#111827\" : \"white\"} />\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">Loading</Text>\n                </Button>\n              </View>\n            </View>\n          </View>\n\n          <View className=\"mb-6\">\n            <Text className=\"text-xl font-semibold mb-4 text-foreground\">\n              Button with Icon\n            </Text>\n\n            <View className=\"gap-4\">\n              <View className=\"flex-row gap-3 flex-wrap\">\n                <Button onPress={() => setCounter(counter + 1)}>\n                  <Feather name=\"plus\" size={16} color={isDark ? \"#111827\" : \"white\"} />\n                  <Text className=\"text-primary-foreground dark:text-primary-foreground ml-2\">\n                    With Icon\n                  </Text>\n                </Button>\n\n                <Button\n                  variant=\"outline\"\n                  onPress={() => setCounter(counter + 1)}\n                >\n                  <Feather name=\"settings\" size={16} color={isDark ? \"white\" : \"#111827\"} />\n                  <Text className=\"text-foreground dark:text-foreground ml-2\">Settings</Text>\n                </Button>\n              </View>\n            </View>\n          </View>\n        </ScrollView>\n      </SafeAreaView>\n    </>\n  );\n}\n"
}