@tpc-mare/mare-ui-components-react 0.1.24 → 0.1.25
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
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { useState as y, useMemo as c } from "react";
|
|
3
|
-
import { createListCollection as v, SelectRoot as S, SelectControl as I, SelectTrigger as C, SelectValueText as N, SelectClearTrigger as z, SelectIndicator as T, SelectPositioner as D, SelectContent as _, SelectItem as j, SelectItemText as L, SelectItemIndicator as V } from "@ark-ui/react/select";
|
|
4
|
-
import { I as q } from "./IconX-CpPADKjZ.js";
|
|
5
|
-
import { I as E } from "./IconChevronDown-ev2ML7Ex.js";
|
|
6
|
-
import { I as F } from "./IconSearch-CgM6jEUh.js";
|
|
7
|
-
import { I as P } from "./IconCheck-DzZA6b2U.js";
|
|
8
|
-
const $ = {
|
|
9
|
-
medium: "mare:h-10",
|
|
10
|
-
large: "mare:h-12"
|
|
11
|
-
}, B = {
|
|
12
|
-
medium: "mare:px-3.5",
|
|
13
|
-
large: "mare:px-4"
|
|
14
|
-
}, K = (r) => `
|
|
15
|
-
mare:group mare:relative mare:inline-flex mare:items-center mare:gap-1.5 mare:max-w-full
|
|
16
|
-
mare:rounded-full mare:border mare:cursor-pointer mare:select-none
|
|
17
|
-
mare:tpc-typography-body-s mare:transition-colors mare:duration-150
|
|
18
|
-
${$[r]} ${B[r]}
|
|
19
|
-
mare:bg-default mare:text-default mare:border-default
|
|
20
|
-
mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
|
|
21
|
-
mare:not-ark-disabled:hover:bg-hover
|
|
22
|
-
mare:ark-disabled:cursor-not-allowed mare:ark-disabled:text-disabled mare:ark-disabled:border-disabled-default
|
|
23
|
-
mare:data-[invalid]:outline-solid mare:data-[invalid]:outline-2 mare:data-[invalid]:outline-danger mare:data-[invalid]:-outline-offset-2
|
|
24
|
-
`, M = "mare:flex-auto mare:flex mare:items-center mare:cursor-pointer mare:bg-transparent mare:text-left mare:min-w-0", Q = "mare:truncate mare:data-[placeholder-shown]:text-weak", R = "mare:flex mare:items-center mare:shrink-0 mare:text-base mare:cursor-pointer mare:hover:text-weak", X = "mare:flex mare:items-center mare:shrink-0 mare:[&>svg]:size-4 mare:transition-transform mare:ark-open:rotate-180", A = `
|
|
25
|
-
mare:flex mare:flex-col mare:gap-0.5 mare:p-1
|
|
26
|
-
mare:rounded-input mare:border mare:border-default mare:bg-raised
|
|
27
|
-
mare:shadow-[0_2px_6px_0_rgba(0,0,0,0.16)]
|
|
28
|
-
mare:max-h-72 mare:overflow-y-auto
|
|
29
|
-
mare:min-w-[var(--reference-width)]
|
|
30
|
-
mare:z-50
|
|
31
|
-
`, G = `
|
|
32
|
-
mare:flex mare:items-center mare:gap-2 mare:mb-1 mare:px-3 mare:h-10
|
|
33
|
-
mare:rounded-input mare:border mare:border-strong mare:bg-default
|
|
34
|
-
mare:focus-within:outline-solid mare:focus-within:outline-2 mare:focus-within:outline-accent mare:focus-within:-outline-offset-2
|
|
35
|
-
`, H = "mare:flex-auto mare:bg-transparent mare:outline-none mare:text-default mare:placeholder:text-weak mare:tpc-typography-body-s", J = "mare:flex mare:items-center mare:shrink-0 mare:text-weak", O = `
|
|
36
|
-
mare:group/option mare:flex mare:items-center mare:justify-between mare:gap-2
|
|
37
|
-
mare:w-full mare:min-h-8 mare:py-2 mare:px-3 mare:cursor-pointer mare:rounded-menu-item
|
|
38
|
-
mare:tpc-typography-body-s mare:text-default
|
|
39
|
-
mare:ark-highlighted:bg-hover
|
|
40
|
-
mare:ark-selected:bg-accent-weak mare:ark-selected:text-accent
|
|
41
|
-
mare:ark-disabled:text-disabled mare:ark-disabled:cursor-not-allowed
|
|
42
|
-
`, U = "mare:flex mare:items-center mare:text-accent", W = "mare:py-2 mare:px-3 mare:tpc-typography-body-s mare:text-weak";
|
|
43
|
-
function le({
|
|
44
|
-
value: r = null,
|
|
45
|
-
onValueChange: d,
|
|
46
|
-
options: m,
|
|
47
|
-
placeholder: u = "Select…",
|
|
48
|
-
size: f = "medium",
|
|
49
|
-
disabled: p = !1,
|
|
50
|
-
invalid: h = !1,
|
|
51
|
-
filter: o = !1,
|
|
52
|
-
clearable: x = !1,
|
|
53
|
-
renderOption: n,
|
|
54
|
-
checkIcon: g,
|
|
55
|
-
clearIcon: b
|
|
56
|
-
}) {
|
|
57
|
-
const [i, s] = y(""), l = c(() => {
|
|
58
|
-
if (!o) return m;
|
|
59
|
-
const e = i.trim().toLowerCase();
|
|
60
|
-
return e ? m.filter((k) => k.label.toLowerCase().includes(e)) : m;
|
|
61
|
-
}, [o, i, m]), w = c(
|
|
62
|
-
() => v({
|
|
63
|
-
items: l,
|
|
64
|
-
itemToValue: (e) => e.value,
|
|
65
|
-
itemToString: (e) => e.label,
|
|
66
|
-
isItemDisabled: (e) => !!e.disabled
|
|
67
|
-
}),
|
|
68
|
-
[l]
|
|
69
|
-
);
|
|
70
|
-
return /* @__PURE__ */ t(
|
|
71
|
-
S,
|
|
72
|
-
{
|
|
73
|
-
collection: w,
|
|
74
|
-
value: r == null ? [] : [r],
|
|
75
|
-
disabled: p,
|
|
76
|
-
invalid: h,
|
|
77
|
-
onValueChange: (e) => d?.(e.value[0] ?? null),
|
|
78
|
-
onOpenChange: (e) => {
|
|
79
|
-
e.open || s("");
|
|
80
|
-
},
|
|
81
|
-
children: [
|
|
82
|
-
/* @__PURE__ */ t(I, { className: K(f), children: [
|
|
83
|
-
/* @__PURE__ */ a(C, { className: M, children: /* @__PURE__ */ a(
|
|
84
|
-
N,
|
|
85
|
-
{
|
|
86
|
-
className: Q,
|
|
87
|
-
placeholder: u
|
|
88
|
-
}
|
|
89
|
-
) }),
|
|
90
|
-
x && /* @__PURE__ */ a(z, { className: R, children: b ?? /* @__PURE__ */ a(q, { size: "1em" }) }),
|
|
91
|
-
/* @__PURE__ */ a(T, { className: X, children: /* @__PURE__ */ a(E, { size: "1em" }) })
|
|
92
|
-
] }),
|
|
93
|
-
/* @__PURE__ */ a(D, { children: /* @__PURE__ */ t(_, { className: A, children: [
|
|
94
|
-
o && /* @__PURE__ */ t("div", { className: G, children: [
|
|
95
|
-
/* @__PURE__ */ a(
|
|
96
|
-
"input",
|
|
97
|
-
{
|
|
98
|
-
className: H,
|
|
99
|
-
value: i,
|
|
100
|
-
onChange: (e) => s(e.target.value),
|
|
101
|
-
onKeyDown: (e) => {
|
|
102
|
-
e.key === "Enter" && e.preventDefault(), e.key !== "Escape" && e.stopPropagation();
|
|
103
|
-
},
|
|
104
|
-
placeholder: "Buscar…"
|
|
105
|
-
}
|
|
106
|
-
),
|
|
107
|
-
/* @__PURE__ */ a("span", { className: J, children: /* @__PURE__ */ a(F, { size: "1em" }) })
|
|
108
|
-
] }),
|
|
109
|
-
l.length === 0 && /* @__PURE__ */ a("div", { className: W, children: "Sin resultados" }),
|
|
110
|
-
l.map((e) => /* @__PURE__ */ t(
|
|
111
|
-
j,
|
|
112
|
-
{
|
|
113
|
-
item: e,
|
|
114
|
-
className: O,
|
|
115
|
-
children: [
|
|
116
|
-
/* @__PURE__ */ a(L, { children: n ? n(e) : e.label }),
|
|
117
|
-
/* @__PURE__ */ a(
|
|
118
|
-
V,
|
|
119
|
-
{
|
|
120
|
-
className: U,
|
|
121
|
-
children: g ?? /* @__PURE__ */ a(P, { size: "1em" })
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
]
|
|
125
|
-
},
|
|
126
|
-
e.value
|
|
127
|
-
))
|
|
128
|
-
] }) })
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
export {
|
|
134
|
-
le as F
|
|
135
|
-
};
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { jsxs as x, jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as b, useState as R, useLayoutEffect as w } from "react";
|
|
3
|
-
import { B as M } from "./Badge-WC6my4Aw.js";
|
|
4
|
-
const v = "mare:relative mare:inline-flex mare:w-fit", B = `
|
|
5
|
-
mare:absolute mare:top-0 mare:end-0 mare:origin-[100%_0]
|
|
6
|
-
mare:m-0 mare:outline mare:outline-tpc-bg-default
|
|
7
|
-
`;
|
|
8
|
-
function N(a, c, l, u = 0, s = 0) {
|
|
9
|
-
const t = a.getBoundingClientRect(), r = t.width / 2, n = t.height / 2, m = c.getBoundingClientRect(), p = Number.parseFloat(
|
|
10
|
-
getComputedStyle(a).borderRadius.replaceAll("px", "")
|
|
11
|
-
);
|
|
12
|
-
if (m.width > p) return "";
|
|
13
|
-
const e = l * (Math.PI / 180), o = (r + u) * Math.cos(e), i = (n + s) * Math.sin(e);
|
|
14
|
-
return `translate(${-Math.abs(r - o)}px, ${Math.abs(n - i)}px)`;
|
|
15
|
-
}
|
|
16
|
-
const y = 45, g = "translate(50%, -50%)";
|
|
17
|
-
function O({
|
|
18
|
-
children: a,
|
|
19
|
-
severity: c = "accent",
|
|
20
|
-
icon: l,
|
|
21
|
-
value: u,
|
|
22
|
-
offsetX: s = 0,
|
|
23
|
-
offsetY: t = 0
|
|
24
|
-
}) {
|
|
25
|
-
const r = b(null), n = b(null), [m, p] = R(g);
|
|
26
|
-
return w(() => {
|
|
27
|
-
const e = r.current, o = n.current;
|
|
28
|
-
if (!e || !o) return;
|
|
29
|
-
const i = () => {
|
|
30
|
-
const h = e.firstElementChild;
|
|
31
|
-
h && p(
|
|
32
|
-
N(h, o, y, s, t) || g
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
i();
|
|
36
|
-
const f = new ResizeObserver(i);
|
|
37
|
-
return f.observe(e, { box: "border-box" }), () => f.disconnect();
|
|
38
|
-
}, [s, t]), /* @__PURE__ */ x("span", { className: v, children: [
|
|
39
|
-
/* @__PURE__ */ d("span", { ref: r, children: a }),
|
|
40
|
-
/* @__PURE__ */ d(
|
|
41
|
-
"span",
|
|
42
|
-
{
|
|
43
|
-
ref: n,
|
|
44
|
-
className: B,
|
|
45
|
-
style: { transform: m },
|
|
46
|
-
children: /* @__PURE__ */ d(
|
|
47
|
-
M,
|
|
48
|
-
{
|
|
49
|
-
severity: c,
|
|
50
|
-
icon: l,
|
|
51
|
-
children: u
|
|
52
|
-
}
|
|
53
|
-
)
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
] });
|
|
57
|
-
}
|
|
58
|
-
export {
|
|
59
|
-
O
|
|
60
|
-
};
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { jsx as a, jsxs as p } from "react/jsx-runtime";
|
|
2
|
-
import { SegmentGroupRoot as g, SegmentGroupItem as f, SegmentGroupItemControl as h, SegmentGroupItemText as x, SegmentGroupItemHiddenInput as b } from "@ark-ui/react/segment-group";
|
|
3
|
-
const v = `
|
|
4
|
-
mare:inline-flex 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
|
-
`, k = (r) => `
|
|
8
|
-
mare:inline-flex mare:items-center mare:justify-center mare:overflow-hidden mare:relative
|
|
9
|
-
mare:cursor-pointer mare:select-none
|
|
10
|
-
${r === "equal" ? "mare:flex-1" : "mare:grow"}
|
|
11
|
-
mare:rounded-tpc-segmented-control-segment
|
|
12
|
-
mare:data-size-small:h-8
|
|
13
|
-
mare:data-size-medium:h-10
|
|
14
|
-
|
|
15
|
-
mare:text-tpc-fg-weak
|
|
16
|
-
mare:not-ark-disabled:hover:bg-tpc-bg-hover
|
|
17
|
-
mare:ark-disabled:cursor-not-allowed
|
|
18
|
-
|
|
19
|
-
mare:ark-checked:bg-tpc-bg-default
|
|
20
|
-
mare:ark-checked:text-tpc-fg-default
|
|
21
|
-
|
|
22
|
-
mare:tpc-typography-label-s
|
|
23
|
-
mare:transition-colors mare:duration-200
|
|
24
|
-
`, y = `
|
|
25
|
-
mare:relative mare:flex-auto mare:inline-flex mare:items-center mare:justify-center mare:gap-2
|
|
26
|
-
mare:data-size-small:py-1 mare:data-size-small:px-3
|
|
27
|
-
mare:data-size-medium:py-2.5 mare:data-size-medium:px-3.5
|
|
28
|
-
mare:transition-colors mare:duration-200 mare:h-full
|
|
29
|
-
`, z = "mare:px-0.5", S = "mare:sr-only";
|
|
30
|
-
function I({
|
|
31
|
-
items: r,
|
|
32
|
-
value: l,
|
|
33
|
-
defaultValue: n,
|
|
34
|
-
onValueChange: o,
|
|
35
|
-
size: m = "small",
|
|
36
|
-
optionWidth: s = "auto",
|
|
37
|
-
disabled: d = !1,
|
|
38
|
-
renderOption: t,
|
|
39
|
-
name: i,
|
|
40
|
-
form: c,
|
|
41
|
-
id: u
|
|
42
|
-
}) {
|
|
43
|
-
return /* @__PURE__ */ a(
|
|
44
|
-
g,
|
|
45
|
-
{
|
|
46
|
-
value: l,
|
|
47
|
-
defaultValue: n,
|
|
48
|
-
onValueChange: (e) => {
|
|
49
|
-
e.value && o?.(e.value);
|
|
50
|
-
},
|
|
51
|
-
disabled: d,
|
|
52
|
-
name: i,
|
|
53
|
-
form: c,
|
|
54
|
-
id: u,
|
|
55
|
-
className: v,
|
|
56
|
-
children: r.map((e) => /* @__PURE__ */ p(
|
|
57
|
-
f,
|
|
58
|
-
{
|
|
59
|
-
value: e.value,
|
|
60
|
-
disabled: e.disabled,
|
|
61
|
-
className: k(s),
|
|
62
|
-
"data-size": m,
|
|
63
|
-
children: [
|
|
64
|
-
/* @__PURE__ */ a(
|
|
65
|
-
h,
|
|
66
|
-
{
|
|
67
|
-
className: y,
|
|
68
|
-
"data-size": m,
|
|
69
|
-
children: t ? t(e) : /* @__PURE__ */ a(
|
|
70
|
-
x,
|
|
71
|
-
{
|
|
72
|
-
className: z,
|
|
73
|
-
"data-size": m,
|
|
74
|
-
children: e.label
|
|
75
|
-
}
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
/* @__PURE__ */ a(
|
|
80
|
-
b,
|
|
81
|
-
{
|
|
82
|
-
className: S
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
]
|
|
86
|
-
},
|
|
87
|
-
e.value
|
|
88
|
-
))
|
|
89
|
-
}
|
|
90
|
-
);
|
|
91
|
-
}
|
|
92
|
-
export {
|
|
93
|
-
I as S
|
|
94
|
-
};
|