@ramme-io/ui 4.1.1 → 4.2.1

package/dist/components/layout/DetailDrawer.js

@@ -1,88 +1,98 @@
-import { jsxs as b, jsx as r, Fragment as k } from "react/jsx-runtime";
-import { useRef as E, useEffect as y } from "react";
-import { createPortal as L } from "react-dom";
-import { Icon as D } from "../ui/Icon.js";
-import { cn as h } from "../../utils/cn.js";
-import { useBodyScrollLock as M } from "../../lib/hooks/useBodyScrollLock.js";
-const B = ({
+import { jsxs as p, jsx as o, Fragment as M } from "react/jsx-runtime";
+import { useRef as g, useId as z, useEffect as x } from "react";
+import { useDialogFocus as I } from "../../lib/hooks/useDialogFocus.js";
+import { createPortal as $ } from "react-dom";
+import { Icon as j } from "../ui/Icon.js";
+import { cn as k } from "../../utils/cn.js";
+import { useBodyScrollLock as S } from "../../lib/hooks/useBodyScrollLock.js";
+const q = ({
   isOpen: t,
-  onClose: n,
-  children: p,
-  variant: u = "overlay",
-  resizable: d = !1,
-  width: g = 420,
-  onWidthChange: a,
-  minWidth: c = 320,
-  maxWidth: m = typeof window < "u" ? window.innerWidth * 0.6 : 800,
-  side: o = "right"
+  onClose: i,
+  children: D,
+  variant: a = "overlay",
+  resizable: u = !1,
+  width: E = 420,
+  onWidthChange: c,
+  minWidth: m = 320,
+  maxWidth: f = typeof window < "u" ? window.innerWidth * 0.6 : 800,
+  side: n = "right",
+  title: l
 }) => {
-  const i = E(!1);
-  if (y(() => {
-    if (!d || !a) return;
-    const e = (v) => {
-      if (!i.current) return;
-      const x = o === "right" ? window.innerWidth - v.clientX : v.clientX;
-      a(Math.max(c, Math.min(m, x)));
+  const d = g(!1), v = g(null), L = z();
+  if (I(t && a === "overlay", v), x(() => {
+    if (!u || !c) return;
+    const r = (h) => {
+      if (!d.current) return;
+      const N = n === "right" ? window.innerWidth - h.clientX : h.clientX;
+      c(Math.max(m, Math.min(f, N)));
     }, s = () => {
-      i.current && (i.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
+      d.current && (d.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", s);
+    return window.addEventListener("mousemove", r), window.addEventListener("mouseup", s), () => {
+      window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", s);
     };
-  }, [d, a, c, m, o]), y(() => {
-    const e = (s) => {
-      s.key === "Escape" && t && n();
+  }, [u, c, m, f, n]), x(() => {
+    const r = (s) => {
+      s.key === "Escape" && t && i();
     };
-    return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [t, n]), M(t && u === "overlay"), !t) return null;
-  const l = u === "overlay", f = o === "right" ? "right-0 border-l" : "left-0 border-r", w = /* @__PURE__ */ b(
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
+  }, [t, i]), S(t && a === "overlay"), !t) return null;
+  const e = a === "overlay", w = L, b = n === "right" ? "right-0 border-l" : "left-0 border-r", y = /* @__PURE__ */ p(
     "div",
     {
-      className: h(
+      ref: v,
+      role: e ? "dialog" : "region",
+      "aria-modal": e ? !0 : void 0,
+      tabIndex: e ? -1 : void 0,
+      "aria-labelledby": l ? w : void 0,
+      "aria-label": l ? void 0 : e ? "Detail panel" : "Detail",
+      className: k(
         "flex flex-col border-border bg-card shadow-2xl transition-transform duration-300",
-        l ? `fixed inset-y-0 ${f} z-drawer w-full sm:w-[420px] animate-in ${o === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${f}`
+        e ? `fixed inset-y-0 ${b} z-drawer w-full sm:w-[420px] animate-in ${n === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${b}`
       ),
-      style: l ? void 0 : { width: `min(100vw, ${g}px)` },
+      style: e ? void 0 : { width: `min(100vw, ${E}px)` },
       children: [
-        d && !l && /* @__PURE__ */ r(
+        u && !e && /* @__PURE__ */ o(
           "div",
           {
-            className: h(
+            className: k(
               "absolute top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 active:bg-primary z-10",
-              o === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
+              n === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
             ),
-            onMouseDown: (e) => {
-              e.preventDefault(), i.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
+            onMouseDown: (r) => {
+              r.preventDefault(), d.current = !0, document.body.style.userSelect = "none", document.body.style.cursor = "col-resize";
             }
           }
         ),
-        /* @__PURE__ */ r("div", { className: "flex justify-end p-2 absolute top-0 right-0 z-20", children: /* @__PURE__ */ r(
+        /* @__PURE__ */ o("div", { className: "flex justify-end p-2 absolute top-0 right-0 z-20", children: /* @__PURE__ */ o(
           "button",
           {
-            onClick: n,
+            onClick: i,
             className: "rounded-full p-1.5 bg-background/50 backdrop-blur hover:bg-muted text-muted-foreground hover:text-foreground transition-all shadow-sm border border-border",
             "aria-label": "Close",
-            children: /* @__PURE__ */ r(D, { name: "x", size: 16 })
+            children: /* @__PURE__ */ o(j, { name: "x", size: 16 })
           }
         ) }),
-        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: p })
+        l && // sr-only, not a visible heading: see the `title` prop's note above.
+        /* @__PURE__ */ o("h2", { id: w, className: "sr-only", children: l }),
+        /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: D })
       ]
     }
   );
-  return l ? typeof document > "u" ? null : L(
-    /* @__PURE__ */ b(k, { children: [
-      /* @__PURE__ */ r(
+  return e ? typeof document > "u" ? null : $(
+    /* @__PURE__ */ p(M, { children: [
+      /* @__PURE__ */ o(
         "div",
         {
           className: "fixed inset-0 z-scrim bg-background/80 backdrop-blur-sm transition-opacity",
-          onClick: n
+          onClick: i
         }
       ),
-      w
+      y
     ] }),
     document.body
-  ) : w;
+  ) : y;
 };
 export {
-  B as DetailDrawer
+  q as DetailDrawer
 };

package/dist/components/layout/Drawer.js

@@ -1,27 +1,28 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { useState as p, useRef as L, useCallback as s, useEffect as y } from "react";
-import { createPortal as z } from "react-dom";
-import { Icon as F } from "../ui/Icon.js";
-import { cn as g } from "../../utils/cn.js";
-import { useBodyScrollLock as A } from "../../lib/hooks/useBodyScrollLock.js";
-const P = {
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { useState as y, useRef as L, useCallback as c, useEffect as g, useId as z } from "react";
+import { createPortal as D } from "react-dom";
+import { useDialogFocus as A } from "../../lib/hooks/useDialogFocus.js";
+import { Icon as P } from "../ui/Icon.js";
+import { cn as v } from "../../utils/cn.js";
+import { useBodyScrollLock as q } from "../../lib/hooks/useBodyScrollLock.js";
+const B = {
   sm: "320px",
   md: "480px",
   lg: "640px",
   xl: "80vw",
   full: "100vw"
-}, W = ({
+}, J = ({
   isOpen: o,
-  onClose: n,
-  children: v,
-  footer: d,
+  onClose: a,
+  children: k,
+  footer: f,
   position: l = "right",
-  size: f = "md",
-  title: m,
-  className: k,
-  overlayDismiss: u = !0
+  size: u = "md",
+  title: n,
+  className: S,
+  overlayDismiss: m = !0
 }) => {
-  const [i, x] = p(!1), [h, w] = p(!1), c = L(null), S = (e) => P[e] || e, C = s(() => {
+  const [s, x] = y(!1), [h, w] = y(!1), i = L(null), C = (e) => B[e] || e, E = c(() => {
     switch (l) {
       case "left":
         return { from: "-translate-x-full", to: "translate-x-0", positionClass: "left-0 top-0 h-full" };
@@ -34,11 +35,11 @@ const P = {
       default:
         return { from: "translate-x-full", to: "translate-x-0", positionClass: "right-0 top-0 h-full" };
     }
-  }, [l]), E = s(() => {
-    const e = {}, t = S(f);
+  }, [l]), I = c(() => {
+    const e = {}, t = C(u);
     return l === "left" || l === "right" ? (e.width = t, e.maxWidth = "100dvw") : (e.height = t, e.maxHeight = "100dvh"), e;
-  }, [l, f]), { from: N, to: T, positionClass: R } = C(), j = E();
-  A(o), y(() => {
+  }, [l, u]), { from: N, to: T, positionClass: R } = E(), j = I();
+  q(o), g(() => {
     let e, t;
     return o ? (x(!0), e = requestAnimationFrame(() => {
       t = window.setTimeout(() => w(!0), 10);
@@ -46,48 +47,55 @@ const P = {
       cancelAnimationFrame(e), clearTimeout(t);
     };
   }, [o]);
-  const I = s((e) => {
-    u && c.current && !c.current.contains(e.target) && n();
-  }, [n, u]), a = s((e) => {
-    e.key === "Escape" && o && n();
-  }, [o, n]);
-  return y(() => (i ? document.addEventListener("keydown", a) : document.removeEventListener("keydown", a), () => document.removeEventListener("keydown", a)), [i, a]), i ? z(
+  const F = c((e) => {
+    m && i.current && !i.current.contains(e.target) && a();
+  }, [a, m]), b = z();
+  A(s, i);
+  const d = c((e) => {
+    e.key === "Escape" && o && a();
+  }, [o, a]);
+  return g(() => (s ? document.addEventListener("keydown", d) : document.removeEventListener("keydown", d), () => document.removeEventListener("keydown", d)), [s, d]), s ? D(
     /* @__PURE__ */ r(
       "div",
       {
-        className: g(
+        className: v(
           "fixed inset-0 z-drawer flex transition-opacity duration-500 ease-in-out",
           h ? "opacity-100" : "opacity-0",
           "bg-black/50"
         ),
-        onClick: I,
-        children: /* @__PURE__ */ b(
+        onClick: F,
+        children: /* @__PURE__ */ p(
           "div",
           {
-            ref: c,
+            ref: i,
+            role: "dialog",
+            "aria-modal": "true",
+            tabIndex: -1,
+            "aria-labelledby": n ? b : void 0,
+            "aria-label": n ? void 0 : "Drawer",
             style: j,
-            className: g(
+            className: v(
               "fixed bg-card border-border text-foreground shadow-xl flex flex-col",
               "transform transition-transform duration-500 ease-out",
               R,
               h ? T : N,
-              k
+              S
             ),
             children: [
-              /* @__PURE__ */ b("div", { className: "flex justify-between items-center p-4 border-b border-border flex-shrink-0", children: [
-                m && /* @__PURE__ */ r("h3", { className: "text-xl font-semibold", children: m }),
+              /* @__PURE__ */ p("div", { className: "flex justify-between items-center p-4 border-b border-border flex-shrink-0", children: [
+                n && /* @__PURE__ */ r("h3", { id: b, className: "text-xl font-semibold", children: n }),
                 /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: n,
+                    onClick: a,
                     className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
                     "aria-label": "Close drawer",
-                    children: /* @__PURE__ */ r(F, { name: "x", size: 24 })
+                    children: /* @__PURE__ */ r(P, { name: "x", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("div", { className: "flex-grow p-4 overflow-y-auto overscroll-contain", children: v }),
-              d && /* @__PURE__ */ r("div", { className: "p-4 border-t border-border flex-shrink-0 bg-card", children: d })
+              /* @__PURE__ */ r("div", { className: "flex-grow p-4 overflow-y-auto overscroll-contain", children: k }),
+              f && /* @__PURE__ */ r("div", { className: "p-4 border-t border-border flex-shrink-0 bg-card", children: f })
             ]
           }
         )
@@ -97,5 +105,5 @@ const P = {
   ) : null;
 };
 export {
-  W as Drawer
+  J as Drawer
 };

package/dist/components/layout/Modal.js

@@ -1,42 +1,47 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useRef as m, useCallback as f, useEffect as u } from "react";
-import { createPortal as b } from "react-dom";
-import { Icon as x } from "../ui/Icon.js";
-import { cn as v } from "../../utils/cn.js";
-const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: a, className: i }) => {
-  const s = m(null), l = f((c) => {
-    c.key === "Escape" && r && o();
-  }, [r, o]);
-  return u(() => (document.addEventListener("keydown", l, !1), () => {
-    document.removeEventListener("keydown", l, !1);
-  }), [l]), r ? b(
-    /* @__PURE__ */ e("div", { className: "fixed inset-0 z-drawer flex items-center justify-center p-4 bg-black/50", children: /* @__PURE__ */ t(
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { useRef as f, useId as u, useCallback as b, useEffect as x } from "react";
+import { createPortal as v } from "react-dom";
+import { useDialogFocus as h } from "../../lib/hooks/useDialogFocus.js";
+import { Icon as p } from "../ui/Icon.js";
+import { cn as g } from "../../utils/cn.js";
+const I = ({ isOpen: r, onClose: d, children: n, title: o, footer: l, className: c }) => {
+  const t = f(null);
+  h(r, t);
+  const s = u(), a = b((m) => {
+    m.key === "Escape" && r && d();
+  }, [r, d]);
+  return x(() => (document.addEventListener("keydown", a, !1), () => {
+    document.removeEventListener("keydown", a, !1);
+  }), [a]), r ? v(
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 z-drawer flex items-center justify-center p-4 bg-black/50", children: /* @__PURE__ */ i(
       "div",
       {
-        ref: s,
-        className: v(
+        ref: t,
+        className: g(
           "relative w-full max-w-lg mx-auto rounded-lg shadow-xl overflow-hidden",
           "bg-card border border-border text-foreground",
-          i
+          c
         ),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": d ? "modal-title" : void 0,
+        tabIndex: -1,
+        "aria-labelledby": o ? s : void 0,
+        "aria-label": o ? void 0 : "Dialog",
         children: [
-          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-4 border-b border-border", children: [
-            d && /* @__PURE__ */ e("h3", { id: "modal-title", className: "text-xl font-semibold", children: d }),
+          /* @__PURE__ */ i("div", { className: "flex justify-between items-center p-4 border-b border-border", children: [
+            o && /* @__PURE__ */ e("h3", { id: s, className: "text-xl font-semibold", children: o }),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: o,
+                onClick: d,
                 className: "text-muted-foreground hover:text-foreground transition-colors",
                 "aria-label": "Close modal",
-                children: /* @__PURE__ */ e(x, { name: "x", size: 20 })
+                children: /* @__PURE__ */ e(p, { name: "x", size: 20 })
               }
             )
           ] }),
           /* @__PURE__ */ e("div", { className: "p-4", children: n }),
-          a && /* @__PURE__ */ e("div", { className: "p-4 border-t border-border flex justify-end space-x-2", children: a })
+          l && /* @__PURE__ */ e("div", { className: "p-4 border-t border-border flex justify-end space-x-2", children: l })
         ]
       }
     ) }),
@@ -44,5 +49,5 @@ const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: a, className:
   ) : null;
 };
 export {
-  N as Modal
+  I as Modal
 };

package/dist/components/layout/Sheet.js

@@ -1,24 +1,25 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { useState as m, useRef as E, useEffect as w, useCallback as S } from "react";
+import { useState as m, useRef as E, useEffect as x, useCallback as S } from "react";
 import { createPortal as j } from "react-dom";
-import { Icon as A } from "../ui/Icon.js";
-import { cn as x } from "../../utils/cn.js";
-import { useBodyScrollLock as R } from "../../lib/hooks/useBodyScrollLock.js";
-import { useSheetGesture as B } from "../../lib/hooks/useSheetGesture.js";
-const G = ({
-  isOpen: o,
+import { useDialogFocus as A } from "../../lib/hooks/useDialogFocus.js";
+import { Icon as F } from "../ui/Icon.js";
+import { cn as y } from "../../utils/cn.js";
+import { useBodyScrollLock as I } from "../../lib/hooks/useBodyScrollLock.js";
+import { useSheetGesture as R } from "../../lib/hooks/useSheetGesture.js";
+const Y = ({
+  isOpen: n,
   onClose: r,
-  children: y,
-  detents: v = [0.6, 1],
+  children: v,
+  detents: k = [0.6, 1],
   initialDetent: f = 0,
-  title: s,
+  title: d,
   footer: h,
-  overlayDismiss: k = !0,
-  className: N
+  overlayDismiss: N = !0,
+  className: D
 }) => {
-  const [d, b] = m(!1), [g, p] = m(!1), D = E(null), [l] = m(
+  const [s, b] = m(!1), [g, p] = m(!1), w = E(null), [l] = m(
     () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  ), i = [...v].sort((n, a) => n - a), t = B({
+  ), i = [...k].sort((o, a) => o - a), t = R({
     detents: i,
     // Under reduced motion there is no drag, so a partial height would be a
     // height the reader can never change. Open fully instead.
@@ -26,30 +27,30 @@ const G = ({
     onDismiss: r,
     reducedMotion: l
   });
-  R(o), w(() => {
-    let n, a;
-    return o ? (b(!0), t.setHeight(i[l ? i.length - 1 : f] ?? i[0]), n = requestAnimationFrame(() => {
+  I(n), x(() => {
+    let o, a;
+    return n ? (b(!0), t.setHeight(i[l ? i.length - 1 : f] ?? i[0]), o = requestAnimationFrame(() => {
       a = window.setTimeout(() => p(!0), 10);
     })) : (p(!1), a = window.setTimeout(() => b(!1), 320)), () => {
-      cancelAnimationFrame(n), clearTimeout(a);
+      cancelAnimationFrame(o), clearTimeout(a);
     };
-  }, [o]);
+  }, [n]), A(s, w);
   const c = S(
-    (n) => {
-      n.key === "Escape" && o && r();
+    (o) => {
+      o.key === "Escape" && n && r();
     },
-    [o, r]
+    [n, r]
   );
-  if (w(() => {
-    if (d)
+  if (x(() => {
+    if (s)
       return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [d, c]), !d) return null;
+  }, [s, c]), !s) return null;
   const P = g ? 1 - t.height : 1;
   return j(
     /* @__PURE__ */ u(
       "div",
       {
-        className: x(
+        className: y(
           "fixed inset-0 z-drawer",
           "transition-opacity duration-300 ease-out",
           g ? "opacity-100" : "opacity-0"
@@ -59,24 +60,25 @@ const G = ({
             "div",
             {
               className: "absolute inset-0 bg-black/50",
-              onClick: k ? r : void 0,
+              onClick: N ? r : void 0,
               "aria-hidden": "true"
             }
           ),
           /* @__PURE__ */ u(
             "div",
             {
-              ref: D,
+              ref: w,
               role: "dialog",
               "aria-modal": "true",
-              "aria-label": s ?? "Sheet",
+              tabIndex: -1,
+              "aria-label": d ?? "Sheet",
               style: {
                 transform: `translateY(${P * 100}%)`,
                 // Laid out at full height and slid down; only transform animates.
                 height: "100dvh",
                 paddingBottom: "env(safe-area-inset-bottom)"
               },
-              className: x(
+              className: y(
                 "absolute inset-x-0 bottom-0 flex flex-col",
                 "bg-card text-foreground border-t border-border shadow-xl",
                 // The corners round while the sheet is partial and square off once it
@@ -86,7 +88,7 @@ const G = ({
                 // finger, not chase it.
                 t.dragging ? "transition-none" : "transition-transform duration-300 ease-out",
                 "motion-reduce:transition-none",
-                N
+                D
               ),
               children: [
                 /* @__PURE__ */ e(
@@ -106,7 +108,7 @@ const G = ({
                     style: { touchAction: "none" },
                     className: "flex shrink-0 items-center justify-between gap-3 px-4 pb-3",
                     children: [
-                      s ? /* @__PURE__ */ e("h2", { className: "text-lg font-semibold leading-tight", children: s }) : /* @__PURE__ */ e("span", {}),
+                      d ? /* @__PURE__ */ e("h2", { className: "text-lg font-semibold leading-tight", children: d }) : /* @__PURE__ */ e("span", {}),
                       /* @__PURE__ */ e(
                         "button",
                         {
@@ -114,7 +116,7 @@ const G = ({
                           onClick: r,
                           "aria-label": "Close",
                           className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground",
-                          children: /* @__PURE__ */ e(A, { name: "x", size: 22 })
+                          children: /* @__PURE__ */ e(F, { name: "x", size: 22 })
                         }
                       )
                     ]
@@ -125,7 +127,7 @@ const G = ({
                   {
                     onPointerDown: t.onBodyPointerDown,
                     className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4",
-                    children: y
+                    children: v
                   }
                 ),
                 h && /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border bg-card px-4 py-3", children: h })
@@ -139,6 +141,6 @@ const G = ({
   );
 };
 export {
-  G as Sheet,
-  G as default
+  Y as Sheet,
+  Y as default
 };

package/dist/formFieldFloor.test.d.ts

@@ -0,0 +1 @@
+export {};