@studiolxd/brand 50.0.0 → 51.0.1

package/dist/_shared/searchform.js

@@ -0,0 +1,65 @@
+import '../searchform.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./form-size.js";
+import { InputField as r } from "../input-field.js";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/searchForm.ts
+var c = {
+	label: "Buscar",
+	placeholder: "Buscar…",
+	submit: "Buscar"
+}, l = i(function({ id: i, className: l, name: u = "q", value: d, defaultValue: f, onChange: p, onSubmit: m, action: h, method: g = "get", label: _, labelHidden: v = !0, placeholder: y, submitLabel: b, size: x, disabled: S, describedBy: C, controls: w }, T) {
+	let E = e("searchForm", c), D = n(x === "xl" ? void 0 : x), O = x === "xl" ? "xl" : D, k = O === "xl" ? "lg" : O, A = a(), j = i ?? A;
+	function M(e) {
+		let t = String(new FormData(e.currentTarget).get(u) ?? "").trim();
+		if (m) {
+			e.preventDefault(), t && m(t);
+			return;
+		}
+		t || e.preventDefault();
+	}
+	return /* @__PURE__ */ s("form", {
+		className: [
+			"search-form",
+			O === "md" ? "" : `search-form--${O}`,
+			l
+		].filter(Boolean).join(" "),
+		role: "search",
+		"aria-label": E("label", _),
+		action: h,
+		method: g,
+		onSubmit: M,
+		children: [/* @__PURE__ */ o(r, {
+			ref: T,
+			className: "search-form__field",
+			id: j,
+			name: u,
+			label: E("label", _),
+			labelHidden: v,
+			type: "text",
+			autoComplete: "off",
+			enterKeyHint: "search",
+			placeholder: E("placeholder", y),
+			value: d,
+			defaultValue: f,
+			disabled: S,
+			size: k,
+			onChange: p,
+			"aria-describedby": C,
+			...w ? { "aria-controls": w } : {}
+		}), /* @__PURE__ */ o("button", {
+			className: "search-form__submit",
+			type: "submit",
+			disabled: S,
+			"aria-label": E("submit", b),
+			children: /* @__PURE__ */ o(t, {
+				name: "arrow",
+				className: "search-form__submit-glyph"
+			})
+		})]
+	});
+});
+//#endregion
+export { l as t };

package/dist/_shared/select.js

