prometeo-design-system 3.1.5 → 3.1.6

package/dist/Scrollable.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/Scrollable'
+export {}

package/dist/Scrollable.es.js

@@ -0,0 +1,260 @@
+import { j as h } from "./jsx-runtime-GkKLlHH4.js";
+import { useIsMobile as et } from "./useDevice.es.js";
+import { g as rt } from "./useLabelBackground-BDIHUdND.js";
+import { c as m } from "./cn-B6yFEsav.js";
+import { c as C } from "./index-BOQuZ0gG.js";
+import U, { useRef as i, useEffect as V } from "react";
+import { CrevronLeft as ot } from "./Icons/CrevronLeft.es.js";
+const _ = C(
+  "",
+  {
+    variants: {
+      axis: {
+        x: " overflow-x-auto overflow-y-hidden",
+        y: " overflow-y-auto overflow-x-hidden",
+        both: " overflow-auto"
+      }
+    }
+  }
+), $ = C("", {
+  variants: {
+    position: {
+      top: "",
+      bottom: "",
+      left: "",
+      right: ""
+    },
+    type: {
+      icon: " absolute z-100 rounded-full hover:scale-125 transition-all duration-300 ease-in-out shadow-xs rounded-full shadow-white/10 text-neutral-default-pressed",
+      shadow: "absolute z-100 transition-all duration-400 ease-in-out"
+    }
+  },
+  compoundVariants: [
+    { type: "icon", position: "top", className: "rotate-90 top-0 left-1/2 -translate-x-1/2 -translate-y-1/2" },
+    { type: "icon", position: "bottom", className: "rotate-270 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2" },
+    { type: "icon", position: "left", className: "top-1/2 -translate-y-1/2 -translate-x-1/2" },
+    { type: "icon", position: "right", className: "rotate-180 right-0 top-1/2 -translate-y-1/2 translate-x-1/2" },
+    { type: "shadow", position: "top", className: "top-0 left-0 w-full h-14" },
+    { type: "shadow", position: "bottom", className: "bottom-0 left-0 w-full h-14 rotate-180" },
+    { type: "shadow", position: "left", className: "left-0 top-0 h-full w-5" },
+    { type: "shadow", position: "right", className: "right-0 top-0 h-full w-5 rotate-180" }
+  ]
+}), st = C("", {
+  variants: {
+    hide: {
+      true: " prometeo-scrollbar-none",
+      false: ""
+    },
+    size: {
+      small: "prometeo-scrollbar-thin",
+      medium: ""
+    }
+  }
+}), ht = (I) => {
+  const { defaultBehavior: y = "scroll-on-click" } = I, F = et(), P = {
+    top: { show: !0, type: "shadow", behavior: y },
+    bottom: { show: !0, type: "shadow", behavior: y },
+    left: { show: !0, type: "icon", behavior: y },
+    right: { show: !0, type: "icon", behavior: y }
+  }, G = {
+    hide: !1,
+    size: "medium"
+  }, {
+    debugMode: J = !1,
+    className: j,
+    axis: k = "both",
+    children: K,
+    indicators: v = P,
+    scrollbarProps: R = G,
+    disableMouseScroll: z = !1
+  } = I, s = i({}), l = i(null), d = i(null), b = i(null), a = i(null), u = i(5), f = i({}), w = i(null), p = i(!1), Q = (e) => {
+    if (!l.current) return 0;
+    const { scrollTop: t, scrollLeft: r, scrollHeight: o, clientHeight: n, scrollWidth: c, clientWidth: g } = l.current;
+    switch (e) {
+      case "top":
+        return Math.max(0, t);
+      case "bottom":
+        return Math.max(0, o - (t + n));
+      case "left":
+        return Math.max(0, r);
+      case "right":
+        return Math.max(0, c - (r + g));
+      default:
+        return 0;
+    }
+  }, x = (e, t = 100, r = !0) => {
+    if (!l.current) return;
+    const o = Q(e), n = Math.min(Math.abs(t), o);
+    if (n === 0) return;
+    const c = e === "top" || e === "left" ? -n : n, g = {
+      top: { top: c, left: 0 },
+      bottom: { top: c, left: 0 },
+      left: { top: 0, left: c },
+      right: { top: 0, left: c }
+    };
+    l.current.scrollBy({ ...g[e], behavior: r ? "smooth" : "auto" });
+  }, X = (e) => {
+    if (!l.current) return;
+    const t = l.current, r = {
+      top: { top: 0, left: t.scrollLeft },
+      bottom: { top: t.scrollHeight, left: t.scrollLeft },
+      left: { top: t.scrollTop, left: 0 },
+      right: { top: t.scrollTop, left: t.scrollWidth }
+    };
+    t.scrollTo({ ...r[e], behavior: "smooth" });
+  }, Y = (e, t) => {
+    const r = s.current[e];
+    if (r) {
+      if (r.style.cursor = "pointer", t === "icon") {
+        const o = r.querySelector("svg");
+        o && (o.style.transition = "all 0.3s ease-in-out", o.style.transform = "scale(1.3)", o.style.backgroundColor = "rgba(255, 255, 255, 0.2)", o.style.borderRadius = "100%");
+      } else if (t === "shadow") {
+        const o = r.querySelector("span");
+        o && (e === "top" || e === "bottom" ? o.style.height = "90px" : o.style.width = "40px");
+      }
+    }
+  }, L = (e) => {
+    const t = s.current[e];
+    if (!t) return;
+    t.style.cursor = "";
+    const r = t.querySelector("svg");
+    r && (r.style.transform = "", r.style.backgroundColor = "", r.style.borderRadius = "");
+    const o = t.querySelector("span");
+    o && (o.style.height = "", o.style.width = "");
+  }, A = (e, t) => {
+    if (t === "scroll-on-click" && p.current) {
+      p.current = !1;
+      return;
+    }
+    if (f.current[e]) {
+      a.current && (clearTimeout(a.current), a.current = null), d.current && (clearInterval(d.current), d.current = null), L(e), f.current[e] = !1, X(e);
+      return;
+    }
+    if (t === "scroll-on-click") {
+      if (!l.current) return;
+      const { clientHeight: r, clientWidth: o } = l.current, n = e === "top" || e === "bottom" ? r * 0.8 : o * 0.8;
+      x(e, n);
+    }
+  }, D = (e, t) => {
+    a.current && (clearTimeout(a.current), a.current = null), p.current = !0, u.current = 3;
+    let r = 0;
+    w.current = e, f.current[e] = !1, x(e, u.current, !1), d.current = setInterval(() => {
+      r += 16;
+      const o = r / 1e3;
+      if (o >= 2 && !f.current[e] && (f.current[e] = !0, Y(e, t)), o <= 2)
+        u.current = 5 + o * 0.4;
+      else {
+        const n = o - 2;
+        u.current += Math.pow(n, 1.1) * 2;
+      }
+      u.current = Math.min(u.current, 100), x(e, u.current, !1);
+    }, 16);
+  }, B = (e) => {
+    b.current && (clearTimeout(b.current), b.current = null), d.current && (clearInterval(d.current), d.current = null), u.current = 5;
+    const t = e || w.current;
+    t ? f.current[t] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+      L(t), f.current[t] = !1, p.current = !1;
+    }, 1e3)) : (L(t), f.current[t] = !1, p.current = !1) : p.current = !1, w.current = null;
+  }, W = (e, t, r) => {
+    F || t === "scroll-on-hover" && (b.current = setTimeout(() => {
+      D(e, r);
+    }, 200));
+  }, H = (e, t) => {
+    t === "scroll-on-hover" && B(e);
+  }, O = (e, t, r) => {
+    t === "scroll-on-click" && (p.current = !1, b.current = setTimeout(() => {
+      D(e, r);
+    }, 200));
+  }, q = (e, t) => {
+    t === "scroll-on-click" && B(e);
+  }, M = () => {
+    if (!l.current) return;
+    const e = l.current, { scrollTop: t, scrollLeft: r, scrollHeight: o, scrollWidth: n, clientHeight: c, clientWidth: g } = e, E = t <= 10, T = t + c >= o - 10, N = r <= 10, S = r + g >= n - 10;
+    s.current.top?.classList.toggle("opacity-0", E), s.current.top?.classList.toggle("pointer-events-none", E), s.current.top?.classList.toggle("pointer-events-auto", !E), s.current.bottom?.classList.toggle("opacity-0", T), s.current.bottom?.classList.toggle("pointer-events-none", T), s.current.bottom?.classList.toggle("pointer-events-auto", !T), s.current.left?.classList.toggle("opacity-0", N), s.current.left?.classList.toggle("pointer-events-none", N), s.current.left?.classList.toggle("pointer-events-auto", !N), s.current.right?.classList.toggle("opacity-0", S), s.current.right?.classList.toggle("pointer-events-none", S), s.current.right?.classList.toggle("pointer-events-auto", !S);
+  };
+  V(() => {
+    if (!l.current) return;
+    const e = l.current;
+    M(), e.addEventListener("scroll", M);
+    const t = (r) => {
+      z && r.preventDefault();
+    };
+    return e.addEventListener("wheel", t, { passive: !1 }), () => {
+      e.removeEventListener("scroll", M), e.removeEventListener("wheel", t);
+    };
+  }, [z]), V(() => {
+    if (!l.current) return;
+    const e = rt(l.current);
+    Object.entries(v).forEach(([t, r]) => {
+      if (r?.show && r.type === "shadow") {
+        const n = s.current[t]?.querySelector("span");
+        if (n) {
+          n.dataset.bgColor = e;
+          const c = t === "left" || t === "right" ? "to right" : "to bottom";
+          n.style.background = `linear-gradient(${c}, ${e} 40%, transparent)`, n.style.background = `linear-gradient(${c}, ${e} 40%, transparent)`;
+        }
+      }
+    });
+  }, [v]);
+  const Z = U.Children.toArray(K), tt = Object.values(v).some((e) => e?.show && e?.type === "icon");
+  return /* @__PURE__ */ h.jsxs("div", { className: m("relative p-0", j, _({ axis: k }), "scrolleable", tt ? "overflow-visible" : "overflow-hidden!"), children: [
+    /* @__PURE__ */ h.jsx(
+      "div",
+      {
+        ref: l,
+        className: m(
+          J && "border border-red-900 border-dashed",
+          j,
+          "py-2  relative w-full h-full min-h-full",
+          _({ axis: k }),
+          st({ hide: R?.hide, size: R?.size }),
+          ""
+        ),
+        children: Z?.map((e) => U.cloneElement(e, { className: m(e?.props?.className, "shrink-0! pointer-events-auto") }))
+      }
+    ),
+    /* @__PURE__ */ h.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(v).map(([e, t]) => {
+      if (!t?.show || t.type !== "shadow") return null;
+      const r = e;
+      return /* @__PURE__ */ h.jsx(
+        "span",
+        {
+          ref: (o) => {
+            s.current[e] = o;
+          },
+          className: m("cursor-default transition-all duration-500 ease-in-out z-100"),
+          onClick: () => A(r, t.behavior),
+          onMouseEnter: () => W(r, t.behavior, t.type),
+          onMouseLeave: () => H(r, t.behavior),
+          onMouseDown: () => O(r, t.behavior, t.type),
+          onMouseUp: () => q(r, t.behavior),
+          children: /* @__PURE__ */ h.jsx("span", { className: m($({ position: r, type: "shadow" }), t.className) })
+        },
+        e
+      );
+    }) }),
+    /* @__PURE__ */ h.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(v).map(([e, t]) => {
+      if (!t?.show || t.type !== "icon") return null;
+      const r = e;
+      return /* @__PURE__ */ h.jsx(
+        "span",
+        {
+          ref: (o) => {
+            s.current[e] = o;
+          },
+          className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
+          onClick: () => A(r, t.behavior),
+          onMouseEnter: () => W(r, t.behavior, t.type),
+          onMouseLeave: () => H(r, t.behavior),
+          onMouseDown: () => O(r, t.behavior, t.type),
+          onMouseUp: () => q(r, t.behavior),
+          children: /* @__PURE__ */ h.jsx(ot, { size: 20, className: m($({ position: r, type: "icon" }), t.className) })
+        },
+        e
+      );
+    }) })
+  ] });
+};
+export {
+  ht as Scrollable
+};

