diff --git a/apps/ui/content/docs/components/separator.mdx b/apps/ui/content/docs/components/separator.mdx index 187ac3236..b04e2d3e2 100644 --- a/apps/ui/content/docs/components/separator.mdx +++ b/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 + + diff --git a/apps/ui/public/r/p-separator-2.json b/apps/ui/public/r/p-separator-2.json new file mode 100644 index 000000000..a89b4337f --- /dev/null +++ b/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 \n \n \n

Welcome back

\n
\n \n

Sign in to your account to continue.

\n
\n
\n \n
\n \n Email\n \n \n \n Password\n \n \n \n
\n
\n \n or\n \n
\n \n
\n
\n );\n}\n", + "type": "registry:block" + } + ], + "categories": [ + "separator" + ], + "type": "registry:block" +} \ No newline at end of file diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json index c8034a72a..4185c41d1 100644 --- a/apps/ui/public/r/registry.json +++ b/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" diff --git a/apps/ui/registry.json b/apps/ui/registry.json index c8034a72a..4185c41d1 100644 --- a/apps/ui/registry.json +++ b/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" diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx index 7e3b89b7c..16c2155b7 100644 --- a/apps/ui/registry/__index__.tsx +++ b/apps/ui/registry/__index__.tsx @@ -8125,6 +8125,24 @@ export const Index: Record = { 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", diff --git a/apps/ui/registry/default/particles/p-separator-2.tsx b/apps/ui/registry/default/particles/p-separator-2.tsx new file mode 100644 index 000000000..3bd056f1a --- /dev/null +++ b/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 ( + + + +

Welcome back

+
+ +

Sign in to your account to continue.

+
+
+ +
+ + Email + + + + Password + + + +
+
+ + or + +
+ +
+
+ ); +} diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts index 843eee8e8..b6de64983 100644 --- a/apps/ui/registry/registry-particles.ts +++ b/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", diff --git a/bun.lock b/bun.lock index e772a47e0..456fbf331 100644 --- a/bun.lock +++ b/bun.lock @@ -1,5 +1,6 @@ { "lockfileVersion": 1, + "configVersion": 0, "workspaces": { "": { "name": "cosscom",