@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Dialog — modal window that interrupts the current task with focused content.
+ *
+ * Backdrop overlay, centered content panel, and a built-in focus trap.
+ * Escape and backdrop click both dismiss it. Built on the Radix Dialog
+ * primitive; always renders a close button unless `showCloseButton={false}`
+ * and caps content at `@sm:max-w-sm` — a container query, not a viewport
+ * one: Dialog portals into a single body-level container (`getPortalContainer`
+ * in `@/lib/scope`, `container-type: inline-size`), so this tracks that
+ * container's actual width instead of the raw browser window, which matters
+ * anywhere the host visually constrains it narrower than the real viewport.
+ */
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+/**
+ * WHEN TO USE
+ * - A focused input or detail that interrupts the current task — forms, confirmations, previews
+ * - Content the user must address before returning to what they were doing
+ *
+ * NOT WHEN
+ * - Destructive or irreversible confirmations — use AlertDialog (no backdrop-click dismiss, forces an explicit choice)
+ * - A side panel that keeps page context visible behind it — use Sheet
+ * - Lightweight info anchored to a trigger — use Popover
+ *
+ * KEY RULES
+ * - Dismissible by Escape and backdrop click — never route irreversible actions through it
+ * - `showCloseButton` defaults to true; set false only when DialogFooter supplies its own close action
+ * - DialogFooter can render its own close button via `showCloseButton`, or take children directly for custom actions
+ * - Content caps at `@sm:max-w-sm` (a container query against the shared portal container, not the viewport) — wide content needs a `className` override, not a different component
+ * - A third, unrelated CTA (e.g. "Save as draft" alongside Cancel/Save) goes first in
+ *   DialogFooter with `className="sm:mr-auto"` — the auto margin pushes Cancel/Confirm to the
+ *   far end as their own tight gap-1 pair, while creating a wide, gap-2-equivalent separation
+ *   from the tertiary action. No extra prop needed; DialogFooter's own `flex gap-1` already
+ *   supports this via plain flex mechanics.
+ *
+ * USAGE
+ * <Dialog>
+ *   <DialogTrigger asChild><Button variant="outline">Edit profile</Button></DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Edit profile</DialogTitle>
+ *       <DialogDescription>Make changes here. Click save when done.</DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+ *       <Button>Save changes</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ *
+ * // A third, unrelated action set apart from the Cancel/Save pair
+ * <DialogFooter>
+ *   <Button variant="ghost" className="sm:mr-auto">Save as draft</Button>
+ *   <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+ *   <Button>Publish</Button>
+ * </DialogFooter>
+ */
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAOpD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,qBAQrD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBA8BA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQzE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,eAAuB,EACvB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAuBA;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAW1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG"}

