From 27093d44594acdad9e926165396ddd6d41be6677 Mon Sep 17 00:00:00 2001
From: Theo2903 <theo@ribbi.ch>
Date: Thu, 8 May 2025 07:41:33 +0200
Subject: [PATCH] Add Separator component to registry

- Introduced a new Separator component for React Native applications, including its implementation in `registry/separator/separator.tsx`.
- Updated `registry.json` to include the new Separator component and its details.
---
 app/(site)/docs/components/separator/page.tsx | 57 +++++++++++++++++++
 public/r/separator.json                       | 18 ++++++
 registry.json                                 | 14 +++++
 registry/separator/separator.tsx              | 22 +++++++
 4 files changed, 111 insertions(+)
 create mode 100644 app/(site)/docs/components/separator/page.tsx
 create mode 100644 public/r/separator.json
 create mode 100644 registry/separator/separator.tsx

diff --git a/app/(site)/docs/components/separator/page.tsx b/app/(site)/docs/components/separator/page.tsx
new file mode 100644
index 0000000..b2771ba
--- /dev/null
+++ b/app/(site)/docs/components/separator/page.tsx
@@ -0,0 +1,57 @@
+import { ComponentPreview } from "@/components/docs/component-preview";
+
+export default function SeparatorPage() {
+  return (
+    <ComponentPreview
+      name="Separator"
+      description="A separator component for React Native applications."
+      examples={[
+  {
+    "title": "Default",
+    "value": "default",
+    "content": "import { Separator } from \"@nativeui/ui\";\n\nexport default function SeparatorDemo() {\n  return (\n    <Separator>\n      Click me\n    </Separator>\n  );\n}",
+    "language": "tsx"
+  }
+]}
+      componentCode={`import React from "react";
+import { View } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface SeparatorProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+function Separator({ className, orientation = "horizontal" }: SeparatorProps) {
+  return (
+    <View
+      className={cn(
+        "bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+    />
+  );
+}
+
+export { Separator };
+`}
+      previewCode={`import { Separator } from "@nativeui/ui";
+
+export default function SeparatorDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Separator>Default Separator</Separator>
+      <Separator variant="destructive">Delete</Separator>
+      <Separator variant="outline">Outline</Separator>
+      <Separator variant="secondary">Secondary</Separator>
+      <Separator variant="ghost">Ghost</Separator>
+      <Separator variant="link">Link</Separator>
+    </div>
+  );
+}`}
+      registryName="separator"
+      packageName="@nativeui/ui"
+    />
+  );
+}
diff --git a/public/r/separator.json b/public/r/separator.json
new file mode 100644
index 0000000..2729f6a
--- /dev/null
+++ b/public/r/separator.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "separator",
+  "type": "registry:component",
+  "title": "Separator",
+  "description": "A separator component for React Native applications.",
+  "dependencies": [
+    "react-native"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/separator/separator.tsx",
+      "content": "import React from \"react\";\nimport { View } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SeparatorProps {\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nfunction Separator({ className, orientation = \"horizontal\" }: SeparatorProps) {\n  return (\n    <View\n      className={cn(\n        \"bg-border\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className\n      )}\n    />\n  );\n}\n\nexport { Separator };\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index b14e330..8f02f09 100644
--- a/registry.json
+++ b/registry.json
@@ -227,6 +227,20 @@
           "type": "registry:component"
         }
       ]
+    },
+    {
+      "name": "separator",
+      "type": "registry:component",
+      "title": "Separator",
+      "description": "A separator component for React Native applications.",
+      "files": [
+        {
+          "path": "registry/separator/separator.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "dependencies": ["react-native"],
+      "registryDependencies": []
     }
   ]
 }
diff --git a/registry/separator/separator.tsx b/registry/separator/separator.tsx
new file mode 100644
index 0000000..7daeb65
--- /dev/null
+++ b/registry/separator/separator.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import { cn } from "@/lib/utils";
+
+interface SeparatorProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}
+
+function Separator({ className, orientation = "horizontal" }: SeparatorProps) {
+  return (
+    <View
+      className={cn(
+        "bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+    />
+  );
+}
+
+export { Separator };