From e84de7cd70ad54c0d1ca53710ac36dc29766f0e7 Mon Sep 17 00:00:00 2001 From: Theo2903 Date: Wed, 14 May 2025 11:38:47 +0200 Subject: [PATCH] Add Toggle component to registry - Introduced a new Toggle component for React Native applications, including its implementation in `registry/toggle/toggle.tsx`. - Updated `registry.json` to include the new Toggle component and its details, along with necessary dependencies. --- app/(site)/docs/components/toggle/page.tsx | 121 +++++++++++++++++++++ public/r/toggle.json | 18 +++ registry.json | 14 +++ registry/toggle/toggle.tsx | 86 +++++++++++++++ 4 files changed, 239 insertions(+) create mode 100644 app/(site)/docs/components/toggle/page.tsx create mode 100644 public/r/toggle.json create mode 100644 registry/toggle/toggle.tsx diff --git a/app/(site)/docs/components/toggle/page.tsx b/app/(site)/docs/components/toggle/page.tsx new file mode 100644 index 0000000..5db2f3b --- /dev/null +++ b/app/(site)/docs/components/toggle/page.tsx @@ -0,0 +1,121 @@ +import { ComponentPreview } from "@/components/docs/component-preview"; + +export default function TogglePage() { + return ( + \n Click me\n \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( + ( + { + 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 ( + + {children} + + ); + } +); + +Toggle.displayName = "Toggle"; + +export { Toggle }; +`} + previewCode={`import { Toggle } from "@nativeui/ui"; + +export default function ToggleDemo() { + return ( +
+ Default Toggle + Delete + Outline + Secondary + Ghost + Link +
+ ); +}`} + registryName="toggle" + packageName="@nativeui/ui" + /> + ); +} diff --git a/public/r/toggle.json b/public/r/toggle.json new file mode 100644 index 0000000..9e0c22c --- /dev/null +++ b/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(\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 \n {children}\n \n );\n }\n);\n\nToggle.displayName = \"Toggle\";\n\nexport { Toggle };\n", + "type": "registry:component" + } + ] +} \ No newline at end of file diff --git a/registry.json b/registry.json index f4b42b0..cc66ae6 100644 --- a/registry.json +++ b/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": [] } ] } diff --git a/registry/toggle/toggle.tsx b/registry/toggle/toggle.tsx new file mode 100644 index 0000000..c2aeaba --- /dev/null +++ b/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( + ( + { + 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 ( + + {children} + + ); + } +); + +Toggle.displayName = "Toggle"; + +export { Toggle };