@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/dist/primitives/dialog.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 const Dialog = DialogPrimitive.Root;
@@ -13,6 +14,7 @@ const DialogOverlay = React.forwardRef(({ className, elevated, ...props }, ref)
   DialogPrimitive.Overlay,
   {
     ref,
+    "data-slot": "dialog-overlay",
     className: cn(
       "fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out",
       elevated ? "z-modal-elevated" : "z-modal",
@@ -22,58 +24,230 @@ const DialogOverlay = React.forwardRef(({ className, elevated, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, elevated, ...props }, ref) => {
-  const t = useT();
-  React.useEffect(() => {
-    return () => {
-      if (typeof window === "undefined") return;
-      window.setTimeout(() => {
-        if (document.querySelector('[data-dialog-content][data-state="open"]')) return;
-        document.body.style.removeProperty("overflow");
-        document.body.style.removeProperty("pointer-events");
-      }, 0);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, { elevated }),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+const dialogContentVariants = cva(
+  "fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-xl border-t bg-card p-6 shadow-lg sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      size: {
+        sm: "sm:max-w-sm",
+        default: "sm:max-w-lg",
+        lg: "sm:max-w-2xl",
+        xl: "sm:max-w-4xl"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const DialogContent = React.forwardRef(
+  ({
+    className,
+    children,
+    elevated,
+    size,
+    dismissible = true,
+    closeAriaLabel,
+    ...props
+  }, ref) => {
+    const t = useT();
+    React.useEffect(() => {
+      return () => {
+        if (typeof window === "undefined") return;
+        window.setTimeout(() => {
+          if (document.querySelector('[data-dialog-content][data-state="open"]')) return;
+          document.body.style.removeProperty("overflow");
+          document.body.style.removeProperty("pointer-events");
+        }, 0);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+      /* @__PURE__ */ jsx(DialogOverlay, { elevated }),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          "data-dialog-content": "",
+          "data-slot": "dialog-content",
+          "data-size": size ?? "default",
+          className: cn(
+            dialogContentVariants({ size }),
+            elevated ? "z-modal-elevated" : "z-modal",
+            className
+          ),
+          ...props,
+          children: [
+            dismissible ? /* @__PURE__ */ jsx(
+              DialogClose,
+              {
+                "data-dialog-close": "",
+                "data-slot": "dialog-close-button",
+                className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "aria-label": closeAriaLabel ?? t("ui.dialog.close.ariaLabel", "Close"),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            ) : null,
+            children
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DIALOG_HEADER_TONE_CLASS = {
+  default: "border border-input bg-background text-muted-foreground",
+  accent: "bg-accent-indigo/10 text-accent-indigo",
+  success: "bg-status-success-bg text-status-success-icon",
+  warning: "bg-status-warning-bg text-status-warning-icon",
+  error: "bg-status-error-bg text-status-error-icon",
+  info: "bg-status-info-bg text-status-info-icon"
+};
+const DialogHeader = ({
+  className,
+  leading,
+  leadingTone = "default",
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "data-slot": "dialog-header",
+    className: cn(
+      leading ? "flex items-start gap-3 text-left" : "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    ),
+    ...props,
+    children: [
+      leading ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "dialog-header-leading",
+          "data-tone": leadingTone,
+          "aria-hidden": "true",
+          className: cn(
+            "inline-flex size-10 shrink-0 items-center justify-center rounded-full",
+            DIALOG_HEADER_TONE_CLASS[leadingTone]
+          ),
+          children: leading
+        }
+      ) : null,
+      leading ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "dialog-header-text",
+          className: "flex min-w-0 flex-1 flex-col gap-1 text-left",
+          children
+        }
+      ) : children
+    ]
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({
+  className,
+  layout = "default",
+  bordered = true,
+  leading,
+  children,
+  ...props
+}) => {
+  if (layout === "equal") {
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        ref,
-        "data-dialog-content": "",
+        "data-slot": "dialog-footer",
+        "data-layout": "equal",
+        "data-bordered": bordered ? "true" : void 0,
         className: cn(
-          "fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg",
-          elevated ? "z-modal-elevated" : "z-modal",
-          "sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border",
-          "focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
+          // Per Figma: thin border-t separator above the footer in
+          // every Modal Footer [1.1] variant. Rule is inset inside
+          // the DialogContent's `p-6` padding — true edge-to-edge
+          // ran the footer's layout box past the parent's
+          // overflow-y-auto scrollbar gutter, pushing the scrollbar
+          // outside the rounded card (caught in QuickDeal modal
+          // testing). Edge-to-edge polish deferred to a v6 dialog
+          // restructure that splits scrolling body from sticky
+          // header/footer.
+          bordered ? "border-t border-input pt-4" : "",
+          "flex flex-row gap-2 [&>*]:flex-1",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (leading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "dialog-footer",
+        "data-layout": "default",
+        "data-bordered": bordered ? "true" : void 0,
+        className: cn(
+          // Per Figma: thin border-t separator above the footer in
+          // every Modal Footer [1.1] variant. Rule is inset inside
+          // the DialogContent's `p-6` padding — true edge-to-edge
+          // ran the footer's layout box past the parent's
+          // overflow-y-auto scrollbar gutter, pushing the scrollbar
+          // outside the rounded card (caught in QuickDeal modal
+          // testing). Edge-to-edge polish deferred to a v6 dialog
+          // restructure that splits scrolling body from sticky
+          // header/footer.
+          bordered ? "border-t border-input pt-4" : "",
+          "flex flex-col gap-3 sm:flex-row sm:items-center",
           className
         ),
         ...props,
         children: [
           /* @__PURE__ */ jsx(
-            DialogClose,
+            "div",
             {
-              "data-dialog-close": "",
-              className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              "aria-label": t("ui.dialog.close.ariaLabel", "Close"),
-              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              "data-slot": "dialog-footer-leading",
+              className: "inline-flex items-center gap-2 sm:mr-auto",
+              children: leading
             }
           ),
-          children
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "dialog-footer-trailing",
+              className: "flex flex-col-reverse gap-2 sm:flex-row sm:items-center",
+              children
+            }
+          )
         ]
       }
-    )
-  ] });
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      "data-layout": "default",
+      "data-bordered": bordered ? "true" : void 0,
+      className: cn(
+        // Per Figma: the border-t separator runs edge-to-edge across
+        // the modal card (terminates at the rounded corners), NOT
+        // inset inside the DialogContent's `p-6` padding. We escape
+        // the parent's horizontal padding with `-mx-6` and re-apply
+        // `px-6` so the button row keeps its inset position.
+        bordered ? "-mx-6 border-t border-input px-6 pt-4" : "",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
 DialogFooter.displayName = "DialogFooter";
 const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
+    "data-slot": "dialog-title",
     className: cn("text-lg font-semibold leading-none tracking-tight", className),
     ...props
   }
@@ -83,6 +257,7 @@ const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
+    "data-slot": "dialog-description",
     className: cn("text-sm text-muted-foreground", className),
     ...props
   }

package/dist/primitives/dialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/dialog.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n     *  Use when this dialog is opened from inside a popover so it isn't occluded. */\n    elevated?: boolean\n  }\n>(({ className, elevated, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',\n      elevated ? 'z-modal-elevated' : 'z-modal',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n     *  Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog\n     *  inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */\n    elevated?: boolean\n  }\n>(({ className, children, elevated, ...props }, ref) => {\n  const t = useT()\n\n  React.useEffect(() => {\n    return () => {\n      if (typeof window === 'undefined') return\n      window.setTimeout(() => {\n        if (document.querySelector('[data-dialog-content][data-state=\"open\"]')) return\n        document.body.style.removeProperty('overflow')\n        document.body.style.removeProperty('pointer-events')\n      }, 0)\n    }\n  }, [])\n\n  return (\n    <DialogPortal>\n      <DialogOverlay elevated={elevated} />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-dialog-content=\"\"\n        // Sizing: mobile uses a bottom-sheet (`fixed inset-x-0 bottom-0`) that resizes to\n        // the form's content with a cap at 90% viewport height. The previous version forced\n        // `min-h-[50vh]`, which made every short dialog (Quick deal, Add stage, Change\n        // owner, etc.) render as a half-screen panel with an empty block below the form.\n        // Desktop (`sm:`) already used `h-auto`/`min-h-0`, so it's unchanged here.\n        className={cn(\n          'fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',\n          elevated ? 'z-modal-elevated' : 'z-modal',\n          'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',\n          'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',\n          className,\n        )}\n        {...props}\n      >\n        <DialogClose\n          data-dialog-close=\"\"\n          className=\"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n          aria-label={t('ui.dialog.close.ariaLabel', 'Close')}\n        >\n          <X className=\"h-4 w-4\" />\n        </DialogClose>\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n})\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
-  "mappings": ";AAwBE,cAqCI,YArCJ;AAtBF,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAClB,SAAS,UAAU;AACnB,SAAS,YAAY;AAErB,MAAM,SAAS,gBAAgB;AAE/B,MAAM,gBAAgB,gBAAgB;AAEtC,MAAM,eAAe,gBAAgB;AAErC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,gBAAgB,MAAM,WAO1B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QACpC;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,WAAW,qBAAqB;AAAA,MAChC;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,CACD;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,gBAAgB,MAAM,WAQ1B,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACtD,QAAM,IAAI,KAAK;AAEf,QAAM,UAAU,MAAM;AACpB,WAAO,MAAM;AACX,UAAI,OAAO,WAAW,YAAa;AACnC,aAAO,WAAW,MAAM;AACtB,YAAI,SAAS,cAAc,0CAA0C,EAAG;AACxE,iBAAS,KAAK,MAAM,eAAe,UAAU;AAC7C,iBAAS,KAAK,MAAM,eAAe,gBAAgB;AAAA,MACrD,GAAG,CAAC;AAAA,IACN;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc,UAAoB;AAAA,IACnC;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,uBAAoB;AAAA,QAMpB,WAAW;AAAA,UACT;AAAA,UACA,WAAW,qBAAqB;AAAA,UAChC;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,qBAAkB;AAAA,cAClB,WAAU;AAAA,cACV,cAAY,EAAE,6BAA6B,OAAO;AAAA,cAElD,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,UACzB;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AACD,cAAc,cAAc,gBAAgB,QAAQ;AAEpD,MAAM,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1C,oBAAC,SAAI,WAAW,GAAG,sDAAsD,SAAS,GAAI,GAAG,OAAO;AAElG,aAAa,cAAc;AAE3B,MAAM,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,MAC1C,oBAAC,SAAI,WAAW,GAAG,0DAA0D,SAAS,GAAI,GAAG,OAAO;AAEtG,aAAa,cAAc;AAE3B,MAAM,cAAc,MAAM,WAGxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qDAAqD,SAAS;AAAA,IAC3E,GAAG;AAAA;AACN,CACD;AACD,YAAY,cAAc,gBAAgB,MAAM;AAEhD,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,kBAAkB,cAAc,gBAAgB,YAAY;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\n/**\n * Modal dialog primitive. Phase B.7 rewrite per Figma `Modals` page\n * (`466:4630`) \u2014 `Modal Header [1.1]` (`466:4778`, title + optional\n * leading icon badge + optional description), `Modal Footer [1.1]`\n * (`472:566`, right-aligned buttons or 50/50 stretched layout),\n * `Status Modals [1.1]` (`480:1372`, status-icon hero variant).\n *\n * Backward compatibility (40 import sites \u2014 every dialog in the\n * product). All existing exports (`Dialog`, `DialogTrigger`,\n * `DialogPortal`, `DialogOverlay`, `DialogClose`, `DialogContent`,\n * `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`)\n * stay callable verbatim. Default `size=\"default\"` reproduces the\n * original `sm:max-w-lg` width; default header has no leading badge;\n * default footer is right-aligned (current look).\n *\n * New (additive):\n *   DialogContent:\n *     - `size: 'sm' | 'default' | 'lg' | 'xl'` \u2014 max-width breakpoints\n *     - `dismissible: boolean` (default `true`) \u2014 render the auto X\n *       top-right close button\n *\n *   DialogHeader:\n *     - `leading?: ReactNode` \u2014 `size-10 rounded-full border` icon\n *       badge to the left of the title block (matches Figma `Modal\n *       Header [1.1]` icon-prefixed variants \u2014 same chrome as the\n *       Drawer header leading slot)\n *\n *   DialogFooter:\n *     - `layout: 'default' | 'equal'` (default `default`) \u2014 `equal`\n *       stretches children flex-1 for 50/50 confirmation footers\n *       (Figma `Modal Footer [1.1]` variant 1)\n */\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {\n    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n     *  Use when this dialog is opened from inside a popover so it isn't occluded. */\n    elevated?: boolean\n  }\n>(({ className, elevated, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"dialog-overlay\"\n    className={cn(\n      'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',\n      elevated ? 'z-modal-elevated' : 'z-modal',\n      className,\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst dialogContentVariants = cva(\n  'fixed inset-x-0 bottom-0 flex max-h-[90vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-xl border-t bg-card p-6 shadow-lg sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',\n  {\n    variants: {\n      size: {\n        sm: 'sm:max-w-sm',\n        default: 'sm:max-w-lg',\n        lg: 'sm:max-w-2xl',\n        xl: 'sm:max-w-4xl',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nexport type DialogContentProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Content\n> &\n  VariantProps<typeof dialogContentVariants> & {\n    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).\n     *  Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog\n     *  inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */\n    elevated?: boolean\n    /** Render the auto X top-right close button. @default true */\n    dismissible?: boolean\n    /** Aria label for the auto X close button. Defaults to the\n     * `ui.dialog.close.ariaLabel` translation (`\"Close\"`). */\n    closeAriaLabel?: string\n  }\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(\n  (\n    {\n      className,\n      children,\n      elevated,\n      size,\n      dismissible = true,\n      closeAriaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const t = useT()\n\n    React.useEffect(() => {\n      return () => {\n        if (typeof window === 'undefined') return\n        window.setTimeout(() => {\n          if (document.querySelector('[data-dialog-content][data-state=\"open\"]')) return\n          document.body.style.removeProperty('overflow')\n          document.body.style.removeProperty('pointer-events')\n        }, 0)\n      }\n    }, [])\n\n    return (\n      <DialogPortal>\n        <DialogOverlay elevated={elevated} />\n        <DialogPrimitive.Content\n          ref={ref}\n          data-dialog-content=\"\"\n          data-slot=\"dialog-content\"\n          data-size={size ?? 'default'}\n          className={cn(\n            dialogContentVariants({ size }),\n            elevated ? 'z-modal-elevated' : 'z-modal',\n            className,\n          )}\n          {...props}\n        >\n          {dismissible ? (\n            <DialogClose\n              data-dialog-close=\"\"\n              data-slot=\"dialog-close-button\"\n              className=\"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n              aria-label={closeAriaLabel ?? t('ui.dialog.close.ariaLabel', 'Close')}\n            >\n              <X className=\"h-4 w-4\" />\n            </DialogClose>\n          ) : null}\n          {children}\n        </DialogPrimitive.Content>\n      </DialogPortal>\n    )\n  },\n)\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nexport type DialogHeaderTone =\n  | 'default'\n  | 'accent'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info'\n\n// Soft-tinted status leading badges per canonical Figma `Status\n// Modals [1.1]` (`480:1372`). Each status tone uses the soft tint\n// background paired with a saturated colored icon (red `!` on light\n// pink, amber triangle on light amber, green check on light green,\n// indigo `i` on light indigo). The bordered `default` tone keeps\n// the white-bg + border-input shell for generic settings icons per\n// `Modal Header [1.1]` (`466:4778`).\nconst DIALOG_HEADER_TONE_CLASS: Record<DialogHeaderTone, string> = {\n  default: 'border border-input bg-background text-muted-foreground',\n  accent: 'bg-accent-indigo/10 text-accent-indigo',\n  success: 'bg-status-success-bg text-status-success-icon',\n  warning: 'bg-status-warning-bg text-status-warning-icon',\n  error: 'bg-status-error-bg text-status-error-icon',\n  info: 'bg-status-info-bg text-status-info-icon',\n}\n\nexport type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Optional leading icon \u2014 rendered inside a size-10 rounded-full\n   * badge to the left of the title block. Matches Figma `Modal\n   * Header [1.1]` icon-prefixed variants and `Status Modals [1.1]`\n   * status-tinted badges. */\n  leading?: React.ReactNode\n  /** Visual tone for the leading badge. `default` keeps the\n   * bordered white badge (generic settings icons); status tones\n   * (`success`/`warning`/`error`/`info`) use the matching\n   * `bg-status-*-bg text-status-*-icon` tint per Figma `Status\n   * Modals [1.1]`. Use `error` / `warning` to signal destructive\n   * flows via the badge instead of a red CTA button.\n   * @default 'default' */\n  leadingTone?: DialogHeaderTone\n}\n\nconst DialogHeader = ({\n  className,\n  leading,\n  leadingTone = 'default',\n  children,\n  ...props\n}: DialogHeaderProps) => (\n  <div\n    data-slot=\"dialog-header\"\n    className={cn(\n      leading ? 'flex items-start gap-3 text-left' : 'flex flex-col space-y-1.5 text-center sm:text-left',\n      className,\n    )}\n    {...props}\n  >\n    {leading ? (\n      <span\n        data-slot=\"dialog-header-leading\"\n        data-tone={leadingTone}\n        aria-hidden=\"true\"\n        className={cn(\n          'inline-flex size-10 shrink-0 items-center justify-center rounded-full',\n          DIALOG_HEADER_TONE_CLASS[leadingTone],\n        )}\n      >\n        {leading}\n      </span>\n    ) : null}\n    {leading ? (\n      <div\n        data-slot=\"dialog-header-text\"\n        className=\"flex min-w-0 flex-1 flex-col gap-1 text-left\"\n      >\n        {children}\n      </div>\n    ) : (\n      children\n    )}\n  </div>\n)\nDialogHeader.displayName = 'DialogHeader'\n\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Footer layout. `default` reproduces the original\n   * `flex flex-col-reverse gap-2 sm:flex-row sm:justify-end` look.\n   * `equal` stretches children flex-1 for 50/50 confirmation footers\n   * per Figma `Modal Footer [1.1]` variant 1. */\n  layout?: 'default' | 'equal'\n  /** Render the canonical `border-t` separator above the button row.\n   * Per Figma `Modal Footer [1.1]` every variant ships the rule.\n   * @default true */\n  bordered?: boolean\n  /** Optional left-side slot \u2014 typically a \"Don't show it again\"\n   * CheckboxField, a \"Remember me\" Switch, a left link button, or a\n   * step-indicator. Per Figma `Modal Footer [1.1]` variants 2\u20136.\n   * When provided, children stay right-aligned and the leading slot\n   * anchors left. Mutually exclusive with `layout=\"equal\"` (the\n   * 50/50 split is a confirmation-flow shape that doesn't combine\n   * with the leading-content footers per Figma). */\n  leading?: React.ReactNode\n}\n\nconst DialogFooter = ({\n  className,\n  layout = 'default',\n  bordered = true,\n  leading,\n  children,\n  ...props\n}: DialogFooterProps) => {\n  if (layout === 'equal') {\n    return (\n      <div\n        data-slot=\"dialog-footer\"\n        data-layout=\"equal\"\n        data-bordered={bordered ? 'true' : undefined}\n        className={cn(\n          // Per Figma: thin border-t separator above the footer in\n          // every Modal Footer [1.1] variant. Rule is inset inside\n          // the DialogContent's `p-6` padding \u2014 true edge-to-edge\n          // ran the footer's layout box past the parent's\n          // overflow-y-auto scrollbar gutter, pushing the scrollbar\n          // outside the rounded card (caught in QuickDeal modal\n          // testing). Edge-to-edge polish deferred to a v6 dialog\n          // restructure that splits scrolling body from sticky\n          // header/footer.\n          bordered ? 'border-t border-input pt-4' : '',\n          'flex flex-row gap-2 [&>*]:flex-1',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (leading) {\n    return (\n      <div\n        data-slot=\"dialog-footer\"\n        data-layout=\"default\"\n        data-bordered={bordered ? 'true' : undefined}\n        className={cn(\n          // Per Figma: thin border-t separator above the footer in\n          // every Modal Footer [1.1] variant. Rule is inset inside\n          // the DialogContent's `p-6` padding \u2014 true edge-to-edge\n          // ran the footer's layout box past the parent's\n          // overflow-y-auto scrollbar gutter, pushing the scrollbar\n          // outside the rounded card (caught in QuickDeal modal\n          // testing). Edge-to-edge polish deferred to a v6 dialog\n          // restructure that splits scrolling body from sticky\n          // header/footer.\n          bordered ? 'border-t border-input pt-4' : '',\n          'flex flex-col gap-3 sm:flex-row sm:items-center',\n          className,\n        )}\n        {...props}\n      >\n        <div\n          data-slot=\"dialog-footer-leading\"\n          className=\"inline-flex items-center gap-2 sm:mr-auto\"\n        >\n          {leading}\n        </div>\n        <div\n          data-slot=\"dialog-footer-trailing\"\n          className=\"flex flex-col-reverse gap-2 sm:flex-row sm:items-center\"\n        >\n          {children}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      data-layout=\"default\"\n      data-bordered={bordered ? 'true' : undefined}\n      className={cn(\n        // Per Figma: the border-t separator runs edge-to-edge across\n      // the modal card (terminates at the rounded corners), NOT\n      // inset inside the DialogContent's `p-6` padding. We escape\n      // the parent's horizontal padding with `-mx-6` and re-apply\n      // `px-6` so the button row keeps its inset position.\n      bordered ? '-mx-6 border-t border-input px-6 pt-4' : '',\n        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    data-slot=\"dialog-title\"\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    data-slot=\"dialog-description\"\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/primitives/drawer.js

@@ -0,0 +1,219 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "@open-mercato/shared/lib/utils";
+const Drawer = DialogPrimitive.Root;
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerPortal = DialogPrimitive.Portal;
+const DrawerClose = DialogPrimitive.Close;
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "drawer-overlay",
+    className: cn(
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const drawerContentVariants = cva(
+  // Base layout — fixed position, flex column so DrawerHeader / Body
+  // / Footer compose vertically with the body filling free space.
+  // Per Figma the panel has rounded corners on the inner (viewport-
+  // facing) edges only, no border on the seam, and a generous shadow.
+  "fixed z-popover flex flex-col gap-0 bg-background shadow-2xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-200 data-[state=closed]:duration-150",
+  {
+    variants: {
+      side: {
+        right: "inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+        left: "inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+        top: "inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 max-h-[80vh] w-full rounded-t-xl data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom"
+      }
+    },
+    defaultVariants: { side: "right" }
+  }
+);
+const DrawerContent = React.forwardRef(
+  ({
+    className,
+    side,
+    children,
+    hideCloseButton = false,
+    closeAriaLabel = "Close",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "drawer-content",
+        "data-side": side ?? "right",
+        className: cn(drawerContentVariants({ side }), className),
+        ...props,
+        children: [
+          children,
+          !hideCloseButton ? /* @__PURE__ */ jsx(
+            DrawerClose,
+            {
+              "data-slot": "drawer-close-button",
+              "aria-label": closeAriaLabel,
+              className: cn(
+                "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors",
+                "hover:bg-muted/40 hover:text-foreground",
+                "focus-visible:shadow-focus"
+              ),
+              children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] })
+);
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = React.forwardRef(
+  ({ className, leading, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "drawer-header",
+      className: cn(
+        // Per Figma: no chrome border below the header. Padding-right
+        // reserves room for the auto-close button at top-right.
+        "flex items-start gap-3 px-6 pt-5 pb-4 pr-14",
+        className
+      ),
+      ...props,
+      children: [
+        leading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "drawer-header-leading",
+            "aria-hidden": "true",
+            className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground",
+            children: leading
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { "data-slot": "drawer-header-text", className: "flex min-w-0 flex-1 flex-col gap-1", children })
+      ]
+    }
+  )
+);
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerBody = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "drawer-body",
+      className: cn("flex-1 overflow-y-auto px-6 py-2", className),
+      ...props
+    }
+  )
+);
+DrawerBody.displayName = "DrawerBody";
+const DrawerFooter = React.forwardRef(
+  ({ className, layout = "default", leading, children, ...props }, ref) => {
+    const childArray = React.Children.toArray(children);
+    if (layout === "equal") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "drawer-footer",
+          "data-layout": "equal",
+          className: cn(
+            // Per Figma: no chrome top-border separator; equal-stretch
+            // children share the row (50/50 for two buttons).
+            "flex flex-row items-center gap-3 px-6 pt-4 pb-5 [&>*]:flex-1",
+            className
+          ),
+          ...props,
+          children: childArray
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "drawer-footer",
+        "data-layout": "default",
+        className: cn(
+          // Per Figma: no chrome top-border. Optional `leading` anchors
+          // left (mr-auto sibling), buttons stay right-aligned.
+          "flex flex-row items-center gap-3 px-6 pt-4 pb-5",
+          className
+        ),
+        ...props,
+        children: [
+          leading ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "drawer-footer-leading",
+              className: "mr-auto inline-flex items-center gap-2",
+              children: leading
+            }
+          ) : null,
+          childArray.length > 0 ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "drawer-footer-trailing",
+              className: cn(
+                "inline-flex items-center gap-3",
+                leading ? "" : "ml-auto"
+              ),
+              children: childArray
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "drawer-title",
+    className: cn("text-base font-semibold leading-tight text-foreground", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = DialogPrimitive.Title.displayName;
+const DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "drawer-description",
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = DialogPrimitive.Description.displayName;
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  drawerContentVariants
+};
+//# sourceMappingURL=drawer.js.map

package/dist/primitives/drawer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/drawer.tsx"],
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\n/**\n * Side-sheet primitive \u2014 slides in from `right` (default), `left`,\n * `top`, or `bottom`. Distinct from `Dialog`:\n *\n *   `Drawer`  \u2014 contextual / non-blocking-feeling. Used for detail\n *               panes, secondary forms, mobile menus. The user can\n *               glance at it while the surrounding page stays visible\n *               at a glance behind the overlay.\n *   `Dialog`  \u2014 modal / focused. Used for confirmations, critical\n *               forms, and full-content workflows that should fully\n *               replace the page underneath.\n *\n * Built on `@radix-ui/react-dialog` (Radix Dialog under the hood \u2014\n * inherits role=\"dialog\", aria-modal, focus trap, ESC to close,\n * outside-click to dismiss).\n *\n * Figma source: DS Open Mercato `Drawer` page (`486:7366`) \u2014\n * `Drawer Header [1.1]` (`3187:2897`) covers 4 header variants\n * (title only / title + leading icon / title + description /\n * title + description + leading icon badge); `Drawer Footer [1.1]`\n * (`4096:21416`) covers 6 footer variants (50/50 stretched, right-\n * aligned compact, left checkbox + right buttons, left switch +\n * right buttons, left step dots + right buttons, left link button +\n * right buttons). Per the Figma examples the panel has rounded\n * corners on the inner (viewport-facing) edges only, no border on\n * the seam, and no chrome-level dividers between header / body /\n * footer (separators inside the body come from content, not the\n * Drawer).\n *\n * ```tsx\n * const [open, setOpen] = React.useState(false)\n * <Drawer open={open} onOpenChange={setOpen} side=\"right\">\n *   <DrawerTrigger asChild>\n *     <Button>Open drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader leading={<Clock />}>\n *       <DrawerTitle>Edit person</DrawerTitle>\n *       <DrawerDescription>Update the person's contact info.</DrawerDescription>\n *     </DrawerHeader>\n *     <DrawerBody>{children}</DrawerBody>\n *     <DrawerFooter layout=\"equal\">\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Cancel</Button>\n *       </DrawerClose>\n *       <Button>Continue</Button>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\n\nconst Drawer = DialogPrimitive.Root\nconst DrawerTrigger = DialogPrimitive.Trigger\nconst DrawerPortal = DialogPrimitive.Portal\nconst DrawerClose = DialogPrimitive.Close\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"drawer-overlay\"\n    className={cn(\n      'fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n      className,\n    )}\n    {...props}\n  />\n))\nDrawerOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst drawerContentVariants = cva(\n  // Base layout \u2014 fixed position, flex column so DrawerHeader / Body\n  // / Footer compose vertically with the body filling free space.\n  // Per Figma the panel has rounded corners on the inner (viewport-\n  // facing) edges only, no border on the seam, and a generous shadow.\n  'fixed z-popover flex flex-col gap-0 bg-background shadow-2xl outline-none ' +\n    'data-[state=open]:animate-in data-[state=closed]:animate-out ' +\n    'data-[state=open]:duration-200 data-[state=closed]:duration-150',\n  {\n    variants: {\n      side: {\n        right:\n          'inset-y-0 right-0 h-full w-full max-w-md rounded-l-xl ' +\n          'data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',\n        left:\n          'inset-y-0 left-0 h-full w-full max-w-md rounded-r-xl ' +\n          'data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',\n        top:\n          'inset-x-0 top-0 max-h-[80vh] w-full rounded-b-xl ' +\n          'data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 max-h-[80vh] w-full rounded-t-xl ' +\n          'data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',\n      },\n    },\n    defaultVariants: { side: 'right' },\n  },\n)\n\nexport type DrawerContentProps = React.ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Content\n> &\n  VariantProps<typeof drawerContentVariants> & {\n    /** Hide the default top-right close button. */\n    hideCloseButton?: boolean\n    /** ARIA label for the auto-rendered close button. Default `\"Close\"`. */\n    closeAriaLabel?: string\n  }\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      className,\n      side,\n      children,\n      hideCloseButton = false,\n      closeAriaLabel = 'Close',\n      ...props\n    },\n    ref,\n  ) => (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"drawer-content\"\n        data-side={side ?? 'right'}\n        className={cn(drawerContentVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {!hideCloseButton ? (\n          <DrawerClose\n            data-slot=\"drawer-close-button\"\n            aria-label={closeAriaLabel}\n            className={cn(\n              'absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',\n              'hover:bg-muted/40 hover:text-foreground',\n              'focus-visible:shadow-focus',\n            )}\n          >\n            <X aria-hidden=\"true\" className=\"size-4\" />\n          </DrawerClose>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DrawerPortal>\n  ),\n)\nDrawerContent.displayName = 'DrawerContent'\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Optional leading icon \u2014 rendered inside a size-10 bordered circle\n   * badge to the left of the title block. Matches Figma `Drawer Header\n   * [1.1]` variants 2 + 4 (icon-prefixed title). Pass a `lucide-react`\n   * icon element (size-4 recommended) or any inline node.\n   */\n  leading?: React.ReactNode\n}\n\nconst DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, leading, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"drawer-header\"\n      className={cn(\n        // Per Figma: no chrome border below the header. Padding-right\n        // reserves room for the auto-close button at top-right.\n        'flex items-start gap-3 px-6 pt-5 pb-4 pr-14',\n        className,\n      )}\n      {...props}\n    >\n      {leading ? (\n        <span\n          data-slot=\"drawer-header-leading\"\n          aria-hidden=\"true\"\n          className=\"inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground\"\n        >\n          {leading}\n        </span>\n      ) : null}\n      <div data-slot=\"drawer-header-text\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        {children}\n      </div>\n    </div>\n  ),\n)\nDrawerHeader.displayName = 'DrawerHeader'\n\nconst DrawerBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"drawer-body\"\n      className={cn('flex-1 overflow-y-auto px-6 py-2', className)}\n      {...props}\n    />\n  ),\n)\nDrawerBody.displayName = 'DrawerBody'\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Footer button layout per Figma `Drawer Footer [1.1]`:\n   *   `default` \u2014 right-aligned compact buttons (Cancel + Continue).\n   *   `equal`   \u2014 children stretched to share the row equally (50/50\n   *               for two children). Matches Figma variant 1.\n   * @default 'default'\n   */\n  layout?: 'default' | 'equal'\n  /**\n   * Optional left-side slot \u2014 checkbox (\"Don't show again\"), switch\n   * (\"Remember me\"), step-indicator dots, link button, or any leading\n   * content per Figma footer variants 3\u20136. When provided, children\n   * stay right-aligned and the leading slot anchors left.\n   * Mutually exclusive with `layout=\"equal\"` (Figma never combines\n   * the two \u2014 the 50/50 split is a confirmation-flow shape).\n   */\n  leading?: React.ReactNode\n}\n\nconst DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, layout = 'default', leading, children, ...props }, ref) => {\n    const childArray = React.Children.toArray(children)\n    if (layout === 'equal') {\n      return (\n        <div\n          ref={ref}\n          data-slot=\"drawer-footer\"\n          data-layout=\"equal\"\n          className={cn(\n            // Per Figma: no chrome top-border separator; equal-stretch\n            // children share the row (50/50 for two buttons).\n            'flex flex-row items-center gap-3 px-6 pt-4 pb-5 [&>*]:flex-1',\n            className,\n          )}\n          {...props}\n        >\n          {childArray}\n        </div>\n      )\n    }\n    return (\n      <div\n        ref={ref}\n        data-slot=\"drawer-footer\"\n        data-layout=\"default\"\n        className={cn(\n          // Per Figma: no chrome top-border. Optional `leading` anchors\n          // left (mr-auto sibling), buttons stay right-aligned.\n          'flex flex-row items-center gap-3 px-6 pt-4 pb-5',\n          className,\n        )}\n        {...props}\n      >\n        {leading ? (\n          <div\n            data-slot=\"drawer-footer-leading\"\n            className=\"mr-auto inline-flex items-center gap-2\"\n          >\n            {leading}\n          </div>\n        ) : null}\n        {childArray.length > 0 ? (\n          <div\n            data-slot=\"drawer-footer-trailing\"\n            className={cn(\n              'inline-flex items-center gap-3',\n              leading ? '' : 'ml-auto',\n            )}\n          >\n            {childArray}\n          </div>\n        ) : null}\n      </div>\n    )\n  },\n)\nDrawerFooter.displayName = 'DrawerFooter'\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    data-slot=\"drawer-title\"\n    className={cn('text-base font-semibold leading-tight text-foreground', className)}\n    {...props}\n  />\n))\nDrawerTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    data-slot=\"drawer-description\"\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nDrawerDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Drawer,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerClose,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHeader,\n  DrawerBody,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n  drawerContentVariants,\n}\n"],
+  "mappings": "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",
+  "names": []
+}