@studiolxd/brand 38.12.4

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/_shared/appshellcontext.js

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/sections/AppShell/AppShellContext.tsx
+var n = e(null);
+function r() {
+	let e = t(n);
+	if (!e) throw Error("useAppShell must be used within AppShell");
+	return e;
+}
+//#endregion
+export { r as n, n as t };

package/dist/_shared/calendargrid.js

@@ -0,0 +1,199 @@
+import { Icon as e } from "../icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+//#region src/stories/molecules/_shared/calendarGrid.tsx
+function c(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function l(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth();
+}
+function u(e, t) {
+	return new Date(e.getFullYear(), e.getMonth() + t, 1);
+}
+function d(e) {
+	let t = new Date(e.getFullYear(), e.getMonth(), 1), n = t.getDay() - 1;
+	n < 0 && (n = 6);
+	let r = new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate(), i = Math.ceil((n + r) / 7) * 7, a = [];
+	for (let e = n; e > 0; e--) {
+		let n = new Date(t);
+		n.setDate(n.getDate() - e), a.push({
+			date: n,
+			outside: !0
+		});
+	}
+	for (let t = 1; t <= r; t++) a.push({
+		date: new Date(e.getFullYear(), e.getMonth(), t),
+		outside: !1
+	});
+	let o = i - a.length, s = a[a.length - 1].date;
+	for (let e = 1; e <= o; e++) {
+		let t = new Date(s);
+		t.setDate(t.getDate() + e), a.push({
+			date: t,
+			outside: !0
+		});
+	}
+	return a;
+}
+function f(e) {
+	let t = [];
+	for (let n = 0; n < e.length; n += 7) t.push(e.slice(n, n + 7));
+	return t;
+}
+function p(e, t = "narrow") {
+	let n = new Intl.DateTimeFormat(e, { weekday: t }), r = new Intl.DateTimeFormat(e, { weekday: "long" });
+	return Array.from({ length: 7 }, (e, t) => {
+		let i = new Date(2025, 0, 6 + t);
+		return {
+			short: n.format(i),
+			long: r.format(i)
+		};
+	});
+}
+function m({ block: e, rowModifier: n, weekdays: r }) {
+	return /* @__PURE__ */ t("div", {
+		role: "row",
+		className: [`${e}__row`, n && `${e}__row--${n}`].filter(Boolean).join(" "),
+		children: r.map(({ short: n, long: r }) => /* @__PURE__ */ t("div", {
+			role: "columnheader",
+			className: `${e}__weekday`,
+			"aria-label": r,
+			children: /* @__PURE__ */ t("abbr", {
+				title: r,
+				children: n
+			})
+		}, r))
+	});
+}
+function h({ block: r, title: i, titleId: a, navigable: o = !0, previousLabel: s, nextLabel: c, prevDisabled: l = !1, nextDisabled: u = !1, onPrev: d, onNext: f, chevronSize: p, onTitleClick: m, titleExpanded: h, titleRef: g, children: _ }) {
+	return /* @__PURE__ */ n("div", {
+		className: `${r}__header`,
+		children: [
+			o && /* @__PURE__ */ t("button", {
+				type: "button",
+				className: `${r}__nav`,
+				"aria-label": s,
+				disabled: l,
+				onClick: d,
+				children: /* @__PURE__ */ t(e, {
+					name: "chevron",
+					size: p,
+					className: `${r}__chevron--prev`
+				})
+			}),
+			/* @__PURE__ */ t("h2", {
+				id: a,
+				className: `${r}__title`,
+				"aria-live": "polite",
+				children: m ? /* @__PURE__ */ t("button", {
+					type: "button",
+					ref: g,
+					className: `${r}__title-button`,
+					"aria-expanded": h,
+					onClick: m,
+					children: i
+				}) : i
+			}),
+			o && /* @__PURE__ */ t("button", {
+				type: "button",
+				className: `${r}__nav`,
+				"aria-label": c,
+				disabled: u,
+				onClick: f,
+				children: /* @__PURE__ */ t(e, {
+					name: "chevron",
+					size: p
+				})
+			}),
+			_
+		]
+	});
+}
+function g(e, t, n) {
+	return t && e < t ? t : n && e > n ? n : e;
+}
+function _(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t);
+}
+function v(e, t) {
+	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
+	return new Date(n.getFullYear(), n.getMonth(), Math.min(e.getDate(), r));
+}
+function y(e) {
+	return `${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`;
+}
+function b({ month: e, onMonthChange: t, selected: n, onActivate: u, minDate: d, maxDate: f }) {
+	let [p, m] = s(() => n ?? /* @__PURE__ */ new Date()), h = o(/* @__PURE__ */ new Map()), b = o(!1), x = a(() => {
+		if (l(p, e)) return p;
+		if (n && l(n, e)) return n;
+		let t = /* @__PURE__ */ new Date();
+		return l(t, e) ? t : new Date(e.getFullYear(), e.getMonth(), 1);
+	}, [
+		p,
+		e,
+		n
+	]);
+	i(() => {
+		b.current && (b.current = !1, h.current.get(y(x))?.focus());
+	}, [x]);
+	let S = r((n) => {
+		let r = g(n, d, f);
+		b.current = !0, m(r), l(r, e) || t(new Date(r.getFullYear(), r.getMonth(), 1));
+	}, [
+		f,
+		d,
+		e,
+		t
+	]), C = r((e) => {
+		let t = x, n = null;
+		switch (e.key) {
+			case "ArrowLeft":
+				n = _(t, -1);
+				break;
+			case "ArrowRight":
+				n = _(t, 1);
+				break;
+			case "ArrowUp":
+				n = _(t, -7);
+				break;
+			case "ArrowDown":
+				n = _(t, 7);
+				break;
+			case "Home":
+				n = _(t, -((t.getDay() + 6) % 7));
+				break;
+			case "End":
+				n = _(t, 6 - (t.getDay() + 6) % 7);
+				break;
+			case "PageUp":
+				n = v(t, e.shiftKey ? -12 : -1);
+				break;
+			case "PageDown":
+				n = v(t, e.shiftKey ? 12 : 1);
+				break;
+			case "Enter":
+			case " ":
+				u && (e.preventDefault(), u(t));
+				return;
+			default: return;
+		}
+		e.preventDefault(), S(n);
+	}, [
+		x,
+		S,
+		u
+	]), w = r((e) => (t) => {
+		let n = y(e);
+		t ? h.current.set(n, t) : h.current.delete(n);
+	}, []);
+	return {
+		activeDate: x,
+		isTabbable: r((e) => c(e, x), [x]),
+		cellRef: w,
+		onKeyDown: C,
+		onCellFocus: r((e) => m(e), [])
+	};
+}
+//#endregion
+export { l as a, u as c, c as i, b as l, d as n, h as o, p as r, m as s, f as t };