package/dist/components/ui/dialog.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import { Button } from "./button.js";
+import "react";
+import { Dialog as Dialog$1 } from "radix-ui";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/dialog.tsx
+function Dialog({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+		"data-slot": "dialog",
+		...props
+	});
+}
+function DialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+		"data-slot": "dialog-portal",
+		container: getPortalContainer(),
+		...props
+	});
+}
+function DialogClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Overlay, {
+		"data-slot": "dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
+		"data-slot": "dialog-content",
+		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 @sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			"data-slot": "dialog-close",
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: "absolute top-2 right-2",
+				size: "sm",
+				iconOnly: true,
+				"aria-label": "Close",
+				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})]
+	})] });
+}
+function DialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-1 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				children: "Close"
+			})
+		})]
+	});
+}
+function DialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+		"data-slot": "dialog-title",
+		className: cn("text-base leading-none font-medium", className),
+		...props
+	});
+}
+function DialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+		"data-slot": "dialog-description",
+		className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - A focused input or detail that interrupts the current task — forms, confirmations, previews
+* - Content the user must address before returning to what they were doing
+*
+* NOT WHEN
+* - Destructive or irreversible confirmations — use AlertDialog (no backdrop-click dismiss, forces an explicit choice)
+* - A side panel that keeps page context visible behind it — use Sheet
+* - Lightweight info anchored to a trigger — use Popover
+*
+* KEY RULES
+* - Dismissible by Escape and backdrop click — never route irreversible actions through it
+* - `showCloseButton` defaults to true; set false only when DialogFooter supplies its own close action
+* - DialogFooter can render its own close button via `showCloseButton`, or take children directly for custom actions
+* - Content caps at `@sm:max-w-sm` (a container query against the shared portal container, not the viewport) — wide content needs a `className` override, not a different component
+* - A third, unrelated CTA (e.g. "Save as draft" alongside Cancel/Save) goes first in
+*   DialogFooter with `className="sm:mr-auto"` — the auto margin pushes Cancel/Confirm to the
+*   far end as their own tight gap-1 pair, while creating a wide, gap-2-equivalent separation
+*   from the tertiary action. No extra prop needed; DialogFooter's own `flex gap-1` already
+*   supports this via plain flex mechanics.
+*
+* USAGE
+* <Dialog>
+*   <DialogTrigger asChild><Button variant="outline">Edit profile</Button></DialogTrigger>
+*   <DialogContent>
+*     <DialogHeader>
+*       <DialogTitle>Edit profile</DialogTitle>
+*       <DialogDescription>Make changes here. Click save when done.</DialogDescription>
+*     </DialogHeader>
+*     <DialogFooter>
+*       <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+*       <Button>Save changes</Button>
+*     </DialogFooter>
+*   </DialogContent>
+* </Dialog>
+*
+* // A third, unrelated action set apart from the Cancel/Save pair
+* <DialogFooter>
+*   <Button variant="ghost" className="sm:mr-auto">Save as draft</Button>
+*   <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
+*   <Button>Publish</Button>
+* </DialogFooter>
+*/
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+
+//# sourceMappingURL=dialog.js.map

