@studiolxd/brand 38.12.4

package/dist/table-of-contents.css

@@ -0,0 +1 @@
+.table-of-contents{font-size:var(--table-of-contents-item-font-size)}.table-of-contents.table-of-contents--sticky{max-block-size:var(--table-of-contents-sticky-max-block-size);position:sticky;inset-block-start:var(--table-of-contents-sticky-offset);overflow-y:auto}.table-of-contents__title{margin-block:0 var(--table-of-contents-title-space-after);font-size:var(--table-of-contents-title-font-size);font-weight:var(--table-of-contents-title-font-weight);color:var(--table-of-contents-title-color);margin-inline:0}.table-of-contents__list.list{font-size:inherit}.table-of-contents__item+.table-of-contents__item{margin-block-start:var(--table-of-contents-gap)}.table-of-contents__item{padding-inline-start:calc(var(--table-of-contents-item-padding-inline-start) + var(--table-of-contents-item-level,0) * var(--table-of-contents-item-indent))}.table-of-contents__item--level-0{--table-of-contents-item-level:0}.table-of-contents__item--level-1{--table-of-contents-item-level:1}.table-of-contents__item--level-2{--table-of-contents-item-level:2}.table-of-contents__item--level-3{--table-of-contents-item-level:3}.table-of-contents__item--level-4{--table-of-contents-item-level:4}.table-of-contents__item--level-5{--table-of-contents-item-level:5}.table-of-contents__link{padding-block:var(--table-of-contents-item-padding-block);box-shadow:none;font-size:var(--table-of-contents-item-font-size);line-height:var(--table-of-contents-item-line-height);color:var(--table-of-contents-item-color);transition:box-shadow var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing), color var(--table-of-contents-transition-duration) var(--table-of-contents-transition-easing);display:block}.table-of-contents__link:hover{color:var(--table-of-contents-item-color);box-shadow:inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color)}.table-of-contents__link:focus-visible{outline:var(--table-of-contents-focus-ring-width) solid var(--table-of-contents-focus-ring-color);outline-offset:var(--table-of-contents-focus-ring-offset)}.table-of-contents__link.table-of-contents__link--active{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color);color:var(--table-of-contents-item-active-color);font-weight:var(--table-of-contents-item-active-font-weight)}.table-of-contents__link.table-of-contents__link--active:hover{box-shadow:inset var(--table-of-contents-item-active-marker-width) 0 0 var(--table-of-contents-item-active-marker-color), inset 0 calc(-1 * var(--table-of-contents-item-hover-line-width)) 0 0 var(--table-of-contents-item-hover-line-color);color:var(--table-of-contents-item-active-color)}

package/dist/table-of-contents.js

@@ -0,0 +1,45 @@
+import './table-of-contents.css';
+import { Link as e } from "./link.js";
+import { List as t } from "./list.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+//#region src/stories/molecules/TableOfContents/TableOfContents.tsx
+function a(e, t) {
+	return Math.min(Math.max(e - t, 0), 5);
+}
+var o = i(function({ items: i, activeId: o, ariaLabel: s = "En esta página", title: c, sticky: l = !1, onItemClick: u, className: d, ...f }, p) {
+	if (i.length === 0) return null;
+	let m = Math.min(...i.map((e) => e.level));
+	return /* @__PURE__ */ r("nav", {
+		ref: p,
+		className: [
+			"table-of-contents",
+			l ? "table-of-contents--sticky" : "",
+			d ?? ""
+		].filter(Boolean).join(" "),
+		"aria-label": s,
+		...f,
+		children: [c && /* @__PURE__ */ n("p", {
+			className: "table-of-contents__title",
+			children: c
+		}), /* @__PURE__ */ n(t, {
+			type: "plain",
+			className: "table-of-contents__list",
+			children: i.map((t) => {
+				let r = t.id === o;
+				return /* @__PURE__ */ n("li", {
+					className: `table-of-contents__item table-of-contents__item--level-${a(t.level, m)}`,
+					children: /* @__PURE__ */ n(e, {
+						href: `#${t.id}`,
+						className: ["table-of-contents__link", r ? "table-of-contents__link--active" : ""].filter(Boolean).join(" "),
+						"aria-current": r ? "location" : void 0,
+						onClick: u ? (e) => u(t, e) : void 0,
+						children: t.label
+					})
+				}, t.id);
+			})
+		})]
+	});
+});
+//#endregion
+export { o as TableOfContents };

