feat: build registry

apps/v4/app/(app)/create/components/style-picker.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { type Style, type StyleName } from "@/registry/config"
+import { PRESETS, type Style, type StyleName } from "@/registry/config"
 import { LockButton } from "@/app/(app)/create/components/lock-button"
 import {
   Picker,
@@ -53,7 +53,24 @@ export function StylePicker({
           <PickerRadioGroup
             value={currentStyle?.name}
             onValueChange={(value) => {
-              setParams({ style: value as StyleName })
+              const styleName = value as StyleName
+              const preset = PRESETS.find(
+                (p) => p.base === params.base && p.style === styleName
+              )
+              setParams({
+                style: styleName,
+                ...(preset && {
+                  baseColor: preset.baseColor,
+                  theme: preset.theme,
+                  chartColor: preset.chartColor,
+                  iconLibrary: preset.iconLibrary,
+                  font: preset.font,
+                  fontHeading: preset.fontHeading,
+                  menuAccent: preset.menuAccent,
+                  menuColor: preset.menuColor,
+                  radius: preset.radius,
+                }),
+              })
             }}
           >
             <PickerGroup>

apps/v4/app/(app)/create/lib/fonts.ts

@@ -1,5 +1,6 @@
 import {
   DM_Sans,
+  EB_Garamond,
   Figtree,
   Geist,
   Geist_Mono,
@@ -149,6 +150,11 @@ const playfairDisplay = Playfair_Display({
   variable: "--font-playfair-display",
 })
 
+const ebGaramond = EB_Garamond({
+  subsets: ["latin"],
+  variable: "--font-eb-garamond",
+})
+
 const PREVIEW_FONTS = {
   geist: geistSans,
   inter,
@@ -174,6 +180,7 @@ const PREVIEW_FONTS = {
   merriweather,
   lora,
   "playfair-display": playfairDisplay,
+  "eb-garamond": ebGaramond,
 } satisfies Record<FontName, PreviewFont>
 
 function createFontOption(name: FontName) {
@@ -216,6 +223,7 @@ export const FONTS = [
   createFontOption("merriweather"),
   createFontOption("lora"),
   createFontOption("playfair-display"),
+  createFontOption("eb-garamond"),
 ] as const
 
 export type Font = (typeof FONTS)[number]

apps/v4/lib/font-definitions.ts

@@ -301,6 +301,18 @@ export const FONT_DEFINITIONS = [
     dependency: "@fontsource-variable/playfair-display",
     subsets: ["latin"],
   },
+  {
+    name: "eb-garamond",
+    title: "EB Garamond",
+    type: "serif",
+    family: "'EB Garamond Variable', serif",
+    registryVariable: "--font-serif",
+    previewVariable: "--font-eb-garamond",
+    provider: "google",
+    import: "EB_Garamond",
+    dependency: "@fontsource-variable/eb-garamond",
+    subsets: ["latin"],
+  },
 ] as const satisfies readonly FontDefinition[]
 
 export type FontName = (typeof FONT_DEFINITIONS)[number]["name"]

apps/v4/public/r/config.json

@@ -219,15 +219,15 @@
     {
       "name": "radix-sera",
       "title": "Sera (Radix)",
-      "description": "Sera / Lucide / Inter + Playfair Display",
+      "description": "Sera / Lucide / Noto Sans + EB Garamond",
       "base": "radix",
       "style": "sera",
-      "baseColor": "neutral",
-      "theme": "neutral",
-      "chartColor": "neutral",
+      "baseColor": "taupe",
+      "theme": "taupe",
+      "chartColor": "taupe",
       "iconLibrary": "lucide",
-      "font": "inter",
-      "fontHeading": "playfair-display",
+      "font": "noto-sans",
+      "fontHeading": "eb-garamond",
       "item": "Item",
       "rtl": false,
       "menuAccent": "subtle",
@@ -237,15 +237,15 @@
     {
       "name": "base-sera",
       "title": "Sera (Base)",
-      "description": "Sera / Lucide / Inter + Playfair Display",
+      "description": "Sera / Lucide / Noto Sans + EB Garamond",
       "base": "base",
       "style": "sera",
-      "baseColor": "neutral",
-      "theme": "neutral",
-      "chartColor": "neutral",
+      "baseColor": "taupe",
+      "theme": "taupe",
+      "chartColor": "taupe",
       "iconLibrary": "lucide",
-      "font": "inter",
-      "fontHeading": "playfair-display",
+      "font": "noto-sans",
+      "fontHeading": "eb-garamond",
       "item": "Item",
       "rtl": false,
       "menuAccent": "subtle",

apps/v4/public/r/styles/base-luma/example.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-luma/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/base-luma/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-luma/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-luma/registry.json

@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }

apps/v4/public/r/styles/base-lyra/example.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/base-lyra/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-lyra/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-lyra/registry.json

@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }

apps/v4/public/r/styles/base-maia/example.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/base-maia/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-maia/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-maia/registry.json

@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }

apps/v4/public/r/styles/base-mira/example.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/base-mira/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-mira/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-mira/registry.json

@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }

apps/v4/public/r/styles/base-nova/example.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],

apps/v4/public/r/styles/base-nova/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-nova/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-nova/registry.json

@@ -3185,6 +3185,19 @@
         "dependency": "@fontsource-variable/playfair-display"
       }
     },
