@studiolxd/brand 39.0.0 → 40.1.0
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/CHANGELOG.md +107 -0
- package/dist/_shared/brandmessagescontext.js +15 -0
- package/dist/_shared/calendargrid.js +42 -42
- package/dist/_shared/datepicker.js +41 -41
- package/dist/_shared/imagecropdialog.js +54 -54
- package/dist/_shared/tokens.js +1 -0
- package/dist/_types/messages/BrandMessages.d.ts +26 -0
- package/dist/_types/messages/BrandMessagesContext.d.ts +21 -0
- package/dist/_types/messages/BrandMessagesProvider.d.ts +46 -0
- package/dist/_types/messages/index.d.ts +5 -0
- package/dist/_types/molecules/Pagination/Pagination.d.ts +40 -23
- package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts +27 -5
- package/dist/_types/organisms/DataTable/DataTable.d.ts +3 -2
- package/dist/accordion.js +26 -26
- package/dist/alert.js +26 -26
- package/dist/annotation-thread.css +1 -1
- package/dist/annotation-thread.js +37 -26
- package/dist/app-header.js +8 -8
- package/dist/app-launcher.js +34 -34
- package/dist/app-shell.js +14 -14
- package/dist/assistant-message.js +8 -8
- package/dist/async-multi-select-field.js +9 -9
- package/dist/async-multi-select.js +40 -40
- package/dist/async-select-field.js +9 -9
- package/dist/async-select.js +64 -64
- package/dist/avatar-upload.js +40 -40
- package/dist/avatar.js +5 -5
- package/dist/banner.js +9 -9
- package/dist/brand.css +2 -1
- package/dist/button.js +7 -7
- package/dist/calendar-planner.js +16 -16
- package/dist/calendar.js +38 -38
- package/dist/card.js +28 -28
- package/dist/carousel.js +19 -19
- package/dist/chart.js +137 -137
- package/dist/chat-shell.js +23 -23
- package/dist/checkbox-field.js +11 -11
- package/dist/checkbox.js +7 -7
- package/dist/close-button.js +6 -6
- package/dist/code-block.js +15 -15
- package/dist/code.js +5 -5
- package/dist/collapsible.js +1 -1
- package/dist/columns.js +7 -7
- package/dist/command-palette.js +14 -14
- package/dist/confirm-dialog.js +10 -10
- package/dist/connector-auth-shell.js +9 -9
- package/dist/consent.js +23 -23
- package/dist/container.js +6 -6
- package/dist/conversation-list.js +19 -19
- package/dist/conversation-thread.js +15 -15
- package/dist/copy-button.js +9 -9
- package/dist/copyable-value.js +17 -17
- package/dist/data-table.js +29 -29
- package/dist/date-picker-field.js +9 -9
- package/dist/date-time-field.js +12 -12
- package/dist/description-list.js +12 -12
- package/dist/docs-search.js +1 -1
- package/dist/dots-button.js +7 -7
- package/dist/dropdown-field.js +13 -13
- package/dist/email.js +44 -44
- package/dist/error-text.js +4 -4
- package/dist/field-row.js +20 -20
- package/dist/figure.js +8 -8
- package/dist/file-upload-field.js +9 -9
- package/dist/file-upload.js +29 -29
- package/dist/filter-bar.js +10 -10
- package/dist/floating-dock.js +17 -17
- package/dist/form-field.js +43 -43
- package/dist/form.js +14 -14
- package/dist/heading.js +5 -5
- package/dist/input-field.js +20 -20
- package/dist/input-phone-field.js +9 -9
- package/dist/input-phone.js +19 -19
- package/dist/input.js +5 -5
- package/dist/kbd.js +5 -5
- package/dist/label.js +5 -5
- package/dist/link.js +7 -7
- package/dist/list.js +7 -7
- package/dist/menu-button.js +7 -7
- package/dist/message-bubble.js +5 -5
- package/dist/message-composer.js +13 -13
- package/dist/messages.js +12 -0
- package/dist/multi-select-field.js +9 -9
- package/dist/multi-select.js +52 -52
- package/dist/notification-button.js +8 -8
- package/dist/notification-panel.js +25 -25
- package/dist/number-input-field.js +9 -9
- package/dist/number-input.js +11 -11
- package/dist/otp-field.js +9 -9
- package/dist/otp-input.js +48 -48
- package/dist/pagination.js +92 -89
- package/dist/paragraph.js +5 -5
- package/dist/password-field.js +15 -15
- package/dist/prose.js +4 -4
- package/dist/public-page-shell.js +11 -11
- package/dist/radio-field.js +11 -11
- package/dist/radio-group.js +5 -5
- package/dist/radio.js +5 -5
- package/dist/scroll-area.js +11 -11
- package/dist/search-form.js +8 -8
- package/dist/select-field.js +9 -9
- package/dist/select.js +85 -85
- package/dist/separator.js +6 -6
- package/dist/sidebar.js +16 -16
- package/dist/site-header.js +14 -14
- package/dist/site-shell.js +6 -6
- package/dist/sparkline.js +9 -9
- package/dist/star-rating.js +24 -24
- package/dist/stat-tile.js +12 -12
- package/dist/steps.js +32 -32
- package/dist/switcher-field.js +13 -13
- package/dist/switcher.js +8 -8
- package/dist/table-of-contents.js +14 -14
- package/dist/tag.js +5 -5
- package/dist/text.js +7 -7
- package/dist/textarea-field.js +11 -11
- package/dist/textarea.js +5 -5
- package/dist/time-field.js +9 -9
- package/dist/time-select.js +17 -17
- package/dist/toaster.js +16 -16
- package/dist/toggle-group.js +7 -7
- package/dist/toggle.js +5 -5
- package/dist/tokens.css +2 -1
- package/dist/tooltip.js +16 -16
- package/dist/tree-view.js +41 -41
- package/dist/uptime-bars.js +34 -34
- package/dist/user-message.js +8 -8
- package/dist/visually-hidden.js +5 -5
- package/package.json +5 -1
- package/src/tokens/molecules/annotation-thread.css +1 -0
- package/src/tokens/scss/molecules/_annotation-thread.scss +1 -0
- package/src/tokens/tokens.json +1 -0
package/dist/site-shell.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import './site-shell.css';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef as e } from "react";
|
|
3
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stories/sections/SiteShell/SiteShell.tsx
|
|
5
|
-
var r =
|
|
6
|
-
return /* @__PURE__ */
|
|
5
|
+
var r = e(function({ header: e, footer: r, children: i, className: a }, o) {
|
|
6
|
+
return /* @__PURE__ */ n("div", {
|
|
7
7
|
ref: o,
|
|
8
8
|
className: ["site-shell", a].filter(Boolean).join(" "),
|
|
9
9
|
children: [
|
|
10
|
-
|
|
11
|
-
/* @__PURE__ */
|
|
10
|
+
e,
|
|
11
|
+
/* @__PURE__ */ t("div", {
|
|
12
12
|
className: "site-shell__main",
|
|
13
13
|
children: i
|
|
14
14
|
}),
|
package/dist/sparkline.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import './sparkline.css';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef as e } from "react";
|
|
3
|
+
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stories/atoms/Sparkline/Sparkline.tsx
|
|
5
5
|
var r = {
|
|
6
6
|
width: 80,
|
|
7
7
|
height: 24,
|
|
8
8
|
markerSize: 8
|
|
9
|
-
}, i =
|
|
9
|
+
}, i = e(function({ values: e, type: i = "line", width: a = r.width, height: o = r.height, marker: s = !0, baseline: c = !0, series: l, ariaLabel: u, className: d, ...f }, p) {
|
|
10
10
|
let m = [
|
|
11
11
|
"sparkline",
|
|
12
12
|
`sparkline--${i}`,
|
|
13
13
|
d
|
|
14
|
-
].filter(Boolean).join(" "), h =
|
|
14
|
+
].filter(Boolean).join(" "), h = e.filter((e) => Number.isFinite(e)), g = r.markerSize / 2, _ = h.length ? Math.min(...h) : 0, v = h.length ? Math.max(...h) : 1, y = v - _ || 1, b = h.map((e, t) => ({
|
|
15
15
|
x: g + (h.length > 1 ? t * (a - g * 2) / (h.length - 1) : (a - g * 2) / 2),
|
|
16
16
|
y: o - g - (e - _) / y * (o - g * 2)
|
|
17
17
|
})), x = b.map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" "), S = b[b.length - 1], C = _ < 0 && v > 0, w = o - g - (0 - _) / y * (o - g * 2);
|
|
18
|
-
return b.length === 0 ? null : /* @__PURE__ */
|
|
18
|
+
return b.length === 0 ? null : /* @__PURE__ */ n("svg", {
|
|
19
19
|
ref: p,
|
|
20
20
|
className: m,
|
|
21
21
|
"data-series": l,
|
|
@@ -27,22 +27,22 @@ var r = {
|
|
|
27
27
|
"aria-hidden": u ? void 0 : !0,
|
|
28
28
|
...f,
|
|
29
29
|
children: [
|
|
30
|
-
c && C ? /* @__PURE__ */
|
|
30
|
+
c && C ? /* @__PURE__ */ t("line", {
|
|
31
31
|
className: "sparkline__baseline",
|
|
32
32
|
x1: 0,
|
|
33
33
|
y1: w,
|
|
34
34
|
x2: a,
|
|
35
35
|
y2: w
|
|
36
36
|
}) : null,
|
|
37
|
-
i === "area" && S ? /* @__PURE__ */
|
|
37
|
+
i === "area" && S ? /* @__PURE__ */ t("path", {
|
|
38
38
|
className: "sparkline__area",
|
|
39
39
|
d: `${x} L ${S.x} ${o} L ${b[0]?.x ?? 0} ${o} Z`
|
|
40
40
|
}) : null,
|
|
41
|
-
/* @__PURE__ */
|
|
41
|
+
/* @__PURE__ */ t("path", {
|
|
42
42
|
className: "sparkline__line",
|
|
43
43
|
d: x
|
|
44
44
|
}),
|
|
45
|
-
s && S ? /* @__PURE__ */
|
|
45
|
+
s && S ? /* @__PURE__ */ t("circle", {
|
|
46
46
|
className: "sparkline__marker",
|
|
47
47
|
cx: S.x,
|
|
48
48
|
cy: S.y,
|
package/dist/star-rating.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import './star-rating.css';
|
|
3
3
|
import { Icon as e } from "./icon.js";
|
|
4
4
|
import { VisuallyHidden as t } from "./visually-hidden.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { useId as n, useState as r } from "react";
|
|
6
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/stories/atoms/StarRating/StarRating.tsx
|
|
8
8
|
function o(e, t) {
|
|
9
9
|
return Math.min(Math.max(Math.round(e * 2) / 2, 0), t);
|
|
@@ -12,43 +12,43 @@ function s(e, t) {
|
|
|
12
12
|
return t >= e + 1 ? "full" : t >= e + .5 ? "half" : "empty";
|
|
13
13
|
}
|
|
14
14
|
function c({ fill: t }) {
|
|
15
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ a("span", {
|
|
16
16
|
className: "star-rating__star",
|
|
17
|
-
children: [/* @__PURE__ */
|
|
17
|
+
children: [/* @__PURE__ */ i(e, {
|
|
18
18
|
name: "star",
|
|
19
19
|
className: "star-rating__glyph star-rating__glyph--track"
|
|
20
|
-
}), t !== "empty" && /* @__PURE__ */
|
|
20
|
+
}), t !== "empty" && /* @__PURE__ */ i(e, {
|
|
21
21
|
name: "star",
|
|
22
22
|
className: `star-rating__glyph star-rating__glyph--fill${t === "half" ? " star-rating__glyph--half" : ""}`
|
|
23
23
|
})]
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
function l(e) {
|
|
27
|
-
let { value: l, defaultValue: u, onValueChange: d, max: f = 5, reviewCount: p, readOnly: m = !0, disabled: h = !1, size: g = "md", name: _, valueLabel: v, optionLabel: y, groupLabel: b, countLabel: x, emptyLabel: S, className: C, ...w } = e, T =
|
|
27
|
+
let { value: l, defaultValue: u, onValueChange: d, max: f = 5, reviewCount: p, readOnly: m = !0, disabled: h = !1, size: g = "md", name: _, valueLabel: v, optionLabel: y, groupLabel: b, countLabel: x, emptyLabel: S, className: C, ...w } = e, T = n(), [E, D] = r(u), [O, k] = r(void 0), A = l !== void 0, j = (A ? l : E) ?? 0, M = [
|
|
28
28
|
"star-rating",
|
|
29
29
|
g === "md" ? "" : `star-rating--${g}`,
|
|
30
30
|
m ? "" : "star-rating--input",
|
|
31
31
|
C ?? ""
|
|
32
32
|
].filter(Boolean).join(" "), N = Array.from({ length: f }, (e, t) => t);
|
|
33
33
|
if (m) {
|
|
34
|
-
if (l === null) return /* @__PURE__ */
|
|
34
|
+
if (l === null) return /* @__PURE__ */ i("div", {
|
|
35
35
|
className: M,
|
|
36
36
|
...w,
|
|
37
|
-
children: /* @__PURE__ */
|
|
37
|
+
children: /* @__PURE__ */ i("span", {
|
|
38
38
|
className: "star-rating__empty",
|
|
39
39
|
children: S ?? ""
|
|
40
40
|
})
|
|
41
41
|
});
|
|
42
42
|
let e = o(j, f);
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ a("div", {
|
|
44
44
|
className: M,
|
|
45
45
|
role: "img",
|
|
46
46
|
"aria-label": v?.(e, f, p) ?? "",
|
|
47
47
|
...w,
|
|
48
|
-
children: [/* @__PURE__ */
|
|
48
|
+
children: [/* @__PURE__ */ i("span", {
|
|
49
49
|
className: "star-rating__stars",
|
|
50
|
-
children: N.map((t) => /* @__PURE__ */
|
|
51
|
-
}), p !== void 0 && /* @__PURE__ */
|
|
50
|
+
children: N.map((t) => /* @__PURE__ */ i(c, { fill: s(t, e) }, t))
|
|
51
|
+
}), p !== void 0 && /* @__PURE__ */ i("span", {
|
|
52
52
|
className: "star-rating__count",
|
|
53
53
|
children: x?.(p) ?? ""
|
|
54
54
|
})]
|
|
@@ -58,35 +58,35 @@ function l(e) {
|
|
|
58
58
|
A || D(e), d?.(e);
|
|
59
59
|
}
|
|
60
60
|
let F = O ?? Math.round(j);
|
|
61
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ i("div", {
|
|
62
62
|
className: M,
|
|
63
63
|
role: "radiogroup",
|
|
64
64
|
"aria-label": b ?? "",
|
|
65
65
|
onPointerLeave: () => k(void 0),
|
|
66
66
|
...w,
|
|
67
67
|
children: N.map((e) => {
|
|
68
|
-
let
|
|
69
|
-
return /* @__PURE__ */
|
|
68
|
+
let n = e + 1;
|
|
69
|
+
return /* @__PURE__ */ a("label", {
|
|
70
70
|
className: "star-rating__option",
|
|
71
71
|
onPointerEnter: () => {
|
|
72
|
-
h || k(
|
|
72
|
+
h || k(n);
|
|
73
73
|
},
|
|
74
74
|
children: [
|
|
75
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ i("input", {
|
|
76
76
|
className: "star-rating__input visually-hidden",
|
|
77
77
|
type: "radio",
|
|
78
78
|
name: _ ?? T,
|
|
79
|
-
value:
|
|
80
|
-
checked: Math.round(j) ===
|
|
79
|
+
value: n,
|
|
80
|
+
checked: Math.round(j) === n,
|
|
81
81
|
disabled: h,
|
|
82
|
-
onChange: () => P(
|
|
83
|
-
onFocus: () => k(
|
|
82
|
+
onChange: () => P(n),
|
|
83
|
+
onFocus: () => k(n),
|
|
84
84
|
onBlur: () => k(void 0)
|
|
85
85
|
}),
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
/* @__PURE__ */
|
|
86
|
+
/* @__PURE__ */ i(c, { fill: n <= F ? "full" : "empty" }),
|
|
87
|
+
/* @__PURE__ */ i(t, { children: y?.(n, f) ?? "" })
|
|
88
88
|
]
|
|
89
|
-
},
|
|
89
|
+
}, n);
|
|
90
90
|
})
|
|
91
91
|
});
|
|
92
92
|
}
|
package/dist/stat-tile.js
CHANGED
|
@@ -2,8 +2,8 @@ import './stat-tile.css';
|
|
|
2
2
|
import { Icon as e } from "./icon.js";
|
|
3
3
|
import { VisuallyHidden as t } from "./visually-hidden.js";
|
|
4
4
|
import { Tag as n } from "./tag.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { forwardRef as r } from "react";
|
|
6
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/stories/molecules/StatTile/StatTile.tsx
|
|
8
8
|
var o = {
|
|
9
9
|
up: "positive",
|
|
@@ -17,43 +17,43 @@ var o = {
|
|
|
17
17
|
up: "Sube",
|
|
18
18
|
down: "Baja",
|
|
19
19
|
flat: "Sin cambio"
|
|
20
|
-
}, l =
|
|
20
|
+
}, l = r(function({ label: r, value: l, delta: u, description: d, icon: f, size: p = "md", className: m, ...h }, g) {
|
|
21
21
|
let _ = [
|
|
22
22
|
"stat-tile",
|
|
23
23
|
p === "md" ? "" : `stat-tile--${p}`,
|
|
24
24
|
m ?? ""
|
|
25
25
|
].filter(Boolean).join(" "), v = u?.direction ?? "flat", y = u?.tone ?? o[v], b = u?.label ?? c[v];
|
|
26
|
-
return /* @__PURE__ */
|
|
26
|
+
return /* @__PURE__ */ a("div", {
|
|
27
27
|
ref: g,
|
|
28
28
|
className: _,
|
|
29
29
|
...h,
|
|
30
30
|
children: [
|
|
31
|
-
/* @__PURE__ */
|
|
31
|
+
/* @__PURE__ */ a("p", {
|
|
32
32
|
className: "stat-tile__label",
|
|
33
|
-
children: [f && /* @__PURE__ */
|
|
33
|
+
children: [f && /* @__PURE__ */ i("span", {
|
|
34
34
|
className: "stat-tile__icon",
|
|
35
35
|
"aria-hidden": "true",
|
|
36
36
|
children: f
|
|
37
|
-
}),
|
|
37
|
+
}), r]
|
|
38
38
|
}),
|
|
39
|
-
/* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ i("p", {
|
|
40
40
|
className: "stat-tile__value",
|
|
41
41
|
children: l
|
|
42
42
|
}),
|
|
43
|
-
u && /* @__PURE__ */
|
|
43
|
+
u && /* @__PURE__ */ a(n, {
|
|
44
44
|
variant: s[y],
|
|
45
45
|
className: "stat-tile__delta",
|
|
46
46
|
children: [
|
|
47
|
-
/* @__PURE__ */
|
|
47
|
+
/* @__PURE__ */ i(e, {
|
|
48
48
|
name: "arrow",
|
|
49
49
|
size: "sm",
|
|
50
50
|
className: `stat-tile__delta-icon stat-tile__delta-icon--${v}`
|
|
51
51
|
}),
|
|
52
|
-
/* @__PURE__ */
|
|
52
|
+
/* @__PURE__ */ i(t, { children: b }),
|
|
53
53
|
u.value
|
|
54
54
|
]
|
|
55
55
|
}),
|
|
56
|
-
d && /* @__PURE__ */
|
|
56
|
+
d && /* @__PURE__ */ i("p", {
|
|
57
57
|
className: "stat-tile__description",
|
|
58
58
|
children: d
|
|
59
59
|
})
|
package/dist/steps.js
CHANGED
|
@@ -4,52 +4,52 @@ import { Icon as e } from "./icon.js";
|
|
|
4
4
|
import { Heading as t } from "./heading.js";
|
|
5
5
|
import { Paragraph as n } from "./paragraph.js";
|
|
6
6
|
import { StepMarker as r } from "./step-marker.js";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
7
|
+
import { Children as i, createContext as a, useContext as o } from "react";
|
|
8
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
9
|
//#region src/stories/organisms/Steps/Steps.tsx
|
|
10
|
-
var l =
|
|
11
|
-
function u({ items:
|
|
10
|
+
var l = a(null);
|
|
11
|
+
function u({ items: a, orientation: o = "vertical", tone: u, badgeVariant: d, titleLevel: f = 3, titleSize: p = 1, label: m, children: h, className: g, id: _ }) {
|
|
12
12
|
let v = [
|
|
13
13
|
"steps",
|
|
14
|
-
`steps--${
|
|
14
|
+
`steps--${o}`,
|
|
15
15
|
g
|
|
16
16
|
].filter(Boolean).join(" "), y = u ?? d ?? "primary";
|
|
17
|
-
return h === void 0 ? /* @__PURE__ */
|
|
17
|
+
return h === void 0 ? /* @__PURE__ */ s("ol", {
|
|
18
18
|
id: _,
|
|
19
19
|
className: v,
|
|
20
20
|
"aria-label": m,
|
|
21
|
-
children: (
|
|
21
|
+
children: (a ?? []).map((i, a) => /* @__PURE__ */ c("li", {
|
|
22
22
|
className: "steps__item",
|
|
23
|
-
children: [/* @__PURE__ */
|
|
23
|
+
children: [/* @__PURE__ */ s("span", {
|
|
24
24
|
className: "steps__marker",
|
|
25
|
-
children: /* @__PURE__ */
|
|
25
|
+
children: /* @__PURE__ */ s(r, {
|
|
26
26
|
state: "neutral",
|
|
27
27
|
tone: y,
|
|
28
|
-
count:
|
|
29
|
-
icon:
|
|
28
|
+
count: a + 1,
|
|
29
|
+
icon: i.icon,
|
|
30
30
|
className: "steps__number"
|
|
31
31
|
})
|
|
32
|
-
}), /* @__PURE__ */
|
|
32
|
+
}), /* @__PURE__ */ c("div", {
|
|
33
33
|
className: "steps__body",
|
|
34
|
-
children: [/* @__PURE__ */
|
|
34
|
+
children: [/* @__PURE__ */ c(t, {
|
|
35
35
|
level: f,
|
|
36
36
|
size: p,
|
|
37
37
|
className: "steps__title",
|
|
38
|
-
children: [
|
|
39
|
-
name:
|
|
38
|
+
children: [i.icon && /* @__PURE__ */ s(e, {
|
|
39
|
+
name: i.icon,
|
|
40
40
|
className: "steps__icon"
|
|
41
|
-
}),
|
|
42
|
-
}),
|
|
41
|
+
}), i.title]
|
|
42
|
+
}), i.description && /* @__PURE__ */ s(n, {
|
|
43
43
|
className: "steps__description",
|
|
44
|
-
children:
|
|
44
|
+
children: i.description
|
|
45
45
|
})]
|
|
46
46
|
})]
|
|
47
|
-
},
|
|
48
|
-
}) : /* @__PURE__ */
|
|
47
|
+
}, i.id ?? a))
|
|
48
|
+
}) : /* @__PURE__ */ s("ol", {
|
|
49
49
|
id: _,
|
|
50
50
|
className: v,
|
|
51
51
|
"aria-label": m,
|
|
52
|
-
children:
|
|
52
|
+
children: i.map(h, (e, t) => /* @__PURE__ */ s(l.Provider, {
|
|
53
53
|
value: {
|
|
54
54
|
index: t,
|
|
55
55
|
tone: y,
|
|
@@ -60,33 +60,33 @@ function u({ items: s, orientation: c = "vertical", tone: u, badgeVariant: d, ti
|
|
|
60
60
|
}))
|
|
61
61
|
});
|
|
62
62
|
}
|
|
63
|
-
function d({ title: n, icon:
|
|
64
|
-
let f =
|
|
63
|
+
function d({ title: n, icon: i, children: a, className: u, ...d }) {
|
|
64
|
+
let f = o(l);
|
|
65
65
|
if (f === null) throw Error("`Step` solo funciona dentro de `Steps`: de ahí saca su número.");
|
|
66
66
|
let { index: p, tone: m, titleLevel: h, titleSize: g } = f;
|
|
67
|
-
return /* @__PURE__ */
|
|
67
|
+
return /* @__PURE__ */ c("li", {
|
|
68
68
|
className: ["steps__item", u].filter(Boolean).join(" "),
|
|
69
69
|
...d,
|
|
70
|
-
children: [/* @__PURE__ */
|
|
70
|
+
children: [/* @__PURE__ */ s("span", {
|
|
71
71
|
className: "steps__marker",
|
|
72
|
-
children: /* @__PURE__ */
|
|
72
|
+
children: /* @__PURE__ */ s(r, {
|
|
73
73
|
state: "neutral",
|
|
74
74
|
tone: m,
|
|
75
75
|
count: p + 1,
|
|
76
|
-
icon:
|
|
76
|
+
icon: i,
|
|
77
77
|
className: "steps__number"
|
|
78
78
|
})
|
|
79
|
-
}), /* @__PURE__ */
|
|
79
|
+
}), /* @__PURE__ */ c("div", {
|
|
80
80
|
className: "steps__body",
|
|
81
|
-
children: [/* @__PURE__ */
|
|
81
|
+
children: [/* @__PURE__ */ c(t, {
|
|
82
82
|
level: h,
|
|
83
83
|
size: g,
|
|
84
84
|
className: "steps__title",
|
|
85
|
-
children: [
|
|
86
|
-
name:
|
|
85
|
+
children: [i && /* @__PURE__ */ s(e, {
|
|
86
|
+
name: i,
|
|
87
87
|
className: "steps__icon"
|
|
88
88
|
}), n]
|
|
89
|
-
}),
|
|
89
|
+
}), a]
|
|
90
90
|
})]
|
|
91
91
|
});
|
|
92
92
|
}
|
package/dist/switcher-field.js
CHANGED
|
@@ -5,12 +5,12 @@ import { n as t } from "./_shared/form-size.js";
|
|
|
5
5
|
import { ErrorText as n } from "./error-text.js";
|
|
6
6
|
import { Switcher as r } from "./switcher.js";
|
|
7
7
|
import { n as i } from "./_shared/field-labels.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { forwardRef as a, useId as o } from "react";
|
|
9
|
+
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
10
10
|
//#region src/stories/molecules/SwitcherField/SwitcherField.tsx
|
|
11
|
-
var l =
|
|
12
|
-
let T = i(l), E = t(_), D =
|
|
13
|
-
return /* @__PURE__ */
|
|
11
|
+
var l = a(function({ label: a, labelHidden: l, id: u, checked: d, defaultChecked: f, disabled: p, required: m, name: h, value: g, size: _, error: v = !1, errorMessage: y, helperText: b, className: x, onCheckedChange: S, onBlur: C }, w) {
|
|
12
|
+
let T = i(l), E = t(_), D = o(), O = u ?? D, k = y ? `${O}-error` : void 0, A = b ? `${O}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
|
|
13
|
+
return /* @__PURE__ */ c("div", {
|
|
14
14
|
className: [
|
|
15
15
|
"switcher-field",
|
|
16
16
|
E === "md" ? "" : `switcher-field--${E}`,
|
|
@@ -18,10 +18,10 @@ var l = s(function({ label: s, labelHidden: l, id: u, checked: d, defaultChecked
|
|
|
18
18
|
x
|
|
19
19
|
].filter(Boolean).join(" "),
|
|
20
20
|
children: [
|
|
21
|
-
/* @__PURE__ */
|
|
21
|
+
/* @__PURE__ */ c("label", {
|
|
22
22
|
className: "switcher-field__control",
|
|
23
23
|
htmlFor: O,
|
|
24
|
-
children: [/* @__PURE__ */
|
|
24
|
+
children: [/* @__PURE__ */ s(r, {
|
|
25
25
|
ref: w,
|
|
26
26
|
id: O,
|
|
27
27
|
checked: d,
|
|
@@ -36,20 +36,20 @@ var l = s(function({ label: s, labelHidden: l, id: u, checked: d, defaultChecked
|
|
|
36
36
|
"aria-describedby": j,
|
|
37
37
|
onCheckedChange: S,
|
|
38
38
|
onBlur: C
|
|
39
|
-
}), T ? /* @__PURE__ */
|
|
39
|
+
}), T ? /* @__PURE__ */ s(e, {
|
|
40
40
|
id: `${O}-label`,
|
|
41
|
-
children:
|
|
42
|
-
}) : /* @__PURE__ */
|
|
41
|
+
children: a
|
|
42
|
+
}) : /* @__PURE__ */ s("span", {
|
|
43
43
|
id: `${O}-label`,
|
|
44
44
|
className: "switcher-field__label",
|
|
45
|
-
children:
|
|
45
|
+
children: a
|
|
46
46
|
})]
|
|
47
47
|
}),
|
|
48
|
-
y && /* @__PURE__ */
|
|
48
|
+
y && /* @__PURE__ */ s(n, {
|
|
49
49
|
id: k,
|
|
50
50
|
children: y
|
|
51
51
|
}),
|
|
52
|
-
b && /* @__PURE__ */
|
|
52
|
+
b && /* @__PURE__ */ s("span", {
|
|
53
53
|
id: A,
|
|
54
54
|
className: "switcher-field__helper",
|
|
55
55
|
children: b
|
package/dist/switcher.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './switcher.css';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { forwardRef as e, useCallback as t } from "react";
|
|
4
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
5
5
|
import { Switch as r } from "@base-ui/react/switch";
|
|
6
6
|
//#region src/stories/atoms/Switcher/Switcher.tsx
|
|
7
|
-
var i =
|
|
7
|
+
var i = e(function({ size: e = "md", error: i = !1, className: a, value: o, onCheckedChange: s, id: c, ...l }, u) {
|
|
8
8
|
let d = [
|
|
9
9
|
"switcher",
|
|
10
|
-
|
|
10
|
+
e === "md" ? "" : `switcher--${e}`,
|
|
11
11
|
i ? "switcher--error" : "",
|
|
12
12
|
a ?? ""
|
|
13
|
-
].filter(Boolean).join(" "), f =
|
|
13
|
+
].filter(Boolean).join(" "), f = t((e) => {
|
|
14
14
|
e && o !== void 0 && (e.value = o);
|
|
15
15
|
}, [o]);
|
|
16
|
-
return /* @__PURE__ */
|
|
16
|
+
return /* @__PURE__ */ n(r.Root, {
|
|
17
17
|
ref: u,
|
|
18
18
|
className: d,
|
|
19
19
|
inputRef: f,
|
|
20
|
-
render: /* @__PURE__ */
|
|
20
|
+
render: /* @__PURE__ */ n("button", {
|
|
21
21
|
type: "button",
|
|
22
22
|
id: c
|
|
23
23
|
}),
|
|
@@ -25,7 +25,7 @@ var i = t(function({ size: t = "md", error: i = !1, className: a, value: o, onCh
|
|
|
25
25
|
"aria-invalid": i || void 0,
|
|
26
26
|
onCheckedChange: s ? (e) => s(e) : void 0,
|
|
27
27
|
...l,
|
|
28
|
-
children: /* @__PURE__ */
|
|
28
|
+
children: /* @__PURE__ */ n(r.Thumb, { className: "switcher__thumb" })
|
|
29
29
|
});
|
|
30
30
|
});
|
|
31
31
|
//#endregion
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import './table-of-contents.css';
|
|
2
2
|
import { Link as e } from "./link.js";
|
|
3
3
|
import { List as t } from "./list.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { forwardRef as n } from "react";
|
|
5
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
6
|
//#region src/stories/molecules/TableOfContents/TableOfContents.tsx
|
|
7
7
|
function a(e, t) {
|
|
8
8
|
return Math.min(Math.max(e - t, 0), 5);
|
|
9
9
|
}
|
|
10
|
-
var o =
|
|
11
|
-
if (
|
|
12
|
-
let m = Math.min(...
|
|
13
|
-
return /* @__PURE__ */
|
|
10
|
+
var o = n(function({ items: n, activeId: o, ariaLabel: s = "En esta página", title: c, sticky: l = !1, onItemClick: u, className: d, ...f }, p) {
|
|
11
|
+
if (n.length === 0) return null;
|
|
12
|
+
let m = Math.min(...n.map((e) => e.level));
|
|
13
|
+
return /* @__PURE__ */ i("nav", {
|
|
14
14
|
ref: p,
|
|
15
15
|
className: [
|
|
16
16
|
"table-of-contents",
|
|
@@ -19,20 +19,20 @@ var o = i(function({ items: i, activeId: o, ariaLabel: s = "En esta página", ti
|
|
|
19
19
|
].filter(Boolean).join(" "),
|
|
20
20
|
"aria-label": s,
|
|
21
21
|
...f,
|
|
22
|
-
children: [c && /* @__PURE__ */
|
|
22
|
+
children: [c && /* @__PURE__ */ r("p", {
|
|
23
23
|
className: "table-of-contents__title",
|
|
24
24
|
children: c
|
|
25
|
-
}), /* @__PURE__ */
|
|
25
|
+
}), /* @__PURE__ */ r(t, {
|
|
26
26
|
type: "plain",
|
|
27
27
|
className: "table-of-contents__list",
|
|
28
|
-
children:
|
|
29
|
-
let
|
|
30
|
-
return /* @__PURE__ */
|
|
28
|
+
children: n.map((t) => {
|
|
29
|
+
let n = t.id === o;
|
|
30
|
+
return /* @__PURE__ */ r("li", {
|
|
31
31
|
className: `table-of-contents__item table-of-contents__item--level-${a(t.level, m)}`,
|
|
32
|
-
children: /* @__PURE__ */
|
|
32
|
+
children: /* @__PURE__ */ r(e, {
|
|
33
33
|
href: `#${t.id}`,
|
|
34
|
-
className: ["table-of-contents__link",
|
|
35
|
-
"aria-current":
|
|
34
|
+
className: ["table-of-contents__link", n ? "table-of-contents__link--active" : ""].filter(Boolean).join(" "),
|
|
35
|
+
"aria-current": n ? "location" : void 0,
|
|
36
36
|
onClick: u ? (e) => u(t, e) : void 0,
|
|
37
37
|
children: t.label
|
|
38
38
|
})
|
package/dist/tag.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import './tag.css';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef as e } from "react";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stories/atoms/Tag/Tag.tsx
|
|
5
|
-
var n =
|
|
6
|
-
return /* @__PURE__ */
|
|
5
|
+
var n = e(function({ variant: e = "neutral", className: n, children: r, ...i }, a) {
|
|
6
|
+
return /* @__PURE__ */ t("span", {
|
|
7
7
|
ref: a,
|
|
8
8
|
className: [
|
|
9
9
|
"tag",
|
|
10
|
-
`tag--${
|
|
10
|
+
`tag--${e}`,
|
|
11
11
|
n ?? ""
|
|
12
12
|
].filter(Boolean).join(" "),
|
|
13
13
|
...i,
|
package/dist/text.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import './text.css';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef as e } from "react";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
4
|
//#region src/stories/atoms/Text/Text.tsx
|
|
5
|
-
var n =
|
|
6
|
-
return /* @__PURE__ */ e
|
|
5
|
+
var n = e(function({ as: e = "span", tone: n = "default", className: r, children: i, ...a }, o) {
|
|
6
|
+
return /* @__PURE__ */ t(e, {
|
|
7
7
|
ref: o,
|
|
8
8
|
className: [
|
|
9
9
|
"text",
|
|
@@ -13,10 +13,10 @@ var n = t(function({ as: t = "span", tone: n = "default", className: r, children
|
|
|
13
13
|
...a,
|
|
14
14
|
children: i
|
|
15
15
|
});
|
|
16
|
-
}), r =
|
|
17
|
-
return /* @__PURE__ */
|
|
16
|
+
}), r = e(function({ className: e, ...n }, r) {
|
|
17
|
+
return /* @__PURE__ */ t("br", {
|
|
18
18
|
ref: r,
|
|
19
|
-
className: ["text__break",
|
|
19
|
+
className: ["text__break", e ?? ""].filter(Boolean).join(" "),
|
|
20
20
|
...n
|
|
21
21
|
});
|
|
22
22
|
});
|
package/dist/textarea-field.js
CHANGED
|
@@ -5,24 +5,24 @@ import { ErrorText as t } from "./error-text.js";
|
|
|
5
5
|
import { Label as n } from "./label.js";
|
|
6
6
|
import { Textarea as r } from "./textarea.js";
|
|
7
7
|
import { n as i } from "./_shared/field-labels.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { forwardRef as a } from "react";
|
|
9
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
10
10
|
//#region src/stories/molecules/TextareaField/TextareaField.tsx
|
|
11
|
-
var c =
|
|
12
|
-
let D = i(l), O = e(_), k = y ? `${
|
|
13
|
-
return /* @__PURE__ */
|
|
11
|
+
var c = a(function({ id: a, label: c, labelHidden: l, name: u, placeholder: d, value: f, defaultValue: p, rows: m, disabled: h, readOnly: g, size: _, error: v = !1, errorMessage: y, helperText: b, onChange: x, onBlur: S, onFocus: C, className: w, ...T }, E) {
|
|
12
|
+
let D = i(l), O = e(_), k = y ? `${a}-error` : void 0, A = b ? `${a}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
|
|
13
|
+
return /* @__PURE__ */ s("div", {
|
|
14
14
|
className: ["textarea-field", w].filter(Boolean).join(" "),
|
|
15
15
|
children: [
|
|
16
|
-
/* @__PURE__ */
|
|
17
|
-
htmlFor:
|
|
16
|
+
/* @__PURE__ */ o(n, {
|
|
17
|
+
htmlFor: a,
|
|
18
18
|
hidden: D,
|
|
19
19
|
size: O,
|
|
20
20
|
children: c
|
|
21
21
|
}),
|
|
22
|
-
/* @__PURE__ */
|
|
22
|
+
/* @__PURE__ */ o(r, {
|
|
23
23
|
ref: E,
|
|
24
24
|
...T,
|
|
25
|
-
id:
|
|
25
|
+
id: a,
|
|
26
26
|
name: u,
|
|
27
27
|
placeholder: d ?? (D ? c : void 0),
|
|
28
28
|
value: f,
|
|
@@ -37,11 +37,11 @@ var c = s(function({ id: s, label: c, labelHidden: l, name: u, placeholder: d, v
|
|
|
37
37
|
onBlur: S,
|
|
38
38
|
onFocus: C
|
|
39
39
|
}),
|
|
40
|
-
y && /* @__PURE__ */
|
|
40
|
+
y && /* @__PURE__ */ o(t, {
|
|
41
41
|
id: k,
|
|
42
42
|
children: y
|
|
43
43
|
}),
|
|
44
|
-
b && /* @__PURE__ */
|
|
44
|
+
b && /* @__PURE__ */ o("span", {
|
|
45
45
|
id: A,
|
|
46
46
|
className: "textarea-field__helper",
|
|
47
47
|
children: b
|
package/dist/textarea.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './textarea.css';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { forwardRef as e } from "react";
|
|
4
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
5
5
|
//#region src/stories/atoms/Textarea/Textarea.tsx
|
|
6
|
-
var n =
|
|
7
|
-
return /* @__PURE__ */
|
|
6
|
+
var n = e(function({ size: e = "md", error: n = !1, bare: r = !1, className: i, describedBy: a, ...o }, s) {
|
|
7
|
+
return /* @__PURE__ */ t("textarea", {
|
|
8
8
|
ref: s,
|
|
9
9
|
className: [
|
|
10
10
|
"textarea",
|
|
11
|
-
|
|
11
|
+
e === "md" ? "" : `textarea--${e}`,
|
|
12
12
|
n ? "textarea--error" : "",
|
|
13
13
|
r ? "textarea--bare" : "",
|
|
14
14
|
i ?? ""
|