package/dist/_shared/copy-to-clipboard.js

@@ -0,0 +1,30 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+//#region src/stories/constants/copy-to-clipboard.ts
+var r = 1500;
+function i(i = r) {
+	let [a, o] = n("idle");
+	return t(() => {
+		if (a === "idle") return;
+		let e = setTimeout(() => o("idle"), i);
+		return () => clearTimeout(e);
+	}, [a, i]), {
+		status: a,
+		copy: e(async (e) => {
+			let t = typeof e == "function" ? e() : e;
+			try {
+				return await navigator.clipboard.writeText(t), o("copied"), {
+					ok: !0,
+					text: t
+				};
+			} catch (e) {
+				return o("error"), {
+					ok: !1,
+					text: t,
+					error: e
+				};
+			}
+		}, [])
+	};
+}
+//#endregion
+export { i as n, r as t };

package/dist/_shared/css-properties.js

@@ -0,0 +1,12 @@
+import { useMemo as e } from "react";
+//#region src/stories/constants/css-properties.ts
+function t(t) {
+	let n = JSON.stringify(t);
+	return e(() => (e) => {
+		if (!e) return;
+		let t = Object.entries(JSON.parse(n));
+		for (let [n, r] of t) r == null ? e.style.removeProperty(n) : e.style.setProperty(n, r);
+	}, [n]);
+}
+//#endregion
+export { t };

package/dist/_shared/datepicker.js

