Add Toggle component to registry

app/(site)/docs/components/toggle/page.tsx

@@ -0,0 +1,121 @@
+import { ComponentPreview } from "@/components/docs/component-preview";
+
+export default function TogglePage() {
+  return (
+    <ComponentPreview
+      name="Toggle"
+      description="A toggle component for React Native applications."
+      examples={[
+  {
+    "title": "Default",
+    "value": "default",
+    "content": "import { Toggle } from \"@nativeui/ui\";\n\nexport default function ToggleDemo() {\n  return (\n    <Toggle>\n      Click me\n    </Toggle>\n  );\n}",
+    "language": "tsx"
+  }
+]}
+      componentCode={`import * as React from "react";
+import { Pressable, Platform, View } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface ToggleProps {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  variant?: "default" | "outline";
+  size?: "default" | "sm" | "lg";
+}
+
+const Toggle = React.forwardRef<View, ToggleProps>(
+  (
+    {
+      pressed,
+      onPressedChange,
+      disabled,
+      children,
+      className,
+      variant = "default",
+      size = "default",
+      ...props
+    },
+    ref
+  ) => {
+    const [isPressed, setIsPressed] = React.useState(pressed);
+
+    React.useEffect(() => {
+      setIsPressed(pressed);
+    }, [pressed]);
+
+    const handlePress = () => {
+      if (disabled) return;
+      const newValue = !isPressed;
+      setIsPressed(newValue);
+      onPressedChange?.(newValue);
+    };
+
+    const getSizeStyles = () => {
+      switch (size) {
+        case "sm":
+          return Platform.OS === "ios" ? "h-10 px-3" : "h-12 px-3";
+        case "lg":
+          return Platform.OS === "ios" ? "h-12 px-4" : "h-14 px-4";
+        default:
+          return Platform.OS === "ios" ? "h-11 px-3.5" : "h-13 px-3.5";
+      }
+    };
+
+    const getVariantStyles = () => {
+      switch (variant) {
+        case "outline":
+          return "border border-input bg-transparent";
+        default:
+          return "bg-transparent";
+      }
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        className={cn(
+          "flex-row items-center justify-center rounded-lg",
+          getSizeStyles(),
+          getVariantStyles(),
+          isPressed ? "bg-accent" : "bg-transparent",
+          isPressed ? "text-accent-foreground" : "text-foreground",
+          disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+);
+
+Toggle.displayName = "Toggle";
+
+export { Toggle };
+`}
+      previewCode={`import { Toggle } from "@nativeui/ui";
+
+export default function ToggleDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Toggle>Default Toggle</Toggle>
+      <Toggle variant="destructive">Delete</Toggle>
+      <Toggle variant="outline">Outline</Toggle>
+      <Toggle variant="secondary">Secondary</Toggle>
+      <Toggle variant="ghost">Ghost</Toggle>
+      <Toggle variant="link">Link</Toggle>
+    </div>
+  );
+}`}
+      registryName="toggle"
+      packageName="@nativeui/ui"
+    />
+  );
+}

public/r/toggle.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "toggle",
+  "type": "registry:component",
+  "title": "Toggle",
+  "description": "A toggle component for React Native applications.",
+  "dependencies": [
+    "react-native"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/toggle/toggle.tsx",
+      "content": "import * as React from \"react\";\nimport { Pressable, Platform, View } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\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 \"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}\n        className={cn(\n          \"flex-row items-center justify-center rounded-lg\",\n          getSizeStyles(),\n          getVariantStyles(),\n          isPressed ? \"bg-accent\" : \"bg-transparent\",\n          isPressed ? \"text-accent-foreground\" : \"text-foreground\",\n          disabled && \"opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Pressable>\n    );\n  }\n);\n\nToggle.displayName = \"Toggle\";\n\nexport { Toggle };\n",
+      "type": "registry:component"
+    }
+  ]
+}

registry.json

@@ -273,6 +273,20 @@
       ],
       "dependencies": ["react-native"],
       "registryDependencies": []
+    },
+    {
+      "name": "toggle",
+      "type": "registry:component",
+      "title": "Toggle",
+      "description": "A toggle component for React Native applications.",
+      "files": [
+        {
+          "path": "registry/toggle/toggle.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "dependencies": ["react-native"],
+      "registryDependencies": []
     }
   ]
 }

registry/toggle/toggle.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Pressable, Platform, View } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface ToggleProps {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  variant?: "default" | "outline";
+  size?: "default" | "sm" | "lg";
+}
+
+const Toggle = React.forwardRef<View, ToggleProps>(
+  (
+    {
+      pressed,
+      onPressedChange,
+      disabled,
+      children,
+      className,
+      variant = "default",
+      size = "default",
+      ...props
+    },
+    ref
+  ) => {
+    const [isPressed, setIsPressed] = React.useState(pressed);
+
+    React.useEffect(() => {
+      setIsPressed(pressed);
+    }, [pressed]);
+
+    const handlePress = () => {
+      if (disabled) return;
+      const newValue = !isPressed;
+      setIsPressed(newValue);
+      onPressedChange?.(newValue);
+    };
+
+    const getSizeStyles = () => {
+      switch (size) {
+        case "sm":
+          return Platform.OS === "ios" ? "h-10 px-3" : "h-12 px-3";
+        case "lg":
+          return Platform.OS === "ios" ? "h-12 px-4" : "h-14 px-4";
+        default:
+          return Platform.OS === "ios" ? "h-11 px-3.5" : "h-13 px-3.5";
+      }
+    };
+
+    const getVariantStyles = () => {
+      switch (variant) {
+        case "outline":
+          return "border border-input bg-transparent";
+        default:
+          return "bg-transparent";
+      }
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        className={cn(
+          "flex-row items-center justify-center rounded-lg",
+          getSizeStyles(),
+          getVariantStyles(),
+          isPressed ? "bg-accent" : "bg-transparent",
+          isPressed ? "text-accent-foreground" : "text-foreground",
+          disabled && "opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+);
+
+Toggle.displayName = "Toggle";
+
+export { Toggle };