@pibit.ai/cure-design-system 0.6.12 → 0.6.14

package/dist/patterns/click-away/click-away-listener.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface ClickAwayListenerProps {
+    children: React.ReactNode;
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    as?: React.ElementType;
+}
+export declare function ClickAwayListener({ children, onClickAway, as: Component }: ClickAwayListenerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=click-away-listener.d.ts.map

package/dist/patterns/click-away/click-away-listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"click-away-listener.d.ts","sourceRoot":"","sources":["../../../src/patterns/click-away/click-away-listener.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;IACtD,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,SAAiB,EAAE,EAAE,sBAAsB,2CAgCzG"}

package/dist/patterns/click-away/click-away-listener.js

@@ -0,0 +1,22 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useRef as L, useEffect as g } from "react";
+import { shouldIgnorePortaledOverlayClickFromRoot as X } from "./overlay-click-guards.js";
+function x({ children: f, onClickAway: c, as: h = "div" }) {
+  const e = L(null);
+  return g(() => {
+    let i = 0;
+    const r = (t) => {
+      var u, a, l, d, m;
+      if (t.type === "touchstart") i = Date.now();
+      else if (Date.now() - i < 1e3) return;
+      const s = t.target, o = s, p = "clientX" in t ? t.clientX : ((a = (u = t.touches) == null ? void 0 : u[0]) == null ? void 0 : a.clientX) ?? 0, w = "clientY" in t ? t.clientY : ((d = (l = t.touches) == null ? void 0 : l[0]) == null ? void 0 : d.clientY) ?? 0;
+      e.current && (e.current.contains(s) || X(o, e.current, { clientX: p, clientY: w }) || (m = o.closest) != null && m.call(o, "[data-ignore-click-away]") || c(t));
+    }, n = { capture: !0 };
+    return document.addEventListener("mousedown", r, n), document.addEventListener("touchstart", r, n), () => {
+      document.removeEventListener("mousedown", r, n), document.removeEventListener("touchstart", r, n);
+    };
+  }, [c]), /* @__PURE__ */ E(h, { ref: e, children: f });
+}
+export {
+  x as ClickAwayListener
+};

package/dist/patterns/click-away/index.d.ts

@@ -0,0 +1,3 @@
+export { ClickAwayListener, type ClickAwayListenerProps } from './click-away-listener';
+export { shouldIgnorePortaledOverlayClickFromRoot, REACT_ARIA_POPOVER_SELECTOR } from './overlay-click-guards';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/click-away/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/click-away/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACvF,OAAO,EAAE,wCAAwC,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/patterns/click-away/overlay-click-guards.d.ts

@@ -0,0 +1,23 @@
+/** Don't fire when the click lands on a React Aria overlay underlay (the transparent full-screen div rendered
+ * behind modal popovers — Select, SearchableSelect, DatePicker). That click only dismisses the open popup. */
+export declare function isClickOnOverlayUnderlay(target: Element): boolean;
+/** Don't fire while a modal React Aria popup owns the page. While open, ariaHideOutside marks everything
+ * outside the popup `inert` (including the underlay), so outside clicks hit-test through to <body>/<html>.
+ * Such a click can only be dismissing the popup — it is never a genuine click-away. */
+export declare function isDismissClickThroughInertPage(target: Node): boolean;
+/** React Aria popover root. The class name is generated, so match the prefix. */
+export declare const REACT_ARIA_POPOVER_SELECTOR = "[class*=\"react-aria-Popover\"]";
+/** Don't fire when target is inside an overlay opened from a trigger in root (aria-controls → overlay id). */
+export declare function isClickInsideOverlayOwnedByRoot(target: Element, root: HTMLElement): boolean;
+/** Don't fire when click coordinates fall inside an overlay owned by root (handles scrollbar clicks where target is wrong). */
+export declare function isClickPositionInsideOverlayOwnedByRoot(clientX: number, clientY: number, root: HTMLElement): boolean;
+/** Don't fire when target is inside a dialog owned by root (e.g. date picker popover uses aria-labelledby with trigger id). */
+export declare function isClickInsideDialogOwnedByRoot(target: Element, root: HTMLElement): boolean;
+/** Don't fire when target is inside a tooltip whose trigger is inside root (e.g. React Aria tooltips rendered in a portal). */
+export declare function isClickInsideTooltipOwnedByRoot(target: Element, root: HTMLElement): boolean;
+/** Portaled React Aria overlays/dropdowns whose triggers live inside `root`. */
+export declare function shouldIgnorePortaledOverlayClickFromRoot(target: EventTarget | null, root: HTMLElement | null, coords?: {
+    clientX: number;
+    clientY: number;
+}): boolean;
+//# sourceMappingURL=overlay-click-guards.d.ts.map