package/dist/SegmentedButton.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/SegmentedButton'
+export {}
+import PrometeoDesignSystem from './exports/SegmentedButton'
+export default PrometeoDesignSystem
+export * from './exports/SegmentedButton'
+export {}

package/dist/SegmentedButton.es.js

@@ -0,0 +1,185 @@
+import { j as u } from "./jsx-runtime-GkKLlHH4.js";
+import { c as s } from "./cn-B6yFEsav.js";
+import z, { useState as M, useMemo as C, useEffect as L } from "react";
+import { motion as E } from "framer-motion";
+const X = (T) => {
+  const [c, _] = M({}), { size: t = "medium", color: R = "default", options: l, value: h, name: x, onChange: j, icon: y, allowExpand: n = !1, disabled: d = !1 } = T, m = Math.max(l.findIndex((e) => e.value === h), 0), w = l.length, N = 9, b = 26, o = {
+    small: 120,
+    medium: 120,
+    large: 120
+  }, a = {
+    small: 94,
+    medium: 94,
+    large: 94
+  }, k = 16, S = {
+    small: { container: "p-2" },
+    medium: { container: "p-4 h-[48px] rounded-lg" },
+    large: { container: "p-6" }
+  }, f = {
+    default: {
+      switch: "bg-primary-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-pressed"
+    },
+    success: {
+      switch: "bg-success-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-pressed"
+    },
+    danger: {
+      switch: "bg-error-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-pressed"
+    },
+    warning: {
+      switch: "bg-warning-medium-default text-neutral-weak-default",
+      container: "border-neutral-default-default",
+      icon: "text-neutral-weak-default",
+      option: "text-neutral-medium-pressed"
+    },
+    disabled: {
+      switch: "bg-primary-medium-disabled text-neutral-strong-disabled",
+      container: "border-neutral-default-disabled",
+      icon: "text-neutral-strong-disabled",
+      option: "text-neutral-medium-pressed"
+    }
+  }, I = l.find((e) => e.value === h) ?? l[0], g = I.label.length * N + k * 2 + b, W = () => C(() => Object.values(c).reduce((i, r) => i + r, 0) + b, [c]), v = {
+    small: n ? W() : (w - 1) * a.small + o.small,
+    medium: n ? W() : (w - 1) * a.medium + o.medium,
+    large: n ? W() : (w - 1) * a.large + o.large
+  };
+  L(() => {
+    if (!n) return;
+    let e = {};
+    l.forEach((i, r) => {
+      e[r] = i.label.length * N + k * 2;
+    }), _(e);
+  }, []);
+  const H = C(() => n ? Object.values(c).reduce((e, i, r) => r < m ? e + i : e, 0) : Math.max(m * a[t] - 2, 0), [m]), D = () => {
+    if (d) return;
+    const e = m === l.length - 1 ? l[0] : l[m + 1];
+    j?.(x, e.value);
+  }, p = d ? "disabled" : R;
+  return /* @__PURE__ */ u.jsxs(
+    "button",
+    {
+      name: x,
+      type: "button",
+      style: {
+        width: v[t],
+        minWidth: v[t],
+        maxWidth: v[t]
+      },
+      className: s(
+        S[t].container,
+        f[p].container,
+        "border",
+        !d && "cursor-pointer",
+        "relative"
+      ),
+      children: [
+        /* @__PURE__ */ u.jsxs(
+          E.div,
+          {
+            animate: {
+              left: `${H}px`,
+              width: n ? g : o[t],
+              minWidth: n ? g : o[t],
+              maxWidth: n ? g : o[t]
+            },
+            transition: {
+              type: "spring",
+              stiffness: 260,
+              damping: 30
+            },
+            className: s(
+              "absolute top-0 left-0 h-full rounded-[6px] z-30",
+              "flex items-center justify-center gap-[2px] p-4",
+              f[p].switch
+            ),
+            onClick: () => {
+              !d && D();
+            },
+            children: [
+              y && z.cloneElement(y, { className: s(
+                "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
+                f[p].icon
+              ) }),
+              /* @__PURE__ */ u.jsx(
+                "p",
+                {
+                  className: s(
+                    "prometeo-fonts-label-large ",
+                    " overflow-hidden overflow-ellipsis text-nowrap select-none ",
+                    f[p].switch
+                  ),
+                  children: I.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            className: s(
+              "absolute top-0 left-0 w-full h-full overflow-hidden",
+              "flex justify-center"
+            ),
+            children: l?.map((e, i) => {
+              const r = e.value === (h || l[0].value), A = n ? c[i] + b : o[t], P = n ? c[i] : a[t], O = r ? A : P;
+              return /* @__PURE__ */ u.jsx(
+                E.span,
+                {
+                  onClick: () => {
+                    !d && j?.(x, e.value);
+                  },
+                  animate: {
+                    width: O,
+                    minWidth: O,
+                    maxWidth: O
+                  },
+                  transition: {
+                    duration: 0.3,
+                    delay: 0
+                  },
+                  className: s(
+                    "z-20 h-full ",
+                    "flex items-center justify-center px-3 py-[6px]",
+                    "prometeo-fonts-label-large text-neutral-medium-default",
+                    " overflow-hidden select-none ",
+                    !d && "cursor-pointer"
+                  ),
+                  "aria-label": e.label,
+                  children: /* @__PURE__ */ u.jsx(
+                    "p",
+                    {
+                      style: {
+                        width: n ? "max-content" : a[t],
+                        minWidth: n ? "max-content" : a[t],
+                        maxWidth: n ? "max-content" : a[t]
+                      },
+                      className: s(
+                        "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full select-none",
+                        f[p].option
+                      ),
+                      children: e.label
+                    }
+                  )
+                },
+                e.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  X as SegmentedButton,
+  X as default
+};

package/dist/Select.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Select'
+export {}
+import PrometeoDesignSystem from './exports/Select'
+export default PrometeoDesignSystem
+export * from './exports/Select'
+export {}