@situaction/traq-ui-ste 1.1.7 → 1.1.9
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.
|
@@ -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_1s28g_6", d = {
|
|
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: d.accordion, children: n.map((o, e) => /* @__PURE__ */ c(
|
|
6
6
|
i,
|
|
7
7
|
{
|
|
8
8
|
header: o.header,
|
|
@@ -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,60 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { IconButton as
|
|
4
|
-
import '../../styles/Tag.css';const m = "
|
|
5
|
-
tag:
|
|
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-
|
|
1
|
+
import { jsxs as d, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as u } from "react";
|
|
3
|
+
import { IconButton as z } from "../icon-button/IconButton.js";
|
|
4
|
+
import '../../styles/Tag.css';const v = "_tag_19tve_6", m = "_label_19tve_63", x = "_flexHorizontalCenter_19tve_67", f = "_flexHorizontal_19tve_67", e = {
|
|
5
|
+
tag: v,
|
|
6
|
+
"tag-children": "_tag-children_19tve_16",
|
|
7
|
+
"tag-size-xl": "_tag-size-xl_19tve_23",
|
|
8
|
+
"tag-size-xl-round": "_tag-size-xl-round_19tve_27",
|
|
9
|
+
"tag-size-l": "_tag-size-l_19tve_33",
|
|
10
|
+
"tag-size-l-round": "_tag-size-l-round_19tve_37",
|
|
11
|
+
"tag-size-m": "_tag-size-m_19tve_43",
|
|
12
|
+
"tag-size-m-round": "_tag-size-m-round_19tve_47",
|
|
13
|
+
"tag-size-s": "_tag-size-s_19tve_53",
|
|
14
|
+
"tag-size-s-round": "_tag-size-s-round_19tve_57",
|
|
15
|
+
label: m,
|
|
15
16
|
flexHorizontalCenter: x,
|
|
16
17
|
flexHorizontal: f
|
|
17
|
-
},
|
|
18
|
-
label:
|
|
19
|
-
color:
|
|
20
|
-
deletable:
|
|
21
|
-
size:
|
|
22
|
-
children:
|
|
18
|
+
}, o = ["light", "dark", "grey", "blue-grey", "blue", "blue-situaction", "purple", "pink", "gold", "brown", "emerald"], $ = ({
|
|
19
|
+
label: l,
|
|
20
|
+
color: t,
|
|
21
|
+
deletable: s = !1,
|
|
22
|
+
size: i = "m",
|
|
23
|
+
children: n,
|
|
23
24
|
onClick: r
|
|
24
25
|
}) => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, [
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
u(() => {
|
|
27
|
+
t && !o.includes(t) && console.warn(`Warning: The color "${t}" is not a valid option. Expected one of: ${o.join(", ")}.`);
|
|
28
|
+
}, [t]);
|
|
29
|
+
const _ = [
|
|
30
|
+
e.tag,
|
|
31
|
+
n && !l && e[`tag-size-${i}-round`],
|
|
32
|
+
e[`tag-size-${i}`],
|
|
33
|
+
e.flexHorizontalCenter
|
|
33
34
|
].join(" "), g = {
|
|
34
|
-
"--dynamic-background":
|
|
35
|
-
"--dynamic-color-text":
|
|
36
|
-
},
|
|
37
|
-
color:
|
|
35
|
+
"--dynamic-background": t && o.includes(t) ? `var(--color-${t}-200)` : "var(--color-blue-situaction-200)",
|
|
36
|
+
"--dynamic-color-text": t && o.includes(t) ? `var(--color-${t}-950)` : "var(--color-blue-situaction-950)"
|
|
37
|
+
}, c = {
|
|
38
|
+
color: t ? `var(--color${t}-950)` : "var(--color-blue-situaction-950)"
|
|
38
39
|
};
|
|
39
|
-
return /* @__PURE__ */
|
|
40
|
+
return /* @__PURE__ */ d(
|
|
40
41
|
"div",
|
|
41
42
|
{
|
|
42
|
-
className:
|
|
43
|
+
className: _,
|
|
43
44
|
style: g,
|
|
44
45
|
children: [
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
n && /* @__PURE__ */ a("div", { className: `${e.flexHorizontalCenter} ${e["tag-children"]}`, children: n }),
|
|
47
|
+
l && /* @__PURE__ */ a("label", { className: `${e.flexHorizontal} ${e.label}`, children: l }),
|
|
48
|
+
s && /* @__PURE__ */ a(z, { mode: "ghost", size: "s", onClick: () => r, children: /* @__PURE__ */ a(
|
|
48
49
|
"svg",
|
|
49
50
|
{
|
|
50
|
-
style:
|
|
51
|
+
style: c,
|
|
51
52
|
xmlns: "http://www.w3.org/2000/svg",
|
|
52
53
|
width: "9",
|
|
53
54
|
height: "9",
|
|
54
55
|
fill: "currentColor",
|
|
55
56
|
viewBox: "0 0 256 256",
|
|
56
|
-
children: /* @__PURE__ */
|
|
57
|
+
children: /* @__PURE__ */ a(
|
|
57
58
|
"path",
|
|
58
59
|
{
|
|
59
60
|
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 +67,5 @@ import '../../styles/Tag.css';const m = "_tag_ez0so_6", x = "_flexHorizontalCent
|
|
|
66
67
|
);
|
|
67
68
|
};
|
|
68
69
|
export {
|
|
69
|
-
|
|
70
|
+
$ as Tag
|
|
70
71
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_1s28g_6{overflow:visible;border-radius:.375rem;width:100%;overflow-y:auto;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:.625rem}
|
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_19tve_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-children_19tve_16{color:var(--dynamic-color-text);border-radius:50px;min-width:16px;min-height:16px;aspect-ratio:1/1}._tag-size-xl_19tve_23{padding:.5rem .75rem;font-size:1.125em}._tag-size-xl-round_19tve_27{padding:.5rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-l_19tve_33{padding:.375rem .625rem;font-size:1em}._tag-size-l-round_19tve_37{padding:.375rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-m_19tve_43{padding:.25rem .5rem;font-size:.875em}._tag-size-m-round_19tve_47{padding:.25rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag-size-s_19tve_53{padding:.1875rem .5rem;font-size:.75em}._tag-size-s-round_19tve_57{padding:.125rem;min-width:12px;min-height:12px;aspect-ratio:1/1}._tag_19tve_6 ._label_19tve_63{white-space:nowrap}._flexHorizontalCenter_19tve_67{display:flex;justify-content:center;align-items:center;flex-direction:row}._flexHorizontal_19tve_67{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
|