shapes-ui 0.4.2 → 0.5.0

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.2",
+  "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/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(\"flex flex-col gap-1\", className)} {...props}>\n      <div className=\"flex items-center justify-between\">\n        {showLabel && label && <MeterLabel>{label}</MeterLabel>}\n        {showValue && <MeterValue />}\n      </div>\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(\"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 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/number-field.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "number-field.tsx",
-      "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-border focus-within:ring-1 focus-within:ring-ring 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",
+      "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/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"
     }
   ]

package/public/r/tabs.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "tabs.tsx",
-      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, orientation = \"horizontal\", ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\"group/tabs flex gap-2 data-horizontal:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n",
+      "content": "\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, orientation = \"horizontal\", ...props }: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row data-[orientation=horizontal]:**:data-[slot=tabs-list]:h-8 data-[orientation=horizontal]:**:data-[slot=tabs-list]:flex-row data-[orientation=vertical]:**:data-[slot=tabs-list]:h-fit data-[orientation=vertical]:**:data-[slot=tabs-list]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list relative inline-flex w-max overflow-hidden rounded-2xl p-0.5 text-muted-foreground group-data-[orientation=horizontal]/tabs:items-center group-data-[orientation=horizontal]/tabs:justify-center group-data-[orientation=vertical]/tabs:items-stretch group-data-[orientation=vertical]/tabs:justify-start data-[orientation=horizontal]:items-center data-[orientation=horizontal]:justify-center data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction TabsList({\n  children,\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    >\n      {children}\n      <TabsPrimitive.Indicator\n        className={cn(\n          \"pointer-events-none absolute rounded-xl border border-input bg-card shadow-sm transition-[left,right,top,bottom,width,height,transform] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]\",\n          \"data-[orientation=horizontal]:top-(--active-tab-top) data-[orientation=horizontal]:left-(--active-tab-left) data-[orientation=horizontal]:h-(--active-tab-height) data-[orientation=horizontal]:w-(--active-tab-width)\",\n          \"data-[orientation=vertical]:top-(--active-tab-top) data-[orientation=vertical]:left-(--active-tab-left) data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-(--active-tab-width)\",\n          \"group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-foreground group-data-[variant=line]/tabs-list:shadow-none\",\n          \"group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:top-auto group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:bottom-0 group-data-[variant=line]/tabs-list:data-[orientation=horizontal]:h-0.5\",\n          \"group-data-[variant=line]/tabs-list:data-[orientation=vertical]:right-auto group-data-[variant=line]/tabs-list:data-[orientation=vertical]:left-0 group-data-[variant=line]/tabs-list:data-[orientation=vertical]:w-0.5\",\n        )}\n      />\n    </TabsPrimitive.List>\n  );\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative z-10 inline-flex h-7 flex-none items-center justify-center rounded-xl border border-transparent px-2 py-0.5 text-center text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,transform,opacity] duration-200 ease-out group-data-[orientation=vertical]/tabs:w-full group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-0 group-data-[variant=line]/tabs-list:bg-transparent hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring group-data-[variant=line]/tabs-list:focus-visible:border-transparent group-data-[variant=line]/tabs-list:focus-visible:ring-0 group-data-[variant=line]/tabs-list:focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:text-card-foreground data-[orientation=vertical]:h-fit data-[orientation=vertical]:w-full [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TabsPanel({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-panel\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsPanel, tabsListVariants };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/toast.json

