@ramme-io/ui 4.0.1 → 4.1.1

package/dist/components/forms/Textarea.js

@@ -1,19 +1,39 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import l from "react";
-const n = l.forwardRef(
-  ({ label: r, className: a, containerClassName: o, ...e }, s) => /* @__PURE__ */ i("div", { className: `w-full ${o || ""}`, children: [
-    r && /* @__PURE__ */ t("label", { htmlFor: e.id || e.name, className: "block text-sm font-medium text-text-light mb-1", children: r }),
-    /* @__PURE__ */ t(
-      "textarea",
-      {
-        ref: s,
-        className: `w-full px-3 py-2 rounded-md bg-card border border-border transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary ${a || ""}`,
-        ...e
-      }
-    )
-  ] })
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { cn as o } from "../../utils/cn.js";
+const p = i.forwardRef(
+  ({
+    label: r,
+    helperText: a,
+    error: d = !1,
+    required: t = !1,
+    showOptionalLabel: c = !1,
+    className: m,
+    containerClassName: f,
+    ...s
+  }, u) => {
+    const x = "w-full rounded-md border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", b = d ? "border-destructive" : "border-input", g = i.useId(), l = s.id || s.name || g;
+    return /* @__PURE__ */ n("div", { className: o("w-full", f), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: l, className: "block text-sm font-medium text-foreground mb-1", children: [
+        r,
+        t && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
+        !t && c && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: u,
+          id: l,
+          className: o(x, b, m),
+          required: t,
+          ...s
+        }
+      ),
+      a && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", d ? "text-destructive" : "text-muted-foreground"), children: a })
+    ] });
+  }
 );
-n.displayName = "Textarea";
+p.displayName = "Textarea";
 export {
-  n as Textarea
+  p as Textarea
 };

package/dist/components/forms/ToggleSwitch.js

