@skiddph/prui 0.7.0 → 0.9.0

package/dist/core/date-picker.d.ts

@@ -0,0 +1,62 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * DatePicker / DateRangePicker: a text trigger opening a Calendar popover.
+ * Values stay plain strings — "YYYY-MM-DD" by default, or
+ * "YYYY-MM-DD HH:mm(:ss)" with timepicker on — so they remain
+ * native-input compatible with no date library. The trigger is
+ * keyboard-operable (Enter/ArrowDown opens, Escape topmost closes and
+ * refocuses, typing a full value commits); clicking outside dismisses.
+ * The range picker anchors on the start date, supports a maxRange cap
+ * ("90d", "12w", "3m", "1y", or a plain number of days), and restarts
+ * when the picked end precedes the start.
+ */
+export interface DatePickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (date: string) => void;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    /** Accessible label for the trigger input. */
+    ariaLabel?: string;
+    /** Include a time panel; values become "YYYY-MM-DD HH:mm(:ss)". Default false. */
+    timepicker?: boolean;
+    /** Seconds column for the time panel (requires timepicker). */
+    seconds?: boolean;
+    /** Minute step for the time panel (requires timepicker). */
+    minuteStep?: number;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export interface DateRange {
+    from?: string;
+    to?: string;
+}
+/**
+ * maxRange caps the span between from and to. Accept a plain number of
+ * days, or a string with a unit: "90d" days, "12w" weeks, "3m" months
+ * (calendar-aware), "1y" years.
+ */
+export type MaxRange = number | `${number}d` | `${number}w` | `${number}m` | `${number}y` | (string & {});
+export interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    min?: string;
+    max?: string;
+    /** Cap the selectable span, e.g. 90, "90d", "12w", "3m", "1y". */
+    maxRange?: MaxRange;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    /** Include time panels; values become "YYYY-MM-DD HH:mm(:ss)". Default false. */
+    timepicker?: boolean;
+    seconds?: boolean;
+    minuteStep?: number;
+}
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLInputElement>>;
+export declare const datePickerPropsMeta: PropsMeta;
+export declare const dateRangePickerPropsMeta: PropsMeta;

package/dist/core/date-picker.js

