@pibit.ai/cure-design-system 0.3.15 → 0.3.17

package/dist/patterns/tree-view/tree-view.js

@@ -1,33 +1,34 @@
-import { jsxs as A, jsx as r, Fragment as j } from "react/jsx-runtime";
+import { jsxs as A, jsx as r, Fragment as E } from "react/jsx-runtime";
 import { useState as $ } from "react";
 import { SearchSm as T, ChevronDown as K, ChevronRight as V } from "@untitledui/icons";
 import { cn as k } from "../../utils/cn.js";
 import { Input as _ } from "../../primitives/input/input.js";
 const N = 10;
-function C(e, t, s = "") {
+function C(e, l, s = "") {
   const {
-    labelKey: p,
+    labelKey: m,
     childrenKey: n,
-    dataKey: u = "metadata",
-    typeKey: y = "type",
-    idKey: o,
-    maxDepth: i
-  } = t, f = s ? s.split(".").length : 0;
-  return i != null && f >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((l, v) => {
-    const w = o != null ? l[o] : void 0, c = String(w ?? v), h = s ? `${s}.${c}` : c, a = l[n], d = Array.isArray(a) ? a : a != null ? Object.values(a) : [];
+    dataKey: f = "metadata",
+    typeKey: x = "type",
+    idKey: h,
+    maxDepth: i,
+    defaultExpanded: g
+  } = l, v = s ? s.split(".").length : 0;
+  return i != null && v >= i ? [] : (Array.isArray(e) ? e : Object.values(e)).map((t, w) => {
+    const b = h != null ? t[h] : void 0, a = String(b ?? w), d = s ? `${s}.${a}` : a, c = t[n], o = Array.isArray(c) ? c : c != null ? Object.values(c) : [];
     return {
-      id: h,
-      label: l[p] ?? "Untitled",
-      type: l[y] ?? "Untitled",
-      isOpen: !1,
-      children: d.length > 0 ? C(d, t, h) : [],
-      [u]: l
+      id: d,
+      label: t[m] ?? "Untitled",
+      type: t[x] ?? "Untitled",
+      isOpen: t.isOpen ?? g ?? !1,
+      children: o.length > 0 ? C(o, l, d) : [],
+      [f]: t
     };
   });
 }
-function O(e, t) {
-  const s = e.label ?? "", p = Array.isArray(e.children) ? e.children : [];
-  return s.toLowerCase().includes(t.toLowerCase()) ? !0 : p.some((n) => O(n, t));
+function O(e, l) {
+  const s = e.label ?? "", m = Array.isArray(e.children) ? e.children : [];
+  return s.toLowerCase().includes(l.toLowerCase()) ? !0 : m.some((n) => O(n, l));
 }
 const D = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-center px-[13px] shrink-0", children: /* @__PURE__ */ r("div", { className: "relative h-full w-0 shrink-0", children: /* @__PURE__ */ r(
   "div",
@@ -35,83 +36,89 @@ const D = () => /* @__PURE__ */ r("div", { className: "flex h-[28px] items-cente
     className: "absolute inset-y-0 bg-(--color-border-secondary)",
     style: { left: "-0.5px", width: 1 }
   }
-) }) }), E = ({
+) }) }), I = ({
   data: e,
-  config: t,
+  config: l,
   CustomNode: s,
-  onNodeClick: p,
+  onNodeClick: m,
   selectedNodeId: n,
-  showSearch: u = !1,
-  searchPlaceholder: y = "Search...",
-  searchClassName: o,
-  searchInputClassName: i
+  showSearch: f = !1,
+  searchPlaceholder: x = "Search...",
+  searchClassName: h,
+  searchInputClassName: i,
+  defaultExpanded: g
 }) => {
-  const [f, b] = $(() => C(e, t)), [l, v] = $("");
-  function w(c, h) {
-    const a = structuredClone(f), d = h.split("-"), g = Number(d[0]);
-    d.shift();
-    let m = a[g];
-    d.length > 0 && (m = d.reduce((x, L) => x.children[Number(L)], a[g])), m.isOpen = !m.isOpen, b(a);
+  const [v, y] = $(
+    () => C(e, {
+      ...l,
+      defaultExpanded: g ?? l.defaultExpanded
+    })
+  ), [t, w] = $("");
+  function b(a, d) {
+    const c = structuredClone(v), o = d.split("-"), p = Number(o[0]);
+    o.shift();
+    let u = c[p];
+    o.length > 0 && (u = o.reduce((L, j) => L.children[Number(j)], c[p])), u.isOpen = !u.isOpen, y(c);
   }
   return /* @__PURE__ */ A("div", { className: "min-w-max", children: [
-    u && /* @__PURE__ */ r("div", { className: k("mb-2", o), children: /* @__PURE__ */ r(
+    f && /* @__PURE__ */ r("div", { className: k("mb-2", h), children: /* @__PURE__ */ r(
       _,
       {
         type: "search",
-        placeholder: y,
-        value: l,
-        onChange: (c) => v(c),
+        placeholder: x,
+        value: t,
+        onChange: (a) => w(a),
         size: "sm",
         className: i,
         icon: T
       }
     ) }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col", children: f.map((c, h) => /* @__PURE__ */ r(
+    /* @__PURE__ */ r("div", { className: "flex flex-col", children: v.map((a, d) => /* @__PURE__ */ r(
       S,
       {
-        node: c,
-        parentId: String(h),
+        node: a,
+        parentId: String(d),
         depth: 0,
-        handleToggle: w,
-        onNodeClick: p,
+        handleToggle: b,
+        onNodeClick: m,
         selectedNodeId: n,
         CustomNode: s,
-        query: l
+        query: t
       },
-      c.id || h
+      a.id || d
     )) })
   ] });
 };
-E.displayName = "TreeView";
+I.displayName = "TreeView";
 const S = ({
   node: e,
-  parentId: t,
+  parentId: l,
   depth: s = 0,
-  handleToggle: p,
+  handleToggle: m,
   onNodeClick: n,
-  selectedNodeId: u,
-  CustomNode: y,
-  query: o
+  selectedNodeId: f,
+  CustomNode: x,
+  query: h
 }) => {
-  const i = o.length > 0, f = Array.isArray(e.children) ? e.children : [], b = e.label ?? "";
-  if (i && !O(e, o))
+  const i = h.length > 0, g = Array.isArray(e.children) ? e.children : [], v = e.label ?? "";
+  if (i && !O(e, h))
     return null;
-  const l = f.length > 0, v = u != null && e.id === u, w = l && (i || (e.isOpen ?? !1)), c = (m) => {
-    m.stopPropagation(), l && (i || p(e, t), n == null || n(e));
-  }, h = s === 0 ? "pl-[6px]" : "", a = s === 0 ? "pl-[2px]" : "pl-[8px]", d = i && b.toLowerCase().includes(o.toLowerCase()), g = i ? !0 : e.isOpen;
+  const y = g.length > 0, t = f != null && e.id === f, w = y && (i || (e.isOpen ?? !1)), b = (p) => {
+    p.stopPropagation(), y && (i || m(e, l), n == null || n(e));
+  }, a = s === 0 ? "pl-[6px]" : "", d = s === 0 ? "pl-[2px]" : "pl-[8px]", c = i && v.toLowerCase().includes(h.toLowerCase()), o = i ? !0 : e.isOpen;
   return /* @__PURE__ */ A("div", { className: "relative", children: [
     /* @__PURE__ */ A(
       "div",
       {
-        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${h} ${d ? "bg-(--color-bg-secondary)" : ""} ${l ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
-        onClick: c,
+        className: `flex h-[28px] w-full items-center pr-[8px] rounded-sm ${a} ${c ? "bg-(--color-bg-secondary)" : ""} ${y ? "cursor-pointer hover:bg-(--color-bg-secondary)" : ""}`,
+        onClick: b,
         children: [
-          s > 0 && Array.from({ length: s }).map((m, x) => /* @__PURE__ */ r(D, {}, x)),
-          l ? /* @__PURE__ */ r(
+          s > 0 && Array.from({ length: s }).map((p, u) => /* @__PURE__ */ r(D, {}, u)),
+          y ? /* @__PURE__ */ r(
             "div",
             {
-              className: `flex flex-col h-full items-center shrink-0 ${a} ${g ? "justify-end" : "justify-center"}`,
-              children: g ? /* @__PURE__ */ A(j, { children: [
+              className: `flex flex-col h-full items-center shrink-0 ${d} ${o ? "justify-end" : "justify-center"}`,
+              children: o ? /* @__PURE__ */ A(E, { children: [
                 /* @__PURE__ */ r(
                   K,
                   {
@@ -135,27 +142,27 @@ const S = ({
               )
             }
           ) : s > 0 ? /* @__PURE__ */ r("div", { className: "h-full w-[6px] shrink-0" }) : null,
-          /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(y, { node: e, isSelected: v }) })
+          /* @__PURE__ */ r("div", { className: "flex flex-1 h-full items-center min-w-0 pl-[2px]", children: /* @__PURE__ */ r(x, { node: e, isSelected: t }) })
         ]
       }
     ),
-    w && /* @__PURE__ */ r("div", { className: "relative", children: f.map((m, x) => /* @__PURE__ */ r(
+    w && /* @__PURE__ */ r("div", { className: "relative", children: g.map((p, u) => /* @__PURE__ */ r(
       S,
       {
-        node: m,
-        parentId: `${t}-${x}`,
+        node: p,
+        parentId: `${l}-${u}`,
         depth: s + 1,
-        handleToggle: p,
+        handleToggle: m,
         onNodeClick: n,
-        selectedNodeId: u,
-        CustomNode: y,
-        query: o
+        selectedNodeId: f,
+        CustomNode: x,
+        query: h
       },
-      m.id || `${t}-${x}`
+      p.id || `${l}-${u}`
     )) })
   ] });
 };
 export {
-  E as TreeView,
+  I as TreeView,
   C as buildTreeViewNodes
 };

package/dist/primitives/button/button-utility.js

@@ -1,8 +1,8 @@
 import { jsxs as x, jsx as d } from "react/jsx-runtime";
 import { isValidElement as m } from "react";
-import { Link as p, Button as h } from "react-aria-components";
-import { Tooltip as y } from "../tooltip/tooltip.js";
-import { cx as b } from "../../utils/cn.js";
+import { Link as p, Button as y } from "react-aria-components";
+import { Tooltip as b } from "../tooltip/tooltip.js";
+import { cx as h } from "../../utils/cn.js";
 import { isReactComponent as v } from "../../utils/is-react-component.js";
 const g = {
   secondary: "bg-primary text-fg-quaternary shadow-xs-skeumorphic ring-1 ring-secondary ring-inset hover:bg-primary_hover hover:text-fg-quaternary_hover disabled:shadow-xs disabled:ring-disabled_subtle",
@@ -27,7 +27,7 @@ const g = {
   tooltipPlacement: u = "top",
   ...e
 }) => {
-  const o = "href" in e ? e.href : void 0, f = o ? p : h;
+  const o = "href" in e ? e.href : void 0, f = o ? p : y;
   let a = {};
   o ? a = {
     ...e,
@@ -46,8 +46,8 @@ const g = {
     {
       "aria-label": i,
       ...a,
-      className: b(
-        "group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:text-fg-disabled_subtle",
+      className: h(
+        "group relative inline-flex h-max cursor-pointer items-center justify-center rounded-md outline-focus-ring transition duration-100 ease-linear focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:text-fg-disabled_subtle",
         g[l],
         _[n],
         // Icon styles
@@ -62,7 +62,7 @@ const g = {
     }
   );
   return i ? /* @__PURE__ */ d(
-    y,
+    b,
     {
       title: i,
       placement: u,

package/dist/primitives/button/button.js

@@ -10,7 +10,7 @@ const t = q({
       // When button is used within `InputGroup`
       "in-data-input-wrapper:focus:!z-50 in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-r-none in-data-input-wrapper:in-data-leading:before:rounded-r-none in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-l-none in-data-input-wrapper:in-data-trailing:before:rounded-l-none",
       // Disabled styles
-      "disabled:cursor-not-allowed disabled:text-fg-disabled",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:text-fg-disabled",
       // Icon styles
       "disabled:*:data-icon:text-fg-disabled_subtle",
       // Same as `icon` but for SSR icons that cannot be passed to the client as functions.
@@ -63,7 +63,7 @@ const t = q({
       root: [
         "bg-primary text-secondary ring-1 ring-secondary ring-inset hover:bg-primary_hover hover:text-secondary_hover data-loading:bg-primary_hover",
         // Disabled styles
-        "disabled:ring-disabled_subtle",
+        "disabled:bg-disabled_subtle disabled:ring-disabled_subtle",
         // Icon styles
         "*:data-icon:text-fg-quaternary hover:*:data-icon:text-fg-quaternary_hover"
       ].join(" ")

package/dist/primitives/tooltip/ellipsis-content.d.ts

@@ -0,0 +1,12 @@
+export type EllipsisContentWithTooltipProps = {
+    content: string;
+    className?: string;
+    link?: boolean;
+    tooltipPosition?: "start" | "center" | "end";
+    tooltipSide?: "above" | "below";
+    textClassName?: string;
+    tooltipClassName?: string;
+};
+export declare const EllipsisContentWithTooltip: ({ content, className, link, textClassName, tooltipClassName, }: EllipsisContentWithTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const createEllipsisContent: (content: string, className?: string, link?: boolean, tooltipPosition?: "start" | "center" | "end", tooltipSide?: "above" | "below", placeholder?: string, textClassName?: string, tooltipClassName?: string) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ellipsis-content.d.ts.map

package/dist/primitives/tooltip/ellipsis-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipsis-content.d.ts","sourceRoot":"","sources":["../../../src/primitives/tooltip/ellipsis-content.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,+BAA+B,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,gEAMxC,+BAA+B,4CA4HjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,SAAS,MAAM,EACf,YAAW,MAAW,EACtB,OAAO,OAAO,EACd,kBAAiB,OAAO,GAAG,QAAQ,GAAG,KAAe,EACrD,cAAc,OAAO,GAAG,OAAO,EAC/B,cAAc,MAAM,EACpB,gBAAgB,MAAM,EACtB,mBAAmB,MAAM,4CAmB1B,CAAC"}

package/dist/primitives/tooltip/ellipsis-content.js

@@ -0,0 +1,113 @@
+import { jsxs as v, Fragment as y, jsx as u } from "react/jsx-runtime";
+import { useState as w, useRef as x, useEffect as b } from "react";
+import { createPortal as P } from "react-dom";
+import { computePosition as M, offset as $, autoPlacement as E, size as R, shift as W } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { cx as T } from "../../utils/cn.js";
+const j = ({
+  content: e,
+  className: c = "",
+  link: f = !1,
+  textClassName: m = "",
+  tooltipClassName: h = ""
+}) => {
+  const [i, a] = w(!1), [p, g] = w({ top: -9999, left: -9999 }), o = x(null), s = x(null), n = x(null);
+  return b(() => () => {
+    n.current != null && clearTimeout(n.current);
+  }, []), b(() => {
+    if (!i || !o.current || !s.current) return;
+    let t = !1;
+    return M(o.current, s.current, {
+      middleware: [
+        $(8),
+        E({
+          allowedPlacements: [
+            "top-start",
+            "top",
+            "top-end",
+            "bottom-start",
+            "bottom",
+            "bottom-end"
+          ]
+        }),
+        R({
+          padding: 8,
+          apply({ availableWidth: r, availableHeight: l, elements: d }) {
+            Object.assign(d.floating.style, {
+              maxWidth: `${Math.min(r, 512)}px`,
+              maxHeight: `${Math.min(l, window.innerHeight * 0.4)}px`
+            });
+          }
+        }),
+        W({ padding: 8 })
+      ]
+    }).then(({ x: r, y: l }) => {
+      t || g({ top: l, left: r });
+    }), () => {
+      t = !0;
+    };
+  }, [i]), /* @__PURE__ */ v(y, { children: [
+    /* @__PURE__ */ u(
+      "span",
+      {
+        ref: o,
+        className: T(
+          "whitespace-nowrap overflow-hidden text-ellipsis w-full block",
+          m,
+          c,
+          f ? "!text-[var(--color-brand-600)]" : ""
+        ),
+        onMouseEnter: () => {
+          !o.current || !(o.current.scrollWidth > o.current.clientWidth) || (g({ top: -9999, left: -9999 }), a(!0));
+        },
+        onMouseLeave: (t) => {
+          var r;
+          (r = s.current) != null && r.contains(t.relatedTarget) || (n.current != null && clearTimeout(n.current), n.current = setTimeout(() => {
+            var l, d;
+            n.current = null, !((l = s.current) != null && l.matches(":hover")) && !((d = o.current) != null && d.matches(":hover")) && a(!1);
+          }, 100));
+        },
+        children: f ? /* @__PURE__ */ u("a", { href: e, target: "_blank", rel: "noopener noreferrer", children: e }) : e
+      }
+    ),
+    i && P(
+      /* @__PURE__ */ u(
+        "div",
+        {
+          "data-react-aria-top-layer": "true",
+          role: "tooltip",
+          ref: s,
+          className: T(
+            "fixed px-3 py-2 text-xs font-semibold text-white bg-primary-solid rounded-lg shadow-lg z-[9999] max-w-lg max-h-[40vh] overflow-y-auto break-words whitespace-normal",
+            h
+          ),
+          style: {
+            top: `${p.top}px`,
+            left: `${p.left}px`
+          },
+          onClick: (t) => t.stopPropagation(),
+          onMouseLeave: (t) => {
+            var r;
+            (r = o.current) != null && r.contains(t.relatedTarget) || a(!1);
+          },
+          children: e
+        }
+      ),
+      document.body
+    )
+  ] });
+}, N = (e, c = "", f, m = "start", h, i, a, p) => e === "" || e === "-" ? /* @__PURE__ */ u("span", { className: `text-left ${c}`, children: e || i || "-" }) : /* @__PURE__ */ u(
+  j,
+  {
+    content: e,
+    className: c,
+    link: f,
+    tooltipPosition: m,
+    tooltipSide: h,
+    textClassName: a,
+    tooltipClassName: p
+  }
+);
+export {
+  j as EllipsisContentWithTooltip,
+  N as createEllipsisContent
+};

package/dist/primitives/tooltip/index.d.ts

@@ -1,2 +1,3 @@
 export { Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, } from './tooltip';
+export { EllipsisContentWithTooltip, createEllipsisContent, type EllipsisContentWithTooltipProps, } from './ellipsis-content';
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,KAAK,YAAY,EACjB,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,0BAA0B,EAC1B,qBAAqB,EACrB,KAAK,+BAA+B,GACrC,MAAM,oBAAoB,CAAC"}