package/dist/components/ui/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/components/ui/dialog.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Dialog — modal window that interrupts the current task with focused content.\n *\n * Backdrop overlay, centered content panel, and a built-in focus trap.\n * Escape and backdrop click both dismiss it. Built on the Radix Dialog\n * primitive; always renders a close button unless `showCloseButton={false}`\n * and caps content at `@sm:max-w-sm` — a container query, not a viewport\n * one: Dialog portals into a single body-level container (`getPortalContainer`\n * in `@/lib/scope`, `container-type: inline-size`), so this tracks that\n * container's actual width instead of the raw browser window, which matters\n * anywhere the host visually constrains it narrower than the real viewport.\n */\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\nimport { Button } from \"@/components/ui/button\"\nimport { XIcon } from \"lucide-react\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return (\n    <DialogPrimitive.Portal\n      data-slot=\"dialog-portal\"\n      container={getPortalContainer()}\n      {...props}\n    />\n  )\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 @sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"sm\"\n              iconOnly\n              aria-label=\"Close\"\n            >\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        // gap-1, not gap-2 — the footer's buttons resolve one decision\n        // together (Cancel/Confirm), a tight cluster, not independent\n        // items (see the action-grouping convention: gap-1 inside a\n        // decision cluster, gap-2 only between that cluster and something\n        // unrelated beside it).\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-1 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n\n/**\n * WHEN TO USE\n * - A focused input or detail that interrupts the current task — forms, confirmations, previews\n * - Content the user must address before returning to what they were doing\n *\n * NOT WHEN\n * - Destructive or irreversible confirmations — use AlertDialog (no backdrop-click dismiss, forces an explicit choice)\n * - A side panel that keeps page context visible behind it — use Sheet\n * - Lightweight info anchored to a trigger — use Popover\n *\n * KEY RULES\n * - Dismissible by Escape and backdrop click — never route irreversible actions through it\n * - `showCloseButton` defaults to true; set false only when DialogFooter supplies its own close action\n * - DialogFooter can render its own close button via `showCloseButton`, or take children directly for custom actions\n * - Content caps at `@sm:max-w-sm` (a container query against the shared portal container, not the viewport) — wide content needs a `className` override, not a different component\n * - A third, unrelated CTA (e.g. \"Save as draft\" alongside Cancel/Save) goes first in\n *   DialogFooter with `className=\"sm:mr-auto\"` — the auto margin pushes Cancel/Confirm to the\n *   far end as their own tight gap-1 pair, while creating a wide, gap-2-equivalent separation\n *   from the tertiary action. No extra prop needed; DialogFooter's own `flex gap-1` already\n *   supports this via plain flex mechanics.\n *\n * USAGE\n * <Dialog>\n *   <DialogTrigger asChild><Button variant=\"outline\">Edit profile</Button></DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Edit profile</DialogTitle>\n *       <DialogDescription>Make changes here. Click save when done.</DialogDescription>\n *     </DialogHeader>\n *     <DialogFooter>\n *       <DialogClose asChild><Button variant=\"outline\">Cancel</Button></DialogClose>\n *       <Button>Save changes</Button>\n *     </DialogFooter>\n *   </DialogContent>\n * </Dialog>\n *\n * // A third, unrelated action set apart from the Cancel/Save pair\n * <DialogFooter>\n *   <Button variant=\"ghost\" className=\"sm:mr-auto\">Save as draft</Button>\n *   <DialogClose asChild><Button variant=\"outline\">Cancel</Button></DialogClose>\n *   <Button>Publish</Button>\n * </DialogFooter>\n */\n"],"mappings":";;;;;;;;;AAuBA,SAAS,OAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAAC,SAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAAC,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OACE,oBAAC,SAAgB,QAAjB;EACE,aAAU;EACV,WAAW,mBAAmB;EAC9B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAAC,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAAC,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,yNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SAGF;CACD,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,2ZACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,mBACC,oBAAC,SAAgB,OAAjB;GAAuB,aAAU;GAAe,SAAA;GAC9C,UAAA,qBAAC,QAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAK;IACL,UAAA;IACA,cAAW;IALb,UAAA,CAOE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;KAAM,WAAU;KAAU,UAAA;IAAW,CAAA,CAC/B;;EACa,CAAA,CAEF;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,kBAAkB,OAClB,UACA,GAAG,SAGF;CACD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAMT,4GACA,SACF;EACA,GAAI;EAXN,UAAA,CAaG,UACA,mBACC,oBAAC,SAAgB,OAAjB;GAAuB,SAAA;GACrB,UAAA,oBAAC,QAAD;IAAQ,SAAQ;IAAU,UAAA;GAAa,CAAA;EAClB,CAAA,CAEtB;;AAET;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GACT,sGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/direction.d.ts

@@ -0,0 +1,35 @@
+/**
+ * DirectionProvider — tells Radix primitives the reading direction (LTR/RTL).
+ *
+ * Thin re-export of radix-ui's Direction.DirectionProvider. Purely behavioral
+ * — it flips keyboard navigation and popover/menu alignment for every Radix
+ * primitive underneath it (Select, DropdownMenu, Tabs, etc.), but renders no
+ * DOM and applies no visual styling itself.
+ */
+import * as React from "react";
+import { Direction } from "radix-ui";
+declare function DirectionProvider({ dir, direction, children, }: React.ComponentProps<typeof Direction.DirectionProvider> & {
+    direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"];
+}): React.JSX.Element;
+declare const useDirection: typeof Direction.useDirection;
+export { DirectionProvider, useDirection };
+/**
+ * WHEN TO USE
+ * - RTL locales — wrap the app (or the RTL subtree) so Radix-based components flip correctly
+ *
+ * NOT WHEN
+ * - LTR-only applications — omit entirely, LTR is the default with no provider
+ * - Visual/layout mirroring — this changes primitive behavior only; still set `dir` on a real
+ *   DOM ancestor (e.g. <html dir="rtl">) for CSS, and use logical spacing utilities (ps-, pe-) instead of left/right
+ *
+ * KEY RULES
+ * - Accepts `dir` or `direction` (alias for `dir`) — both map to the same "ltr" | "rtl" value
+ * - No default: an ancestor with no DirectionProvider falls back to each primitive's own dir detection (typically the DOM's dir attribute)
+ * - useDirection() reads the current value inside any descendant for custom RTL-aware logic
+ *
+ * USAGE
+ * <DirectionProvider dir="rtl">
+ *   <App />
+ * </DirectionProvider>
+ */
+//# sourceMappingURL=direction.d.ts.map

