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

.github/workflows/release.yml

@@ -7,6 +7,11 @@ on:
     branches:
       - main
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+
 jobs:
   release:
     if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -24,12 +29,15 @@ jobs:
           version: 9.0.6
 
       - name: Use Node.js 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          version: 9.0.6
           node-version: 20
+          registry-url: "https://registry.npmjs.org"
           cache: "pnpm"
 
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
       - name: Install NPM Dependencies
         run: pnpm install
 
@@ -49,5 +57,4 @@ jobs:
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

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

@@ -1,7 +1,5 @@
 "use client"
 
-import { useQueryStates } from "nuqs"
-
 import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
 import {
@@ -12,7 +10,7 @@ import {
   PickerRadioItem,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function MenuAccentPicker({
   isMobile,
@@ -21,18 +19,15 @@ export function MenuAccentPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentAccent = MENU_ACCENTS.find(
     (accent) => accent.value === params.menuAccent
   )
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Menu Accent</div>
@@ -40,7 +35,7 @@ export function MenuAccentPicker({
               {currentAccent?.label}
             </div>
           </div>
-          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="128"
@@ -70,31 +65,31 @@ export function MenuAccentPicker({
             </svg>
           </div>
         </PickerTrigger>
-        <LockButton
-          param="menuAccent"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentAccent?.value}
-          onValueChange={(value) => {
-            setParams({ menuAccent: value as MenuAccentValue })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {MENU_ACCENTS.map((accent) => (
-              <PickerRadioItem key={accent.value} value={accent.value}>
-                {accent.label}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentAccent?.value}
+            onValueChange={(value) => {
+              setParams({ menuAccent: value as MenuAccentValue })
+            }}
+          >
+            <PickerGroup>
+              {MENU_ACCENTS.map((accent) => (
+                <PickerRadioItem key={accent.value} value={accent.value}>
+                  {accent.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuAccent"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { useTheme } from "next-themes"
-import { useQueryStates } from "nuqs"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type BaseColorName } from "@/registry/config"
@@ -17,7 +16,7 @@ import {
   PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function BaseColorPicker({
   isMobile,
@@ -28,10 +27,7 @@ export function BaseColorPicker({
 }) {
   const { resolvedTheme, setTheme } = useTheme()
   const mounted = useMounted()
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentBaseColor = React.useMemo(
     () => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
@@ -39,8 +35,8 @@ export function BaseColorPicker({
   )
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Base Color</div>
@@ -58,72 +54,72 @@ export function BaseColorPicker({
                     ]?.["muted-foreground"],
                 } as React.CSSProperties
               }
-              className="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
             />
           )}
         </PickerTrigger>
-        <LockButton
-          param="baseColor"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentBaseColor?.name}
-          onValueChange={(value) => {
-            if (value === "dark") {
-              setTheme(resolvedTheme === "dark" ? "light" : "dark")
-              return
-            }
-
-            setParams({ baseColor: value as BaseColorName })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {BASE_COLORS.map((baseColor) => (
-              <PickerRadioItem key={baseColor.name} value={baseColor.name}>
-                <div className="flex items-center gap-2">
-                  {mounted && resolvedTheme && (
-                    <div
-                      style={
-                        {
-                          "--color":
-                            baseColor.cssVars?.[
-                              resolvedTheme as "light" | "dark"
-                            ]?.["muted-foreground"],
-                        } as React.CSSProperties
-                      }
-                      className="size-4 rounded-full bg-(--color)"
-                    />
-                  )}
-                  {baseColor.title}
-                </div>
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-          <PickerSeparator />
-          <PickerGroup>
-            <PickerItem
-              onClick={() => {
+          <PickerRadioGroup
+            value={currentBaseColor?.name}
+            onValueChange={(value) => {
+              if (value === "dark") {
                 setTheme(resolvedTheme === "dark" ? "light" : "dark")
-              }}
-            >
-              <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                <div>
-                  Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
+                return
+              }
+
+              setParams({ baseColor: value as BaseColorName })
+            }}
+          >
+            <PickerGroup>
+              {BASE_COLORS.map((baseColor) => (
+                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
+                  <div className="flex items-center gap-2">
+                    {mounted && resolvedTheme && (
+                      <div
+                        style={
+                          {
+                            "--color":
+                              baseColor.cssVars?.[
+                                resolvedTheme as "light" | "dark"
+                              ]?.["muted-foreground"],
+                          } as React.CSSProperties
+                        }
+                        className="size-4 rounded-full bg-(--color)"
+                      />
+                    )}
+                    {baseColor.title}
+                  </div>
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              <PickerItem
+                onClick={() => {
+                  setTheme(resolvedTheme === "dark" ? "light" : "dark")
+                }}
+              >
+                <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                  <div>
+                    Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
+                  </div>
+                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                    Base colors are easier to see in dark mode.
+                  </div>
                 </div>
-                <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                  Base colors are easier to see in dark mode.
-                </div>
-              </div>
-            </PickerItem>
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+              </PickerItem>
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="baseColor"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { useQueryStates } from "nuqs"
 
 import { BASES } from "@/registry/config"
 import {
@@ -12,7 +11,7 @@ import {
   PickerRadioItem,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function BasePicker({
   isMobile,
@@ -21,10 +20,7 @@ export function BasePicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentBase = React.useMemo(
     () => BASES.find((base) => base.name === params.base),
@@ -54,7 +50,7 @@ export function BasePicker({
         </div>
         {currentBase?.meta?.logo && (
           <div
-            className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[svg]:size-4"
+            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
             dangerouslySetInnerHTML={{
               __html: currentBase.meta.logo,
             }}

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

@@ -3,27 +3,28 @@
 import * as React from "react"
 import { Settings05Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { useQueryStates } from "nuqs"
 
 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"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function Customizer() {
-  const [params] = useQueryStates(designSystemSearchParams)
+  const [params] = useDesignSystemSearchParams()
   const isMobile = useIsMobile()
   const anchorRef = React.useRef<HTMLDivElement | null>(null)
 
@@ -76,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/design-system-provider.tsx

@@ -7,21 +7,23 @@ import {
   DEFAULT_CONFIG,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
+import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
 import { FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function DesignSystemProvider({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const style = useDesignSystemParam("style")
-  const theme = useDesignSystemParam("theme")
-  const font = useDesignSystemParam("font")
-  const baseColor = useDesignSystemParam("baseColor")
-  const menuAccent = useDesignSystemParam("menuAccent")
-  const menuColor = useDesignSystemParam("menuColor")
-  const radius = useDesignSystemParam("radius")
+  const [
+    { style, theme, font, baseColor, menuAccent, menuColor, radius },
+    setSearchParams,
+  ] = useDesignSystemSearchParams({
+    shallow: true, // No need to go through the server…
+    history: "replace", // …or push updates into the iframe history.
+  })
+  useIframeMessageListener("design-system-params", setSearchParams)
   const [isReady, setIsReady] = React.useState(false)
 
   // Use useLayoutEffect for synchronous style updates to prevent flash.

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

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { useQueryStates } from "nuqs"
 
 import {
   Item,
@@ -21,7 +20,7 @@ import {
   PickerTrigger,
 } from "@/app/(create)/components/picker"
 import { type Font } from "@/app/(create)/lib/fonts"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function FontPicker({
   fonts,
@@ -32,10 +31,7 @@ export function FontPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentFont = React.useMemo(
     () => fonts.find((font) => font.value === params.font),
@@ -43,8 +39,8 @@ export function FontPicker({
   )
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Font</div>
@@ -53,54 +49,55 @@ export function FontPicker({
             </div>
           </div>
           <div
-            className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base"
+            className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
             style={{ fontFamily: currentFont?.font.style.fontFamily }}
           >
             Aa
           </div>
         </PickerTrigger>
-        <LockButton
-          param="font"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-        className="max-h-80 md:w-72"
-      >
-        <PickerRadioGroup
-          value={currentFont?.value}
-          onValueChange={(value) => {
-            setParams({ font: value as FontValue })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-80 md:w-72"
         >
-          <PickerGroup>
-            {fonts.map((font, index) => (
-              <React.Fragment key={font.value}>
-                <PickerRadioItem value={font.value}>
-                  <Item size="xs">
-                    <ItemContent className="gap-1">
-                      <ItemTitle className="text-muted-foreground text-xs font-medium">
-                        {font.name}
-                      </ItemTitle>
-                      <ItemDescription
-                        style={{ fontFamily: font.font.style.fontFamily }}
-                      >
-                        Designers love packing quirky glyphs into test phrases.
-                      </ItemDescription>
-                    </ItemContent>
-                  </Item>
-                </PickerRadioItem>
-                {index < fonts.length - 1 && (
-                  <PickerSeparator className="opacity-50" />
-                )}
-              </React.Fragment>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentFont?.value}
+            onValueChange={(value) => {
+              setParams({ font: value as FontValue })
+            }}
+          >
+            <PickerGroup>
+              {fonts.map((font, index) => (
+                <React.Fragment key={font.value}>
+                  <PickerRadioItem value={font.value}>
+                    <Item size="xs">
+                      <ItemContent className="gap-1">
+                        <ItemTitle className="text-muted-foreground text-xs font-medium">
+                          {font.name}
+                        </ItemTitle>
+                        <ItemDescription
+                          style={{ fontFamily: font.font.style.fontFamily }}
+                        >
+                          Designers love packing quirky glyphs into test
+                          phrases.
+                        </ItemDescription>
+                      </ItemContent>
+                    </Item>
+                  </PickerRadioItem>
+                  {index < fonts.length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="font"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { lazy, memo, Suspense } from "react"
-import { useQueryStates } from "nuqs"
 
 import { Item, ItemContent, ItemTitle } from "@/registry/bases/radix/ui/item"
 import {
@@ -20,7 +19,7 @@ import {
   PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const IconLucide = lazy(() =>
   import("@/registry/icons/icon-lucide").then((mod) => ({
@@ -40,6 +39,18 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
 const PREVIEW_ICONS = {
   lucide: [
     "CopyIcon",
@@ -79,7 +90,7 @@ const PREVIEW_ICONS = {
     "Delete02Icon",
     "Share03Icon",
     "ShoppingBag01Icon",
-    "MoreHorizontalIcon",
+    "MoreHorizontalCircle01Icon",
     "Loading03Icon",
     "PlusSignIcon",
     "MinusSignIcon",
@@ -89,6 +100,38 @@ const PREVIEW_ICONS = {
     "ArrowDown01Icon",
     "ArrowRight01Icon",
   ],
+  phosphor: [
+    "CopyIcon",
+    "WarningCircleIcon",
+    "TrashIcon",
+    "ShareIcon",
+    "BagIcon",
+    "DotsThreeIcon",
+    "SpinnerIcon",
+    "PlusIcon",
+    "MinusIcon",
+    "ArrowLeftIcon",
+    "ArrowRightIcon",
+    "CheckIcon",
+    "CaretDownIcon",
+    "CaretRightIcon",
+  ],
+  remixicon: [
+    "RiFileCopyLine",
+    "RiErrorWarningLine",
+    "RiDeleteBinLine",
+    "RiShareLine",
+    "RiShoppingBagLine",
+    "RiMoreLine",
+    "RiLoaderLine",
+    "RiAddLine",
+    "RiSubtractLine",
+    "RiArrowLeftLine",
+    "RiArrowRightLine",
+    "RiCheckLine",
+    "RiArrowDownSLine",
+    "RiArrowRightSLine",
+  ],
 }
 
 const logos = {
@@ -155,6 +198,35 @@ const logos = {
       ></path>
     </svg>
   ),
+  phosphor: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+    >
+      <path fill="none" d="M0 0h32v32H0z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
+      />
+    </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({
@@ -164,10 +236,7 @@ export function IconLibraryPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentIconLibrary = React.useMemo(
     () => iconLibraries[params.iconLibrary as keyof typeof iconLibraries],
@@ -175,8 +244,8 @@ export function IconLibraryPicker({
   )
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Icon Library</div>
@@ -184,42 +253,42 @@ export function IconLibraryPicker({
               {currentIconLibrary?.title}
             </div>
           </div>
-          <div className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+          <div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
             {logos[currentIconLibrary?.name as keyof typeof logos]}
           </div>
         </PickerTrigger>
-        <LockButton
-          param="iconLibrary"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentIconLibrary?.name}
-          onValueChange={(value) => {
-            setParams({ iconLibrary: value as IconLibraryName })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {Object.values(iconLibraries).map((iconLibrary, index) => (
-              <React.Fragment key={iconLibrary.name}>
-                <IconLibraryPickerItem
-                  iconLibrary={iconLibrary}
-                  value={iconLibrary.name}
-                />
-                {index < Object.values(iconLibraries).length - 1 && (
-                  <PickerSeparator className="opacity-50" />
-                )}
-              </React.Fragment>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentIconLibrary?.name}
+            onValueChange={(value) => {
+              setParams({ iconLibrary: value as IconLibraryName })
+            }}
+          >
+            <PickerGroup>
+              {Object.values(iconLibraries).map((iconLibrary, index) => (
+                <React.Fragment key={iconLibrary.name}>
+                  <IconLibraryPickerItem
+                    iconLibrary={iconLibrary}
+                    value={iconLibrary.name}
+                  />
+                  {index < Object.values(iconLibraries).length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="iconLibrary"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }
 
@@ -263,7 +332,11 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
       ? IconLucide
       : iconLibrary === "tabler"
         ? IconTabler
-        : IconHugeicons
+        : iconLibrary === "hugeicons"
+          ? IconHugeicons
+          : iconLibrary === "phosphor"
+            ? IconPhosphor
+            : IconRemixicon
 
   return (
     <Suspense

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

@@ -4,7 +4,7 @@ import { lazy, Suspense } from "react"
 import { SquareIcon } from "lucide-react"
 import type { IconLibraryName } from "shadcn/icons"
 
-import { useDesignSystemParam } from "@/app/(create)/hooks/use-design-system"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const IconLucide = lazy(() =>
   import("@/registry/icons/icon-lucide").then((mod) => ({
@@ -24,12 +24,24 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
 export function IconPlaceholder({
   ...props
 }: {
   [K in IconLibraryName]: string
 } & React.ComponentProps<"svg">) {
-  const iconLibrary = useDesignSystemParam("iconLibrary")
+  const [{ iconLibrary }] = useDesignSystemSearchParams()
   const iconName = props[iconLibrary]
 
   if (!iconName) {
@@ -43,6 +55,12 @@ export function IconPlaceholder({
       {iconLibrary === "hugeicons" && (
         <IconHugeicons name={iconName} {...props} />
       )}
+      {iconLibrary === "phosphor" && (
+        <IconPhosphor name={iconName} {...props} />
+      )}
+      {iconLibrary === "remixicon" && (
+        <IconRemixicon name={iconName} {...props} />
+      )}
     </Suspense>
   )
 }

apps/v4/app/(create)/components/item-explorer.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 import Link from "next/link"
 import { ChevronRightIcon } from "lucide-react"
-import { useQueryStates } from "nuqs"
 import { type RegistryItem } from "shadcn/schema"
 
 import { cn } from "@/lib/utils"
@@ -22,7 +21,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/registry/new-york-v4/ui/sidebar"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 import { groupItemsByType } from "@/app/(create)/lib/utils"
 
 const cachedGroupedItems = React.cache(
@@ -38,10 +37,7 @@ export function ItemExplorer({
   base: Base["name"]
   items: Pick<RegistryItem, "name" | "title" | "type">[]
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    history: "push",
-    shallow: true,
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
 

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

@@ -4,7 +4,6 @@ import * as React from "react"
 import Script from "next/script"
 import { Search01Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { useQueryStates } from "nuqs"
 import { type RegistryItem } from "shadcn/schema"
 
 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -21,7 +20,7 @@ import {
   ComboboxTrigger,
   ComboboxValue,
 } from "@/registry/new-york-v4/ui/combobox"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 import { groupItemsByType } from "@/app/(create)/lib/utils"
 
 export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
@@ -38,10 +37,7 @@ export function ItemPicker({
   items: Pick<RegistryItem, "name" | "title" | "type">[]
 }) {
   const [open, setOpen] = React.useState(false)
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    history: "push",
-    shallow: true,
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
 

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

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { useTheme } from "next-themes"
-import { useQueryStates } from "nuqs"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { type MenuColorValue } from "@/registry/config"
@@ -15,7 +14,7 @@ import {
   PickerRadioItem,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const MENU_OPTIONS = [
   {
@@ -114,17 +113,14 @@ export function MenuColorPicker({
 }) {
   const { resolvedTheme } = useTheme()
   const mounted = useMounted()
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
   const currentMenu = MENU_OPTIONS.find(
     (menu) => menu.value === params.menuColor
   )
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Menu Color</div>
@@ -132,36 +128,36 @@ export function MenuColorPicker({
               {currentMenu?.label}
             </div>
           </div>
-          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base">
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
             {currentMenu?.icon}
           </div>
         </PickerTrigger>
-        <LockButton
-          param="menuColor"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentMenu?.value}
-          onValueChange={(value) => {
-            setParams({ menuColor: value as MenuColorValue })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {MENU_OPTIONS.map((menu) => (
-              <PickerRadioItem key={menu.value} value={menu.value}>
-                {menu.icon}
-                {menu.label}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentMenu?.value}
+            onValueChange={(value) => {
+              setParams({ menuColor: value as MenuColorValue })
+            }}
+          >
+            <PickerGroup>
+              {MENU_OPTIONS.map((menu) => (
+                <PickerRadioItem key={menu.value} value={menu.value}>
+                  {menu.icon}
+                  {menu.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuColor"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -138,6 +138,8 @@ function PickerSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
+        remixicon="RiArrowRightSLine"
         className="ml-auto"
       />
     </MenuPrimitive.SubmenuTrigger>
@@ -190,6 +192,8 @@ function PickerCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -230,6 +234,8 @@ function PickerRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
             className="size-4 pointer-coarse:size-5"
           />
         </MenuPrimitive.RadioItemIndicator>

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

@@ -1,9 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { useQueryStates } from "nuqs"
 
-import { BASES, STYLES, type Preset } from "@/registry/config"
+import { STYLES, type Preset } from "@/registry/config"
 import {
   Picker,
   PickerContent,
@@ -12,7 +11,7 @@ import {
   PickerRadioItem,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function PresetPicker({
   presets,
@@ -23,10 +22,7 @@ export function PresetPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentPreset = React.useMemo(() => {
     return presets.find(

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

@@ -1,27 +1,26 @@
 "use client"
 
 import { Monitor, Smartphone, Tablet } from "lucide-react"
-import { useQueryStates } from "nuqs"
 
 import {
   ToggleGroup,
   ToggleGroupItem,
 } from "@/registry/new-york-v4/ui/toggle-group"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function PreviewControls() {
-  const [urlParams, setUrlParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
+  const [params, setParams] = useDesignSystemSearchParams({
+    history: "replace",
   })
 
   return (
     <div className="flex h-8 items-center gap-1.5 rounded-md border p-1">
       <ToggleGroup
         type="single"
-        value={(urlParams.size ?? 100).toString()}
+        value={params.size.toString()}
         onValueChange={(newValue) => {
           if (newValue) {
-            setUrlParams({ size: parseInt(newValue) })
+            setParams({ size: parseInt(newValue) })
           }
         }}
         className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"

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

@@ -5,18 +5,18 @@ 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 { useDesignSystemSync } from "@/app/(create)/hooks/use-design-system"
-
-const MESSAGE_TYPE = "design-system-params"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
+import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
+import {
+  serializeDesignSystemSearchParams,
+  useDesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
 
 export function Preview() {
-  const params = useDesignSystemSync()
+  const [params] = useDesignSystemSearchParams()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
   const resizablePanelRef = React.useRef<ImperativePanelHandle>(null)
-  const [initialParams] = React.useState(params)
-  const [iframeKey, setIframeKey] = React.useState(0)
 
   // Sync resizable panel with URL param changes.
   React.useEffect(() => {
@@ -32,13 +32,7 @@ export function Preview() {
     }
 
     const sendParams = () => {
-      iframe.contentWindow?.postMessage(
-        {
-          type: MESSAGE_TYPE,
-          params,
-        },
-        "*"
-      )
+      sendToIframe(iframe, "design-system-params", params)
     }
 
     if (iframe.contentWindow) {
@@ -96,18 +90,25 @@ export function Preview() {
     }
   }, [])
 
-  if (!params.item || !params.base) {
-    return null
-  }
-
-  const iframeSrc = `/preview/${params.base}/${params.item}?theme=${initialParams.theme ?? "neutral"}&iconLibrary=${initialParams.iconLibrary ?? "lucide"}&style=${initialParams.style ?? "vega"}&font=${initialParams.font ?? "inter"}&baseColor=${initialParams.baseColor ?? "neutral"}`
+  const iframeSrc = React.useMemo(() => {
+    // The iframe src needs to include the serialized design system params
+    // for the initial load, but not be reactive to them as it would cause
+    // full-iframe reloads on every param change (flashes & loss of state).
+    // Further updates of the search params will be sent to the iframe
+    // via a postMessage channel, for it to sync its own history onto the host's.
+    return serializeDesignSystemSearchParams(
+      `/preview/${params.base}/${params.item}`,
+      params
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.base, params.item])
 
   return (
     <div className="relative -mx-1 flex flex-1 flex-col justify-center sm:mx-0">
       <div className="ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px] relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1">
         <div className="bg-muted dark:bg-muted/30 absolute inset-0 rounded-2xl" />
         <iframe
-          key={`${params.item}-${iframeKey}`}
+          key={params.base + params.item}
           ref={iframeRef}
           src={iframeSrc}
           className="z-10 size-full flex-1"

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

@@ -1,7 +1,5 @@
 "use client"
 
-import { useQueryStates } from "nuqs"
-
 import { RADII, type RadiusValue } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
 import {
@@ -13,7 +11,7 @@ import {
   PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function RadiusPicker({
   isMobile,
@@ -22,18 +20,15 @@ export function RadiusPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentRadius = RADII.find((radius) => radius.name === params.radius)
   const defaultRadius = RADII.find((radius) => radius.name === "default")
   const otherRadii = RADII.filter((radius) => radius.name !== "default")
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Radius</div>
@@ -41,7 +36,7 @@ export function RadiusPicker({
               {currentRadius?.label}
             </div>
           </div>
-          <div className="text-foreground absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base">
+          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -60,47 +55,47 @@ export function RadiusPicker({
             </svg>
           </div>
         </PickerTrigger>
-        <LockButton
-          param="radius"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentRadius?.name}
-          onValueChange={(value) => {
-            setParams({ radius: value as RadiusValue })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {defaultRadius && (
-              <PickerRadioItem
-                key={defaultRadius.name}
-                value={defaultRadius.name}
-              >
-                <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                  <div>{defaultRadius.label}</div>
-                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                    Use radius from style
+          <PickerRadioGroup
+            value={currentRadius?.name}
+            onValueChange={(value) => {
+              setParams({ radius: value as RadiusValue })
+            }}
+          >
+            <PickerGroup>
+              {defaultRadius && (
+                <PickerRadioItem
+                  key={defaultRadius.name}
+                  value={defaultRadius.name}
+                >
+                  <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                    <div>{defaultRadius.label}</div>
+                    <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                      Use radius from style
+                    </div>
                   </div>
-                </div>
-              </PickerRadioItem>
-            )}
-          </PickerGroup>
-          <PickerSeparator />
-          <PickerGroup>
-            {otherRadii.map((radius) => (
-              <PickerRadioItem key={radius.name} value={radius.name}>
-                {radius.label}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+                </PickerRadioItem>
+              )}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {otherRadii.map((radius) => (
+                <PickerRadioItem key={radius.name} value={radius.name}>
+                  {radius.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="radius"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -1,16 +1,12 @@
 "use client"
 
 import * as React from "react"
-import { useRouter } from "next/navigation"
 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 { useQueryStates } from "nuqs"
 
-import { cn } from "@/lib/utils"
 import {
   BASE_COLORS,
-  DEFAULT_CONFIG,
   getThemesForBaseColor,
   iconLibraries,
   MENU_ACCENTS,
@@ -32,7 +28,7 @@ import {
   RANDOMIZE_BIASES,
   type RandomizeContext,
 } from "@/app/(create)/lib/randomize-biases"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
 
@@ -40,29 +36,9 @@ function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
 }
 
-export function CustomizerControls({ className }: { className?: string }) {
-  const router = useRouter()
+export function RandomButton() {
   const { locks } = useLocks()
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
-
-  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 [params, setParams] = useDesignSystemSearchParams()
 
   const handleRandomize = React.useCallback(() => {
     // Use current value if locked, otherwise randomize.
@@ -141,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)/components/share-button.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { useQueryStates } from "nuqs"
 
 import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Button } from "@/registry/new-york-v4/ui/button"
@@ -12,12 +11,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/new-york-v4/ui/tooltip"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ShareButton() {
-  const [params] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-  })
+  const [params] = useDesignSystemSearchParams()
   const [hasCopied, setHasCopied] = React.useState(false)
 
   const shareUrl = React.useMemo(() => {

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

@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { useQueryStates } from "nuqs"
 
 import { type Style, type StyleName } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
@@ -14,7 +13,7 @@ import {
   PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function StylePicker({
   styles,
@@ -25,16 +24,13 @@ export function StylePicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentStyle = styles.find((style) => style.name === params.style)
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Style</div>
@@ -43,58 +39,58 @@ export function StylePicker({
             </div>
           </div>
           {currentStyle?.icon && (
-            <div className="absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center">
+            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none">
               {React.cloneElement(currentStyle.icon, {
                 className: "size-4",
               })}
             </div>
           )}
         </PickerTrigger>
-        <LockButton
-          param="style"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-        className="md:w-64"
-      >
-        <PickerRadioGroup
-          value={currentStyle?.name}
-          onValueChange={(value) => {
-            setParams({ style: value as StyleName })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="md:w-64"
         >
-          <PickerGroup>
-            {styles.map((style, index) => (
-              <React.Fragment key={style.name}>
-                <PickerRadioItem value={style.name}>
-                  <div className="flex items-start gap-2">
-                    {style.icon && (
-                      <div className="flex size-4 translate-y-0.5 items-center justify-center">
-                        {React.cloneElement(style.icon, {
-                          className: "size-4",
-                        })}
-                      </div>
-                    )}
-                    <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                      <div>{style.title}</div>
-                      <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                        {style.description}
+          <PickerRadioGroup
+            value={currentStyle?.name}
+            onValueChange={(value) => {
+              setParams({ style: value as StyleName })
+            }}
+          >
+            <PickerGroup>
+              {styles.map((style, index) => (
+                <React.Fragment key={style.name}>
+                  <PickerRadioItem value={style.name}>
+                    <div className="flex items-start gap-2">
+                      {style.icon && (
+                        <div className="flex size-4 translate-y-0.5 items-center justify-center">
+                          {React.cloneElement(style.icon, {
+                            className: "size-4",
+                          })}
+                        </div>
+                      )}
+                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                        <div>{style.title}</div>
+                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                          {style.description}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </PickerRadioItem>
-                {index < styles.length - 1 && (
-                  <PickerSeparator className="opacity-50" />
-                )}
-              </React.Fragment>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+                  </PickerRadioItem>
+                  {index < styles.length - 1 && (
+                    <PickerSeparator className="opacity-50" />
+                  )}
+                </React.Fragment>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="style"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

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

@@ -1,7 +1,5 @@
 "use client"
 
-import { useQueryStates } from "nuqs"
-
 import {
   Picker,
   PickerContent,
@@ -10,7 +8,7 @@ import {
   PickerRadioItem,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const TEMPLATES = [
   {
@@ -37,10 +35,7 @@ export function TemplatePicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentTemplate = TEMPLATES.find(
     (template) => template.value === params.template
@@ -57,7 +52,7 @@ export function TemplatePicker({
         </div>
         {currentTemplate?.logo && (
           <div
-            className="text-foreground *:[svg]:text-foreground! absolute top-1/2 right-4 size-4 -translate-y-1/2 *:[svg]:size-4"
+            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
             dangerouslySetInnerHTML={{
               __html: currentTemplate.logo,
             }}

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

@@ -2,7 +2,6 @@
 
 import * as React from "react"
 import { useTheme } from "next-themes"
-import { useQueryStates } from "nuqs"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
@@ -11,13 +10,12 @@ import {
   Picker,
   PickerContent,
   PickerGroup,
-  PickerLabel,
   PickerRadioGroup,
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ThemePicker({
   themes,
@@ -30,10 +28,7 @@ export function ThemePicker({
 }) {
   const { resolvedTheme } = useTheme()
   const mounted = useMounted()
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
 
   const currentTheme = React.useMemo(
     () => themes.find((theme) => theme.name === params.theme),
@@ -52,8 +47,8 @@ export function ThemePicker({
   }, [currentTheme, themes, setParams])
 
   return (
-    <Picker>
-      <div className="group/picker relative">
+    <div className="group/picker relative">
+      <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-muted-foreground text-xs">Theme</div>
@@ -73,99 +68,99 @@ export function ThemePicker({
                     ],
                 } as React.CSSProperties
               }
-              className="absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color)"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
             />
           )}
         </PickerTrigger>
-        <LockButton
-          param="theme"
-          className="absolute top-1/2 right-10 -translate-y-1/2"
-        />
-      </div>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-        className="max-h-96"
-      >
-        <PickerRadioGroup
-          value={currentTheme?.name}
-          onValueChange={(value) => {
-            setParams({ theme: value as ThemeName })
-          }}
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-96"
         >
-          <PickerGroup>
-            {themes
-              .filter((theme) =>
-                BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
-              )
-              .map((theme) => {
-                const isBaseColor = BASE_COLORS.find(
-                  (baseColor) => baseColor.name === theme.name
+          <PickerRadioGroup
+            value={currentTheme?.name}
+            onValueChange={(value) => {
+              setParams({ theme: value as ThemeName })
+            }}
+          >
+            <PickerGroup>
+              {themes
+                .filter((theme) =>
+                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
                 )
-                return (
-                  <PickerRadioItem key={theme.name} value={theme.name}>
-                    <div className="flex items-start gap-2">
-                      {mounted && resolvedTheme && (
-                        <div
-                          style={
-                            {
-                              "--color":
-                                theme.cssVars?.[
-                                  resolvedTheme as "light" | "dark"
-                                ]?.[
-                                  isBaseColor ? "muted-foreground" : "primary"
-                                ],
-                            } as React.CSSProperties
-                          }
-                          className="size-4 translate-y-1 rounded-full bg-(--color)"
-                        />
-                      )}
-                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                        <div>{theme.title}</div>
-                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                          Match base color
-                        </div>
-                      </div>
-                    </div>
-                  </PickerRadioItem>
-                )
-              })}
-          </PickerGroup>
-          <PickerSeparator />
-          <PickerGroup>
-            {themes
-              .filter(
-                (theme) =>
-                  !BASE_COLORS.find(
+                .map((theme) => {
+                  const isBaseColor = BASE_COLORS.find(
                     (baseColor) => baseColor.name === theme.name
                   )
-              )
-              .map((theme) => {
-                return (
-                  <PickerRadioItem key={theme.name} value={theme.name}>
-                    <div className="flex items-center gap-2">
-                      {mounted && resolvedTheme && (
-                        <div
-                          style={
-                            {
-                              "--color":
-                                theme.cssVars?.[
-                                  resolvedTheme as "light" | "dark"
-                                ]?.["primary"],
-                            } as React.CSSProperties
-                          }
-                          className="size-4 rounded-full bg-(--color)"
-                        />
-                      )}
-                      {theme.title}
-                    </div>
-                  </PickerRadioItem>
+                  return (
+                    <PickerRadioItem key={theme.name} value={theme.name}>
+                      <div className="flex items-start gap-2">
+                        {mounted && resolvedTheme && (
+                          <div
+                            style={
+                              {
+                                "--color":
+                                  theme.cssVars?.[
+                                    resolvedTheme as "light" | "dark"
+                                  ]?.[
+                                    isBaseColor ? "muted-foreground" : "primary"
+                                  ],
+                              } as React.CSSProperties
+                            }
+                            className="size-4 translate-y-1 rounded-full bg-(--color)"
+                          />
+                        )}
+                        <div className="flex flex-col justify-start pointer-coarse:gap-1">
+                          <div>{theme.title}</div>
+                          <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
+                            Match base color
+                          </div>
+                        </div>
+                      </div>
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {themes
+                .filter(
+                  (theme) =>
+                    !BASE_COLORS.find(
+                      (baseColor) => baseColor.name === theme.name
+                    )
                 )
-              })}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+                .map((theme) => {
+                  return (
+                    <PickerRadioItem key={theme.name} value={theme.name}>
+                      <div className="flex items-center gap-2">
+                        {mounted && resolvedTheme && (
+                          <div
+                            style={
+                              {
+                                "--color":
+                                  theme.cssVars?.[
+                                    resolvedTheme as "light" | "dark"
+                                  ]?.["primary"],
+                              } as React.CSSProperties
+                            }
+                            className="size-4 rounded-full bg-(--color)"
+                          />
+                        )}
+                        {theme.title}
+                      </div>
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="theme"
+        className="absolute top-1/2 right-10 -translate-y-1/2"
+      />
+    </div>
   )
 }

apps/v4/app/(create)/components/toolbar-controls.tsx

@@ -7,7 +7,6 @@ import {
   Tick02Icon,
 } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { useQueryStates } from "nuqs"
 import { toast } from "sonner"
 
 import { useConfig } from "@/hooks/use-config"
@@ -43,7 +42,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/new-york-v4/ui/tooltip"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const TEMPLATES = [
   {
@@ -65,10 +64,7 @@ const TEMPLATES = [
 
 export function ToolbarControls() {
   const [open, setOpen] = React.useState(false)
-  const [params, setParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
   const [config, setConfig] = useConfig()
   const [hasCopied, setHasCopied] = React.useState(false)
 

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

@@ -1,7 +1,5 @@
 "use client"
 
-import { useQueryStates } from "nuqs"
-
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { useMounted } from "@/hooks/use-mounted"
@@ -13,20 +11,15 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/new-york-v4/ui/tooltip"
-import { designSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {
-  const [params] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-    history: "push",
-  })
+  const [params, setParams] = useDesignSystemSearchParams()
   const isMobile = useIsMobile()
   const isMounted = useMounted()
 
   const url = `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
 
-  console.log(url)
-
   if (!isMounted) {
     return <Skeleton className="h-8 w-24 rounded-lg" />
   }

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

@@ -12,16 +12,17 @@ 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"
 import { WelcomeDialog } from "@/app/(create)/components/welcome-dialog"
 import { getItemsForBase } from "@/app/(create)/lib/api"
-import { designSystemSearchParamsCache } from "@/app/(create)/lib/search-params"
+import { loadDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export const revalidate = false
 export const dynamic = "force-static"
@@ -60,7 +61,7 @@ export default async function CreatePage({
 }: {
   searchParams: Promise<SearchParams>
 }) {
-  const params = await designSystemSearchParamsCache.parse(searchParams)
+  const params = await loadDesignSystemSearchParams(searchParams)
   const base = BASES.find((b) => b.name === params.base) ?? BASES[0]
 
   const items = await getItemsForBase(base.name)
@@ -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)/hooks/use-canva.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  sendToIframe,
-  sendToParent,
-  useParentMessageListener,
-} from "@/app/(create)/hooks/use-iframe-sync"
-
-const MESSAGE_TYPE = "canva-zoom"
-
-export type ZoomCommand =
-  | { type: "ZOOM_IN" }
-  | { type: "ZOOM_OUT" }
-  | { type: "ZOOM_SET"; value: number }
-  | { type: "ZOOM_FIT" }
-  | { type: "RESET" }
-
-export function sendCanvaZoomCommand(
-  iframe: HTMLIFrameElement | null,
-  command: ZoomCommand
-) {
-  sendToIframe(iframe, MESSAGE_TYPE, { command })
-}
-
-export function sendCanvaZoomUpdate(zoom: number) {
-  sendToParent(MESSAGE_TYPE, { zoom })
-}
-
-export function useCanvaZoomSync() {
-  const [zoom, setZoom] = React.useState(1)
-
-  useParentMessageListener<{ zoom: number }>(MESSAGE_TYPE, (data) => {
-    if (typeof data.zoom === "number") {
-      setZoom(data.zoom)
-    }
-  })
-
-  return zoom
-}

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

@@ -1,89 +0,0 @@
-"use client"
-
-import { useQueryStates } from "nuqs"
-
-import {
-  createIframeSyncStore,
-  useIframeSyncAll,
-  useIframeSyncValue,
-} from "@/app/(create)/hooks/use-iframe-sync"
-import {
-  designSystemSearchParams,
-  type DesignSystemSearchParams,
-} from "@/app/(create)/lib/search-params"
-
-const MESSAGE_TYPE = "design-system-params"
-
-const getInitialValues = (): DesignSystemSearchParams => {
-  if (typeof window === "undefined") {
-    return {
-      base: "radix",
-      iconLibrary: "lucide",
-      theme: "neutral",
-      style: "vega",
-      font: "inter",
-      item: "cover-example",
-      baseColor: "neutral",
-      menuAccent: "subtle",
-      menuColor: "default",
-      radius: "default",
-      size: 100,
-      custom: false,
-      template: "next",
-    }
-  }
-
-  const searchParams = new URLSearchParams(window.location.search)
-  return {
-    base: (searchParams.get("base") ||
-      "radix") as DesignSystemSearchParams["base"],
-    iconLibrary: (searchParams.get("iconLibrary") ||
-      "lucide") as DesignSystemSearchParams["iconLibrary"],
-    theme: (searchParams.get("theme") ||
-      "neutral") as DesignSystemSearchParams["theme"],
-    style: (searchParams.get("style") ||
-      "vega") as DesignSystemSearchParams["style"],
-    font: (searchParams.get("font") ||
-      "inter") as DesignSystemSearchParams["font"],
-    item: searchParams.get("item") || "cover-example",
-    baseColor: (searchParams.get("baseColor") ||
-      "neutral") as DesignSystemSearchParams["baseColor"],
-    menuAccent: (searchParams.get("menuAccent") ||
-      "subtle") as DesignSystemSearchParams["menuAccent"],
-    menuColor: (searchParams.get("menuColor") ||
-      "default") as DesignSystemSearchParams["menuColor"],
-    radius: (searchParams.get("radius") ||
-      "default") as DesignSystemSearchParams["radius"],
-    size: parseInt(searchParams.get("size") || "100"),
-    custom: (searchParams.get("custom") || "false") === "true",
-    template: (searchParams.get("template") ||
-      "next") as DesignSystemSearchParams["template"],
-  }
-}
-
-const designSystemStore = createIframeSyncStore(
-  MESSAGE_TYPE,
-  getInitialValues()
-)
-
-export function useDesignSystemSync() {
-  const [urlParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-  })
-
-  const keys = Object.keys(
-    designSystemSearchParams
-  ) as (keyof DesignSystemSearchParams)[]
-
-  return useIframeSyncAll(designSystemStore, keys, urlParams)
-}
-
-export function useDesignSystemParam<K extends keyof DesignSystemSearchParams>(
-  key: K
-) {
-  const [urlParams] = useQueryStates(designSystemSearchParams, {
-    shallow: false,
-  })
-
-  return useIframeSyncValue(designSystemStore, key, urlParams[key])
-}

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

@@ -1,8 +1,14 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client"
 
 import * as React from "react"
 
+import type { DesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+type ParentToIframeMessage = {
+  type: "design-system-params"
+  data: DesignSystemSearchParams
+}
+
 export const isInIframe = () => {
   if (typeof window === "undefined") {
     return false
@@ -10,157 +16,21 @@ export const isInIframe = () => {
   return window.self !== window.top
 }
 
-export function createIframeSyncStore<T extends Record<string, any>>(
-  messageType: string,
-  defaultValues: T
-) {
-  const store = new Map<keyof T, any>()
-  const listeners = new Map<keyof T, Set<() => void>>()
-
-  if (typeof window !== "undefined") {
-    Object.entries(defaultValues).forEach(([key, value]) => {
-      store.set(key as keyof T, value)
-    })
-  }
-
-  if (typeof window !== "undefined" && isInIframe()) {
-    window.addEventListener("message", (event: MessageEvent) => {
-      if (event.data.type === messageType && event.data.params) {
-        Object.keys(event.data.params).forEach((key) => {
-          const newValue = event.data.params[key]
-          const oldValue = store.get(key as keyof T)
-
-          if (newValue !== oldValue) {
-            store.set(key as keyof T, newValue)
-
-            const keyListeners = listeners.get(key as keyof T)
-            if (keyListeners) {
-              keyListeners.forEach((listener) => listener())
-            }
-          }
-        })
-      }
-    })
-  }
-
-  return {
-    store,
-    listeners,
-    subscribe(key: keyof T, callback: () => void) {
-      if (!isInIframe()) return () => {}
-
-      if (!listeners.has(key)) {
-        listeners.set(key, new Set())
-      }
-      const keyListeners = listeners.get(key)!
-      keyListeners.add(callback)
-
-      return () => {
-        keyListeners.delete(callback)
-        if (keyListeners.size === 0) {
-          listeners.delete(key)
-        }
-      }
-    },
-    subscribeAll(keys: (keyof T)[], callback: () => void) {
-      if (!isInIframe()) return () => {}
-
-      keys.forEach((key) => {
-        if (!listeners.has(key)) {
-          listeners.set(key, new Set())
-        }
-        listeners.get(key)!.add(callback)
-      })
-
-      return () => {
-        keys.forEach((key) => {
-          const keyListeners = listeners.get(key)
-          if (keyListeners) {
-            keyListeners.delete(callback)
-            if (keyListeners.size === 0) {
-              listeners.delete(key)
-            }
-          }
-        })
-      }
-    },
-    get(key: keyof T) {
-      return store.get(key) as T[keyof T]
-    },
-    getAll() {
-      const result = {} as T
-      store.forEach((value, key) => {
-        result[key as keyof T] = value
-      })
-      return result
-    },
-  }
-}
-
-export function useIframeSyncValue<T>(
-  store: ReturnType<typeof createIframeSyncStore<any>>,
-  key: string,
-  urlValue: T
-) {
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      return store.subscribe(key, callback)
-    },
-    [store, key]
-  )
-
-  const getSnapshot = React.useCallback(() => {
-    if (!isInIframe()) {
-      return urlValue
-    }
-    return store.get(key) as T
-  }, [store, key, urlValue])
-
-  const getServerSnapshot = React.useCallback(() => {
-    return urlValue
-  }, [urlValue])
-
-  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}
-
-export function useIframeSyncAll<T extends Record<string, any>>(
-  store: ReturnType<typeof createIframeSyncStore<T>>,
-  keys: (keyof T)[],
-  urlValues: T
-) {
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      return store.subscribeAll(keys, callback)
-    },
-    [store, keys]
-  )
-
-  const getSnapshot = React.useCallback(() => {
-    if (!isInIframe()) {
-      return urlValues
-    }
-    return store.getAll()
-  }, [store, urlValues])
-
-  const getServerSnapshot = React.useCallback(() => {
-    return urlValues
-  }, [urlValues])
-
-  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
-}
-
-export function useParentMessageListener<T>(
-  messageType: string,
-  onMessage: (data: T) => void
+export function useIframeMessageListener<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
+  messageType: MessageType,
+  onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
 ) {
   React.useEffect(() => {
-    if (isInIframe()) {
+    if (!isInIframe()) {
       return
     }
 
     const handleMessage = (event: MessageEvent) => {
       if (event.data.type === messageType) {
-        onMessage(event.data)
+        onMessage(event.data.data)
       }
     }
 
@@ -171,33 +41,22 @@ export function useParentMessageListener<T>(
   }, [messageType, onMessage])
 }
 
-export function sendToIframe(
+export function sendToIframe<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
   iframe: HTMLIFrameElement | null,
-  messageType: string,
-  data: any
+  messageType: MessageType,
+  data: Extract<Message, { type: MessageType }>["data"]
 ) {
-  if (!iframe || !iframe.contentWindow) {
+  if (!iframe?.contentWindow) {
     return
   }
 
   iframe.contentWindow.postMessage(
     {
       type: messageType,
-      ...data,
-    },
-    "*"
-  )
-}
-
-export function sendToParent(messageType: string, data: any) {
-  if (!isInIframe()) {
-    return
-  }
-
-  window.parent.postMessage(
-    {
-      type: messageType,
-      ...data,
+      data,
     },
     "*"
   )

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

@@ -1,9 +1,13 @@
+import { useQueryStates } from "nuqs"
 import {
-  createSearchParamsCache,
+  createLoader,
+  createSerializer,
   parseAsBoolean,
   parseAsInteger,
   parseAsString,
   parseAsStringLiteral,
+  type inferParserType,
+  type Options,
 } from "nuqs/server"
 
 import {
@@ -28,11 +32,11 @@ import {
 } from "@/registry/config"
 import { FONTS } from "@/app/(create)/lib/fonts"
 
-export const designSystemSearchParams = {
+const designSystemSearchParams = {
   base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
     DEFAULT_CONFIG.base
   ),
-  item: parseAsString.withDefault("preview"),
+  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
   iconLibrary: parseAsStringLiteral<IconLibraryName>(
     Object.values(iconLibraries).map((i) => i.name)
   ).withDefault(DEFAULT_CONFIG.iconLibrary),
@@ -57,19 +61,30 @@ export const designSystemSearchParams = {
   radius: parseAsStringLiteral<RadiusValue>(
     RADII.map((r) => r.name)
   ).withDefault("default"),
-  template: parseAsStringLiteral<"next" | "start" | "vite">([
+  template: parseAsStringLiteral([
     "next",
     "start",
     "vite",
-  ]).withDefault("next"),
+  ] as const).withDefault("next"),
   size: parseAsInteger.withDefault(100),
   custom: parseAsBoolean.withDefault(false),
 }
 
-export const designSystemSearchParamsCache = createSearchParamsCache(
+export const loadDesignSystemSearchParams = createLoader(
   designSystemSearchParams
 )
 
-export type DesignSystemSearchParams = Awaited<
-  ReturnType<typeof designSystemSearchParamsCache.parse>
+export const serializeDesignSystemSearchParams = createSerializer(
+  designSystemSearchParams
+)
+
+export const useDesignSystemSearchParams = (options: Options = {}) =>
+  useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+    ...options,
+  })
+
+export type DesignSystemSearchParams = inferParserType<
+  typeof designSystemSearchParams
 >

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

@@ -117,6 +117,8 @@ function DropdownMenuCheckboxes() {
               lucide="UserIcon"
               tabler="IconUser"
               hugeicons="UserIcon"
+              phosphor="UserIcon"
+              remixicon="RiUserLine"
             />
             Profile
           </DropdownMenuItem>
@@ -125,6 +127,8 @@ function DropdownMenuCheckboxes() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -133,6 +137,8 @@ function DropdownMenuCheckboxes() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
+              remixicon="RiSettings3Line"
             />
             Settings
           </DropdownMenuItem>
@@ -167,6 +173,8 @@ function DropdownMenuCheckboxes() {
               lucide="LogOutIcon"
               tabler="IconLogout"
               hugeicons="LogoutIcon"
+              phosphor="SignOutIcon"
+              remixicon="RiLogoutBoxLine"
             />
             Sign Out
           </DropdownMenuItem>
@@ -222,6 +230,8 @@ function DropdownMenuWithAvatar() {
             lucide="ChevronsUpDownIcon"
             tabler="IconChevronsUpDown"
             hugeicons="ChevronUpDownIcon"
+            phosphor="CaretUpDownIcon"
+            remixicon="RiExpandUpDownLine"
             className="text-muted-foreground ml-auto"
           />
         </Button>
@@ -251,6 +261,8 @@ function DropdownMenuWithAvatar() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
+              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -262,6 +274,8 @@ function DropdownMenuWithAvatar() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
+              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -270,6 +284,8 @@ function DropdownMenuWithAvatar() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -278,6 +294,8 @@ function DropdownMenuWithAvatar() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
+              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -288,6 +306,8 @@ function DropdownMenuWithAvatar() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
+            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -341,6 +361,8 @@ function DropdownMenuAvatarOnly() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
+              remixicon="RiSparklingLine"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -352,6 +374,8 @@ function DropdownMenuAvatarOnly() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
+              remixicon="RiVerifiedBadgeLine"
             />
             Account
           </DropdownMenuItem>
@@ -360,6 +384,8 @@ function DropdownMenuAvatarOnly() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
+              remixicon="RiBankCardLine"
             />
             Billing
           </DropdownMenuItem>
@@ -368,6 +394,8 @@ function DropdownMenuAvatarOnly() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
+              remixicon="RiNotification3Line"
             />
             Notifications
           </DropdownMenuItem>
@@ -378,6 +406,8 @@ function DropdownMenuAvatarOnly() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
+            remixicon="RiLogoutBoxLine"
           />
           Sign Out
         </DropdownMenuItem>
@@ -395,6 +425,8 @@ function DropdownMenuIconColor() {
             lucide="MoreHorizontalIcon"
             tabler="IconDots"
             hugeicons="MoreHorizontalCircle01Icon"
+            phosphor="DotsThreeOutlineIcon"
+            remixicon="RiMoreLine"
           />
           <span className="sr-only">Toggle menu</span>
         </Button>
@@ -406,6 +438,8 @@ function DropdownMenuIconColor() {
               lucide="PencilIcon"
               tabler="IconPencil"
               hugeicons="EditIcon"
+              phosphor="PencilIcon"
+              remixicon="RiPencilLine"
             />
             Edit
           </DropdownMenuItem>
@@ -414,6 +448,8 @@ function DropdownMenuIconColor() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="ShareIcon"
+              phosphor="ShareIcon"
+              remixicon="RiShareLine"
             />
             Share
           </DropdownMenuItem>
@@ -423,6 +459,8 @@ function DropdownMenuIconColor() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="DeleteIcon"
+              phosphor="TrashIcon"
+              remixicon="RiDeleteBinLine"
             />
             Delete
           </DropdownMenuItem>

apps/v4/app/layout.tsx

@@ -91,9 +91,11 @@ export default function RootLayout({
         <ThemeProvider>
           <LayoutProvider>
             <ActiveThemeProvider>
-              <NuqsAdapter>{children}</NuqsAdapter>
+              <NuqsAdapter>
+                {children}
+                <Toaster position="top-center" />
+              </NuqsAdapter>
               <TailwindIndicator />
-              <Toaster position="top-center" />
               <Analytics />
             </ActiveThemeProvider>
           </LayoutProvider>

apps/v4/components/color-format-selector.tsx

@@ -40,7 +40,7 @@ export function ColorFormatSelector({
         <span className="font-medium">Format: </span>
         <span className="text-muted-foreground font-mono">{format}</span>
       </SelectTrigger>
-      <SelectContent align="end" className="rounded-xl">
+      <SelectContent align="end" position="popper" className="rounded-xl">
         {Object.entries(formats).map(([format, value]) => (
           <SelectItem
             key={format}

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/docs-copy-page.tsx

@@ -87,6 +87,70 @@ const menuItems = {
       Open in Claude
     </a>
   ),
+  scira: (url: string) => (
+    <a
+      href={getPromptUrl("https://scira.ai/", url)}
+      target="_blank"
+      className="m-0 p-0"
+    >
+      <svg
+        width="910"
+        height="934"
+        viewBox="0 0 910 934"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="8"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="8"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+          stroke="currentColor"
+          strokeWidth="20"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+          stroke="currentColor"
+          strokeWidth="20"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="8"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeWidth="8"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+          stroke="currentColor"
+          strokeWidth="30"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      Open in Scira
+    </a>
+  ),
 }
 
 export function DocsCopyPage({ page, url }: { page: string; url: string }) {

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

@@ -30,6 +30,8 @@
     "@hookform/resolvers": "^3.10.0",
     "@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",
@@ -100,7 +102,7 @@
     "rehype-pretty-code": "^0.14.1",
     "rimraf": "^6.0.1",
     "server-only": "^0.0.1",
-    "shadcn": "3.6.1",
+    "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,108 +1,686 @@
-{
-  "@8bitcn": "https://8bitcn.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",
-  "@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",
-  "@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",
-  "@magicui": "https://magicui.design/r/{name}.json",
-  "@magicui-pro": "https://pro.magicui.design/registry/{name}",
-  "@motion-primitives": "https://motion-primitives.com/c/{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",
-  "@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-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",
-  "@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",
-  "@tour": "https://onboarding-tour.vercel.app/r/{name}.json",
-  "@tb-blocks": "https://tailwindbuilder.ai/r/blocks/{name}.json",
-  "@ui-layouts": "https://ui-layouts.com/r/{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          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          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        />\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      />\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        />\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            />\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      />\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          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\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          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\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          />\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        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        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        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      />\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                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          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/scroll-area.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className=\"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none\"\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"rounded-none bg-border relative flex-1\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"rounded-none bg-border relative flex-1\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\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            />\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"
     }
   ],