@studiolxd/brand 50.0.0 → 51.0.0

package/dist/copy-button.js

@@ -1,46 +1,48 @@
 'use client';
 import './copy-button.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { VisuallyHidden as n } from "./visually-hidden.js";
-import { Button as r } from "./button.js";
-import { n as i, t as a } from "./_shared/copy-to-clipboard.js";
-import { forwardRef as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { t as r } from "./_shared/focusable-when-disabled.js";
+import { Button as i } from "./button.js";
+import { n as a, r as o, t as s } from "./_shared/copy.js";
+import { forwardRef as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/molecules/CopyButton/CopyButton.tsx
-var u = o(function({ value: o, children: u, label: d, copiedLabel: f, errorLabel: p, variant: m = "ghost", size: h, feedbackDuration: g = a, onCopy: _, onCopyError: v, className: y, ...b }, x) {
-	let S = e("copy"), { status: C, copy: w } = i(g), T = async () => {
-		let e = await w(o);
-		e.ok ? _?.(e.text) : v?.(e.error);
-	}, E = C === "copied" ? S("copied", f) : C === "error" ? S("error", p) : "", D = u == null ? null : C === "copied" ? S("copied", f) : C === "error" ? S("error", p) : u;
-	return /* @__PURE__ */ l(s, { children: [u == null ? /* @__PURE__ */ c(r, {
-		...b,
-		ref: x,
-		variant: m,
-		...h ? { size: h } : {},
+var f = c(function({ value: r, children: c, label: f, copiedLabel: p, errorLabel: m, variant: h = "ghost", size: g, feedbackDuration: _ = a, onCopy: v, onCopyError: y, className: b, ...x }, S) {
+	let C = e("copy", s), { status: w, copy: T } = o(_), E = async () => {
+		let e = await T(r);
+		e.ok ? v?.(e.text) : y?.(e.error);
+	}, D = w === "copied" ? C("copied", p) : w === "error" ? C("error", m) : "", O = c == null ? null : w === "copied" ? C("copied", p) : w === "error" ? C("error", m) : c;
+	return /* @__PURE__ */ d(l, { children: [c == null ? /* @__PURE__ */ u(i, {
+		...x,
+		ref: S,
+		variant: h,
+		...g ? { size: g } : {},
 		iconOnly: !0,
-		"aria-label": S("label", d),
-		onClick: T,
-		className: ["copy-button", y].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ c(t, {
-			name: C === "copied" ? "check" : "copy",
+		"aria-label": C("label", f),
+		onClick: E,
+		className: ["copy-button", b].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ u(t, {
+			name: w === "copied" ? "check" : "copy",
 			size: "sm"
 		})
-	}) : /* @__PURE__ */ l(r, {
-		...b,
-		ref: x,
-		variant: m,
-		...h ? { size: h } : {},
-		onClick: T,
-		className: ["copy-button", y].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ c(t, {
-			name: C === "copied" ? "check" : "copy",
+	}) : /* @__PURE__ */ d(i, {
+		...x,
+		ref: S,
+		variant: h,
+		...g ? { size: g } : {},
+		onClick: E,
+		className: ["copy-button", b].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ u(t, {
+			name: w === "copied" ? "check" : "copy",
 			size: "sm"
-		}), D]
-	}), /* @__PURE__ */ c(n, {
+		}), O]
+	}), /* @__PURE__ */ u(n, {
 		role: "status",
-		children: E
+		children: D
 	})] });
 });
+r(f);
 //#endregion
-export { u as CopyButton };
+export { f as CopyButton };

package/dist/copyable-value.js

@@ -1,101 +1,101 @@
 'use client';
 import './copyable-value.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { Icon as t } from "./icon.js";
 import { VisuallyHidden as n } from "./visually-hidden.js";
 import { Button as r } from "./button.js";
-import { n as i } from "./_shared/copy-to-clipboard.js";
-import { forwardRef as a, isValidElement as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { r as i, t as a } from "./_shared/copy.js";
+import { forwardRef as o, isValidElement as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/atoms/CopyableValue/CopyableValue.tsx
-var u = 6, d = 12, f = new Set([
+var d = 6, f = 12, p = new Set([
 	"/",
 	"-",
 	"_",
 	"."
 ]);
-function p(e) {
-	if (e.length <= u) return {
+function m(e) {
+	if (e.length <= d) return {
 		head: "",
 		tail: e
 	};
-	let t = Math.max(0, e.length - d);
-	for (let n = e.length - 2; n >= t; n--) if (f.has(e[n])) return {
+	let t = Math.max(0, e.length - f);
+	for (let n = e.length - 2; n >= t; n--) if (p.has(e[n])) return {
 		head: e.slice(0, n),
 		tail: e.slice(n)
 	};
 	return {
-		head: e.slice(0, e.length - u),
-		tail: e.slice(e.length - u)
+		head: e.slice(0, e.length - d),
+		tail: e.slice(e.length - d)
 	};
 }
-function m(e) {
+function h(e) {
 	if (e == null || typeof e == "boolean") return "";
 	if (typeof e == "string") return e;
 	if (typeof e == "number") return String(e);
 	if (Array.isArray(e)) {
 		let t = "";
 		for (let n of e) {
-			let e = m(n);
+			let e = h(n);
 			if (e === null) return null;
 			t += e;
 		}
 		return t;
 	}
-	return o(e) ? m(e.props.children) : null;
+	return s(e) ? h(e.props.children) : null;
 }
-var h = 24, g = a(function({ children: a, copyText: o, copyLabel: u, copiedLabel: d, className: f }, g) {
-	let _ = e("copy"), { status: v, copy: y } = i(), b = v === "copied", x = ["copyable-value", f].filter(Boolean).join(" "), S = typeof a == "string", C = S ? p(a) : null, w = S ? null : m(a), T = S ? a : w ?? "", E = !S && w !== null && !/\s/.test(w) && w.length <= h, D = /* @__PURE__ */ c(r, {
+var g = 24, _ = o(function({ children: o, copyText: s, copyLabel: d, copiedLabel: f, className: p }, _) {
+	let v = e("copy", a), { status: y, copy: b } = i(), x = y === "copied", S = ["copyable-value", p].filter(Boolean).join(" "), C = typeof o == "string", w = C ? m(o) : null, T = C ? null : h(o), E = C ? o : T ?? "", D = !C && T !== null && !/\s/.test(T) && T.length <= g, O = /* @__PURE__ */ l(r, {
 		iconOnly: !0,
 		variant: "ghost",
 		size: "sm",
-		"aria-label": _("label", u),
-		onClick: () => y(() => o ?? T),
+		"aria-label": v("label", d),
+		onClick: () => b(() => s ?? E),
 		className: "copyable-value__copy",
-		children: /* @__PURE__ */ c(t, {
-			name: b ? "check" : "copy",
+		children: /* @__PURE__ */ l(t, {
+			name: x ? "check" : "copy",
 			size: "sm"
 		})
-	}), O;
-	if (S) {
-		let { head: e, tail: t } = C;
-		O = /* @__PURE__ */ l("span", {
+	}), k;
+	if (C) {
+		let { head: e, tail: t } = w;
+		k = /* @__PURE__ */ u("span", {
 			className: "copyable-value__value",
-			children: [e, /* @__PURE__ */ l("span", {
+			children: [e, /* @__PURE__ */ u("span", {
 				className: "copyable-value__tail",
 				children: [
 					t,
 					"⁠",
-					D
+					O
 				]
 			})]
 		});
-	} else O = E ? /* @__PURE__ */ l("span", {
+	} else k = D ? /* @__PURE__ */ u("span", {
 		className: "copyable-value__tail",
 		children: [
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("span", {
 				className: "copyable-value__value",
-				children: a
+				children: o
 			}),
 			"⁠",
-			D
+			O
 		]
-	}) : /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ c("span", {
+	}) : /* @__PURE__ */ u(c, { children: [
+		/* @__PURE__ */ l("span", {
 			className: "copyable-value__value",
-			children: a
+			children: o
 		}),
 		"⁠",
-		D
+		O
 	] });
-	return /* @__PURE__ */ l("span", {
-		ref: g,
-		className: x,
-		children: [O, /* @__PURE__ */ c(n, {
+	return /* @__PURE__ */ u("span", {
+		ref: _,
+		className: S,
+		children: [k, /* @__PURE__ */ l(n, {
 			role: "status",
-			children: b ? _("copied", d) : ""
+			children: x ? v("copied", f) : ""
 		})]
 	});
 });
 //#endregion
-export { g as CopyableValue };
+export { _ as CopyableValue };

package/dist/data-table.js

@@ -1,100 +1,106 @@
 'use client';
 import './data-table.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
+import { r as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { Skeleton as n } from "./skeleton.js";
-import { Pagination as r } from "./pagination.js";
-import { Table as i, TableBody as a, TableCell as o, TableHead as s, TableHeader as c, TableRow as l } from "./table.js";
-import { InputField as u } from "./input-field.js";
+import { t as r } from "./_shared/pagination.js";
+import { a as i, n as a, o, r as s, s as c, t as l } from "./_shared/table.js";
+import { t as u } from "./_shared/inputfield.js";
 import { EmptyState as d } from "./empty-state.js";
 import { useId as f, useState as p } from "react";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 import { flexRender as g, getCoreRowModel as _, getFilteredRowModel as v, getPaginationRowModel as y, getSortedRowModel as b, useReactTable as x } from "@tanstack/react-table";
+//#region src/stories/messages/es/dataTable.ts
+var S = {
+	empty: "Sin resultados",
+	search: "Buscar…"
+};
+//#endregion
 //#region src/stories/organisms/DataTable/DataTable.tsx
-function S(e, t) {
+function C(e, t) {
 	let n = t.columnDef.meta?.align;
 	return n && n !== "start" ? `data-table__${e}--${n}` : "";
 }
-function C({ columns: C, data: w, ariaLabel: T, ariaLabelledBy: E, searchColumnId: D, search: O, searchPlaceholder: k, searchClearLabel: A, toolbar: j, footerActions: M, pageSize: N = 10, emptyMessage: P, emptyDescription: F, isLoading: I, pagination: L, headerLabels: R, paginationLabels: z, className: B }) {
+function w({ columns: w, data: T, ariaLabel: E, ariaLabelledBy: D, searchColumnId: O, search: k, searchPlaceholder: A, searchClearLabel: j, toolbar: M, footerActions: N, pageSize: P = 10, emptyMessage: F, emptyDescription: I, isLoading: L, pagination: R, headerLabels: z, paginationLabels: B, className: V }) {
 	"use no memo";
-	let V = e("dataTable"), [H, U] = p([]), [W, G] = p([]), K = x({
-		data: w,
-		columns: C,
+	let H = e("dataTable", S), [U, W] = p([]), [G, K] = p([]), q = x({
+		data: T,
+		columns: w,
 		state: {
-			sorting: H,
-			columnFilters: W
+			sorting: U,
+			columnFilters: G
 		},
-		onSortingChange: U,
-		onColumnFiltersChange: G,
+		onSortingChange: W,
+		onColumnFiltersChange: K,
 		getCoreRowModel: _(),
 		getSortedRowModel: b(),
 		getFilteredRowModel: v(),
-		...L ? { manualPagination: !0 } : {
+		...R ? { manualPagination: !0 } : {
 			getPaginationRowModel: y(),
-			initialState: { pagination: { pageSize: N } }
+			initialState: { pagination: { pageSize: P } }
 		}
-	}), q = L?.pageSize ?? N, J = D || O ? V("search", k) : "", Y = `${f()}-search`;
+	}), J = R?.pageSize ?? P, Y = O || k ? H("search", A) : "", X = `${f()}-search`;
 	return /* @__PURE__ */ h("div", {
-		className: ["data-table", B].filter(Boolean).join(" "),
+		className: ["data-table", V].filter(Boolean).join(" "),
 		children: [
-			(D || O || j) && /* @__PURE__ */ h("div", {
+			(O || k || M) && /* @__PURE__ */ h("div", {
 				className: "data-table__toolbar",
-				children: [O ? /* @__PURE__ */ m(u, {
+				children: [k ? /* @__PURE__ */ m(u, {
 					className: "data-table__search",
-					id: Y,
+					id: X,
 					kind: "search",
 					clearable: !0,
-					label: J,
+					label: Y,
 					labelHidden: !0,
-					...A ? { clearLabel: A } : {},
-					value: O.value,
-					onChange: (e) => O.onChange(e.target.value)
-				}) : D && /* @__PURE__ */ m(u, {
+					...j ? { clearLabel: j } : {},
+					value: k.value,
+					onChange: (e) => k.onChange(e.target.value)
+				}) : O && /* @__PURE__ */ m(u, {
 					className: "data-table__search",
-					id: Y,
+					id: X,
 					kind: "search",
 					clearable: !0,
-					label: J,
+					label: Y,
 					labelHidden: !0,
-					...A ? { clearLabel: A } : {},
-					value: K.getColumn(D)?.getFilterValue() ?? "",
-					onChange: (e) => K.getColumn(D)?.setFilterValue(e.target.value)
-				}), j && /* @__PURE__ */ m("div", {
+					...j ? { clearLabel: j } : {},
+					value: q.getColumn(O)?.getFilterValue() ?? "",
+					onChange: (e) => q.getColumn(O)?.setFilterValue(e.target.value)
+				}), M && /* @__PURE__ */ m("div", {
 					className: "data-table__toolbar-actions",
-					children: j
+					children: M
 				})]
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "data-table__scroll",
-				children: /* @__PURE__ */ h(i, {
-					"aria-label": T,
-					"aria-labelledby": E,
-					"aria-busy": I || void 0,
-					children: [/* @__PURE__ */ m(s, { children: K.getHeaderGroups().map((e) => /* @__PURE__ */ m(l, { children: e.headers.map((e) => {
-						let n = e.column.getIsSorted(), r = e.column.getCanSort(), i = S("header-cell", e.column), a = e.column.columnDef.meta?.headerHidden === !0, o = e.isPlaceholder ? null : g(e.column.columnDef.header, e.getContext());
-						return /* @__PURE__ */ m(c, {
+				children: /* @__PURE__ */ h(l, {
+					"aria-label": E,
+					"aria-labelledby": D,
+					"aria-busy": L || void 0,
+					children: [/* @__PURE__ */ m(i, { children: q.getHeaderGroups().map((e) => /* @__PURE__ */ m(c, { children: e.headers.map((e) => {
+						let n = e.column.getIsSorted(), r = e.column.getCanSort(), i = C("header-cell", e.column), a = e.column.columnDef.meta?.headerHidden === !0, s = e.isPlaceholder ? null : g(e.column.columnDef.header, e.getContext());
+						return /* @__PURE__ */ m(o, {
 							className: ["data-table__header-cell", i].filter(Boolean).join(" "),
 							sortable: r,
 							sorted: n === "asc" || n === "desc" ? n : !1,
 							onSort: r ? () => e.column.toggleSorting() : void 0,
 							sticky: e.column.columnDef.meta?.sticky,
-							...R,
-							children: a ? /* @__PURE__ */ m(t, { children: o }) : o
+							...z,
+							children: a ? /* @__PURE__ */ m(t, { children: s }) : s
 						}, e.id);
-					}) }, e.id)) }), /* @__PURE__ */ m(a, { children: I ? Array.from({ length: q }).map((e, t) => /* @__PURE__ */ m(l, {
+					}) }, e.id)) }), /* @__PURE__ */ m(a, { children: L ? Array.from({ length: J }).map((e, t) => /* @__PURE__ */ m(c, {
 						"aria-hidden": "true",
-						children: C.map((e, t) => /* @__PURE__ */ m(o, { children: /* @__PURE__ */ m(n, {}) }, t))
-					}, t)) : K.getRowModel().rows.length === 0 ? /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(o, {
-						colSpan: C.length,
+						children: w.map((e, t) => /* @__PURE__ */ m(s, { children: /* @__PURE__ */ m(n, {}) }, t))
+					}, t)) : q.getRowModel().rows.length === 0 ? /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(s, {
+						colSpan: w.length,
 						children: /* @__PURE__ */ m(d, {
 							size: "sm",
-							title: V("empty", P),
-							description: F
+							title: H("empty", F),
+							description: I
 						})
-					}) }) : K.getRowModel().rows.map((e) => /* @__PURE__ */ m(l, {
+					}) }) : q.getRowModel().rows.map((e) => /* @__PURE__ */ m(c, {
 						selected: e.getIsSelected(),
-						children: e.getVisibleCells().map((e) => /* @__PURE__ */ m(o, {
-							className: ["data-table__cell", S("cell", e.column)].filter(Boolean).join(" "),
+						children: e.getVisibleCells().map((e) => /* @__PURE__ */ m(s, {
+							className: ["data-table__cell", C("cell", e.column)].filter(Boolean).join(" "),
 							sticky: e.column.columnDef.meta?.sticky,
 							children: g(e.column.columnDef.cell, e.getContext())
 						}, e.id))
@@ -103,26 +109,26 @@ function C({ columns: C, data: w, ariaLabel: T, ariaLabelledBy: E, searchColumnI
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "data-table__footer",
-				children: L ? /* @__PURE__ */ m(r, {
-					total: L.total,
-					page: L.page,
-					pageSize: L.pageSize,
-					onPageChange: L.onPageChange,
-					onPageSizeChange: L.onPageSizeChange,
+				children: R ? /* @__PURE__ */ m(r, {
+					total: R.total,
+					page: R.page,
+					pageSize: R.pageSize,
+					onPageChange: R.onPageChange,
+					onPageSizeChange: R.onPageSizeChange,
 					showTotal: !0,
-					afterPageSize: M,
-					...z
+					afterPageSize: N,
+					...B
 				}) : /* @__PURE__ */ m(r, {
-					total: K.getFilteredRowModel().rows.length,
-					page: K.getState().pagination.pageIndex + 1,
-					pageSize: K.getState().pagination.pageSize,
-					onPageChange: (e) => K.setPageIndex(e - 1),
-					afterPageSize: M,
-					...z
+					total: q.getFilteredRowModel().rows.length,
+					page: q.getState().pagination.pageIndex + 1,
+					pageSize: q.getState().pagination.pageSize,
+					onPageChange: (e) => q.setPageIndex(e - 1),
+					afterPageSize: N,
+					...B
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { C as DataTable };
+export { w as DataTable };

package/dist/date-picker-field.js

@@ -1,44 +1,39 @@
 'use client';
 import './date-picker-field.css';
 import { n as e } from "./_shared/form-size.js";
-import { ErrorText as t } from "./error-text.js";
-import { Label as n } from "./label.js";
-import { n as r } from "./_shared/field-labels.js";
-import { t as i } from "./_shared/datepicker.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n as t } from "./_shared/field-optional.js";
+import { n } from "./_shared/field-labels.js";
+import { a as r, n as i } from "./_shared/fieldshell.js";
+import { t as a } from "./_shared/datepicker.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePickerField/DatePickerField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, errorMessage: d, helperText: f, error: p = !1, size: m, className: h, ...g }, _) {
-	let v = r(u), y = e(m), b = o(), x = a ?? b, S = d ? `${x}-error` : void 0, C = f ? `${x}-helper` : void 0, w = [S, C].filter(Boolean).join(" ") || void 0, T = p || !!d;
-	return /* @__PURE__ */ c("div", {
-		className: ["date-picker-field", h].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(n, {
-				htmlFor: x,
-				hidden: v,
-				size: y,
-				children: l
-			}),
-			/* @__PURE__ */ s(i, {
-				calendarLabel: l,
-				...g,
-				ref: _,
-				id: x,
-				size: y,
-				error: T,
-				"aria-describedby": w
-			}),
-			d && /* @__PURE__ */ s(t, {
-				id: S,
-				children: d
-			}),
-			f && /* @__PURE__ */ s("span", {
-				id: C,
-				className: "date-picker-field__helper",
-				children: f
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, errorMessage: f, helperText: p, error: m = !1, size: h, className: g, ..._ }, v) {
+	let y = n(d), b = e(h), x = t(l, _.required), S = r({
+		id: o,
+		error: m,
+		errorMessage: f,
+		helperText: p
+	}), { id: C } = S;
+	return /* @__PURE__ */ s(i, {
+		field: S,
+		block: "date-picker-field",
+		className: g,
+		label: c,
+		optional: x,
+		optionalLabel: u,
+		labelHidden: y,
+		size: b,
+		children: /* @__PURE__ */ s(a, {
+			calendarLabel: c,
+			..._,
+			ref: v,
+			id: C,
+			size: b,
+			error: S.hasError,
+			"aria-describedby": S.describedBy
+		})
 	});
 });
 //#endregion
-export { l as DatePickerField };
+export { c as DatePickerField };