@@ -3,13 +3,14 @@
   "type": "registry:ui",
   "dependencies": [
     "@base-ui/react",
+    "class-variance-authority",
     "lucide-react"
   ],
   "registryDependencies": [],
   "files": [
     {
       "path": "toast.tsx",
-      "content": "\"use client\";\n\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\";\nimport { AlertCircle, CheckCircle2 } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ToastTypes = \"default\" | \"success\" | \"error\";\n\nconst globalToastManager = ToastPrimitive.createToastManager();\nexport const toast = globalToastManager;\n\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  return (\n    <ToastPrimitive.Provider toastManager={globalToastManager} limit={5} timeout={5000}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport className=\"fixed right-4 bottom-4 z-50 flex flex-col gap-2\">\n          <ToastViewportConsumer />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nfunction ToastViewportConsumer() {\n  const { toasts } = ToastPrimitive.useToastManager();\n  return (\n    <>\n      {toasts.map((toast) => (\n        <Toast key={toast.id} toast={toast} />\n      ))}\n    </>\n  );\n}\n\nfunction Toast({ className, toast, ...props }: ToastPrimitive.Root.Props) {\n  let icon;\n\n  switch (toast.type as ToastTypes) {\n    case \"success\":\n      icon = <CheckCircle2 className=\"h-4 w-4 text-green-600\" />;\n      break;\n    case \"error\":\n      icon = <AlertCircle className=\"h-4 w-4 text-red-600\" />;\n      break;\n    default:\n      icon = null;\n      break;\n  }\n\n  return (\n    <ToastPrimitive.Root\n      toast={toast}\n      className={cn(\n        \"flex w-80 items-center gap-3 rounded-lg border bg-popup p-4 shadow-md\",\n        className,\n      )}\n      {...props}\n    >\n      {icon && <div>{icon}</div>}\n      <div className=\"flex flex-1 flex-col\">\n        {toast.title && (\n          <ToastPrimitive.Title className=\"text-sm font-medium\">{toast.title}</ToastPrimitive.Title>\n        )}\n        {toast.description && (\n          <ToastPrimitive.Description className=\"text-sm text-muted-foreground\">\n            {toast.description}\n          </ToastPrimitive.Description>\n        )}\n      </div>\n    </ToastPrimitive.Root>\n  );\n}\n\nexport { ToastProvider as Toast };\n",
+      "content": "\"use client\";\n\nimport { Toast as ToastPrimitive } from \"@base-ui/react/toast\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { AlertCircle, CheckCircle2 } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ToastTypes = \"default\" | \"success\" | \"error\";\n\nconst toastViewportVariants = cva(\"fixed z-50 w-80 outline-none\", {\n  variants: {\n    position: {\n      \"top-left\": \"top-4 right-auto bottom-auto left-4\",\n      \"top-center\": \"top-4 right-0 bottom-auto left-0 mx-auto\",\n      \"top-right\": \"top-4 right-4 bottom-auto left-auto\",\n      \"bottom-left\": \"top-auto right-auto bottom-4 left-4\",\n      \"bottom-center\": \"top-auto right-0 bottom-4 left-0 mx-auto\",\n      \"bottom-right\": \"top-auto right-4 bottom-4 left-auto\",\n    },\n  },\n  defaultVariants: {\n    position: \"bottom-right\",\n  },\n});\n\nconst stackedToastVariants = cva(\n  \"absolute z-[calc(1000-var(--toast-index))] h-(--height) w-full rounded-lg border bg-popup bg-clip-padding p-4 select-none [--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-ending-style:opacity-0 data-expanded:h-(--toast-height) data-limited:opacity-0 data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n  {\n    variants: {\n      vertical: {\n        top: \"top-0 origin-top [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] after:bottom-full data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-starting-style:transform-[translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(-150%)]\",\n        bottom:\n          \"bottom-0 origin-bottom [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] after:top-full data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-starting-style:transform-[translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:transform-[translateY(150%)]\",\n      },\n      horizontal: {\n        left: \"right-auto left-0\",\n        center: \"right-0 left-0 mx-auto\",\n        right: \"right-0 left-auto\",\n      },\n    },\n    defaultVariants: {\n      vertical: \"bottom\",\n      horizontal: \"right\",\n    },\n  },\n);\n\nconst anchoredToastVariants = cva(\n  \"pointer-events-auto w-80 rounded-lg border bg-popup bg-clip-padding p-4 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n);\n\nconst toastContentVariants = cva(\n  \"overflow-hidden transition-opacity duration-250 data-behind:pointer-events-none data-behind:opacity-0 data-expanded:pointer-events-auto data-expanded:opacity-100\",\n);\n\nconst toastBodyVariants = cva(\"flex items-center gap-3\");\n\ntype ToastPosition = NonNullable<VariantProps<typeof toastViewportVariants>[\"position\"]>;\ntype StackVertical = NonNullable<VariantProps<typeof stackedToastVariants>[\"vertical\"]>;\ntype StackHorizontal = NonNullable<VariantProps<typeof stackedToastVariants>[\"horizontal\"]>;\ntype ToastManager = ReturnType<typeof ToastPrimitive.createToastManager>;\n\ninterface ToastProviderProps {\n  children: React.ReactNode;\n  position?: ToastPosition;\n  limit?: number;\n  timeout?: number;\n  toastManager?: ToastManager;\n}\n\nconst globalToastManager = ToastPrimitive.createToastManager();\nexport const globalToast = globalToastManager;\n\nexport function ToastProvider({\n  children,\n  position = \"bottom-right\",\n  limit = 5,\n  timeout = 5000,\n  toastManager,\n}: ToastProviderProps) {\n  const localToastManagerRef = React.useRef<ToastManager | null>(null);\n\n  if (!localToastManagerRef.current) {\n    localToastManagerRef.current = ToastPrimitive.createToastManager();\n  }\n\n  const manager = toastManager ?? localToastManagerRef.current;\n\n  return (\n    <ToastPrimitive.Provider toastManager={manager} limit={limit} timeout={timeout}>\n      {children}\n      <ToastPrimitive.Portal>\n        <ToastPrimitive.Viewport className={cn(toastViewportVariants({ position }))}>\n          <ToastStackConsumer position={position} />\n        </ToastPrimitive.Viewport>\n        <ToastPrimitive.Viewport className=\"pointer-events-none fixed inset-0 z-50 outline-none\">\n          <ToastAnchorConsumer />\n        </ToastPrimitive.Viewport>\n      </ToastPrimitive.Portal>\n    </ToastPrimitive.Provider>\n  );\n}\n\nfunction ToastStackConsumer({ position }: { position: ToastPosition }) {\n  const { toasts } = ToastPrimitive.useToastManager();\n  const stackToasts = toasts.filter((currentToast) => !currentToast.positionerProps?.anchor);\n\n  return (\n    <>\n      {stackToasts.map((currentToast) => (\n        <Toast key={currentToast.id} toast={currentToast} position={position} />\n      ))}\n    </>\n  );\n}\n\nfunction ToastAnchorConsumer() {\n  const { toasts } = ToastPrimitive.useToastManager();\n  const anchorToasts = toasts.filter((currentToast) =>\n    Boolean(currentToast.positionerProps?.anchor),\n  );\n\n  return (\n    <>\n      {anchorToasts.map((currentToast) => {\n        const { className, ...positionerProps } = currentToast.positionerProps ?? {};\n\n        return (\n          <ToastPrimitive.Positioner\n            key={currentToast.id}\n            toast={currentToast}\n            className={cn(\"pointer-events-none z-[calc(1000-var(--toast-index))]\", className)}\n            {...positionerProps}\n          >\n            <AnchoredToast toast={currentToast} />\n          </ToastPrimitive.Positioner>\n        );\n      })}\n    </>\n  );\n}\n\nfunction Toast({\n  className,\n  toast,\n  position,\n  ...props\n}: ToastPrimitive.Root.Props & { position: ToastPosition }) {\n  const { vertical, horizontal } = getStackPlacement(position);\n\n  return (\n    <ToastPrimitive.Root\n      toast={toast}\n      className={cn(stackedToastVariants({ vertical, horizontal, className }))}\n      {...props}\n    >\n      <ToastPrimitive.Content className={cn(toastContentVariants())}>\n        <ToastBody toast={toast} />\n      </ToastPrimitive.Content>\n    </ToastPrimitive.Root>\n  );\n}\n\nfunction AnchoredToast({ className, toast, ...props }: ToastPrimitive.Root.Props) {\n  return (\n    <ToastPrimitive.Root\n      toast={toast}\n      className={cn(anchoredToastVariants({ className }))}\n      {...props}\n    >\n      <ToastPrimitive.Content className={cn(toastContentVariants())}>\n        <ToastBody toast={toast} />\n      </ToastPrimitive.Content>\n    </ToastPrimitive.Root>\n  );\n}\n\nfunction ToastBody({ toast }: { toast: ToastPrimitive.Root.Props[\"toast\"] }) {\n  let icon;\n\n  switch (toast.type as ToastTypes) {\n    case \"success\":\n      icon = <CheckCircle2 className=\"h-4 w-4 text-success\" />;\n      break;\n    case \"error\":\n      icon = <AlertCircle className=\"h-4 w-4 text-destructive\" />;\n      break;\n    default:\n      icon = null;\n      break;\n  }\n\n  return (\n    <div className={cn(toastBodyVariants())}>\n      {icon ? <div>{icon}</div> : null}\n      <div className=\"flex flex-1 flex-col\">\n        {toast.title ? <ToastPrimitive.Title className=\"text-sm font-medium\" /> : null}\n        {toast.description ? (\n          <ToastPrimitive.Description className=\"text-sm text-muted-foreground\" />\n        ) : null}\n        {toast.actionProps ? (\n          <ToastPrimitive.Action className=\"mt-2 inline-flex h-7 items-center justify-center self-start rounded-md border px-2.5 text-xs font-medium hover:bg-muted\" />\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction getStackPlacement(position: ToastPosition): {\n  vertical: StackVertical;\n  horizontal: StackHorizontal;\n} {\n  const vertical: StackVertical = position.startsWith(\"top\") ? \"top\" : \"bottom\";\n\n  let horizontal: StackHorizontal = \"center\";\n  if (position.endsWith(\"left\")) {\n    horizontal = \"left\";\n  }\n  if (position.endsWith(\"right\")) {\n    horizontal = \"right\";\n  }\n\n  return {\n    vertical,\n    horizontal,\n  };\n}\n\nfunction useToast<Data extends object = any>() {\n  return ToastPrimitive.useToastManager<Data>();\n}\n\nexport { ToastProvider as Toast };\nexport { useToast };\nexport type { ToastPosition, ToastManager };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/toggle.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "toggle.tsx",
-      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent hover:bg-muted\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\"flex items-center gap-0.5 rounded border p-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants, ToggleGroup };\n",
+      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_[data-slot=fill]_*]:fill-transparent data-[pressed]:[&_[data-slot=fill]_*]:fill-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent hover:bg-muted\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nfunction ToggleGroup({ className, ...props }: ToggleGroupPrimitive.Props) {\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\"flex items-center gap-0.5 rounded border p-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { Toggle, toggleVariants, ToggleGroup };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/toolbar.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "toolbar.tsx",
-      "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(\"flex h-9 items-center justify-evenly gap-1  border bg-muted p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {\n  return <ToolbarPrimitive.Button className={cn(className)} {...props} />;\n}\n\nfunction ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {\n  return <ToolbarPrimitive.Link className={cn(className)} {...props} />;\n}\n\nfunction ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {\n  return <ToolbarPrimitive.Input className={cn(className)} {...props} />;\n}\n\nfunction ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {\n  return <ToolbarPrimitive.Group className={cn(className)} {...props} />;\n}\n\nfunction ToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props) {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(\n        \"shrink-0 bg-primary/40 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator };\n",
+      "content": "\"use client\";\n\nimport { Toolbar as ToolbarPrimitive } from \"@base-ui/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {\n  return (\n    <ToolbarPrimitive.Root\n      className={cn(\"flex h-9 items-center justify-evenly gap-1 rounded-xl border p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {\n  return <ToolbarPrimitive.Button className={cn(className)} {...props} />;\n}\n\nfunction ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {\n  return <ToolbarPrimitive.Link className={cn(className)} {...props} />;\n}\n\nfunction ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {\n  return <ToolbarPrimitive.Input className={cn(className)} {...props} />;\n}\n\nfunction ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {\n  return (\n    <ToolbarPrimitive.Group className={cn(\"flex items-center gap-0.5\", className)} {...props} />\n  );\n}\n\nfunction ToolbarSeparator({ className, ...props }: ToolbarPrimitive.Separator.Props) {\n  return (\n    <ToolbarPrimitive.Separator\n      className={cn(\n        \"shrink-0 bg-primary/30 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator };\n",
       "type": "registry:ui"
     }
   ]