@@ -0,0 +1,314 @@
+import { jsxs as h, Fragment as G, jsx as r } from "react/jsx-runtime";
+import * as b from "react";
+import { Clock as J, CalendarDays as Q } from "lucide-react";
+import { cn as V } from "./cn.js";
+import { Portal as W, useOverlayStack as te, useEscapeKey as re } from "./overlay.js";
+import { useAnchoredPosition as ae } from "./anchor.js";
+import { Calendar as X, fromDateKey as ne } from "./calendar.js";
+import { TimePanel as U } from "./time-picker.js";
+import { usePruiI18n as oe } from "../i18n.js";
+const ie = /^\d{4}-\d{2}-\d{2}$/, le = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}(:\d{2})?$/;
+function _(c, o) {
+  if (!c) return { date: "", time: o ? "00:00" : "" };
+  const [s, i] = c.split(" ");
+  return { date: s ?? "", time: o ? i ?? "00:00" : i ?? "" };
+}
+function Z(c, o, s) {
+  const { setElement: i, isTop: f } = te(o);
+  re(o, f, s);
+  const { ref: l, position: g } = ae({ active: o, anchorRef: c, side: "bottom", align: "start", offsetHeight: 380 });
+  return b.useEffect(() => {
+    if (!o) return;
+    const M = (R) => {
+      var u;
+      const D = R.target;
+      (u = c.current) != null && u.contains(D) || (!(D instanceof Element) || !D.closest("[data-prui-picker-panel]")) && s();
+    };
+    return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
+  }), { setElement: i, floatingRef: l, position: g };
+}
+const de = b.forwardRef(function({
+  value: o,
+  defaultValue: s,
+  onChange: i,
+  min: f,
+  max: l,
+  placeholder: g,
+  disabled: M,
+  className: R,
+  ariaLabel: D,
+  timepicker: u = !1,
+  seconds: m = !1,
+  minuteStep: H
+}, N) {
+  const E = g ?? (u ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD"), [y, j] = b.useState(s ?? ""), C = o !== void 0, T = C ? o : y, [$, d] = b.useState(!1), x = b.useRef(null), [Y, w] = b.useState(""), { date: k, time: F } = _(T, u), O = x, { setElement: I, floatingRef: K, position: v } = Z(O, $, () => {
+    var n;
+    d(!1), (n = x.current) == null || n.focus();
+  }), a = (n) => {
+    var p;
+    C || j(n), i == null || i(n), u || (d(!1), (p = x.current) == null || p.focus());
+  }, t = (n) => {
+    a(u ? `${n} ${F || "00:00"}` : n);
+  }, P = (n) => {
+    k && a(`${k} ${n}`);
+  };
+  return /* @__PURE__ */ h(G, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: (n) => {
+          x.current = n, typeof N == "function" ? N(n) : N && (N.current = n);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": $,
+        "aria-haspopup": "dialog",
+        "aria-label": D,
+        placeholder: E,
+        disabled: M,
+        value: Y !== "" ? Y : T,
+        onClick: () => d(!0),
+        onFocus: () => {
+          !M && !$ && d(!0);
+        },
+        onChange: (n) => {
+          const p = n.target.value;
+          w(p), (u ? le.test(p) : ie.test(p)) && (w(""), a(p));
+        },
+        className: V(
+          "prui-date-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          R
+        )
+      }
+    ),
+    u ? /* @__PURE__ */ r(J, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }) : /* @__PURE__ */ r(Q, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    $ ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: (n) => {
+          K(n), I(n);
+        },
+        role: "dialog",
+        "aria-label": D ?? "Choose date",
+        "data-prui-picker-panel": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] p-1 shadow-[var(--prui-shadow-lg)]",
+        style: { top: (v == null ? void 0 : v.top) ?? -9999, left: (v == null ? void 0 : v.left) ?? -9999 },
+        children: /* @__PURE__ */ h("div", { className: V("flex gap-2", u && "p-1"), children: [
+          /* @__PURE__ */ r(
+            X,
+            {
+              value: k || void 0,
+              onSelect: t,
+              min: f ? f.slice(0, 10) : void 0,
+              max: l ? l.slice(0, 10) : void 0,
+              showToday: !1,
+              className: "border-0 shadow-none"
+            }
+          ),
+          u ? /* @__PURE__ */ r("div", { className: "flex flex-col gap-1 border-l border-[var(--prui-line)] pl-2", children: /* @__PURE__ */ r(U, { value: F, onSelect: P, seconds: m, minuteStep: H }) }) : null
+        ] })
+      }
+    ) }) : null
+  ] });
+});
+de.displayName = "DatePicker";
+function se(c, o) {
+  const s = typeof o == "string" ? /^(\d+)([dwmy])$/i.exec(o.trim()) : null, i = Number(s ? s[1] : o), f = s ? s[2].toLowerCase() : "d", l = new Date(c);
+  return f === "d" ? l.setDate(l.getDate() + i) : f === "w" ? l.setDate(l.getDate() + i * 7) : f === "m" ? l.setMonth(l.getMonth() + i) : l.setFullYear(l.getFullYear() + i), l;
+}
+function A(c, o) {
+  const s = se(ne(c), o), i = s.getFullYear(), f = String(s.getMonth() + 1).padStart(2, "0"), l = String(s.getDate()).padStart(2, "0");
+  return `${i}-${f}-${l}`;
+}
+function B(c) {
+  return c ? c.slice(0, 10) : void 0;
+}
+const ce = b.forwardRef(function({
+  value: o,
+  defaultValue: s,
+  onChange: i,
+  min: f,
+  max: l,
+  maxRange: g,
+  placeholder: M,
+  disabled: R,
+  className: D,
+  ariaLabel: u,
+  timepicker: m = !1,
+  seconds: H = !1,
+  minuteStep: N
+}, E) {
+  const { t: y } = oe(), j = M ?? (m ? "YYYY-MM-DD HH:mm – YYYY-MM-DD HH:mm" : "YYYY-MM-DD – YYYY-MM-DD"), [C, T] = b.useState(s ?? {}), $ = o !== void 0, d = $ ? o : C, [x, Y] = b.useState(!1), w = b.useRef(null), k = w, [F, O] = b.useState(void 0), { setElement: I, floatingRef: K, position: v } = Z(k, x, () => {
+    var e;
+    Y(!1), (e = w.current) == null || e.focus();
+  });
+  b.useEffect(() => {
+    x && O(d.from ? d.from.slice(0, 7) : void 0);
+  }, [x, d.from === void 0]);
+  const a = d.from ? _(d.from, m) : void 0, t = d.to ? _(d.to, m) : void 0, P = (a == null ? void 0 : a.date) ?? "", n = b.useCallback(
+    (e) => !g || !P || t != null && t.date ? !1 : e > A(P, g),
+    [g, P, t == null ? void 0 : t.date]
+  ), p = (e) => {
+    $ || T(e), i == null || i(e);
+  }, ee = (e) => {
+    var z;
+    if (!a || a.date && (t != null && t.date)) {
+      p({ from: m ? `${e} 00:00` : e });
+      return;
+    }
+    if (e < a.date) {
+      p({ from: m ? `${e} 00:00` : e });
+      return;
+    }
+    if (g && e > A(a.date, g)) {
+      const S = A(a.date, g);
+      p({ from: d.from, to: m ? `${S} ${(t == null ? void 0 : t.time) ?? "23:59"}` : S });
+      return;
+    }
+    p({ from: d.from, to: m ? `${e} ${(t == null ? void 0 : t.time) ?? "23:59"}` : e }), m || (Y(!1), (z = w.current) == null || z.focus());
+  }, L = (e, z) => {
+    const S = e === "from" ? a : t;
+    S != null && S.date && p({ ...d, [e]: `${S.date} ${z}` });
+  }, q = a ? t ? `${d.from} – ${d.to}` : `${d.from} – …` : "";
+  return /* @__PURE__ */ h(G, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: (e) => {
+          w.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
+        },
+        type: "text",
+        readOnly: !0,
+        role: "combobox",
+        "aria-expanded": x,
+        "aria-haspopup": "dialog",
+        "aria-label": u,
+        placeholder: j,
+        disabled: R,
+        value: q,
+        onClick: () => Y(!0),
+        onFocus: () => {
+          !R && !x && Y(!0);
+        },
+        className: V(
+          "prui-date-range-picker h-9 w-full cursor-pointer rounded-[var(--prui-radius)] border border-[var(--prui-line)]",
+          "bg-[var(--prui-background)] px-3 pr-8 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+          "outline-none transition-colors focus:border-[var(--prui-brand)] focus:ring-2 focus:ring-[var(--prui-brand)]/30",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          D
+        )
+      }
+    ),
+    m ? /* @__PURE__ */ r(J, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }) : /* @__PURE__ */ r(Q, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
+    x ? /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
+      "div",
+      {
+        ref: (e) => {
+          K(e), I(e);
+        },
+        role: "dialog",
+        "aria-label": u ?? "Choose date range",
+        "data-prui-picker-panel": !0,
+        className: "fixed z-[var(--prui-z-overlay)] rounded-[var(--prui-radius)] border border-[var(--prui-line)] bg-[var(--prui-surface)] shadow-[var(--prui-shadow-lg)]",
+        style: { top: (v == null ? void 0 : v.top) ?? -9999, left: (v == null ? void 0 : v.left) ?? -9999 },
+        children: /* @__PURE__ */ h("div", { className: V("flex gap-2 p-1", m && "p-2"), children: [
+          /* @__PURE__ */ h("div", { children: [
+            /* @__PURE__ */ r("div", { className: "px-1 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: y.from }),
+            /* @__PURE__ */ r(
+              X,
+              {
+                value: a == null ? void 0 : a.date,
+                month: F,
+                onMonthChange: O,
+                onSelect: ee,
+                min: f ? B(f) : void 0,
+                max: l ? B(l) : g && P && !(t != null && t.date) ? A(P, g) : void 0,
+                disabled: n,
+                showToday: !1,
+                className: "border-0 shadow-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ h("div", { className: "flex flex-col gap-1 border-l border-[var(--prui-line)] pl-2", children: [
+            m ? /* @__PURE__ */ h("div", { children: [
+              /* @__PURE__ */ r("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: y.time }),
+              /* @__PURE__ */ h("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ h("div", { children: [
+                  /* @__PURE__ */ r("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: y.from }),
+                  /* @__PURE__ */ r(U, { compact: !0, value: a == null ? void 0 : a.time, onSelect: (e) => L("from", e), seconds: H, minuteStep: N })
+                ] }),
+                /* @__PURE__ */ h("div", { children: [
+                  /* @__PURE__ */ r("div", { className: "mb-1 px-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--prui-dim)]", children: y.to }),
+                  /* @__PURE__ */ r(U, { compact: !0, value: t == null ? void 0 : t.time, onSelect: (e) => L("to", e), seconds: H, minuteStep: N })
+                ] })
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ h("div", { className: "mt-auto flex items-center justify-between gap-2 border-t border-[var(--prui-line)] px-1 pb-1 pt-2 text-xs text-[var(--prui-dim)]", children: [
+              /* @__PURE__ */ r("span", { "data-testid": "range-label", children: q || y.today }),
+              /* @__PURE__ */ h("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => p({}),
+                    className: "cursor-pointer rounded-[var(--prui-radius-1)] px-2 py-1 transition-colors hover:bg-[var(--prui-raise)]",
+                    children: y.clear
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      var e;
+                      Y(!1), (e = w.current) == null || e.focus();
+                    },
+                    className: "cursor-pointer rounded-[var(--prui-radius-1)] bg-[var(--prui-brand)]/15 px-2 py-1 text-[var(--prui-brand)] transition-colors hover:bg-[var(--prui-brand)]/25",
+                    children: y.apply
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      }
+    ) }) : null
+  ] });
+});
+ce.displayName = "DateRangePicker";
+const xe = {
+  name: "DatePicker",
+  props: [
+    { name: "value", type: "string 'YYYY-MM-DD' | 'YYYY-MM-DD HH:mm'", default: "undefined", control: "date" },
+    { name: "defaultValue", type: "string", default: "undefined", control: "date" },
+    { name: "onChange", type: "(date: string) => void", default: null, control: "none" },
+    { name: "min", type: "string", default: "undefined", control: "date" },
+    { name: "max", type: "string", default: "undefined", control: "date" },
+    { name: "timepicker", type: "boolean", default: "false", control: "boolean", description: "Adds a time panel; values become 'YYYY-MM-DD HH:mm(:ss)'." },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean", description: "Seconds column (needs timepicker)." },
+    { name: "minuteStep", type: "number", default: "1", control: "number", description: "Minute step (needs timepicker)." }
+  ]
+}, ye = {
+  name: "DateRangePicker",
+  props: [
+    { name: "value", type: "{ from?: string, to?: string }", default: "{}", control: "daterange" },
+    { name: "defaultValue", type: "{ from?: string, to?: string }", default: "{}", control: "daterange" },
+    { name: "onChange", type: "(range: DateRange) => void", default: null, control: "none" },
+    { name: "min", type: "string", default: "undefined", control: "date" },
+    { name: "max", type: "string", default: "undefined", control: "date" },
+    { name: "maxRange", type: "number | '90d' | '12w' | '3m' | '1y'", default: "undefined", control: "text", description: "Caps the selectable span; days beyond from+maxRange are disabled." },
+    { name: "timepicker", type: "boolean", default: "false", control: "boolean" },
+    { name: "seconds", type: "boolean", default: "false", control: "boolean" },
+    { name: "minuteStep", type: "number", default: "1", control: "number" }
+  ]
+};
+export {
+  de as DatePicker,
+  ce as DateRangePicker,
+  xe as datePickerPropsMeta,
+  ye as dateRangePickerPropsMeta
+};

package/dist/core/dialog.d.ts

@@ -1,5 +1,11 @@
 import { PropsMeta } from './props-meta';
 import * as React from "react";
+/**
+ * Dialog: the compound, declarative modal surface (<Dialog> + <DialogContent/
+ * Header/Title/Description/Footer>). Built on the shared overlay
+ * infrastructure: portaled, focus-trapped with focus restoration, topmost
+ * Escape, scroll-locked, background aria-hidden/inert while open.
+ */
 export interface DialogProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -16,10 +22,19 @@ export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement>
     /** Accessibility label when no DialogTitle is rendered. */
     ariaLabel?: string;
     hideClose?: boolean;
+    /** Initial focus target: first focusable (default), the dialog itself, a specific element, or none. */
+    initialFocus?: React.RefObject<HTMLElement | null> | "first" | "container" | false;
 }
 export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogHeader: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const DialogTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Remove the default vertical padding (keeps horizontal). */
+    flush?: boolean;
+}
+/** Padded content area for DialogContent: consistent x/y gutters. */
+export declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
 export declare const DialogDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 export declare const DialogFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const dialogPropsMeta: PropsMeta;
+export declare const dialogBodyPropsMeta: PropsMeta;

package/dist/core/dialog.js

@@ -1,102 +1,119 @@
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import * as l from "react";
-import { X as x } from "lucide-react";
-import { cn as d } from "./cn.js";
-const m = l.createContext(null);
+import { jsx as r, jsxs as x } from "react/jsx-runtime";
+import * as t from "react";
+import { X as D } from "lucide-react";
+import { cn as i } from "./cn.js";
+import { useOverlay as h, Portal as N } from "./overlay.js";
+import { usePruiI18n as w } from "../i18n.js";
+const g = t.createContext(null);
 function v() {
-  const e = l.useContext(m);
+  const e = t.useContext(g);
   if (!e) throw new Error("Dialog parts must be used inside <Dialog>");
   return e;
 }
-const w = ({ open: e, defaultOpen: o = !1, onOpenChange: t, children: n }) => {
-  const [c, p] = l.useState(o), u = e !== void 0, s = u ? e : c, i = l.useId(), f = (r) => {
-    u || p(r), t == null || t(r);
+const R = ({ open: e, defaultOpen: o = !1, onOpenChange: a, children: l }) => {
+  const [u, c] = t.useState(o), s = e !== void 0, f = s ? e : u, d = t.useId(), n = (p) => {
+    s || c(p), a == null || a(p);
   };
-  return /* @__PURE__ */ a(m.Provider, { value: { open: s, setOpen: f, labelId: i }, children: n });
+  return /* @__PURE__ */ r(g.Provider, { value: { open: f, setOpen: n, labelId: d }, children: l });
 };
-w.displayName = "Dialog";
-const D = l.forwardRef(
-  ({ className: e, children: o, ariaLabel: t, hideClose: n, onClick: c, ...p }, u) => {
-    const { open: s, setOpen: i, labelId: f } = v();
-    return l.useEffect(() => {
-      if (!s) return;
-      const r = (b) => {
-        b.key === "Escape" && i(!1);
-      };
-      document.addEventListener("keydown", r);
-      const g = document.body.style.overflow;
-      return document.body.style.overflow = "hidden", () => {
-        document.removeEventListener("keydown", r), document.body.style.overflow = g;
-      };
-    }, [s, i]), s ? /* @__PURE__ */ a(
+R.displayName = "Dialog";
+const I = t.forwardRef(
+  ({ className: e, children: o, ariaLabel: a, hideClose: l, initialFocus: u = "first", onClick: c, ...s }, f) => {
+    const { open: d, setOpen: n, labelId: p } = v(), { t: b } = w(), { ref: y } = h({
+      open: d,
+      onEscape: () => n(!1),
+      initialFocus: u
+    });
+    return d ? /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r("div", { ref: y, children: /* @__PURE__ */ r(
       "div",
       {
-        className: "prui-dialog-overlay fixed inset-0 z-50 flex items-center justify-center p-4",
-        style: { backgroundColor: "rgba(0,0,0,0.55)" },
-        onMouseDown: (r) => {
-          r.target === r.currentTarget && i(!1);
+        className: "prui-dialog-overlay fixed inset-0 z-[var(--prui-z-overlay)] flex items-center justify-center p-4",
+        style: { backgroundColor: "var(--prui-scrim)" },
+        onMouseDown: (m) => {
+          m.target === m.currentTarget && n(!1);
         },
-        children: /* @__PURE__ */ y(
+        children: /* @__PURE__ */ x(
           "div",
           {
-            ref: u,
+            ref: f,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": t,
-            "aria-labelledby": t ? void 0 : f,
-            className: d(
-              "prui-dialog-content relative z-10 w-full max-w-lg rounded-[var(--prui-radius)]",
-              "border border-[var(--prui-line)] bg-[var(--prui-surface)] shadow-xl",
+            "aria-label": a,
+            "aria-labelledby": a ? void 0 : p,
+            tabIndex: -1,
+            className: i(
+              "prui-dialog-content relative z-[var(--prui-z-content)] w-full max-w-lg rounded-[var(--prui-radius)]",
+              "border border-[var(--prui-line)] bg-[var(--prui-surface)] shadow-[var(--prui-shadow-lg)]",
               "max-h-[85vh] overflow-auto outline-none",
               e
             ),
             onClick: c,
-            ...p,
+            ...s,
             children: [
               o,
-              n ? null : /* @__PURE__ */ a(
+              l ? null : /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  "aria-label": "Close",
-                  onClick: () => i(!1),
+                  "aria-label": b.close,
+                  onClick: () => n(!1),
                   className: "absolute right-3 top-3 rounded-[var(--prui-radius-1)] p-1 text-[var(--prui-dim)] hover:text-[var(--prui-fg)] hover:bg-[var(--prui-raise)] cursor-pointer",
-                  children: /* @__PURE__ */ a(x, { className: "h-4 w-4", "aria-hidden": !0 })
+                  children: /* @__PURE__ */ r(D, { className: "h-4 w-4", "aria-hidden": !0 })
                 }
               )
             ]
           }
         )
       }
-    ) : null;
+    ) }) }) : null;
   }
 );
-D.displayName = "DialogContent";
-const j = ({ className: e, ...o }) => /* @__PURE__ */ a("div", { className: d("prui-dialog-header flex flex-col gap-1 p-4 pb-2", e), ...o }), h = l.forwardRef(
-  ({ className: e, ...o }, t) => {
-    const { labelId: n } = v();
-    return /* @__PURE__ */ a("h2", { ref: t, id: n, className: d("prui-dialog-title text-base font-semibold text-[var(--prui-fg)]", e), ...o });
+I.displayName = "DialogContent";
+const E = ({ className: e, ...o }) => /* @__PURE__ */ r("div", { className: i("prui-dialog-header flex flex-col gap-1 p-4 pb-2", e), ...o }), C = t.forwardRef(
+  ({ className: e, ...o }, a) => {
+    const { labelId: l } = v();
+    return /* @__PURE__ */ r("h2", { ref: a, id: l, className: i("prui-dialog-title text-base font-semibold text-[var(--prui-fg)]", e), ...o });
   }
 );
-h.displayName = "DialogTitle";
-const N = l.forwardRef(
-  ({ className: e, ...o }, t) => /* @__PURE__ */ a("p", { ref: t, className: d("prui-dialog-description text-sm text-[var(--prui-dim)]", e), ...o })
+C.displayName = "DialogTitle";
+const j = t.forwardRef(
+  ({ className: e, flush: o, ...a }, l) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: l,
+      className: i("prui-dialog-body px-4", o ? "pt-0 pb-0" : "pt-1 pb-4", e),
+      ...a
+    }
+  )
 );
-N.displayName = "DialogDescription";
-const I = ({ className: e, ...o }) => /* @__PURE__ */ a("div", { className: d("prui-dialog-footer flex items-center justify-end gap-2 p-4 pt-2", e), ...o }), R = {
+j.displayName = "DialogBody";
+const z = t.forwardRef(
+  ({ className: e, ...o }, a) => /* @__PURE__ */ r("p", { ref: a, className: i("prui-dialog-description text-sm text-[var(--prui-dim)]", e), ...o })
+);
+z.displayName = "DialogDescription";
+const F = ({ className: e, ...o }) => /* @__PURE__ */ r("div", { className: i("prui-dialog-footer flex items-center justify-end gap-2 p-4 pt-2", e), ...o }), H = {
   name: "Dialog",
   props: [
     { name: "open", type: "boolean", default: "undefined", control: "boolean" },
     { name: "defaultOpen", type: "boolean", default: "false", control: "boolean" },
-    { name: "onOpenChange", type: "(open: boolean) => void", default: null, control: "none" }
+    { name: "onOpenChange", type: "(open: boolean) => void", default: null, control: "none" },
+    { name: "initialFocus", type: 'ref | "first" | "container" | false', default: '"first"', control: "none" }
+  ]
+}, O = {
+  name: "DialogBody",
+  props: [
+    { name: "flush", type: "boolean", default: "false", control: "boolean", description: "Remove vertical padding." },
+    { name: "className", type: "string", default: "undefined", control: "text" }
   ]
 };
 export {
-  w as Dialog,
-  D as DialogContent,
-  N as DialogDescription,
-  I as DialogFooter,
-  j as DialogHeader,
-  h as DialogTitle,
-  R as dialogPropsMeta
+  R as Dialog,
+  j as DialogBody,
+  I as DialogContent,
+  z as DialogDescription,
+  F as DialogFooter,
+  E as DialogHeader,
+  C as DialogTitle,
+  O as dialogBodyPropsMeta,
+  H as dialogPropsMeta
 };

package/dist/core/drawer.d.ts

@@ -0,0 +1,34 @@
+import { PropsMeta } from './props-meta';
+import * as React from "react";
+/**
+ * Drawer: a side-anchored modal panel (left/right/top/bottom) built on the
+ * shared overlay infrastructure: portaled, focus-trapped, scroll-locked,
+ * background inert, topmost Escape, focus restoration, reduced motion.
+ * Sheet is the same surface preset to bottom (mobile-first) with a drag
+ * handle. Controlled and uncontrolled open.
+ */
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export interface DrawerProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Anchor edge. Default right. */
+    side?: DrawerSide;
+    /** Panel width for left/right (any CSS length). Default 400px. */
+    size?: number | string;
+    children?: React.ReactNode;
+    /** Accessible label. */
+    ariaLabel?: string;
+    /** Hide the close button. */
+    hideClose?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sheet: the bottom-anchored Drawer preset (mobile-first detail surface).
+ * Same overlay guarantees; size sets max height.
+ */
+export declare const Sheet: React.ForwardRefExoticComponent<Omit<DrawerProps, "side"> & React.RefAttributes<HTMLDivElement>>;
+export declare const drawerPropsMeta: PropsMeta;
+export declare const sheetPropsMeta: PropsMeta;