package/dist/table.css

@@ -0,0 +1 @@
+.table__wrapper{width:100%;overflow-x:auto}.table{border-collapse:collapse;width:100%;font-family:var(--table-font-family);font-size:var(--table-font-size);font-weight:var(--table-font-weight);line-height:var(--table-line-height);color:var(--table-color);background:var(--table-bg)}.table__header{padding-block:var(--table-header-padding-block);padding-inline:var(--table-header-padding-inline);font-weight:var(--table-header-font-weight);text-align:left;border-bottom-width:var(--table-header-border-width);border-bottom-style:solid;border-bottom-color:var(--table-header-border-color);white-space:nowrap}.table__header-content{align-items:center;gap:var(--table-header-content-gap);font:inherit;color:inherit;text-align:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.table__header-content:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:var(--table-focus-ring-offset)}.table__sort-icon{color:var(--table-sort-icon-color);transition:transform var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing);flex-shrink:0;transform:rotate(90deg)}.table__header-content:hover .table__sort-icon{color:var(--table-sort-icon-active-color)}.table__header--sorted-asc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(-90deg)}.table__header--sorted-desc .table__sort-icon{color:var(--table-sort-icon-active-color);transform:rotate(90deg)}.table__row{transition:box-shadow var(--table-transition-duration) var(--table-transition-easing), color var(--table-transition-duration) var(--table-transition-easing)}.table tbody .table__row:last-child .table__cell,.table tbody .table__row:last-child .table__header{border-bottom:none}.table__row.table__row--selected{color:var(--table-row-selected-color);font-weight:var(--table-row-selected-font-weight)}.table__row.table__row--interactive{cursor:pointer}.table__row.table__row--interactive:hover{box-shadow:inset var(--table-row-hover-marker-width) 0 0 var(--table-row-hover-marker-color)}.table__row.table__row--interactive:focus-visible{outline:var(--table-focus-ring-width) solid var(--table-focus-ring-color);outline-offset:calc(var(--table-focus-ring-offset) * -1)}.table tfoot{background-color:var(--table-footer-bg);border-top-width:var(--table-footer-border-width);border-top-style:solid;border-top-color:var(--table-footer-border-color)}.table tfoot .table__cell{font-weight:var(--table-footer-font-weight)}.table__cell{padding-block:var(--table-cell-padding-block);padding-inline:var(--table-cell-padding-inline);border-bottom-width:var(--table-border-width);border-bottom-style:solid;border-bottom-color:var(--table-row-border-color)}.table__header.table__header--actions{width:1px}.table__cell.table__cell--actions,.table__cell.table__cell--nowrap,.table__header.table__header--nowrap{white-space:nowrap}.table__header.table__header--sticky,.table__cell.table__cell--sticky{z-index:1;background-color:var(--table-sticky-bg);position:sticky;inset-inline-end:0}.table.table--sm{font-size:var(--table-sm-font-size)}.table.table--sm .table__header{padding-block:var(--table-sm-header-padding-block);padding-inline:var(--table-sm-header-padding-inline)}.table.table--sm .table__cell{padding-block:var(--table-sm-cell-padding-block);padding-inline:var(--table-sm-cell-padding-inline)}

package/dist/table.js

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

package/dist/tabs.css

