@skiddph/prui 0.8.0 → 0.9.0

package/dist/core/date-picker.js

@@ -1,172 +1,277 @@
-import { jsxs as x, Fragment as $, jsx as a } from "react/jsx-runtime";
-import * as s from "react";
-import { CalendarDays as z } from "lucide-react";
-import { cn as j } from "./cn.js";
-import { useOverlayStack as E, useEscapeKey as F, Portal as T } from "./overlay.js";
-import { useAnchoredPosition as H } from "./anchor.js";
-import { Calendar as U } from "./calendar.js";
-import { usePruiI18n as I } from "../i18n.js";
-const K = s.forwardRef(function({ value: v, defaultValue: D, onChange: t, min: h, max: M, placeholder: R = "YYYY-MM-DD", disabled: b, className: k, ariaLabel: w }, l) {
-  const [g, N] = s.useState(D ?? ""), m = v !== void 0, f = m ? v : g, [r, o] = s.useState(!1), i = s.useRef(null), [u, y] = s.useState(""), { setElement: P, isTop: S } = E(r);
-  F(r, S, () => {
-    var e;
-    o(!1), (e = i.current) == null || e.focus();
-  });
-  const { ref: d, position: c } = H({ active: r, anchorRef: i, side: "bottom", align: "start", offsetHeight: 360 }), Y = (e) => {
+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;
-    m || N(e), t == null || t(e), o(!1), (n = i.current) == null || n.focus();
+    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__ */ x($, { children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ h(G, { children: [
+    /* @__PURE__ */ r(
       "input",
       {
-        ref: (e) => {
-          i.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
+        ref: (n) => {
+          x.current = n, typeof N == "function" ? N(n) : N && (N.current = n);
         },
         type: "text",
         readOnly: !0,
         role: "combobox",
-        "aria-expanded": r,
+        "aria-expanded": $,
         "aria-haspopup": "dialog",
-        "aria-label": w,
-        placeholder: R,
-        disabled: b,
-        value: u !== "" ? u : f,
+        "aria-label": D,
+        placeholder: E,
+        disabled: M,
+        value: Y !== "" ? Y : T,
+        onClick: () => d(!0),
         onFocus: () => {
-          !b && !r && o(!0);
+          !M && !$ && d(!0);
         },
-        onClick: () => o(!0),
-        onChange: (e) => {
-          const n = e.target.value;
-          y(n), /^\d{4}-\d{2}-\d{2}$/.test(n) && (y(""), Y(n));
+        onChange: (n) => {
+          const p = n.target.value;
+          w(p), (u ? le.test(p) : ie.test(p)) && (w(""), a(p));
         },
-        className: j(
-          "prui-date-picker flex h-9 w-full cursor-pointer items-center gap-2 border border-[var(--prui-line)]",
-          "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+        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",
-          k
+          R
         )
       }
     ),
-    /* @__PURE__ */ a(z, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
-    r ? /* @__PURE__ */ a(T, { children: /* @__PURE__ */ a(
+    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: (e) => {
-          d(e), P(e);
+        ref: (n) => {
+          K(n), I(n);
         },
         role: "dialog",
-        "aria-label": "Choose date",
-        className: "fixed z-[var(--prui-z-overlay)]",
-        style: { top: (c == null ? void 0 : c.top) ?? -9999, left: (c == null ? void 0 : c.left) ?? -9999 },
-        children: /* @__PURE__ */ a(U, { value: f, onSelect: Y, min: h, max: M, className: "shadow-[var(--prui-shadow-lg)]" })
+        "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
   ] });
 });
-K.displayName = "DatePicker";
-const q = s.forwardRef(function({ value: v, defaultValue: D, onChange: t, min: h, max: M, placeholder: R = "YYYY-MM-DD – YYYY-MM-DD", disabled: b, className: k, ariaLabel: w }, l) {
-  const { t: g } = I(), [N, m] = s.useState(D ?? {}), f = v !== void 0, r = f ? v : N, [o, i] = s.useState(!1), u = s.useRef(null), { setElement: y, isTop: P } = E(o);
-  F(o, P, () => {
+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;
-    i(!1), (e = u.current) == null || e.focus();
+    Y(!1), (e = w.current) == null || e.focus();
   });
-  const { ref: S, position: d } = H({ active: o, anchorRef: u, side: "bottom", align: "start", offsetHeight: 360 }), c = (e) => {
-    var O;
-    const { from: n, to: A } = r;
-    let p;
-    if (!n || n && A)
-      p = { from: e };
-    else if (e < n)
-      p = { from: e };
-    else {
-      p = { from: n, to: e }, t == null || t(p), f || m(p), i(!1), (O = u.current) == null || O.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;
     }
-    f || m(p), t == null || t(p);
-  }, Y = r.from ? r.to ? `${r.from} – ${r.to}` : `${r.from} – …` : "";
-  return /* @__PURE__ */ x($, { children: [
-    /* @__PURE__ */ a(
+    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) => {
-          u.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
+          w.current = e, typeof E == "function" ? E(e) : E && (E.current = e);
         },
         type: "text",
         readOnly: !0,
         role: "combobox",
-        "aria-expanded": o,
+        "aria-expanded": x,
         "aria-haspopup": "dialog",
-        "aria-label": w,
-        placeholder: R,
-        disabled: b,
-        value: Y,
-        onClick: () => i(!0),
+        "aria-label": u,
+        placeholder: j,
+        disabled: R,
+        value: q,
+        onClick: () => Y(!0),
         onFocus: () => {
-          !b && !o && i(!0);
+          !R && !x && Y(!0);
         },
-        className: j(
-          "prui-date-range-picker flex h-9 w-full cursor-pointer items-center border border-[var(--prui-line)]",
-          "bg-[var(--prui-background)] rounded-[var(--prui-radius)] px-3 text-sm text-[var(--prui-fg)] placeholder:text-[var(--prui-dim)]",
+        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",
-          k
+          D
         )
       }
     ),
-    /* @__PURE__ */ a(z, { className: "pointer-events-none -ml-7 h-4 w-4 text-[var(--prui-dim)]", "aria-hidden": !0 }),
-    o ? /* @__PURE__ */ a(T, { children: /* @__PURE__ */ a(
+    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) => {
-          S(e), y(e);
+          K(e), I(e);
         },
         role: "dialog",
-        "aria-label": "Choose date range",
-        className: "fixed z-[var(--prui-z-overlay)]",
-        style: { top: (d == null ? void 0 : d.top) ?? -9999, left: (d == null ? void 0 : d.left) ?? -9999 },
-        children: /* @__PURE__ */ x("div", { className: "shadow-[var(--prui-shadow-lg)]", children: [
-          /* @__PURE__ */ a(
-            U,
-            {
-              value: r.to ?? r.from,
-              month: r.from ? `${r.from.slice(0, 7)}` : void 0,
-              onSelect: c,
-              min: h,
-              max: M,
-              showToday: !1,
-              className: "border-0 shadow-none",
-              "data-range-from": r.from ?? "",
-              "data-range-to": r.to ?? ""
-            }
-          ),
-          /* @__PURE__ */ x("div", { className: "flex items-center justify-between gap-2 border-t border-[var(--prui-line)] px-3 py-2 text-xs text-[var(--prui-dim)]", children: [
-            /* @__PURE__ */ a("span", { "data-testid": "range-label", children: Y || g.today }),
-            /* @__PURE__ */ x("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ a(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    f || m({}), t == null || t({});
-                  },
-                  className: "cursor-pointer rounded-[var(--prui-radius-1)] px-2 py-1 transition-colors hover:bg-[var(--prui-raise)]",
-                  children: g.clear
-                }
-              ),
-              /* @__PURE__ */ a(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    var e;
-                    i(!1), (e = u.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: g.apply
-                }
-              )
+        "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
+                  }
+                )
+              ] })
             ] })
           ] })
         ] })
@@ -174,29 +279,36 @@ const q = s.forwardRef(function({ value: v, defaultValue: D, onChange: t, min: h
     ) }) : null
   ] });
 });