@@ -0,0 +1,172 @@
+import '../datepicker.css';
+import { Icon as e } from "../icon.js";
+import { Input as t } from "../input.js";
+import { Popover as n } from "../popover.js";
+import { Calendar as r } from "../calendar.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as o, useCallback as s, useId as c, useMemo as l, useRef as ee, useState as u } from "react";
+//#region src/stories/molecules/DatePicker/dateMask.ts
+var d = {
+	day: "dd",
+	month: "mm",
+	year: "aaaa"
+}, f = /[‎‏؜]/g, p = new Date(2026, 8, 25);
+function m(e, t) {
+	return String(e).padStart(t, "0");
+}
+function h(e) {
+	let t = new Intl.DateTimeFormat(e, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	}).formatToParts(p), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(f, "").trim() !== "")?.value.replace(f, "").trim() || "/", i = {
+		day: 2,
+		month: 2,
+		year: 4
+	};
+	function a(e) {
+		let t = {
+			day: e.getDate(),
+			month: e.getMonth() + 1,
+			year: e.getFullYear()
+		};
+		return n.map((e) => m(t[e], i[e])).join(r);
+	}
+	function o(e) {
+		return n.map((t) => e[t]).join(r);
+	}
+	function s(e) {
+		let t = e.replace(f, "").trim();
+		if (/\p{L}/u.test(t)) return null;
+		let r = t.split(/\D+/).filter(Boolean);
+		if (r.length !== 3) return null;
+		let i = {};
+		if (n.forEach((e, t) => {
+			i[e] = r[t];
+		}), i.year.length !== 4 || i.day.length > 2 || i.month.length > 2) return null;
+		let a = Number(i.year), o = Number(i.month), s = Number(i.day), c = new Date(a, o - 1, s);
+		return c.getFullYear() !== a || c.getMonth() !== o - 1 || c.getDate() !== s ? null : c;
+	}
+	return {
+		order: n,
+		separator: r,
+		format: a,
+		mask: o,
+		parse: s
+	};
+}
+//#endregion
+//#region src/stories/molecules/DatePicker/DatePicker.tsx
+function g(e) {
+	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+var _ = o(function({ value: o, onChange: f, placeholder: p, maskLetters: m = d, invalidMessage: _ = "Escribe una fecha completa, con el día, el mes y el año.", openCalendarLabel: v = "Abrir calendario", minDate: y, maxDate: b, disabledDates: x, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: te, "aria-describedby": ne, "aria-label": re, calendarLabel: k = "Calendario", previousMonthLabel: A, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, onBlur: I, className: L }, R) {
+	let [z, B] = u(!1), V = l(() => h(E), [E]), H = o instanceof Date ? V.format(o) : "", [U, W] = u(H), [G, K] = u(H);
+	H !== G && (K(H), W(H));
+	let q = ee(null), J = s((e) => {
+		q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
+	}, [R]), Y = U.trim(), X = Y ? V.parse(U) : null, Z = Y !== "" && !X, ie = T || Z, Q = `${c()}-date-picker-invalid`, ae = [te ?? ne, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, oe = s((e) => {
+		(w || C) && e || B(e);
+	}, [C, w]), $ = s((e) => {
+		let t = e.target.value;
+		if (W(t), t.trim() === "") {
+			f?.(null);
+			return;
+		}
+		let n = V.parse(t);
+		n && f?.(n);
+	}, [V, f]), se = s((e) => {
+		if (e.key === "ArrowDown" && !w && !C) {
+			e.preventDefault(), B(!0);
+			return;
+		}
+		e.key === "Escape" && z && (e.preventDefault(), B(!1));
+	}, [
+		C,
+		z,
+		w
+	]), ce = s((e) => {
+		W(V.format(e)), f?.(e), B(!1), requestAnimationFrame(() => q.current?.focus());
+	}, [V, f]), le = /* @__PURE__ */ i("button", {
+		type: "button",
+		className: "date-picker__button",
+		"aria-label": v,
+		"aria-haspopup": "dialog",
+		"aria-expanded": z,
+		disabled: C,
+		tabIndex: w ? -1 : void 0,
+		children: /* @__PURE__ */ i(e, {
+			name: "calendar",
+			size: "sm",
+			className: "date-picker__glyph"
+		})
+	});
+	return /* @__PURE__ */ a("div", {
+		className: [
+			"date-picker",
+			S === "md" ? "" : `date-picker--${S}`,
+			L ?? ""
+		].filter(Boolean).join(" "),
+		children: [
+			O && /* @__PURE__ */ i("input", {
+				type: "hidden",
+				name: O,
+				value: o instanceof Date ? g(o) : ""
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "date-picker__control",
+				children: [/* @__PURE__ */ i(t, {
+					ref: J,
+					id: D,
+					className: "date-picker__input",
+					type: "text",
+					inputMode: "numeric",
+					autoComplete: "off",
+					size: S,
+					error: ie,
+					value: U,
+					placeholder: p ?? V.mask(m),
+					disabled: C,
+					readOnly: w,
+					"aria-label": re,
+					"aria-describedby": ae,
+					onChange: $,
+					onKeyDown: se,
+					onBlur: I
+				}), /* @__PURE__ */ i(n, {
+					trigger: le,
+					label: k,
+					open: z,
+					onOpenChange: oe,
+					side: "bottom",
+					align: "end",
+					sideOffset: -1,
+					className: "date-picker__popover",
+					children: /* @__PURE__ */ i(r, {
+						value: X ?? o ?? null,
+						onChange: ce,
+						gridLabel: F ?? k,
+						previousMonthLabel: A,
+						nextMonthLabel: j,
+						previousYearsLabel: M,
+						nextYearsLabel: N,
+						yearGridLabel: P,
+						minDate: y,
+						maxDate: b,
+						disabledDates: x,
+						locale: E,
+						size: S
+					})
+				})]
+			}),
+			Z && /* @__PURE__ */ i("span", {
+				id: Q,
+				className: "date-picker__message",
+				role: "alert",
+				children: _
+			})
+		]
+	});
+});
+//#endregion
+export { _ as t };

package/dist/_shared/dialogsurface.js

@@ -0,0 +1,23 @@
+import '../dialogsurface.css';
+import { jsx as e } from "react/jsx-runtime";
+import { Dialog as t } from "@base-ui/react/dialog";
+//#region src/stories/molecules/_shared/dialogSurface.tsx
+var n = (...e) => e.filter(Boolean).join(" ");
+function r({ className: r }) {
+	return /* @__PURE__ */ e(t.Backdrop, { className: n("dialog-overlay", r) });
+}
+function i({ layout: t, noTitle: r = !1, className: i, children: a }) {
+	return /* @__PURE__ */ e("header", {
+		className: n("dialog-header", `dialog-header--${t}`, r && "dialog-header--no-title", i),
+		children: a
+	});
+}
+function a({ className: t, children: r, ...i }) {
+	return /* @__PURE__ */ e("div", {
+		className: n("dialog-footer", t),
+		...i,
+		children: r
+	});
+}
+//#endregion
+export { i as n, r, a as t };

package/dist/_shared/dropdownitems.js

@@ -0,0 +1,80 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Menu as r } from "@base-ui/react/menu";
+//#region src/stories/molecules/_shared/dropdownItems.tsx
+function i({ children: e, ...n }) {
+	return /* @__PURE__ */ t("a", {
+		...n,
+		children: e
+	});
+}
+function a(r, i) {
+	return i ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+		"aria-hidden": "true",
+		children: i
+	}), r] }) : /* @__PURE__ */ t(e, { children: r });
+}
+function o(e) {
+	return e.reduce((e, t) => {
+		let n = t.type === "radio", r = e[e.length - 1];
+		return r && r.radio === n ? r.items.push(t) : e.push({
+			radio: n,
+			items: [t]
+		}), e;
+	}, []);
+}
+function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, radioValue: l, onRadioValueChange: u }) {
+	let d = (e, o) => {
+		if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: i }, o);
+		if (e.type === "label") return c ? /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ t(r.GroupLabel, {
+			className: c,
+			children: e.label
+		}) }, o) : null;
+		if (e.type === "radio") return /* @__PURE__ */ t(r.RadioItem, {
+			className: n(),
+			value: e.value,
+			disabled: e.disabled,
+			closeOnClick: e.closeOnSelect !== !1,
+			children: a(e.label, e.icon)
+		}, o);
+		let l = a(e.label, e.icon);
+		return e.type === "link" ? e.disabled ? /* @__PURE__ */ t(r.Item, {
+			className: n(e.destructive),
+			disabled: !0,
+			children: l
+		}, o) : /* @__PURE__ */ t(r.Item, {
+			className: n(e.destructive),
+			render: (t) => s({
+				...t,
+				href: e.href,
+				className: t.className ?? n(e.destructive),
+				children: l
+			})
+		}, o) : /* @__PURE__ */ t(r.Item, {
+			className: n(e.destructive),
+			disabled: e.disabled,
+			closeOnClick: e.closeOnSelect !== !1,
+			onClick: e.disabled ? void 0 : () => {
+				if (e.closeOnSelect === !1) {
+					e.onClick();
+					return;
+				}
+				setTimeout(() => e.onClick(), 0);
+			},
+			children: l
+		}, o);
+	}, f = e;
+	if (!f.some((e) => e.type === "radio")) return f.map(d);
+	let p = 0;
+	return o(f).map((e, n) => {
+		let i = p;
+		p += e.items.length;
+		let a = e.items.map((e, t) => d(e, i + t));
+		return e.radio ? /* @__PURE__ */ t(r.RadioGroup, {
+			value: l,
+			onValueChange: (e) => u?.(String(e)),
+			children: a
+		}, `radio-${n}`) : a;
+	});
+}
+//#endregion
+export { s as n, i as t };

package/dist/_shared/env.js

@@ -0,0 +1,6 @@
+//#region src/stories/constants/env.ts
+function e() {
+	return globalThis.process?.env?.NODE_ENV !== "production";
+}
+//#endregion
+export { e as t };

package/dist/_shared/field-labels.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/constants/field-labels.tsx
+var n = e(void 0);
+function r(e, r = !1) {
+	let i = t(n);
+	return e ?? i ?? r;
+}
+//#endregion
+export { r as n, n as t };

package/dist/_shared/form-size.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/constants/form-size.tsx
+var n = e(void 0);
+function r(e) {
+	let r = t(n);
+	return e ?? r ?? "md";
+}
+//#endregion
+export { r as n, n as t };