+    {
+      "name": "font-eb-garamond",
+      "title": "EB Garamond",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-serif",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
+    },
     {
       "name": "font-heading-geist",
       "title": "Geist (Heading)",
@@ -3496,6 +3509,19 @@
         "subsets": ["latin"],
         "dependency": "@fontsource-variable/playfair-display"
       }
+    },
+    {
+      "name": "font-heading-eb-garamond",
+      "title": "EB Garamond (Heading)",
+      "type": "registry:font",
+      "font": {
+        "family": "'EB Garamond Variable', serif",
+        "provider": "google",
+        "import": "EB_Garamond",
+        "variable": "--font-heading",
+        "subsets": ["latin"],
+        "dependency": "@fontsource-variable/eb-garamond"
+      }
     }
   ]
 }

apps/v4/public/r/styles/base-sera/accordion.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/accordion.tsx",
+      "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/alert.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-1 border bg-background px-4 py-3 text-left text-sm after:absolute after:-inset-y-px after:-left-px after:w-0.5 has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground after:bg-foreground\",\n        destructive:\n          \"bg-card text-destructive after:bg-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"cn-font-heading font-sans font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/aspect-ratio-example.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio-example",
+  "title": "Aspect Ratio",
+  "registryDependencies": [
+    "aspect-ratio",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/aspect-ratio-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { AspectRatio } from \"@/registry/base-sera/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={16 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio\n        ratio={1 / 1}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={9 / 16}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio\n        ratio={21 / 9}\n        className=\"rounded-lg bg-muted style-luma:rounded-3xl\"\n      >\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20 style-luma:rounded-3xl\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}

apps/v4/public/r/styles/base-sera/aspect-ratio.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/aspect-ratio.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction AspectRatio({\n  ratio,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & { ratio: number }) {\n  return (\n    <div\n      data-slot=\"aspect-ratio\"\n      style={\n        {\n          \"--ratio\": ratio,\n        } as React.CSSProperties\n      }\n      className={cn(\"relative aspect-(--ratio)\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { AspectRatio }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/avatar.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/avatar.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/badge.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/badge.tsx",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/breadcrumb-example.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb-example",
+  "title": "Breadcrumb",
+  "registryDependencies": [
+    "breadcrumb",
+    "dropdown-menu",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/breadcrumb-example.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\n\nexport default function BreadcrumbExample() {\n  return (\n    <ExampleWrapper>\n      <BreadcrumbBasic />\n      <BreadcrumbWithDropdown />\n      <BreadcrumbWithLink />\n    </ExampleWrapper>\n  )\n}\n\nfunction BreadcrumbBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n              >\n                <BreadcrumbEllipsis />\n                <span className=\"sr-only\">Toggle menu</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                <DropdownMenuItem>Documentation</DropdownMenuItem>\n                <DropdownMenuItem>Themes</DropdownMenuItem>\n                <DropdownMenuItem>GitHub</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n\nfunction BreadcrumbWithLink() {\n  return (\n    <Example title=\"With Link\" className=\"items-center justify-center\">\n      <Breadcrumb>\n        <BreadcrumbList>\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Home</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbEllipsis />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbLink render={<Link href=\"#\">Components</Link>} />\n          </BreadcrumbItem>\n          <BreadcrumbSeparator />\n          <BreadcrumbItem>\n            <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n          </BreadcrumbItem>\n        </BreadcrumbList>\n      </Breadcrumb>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}

apps/v4/public/r/styles/base-sera/breadcrumb.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/breadcrumb.tsx",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/button-group.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-group",
+  "registryDependencies": [
+    "separator"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/button-group.tsx",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/button.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/button.tsx",
+      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/card.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-8 overflow-hidden bg-card py-8 text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-8 group-data-[size=sm]/card:px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-8 group-data-[size=sm]/card:[.border-b]:pb-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-8 group-data-[size=sm]/card:px-5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center px-8 group-data-[size=sm]/card:px-5 [.border-t]:pt-8 group-data-[size=sm]/card:[.border-t]:pt-5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/carousel-example.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel-example",
+  "title": "Carousel",
+  "registryDependencies": [
+    "card",
+    "carousel",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/carousel-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Card, CardContent } from \"@/registry/base-sera/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/base-sera/ui/carousel\"\n\nexport default function CarouselExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <CarouselBasic />\n      <CarouselMultiple />\n      <CarouselWithGap />\n    </ExampleWrapper>\n  )\n}\n\nfunction CarouselBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Carousel\n        className=\"mx-auto max-w-xs sm:max-w-sm\"\n        opts={{\n          align: \"start\",\n        }}\n      >\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselWithGap() {\n  return (\n    <Example title=\"With Gap\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent className=\"-ml-1\">\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n              <div className=\"p-1 style-luma:p-2.5\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}

apps/v4/public/r/styles/base-sera/checkbox.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/collapsible.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/collapsible.tsx",
+      "content": "\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"@base-ui/react/collapsible\"\n\nfunction Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {\n  return (\n    <CollapsiblePrimitive.Trigger data-slot=\"collapsible-trigger\" {...props} />\n  )\n}\n\nfunction CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {\n  return (\n    <CollapsiblePrimitive.Panel data-slot=\"collapsible-content\" {...props} />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/dialog.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/dialog.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-5 right-5 bg-secondary\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"cn-font-heading text-lg leading-none tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/direction.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "direction",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/direction.tsx",
+      "content": "\"use client\"\n\nexport {\n  DirectionProvider,\n  useDirection,\n} from \"@base-ui/react/direction-provider\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/drawer-example.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer-example",
+  "title": "Drawer",
+  "registryDependencies": [
+    "drawer",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/examples/drawer-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-sera/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}

apps/v4/public/r/styles/base-sera/drawer.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "dependencies": [
+    "vaul"
+  ],
+  "files": [
+    {
+      "path": "registry/base-sera/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-2 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\n        \"mt-0.5 text-sm leading-relaxed text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/empty.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty",
+  "files": [
+    {
+      "path": "registry/base-sera/ui/empty.tsx",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\n        \"cn-font-heading text-lg tracking-wider uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"mt-0.5 text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "type": "registry:ui"
+    }
+  ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
+  "type": "registry:ui"
+}

apps/v4/public/r/styles/base-sera/example.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example",
+  "title": "Example",
+  "files": [
+    {
+      "path": "registry/base-sera/components/example.tsx",
+      "content": "import { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground style-lyra:rounded-none style-sera:rounded-none *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}

apps/v4/public/r/styles/base-sera/font-dm-sans.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-dm-sans",
+  "title": "DM Sans",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}

apps/v4/public/r/styles/base-sera/font-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-eb-garamond",
+  "title": "EB Garamond",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-sera/font-figtree.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-figtree",
+  "title": "Figtree",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}

apps/v4/public/r/styles/base-sera/font-geist-mono.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist-mono",
+  "title": "Geist Mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-mono",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}

apps/v4/public/r/styles/base-sera/font-geist.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-geist",
+  "title": "Geist",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-sans",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-dm-sans.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-dm-sans",
+  "title": "DM Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'DM Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "DM_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/dm-sans"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-eb-garamond.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-eb-garamond",
+  "title": "EB Garamond (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'EB Garamond Variable', serif",
+    "provider": "google",
+    "import": "EB_Garamond",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/eb-garamond"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-figtree.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-figtree",
+  "title": "Figtree (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Figtree Variable', sans-serif",
+    "provider": "google",
+    "import": "Figtree",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/figtree"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-geist-mono.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist-mono",
+  "title": "Geist Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Mono Variable', monospace",
+    "provider": "google",
+    "import": "Geist_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist-mono"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-geist.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-geist",
+  "title": "Geist (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Geist Variable', sans-serif",
+    "provider": "google",
+    "import": "Geist",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/geist"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-ibm-plex-sans.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-ibm-plex-sans",
+  "title": "IBM Plex Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'IBM Plex Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "IBM_Plex_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/ibm-plex-sans"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-instrument-sans.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-instrument-sans",
+  "title": "Instrument Sans (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Instrument Sans Variable', sans-serif",
+    "provider": "google",
+    "import": "Instrument_Sans",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/instrument-sans"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-inter.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-inter",
+  "title": "Inter (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/inter"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-jetbrains-mono.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-jetbrains-mono",
+  "title": "JetBrains Mono (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/jetbrains-mono"
+  }
+}

apps/v4/public/r/styles/base-sera/font-heading-lora.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-heading-lora",
+  "title": "Lora (Heading)",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-heading",
+    "subsets": [
+      "latin"
+    ],
+    "dependency": "@fontsource-variable/lora"
+  }
+}