feat(ui): add separator particle

apps/ui/content/docs/components/separator.mdx

@@ -49,7 +49,7 @@ npm install @base-ui/react
 ## Usage
 
 ```tsx
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
 ```
 
 ```tsx
@@ -61,3 +61,9 @@ import { Separator } from "@/components/ui/separator"
 ### Separator
 
 Styled wrapper for `Separator` from Base UI. Renders as a horizontal line by default with muted background color.
+
+## Examples
+
+### In The Form
+
+<ComponentPreview name="p-separator-2" />

apps/ui/public/r/p-separator-2.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "p-separator-2",
+  "description": "Separator in the form",
+  "registryDependencies": [
+    "@coss/button",
+    "@coss/card",
+    "@coss/field",
+    "@coss/form",
+    "@coss/input",
+    "@coss/separator"
+  ],
+  "files": [
+    {
+      "path": "registry/default/particles/p-separator-2.tsx",
+      "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Card,\n  CardDescription,\n  CardHeader,\n  CardPanel,\n  CardTitle,\n} from \"@/registry/default/ui/card\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Separator } from \"@/registry/default/ui/separator\";\n\nexport default function Particle() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader>\n        <CardTitle>\n          <h1 className=\"font-bold text-2xl\">Welcome back</h1>\n        </CardTitle>\n        <CardDescription>\n          <p>Sign in to your account to continue.</p>\n        </CardDescription>\n      </CardHeader>\n      <CardPanel>\n        <Form className=\"flex w-full flex-col gap-4\">\n          <Field>\n            <FieldLabel>Email</FieldLabel>\n            <Input placeholder=\"Enter your email\" type=\"email\" />\n          </Field>\n          <Field>\n            <FieldLabel>Password</FieldLabel>\n            <Input placeholder=\"Enter your password\" type=\"password\" />\n          </Field>\n          <Button className=\"w-full\" type=\"submit\">\n            Sign in\n          </Button>\n        </Form>\n        <div className=\"my-3 flex items-center justify-center gap-3 overflow-x-auto\">\n          <Separator />\n          <span className=\"text-muted-foreground text-sm\">or</span>\n          <Separator />\n        </div>\n        <Button className=\"w-full\" variant=\"outline\">\n          Sign up\n        </Button>\n      </CardPanel>\n    </Card>\n  );\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "categories": [
+    "separator"
+  ],
+  "type": "registry:block"
+}

apps/ui/public/r/registry.json

@@ -9405,6 +9405,28 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "separator"
+      ],
+      "description": "Separator in the form",
+      "files": [
+        {
+          "path": "registry/default/particles/p-separator-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-separator-2",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/card",
+        "@coss/field",
+        "@coss/form",
+        "@coss/input",
+        "@coss/separator"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "sheet"

apps/ui/registry.json

@@ -9405,6 +9405,28 @@
       ],
       "type": "registry:block"
     },
+    {
+      "categories": [
+        "separator"
+      ],
+      "description": "Separator in the form",
+      "files": [
+        {
+          "path": "registry/default/particles/p-separator-2.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "name": "p-separator-2",
+      "registryDependencies": [
+        "@coss/button",
+        "@coss/card",
+        "@coss/field",
+        "@coss/form",
+        "@coss/input",
+        "@coss/separator"
+      ],
+      "type": "registry:block"
+    },
     {
       "categories": [
         "sheet"

apps/ui/registry/__index__.tsx

@@ -8125,6 +8125,24 @@ export const Index: Record<string, any> = {
     categories: ["separator"],
     meta: undefined,
   },
+  "p-separator-2": {
+    name: "p-separator-2",
+    description: "Separator in the form",
+    type: "registry:block",
+    registryDependencies: ["@coss/button","@coss/card","@coss/field","@coss/form","@coss/input","@coss/separator"],
+    files: [{
+      path: "registry/default/particles/p-separator-2.tsx",
+      type: "registry:block",
+      target: ""
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/default/particles/p-separator-2.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["separator"],
+    meta: undefined,
+  },
   "p-sheet-1": {
     name: "p-sheet-1",
     description: "Basic sheet",

apps/ui/registry/default/particles/p-separator-2.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@/registry/default/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardPanel,
+  CardTitle,
+} from "@/registry/default/ui/card";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
+import { Form } from "@/registry/default/ui/form";
+import { Input } from "@/registry/default/ui/input";
+import { Separator } from "@/registry/default/ui/separator";
+
+export default function Particle() {
+  return (
+    <Card className="w-full max-w-xs">
+      <CardHeader>
+        <CardTitle>
+          <h1 className="font-bold text-2xl">Welcome back</h1>
+        </CardTitle>
+        <CardDescription>
+          <p>Sign in to your account to continue.</p>
+        </CardDescription>
+      </CardHeader>
+      <CardPanel>
+        <Form className="flex w-full flex-col gap-4">
+          <Field>
+            <FieldLabel>Email</FieldLabel>
+            <Input placeholder="Enter your email" type="email" />
+          </Field>
+          <Field>
+            <FieldLabel>Password</FieldLabel>
+            <Input placeholder="Enter your password" type="password" />
+          </Field>
+          <Button className="w-full" type="submit">
+            Sign in
+          </Button>
+        </Form>
+        <div className="my-3 flex items-center justify-center gap-3 overflow-x-auto">
+          <Separator />
+          <span className="text-muted-foreground text-sm">or</span>
+          <Separator />
+        </div>
+        <Button className="w-full" variant="outline">
+          Sign up
+        </Button>
+      </CardPanel>
+    </Card>
+  );
+}

apps/ui/registry/registry-particles.ts

@@ -4530,6 +4530,21 @@ export const particles: ParticleItem[] = [
     registryDependencies: ["@coss/separator"],
     type: "registry:block",
   },
+  {
+    categories: categories("separator"),
+    description: "Separator in the form",
+    files: [{ path: "particles/p-separator-2.tsx", type: "registry:block" }],
+    name: "p-separator-2",
+    registryDependencies: [
+      "@coss/button",
+      "@coss/card",
+      "@coss/field",
+      "@coss/form",
+      "@coss/input",
+      "@coss/separator",
+    ],
+    type: "registry:block",
+  },
   {
     categories: categories("sheet"),
     description: "Basic sheet",