@pibit.ai/cure-design-system 0.6.27 → 0.6.28

package/dist/hooks/use-escape-layer.d.ts

@@ -0,0 +1,10 @@
+/** Wrap a layer's children in this, with the depth `useEscapeLayer` returned, so layers inside it nest. */
+export declare const EscapeLayerProvider: import('react').Provider<number>;
+/**
+ * While `isActive`, registers this overlay for Escape; Escape then calls `onEscape` when this is the
+ * innermost open layer. Pass `onEscape: null` for a layer that must swallow Escape without closing
+ * (a non-dismissable modal). The callback is read through a ref, so an inline function is fine.
+ * Returns this layer's depth for `EscapeLayerProvider`.
+ */
+export declare function useEscapeLayer(isActive: boolean, onEscape: (() => void) | null): number;
+//# sourceMappingURL=use-escape-layer.d.ts.map

package/dist/hooks/use-escape-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-escape-layer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-escape-layer.ts"],"names":[],"mappings":"AA0BA,2GAA2G;AAC3G,eAAO,MAAM,mBAAmB,kCAA4B,CAAC;AAE7D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,MAAM,CAsBvF"}

package/dist/hooks/use-escape-layer.js

@@ -0,0 +1,35 @@
+import { createContext as l, useContext as p, useRef as f, useEffect as a } from "react";
+const s = [];
+let h = 0, u = !1;
+const y = () => {
+  u || typeof document > "u" || (document.addEventListener("keydown", (r) => {
+    if (r.key !== "Escape" || s.length === 0 || r.defaultPrevented) return;
+    s.reduce((t, e) => e.depth > t.depth || e.depth === t.depth && e.order > t.order ? e : t).close();
+  }), u = !0);
+}, i = l(0), m = i.Provider;
+function x(r, o) {
+  const t = p(i) + 1, e = f(o);
+  e.current = o;
+  const c = o !== null;
+  return a(() => {
+    if (!r) return;
+    y();
+    const d = {
+      close: c ? () => {
+        var n;
+        return (n = e.current) == null ? void 0 : n.call(e);
+      } : () => {
+      },
+      depth: t,
+      order: ++h
+    };
+    return s.push(d), () => {
+      const n = s.indexOf(d);
+      n >= 0 && s.splice(n, 1);
+    };
+  }, [r, c, t]), t;
+}
+export {
+  m as EscapeLayerProvider,
+  x as useEscapeLayer
+};

package/dist/patterns/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/patterns/drawer/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAWxD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuPxC,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/patterns/drawer/drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAYxD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8GAA8G;IAC9G,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6QxC,CAAC"}

package/dist/patterns/drawer/drawer.js