@@ -0,0 +1 @@
+.tabs{flex-direction:column;display:flex}.tabs[data-orientation=vertical]{flex-direction:row;align-items:flex-start}.tabs__list{gap:var(--tabs-list-gap);border-block-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:row;flex-shrink:0;display:flex}.tabs__list--pill{padding-block:var(--tabs-list-gap);padding-inline:var(--tabs-list-gap);gap:var(--tabs-list-gap);border-block-end:none}.tabs[data-orientation=vertical]>.tabs__list{border-block-end:none;border-inline-end:var(--tabs-list-border-width) solid var(--tabs-list-border-color);flex-direction:column}.tabs__trigger{padding-block:var(--tabs-trigger-padding-block);padding-inline:var(--tabs-trigger-padding-inline);font-size:var(--tabs-trigger-font-size);font-weight:var(--tabs-trigger-font-weight);color:var(--tabs-trigger-color);cursor:pointer;white-space:nowrap;border-radius:var(--tabs-trigger-border-radius);transition:color var(--tabs-transition-duration) var(--tabs-transition-easing);-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.tabs__trigger:after{content:"";block-size:var(--tabs-trigger-indicator-width);border-radius:var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0 0;transition:background-color var(--tabs-transition-duration) var(--tabs-transition-easing);background-color:#0000;position:absolute;inset-block-end:calc(-1 * var(--tabs-list-border-width));inset-inline:0}.tabs__trigger[data-active]:after{background-color:var(--tabs-trigger-indicator-color)}.tabs__trigger:hover{color:var(--tabs-trigger-hover-color)}.tabs__trigger[data-active]{color:var(--tabs-trigger-active-color);font-weight:var(--tabs-trigger-active-weight)}.tabs__trigger[data-disabled]{opacity:var(--tabs-trigger-disabled-opacity);cursor:not-allowed;pointer-events:none}.tabs__trigger:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset)}.tabs[data-orientation=vertical]>.tabs__list>.tabs__trigger:after{block-size:auto;inline-size:var(--tabs-trigger-indicator-width);border-radius:0 var(--tabs-trigger-border-radius) var(--tabs-trigger-border-radius) 0;inset-block:0;inset-inline-start:auto;inset-inline-end:calc(-1 * var(--tabs-list-border-width))}.tabs__list--pill .tabs__trigger{border-radius:var(--tabs-trigger-border-radius)}.tabs__list--pill .tabs__trigger:after{display:none}.tabs__list--pill .tabs__trigger[data-active]{background-color:var(--tabs-trigger-pill-bg-active);color:var(--tabs-trigger-pill-color-active);font-weight:var(--tabs-trigger-active-weight)}.tabs__content{padding-block:var(--tabs-content-padding-block);outline:none}.tabs__content:focus-visible{outline:var(--tabs-focus-ring-width) solid var(--tabs-focus-ring-color);outline-offset:var(--tabs-focus-ring-offset);border-radius:var(--tabs-trigger-border-radius)}.tabs[data-orientation=vertical]>.tabs__content{padding-block:0;padding-inline-start:var(--tabs-content-padding-block)}

package/dist/tabs.js

@@ -0,0 +1,43 @@
+'use client';
+import './tabs.css';
+import { jsx as e } from "react/jsx-runtime";
+import { Tabs as t } from "@base-ui/react/tabs";
+//#region src/stories/atoms/Tabs/Tabs.tsx
+function n({ orientation: n = "horizontal", className: r, children: i, onValueChange: a, ...o }) {
+	return /* @__PURE__ */ e(t.Root, {
+		className: ["tabs", r].filter(Boolean).join(" "),
+		orientation: n,
+		onValueChange: a ? (e) => a(e) : void 0,
+		...o,
+		children: i
+	});
+}
+function r({ variant: n = "underline", className: r, children: i, ...a }) {
+	return /* @__PURE__ */ e(t.List, {
+		activateOnFocus: !0,
+		className: [
+			"tabs__list",
+			n === "pill" && "tabs__list--pill",
+			r
+		].filter(Boolean).join(" "),
+		...a,
+		children: i
+	});
+}
+function i({ value: n, disabled: r, className: i, children: a }) {
+	return /* @__PURE__ */ e(t.Tab, {
+		value: n,
+		disabled: r,
+		className: ["tabs__trigger", i].filter(Boolean).join(" "),
+		children: a
+	});
+}
+function a({ value: n, className: r, children: i }) {
+	return /* @__PURE__ */ e(t.Panel, {
+		value: n,
+		className: ["tabs__content", r].filter(Boolean).join(" "),
+		children: i
+	});
+}
+//#endregion
+export { n as Tabs, a as TabsContent, r as TabsList, i as TabsTrigger };

package/dist/tag.css

@@ -0,0 +1 @@
+.tag{border-radius:var(--tag-border-radius);font-family:var(--tag-font-family);font-size:var(--tag-font-size);font-weight:var(--tag-font-weight);line-height:var(--tag-line-height);padding-block:var(--tag-padding-block);padding-inline:var(--tag-padding-inline);white-space:nowrap;display:inline-block}.tag--primary{background-color:var(--tag-primary-bg);color:var(--tag-primary-color)}.tag--accent-1{background-color:var(--tag-accent-1-bg);color:var(--tag-accent-1-color)}.tag--accent-2{background-color:var(--tag-accent-2-bg);color:var(--tag-accent-2-color)}.tag--support-1{background-color:var(--tag-support-1-bg);color:var(--tag-support-1-color)}.tag--support-2{background-color:var(--tag-support-2-bg);color:var(--tag-support-2-color)}.tag--neutral{background-color:var(--tag-neutral-bg);color:var(--tag-neutral-color)}.tag--info{background-color:var(--tag-info-bg);color:var(--tag-info-color)}.tag--warning{background-color:var(--tag-warning-bg);color:var(--tag-warning-color)}.tag--success{background-color:var(--tag-success-bg);color:var(--tag-success-color)}.tag--danger{background-color:var(--tag-danger-bg);color:var(--tag-danger-color)}

package/dist/tag.js

@@ -0,0 +1,18 @@
+import './tag.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/Tag/Tag.tsx
+var n = t(function({ variant: t = "neutral", className: n, children: r, ...i }, a) {
+	return /* @__PURE__ */ e("span", {
+		ref: a,
+		className: [
+			"tag",
+			`tag--${t}`,
+			n ?? ""
+		].filter(Boolean).join(" "),
+		...i,
+		children: r
+	});
+});
+//#endregion
+export { n as Tag };

package/dist/text.css

@@ -0,0 +1 @@
+.text{color:inherit;font:inherit}strong.text{font-weight:var(--text-inline-emphasis-font-weight)}.text.text--muted{color:var(--text-inline-muted-color)}.text.text--destructive{color:var(--text-inline-destructive-color)}.text.text--success{color:var(--text-inline-success-color)}

package/dist/text.js

@@ -0,0 +1,24 @@
+import './text.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/Text/Text.tsx
+var n = t(function({ as: t = "span", tone: n = "default", className: r, children: i, ...a }, o) {
+	return /* @__PURE__ */ e(t, {
+		ref: o,
+		className: [
+			"text",
+			n === "default" ? "" : `text--${n}`,
+			r ?? ""
+		].filter(Boolean).join(" "),
+		...a,
+		children: i
+	});
+}), r = t(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ e("br", {
+		ref: r,
+		className: ["text__break", t ?? ""].filter(Boolean).join(" "),
+		...n
+	});
+});
+//#endregion
+export { r as LineBreak, n as Text };

package/dist/textarea-field.css

@@ -0,0 +1 @@
+.textarea-field{gap:var(--textarea-field-gap);flex-direction:column;display:flex}.textarea-field__helper{font-family:var(--textarea-field-helper-font-family);font-size:var(--textarea-field-helper-font-size);font-weight:var(--textarea-field-helper-font-weight);line-height:var(--textarea-field-helper-line-height);color:var(--textarea-field-helper-color)}

package/dist/textarea-field.js

@@ -0,0 +1,53 @@
+'use client';
+import './textarea-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 { Textarea as r } from "./textarea.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+//#region src/stories/molecules/TextareaField/TextareaField.tsx
+var c = s(function({ id: s, 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) {
+	let D = i(l), O = e(_), k = y ? `${s}-error` : void 0, A = b ? `${s}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
+	return /* @__PURE__ */ o("div", {
+		className: ["textarea-field", w].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(n, {
+				htmlFor: s,
+				hidden: D,
+				size: O,
+				children: c
+			}),
+			/* @__PURE__ */ a(r, {
+				ref: E,
+				...T,
+				id: s,
+				name: u,
+				placeholder: d ?? (D ? c : void 0),
+				value: f,
+				defaultValue: p,
+				rows: m,
+				disabled: h,
+				readOnly: g,
+				size: O,
+				error: M,
+				"aria-describedby": j,
+				onChange: x,
+				onBlur: S,
+				onFocus: C
+			}),
+			y && /* @__PURE__ */ a(t, {
+				id: k,
+				children: y
+			}),
+			b && /* @__PURE__ */ a("span", {
+				id: A,
+				className: "textarea-field__helper",
+				children: b
+			})
+		]
+	});
+});
+//#endregion
+export { c as TextareaField };

package/dist/textarea.css

@@ -0,0 +1 @@
+.textarea{width:var(--textarea-width);min-height:var(--textarea-min-height);padding-block:var(--textarea-padding-block);padding-inline:var(--textarea-padding-inline);border-radius:var(--textarea-border-radius);border-width:var(--textarea-border-width);border-style:var(--textarea-border-style);border-color:var(--textarea-border-color);background-color:var(--textarea-bg);color:var(--textarea-color);font-family:var(--textarea-font-family);font-size:var(--textarea-font-size);font-weight:var(--textarea-font-weight);line-height:var(--textarea-line-height);resize:var(--textarea-resize);cursor:var(--textarea-cursor);box-sizing:border-box;transition:border-color var(--textarea-transition-duration) var(--textarea-transition-easing)}.textarea::placeholder{color:var(--textarea-placeholder-color)}.textarea:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-bg);border-color:var(--textarea-focus-border-color);outline:none}.textarea:disabled{cursor:var(--textarea-disabled-cursor);background-color:var(--textarea-disabled-bg);color:var(--textarea-disabled-color);border-color:var(--textarea-disabled-border-color);pointer-events:none}.textarea.textarea--error{background-color:var(--textarea-error-bg);color:var(--textarea-error-color);border-color:var(--textarea-error-border-color)}.textarea.textarea--error::placeholder{color:var(--textarea-error-placeholder-color)}.textarea.textarea--error:focus-visible{box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg);border-color:var(--textarea-error-focus-border-color);outline:none}.textarea.textarea--sm{--textarea-min-height:var(--textarea-sm-min-height);--textarea-padding-block:var(--textarea-sm-padding-block);--textarea-padding-inline:var(--textarea-sm-padding-inline);--textarea-font-size:var(--textarea-sm-font-size)}.textarea.textarea--lg{--textarea-min-height:var(--textarea-lg-min-height);--textarea-padding-block:var(--textarea-lg-padding-block);--textarea-padding-inline:var(--textarea-lg-padding-inline);--textarea-font-size:var(--textarea-lg-font-size)}.textarea:autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:hover{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}.textarea:-webkit-autofill:focus{-webkit-text-fill-color:var(--textarea-color);caret-color:var(--textarea-color);box-shadow:inset 0 0 0 1000px var(--textarea-bg);transition:background-color 9999s ease-out}:-webkit-any(.textarea.textarea--error:-webkit-autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill,.textarea.textarea--error:autofill){-webkit-text-fill-color:var(--textarea-error-color);box-shadow:inset 0 0 0 1000px var(--textarea-error-bg)}:-webkit-any(.textarea.textarea--error:-webkit-autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}:is(.textarea.textarea--error:autofill:focus-visible,.textarea.textarea--error:autofill:focus-visible){box-shadow:inset 0 0 0 calc(var(--textarea-focus-ring-width) + var(--textarea-focus-ring-inset-offset)) var(--textarea-error-focus-ring-color), inset 0 0 0 var(--textarea-focus-ring-inset-offset) var(--textarea-error-bg), inset 0 0 0 1000px var(--textarea-error-bg)}.textarea.textarea--bare{--textarea-bg:var(--textarea-bare-bg);--textarea-border-color:var(--textarea-bare-border-color);--textarea-focus-border-color:var(--textarea-bare-border-color);--textarea-min-height:var(--textarea-bare-min-height);--textarea-padding-block:var(--textarea-bare-padding-block);--textarea-padding-inline:var(--textarea-bare-padding-inline);--textarea-focus-ring-width:var(--textarea-bare-focus-ring-width);--textarea-focus-ring-inset-offset:var(--textarea-bare-focus-ring-width);--textarea-resize:var(--textarea-bare-resize);--textarea-disabled-bg:var(--textarea-bare-disabled-bg);--textarea-disabled-border-color:var(--textarea-bare-disabled-border-color);--textarea-error-bg:var(--textarea-bare-bg)}

package/dist/textarea.js

@@ -0,0 +1,22 @@
+'use client';
+import './textarea.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/Textarea/Textarea.tsx
+var n = t(function({ size: t = "md", error: n = !1, bare: r = !1, className: i, describedBy: a, ...o }, s) {
+	return /* @__PURE__ */ e("textarea", {
+		ref: s,
+		className: [
+			"textarea",
+			t === "md" ? "" : `textarea--${t}`,
+			n ? "textarea--error" : "",
+			r ? "textarea--bare" : "",
+			i ?? ""
+		].filter(Boolean).join(" "),
+		"aria-invalid": n || void 0,
+		"aria-describedby": a,
+		...o
+	});
+});
+//#endregion
+export { n as Textarea };

package/dist/theme-switcher.css

@@ -0,0 +1 @@
+.theme-switcher__item{align-items:center;gap:var(--theme-switcher-icon-gap);display:inline-flex}.theme-switcher__list{gap:var(--theme-switcher-list-gap);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.theme-switcher__option{align-items:center;gap:var(--theme-switcher-icon-gap);font:inherit;font-size:var(--theme-switcher-list-font-size);color:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.theme-switcher__option:hover{box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;padding-block-end:var(--link-underline-offset)}.theme-switcher__option.theme-switcher__option--current{font-weight:var(--theme-switcher-list-current-font-weight);box-shadow:none;cursor:default;padding-block-end:0;text-decoration:none}.theme-switcher__option:focus-visible{outline:var(--theme-switcher-focus-ring-width) solid var(--theme-switcher-focus-ring-color);outline-offset:var(--theme-switcher-focus-ring-offset)}

package/dist/theme-switcher.js

@@ -0,0 +1,106 @@
+'use client';
+import './theme-switcher.css';
+import { Icon as e } from "./icon.js";
+import { Button as t } from "./button.js";
+import { Menu as n } from "./menu.js";
+import { DropdownField as r } from "./dropdown-field.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/molecules/ThemeSwitcher/ThemeSwitcher.tsx
+var o = [
+	{
+		value: "light",
+		icon: "sun"
+	},
+	{
+		value: "dark",
+		icon: "moon"
+	},
+	{
+		value: "system",
+		icon: "device-desktop"
+	}
+];
+function s({ value: s, onChange: c, labels: l, id: u = "theme-switcher", variant: d = "compact", layout: f = "inline", size: p = "md", className: m }) {
+	let h = {
+		group: "Tema",
+		light: "Claro",
+		dark: "Oscuro",
+		system: "Sistema",
+		...l
+	}, g = o.find((e) => e.value === s) ?? o[2];
+	if (d === "list") return /* @__PURE__ */ i("div", {
+		className: [
+			"theme-switcher",
+			"theme-switcher--list",
+			m
+		].filter(Boolean).join(" "),
+		role: "group",
+		"aria-label": h.group,
+		children: /* @__PURE__ */ i("ul", {
+			className: "theme-switcher__list",
+			children: o.map(({ value: t, icon: n }) => {
+				let r = t === s;
+				return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ a("button", {
+					type: "button",
+					className: ["theme-switcher__option", r ? "theme-switcher__option--current" : ""].filter(Boolean).join(" "),
+					"aria-pressed": r,
+					onClick: r ? void 0 : () => c?.(t),
+					children: [/* @__PURE__ */ i(e, {
+						name: n,
+						size: "sm"
+					}), /* @__PURE__ */ i("span", { children: h[t] })]
+				}) }, t);
+			})
+		})
+	});
+	let _ = o.map(({ value: t, icon: n }) => ({
+		type: "radio",
+		value: t,
+		label: /* @__PURE__ */ a("span", {
+			className: "theme-switcher__item",
+			children: [/* @__PURE__ */ i(e, {
+				name: n,
+				size: "sm"
+			}), h[t]]
+		})
+	}));
+	if (d === "icon") return /* @__PURE__ */ i(n, {
+		className: m,
+		align: "end",
+		size: p,
+		value: s,
+		onValueChange: (e) => c?.(e),
+		items: _,
+		trigger: /* @__PURE__ */ i(t, {
+			variant: "ghost",
+			size: p,
+			iconOnly: !0,
+			"aria-label": `${h.group}: ${h[g.value]}`,
+			children: /* @__PURE__ */ i(e, {
+				name: g.icon,
+				size: "md"
+			})
+		})
+	});
+	let v = [
+		"theme-switcher",
+		"theme-switcher--compact",
+		m
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ a(r, {
+		id: u,
+		label: h.group,
+		inline: f === "inline",
+		size: p,
+		className: v,
+		value: s,
+		onValueChange: (e) => c?.(e),
+		items: _,
+		children: [/* @__PURE__ */ i(e, {
+			name: g.icon,
+			size: "sm"
+		}), h[g.value]]
+	});
+}
+//#endregion
+export { s as ThemeSwitcher };

package/dist/time-field.css

@@ -0,0 +1 @@
+.time-field{gap:var(--time-field-gap);flex-direction:column;display:flex}.time-field__helper{font-family:var(--time-field-helper-font-family);font-size:var(--time-field-helper-font-size);font-weight:var(--time-field-helper-font-weight);line-height:var(--time-field-helper-line-height);color:var(--time-field-helper-color)}

package/dist/time-field.js

@@ -0,0 +1,54 @@
+'use client';
+import './time-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 { TimeSelect as r } from "./time-select.js";
+import { n as i } from "./_shared/field-labels.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s, useId as c } from "react";
+//#region src/stories/molecules/TimeField/TimeField.tsx
+var l = s(function({ id: s, label: l, labelHidden: u, value: d, step: f, name: p, size: m, disabled: h, readOnly: g, required: _, error: v = !1, errorMessage: y, helperText: b, className: x, hoursLabel: S, minutesLabel: C, onChange: w, onBlur: T }, E) {
+	let D = i(u), O = e(m), k = c(), A = s ?? k, j = y ? `${A}-error` : void 0, M = b ? `${A}-helper` : void 0, N = [j, M].filter(Boolean).join(" ") || void 0, P = v || !!y;
+	return /* @__PURE__ */ o("div", {
+		className: ["time-field", x].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ a(n, {
+				id: `${A}-label`,
+				htmlFor: A,
+				hidden: D,
+				size: O,
+				children: l
+			}),
+			/* @__PURE__ */ a(r, {
+				ref: E,
+				id: A,
+				name: p,
+				value: d,
+				step: f,
+				size: O,
+				disabled: h,
+				readOnly: g,
+				required: _,
+				error: P,
+				hoursLabel: S,
+				minutesLabel: C,
+				"aria-labelledby": `${A}-label`,
+				"aria-describedby": N,
+				onChange: w,
+				onBlur: T
+			}),
+			y && /* @__PURE__ */ a(t, {
+				id: j,
+				children: y
+			}),
+			b && /* @__PURE__ */ a("span", {
+				id: M,
+				className: "time-field__helper",
+				children: b
+			})
+		]
+	});
+});
+//#endregion
+export { l as TimeField };

package/dist/time-select.css

@@ -0,0 +1 @@
+.time-select{align-items:center;gap:var(--time-select-gap);display:inline-flex}.time-select__sep{color:var(--time-select-sep-color);font-family:var(--time-select-sep-font-family);line-height:var(--time-select-sep-line-height);-webkit-user-select:none;user-select:none}

package/dist/time-select.js

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