package/public/r/tooltip.json

@@ -0,0 +1,15 @@
+{
+  "name": "tooltip",
+  "type": "registry:ui",
+  "dependencies": [
+    "@base-ui/react"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "tooltip.tsx",
+      "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction TooltipProvider({ ...props }: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider {...props} />;\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  children,\n  side = \"top\",\n  sideOffset = 6,\n  align = \"center\",\n  alignOffset = 0,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<TooltipPrimitive.Positioner.Props, \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\">) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          className={cn(\n            \"origin-(--transform-origin) rounded-md bg-popup px-2 py-1 text-xs 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\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"data-[side=bottom]:-top-0.5 data-[side=left]:-right-0.5 data-[side=right]:-left-0.5 data-[side=top]:-bottom-0.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent };",
+      "type": "registry:ui"
+    }
+  ]
+}

package/src/components/docs/layout/header.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router";
-import { MenuIcon, SunMoonIcon } from "lucide-react";
-import { useState } from "react";
+import {  SunMoonIcon } from "lucide-react";
+
 
 import { DocsButton } from "@/components/docs/docs-button";
 import { useTheme } from "@/components/docs/theme-provider";
@@ -9,7 +9,7 @@ import { MobileMenu } from "./mobile-menu";
 
 export function Header() {
   const { toggleTheme, theme } = useTheme();
-  const [showMobileMenu, setShowMobileMenu] = useState(false);
+
 
   return (
     <header className=" sticky top-0 z-10 h-12 border-b bg-background">
@@ -31,19 +31,9 @@ export function Header() {
         <DocsButton onClick={toggleTheme} variant={"ghost"} className={"hidden lg:inline-flex"}>
           <SunMoonIcon className=" size-4" />
         </DocsButton>
-
-        <DocsButton
-          onClick={() => setShowMobileMenu(!showMobileMenu)}
-          variant={"ghost"}
-          size={"sm"}
-          className={"lg:hidden"}
-        >
-          <MenuIcon data-icon="start" />
-          Navigation
-        </DocsButton>
+      <MobileMenu  />
       </div>
 
-      <MobileMenu open={showMobileMenu} onClose={() => setShowMobileMenu(false)} />
     </header>
   );
 }