@studiolxd/brand 49.28.0 → 51.0.0

package/dist/_shared/sheet.js

@@ -0,0 +1,58 @@
+import '../sheet.css';
+import { r as e } from "./brandmessagescontext.js";
+import { VisuallyHidden as t } from "../visually-hidden.js";
+import { n } from "./portal-container.js";
+import { t as r } from "./closebutton.js";
+import { n as i, r as a, t as o } from "./dialogsurface.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Dialog as l } from "@base-ui/react/dialog";
+//#region src/stories/messages/es/sheet.ts
+var u = { close: "Cerrar" };
+//#endregion
+//#region src/stories/molecules/Sheet/Sheet.tsx
+function d({ className: e, ...t }) {
+	return /* @__PURE__ */ s(o, {
+		className: ["sheet__footer", e].filter(Boolean).join(" "),
+		...t
+	});
+}
+function f({ open: o, onOpenChange: f, side: p = "right", title: m, titleHidden: h = !1, description: g, footer: _, children: v, closeLabel: y, hideClose: b = !1, trigger: x, container: S, onAnimationEndCapture: C, className: w, ...T }) {
+	let E = e("sheet", u), D = n(S);
+	return /* @__PURE__ */ c(l.Root, {
+		open: o,
+		onOpenChange: (e) => f(e),
+		children: [x && /* @__PURE__ */ s(l.Trigger, { render: x }), /* @__PURE__ */ c(l.Portal, {
+			container: D,
+			children: [/* @__PURE__ */ s(a, { className: "sheet__overlay" }), /* @__PURE__ */ c(l.Popup, {
+				className: ["sheet", w].filter(Boolean).join(" "),
+				"data-side": p,
+				onAnimationEndCapture: C,
+				...T,
+				children: [
+					/* @__PURE__ */ c(i, {
+						layout: "stacked",
+						className: "sheet__header",
+						children: [h ? /* @__PURE__ */ s(l.Title, { render: /* @__PURE__ */ s(t, { children: m }) }) : /* @__PURE__ */ s(l.Title, {
+							className: "sheet__title",
+							children: m
+						}), g != null && /* @__PURE__ */ s(l.Description, {
+							className: "sheet__description",
+							children: g
+						})]
+					}),
+					!b && /* @__PURE__ */ s(l.Close, {
+						className: "sheet__close",
+						render: /* @__PURE__ */ s(r, { label: E("close", y) })
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "sheet__body",
+						children: v
+					}),
+					_ && /* @__PURE__ */ s(d, { children: _ })
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { d as n, f as t };

package/dist/_shared/side-offset.js

@@ -0,0 +1,13 @@
+//#region src/stories/constants/side-offset.ts
+function e(e, t = document.documentElement) {
+	let n = parseFloat(e);
+	return Number.isNaN(n) ? 0 : e.endsWith("rem") ? n * parseFloat(getComputedStyle(document.documentElement).fontSize) : e.endsWith("em") ? n * parseFloat(getComputedStyle(t).fontSize) : n;
+}
+function t(t) {
+	return () => {
+		let n = document.documentElement;
+		return e(getComputedStyle(n).getPropertyValue(t).trim(), n);
+	};
+}
+//#endregion
+export { t };

package/dist/_shared/slider.js

@@ -0,0 +1,43 @@
+import '../slider.css';
+import { r as e } from "./brandmessagescontext.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Slider as r } from "@base-ui/react/slider";
+//#region src/stories/messages/es/slider.ts
+var i = {
+	value: "Valor",
+	min: "Mínimo",
+	max: "Máximo",
+	valueAt: (e) => `Valor ${e}`
+};
+//#endregion
+//#region src/stories/atoms/Slider/Slider.tsx
+function a({ value: a, defaultValue: o, onValueChange: s, onValueCommitted: c, label: l, thumbLabel: u, showValue: d = !1, orientation: f = "horizontal", className: p, ...m }) {
+	let h = e("slider", i), g = a ?? o ?? 0, _ = Array.isArray(g) ? g.length : 1, v = u ?? ((e, t) => t === 1 ? h("value", l) : t === 2 ? h(e === 0 ? "min" : "max") : h("valueAt")(e + 1)), y = [
+		"slider",
+		f === "vertical" ? "slider--vertical" : "",
+		p ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n(r.Root, {
+		className: y,
+		orientation: f,
+		value: a,
+		defaultValue: o,
+		"aria-label": _ === 1 ? void 0 : l,
+		onValueChange: s ? (e) => s(e) : void 0,
+		onValueCommitted: c ? (e) => c(e) : void 0,
+		...m,
+		children: [/* @__PURE__ */ t(r.Control, {
+			className: "slider__control",
+			children: /* @__PURE__ */ n(r.Track, {
+				className: "slider__track",
+				children: [/* @__PURE__ */ t(r.Indicator, { className: "slider__indicator" }), Array.from({ length: _ }, (e, n) => /* @__PURE__ */ t(r.Thumb, {
+					index: n,
+					className: "slider__thumb",
+					getAriaLabel: () => v(n, _)
+				}, n))]
+			})
+		}), d && /* @__PURE__ */ t(r.Value, { className: "slider__value" })]
+	});
+}
+//#endregion
+export { a as t };

package/dist/_shared/spinner.js

@@ -0,0 +1,5 @@
+import '../spinner.css';
+//#region src/stories/messages/es/spinner.ts
+var e = { label: "Cargando…" };
+//#endregion
+export { e as t };

package/dist/_shared/table.js

@@ -0,0 +1,140 @@
+import '../table.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { VisuallyHidden as n } from "../visually-hidden.js";
+import { t as r } from "./overflow-focusable.js";
+import { useId as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/table.ts
+var c = {
+	actions: "Acciones",
+	sortable: "Activar ordenación",
+	sortedAscending: "Ordenado ascendente",
+	sortedDescending: "Ordenado descendente"
+};
+//#endregion
+//#region src/stories/molecules/Table/Table.tsx
+function l({ children: e, ...t }) {
+	return /* @__PURE__ */ o("thead", {
+		...t,
+		children: e
+	});
+}
+function u({ children: e, ...t }) {
+	return /* @__PURE__ */ o("tfoot", {
+		...t,
+		children: e
+	});
+}
+function d({ children: e, ...t }) {
+	return /* @__PURE__ */ o("tbody", {
+		...t,
+		children: e
+	});
+}
+function f({ sortable: r = !1, sorted: i = !1, onSort: a, actions: l = !1, actionsLabel: u, sortedAscLabel: d, sortedDescLabel: f, sortableLabel: p, sticky: m, nowrap: h = !1, children: g, className: _, scope: v = "col", ...y }) {
+	let b = e("table", c), x = [
+		"table__header",
+		r ? "table__header--sortable" : "",
+		i === "asc" ? "table__header--sorted-asc" : "",
+		i === "desc" ? "table__header--sorted-desc" : "",
+		l ? "table__header--actions" : "",
+		m === "end" ? "table__header--sticky" : "",
+		h ? "table__header--nowrap" : "",
+		_
+	].filter(Boolean).join(" ");
+	return r ? /* @__PURE__ */ s("th", {
+		...y,
+		scope: v,
+		className: x,
+		"aria-sort": i === "asc" ? "ascending" : i === "desc" ? "descending" : "none",
+		children: [/* @__PURE__ */ s("button", {
+			type: "button",
+			className: "table__header-content",
+			onClick: a,
+			children: [g, /* @__PURE__ */ o(t, {
+				name: "chevron",
+				size: "sm",
+				className: "table__sort-icon"
+			})]
+		}), /* @__PURE__ */ o(n, { children: i === "asc" ? b("sortedAscending", d) : i === "desc" ? b("sortedDescending", f) : b("sortable", p) })]
+	}) : l ? /* @__PURE__ */ o("th", {
+		...y,
+		scope: v,
+		className: x,
+		children: /* @__PURE__ */ o(n, { children: g ?? b("actions", u) })
+	}) : /* @__PURE__ */ o("th", {
+		...y,
+		scope: v,
+		className: x,
+		children: g
+	});
+}
+function p({ onClick: e, interactive: t = !1, selected: n = !1, label: r, children: i, className: a, ...s }) {
+	let c = t || !!e, l = [
+		"table__row",
+		c ? "table__row--interactive" : "",
+		n ? "table__row--selected" : "",
+		a
+	].filter(Boolean).join(" ");
+	return c ? /* @__PURE__ */ o("tr", {
+		...s,
+		className: l,
+		"aria-label": r,
+		onClick: e,
+		onKeyDown: (t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), e?.());
+		},
+		tabIndex: 0,
+		children: i
+	}) : /* @__PURE__ */ o("tr", {
+		...s,
+		className: l,
+		"aria-label": r,
+		children: i
+	});
+}
+function m({ sticky: e, actions: t = !1, nowrap: n = !1, children: r, className: i, ...a }) {
+	let s = [
+		"table__cell",
+		e === "end" ? "table__cell--sticky" : "",
+		t ? "table__cell--actions" : "",
+		n ? "table__cell--nowrap" : "",
+		i
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ o("td", {
+		...a,
+		className: s,
+		children: r
+	});
+}
+function h({ caption: e, children: t, size: n = "md", className: c, ...l }) {
+	let u = [
+		"table",
+		n === "sm" ? "table--sm" : "",
+		c ?? ""
+	].filter(Boolean).join(" "), d = a(null), f = i(), p = r(d), m = e ? { "aria-labelledby": f } : l["aria-labelledby"] ? { "aria-labelledby": l["aria-labelledby"] } : l["aria-label"] ? { "aria-label": l["aria-label"] } : void 0;
+	return /* @__PURE__ */ o("div", {
+		ref: d,
+		className: "table__wrapper",
+		...p ? {
+			tabIndex: 0,
+			...m && {
+				role: "region",
+				...m
+			}
+		} : void 0,
+		children: /* @__PURE__ */ s("table", {
+			className: u,
+			...l,
+			children: [e && /* @__PURE__ */ o("caption", {
+				id: f,
+				className: "visually-hidden",
+				children: e
+			}), t]
+		})
+	});
+}
+h.Head = l, h.Footer = u, h.Header = f, h.Body = d, h.Row = p, h.Cell = m;
+//#endregion
+export { l as a, u as i, d as n, f as o, m as r, p as s, h as t };

package/dist/_shared/timeselect.js

@@ -0,0 +1,91 @@
+import '../timeselect.css';
+import { r as e } from "./brandmessagescontext.js";
+import { t } from "./select.js";
+import { forwardRef as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/timeSelect.ts
+var o = {
+	hours: "Horas",
+	minutes: "Minutos",
+	maskHours: "HH",
+	maskMinutes: "MM"
+};
+//#endregion
+//#region src/stories/atoms/TimeSelect/TimeSelect.tsx
+function s(e) {
+	return String(e).padStart(2, "0");
+}
+var c = n(function({ value: n, onChange: c, step: l = 5, size: u = "md", disabled: d, readOnly: f, error: p, id: m, name: h, required: g, "aria-labelledby": _, "aria-describedby": v, onBlur: y, className: b, hoursLabel: x, minutesLabel: S, hoursPlaceholder: C, minutesPlaceholder: w }, T) {
+	let E = e("timeSelect", o), D = r(() => Array.from({ length: 24 }, (e, t) => ({
+		value: String(t),
+		label: s(t)
+	})), []), O = r(() => {
+		let e = [];
+		for (let t = 0; t < 60; t += l) e.push({
+			value: String(t),
+			label: s(t)
+		});
+		return e;
+	}, [l]), k = (e) => {
+		let t = parseInt(e, 10), r = n?.m ?? 0;
+		c?.({
+			h: t,
+			m: r
+		});
+	}, A = (e) => {
+		let t = n?.h ?? 0;
+		c?.({
+			h: t,
+			m: parseInt(e, 10)
+		});
+	}, j = ["time-select", b ?? ""].filter(Boolean).join(" "), M = n == null ? "" : String(n.h), N = n == null ? "" : String(n.m);
+	return /* @__PURE__ */ a("div", {
+		className: j,
+		role: "group",
+		"aria-labelledby": _,
+		"aria-describedby": v,
+		"aria-invalid": p || void 0,
+		children: [
+			/* @__PURE__ */ i(t, {
+				ref: T,
+				id: m,
+				options: D,
+				value: M,
+				placeholder: M === "" ? E("maskHours", C) : void 0,
+				size: u,
+				disabled: d,
+				readOnly: f,
+				required: g,
+				"aria-label": E("hours", x),
+				"aria-invalid": p,
+				onValueChange: k,
+				onBlur: y
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "time-select__sep",
+				"aria-hidden": "true",
+				children: ":"
+			}),
+			/* @__PURE__ */ i(t, {
+				options: O,
+				value: N,
+				placeholder: N === "" ? E("maskMinutes", w) : void 0,
+				size: u,
+				disabled: d,
+				readOnly: f,
+				required: g,
+				"aria-label": E("minutes", S),
+				"aria-invalid": p,
+				onValueChange: A,
+				onBlur: y
+			}),
+			h && /* @__PURE__ */ i("input", {
+				type: "hidden",
+				name: h,
+				value: n == null ? "" : `${s(n.h)}:${s(n.m)}`
+			})
+		]
+	});
+});
+//#endregion
+export { c as t };