shapes-ui 0.4.1 → 0.5.0

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>
   );
 }

package/src/components/docs/layout/mobile-menu.tsx

@@ -1,86 +1,35 @@
 import { Link } from "@tanstack/react-router";
-import { clsx } from "clsx";
 import { allComponents } from "content-collections";
-import { Suspense, useEffect, useRef } from "react";
-
+import { Suspense, useState } from "react";
 import { SuspenseFallback } from "./suspense-fallback";
+import { Drawer, DrawerPopup, DrawerTrigger } from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+import { MenuIcon } from "lucide-react";
 
-export function MobileMenu({ open, onClose }: { open: boolean; onClose: () => void }) {
-  const panelRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-
-    if (open) {
-      document.addEventListener("keydown", onKey);
-      document.body.style.overflow = "hidden";
-      // Move focus into the panel for accessibility
-      setTimeout(() => panelRef.current?.focus(), 0);
-    } else {
-      document.body.style.overflow = "";
-    }
-
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = "";
-    };
-  }, [open, onClose]);
+export function MobileMenu() {
 
-  return (
-    <div aria-hidden={!open} className={clsx("fixed inset-0 z-50", !open && "pointer-events-none")}>
-      <div
-        className={clsx(
-          "fixed inset-0 bg-black/40 transition-opacity duration-200",
-          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
-          "motion-reduce:transition-none",
-        )}
-        onClick={onClose}
-        aria-hidden
-      />
+  const [open, setOpen] = useState(false);
 
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal
-        tabIndex={-1}
-        className={clsx(
-          "fixed right-0 bottom-0 left-0 transform border-t bg-popup p-4 transition-transform duration-300 ease-[cubic-bezier(.22,1,.36,1)]",
-          open ? "translate-y-0" : "translate-y-full",
-          "motion-reduce:transform-none motion-reduce:transition-none",
-        )}
-      >
-        <nav className="mt-4 flex flex-col gap-2">
-          <Link to="/components" className="text-sm text-muted-foreground">
-            Components
-          </Link>
-          <Link to="/" className="text-base">
-            Home
-          </Link>
-          <div>
-            <Link to="/components" className="text-base">
-              Components
+  return <Drawer open={open} onOpenChange={setOpen} >
+    <DrawerTrigger className={'flex md:hidden'} render={<Button size={'xs'} variant={'secondary'} >
+      <MenuIcon  />
+      Navigation
+    </Button>} />
+    <DrawerPopup position="bottom">
+      <nav className="mt-4 flex flex-col gap-2">
+        <span className="text-sm font-medium text-muted-foreground">Components</span>
+        <Suspense fallback={<SuspenseFallback />}>
+          {allComponents.map((component) => (
+            <Link key={component.slug} to={'/components/$slug'} params={{
+              slug: component.slug
+            }} onClick={() => setOpen(false)}>
+              <Button variant={'link'}>
+                {component.title}
+              </Button>
             </Link>
-            <div className=" ml-4 flex flex-col">
-              <Suspense fallback={<SuspenseFallback />}>
-                {[...allComponents]
-                  .sort((a, b) => a.title.localeCompare(b.title))
-                  .map((component) => (
-                    <Link
-                      key={component.slug}
-                      to="/components/$slug"
-                      params={{ slug: component.slug }}
-                      className="text-base"
-                    >
-                      {component.title}
-                    </Link>
-                  ))}
-              </Suspense>
-            </div>
-          </div>
-        </nav>
-      </div>
-    </div>
-  );
+          ))}
+        </Suspense>
+      </nav>
+    </DrawerPopup>
+  </Drawer>
 }

package/src/components/docs/layout/nav-list.tsx

@@ -3,11 +3,12 @@ import { allComponents } from "content-collections";
 import { ComponentProps } from "react";
 
 import { DocsButton } from "@/components/docs/docs-button";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 function NavSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex min-h-0 flex-1 flex-col gap-2">
       <h4 className=" pl-2 font-heading text-xs font-medium text-muted-foreground">{title}</h4>
       {children}
     </div>
