@ramme-io/ui 4.1.1 → 4.2.0

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
 };