package/dist/patterns/click-away/overlay-click-guards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-click-guards.d.ts","sourceRoot":"","sources":["../../../src/patterns/click-away/overlay-click-guards.ts"],"names":[],"mappings":"AAAA;8GAC8G;AAC9G,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,CAEjE;AAED;;uFAEuF;AACvF,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,IAAI,GAAG,OAAO,CAGpE;AAMD,iFAAiF;AACjF,eAAO,MAAM,2BAA2B,oCAAkC,CAAC;AAY3E,8GAA8G;AAC9G,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAW3F;AAED,+HAA+H;AAC/H,wBAAgB,uCAAuC,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAcpH;AAED,+HAA+H;AAC/H,wBAAgB,8BAA8B,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAW1F;AAED,+HAA+H;AAC/H,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAoB3F;AAED,gFAAgF;AAChF,wBAAgB,wCAAwC,CACtD,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,GAAG,IAAI,EACxB,MAAM,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC5C,OAAO,CAST"}

package/dist/patterns/click-away/overlay-click-guards.js

@@ -0,0 +1,85 @@
+function O(e) {
+  var n;
+  return !!((n = e.closest) != null && n.call(e, '[data-testid="underlay"]'));
+}
+function E(e) {
+  return e !== document.body && e !== document.documentElement ? !1 : !!document.querySelector('[data-testid="underlay"], [inert]');
+}
+const p = (e) => typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/["\\]/g, "\\$&"), C = '[class*="react-aria-Popover"]', S = `[data-trigger], ${C}`;
+function y(e) {
+  return e.closest(S) ?? e;
+}
+function b(e, n) {
+  var i, u, l;
+  const t = (i = n.querySelectorAll) == null ? void 0 : i.call(n, "[aria-controls]");
+  if (!(t != null && t.length)) return !1;
+  for (const c of t) {
+    const s = (u = c.getAttribute) == null ? void 0 : u.call(c, "aria-controls");
+    if (!s) continue;
+    const o = (l = document.getElementById) == null ? void 0 : l.call(document, s);
+    if (o && y(o).contains(e))
+      return !0;
+  }
+  return !1;
+}
+function R(e, n, t) {
+  var u, l, c;
+  const i = (u = t.querySelectorAll) == null ? void 0 : u.call(t, "[aria-controls]");
+  if (!(i != null && i.length)) return !1;
+  for (const s of i) {
+    const o = (l = s.getAttribute) == null ? void 0 : l.call(s, "aria-controls");
+    if (!o) continue;
+    const f = (c = document.getElementById) == null ? void 0 : c.call(document, o);
+    if (!f) continue;
+    const r = y(f).getBoundingClientRect();
+    if (e >= r.left && e <= r.right && n >= r.top && n <= r.bottom)
+      return !0;
+  }
+  return !1;
+}
+function A(e, n) {
+  var l, c, s;
+  const t = (l = e.closest) == null ? void 0 : l.call(e, '[role="dialog"]');
+  if (!t) return !1;
+  const i = (c = t.getAttribute) == null ? void 0 : c.call(t, "aria-labelledby");
+  if (!i) return !1;
+  const u = i.trim().split(/\s+/);
+  for (const o of u) {
+    const f = (s = document.getElementById) == null ? void 0 : s.call(document, o);
+    if (f && n.contains(f)) return !0;
+  }
+  return !1;
+}
+function I(e, n) {
+  var u, l, c, s, o, f;
+  const t = (u = e.closest) == null ? void 0 : u.call(e, '[role="tooltip"]');
+  if (t) {
+    const r = t.id;
+    if (r && ((l = n.querySelector) == null ? void 0 : l.call(n, `[aria-describedby*="${p(r)}"]`)))
+      return !0;
+  }
+  const i = (c = n.querySelectorAll) == null ? void 0 : c.call(n, "[aria-describedby]");
+  if (!(i != null && i.length)) return !1;
+  for (const r of i) {
+    const d = (o = (s = r.getAttribute) == null ? void 0 : s.call(r, "aria-describedby")) == null ? void 0 : o.trim().split(/\s+/);
+    if (d)
+      for (const m of d) {
+        const a = (f = document.getElementById) == null ? void 0 : f.call(document, m);
+        if (a != null && a.contains(e)) return !0;
+      }
+  }
+  return !1;
+}
+function B(e, n, t) {
+  return !(e instanceof Element) || !n ? !1 : !!(O(e) || E(e) || b(e, n) || t && R(t.clientX, t.clientY, n) || A(e, n) || I(e, n));
+}
+export {
+  C as REACT_ARIA_POPOVER_SELECTOR,
+  A as isClickInsideDialogOwnedByRoot,
+  b as isClickInsideOverlayOwnedByRoot,
+  I as isClickInsideTooltipOwnedByRoot,
+  O as isClickOnOverlayUnderlay,
+  R as isClickPositionInsideOverlayOwnedByRoot,
+  E as isDismissClickThroughInertPage,
+  B as shouldIgnorePortaledOverlayClickFromRoot
+};

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

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    children: React.ReactNode;
+    width?: string;
+    footer?: React.ReactNode;
+    showDefaultFooter?: boolean;
+    className?: string;
+    headerClassName?: string;
+    header?: React.ReactNode;
+    /** Has no effect: the panel is always the full viewport height. Kept so existing callers still type-check. */
+    height?: string;
+    side?: "left" | "right";
+    style?: React.CSSProperties;
+    leftOffset?: number;
+    bodyClassName?: string;
+    onClickOutside?: () => void;
+    showBackDrop?: boolean;
+    footerClassName?: string;
+    /** When provided, enables expand/collapse and shows the expand button in the header. */
+    expanded?: boolean;
+    /** Callback when expand state changes. Required when using expanded. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Max width when expanded (e.g. "90vw"). Used when expanded is true. */
+    maxWidth?: string;
+    /** Controlled width in pixels. When set with onResizableWidthChange, enables drag resize. */
+    resizableWidth?: number;
+    /** Minimum width while dragging. Default 476. */
+    minResizableWidth?: number;
+    /** Maximum width while dragging. */
+    maxResizableWidth?: number;
+    /** Called while the user drags the drawer resize handle. */
+    onResizableWidthChange?: (width: number) => void;
+    /** Extra actions rendered in the default header before expand/close controls. */
+    headerActions?: React.ReactNode;
+    /**
+     * Opens the lossrun-style fullscreen workbook modal (does not resize the drawer).
+     * Independent of `expanded` / `onExpandedChange`.
+     */
+    fullscreenOpen?: boolean;
+    onFullscreenOpenChange?: (open: boolean) => void;
+    /** Test id placed on the dialog panel. */
+    "data-testid"?: string;
+}
+export declare const Drawer: React.FC<DrawerProps>;
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +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"}

