@situaction/traq-ui-ste 1.1.8 → 1.1.10
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/dist/components/accordion/Accordion.js +2 -2
- package/dist/components/buttonControledScroll/ButtonControlledScroll.d.ts +8 -0
- package/dist/components/buttonControledScroll/ButtonControlledScroll.js +31 -0
- package/dist/components/checkbox/Checkbox.js +29 -28
- package/dist/components/tag/Tag.js +31 -34
- package/dist/styles/Accordion.css +1 -1
- package/dist/styles/ButtonControlledScroll.css +1 -0
- package/dist/styles/Checkbox.css +1 -1
- package/dist/styles/Tag.css +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { AccordionItem as i } from "./item/AccordionItem.js";
|
|
3
|
-
import '../../styles/Accordion.css';const t = "
|
|
3
|
+
import '../../styles/Accordion.css';const t = "_accordion_hz3a1_6", a = {
|
|
4
4
|
accordion: t
|
|
5
|
-
}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className:
|
|
5
|
+
}, l = ({ items: n, type: r = "block" }) => /* @__PURE__ */ c("div", { className: a.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
|
|
6
6
|
i,
|
|
7
7
|
{
|
|
8
8
|
header: o.header,
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsxs as d, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as m, useState as s, useEffect as p } from "react";
|
|
3
|
+
import '../../styles/ButtonControlledScroll.css';const R = "_wrapper_wftna_1", S = "_container_wftna_11", w = "_btn_wftna_22", C = "_btnLeft_wftna_39", N = "_btnRight_wftna_44", n = {
|
|
4
|
+
wrapper: R,
|
|
5
|
+
container: S,
|
|
6
|
+
btn: w,
|
|
7
|
+
btnLeft: C,
|
|
8
|
+
btnRight: N
|
|
9
|
+
}, $ = ({ items: a, iconLeft: i, iconRight: f }) => {
|
|
10
|
+
const e = m(null), [_, b] = s(!1), [h, u] = s(!1), c = () => {
|
|
11
|
+
const t = e.current;
|
|
12
|
+
t && (b(t.scrollLeft > 0), u(t.scrollLeft + t.clientWidth < t.scrollWidth));
|
|
13
|
+
}, o = (t) => {
|
|
14
|
+
const r = e.current;
|
|
15
|
+
if (!r) return;
|
|
16
|
+
const L = t === "left" ? -100 : 100;
|
|
17
|
+
r.scrollBy({ left: L, behavior: "smooth" });
|
|
18
|
+
};
|
|
19
|
+
return p(() => {
|
|
20
|
+
const t = e.current;
|
|
21
|
+
if (t)
|
|
22
|
+
return c(), t.addEventListener("scroll", c), () => t.removeEventListener("scroll", c);
|
|
23
|
+
}, []), /* @__PURE__ */ d("div", { className: `${n.wrapper}`, children: [
|
|
24
|
+
_ && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnLeft}`, onClick: () => o("left"), children: i }),
|
|
25
|
+
/* @__PURE__ */ l("div", { className: `${n.container}`, ref: e, children: a.map((t, r) => /* @__PURE__ */ l("div", { className: n.item, children: t }, r)) }),
|
|
26
|
+
h && /* @__PURE__ */ l("button", { className: `${n.btn} ${n.btnRight}`, onClick: () => o("right"), children: f })
|
|
27
|
+
] });
|
|
28
|
+
};
|
|
29
|
+
export {
|
|
30
|
+
$ as ButtonControlledScroll
|
|
31
|
+
};
|
|
@@ -1,44 +1,45 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as d, useEffect as
|
|
3
|
-
import '../../styles/Checkbox.css';const
|
|
4
|
-
checkbox:
|
|
5
|
-
checked:
|
|
6
|
-
disabled:
|
|
7
|
-
|
|
8
|
-
"checkbox-size-
|
|
9
|
-
"checkbox-size-
|
|
10
|
-
"checkbox-size-
|
|
11
|
-
"checkbox-size-
|
|
12
|
-
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useState as d, useEffect as b } from "react";
|
|
3
|
+
import '../../styles/Checkbox.css';const a = "_checkbox_12isy_23", r = "_checked_12isy_30", m = "_disabled_12isy_36", z = "_noEvents_12isy_44", e = {
|
|
4
|
+
checkbox: a,
|
|
5
|
+
checked: r,
|
|
6
|
+
disabled: m,
|
|
7
|
+
noEvents: z,
|
|
8
|
+
"checkbox-size-xs": "_checkbox-size-xs_12isy_47",
|
|
9
|
+
"checkbox-size-s": "_checkbox-size-s_12isy_52",
|
|
10
|
+
"checkbox-size-m": "_checkbox-size-m_12isy_57",
|
|
11
|
+
"checkbox-size-l": "_checkbox-size-l_12isy_62",
|
|
12
|
+
"checkbox-size-xl": "_checkbox-size-xl_12isy_67"
|
|
13
|
+
}, v = ({
|
|
13
14
|
checked: c = !1,
|
|
14
|
-
icon:
|
|
15
|
+
icon: n = /* @__PURE__ */ s("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: /* @__PURE__ */ s("path", { d: "M2.66667 6.1L0.666667 4L0 4.7L2.66667 7.5L8 1.2L7.33333 0.5L2.66667 6.1Z", fill: "white" }) }),
|
|
15
16
|
size: l = "m",
|
|
16
|
-
disabled:
|
|
17
|
+
disabled: _ = !1,
|
|
17
18
|
onChange: i
|
|
18
19
|
}) => {
|
|
19
|
-
const [
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
const [o, t] = d(c);
|
|
21
|
+
b(() => {
|
|
22
|
+
t(c);
|
|
22
23
|
}, [c]);
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
h
|
|
26
|
-
},
|
|
24
|
+
const x = () => {
|
|
25
|
+
const h = !o;
|
|
26
|
+
t(h), i && i(h);
|
|
27
|
+
}, k = [
|
|
27
28
|
e.checkbox,
|
|
28
29
|
e[`checkbox-size-${l}`],
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
o && e.checked,
|
|
31
|
+
_ && e.disabled
|
|
31
32
|
].filter(Boolean).join(" ");
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ s(
|
|
33
34
|
"div",
|
|
34
35
|
{
|
|
35
36
|
"data-testid": "checkbox",
|
|
36
|
-
className:
|
|
37
|
-
onClick:
|
|
38
|
-
children:
|
|
37
|
+
className: k,
|
|
38
|
+
onClick: x,
|
|
39
|
+
children: o && /* @__PURE__ */ s("div", { className: e.noEvents, children: n })
|
|
39
40
|
}
|
|
40
41
|
);
|
|
41
42
|
};
|
|
42
43
|
export {
|
|
43
|
-
|
|
44
|
+
v as Checkbox
|
|
44
45
|
};
|
|
@@ -1,59 +1,56 @@
|
|
|
1
|
-
import { jsxs as c, jsx as
|
|
1
|
+
import { jsxs as c, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect as d } from "react";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"tag-children": "_tag-
|
|
7
|
-
"tag-size-xl": "_tag-size-
|
|
8
|
-
"tag-size-xl-round": "_tag-size-xl-
|
|
9
|
-
"tag-size-l": "_tag-size-
|
|
10
|
-
"tag-size-l-round": "_tag-size-l-
|
|
11
|
-
"tag-size-m": "_tag-size-
|
|
12
|
-
"tag-size-m-round": "_tag-size-m-
|
|
13
|
-
"tag-size-s": "_tag-size-
|
|
14
|
-
"tag-size-s-round": "_tag-size-s-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
3
|
+
import '../../styles/Tag.css';const z = "_tag_1yjvr_6", u = "_icon_1yjvr_16", v = "_label_1yjvr_68", y = "_flexHorizontalCenter_1yjvr_72", x = "_flexHorizontal_1yjvr_72", t = {
|
|
4
|
+
tag: z,
|
|
5
|
+
icon: u,
|
|
6
|
+
"tag-children": "_tag-children_1yjvr_21",
|
|
7
|
+
"tag-size-xl": "_tag-size-xl_1yjvr_28",
|
|
8
|
+
"tag-size-xl-round": "_tag-size-xl-round_1yjvr_32",
|
|
9
|
+
"tag-size-l": "_tag-size-l_1yjvr_38",
|
|
10
|
+
"tag-size-l-round": "_tag-size-l-round_1yjvr_42",
|
|
11
|
+
"tag-size-m": "_tag-size-m_1yjvr_48",
|
|
12
|
+
"tag-size-m-round": "_tag-size-m-round_1yjvr_52",
|
|
13
|
+
"tag-size-s": "_tag-size-s_1yjvr_58",
|
|
14
|
+
"tag-size-s-round": "_tag-size-s-round_1yjvr_62",
|
|
15
|
+
label: v,
|
|
16
|
+
flexHorizontalCenter: y,
|
|
17
|
+
flexHorizontal: x
|
|
18
|
+
}, s = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], f = ({
|
|
19
|
+
label: n,
|
|
19
20
|
color: e,
|
|
20
|
-
deletable:
|
|
21
|
-
size:
|
|
21
|
+
deletable: o = !1,
|
|
22
|
+
size: l = "m",
|
|
22
23
|
children: i,
|
|
23
24
|
onClick: r
|
|
24
25
|
}) => {
|
|
25
26
|
d(() => {
|
|
26
27
|
e && !s.includes(e) && console.warn(`Warning: The color "${e}" is not a valid option. Expected one of: ${s.join(", ")}.`);
|
|
27
28
|
}, [e]);
|
|
28
|
-
const
|
|
29
|
+
const _ = [
|
|
29
30
|
t.tag,
|
|
30
|
-
i && !
|
|
31
|
-
t[`tag-size-${
|
|
31
|
+
i && !n && t[`tag-size-${l}-round`],
|
|
32
|
+
t[`tag-size-${l}`],
|
|
32
33
|
t.flexHorizontalCenter
|
|
33
34
|
].join(" "), g = {
|
|
34
35
|
"--dynamic-background": e && s.includes(e) ? `var(--color-${e}-200)` : "var(--color-blue-situaction-200)",
|
|
35
36
|
"--dynamic-color-text": e && s.includes(e) ? `var(--color-${e}-950)` : "var(--color-blue-situaction-950)"
|
|
36
|
-
}, _ = {
|
|
37
|
-
color: e ? `var(--color${e}-950)` : "var(--color-blue-situaction-950)"
|
|
38
37
|
};
|
|
39
38
|
return /* @__PURE__ */ c(
|
|
40
39
|
"div",
|
|
41
40
|
{
|
|
42
|
-
className:
|
|
41
|
+
className: _,
|
|
43
42
|
style: g,
|
|
44
43
|
children: [
|
|
45
|
-
i && /* @__PURE__ */
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
i && /* @__PURE__ */ a("div", { className: `${t.flexHorizontalCenter} ${t["tag-children"]}`, children: i }),
|
|
45
|
+
n && /* @__PURE__ */ a("label", { className: `${t.flexHorizontal} ${t.label}`, children: n }),
|
|
46
|
+
o && /* @__PURE__ */ a("div", { className: t.icon, onClick: () => r == null ? void 0 : r(), children: /* @__PURE__ */ a(
|
|
48
47
|
"svg",
|
|
49
48
|
{
|
|
50
|
-
style: _,
|
|
51
49
|
xmlns: "http://www.w3.org/2000/svg",
|
|
52
|
-
width: "
|
|
53
|
-
height: "
|
|
54
|
-
fill: "currentColor",
|
|
50
|
+
width: "10",
|
|
51
|
+
height: "10",
|
|
55
52
|
viewBox: "0 0 256 256",
|
|
56
|
-
children: /* @__PURE__ */
|
|
53
|
+
children: /* @__PURE__ */ a(
|
|
57
54
|
"path",
|
|
58
55
|
{
|
|
59
56
|
d: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
|
|
@@ -66,5 +63,5 @@ import '../../styles/Tag.css';const m = "_tag_ez0so_6", x = "_flexHorizontalCent
|
|
|
66
63
|
);
|
|
67
64
|
};
|
|
68
65
|
export {
|
|
69
|
-
|
|
66
|
+
f as Tag
|
|
70
67
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_hz3a1_6{overflow:visible;border-radius:.375rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._wrapper_wftna_1{position:relative;display:flex;align-items:center;width:300px;-webkit-user-select:none;user-select:none}._wrapper_wftna_1 label{-webkit-user-select:none;user-select:none}._wrapper_wftna_1 ._container_wftna_11{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:10px;padding:10px;width:100%}._wrapper_wftna_1 ._container_wftna_11::-webkit-scrollbar{display:none}._wrapper_wftna_1 ._btn_wftna_22{transition:.3s;display:flex;justify-content:center;align-items:center;width:30px;height:30px;padding:var(--spacing-xs-5);border-radius:50%;border:1px solid var(--button-tertiary-default-border);background-color:var(--button-primary-default-icon);position:absolute;cursor:pointer}._wrapper_wftna_1 ._btn_wftna_22:hover{background-color:var(--background-tooltip)}._wrapper_wftna_1 ._btnLeft_wftna_39{left:3px;top:50%;transform:translateY(-50%)}._wrapper_wftna_1 ._btnRight_wftna_44{right:3px;top:50%;transform:translateY(-50%)}
|
package/dist/styles/Checkbox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._checkbox_12isy_23{cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid var(--checkbox-default-uncoched-default-stroke)}._checkbox_12isy_23._checked_12isy_30{background-color:var(--checkbox-default-coched-default-background)}._checkbox_12isy_23._checked_12isy_30 *{fill:var(--checkbox-default-coched-default-coche)}._checkbox_12isy_23._disabled_12isy_36{border:1px solid var(--checkbox-disabled-uncoched-default-hover-stroke);pointer-events:none}._checkbox_12isy_23._disabled_12isy_36._checked_12isy_30{border:1px solid transparent;background-color:var(--checkbox-disabled-coched-default-hover-background)}._checkbox_12isy_23 ._noEvents_12isy_44{pointer-events:none}._checkbox-size-xs_12isy_47{width:8px;height:8px;border-radius:.125rem}._checkbox-size-s_12isy_52{width:10px;height:10px;border-radius:.063rem}._checkbox-size-m_12isy_57{width:12px;height:12px;border-radius:.125rem}._checkbox-size-l_12isy_62{width:14px;height:14px;border-radius:.125rem}._checkbox-size-xl_12isy_67{width:16px;height:16px;border-radius:.125rem}
|
package/dist/styles/Tag.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tag_1yjvr_6{color:var(--dynamic-color-text);background-color:var(--dynamic-background);border-radius:50px;line-height:normal;gap:.25rem;font-weight:600;letter-spacing:.84px}._tag_1yjvr_6 ._icon_1yjvr_16{display:flex;cursor:pointer;fill:var(--dynamic-color-text)!important}._tag-children_1yjvr_21{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_1yjvr_28{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_1yjvr_32{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_1yjvr_38{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_1yjvr_42{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_1yjvr_48{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_1yjvr_52{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_1yjvr_58{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_1yjvr_62{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_1yjvr_6 ._label_1yjvr_68{white-space:nowrap}._flexHorizontalCenter_1yjvr_72{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_1yjvr_72{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|