@situaction/traq-ui-ste 1.2.45 → 1.2.46

package/dist/components/stepper/Stepper.js

@@ -1,67 +1,67 @@
 import { jsx as _, jsxs as C } from "react/jsx-runtime";
-import { useMemo as m, useRef as E, useState as Z, useLayoutEffect as L } from "react";
+import { useMemo as h, useRef as E, useState as Z, useLayoutEffect as L } from "react";
 import { s as tt } from "../../CheckCircle.es-ILxE75_k.mjs";
-import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c4wm6_35", ot = "_row_c4wm6_42", st = "_connectorAbs_c4wm6_49", ct = "_connectorProgress_c4wm6_59", rt = "_connectorGradient_c4wm6_63", dt = "_connectorDefault_c4wm6_68", it = "_dotButton_c4wm6_74", at = "_dotButtonDisabled_c4wm6_89", ut = "_dotOuter_c4wm6_95", lt = "_dotInner_c4wm6_103", pt = "_rowNoContent_c4wm6_172", _t = "_content_c4wm6_177", n = {
+import '../../styles/Stepper.css';const et = "_wrapper_tr5aw_30", nt = "_steps_tr5aw_35", ot = "_row_tr5aw_42", rt = "_connectorAbs_tr5aw_49", st = "_connectorProgress_tr5aw_59", ct = "_connectorGradient_tr5aw_63", at = "_connectorDefault_tr5aw_68", dt = "_dotButton_tr5aw_74", it = "_dotButtonDisabled_tr5aw_89", ut = "_dotOuter_tr5aw_95", lt = "_dotInner_tr5aw_103", pt = "_rowNoContent_tr5aw_172", _t = "_content_tr5aw_177", n = {
   wrapper: et,
   steps: nt,
   row: ot,
-  connectorAbs: st,
-  connectorProgress: ct,
-  connectorGradient: rt,
-  connectorDefault: dt,
-  dotButton: it,
-  dotButtonDisabled: at,
+  connectorAbs: rt,
+  connectorProgress: st,
+  connectorGradient: ct,
+  connectorDefault: at,
+  dotButton: dt,
+  dotButtonDisabled: it,
   dotOuter: ut,
   dotInner: lt,
-  "dotButton--upcoming": "_dotButton--upcoming_c4wm6_108",
-  "dotButton--active": "_dotButton--active_c4wm6_120",
-  "dotButton--completed": "_dotButton--completed_c4wm6_142",
-  "dotButton--completedCheck": "_dotButton--completedCheck_c4wm6_153",
-  "dotButton--disabled": "_dotButton--disabled_c4wm6_160",
+  "dotButton--upcoming": "_dotButton--upcoming_tr5aw_108",
+  "dotButton--active": "_dotButton--active_tr5aw_120",
+  "dotButton--completed": "_dotButton--completed_tr5aw_142",
+  "dotButton--completedCheck": "_dotButton--completedCheck_tr5aw_153",
+  "dotButton--disabled": "_dotButton--disabled_tr5aw_160",
   rowNoContent: pt,
   content: _t
-}, ft = (o, i) => {
-  if (o === i) return !0;
-  if (o.length !== i.length) return !1;
-  for (let a = 0; a < o.length; a++) {
-    const p = o[a], u = i[a];
+}, ft = (o, d) => {
+  if (o === d) return !0;
+  if (o.length !== d.length) return !1;
+  for (let i = 0; i < o.length; i++) {
+    const p = o[i], u = d[i];
     if (p.key !== u.key || p.leftPx !== u.leftPx || p.topPx !== u.topPx || p.heightPx !== u.heightPx || p.variant !== u.variant)
       return !1;
   }
   return !0;
-}, gt = ({
+}, Bt = ({
   items: o,
-  onDotClick: i,
-  dotOffsetPx: a = 18,
+  onDotClick: d,
+  dotOffsetPx: i = 18,
   dotsClickable: p = !0,
   activeId: u,
   autoStatusFromActive: y = !0,
-  disabledIds: B = [],
+  disabledIds: m = [],
   showContent: P = !0,
   showCompletedCheck: N = !1,
   getDotAriaLabel: x,
   dotButtonMarginTop: I = "10px"
 }) => {
-  const z = m(
-    () => ({ "--flowline-dot-offset": `${a}px` }),
-    [a]
-  ), Y = m(() => B.join("|"), [B]), w = m(() => {
-    var l, r;
-    const t = new Set(B), s = u ?? ((l = o.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((r = o[0]) == null ? void 0 : r.id), c = o.findIndex((e) => e.id === s);
-    return o.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : y ? f < c ? "completed" : f === c ? "active" : "upcoming" : e.status ?? "upcoming");
-  }, [o, u, y, Y]), k = m(() => w.join("|"), [w]), K = m(() => o.map((t) => t.id).join("|"), [o]), R = E(null), g = E(/* @__PURE__ */ new Map()), q = m(() => (t) => (s) => {
-    g.current.set(t, s);
+  const z = h(
+    () => ({ "--flowline-dot-offset": `${i}px` }),
+    [i]
+  ), Y = h(() => m.join("|"), [m]), g = h(() => {
+    var l, c;
+    const t = new Set(m), r = u ?? ((l = o.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((c = o[0]) == null ? void 0 : c.id), s = o.findIndex((e) => e.id === r);
+    return o.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : y ? f < s ? "completed" : f === s ? "active" : "upcoming" : e.status ?? "upcoming");
+  }, [o, u, y, Y]), k = h(() => g.join("|"), [g]), K = h(() => o.map((t) => t.id).join("|"), [o]), R = E(null), B = E(/* @__PURE__ */ new Map()), q = h(() => (t) => (r) => {
+    B.current.set(t, r);
   }, []), [D, F] = Z([]);
   return L(() => {
     const t = R.current;
     if (!t) return;
-    let s = null;
-    const c = () => {
-      const e = t.getBoundingClientRect(), f = [], b = o.map((d) => d.id);
-      for (let d = 0; d < b.length - 1; d++) {
-        const $ = b[d], j = b[d + 1], A = g.current.get($), O = g.current.get(j);
+    let r = null;
+    const s = () => {
+      const e = t.getBoundingClientRect(), f = [], b = o.map((a) => a.id);
+      for (let a = 0; a < b.length - 1; a++) {
+        const $ = b[a], j = b[a + 1], A = B.current.get($), O = B.current.get(j);
         if (!A || !O) continue;
-        const h = A.getBoundingClientRect(), v = O.getBoundingClientRect(), T = Math.round(h.left + h.width / 2 - e.left), H = h.top + h.height / 2 - e.top, J = v.top + v.height / 2 - e.top, Q = h.height / 2, U = v.height / 2, G = 2, M = Math.round(H + Q + G), V = Math.round(J - U - G), W = Math.max(0, V - M), S = w[d], X = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
+        const w = A.getBoundingClientRect(), v = O.getBoundingClientRect(), T = Math.round(w.left + w.width / 2 - e.left), H = w.top + w.height / 2 - e.top, J = v.top + v.height / 2 - e.top, Q = w.height / 2, U = v.height / 2, G = 2, M = Math.round(H + Q + G), V = Math.round(J - U - G), W = Math.max(0, V - M), S = g[a], X = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
         f.push({
           key: `${$}__${j}`,
           leftPx: T,
@@ -70,18 +70,18 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
           variant: X
         });
       }
-      F((d) => ft(d, f) ? d : f);
+      F((a) => ft(a, f) ? a : f);
     }, l = () => {
-      s == null && (s = requestAnimationFrame(() => {
-        s = null, c();
+      r == null && (r = requestAnimationFrame(() => {
+        r = null, s();
       }));
     };
     l();
-    const r = new ResizeObserver(l);
-    return r.observe(t), g.current.forEach((e) => {
-      e && r.observe(e);
+    const c = new ResizeObserver(l);
+    return c.observe(t), B.current.forEach((e) => {
+      e && c.observe(e);
     }), window.addEventListener("resize", l), () => {
-      s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", l);
+      r != null && cancelAnimationFrame(r), c.disconnect(), window.removeEventListener("resize", l);
     };
   }, [K, k]), /* @__PURE__ */ _("div", { className: n.wrapper, style: z, children: /* @__PURE__ */ C("div", { ref: R, className: n.steps, children: [
     D.map((t) => /* @__PURE__ */ _(
@@ -100,8 +100,8 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
       },
       t.key
     )),
-    o.map((t, s) => {
-      const c = w[s], r = p && !(c === "disabled") && !!i;
+    o.map((t, r) => {
+      const s = g[r], c = p && !(s === "disabled") && !!d;
       return /* @__PURE__ */ C(
         "div",
         {
@@ -109,7 +109,7 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
             n.row,
             P ? "" : n.rowNoContent
           ].filter(Boolean).join(" "),
-          style: { columnGap: `${a}px` },
+          style: { columnGap: `${i}px` },
           children: [
             /* @__PURE__ */ _(
               "button",
@@ -117,17 +117,17 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
                 type: "button",
                 className: [
                   n.dotButton,
-                  n[`dotButton--${c}`],
-                  c === "completed" && N ? n["dotButton--completedCheck"] : "",
-                  r ? "" : n.dotButtonDisabled
+                  n[`dotButton--${s}`],
+                  s === "completed" && N ? n["dotButton--completedCheck"] : "",
+                  c ? "" : n.dotButtonDisabled
                 ].filter(Boolean).join(" "),
                 style: { marginTop: I ?? "0" },
                 onClick: () => {
-                  r && (i == null || i(t.id));
+                  c && (d == null || d(t.id));
                 },
-                "aria-label": (x == null ? void 0 : x(t, s, c)) ?? `Open step ${t.id}`,
-                disabled: !r,
-                children: /* @__PURE__ */ _("span", { ref: q(t.id), className: n.dotOuter, children: c === "completed" && N ? /* @__PURE__ */ _(tt, { size: 14, weight: "bold" }) : /* @__PURE__ */ _("span", { className: n.dotInner }) })
+                "aria-label": (x == null ? void 0 : x(t, r, s)) ?? `Open step ${t.id}`,
+                disabled: !c,
+                children: /* @__PURE__ */ _("span", { ref: q(t.id), className: n.dotOuter, children: s === "completed" && N ? /* @__PURE__ */ _(tt, { size: 14, weight: "bold" }) : /* @__PURE__ */ _("span", { className: n.dotInner }) })
               }
             ),
             P ? /* @__PURE__ */ _("div", { className: n.content, children: t.content }) : null
@@ -139,5 +139,5 @@ import '../../styles/Stepper.css';const et = "_wrapper_c4wm6_30", nt = "_steps_c
   ] }) });
 };
 export {
-  gt as Stepper
+  Bt as Stepper
 };

package/dist/components/theme/variables_dark.d.ts

@@ -236,6 +236,7 @@ export declare const variables_dark: {
     '--gradient-backgroundcard-100': string;
     '--gradient-backgroundcard-0': string;
     '--flow-point-line-active': string;
+    '--flow-point-line-active-text': string;
     '--flow-point-line-inactive': string;
     '--flow-gradient-light': string;
     '--flow-gradient-dark': string;

package/dist/components/theme/variables_dark.js

@@ -236,6 +236,7 @@ const r = {
   "--gradient-backgroundcard-100": "var(--color-light-10)",
   "--gradient-backgroundcard-0": "var(--color-light-0)",
   "--flow-point-line-active": "var(--color-light-100)",
+  "--flow-point-line-active-text": "var(--color-purple-dark-900)",
   "--flow-point-line-inactive": "var(--color-light-30)",
   "--flow-gradient-light": "var(--color-light-20)",
   "--flow-gradient-dark": "var(--color-light-100)"

package/dist/components/theme/variables_light.d.ts

@@ -236,6 +236,7 @@ export declare const variables_light: {
     '--gradient-backgroundcard-100': string;
     '--gradient-backgroundcard-0': string;
     '--flow-point-line-active': string;
+    '--flow-point-line-active-text': string;
     '--flow-point-line-inactive': string;
     '--flow-gradient-light': string;
     '--flow-gradient-dark': string;

package/dist/components/theme/variables_light.js

@@ -236,6 +236,7 @@ const r = {
   "--gradient-backgroundcard-100": "var(--color-sable-trans-20)",
   "--gradient-backgroundcard-0": "var(--color-sable-trans-0)",
   "--flow-point-line-active": "var(--color-purple-dark-900)",
+  "--flow-point-line-active-text": "var(--color-light-100)",
   "--flow-point-line-inactive": "var(--color-gray-trans-70)",
   "--flow-gradient-light": "var(--color-gray-trans-70)",
   "--flow-gradient-dark": "var(--color-purple-dark-900)"

package/dist/styles/Stepper.css

@@ -1 +1 @@
-._wrapper_c4wm6_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_c4wm6_35{position:relative;display:flex;flex-direction:column;gap:.625rem}._row_c4wm6_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;align-items:start}._connectorAbs_c4wm6_49{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_c4wm6_59{background:var(--flow-point-line-active)}._connectorGradient_c4wm6_63{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_c4wm6_68{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_c4wm6_74{width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(var(--stepper-dot-offset-y, 0px));position:relative;z-index:1}._dotButtonDisabled_c4wm6_89{cursor:default;opacity:.5}._dotOuter_c4wm6_95{display:flex;align-items:center;justify-content:center;border-radius:999px;transform:translateY(var(--stepper-dot-offset-y, 0px))}._dotInner_c4wm6_103{border-radius:999px}._dotButton--upcoming_c4wm6_108 ._dotOuter_c4wm6_95{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_c4wm6_108 ._dotInner_c4wm6_103{display:none}._dotButton--active_c4wm6_120 ._dotOuter_c4wm6_95{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_c4wm6_120 ._dotInner_c4wm6_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_c4wm6_142 ._dotOuter_c4wm6_95{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_c4wm6_142 ._dotInner_c4wm6_103{display:none}._dotButton--completedCheck_c4wm6_153 ._dotOuter_c4wm6_95{width:16px;height:16px;color:#fff}._dotButton--disabled_c4wm6_160 ._dotOuter_c4wm6_95{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_c4wm6_160 ._dotInner_c4wm6_103{display:none}._rowNoContent_c4wm6_172{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_c4wm6_172 ._content_c4wm6_177{display:none}
+._wrapper_tr5aw_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_tr5aw_35{position:relative;display:flex;flex-direction:column;gap:.625rem}._row_tr5aw_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;align-items:start}._connectorAbs_tr5aw_49{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_tr5aw_59{background:var(--flow-point-line-active)}._connectorGradient_tr5aw_63{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_tr5aw_68{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_tr5aw_74{width:var(--stepper-dot-button);height:var(--stepper-dot-button);padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateY(var(--stepper-dot-offset-y, 0px));position:relative;z-index:1}._dotButtonDisabled_tr5aw_89{cursor:default;opacity:.5}._dotOuter_tr5aw_95{display:flex;align-items:center;justify-content:center;border-radius:999px;transform:translateY(var(--stepper-dot-offset-y, 0px))}._dotInner_tr5aw_103{border-radius:999px}._dotButton--upcoming_tr5aw_108 ._dotOuter_tr5aw_95{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_tr5aw_108 ._dotInner_tr5aw_103{display:none}._dotButton--active_tr5aw_120 ._dotOuter_tr5aw_95{width:16px;height:16px;border-radius:999px;border:1px solid var(--flow-point-line-active);background:transparent;padding:1px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}._dotButton--active_tr5aw_120 ._dotInner_tr5aw_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_tr5aw_142 ._dotOuter_tr5aw_95{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_tr5aw_142 ._dotInner_tr5aw_103{display:none}._dotButton--completedCheck_tr5aw_153 ._dotOuter_tr5aw_95{width:16px;height:16px;color:var(--flow-point-line-active-text)}._dotButton--disabled_tr5aw_160 ._dotOuter_tr5aw_95{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_tr5aw_160 ._dotInner_tr5aw_103{display:none}._rowNoContent_tr5aw_172{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_tr5aw_172 ._content_tr5aw_177{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.2.45",
+  "version": "1.2.46",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",