package/dist/components/ui/direction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../src/components/ui/direction.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,iBAAS,iBAAiB,CAAC,EACzB,GAAG,EACH,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,iBAAiB,CAAC,GAAG;IAC5D,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,CAAA;CAC5E,qBAMA;AAED,QAAA,MAAM,YAAY,+BAAyB,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAA;AAE1C;;;;;;;;;;;;;;;;;;GAkBG"}

package/dist/components/ui/direction.js

@@ -0,0 +1,35 @@
+"use client";
+import "react";
+import { Direction } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/direction.tsx
+function DirectionProvider({ dir, direction, children }) {
+	return /* @__PURE__ */ jsx(Direction.DirectionProvider, {
+		dir: direction ?? dir,
+		children
+	});
+}
+var useDirection = Direction.useDirection;
+/**
+* WHEN TO USE
+* - RTL locales — wrap the app (or the RTL subtree) so Radix-based components flip correctly
+*
+* NOT WHEN
+* - LTR-only applications — omit entirely, LTR is the default with no provider
+* - Visual/layout mirroring — this changes primitive behavior only; still set `dir` on a real
+*   DOM ancestor (e.g. <html dir="rtl">) for CSS, and use logical spacing utilities (ps-, pe-) instead of left/right
+*
+* KEY RULES
+* - Accepts `dir` or `direction` (alias for `dir`) — both map to the same "ltr" | "rtl" value
+* - No default: an ancestor with no DirectionProvider falls back to each primitive's own dir detection (typically the DOM's dir attribute)
+* - useDirection() reads the current value inside any descendant for custom RTL-aware logic
+*
+* USAGE
+* <DirectionProvider dir="rtl">
+*   <App />
+* </DirectionProvider>
+*/
+//#endregion
+export { DirectionProvider, useDirection };
+
+//# sourceMappingURL=direction.js.map

