shapes-ui 0.4.1 → 0.5.0

package/examples/toolbar-input-link.tsx

@@ -0,0 +1,35 @@
+import { Search } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator,
+} from "@/components/ui/toolbar";
+
+export default function ToolbarInputLink() {
+  return (
+    <Toolbar className="w-full max-w-md justify-start rounded-lg">
+      <ToolbarButton
+        render={
+          <Toggle aria-label="Search" size={"sm"}>
+            <Search className="size-4" />
+          </Toggle>
+        }
+      />
+
+      <ToolbarSeparator orientation="vertical" />
+
+      <ToolbarInput aria-label="Search query" placeholder="Search in document" className={"w-72"} />
+
+      <ToolbarLink
+        href="#"
+        className="ml-auto rounded px-2 py-1 text-xs text-muted-foreground no-underline hover:text-foreground"
+      >
+        Edited 2m ago
+      </ToolbarLink>
+    </Toolbar>
+  );
+}

package/examples/toolbar-menu.tsx

@@ -0,0 +1,53 @@
+import { ChevronDown, Type, PencilRuler } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "@/components/ui/menu";
+import { Toggle } from "@/components/ui/toggle";
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "@/components/ui/toolbar";
+
+export default function ToolbarMenu() {
+  return (
+    <Toolbar className="w-full max-w-md justify-start rounded-lg">
+      <ToolbarGroup>
+        <ToolbarButton
+          render={
+            <Toggle aria-label="Bold" size={"sm"}>
+              B
+            </Toggle>
+          }
+        />
+        <ToolbarButton
+          render={
+            <Toggle aria-label="Italic" size={"sm"}>
+              I
+            </Toggle>
+          }
+        />
+      </ToolbarGroup>
+
+      <ToolbarSeparator orientation="vertical" className="mx-1 h-5" />
+
+      <Menu>
+        <ToolbarButton
+          render={<MenuTrigger render={<Button variant="ghost" size="sm" />} />}
+          className="h-7 min-w-24 justify-between rounded-md px-2"
+        >
+          Insert
+          <ChevronDown className="size-3.5" />
+        </ToolbarButton>
+        <MenuPopup>
+          <MenuItem>
+            <Type />
+            Heading
+          </MenuItem>
+          <MenuItem>
+            <PencilRuler />
+            Code Block
+          </MenuItem>
+          <MenuSeparator />
+          <MenuItem>Divider</MenuItem>
+        </MenuPopup>
+      </Menu>
+    </Toolbar>
+  );
+}

package/examples/tooltip-demo.tsx

@@ -0,0 +1,48 @@
+import { HelpCircle, Info, AlertCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipPopup, TooltipProvider } from "@/components/ui/tooltip";
+
+export default function TooltipDemo() {
+  return (
+    <TooltipProvider delay={0}>
+      <div className="flex gap-2">
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <Info className="size-4" />
+              </Button>
+            }
+            aria-label="Information"
+          />
+          <TooltipPopup>Learn more about this feature</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <HelpCircle className="size-4" />
+              </Button>
+            }
+            aria-label="Help"
+          />
+          <TooltipPopup side="top">Need help? Click for details</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <AlertCircle className="size-4" />
+              </Button>
+            }
+            aria-label="Warning"
+          />
+          <TooltipPopup side="bottom">Warning: This action is final</TooltipPopup>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}

package/examples/tooltip-positions.tsx

@@ -0,0 +1,60 @@
+import { Info } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipPopup, TooltipProvider } from "@/components/ui/tooltip";
+
+export default function TooltipPositions() {
+  return (
+    <TooltipProvider delay={0}>
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <Info className="size-4" />
+              </Button>
+            }
+            aria-label="Top tooltip"
+          />
+          <TooltipPopup side="top">Top position</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <Info className="size-4" />
+              </Button>
+            }
+            aria-label="Right tooltip"
+          />
+          <TooltipPopup side="right">Right position</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <Info className="size-4" />
+              </Button>
+            }
+            aria-label="Bottom tooltip"
+          />
+          <TooltipPopup side="bottom">Bottom position</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button variant="outline" size="icon">
+                <Info className="size-4" />
+              </Button>
+            }
+            aria-label="Left tooltip"
+          />
+          <TooltipPopup side="left">Left position</TooltipPopup>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shapes-ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/abbbdab/shapes-ui.git"
@@ -18,11 +18,11 @@
     "@clack/prompts": "^1.0.1",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "^0.9.5",
