{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-drawer",
  "title": "Masai Drawer",
  "description": "Controlled drawer component with bottom/right/left directions and swipe-close behavior on mobile.",
  "dependencies": [
    "vaul",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/masai-drawer.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer } from \"vaul\";\nimport { X } from \"lucide-react\";\n\nimport { MasaiButton } from \"@/registry/components/masai-button\";\nimport { cn } from \"@/lib/utils\";\n\ntype DrawerDirection = \"bottom\" | \"right\" | \"left\";\n\ntype MasaiDrawerProps = {\n  isOpen: boolean;\n  onOpenChange: (isOpen: boolean) => void;\n  content: React.ReactNode | React.ComponentType;\n  direction?: DrawerDirection;\n  sideMarginInPx?: number;\n  title?: React.ReactNode;\n  showCloseButton?: boolean;\n  className?: string;\n  overlayClassName?: string;\n};\n\nfunction resolveContent(content: MasaiDrawerProps[\"content\"]) {\n  if (React.isValidElement(content)) return content;\n  if (typeof content === \"function\") {\n    const Content = content as React.ComponentType;\n    return <Content />;\n  }\n  return content;\n}\n\nconst drawerDirectionClassNames: Record<DrawerDirection, string> = {\n  bottom: \"left-0 right-0 bottom-0 max-h-[88svh] rounded-t-2xl border-t\",\n  right: \"right-0 top-0 h-svh w-[420px] max-w-full border-l\",\n  left: \"left-0 top-0 h-svh w-[420px] max-w-full border-r\",\n};\n\nexport function MasaiDrawer({\n  isOpen,\n  onOpenChange,\n  content,\n  direction = \"bottom\",\n  sideMarginInPx,\n  title,\n  showCloseButton = true,\n  className,\n  overlayClassName,\n}: MasaiDrawerProps) {\n  const renderedContent = React.useMemo(() => resolveContent(content), [content]);\n  const hasFloatingMargin = typeof sideMarginInPx === \"number\" && sideMarginInPx > 0;\n  const floatingPanelStyle = React.useMemo(() => {\n    if (!hasFloatingMargin || !sideMarginInPx) return undefined;\n\n    const spacing = `${sideMarginInPx}px`;\n    const viewportInsetWidth = `calc(100vw - ${sideMarginInPx * 2}px)`;\n    const viewportInsetHeight = `calc(100svh - ${sideMarginInPx * 2}px)`;\n\n    if (direction === \"right\") {\n      return {\n        top: spacing,\n        right: spacing,\n        bottom: spacing,\n        width: `min(420px, ${viewportInsetWidth})`,\n        height: viewportInsetHeight,\n      } as React.CSSProperties;\n    }\n\n    if (direction === \"left\") {\n      return {\n        top: spacing,\n        left: spacing,\n        bottom: spacing,\n        width: `min(420px, ${viewportInsetWidth})`,\n        height: viewportInsetHeight,\n      } as React.CSSProperties;\n    }\n\n    return {\n      top: spacing,\n      left: spacing,\n      right: spacing,\n      bottom: spacing,\n      height: viewportInsetHeight,\n    } as React.CSSProperties;\n  }, [direction, hasFloatingMargin, sideMarginInPx]);\n\n  return (\n    <Drawer.Root\n      open={isOpen}\n      onOpenChange={onOpenChange}\n      direction={direction}\n      modal\n      shouldScaleBackground={false}\n      dismissible\n    >\n      <Drawer.Portal>\n        <Drawer.Overlay\n          onClick={() => onOpenChange(false)}\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/50 transition-opacity duration-300 ease-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100\",\n            overlayClassName,\n          )}\n        />\n        <Drawer.Content className=\"fixed inset-0 z-50 bg-transparent outline-none\">\n          <button\n            type=\"button\"\n            aria-label=\"Close drawer backdrop\"\n            className=\"absolute inset-0 pointer-events-auto\"\n            onClick={() => onOpenChange(false)}\n          />\n          <div\n            style={floatingPanelStyle}\n            className={cn(\n              \"pointer-events-auto fixed z-50 flex flex-col border bg-white font-poppins shadow-xl outline-none\",\n              hasFloatingMargin\n                ? \"rounded-2xl\"\n                : drawerDirectionClassNames[direction],\n              className,\n            )}\n          >\n            {direction === \"bottom\" ? (\n              <div className=\"mx-auto mt-2 h-1.5 w-12 rounded-full bg-muted-foreground/30\" />\n            ) : null}\n\n            {title || showCloseButton ? (\n              <div className=\"flex items-center justify-between gap-3 border-b p-4\">\n                <Drawer.Title className=\"text-lg font-semibold text-slate-900\">\n                  {title ?? \"Drawer\"}\n                </Drawer.Title>\n                {showCloseButton ? (\n                  <MasaiButton\n                    type=\"tertiary\"\n                    size=\"sm\"\n                    iconOnly\n                    icon={<X size={16} />}\n                    htmlType=\"button\"\n                    onClick={() => onOpenChange(false)}\n                    aria-label=\"Close drawer\"\n                    className=\"!h-8 !w-8 !rounded-md !border !border-slate-200 !text-slate-500 hover:!bg-slate-50 hover:!text-slate-800\"\n                  />\n                ) : null}\n              </div>\n            ) : null}\n\n            <div className=\"min-h-0 flex-1 overflow-y-auto p-4\">{renderedContent}</div>\n          </div>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  );\n}\n\nexport type { DrawerDirection, MasaiDrawerProps };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}