package/dist/components/ui/direction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","names":[],"sources":["../../../src/components/ui/direction.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * DirectionProvider — tells Radix primitives the reading direction (LTR/RTL).\n *\n * Thin re-export of radix-ui's Direction.DirectionProvider. Purely behavioral\n * — it flips keyboard navigation and popover/menu alignment for every Radix\n * primitive underneath it (Select, DropdownMenu, Tabs, etc.), but renders no\n * DOM and applies no visual styling itself.\n */\n\nimport * as React from \"react\"\nimport { Direction } from \"radix-ui\"\n\nfunction DirectionProvider({\n  dir,\n  direction,\n  children,\n}: React.ComponentProps<typeof Direction.DirectionProvider> & {\n  direction?: React.ComponentProps<typeof Direction.DirectionProvider>[\"dir\"]\n}) {\n  return (\n    <Direction.DirectionProvider dir={direction ?? dir}>\n      {children}\n    </Direction.DirectionProvider>\n  )\n}\n\nconst useDirection = Direction.useDirection\n\nexport { DirectionProvider, useDirection }\n\n/**\n * WHEN TO USE\n * - RTL locales — wrap the app (or the RTL subtree) so Radix-based components flip correctly\n *\n * NOT WHEN\n * - LTR-only applications — omit entirely, LTR is the default with no provider\n * - Visual/layout mirroring — this changes primitive behavior only; still set `dir` on a real\n *   DOM ancestor (e.g. <html dir=\"rtl\">) for CSS, and use logical spacing utilities (ps-, pe-) instead of left/right\n *\n * KEY RULES\n * - Accepts `dir` or `direction` (alias for `dir`) — both map to the same \"ltr\" | \"rtl\" value\n * - No default: an ancestor with no DirectionProvider falls back to each primitive's own dir detection (typically the DOM's dir attribute)\n * - useDirection() reads the current value inside any descendant for custom RTL-aware logic\n *\n * USAGE\n * <DirectionProvider dir=\"rtl\">\n *   <App />\n * </DirectionProvider>\n */\n"],"mappings":";;;;;AAcA,SAAS,kBAAkB,EACzB,KACA,WACA,YAGC;CACD,OACE,oBAAC,UAAU,mBAAX;EAA6B,KAAK,aAAa;EAC5C;CAC0B,CAAA;AAEjC;AAEA,IAAM,eAAe,UAAU"}

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Drawer — draggable edge-anchored sheet for mobile-first overlays
+ *
+ * Built on vaul, so behavior (swipe-to-dismiss, drag handle) follows vaul's
+ * API.
+ */
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function Drawer({ autoFocus, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+/**
+ * WHEN TO USE
+ * - Mobile-first action sheets, pickers, and confirmations that benefit from being draggable
+ * - Bottom/side sheets the user can dismiss by swiping, not just tapping a close button
+ *
+ * NOT WHEN
+ * - Desktop side panels — use Sheet (non-draggable, fixed-position)
+ * - Centered modal interruptions — use Dialog
+ *
+ * KEY RULES
+ * - `direction` on `Drawer` sets which edge it slides from: "top" | "right" | "bottom" | "left" (default bottom)
+ * - Put `asChild` on `DrawerTrigger` / `DrawerClose` to render your own element instead of an extra wrapping button
+ * - `DrawerContent` renders its own `DrawerPortal` + `DrawerOverlay` — don't nest it in another portal
+ * - The drag handle (the small bar at the top of the panel) is only shown for `direction="bottom"`
+ * - Left/right drawers cap width at `@sm:max-w-sm` (a container query against the shared portal container — see Dialog's own doc comment for why); top/bottom drawers cap height at `max-h-[80vh]`
+ *
+ * USAGE
+ * <Drawer>
+ *   <DrawerTrigger asChild><Button variant="outline">Open drawer</Button></DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Are you sure?</DrawerTitle>
+ *       <DrawerDescription>This action cannot be undone.</DrawerDescription>
+ *     </DrawerHeader>
+ *     <DrawerFooter>
+ *       <Button>Confirm</Button>
+ *       <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ *
+ * <Drawer direction="right"> ... </Drawer>  // slides in from the right edge instead of the bottom
+ */
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/ui/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAA;AAKhD,iBAAS,MAAM,CAAC,EACd,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,qBAQnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,qBAQrD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,qBAiBtD;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAUzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG"}

package/dist/components/ui/drawer.js

@@ -0,0 +1,115 @@
+import { cn } from "../../lib/utils.js";
+import { getPortalContainer } from "../../lib/scope.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer as Drawer$1 } from "vaul";
+//#region src/components/ui/drawer.tsx
+function Drawer({ autoFocus = true, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Root, {
+		"data-slot": "drawer",
+		autoFocus,
+		...props
+	});
+}
+function DrawerTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
+		"data-slot": "drawer-portal",
+		container: getPortalContainer(),
+		...props
+	});
+}
+function DrawerClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Overlay, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0", className),
+		...props
+	});
+}
+function DrawerContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
+			"data-slot": "drawer-content",
+			className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:@sm:max-w-sm data-[vaul-drawer-direction=right]:@sm:max-w-sm", className),
+			...props,
+			children: [/* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children]
+		})]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex flex-col gap-1 p-4", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-slot": "drawer-title",
+		className: cn("text-base font-medium text-foreground", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Mobile-first action sheets, pickers, and confirmations that benefit from being draggable
+* - Bottom/side sheets the user can dismiss by swiping, not just tapping a close button
+*
+* NOT WHEN
+* - Desktop side panels — use Sheet (non-draggable, fixed-position)
+* - Centered modal interruptions — use Dialog
+*
+* KEY RULES
+* - `direction` on `Drawer` sets which edge it slides from: "top" | "right" | "bottom" | "left" (default bottom)
+* - Put `asChild` on `DrawerTrigger` / `DrawerClose` to render your own element instead of an extra wrapping button
+* - `DrawerContent` renders its own `DrawerPortal` + `DrawerOverlay` — don't nest it in another portal
+* - The drag handle (the small bar at the top of the panel) is only shown for `direction="bottom"`
+* - Left/right drawers cap width at `@sm:max-w-sm` (a container query against the shared portal container — see Dialog's own doc comment for why); top/bottom drawers cap height at `max-h-[80vh]`
+*
+* USAGE
+* <Drawer>
+*   <DrawerTrigger asChild><Button variant="outline">Open drawer</Button></DrawerTrigger>
+*   <DrawerContent>
+*     <DrawerHeader>
+*       <DrawerTitle>Are you sure?</DrawerTitle>
+*       <DrawerDescription>This action cannot be undone.</DrawerDescription>
+*     </DrawerHeader>
+*     <DrawerFooter>
+*       <Button>Confirm</Button>
+*       <DrawerClose asChild><Button variant="outline">Cancel</Button></DrawerClose>
+*     </DrawerFooter>
+*   </DrawerContent>
+* </Drawer>
+*
+* <Drawer direction="right"> ... </Drawer>  // slides in from the right edge instead of the bottom
+*/
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+
+//# sourceMappingURL=drawer.js.map

package/dist/components/ui/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["/**\n * Drawer — draggable edge-anchored sheet for mobile-first overlays\n *\n * Built on vaul, so behavior (swipe-to-dismiss, drag handle) follows vaul's\n * API.\n */\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\nimport { getPortalContainer } from \"@/lib/scope\"\n\nfunction Drawer({\n  autoFocus = true,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  // vaul defaults autoFocus to false, which suppresses Radix FocusScope's\n  // mount-autofocus routine entirely — focus never moves into the drawer on\n  // open, and the escape-focus re-trap has nothing to redirect to since it\n  // never recorded a \"last focused element inside\" in the first place.\n  // Defaulting true here restores the APG Dialog pattern's baseline\n  // (opening a dialog moves focus inside it); still overridable.\n  return <DrawerPrimitive.Root data-slot=\"drawer\" autoFocus={autoFocus} {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return (\n    <DrawerPrimitive.Portal\n      data-slot=\"drawer-portal\"\n      container={getPortalContainer()}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-popover text-sm text-popover-foreground data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:@sm:max-w-sm data-[vaul-drawer-direction=right]:@sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      // gap-1, not gap-2 — same action-grouping convention as DialogFooter:\n      // the footer's buttons resolve one decision together, a tight cluster.\n      className={cn(\"mt-auto flex flex-col gap-1 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n\n/**\n * WHEN TO USE\n * - Mobile-first action sheets, pickers, and confirmations that benefit from being draggable\n * - Bottom/side sheets the user can dismiss by swiping, not just tapping a close button\n *\n * NOT WHEN\n * - Desktop side panels — use Sheet (non-draggable, fixed-position)\n * - Centered modal interruptions — use Dialog\n *\n * KEY RULES\n * - `direction` on `Drawer` sets which edge it slides from: \"top\" | \"right\" | \"bottom\" | \"left\" (default bottom)\n * - Put `asChild` on `DrawerTrigger` / `DrawerClose` to render your own element instead of an extra wrapping button\n * - `DrawerContent` renders its own `DrawerPortal` + `DrawerOverlay` — don't nest it in another portal\n * - The drag handle (the small bar at the top of the panel) is only shown for `direction=\"bottom\"`\n * - Left/right drawers cap width at `@sm:max-w-sm` (a container query against the shared portal container — see Dialog's own doc comment for why); top/bottom drawers cap height at `max-h-[80vh]`\n *\n * USAGE\n * <Drawer>\n *   <DrawerTrigger asChild><Button variant=\"outline\">Open drawer</Button></DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Are you sure?</DrawerTitle>\n *       <DrawerDescription>This action cannot be undone.</DrawerDescription>\n *     </DrawerHeader>\n *     <DrawerFooter>\n *       <Button>Confirm</Button>\n *       <DrawerClose asChild><Button variant=\"outline\">Cancel</Button></DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n *\n * <Drawer direction=\"right\"> ... </Drawer>  // slides in from the right edge instead of the bottom\n */\n"],"mappings":";;;;;;AAaA,SAAS,OAAO,EACd,YAAY,MACZ,GAAG,SACiD;CAOpD,OAAO,oBAAC,SAAgB,MAAjB;EAAsB,aAAU;EAAoB;EAAW,GAAI;CAAQ,CAAA;AACpF;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAAC,SAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OACE,oBAAC,SAAgB,QAAjB;EACE,aAAU;EACV,WAAW,mBAAmB;EAC9B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAAC,SAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAAC,SAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,oMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,GAAG,SACoD;CACvD,OACE,qBAAC,cAAD;EAAc,aAAU;EAAxB,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAAC,SAAgB,SAAjB;GACE,aAAU;GACV,WAAW,GACT,yoCACA,SACF;GACA,GAAI;GANN,UAAA,CAQE,oBAAC,OAAD,EAAK,WAAU,kIAAmI,CAAA,GACjJ,QACsB;EACb,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EAGV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAAC,SAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,SAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,75 @@
+/**
+ * DropdownMenu — menu of actions or options opened from a trigger element
+ *
+ * Built on the Radix DropdownMenu primitive (Root/Trigger/Content/Item/...),
+ * styled with MMDS popover/accent tokens, with a `variant="destructive"`
+ * styling hook on DropdownMenuItem for dangerous entries.
+ */
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
+/**
+ * WHEN TO USE
+ * - Secondary or tertiary actions on a row or entity, behind a "..." overflow trigger
+ * - View/appearance toggles via DropdownMenuCheckboxItem, or a single-select list via
+ *   DropdownMenuRadioGroup + DropdownMenuRadioItem
+ * - Actions that benefit from grouping (DropdownMenuGroup/Label/Separator), keyboard shortcut
+ *   hints (DropdownMenuShortcut), or nested submenus (DropdownMenuSub)
+ *
+ * NOT WHEN
+ * - The action is a page's primary action — use Button directly
+ * - The user is picking a value for a form field — use Select
+ * - The menu opens on right-click rather than a click trigger — use ContextMenu
+ *
+ * KEY RULES
+ * - DropdownMenuItem accepts variant="default" | "destructive"; use "destructive" for
+ *   irreversible entries (delete, log out, remove) instead of custom text-color classes
+ * - Wrap DropdownMenuTrigger's child in asChild so the trigger renders as that element
+ *   (e.g. a Button) rather than being wrapped in an extra <button>
+ * - DropdownMenuContent defaults to align="start" and sideOffset={4}; width is controlled
+ *   via className (e.g. "w-56"), not a prop
+ * - DropdownMenuCheckboxItem/RadioItem are controlled — checked/value and their onChange
+ *   handlers must be wired by the caller, they hold no internal state
+ *
+ * USAGE
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild><Button variant="outline">Open menu</Button></DropdownMenuTrigger>
+ *   <DropdownMenuContent className="w-56">
+ *     <DropdownMenuLabel>My account</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem><UserIcon />Profile<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut></DropdownMenuItem>
+ *     <DropdownMenuItem variant="destructive"><LogOutIcon />Log out</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ *
+ * <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+ *   Status bar
+ * </DropdownMenuCheckboxItem>
+ */
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/ui/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,YAAY,IAAI,qBAAqB,EAAE,MAAM,UAAU,CAAA;AAMhE,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,qBAEzD;AAED,iBAAS,kBAAkB,CAAC,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,MAAM,CAAC,qBAQ3D;AAED,iBAAS,mBAAmB,CAAC,EAC3B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,qBAO5D;AAED,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,KAAe,EACf,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,OAAO,CAAC,qBAe5D;AAED,iBAAS,iBAAiB,CAAC,EACzB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,qBAI1D;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,IAAI,CAAC,GAAG;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;CACpC,qBAaA;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,YAAY,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,qBAuBA;AAED,iBAAS,sBAAsB,CAAC,EAC9B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,qBAO/D;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,GAAG;IAChE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,qBAsBA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,qBAYA;AAED,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,SAAS,CAAC,qBAQ9D;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAW9B;AAED,iBAAS,eAAe,CAAC,EACvB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,GAAG,CAAC,qBAExD;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,qBAeA;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,qBAAqB,CAAC,UAAU,CAAC,qBAW/D;AAED,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG"}