@pibit.ai/cure-design-system 0.6.9 → 0.6.11

package/dist/patterns/accordion/expandable-card.js

@@ -1,85 +1,89 @@
-import { jsx as e, jsxs as t, Fragment as k } from "react/jsx-runtime";
-import { ChevronDown as z } from "@untitledui/icons";
-import { useState as D, useRef as j } from "react";
-import { Disclosure as E, DisclosurePanel as F } from "react-aria-components";
-import { cx as a } from "../../utils/cn.js";
-import { IsolateFromAccordionGroup as I } from "./accordion.js";
-import { Toggle as P } from "../../primitives/toggle/toggle.js";
-import { ButtonUtility as R } from "../../primitives/button/button-utility.js";
-const K = ({
-  showToggle: f = !0,
-  title: o,
-  description: x,
-  icon: n,
-  iconBgColor: g = "var(--color-bg-warning-secondary)",
-  defaultExpanded: p = !1,
-  isExpanded: u,
+import { jsx as e, jsxs as o, Fragment as T } from "react/jsx-runtime";
+import { ChevronDown as j } from "@untitledui/icons";
+import { useControlledState as E } from "@react-stately/utils";
+import { useRef as A, Children as D } from "react";
+import { Disclosure as F, DisclosurePanel as I } from "react-aria-components";
+import { cx as t } from "../../utils/cn.js";
+import { IsolateFromAccordionGroup as P } from "./accordion.js";
+import { Toggle as R } from "../../primitives/toggle/toggle.js";
+import { ButtonUtility as S } from "../../primitives/button/button-utility.js";
+const q = (s) => D.toArray(s).some((r) => r !== ""), O = ({
+  showToggle: s = !0,
+  title: r,
+  description: f,
+  icon: i,
+  iconBgColor: p = "var(--color-bg-warning-secondary)",
+  defaultExpanded: u = !1,
+  isExpanded: x,
   onExpandedChange: h,
-  defaultToggled: v = !0,
-  onToggle: i,
+  defaultToggled: b = !0,
+  isToggled: N,
+  onToggle: y,
+  toggleLabel: v,
+  isDisabled: a = !1,
   children: l,
-  className: b,
-  isToggleDisabled: N = !1
+  className: C,
+  isToggleDisabled: k = !1
 }) => {
-  const [d, y] = D(v), c = j(null), C = (r) => {
-    y(r), i == null || i(r);
-  };
-  return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
-    E,
+  const [d, w] = E(N, b, y), c = A(null);
+  return /* @__PURE__ */ e(P, { children: /* @__PURE__ */ e(
+    F,
     {
-      isExpanded: u,
-      defaultExpanded: p,
+      isExpanded: x,
+      defaultExpanded: u,
       onExpandedChange: h,
-      className: a("bg-white rounded-lg border border-[var(--color-border-secondary)]", b),
-      children: ({ isExpanded: r, state: w }) => /* @__PURE__ */ t(k, { children: [
-        /* @__PURE__ */ t(
+      isDisabled: a,
+      className: t("bg-primary rounded-lg border border-secondary", C),
+      children: ({ isExpanded: m, state: z }) => /* @__PURE__ */ o(T, { children: [
+        /* @__PURE__ */ o(
           "div",
           {
-            className: "flex items-center gap-4 p-3 cursor-pointer",
-            onClick: (s) => {
-              var m;
-              (m = c.current) != null && m.contains(s.target) || w.toggle();
+            className: t("flex items-center gap-4 p-3", a ? "cursor-not-allowed" : "cursor-pointer"),
+            onClick: (n) => {
+              var g;
+              a || (g = c.current) != null && g.contains(n.target) || z.toggle();
             },
             children: [
-              /* @__PURE__ */ t("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-                n && /* @__PURE__ */ e(
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+                i && /* @__PURE__ */ e(
                   "div",
                   {
                     className: "flex items-center justify-center size-8 rounded-lg shrink-0",
-                    style: { backgroundColor: g },
-                    children: n
+                    style: { backgroundColor: p },
+                    children: i
                   }
                 ),
-                /* @__PURE__ */ t("div", { className: "flex flex-col flex-1 min-w-0", children: [
-                  /* @__PURE__ */ e("p", { className: "text-[var(--color-text-secondary)] text-md font-medium leading-6", children: o }),
-                  /* @__PURE__ */ e("p", { className: "text-[var(--color-text-tertiary)] text-sm font-normal leading-5", children: x })
+                /* @__PURE__ */ o("div", { className: "flex flex-col flex-1 min-w-0", children: [
+                  /* @__PURE__ */ e("p", { className: "text-secondary text-md font-medium leading-6", children: r }),
+                  /* @__PURE__ */ e("p", { className: "text-tertiary text-sm font-normal leading-5", children: f })
                 ] })
               ] }),
-              /* @__PURE__ */ t("div", { className: "flex items-center gap-2 shrink-0", children: [
-                f && /* @__PURE__ */ e("div", { onClick: (s) => s.stopPropagation(), children: /* @__PURE__ */ e(
-                  P,
+              /* @__PURE__ */ o("div", { className: "flex items-center gap-2 shrink-0", children: [
+                s && /* @__PURE__ */ e("div", { onClick: (n) => n.stopPropagation(), children: /* @__PURE__ */ e(
+                  R,
                   {
                     size: "sm",
+                    "aria-label": v ?? `Enable ${r}`,
                     isSelected: d,
-                    onChange: C,
-                    isDisabled: N,
+                    onChange: w,
+                    isDisabled: k,
                     disabledClasses: d ? "bg-brand-solid" : ""
                   }
                 ) }),
                 /* @__PURE__ */ e("div", { ref: c, className: "contents", children: /* @__PURE__ */ e(
-                  R,
+                  S,
                   {
                     slot: "trigger",
                     size: "xs",
                     color: "tertiary",
-                    "aria-label": o,
+                    "aria-label": r,
                     icon: /* @__PURE__ */ e(
-                      z,
+                      j,
                       {
                         size: 20,
-                        className: a(
-                          "text-[var(--color-text-quaternary)] transition-transform duration-200",
-                          r && "rotate-180"
+                        className: t(
+                          "text-quaternary transition-transform duration-200",
+                          m && "rotate-180"
                         )
                       }
                     )
@@ -89,11 +93,11 @@ const K = ({
             ]
           }
         ),
-        l && /* @__PURE__ */ e(F, { className: "[&[hidden]]:hidden", children: /* @__PURE__ */ e("div", { className: a("px-3 pb-3 pt-3", r && "animate-in fade-in duration-200"), children: l }) })
+        q(l) && /* @__PURE__ */ e(I, { className: "[&[hidden]]:hidden", children: /* @__PURE__ */ e("div", { className: t("px-3 pb-3 pt-3", m && "animate-in fade-in duration-200"), children: l }) })
       ] })
     }
   ) });
 };
 export {
-  K as ExpandableCard
+  O as ExpandableCard
 };

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

@@ -0,0 +1,3 @@
+export { DialogTrigger, ModalOverlay, Modal, Dialog, type ModalOverlayProps, type ModalProps, type DialogProps, } from './modal';
+export { ModalWrapper, type ModalWrapperProps } from './modal-wrapper';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,EACN,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,WAAW,GACjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/patterns/modal/modal-wrapper.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface ModalWrapperProps {
+    isOpen: boolean;
+    onClose: (isOpen: boolean) => void;
+    children: ReactNode;
+    /** When false, the backdrop/overlay (dim + blur) is hidden. Default true. */
+    showOverlay?: boolean;
+    /** When false, neither overlay clicks nor Escape close the modal. Default true. */
+    isDismissable?: boolean;
+    /** When true, allows clicking through the overlay to interact with background elements. Default false. */
+    allowBackgroundInteraction?: boolean;
+    /** When true, clicks on this modal won't trigger parent ClickAwayListener handlers. */
+    ignoreClickAway?: boolean;
+    /** Extra classes on the overlay (for example, canvas-centered workflow modals). */
+    overlayClassName?: string;
+    /** Child draws its own frame (e.g. Modal-md), so skip the default gradient frame. */
+    bare?: boolean;
+    /**
+     * Test id. Lands on the `role="dialog"` element in the standard modal, but on a plain `div` (no dialog role)
+     * when `allowBackgroundInteraction` is true.
+     */
+    "data-testid"?: string;
+}
+/**
+ * A modal shell: overlay, gradient frame and dismiss rules around content the caller lays out.
+ *
+ * @example
+ * <ModalWrapper isOpen={open} onClose={() => setOpen(false)}>
+ *   <div className="w-[480px] rounded-xl bg-primary p-6">…</div>
+ * </ModalWrapper>
+ */
+export declare const ModalWrapper: ({ isOpen, onClose, children, showOverlay, isDismissable, allowBackgroundInteraction, ignoreClickAway, overlayClassName, bare, "data-testid": dataTestId, }: ModalWrapperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=modal-wrapper.d.ts.map

package/dist/patterns/modal/modal-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-wrapper.d.ts","sourceRoot":"","sources":["../../../src/patterns/modal/modal-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA6BvC,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,0GAA0G;IAC1G,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,4JAW1B,iBAAiB,4CA6DnB,CAAC"}

package/dist/patterns/modal/modal-wrapper.js

@@ -0,0 +1,60 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useEffect as g } from "react";
+import { DialogTrigger as h } from "react-aria-components";
+import { cx as i } from "../../utils/cn.js";
+import { ModalOverlay as y, Modal as v, Dialog as w } from "./modal.js";
+const n = [];
+let f = !1;
+const E = () => {
+  f || typeof document > "u" || (document.addEventListener("keydown", (e) => {
+    if (e.key !== "Escape" || n.length === 0 || e.defaultPrevented) return;
+    const r = n[n.length - 1];
+    r();
+  }), f = !0);
+}, M = ({
+  isOpen: e,
+  onClose: r,
+  children: c,
+  showOverlay: l = !0,
+  isDismissable: a = !0,
+  allowBackgroundInteraction: m = !1,
+  ignoreClickAway: u = !1,
+  overlayClassName: p,
+  bare: x = !1,
+  "data-testid": o
+}) => (g(() => {
+  if (!e || !a) return;
+  E();
+  const s = () => r(!1);
+  return n.push(s), () => {
+    const d = n.lastIndexOf(s);
+    d >= 0 && n.splice(d, 1);
+  };
+}, [e, a, r]), m && e ? /* @__PURE__ */ t(
+  "div",
+  {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    style: {
+      pointerEvents: "none",
+      paddingLeft: "calc(var(--floating-modal-inset-left, 0px) + 16px)",
+      paddingRight: "16px"
+    },
+    children: /* @__PURE__ */ t("div", { className: "w-[max-content] max-w-full", style: { pointerEvents: "auto" }, "data-testid": o, children: c })
+  }
+) : /* @__PURE__ */ t(h, { isOpen: e, onOpenChange: r, children: /* @__PURE__ */ t(
+  y,
+  {
+    isDismissable: a,
+    isKeyboardDismissDisabled: !a,
+    ...u ? { "data-ignore-click-away": !0 } : {},
+    className: i(
+      "max-h-screen max-w-screen overflow-hidden z-100000 flex justify-center items-center",
+      !l && "bg-transparent! backdrop-blur-none!",
+      l && p
+    ),
+    children: /* @__PURE__ */ t(v, { className: i(!x && "modal-bg-gradient", "!w-[max-content]"), children: /* @__PURE__ */ t(w, { className: "!w-[max-content]", "data-testid": o, children: c }) })
+  }
+) }));
+export {
+  M as ModalWrapper
+};

package/dist/patterns/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import { DialogProps as AriaDialogProps, ModalOverlayProps as AriaModalOverlayProps, DialogTrigger as AriaDialogTrigger } from 'react-aria-components';
+export type ModalOverlayProps = AriaModalOverlayProps;
+export type ModalProps = AriaModalOverlayProps;
+export type DialogProps = AriaDialogProps;
+/** Opens a `ModalOverlay` from a trigger, or holds it open through `isOpen` / `onOpenChange`. */
+export declare const DialogTrigger: typeof AriaDialogTrigger;
+/** The full-screen backdrop: dims and blurs the page and centres its `Modal`. */
+export declare const ModalOverlay: (props: ModalOverlayProps) => import("react/jsx-runtime").JSX.Element;
+/** The modal surface inside a `ModalOverlay`. */
+export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
+/** The `role="dialog"` element inside a `Modal`. Give it an `aria-label` or a heading with `slot="title"`. */
+export declare const Dialog: (props: DialogProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,IAAI,qBAAqB,EAC3C,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAEL,aAAa,IAAI,iBAAiB,EAGnC,MAAM,uBAAuB,CAAC;AAU/B,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,qBAAqB,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,iGAAiG;AACjG,eAAO,MAAM,aAAa,0BAAoB,CAAC;AAE/C,iFAAiF;AACjF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAcpD,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAYtC,CAAC;AAEF,8GAA8G;AAC9G,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAExC,CAAC"}

package/dist/patterns/modal/modal.js

@@ -0,0 +1,32 @@
+import { jsx as i } from "react/jsx-runtime";
+import { DialogTrigger as o, ModalOverlay as n, Modal as t, Dialog as s } from "react-aria-components";
+import { cx as l } from "../../utils/cn.js";
+const d = o, c = (a) => /* @__PURE__ */ i(
+  n,
+  {
+    ...a,
+    className: (e) => l(
+      "fixed inset-0 z-50 flex min-h-dvh w-full items-end justify-center overflow-y-auto bg-overlay/70 px-4 pt-4 pb-[clamp(16px,8vh,64px)] outline-hidden backdrop-blur-[8px] sm:items-center sm:justify-center sm:p-8",
+      e.isEntering && "duration-300 ease-out animate-in fade-in",
+      e.isExiting && "duration-200 ease-in animate-out fade-out",
+      typeof a.className == "function" ? a.className(e) : a.className
+    )
+  }
+), f = (a) => /* @__PURE__ */ i(
+  t,
+  {
+    ...a,
+    className: (e) => l(
+      "max-h-full w-full align-middle outline-hidden max-sm:overflow-y-auto max-sm:rounded-xl",
+      e.isEntering && "duration-300 ease-out animate-in zoom-in-95",
+      e.isExiting && "duration-200 ease-in animate-out zoom-out-95",
+      typeof a.className == "function" ? a.className(e) : a.className
+    )
+  }
+), g = (a) => /* @__PURE__ */ i(s, { ...a, className: l("flex w-full items-center justify-center outline-hidden", a.className) });
+export {
+  g as Dialog,
+  d as DialogTrigger,
+  f as Modal,
+  c as ModalOverlay
+};