@situaction/traq-ui-ste 1.2.24 → 1.2.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/dist/components/stepper/Stepper.d.ts +29 -0
- package/dist/components/stepper/Stepper.js +122 -0
- package/dist/components/theme/variables_dark.d.ts +6 -0
- package/dist/components/theme/variables_dark.js +7 -1
- package/dist/components/theme/variables_light.d.ts +6 -0
- package/dist/components/theme/variables_light.js +7 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.js +15 -13
- package/dist/styles/Stepper.css +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
export type StepStatus = "active" | "completed" | "upcoming" | "disabled";
|
|
4
|
+
export interface StepITem {
|
|
5
|
+
/** Unique id of the step */
|
|
6
|
+
id: string;
|
|
7
|
+
/** Optional explicit status (used if autoStatusFromActive=false) */
|
|
8
|
+
status?: StepStatus;
|
|
9
|
+
/** Right-side content (typically an AccordionItem) */
|
|
10
|
+
content: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export interface StepperProps {
|
|
13
|
+
/** Steps to render */
|
|
14
|
+
items: StepITem[];
|
|
15
|
+
/** Called when a dot is clicked */
|
|
16
|
+
onDotClick?: (id: string) => void;
|
|
17
|
+
/** Dot vertical offset inside each row (px) to align with accordion header */
|
|
18
|
+
dotOffsetPx?: number;
|
|
19
|
+
/** If true, dots are clickable */
|
|
20
|
+
dotsClickable?: boolean;
|
|
21
|
+
/** Active step id (drives progression when autoStatusFromActive=true) */
|
|
22
|
+
activeId?: string;
|
|
23
|
+
/** If true, compute statuses from activeId (completed/active/upcoming) */
|
|
24
|
+
autoStatusFromActive?: boolean;
|
|
25
|
+
/** Optional: force some steps disabled without setting status on each item */
|
|
26
|
+
disabledIds?: string[];
|
|
27
|
+
}
|
|
28
|
+
/** Stepper layout: dots + absolute connectors between each dot */
|
|
29
|
+
export declare const Stepper: FC<StepperProps>;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { jsx as _, jsxs as D } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as h, useRef as M, useState as T, useLayoutEffect as U } from "react";
|
|
3
|
+
import '../../styles/Stepper.css';const V = "_wrapper_187j3_30", W = "_steps_187j3_35", X = "_row_187j3_42", Z = "_connectorAbs_187j3_50", tt = "_connectorProgress_187j3_60", et = "_connectorGradient_187j3_64", nt = "_connectorDefault_187j3_69", ot = "_dotButton_187j3_75", st = "_dotButtonDisabled_187j3_90", rt = "_dotOuter_187j3_96", ct = "_dotInner_187j3_103", o = {
|
|
4
|
+
wrapper: V,
|
|
5
|
+
steps: W,
|
|
6
|
+
row: X,
|
|
7
|
+
connectorAbs: Z,
|
|
8
|
+
connectorProgress: tt,
|
|
9
|
+
connectorGradient: et,
|
|
10
|
+
connectorDefault: nt,
|
|
11
|
+
dotButton: ot,
|
|
12
|
+
dotButtonDisabled: st,
|
|
13
|
+
dotOuter: rt,
|
|
14
|
+
dotInner: ct,
|
|
15
|
+
"dotButton--upcoming": "_dotButton--upcoming_187j3_108",
|
|
16
|
+
"dotButton--active": "_dotButton--active_187j3_120",
|
|
17
|
+
"dotButton--completed": "_dotButton--completed_187j3_142",
|
|
18
|
+
"dotButton--disabled": "_dotButton--disabled_187j3_153"
|
|
19
|
+
}, dt = (n, d) => {
|
|
20
|
+
if (n === d) return !0;
|
|
21
|
+
if (n.length !== d.length) return !1;
|
|
22
|
+
for (let u = 0; u < n.length; u++) {
|
|
23
|
+
const l = n[u], i = d[u];
|
|
24
|
+
if (l.key !== i.key || l.leftPx !== i.leftPx || l.topPx !== i.topPx || l.heightPx !== i.heightPx || l.variant !== i.variant)
|
|
25
|
+
return !1;
|
|
26
|
+
}
|
|
27
|
+
return !0;
|
|
28
|
+
}, ut = ({
|
|
29
|
+
items: n,
|
|
30
|
+
onDotClick: d,
|
|
31
|
+
dotOffsetPx: u = 18,
|
|
32
|
+
dotsClickable: l = !0,
|
|
33
|
+
activeId: i,
|
|
34
|
+
autoStatusFromActive: v = !0,
|
|
35
|
+
disabledIds: b = []
|
|
36
|
+
}) => {
|
|
37
|
+
const S = h(
|
|
38
|
+
() => ({ "--flowline-dot-offset": `${u}px` }),
|
|
39
|
+
[u]
|
|
40
|
+
), E = h(() => b.join("|"), [b]), B = h(() => {
|
|
41
|
+
var a, r;
|
|
42
|
+
const t = new Set(b), s = i ?? ((a = n.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : a.id) ?? ((r = n[0]) == null ? void 0 : r.id), p = n.findIndex((e) => e.id === s);
|
|
43
|
+
return n.map((e, f) => e.status === "disabled" || t.has(e.id) ? "disabled" : v ? f < p ? "completed" : f === p ? "active" : "upcoming" : e.status ?? "upcoming");
|
|
44
|
+
}, [n, i, v, E]), G = h(() => B.join("|"), [B]), I = h(() => n.map((t) => t.id).join("|"), [n]), w = M(null), x = M(/* @__PURE__ */ new Map()), Y = h(() => (t) => (s) => {
|
|
45
|
+
x.current.set(t, s);
|
|
46
|
+
}, []), [z, K] = T([]);
|
|
47
|
+
return U(() => {
|
|
48
|
+
const t = w.current;
|
|
49
|
+
if (!t) return;
|
|
50
|
+
let s = null;
|
|
51
|
+
const p = () => {
|
|
52
|
+
const e = t.getBoundingClientRect(), f = [], j = n.map((c) => c.id);
|
|
53
|
+
for (let c = 0; c < j.length - 1; c++) {
|
|
54
|
+
const P = j[c], y = j[c + 1], A = x.current.get(P), N = x.current.get(y);
|
|
55
|
+
if (!A || !N) continue;
|
|
56
|
+
const g = A.getBoundingClientRect(), m = N.getBoundingClientRect(), L = Math.round(g.left + g.width / 2 - e.left), q = g.top + g.height / 2 - e.top, k = m.top + m.height / 2 - e.top, C = g.height / 2, F = m.height / 2, R = 2, O = Math.round(q + C + R), H = Math.round(k - F - R), J = Math.max(0, H - O), $ = B[c], Q = $ === "completed" ? "progress" : $ === "active" ? "gradient" : "default";
|
|
57
|
+
f.push({
|
|
58
|
+
key: `${P}__${y}`,
|
|
59
|
+
leftPx: L,
|
|
60
|
+
topPx: O,
|
|
61
|
+
heightPx: J,
|
|
62
|
+
variant: Q
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
K((c) => dt(c, f) ? c : f);
|
|
66
|
+
}, a = () => {
|
|
67
|
+
s == null && (s = requestAnimationFrame(() => {
|
|
68
|
+
s = null, p();
|
|
69
|
+
}));
|
|
70
|
+
};
|
|
71
|
+
a();
|
|
72
|
+
const r = new ResizeObserver(a);
|
|
73
|
+
return r.observe(t), x.current.forEach((e) => {
|
|
74
|
+
e && r.observe(e);
|
|
75
|
+
}), window.addEventListener("resize", a), () => {
|
|
76
|
+
s != null && cancelAnimationFrame(s), r.disconnect(), window.removeEventListener("resize", a);
|
|
77
|
+
};
|
|
78
|
+
}, [I, G]), /* @__PURE__ */ _("div", { className: o.wrapper, style: S, children: /* @__PURE__ */ D("div", { ref: w, className: o.steps, children: [
|
|
79
|
+
z.map((t) => /* @__PURE__ */ _(
|
|
80
|
+
"span",
|
|
81
|
+
{
|
|
82
|
+
className: [
|
|
83
|
+
o.connectorAbs,
|
|
84
|
+
t.variant === "progress" ? o.connectorProgress : t.variant === "gradient" ? o.connectorGradient : o.connectorDefault
|
|
85
|
+
].join(" "),
|
|
86
|
+
style: {
|
|
87
|
+
left: `${t.leftPx}px`,
|
|
88
|
+
top: `${t.topPx}px`,
|
|
89
|
+
height: `${t.heightPx}px`
|
|
90
|
+
},
|
|
91
|
+
"aria-hidden": "true"
|
|
92
|
+
},
|
|
93
|
+
t.key
|
|
94
|
+
)),
|
|
95
|
+
n.map((t, s) => {
|
|
96
|
+
const p = B[s], r = l && !(p === "disabled") && !!d;
|
|
97
|
+
return /* @__PURE__ */ D("div", { className: o.row, children: [
|
|
98
|
+
/* @__PURE__ */ _(
|
|
99
|
+
"button",
|
|
100
|
+
{
|
|
101
|
+
type: "button",
|
|
102
|
+
className: [
|
|
103
|
+
o.dotButton,
|
|
104
|
+
o[`dotButton--${p}`],
|
|
105
|
+
r ? "" : o.dotButtonDisabled
|
|
106
|
+
].filter(Boolean).join(" "),
|
|
107
|
+
onClick: () => {
|
|
108
|
+
r && (d == null || d(t.id));
|
|
109
|
+
},
|
|
110
|
+
"aria-label": `Open step ${t.id}`,
|
|
111
|
+
disabled: !r,
|
|
112
|
+
children: /* @__PURE__ */ _("span", { ref: Y(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
|
|
113
|
+
}
|
|
114
|
+
),
|
|
115
|
+
/* @__PURE__ */ _("div", { className: o.content, children: t.content })
|
|
116
|
+
] }, t.id);
|
|
117
|
+
})
|
|
118
|
+
] }) });
|
|
119
|
+
};
|
|
120
|
+
export {
|
|
121
|
+
ut as Stepper
|
|
122
|
+
};
|
|
@@ -233,4 +233,10 @@ export declare const variables_dark: {
|
|
|
233
233
|
'--carrousel-0-gradient': string;
|
|
234
234
|
'--carrousel-100-gradient': string;
|
|
235
235
|
'--carrousel-card-img-title': string;
|
|
236
|
+
'--gradient-backgroundcard-100': string;
|
|
237
|
+
'--gradient-backgroundcard-0': string;
|
|
238
|
+
'--flow-point-line-active': string;
|
|
239
|
+
'--flow-point-line-inactive': string;
|
|
240
|
+
'--flow-gradient-light': string;
|
|
241
|
+
'--flow-gradient-dark': string;
|
|
236
242
|
};
|
|
@@ -232,7 +232,13 @@ const r = {
|
|
|
232
232
|
"--spinner-icons": "var(--general-text-icons)",
|
|
233
233
|
"--carrousel-0-gradient": "#2F2B37",
|
|
234
234
|
"--carrousel-100-gradient": "var(--background-primary)",
|
|
235
|
-
"--carrousel-card-img-title": "var(--color-gray-trans-100)"
|
|
235
|
+
"--carrousel-card-img-title": "var(--color-gray-trans-100)",
|
|
236
|
+
"--gradient-backgroundcard-100": "var(--color-light-10)",
|
|
237
|
+
"--gradient-backgroundcard-0": "var(--color-light-0)",
|
|
238
|
+
"--flow-point-line-active": "var(--color-light-100)",
|
|
239
|
+
"--flow-point-line-inactive": "var(--color-light-30)",
|
|
240
|
+
"--flow-gradient-light": "var(--color-light-20)",
|
|
241
|
+
"--flow-gradient-dark": "var(--color-light-100)"
|
|
236
242
|
};
|
|
237
243
|
export {
|
|
238
244
|
r as variables_dark
|
|
@@ -233,4 +233,10 @@ export declare const variables_light: {
|
|
|
233
233
|
'--carrousel-0-gradient': string;
|
|
234
234
|
'--carrousel-100-gradient': string;
|
|
235
235
|
'--carrousel-card-img-title': string;
|
|
236
|
+
'--gradient-backgroundcard-100': string;
|
|
237
|
+
'--gradient-backgroundcard-0': string;
|
|
238
|
+
'--flow-point-line-active': string;
|
|
239
|
+
'--flow-point-line-inactive': string;
|
|
240
|
+
'--flow-gradient-light': string;
|
|
241
|
+
'--flow-gradient-dark': string;
|
|
236
242
|
};
|
|
@@ -232,7 +232,13 @@ const r = {
|
|
|
232
232
|
"--spinner-icons": "var(--color-purple-dark-900)",
|
|
233
233
|
"--carrousel-0-gradient": "#FFFFFF",
|
|
234
234
|
"--carrousel-100-gradient": "var(--background-primary)",
|
|
235
|
-
"--carrousel-card-img-title": "var(--color-gray-trans-100)"
|
|
235
|
+
"--carrousel-card-img-title": "var(--color-gray-trans-100)",
|
|
236
|
+
"--gradient-backgroundcard-100": "var(--color-sable-trans-20)",
|
|
237
|
+
"--gradient-backgroundcard-0": "var(--color-sable-trans-0)",
|
|
238
|
+
"--flow-point-line-active": "var(--color-purple-dark-900)",
|
|
239
|
+
"--flow-point-line-inactive": "var(--color-gray-trans-70)",
|
|
240
|
+
"--flow-gradient-light": "var(--color-gray-trans-70)",
|
|
241
|
+
"--flow-gradient-dark": "var(--color-purple-dark-900)"
|
|
236
242
|
};
|
|
237
243
|
export {
|
|
238
244
|
r as variables_light
|
package/dist/main.d.ts
CHANGED
|
@@ -33,4 +33,5 @@ export { DragAndDrop } from './components/drag-and-drop/DragAndDrop';
|
|
|
33
33
|
export { Loading } from './components/loading/Loading';
|
|
34
34
|
export { Carousel } from './components/carousel/Carousel';
|
|
35
35
|
export { FadeCarousel } from './components/carousel/FadeCarousel';
|
|
36
|
+
export { Stepper } from './components/stepper/Stepper';
|
|
36
37
|
export { ThemeProvider, useTheme } from './components/theme/ThemeContext';
|
package/dist/main.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { Button as t } from "./components/button/Button.js";
|
|
2
|
-
import { ButtonControlledScroll as
|
|
2
|
+
import { ButtonControlledScroll as m } from "./components/buttonControledScroll/ButtonControlledScroll.js";
|
|
3
3
|
import { Input as f } from "./components/input/Input.js";
|
|
4
4
|
import { Tabs as a } from "./components/tabs/Tabs.js";
|
|
5
5
|
import { IconButton as d } from "./components/icon-button/IconButton.js";
|
|
6
6
|
import { Tag as c } from "./components/tag/Tag.js";
|
|
7
7
|
import { Title as u } from "./components/title/Title.js";
|
|
8
|
-
import { TagCounter as
|
|
9
|
-
import { Checkbox as
|
|
8
|
+
import { TagCounter as T } from "./components/tag-counter/TagCounter.js";
|
|
9
|
+
import { Checkbox as I } from "./components/checkbox/Checkbox.js";
|
|
10
10
|
import { Tooltip as g } from "./components/tooltip/Tooltip.js";
|
|
11
11
|
import { Select as h } from "./components/select/Select.js";
|
|
12
12
|
import { Calendar as B } from "./components/calendar/Calendar.js";
|
|
@@ -26,27 +26,28 @@ import { SidePanel as Z } from "./components/panel/side-panel/SidePanel.js";
|
|
|
26
26
|
import { SidePanelHeader as $ } from "./components/panel/side-panel-header/SidePanelHeader.js";
|
|
27
27
|
import { InputLabel as ro } from "./components/input-label/InputLabel.js";
|
|
28
28
|
import { EditableField as to } from "./components/editable-field/EditableField.js";
|
|
29
|
-
import { EditableSelect as
|
|
29
|
+
import { EditableSelect as mo } from "./components/editable-select/EditableSelect.js";
|
|
30
30
|
import { Toast as fo } from "./components/toast/Toast.js";
|
|
31
31
|
import { DragAndDrop as ao } from "./components/drag-and-drop/DragAndDrop.js";
|
|
32
32
|
import { Loading as io } from "./components/loading/Loading.js";
|
|
33
33
|
import { Carousel as so } from "./components/carousel/Carousel.js";
|
|
34
|
-
import { FadeCarousel as
|
|
35
|
-
import {
|
|
34
|
+
import { FadeCarousel as So } from "./components/carousel/FadeCarousel.js";
|
|
35
|
+
import { Stepper as Co } from "./components/stepper/Stepper.js";
|
|
36
|
+
import { ThemeProvider as bo, useTheme as go } from "./components/theme/ThemeContext.js";
|
|
36
37
|
import './styles/Size.css';/* empty css */
|
|
37
38
|
export {
|
|
38
39
|
M as Accordion,
|
|
39
40
|
D as AccordionItem,
|
|
40
41
|
t as Button,
|
|
41
|
-
|
|
42
|
+
m as ButtonControlledScroll,
|
|
42
43
|
B as Calendar,
|
|
43
44
|
N as Card,
|
|
44
45
|
so as Carousel,
|
|
45
|
-
|
|
46
|
+
I as Checkbox,
|
|
46
47
|
ao as DragAndDrop,
|
|
47
48
|
to as EditableField,
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
mo as EditableSelect,
|
|
50
|
+
So as FadeCarousel,
|
|
50
51
|
v as Icon,
|
|
51
52
|
d as IconButton,
|
|
52
53
|
f as Input,
|
|
@@ -62,13 +63,14 @@ export {
|
|
|
62
63
|
z as SelectMultiItems,
|
|
63
64
|
Z as SidePanel,
|
|
64
65
|
$ as SidePanelHeader,
|
|
66
|
+
Co as Stepper,
|
|
65
67
|
X as Switch,
|
|
66
68
|
a as Tabs,
|
|
67
69
|
c as Tag,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
T as TagCounter,
|
|
71
|
+
bo as ThemeProvider,
|
|
70
72
|
u as Title,
|
|
71
73
|
fo as Toast,
|
|
72
74
|
g as Tooltip,
|
|
73
|
-
|
|
75
|
+
go as useTheme
|
|
74
76
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._wrapper_187j3_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_187j3_35{position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs-3)}._row_187j3_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;column-gap:var(--spacing-xs-3);align-items:start}._connectorAbs_187j3_50{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_187j3_60{background:var(--flow-point-line-active)}._connectorGradient_187j3_64{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_187j3_69{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_187j3_75{margin-top:.625rem;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;position:relative;z-index:1}._dotButtonDisabled_187j3_90{cursor:default;opacity:.5}._dotOuter_187j3_96{display:flex;align-items:center;justify-content:center;border-radius:999px}._dotInner_187j3_103{border-radius:999px}._dotButton--upcoming_187j3_108 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_187j3_108 ._dotInner_187j3_103{display:none}._dotButton--active_187j3_120 ._dotOuter_187j3_96{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_187j3_120 ._dotInner_187j3_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_187j3_142 ._dotOuter_187j3_96{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_187j3_142 ._dotInner_187j3_103{display:none}._dotButton--disabled_187j3_153 ._dotOuter_187j3_96{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_187j3_153 ._dotInner_187j3_103{display:none}
|