-    "@tanstack/react-router": "^1.159.14",
-    "@tanstack/react-router-devtools": "^1.159.14",
-    "@tanstack/react-router-ssr-query": "^1.159.14",
-    "@tanstack/react-start": "^1.159.14",
-    "@tanstack/router-plugin": "^1.159.14",
+    "@tanstack/react-router": "^1.160.2",
+    "@tanstack/react-router-devtools": "^1.160.2",
+    "@tanstack/react-router-ssr-query": "^1.160.2",
+    "@tanstack/react-start": "^1.160.2",
+    "@tanstack/router-plugin": "^1.160.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "commander": "^14.0.3",
@@ -36,7 +36,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rehype-pretty-code": "^0.14.1",
-    "tailwind-merge": "^3.4.0",
+    "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "vite-tsconfig-paths": "^6.1.1",
@@ -62,7 +62,7 @@
     "add": "^2.0.6",
     "jsdom": "^28.1.0",
     "oxfmt": "^0.32.0",
-    "oxlint": "^1.47.0",
+    "oxlint": "^1.48.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^3.22.0",
     "tsup": "^8.5.1",

package/public/r/drawer.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "drawer.tsx",
-      "content": "\"use client\";\n\nimport { DrawerPreview as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { XIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction DrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {\n  return <DrawerPrimitive.Provider data-slot=\"drawer-provider\" {...props} />;\n}\n\nfunction DrawerIndentBackground({ className, ...props }: DrawerPrimitive.IndentBackground.Props) {\n  return (\n    <DrawerPrimitive.IndentBackground\n      data-slot=\"drawer-indent-background\"\n      className={cn(\n        \"pointer-events-none fixed inset-0 z-40 bg-black/5 opacity-0 transition-opacity duration-200 data-[active]:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props) {\n  return (\n    <DrawerPrimitive.Indent\n      data-slot=\"drawer-indent\"\n      className={cn(\n        \"relative z-0 transition-transform duration-200 ease-out data-[active]:translate-y-1 data-[active]:scale-[0.98]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-backdrop\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/50 opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] duration-150 [--backdrop-opacity:1] data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerPopup({\n  className,\n  children,\n  position = \"right\",\n  showCloseButton = true,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DrawerPortal>\n      <DrawerBackdrop />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        data-position={position}\n        className={cn(\n          \"pointer-events-none fixed inset-0 z-50 flex data-[position=bottom]:items-end data-[position=left]:items-stretch data-[position=left]:justify-start data-[position=right]:items-stretch data-[position=right]:justify-end data-[position=top]:items-start\",\n        )}\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-popup\"\n          data-position={position}\n          className={cn(\n            \"pointer-events-auto grid w-full gap-4 overflow-y-auto overscroll-contain bg-background p-6 text-sm text-foreground shadow-lg ring-1 ring-foreground/10 duration-150 outline-none data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none data-swiping:select-none data-[position=bottom]:max-h-dvh data-[position=bottom]:w-dvw data-[position=bottom]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))] data-[position=bottom]:slide-in-from-bottom-10 data-[position=left]:h-dvh data-[position=left]:w-[min(24rem,calc(100vw-1rem))] data-[position=left]:translate-x-(--drawer-swipe-movement-x)  data-[position=left]:slide-in-from-left-10 data-[position=right]:h-dvh data-[position=right]:w-[min(24rem,calc(100vw-1rem))] data-[position=right]:translate-x-(--drawer-swipe-movement-x)  data-[position=right]:slide-in-from-right-10 data-[position=top]:max-h-dvh data-[position=top]:w-dvw data-[position=top]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))]  data-[position=top]:slide-in-from-top-10\",\n\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n                  <XIcon />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              }\n            />\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"drawer-header\" className={cn(\"flex flex-col gap-2\", className)} {...props} />\n  );\n}\n\nfunction DrawerFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DrawerPrimitive.Close render={<Button variant=\"outline\">Close</Button>} />\n      )}\n    </div>\n  );\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DrawerProvider,\n  DrawerIndentBackground,\n  DrawerIndent,\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerClose,\n  DrawerBackdrop,\n  DrawerPopup,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n",
+      "content": "\"use client\";\n\nimport { DrawerPreview as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { XIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction DrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {\n  return <DrawerPrimitive.Provider data-slot=\"drawer-provider\" {...props} />;\n}\n\nfunction DrawerIndentBackground({ className, ...props }: DrawerPrimitive.IndentBackground.Props) {\n  return (\n    <DrawerPrimitive.IndentBackground\n      data-slot=\"drawer-indent-background\"\n      className={cn(\n        \"pointer-events-none fixed inset-0 z-40 bg-black/5 opacity-0 transition-opacity duration-200 data-[active]:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerIndent({ className, ...props }: DrawerPrimitive.Indent.Props) {\n  return (\n    <DrawerPrimitive.Indent\n      data-slot=\"drawer-indent\"\n      className={cn(\n        \"relative z-0 transition-transform duration-200 ease-out data-[active]:translate-y-1 data-[active]:scale-[0.98]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Drawer({ ...props }: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-backdrop\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/50 opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))] duration-150 [--backdrop-opacity:1] data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerPopup({\n  className,\n  children,\n  position = \"right\",\n  showCloseButton = true,\n  ...props\n}: DrawerPrimitive.Popup.Props & {\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  showCloseButton?: boolean;\n}) {\n  return (\n    <DrawerPortal>\n      <DrawerBackdrop />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        data-position={position}\n        className={cn(\n          \"pointer-events-none fixed inset-0 z-50 flex data-[position=bottom]:items-end data-[position=left]:items-stretch data-[position=left]:justify-start data-[position=right]:items-stretch data-[position=right]:justify-end data-[position=top]:items-start\",\n        )}\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-popup\"\n          data-position={position}\n          className={cn(\n            \"pointer-events-auto grid w-full gap-4 overflow-y-auto overscroll-contain bg-background p-6 text-sm text-foreground shadow-lg ring-1 ring-foreground/10 duration-150 outline-none data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none data-swiping:select-none data-[position=bottom]:max-h-dvh data-[position=bottom]:w-dvw data-[position=bottom]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))] data-[position=bottom]:slide-in-from-bottom-10 data-[position=bottom]:[data-ending-style]:slide--from-bottom-10 data-[position=left]:h-dvh data-[position=left]:w-[min(24rem,calc(100vw-1rem))] data-[position=left]:translate-x-(--drawer-swipe-movement-x)  data-[position=left]:slide-in-from-left-10 data-[position=right]:h-dvh data-[position=right]:w-[min(24rem,calc(100vw-1rem))] data-[position=right]:translate-x-(--drawer-swipe-movement-x)  data-[position=right]:slide-in-from-right-10 data-[position=top]:max-h-dvh data-[position=top]:w-dvw data-[position=top]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))]  data-[position=top]:slide-in-from-top-10 \",\n\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DrawerPrimitive.Close\n              data-slot=\"drawer-close\"\n              render={\n                <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n                  <XIcon />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              }\n            />\n          )}\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"drawer-header\" className={cn(\"flex flex-col gap-2\", className)} {...props} />\n  );\n}\n\nfunction DrawerFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DrawerPrimitive.Close render={<Button variant=\"outline\">Close</Button>} />\n      )}\n    </div>\n  );\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  DrawerProvider,\n  DrawerIndentBackground,\n  DrawerIndent,\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerClose,\n  DrawerBackdrop,\n  DrawerPopup,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n",
       "type": "registry:ui"
     }
   ]