package/dist/patterns/drawer/drawer.js

@@ -0,0 +1,158 @@
+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 = "",
+  header: d = null,
+  onClickOutside: U,
+  showBackDrop: B = !1,
+  footerClassName: V = "",
+  expanded: i = !1,
+  onExpandedChange: u,
+  maxWidth: I = "90vw",
+  resizableWidth: e,
+  minResizableWidth: p = 476,
+  maxResizableWidth: Y,
+  onResizableWidthChange: o,
+  headerActions: G,
+  fullscreenOpen: x = !1,
+  onFullscreenOpenChange: m,
+  "data-testid": H
+}) => {
+  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(() => () => {
+    var t;
+    return (t = c.current) == null ? void 0 : t.call(c);
+  }, []);
+  const Q = (t) => {
+    if (!w || e === void 0) return;
+    t.preventDefault(), t.stopPropagation();
+    const a = t.clientX, et = e, ot = document.body.style.cursor, st = 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;
+    };
+    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})`;
+    }
+    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} 
+      fixed h-[calc(100vh-12px)] my-[6px] bottom-0
+      ${y || f ? "" : `w-full ${X}`}
+      transform transition-transform duration-300 ease-in-out z-[100]
+      ${y ? "" : "transition-[width] duration-300 ease-in-out"}
+      ${C} ${A}`, O = {
+    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(
+      "div",
+      {
+        className: R,
+        style: z,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": d ? void 0 : S,
+        "aria-label": d && v ? v : void 0,
+        "data-testid": H,
+        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,
+            children: [
+              w && /* @__PURE__ */ r(
+                "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),
+                  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"
+                }
+              ),
+              /* @__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: [
+                  /* @__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__ */ l("div", { className: "flex items-center gap-1", children: [
+                    G,
+                    J && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => m == null ? void 0 : m(!x),
+                        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 })
+                      }
+                    ),
+                    f && /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => u == null ? void 0 : u(!i),
+                        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 })
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: k,
+                        "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 })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ r("main", { className: tt, children: L }),
+                E && /* @__PURE__ */ r("footer", { className: rt, children: q })
+              ] })
+            ]
+          }
+        )
+      }
+    ) }) })
+  ] });
+};
+export {
+  xt as Drawer
+};

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

