chore(release): version packages (#9352)

* chore(release): version packages

* ci: deps

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: shadcn <m@shadcn.com>

.github/ISSUE_TEMPLATE/registry_directory.yml

@@ -1,63 +0,0 @@
-name: Add registry to directory
-description: Add your registry to the directory
-title: "[Registry Directory]: "
-labels: ["registry", "directory"]
-assignees: []
-body:
-  - type: input
-    id: name
-    attributes:
-      label: Name
-      description: The name of your registry. This is also the namespace.
-      placeholder: e.g., "@acme"
-    validations:
-      required: true
-
-  - type: input
-    id: url
-    attributes:
-      label: URL
-      description: The URL to your registry index. Use {name} placeholder.
-      placeholder: https://ui.acme.com/r/{name}.json
-    validations:
-      required: true
-
-  - type: input
-    id: homepage
-    attributes:
-      label: Homepage
-      description: The URL to your registry homepage. This is where users can browse your registry.
-      placeholder: https://ui.acme.com
-    validations:
-      required: true
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Description
-      description: Briefly describe what is your registry and what type of components or code it distributes.
-      placeholder: 
-    validations:
-      required: true
-
-  - type: textarea
-    id: logo
-    attributes:
-      label: Logo
-      description: Add your SVG logo here.
-      placeholder: 
-    validations:
-      required: true
-
-  - type: checkboxes
-    id: requirements
-    attributes:
-      label: Checklist
-      description: Verify that your registry meets the following requirements.
-      options:
-        - label: The registry must be open source and publicly accessible.
-        - label: The registry must be a valid JSON file that conforms to the [registry schema](https://ui.shadcn.com/docs/registry/registry-json) specification.
-        - label: The `files` array, if present on your registry items, must NOT include a `content` property.
-        - label: I've attached a square SVG logo to this issue
-    validations:
-      required: true

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

@@ -7,15 +7,17 @@ import { HugeiconsIcon } from "@hugeicons/react"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
 import { FieldGroup } from "@/registry/new-york-v4/ui/field"
+import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
 import { BasePicker } from "@/app/(create)/components/base-picker"
-import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
 import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
 import { PresetPicker } from "@/app/(create)/components/preset-picker"
 import { RadiusPicker } from "@/app/(create)/components/radius-picker"
+import { RandomButton } from "@/app/(create)/components/random-button"
+import { ResetButton } from "@/app/(create)/components/reset-button"
 import { StylePicker } from "@/app/(create)/components/style-picker"
 import { ThemePicker } from "@/app/(create)/components/theme-picker"
 import { FONTS } from "@/app/(create)/lib/fonts"
@@ -75,7 +77,10 @@ export function Customizer() {
           <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
-          <CustomizerControls className="mt-auto hidden w-full flex-col md:flex" />
+          <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
+            <RandomButton />
+            <ResetButton />
+          </div>
         </FieldGroup>
       </div>
     </div>

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

@@ -45,6 +45,12 @@ const IconPhosphor = lazy(() =>
   }))
 )
 
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
 const PREVIEW_ICONS = {
   lucide: [
     "CopyIcon",
@@ -110,6 +116,22 @@ const PREVIEW_ICONS = {
     "CaretDownIcon",
     "CaretRightIcon",
   ],
+  remixicon: [
+    "RiFileCopyLine",
+    "RiErrorWarningLine",
+    "RiDeleteBinLine",
+    "RiShareLine",
+    "RiShoppingBagLine",
+    "RiMoreLine",
+    "RiLoaderLine",
+    "RiAddLine",
+    "RiSubtractLine",
+    "RiArrowLeftLine",
+    "RiArrowRightLine",
+    "RiCheckLine",
+    "RiArrowDownSLine",
+    "RiArrowRightSLine",
+  ],
 }
 
 const logos = {
@@ -194,6 +216,17 @@ const logos = {
       />
     </svg>
   ),
+  remixicon: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="currentColor"
+    >
+      <path d="M12 2C17.5228 2 22 6.47715 22 12C22 15.3137 19.3137 18 16 18C12.6863 18 10 15.3137 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 16.4183 11.5817 20 16 20C16.8708 20 17.7084 19.8588 18.4932 19.6016C16.7458 21.0956 14.4792 22 12 22C6.6689 22 2.3127 17.8283 2.0166 12.5713C2.23647 9.45772 4.83048 7 8 7C11.3137 7 14 9.68629 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 8.58172 12.4183 5 8 5C6.50513 5 5.1062 5.41032 3.90918 6.12402C5.72712 3.62515 8.67334 2 12 2Z" />
+    </svg>
+  ),
 }
 
 export function IconLibraryPicker({
@@ -301,7 +334,9 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
         ? IconTabler
         : iconLibrary === "hugeicons"
           ? IconHugeicons
-          : IconPhosphor
+          : iconLibrary === "phosphor"
+            ? IconPhosphor
+            : IconRemixicon
 
   return (
     <Suspense

apps/v4/app/(create)/components/icon-placeholder.tsx

@@ -30,6 +30,12 @@ const IconPhosphor = lazy(() =>
   }))
 )
 
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
 export function IconPlaceholder({
   ...props
 }: {
@@ -52,6 +58,9 @@ export function IconPlaceholder({
       {iconLibrary === "phosphor" && (
         <IconPhosphor name={iconName} {...props} />
       )}
+      {iconLibrary === "remixicon" && (
+        <IconRemixicon name={iconName} {...props} />
+      )}
     </Suspense>
   )
 }

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

@@ -139,6 +139,7 @@ function PickerSubTrigger({
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
         phosphor="CaretRightIcon"
+        remixicon="RiArrowRightSLine"
         className="ml-auto"
       />
     </MenuPrimitive.SubmenuTrigger>
@@ -192,6 +193,7 @@ function PickerCheckboxItem({
             tabler="IconCheck"
             hugeicons="Tick02Icon"
             phosphor="CheckIcon"
+            remixicon="RiCheckLine"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -233,6 +235,7 @@ function PickerRadioItem({
             tabler="IconCheck"
             hugeicons="Tick02Icon"
             phosphor="CheckIcon"
+            remixicon="RiCheckLine"
             className="size-4 pointer-coarse:size-5"
           />
         </MenuPrimitive.RadioItemIndicator>

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

@@ -5,8 +5,8 @@ import { type ImperativePanelHandle } from "react-resizable-panels"
 
 import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
 import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/customizer-controls"
 import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
 import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
 import {
   serializeDesignSystemSearchParams,

apps/v4/app/(create)/components/random-button.tsx

@@ -2,13 +2,11 @@
 
 import * as React from "react"
 import Script from "next/script"
-import { DiceFaces05Icon, Undo02Icon } from "@hugeicons/core-free-icons"
+import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
-import { cn } from "@/lib/utils"
 import {
   BASE_COLORS,
-  DEFAULT_CONFIG,
   getThemesForBaseColor,
   iconLibraries,
   MENU_ACCENTS,
@@ -18,6 +16,11 @@ import {
 } from "@/registry/config"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Kbd } from "@/registry/new-york-v4/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
 import { useLocks } from "@/app/(create)/hooks/use-locks"
 import { FONTS } from "@/app/(create)/lib/fonts"
 import {
@@ -33,26 +36,10 @@ function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
 }
 
-export function CustomizerControls({ className }: { className?: string }) {
+export function RandomButton() {
   const { locks } = useLocks()
   const [params, setParams] = useDesignSystemSearchParams()
 
-  const handleReset = React.useCallback(() => {
-    setParams({
-      base: params.base, // Keep the current base value
-      style: DEFAULT_CONFIG.style,
-      baseColor: DEFAULT_CONFIG.baseColor,
-      theme: DEFAULT_CONFIG.theme,
-      iconLibrary: DEFAULT_CONFIG.iconLibrary,
-      font: DEFAULT_CONFIG.font,
-      menuAccent: DEFAULT_CONFIG.menuAccent,
-      menuColor: DEFAULT_CONFIG.menuColor,
-      radius: DEFAULT_CONFIG.radius,
-      template: DEFAULT_CONFIG.template,
-      item: "preview",
-    })
-  }, [setParams, params.base])
-
   const handleRandomize = React.useCallback(() => {
     // Use current value if locked, otherwise randomize.
     const baseColor = locks.has("baseColor")
@@ -130,33 +117,30 @@ export function CustomizerControls({ className }: { className?: string }) {
   }, [handleRandomize])
 
   return (
-    <div className={cn("items-center gap-0", className)}>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={handleRandomize}
-        className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-      >
-        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Shuffle</div>
-          <div className="text-foreground text-sm font-medium">Try Random</div>
-        </div>
-        <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
-        <Kbd className="bg-foreground/10 text-foreground hidden md:flex">R</Kbd>
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={handleReset}
-        className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-      >
-        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Reset</div>
-          <div className="text-foreground text-sm font-medium">Start Over</div>
-        </div>
-        <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
-      </Button>
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleRandomize}
+          className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+        >
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Shuffle</div>
+            <div className="text-foreground text-sm font-medium">
+              Try Random
+            </div>
+          </div>
+          <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
+          <Kbd className="bg-foreground/10 text-foreground hidden md:flex">
+            R
+          </Kbd>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="left">
+        Use browser back/forward to navigate history
+      </TooltipContent>
+    </Tooltip>
   )
 }
 

apps/v4/app/(create)/components/reset-button.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { Undo02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/new-york-v4/ui/alert-dialog"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function ResetButton() {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const handleReset = React.useCallback(() => {
+    setParams({
+      base: params.base, // Keep the current base value.
+      style: DEFAULT_CONFIG.style,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      theme: DEFAULT_CONFIG.theme,
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      font: DEFAULT_CONFIG.font,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      template: DEFAULT_CONFIG.template,
+      item: "preview",
+    })
+  }, [setParams, params.base])
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
+        >
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-muted-foreground text-xs">Reset</div>
+            <div className="text-foreground text-sm font-medium">
+              Start Over
+            </div>
+          </div>
+          <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will reset all customization options to their default values.
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
+          <AlertDialogAction className="rounded-lg" onClick={handleReset}>
+            Reset
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

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

@@ -12,10 +12,11 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
 import { Customizer } from "@/app/(create)/components/customizer"
-import { CustomizerControls } from "@/app/(create)/components/customizer-controls"
 import { ItemExplorer } from "@/app/(create)/components/item-explorer"
 import { ItemPicker } from "@/app/(create)/components/item-picker"
 import { Preview } from "@/app/(create)/components/preview"
+import { RandomButton } from "@/app/(create)/components/random-button"
+import { ResetButton } from "@/app/(create)/components/reset-button"
 import { ShareButton } from "@/app/(create)/components/share-button"
 import { ToolbarControls } from "@/app/(create)/components/toolbar-controls"
 import { V0Button } from "@/app/(create)/components/v0-button"
@@ -103,7 +104,10 @@ export default async function CreatePage({
             </div>
             <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center gap-2 px-4.5 pb-4 sm:static sm:justify-end sm:p-0 lg:ml-0 xl:justify-center">
               <ItemPicker items={filteredItems} />
-              <CustomizerControls className="sm:hidden" />
+              <div className="items-center gap-0 sm:hidden">
+                <RandomButton />
+                <ResetButton />
+              </div>
               <Separator
                 orientation="vertical"
                 className="mr-2 hidden sm:flex xl:hidden"

apps/v4/app/(create)/preview/[base]/[name]/page.tsx

@@ -7,10 +7,10 @@ import { absoluteUrl } from "@/lib/utils"
 import { DarkModeScript } from "@/components/mode-switcher"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { BASES, type Base } from "@/registry/config"
-import { RandomizeScript } from "@/app/(create)/components/customizer-controls"
 import { DesignSystemProvider } from "@/app/(create)/components/design-system-provider"
 import { ItemPickerScript } from "@/app/(create)/components/item-picker"
 import { PreviewStyle } from "@/app/(create)/components/preview-style"
+import { RandomizeScript } from "@/app/(create)/components/random-button"
 import { getBaseComponent, getBaseItem } from "@/app/(create)/lib/api"
 import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
 

apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx

@@ -118,6 +118,7 @@ function DropdownMenuCheckboxes() {
               tabler="IconUser"
               hugeicons="UserIcon"
               phosphor="UserIcon"
+              remixicon="RiUserLine"
             />
             Profile
           </DropdownMenuItem>
@@ -127,6 +128,7 @@ function DropdownMenuCheckboxes() {
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
               phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -136,6 +138,7 @@ function DropdownMenuCheckboxes() {
               tabler="IconSettings"
               hugeicons="SettingsIcon"
               phosphor="GearIcon"
+              remixicon="RiSettings3Line"
             />
             Settings
           </DropdownMenuItem>
@@ -171,6 +174,7 @@ function DropdownMenuCheckboxes() {
               tabler="IconLogout"
               hugeicons="LogoutIcon"
               phosphor="SignOutIcon"
+              remixicon="RiLogoutBoxLine"
             />
             Sign Out
           </DropdownMenuItem>
@@ -227,6 +231,7 @@ function DropdownMenuWithAvatar() {
             tabler="IconChevronsUpDown"
             hugeicons="ChevronUpDownIcon"
             phosphor="CaretUpDownIcon"
+            remixicon="RiExpandUpDownLine"
             className="text-muted-foreground ml-auto"
           />
         </Button>
@@ -257,6 +262,7 @@ function DropdownMenuWithAvatar() {
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
               phosphor="SparklesIcon"
+              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -269,6 +275,7 @@ function DropdownMenuWithAvatar() {
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
               phosphor="CheckCircleIcon"
+              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -278,6 +285,7 @@ function DropdownMenuWithAvatar() {
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
               phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -287,6 +295,7 @@ function DropdownMenuWithAvatar() {
               tabler="IconBell"
               hugeicons="BellIcon"
               phosphor="BellIcon"
+              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -298,6 +307,7 @@ function DropdownMenuWithAvatar() {
             tabler="IconLogout"
             hugeicons="LogoutIcon"
             phosphor="SignOutIcon"
+            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -352,6 +362,7 @@ function DropdownMenuAvatarOnly() {
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
               phosphor="SparklesIcon"
+              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -364,6 +375,7 @@ function DropdownMenuAvatarOnly() {
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
               phosphor="CheckCircleIcon"
+              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -373,6 +385,7 @@ function DropdownMenuAvatarOnly() {
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
               phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -382,6 +395,7 @@ function DropdownMenuAvatarOnly() {
               tabler="IconBell"
               hugeicons="BellIcon"
               phosphor="BellIcon"
+              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -393,6 +407,7 @@ function DropdownMenuAvatarOnly() {
             tabler="IconLogout"
             hugeicons="LogoutIcon"
             phosphor="SignOutIcon"
+            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -411,6 +426,7 @@ function DropdownMenuIconColor() {
             tabler="IconDots"
             hugeicons="MoreHorizontalCircle01Icon"
             phosphor="DotsThreeOutlineIcon"
+            remixicon="RiMoreLine"
           />
           <span className="sr-only">Toggle menu</span>
         </Button>
@@ -423,6 +439,7 @@ function DropdownMenuIconColor() {
               tabler="IconPencil"
               hugeicons="EditIcon"
               phosphor="PencilIcon"
+              remixicon="RiPencilLine"
             />
             Edit
           </DropdownMenuItem>
@@ -432,6 +449,7 @@ function DropdownMenuIconColor() {
               tabler="IconShare"
               hugeicons="ShareIcon"
               phosphor="ShareIcon"
+              remixicon="RiShareLine"
             />
             Share
           </DropdownMenuItem>
@@ -442,6 +460,7 @@ function DropdownMenuIconColor() {
               tabler="IconTrash"
               hugeicons="DeleteIcon"
               phosphor="TrashIcon"
+              remixicon="RiDeleteBinLine"
             />
             Delete
           </DropdownMenuItem>

apps/v4/components/directory-add-button.tsx

@@ -1,13 +1,11 @@
 "use client"
 
 import * as React from "react"
-import Link from "next/link"
-import { IconCheck } from "@tabler/icons-react"
+import { IconCheck, IconCopy, IconPlus } from "@tabler/icons-react"
 
-import { cn } from "@/lib/utils"
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { useConfig } from "@/hooks/use-config"
 import { useIsMobile } from "@/hooks/use-mobile"
-import { CopyButton } from "@/components/copy-button"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Dialog,
@@ -29,77 +27,114 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/registry/new-york-v4/ui/drawer"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/new-york-v4/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york-v4/ui/tooltip"
 
 export function DirectoryAddButton({
   registry,
 }: {
-  registry: {
-    name: string
-    url: string
-  }
+  registry: { name: string }
 }) {
-  const { copyToClipboard, isCopied } = useCopyToClipboard()
-  const isMobile = useIsMobile()
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
   const [open, setOpen] = React.useState(false)
+  const isMobile = useIsMobile()
 
-  const jsonValue = `{
-  "registries": {
-    "${registry.name}": "${registry.url}"
-  }
-}`
+  const packageManager = config.packageManager || "pnpm"
+
+  const commands = React.useMemo(() => {
+    return {
+      pnpm: `pnpm dlx shadcn@latest registry add ${registry.name}`,
+      npm: `npx shadcn@latest registry add ${registry.name}`,
+      yarn: `yarn dlx shadcn@latest registry add ${registry.name}`,
+      bun: `bunx --bun shadcn@latest registry add ${registry.name}`,
+    }
+  }, [registry.name])
+
+  const command = commands[packageManager]
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(command, {
+      name: "copy_registry_add_command",
+      properties: {
+        command,
+        registry: registry.name,
+      },
+    })
+    setHasCopied(true)
+  }, [command, registry.name])
 
   const Trigger = (
-    <Button
-      size="sm"
-      variant="outline"
-      className="relative z-10"
-      onClick={() => setOpen(true)}
-    >
-      {isCopied ? (
-        <IconCheck />
-      ) : (
-        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-          <title>Model Context Protocol</title>
-          <path
-            d="M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0 2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18.835.835 0 0 0 1.18 0l.1-.098 7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0 .835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902 4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0 2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18.84.84 0 0 0-.59-.245"
-            className="fill-foreground"
-          />
-        </svg>
-      )}
-      MCP
+    <Button size="sm" variant="outline" className="relative z-10">
+      Add <IconPlus />
     </Button>
   )
 
   const Content = (
-    <>
-      <figure
-        data-rehype-pretty-code-figure
-        className={cn(
-          "group relative mt-0",
-          !isMobile &&
-            "dark:bg-background dark:[&_[data-line]:not([data-highlighted-line]):before]:bg-background!"
-        )}
-      >
-        <CopyButton
-          value={jsonValue}
-          className="top-3 right-2"
-          tooltip="Copy Code"
-        />
-        <div data-rehype-pretty-code-title>components.json</div>
-        <pre className="no-scrollbar min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0 has-[[data-slot=tabs]]:p-0">
-          <code data-line-numbers data-language="json">
-            <span data-line>{"{"}</span>
-            <span data-line>{'  "registries": {'}</span>
-            <span
-              data-line
-              data-highlighted-line
-            >{`    "${registry.name}": "${registry.url}"`}</span>
-            <span data-line>{"  }"}</span>
-            <span data-line>{"}"}</span>
-          </code>
-        </pre>
-      </figure>
-    </>
+    <Tabs
+      value={packageManager}
+      onValueChange={(value) => {
+        setConfig({
+          ...config,
+          packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
+        })
+      }}
+      className="gap-0 overflow-hidden rounded-lg border"
+    >
+      <div className="flex items-center gap-2 border-b p-2">
+        <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
+          <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+          <TabsTrigger value="npm">npm</TabsTrigger>
+          <TabsTrigger value="yarn">yarn</TabsTrigger>
+          <TabsTrigger value="bun">bun</TabsTrigger>
+        </TabsList>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="ml-auto size-7 rounded-lg"
+              onClick={handleCopy}
+            >
+              {hasCopied ? (
+                <IconCheck className="size-4" />
+              ) : (
+                <IconCopy className="size-4" />
+              )}
+              <span className="sr-only">Copy command</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            {hasCopied ? "Copied!" : "Copy command"}
+          </TooltipContent>
+        </Tooltip>
+      </div>
+      {Object.entries(commands).map(([key, cmd]) => (
+        <TabsContent key={key} value={key} className="mt-0">
+          <div className="bg-surface text-surface-foreground px-3 py-3">
+            <div className="no-scrollbar overflow-x-auto">
+              <code className="font-mono text-sm whitespace-nowrap">{cmd}</code>
+            </div>
+          </div>
+        </TabsContent>
+      ))}
+    </Tabs>
   )
 
   if (isMobile) {
@@ -108,20 +143,16 @@ export function DirectoryAddButton({
         <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
         <DrawerContent>
           <DrawerHeader>
-            <DrawerTitle>Configure MCP</DrawerTitle>
+            <DrawerTitle>Add Registry</DrawerTitle>
             <DrawerDescription>
-              Copy and paste the following code into your project&apos;s
-              components.json.
+              Run this command to add {registry.name} to your project.
             </DrawerDescription>
           </DrawerHeader>
-          <div className="px-6">{Content}</div>
+          <div className="px-4">{Content}</div>
           <DrawerFooter>
             <DrawerClose asChild>
-              <Button size="sm">Close</Button>
+              <Button size="sm">Done</Button>
             </DrawerClose>
-            <Button size="sm" asChild variant="outline">
-              <Link href="/docs/mcp">Read the docs</Link>
-            </Button>
           </DrawerFooter>
         </DrawerContent>
       </Drawer>
@@ -131,22 +162,15 @@ export function DirectoryAddButton({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{Trigger}</DialogTrigger>
-      <DialogContent
-        className="rounded-xl border-none bg-clip-padding shadow-2xl ring-4 ring-neutral-200/80 sm:max-w-[600px] dark:bg-neutral-900 dark:ring-neutral-800"
-        onOpenAutoFocus={(e) => e.preventDefault()}
-      >
+      <DialogContent className="dialog-ring animate-none! rounded-xl sm:max-w-md">
         <DialogHeader>
-          <DialogTitle>Configure MCP</DialogTitle>
+          <DialogTitle>Add Registry</DialogTitle>
           <DialogDescription>
-            Copy and paste the following code into your project&apos;s
-            components.json.
+            Run this command to add {registry.name} to your project.
           </DialogDescription>
         </DialogHeader>
         {Content}
-        <DialogFooter className="justify-between!">
-          <Button size="sm" asChild variant="ghost">
-            <Link href="/docs/mcp">Read the docs</Link>
-          </Button>
+        <DialogFooter>
           <DialogClose asChild>
             <Button size="sm">Done</Button>
           </DialogClose>

apps/v4/components/directory-list.tsx

@@ -50,8 +50,10 @@ export function DirectoryList() {
                     href={getHomepageUrl(registry.homepage)}
                     target="_blank"
                     rel="noopener noreferrer external"
+                    className="group flex items-center gap-1"
                   >
-                    {registry.name}
+                    {registry.name}{" "}
+                    <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
                   </a>
                 </ItemTitle>
                 {registry.description && (
@@ -61,15 +63,6 @@ export function DirectoryList() {
                 )}
               </ItemContent>
               <ItemActions className="relative z-10 hidden self-start sm:flex">
-                <Button size="sm" variant="outline" asChild>
-                  <a
-                    href={getHomepageUrl(registry.homepage)}
-                    target="_blank"
-                    rel="noopener noreferrer external"
-                  >
-                    View <IconArrowUpRight />
-                  </a>
-                </Button>
                 <DirectoryAddButton registry={registry} />
               </ItemActions>
               <ItemFooter className="justify-start pl-16 sm:hidden">

apps/v4/components/search-directory.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/registry/new-york-v4/ui/input-group"
 
 export const SearchDirectory = () => {
-  const { query, setQuery } = useSearchRegistry()
+  const { query, registries, setQuery } = useSearchRegistry()
 
   const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value
@@ -29,6 +29,12 @@ export const SearchDirectory = () => {
           value={query}
           onChange={onQueryChange}
         />
+        <InputGroupAddon align="inline-end">
+          <span className="text-muted-foreground tabular-nums sm:text-xs">
+            {registries.length}{" "}
+            {registries.length === 1 ? "registry" : "registries"}
+          </span>
+        </InputGroupAddon>
         <InputGroupAddon
           align="inline-end"
           data-disabled={!query.length}

apps/v4/content/docs/(root)/directory.mdx

@@ -3,12 +3,24 @@ title: Registry Directory
 description: Discover community registries for shadcn/ui components and blocks.
 ---
 
+import { TriangleAlertIcon } from "lucide-react"
+
 These registries are built into the CLI with no additional configuration required. To add a component, run: `npx shadcn add @<registry>/<component>`.
 
-<DirectoryList />
+<Callout
+  type="warning"
+  icon={<TriangleAlertIcon />}
+  className="gap-2! border-amber-200 bg-amber-50 p-2 font-semibold dark:border-amber-900 dark:bg-amber-950/80 *:[svg]:translate-y-1"
+>
+  Community registries are maintained by third-party developers and are not
+  officially curated. Always review code on installation to ensure it meets your
+  security and quality standards.
+</Callout>
 
 Don't see a registry? Learn how to [add it here](/docs/registry/registry-index).
 
+<DirectoryList />
+
 ## Documentation
 
 You can use the `shadcn` CLI to run your own code registry. Running your own registry allows you to distribute your custom components, hooks, pages, config, rules and other files to any project.

apps/v4/content/docs/(root)/mcp.mdx

@@ -29,6 +29,7 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
     <TabsTrigger value="cursor">Cursor</TabsTrigger>
     <TabsTrigger value="vscode">VS Code</TabsTrigger>
     <TabsTrigger value="codex">Codex</TabsTrigger>
+    <TabsTrigger value="opencode">OpenCode</TabsTrigger>
   </TabsList>
   <TabsContent value="claude" className="mt-4">
     **Run the following command** in your project:
@@ -95,6 +96,19 @@ Select your MCP client and follow the instructions to configure the shadcn MCP s
        - Create a contact form using components from the shadcn registry
 
   </TabsContent>
+
+  <TabsContent value="opencode" className="mt-4">
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client opencode
+       ```
+
+    **Restart OpenCode** and try the following prompts:
+       - Show me all available components in the shadcn registry
+       - Add the button, dialog and card components to my project
+       - Create a contact form using components from the shadcn registry
+
+  </TabsContent>
 </Tabs>
 
 ---
@@ -153,7 +167,7 @@ To use the shadcn MCP server with Claude Code, add the following configuration t
 
 After adding the configuration, restart Claude Code and run `/mcp` to see the shadcn MCP server in the list. If you see `Connected`, you're good to go.
 
-See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for more details.
+See the [Claude Code MCP documentation](https://code.claude.com/docs/en/mcp) for more details.
 
 ### Cursor
 

apps/v4/content/docs/registry/mcp.mdx

@@ -27,6 +27,7 @@ Ask your registry consumers to configure your registry in their `components.json
     <TabsTrigger value="cursor">Cursor</TabsTrigger>
     <TabsTrigger value="vscode">VS Code</TabsTrigger>
     <TabsTrigger value="codex">Codex</TabsTrigger>
+    <TabsTrigger value="opencode">OpenCode</TabsTrigger>
   </TabsList>
   <TabsContent value="claude" className="mt-4">
     **Configure your registry** in your `components.json` file:
@@ -118,6 +119,28 @@ Ask your registry consumers to configure your registry in their `components.json
        - Create a landing page using items from the acme registry
 
   </TabsContent>
+
+  <TabsContent value="opencode" className="mt-4">
+    **Configure your registry** in your `components.json` file:
+
+    ```json title="components.json" showLineNumbers
+    {
+      "registries": {
+        "@acme": "https://acme.com/r/{name}.json"
+      }
+    }
+    ```
+
+    **Run the following command** in your project:
+       ```bash
+       npx shadcn@latest mcp init --client opencode
+       ```
+
+    **Restart OpenCode** and try the following prompts:
+       - Show me the components in the acme registry
+       - Create a landing page using items from the acme registry
+
+  </TabsContent>
 </Tabs>
 
 You can read more about the MCP server in the [MCP documentation](/docs/mcp).

apps/v4/content/docs/registry/registry-index.mdx

@@ -11,9 +11,10 @@ You can see the full list at [https://ui.shadcn.com/r/registries.json](https://u
 
 ## Adding a Registry
 
-You can open an issue to add a registry to the index by filling out the [registry directory issue template](https://github.com/shadcn-ui/ui/issues/new?template=registry_directory.yml).
+1. Add your registry to [`apps/v4/registry/directory.json`](https://github.com/shadcn-ui/ui/blob/main/apps/v4/registry/directory.json)
+2. Create a pull request to https://github.com/shadcn-ui/ui
 
-Once you have submitted your issue, it will be validated and reviewed by the team.
+Once you have submitted your request, it will be validated and reviewed by the team.
 
 ### Requirements
 

apps/v4/lib/events.ts

@@ -19,6 +19,7 @@ const eventSchema = z.object({
     "search_query",
     "create_app",
     "copy_create_share_url",
+    "copy_registry_add_command",
   ]),
   // declare type AllowedPropertyValues = string | number | boolean | null
   properties: z

apps/v4/package.json

@@ -31,6 +31,7 @@
     "@hugeicons/core-free-icons": "^1.2.1",
     "@hugeicons/react": "^1.1.1",
     "@phosphor-icons/react": "^2.1.10",
+    "@remixicon/react": "^4.7.0",
     "@radix-ui/react-accessible-icon": "^1.1.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.5",
@@ -101,7 +102,7 @@
     "rehype-pretty-code": "^0.14.1",
     "rimraf": "^6.0.1",
     "server-only": "^0.0.1",
-    "shadcn": "3.6.2",
+    "shadcn": "3.7.0",
     "shiki": "^1.10.1",
     "sonner": "^2.0.0",
     "swr": "^2.3.6",

apps/v4/public/r/config.json

@@ -3,13 +3,13 @@
     {
       "name": "radix-vega",
       "title": "Vega (Radix)",
-      "description": "Vega / Lucide / Geist Sans",
+      "description": "Vega / Lucide / Inter",
       "base": "radix",
       "style": "vega",
       "baseColor": "neutral",
       "theme": "neutral",
       "iconLibrary": "lucide",
-      "font": "geist",
+      "font": "inter",
       "item": "Item",
       "menuAccent": "subtle",
       "menuColor": "default",

apps/v4/public/r/registries-legacy.json

@@ -0,0 +1,137 @@
+{
+  "@8bitcn": "https://8bitcn.com/r/{name}.json",
+  "@8starlabs-ui": "https://ui.8starlabs.com/r/{name}.json",
+  "@97cn": "https://97cn.itzik.co/r/{name}.json",
+  "@abstract": "https://build.abs.xyz/r/{name}/json",
+  "@abui": "https://abui.io/r/{name}.json",
+  "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
+  "@aevr": "https://ui.aevr.space/r/{name}.json",
+  "@ai-blocks": "https://webllm.org/r/{name}.json",
+  "@ai-elements": "https://registry.ai-sdk.dev/{name}.json",
+  "@alexcarpenter": "https://ui.alexcarpenter.me/r/{name}.json",
+  "@algolia": "https://sitesearch.algolia.com/r/{name}.json",
+  "@alpine": "https://alpine-registry.vercel.app/r/{name}.json",
+  "@aliimam": "https://aliimam.in/r/{name}.json",
+  "@animate-ui": "https://animate-ui.com/r/{name}.json",
+  "@assistant-ui": "https://r.assistant-ui.com/{name}.json",
+  "@austin-ui": "https://austin-ui.netlify.app/r/{name}.json",
+  "@basecn": "https://basecn.dev/r/{name}.json",
+  "@better-upload": "https://better-upload.com/r/{name}.json",
+  "@billingsdk": "https://billingsdk.com/r/{name}.json",
+  "@blocks": "https://blocks.so/r/{name}.json",
+  "@bucharitesh": "https://bucharitesh.in/r/{name}.json",
+  "@bundui": "https://bundui.io/r/{name}.json",
+  "@cardcn": "https://cardcn.dev/r/{name}.json",
+  "@chamaac": "https://chamaac.com/r/{name}.json",
+  "@clerk": "https://clerk.com/r/{name}.json",
+  "@coss": "https://coss.com/ui/r/{name}.json",
+  "@commercn": "https://commercn.com/r/{name}.json",
+  "@chisom-ui": "https://chisom-ui.netlify.app/r/{name}.json",
+  "@creative-tim": "https://www.creative-tim.com/ui/r/{name}.json",
+  "@cult-ui": "https://cult-ui.com/r/{name}.json",
+  "@diceui": "https://diceui.com/r/{name}.json",
+  "@doras-ui": "https://ui.doras.to/r/{name}.json",
+  "@efferd": "https://efferd.com/r/{name}.json",
+  "@einui": "https://ui.eindev.ir/r/{name}.json",
+  "@eldoraui": "https://eldoraui.site/r/{name}.json",
+  "@elements": "https://tryelements.dev/r/{name}.json",
+  "@elevenlabs-ui": "https://ui.elevenlabs.io/r/{name}.json",
+  "@fancy": "https://fancycomponents.dev/r/{name}.json",
+  "@formcn": "https://formcn.dev/r/{name}.json",
+  "@gaia": "https://ui.heygaia.io/r/{name}.json",
+  "@glass-ui": "https://glass-ui.crenspire.com/r/{name}.json",
+  "@heseui": "https://www.heseui.com/r/{name}.json",
+  "@hooks": "https://shadcn-hooks.vercel.app/r/{name}.json",
+  "@intentui": "https://intentui.com/r/{name}",
+  "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
+  "@kanpeki": "https://kanpeki.vercel.app/r/{name}.json",
+  "@kokonutui": "https://kokonutui.com/r/{name}.json",
+  "@lens-blocks": "https://lensblocks.com/r/{name}.json",
+  "@limeplay": "https://limeplay.winoffrg.dev/r/{name}.json",
+  "@lucide-animated": "https://lucide-animated.com/r/{name}.json",
+  "@lytenyte": "https://www.1771technologies.com/r/{name}.json",
+  "@marmelab": "https://marmelab.com/shadcn-admin-kit/r/{name}.json",
+  "@magicui": "https://magicui.design/r/{name}.json",
+  "@magicui-pro": "https://pro.magicui.design/registry/{name}",
+  "@motion-primitives": "https://motion-primitives.com/c/{name}.json",
+  "@manifest": "https://ui.manifest.build/r/{name}.json",
+  "@mui-treasury": "https://mui-treasury.com/r/{name}.json",
+  "@nativeui": "https://nativeui.io/registry/{name}.json",
+  "@nexus-elements": "https://elements.nexus.availproject.org/r/{name}.json",
+  "@ncdai": "https://chanhdai.com/r/{name}.json",
+  "@neobrutalism": "https://www.neobrutalism.dev/r/{name}.json",
+  "@nuqs": "https://nuqs.dev/r/{name}.json",
+  "@optics": "https://optics.agusmayol.com.ar/r/{name}.json",
+  "@oui": "https://oui.mw10013.workers.dev/r/{name}.json",
+  "@paceui": "https://ui.paceui.com/r/{name}.json",
+  "@plate": "https://platejs.org/r/{name}.json",
+  "@prompt-kit": "https://prompt-kit.com/c/{name}.json",
+  "@prosekit": "https://prosekit.dev/r/{name}.json",
+  "@phucbm": "https://phucbm.com/r/{name}.json",
+  "@react-aria": "https://react-aria.adobe.com/registry/{name}.json",
+  "@react-bits": "https://reactbits.dev/r/{name}.json",
+  "@react-market": "https://www.react-market.com/get/{name}.json",
+  "@retroui": "https://retroui.dev/r/{name}.json",
+  "@reui": "https://reui.io/r/{name}.json",
+  "@rigidui": "https://rigidui.com/r/{name}.json",
+  "@roiui": "https://roiui.com/r/{name}.json",
+  "@solaceui": "https://www.solaceui.com/r/{name}.json",
+  "@scrollxui": "https://www.scrollxui.dev/registry/{name}.json",
+  "@systaliko-ui": "https://systaliko-ui.vercel.app/r/{name}.json",
+  "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json",
+  "@shadcn-map": "http://shadcn-map.vercel.app/r/{name}.json",
+  "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
+  "@shadcnblocks": "https://shadcnblocks.com/r/{name}.json",
+  "@shadcnui-blocks": "https://shadcnui-blocks.com/r/{name}.json",
+  "@shadcraft": "https://shadcraft-free.vercel.app/r/{name}.json",
+  "@simple-ai": "https://simple-ai.dev/r/{name}.json",
+  "@skiper-ui": "https://skiper-ui.com/registry/{name}.json",
+  "@skyr": "https://ui-play.skyroc.me/r/{name}.json",
+  "@smoothui": "https://smoothui.dev/r/{name}.json",
+  "@spectrumui": "https://ui.spectrumhq.in/r/{name}.json",
+  "@supabase": "https://supabase.com/ui/r/{name}.json",
+  "@svgl": "https://svgl.app/r/{name}.json",
+  "@tailark": "https://tailark.com/r/{name}.json",
+  "@tailwind-admin": "https://tailwind-admin.com/r/{name}.json",
+  "@tailwind-builder": "https://tailwindbuilder.ai/r/{name}.json",
+  "@tweakcn": "https://tweakcn.com/r/themes/{name}.json",
+  "@wds": "https://wds-shadcn-registry.netlify.app/r/{name}.json",
+  "@animbits": "https://animbits.dev/r/{name}.json",
+  "@wandry-ui": "https://ui.wandry.com.ua/r/{name}.json",
+  "@wigggle-ui": "https://wigggle-ui.vercel.app/r/{name}.json",
+  "@paykit-sdk": "https://www.usepaykit.dev/r/{name}.json",
+  "@pixelact-ui": "https://www.pixelactui.com/r/{name}.json",
+  "@zippystarter": "https://zippystarter.com/r/{name}.json",
+  "@shadcndesign": "https://shadcndesign-free.vercel.app/r/{name}.json",
+  "@ha-components": "https://hacomponents.keshuac.com/r/{name}.json",
+  "@shadix-ui": "https://shadix-ui.vercel.app/r/{name}.json",
+  "@utilcn": "https://utilcn.dev/r/{name}.json",
+  "@hextaui": "https://hextaui.com/r/{name}.json",
+  "@taki": "https://taki-ui.com/r/{name}.json",
+  "@square-ui": "https://square.lndev.me/registry/{name}.json",
+  "@moleculeui": "https://moleculeui.design/r/{name}.json",
+  "@uicapsule": "https://uicapsule.com/r/{name}.json",
+  "@uitripled": "https://ui.tripled.work/r/{name}.json",
+  "@ui-layouts": "https://ui-layouts.com/r/{name}.json",
+  "@pureui": "https://pure.kam-ui.com/r/{name}.json",
+  "@tour": "https://onboarding-tour.vercel.app/r/{name}.json",
+  "@tb-blocks": "https://tailwindbuilder.ai/r/blocks/{name}.json",
+  "@heroicons-animated": "https://www.heroicons-animated.com/r/{name}.json",
+  "@icons-animated": "https://icons.lndev.me/r/{name}.json",
+  "@forgeui": "https://forgeui.in/r/{name}.json",
+  "@darx": "https://darshitdev.in/r/{name}.json",
+  "@gamifykit": "https://gamifykit.com/r/{name}.json",
+  "@beste-ui": "https://ui.beste.co/r/{name}.json",
+  "@tokenui": "https://www.tokenui.dev/r/{name}.json",
+  "@lumiui": "https://www.lumiui.dev/r/{name}.json",
+  "@uselayouts": "https://uselayouts.com/r/{name}.json",
+  "@joyco": "https://registry.joyco.studio/r/{name}.json",
+  "@gooseui": "https://gooseui.pro/r/{name}.json",
+  "@baselayer": "https://www.baselayer.dev/r/{name}.json",
+  "@jolyui": "https://www.jolyui.dev/r/{name}.json",
+  "@fab-ui": "https://fab-ui.com/r/{name}.json",
+  "@asanshay": "https://ds.asanshay.com/r/{name}.json",
+  "@headcodecms": "https://headcodecms.com/r/{name}.json",
+  "@typedora-ui": "https://typedora-ui.netlify.app/r/{name}.json",
+  "@agents-ui": "https://livekit.io/ui/r/{name}.json"
+}

apps/v4/public/r/registries.json

@@ -1,117 +1,686 @@
-{
-  "@8bitcn": "https://8bitcn.com/r/{name}.json",
-  "@8starlabs-ui": "https://ui.8starlabs.com/r/{name}.json",
-  "@97cn": "https://97cn.itzik.co/r/{name}.json",
-  "@abstract": "https://build.abs.xyz/r/{name}/json",
-  "@abui": "https://abui.io/r/{name}.json",
-  "@aceternity": "https://ui.aceternity.com/registry/{name}.json",
-  "@aevr": "https://ui.aevr.space/r/{name}.json",
-  "@ai-blocks": "https://webllm.org/r/{name}.json",
-  "@ai-elements": "https://registry.ai-sdk.dev/{name}.json",
-  "@alexcarpenter": "https://ui.alexcarpenter.me/r/{name}.json",
-  "@algolia": "https://sitesearch.algolia.com/r/{name}.json",
-  "@alpine": "https://alpine-registry.vercel.app/r/{name}.json",
-  "@aliimam": "https://aliimam.in/r/{name}.json",
-  "@animate-ui": "https://animate-ui.com/r/{name}.json",
-  "@assistant-ui": "https://r.assistant-ui.com/{name}.json",
-  "@austin-ui": "https://austin-ui.netlify.app/r/{name}.json",
-  "@basecn": "https://basecn.dev/r/{name}.json",
-  "@better-upload": "https://better-upload.com/r/{name}.json",
-  "@billingsdk": "https://billingsdk.com/r/{name}.json",
-  "@blocks": "https://blocks.so/r/{name}.json",
-  "@bucharitesh": "https://bucharitesh.in/r/{name}.json",
-  "@bundui": "https://bundui.io/r/{name}.json",
-  "@cardcn": "https://cardcn.dev/r/{name}.json",
-  "@clerk": "https://clerk.com/r/{name}.json",
-  "@coss": "https://coss.com/ui/r/{name}.json",
-  "@commercn": "https://commercn.com/r/{name}.json",
-  "@chisom-ui": "https://chisom-ui.netlify.app/r/{name}.json",
-  "@creative-tim": "https://www.creative-tim.com/ui/r/{name}.json",
-  "@cult-ui": "https://cult-ui.com/r/{name}.json",
-  "@diceui": "https://diceui.com/r/{name}.json",
-  "@doras-ui": "https://ui.doras.to/r/{name}.json",
-  "@efferd": "https://efferd.com/r/{name}.json",
-  "@einui": "https://ui.eindev.ir/r/{name}.json",
-  "@eldoraui": "https://eldoraui.site/r/{name}.json",
-  "@elements": "https://tryelements.dev/r/{name}.json",
-  "@elevenlabs-ui": "https://ui.elevenlabs.io/r/{name}.json",
-  "@fancy": "https://fancycomponents.dev/r/{name}.json",
-  "@formcn": "https://formcn.dev/r/{name}.json",
-  "@gaia": "https://ui.heygaia.io/r/{name}.json",
-  "@glass-ui": "https://glass-ui.crenspire.com/r/{name}.json",
-  "@heseui": "https://www.heseui.com/r/{name}.json",
-  "@hooks": "https://shadcn-hooks.vercel.app/r/{name}.json",
-  "@intentui": "https://intentui.com/r/{name}",
-  "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
-  "@kanpeki": "https://kanpeki.vercel.app/r/{name}.json",
-  "@kokonutui": "https://kokonutui.com/r/{name}.json",
-  "@lens-blocks": "https://lensblocks.com/r/{name}.json",
-  "@limeplay": "https://limeplay.winoffrg.dev/r/{name}.json",
-  "@lucide-animated": "https://lucide-animated.com/r/{name}.json",
-  "@lytenyte": "https://www.1771technologies.com/r/{name}.json",
-  "@marmelab": "https://marmelab.com/shadcn-admin-kit/r/{name}.json",
-  "@magicui": "https://magicui.design/r/{name}.json",
-  "@magicui-pro": "https://pro.magicui.design/registry/{name}",
-  "@motion-primitives": "https://motion-primitives.com/c/{name}.json",
-  "@manifest": "https://ui.manifest.build/r/{name}.json",
-  "@mui-treasury": "https://mui-treasury.com/r/{name}.json",
-  "@nativeui": "https://nativeui.io/registry/{name}.json",
-  "@nexus-elements": "https://elements.nexus.availproject.org/r/{name}.json",
-  "@ncdai": "https://chanhdai.com/r/{name}.json",
-  "@nuqs": "https://nuqs.dev/r/{name}.json",
-  "@optics": "https://optics.agusmayol.com.ar/r/{name}.json",
-  "@oui": "https://oui.mw10013.workers.dev/r/{name}.json",
-  "@paceui": "https://ui.paceui.com/r/{name}.json",
-  "@plate": "https://platejs.org/r/{name}.json",
-  "@prompt-kit": "https://prompt-kit.com/c/{name}.json",
-  "@prosekit": "https://prosekit.dev/r/{name}.json",
-  "@phucbm": "https://ui.phucbm.com/r/{name}.json",
-  "@react-aria": "https://react-aria.adobe.com/registry/{name}.json",
-  "@react-bits": "https://reactbits.dev/r/{name}.json",
-  "@react-market": "https://www.react-market.com/get/{name}.json",
-  "@retroui": "https://retroui.dev/r/{name}.json",
-  "@reui": "https://reui.io/r/{name}.json",
-  "@rigidui": "https://rigidui.com/r/{name}.json",
-  "@roiui": "https://roiui.com/r/{name}.json",
-  "@solaceui": "https://www.solaceui.com/r/{name}.json",
-  "@scrollxui": "https://www.scrollxui.dev/registry/{name}.json",
-  "@systaliko-ui": "https://systaliko-ui.vercel.app/r/{name}.json",
-  "@shadcn-editor": "https://shadcn-editor.vercel.app/r/{name}.json",
-  "@shadcn-map": "http://shadcn-map.vercel.app/r/{name}.json",
-  "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
-  "@shadcnblocks": "https://shadcnblocks.com/r/{name}.json",
-  "@shadcnui-blocks": "https://shadcnui-blocks.com/r/{name}.json",
-  "@shadcraft": "https://shadcraft-free.vercel.app/r/{name}.json",
-  "@simple-ai": "https://simple-ai.dev/r/{name}.json",
-  "@skiper-ui": "https://skiper-ui.com/registry/{name}.json",
-  "@skyr": "https://ui-play.skyroc.me/r/{name}.json",
-  "@smoothui": "https://smoothui.dev/r/{name}.json",
-  "@spectrumui": "https://ui.spectrumhq.in/r/{name}.json",
-  "@supabase": "https://supabase.com/ui/r/{name}.json",
-  "@svgl": "https://svgl.app/r/{name}.json",
-  "@tailark": "https://tailark.com/r/{name}.json",
-  "@tailwind-admin": "https://tailwind-admin.com/r/{name}.json",
-  "@tailwind-builder": "https://tailwindbuilder.ai/r/{name}.json",
-  "@tweakcn": "https://tweakcn.com/r/themes/{name}.json",
-  "@wds": "https://wds-shadcn-registry.netlify.app/r/{name}.json",
-  "@animbits": "https://animbits.dev/r/{name}.json",
-  "@wandry-ui": "https://ui.wandry.com.ua/r/{name}.json",
-  "@wigggle-ui": "https://wigggle-ui.vercel.app/r/{name}.json",
-  "@paykit-sdk": "https://www.usepaykit.dev/r/{name}.json",
-  "@pixelact-ui": "https://www.pixelactui.com/r/{name}.json",
-  "@zippystarter": "https://zippystarter.com/r/{name}.json",
-  "@shadcndesign": "https://shadcndesign-free.vercel.app/r/{name}.json",
-  "@ha-components": "https://hacomponents.keshuac.com/r/{name}.json",
-  "@shadix-ui": "https://shadix-ui.vercel.app/r/{name}.json",
-  "@utilcn": "https://utilcn.dev/r/{name}.json",
-  "@hextaui": "https://hextaui.com/r/{name}.json",
-  "@taki": "https://taki-ui.com/r/{name}.json",
-  "@square-ui": "https://square.lndev.me/registry/{name}.json",
-  "@moleculeui": "https://moleculeui.design/r/{name}.json",
-  "@uicapsule": "https://uicapsule.com/r/{name}.json",
-  "@uitripled": "https://ui.tripled.work/r/{name}.json",
-  "@ui-layouts": "https://ui-layouts.com/r/{name}.json",
-  "@pureui": "https://pure.kam-ui.com/r/{name}.json",
-  "@tour": "https://onboarding-tour.vercel.app/r/{name}.json",
-  "@tb-blocks": "https://tailwindbuilder.ai/r/blocks/{name}.json"
-}
+[
+  {
+    "name": "@8bitcn",
+    "homepage": "https://www.8bitcn.com",
+    "url": "https://www.8bitcn.com/r/{name}.json",
+    "description": "A set of 8-bit styled retro components. Works with your favorite frameworks. Open Source. Open Code."
+  },
+  {
+    "name": "@8starlabs-ui",
+    "homepage": "https://ui.8starlabs.com",
+    "url": "https://ui.8starlabs.com/r/{name}.json",
+    "description": "A set of beautifully designed components designed for developers who want niche, high-utility UI elements that you won't find in standard libraries."
+  },
+  {
+    "name": "@abui",
+    "homepage": "https://abui.io",
+    "url": "https://abui.io/r/{name}.json",
+    "description": "A shadcn-compatible registry of reusable components, blocks, and utilities conforming to Vercel's components.build specification"
+  },
+  {
+    "name": "@abstract",
+    "homepage": "https://build.abs.xyz",
+    "url": "https://build.abs.xyz/r/{name}/json",
+    "description": "A collection of React components for the most common crypto patterns"
+  },
+  {
+    "name": "@aceternity",
+    "homepage": "https://ui.aceternity.com",
+    "url": "https://ui.aceternity.com/registry/{name}.json",
+    "description": "A modern component library built with Tailwind CSS and Motion for React, Aceternity UI contains unique and interactive components that can make your landing pages look 100x better."
+  },
+  {
+    "name": "@agents-ui",
+    "homepage": "https://livekit.io/ui",
+    "url": "https://livekit.io/ui/r/{name}.json",
+    "description": "This is a shadcn/ui component registry that distributes copy-paste React components for building LiveKit AI Agent interfaces."
+  },
+  {
+    "name": "@aevr",
+    "homepage": "https://ui.aevr.space",
+    "url": "https://ui.aevr.space/r/{name}.json",
+    "description": "A small collection of focused, production‑ready components and primitives for React/Next.js projects—built on shadcn/ui and complementary libraries."
+  },
+  {
+    "name": "@ai-blocks",
+    "homepage": "https://webllm.org/blocks",
+    "url": "https://webllm.org/r/{name}.json",
+    "description": "AI components for the web. No server. No API keys. Built on WebLLM."
+  },
+  {
+    "name": "@ai-elements",
+    "homepage": "https://ai-sdk.dev/elements",
+    "url": "https://registry.ai-sdk.dev/{name}.json",
+    "description": "Pre-built components like conversations, messages and more to help you build AI-native applications faster."
+  },
+  {
+    "name": "@algolia",
+    "homepage": "https://sitesearch.algolia.com",
+    "url": "https://sitesearch.algolia.com/r/{name}.json",
+    "description": "Enterprises and developers use Algolia's AI search infrastructure to understand users and show them what they're looking for."
+  },
+  {
+    "name": "@aliimam",
+    "homepage": "https://aliimam.in",
+    "url": "https://aliimam.in/r/{name}.json",
+    "description": "I create digital experiences that connect and inspire. I build apps, websites, brands, and products end-to-end."
+  },
+  {
+    "name": "@animate-ui",
+    "homepage": "https://animate-ui.com",
+    "url": "https://animate-ui.com/r/{name}.json",
+    "description": "A fully animated, open-source React component distribution. Browse a list of animated primitives, components and icons you can install and use in your projects."
+  },
+  {
+    "name": "@assistant-ui",
+    "homepage": "https://www.assistant-ui.com",
+    "url": "https://r.assistant-ui.com/{name}.json",
+    "description": "Radix-style React primitives for AI chat with adapters for AI SDK, LangGraph, Mastra, and custom backends."
+  },
+  {
+    "name": "@better-upload",
+    "homepage": "https://better-upload.com",
+    "url": "https://better-upload.com/r/{name}.json",
+    "description": "Simple and easy file uploads for React. Upload directly to any S3-compatible service with minimal setup."
+  },
+  {
+    "name": "@basecn",
+    "homepage": "https://basecn.dev",
+    "url": "https://basecn.dev/r/{name}",
+    "description": "Beautifully crafted shadcn/ui components powered by Base UI"
+  },
+  {
+    "name": "@billingsdk",
+    "homepage": "https://billingsdk.com",
+    "url": "https://billingsdk.com/r/{name}.json",
+    "description": "BillingSDK is an open-source React and Next.js component library for SaaS billing and payments. It offers ready-to-use, customizable components for subscriptions, invoices, usage-based pricing and billing - fully compatible with Dodo Payments and Stripe."
+  },
+  {
+    "name": "@blocks",
+    "homepage": "https://blocks.so",
+    "url": "https://blocks.so/r/{name}.json",
+    "description": "A set of clean, modern application building blocks for you in your applications. Free and Open Source"
+  },
+  {
+    "name": "@bundui",
+    "homepage": "https://bundui.io",
+    "url": "https://bundui.io/r/{name}.json",
+    "description": "A collection of 150+ handcrafted UI components built with Tailwind CSS and shadcn/ui, covering marketing, e-commerce, dashboards, real estate, and more."
+  },
+  {
+    "name": "@cardcn",
+    "homepage": "https://cardcn.dev",
+    "url": "https://cardcn.dev/r/{name}.json",
+    "description": "A set of beautifully-designed shadcn card components"
+  },
+  {
+    "name": "@chamaac",
+    "homepage": "https://chamaac.com",
+    "url": "https://chamaac.com/r/{name}.json",
+    "description": "A collection of beautiful, animated components to elevate your web projects instantly."
+  },
+  {
+    "name": "@clerk",
+    "homepage": "https://clerk.com/docs/guides/development/shadcn-cli",
+    "url": "https://clerk.com/r/{name}.json",
+    "description": "The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and The Modern Web."
+  },
+  {
+    "name": "@commercn",
+    "homepage": "https://commercn.com",
+    "url": "https://commercn.com/r/{name}.json",
+    "description": "Shadcn UI Blocks for Ecommerce websites"
+  },
+  {
+    "name": "@coss",
+    "homepage": "https://coss.com/ui",
+    "url": "https://coss.com/ui/r/{name}.json",
+    "description": "A new, modern UI component library built on top of Base UI. Built for developers and AI."
+  },
+  {
+    "name": "@creative-tim",
+    "homepage": "https://www.creative-tim.com/ui",
+    "url": "https://www.creative-tim.com/ui/r/{name}.json",
+    "description": "A collection of open-source UI components, blocks and AI Agents. Integrate them in v0, Lovable, Claude or in your application."
+  },
+  {
+    "name": "@cult-ui",
+    "homepage": "https://www.cult-ui.com",
+    "url": "https://cult-ui.com/r/{name}.json",
+    "description": "Cult UI is a rare, curated set of shadcn-compatible, headless and composable components—tastefully animated with Framer Motion."
+  },
+  {
+    "name": "@diceui",
+    "homepage": "https://www.diceui.com/",
+    "url": "https://diceui.com/r/{name}.json",
+    "description": "Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready, and customizable."
+  },
+  {
+    "name": "@doras-ui",
+    "homepage": "https://ui.doras.to/",
+    "url": "https://ui.doras.to/r/{name}.json",
+    "description": "A collection of beautiful, reusable component blocks built with React"
+  },
+  {
+    "name": "@elements",
+    "homepage": "https://www.tryelements.dev",
+    "url": "https://www.tryelements.dev/r/registry.json",
+    "description": "Full-stack shadcn/ui components that go beyond UI. Add auth, monetization, uploads, and AI to your app in seconds."
+  },
+  {
+    "name": "@elevenlabs-ui",
+    "homepage": "https://ui.elevenlabs.io",
+    "url": "https://ui.elevenlabs.io/r/{name}.json",
+    "description": "A collection of Open Source agent and audio components that you can customize and extend."
+  },
+  {
+    "name": "@efferd",
+    "homepage": "https://efferd.com/",
+    "url": "https://efferd.com/r/registry.json",
+    "description": "A collection of beautifully crafted Shadcn/UI blocks, designed to help developers build modern websites with ease."
+  },
+  {
+    "name": "@einui",
+    "homepage": "https://ui.eindev.ir",
+    "url": "https://ui.eindev.ir/r/{name}.json",
+    "description": "Beautiful, responsive Shadcn components with frosted glass morphism. Built for modern web applications with full dark mode support."
+  },
+  {
+    "name": "@eldoraui",
+    "homepage": "https://eldoraui.site",
+    "url": "https://eldoraui.site/r/{name}.json",
+    "description": "An open-source, modern UI component library for React, built with TypeScript, Tailwind CSS, and Framer Motion. Eldora UI offers beautifully crafted, reusable components designed for performance and elegance."
+  },
+  {
+    "name": "@formcn",
+    "homepage": "https://formcn.dev",
+    "url": "https://formcn.dev/r/{name}.json",
+    "description": "Build production-ready forms with a few clicks using shadcn components and modern tools."
+  },
+  {
+    "name": "@gaia",
+    "homepage": "https://ui.heygaia.io",
+    "url": "https://ui.heygaia.io/r/{name}.json",
+    "description": "Production-ready UI components designed for building beautiful AI assistants and conversational interfaces, from the team behind GAIA."
+  },
+  {
+    "name": "@glass-ui",
+    "homepage": "https://glass-ui.crenspire.com",
+    "url": "https://glass-ui.crenspire.com/r/{name}.json",
+    "description": "A shadcn-ui compatible registry distributing 40+ glassmorphic React/TypeScript components with Apple-inspired design. Components include enhanced visual effects (glow, shimmer, ripple), theme support, and customizable glassmorphism styling."
+  },
+  {
+    "name": "@ha-components",
+    "homepage": "https://hacomponents.keshuac.com",
+    "url": "https://hacomponents.keshuac.com/r/{name}.json",
+    "description": "A collection of customisable components to build Home Assistant dashboards."
+  },
+  {
+    "name": "@hextaui",
+    "homepage": "https://hextaui.com",
+    "url": "https://hextaui.com/r/{name}.json",
+    "description": "Ready-to-use foundation components/blocks built on top of shadcn/ui."
+  },
+  {
+    "name": "@hooks",
+    "homepage": "https://shadcn-hooks.vercel.app",
+    "url": "https://shadcn-hooks.vercel.app/r/{name}.json",
+    "description": "A comprehensive React Hooks Collection built with Shadcn."
+  },
+  {
+    "name": "@intentui",
+    "homepage": "https://intentui.com",
+    "url": "https://intentui.com/r/{name}",
+    "description": "Accessible React component library to copy, customize, and own your UI."
+  },
+  {
+    "name": "@kibo-ui",
+    "homepage": "https://www.kibo-ui.com/",
+    "url": "https://www.kibo-ui.com/r/{name}.json",
+    "description": "Kibo UI is a custom registry of composable, accessible and open source components designed for use with shadcn/ui."
+  },
+  {
+    "name": "@kanpeki",
+    "homepage": "https://kanpeki.vercel.app",
+    "url": "https://kanpeki.vercel.app/r/{name}.json",
+    "description": "A set of perfect-designed components built on top of React Aria and Motion."
+  },
+  {
+    "name": "@kokonutui",
+    "homepage": "https://kokonutui.com",
+    "url": "https://kokonutui.com/r/{name}.json",
+    "description": "Collection of stunning components built with Tailwind CSS, shadcn/ui and Motion to use on your websites."
+  },
+  {
+    "name": "@lens-blocks",
+    "homepage": "https://lensblocks.com",
+    "url": "https://lensblocks.com/r/{name}.json",
+    "description": "A collection of social media components for use with Lens Social Protocol."
+  },
+  {
+    "name": "@limeplay",
+    "homepage": "https://limeplay.winoffrg.dev",
+    "url": "https://limeplay.winoffrg.dev/r/{name}.json",
+    "description": "Modern UI Library for building media players in React. Powered by Shaka Player."
+  },
+  {
+    "name": "@lucide-animated",
+    "homepage": "https://lucide-animated.com",
+    "url": "https://lucide-animated.com/r/{name}.json",
+    "description": "An open-source collection of smooth animated lucide icons for your projects"
+  },
+  {
+    "name": "@lytenyte",
+    "homepage": "https://www.1771technologies.com",
+    "url": "https://www.1771technologies.com/r/{name}.json",
+    "description": "LyteNyte Grid is a high performance, light weight, headless, React data grid. Our registry provides LyteNyte Grid themed using Tailwind and the Shadcn theme variables."
+  },
+  {
+    "name": "@magicui",
+    "homepage": "https://magicui.design",
+    "url": "https://magicui.design/r/{name}",
+    "description": "UI Library for Design Engineers. 150+ free and open-source animated components and effects built with React, Typescript, Tailwind CSS, and Motion. Perfect companion for shadcn/ui."
+  },
+  {
+    "name": "@manifest",
+    "homepage": "https://ui.manifest.build",
+    "url": "https://ui.manifest.build/r/{name}.json",
+    "description": "Agentic UI toolkit for building MCP Apps. Open-source components and blocks ready to use within your chat app."
+  },
+  {
+    "name": "@mui-treasury",
+    "homepage": "https://www.mui-treasury.com",
+    "url": "https://mui-treasury.com/r/{name}.json",
+    "description": "A collection of hand-crafted interfaces built on top of MUI components"
+  },
+  {
+    "name": "@moleculeui",
+    "homepage": "https://www.moleculeui.design/",
+    "url": "https://www.moleculeui.design/r/{name}.json",
+    "description": "A modern React component library focused on intuitive interactions and seamless user experiences."
+  },
+  {
+    "name": "@motion-primitives",
+    "homepage": "https://www.motion-primitives.com",
+    "url": "https://motion-primitives.com/c/registry.json",
+    "description": "Beautifully designed motions components. Easy copy-paste. Customizable. Open Source. Built for engineers and designers."
+  },
+  {
+    "name": "@ncdai",
+    "homepage": "https://chanhdai.com/components",
+    "url": "https://chanhdai.com/r/{name}.json",
+    "description": "A collection of reusable components."
+  },
+  {
+    "name": "@nuqs",
+    "homepage": "https://nuqs.dev/registry",
+    "url": "https://nuqs.dev/r/{name}.json",
+    "description": "Custom parsers, adapters and utilities from the community for type-safe URL state management."
+  },
+  {
+    "name": "@neobrutalism",
+    "homepage": "https://www.neobrutalism.dev",
+    "url": "https://www.neobrutalism.dev/r/{name}.json",
+    "description": "A collection of neobrutalism-styled components based on shadcn/ui"
+  },
+  {
+    "name": "@nexus-elements",
+    "homepage": "https://elements.nexus.availproject.org/docs/view-components",
+    "url": "https://elements.nexus.availproject.org/r/{name}.json",
+    "description": "Ready-made React components for almost any use case. Use as is or customise and go to market fast"
+  },
+  {
+    "name": "@optics",
+    "homepage": "https://optics.agusmayol.com.ar",
+    "url": "https://optics.agusmayol.com.ar/r/{name}.json",
+    "description": "A design system that distributes re-styled components, utilities, and hooks ready to use."
+  },
+  {
+    "name": "@oui",
+    "homepage": "https://oui.mw10013.workers.dev",
+    "url": "https://oui.mw10013.workers.dev/r/{name}.json",
+    "description": "React Aria Components with shadcn characteristics.Copy-and-paste react aria components that run side-by-side with shadcn components."
+  },
+  {
+    "name": "@paceui",
+    "homepage": "https://ui.paceui.com",
+    "url": "https://ui.paceui.com/r/{name}.json",
+    "description": "Animated components and building blocks built for smooth interaction and rich detail. Copy, customise, and create without the extra setup."
+  },
+  {
+    "name": "@paykit-sdk",
+    "homepage": "https://www.usepaykit.dev",
+    "url": "https://www.usepaykit.dev/r/{name}.json",
+    "description": "Unified payments SDK for builders — handle checkout, billing, and webhooks across Stripe, PayPal, Adyen, and regional gateways with a single integration."
+  },
+  {
+    "name": "@plate",
+    "homepage": "https://platejs.org",
+    "url": "https://platejs.org/r/{name}.json",
+    "description": "AI-powered rich text editor for React."
+  },
+  {
+    "name": "@prompt-kit",
+    "homepage": "https://www.prompt-kit.com",
+    "url": "https://www.prompt-kit.com/c/registry.json",
+    "description": "Core building blocks for AI apps. High-quality, accessible, and customizable components for AI interfaces."
+  },
+  {
+    "name": "@prosekit",
+    "homepage": "https://prosekit.dev",
+    "url": "https://prosekit.dev/r/{name}.json",
+    "description": "Powerful and flexible rich text editor for React, Vue, Preact, Svelte, and SolidJS."
+  },
+  {
+    "name": "@phucbm",
+    "homepage": "https://phucbm.com/components",
+    "url": "https://phucbm.com/r/{name}.json",
+    "description": "A collection of modern React UI components with GSAP animations."
+  },
+  {
+    "name": "@react-aria",
+    "homepage": "https://react-aria.adobe.com",
+    "url": "https://react-aria.adobe.com/registry/{name}.json",
+    "description": "Customizable Tailwind and Vanilla CSS components with adaptive interactions, top-tier accessibility, and internationalization."
+  },
+  {
+    "name": "@react-bits",
+    "homepage": "https://reactbits.dev",
+    "url": "https://reactbits.dev/r/{name}.json",
+    "description": "A large collection of animated, interactive & fully customizable React components for building memorable websites. From smooth text animations all the way to eye-catching backgrounds, you can find it here."
+  },
+  {
+    "name": "@retroui",
+    "homepage": "https://retroui.dev",
+    "url": "https://retroui.dev/r/{name}.json",
+    "description": "A Neobrutalism styled React + TailwindCSS UI library for building bold, modern web apps. Perfect for any project using Shadcn/ui."
+  },
+  {
+    "name": "@reui",
+    "homepage": "https://reui.io",
+    "url": "https://reui.io/r/{name}.json",
+    "description": "Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS, and Motion. Pairs beautifully with shadcn/ui."
+  },
+  {
+    "name": "@scrollxui",
+    "homepage": "https://www.scrollxui.dev",
+    "url": "https://www.scrollxui.dev/registry/{name}.json",
+    "description": "ScrollX UI is an open-source React and shadcn-compatible component library for animated, interactive, and customizable user interfaces. It offers motion-driven components that blend seamlessly with modern ShadCN setups."
+  },
+  {
+    "name": "@square-ui",
+    "homepage": "https://square.lndev.me",
+    "url": "https://square.lndev.me/registry/{name}.json",
+    "description": "Collection of beautifully crafted open-source layouts UI built with shadcn/ui."
+  },
+  {
+    "name": "@systaliko-ui",
+    "homepage": "https://systaliko-ui.vercel.app",
+    "url": "https://systaliko-ui.vercel.app/r/{name}.json",
+    "description": "UI component library, Designed for flexibility, built for customization, and crafted to scale across variants and use cases."
+  },
+  {
+    "name": "@roiui",
+    "homepage": "https://roiui.com",
+    "url": "https://roiui.com/r/{name}.json",
+    "description": "Roi UI is a library that offers UI components and blocks built with Base UI primitives. Some blocks and components use motion (framer). Everything is open-source and will be forever."
+  },
+  {
+    "name": "@solaceui",
+    "homepage": "https://www.solaceui.com",
+    "url": "https://www.solaceui.com/r/{name}.json",
+    "description": "Production-ready and tastefully crafted sections, animated components, and full-page templates for Next.js, Tailwind CSS & Motion"
+  },
+  {
+    "name": "@shadcnblocks",
+    "homepage": "https://shadcnblocks.com",
+    "url": "https://shadcnblocks.com/r/{name}.json",
+    "description": "A registry with hundreds of extra blocks for shadcn ui."
+  },
+  {
+    "name": "@shadcndesign",
+    "homepage": "https://www.shadcndesign.com",
+    "url": "https://shadcndesign-free.vercel.app/r/{name}.json",
+    "description": "A growing collection of high-quality blocks and themes for shadcn/ui."
+  },
+  {
+    "name": "@shadcn-map",
+    "homepage": "https://shadcn-map.vercel.app",
+    "url": "http://shadcn-map.vercel.app/r/{name}.json",
+    "description": "A map component for shadcn/ui. Built with Leaflet and React Leaflet."
+  },
+  {
+    "name": "@shadcn-studio",
+    "homepage": "https://shadcnstudio.com",
+    "url": "https://shadcnstudio.com/r/{name}.json",
+    "description": "An open-source set of shadcn/ui components, blocks, and templates with a powerful theme generator."
+  },
+  {
+    "name": "@shadcn-editor",
+    "homepage": "https://shadcn-editor.vercel.app",
+    "url": "https://shadcn-editor.vercel.app/r/{name}.json",
+    "description": "Accessible, Customizable, Rich Text Editor. Made with Lexical and Shadcn/UI. Open Source. Open Code."
+  },
+  {
+    "name": "@shadcnui-blocks",
+    "homepage": "https://shadcnui-blocks.com",
+    "url": "https://shadcnui-blocks.com/r/{name}.json",
+    "description": "A collection of premium, production-ready shadcn/ui blocks, components and templates."
+  },
+  {
+    "name": "@shadcraft",
+    "homepage": "https://shadcraft-free.vercel.app",
+    "url": "https://shadcraft-free.vercel.app/r/{name}.json",
+    "description": "A collection of polished shadcn/ui components and marketing blocks built to production standards. Fast to use, easy to extend, and ready for any modern web project."
+  },
+  {
+    "name": "@smoothui",
+    "homepage": "https://smoothui.dev",
+    "url": "https://smoothui.dev/r/{name}.json",
+    "description": "A collection of beautifully crafted motion components built with React, Framer Motion, and TailwindCSS. Designed to elevate microinteractions, each component focuses on smooth animations, subtle feedback, and delightful UX. Perfect for designers and developers who want to add refined motion to their interfaces — copy, paste, and make your UI come alive."
+  },
+  {
+    "name": "@spectrumui",
+    "homepage": "https://ui.spectrumhq.in",
+    "url": "https://ui.spectrumhq.in/r/{name}.json",
+    "description": "A modern component library built with shadcn/ui and Tailwind CSS. Spectrum UI offers elegant, responsive components and smooth animations designed for high-quality interfaces."
+  },
+  {
+    "name": "@supabase",
+    "homepage": "https://supabase.com/ui",
+    "url": "https://supabase.com/ui/r/{name}.json",
+    "description": "A collection of React components and blocks built on the shadcn/ui library that connect your front-end to your Supabase back-end via a single command."
+  },
+  {
+    "name": "@svgl",
+    "homepage": "https://svgl.app",
+    "url": "https://svgl.app/r/{name}.json",
+    "description": "A beautiful library with SVG logos."
+  },
+  {
+    "name": "@tailark",
+    "homepage": "https://tailark.com",
+    "url": "https://tailark.com/r/{name}.json",
+    "description": "Shadcn blocks designed for building modern marketing websites."
+  },
+  {
+    "name": "@taki",
+    "homepage": "https://taki-ui.com",
+    "url": "https://taki-ui.com/r/{name}.json",
+    "description": "Beautifully designed, accessible components that you can copy and paste into your apps. Made with React Aria Components and Shadcn tokens."
+  },
+  {
+    "name": "@tour",
+    "homepage": "https://onboarding-tour.vercel.app",
+    "url": "https://onboarding-tour.vercel.app/r/{name}.json",
+    "description": "A component for building onboarding tours. Designed to integrate with shadcn/ui."
+  },
+  {
+    "name": "@uitripled",
+    "homepage": "https://ui.tripled.work",
+    "url": "https://ui.tripled.work/r/{name}.json",
+    "description": "An open-source, Production-ready UI components and blocks powered by shadcn/ui and Framer Motion"
+  },
+  {
+    "name": "@utilcn",
+    "homepage": "https://utilcn.dev",
+    "url": "https://utilcn.dev/r/{name}.json",
+    "description": "Fullstack registry items to start those big features. Utilcn has ChatGPT Apps, file uploading (with progress bars) and downloading, and a way to make your env vars typesafe on the backend."
+  },
+  {
+    "name": "@wandry-ui",
+    "homepage": "http://ui.wandry.com.ua/",
+    "url": "https://ui.wandry.com.ua/r/{name}.json",
+    "description": "A set of open source fully controlled React Inertia form elements"
+  },
+  {
+    "name": "@wigggle-ui",
+    "homepage": "https://wigggle-ui.vercel.app",
+    "url": "https://wigggle-ui.vercel.app/r/{name}.json",
+    "description": "A beautiful collection of copy-and-paste widgets for your next project."
+  },
+  {
+    "name": "@zippystarter",
+    "homepage": "https://zippystarter.com",
+    "url": "https://zippystarter.com/r/{name}.json",
+    "description": "Expertly crafted blocks, components & themes for shadcn/ui."
+  },
+  {
+    "name": "@uicapsule",
+    "homepage": "https://uicapsule.com",
+    "url": "https://uicapsule.com/r/{name}.json",
+    "description": "A curated collection of components that spark joy. Featuring interactive concepts, design experiments, and components in the intersection of AI/UI."
+  },
+  {
+    "name": "@ui-layouts",
+    "homepage": "https://ui-layouts.com/",
+    "url": "https://ui-layouts.com/r/{name}.json",
+    "description": "UI Layouts offers components, effects, design tools, and ready-made blocks that make building modern interfaces more efficient—built with React, Next.js, Tailwind CSS, and shadcn/ui."
+  },
+  {
+    "name": "@pureui",
+    "homepage": "https://pure.kam-ui.com/",
+    "url": "https://pure.kam-ui.com/r/{name}.json",
+    "description": "Pure UI is a curated collection of refined, animated, and accessible components built with Base UI, Tailwind CSS, Motion, and other high-quality open source libraries."
+  },
+  {
+    "name": "@tailwind-builder",
+    "homepage": "https://tailwindbuilder.ai/",
+    "url": "https://tailwindbuilder.ai/r/{name}.json",
+    "description": "Tailwind Builder is a collection of free ui blocks and components and provide ai tools to generate production-ready forms, tables, and charts in seconds. Built with React, Next.js, Tailwind & ShadCN."
+  },
+  {
+    "name": "@tailwind-admin",
+    "homepage": "https://tailwind-admin.com/",
+    "url": "https://tailwind-admin.com/r/{name}.json",
+    "description": "Tailwind Builder provides free tailwind admin dashboard templates, components and ui-blocks built with React, Next.js, Tailwind CSS, and shadcn/ui to help you build admin panels quickly and efficiently."
+  },
+  {
+    "name": "@forgeui",
+    "homepage": "https://forgeui.in/",
+    "url": "https://forgeui.in/r/{name}.json",
+    "description": "Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source."
+  },
+  {
+    "name": "@skiper-ui",
+    "homepage": "https://skiper-ui.com/",
+    "url": "https://skiper-ui.com/registry/{name}.json",
+    "description": "Brand new uncommon components for your Next.js project. Use with ease through shadcn CLI 3.0, featuring fast-growing components and collections that are easy to edit and use."
+  },
+  {
+    "name": "@animbits",
+    "homepage": "https://animbits.dev",
+    "url": "https://animbits.dev/r/{name}.json",
+    "description": "AnimBits is a collection animated UI components for React that use Framer Motion. The components provided include buttons, cards, text, icons, lists, loaders, and page transitions, animation hooks all of which have general-purpose effects that are not flashy and easy on the eyes, making them easy to use."
+  },
+  {
+    "name": "@icons-animated",
+    "homepage": "https://icons.lndev.me",
+    "url": "https://icons.lndev.me/r/{name}.json",
+    "description": "An open-source library of meticulously animated icons (Tabler, Phosphor, and more) for your projects, inspired by lucide-animated.com"
+  },
+  {
+    "name": "@heroicons-animated",
+    "homepage": "https://www.heroicons-animated.com/",
+    "url": "https://www.heroicons-animated.com/r/{name}.json",
+    "description": "An open-source collection of 316 beautifully animated heroicons for your projects."
+  },
+  {
+    "name": "@darx",
+    "homepage": "https://darshitdev.in/arts",
+    "url": "https://darshitdev.in/r/{name}.json",
+    "description": "Magic 3D Tabs component featuring mouse-interactive 3D rotation, floating particles background effect, and smooth spring animations."
+  },
+  {
+    "name": "@beste-ui",
+    "homepage": "https://ui.beste.co",
+    "url": "https://ui.beste.co/r/registry.json",
+    "description": "Production-ready UI blocks for landing pages, dashboards, and web apps."
+  },
+  {
+    "name": "@tokenui",
+    "homepage": "https://www.tokenui.dev",
+    "url": "https://www.tokenui.dev/r/{name}.json",
+    "description": "Beautiful, interactive documentation components for your design tokens following industry standards."
+  },
+  {
+    "name": "@lumiui",
+    "homepage": "https://www.lumiui.dev",
+    "url": "https://www.lumiui.dev/r/{name}.json",
+    "description": "Composable React components powered by Base UI and Tailwind CSS — Build fast, customize everything."
+  },
+  {
+    "name": "@uselayouts",
+    "homepage": "https://uselayouts.com",
+    "url": "https://uselayouts.com/r/{name}.json",
+    "description": "A collection of premium animated React components and micro-interactions built with Motion for building fluid, professional interfaces."
+  },
+  {
+    "name": "@joyco",
+    "homepage": "https://registry.joyco.studio",
+    "url": "https://registry.joyco.studio/r/{name}.json",
+    "description": "Components including MobileMenu, ScrollArea with gradients, Chat UI, HLSVideoPlayer, and Marquee."
+  },
+  {
+    "name": "@gooseui",
+    "homepage": "https://gooseui.pro",
+    "url": "https://gooseui.pro/r/{name}.json",
+    "description": "Open source component library with animated components, beautiful effects, and custom toast notifications. Built with Radix UI and Tailwind CSS."
+  },
+  {
+    "name": "@baselayer",
+    "homepage": "https://www.baselayer.dev",
+    "url": "https://www.baselayer.dev/r/{name}.json",
+    "description": "A collection of components built on React Aria, Tailwind CSS, and tailwind-variants."
+  },
+  {
+    "name": "@jolyui",
+    "homepage": "https://www.jolyui.dev",
+    "url": "https://www.jolyui.dev/r/{name}.json",
+    "description": "JolyUI is a modern React component library built with TypeScript and Tailwind CSS."
+  },
+  {
+    "name": "@fab-ui",
+    "homepage": "https://fab-ui.com",
+    "url": "https://fab-ui.com/r/{name}.json",
+    "description": "A collection of beautifully designed UI components for building modern web applications."
+  },
+  {
+    "name": "@asanshay",
+    "homepage": "https://ds.asanshay.com",
+    "url": "https://ds.asanshay.com/r/{name}.json",
+    "description": "Clean, beautiful, and simple UI primitives and AI elements."
+  },
+  {
+    "name": "@headcodecms",
+    "homepage": "https://headcodecms.com",
+    "url": "https://headcodecms.com/r/{name}.json",
+    "description": "A Minimalistic Web CMS for Next.js, optimized for Cache Components."
+  },
+  {
+    "name": "@typedora-ui",
+    "homepage": "https://typedora-ui.netlify.app",
+    "url": "https://typedora-ui.netlify.app/r/{name}.json",
+    "description": "Typedora UI is a next-generation extension layer for shadcn/ui, designed to bring full type-safety to your UI components."
+  }
+]

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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          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          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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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/bases/base/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        />\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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\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",
+      "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/bases/base/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        />\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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/button.tsx",
-      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\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",
+      "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/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\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"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\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          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\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-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\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(\"gap-1 text-left flex flex-col\", 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(\"text-sm font-medium\", className)}\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(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\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          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\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-2 right-2\"\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(\"gap-1 text-left flex flex-col\", 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(\"text-sm font-medium\", className)}\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(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\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"
     }
   ],

apps/v4/public/r/styles/base-lyra/input-otp.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],

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

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            remixicon=\"RiArrowRightLine\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            remixicon=\"RiArrowLeftLine\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n            remixicon=\"RiLoaderLine\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

apps/v4/public/r/styles/base-lyra/native-select.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],

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

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/pagination-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/bases/base/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\n\nexport default function PaginationExample() {\n  return (\n    <ExampleWrapper>\n      <PaginationBasic />\n      <PaginationSimple />\n      <PaginationIconsOnly />\n    </ExampleWrapper>\n  )\n}\n\nfunction PaginationBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">4</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">5</PaginationLink>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationIconsOnly() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"select-rows-per-page\">Rows per page</FieldLabel>\n          <Select defaultValue=\"25\">\n            <SelectTrigger className=\"w-20\" id=\"select-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"25\">25</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n                <SelectItem value=\"100\">100</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Pagination className=\"mx-0 w-auto\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/registry/bases/base/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\n\nexport default function PaginationExample() {\n  return (\n    <ExampleWrapper>\n      <PaginationBasic />\n      <PaginationSimple />\n      <PaginationIconsOnly />\n    </ExampleWrapper>\n  )\n}\n\nfunction PaginationBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Pagination>\n        <PaginationContent>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">4</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">5</PaginationLink>\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n    </Example>\n  )\n}\n\nfunction PaginationIconsOnly() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <Field orientation=\"horizontal\" className=\"w-fit\">\n          <FieldLabel htmlFor=\"select-rows-per-page\">Rows per page</FieldLabel>\n          <Select defaultValue=\"25\">\n            <SelectTrigger className=\"w-20\" id=\"select-rows-per-page\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectGroup>\n                <SelectItem value=\"10\">10</SelectItem>\n                <SelectItem value=\"25\">25</SelectItem>\n                <SelectItem value=\"50\">50</SelectItem>\n                <SelectItem value=\"100\">100</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Pagination className=\"mx-0 w-auto\">\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious href=\"#\" />\n            </PaginationItem>\n            <PaginationItem>\n              <PaginationNext href=\"#\" />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        remixicon=\"RiArrowLeftSLine\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\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 pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],

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

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

apps/v4/public/r/styles/base-lyra/radio-group.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],

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

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\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          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            remixicon=\"RiErrorWarningLine\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            remixicon=\"RiCloseCircleLine\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoaderLine\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],

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

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              remixicon=\"RiArrowRightLine\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      remixicon=\"RiLoaderLine\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/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(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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          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          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=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/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(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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/bases/base/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        />\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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\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",
+      "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/bases/base/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        />\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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],

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

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/button.tsx",
-      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"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",
+      "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/bases/base/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"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"
     }
   ],