@situaction/traq-ui-ste 1.1.9 → 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/tag/Tag.js +39 -43
- package/dist/styles/Accordion.css +1 -1
- package/dist/styles/ButtonControlledScroll.css +1 -0
- 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,58 +1,54 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useEffect as
|
|
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
|
-
label:
|
|
16
|
-
flexHorizontalCenter:
|
|
17
|
-
flexHorizontal:
|
|
18
|
-
},
|
|
19
|
-
label:
|
|
20
|
-
color:
|
|
21
|
-
deletable:
|
|
22
|
-
size:
|
|
23
|
-
children:
|
|
1
|
+
import { jsxs as c, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as d } from "react";
|
|
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,
|
|
20
|
+
color: e,
|
|
21
|
+
deletable: o = !1,
|
|
22
|
+
size: l = "m",
|
|
23
|
+
children: i,
|
|
24
24
|
onClick: r
|
|
25
25
|
}) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, [
|
|
26
|
+
d(() => {
|
|
27
|
+
e && !s.includes(e) && console.warn(`Warning: The color "${e}" is not a valid option. Expected one of: ${s.join(", ")}.`);
|
|
28
|
+
}, [e]);
|
|
29
29
|
const _ = [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
t.tag,
|
|
31
|
+
i && !n && t[`tag-size-${l}-round`],
|
|
32
|
+
t[`tag-size-${l}`],
|
|
33
|
+
t.flexHorizontalCenter
|
|
34
34
|
].join(" "), g = {
|
|
35
|
-
"--dynamic-background":
|
|
36
|
-
"--dynamic-color-text":
|
|
37
|
-
}, c = {
|
|
38
|
-
color: t ? `var(--color${t}-950)` : "var(--color-blue-situaction-950)"
|
|
35
|
+
"--dynamic-background": e && s.includes(e) ? `var(--color-${e}-200)` : "var(--color-blue-situaction-200)",
|
|
36
|
+
"--dynamic-color-text": e && s.includes(e) ? `var(--color-${e}-950)` : "var(--color-blue-situaction-950)"
|
|
39
37
|
};
|
|
40
|
-
return /* @__PURE__ */
|
|
38
|
+
return /* @__PURE__ */ c(
|
|
41
39
|
"div",
|
|
42
40
|
{
|
|
43
41
|
className: _,
|
|
44
42
|
style: g,
|
|
45
43
|
children: [
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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(
|
|
49
47
|
"svg",
|
|
50
48
|
{
|
|
51
|
-
style: c,
|
|
52
49
|
xmlns: "http://www.w3.org/2000/svg",
|
|
53
|
-
width: "
|
|
54
|
-
height: "
|
|
55
|
-
fill: "currentColor",
|
|
50
|
+
width: "10",
|
|
51
|
+
height: "10",
|
|
56
52
|
viewBox: "0 0 256 256",
|
|
57
53
|
children: /* @__PURE__ */ a(
|
|
58
54
|
"path",
|
|
@@ -67,5 +63,5 @@ import '../../styles/Tag.css';const v = "_tag_19tve_6", m = "_label_19tve_63", x
|
|
|
67
63
|
);
|
|
68
64
|
};
|
|
69
65
|
export {
|
|
70
|
-
|
|
66
|
+
f as Tag
|
|
71
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/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}
|