package/public/r/field.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "field.tsx",
-      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst fieldVariants = cva(\"group/field flex gap-2 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field-root\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 text-sm leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldControl({ className, ...props }: FieldPrimitive.Control.Props) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"flex h-9 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm transition-colors\",\n        \"placeholder:text-muted-foreground\",\n        \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"group-data-invalid/field:border-destructive group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: FieldPrimitive.Error.Props & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n    if (!errors?.length) {\n      return null;\n    }\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n}\n\nfunction FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldValidity({ ...props }: FieldPrimitive.Validity.Props) {\n  return <FieldPrimitive.Validity {...props} />;\n}\n\nexport { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldItem, FieldValidity };\n",
+      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst fieldVariants = cva(\"group/field flex gap-2 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field-root\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-1 text-sm leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldControl({ className, ...props }: FieldPrimitive.Control.Props) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"flex h-9 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm transition-colors\",\n        \"placeholder:text-muted-foreground\",\n        \"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"group-data-invalid/field:border-destructive group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({ className, ...props }: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: FieldPrimitive.Error.Props & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n    if (!errors?.length) {\n      return null;\n    }\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n}\n\nfunction FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FieldValidity({ ...props }: FieldPrimitive.Validity.Props) {\n  return <FieldPrimitive.Validity {...props} />;\n}\n\nexport { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldItem, FieldValidity };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/menubar.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "menubar.tsx",
-      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      className={cn(\"flex h-9 items-center gap-0.5 border bg-background p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Menu(props: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root {...props} />;\n}\n\nfunction MenuTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {\n  return (\n    <MenuPrimitive.Trigger\n      className={cn(\"h-full px-4 text-sm hover:bg-accent\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenuPopup({\n  className,\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 10,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, \"align\" | \"sideOffset\" | \"side\" | \"alignOffset\">) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        sideOffset={sideOffset}\n        side={side}\n        alignOffset={alignOffset}\n      >\n        <MenuPrimitive.Popup\n          className={cn(\n            \"text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction MenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"-menu-group\" {...props} />;\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-[inset]:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\";\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/-menu-item relative flex cursor-default items-center gap-1.5 px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"-menu-sub\" {...props} />;\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"-menu-radio-group\" {...props} />;\n}\n\nfunction MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"-menu-separator\"\n      className={cn(\"-mx-1 my-1 h-full w-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Menubar,\n  Menu,\n  MenuTrigger,\n  MenuPopup,\n  MenuGroup,\n  MenuGroupLabel,\n  MenuItem,\n  MenuSub,\n  MenuSubTrigger,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n};\n",
+      "content": "\"use client\";\n\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\";\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\";\nimport { ChevronRightIcon, CheckIcon } from \"lucide-react\";\nimport { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Menu(props: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"menu\" {...props} />;\n}\n\nfunction MenuTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {\n  return (\n    <MenuPrimitive.Trigger\n      className={cn(\"h-full rounded px-4 text-sm hover:bg-accent\", className)}\n      {...props}\n    />\n  );\n}\nfunction MenuPopup({\n  className,\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 10,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<MenuPrimitive.Positioner.Props, \"align\" | \"sideOffset\" | \"side\" | \"alignOffset\">) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        align={align}\n        sideOffset={sideOffset}\n        side={side}\n        alignOffset={alignOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"menu-popup\"\n          className={cn(\n            \"text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  );\n}\n\nfunction MenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"-menu-group\" {...props} />;\n}\n\nfunction MenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean;\n  variant?: \"default\" | \"destructive\" | \"success\" | \"warning\";\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/-menu-item relative  flex cursor-default items-center gap-1.5 rounded px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=success]:text-success data-[variant=success]:focus:bg-success/10 data-[variant=success]:focus:text-success data-[variant=warning]:text-warning data-[variant=warning]:focus:bg-warning/10 data-[variant=warning]:focus:text-warning dark:data-[variant=destructive]:focus:bg-destructive/20 dark:data-[variant=success]:focus:bg-success/20 dark:data-[variant=warning]:focus:bg-warning/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction MenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"-menu-sub\" {...props} />;\n}\n\nfunction MenuSubPopup({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof MenuPopup>) {\n  return (\n    <MenuPopup\n      data-slot=\"menu-sub-content\"\n      className={cn(\n        \"text-popover-foreground w-auto min-w-24 rounded-md bg-popup p-1 shadow-lg ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  );\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean;\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-1.5 px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nfunction MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />;\n}\n\nfunction MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  );\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MenuShortcut({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span className={cn(\"ml-auto text-xs font-thin text-muted-foreground\", className)} {...props} />\n  );\n}\n\nexport {\n  Menubar,\n  Menu,\n  MenuTrigger,\n  MenuPopup,\n  MenuGroup,\n  MenuLabel,\n  MenuItem,\n  MenuSub,\n  MenuSubPopup,\n  MenuSubTrigger,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n};\n",
       "type": "registry:ui"
     }
   ]

package/public/r/meter.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "meter.tsx",
-      "content": "\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Meter({\n  label,\n  showLabel,\n  showValue,\n  className,\n  ...props\n}: MeterPrimitive.Root.Props & {\n  showValue?: boolean;\n  showLabel?: boolean;\n  label?: string;\n}) {\n  return (\n    <MeterPrimitive.Root className={cn(\"grid w-80 grid-cols-2 gap-1\", className)} {...props}>\n      {showLabel && label && <MeterLabel>{label}</MeterLabel>}\n      {showValue && <MeterValue />}\n      <MeterTrack>\n        <MeterIndicator />\n      </MeterTrack>\n    </MeterPrimitive.Root>\n  );\n}\n\nfunction MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label className={cn(\"text-xs font-bold text-primary\", className)} {...props} />\n  );\n}\n\nfunction MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value className={cn(\"text-right text-xs text-primary\", className)} {...props} />\n  );\n}\n\nfunction MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {\n  return (\n    <MeterPrimitive.Track\n      className={cn(\"col-span-2 block h-2 overflow-hidden bg-primary/20\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MeterIndicator({ className, ...props }: MeterPrimitive.Indicator.Props) {\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\"block rounded-r-xl bg-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Meter, MeterLabel, MeterValue, MeterTrack, MeterIndicator };\n",
+      "content": "\"use client\";\n\nimport { Meter as MeterPrimitive } from \"@base-ui/react/meter\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Meter({ className, ...props }: MeterPrimitive.Root.Props) {\n  return <MeterPrimitive.Root className={cn(\"grid grid-cols-2 gap-1\", className)} {...props} />;\n}\n\nfunction MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {\n  return (\n    <MeterPrimitive.Label\n      className={cn(\"col-span-1 text-xs font-bold text-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {\n  return (\n    <MeterPrimitive.Value\n      className={cn(\"col-span-1 text-right text-xs text-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {\n  return (\n    <MeterPrimitive.Track\n      className={cn(\"col-span-2 h-2 w-full overflow-hidden rounded-full bg-primary/20\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction MeterIndicator({ className, ...props }: MeterPrimitive.Indicator.Props) {\n  return (\n    <MeterPrimitive.Indicator\n      className={cn(\"block rounded-full bg-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Meter, MeterLabel, MeterValue, MeterTrack, MeterIndicator };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/navigation-menu.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "navigation-menu.tsx",
-      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport type React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NavigationMenu(props: NavigationMenuPrimitive.Root.Props) {\n  return <NavigationMenuPrimitive.Root {...props} />;\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      className={cn(\"flex items-center gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return <NavigationMenuPrimitive.Item className={cn(className)} {...props} />;\n}\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      className={cn(\"group h-full px-3 py-1.5 text-sm font-medium hover:bg-accent/60\", className)}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"ml-1 inline-block size-3 transition-all ease-in group-data-popup-open:rotate-180\" />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent(props: NavigationMenuPrimitive.Content.Props) {\n  return <NavigationMenuPrimitive.Content {...props} />;\n}\n\nfunction NavigationMenuLink(props: NavigationMenuPrimitive.Link.Props) {\n  return <NavigationMenuPrimitive.Link {...props} />;\n}\n\nfunction NavigationMenuPopup({\n  align = \"start\",\n  alignOffset,\n  side = \"bottom\",\n  sideOffset = 8,\n  className,\n  renderViewport = true,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Popup.Props &\n  Pick<\n    NavigationMenuPrimitive.Positioner.Props,\n    \"sideOffset\" | \"alignOffset\" | \"align\" | \"side\"\n  > & {\n    renderViewport?: boolean;\n  }) {\n  return (\n    <NavigationMenuPrimitive.Portal keepMounted>\n      <NavigationMenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <NavigationMenuPrimitive.Popup\n          className={cn(\"bg-popup p-2 shadow outline outline-border\", className)}\n          {...props}\n        >\n          {children}\n          {renderViewport && <NavigationMenuViewPort />}\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\nfunction NavigationMenuViewPort(props: NavigationMenuPrimitive.Viewport.Props) {\n  return <NavigationMenuPrimitive.Viewport {...props} />;\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuPopup,\n  NavigationMenuViewPort,\n};\n",
+      "content": "\"use client\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NavigationMenu({\n  className,\n  delay = 50,\n  closeDelay = 50,\n  orientation = \"horizontal\",\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      delay={delay}\n      closeDelay={closeDelay}\n      orientation={orientation}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\"group flex flex-1 list-none items-center justify-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(\n        \"group/navigation-menu-trigger relative inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[popup-open]:bg-muted/50 data-[popup-open]:hover:bg-muted\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPrimitive.Icon\n        render={\n          <ChevronDownIcon\n            className=\"relative top-px ml-1 size-3 transition-transform duration-300 group-data-[popup-open]/navigation-menu-trigger:rotate-180\"\n            aria-hidden=\"true\"\n          />\n        }\n      />\n    </NavigationMenuPrimitive.Trigger>\n  );\n}\n\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"flex h-full w-auto p-1 transition-[opacity,transform,translate] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-1/2 data-[ending-style]:data-[activation-direction=right]:-translate-x-1/2 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:-translate-x-1/2 data-[starting-style]:data-[activation-direction=right]:translate-x-1/2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuPopup({\n  className,\n  sideOffset = 10,\n  align = \"start\",\n  collisionPadding = 10,\n  side = \"bottom\",\n  anchor,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Popup.Props &\n  Pick<\n    NavigationMenuPrimitive.Positioner.Props,\n    \"sideOffset\" | \"align\" | \"collisionPadding\" | \"side\" | \"anchor\"\n  >) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        collisionPadding={collisionPadding}\n        anchor={anchor}\n        className={\n          \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none\"\n        }\n      >\n        <NavigationMenuPrimitive.Popup\n          {...props}\n          data-slot=\"navigation-menu-popup\"\n          className={cn(\n            \"relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popup text-popup-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-in data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n            className,\n          )}\n        >\n          {children || <NavigationMenuViewport />}\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  );\n}\n\nfunction NavigationMenuViewport({ className, ...props }: NavigationMenuPrimitive.Viewport.Props) {\n  return (\n    <NavigationMenuPrimitive.Viewport\n      data-slot=\"navigation-menu-viewport\"\n      className={cn(\"relative size-full overflow-hidden\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col items-start gap-1 rounded-md p-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-[active]:bg-muted/50 data-[active]:hover:bg-muted data-[active]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NavigationMenuArrow({ className, ...props }: NavigationMenuPrimitive.Arrow.Props) {\n  return (\n    <NavigationMenuPrimitive.Arrow\n      data-slot=\"navigation-menu-arrow\"\n      className={cn(\n        \"transition-transform duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180\",\n        className,\n      )}\n      {...props}\n    >\n      <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n        <path\n          d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n          className=\"fill-popup\"\n        />\n        <path\n          d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n          className=\"fill-foreground/10\"\n        />\n      </svg>\n    </NavigationMenuPrimitive.Arrow>\n  );\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuTrigger,\n  NavigationMenuContent,\n  NavigationMenuLink,\n  NavigationMenuPopup,\n  NavigationMenuViewport,\n  NavigationMenuArrow,\n};\n",
       "type": "registry:ui"
     }
   ]

package/public/r/number-field.json

@@ -5,11 +5,13 @@
     "@base-ui/react",
     "lucide-react"
   ],
-  "registryDependencies": [],
+  "registryDependencies": [
+    "input"
+  ],
   "files": [
     {
       "path": "number-field.tsx",
-      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { ChevronsLeftRightEllipsis, MinusIcon, PlusIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction NumberField({\n  label,\n  hasScrubber = false,\n  className,\n  ...props\n}: NumberFieldPrimitive.Root.Props & {\n  label?: string;\n  hasScrubber?: boolean;\n}) {\n  return (\n    <NumberFieldPrimitive.Root\n      className={cn(\"flex w-fit flex-col bg-transparent text-foreground\", className)}\n      {...props}\n    >\n      {hasScrubber && (\n        <NumberFieldScrubArea>\n          {label && (\n            <label htmlFor={props.id} className=\"text-sm font-medium\">\n              {label}\n            </label>\n          )}\n          <NumberFieldScrubAreaCursor>\n            <ChevronsLeftRightEllipsis className=\"size-4\" />\n          </NumberFieldScrubAreaCursor>\n        </NumberFieldScrubArea>\n      )}\n      <NumberFieldGroup>\n        <NumberFieldDecrement />\n        <NumberFieldInput />\n        <NumberFieldIncrement />\n      </NumberFieldGroup>\n    </NumberFieldPrimitive.Root>\n  );\n}\n\nfunction NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) {\n  return <NumberFieldPrimitive.ScrubArea className={cn(\"\", className)} {...props} />;\n}\n\nfunction NumberFieldScrubAreaCursor({\n  className,\n  ...props\n}: NumberFieldPrimitive.ScrubAreaCursor.Props) {\n  return (\n    <NumberFieldPrimitive.ScrubAreaCursor className={cn(\"text-foreground\", className)} {...props} />\n  );\n}\n\nfunction NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      className={cn(\"flex overflow-hidden border bg-transparent\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      className={cn(\n        \"flex size-9 items-center justify-center rounded-l-lg border-r hover:bg-accent\",\n        className,\n      )}\n      {...props}\n    >\n      <MinusIcon className=\"inline-flex size-4\" />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nfunction NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props) {\n  return (\n    <NumberFieldPrimitive.Increment\n      className={cn(\"flex size-9 items-center justify-center border-l hover:bg-accent\", className)}\n      {...props}\n    >\n      <PlusIcon className=\"inline-flex size-4\" />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nfunction NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      className={cn(\n        \"h-9 rounded-none text-center text-sm ring-accent outline-0 data-scrubbing:border-0 data-scrubbing:outline-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  NumberField,\n  NumberFieldScrubArea,\n  NumberFieldScrubAreaCursor,\n  NumberFieldGroup,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n};\n",
+      "content": "\"use client\";\n\nimport { NumberField as NumberFieldPrimitive } from \"@base-ui/react/number-field\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Input } from \"./input\";\n\nfunction NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) {\n  return <NumberFieldPrimitive.ScrubArea className={cn(\"\", className)} {...props} />;\n}\n\nfunction NumberFieldScrubAreaCursor({\n  className,\n  ...props\n}: NumberFieldPrimitive.ScrubAreaCursor.Props) {\n  return (\n    <NumberFieldPrimitive.ScrubAreaCursor className={cn(\"text-foreground\", className)} {...props} />\n  );\n}\n\nfunction NumberField({ className, ...props }: NumberFieldPrimitive.Root.Props) {\n  return (\n    <NumberFieldPrimitive.Root\n      data-slot=\"number-field\"\n      className={cn(\"group/number-field flex flex-col gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) {\n  return (\n    <NumberFieldPrimitive.Group\n      data-slot=\"number-field-group\"\n      className={cn(\n        \"relative inline-flex h-9 w-full items-stretch overflow-hidden rounded-lg border border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:rounded-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:border-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:outline-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:ring-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:outline-none\",\n        \"has-[>[data-slot=number-field-decrement][data-align=end]]:*:data-[slot=number-field-decrement]:border-l has-[>[data-slot=number-field-decrement][data-align=start]]:*:data-[slot=number-field-decrement]:border-r has-[>[data-slot=number-field-increment][data-align=end]]:*:data-[slot=number-field-increment]:border-l \",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction NumberFieldDecrement({\n  className,\n  align,\n  ...props\n}: NumberFieldPrimitive.Decrement.Props & { align?: \"start\" | \"end\" }) {\n  return (\n    <NumberFieldPrimitive.Decrement\n      data-slot=\"number-field-decrement\"\n      data-align={align}\n      className={cn(\n        \"px-2.5 transition-colors hover:bg-muted active:bg-accent disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <MinusIcon className=\"size-4\" />\n    </NumberFieldPrimitive.Decrement>\n  );\n}\n\nfunction NumberFieldIncrement({\n  className,\n  align,\n  ...props\n}: NumberFieldPrimitive.Increment.Props & { align?: \"start\" | \"end\" }) {\n  return (\n    <NumberFieldPrimitive.Increment\n      data-slot=\"number-field-increment\"\n      data-align={align}\n      className={cn(\n        \"px-2.5 transition-colors hover:bg-muted active:bg-accent disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <PlusIcon className=\"size-4\" />\n    </NumberFieldPrimitive.Increment>\n  );\n}\n\nfunction NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {\n  return (\n    <NumberFieldPrimitive.Input\n      data-slot=\"number-field-input\"\n      className={cn(\"text-center\", className)}\n      render={<Input />}\n      {...props}\n    />\n  );\n}\n\nexport {\n  NumberField,\n  NumberFieldScrubArea,\n  NumberFieldScrubAreaCursor,\n  NumberFieldGroup,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n};\n",
       "type": "registry:ui"
     }
   ]

package/public/r/popover.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "popover.tsx",
-      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger {...props} />;\n}\n\nfunction PopoverPopup({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 8,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<PopoverPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          className={cn(\n            \"text-popover-foreground z-50 flex w-72 flex-col gap-2.5 bg-popup p-4 text-sm ring-1 ring-foreground/10 outline-hidden duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return <PopoverPrimitive.Title className={cn(\"font-medium\", className)} {...props} />;\n}\n\nfunction PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description className={cn(\"text-muted-foreground\", className)} {...props} />\n  );\n}\n\nfunction PopoverClose({ className, ...props }: PopoverPrimitive.Close.Props) {\n  return <PopoverPrimitive.Close className={cn(\"text-sm\", className)} {...props} />;\n}\n\nexport { Popover, PopoverPopup, PopoverDescription, PopoverClose, PopoverTitle, PopoverTrigger };\n",
+      "content": "\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root {...props} />;\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger {...props} />;\n}\n\nfunction PopoverPopup({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 8,\n  anchor,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"anchor\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          className={cn(\n            \"text-popover-foreground z-50 flex w-72 flex-col gap-2.5 rounded-lg bg-popup p-4 text-sm ring-1 ring-foreground/10 outline-hidden duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return <PopoverPrimitive.Title className={cn(\"font-medium\", className)} {...props} />;\n}\n\nfunction PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description className={cn(\"text-muted-foreground\", className)} {...props} />\n  );\n}\n\nfunction PopoverClose({ className, ...props }: PopoverPrimitive.Close.Props) {\n  return <PopoverPrimitive.Close className={cn(\"text-sm\", className)} {...props} />;\n}\n\nexport { Popover, PopoverPopup, PopoverDescription, PopoverClose, PopoverTitle, PopoverTrigger };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/preview-card.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "preview-card.tsx",
-      "content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction PreviewCard(props: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root {...props} />;\n}\n\nfunction PreviewCardTrigger({ className, ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger\n      className={cn(\n        \"cursor-pointer text-accent-foreground underline decoration-1 underline-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PreviewCardPopup({\n  className,\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 6,\n  alignOffset,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, \"align\" | \"sideOffset\" | \"side\" | \"alignOffset\">) {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        sideOffset={sideOffset}\n        side={side}\n        alignOffset={alignOffset}\n      >\n        <PreviewCardPrimitive.Popup\n          className={cn(\n            \"text-popover-foreground overflow-hidden border bg-popup p-1 text-sm outline-hidden duration-25 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { PreviewCard, PreviewCardTrigger, PreviewCardPopup };\n",
+      "content": "\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction PreviewCard(props: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root {...props} />;\n}\n\nfunction PreviewCardTrigger({ className, ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger\n      className={cn(\n        \"cursor-pointer text-accent-foreground underline decoration-1 underline-offset-2\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PreviewCardPopup({\n  className,\n  align = \"center\",\n  side = \"bottom\",\n  sideOffset = 6,\n  alignOffset,\n  anchor,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, \"align\" | \"sideOffset\" | \"side\" | \"alignOffset\" | \"anchor\">) {\n  return (\n    <PreviewCardPrimitive.Portal>\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        sideOffset={sideOffset}\n        side={side}\n        alignOffset={alignOffset}\n        anchor={anchor}\n      >\n        <PreviewCardPrimitive.Popup\n          className={cn(\n            \"text-popover-foreground overflow-hidden rounded-xl border bg-popup p-1 text-sm outline-hidden duration-25 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { PreviewCard, PreviewCardTrigger, PreviewCardPopup };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/progress.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "progress.tsx",
-      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Progress({\n  label,\n  showValue,\n  className,\n  ...props\n}: ProgressPrimitive.Root.Props & {\n  label?: string;\n  showValue?: boolean;\n}) {\n  return (\n    <ProgressPrimitive.Root className={cn(\"grid grid-cols-2 gap-2\", className)} {...props}>\n      {label && <ProgressLabel>{label}</ProgressLabel>}\n      {showValue && <ProgressValue />}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  );\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\"text-right text-sm text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\"col-span-2 block h-2 overflow-hidden bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {\n  return <ProgressPrimitive.Indicator className={cn(\"h-2 bg-primary\", className)} {...props} />;\n}\n\nexport { Progress, ProgressLabel, ProgressValue, ProgressTrack, ProgressIndicator };\n",
+      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Progress({ className, ...props }: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      className={cn(\"grid grid-cols-2 gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\"text-right text-sm text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\"col-span-2 block h-2 overflow-hidden rounded-full bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props) {\n  return <ProgressPrimitive.Indicator className={cn(\"h-2 bg-primary rounded-full\", className)} {...props} />;\n}\n\nexport { Progress, ProgressLabel, ProgressValue, ProgressTrack, ProgressIndicator };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/radio.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "radio.tsx",
-      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Radio({ children, className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <label\n      className={cn(\"group flex items-center gap-2 text-sm text-foreground\", className)}\n      htmlFor={props.id}\n    >\n      <RadioPrimitive.Root\n        className={\n          \"flex size-4 items-center justify-center border border-input bg-transparent outline outline-input transition duration-50 ease-in group-hover:bg-accent/80\"\n        }\n        {...props}\n      >\n        <RadioPrimitive.Indicator\n          className={\"flex items-center justify-center data-checked:bg-primary\"}\n        >\n          <CircleIcon className=\"size-2 bg-primary\" />\n        </RadioPrimitive.Indicator>\n      </RadioPrimitive.Root>\n      {children}\n    </label>\n  );\n}\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return <RadioGroupPrimitive className={cn(\"flex flex-col gap-1\", className)} {...props} />;\n}\n\nexport { Radio, RadioGroup };\n",
+      "content": "\"use client\";\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { CircleIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Radio({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input text-primary outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:ring data-checked:ring-primary/40 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-indicator\"\n        className=\"flex size-4 items-center justify-center text-primary group-aria-invalid/radio-group-item:text-destructive\"\n      >\n        <CircleIcon className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n\nfunction RadioGroup({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: RadioGroupPrimitive.Props & {\n  orientation?: \"horizontal\" | \"vertical\";\n}) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      data-orientation={orientation}\n      className={cn(\n        \"flex h-fit gap-4 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Radio, RadioGroup };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/select.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "select.tsx",
-      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Select = SelectPrimitive.Root;\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={<ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />}\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"text-popover-foreground relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n            <CheckIcon className=\"pointer-events-none\" />\n          </span>\n        }\n      />\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectPopup,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
+      "content": "\"use client\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Select = SelectPrimitive.Root;\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={<ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />}\n      />\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction SelectPopup({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-popup\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popup text-popup-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n            <CheckIcon className=\"pointer-events-none\" />\n          </span>\n        }\n      />\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popup py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  Select,\n  SelectPopup,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n",
       "type": "registry:ui"
     }
   ]

package/public/r/slider.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "slider.tsx",
-      "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\n    [value, defaultValue, min, max],\n  );\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track className=\"relative h-1.5 grow overflow-hidden border bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\">\n          <SliderPrimitive.Indicator className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            className=\"relative block size-3.5 shrink-0 border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n",
+      "content": "\"use client\";\n\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),\n    [value, defaultValue, min, max],\n  );\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        \"data-horizontal:w-full data-vertical:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\",\n        className,\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\">\n        <SliderPrimitive.Track className=\"relative h-1.5 grow overflow-hidden rounded-full border bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1\">\n          <SliderPrimitive.Indicator className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\" />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            className=\"relative block size-3.5 shrink-0 rounded-full border border-ring bg-primary ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  );\n}\n\nexport { Slider };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/switch.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "switch.tsx",
-      "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Switch({\n  children,\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <label\n      id={props.id}\n      htmlFor={props.id}\n      className={cn(\"flex items-center gap-1.5 text-sm\", className)}\n    >\n      <SwitchPrimitive.Root\n        data-size={size}\n        className={cn(\n          \"peer group/switch relative inline-flex w-fit shrink-0 items-center border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:bg-input data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-unchecked:bg-input/80\",\n          className,\n        )}\n        {...props}\n      >\n        <SwitchPrimitive.Thumb className=\"pointer-events-none block bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground\" />\n      </SwitchPrimitive.Root>\n      {children}\n    </label>\n  );\n}\n\nexport { Switch };\n",
+      "content": "\"use client\";\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\";\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:bg-input data-[size=default]:h-[18.4px] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-unchecked:bg-input/80\",\n        className,\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  );\n}\n\nexport { Switch };\n",
       "type": "registry:ui"
     }
   ]