-q.displayName = "DateRangePicker";
-const Z = {
+ce.displayName = "DateRangePicker";
+const xe = {
   name: "DatePicker",
   props: [
-    { name: "value", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
-    { name: "defaultValue", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" },
+    { 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 'YYYY-MM-DD'", default: "undefined", control: "date" },
-    { name: "max", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" }
+    { 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 'YYYY-MM-DD'", default: "undefined", control: "date" },
-    { name: "max", type: "string 'YYYY-MM-DD'", default: "undefined", control: "date" }
+    { 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 {
-  K as DatePicker,
-  q as DateRangePicker,
-  Z as datePickerPropsMeta,
-  _ as dateRangePickerPropsMeta
+  de as DatePicker,
+  ce as DateRangePicker,
+  xe as datePickerPropsMeta,
+  ye as dateRangePickerPropsMeta
 };

package/dist/core/dialog.d.ts

@@ -28,6 +28,13 @@ export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement>
 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,64 +1,64 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import * as a from "react";
+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 n } from "./cn.js";
-import { useOverlay as h, Portal as w } from "./overlay.js";
-import { usePruiI18n as N } from "../i18n.js";
-const v = a.createContext(null);
-function g() {
-  const e = a.useContext(v);
+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 = t.useContext(g);
   if (!e) throw new Error("Dialog parts must be used inside <Dialog>");
   return e;
 }
-const I = ({ open: e, defaultOpen: o = !1, onOpenChange: r, children: i }) => {
-  const [c, p] = a.useState(o), s = e !== void 0, f = s ? e : c, d = a.useId(), l = (u) => {
-    s || p(u), r == null || r(u);
+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__ */ t(v.Provider, { value: { open: f, setOpen: l, labelId: d }, children: i });
+  return /* @__PURE__ */ r(g.Provider, { value: { open: f, setOpen: n, labelId: d }, children: l });
 };
-I.displayName = "Dialog";
-const C = a.forwardRef(
-  ({ className: e, children: o, ariaLabel: r, hideClose: i, initialFocus: c = "first", onClick: p, ...s }, f) => {
-    const { open: d, setOpen: l, labelId: u } = g(), { t: b } = N(), { ref: x } = h({
+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: () => l(!1),
-      initialFocus: c
+      onEscape: () => n(!1),
+      initialFocus: u
     });
-    return d ? /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("div", { ref: x, children: /* @__PURE__ */ t(
+    return d ? /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r("div", { ref: y, children: /* @__PURE__ */ r(
       "div",
       {
         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 && l(!1);
+          m.target === m.currentTarget && n(!1);
         },
-        children: /* @__PURE__ */ y(
+        children: /* @__PURE__ */ x(
           "div",
           {
             ref: f,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": r,
-            "aria-labelledby": r ? void 0 : u,
+            "aria-label": a,
+            "aria-labelledby": a ? void 0 : p,
             tabIndex: -1,
-            className: n(
+            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: p,
+            onClick: c,
             ...s,
             children: [
               o,
-              i ? null : /* @__PURE__ */ t(
+              l ? null : /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
                   "aria-label": b.close,
-                  onClick: () => l(!1),
+                  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__ */ t(D, { className: "h-4 w-4", "aria-hidden": !0 })
+                  children: /* @__PURE__ */ r(D, { className: "h-4 w-4", "aria-hidden": !0 })
                 }
               )
             ]
@@ -68,19 +68,30 @@ const C = a.forwardRef(
     ) }) }) : null;
   }
 );
-C.displayName = "DialogContent";
-const F = ({ className: e, ...o }) => /* @__PURE__ */ t("div", { className: n("prui-dialog-header flex flex-col gap-1 p-4 pb-2", e), ...o }), R = a.forwardRef(
-  ({ className: e, ...o }, r) => {
-    const { labelId: i } = g();
-    return /* @__PURE__ */ t("h2", { ref: r, id: i, className: n("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 });
   }
 );
-R.displayName = "DialogTitle";
-const j = a.forwardRef(
-  ({ className: e, ...o }, r) => /* @__PURE__ */ t("p", { ref: r, className: n("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
+    }
+  )
 );
-j.displayName = "DialogDescription";
-const M = ({ className: e, ...o }) => /* @__PURE__ */ t("div", { className: n("prui-dialog-footer flex items-center justify-end gap-2 p-4 pt-2", e), ...o }), H = {
+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" },
@@ -88,13 +99,21 @@ const M = ({ className: e, ...o }) => /* @__PURE__ */ t("div", { className: n("p
     { 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 {
-  I as Dialog,
-  C as DialogContent,
-  j as DialogDescription,
-  M as DialogFooter,
-  F as DialogHeader,
-  R as DialogTitle,
+  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
 };