@@ -0,0 +1,2 @@
+export { Drawer, type DrawerProps } from './drawer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/patterns/expandable-drawer/expandable-drawer.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export type ExpandableRightDrawerState = "hidden" | "normal" | "expanded";
+export interface ExpandableRightDrawerProps {
+    /** Current state: hidden (no space), normal (sidebar width), expanded (wide). */
+    state: ExpandableRightDrawerState;
+    onClose: () => void;
+    /** Optional custom header. When not provided, default header with title/subtitle and actions is used. */
+    header?: React.ReactNode;
+    /** Used by default header. */
+    title?: string;
+    /** Used by default header. */
+    subtitle?: string;
+    /** Content; only rendered when state is not "hidden" (lazy). */
+    children: React.ReactNode;
+    /** Width in pixels for normal state. Default 512 (32rem). */
+    normalWidth?: number;
+    /** Width when expanded. Default `calc(100vw - 140px)`. */
+    maxWidth?: string;
+    /** Controlled drawer width. When provided, it is used for the normal state. */
+    width?: number | string;
+    /** Minimum drawer width while visible. */
+    minWidth?: number;
+    /** Maximum width allowed while dragging. */
+    maxResizableWidth?: number;
+    /** Called while the user drags the drawer resize handle. */
+    onWidthChange?: (width: number) => void;
+    /** Callback when expand/collapse is toggled. When provided, default header shows expand/minimize button. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Extra actions rendered in the default header before expand/close controls. */
+    headerActions?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+}
+export declare const ExpandableRightDrawer: React.FC<ExpandableRightDrawerProps>;
+//# sourceMappingURL=expandable-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-drawer.d.ts","sourceRoot":"","sources":["../../../src/patterns/expandable-drawer/expandable-drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAQlE,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAM1E,MAAM,WAAW,0BAA0B;IACzC,iFAAiF;IACjF,KAAK,EAAE,0BAA0B,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yGAAyG;IACzG,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4GAA4G;IAC5G,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,iFAAiF;IACjF,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAsKtE,CAAC"}

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

