Merge branch 'shadcn-ui:main' into patch-1

apps/v4/app/(app)/create/components/customizer.tsx

@@ -22,6 +22,7 @@ import { FontPicker } from "@/app/(app)/create/components/font-picker"
 import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
 import { MainMenu } from "@/app/(app)/create/components/main-menu"
 import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
+import { ProjectForm } from "@/app/(app)/create/components/project-form"
 import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
 import { RandomButton } from "@/app/(app)/create/components/random-button"
 import { ResetDialog } from "@/app/(app)/create/components/reset-button"
@@ -56,7 +57,6 @@ export function Customizer({
       </CardHeader>
       <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
         <FieldGroup className="flex-row gap-2.5 py-px **:data-[slot=field-separator]:-mx-4 **:data-[slot=field-separator]:w-auto md:flex-col md:gap-3.25">
-          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
           <StylePicker
             styles={STYLES}
             isMobile={isMobile}
@@ -91,14 +91,18 @@ export function Customizer({
           <FieldSeparator className="hidden md:block" />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
         </FieldGroup>
       </CardContent>
-      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:**:[button,a]:w-full">
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
         <CopyPreset className="flex-1 md:flex-none" />
         <RandomButton className="flex-1 md:flex-none" />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>
+      <CardFooter className="-mt-3 hidden min-w-0 gap-2 md:flex md:flex-col md:**:[button,a]:w-full">
+        <ProjectForm />
+      </CardFooter>
     </Card>
   )
 }

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

@@ -97,7 +97,7 @@ export function FontPicker({
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-xs text-muted-foreground">{label}</div>
-            <div className="text-sm font-medium text-foreground">
+            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
               {displayFontName}
             </div>
           </div>

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

@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       className={cn(
-        "relative w-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
+        "relative w-36 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
         className
       )}
       {...props}

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

@@ -112,13 +112,6 @@ export function PresetPicker({
                   closeOnClick={isMobile}
                 >
                   <div className="flex items-center gap-2">
-                    {style?.icon && (
-                      <div className="flex size-4 shrink-0 items-center justify-center">
-                        {React.cloneElement(style.icon, {
-                          className: "size-4",
-                        })}
-                      </div>
-                    )}
                     {preset.description}
                   </div>
                 </PickerRadioItem>

apps/v4/app/(app)/create/components/preview-switcher.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const PREVIEW_ITEMS = [
+  { label: "01", value: "preview-02" },
+  { label: "02", value: "preview" },
+]
+
+export function PreviewSwitcher() {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const isPreview =
+    params.item === "preview" || params.item.startsWith("preview-0")
+
+  if (!isPreview) {
+    return null
+  }
+
+  return (
+    <div className="dark absolute right-3 bottom-3 z-20 flex items-center gap-1 rounded-xl bg-card/90 p-1 shadow-xl backdrop-blur-xl">
+      {PREVIEW_ITEMS.map((item) => (
+        <Button
+          key={item.value}
+          variant="ghost"
+          size="sm"
+          data-active={params.item === item.value}
+          className="h-7 min-w-8 cursor-pointer rounded-lg px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+          onClick={() => setParams({ item: item.value })}
+        >
+          {item.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/preview.tsx

@@ -8,6 +8,7 @@ import {
   UNDO_FORWARD_TYPE,
 } from "@/app/(app)/create/components/history-buttons"
 import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher"
+import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
 import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
 import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
@@ -147,6 +148,7 @@ export function Preview() {
           title="Preview"
         />
       </div>
+      <PreviewSwitcher />
     </div>
   )
 }

apps/v4/app/(app)/create/hooks/use-reset.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import useSWR from "swr"
 
-import { DEFAULT_CONFIG } from "@/registry/config"
+import { DEFAULT_CONFIG, PRESETS } from "@/registry/config"
 import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
 const RESET_DIALOG_KEY = "create:reset-dialog-open"
@@ -20,22 +20,27 @@ export function useReset() {
     })
 
   const reset = React.useCallback(() => {
+    const preset =
+      PRESETS.find(
+        (preset) => preset.base === params.base && preset.style === params.style
+      ) ?? DEFAULT_CONFIG
+
     setParams({
       base: params.base,
-      style: DEFAULT_CONFIG.style,
-      baseColor: DEFAULT_CONFIG.baseColor,
-      theme: DEFAULT_CONFIG.theme,
-      chartColor: DEFAULT_CONFIG.chartColor,
-      iconLibrary: DEFAULT_CONFIG.iconLibrary,
-      font: DEFAULT_CONFIG.font,
-      fontHeading: DEFAULT_CONFIG.fontHeading,
-      menuAccent: DEFAULT_CONFIG.menuAccent,
-      menuColor: DEFAULT_CONFIG.menuColor,
-      radius: DEFAULT_CONFIG.radius,
+      style: params.style,
+      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,
       template: DEFAULT_CONFIG.template,
       item: params.item,
     })
-  }, [setParams, params.base, params.item])
+  }, [setParams, params.base, params.style, params.item])
 
   const handleShowResetDialogChange = React.useCallback(
     (open: boolean) => {

apps/v4/app/(app)/create/lib/search-params.ts

@@ -41,11 +41,11 @@ import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
 import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
 
 const designSystemSearchParams = {
-  preset: parseAsString.withDefault("b0"),
+  preset: parseAsString.withDefault("b2D0wqNxT"),
   base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
     DEFAULT_CONFIG.base
   ),
-  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
+  item: parseAsString.withDefault("preview-02").withOptions({ shallow: true }),
   iconLibrary: parseAsStringLiteral<IconLibraryName>(
     Object.values(iconLibraries).map((i) => i.name)
   ).withDefault(DEFAULT_CONFIG.iconLibrary),

apps/v4/app/(app)/create/page.tsx

@@ -48,9 +48,9 @@ export default async function CreatePage() {
       >
         <Preview />
         <Customizer itemsByBase={itemsByBase} />
-        <PresetHandler />
-        <WelcomeDialog />
       </div>
+      <PresetHandler />
+      <WelcomeDialog />
     </div>
   )
 }

apps/v4/app/(app)/layout.tsx

@@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-slot="layout"
-      className="group/layout relative z-10 flex min-h-svh flex-col bg-background"
+      className="group/layout relative z-10 flex min-h-svh flex-col bg-background has-data-[slot=designer]:h-svh has-data-[slot=designer]:overflow-hidden"
     >
       <SiteHeader />
       <main className="flex min-h-0 flex-1 flex-col">{children}</main>

apps/v4/app/globals.css

@@ -8,12 +8,14 @@
 @import "../registry/styles/style-lyra.css" layer(base);
 @import "../registry/styles/style-maia.css" layer(base);
 @import "../registry/styles/style-mira.css" layer(base);
+@import "../registry/styles/style-luma.css" layer(base);
 
 @custom-variant style-vega (&:where(.style-vega *));
 @custom-variant style-nova (&:where(.style-nova *));
 @custom-variant style-lyra (&:where(.style-lyra *));
 @custom-variant style-maia (&:where(.style-maia *));
 @custom-variant style-mira (&:where(.style-mira *));
+@custom-variant style-luma (&:where(.style-luma *));
 
 @custom-variant dark (&:is(.dark *));
 @custom-variant fixed (&:is(.layout-fixed *));

apps/v4/components/announcement.tsx

@@ -6,8 +6,8 @@ import { Badge } from "@/registry/new-york-v4/ui/badge"
 export function Announcement() {
   return (
     <Badge asChild variant="secondary" className="bg-muted">
-      <Link href="/docs/changelog/2026-03-cli-v4">
-        shadcn/skills, presets and more <ArrowRightIcon />
+      <Link href="/create">
+        Introducing Luma <ArrowRightIcon />
       </Link>
     </Badge>
   )

apps/v4/components/tailwind-indicator.tsx

@@ -1,4 +1,4 @@
-const SHOW = true
+const SHOW = false
 
 export function TailwindIndicator({
   forceMount = false,

apps/v4/package.json

@@ -31,6 +31,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@hugeicons/core-free-icons": "^1.2.1",
     "@hugeicons/react": "^1.1.1",
+    "@paper-design/shaders-react": "^0.0.72",
     "@phosphor-icons/react": "^2.1.10",
     "@remixicon/react": "^4.7.0",
     "@tabler/icons-react": "^3.31.0",
@@ -68,13 +69,14 @@
     "react-day-picker": "^9.7.0",
     "react-dom": "19.2.3",
     "react-hook-form": "^7.62.0",
+    "react-qr-code": "^2.0.18",
     "react-resizable-panels": "^4",
     "react-textarea-autosize": "^8.5.9",
     "recharts": "3.8.0",
     "rehype-pretty-code": "^0.14.1",
     "rimraf": "^6.0.1",
     "server-only": "^0.0.1",
-    "shadcn": "4.1.1",
+    "shadcn": "4.1.2",
     "shiki": "^1.10.1",
     "sonner": "^2.0.0",
     "swr": "^2.3.6",

apps/v4/public/r/config.json

@@ -179,6 +179,42 @@
       "menuAccent": "subtle",
       "menuColor": "default",
       "radius": "default"
+    },
+    {
+      "name": "radix-luma",
+      "title": "Luma (Radix)",
+      "description": "Luma / Lucide / Inter",
+      "base": "radix",
+      "style": "luma",
+      "baseColor": "neutral",
+      "theme": "neutral",
+      "chartColor": "neutral",
+      "iconLibrary": "lucide",
+      "font": "inter",
+      "fontHeading": "inherit",
+      "item": "Item",
+      "rtl": false,
+      "menuAccent": "subtle",
+      "menuColor": "default",
+      "radius": "default"
+    },
+    {
+      "name": "base-luma",
+      "title": "Luma (Base)",
+      "description": "Luma / Lucide / Inter",
+      "base": "base",
+      "style": "luma",
+      "baseColor": "neutral",
+      "theme": "neutral",
+      "chartColor": "neutral",
+      "iconLibrary": "lucide",
+      "font": "inter",
+      "fontHeading": "inherit",
+      "item": "Item",
+      "rtl": false,
+      "menuAccent": "subtle",
+      "menuColor": "default",
+      "radius": "default"
     }
   ]
 }

apps/v4/public/r/registries.json

@@ -959,6 +959,12 @@
     "url": "https://ui.flexnative.com/r/{name}.json",
     "description": "A collection of customizable UI blocks with interactive live previews"
   },
+  {
+    "name": "@tailgrids",
+    "homepage": "https://tailgrids.com",
+    "url": "https://tailgrids.com/docs/r/{name}.json",
+    "description": "React UI Components, Powered by Tailwind CSS"
+  },
   {
     "name": "@nexus-ui",
     "homepage": "https://nexus-ui.dev",

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

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/accordion.tsx",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-luma/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(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\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 data-open:bg-muted/50\", 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 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline 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 px-4 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-luma/alert.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "alert",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/alert.tsx",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm 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\",\n        destructive:\n          \"bg-card text-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-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-luma/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-luma/examples/aspect-ratio-example.tsx",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { AspectRatio } from \"@/registry/base-luma/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-luma/aspect-ratio.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "aspect-ratio",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/aspect-ratio.tsx",
+      "content": "import { cn } from \"@/registry/base-luma/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-luma/avatar.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "files": [
+    {
+      "path": "registry/base-luma/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-luma/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-luma/badge.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "files": [
+    {
+      "path": "registry/base-luma/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-luma/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-3xl 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-luma/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-luma/examples/breadcrumb-example.tsx",
+      "content": "import Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/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-luma/breadcrumb.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "breadcrumb",
+  "files": [
+    {
+      "path": "registry/base-luma/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-luma/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-luma/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-luma/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-luma/lib/utils\"\nimport { Separator } from \"@/registry/base-luma/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 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border 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-r-4xl [&>[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-r-4xl! [&>[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-b-4xl! [&>[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 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_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-luma/button.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/button.tsx",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 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-3 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-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent 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-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\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-luma/card.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/card.tsx",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-luma/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-6 overflow-hidden rounded-4xl bg-card py-6 text-sm text-card-foreground shadow-md ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl\",\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-t-4xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\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(\"cn-font-heading text-base font-medium\", className)}\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 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-6 group-data-[size=sm]/card:px-4\", 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 rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\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-luma/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-luma/examples/carousel-example.tsx",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Card, CardContent } from \"@/registry/base-luma/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/base-luma/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-luma/checkbox.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/checkbox.tsx",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-luma/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 shrink-0 items-center justify-center rounded-[5px] border border-transparent bg-input/90 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-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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-luma/collapsible.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "collapsible",
+  "files": [
+    {
+      "path": "registry/base-luma/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-luma/dialog.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "registryDependencies": [
+    "button"
+  ],
+  "files": [
+    {
+      "path": "registry/base-luma/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-luma/lib/utils\"\nimport { Button } from \"@/registry/base-luma/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/30 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-4xl bg-popover p-6 text-sm text-popover-foreground shadow-xl ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md dark:ring-foreground/10 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-4 right-4 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-1.5\", 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-base leading-none font-medium\",\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        \"text-sm 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-luma/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-luma/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-luma/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-luma/examples/drawer-example.tsx",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-luma/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-luma/drawer.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "dependencies": [
+    "vaul"
+  ],
+  "files": [
+    {
+      "path": "registry/base-luma/ui/drawer.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-luma/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/30 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-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-popover before:shadow-xl 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=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 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=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=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-full 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-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 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-base font-medium text-foreground\",\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(\"text-sm text-muted-foreground\", className)}\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-luma/empty.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty",
+  "files": [
+    {
+      "path": "registry/base-luma/ui/empty.tsx",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-luma/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 rounded-2xl 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-xl 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 font-medium tracking-tight\",\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        \"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-luma/example.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "example",
+  "title": "Example",
+  "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",
+      "type": "registry:component"
+    }
+  ],
+  "type": "registry:component"
+}

apps/v4/public/r/styles/base-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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-luma/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"
+  }
+}

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

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

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

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

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

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

apps/v4/public/r/styles/base-luma/font-heading-noto-sans.json

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

apps/v4/public/r/styles/base-luma/font-heading-noto-serif.json

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

apps/v4/public/r/styles/base-luma/font-heading-nunito-sans.json

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

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

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

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

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

apps/v4/public/r/styles/base-luma/font-heading-playfair-display.json

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

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

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

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

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

apps/v4/public/r/styles/base-luma/font-heading-roboto-slab.json

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

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

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

apps/v4/public/r/styles/base-luma/font-heading-source-sans-3.json

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

apps/v4/public/r/styles/base-luma/font-heading-space-grotesk.json

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

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

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

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

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

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

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

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

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

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

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