@craftzbay/ui 0.10.0 → 0.11.1

package/dist-lib/components/ui/Dialog.js

@@ -1,38 +1,40 @@
 "use client";
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import * as r from "@radix-ui/react-dialog";
-import { X as C } from "../../icons/index.js";
-import { cn as n } from "../../lib/utils.js";
-import { useStrings as p } from "../../hooks/use-strings.js";
-import { Button as u } from "./Button.js";
-const w = r.Root, B = r.Trigger, z = r.Portal, T = r.Close, D = d(function({ className: o, ...i }, t) {
+import { useState as b, forwardRef as c } from "react";
+import * as n from "@radix-ui/react-dialog";
+import { X as S } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStrings as C } from "../../hooks/use-strings.js";
+import { Button as N } from "./Button.js";
+import { withReturnFocus as k } from "../../lib/return-focus.js";
+const B = n.Root, Q = n.Trigger, E = n.Portal, H = n.Close, w = c(function({ className: a, ...i }, o) {
   return /* @__PURE__ */ e(
-    r.Overlay,
+    n.Overlay,
     {
-      ref: t,
-      className: n(
-        "fixed inset-0 z-[var(--z-overlay)] bg-overlay",
+      ref: o,
+      className: r(
+        "bg-overlay fixed inset-0 z-[var(--z-overlay)]",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        o
+        a
       ),
       ...i
     }
   );
 });
-D.displayName = "DialogOverlay";
-const x = d(function({ className: o, children: i, showClose: t = !0, size: l = "md", ...c }, m) {
-  const g = p();
-  return /* @__PURE__ */ s(z, { children: [
-    /* @__PURE__ */ e(D, {}),
+w.displayName = "DialogOverlay";
+const z = c(function({ className: a, children: i, showClose: o = !0, size: l = "md", returnFocusTo: m, onCloseAutoFocus: g, ...u }, f) {
+  const p = C();
+  return /* @__PURE__ */ s(E, { children: [
+    /* @__PURE__ */ e(w, {}),
     /* @__PURE__ */ s(
-      r.Content,
+      n.Content,
       {
-        ref: m,
-        className: n(
-          "fixed left-1/2 top-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2",
-          "w-[calc(100%-2rem)] rounded-lg border border-border bg-card text-card-foreground shadow-lg",
+        ref: f,
+        onCloseAutoFocus: k(m, g),
+        className: r(
+          "fixed top-1/2 left-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2",
+          "border-border bg-card text-card-foreground w-[calc(100%-2rem)] rounded-xl border shadow-lg",
           "p-6",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -40,22 +42,22 @@ const x = d(function({ className: o, children: i, showClose: t = !0, size: l = "
           l === "sm" && "max-w-[400px]",
           l === "md" && "max-w-[520px]",
           l === "lg" && "max-w-[720px]",
-          o
+          a
         ),
-        ...c,
+        ...u,
         children: [
           i,
-          t && /* @__PURE__ */ e(
-            r.Close,
+          o && /* @__PURE__ */ e(
+            n.Close,
             {
-              "aria-label": g.dialog.close,
-              className: n(
-                "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle",
+              "aria-label": p.dialog.close,
+              className: r(
+                "text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md",
                 "hover:bg-background-muted hover:text-foreground",
-                "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+                "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
                 "transition-colors duration-[var(--duration-fast)]"
               ),
-              children: /* @__PURE__ */ e(C, { className: "size-4", "aria-hidden": !0 })
+              children: /* @__PURE__ */ e(S, { className: "size-4", "aria-hidden": !0 })
             }
           )
         ]
@@ -63,78 +65,101 @@ const x = d(function({ className: o, children: i, showClose: t = !0, size: l = "
     )
   ] });
 });
-x.displayName = "DialogContent";
-function v({ className: a, ...o }) {
-  return /* @__PURE__ */ e("div", { className: n("flex flex-col gap-1 pb-4", a), ...o });
+z.displayName = "DialogContent";
+function F({ className: t, ...a }) {
+  return /* @__PURE__ */ e("div", { className: r("flex flex-col gap-1 pb-4", t), ...a });
 }
-v.displayName = "DialogHeader";
-function h({ className: a, ...o }) {
+F.displayName = "DialogHeader";
+function T({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: n("flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end", a),
-      ...o
+      className: r("flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end", t),
+      ...a
     }
   );
 }
-h.displayName = "DialogFooter";
-const y = d(function({ className: o, ...i }, t) {
+T.displayName = "DialogFooter";
+const O = c(function({ className: a, ...i }, o) {
   return /* @__PURE__ */ e(
-    r.Title,
+    n.Title,
     {
-      ref: t,
-      className: n("text-lg font-semibold text-foreground leading-tight", o),
+      ref: o,
+      className: r("text-foreground text-lg leading-tight font-semibold", a),
       ...i
     }
   );
 });
-y.displayName = "DialogTitle";
-const b = d(function({ className: o, ...i }, t) {
+O.displayName = "DialogTitle";
+const j = c(function({ className: a, ...i }, o) {
   return /* @__PURE__ */ e(
-    r.Description,
+    n.Description,
     {
-      ref: t,
-      className: n("text-sm text-foreground-muted", o),
+      ref: o,
+      className: r("text-foreground-muted text-sm", a),
       ...i
     }
   );
 });
-b.displayName = "DialogDescription";
-function j({
-  open: a,
-  onOpenChange: o,
+j.displayName = "DialogDescription";
+function A({
+  open: t,
+  onOpenChange: a,
   title: i,
-  description: t,
+  description: o,
   confirmLabel: l,
-  cancelLabel: c,
-  confirmVariant: m = "primary",
-  onConfirm: g,
-  loading: N
+  cancelLabel: m,
+  confirmVariant: g = "primary",
+  onConfirm: u,
+  loading: f,
+  formatError: p = X
 }) {
-  const f = p();
-  return /* @__PURE__ */ e(w, { open: a, onOpenChange: o, children: /* @__PURE__ */ s(x, { size: "sm", children: [
-    /* @__PURE__ */ s(v, { children: [
-      /* @__PURE__ */ e(y, { children: i }),
-      t && /* @__PURE__ */ e(b, { children: t })
-    ] }),
-    /* @__PURE__ */ s(h, { children: [
-      /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(u, { variant: "outline", children: c ?? f.confirmationDialog.cancel }) }),
-      /* @__PURE__ */ e(u, { variant: m, loading: N, onClick: g, children: l ?? f.confirmationDialog.confirm })
-    ] })
-  ] }) });
+  const x = C(), [P, h] = b(!1), [v, D] = b(null), y = !!f || P, R = async () => {
+    D(null), h(!0);
+    try {
+      await u();
+    } catch (d) {
+      D(p(d));
+    } finally {
+      h(!1);
+    }
+  };
+  return /* @__PURE__ */ e(
+    B,
+    {
+      open: t,
+      onOpenChange: (d) => {
+        d || D(null), a(d);
+      },
+      children: /* @__PURE__ */ s(z, { size: "sm", ...o ? {} : { "aria-describedby": void 0 }, children: [
+        /* @__PURE__ */ s(F, { children: [
+          /* @__PURE__ */ e(O, { children: i }),
+          o && /* @__PURE__ */ e(j, { children: o })
+        ] }),
+        v && /* @__PURE__ */ e("p", { role: "alert", className: "text-danger-text text-sm", children: v }),
+        /* @__PURE__ */ s(T, { children: [
+          /* @__PURE__ */ e(H, { asChild: !0, children: /* @__PURE__ */ e(N, { variant: "outline", disabled: y, children: m ?? x.confirmationDialog.cancel }) }),
+          /* @__PURE__ */ e(N, { variant: g, loading: y, onClick: R, children: l ?? x.confirmationDialog.confirm })
+        ] })
+      ] })
+    }
+  );
+}
+function X(t) {
+  return t instanceof Error ? t.message : String(t);
 }
-j.displayName = "ConfirmationDialog";
+A.displayName = "ConfirmationDialog";
 export {
-  j as ConfirmationDialog,
-  w as Dialog,
-  T as DialogClose,
-  x as DialogContent,
-  b as DialogDescription,
-  h as DialogFooter,
-  v as DialogHeader,
-  D as DialogOverlay,
-  z as DialogPortal,
-  y as DialogTitle,
-  B as DialogTrigger
+  A as ConfirmationDialog,
+  B as Dialog,
+  H as DialogClose,
+  z as DialogContent,
+  j as DialogDescription,
+  T as DialogFooter,
+  F as DialogHeader,
+  w as DialogOverlay,
+  E as DialogPortal,
+  O as DialogTitle,
+  Q as DialogTrigger
 };
 //# sourceMappingURL=Dialog.js.map

package/dist-lib/components/ui/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/components/ui/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { Button, type ButtonProps } from './Button';\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n        'fixed inset-0 z-[var(--z-overlay)] bg-overlay',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps\n  extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** Show the default close (×) button in the top-right. */\n  showClose?: boolean;\n  /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(function DialogContent({ className, children, showClose = true, size = 'md', ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'fixed left-1/2 top-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2',\n          'w-[calc(100%-2rem)] rounded-lg border border-border bg-card text-card-foreground shadow-lg',\n          'p-6',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          size === 'sm' && 'max-w-[400px]',\n          size === 'md' && 'max-w-[520px]',\n          size === 'lg' && 'max-w-[720px]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label={strings.dialog.close}\n            className={cn(\n              'absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-foreground-subtle',\n              'hover:bg-background-muted hover:text-foreground',\n              'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n});\nDialogContent.displayName = 'DialogContent';\n\nexport function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n}\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  );\n}\nDialogFooter.displayName = 'DialogFooter';\n\nexport const DialogTitle = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold text-foreground leading-tight', className)}\n      {...props}\n    />\n  );\n});\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogDescription = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn('text-sm text-foreground-muted', className)}\n      {...props}\n    />\n  );\n});\nDialogDescription.displayName = 'DialogDescription';\n\n/* -----------------------------------------------------------------------------\n *  ConfirmationDialog — pre-composed pattern for destructive/important\n *  confirmations. Use this when the body is a single sentence and the only\n *  controls are Cancel + Confirm.\n * --------------------------------------------------------------------------- */\n\nexport interface ConfirmationDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Label of the confirm button. */\n  confirmLabel?: string;\n  /** Label of the cancel button. */\n  cancelLabel?: string;\n  /** Variant of the confirm button — typically `primary` or `destructive`. */\n  confirmVariant?: ButtonProps['variant'];\n  /** Called when the user confirms. Awaited — shows a spinner while pending. */\n  onConfirm: () => void | Promise<void>;\n  /** Whether the confirm button is currently submitting. */\n  loading?: boolean;\n}\n\n/**\n * Confirmation dialog with title, description, cancel + confirm buttons.\n *\n * @example Destructive confirmation\n *   <ConfirmationDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project?\"\n *     description=\"This permanently deletes the project and all its data.\"\n *     confirmLabel=\"Delete project\"\n *     confirmVariant=\"destructive\"\n *     onConfirm={handleDelete}\n *   />\n *\n * @do Lead the title with the action: \"Delete project?\" not \"Are you sure?\".\n *      State consequences in the description.\n * @dont Use for low-risk reversible actions — those don't need a dialog.\n */\nexport function ConfirmationDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel,\n  cancelLabel,\n  confirmVariant = 'primary',\n  onConfirm,\n  loading,\n}: ConfirmationDialogProps) {\n  const strings = useStrings();\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent size=\"sm\">\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">{cancelLabel ?? strings.confirmationDialog.cancel}</Button>\n          </DialogClose>\n          <Button variant={confirmVariant} loading={loading} onClick={onConfirm}>\n            {confirmLabel ?? strings.confirmationDialog.confirm}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nConfirmationDialog.displayName = 'ConfirmationDialog';\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","jsx","cn","DialogContent","children","showClose","size","strings","useStrings","jsxs","X","DialogHeader","DialogFooter","DialogTitle","DialogDescription","ConfirmationDialog","open","onOpenChange","title","description","confirmLabel","cancelLabel","confirmVariant","onConfirm","loading","Button"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/ui/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { Button, type ButtonProps } from './Button';\nimport { withReturnFocus, type ReturnFocusRef } from '@/lib/return-focus';\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogPortal = DialogPrimitive.Portal;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport const DialogOverlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(function DialogOverlay({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Overlay\n      ref={ref}\n      className={cn(\n        'bg-overlay fixed inset-0 z-[var(--z-overlay)]',\n        'data-[state=open]:animate-in data-[state=closed]:animate-out',\n        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nDialogOverlay.displayName = 'DialogOverlay';\n\nexport interface DialogContentProps extends ComponentPropsWithoutRef<\n  typeof DialogPrimitive.Content\n> {\n  /** Show the default close (×) button in the top-right. */\n  showClose?: boolean;\n  /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Element to focus when the overlay closes. Overrides Radix's default\n   * (the element focused when the content mounted), which is `<body>` for\n   * controlled overlays opened from a pointer click on a non-focusable /\n   * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and\n   * wins if it calls `preventDefault()`.\n   */\n  returnFocusTo?: ReturnFocusRef;\n}\n\nexport const DialogContent = forwardRef<\n  ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(function DialogContent(\n  { className, children, showClose = true, size = 'md', returnFocusTo, onCloseAutoFocus, ...props },\n  ref,\n) {\n  const strings = useStrings();\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        onCloseAutoFocus={withReturnFocus(returnFocusTo, onCloseAutoFocus)}\n        className={cn(\n          'fixed top-1/2 left-1/2 z-[var(--z-modal)] -translate-x-1/2 -translate-y-1/2',\n          'border-border bg-card text-card-foreground w-[calc(100%-2rem)] rounded-xl border shadow-lg',\n          'p-6',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          size === 'sm' && 'max-w-[400px]',\n          size === 'md' && 'max-w-[520px]',\n          size === 'lg' && 'max-w-[720px]',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label={strings.dialog.close}\n            className={cn(\n              'text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md',\n              'hover:bg-background-muted hover:text-foreground',\n              'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  );\n});\nDialogContent.displayName = 'DialogContent';\n\nexport function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('flex flex-col gap-1 pb-4', className)} {...props} />;\n}\nDialogHeader.displayName = 'DialogHeader';\n\nexport function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn('flex flex-col-reverse gap-2 pt-6 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  );\n}\nDialogFooter.displayName = 'DialogFooter';\n\nexport const DialogTitle = forwardRef<\n  ElementRef<typeof DialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(function DialogTitle({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn('text-foreground text-lg leading-tight font-semibold', className)}\n      {...props}\n    />\n  );\n});\nDialogTitle.displayName = 'DialogTitle';\n\nexport const DialogDescription = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nDialogDescription.displayName = 'DialogDescription';\n\n/* -----------------------------------------------------------------------------\n *  ConfirmationDialog — pre-composed pattern for destructive/important\n *  confirmations. Use this when the body is a single sentence and the only\n *  controls are Cancel + Confirm.\n * --------------------------------------------------------------------------- */\n\nexport interface ConfirmationDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Label of the confirm button. */\n  confirmLabel?: string;\n  /** Label of the cancel button. */\n  cancelLabel?: string;\n  /** Variant of the confirm button — typically `primary` or `destructive`. */\n  confirmVariant?: ButtonProps['variant'];\n  /**\n   * Called when the user confirms. Awaited — the confirm button shows a\n   * spinner while pending and a rejection is rendered inline (the dialog stays\n   * open so the user can retry or cancel).\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Force the submitting state from outside (in addition to the awaited `onConfirm`). */\n  loading?: boolean;\n  /** Map a rejected `onConfirm` to the message shown. Defaults to `Error.message`. */\n  formatError?: (err: unknown) => ReactNode;\n}\n\n/**\n * Confirmation dialog with title, description, cancel + confirm buttons.\n *\n * @example Destructive confirmation\n *   <ConfirmationDialog\n *     open={open} onOpenChange={setOpen}\n *     title=\"Delete project?\"\n *     description=\"This permanently deletes the project and all its data.\"\n *     confirmLabel=\"Delete project\"\n *     confirmVariant=\"destructive\"\n *     onConfirm={handleDelete}\n *   />\n *\n * @do Lead the title with the action: \"Delete project?\" not \"Are you sure?\".\n *      State consequences in the description.\n * @dont Use for low-risk reversible actions — those don't need a dialog.\n */\nexport function ConfirmationDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel,\n  cancelLabel,\n  confirmVariant = 'primary',\n  onConfirm,\n  loading,\n  formatError = defaultFormatError,\n}: ConfirmationDialogProps) {\n  const strings = useStrings();\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const busy = Boolean(loading) || pending;\n\n  const handleConfirm = async () => {\n    setFailure(null);\n    setPending(true);\n    try {\n      await onConfirm();\n    } catch (err) {\n      setFailure(formatError(err));\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) setFailure(null);\n        onOpenChange(next);\n      }}\n    >\n      {/* No description → drop aria-describedby so Radix does not warn and AT is not pointed at nothing. */}\n      <DialogContent size=\"sm\" {...(description ? {} : { 'aria-describedby': undefined })}>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        {failure && (\n          <p role=\"alert\" className=\"text-danger-text text-sm\">\n            {failure}\n          </p>\n        )}\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\" disabled={busy}>\n              {cancelLabel ?? strings.confirmationDialog.cancel}\n            </Button>\n          </DialogClose>\n          <Button variant={confirmVariant} loading={busy} onClick={handleConfirm}>\n            {confirmLabel ?? strings.confirmationDialog.confirm}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction defaultFormatError(err: unknown): ReactNode {\n  return err instanceof Error ? err.message : String(err);\n}\nConfirmationDialog.displayName = 'ConfirmationDialog';\n"],"names":["Dialog","DialogPrimitive","DialogTrigger","DialogPortal","DialogClose","DialogOverlay","forwardRef","className","props","ref","jsx","cn","DialogContent","children","showClose","size","returnFocusTo","onCloseAutoFocus","strings","useStrings","jsxs","withReturnFocus","X","DialogHeader","DialogFooter","DialogTitle","DialogDescription","ConfirmationDialog","open","onOpenChange","title","description","confirmLabel","cancelLabel","confirmVariant","onConfirm","loading","formatError","defaultFormatError","pending","setPending","useState","failure","setFailure","busy","handleConfirm","err","next","Button"],"mappings":"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"}

package/dist-lib/components/ui/Drawer.d.ts

@@ -1,8 +1,9 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { Drawer as DrawerPrimitive } from 'vaul';
+import { ReturnFocusRef } from '../../lib/return-focus.js';
 type Direction = 'top' | 'right' | 'bottom' | 'left';
 export declare const Drawer: {
-    ({ shouldScaleBackground, ...props }: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+    ({ shouldScaleBackground, direction, ...props }: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const DrawerTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
@@ -10,10 +11,24 @@ export declare const DrawerPortal: typeof import('vaul').Portal;
 export declare const DrawerClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const DrawerOverlay: import('react').ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-dialog').DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export interface DrawerContentProps extends ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
-    /** Side the drawer slides in from. Default `bottom`. */
+    /**
+     * Side the drawer slides in from. Prefer setting `direction` on `<Drawer>`
+     * (vaul needs it there for drag physics); this prop only overrides the
+     * visual placement.
+     */
     direction?: Direction;
     /** Hide the drag handle. */
     hideHandle?: boolean;
+    /** Show the close (×) button. Default `true`. */
+    showClose?: boolean;
+    /**
+     * Element to focus when the overlay closes. Overrides Radix's default
+     * (the element focused when the content mounted), which is `<body>` for
+     * controlled overlays opened from a pointer click on a non-focusable /
+     * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and
+     * wins if it calls `preventDefault()`.
+     */
+    returnFocusTo?: ReturnFocusRef;
 }
 export declare const DrawerContent: import('react').ForwardRefExoticComponent<DrawerContentProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist-lib/components/ui/Drawer.js

@@ -1,98 +1,132 @@
 "use client";
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as s, useContext as v, createContext as y } from "react";
 import { Drawer as a } from "vaul";
+import { X as N } from "../../icons/index.js";
 import { cn as n } from "../../lib/utils.js";
-const u = ({
+import { useStrings as C } from "../../hooks/use-strings.js";
+import { withReturnFocus as z } from "../../lib/return-focus.js";
+const m = y("bottom"), T = ({
   shouldScaleBackground: t = !0,
-  ...r
-}) => /* @__PURE__ */ o(a.Root, { shouldScaleBackground: t, ...r });
-u.displayName = "Drawer";
-const O = a.Trigger, w = a.Portal, H = a.Close, m = s(function({ className: r, ...e }, l) {
-  return /* @__PURE__ */ o(
+  direction: e = "bottom",
+  ...o
+}) => /* @__PURE__ */ r(m.Provider, { value: e, children: /* @__PURE__ */ r(
+  a.Root,
+  {
+    shouldScaleBackground: t,
+    direction: e,
+    ...o
+  }
+) });
+T.displayName = "Drawer";
+const I = a.Trigger, F = a.Portal, J = a.Close, f = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
     a.Overlay,
     {
       ref: l,
-      className: n("fixed inset-0 z-[var(--z-overlay)] bg-overlay", r),
-      ...e
+      className: n("bg-overlay fixed inset-0 z-[var(--z-overlay)]", e),
+      ...o
     }
   );
 });
-m.displayName = "DrawerOverlay";
-const b = {
-  bottom: "inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90vh] flex-col rounded-t-xl border-t border-border",
-  top: "inset-x-0 top-0 mb-24 flex h-auto max-h-[90vh] flex-col rounded-b-xl border-b border-border",
-  left: "inset-y-0 left-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-r-xl border-r border-border",
-  right: "inset-y-0 right-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-l-xl border-l border-border"
-}, D = {
+f.displayName = "DrawerOverlay";
+const O = {
+  bottom: "inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90dvh] flex-col rounded-t-xl border-t border-border pb-[env(safe-area-inset-bottom)]",
+  top: "inset-x-0 top-0 mb-24 flex h-auto max-h-[90dvh] flex-col rounded-b-xl border-b border-border",
+  left: "inset-y-0 left-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-r-xl border-r border-border pl-[env(safe-area-inset-left)]",
+  right: "inset-y-0 right-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-l-xl border-l border-border pr-[env(safe-area-inset-right)]"
+}, j = {
   bottom: "mx-auto mt-3 h-1.5 w-12 rounded-full bg-border",
   top: "mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last",
   left: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0",
   right: "mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch"
-}, h = s(function({ className: r, direction: e = "bottom", hideHandle: l, children: f, ...c }, x) {
-  const d = e === "left" || e === "right";
-  return /* @__PURE__ */ i(w, { children: [
-    /* @__PURE__ */ o(m, {}),
-    /* @__PURE__ */ i(
+}, k = s(function({
+  className: e,
+  direction: o,
+  hideHandle: l,
+  showClose: u = !0,
+  returnFocusTo: x,
+  onCloseAutoFocus: b,
+  children: w,
+  ...h
+}, g) {
+  const p = v(m), i = o ?? p, D = C(), d = i === "left" || i === "right";
+  return /* @__PURE__ */ c(F, { children: [
+    /* @__PURE__ */ r(f, {}),
+    /* @__PURE__ */ c(
       a.Content,
       {
-        ref: x,
+        ref: g,
+        onCloseAutoFocus: z(x, b),
         className: n(
           "bg-card fixed z-[var(--z-modal)]",
-          b[e],
+          O[i],
           d && "flex-row",
-          r
+          e
         ),
-        ...c,
+        ...h,
         children: [
-          !l && /* @__PURE__ */ o("div", { "aria-hidden": !0, className: D[e] }),
-          /* @__PURE__ */ o("div", { className: n("min-h-0 min-w-0 flex-1", d && "flex flex-col"), children: f })
+          !l && /* @__PURE__ */ r("div", { "aria-hidden": !0, className: j[i] }),
+          /* @__PURE__ */ r("div", { className: n("min-h-0 min-w-0 flex-1", d && "flex flex-col"), children: w }),
+          u && /* @__PURE__ */ r(
+            a.Close,
+            {
+              "aria-label": D.drawer.close,
+              className: n(
+                "text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md",
+                "hover:bg-background-muted hover:text-foreground",
+                "focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                "transition-colors duration-[var(--duration-fast)]"
+              ),
+              children: /* @__PURE__ */ r(N, { className: "size-4", "aria-hidden": !0 })
+            }
+          )
         ]
       }
     )
   ] });
 });
-h.displayName = "DrawerContent";
-function p({ className: t, ...r }) {
-  return /* @__PURE__ */ o("div", { className: n("grid gap-1 p-4 text-center sm:text-left", t), ...r });
+k.displayName = "DrawerContent";
+function H({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: n("grid gap-1 p-4 text-center sm:text-left", t), ...e });
 }
-p.displayName = "DrawerHeader";
-function g({ className: t, ...r }) {
-  return /* @__PURE__ */ o("div", { className: n("mt-auto flex flex-col gap-2 p-4", t), ...r });
+H.displayName = "DrawerHeader";
+function P({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: n("mt-auto flex flex-col gap-2 p-4", t), ...e });
 }
-g.displayName = "DrawerFooter";
-const y = s(function({ className: r, ...e }, l) {
-  return /* @__PURE__ */ o(
+P.displayName = "DrawerFooter";
+const R = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
     a.Title,
     {
       ref: l,
-      className: n("text-lg font-semibold", r),
-      ...e
+      className: n("text-lg font-semibold", e),
+      ...o
     }
   );
 });
-y.displayName = "DrawerTitle";
-const v = s(function({ className: r, ...e }, l) {
-  return /* @__PURE__ */ o(
+R.displayName = "DrawerTitle";
+const S = s(function({ className: e, ...o }, l) {
+  return /* @__PURE__ */ r(
     a.Description,
     {
       ref: l,
-      className: n("text-foreground-muted text-sm", r),
-      ...e
+      className: n("text-foreground-muted text-sm", e),
+      ...o
     }
   );
 });
-v.displayName = "DrawerDescription";
+S.displayName = "DrawerDescription";
 export {
-  u as Drawer,
-  H as DrawerClose,
-  h as DrawerContent,
-  v as DrawerDescription,
-  g as DrawerFooter,
-  p as DrawerHeader,
-  m as DrawerOverlay,
-  w as DrawerPortal,
-  y as DrawerTitle,
-  O as DrawerTrigger
+  T as Drawer,
+  J as DrawerClose,
+  k as DrawerContent,
+  S as DrawerDescription,
+  P as DrawerFooter,
+  H as DrawerHeader,
+  f as DrawerOverlay,
+  F as DrawerPortal,
+  R as DrawerTitle,
+  I as DrawerTrigger
 };
 //# sourceMappingURL=Drawer.js.map

package/dist-lib/components/ui/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/components/ui/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport { Drawer as DrawerPrimitive } from 'vaul';\nimport { cn } from '@/lib/utils';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\nexport const Drawer = ({\n  shouldScaleBackground = true,\n  ...props\n}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) => (\n  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />\n);\nDrawer.displayName = 'Drawer';\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport const DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn('fixed inset-0 z-[var(--z-overlay)] bg-overlay', className)}\n      {...props}\n    />\n  );\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n\nconst directionStyles: Record<Direction, string> = {\n  bottom:\n    'inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90vh] flex-col rounded-t-xl border-t border-border',\n  top: 'inset-x-0 top-0 mb-24 flex h-auto max-h-[90vh] flex-col rounded-b-xl border-b border-border',\n  left: 'inset-y-0 left-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-r-xl border-r border-border',\n  right:\n    'inset-y-0 right-0 flex h-full w-[420px] max-w-[90vw] flex-col rounded-l-xl border-l border-border',\n};\n\nconst handleStyles: Record<Direction, string> = {\n  bottom: 'mx-auto mt-3 h-1.5 w-12 rounded-full bg-border',\n  top: 'mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last',\n  left: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0',\n  right: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch',\n};\n\nexport interface DrawerContentProps extends ComponentPropsWithoutRef<\n  typeof DrawerPrimitive.Content\n> {\n  /** Side the drawer slides in from. Default `bottom`. */\n  direction?: Direction;\n  /** Hide the drag handle. */\n  hideHandle?: boolean;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  DrawerContentProps\n>(function DrawerContent({ className, direction = 'bottom', hideHandle, children, ...props }, ref) {\n  const isHorizontal = direction === 'left' || direction === 'right';\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        className={cn(\n          'bg-card fixed z-[var(--z-modal)]',\n          directionStyles[direction],\n          isHorizontal && 'flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {!hideHandle && <div aria-hidden className={handleStyles[direction]} />}\n        <div className={cn('min-h-0 min-w-0 flex-1', isHorizontal && 'flex flex-col')}>\n          {children}\n        </div>\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\nDrawerContent.displayName = 'DrawerContent';\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('grid gap-1 p-4 text-center sm:text-left', className)} {...props} />;\n}\nDrawerHeader.displayName = 'DrawerHeader';\n\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n}\nDrawerFooter.displayName = 'DrawerFooter';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n});\nDrawerTitle.displayName = 'DrawerTitle';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nDrawerDescription.displayName = 'DrawerDescription';\n"],"names":["Drawer","shouldScaleBackground","props","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","forwardRef","className","ref","jsx","cn","directionStyles","handleStyles","DrawerContent","direction","hideHandle","children","isHorizontal","jsxs","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":";;;;;AAaO,MAAMA,IAAS,CAAC;AAAA,EACrB,uBAAAC,IAAwB;AAAA,EACxB,GAAGC;AACL,wBACGC,EAAgB,MAAhB,EAAqB,uBAAAF,GAA+C,GAAGC,EAAA,CAAO;AAEjFF,EAAO,cAAc;AAEd,MAAMI,IAAgBD,EAAgB,SAChCE,IAAeF,EAAgB,QAC/BG,IAAcH,EAAgB,OAE9BI,IAAgBC,EAG3B,SAAuB,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACrD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,iDAAiDH,CAAS;AAAA,MACvE,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDK,EAAc,cAAc;AAE5B,MAAMM,IAA6C;AAAA,EACjD,QACE;AAAA,EACF,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OACE;AACJ,GAEMC,IAA0C;AAAA,EAC9C,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AACT,GAWaC,IAAgBP,EAG3B,SAAuB,EAAE,WAAAC,GAAW,WAAAO,IAAY,UAAU,YAAAC,GAAY,UAAAC,GAAU,GAAGhB,EAAA,GAASQ,GAAK;AACjG,QAAMS,IAAeH,MAAc,UAAUA,MAAc;AAC3D,2BACGX,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAM,EAACJ,GAAA,EAAc;AAAA,IACf,gBAAAa;AAAA,MAACjB,EAAgB;AAAA,MAAhB;AAAA,QACC,KAAAO;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACAC,EAAgBG,CAAS;AAAA,UACzBG,KAAgB;AAAA,UAChBV;AAAA,QAAA;AAAA,QAED,GAAGP;AAAA,QAEH,UAAA;AAAA,UAAA,CAACe,uBAAe,OAAA,EAAI,eAAW,IAAC,WAAWH,EAAaE,CAAS,GAAG;AAAA,UACrE,gBAAAL,EAAC,SAAI,WAAWC,EAAG,0BAA0BO,KAAgB,eAAe,GACzE,UAAAD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ,CAAC;AACDH,EAAc,cAAc;AAErB,SAASM,EAAa,EAAE,WAAAZ,GAAW,GAAGP,KAAyC;AACpF,SAAO,gBAAAS,EAAC,SAAI,WAAWC,EAAG,2CAA2CH,CAAS,GAAI,GAAGP,GAAO;AAC9F;AACAmB,EAAa,cAAc;AAEpB,SAASC,EAAa,EAAE,WAAAb,GAAW,GAAGP,KAAyC;AACpF,SAAO,gBAAAS,EAAC,SAAI,WAAWC,EAAG,mCAAmCH,CAAS,GAAI,GAAGP,GAAO;AACtF;AACAoB,EAAa,cAAc;AAEpB,MAAMC,IAAcf,EAGzB,SAAqB,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACnD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,yBAAyBH,CAAS;AAAA,MAC/C,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDqB,EAAY,cAAc;AAEnB,MAAMC,IAAoBhB,EAG/B,SAA2B,EAAE,WAAAC,GAAW,GAAGP,EAAA,GAASQ,GAAK;AACzD,SACE,gBAAAC;AAAA,IAACR,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAO;AAAA,MACA,WAAWE,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDsB,EAAkB,cAAc;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/ui/Drawer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from 'react';\nimport { Drawer as DrawerPrimitive } from 'vaul';\nimport { X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { withReturnFocus, type ReturnFocusRef } from '@/lib/return-focus';\n\ntype Direction = 'top' | 'right' | 'bottom' | 'left';\n\n// vaul needs `direction` on Root for its drag physics; DrawerContent reads it\n// back from here so the side only has to be declared once.\nconst DrawerDirectionContext = createContext<Direction>('bottom');\n\nexport const Drawer = ({\n  shouldScaleBackground = true,\n  direction = 'bottom',\n  ...props\n}: ComponentPropsWithoutRef<typeof DrawerPrimitive.Root>) => (\n  <DrawerDirectionContext.Provider value={direction}>\n    <DrawerPrimitive.Root\n      shouldScaleBackground={shouldScaleBackground}\n      direction={direction}\n      {...props}\n    />\n  </DrawerDirectionContext.Provider>\n);\nDrawer.displayName = 'Drawer';\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport const DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      className={cn('bg-overlay fixed inset-0 z-[var(--z-overlay)]', className)}\n      {...props}\n    />\n  );\n});\nDrawerOverlay.displayName = 'DrawerOverlay';\n\n// Edge-anchored sides pad by the matching safe-area inset (consumers set viewport-fit=cover).\nconst directionStyles: Record<Direction, string> = {\n  bottom:\n    'inset-x-0 bottom-0 mt-24 flex h-auto max-h-[90dvh] flex-col rounded-t-xl border-t border-border pb-[env(safe-area-inset-bottom)]',\n  top: 'inset-x-0 top-0 mb-24 flex h-auto max-h-[90dvh] flex-col rounded-b-xl border-b border-border',\n  left: 'inset-y-0 left-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-r-xl border-r border-border pl-[env(safe-area-inset-left)]',\n  right:\n    'inset-y-0 right-0 flex h-full w-full max-w-[min(26.25rem,90vw)] flex-col rounded-l-xl border-l border-border pr-[env(safe-area-inset-right)]',\n};\n\nconst handleStyles: Record<Direction, string> = {\n  bottom: 'mx-auto mt-3 h-1.5 w-12 rounded-full bg-border',\n  top: 'mx-auto mb-3 h-1.5 w-12 rounded-full bg-border order-last',\n  left: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border order-last self-stretch shrink-0',\n  right: 'mx-1.5 my-auto h-12 w-1.5 rounded-full bg-border shrink-0 self-stretch',\n};\n\nexport interface DrawerContentProps extends ComponentPropsWithoutRef<\n  typeof DrawerPrimitive.Content\n> {\n  /**\n   * Side the drawer slides in from. Prefer setting `direction` on `<Drawer>`\n   * (vaul needs it there for drag physics); this prop only overrides the\n   * visual placement.\n   */\n  direction?: Direction;\n  /** Hide the drag handle. */\n  hideHandle?: boolean;\n  /** Show the close (×) button. Default `true`. */\n  showClose?: boolean;\n  /**\n   * Element to focus when the overlay closes. Overrides Radix's default\n   * (the element focused when the content mounted), which is `<body>` for\n   * controlled overlays opened from a pointer click on a non-focusable /\n   * tooltip-wrapped trigger. A consumer `onCloseAutoFocus` runs first and\n   * wins if it calls `preventDefault()`.\n   */\n  returnFocusTo?: ReturnFocusRef;\n}\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  DrawerContentProps\n>(function DrawerContent(\n  {\n    className,\n    direction: directionProp,\n    hideHandle,\n    showClose = true,\n    returnFocusTo,\n    onCloseAutoFocus,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const rootDirection = useContext(DrawerDirectionContext);\n  const direction = directionProp ?? rootDirection;\n  const strings = useStrings();\n  const isHorizontal = direction === 'left' || direction === 'right';\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        onCloseAutoFocus={withReturnFocus(returnFocusTo, onCloseAutoFocus)}\n        className={cn(\n          'bg-card fixed z-[var(--z-modal)]',\n          directionStyles[direction],\n          isHorizontal && 'flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {!hideHandle && <div aria-hidden className={handleStyles[direction]} />}\n        <div className={cn('min-h-0 min-w-0 flex-1', isHorizontal && 'flex flex-col')}>\n          {children}\n        </div>\n        {showClose && (\n          <DrawerPrimitive.Close\n            aria-label={strings.drawer.close}\n            className={cn(\n              'text-foreground-subtle absolute top-4 right-4 inline-flex size-8 items-center justify-center rounded-md',\n              'hover:bg-background-muted hover:text-foreground',\n              'focus-visible:ring-ring focus-visible:ring-offset-card outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n              'transition-colors duration-[var(--duration-fast)]',\n            )}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </DrawerPrimitive.Close>\n        )}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\nDrawerContent.displayName = 'DrawerContent';\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('grid gap-1 p-4 text-center sm:text-left', className)} {...props} />;\n}\nDrawerHeader.displayName = 'DrawerHeader';\n\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n}\nDrawerFooter.displayName = 'DrawerFooter';\n\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold', className)}\n      {...props}\n    />\n  );\n});\nDrawerTitle.displayName = 'DrawerTitle';\n\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      className={cn('text-foreground-muted text-sm', className)}\n      {...props}\n    />\n  );\n});\nDrawerDescription.displayName = 'DrawerDescription';\n"],"names":["DrawerDirectionContext","createContext","Drawer","shouldScaleBackground","direction","props","jsx","DrawerPrimitive","DrawerTrigger","DrawerPortal","DrawerClose","DrawerOverlay","forwardRef","className","ref","cn","directionStyles","handleStyles","DrawerContent","directionProp","hideHandle","showClose","returnFocusTo","onCloseAutoFocus","children","rootDirection","useContext","strings","useStrings","isHorizontal","jsxs","withReturnFocus","X","DrawerHeader","DrawerFooter","DrawerTitle","DrawerDescription"],"mappings":"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"}