@@ -16,27 +17,32 @@ function NavSection({ title, children }: { title: string; children: React.ReactN
 
 export function NavSidebar({ className, ...props }: ComponentProps<"nav">) {
   return (
-    <nav className={cn("hidden h-full w-64 flex-col p-4 lg:flex", className)} {...props}>
+    <nav className={cn("hidden h-full min-h-0 w-64 flex-col p-4 lg:flex", className)} {...props}>
       <NavSection title="Components">
-        <ul>
-          {[...allComponents]
-            .sort((a, b) => a.title.localeCompare(b.title))
-            .map((component) => (
-              <li key={component.slug}>
-                <Link to="/components/$slug" params={{ slug: component.slug }}>
-                  {({ isActive }) => (
-                    <DocsButton
-                      variant={"ghost"}
-                      size={"sm"}
-                      className={cn("w-fit justify-start rounded-none", isActive ? "bg-muted" : "")}
-                    >
-                      {component.title}
-                    </DocsButton>
-                  )}
-                </Link>
-              </li>
-            ))}
-        </ul>
+        <ScrollArea className="h-full">
+          <ul>
+            {[...allComponents]
+              .sort((a, b) => a.title.localeCompare(b.title))
+              .map((component) => (
+                <li key={component.slug}>
+                  <Link to="/components/$slug" params={{ slug: component.slug }}>
+                    {({ isActive }) => (
+                      <DocsButton
+                        variant={"ghost"}
+                        size={"sm"}
+                        className={cn(
+                          "w-fit justify-start rounded-none",
+                          isActive ? "bg-muted" : "",
+                        )}
+                      >
+                        {component.title}
+                      </DocsButton>
+                    )}
+                  </Link>
+                </li>
+              ))}
+          </ul>
+        </ScrollArea>
       </NavSection>
     </nav>
   );

package/src/components/docs/layout/split-layout.tsx

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 import { NavSidebar } from "./nav-list";
@@ -11,10 +12,12 @@ export function SplitLayout({
   ...props
 }: ComponentProps<"div">) {
   return (
-    <div className={cn("flex h-full w-full", className)} {...props}>
+    <div className={cn("flex h-full min-h-0 w-full", className)} {...props}>
       <NavSidebar />
-      <main className="min-w-0 flex-1 overflow-auto">
-        <div className="min-h-full lg:border-l">{children}</div>
+      <main className="min-w-0 flex-1">
+        <ScrollArea className="h-full">
+          <div className="min-h-full lg:border-l">{children}</div>
+        </ScrollArea>
       </main>
     </div>
   );

package/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import { ComponentProps } from "react";
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 min-h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-lg border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 min-h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

package/src/components/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer inline-flex size-4 max-w-4 shrink-0 items-center justify-center rounded border border-input bg-background transition-colors group-data-invalid/field:border-destructive focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40",
+        "peer inline-flex size-4 max-w-4 min-w-4 shrink-0 items-center justify-center rounded border border-input bg-background transition-colors group-data-invalid/field:border-destructive focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40",
         className,
       )}
       {...props}

package/src/components/ui/drawer.tsx

@@ -89,7 +89,7 @@ function DrawerPopup({
           data-slot="drawer-popup"
           data-position={position}
           className={cn(
-            "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",
+            "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 ",
 
             className,
           )}

package/src/components/ui/field.tsx

@@ -1,36 +1,18 @@
 "use client";
 
 import { Field as FieldPrimitive } from "@base-ui/react/field";
-import { cva, VariantProps } from "class-variance-authority";
 import { useMemo } from "react";
 
 import { cn } from "@/lib/utils";
 
-const fieldVariants = cva("group/field flex gap-2 data-[invalid=true]:text-destructive", {
-  variants: {
-    orientation: {
-      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-      horizontal:
-        "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",
-      responsive:
-        "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",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>) {
+function Field({ className, ...props }: FieldPrimitive.Root.Props) {
   return (
     <FieldPrimitive.Root
       data-slot="field-root"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
+      className={cn(
+        "group/field flex flex-col gap-2 *:w-full data-invalid:text-destructive [&>.sr-only]:w-auto",
+        className,
+      )}
       {...props}
     />
   );
@@ -41,8 +23,7 @@ function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
     <FieldPrimitive.Label
       data-slot="field-label"
       className={cn(
-        "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",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        "group/field-label peer/field-label flex w-fit gap-1 text-sm leading-snug group-data-disabled/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         className,
       )}
       {...props}
@@ -72,7 +53,7 @@ function FieldDescription({ className, ...props }: FieldPrimitive.Description.Pr
     <FieldPrimitive.Description
       data-slot="field-description"
       className={cn(
-        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-left text-xs leading-normal font-normal text-muted-foreground [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className,
@@ -116,7 +97,7 @@ function FieldError({
     <FieldPrimitive.Error
       role="alert"
       data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
+      className={cn("text-xs font-normal text-destructive", className)}
       {...props}
     >
       {content}
@@ -128,7 +109,7 @@ function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
   return (
     <FieldPrimitive.Item
       data-slot="field-item"
-      className={cn("flex items-center gap-2", className)}
+      className={cn("flex flex-col gap-1", className)}
       {...props}
     />
   );

package/src/components/ui/form.tsx

@@ -5,7 +5,7 @@ import { Form as FormPrimitive } from "@base-ui/react/form";
 import { cn } from "@/lib/utils";
 
 function Form({ className, ...props }: FormPrimitive.Props) {
-  return <FormPrimitive className={cn("", className)} {...props} />;
+  return <FormPrimitive data-slot="form-root" className={cn(className)} {...props} />;
 }
 
 export { Form };