{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "base-drawer",
  "title": "Base Drawer",
  "description": "A base-drawer component.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "@cubby-ui/button",
    "@cubby-ui/scroll-area",
    "@cubby-ui/switch",
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/base-drawer/base-drawer.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\r\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\r\nimport { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\r\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Button } from \"@/registry/default/button/button\";\r\nimport {\r\n  INNER_EDGE_FROM_ATTACH_SIDE,\r\n  elevatedSurface,\r\n  flushSurface,\r\n  type SurfaceLevel,\r\n} from \"@/registry/default/lib/elevated\";\r\nimport { ScrollArea } from \"@/registry/default/scroll-area/scroll-area\";\r\nimport {\r\n  SwitchVisual,\r\n  type SwitchVisualProps,\r\n} from \"@/registry/default/switch/switch\";\r\n\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport {\r\n  ArrowRight01Icon,\r\n  Cancel01Icon,\r\n  Tick02Icon,\r\n} from \"@hugeicons/core-free-icons\";\r\n\r\n// The tick draws itself in on check. `pathLength` restates the path as 1 unit\r\n// long, so the dash values are fractions of the stroke and survive a HugeIcons\r\n// reshape. Deriving the icon array is the only way to reach the path.\r\nconst tickIcon = Tick02Icon.map(([tag, attrs]) => [\r\n  tag,\r\n  { ...attrs, pathLength: 1 },\r\n]) as typeof Tick02Icon;\r\n\r\nconst checkmarkClasses =\r\n  \"[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none\";\r\n\r\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\r\n\r\nconst DrawerContext = React.createContext<{ position: DrawerPosition }>({\r\n  position: \"bottom\",\r\n});\r\n\r\nconst directionMap: Record<\r\n  DrawerPosition,\r\n  DrawerPrimitive.Root.Props[\"swipeDirection\"]\r\n> = {\r\n  bottom: \"down\",\r\n  left: \"left\",\r\n  right: \"right\",\r\n  top: \"up\",\r\n};\r\n\r\nconst createBaseDrawerHandle: typeof DrawerPrimitive.createHandle =\r\n  DrawerPrimitive.createHandle;\r\n\r\nfunction BaseDrawer({\r\n  swipeDirection,\r\n  position = \"bottom\",\r\n  ...props\r\n}: DrawerPrimitive.Root.Props & {\r\n  position?: DrawerPosition;\r\n}) {\r\n  return (\r\n    <DrawerContext.Provider value={{ position }}>\r\n      <DrawerPrimitive.Root\r\n        swipeDirection={swipeDirection ?? directionMap[position]}\r\n        {...props}\r\n      />\r\n    </DrawerContext.Provider>\r\n  );\r\n}\r\n\r\nconst BaseDrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;\r\n\r\nfunction BaseDrawerTrigger(\r\n  props: DrawerPrimitive.Trigger.Props,\r\n): React.ReactElement {\r\n  return <DrawerPrimitive.Trigger data-slot=\"base-drawer-trigger\" {...props} />;\r\n}\r\n\r\nfunction BaseDrawerClose(\r\n  props: DrawerPrimitive.Close.Props,\r\n): React.ReactElement {\r\n  return <DrawerPrimitive.Close data-slot=\"base-drawer-close\" {...props} />;\r\n}\r\n\r\nconst BaseDrawerContent: typeof DrawerPrimitive.Content =\r\n  DrawerPrimitive.Content;\r\n\r\nfunction BaseDrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {\r\n  return <DrawerPrimitive.Provider {...props} />;\r\n}\r\n\r\nfunction BaseDrawerIndent({\r\n  className,\r\n  ...props\r\n}: DrawerPrimitive.Indent.Props) {\r\n  return (\r\n    <DrawerPrimitive.Indent\r\n      data-slot=\"base-drawer-indent\"\r\n      className={cn(\r\n        \"transition-[transform,border-radius] duration-400 ease-[cubic-bezier(.32,.72,0,1)]\",\r\n        \"data-active:scale-[0.94] data-active:overflow-hidden data-active:rounded-lg\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerIndentBackground({\r\n  className,\r\n  ...props\r\n}: DrawerPrimitive.IndentBackground.Props) {\r\n  return (\r\n    <DrawerPrimitive.IndentBackground\r\n      data-slot=\"base-drawer-indent-background\"\r\n      className={cn(\"fixed inset-0 bg-black\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerSwipeArea({\r\n  className,\r\n  position: positionProp,\r\n  ...props\r\n}: DrawerPrimitive.SwipeArea.Props & {\r\n  position?: DrawerPosition;\r\n}) {\r\n  const { position: contextPosition } = React.useContext(DrawerContext);\r\n  const position = positionProp ?? contextPosition;\r\n\r\n  return (\r\n    <DrawerPrimitive.SwipeArea\r\n      className={cn(\r\n        \"fixed z-50 touch-none\",\r\n        position === \"bottom\" && \"inset-x-0 bottom-0 h-8\",\r\n        position === \"top\" && \"inset-x-0 top-0 h-8\",\r\n        position === \"left\" && \"inset-y-0 left-0 w-8\",\r\n        position === \"right\" && \"inset-y-0 right-0 w-8\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-swipe-area\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerBackdrop({\r\n  className,\r\n  ...props\r\n}: DrawerPrimitive.Backdrop.Props) {\r\n  return (\r\n    <DrawerPrimitive.Backdrop\r\n      className={cn(\r\n        \"fixed inset-0 z-50 bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-300 data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*300ms)] data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-backdrop\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerViewport({\r\n  className,\r\n  position,\r\n  variant = \"default\",\r\n  ...props\r\n}: DrawerPrimitive.Viewport.Props & {\r\n  position?: DrawerPosition;\r\n  variant?: \"default\" | \"floating\";\r\n}) {\r\n  return (\r\n    <DrawerPrimitive.Viewport\r\n      className={cn(\r\n        \"fixed inset-0 z-50 [--bleed:3rem] [--inset:0px]\",\r\n        \"touch-none\",\r\n        position === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\r\n        position === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\r\n        position === \"left\" && \"flex justify-start\",\r\n        position === \"right\" && \"flex justify-end\",\r\n        variant === \"floating\" && \"px-(--inset) [--inset:1rem]\",\r\n        variant === \"floating\" && position !== \"bottom\" && \"pt-(--inset)\",\r\n        variant === \"floating\" && position !== \"top\" && \"pb-(--inset)\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-viewport\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerPopup({\r\n  className,\r\n  children,\r\n  showCloseButton = false,\r\n  position: positionProp,\r\n  variant = \"default\",\r\n  showBar = false,\r\n  level = 5,\r\n  shadowLevel = 5,\r\n  ...props\r\n}: DrawerPrimitive.Popup.Props & {\r\n  showCloseButton?: boolean;\r\n  position?: DrawerPosition;\r\n  variant?: \"default\" | \"floating\";\r\n  showBar?: boolean;\r\n  /** Surface elevation level (1-8). Defaults to 5 — the dialog/sheet/drawer tier. */\r\n  level?: SurfaceLevel;\r\n  /** Shadow weight (1-8). Pinned to 5 by default. */\r\n  shadowLevel?: SurfaceLevel;\r\n}) {\r\n  const { position: contextPosition } = React.useContext(DrawerContext);\r\n  const position = positionProp ?? contextPosition;\r\n\r\n  return (\r\n    <BaseDrawerPortal>\r\n      <BaseDrawerBackdrop />\r\n      <BaseDrawerViewport position={position} variant={variant}>\r\n        <DrawerPrimitive.Popup\r\n          className={cn(\r\n            // Base layout\r\n            \"text-popover-foreground relative flex max-h-full min-h-0 w-full min-w-0 flex-col will-change-transform outline-none\",\r\n            // Surface elevation — floating variants get the full 4-edge rim\r\n            // overlay; flush (`default`) variants get a single-edge rim only\r\n            // on the inner-facing edge so the other edges don't show a 1px\r\n            // line at the viewport boundary.\r\n            variant === \"floating\"\r\n              ? elevatedSurface(level, shadowLevel)\r\n              : flushSurface(level, INNER_EDGE_FROM_ATTACH_SIDE[position]),\r\n            // Transition\r\n            \"transition-[transform,box-shadow,height,background-color] duration-400 ease-[cubic-bezier(.32,.72,0,1)]\",\r\n            \"touch-none\",\r\n            // Stack calculation variables\r\n            \"[--peek:1.5rem] [--stack-step:0.05]\",\r\n            \"[--stack-progress:clamp(0,var(--drawer-swipe-progress),1)]\",\r\n            \"[--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))]\",\r\n            \"[--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)]\",\r\n            \"[--shrink:calc(1-var(--scale))]\",\r\n            \"[--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))]\",\r\n            // Bleed pseudo (fills gap when dragged past edge) — uses ::before so ::after stays free for the rim overlay\r\n            \"before:pointer-events-none before:absolute before:bg-(--popup-surface,var(--popover))\",\r\n            // States\r\n            \"data-swiping:select-none\",\r\n            \"data-nested-drawer-open:overflow-hidden\",\r\n            \"data-ending-style:shadow-transparent data-starting-style:shadow-transparent\",\r\n            \"data-ending-style:duration-[calc(var(--drawer-swipe-strength)*300ms)]\",\r\n            // --- Position: bottom ---\r\n            position === \"bottom\" &&\r\n              cn(\r\n                \"row-start-2\",\r\n                // Transform\r\n                \"transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))]\",\r\n                \"data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))]\",\r\n                \"data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))]\",\r\n                // Dynamic bleed: adjusts for snap points automatically\r\n                \"-mb-[max(0px,calc(var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))]\",\r\n                \"pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))]\",\r\n                \"data-ending-style:mb-0 data-starting-style:mb-0\",\r\n                \"data-ending-style:pb-0 data-starting-style:pb-0\",\r\n                // Transition includes margin/padding for snap changes but not enter/exit\r\n                \"not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding]\",\r\n                // Bleed pseudo\r\n                \"before:inset-x-0 before:top-full before:h-(--bleed)\",\r\n                // Bar support\r\n                \"has-data-[slot=base-drawer-bar]:pt-2\",\r\n                // Nested stacking\r\n                \"h-(--drawer-height,auto)\",\r\n                \"[--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))]\",\r\n                \"data-nested-drawer-open:h-(--height)\",\r\n                \"origin-[50%_calc(100%-var(--inset))]\",\r\n                \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))]\",\r\n              ),\r\n            // --- Position: top ---\r\n            position === \"top\" &&\r\n              cn(\r\n                \"transform-[translateY(var(--drawer-swipe-movement-y))]\",\r\n                \"data-starting-style:transform-[translateY(calc(-100%-var(--inset)))]\",\r\n                \"data-ending-style:transform-[translateY(calc(-100%-var(--inset)))]\",\r\n                \"before:inset-x-0 before:bottom-full before:h-(--bleed)\",\r\n                \"has-data-[slot=base-drawer-bar]:pb-2\",\r\n                // Nested stacking\r\n                \"h-(--drawer-height,auto)\",\r\n                \"[--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))]\",\r\n                \"data-nested-drawer-open:h-(--height)\",\r\n                \"origin-[50%_var(--inset)]\",\r\n                \"data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))]\",\r\n              ),\r\n            // --- Position: left ---\r\n            position === \"left\" &&\r\n              cn(\r\n                \"w-[calc(100%-3rem)] max-w-md\",\r\n                \"transform-[translateX(var(--drawer-swipe-movement-x))]\",\r\n                \"data-starting-style:transform-[translateX(calc(-100%-var(--inset)))]\",\r\n                \"data-ending-style:transform-[translateX(calc(-100%-var(--inset)))]\",\r\n                \"before:inset-y-0 before:end-full before:w-(--bleed)\",\r\n                \"has-data-[slot=base-drawer-bar]:pe-2\",\r\n                \"origin-right\",\r\n                \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))]\",\r\n              ),\r\n            // --- Position: right ---\r\n            position === \"right\" &&\r\n              cn(\r\n                \"w-[calc(100%-3rem)] max-w-md\",\r\n                \"transform-[translateX(var(--drawer-swipe-movement-x))]\",\r\n                \"data-starting-style:transform-[translateX(calc(100%+var(--inset)))]\",\r\n                \"data-ending-style:transform-[translateX(calc(100%+var(--inset)))]\",\r\n                \"before:inset-y-0 before:start-full before:w-(--bleed)\",\r\n                \"has-data-[slot=base-drawer-bar]:ps-2\",\r\n                \"origin-left\",\r\n                \"data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))]\",\r\n              ),\r\n            // --- Variant: rounded corners ---\r\n            variant !== \"floating\"\r\n              ? cn(\r\n                  position === \"bottom\" && \"rounded-t-2xl\",\r\n                  position === \"top\" && \"rounded-b-2xl\",\r\n                )\r\n              : cn(\r\n                  position === \"bottom\" && \"rounded-t-2xl\",\r\n                  position === \"top\" && \"rounded-b-2xl\",\r\n                  position === \"left\" && \"rounded-e-2xl\",\r\n                  position === \"right\" && \"rounded-s-2xl\",\r\n                  \"rounded-2xl before:bg-transparent\",\r\n                ),\r\n            className,\r\n          )}\r\n          data-slot=\"base-drawer-popup\"\r\n          data-level={level}\r\n          {...props}\r\n        >\r\n          {children}\r\n          {showCloseButton && (\r\n            <DrawerPrimitive.Close\r\n              aria-label=\"Close\"\r\n              className=\"absolute end-2 top-2\"\r\n              render={<Button size=\"icon_sm\" variant=\"ghost\" />}\r\n            >\r\n              <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />\r\n            </DrawerPrimitive.Close>\r\n          )}\r\n          {showBar && <BaseDrawerBar />}\r\n        </DrawerPrimitive.Popup>\r\n      </BaseDrawerViewport>\r\n    </BaseDrawerPortal>\r\n  );\r\n}\r\n\r\nfunction BaseDrawerHeader({\r\n  className,\r\n  allowSelection = false,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\"> & {\r\n  allowSelection?: boolean;\r\n}) {\r\n  const defaultProps = {\r\n    className: cn(\r\n      \"flex flex-col gap-2 p-6 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pb-3 max-sm:pb-4\",\r\n      !allowSelection && \"cursor-default\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-header\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render: allowSelection ? <BaseDrawerContent render={render} /> : render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerFooter({\r\n  className,\r\n  variant = \"default\",\r\n  allowSelection = true,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\"> & {\r\n  variant?: \"default\" | \"inset\";\r\n  allowSelection?: boolean;\r\n}) {\r\n  const defaultProps = {\r\n    className: cn(\r\n      \"mt-auto flex flex-col-reverse gap-2 px-6 pb-[env(safe-area-inset-bottom,0px)] sm:flex-row sm:justify-end\",\r\n      !allowSelection && \"cursor-default\",\r\n      variant === \"default\" &&\r\n        \"in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+1.5rem)]\",\r\n      variant === \"inset\" &&\r\n        \"border-t bg-muted pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+1rem)]\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-footer\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render: allowSelection ? <BaseDrawerContent render={render} /> : render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\r\n  return (\r\n    <DrawerPrimitive.Title\r\n      className={cn(\r\n        \"text-lg leading-none font-semibold tracking-tight\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-title\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerDescription({\r\n  className,\r\n  ...props\r\n}: DrawerPrimitive.Description.Props) {\r\n  return (\r\n    <DrawerPrimitive.Description\r\n      className={cn(\"text-muted-foreground text-sm\", className)}\r\n      data-slot=\"base-drawer-description\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerPanel({\r\n  className,\r\n  scrollFade = false,\r\n  scrollable = true,\r\n  allowSelection = true,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\"> & {\r\n  scrollFade?: boolean;\r\n  scrollable?: boolean;\r\n  allowSelection?: boolean;\r\n}) {\r\n  const defaultProps = {\r\n    className: cn(\r\n      \"p-6 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-header])]:pt-1 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-footer]:not(.border-t))]:pb-1\",\r\n      !allowSelection && \"cursor-default\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-panel\",\r\n  };\r\n\r\n  const content = useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render: allowSelection ? <BaseDrawerContent render={render} /> : render,\r\n  });\r\n\r\n  if (scrollable) {\r\n    return (\r\n      <ScrollArea className=\"touch-auto\" fadeEdges={scrollFade}>\r\n        {content}\r\n      </ScrollArea>\r\n    );\r\n  }\r\n\r\n  return content;\r\n}\r\n\r\nfunction BaseDrawerBar({\r\n  className,\r\n  position: positionProp,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\"> & {\r\n  position?: DrawerPosition;\r\n}) {\r\n  const { position: contextPosition } = React.useContext(DrawerContext);\r\n  const position = positionProp ?? contextPosition;\r\n  const horizontal = position === \"left\" || position === \"right\";\r\n\r\n  const defaultProps = {\r\n    \"aria-hidden\": true as const,\r\n    className: cn(\r\n      \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-muted-foreground/30\",\r\n      horizontal\r\n        ? \"inset-y-0 before:h-12 before:w-1\"\r\n        : \"inset-x-0 before:h-1 before:w-12\",\r\n      position === \"top\" && \"bottom-0\",\r\n      position === \"bottom\" && \"top-0\",\r\n      position === \"left\" && \"right-0\",\r\n      position === \"right\" && \"left-0\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-bar\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenu({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"nav\">) {\r\n  const defaultProps = {\r\n    className: cn(\"-m-2 flex flex-col\", className),\r\n    \"data-slot\": \"base-drawer-menu\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"nav\",\r\n    props: mergeProps<\"nav\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenuItem({\r\n  className,\r\n  variant = \"default\",\r\n  render,\r\n  disabled,\r\n  ...props\r\n}: useRender.ComponentProps<\"button\"> & {\r\n  variant?: \"default\" | \"destructive\";\r\n}) {\r\n  const defaultProps = {\r\n    className: cn(\r\n      \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid hover:bg-surface-hover hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-60 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-menu-item\",\r\n    \"data-variant\": variant,\r\n    disabled,\r\n    type: \"button\" as const,\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"button\",\r\n    props: mergeProps<\"button\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenuSeparator({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n  const defaultProps = {\r\n    className: cn(\"mx-2 my-1 h-px bg-border\", className),\r\n    \"data-slot\": \"base-drawer-menu-separator\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenuGroup({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n  const defaultProps = {\r\n    className: cn(\"flex flex-col\", className),\r\n    \"data-slot\": \"base-drawer-menu-group\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenuGroupLabel({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n  const defaultProps = {\r\n    className: cn(\r\n      \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\r\n      className,\r\n    ),\r\n    \"data-slot\": \"base-drawer-menu-group-label\",\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps<\"div\">(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction BaseDrawerMenuTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: DrawerPrimitive.Trigger.Props) {\r\n  return (\r\n    <BaseDrawerTrigger\r\n      className={cn(\r\n        \"text-foreground hover:bg-surface-hover hover:text-accent-foreground focus-visible:outline-ring/50 flex min-h-9 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid sm:min-h-8 sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-menu-trigger\"\r\n      {...props}\r\n    >\r\n      {children}\r\n      <HugeiconsIcon\r\n        icon={ArrowRight01Icon}\r\n        className=\"ms-auto -me-0.5 opacity-80\"\r\n        strokeWidth={2}\r\n      />\r\n    </BaseDrawerTrigger>\r\n  );\r\n}\r\n\r\nfunction BaseDrawerMenuCheckboxItem({\r\n  className,\r\n  children,\r\n  checked,\r\n  defaultChecked,\r\n  onCheckedChange,\r\n  indicator = \"check\",\r\n  switchColor = \"primary\",\r\n  switchShape = \"circle\",\r\n  switchSize = \"sm\",\r\n  switchMotion = \"default\",\r\n  disabled,\r\n  render,\r\n  ...props\r\n}: CheckboxPrimitive.Root.Props & {\r\n  /** Which indicator sits in the right-hand column. `\"switch\"` is visual only. */\r\n  indicator?: \"check\" | \"switch\";\r\n  /** Checked track colour, when `indicator=\"switch\"`. */\r\n  switchColor?: SwitchVisualProps[\"color\"];\r\n  /** Thumb silhouette, when `indicator=\"switch\"`. */\r\n  switchShape?: SwitchVisualProps[\"shape\"];\r\n  /** Thumb size, when `indicator=\"switch\"`. Defaults to `sm` for the drawer's taller touch rows. */\r\n  switchSize?: SwitchVisualProps[\"size\"];\r\n  /** How the thumb travels, when `indicator=\"switch\"`. */\r\n  switchMotion?: SwitchVisualProps[\"motion\"];\r\n  render?: React.ReactElement;\r\n}) {\r\n  return (\r\n    <CheckboxPrimitive.Root\r\n      checked={checked}\r\n      className={cn(\r\n        \"text-foreground hover:bg-surface-hover hover:text-accent-foreground focus-visible:outline-ring/50 grid min-h-9 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid data-disabled:pointer-events-none data-disabled:opacity-60 sm:min-h-8 sm:text-sm [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\r\n        // `group/switch` lets a switch indicator pick up the row's press\r\n        // state, so the whole row behaves as the control rather than just the\r\n        // switch. Named, so an unrelated `.group` on an ancestor cannot.\r\n        \"group/switch\",\r\n        indicator === \"switch\"\r\n          ? \"grid-cols-[1fr_auto] gap-4 pe-1.5\"\r\n          : \"grid-cols-[1fr_1.125rem] pe-2 sm:grid-cols-[1fr_1rem]\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-menu-checkbox-item\"\r\n      defaultChecked={defaultChecked}\r\n      disabled={disabled}\r\n      onCheckedChange={onCheckedChange}\r\n      render={render}\r\n      {...props}\r\n    >\r\n      <span className=\"col-start-1 flex min-w-0 items-center gap-2\">\r\n        {children}\r\n      </span>\r\n      {indicator === \"switch\" ? (\r\n        <SwitchVisual\r\n          color={switchColor}\r\n          shape={switchShape}\r\n          size={switchSize}\r\n          motion={switchMotion}\r\n          // Touch-sized on mobile, matching the taller drawer rows; drops to\r\n          // the same 14px thumb the desktop menus use (`size=\"xs\"`) from `sm`\r\n          // up. Responsive sizing can't come from the cva variant.\r\n          className=\"col-start-2 sm:[--thumb-size:--spacing(3.5)]\"\r\n          // Checkbox.Indicator does not inject aria-hidden the way the menu\r\n          // primitives do, and this span sits inside the row's accessible name.\r\n          aria-hidden\r\n          render={<CheckboxPrimitive.Indicator keepMounted />}\r\n        />\r\n      ) : (\r\n        <CheckboxPrimitive.Indicator\r\n          className=\"col-start-2 flex items-center justify-center\"\r\n          aria-hidden\r\n          keepMounted\r\n        >\r\n          <HugeiconsIcon\r\n            icon={tickIcon}\r\n            strokeWidth={2.5}\r\n            className={cn(\"size-4.5 sm:size-4\", checkmarkClasses)}\r\n          />\r\n        </CheckboxPrimitive.Indicator>\r\n      )}\r\n    </CheckboxPrimitive.Root>\r\n  );\r\n}\r\n\r\nfunction BaseDrawerMenuRadioGroup({\r\n  className,\r\n  ...props\r\n}: RadioGroupPrimitive.Props) {\r\n  return (\r\n    <RadioGroupPrimitive\r\n      className={cn(\"flex flex-col\", className)}\r\n      data-slot=\"base-drawer-menu-radio-group\"\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction BaseDrawerMenuRadioItem({\r\n  className,\r\n  children,\r\n  value,\r\n  disabled,\r\n  render,\r\n  ...props\r\n}: RadioPrimitive.Root.Props & {\r\n  value: string;\r\n  render?: React.ReactElement;\r\n}) {\r\n  return (\r\n    <RadioPrimitive.Root\r\n      className={cn(\r\n        \"text-foreground hover:bg-surface-hover hover:text-accent-foreground focus-visible:outline-ring/50 grid min-h-9 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid data-disabled:pointer-events-none data-disabled:opacity-60 sm:min-h-8 sm:text-sm [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\r\n        \"grid-cols-[1fr_1.125rem] items-center pe-2 sm:grid-cols-[1fr_1rem]\",\r\n        className,\r\n      )}\r\n      data-slot=\"base-drawer-menu-radio-item\"\r\n      disabled={disabled}\r\n      render={render}\r\n      value={value}\r\n      {...props}\r\n    >\r\n      <span className=\"col-start-1 flex min-w-0 items-center gap-2\">\r\n        {children}\r\n      </span>\r\n      {/* Radio.Indicator, like Checkbox.Indicator, leaves aria-hidden to us. */}\r\n      <RadioPrimitive.Indicator\r\n        className=\"col-start-2 flex items-center justify-center\"\r\n        aria-hidden\r\n        keepMounted\r\n      >\r\n        <HugeiconsIcon\r\n          icon={tickIcon}\r\n          strokeWidth={2.5}\r\n          className={cn(\"size-4.5 sm:size-4\", checkmarkClasses)}\r\n        />\r\n      </RadioPrimitive.Indicator>\r\n    </RadioPrimitive.Root>\r\n  );\r\n}\r\n\r\nexport {\r\n  BaseDrawer,\r\n  BaseDrawerBackdrop,\r\n  BaseDrawerBar,\r\n  BaseDrawerClose,\r\n  BaseDrawerContent,\r\n  BaseDrawerDescription,\r\n  BaseDrawerFooter,\r\n  BaseDrawerHeader,\r\n  BaseDrawerIndent,\r\n  BaseDrawerIndentBackground,\r\n  BaseDrawerMenu,\r\n  BaseDrawerMenuCheckboxItem,\r\n  BaseDrawerMenuItem,\r\n  BaseDrawerMenuGroup,\r\n  BaseDrawerMenuGroupLabel,\r\n  BaseDrawerMenuRadioGroup,\r\n  BaseDrawerMenuRadioItem,\r\n  BaseDrawerMenuSeparator,\r\n  BaseDrawerMenuTrigger,\r\n  BaseDrawerPanel,\r\n  BaseDrawerPopup,\r\n  BaseDrawerPortal,\r\n  BaseDrawerProvider,\r\n  BaseDrawerSwipeArea,\r\n  BaseDrawerTitle,\r\n  BaseDrawerTrigger,\r\n  BaseDrawerViewport,\r\n  createBaseDrawerHandle,\r\n  DrawerPrimitive,\r\n};\r\n\r\nexport type { DrawerPosition };\r\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/base-drawer.tsx"
    }
  ],
  "type": "registry:ui"
}