@situaction/traq-ui-ste 1.2.24 → 1.2.26
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 +33 -0
- package/dist/components/stepper/Stepper.js +136 -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,33 @@
|
|
|
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
|
+
/** If false, render only the dots/connectors (no item.content). */
|
|
28
|
+
showContent?: boolean;
|
|
29
|
+
/** Optional accessible label for each dot. */
|
|
30
|
+
getDotAriaLabel?: (item: StepITem, index: number, status: StepStatus) => string;
|
|
31
|
+
}
|
|
32
|
+
/** Stepper layout: dots + absolute connectors between each dot */
|
|
33
|
+
export declare const Stepper: FC<StepperProps>;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { jsx as _, jsxs as E } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as h, useRef as G, useState as W, useLayoutEffect as X } from "react";
|
|
3
|
+
import '../../styles/Stepper.css';const Z = "_wrapper_1fl3r_30", L = "_steps_1fl3r_35", tt = "_row_1fl3r_42", et = "_connectorAbs_1fl3r_50", nt = "_connectorProgress_1fl3r_60", ot = "_connectorGradient_1fl3r_64", rt = "_connectorDefault_1fl3r_69", st = "_dotButton_1fl3r_75", ct = "_dotButtonDisabled_1fl3r_90", dt = "_dotOuter_1fl3r_96", it = "_dotInner_1fl3r_103", at = "_rowNoContent_1fl3r_165", lt = "_content_1fl3r_170", o = {
|
|
4
|
+
wrapper: Z,
|
|
5
|
+
steps: L,
|
|
6
|
+
row: tt,
|
|
7
|
+
connectorAbs: et,
|
|
8
|
+
connectorProgress: nt,
|
|
9
|
+
connectorGradient: ot,
|
|
10
|
+
connectorDefault: rt,
|
|
11
|
+
dotButton: st,
|
|
12
|
+
dotButtonDisabled: ct,
|
|
13
|
+
dotOuter: dt,
|
|
14
|
+
dotInner: it,
|
|
15
|
+
"dotButton--upcoming": "_dotButton--upcoming_1fl3r_108",
|
|
16
|
+
"dotButton--active": "_dotButton--active_1fl3r_120",
|
|
17
|
+
"dotButton--completed": "_dotButton--completed_1fl3r_142",
|
|
18
|
+
"dotButton--disabled": "_dotButton--disabled_1fl3r_153",
|
|
19
|
+
rowNoContent: at,
|
|
20
|
+
content: lt
|
|
21
|
+
}, ut = (n, d) => {
|
|
22
|
+
if (n === d) return !0;
|
|
23
|
+
if (n.length !== d.length) return !1;
|
|
24
|
+
for (let u = 0; u < n.length; u++) {
|
|
25
|
+
const f = n[u], i = d[u];
|
|
26
|
+
if (f.key !== i.key || f.leftPx !== i.leftPx || f.topPx !== i.topPx || f.heightPx !== i.heightPx || f.variant !== i.variant)
|
|
27
|
+
return !1;
|
|
28
|
+
}
|
|
29
|
+
return !0;
|
|
30
|
+
}, _t = ({
|
|
31
|
+
items: n,
|
|
32
|
+
onDotClick: d,
|
|
33
|
+
dotOffsetPx: u = 18,
|
|
34
|
+
dotsClickable: f = !0,
|
|
35
|
+
activeId: i,
|
|
36
|
+
autoStatusFromActive: P = !0,
|
|
37
|
+
disabledIds: m = [],
|
|
38
|
+
showContent: y = !0,
|
|
39
|
+
getDotAriaLabel: w
|
|
40
|
+
}) => {
|
|
41
|
+
const I = h(
|
|
42
|
+
() => ({ "--flowline-dot-offset": `${u}px` }),
|
|
43
|
+
[u]
|
|
44
|
+
), C = h(() => m.join("|"), [m]), B = h(() => {
|
|
45
|
+
var l, s;
|
|
46
|
+
const t = new Set(m), r = i ?? ((l = n.find((e) => e.status !== "disabled" && !t.has(e.id))) == null ? void 0 : l.id) ?? ((s = n[0]) == null ? void 0 : s.id), a = n.findIndex((e) => e.id === r);
|
|
47
|
+
return n.map((e, p) => e.status === "disabled" || t.has(e.id) ? "disabled" : P ? p < a ? "completed" : p === a ? "active" : "upcoming" : e.status ?? "upcoming");
|
|
48
|
+
}, [n, i, P, C]), Y = h(() => B.join("|"), [B]), z = h(() => n.map((t) => t.id).join("|"), [n]), N = G(null), x = G(/* @__PURE__ */ new Map()), K = h(() => (t) => (r) => {
|
|
49
|
+
x.current.set(t, r);
|
|
50
|
+
}, []), [q, D] = W([]);
|
|
51
|
+
return X(() => {
|
|
52
|
+
const t = N.current;
|
|
53
|
+
if (!t) return;
|
|
54
|
+
let r = null;
|
|
55
|
+
const a = () => {
|
|
56
|
+
const e = t.getBoundingClientRect(), p = [], v = n.map((c) => c.id);
|
|
57
|
+
for (let c = 0; c < v.length - 1; c++) {
|
|
58
|
+
const R = v[c], j = v[c + 1], O = x.current.get(R), $ = x.current.get(j);
|
|
59
|
+
if (!O || !$) continue;
|
|
60
|
+
const g = O.getBoundingClientRect(), b = $.getBoundingClientRect(), k = Math.round(g.left + g.width / 2 - e.left), F = g.top + g.height / 2 - e.top, H = b.top + b.height / 2 - e.top, J = g.height / 2, Q = b.height / 2, A = 2, M = Math.round(F + J + A), T = Math.round(H - Q - A), U = Math.max(0, T - M), S = B[c], V = S === "completed" ? "progress" : S === "active" ? "gradient" : "default";
|
|
61
|
+
p.push({
|
|
62
|
+
key: `${R}__${j}`,
|
|
63
|
+
leftPx: k,
|
|
64
|
+
topPx: M,
|
|
65
|
+
heightPx: U,
|
|
66
|
+
variant: V
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
D((c) => ut(c, p) ? c : p);
|
|
70
|
+
}, l = () => {
|
|
71
|
+
r == null && (r = requestAnimationFrame(() => {
|
|
72
|
+
r = null, a();
|
|
73
|
+
}));
|
|
74
|
+
};
|
|
75
|
+
l();
|
|
76
|
+
const s = new ResizeObserver(l);
|
|
77
|
+
return s.observe(t), x.current.forEach((e) => {
|
|
78
|
+
e && s.observe(e);
|
|
79
|
+
}), window.addEventListener("resize", l), () => {
|
|
80
|
+
r != null && cancelAnimationFrame(r), s.disconnect(), window.removeEventListener("resize", l);
|
|
81
|
+
};
|
|
82
|
+
}, [z, Y]), /* @__PURE__ */ _("div", { className: o.wrapper, style: I, children: /* @__PURE__ */ E("div", { ref: N, className: o.steps, children: [
|
|
83
|
+
q.map((t) => /* @__PURE__ */ _(
|
|
84
|
+
"span",
|
|
85
|
+
{
|
|
86
|
+
className: [
|
|
87
|
+
o.connectorAbs,
|
|
88
|
+
t.variant === "progress" ? o.connectorProgress : t.variant === "gradient" ? o.connectorGradient : o.connectorDefault
|
|
89
|
+
].join(" "),
|
|
90
|
+
style: {
|
|
91
|
+
left: `${t.leftPx}px`,
|
|
92
|
+
top: `${t.topPx}px`,
|
|
93
|
+
height: `${t.heightPx}px`
|
|
94
|
+
},
|
|
95
|
+
"aria-hidden": "true"
|
|
96
|
+
},
|
|
97
|
+
t.key
|
|
98
|
+
)),
|
|
99
|
+
n.map((t, r) => {
|
|
100
|
+
const a = B[r], s = f && !(a === "disabled") && !!d;
|
|
101
|
+
return /* @__PURE__ */ E(
|
|
102
|
+
"div",
|
|
103
|
+
{
|
|
104
|
+
className: [
|
|
105
|
+
o.row,
|
|
106
|
+
y ? "" : o.rowNoContent
|
|
107
|
+
].filter(Boolean).join(" "),
|
|
108
|
+
children: [
|
|
109
|
+
/* @__PURE__ */ _(
|
|
110
|
+
"button",
|
|
111
|
+
{
|
|
112
|
+
type: "button",
|
|
113
|
+
className: [
|
|
114
|
+
o.dotButton,
|
|
115
|
+
o[`dotButton--${a}`],
|
|
116
|
+
s ? "" : o.dotButtonDisabled
|
|
117
|
+
].filter(Boolean).join(" "),
|
|
118
|
+
onClick: () => {
|
|
119
|
+
s && (d == null || d(t.id));
|
|
120
|
+
},
|
|
121
|
+
"aria-label": (w == null ? void 0 : w(t, r, a)) ?? `Open step ${t.id}`,
|
|
122
|
+
disabled: !s,
|
|
123
|
+
children: /* @__PURE__ */ _("span", { ref: K(t.id), className: o.dotOuter, children: /* @__PURE__ */ _("span", { className: o.dotInner }) })
|
|
124
|
+
}
|
|
125
|
+
),
|
|
126
|
+
y ? /* @__PURE__ */ _("div", { className: o.content, children: t.content }) : null
|
|
127
|
+
]
|
|
128
|
+
},
|
|
129
|
+
t.id
|
|
130
|
+
);
|
|
131
|
+
})
|
|
132
|
+
] }) });
|
|
133
|
+
};
|
|
134
|
+
export {
|
|
135
|
+
_t as Stepper
|
|
136
|
+
};
|
|
@@ -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_1fl3r_30{--stepper-left-col: 20px;--stepper-dot-button: 24px}._steps_1fl3r_35{position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs-3)}._row_1fl3r_42{display:grid;grid-template-columns:var(--stepper-left-col) 1fr;column-gap:var(--spacing-xs-3);align-items:start}._connectorAbs_1fl3r_50{position:absolute;width:1px;transform:translate(-50%);border-radius:999px;pointer-events:none;z-index:0}._connectorProgress_1fl3r_60{background:var(--flow-point-line-active)}._connectorGradient_1fl3r_64{background:linear-gradient(to bottom,var(--flow-point-line-active),var(--flow-point-line-inactive))}._connectorDefault_1fl3r_69{background-image:linear-gradient(to bottom,var(--flow-point-line-inactive) 50%,transparent 0);background-size:2px 8px;background-repeat:repeat-y}._dotButton_1fl3r_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_1fl3r_90{cursor:default;opacity:.5}._dotOuter_1fl3r_96{display:flex;align-items:center;justify-content:center;border-radius:999px}._dotInner_1fl3r_103{border-radius:999px}._dotButton--upcoming_1fl3r_108 ._dotOuter_1fl3r_96{width:10px;height:10px;border:none;background:var(--flow-point-line-inactive)}._dotButton--upcoming_1fl3r_108 ._dotInner_1fl3r_103{display:none}._dotButton--active_1fl3r_120 ._dotOuter_1fl3r_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_1fl3r_120 ._dotInner_1fl3r_103{width:10px;height:10px;border-radius:999px;background:var(--flow-point-line-active);display:block}._dotButton--completed_1fl3r_142 ._dotOuter_1fl3r_96{width:10px;height:10px;background:var(--flow-point-line-active)}._dotButton--completed_1fl3r_142 ._dotInner_1fl3r_103{display:none}._dotButton--disabled_1fl3r_153 ._dotOuter_1fl3r_96{width:10px;height:10px;border:none;background:var(--general-border-window);opacity:.6}._dotButton--disabled_1fl3r_153 ._dotInner_1fl3r_103{display:none}._rowNoContent_1fl3r_165{grid-template-columns:var(--stepper-left-col);column-gap:0}._rowNoContent_1fl3r_165 ._content_1fl3r_170{display:none}
|