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

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