@@ -1,16 +1,16 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import m from "react";
 const d = ({
-  checked: t,
+  checked: o,
   onChange: n,
   label: a,
   className: l,
-  disabled: o = !1
+  disabled: t = !1
 }) => {
   const i = () => {
-    o || n(!t);
+    t || n(!o);
   }, r = m.useId();
-  return /* @__PURE__ */ s("label", { htmlFor: r, className: `flex items-center cursor-pointer ${l || ""} ${o ? "opacity-50 cursor-not-allowed" : ""}`, children: [
+  return /* @__PURE__ */ s("label", { htmlFor: r, className: `flex items-center cursor-pointer ${l || ""} ${t ? "opacity-50 cursor-not-allowed" : ""}`, children: [
     /* @__PURE__ */ s("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
@@ -18,20 +18,20 @@ const d = ({
           id: r,
           type: "checkbox",
           className: "sr-only",
-          checked: t,
+          checked: o,
           onChange: i,
-          disabled: o
+          disabled: t
         }
       ),
-      /* @__PURE__ */ e("div", { className: `block w-12 h-6 rounded-full transition-colors duration-200 ease-in-out ${t ? "bg-primary" : "bg-border"}` }),
+      /* @__PURE__ */ e("div", { className: `block w-12 h-6 rounded-full transition-colors duration-200 ease-in-out ${o ? "bg-primary" : "bg-border"}` }),
       /* @__PURE__ */ e(
         "div",
         {
-          className: `dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out ${t ? "translate-x-6" : ""}`
+          className: `dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow-sm transition-transform duration-200 ease-in-out ${o ? "translate-x-6" : ""}`
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "ml-3 text-text font-medium select-none", children: a })
+    /* @__PURE__ */ e("div", { className: "ml-3 text-foreground font-medium select-none", children: a })
   ] });
 };
 export {

package/dist/components/layout/AboutRamme.d.ts

@@ -1,4 +1,12 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name AboutRamme
+ * @description The "About" panel for a Settings Console — what the framework is, which packages make it up, and why it is built this way. Strategic purpose: ships the explanation with the framework so every product's about screen stays accurate as the architecture moves, instead of each one carrying a copy that goes stale. Takes no props; drop it into a settings tab.
+ * @tags layout, settings, about, documentation, panel
+ * @category layout
+ * @id about-ramme
+ */
 /**
  * AboutRamme — static informational panel for the Settings Console's "About" tab.
  * Describes the framework architecture, core packages, and business rationale.

package/dist/components/layout/Accordion.js

@@ -1,52 +1,45 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
-import d, { useState as u, useCallback as f } from "react";
-const g = ({ id: e, header: r, children: i, isOpen: t, onToggle: a }) => {
-  const [c, o] = u(t !== void 0 ? t : !1), s = t !== void 0, l = s ? t : c, h = f(() => {
-    s && a ? a(e, !l) : o((v) => !v);
-  }, [e, l, s, a]), p = `transform transition-transform duration-300 ${l ? "rotate-180" : "rotate-0"}`;
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import c, { useState as f, useCallback as u } from "react";
+const w = ({ id: e, header: n, children: l, isOpen: t, onToggle: s }) => {
+  const [d, r] = f(t !== void 0 ? t : !1), a = t !== void 0, i = a ? t : d, h = u(() => {
+    a && s ? s(e, !i) : r((g) => !g);
+  }, [e, i, a, s]), p = `transform transition-transform duration-300 ${i ? "rotate-180" : "rotate-0"}`;
   return /* @__PURE__ */ m("div", { className: "border border-border rounded-md overflow-hidden", children: [
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ o("h3", { className: "m-0", children: /* @__PURE__ */ m(
       "button",
       {
         id: `accordion-header-${e}`,
-        "aria-expanded": l,
+        "aria-expanded": i,
         "aria-controls": `accordion-panel-${e}`,
         onClick: h,
-        className: "flex items-center justify-between w-full p-4 text-text bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-        role: "heading",
-        "aria-level": 3,
+        className: "flex items-center justify-between w-full p-4 text-left text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
         children: [
-          /* @__PURE__ */ n("span", { className: "text-xl font-semibold", children: r }),
-          /* @__PURE__ */ n("svg", { className: `w-6 h-6 text-text ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+          /* @__PURE__ */ o("span", { className: "text-xl font-semibold", children: n }),
+          /* @__PURE__ */ o("svg", { className: `w-6 h-6 text-foreground shrink-0 ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
         ]
       }
-    ),
-    /* @__PURE__ */ n(
+    ) }),
+    /* @__PURE__ */ o(
       "div",
       {
         id: `accordion-panel-${e}`,
         role: "region",
         "aria-labelledby": `accordion-header-${e}`,
-        style: {
-          maxHeight: l ? "1000px" : "0",
-          // Arbitrary large height for transition
-          overflow: "hidden",
-          transition: "max-height 0.3s ease-in-out"
-        },
-        children: /* @__PURE__ */ n("div", { className: "p-4 bg-card", children: i })
+        className: `grid transition-[grid-template-rows] duration-300 ease-in-out ${i ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`,
+        children: /* @__PURE__ */ o("div", { className: "overflow-hidden min-h-0", children: /* @__PURE__ */ o("div", { className: "p-4 bg-card", children: l }) })
       }
     )
   ] });
-}, w = ({ children: e, singleOpen: r = !1, className: i }) => {
-  const [t, a] = u(null), c = f((o, s) => {
-    r && a(s ? o : null);
-  }, [r]);
-  return /* @__PURE__ */ n("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
-    isOpen: r ? o.props.id === t : void 0,
-    onToggle: r ? c : void 0
-  }) : o) });
+}, x = ({ children: e, singleOpen: n = !1, className: l }) => {
+  const [t, s] = f(null), d = u((r, a) => {
+    n && s(a ? r : null);
+  }, [n]);
+  return /* @__PURE__ */ o("div", { className: `space-y-4 ${l || ""}`, children: c.Children.map(e, (r) => c.isValidElement(r) ? c.cloneElement(r, {
+    isOpen: n ? r.props.id === t : void 0,
+    onToggle: n ? d : void 0
+  }) : r) });
 };
 export {
-  w as Accordion,
-  g as AccordionItem
+  x as Accordion,
+  w as AccordionItem
 };

package/dist/components/layout/AppShell.js

@@ -6,9 +6,9 @@ import { useIsMobile as A } from "../../lib/hooks/useMediaQuery.js";
 const M = D.forwardRef(({
   className: p,
   layoutPreset: s = "dashboard",
-  sidebarSlot: c,
-  headerSlot: a,
-  toolbarSlot: i,
+  sidebarSlot: a,
+  headerSlot: i,
+  toolbarSlot: c,
   statusbarSlot: d,
   inspectorSlot: w,
   onLogoTrigger: o,
@@ -36,15 +36,15 @@ const M = D.forwardRef(({
     {
       ref: C,
       className: x(
-        "flex h-screen w-screen overflow-hidden bg-background text-foreground text-sm font-sans transition-colors duration-300",
+        "flex h-dvh w-full overflow-hidden bg-background text-foreground text-sm font-sans transition-colors duration-300",
         p
       ),
       ...z,
       children: [
-        !l && c && /* @__PURE__ */ e("aside", { className: "w-sidebar flex-shrink-0 flex flex-col border-r border-border bg-card shadow-sm z-20", children: c }),
+        !l && a && /* @__PURE__ */ e("aside", { className: "w-sidebar flex-shrink-0 flex flex-col border-r border-border bg-card shadow-sm z-20", children: a }),
         /* @__PURE__ */ b("div", { className: "flex flex-col flex-1 min-w-0 h-full relative z-10", children: [
-          !l && a && /* @__PURE__ */ e("header", { className: "h-header flex-shrink-0 w-full border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30 flex items-center px-4", children: a }),
-          !l && i && /* @__PURE__ */ e("div", { className: "h-toolbar flex-shrink-0 w-full border-b border-border bg-muted/30 flex items-center px-4 shadow-sm z-20", children: i }),
+          !l && i && /* @__PURE__ */ e("header", { className: "h-header flex-shrink-0 w-full border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30 flex items-center px-4", children: i }),
+          !l && c && /* @__PURE__ */ e("div", { className: "h-toolbar flex-shrink-0 w-full border-b border-border bg-muted/30 flex items-center px-4 shadow-sm z-20", children: c }),
           /* @__PURE__ */ e("main", { className: x(
             "flex-1 overflow-y-auto custom-scrollbar relative @container",
             E ? "p-0" : "p-fluid-md @md:p-fluid-lg"

package/dist/components/layout/Card.js

@@ -1,59 +1,76 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
 import { cn as s } from "../../utils/cn.js";
 const l = t(
-  ({ className: e, children: a, ...r }, o) => /* @__PURE__ */ d(
+  ({ className: e, children: a, ...d }, o) => /* @__PURE__ */ r(
     "div",
     {
       ref: o,
       className: s(
-        "@container bg-card text-card-foreground rounded-lg border border-border shadow-sm",
+        "@container bg-card text-card-foreground",
+        /* A card in a narrow container is chrome restating chrome: its border
+                     sits a few pixels inside the panel's own edge, and its radius and
+                     shadow buy nothing at 390px while its inset costs real width. So
+                     below a 28rem container the card keeps its surface and drops the
+                     frame — the rule above it still groups, the box no longer taxes.
+        
+                     A CONTAINER query, not a breakpoint: this asks how much room the
+                     card actually has, so the same card is framed in a wide dashboard
+                     column and flush inside a sheet or a narrow sidebar on that very
+                     same screen. A `sm:` breakpoint would get the narrow-panel-on-a-
+                     big-monitor case exactly backwards.
+        
+                     28rem, not 24rem: inside a sheet a 390px phone gives the card a
+                     ~358px container, but a 430px phone gives ~398px — over 24rem, so
+                     the frame would come back on the LARGER phone. 28rem clears every
+                     handset while leaving real desktop columns framed. */
+        "border-y border-border @md:rounded-lg @md:border @md:shadow-sm",
         e
       ),
-      ...r,
+      ...d,
       children: a
     }
   )
 );
 l.displayName = "Card";
 const i = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex flex-col space-y-fluid-xs p-fluid-lg", e),
       ...a
     }
   )
 );
 i.displayName = "CardHeader";
-const n = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+const m = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h3",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-lg font-semibold leading-none tracking-tight", e),
       ...a
     }
   )
 );
-n.displayName = "CardTitle";
-const m = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+m.displayName = "CardTitle";
+const n = t(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "p",
     {
-      ref: r,
+      ref: d,
       className: s("text-fluid-sm text-muted-foreground", e),
       ...a
     }
   )
 );
-m.displayName = "CardDescription";
+n.displayName = "CardDescription";
 const c = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "h2",
     {
-      ref: r,
+      ref: d,
       className: s(
         "text-xs font-semibold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5",
         e
@@ -64,14 +81,14 @@ const c = t(
 );
 c.displayName = "CardLabel";
 const p = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d("div", { ref: r, className: s("p-fluid-lg pt-0", e), ...a })
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r("div", { ref: d, className: s("p-fluid-lg pt-0", e), ...a })
 );
 p.displayName = "CardContent";
 const f = t(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ d(
+  ({ className: e, ...a }, d) => /* @__PURE__ */ r(
     "div",
     {
-      ref: r,
+      ref: d,
       className: s("flex items-center p-fluid-lg pt-0", e),
       ...a
     }
@@ -81,9 +98,9 @@ f.displayName = "CardFooter";
 export {
   l as Card,
   p as CardContent,
-  m as CardDescription,
+  n as CardDescription,
   f as CardFooter,
   i as CardHeader,
   c as CardLabel,
-  n as CardTitle
+  m as CardTitle
 };

package/dist/components/layout/DetailDrawer.js

@@ -1,56 +1,55 @@
 import { jsxs as b, jsx as r, Fragment as k } from "react/jsx-runtime";
-import { useRef as E, useEffect as c } from "react";
-import { createPortal as D } from "react-dom";
-import { Icon as L } from "../ui/Icon.js";
+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";
-const S = ({
-  isOpen: o,
+import { useBodyScrollLock as M } from "../../lib/hooks/useBodyScrollLock.js";
+const B = ({
+  isOpen: t,
   onClose: n,
-  children: g,
-  variant: s = "overlay",
-  resizable: u = !1,
-  width: p = 420,
+  children: p,
+  variant: u = "overlay",
+  resizable: d = !1,
+  width: g = 420,
   onWidthChange: a,
-  minWidth: m = 320,
-  maxWidth: f = typeof window < "u" ? window.innerWidth * 0.6 : 800,
-  side: t = "right"
+  minWidth: c = 320,
+  maxWidth: m = typeof window < "u" ? window.innerWidth * 0.6 : 800,
+  side: o = "right"
 }) => {
   const i = E(!1);
-  if (c(() => {
-    if (!u || !a) return;
-    const e = (y) => {
+  if (y(() => {
+    if (!d || !a) return;
+    const e = (v) => {
       if (!i.current) return;
-      const x = t === "right" ? window.innerWidth - y.clientX : y.clientX;
-      a(Math.max(m, Math.min(f, x)));
-    }, d = () => {
+      const x = o === "right" ? window.innerWidth - v.clientX : v.clientX;
+      a(Math.max(c, Math.min(m, x)));
+    }, s = () => {
       i.current && (i.current = !1, document.body.style.userSelect = "", document.body.style.cursor = "");
     };
-    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", d), () => {
-      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", d);
+    return window.addEventListener("mousemove", e), window.addEventListener("mouseup", s), () => {
+      window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", s);
     };
-  }, [u, a, m, f, t]), c(() => {
-    const e = (d) => {
-      d.key === "Escape" && o && n();
+  }, [d, a, c, m, o]), y(() => {
+    const e = (s) => {
+      s.key === "Escape" && t && n();
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [o, n]), c(() => (o && s === "overlay" ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [o, s]), !o) return null;
-  const l = s === "overlay", w = t === "right" ? "right-0 border-l" : "left-0 border-r", v = /* @__PURE__ */ b(
+  }, [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(
     "div",
     {
       className: h(
         "flex flex-col border-border bg-card shadow-2xl transition-transform duration-300",
-        l ? `fixed inset-y-0 ${w} z-50 w-full sm:w-[420px] animate-in ${t === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${w}`
+        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}`
       ),
-      style: l ? void 0 : { width: `min(100vw, ${p}px)` },
+      style: l ? void 0 : { width: `min(100vw, ${g}px)` },
       children: [
-        u && !l && /* @__PURE__ */ r(
+        d && !l && /* @__PURE__ */ r(
           "div",
           {
             className: h(
               "absolute top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/50 active:bg-primary z-10",
-              t === "right" ? "left-0 -ml-0.5" : "right-0 -mr-0.5"
+              o === "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";
@@ -63,27 +62,27 @@ const S = ({
             onClick: n,
             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(L, { name: "x", size: 16 })
+            children: /* @__PURE__ */ r(D, { name: "x", size: 16 })
           }
         ) }),
-        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: g })
+        /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto custom-scrollbar relative h-full", children: p })
       ]
     }
   );
-  return l ? typeof document > "u" ? null : D(
+  return l ? typeof document > "u" ? null : L(
     /* @__PURE__ */ b(k, { children: [
       /* @__PURE__ */ r(
         "div",
         {
-          className: "fixed inset-0 z-40 bg-background/80 backdrop-blur-sm transition-opacity",
+          className: "fixed inset-0 z-scrim bg-background/80 backdrop-blur-sm transition-opacity",
           onClick: n
         }
       ),
-      v
+      w
     ] }),
     document.body
-  ) : v;
+  ) : w;
 };
 export {
-  S as DetailDrawer
+  B as DetailDrawer
 };

package/dist/components/layout/Drawer.js

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