@tpc-mare/mare-ui-components-react 0.1.24 → 0.1.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/dist/accordion/index.js +1 -1
- package/dist/banner/index.js +1 -1
- package/dist/button/index.js +1 -1
- package/dist/combobox/index.js +1 -1
- package/dist/confirm-dialog/index.js +1 -1
- package/dist/counter/index.js +1 -1
- package/dist/dialog/index.js +1 -1
- package/dist/drawer/index.js +1 -1
- package/dist/expandable-counter/index.js +1 -1
- package/dist/filter-chip-dropdown-single/index.js +1 -1
- package/dist/floating-action-button/index.js +1 -1
- package/dist/index/index.js +19 -19
- package/dist/message/index.js +1 -1
- package/dist/multi-select/index.js +1 -1
- package/dist/overlay-badge/index.js +1 -1
- package/dist/paginator/index.js +1 -1
- package/dist/segmented-control/index.js +1 -1
- package/dist/select-field/index.js +1 -1
- package/dist/shared/{Accordion-BLQ1mWZZ.js → Accordion-BSmOrxH6.js} +4 -4
- package/dist/shared/{Banner-B_4xUzqu.js → Banner-C4wLe6N0.js} +2 -2
- package/dist/shared/{Button-BDnOdO_d.js → Button-DwJ5RTfQ.js} +2 -5
- package/dist/shared/{Combobox-SkrEe5He.js → Combobox-CcmWgRYZ.js} +1 -0
- package/dist/shared/{ConfirmDialog-DBX-JpDu.js → ConfirmDialog-DLHY-c70.js} +1 -1
- package/dist/shared/{Counter-DRUUEj_u.js → Counter-DjIoe4h3.js} +1 -1
- package/dist/shared/{DialogHeader-DhmbjN0J.js → DialogHeader-M5Bfyxos.js} +1 -1
- package/dist/shared/{DrawerFooter-DoOWN-f3.js → DrawerFooter-B9-Vrgd3.js} +1 -1
- package/dist/shared/{ExpandableCounter-DkmezZIB.js → ExpandableCounter-DZxbdqRa.js} +2 -2
- package/dist/shared/FilterChipDropdownSingle-C7ahD-_3.js +138 -0
- package/dist/shared/{FloatingActionButton-DPWP3O5C.js → FloatingActionButton-D4FK6uSs.js} +1 -1
- package/dist/shared/{Message-D7kmscvR.js → Message-BNsFuQU1.js} +1 -1
- package/dist/shared/{MultiSelect-DtsCymNB.js → MultiSelect-Dowp0_FX.js} +57 -55
- package/dist/shared/OverlayBadge-DLskqll7.js +70 -0
- package/dist/shared/{Paginator-Bxe9nv_5.js → Paginator-DxZdCXSC.js} +2 -2
- package/dist/shared/SegmentedControl-Ct5ZLXpN.js +100 -0
- package/dist/shared/{SelectField-CvKaukCG.js → SelectField-B-g52vHx.js} +5 -5
- package/dist/shared/{Snackbar-CfFmZUci.js → Snackbar-CjTqCOaV.js} +1 -1
- package/dist/shared/{Switch-D6E2OmgE.js → Switch-DNCn0xjb.js} +3 -3
- package/dist/snackbar/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/switch/index.js +1 -1
- package/package.json +1 -1
- package/dist/shared/FilterChipDropdownSingle-4G5LDRCw.js +0 -135
- package/dist/shared/OverlayBadge-jHzuklUb.js +0 -60
- package/dist/shared/SegmentedControl-BpH7DANc.js +0 -94
|
@@ -6,36 +6,36 @@ import { P as Z } from "./ProgressSpinner-B-lrS-tu.js";
|
|
|
6
6
|
import { I as ee } from "./IconX-CpPADKjZ.js";
|
|
7
7
|
import { I as ae } from "./IconChevronDown-ev2ML7Ex.js";
|
|
8
8
|
import { I as re } from "./IconSearch-CgM6jEUh.js";
|
|
9
|
-
import { I as
|
|
9
|
+
import { I as p } from "./IconCheck-DzZA6b2U.js";
|
|
10
10
|
import { I as te } from "./IconMinus-fS_GL0Et.js";
|
|
11
11
|
const me = {
|
|
12
12
|
small: "mare:min-h-10",
|
|
13
13
|
medium: "mare:min-h-14"
|
|
14
|
-
}, le = (a) => `
|
|
15
|
-
mare:
|
|
14
|
+
}, le = "mare:relative mare:flex mare:items-center mare:w-full", ne = (a, t) => `
|
|
15
|
+
mare:w-full mare:flex mare:items-center mare:gap-2 mare:min-w-0 mare:cursor-pointer mare:text-left
|
|
16
16
|
${me[a]}
|
|
17
|
-
mare:
|
|
17
|
+
mare:pl-3 mare:py-2 ${t ? "mare:pr-14" : "mare:pr-8"}
|
|
18
18
|
mare:rounded-input mare:border mare:border-strong mare:bg-default
|
|
19
19
|
mare:text-default mare:tpc-typography-body-s
|
|
20
20
|
mare:ark-open:outline-solid mare:ark-open:outline-2 mare:ark-open:outline-accent mare:ark-open:-outline-offset-2
|
|
21
21
|
mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default mare:ark-disabled:cursor-not-allowed
|
|
22
22
|
mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
|
|
23
|
-
`,
|
|
23
|
+
`, se = "mare:absolute mare:right-3 mare:top-1/2 mare:-translate-y-1/2 mare:flex mare:items-center mare:gap-1 mare:pointer-events-none", oe = "mare:flex mare:flex-1 mare:flex-wrap mare:items-center mare:gap-1 mare:overflow-hidden mare:min-w-0", ie = "mare:flex-1 mare:truncate mare:text-left mare:data-[empty]:text-weak", ce = "mare:flex mare:items-center mare:shrink-0 mare:text-lg mare:transition-transform mare:ark-open:rotate-180 mare:text-default", de = "mare:pointer-events-auto mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:text-default mare:hover:text-weak", pe = "mare:tpc-typography-label-s mare:text-default mare:mb-1.5 mare:block", ue = `
|
|
24
24
|
mare:flex mare:flex-col mare:gap-1 mare:p-2
|
|
25
25
|
mare:rounded-input mare:border mare:border-default mare:bg-raised
|
|
26
26
|
mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
|
|
27
27
|
mare:max-h-72 mare:overflow-y-auto
|
|
28
28
|
mare:min-w-[var(--reference-width)]
|
|
29
29
|
mare:z-50
|
|
30
|
-
`,
|
|
30
|
+
`, fe = `
|
|
31
31
|
mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10 mare:shrink-0
|
|
32
32
|
mare:rounded-input mare:border mare:border-strong mare:bg-default
|
|
33
33
|
mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
|
|
34
|
-
`,
|
|
34
|
+
`, he = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:tpc-typography-body-s mare:placeholder:text-weak", xe = "mare:flex mare:items-center mare:text-weak", ge = "mare:flex mare:items-center mare:gap-2 mare:w-full mare:py-2 mare:px-2 mare:mb-1 mare:shrink-0 mare:rounded-menu-item mare:cursor-pointer mare:hover:bg-hover mare:tpc-typography-body-s mare:text-default", be = "mare:flex-auto mare:text-left", N = (a, t = !1) => `
|
|
35
35
|
mare:relative mare:flex mare:items-center mare:justify-center mare:shrink-0
|
|
36
36
|
mare:w-4.5 mare:h-4.5 mare:border-[1.5px] mare:rounded-checkbox mare:transition-colors mare:duration-150
|
|
37
37
|
${a || t ? "mare:bg-accent mare:border-accent" : "mare:border-strong mare:bg-transparent"}
|
|
38
|
-
`, g = "mare:w-3 mare:h-3 mare:text-on-accent",
|
|
38
|
+
`, g = "mare:w-3 mare:h-3 mare:text-on-accent", S = "mare:flex mare:items-center mare:text-accent", we = (a) => `
|
|
39
39
|
mare:group/option mare:flex mare:items-center mare:gap-2 mare:w-full
|
|
40
40
|
${a === "small" ? "mare:min-h-8 mare:py-1.5" : "mare:min-h-10 mare:py-2"}
|
|
41
41
|
mare:px-3 mare:cursor-pointer mare:rounded-menu-item
|
|
@@ -43,46 +43,46 @@ const me = {
|
|
|
43
43
|
mare:ark-highlighted:bg-hover
|
|
44
44
|
mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
|
|
45
45
|
mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
|
|
46
|
-
`,
|
|
47
|
-
const m =
|
|
46
|
+
`, ye = "mare:flex-auto mare:truncate mare:text-left", ke = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak", I = (a) => a.filter((t) => !t.disabled).map((t) => t.value), C = (a, t) => {
|
|
47
|
+
const m = I(a);
|
|
48
48
|
if (m.length === 0) return "none";
|
|
49
49
|
const l = m.filter((o) => t.includes(o)).length;
|
|
50
50
|
return l === 0 ? "none" : l === m.length ? "all" : "some";
|
|
51
|
-
},
|
|
52
|
-
const m =
|
|
53
|
-
return
|
|
51
|
+
}, ve = (a, t) => {
|
|
52
|
+
const m = I(a), l = t.filter((o) => !m.includes(o));
|
|
53
|
+
return C(a, t) === "all" ? l : [...l, ...m];
|
|
54
54
|
}, Ne = (a, t) => {
|
|
55
55
|
const m = t.trim().toLowerCase();
|
|
56
56
|
return m ? a.filter((l) => l.label.toLowerCase().includes(m)) : a;
|
|
57
|
-
},
|
|
57
|
+
}, Se = (a, t) => a.length === 0 ? "" : a.length <= t ? a.join(", ") : `${a.length} items selected`;
|
|
58
58
|
function Me({
|
|
59
59
|
value: a = [],
|
|
60
60
|
onValueChange: t,
|
|
61
61
|
options: m,
|
|
62
62
|
placeholder: l = "Select…",
|
|
63
63
|
searchPlaceholder: o = "",
|
|
64
|
-
size:
|
|
65
|
-
itemSize:
|
|
64
|
+
size: T = "medium",
|
|
65
|
+
itemSize: z = "medium",
|
|
66
66
|
disabled: b = !1,
|
|
67
|
-
invalid:
|
|
68
|
-
loading:
|
|
69
|
-
clearable:
|
|
70
|
-
filterable:
|
|
67
|
+
invalid: P = !1,
|
|
68
|
+
loading: _ = !1,
|
|
69
|
+
clearable: w = !1,
|
|
70
|
+
filterable: u = !1,
|
|
71
71
|
hasCheckbox: f = !0,
|
|
72
|
-
showToggleAll:
|
|
73
|
-
headerLabel:
|
|
74
|
-
display:
|
|
75
|
-
maxSelectedLabels:
|
|
72
|
+
showToggleAll: $ = !1,
|
|
73
|
+
headerLabel: y,
|
|
74
|
+
display: j = "text",
|
|
75
|
+
maxSelectedLabels: D = 3,
|
|
76
76
|
label: k,
|
|
77
|
-
emptyText:
|
|
78
|
-
indicator:
|
|
77
|
+
emptyText: L = "Sin resultados",
|
|
78
|
+
indicator: M,
|
|
79
79
|
clearIcon: E,
|
|
80
80
|
filterIcon: A,
|
|
81
|
-
renderOption:
|
|
81
|
+
renderOption: v
|
|
82
82
|
}) {
|
|
83
83
|
const [h, R] = K(""), s = x(
|
|
84
|
-
() =>
|
|
85
|
-
[
|
|
84
|
+
() => u ? Ne(m, h) : m,
|
|
85
|
+
[u, m, h]
|
|
86
86
|
), q = x(
|
|
87
87
|
() => Q({
|
|
88
88
|
items: s,
|
|
@@ -94,7 +94,7 @@ function Me({
|
|
|
94
94
|
), i = x(
|
|
95
95
|
() => m.filter((e) => a.includes(e.value)),
|
|
96
96
|
[m, a]
|
|
97
|
-
), c =
|
|
97
|
+
), c = C(s, a);
|
|
98
98
|
return /* @__PURE__ */ n(
|
|
99
99
|
X,
|
|
100
100
|
{
|
|
@@ -103,15 +103,15 @@ function Me({
|
|
|
103
103
|
closeOnSelect: !1,
|
|
104
104
|
value: a,
|
|
105
105
|
disabled: b,
|
|
106
|
-
invalid:
|
|
106
|
+
invalid: P,
|
|
107
107
|
onValueChange: (e) => t?.(e.value),
|
|
108
108
|
children: [
|
|
109
|
-
k && /* @__PURE__ */ r(B, { className:
|
|
110
|
-
/* @__PURE__ */ n(F, { className: le
|
|
111
|
-
/* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ r("div", { className: ne, children:
|
|
109
|
+
k && /* @__PURE__ */ r(B, { className: pe, children: k }),
|
|
110
|
+
/* @__PURE__ */ n(F, { className: le, children: [
|
|
111
|
+
/* @__PURE__ */ r(G, { asChild: !0, children: /* @__PURE__ */ r("div", { className: ne(T, w), children: j === "chip" ? i.length === 0 ? /* @__PURE__ */ r("span", { className: "mare:text-weak", children: l }) : /* @__PURE__ */ r(
|
|
112
112
|
"span",
|
|
113
113
|
{
|
|
114
|
-
className:
|
|
114
|
+
className: oe,
|
|
115
115
|
onClick: (e) => {
|
|
116
116
|
e.stopPropagation();
|
|
117
117
|
},
|
|
@@ -134,21 +134,23 @@ function Me({
|
|
|
134
134
|
) : /* @__PURE__ */ r(
|
|
135
135
|
"span",
|
|
136
136
|
{
|
|
137
|
-
className:
|
|
137
|
+
className: ie,
|
|
138
138
|
"data-empty": i.length === 0 ? "" : void 0,
|
|
139
|
-
children: i.length === 0 ? l :
|
|
139
|
+
children: i.length === 0 ? l : Se(
|
|
140
140
|
i.map(
|
|
141
141
|
(e) => e.label
|
|
142
142
|
),
|
|
143
|
-
|
|
143
|
+
D
|
|
144
144
|
)
|
|
145
145
|
}
|
|
146
146
|
) }) }),
|
|
147
|
-
|
|
148
|
-
|
|
147
|
+
/* @__PURE__ */ n("div", { className: se, children: [
|
|
148
|
+
w && /* @__PURE__ */ r(H, { className: de, children: E ?? /* @__PURE__ */ r(ee, { size: "1em" }) }),
|
|
149
|
+
/* @__PURE__ */ r(J, { className: ce, children: _ ? /* @__PURE__ */ r(Z, { className: "mare:w-4 mare:h-4" }) : M ?? /* @__PURE__ */ r(ae, { size: "1em" }) })
|
|
150
|
+
] })
|
|
149
151
|
] }),
|
|
150
152
|
/* @__PURE__ */ r(O, { children: /* @__PURE__ */ n(U, { className: ue, children: [
|
|
151
|
-
|
|
153
|
+
u && /* @__PURE__ */ n("div", { className: fe, children: [
|
|
152
154
|
/* @__PURE__ */ r(
|
|
153
155
|
"input",
|
|
154
156
|
{
|
|
@@ -160,17 +162,17 @@ function Me({
|
|
|
160
162
|
e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
|
|
161
163
|
},
|
|
162
164
|
placeholder: o,
|
|
163
|
-
className:
|
|
165
|
+
className: he
|
|
164
166
|
}
|
|
165
167
|
),
|
|
166
|
-
/* @__PURE__ */ r("span", { className:
|
|
168
|
+
/* @__PURE__ */ r("span", { className: xe, children: A ?? /* @__PURE__ */ r(re, { size: "1em" }) })
|
|
167
169
|
] }),
|
|
168
|
-
|
|
170
|
+
$ && /* @__PURE__ */ n(
|
|
169
171
|
"div",
|
|
170
172
|
{
|
|
171
|
-
className:
|
|
173
|
+
className: ge,
|
|
172
174
|
onClick: () => t?.(
|
|
173
|
-
|
|
175
|
+
ve(s, a)
|
|
174
176
|
),
|
|
175
177
|
children: [
|
|
176
178
|
f ? /* @__PURE__ */ n(
|
|
@@ -182,7 +184,7 @@ function Me({
|
|
|
182
184
|
),
|
|
183
185
|
children: [
|
|
184
186
|
c === "all" && /* @__PURE__ */ r(
|
|
185
|
-
|
|
187
|
+
p,
|
|
186
188
|
{
|
|
187
189
|
className: g
|
|
188
190
|
}
|
|
@@ -195,18 +197,18 @@ function Me({
|
|
|
195
197
|
)
|
|
196
198
|
]
|
|
197
199
|
}
|
|
198
|
-
) : c === "all" && /* @__PURE__ */ r("span", { className:
|
|
199
|
-
|
|
200
|
+
) : c === "all" && /* @__PURE__ */ r("span", { className: S, children: /* @__PURE__ */ r(p, { size: "1em" }) }),
|
|
201
|
+
y && /* @__PURE__ */ r("span", { className: be, children: y })
|
|
200
202
|
]
|
|
201
203
|
}
|
|
202
204
|
),
|
|
203
|
-
s.length === 0 ? /* @__PURE__ */ r("div", { className: ke, children:
|
|
205
|
+
s.length === 0 ? /* @__PURE__ */ r("div", { className: ke, children: L }) : s.map((e) => {
|
|
204
206
|
const d = a.includes(e.value);
|
|
205
207
|
return /* @__PURE__ */ n(
|
|
206
208
|
V,
|
|
207
209
|
{
|
|
208
210
|
item: e,
|
|
209
|
-
className:
|
|
211
|
+
className: we(z),
|
|
210
212
|
children: [
|
|
211
213
|
f && /* @__PURE__ */ r(
|
|
212
214
|
"span",
|
|
@@ -215,7 +217,7 @@ function Me({
|
|
|
215
217
|
d
|
|
216
218
|
),
|
|
217
219
|
children: d && /* @__PURE__ */ r(
|
|
218
|
-
|
|
220
|
+
p,
|
|
219
221
|
{
|
|
220
222
|
className: g
|
|
221
223
|
}
|
|
@@ -225,11 +227,11 @@ function Me({
|
|
|
225
227
|
/* @__PURE__ */ r(
|
|
226
228
|
W,
|
|
227
229
|
{
|
|
228
|
-
className:
|
|
229
|
-
children:
|
|
230
|
+
className: ye,
|
|
231
|
+
children: v ? v(e) : e.label
|
|
230
232
|
}
|
|
231
233
|
),
|
|
232
|
-
!f && d && /* @__PURE__ */ r("span", { className:
|
|
234
|
+
!f && d && /* @__PURE__ */ r("span", { className: S, children: /* @__PURE__ */ r(p, { size: "1em" }) })
|
|
233
235
|
]
|
|
234
236
|
},
|
|
235
237
|
e.value
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsxs as R, jsx as p } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as x, useState as w, useLayoutEffect as M } from "react";
|
|
3
|
+
import { B as v } from "./Badge-WC6my4Aw.js";
|
|
4
|
+
const B = "mare:relative mare:inline-flex mare:w-fit", N = `
|
|
5
|
+
mare:absolute mare:top-0 mare:end-0 mare:origin-[100%_0] mare:rounded-full mare:inline-flex
|
|
6
|
+
mare:m-0 mare:outline mare:outline-tpc-bg-default
|
|
7
|
+
`;
|
|
8
|
+
function y(a, i, l, u = 0, s = 0) {
|
|
9
|
+
const t = a.getBoundingClientRect(), r = t.width / 2, n = t.height / 2, m = i.getBoundingClientRect(), d = Number.parseFloat(
|
|
10
|
+
getComputedStyle(a).borderRadius.replaceAll("px", "")
|
|
11
|
+
);
|
|
12
|
+
if (m.width > d) return "";
|
|
13
|
+
const e = l * (Math.PI / 180), o = (r + u) * Math.cos(e), c = (n + s) * Math.sin(e);
|
|
14
|
+
return `translate(${-Math.abs(r - o)}px, ${Math.abs(n - c)}px)`;
|
|
15
|
+
}
|
|
16
|
+
const A = 45, f = "translate(50%, -50%)";
|
|
17
|
+
function $({
|
|
18
|
+
children: a,
|
|
19
|
+
severity: i = "accent",
|
|
20
|
+
icon: l,
|
|
21
|
+
value: u,
|
|
22
|
+
offsetX: s = 0,
|
|
23
|
+
offsetY: t = 0
|
|
24
|
+
}) {
|
|
25
|
+
const r = x(null), n = x(null), [m, d] = w(f);
|
|
26
|
+
return M(() => {
|
|
27
|
+
const e = r.current, o = n.current;
|
|
28
|
+
if (!e || !o) return;
|
|
29
|
+
const c = () => {
|
|
30
|
+
const g = e.firstElementChild;
|
|
31
|
+
if (!g) return;
|
|
32
|
+
const b = y(
|
|
33
|
+
g,
|
|
34
|
+
o,
|
|
35
|
+
A,
|
|
36
|
+
s,
|
|
37
|
+
t
|
|
38
|
+
);
|
|
39
|
+
d(
|
|
40
|
+
b ? `${f} ${b}` : f
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
c();
|
|
44
|
+
const h = new ResizeObserver(c);
|
|
45
|
+
return h.observe(e, { box: "border-box" }), () => {
|
|
46
|
+
h.disconnect();
|
|
47
|
+
};
|
|
48
|
+
}, [s, t]), /* @__PURE__ */ R("span", { className: B, children: [
|
|
49
|
+
/* @__PURE__ */ p("span", { ref: r, children: a }),
|
|
50
|
+
/* @__PURE__ */ p(
|
|
51
|
+
"span",
|
|
52
|
+
{
|
|
53
|
+
ref: n,
|
|
54
|
+
className: N,
|
|
55
|
+
style: { transform: m },
|
|
56
|
+
children: /* @__PURE__ */ p(
|
|
57
|
+
v,
|
|
58
|
+
{
|
|
59
|
+
severity: i,
|
|
60
|
+
icon: l,
|
|
61
|
+
children: u
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] });
|
|
67
|
+
}
|
|
68
|
+
export {
|
|
69
|
+
$ as O
|
|
70
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as u, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as P, useState as R, useEffect as k } from "react";
|
|
3
3
|
import { Pagination as c } from "@ark-ui/react/pagination";
|
|
4
|
-
import { B as h } from "./Button-
|
|
5
|
-
import { S as N } from "./SelectField-
|
|
4
|
+
import { B as h } from "./Button-DwJ5RTfQ.js";
|
|
5
|
+
import { S as N } from "./SelectField-B-g52vHx.js";
|
|
6
6
|
import { c as b } from "./createReactComponent-Cb6Pzf10.js";
|
|
7
7
|
import { I as M, a as j } from "./IconChevronRight-DEIDRsvg.js";
|
|
8
8
|
const I = [["path", { d: "M11 7l-5 5l5 5", key: "svg-0" }], ["path", { d: "M17 7l-5 5l5 5", key: "svg-1" }]], W = b("outline", "chevrons-left", "ChevronsLeft", I);
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { SegmentGroupRoot as g, SegmentGroupIndicator as f, SegmentGroupItem as h, SegmentGroupItemControl as v, SegmentGroupItemText as b, SegmentGroupItemHiddenInput as x } from "@ark-ui/react/segment-group";
|
|
3
|
+
const k = `
|
|
4
|
+
mare:inline-flex mare:relative mare:isolate mare:select-none mare:rounded-tpc-segmented-control-container
|
|
5
|
+
mare:bg-tpc-bg-neutral-weak mare:gap-1 mare:p-1
|
|
6
|
+
mare:ark-disabled:opacity-40
|
|
7
|
+
`, z = `
|
|
8
|
+
mare:absolute mare:z-0 mare:rounded-tpc-segmented-control-segment mare:bg-tpc-bg-default
|
|
9
|
+
mare:w-[var(--width)] mare:h-[var(--height)] mare:top-[var(--top)] mare:left-[var(--left)]
|
|
10
|
+
mare:transition-[width,left,top] mare:duration-150 mare:ease-out
|
|
11
|
+
`, w = (r) => `
|
|
12
|
+
mare:inline-flex mare:items-center mare:justify-center mare:overflow-hidden mare:relative mare:z-[1]
|
|
13
|
+
mare:cursor-pointer mare:select-none
|
|
14
|
+
${r === "equal" ? "mare:flex-1" : "mare:grow"}
|
|
15
|
+
mare:rounded-tpc-segmented-control-segment
|
|
16
|
+
mare:data-size-small:h-8
|
|
17
|
+
mare:data-size-medium:h-10
|
|
18
|
+
|
|
19
|
+
mare:text-tpc-fg-weak
|
|
20
|
+
mare:not-ark-disabled:not-ark-checked:hover:bg-tpc-bg-hover
|
|
21
|
+
mare:ark-disabled:cursor-not-allowed
|
|
22
|
+
|
|
23
|
+
mare:ark-checked:text-tpc-fg-default
|
|
24
|
+
|
|
25
|
+
mare:tpc-typography-label-s
|
|
26
|
+
mare:transition-colors mare:duration-200
|
|
27
|
+
`, y = `
|
|
28
|
+
mare:relative mare:flex-auto mare:inline-flex mare:items-center mare:justify-center mare:gap-2
|
|
29
|
+
mare:data-size-small:py-1 mare:data-size-small:px-3
|
|
30
|
+
mare:data-size-medium:py-2.5 mare:data-size-medium:px-3.5
|
|
31
|
+
mare:transition-colors mare:duration-200 mare:h-full
|
|
32
|
+
`, S = "mare:px-0.5", G = "mare:sr-only";
|
|
33
|
+
function j({
|
|
34
|
+
items: r,
|
|
35
|
+
value: o,
|
|
36
|
+
defaultValue: n,
|
|
37
|
+
onValueChange: s,
|
|
38
|
+
size: t = "small",
|
|
39
|
+
optionWidth: d = "auto",
|
|
40
|
+
disabled: i = !1,
|
|
41
|
+
renderOption: m,
|
|
42
|
+
name: c,
|
|
43
|
+
form: u,
|
|
44
|
+
id: p
|
|
45
|
+
}) {
|
|
46
|
+
return /* @__PURE__ */ l(
|
|
47
|
+
g,
|
|
48
|
+
{
|
|
49
|
+
value: o,
|
|
50
|
+
defaultValue: n,
|
|
51
|
+
onValueChange: (e) => {
|
|
52
|
+
e.value && s?.(e.value);
|
|
53
|
+
},
|
|
54
|
+
disabled: i,
|
|
55
|
+
name: c,
|
|
56
|
+
form: u,
|
|
57
|
+
id: p,
|
|
58
|
+
className: k,
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ a(f, { className: z }),
|
|
61
|
+
r.map((e) => /* @__PURE__ */ l(
|
|
62
|
+
h,
|
|
63
|
+
{
|
|
64
|
+
value: e.value,
|
|
65
|
+
disabled: e.disabled,
|
|
66
|
+
className: w(d),
|
|
67
|
+
"data-size": t,
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ a(
|
|
70
|
+
v,
|
|
71
|
+
{
|
|
72
|
+
className: y,
|
|
73
|
+
"data-size": t,
|
|
74
|
+
children: m ? m(e) : /* @__PURE__ */ a(
|
|
75
|
+
b,
|
|
76
|
+
{
|
|
77
|
+
className: S,
|
|
78
|
+
"data-size": t,
|
|
79
|
+
children: e.label
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ a(
|
|
85
|
+
x,
|
|
86
|
+
{
|
|
87
|
+
className: G
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
},
|
|
92
|
+
e.value
|
|
93
|
+
))
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
export {
|
|
99
|
+
j as S
|
|
100
|
+
};
|
|
@@ -39,16 +39,16 @@ function ee({
|
|
|
39
39
|
onValueChange: d,
|
|
40
40
|
options: t,
|
|
41
41
|
placeholder: o = "Select…",
|
|
42
|
-
size: u = "
|
|
42
|
+
size: u = "medium",
|
|
43
43
|
disabled: p = !1,
|
|
44
44
|
invalid: f = !1,
|
|
45
45
|
clearable: h = !1,
|
|
46
46
|
label: s,
|
|
47
|
-
leadingIcon:
|
|
47
|
+
leadingIcon: i,
|
|
48
48
|
indicator: x,
|
|
49
49
|
clearIcon: b,
|
|
50
50
|
checkIcon: g,
|
|
51
|
-
renderValue:
|
|
51
|
+
renderValue: n,
|
|
52
52
|
renderOption: c
|
|
53
53
|
}) {
|
|
54
54
|
const k = w(
|
|
@@ -71,8 +71,8 @@ function ee({
|
|
|
71
71
|
children: [
|
|
72
72
|
s && /* @__PURE__ */ e(v, { className: K, children: s }),
|
|
73
73
|
/* @__PURE__ */ e(I, { children: /* @__PURE__ */ m(N, { className: q(u), children: [
|
|
74
|
-
|
|
75
|
-
|
|
74
|
+
i && /* @__PURE__ */ e("span", { className: E, children: i }),
|
|
75
|
+
n ? /* @__PURE__ */ e(C, { children: (a) => a.selectedItems.length > 0 ? /* @__PURE__ */ e("span", { className: l, children: n(
|
|
76
76
|
a.selectedItems[0]
|
|
77
77
|
) }) : /* @__PURE__ */ e(
|
|
78
78
|
"span",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as o, jsxs as p } from "react/jsx-runtime";
|
|
2
2
|
import { Portal as g } from "@ark-ui/react/portal";
|
|
3
3
|
import { Toaster as y, Toast as m, createToaster as u } from "@ark-ui/react/toast";
|
|
4
|
-
import { B as b } from "./Button-
|
|
4
|
+
import { B as b } from "./Button-DwJ5RTfQ.js";
|
|
5
5
|
const h = `
|
|
6
6
|
mare:group mare:w-full mare:min-w-[20rem] mare:max-w-[429px]
|
|
7
7
|
mare:relative mare:overflow-hidden mare:rounded-tpc-snackbar
|
|
@@ -29,9 +29,9 @@ const z = `
|
|
|
29
29
|
mare:data-size-medium:w-7 mare:data-size-medium:h-7
|
|
30
30
|
mare:data-size-large:w-8 mare:data-size-large:h-8
|
|
31
31
|
|
|
32
|
-
mare:data-size-small:ark-checked:translate-x-3
|
|
33
|
-
mare:data-size-medium:ark-checked:translate-x-5
|
|
34
|
-
mare:data-size-large:ark-checked:translate-x-
|
|
32
|
+
mare:data-size-small:ark-checked:translate-x-3
|
|
33
|
+
mare:data-size-medium:ark-checked:translate-x-4.5
|
|
34
|
+
mare:data-size-large:ark-checked:translate-x-6.5
|
|
35
35
|
`, f = `
|
|
36
36
|
mare:text-default
|
|
37
37
|
mare:data-size-small:tpc-typography-body-s
|
package/dist/snackbar/index.js
CHANGED