@@ -0,0 +1,163 @@
+import '../select.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { n } from "./portal-container.js";
+import { Children as r, createContext as i, forwardRef as a, isValidElement as o, useContext as s, useMemo as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Select as f } from "@base-ui/react/select";
+//#region src/stories/messages/es/select.ts
+var p = { placeholder: "Seleccionar…" };
+//#endregion
+//#region src/stories/atoms/Select/Select.tsx
+function m(e) {
+	return Array.isArray(e.options);
+}
+var h = i(null);
+function g(e, t) {
+	r.forEach(e, (e) => {
+		if (!o(e)) return;
+		let n = e.props ?? {};
+		if (e.type === S || typeof n.value == "string" && e.type !== _) {
+			typeof n.value == "string" && t.set(n.value, n.children);
+			return;
+		}
+		n.children != null && g(n.children, t);
+	});
+}
+function _({ children: e, onValueChange: t, ...n }) {
+	let r = c(() => {
+		let t = /* @__PURE__ */ new Map();
+		return g(e, t), t;
+	}, [e]);
+	return /* @__PURE__ */ u(h.Provider, {
+		value: r,
+		children: /* @__PURE__ */ u(f.Root, {
+			onValueChange: t ? (e) => t(e) : void 0,
+			...n,
+			children: e
+		})
+	});
+}
+var v = a(function({ placeholder: e, children: t, ...n }, r) {
+	let i = s(h);
+	return /* @__PURE__ */ u(f.Value, {
+		ref: r,
+		...n,
+		children: (n) => typeof t == "function" ? t(n) : t ?? (n == null || n === "" ? e ?? null : i?.get(n) ?? n)
+	});
+}), y = a(function({ className: e, children: t, ...n }, r) {
+	let i = ["select__group", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u(f.Group, {
+		ref: r,
+		className: i,
+		...n,
+		children: t
+	});
+}), b = a(function({ size: e = "md", className: n, children: r, ...i }, a) {
+	let o = [
+		"select",
+		e === "md" ? "" : `select--${e}`,
+		n ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ d(f.Trigger, {
+		ref: a,
+		className: o,
+		...i,
+		children: [r, /* @__PURE__ */ u(t, {
+			name: "chevron",
+			className: "select__icon"
+		})]
+	});
+}), x = a(function({ size: e = "md", container: t, className: r, children: i, side: a = "bottom", align: o = "start", sideOffset: s = -1, ...c }, l) {
+	let d = n(t), p = [
+		"select__content",
+		e === "md" ? "" : `select__content--${e}`,
+		r ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u(f.Portal, {
+		container: d,
+		children: /* @__PURE__ */ u(f.Positioner, {
+			className: "select__positioner",
+			side: a,
+			align: o,
+			sideOffset: s,
+			alignItemWithTrigger: !1,
+			children: /* @__PURE__ */ u(f.Popup, {
+				ref: l,
+				className: p,
+				...c,
+				children: i
+			})
+		})
+	});
+}), S = a(function({ className: e, children: t, ...n }, r) {
+	let i = ["select__item", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u(f.Item, {
+		ref: r,
+		className: i,
+		...n,
+		children: /* @__PURE__ */ u(f.ItemText, { children: t })
+	});
+}), C = a(function({ className: e, children: t, ...n }, r) {
+	let i = ["select__label", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u(f.GroupLabel, {
+		ref: r,
+		className: i,
+		...n,
+		children: t
+	});
+}), w = a(function({ className: e, ...t }, n) {
+	let r = ["select__separator", e ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ u(f.Separator, {
+		ref: n,
+		className: r,
+		...t
+	});
+});
+function T({ value: e, label: t, "aria-label": n }) {
+	return /* @__PURE__ */ u(S, {
+		value: e,
+		"aria-label": n,
+		children: t
+	}, e);
+}
+function E({ override: t }) {
+	return /* @__PURE__ */ u(l, { children: e("select", p)("placeholder", t) });
+}
+var D = a(function({ options: e, value: t, defaultValue: n, placeholder: r, disabled: i, readOnly: a, size: o = "md", onValueChange: s, id: c, name: l, required: f, onBlur: p, "aria-label": h, "aria-describedby": g, "aria-invalid": S, container: w, className: D }, O) {
+	return /* @__PURE__ */ d(_, {
+		value: t,
+		defaultValue: n,
+		disabled: i,
+		readOnly: a,
+		name: l,
+		required: f,
+		onValueChange: s,
+		children: [/* @__PURE__ */ u(b, {
+			ref: O,
+			size: o,
+			className: D,
+			id: c,
+			onBlur: p,
+			"aria-label": h,
+			"aria-describedby": g,
+			"aria-invalid": S || void 0,
+			children: /* @__PURE__ */ u(v, { placeholder: /* @__PURE__ */ u(E, { override: r }) })
+		}), /* @__PURE__ */ u(x, {
+			size: o,
+			container: w,
+			children: e.map((e, t) => m(e) ? /* @__PURE__ */ d(y, { children: [/* @__PURE__ */ u(C, { children: e.label }), e.options.map(T)] }, `group-${t}`) : T(e))
+		})]
+	});
+}), O = Object.assign(D, {
+	Root: _,
+	Trigger: b,
+	Value: v,
+	Content: x,
+	Group: y,
+	Label: C,
+	Item: S,
+	Separator: w
+});
+//#endregion
+export { C as a, b as c, S as i, v as l, x as n, _ as o, y as r, w as s, O as t, m as u };

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 { CloseButton as r } from "../close-button.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/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 { Select as 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 };