@@ -1,150 +1,161 @@
-import { jsxs as l, Fragment as lt, jsx as r } from "react/jsx-runtime";
-import { Minimize01 as P, Expand01 as j, X as it } from "@untitledui/icons";
-import { useId as ct, useRef as nt, useEffect as dt } from "react";
-import { ClickAwayListener as ut } from "../click-away/click-away-listener.js";
-const xt = ({
-  isOpen: s,
-  onClose: k,
-  title: v,
-  subtitle: $,
-  children: L,
-  width: X = "max-w-lg",
-  footer: q,
-  showDefaultFooter: E = !1,
-  className: A = "",
-  side: n = "right",
-  style: _,
-  leftOffset: h = 0,
-  headerClassName: K = "",
-  bodyClassName: T = "",
+import { jsxs as l, Fragment as dt, jsx as e } from "react/jsx-runtime";
+import { Minimize01 as M, Expand01 as j, X as ut } from "@untitledui/icons";
+import { useId as mt, useRef as X, useEffect as q } from "react";
+import { useEscapeLayer as ft, EscapeLayerProvider as vt } from "../../hooks/use-escape-layer.js";
+import { ClickAwayListener as yt } from "../click-away/click-away-listener.js";
+const kt = ({
+  isOpen: o,
+  onClose: y,
+  title: p,
+  subtitle: I,
+  children: A,
+  width: _ = "max-w-lg",
+  footer: K,
+  showDefaultFooter: T = !1,
+  className: B = "",
+  side: i = "right",
+  style: U,
+  leftOffset: $ = 0,
+  headerClassName: V = "",
+  bodyClassName: Y = "",
   header: d = null,
-  onClickOutside: U,
-  showBackDrop: B = !1,
-  footerClassName: V = "",
-  expanded: i = !1,
+  onClickOutside: G,
+  showBackDrop: H = !1,
+  footerClassName: J = "",
+  expanded: c = !1,
   onExpandedChange: u,
-  maxWidth: I = "90vw",
-  resizableWidth: e,
-  minResizableWidth: p = 476,
-  maxResizableWidth: Y,
-  onResizableWidthChange: o,
-  headerActions: G,
-  fullscreenOpen: x = !1,
+  maxWidth: h = "90vw",
+  resizableWidth: s,
+  minResizableWidth: x = 476,
+  maxResizableWidth: Q,
+  onResizableWidthChange: a,
+  headerActions: Z,
+  fullscreenOpen: b = !1,
   onFullscreenOpenChange: m,
-  "data-testid": H
+  "data-testid": F
 }) => {
-  const f = u !== void 0, J = m !== void 0, y = e !== void 0 && o !== void 0, b = Math.max(Y ?? Number.POSITIVE_INFINITY, p), w = s && y, N = (t) => Math.min(Math.max(t, p), b), S = ct(), c = nt(null);
-  dt(() => () => {
+  const f = u !== void 0, z = m !== void 0, v = s !== void 0 && a !== void 0, w = Math.max(Q ?? Number.POSITIVE_INFINITY, x), N = o && v, g = (t) => Math.min(Math.max(t, x), w), E = mt(), S = X(null), C = ft(o, y);
+  q(() => {
+    if (!o) return;
+    const t = document.activeElement, r = S.current;
+    return r && !r.contains(document.activeElement) && r.focus({ preventScroll: !0 }), () => {
+      (!document.activeElement || document.activeElement === document.body || !!(r != null && r.contains(document.activeElement))) && (t != null && t.isConnected) && t.focus({ preventScroll: !0 });
+    };
+  }, [o]);
+  const n = X(null);
+  q(() => () => {
     var t;
-    return (t = c.current) == null ? void 0 : t.call(c);
+    return (t = n.current) == null ? void 0 : t.call(n);
   }, []);
-  const Q = (t) => {
-    if (!w || e === void 0) return;
+  const R = (t) => {
+    if (!N || s === void 0) return;
     t.preventDefault(), t.stopPropagation();
-    const a = t.clientX, et = e, ot = document.body.style.cursor, st = document.body.style.userSelect;
+    const r = t.clientX, D = s, ct = document.body.style.cursor, nt = document.body.style.userSelect;
     document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-    const M = (at) => {
-      o == null || o(N(et + a - at.clientX));
-    }, g = () => {
-      document.body.style.cursor = ot, document.body.style.userSelect = st, window.removeEventListener("pointermove", M), window.removeEventListener("pointerup", g), c.current = null;
+    const P = (it) => {
+      a == null || a(g(D + r - it.clientX));
+    }, k = () => {
+      document.body.style.cursor = ct, document.body.style.userSelect = nt, window.removeEventListener("pointermove", P), window.removeEventListener("pointerup", k), n.current = null;
     };
-    c.current = g, window.addEventListener("pointermove", M), window.addEventListener("pointerup", g);
-  }, Z = (t) => {
-    if (!w || e === void 0) return;
-    const a = t.shiftKey ? 50 : 16;
-    t.key === "ArrowLeft" && (t.preventDefault(), o == null || o(N(e + a))), t.key === "ArrowRight" && (t.preventDefault(), o == null || o(N(e - a)));
-  }, F = n === "left" ? s ? "left-4" : "left-0" : s ? "right-[6px]" : "right-0", D = n === "left" && h > 0, z = (() => {
-    const t = { ..._ };
-    if (D) {
-      const a = s ? `${h}px` : "calc(-100%)";
-      t.transform = `translateX(${a})`;
+    n.current = k, window.addEventListener("pointermove", P), window.addEventListener("pointerup", k);
+  }, O = (t) => {
+    if (!N || s === void 0) return;
+    const r = t.shiftKey ? 50 : 16;
+    t.key === "ArrowLeft" && (t.preventDefault(), a == null || a(g(s + r))), t.key === "ArrowRight" && (t.preventDefault(), a == null || a(g(s - r)));
+  }, W = i === "left" ? o ? "left-4" : "left-0" : o ? "right-[6px]" : "right-0", L = i === "left" && $ > 0, tt = (() => {
+    const t = { ...U };
+    if (L) {
+      const r = o ? `${$}px` : "calc(-100%)";
+      t.transform = `translateX(${r})`;
     }
-    return y && e !== void 0 ? (t.width = e, t.maxWidth = e) : f && (t.width = i ? I : "32rem", t.maxWidth = i ? I : "32rem"), t;
-  })(), C = D ? "" : n === "left" ? s ? "translate-x-0" : "-translate-x-full" : s ? "translate-x-0" : "translate-x-full", R = `
-      ${F} 
+    return v && s !== void 0 ? (t.width = s, t.maxWidth = s) : f && (t.width = c ? h : "32rem", t.maxWidth = c ? h : "32rem"), t;
+  })(), et = L ? "" : i === "left" ? o ? "translate-x-0" : "-translate-x-full" : o ? "translate-x-0" : "translate-x-full", rt = `
+      ${W} 
       fixed h-[calc(100vh-12px)] my-[6px] bottom-0
-      ${y || f ? "" : `w-full ${X}`}
+      ${v || f ? "" : `w-full ${_}`}
       transform transition-transform duration-300 ease-in-out z-[100]
-      ${y ? "" : "transition-[width] duration-300 ease-in-out"}
-      ${C} ${A}`, O = {
+      ${v ? "" : "transition-[width] duration-300 ease-in-out"}
+      ${et} ${B}`, ot = {
     backgroundImage: "linear-gradient(90deg, rgba(6, 132, 240, 0.1) 0%, rgba(6, 132, 240, 0.1) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0) 60.66%, rgba(255, 255, 255, 0.5) 100%), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)"
-  }, W = `flex items-center justify-between pl-6 pr-2 border-b border-secondary gap-2 py-4 ${K} h-[60px]`, tt = `px-5 pb-3 overflow-y-auto flex-grow ${T}`, rt = `p-4 ${V}`;
-  return /* @__PURE__ */ l(lt, { children: [
-    s && B && /* @__PURE__ */ r("div", { className: "fixed inset-0 z-[99] bg-black/40", onClick: U, "aria-hidden": "true" }),
-    /* @__PURE__ */ r("div", { className: s ? "w-[100vw-64px] h-[100vh] fixed inset-0 z-[9999]" : "hidden", children: /* @__PURE__ */ r(ut, { onClickAway: k, as: "div", children: /* @__PURE__ */ r(
+  }, st = `flex items-center justify-between pl-6 pr-2 border-b border-secondary gap-2 py-4 ${V} h-[60px]`, at = `px-5 pb-3 overflow-y-auto flex-grow ${Y}`, lt = `p-4 ${J}`;
+  return /* @__PURE__ */ l(dt, { children: [
+    o && H && /* @__PURE__ */ e("div", { className: "fixed inset-0 z-[99] bg-black/40", onClick: G, "aria-hidden": "true" }),
+    /* @__PURE__ */ e("div", { className: o ? "w-[100vw-64px] h-[100vh] fixed inset-0 z-[9999]" : "hidden", children: /* @__PURE__ */ e(yt, { onClickAway: y, as: "div", children: /* @__PURE__ */ e(
       "div",
       {
-        className: R,
-        style: z,
+        ref: S,
+        tabIndex: -1,
+        className: `${rt} outline-none`,
+        style: tt,
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": d ? void 0 : S,
-        "aria-label": d && v ? v : void 0,
-        "data-testid": H,
+        "aria-labelledby": d ? void 0 : E,
+        "aria-label": d && p ? p : void 0,
+        "data-testid": F,
         onClick: (t) => t.stopPropagation(),
         children: /* @__PURE__ */ l(
           "div",
           {
-            className: `relative h-full w-full backdrop-blur-[3px] rounded-2xl p-2 ${n === "right" ? "border-l border-t border-b border-white" : "border border-white"}`,
-            style: O,
+            className: `relative h-full w-full backdrop-blur-[3px] rounded-2xl p-2 ${i === "right" ? "border-l border-t border-b border-white" : "border border-white"}`,
+            style: ot,
             children: [
-              w && /* @__PURE__ */ r(
+              N && /* @__PURE__ */ e(
                 "div",
                 {
                   role: "separator",
                   "aria-label": "Resize drawer",
                   "aria-orientation": "vertical",
-                  "aria-valuemin": p,
-                  "aria-valuemax": Number.isFinite(b) ? b : void 0,
-                  "aria-valuenow": Math.round(e),
+                  "aria-valuemin": x,
+                  "aria-valuemax": Number.isFinite(w) ? w : void 0,
+                  "aria-valuenow": Math.round(s),
                   tabIndex: 0,
-                  onPointerDown: Q,
-                  onKeyDown: Z,
-                  className: "absolute left-0 top-0 z-10 h-full w-2 -translate-x-1 cursor-col-resize touch-none focus-visible:outline-none"
+                  onPointerDown: R,
+                  onKeyDown: O,
+                  className: "absolute left-0 top-0 z-10 h-full w-2 -translate-x-1 cursor-col-resize touch-none rounded-full outline-none focus-visible:bg-brand-solid"
                 }
               ),
               /* @__PURE__ */ l("div", { className: "h-full w-full bg-white rounded-lg overflow-hidden flex flex-col", children: [
-                d || /* @__PURE__ */ l("header", { className: W, children: [
+                d || /* @__PURE__ */ l("header", { className: st, children: [
                   /* @__PURE__ */ l("div", { className: `flex-1 flex flex-col gap-0 ${f ? "pr-2" : "pr-16"}`, children: [
-                    /* @__PURE__ */ r("h2", { id: S, className: "text-lg font-semibold leading-7 text-[#06060a]", children: v }),
-                    $ && /* @__PURE__ */ r("p", { className: "text-sm text-secondary", children: $ })
+                    /* @__PURE__ */ e("h2", { id: E, className: "text-lg font-semibold leading-7 text-[#06060a]", children: p }),
+                    I && /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: I })
                   ] }),
                   /* @__PURE__ */ l("div", { className: "flex items-center gap-1", children: [
-                    G,
-                    J && /* @__PURE__ */ r(
+                    Z,
+                    z && /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
-                        onClick: () => m == null ? void 0 : m(!x),
+                        onClick: () => m == null ? void 0 : m(!b),
                         className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
-                        "aria-label": x ? "Exit full screen" : "Open full screen",
-                        children: x ? /* @__PURE__ */ r(P, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ r(j, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                        "aria-label": b ? "Exit full screen" : "Open full screen",
+                        children: b ? /* @__PURE__ */ e(M, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ e(j, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
                       }
                     ),
-                    f && /* @__PURE__ */ r(
+                    f && /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
-                        onClick: () => u == null ? void 0 : u(!i),
+                        onClick: () => u == null ? void 0 : u(!c),
                         className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
-                        "aria-label": i ? "Collapse sidebar" : "Expand sidebar",
-                        children: i ? /* @__PURE__ */ r(P, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ r(j, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                        "aria-label": c ? "Collapse sidebar" : "Expand sidebar",
+                        children: c ? /* @__PURE__ */ e(M, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ e(j, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
                       }
                     ),
-                    /* @__PURE__ */ r(
+                    /* @__PURE__ */ e(
                       "button",
                       {
                         type: "button",
-                        onClick: k,
+                        onClick: y,
                         "aria-label": "Close",
                         className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
-                        children: /* @__PURE__ */ r(it, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                        children: /* @__PURE__ */ e(ut, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ r("main", { className: tt, children: L }),
-                E && /* @__PURE__ */ r("footer", { className: rt, children: q })
+                /* @__PURE__ */ e("main", { className: at, children: /* @__PURE__ */ e(vt, { value: C, children: A }) }),
+                T && /* @__PURE__ */ e("footer", { className: lt, children: K })
               ] })
             ]
           }
@@ -154,5 +165,5 @@ const xt = ({
   ] });
 };
 export {
-  xt as Drawer
+  kt as Drawer
 };

package/dist/patterns/expandable-drawer/expandable-drawer.js

@@ -4,7 +4,7 @@ import { useState as U, useId as Y, useRef as G, useEffect as J } from "react";
 import { motion as Q } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
 const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ease: "easeInOut" }, se = ({
   state: o,
-  onClose: g,
+  onClose: I,
   header: s,
   title: u = "",
   subtitle: y,
@@ -23,7 +23,7 @@ const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ea
 }) => {
   const [w, L] = U(!1), m = o !== "hidden";
   m && !w && L(!0);
-  const N = c !== void 0, b = o === "expanded", l = o === "hidden" ? 0 : o === "expanded" ? k : R ?? D, f = Math.max(M ?? Number.POSITIVE_INFINITY, a), p = o === "normal" && m && typeof l == "number" && r !== void 0, v = (e) => Math.min(Math.max(e, a), f), h = Y(), i = G(null);
+  const N = c !== void 0, b = o === "expanded", l = o === "hidden" ? 0 : o === "expanded" ? k : R ?? D, f = Math.max(M ?? Number.POSITIVE_INFINITY, a), p = o === "normal" && m && typeof l == "number" && r !== void 0, v = (e) => Math.min(Math.max(e, a), f), g = Y(), i = G(null);
   J(() => () => {
     var e;
     return (e = i.current) == null ? void 0 : e.call(i);
@@ -33,12 +33,12 @@ const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ea
     e.preventDefault(), e.stopPropagation();
     const d = e.clientX, $ = l, O = document.body.style.cursor, q = document.body.style.userSelect;
     document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
-    const I = (B) => {
+    const h = (B) => {
       r == null || r(v($ + d - B.clientX));
     }, x = () => {
-      document.body.style.cursor = O, document.body.style.userSelect = q, window.removeEventListener("pointermove", I), window.removeEventListener("pointerup", x), i.current = null;
+      document.body.style.cursor = O, document.body.style.userSelect = q, window.removeEventListener("pointermove", h), window.removeEventListener("pointerup", x), i.current = null;
     };
-    i.current = x, window.addEventListener("pointermove", I), window.addEventListener("pointerup", x);
+    i.current = x, window.addEventListener("pointermove", h), window.addEventListener("pointerup", x);
   }, X = (e) => {
     if (!p || typeof l != "number") return;
     const d = e.shiftKey ? 50 : 16;
@@ -60,7 +60,7 @@ const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ea
         "div",
         {
           role: "region",
-          "aria-labelledby": s == null ? h : void 0,
+          "aria-labelledby": s == null ? g : void 0,
           "aria-label": s != null && u ? u : void 0,
           className: "h-full w-full min-w-0 flex flex-col rounded-2xl border-l border-t border-b border-white backdrop-blur-[3px] p-2",
           style: _,
@@ -77,13 +77,13 @@ const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ea
                 tabIndex: 0,
                 onPointerDown: T,
                 onKeyDown: X,
-                className: "absolute left-0 top-0 z-10 h-full w-2 -translate-x-1 cursor-col-resize touch-none focus-visible:outline-none"
+                className: "absolute left-0 top-0 z-10 h-full w-2 -translate-x-1 cursor-col-resize touch-none rounded-full outline-none focus-visible:bg-brand-solid"
               }
             ),
             /* @__PURE__ */ n("div", { className: "h-full w-full bg-white rounded-lg overflow-hidden flex flex-col min-w-0", children: [
               s ?? /* @__PURE__ */ n("header", { className: j, children: [
                 /* @__PURE__ */ n("div", { className: `flex-1 flex flex-col gap-0 min-w-0 ${N ? "pr-2" : "pr-16"}`, children: [
-                  /* @__PURE__ */ t("h2", { id: h, className: "text-lg font-semibold leading-7 text-[#06060a] truncate", children: u }),
+                  /* @__PURE__ */ t("h2", { id: g, className: "text-lg font-semibold leading-7 text-[#06060a] truncate", children: u }),
                   y && /* @__PURE__ */ t("p", { className: "text-sm text-secondary truncate", children: y })
                 ] }),
                 /* @__PURE__ */ n("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
@@ -102,7 +102,7 @@ const Z = 512, W = "calc(100vw - 140px)", C = { type: "tween", duration: 0.3, ea
                     "button",
                     {
                       type: "button",
-                      onClick: g,
+                      onClick: I,
                       className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
                       "aria-label": "Close",
                       children: /* @__PURE__ */ t(F, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })

package/dist/patterns/filters/checklist-select.js

@@ -1,51 +1,51 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { MinusSquare as v } from "@untitledui/icons";
-import { cx as p } from "../../utils/cn.js";
-import { Checkbox as u } from "../../primitives/checkbox/checkbox.js";
-import { Button as y } from "../../primitives/button/button.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { MinusSquare as N } from "@untitledui/icons";
+import { cx as f } from "../../utils/cn.js";
+import { Checkbox as h } from "../../primitives/checkbox/checkbox.js";
+import { Button as b } from "../../primitives/button/button.js";
 function D({
-  options: x,
+  options: p,
   selectedKeys: c,
   onChange: l,
   onApply: d,
   onReset: m,
-  onClose: n,
-  className: b
+  onClose: o,
+  className: y
 }) {
-  const a = x.map((e) => e.key).filter(Boolean), i = new Set(c), f = a.length > 0 && i.size === a.length, h = i.size > 0 && i.size < a.length, o = () => {
-    f || h ? l == null || l([]) : l == null || l(a);
+  const s = p.map((e) => e.key).filter(Boolean), t = new Set(c), u = s.length > 0 && t.size === s.length, x = t.size > 0 && t.size < s.length, n = () => {
+    u || x ? l == null || l([]) : l == null || l(s);
   }, k = (e) => {
-    const t = new Set(c);
-    t.has(e) ? t.delete(e) : t.add(e), l == null || l(Array.from(t));
+    const a = new Set(c);
+    a.has(e) ? a.delete(e) : a.add(e), l == null || l(Array.from(a));
   }, S = () => {
-    d == null || d(c), n == null || n();
-  }, N = () => {
+    d == null || d(c), o == null || o();
+  }, v = () => {
     m == null || m();
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: p(
+      className: f(
         "flex flex-col rounded-xl bg-primary shadow-sm ring-1 ring-primary",
-        b
+        y
       ),
       "data-slot": "checklist-select",
       children: [
-        /* @__PURE__ */ s("div", { className: "flex flex-col gap-0 p-3", children: [
-          /* @__PURE__ */ s(
+        /* @__PURE__ */ i("div", { className: "flex flex-col gap-0 p-3", children: [
+          /* @__PURE__ */ i(
             "label",
             {
-              className: p(
+              className: f(
                 "flex cursor-pointer items-center gap-3 rounded-md py-2 pr-2 pl-0 outline-hidden",
                 "hover:bg-primary_hover"
               ),
               children: [
-                h ? /* @__PURE__ */ r(
-                  v,
+                x ? /* @__PURE__ */ r(
+                  N,
                   {
                     size: 18,
-                    className: "text-utility-brand-600",
-                    onClick: o,
+                    className: "text-utility-brand-600 rounded-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+                    onClick: n,
                     cursor: "pointer",
                     "aria-hidden": !1,
                     role: "checkbox",
@@ -53,14 +53,14 @@ function D({
                     "aria-label": "Select all options",
                     tabIndex: 0,
                     onKeyDown: (e) => {
-                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o());
+                      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), n());
                     }
                   }
                 ) : /* @__PURE__ */ r(
-                  u,
+                  h,
                   {
-                    isSelected: f,
-                    onChange: o,
+                    isSelected: u,
+                    onChange: n,
                     size: "sm",
                     "aria-label": "Select all options"
                   }
@@ -69,18 +69,18 @@ function D({
               ]
             }
           ),
-          x.map((e) => /* @__PURE__ */ s(
+          p.map((e) => /* @__PURE__ */ i(
             "label",
             {
-              className: p(
+              className: f(
                 "flex cursor-pointer items-center gap-3 rounded-md py-2 pr-2 pl-0 outline-hidden",
                 "hover:bg-primary_hover"
               ),
               children: [
                 /* @__PURE__ */ r(
-                  u,
+                  h,
                   {
-                    isSelected: i.has(e.key),
+                    isSelected: t.has(e.key),
                     onChange: () => k(e.key),
                     size: "sm",
                     "aria-label": e.value
@@ -92,19 +92,19 @@ function D({
             e.key
           ))
         ] }),
-        /* @__PURE__ */ s("div", { className: "flex gap-2 border-primary p-3", children: [
+        /* @__PURE__ */ i("div", { className: "flex gap-2 border-primary p-3", children: [
           /* @__PURE__ */ r(
-            y,
+            b,
             {
               size: "xs",
               color: "secondary",
               className: "flex-1 bg-secondary border-none text-primary",
-              onClick: N,
+              onClick: v,
               children: "Reset"
             }
           ),
           /* @__PURE__ */ r(
-            y,
+            b,
             {
               size: "xs",
               color: "primary",