@@ -0,0 +1,120 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { Minimize01 as H, Expand01 as K, X as F } from "@untitledui/icons";
+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: h,
+  header: n,
+  title: I = "",
+  subtitle: y,
+  children: z,
+  normalWidth: g = Z,
+  maxWidth: D = W,
+  width: k,
+  minWidth: a = 480,
+  maxResizableWidth: R,
+  onWidthChange: r,
+  onExpandedChange: c,
+  headerActions: M,
+  className: P = "",
+  headerClassName: S = "",
+  bodyClassName: E = ""
+}) => {
+  const [v, V] = U(!1), u = o !== "hidden";
+  u && !v && V(!0);
+  const w = c !== void 0, m = o === "expanded", l = o === "hidden" ? 0 : o === "expanded" ? D : k ?? g, f = Math.max(R ?? Number.POSITIVE_INFINITY, a), b = o === "normal" && u && typeof l == "number" && r !== void 0, p = (e) => Math.min(Math.max(e, a), f), L = Y(), s = G(null);
+  J(() => () => {
+    var e;
+    return (e = s.current) == null ? void 0 : e.call(s);
+  }, []);
+  const T = (e) => {
+    if (!b || typeof l != "number") return;
+    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 N = (B) => {
+      r == null || r(p($ + d - B.clientX));
+    }, x = () => {
+      document.body.style.cursor = O, document.body.style.userSelect = q, window.removeEventListener("pointermove", N), window.removeEventListener("pointerup", x), s.current = null;
+    };
+    s.current = x, window.addEventListener("pointermove", N), window.addEventListener("pointerup", x);
+  }, X = (e) => {
+    if (!b || typeof l != "number") return;
+    const d = e.shiftKey ? 50 : 16;
+    e.key === "ArrowLeft" && (e.preventDefault(), r == null || r(p(l + d))), e.key === "ArrowRight" && (e.preventDefault(), r == null || r(p(l - d)));
+  }, _ = {
+    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%)"
+  }, j = `flex items-center justify-between pl-6 pr-2 border-b border-secondary gap-2 py-4 ${S}`, A = `flex min-h-0 flex-1 flex-col overflow-y-auto pb-3 ${E} ${n ? "" : "px-5"}`;
+  return /* @__PURE__ */ t(
+    Q.div,
+    {
+      className: `relative flex flex-col flex-shrink-0 overflow-hidden min-w-0 h-[calc(98vh-85px)] z-1000 ${P}`,
+      initial: !1,
+      animate: {
+        width: l,
+        minWidth: o === "hidden" ? 0 : a || void 0
+      },
+      transition: C,
+      children: u && /* @__PURE__ */ i(
+        "div",
+        {
+          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: _,
+          children: [
+            b && /* @__PURE__ */ t(
+              "div",
+              {
+                role: "separator",
+                "aria-label": "Resize drawer",
+                "aria-orientation": "vertical",
+                "aria-valuemin": a,
+                "aria-valuemax": Number.isFinite(f) ? f : void 0,
+                "aria-valuenow": typeof l == "number" ? Math.round(l) : void 0,
+                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"
+              }
+            ),
+            /* @__PURE__ */ i("div", { className: "h-full w-full bg-white rounded-lg overflow-hidden flex flex-col min-w-0", children: [
+              n ?? /* @__PURE__ */ i("header", { className: j, children: [
+                /* @__PURE__ */ i("div", { className: `flex-1 flex flex-col gap-0 min-w-0 ${w ? "pr-2" : "pr-16"}`, children: [
+                  /* @__PURE__ */ t("h2", { id: L, className: "text-lg font-semibold leading-7 text-[#06060a] truncate", children: I }),
+                  y && /* @__PURE__ */ t("p", { className: "text-sm text-secondary truncate", children: y })
+                ] }),
+                /* @__PURE__ */ i("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                  M,
+                  w && /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => c == null ? void 0 : c(!m),
+                      className: "flex items-center justify-center p-2 rounded-lg hover:bg-primary_hover transition-colors cursor-pointer",
+                      "aria-label": m ? "Collapse sidebar" : "Expand sidebar",
+                      children: m ? /* @__PURE__ */ t(H, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 }) : /* @__PURE__ */ t(K, { size: 20, className: "text-fg-quaternary", strokeWidth: 1.67 })
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: h,
+                      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 })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ t("main", { className: A, children: v ? z : null })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  se as ExpandableRightDrawer
+};

package/dist/patterns/expandable-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpandableRightDrawer, type ExpandableRightDrawerProps, type ExpandableRightDrawerState, } from './expandable-drawer';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/expandable-drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/expandable-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,GAChC,MAAM,qBAAqB,CAAC"}