@studiolxd/brand 38.12.4

package/dist/skip-link.js

@@ -0,0 +1,18 @@
+import './skip-link.css';
+/* empty css                       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/atoms/SkipLink/SkipLink.tsx
+function t({ href: t, className: n, children: r, ...i }) {
+	return /* @__PURE__ */ e("a", {
+		href: t,
+		className: [
+			"skip-link",
+			"visually-hidden",
+			n
+		].filter(Boolean).join(" "),
+		...i,
+		children: r
+	});
+}
+//#endregion
+export { t as SkipLink };

package/dist/slider.css

@@ -0,0 +1 @@
+.slider{align-items:center;gap:var(--slider-value-gap);inline-size:100%;display:flex}.slider.slider--vertical{flex-direction:column;block-size:100%;inline-size:auto}.slider__control{block-size:var(--slider-control-block-size);cursor:var(--slider-cursor);touch-action:none;flex:1;align-items:center;display:flex}.slider--vertical .slider__control{inline-size:var(--slider-control-block-size);flex-direction:column;justify-content:center;block-size:auto}.slider__track{inline-size:100%;block-size:var(--slider-track-size);background-color:var(--slider-track-bg);border-radius:var(--slider-track-border-radius);position:relative}.slider--vertical .slider__track{inline-size:var(--slider-track-size);block-size:100%}.slider__indicator{background-color:var(--slider-indicator-bg);border-radius:var(--slider-track-border-radius);position:absolute}.slider__thumb{inline-size:var(--slider-thumb-size);block-size:var(--slider-thumb-size);background-color:var(--slider-thumb-bg);border-width:var(--slider-thumb-border-width);border-style:solid;border-color:var(--slider-thumb-border-color);border-radius:var(--slider-thumb-border-radius);transition:background-color var(--slider-transition-duration) var(--slider-transition-easing)}.slider__thumb:focus-visible{outline:var(--slider-focus-ring-width) solid var(--slider-focus-ring-color);outline-offset:var(--slider-focus-ring-offset)}.slider[data-disabled]{opacity:var(--slider-disabled-opacity)}.slider[data-disabled] .slider__control{cursor:var(--slider-disabled-cursor)}.slider__value{font-family:var(--slider-value-font-family);font-size:var(--slider-value-font-size);color:var(--slider-value-color);font-variant-numeric:tabular-nums}

package/dist/slider.js

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

package/dist/sparkline.css

@@ -0,0 +1 @@
+.sparkline{--sparkline-mark-color:var(--sparkline-color);display:block;overflow:visible}.sparkline[data-series="1"]{--sparkline-mark-color:var(--chart-series-1)}.sparkline[data-series="2"]{--sparkline-mark-color:var(--chart-series-2)}.sparkline[data-series="3"]{--sparkline-mark-color:var(--chart-series-3)}.sparkline[data-series="4"]{--sparkline-mark-color:var(--chart-series-4)}.sparkline[data-series="5"]{--sparkline-mark-color:var(--chart-series-5)}.sparkline[data-series="6"]{--sparkline-mark-color:var(--chart-series-6)}.sparkline[data-series="7"]{--sparkline-mark-color:var(--chart-series-7)}.sparkline[data-series="8"]{--sparkline-mark-color:var(--chart-series-8)}.sparkline__line{fill:none;stroke:var(--sparkline-mark-color);stroke-width:var(--sparkline-line-width);stroke-linecap:round;stroke-linejoin:round}.sparkline__area{fill:var(--sparkline-mark-color);fill-opacity:var(--sparkline-fill-opacity);stroke:none}.sparkline__marker{fill:var(--sparkline-accent-color);stroke:var(--chart-surface);stroke-width:var(--chart-marker-ring-width)}.sparkline__baseline{stroke:var(--sparkline-baseline-color);stroke-width:var(--chart-grid-width)}

package/dist/sparkline.js

@@ -0,0 +1,55 @@
+import './sparkline.css';
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+//#region src/stories/atoms/Sparkline/Sparkline.tsx
+var r = {
+	width: 80,
+	height: 24,
+	markerSize: 8
+}, i = n(function({ values: n, type: i = "line", width: a = r.width, height: o = r.height, marker: s = !0, baseline: c = !0, series: l, ariaLabel: u, className: d, ...f }, p) {
+	let m = [
+		"sparkline",
+		`sparkline--${i}`,
+		d
+	].filter(Boolean).join(" "), h = n.filter((e) => Number.isFinite(e)), g = r.markerSize / 2, _ = h.length ? Math.min(...h) : 0, v = h.length ? Math.max(...h) : 1, y = v - _ || 1, b = h.map((e, t) => ({
+		x: g + (h.length > 1 ? t * (a - g * 2) / (h.length - 1) : (a - g * 2) / 2),
+		y: o - g - (e - _) / y * (o - g * 2)
+	})), x = b.map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" "), S = b[b.length - 1], C = _ < 0 && v > 0, w = o - g - (0 - _) / y * (o - g * 2);
+	return b.length === 0 ? null : /* @__PURE__ */ t("svg", {
+		ref: p,
+		className: m,
+		"data-series": l,
+		viewBox: `0 0 ${a} ${o}`,
+		width: a,
+		height: o,
+		role: u ? "img" : void 0,
+		"aria-label": u,
+		"aria-hidden": u ? void 0 : !0,
+		...f,
+		children: [
+			c && C ? /* @__PURE__ */ e("line", {
+				className: "sparkline__baseline",
+				x1: 0,
+				y1: w,
+				x2: a,
+				y2: w
+			}) : null,
+			i === "area" && S ? /* @__PURE__ */ e("path", {
+				className: "sparkline__area",
+				d: `${x} L ${S.x} ${o} L ${b[0]?.x ?? 0} ${o} Z`
+			}) : null,
+			/* @__PURE__ */ e("path", {
+				className: "sparkline__line",
+				d: x
+			}),
+			s && S ? /* @__PURE__ */ e("circle", {
+				className: "sparkline__marker",
+				cx: S.x,
+				cy: S.y,
+				r: r.markerSize / 2
+			}) : null
+		]
+	});
+});
+//#endregion
+export { i as Sparkline };

package/dist/spinner.css

@@ -0,0 +1 @@
+.spinner{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.spinner__square{display:block;overflow:visible}.spinner__stroke{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100px;animation:spinner-draw var(--spinner-animation-duration) var(--motion-easing-in-out) infinite}@keyframes spinner-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.spinner__stroke{stroke-dashoffset:0;animation:none}}.spinner--sm .spinner__square{width:var(--spinner-size-sm);height:var(--spinner-size-sm)}.spinner--sm .spinner__stroke{stroke-width:var(--spinner-border-width-sm)}.spinner--md .spinner__square{width:var(--spinner-size-md);height:var(--spinner-size-md)}.spinner--md .spinner__stroke{stroke-width:var(--spinner-border-width-md)}.spinner--lg .spinner__square{width:var(--spinner-size-lg);height:var(--spinner-size-lg)}.spinner--lg .spinner__stroke{stroke-width:var(--spinner-border-width-lg)}

package/dist/spinner.js

@@ -0,0 +1,34 @@
+import './spinner.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/stories/atoms/Spinner/Spinner.tsx
+function r() {
+	return /* @__PURE__ */ t("svg", {
+		className: "spinner__square",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ t("rect", {
+			className: "spinner__stroke",
+			x: "2",
+			y: "2",
+			width: "20",
+			height: "20",
+			pathLength: "100"
+		})
+	});
+}
+function i({ size: i = "md", label: a = "Cargando…", "aria-hidden": o }) {
+	return o ? /* @__PURE__ */ t("span", {
+		className: `spinner spinner--${i}`,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t(r, {})
+	}) : /* @__PURE__ */ n("span", {
+		className: `spinner spinner--${i}`,
+		role: "status",
+		"aria-label": a,
+		children: [/* @__PURE__ */ t(r, {}), /* @__PURE__ */ t(e, { children: a })]
+	});
+}
+//#endregion
+export { i as Spinner };

package/dist/stack.css

@@ -0,0 +1 @@
+.stack{align-items:flex-start;gap:var(--stack-gap-md);flex-direction:column;display:flex}.stack>*{max-inline-size:100%}.stack.stack--gap-sm{gap:var(--stack-gap-sm)}.stack.stack--gap-lg{gap:var(--stack-gap-lg)}.stack.stack--align-stretch{align-items:stretch}.stack.stack--mobile-reverse{flex-direction:column-reverse}@media (width>=768px){.stack.stack--mobile-reverse{flex-direction:column}}

package/dist/stack.js

@@ -0,0 +1,18 @@
+import './stack.css';
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/atoms/Stack/Stack.tsx
+function t({ gap: t = "md", align: n = "start", mobileOrder: r = "normal", children: i, className: a, ...o }) {
+	return /* @__PURE__ */ e("div", {
+		className: [
+			"stack",
+			t === "md" ? "" : `stack--gap-${t}`,
+			n === "stretch" ? "stack--align-stretch" : "",
+			r === "reverse" ? "stack--mobile-reverse" : "",
+			a
+		].filter(Boolean).join(" "),
+		...o,
+		children: i
+	});
+}
+//#endregion
+export { t as Stack };

package/dist/star-rating.css

@@ -0,0 +1 @@
+.star-rating{align-items:center;gap:var(--star-rating-gap);color:var(--star-rating-track-color);display:inline-flex}.star-rating__star{display:inline-flex;position:relative}.star-rating__glyph{--icon-size:var(--star-rating-star-size)}.star-rating__glyph--fill{color:var(--star-rating-fill-color);fill:var(--star-rating-fill-color);transition:color var(--star-rating-transition-duration) var(--star-rating-transition-easing);position:absolute;inset-block-start:0;inset-inline-start:0}.star-rating__glyph--half{clip-path:inset(0 50% 0 0)}[dir=rtl] .star-rating__glyph--half{clip-path:inset(0 0 0 50%)}.star-rating__option{cursor:var(--star-rating-cursor);display:inline-flex}.star-rating__input:focus-visible+.star-rating__star{outline:var(--star-rating-focus-ring-width) solid var(--star-rating-focus-ring-color);outline-offset:var(--star-rating-focus-ring-offset)}.star-rating__input:disabled+.star-rating__star{opacity:var(--star-rating-disabled-opacity)}.star-rating__option:has(.star-rating__input:disabled){cursor:var(--star-rating-disabled-cursor)}.star-rating.star-rating--sm{--star-rating-star-size:var(--star-rating-sm-star-size)}.star-rating.star-rating--lg{--star-rating-star-size:var(--star-rating-lg-star-size)}

package/dist/star-rating.js

@@ -0,0 +1,80 @@
+'use client';
+import './star-rating.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";
+import { useId as i, useState as a } from "react";
+//#region src/stories/atoms/StarRating/StarRating.tsx
+function o(e, t) {
+	return Math.min(Math.max(Math.round(e * 2) / 2, 0), t);
+}
+function s(e, t) {
+	return t >= e + 1 ? "full" : t >= e + .5 ? "half" : "empty";
+}
+function c({ fill: t }) {
+	return /* @__PURE__ */ r("span", {
+		className: "star-rating__star",
+		children: [/* @__PURE__ */ n(e, {
+			name: "star",
+			className: "star-rating__glyph star-rating__glyph--track"
+		}), t !== "empty" && /* @__PURE__ */ n(e, {
+			name: "star",
+			className: `star-rating__glyph star-rating__glyph--fill${t === "half" ? " star-rating__glyph--half" : ""}`
+		})]
+	});
+}
+function l({ value: e, defaultValue: l, onValueChange: u, max: d = 5, readOnly: f = !0, disabled: p = !1, size: m = "md", name: h, locale: g = "es-ES", valueLabel: _ = (e, t) => `${e.toLocaleString(g)} de ${t} estrellas`, optionLabel: v = (e, t) => `${e.toLocaleString(g)} de ${t} estrellas`, groupLabel: y = "Valoración", className: b, ...x }) {
+	let S = i(), [C, w] = a(l), [T, E] = a(void 0), D = e !== void 0, O = (D ? e : C) ?? 0, k = [
+		"star-rating",
+		m === "md" ? "" : `star-rating--${m}`,
+		f ? "" : "star-rating--input",
+		b ?? ""
+	].filter(Boolean).join(" "), A = Array.from({ length: d }, (e, t) => t);
+	if (f) {
+		let e = o(O, d);
+		return /* @__PURE__ */ n("div", {
+			className: k,
+			role: "img",
+			"aria-label": _(e, d),
+			...x,
+			children: A.map((t) => /* @__PURE__ */ n(c, { fill: s(t, e) }, t))
+		});
+	}
+	function j(e) {
+		D || w(e), u?.(e);
+	}
+	let M = T ?? Math.round(O);
+	return /* @__PURE__ */ n("div", {
+		className: k,
+		role: "radiogroup",
+		"aria-label": y,
+		onPointerLeave: () => E(void 0),
+		...x,
+		children: A.map((e) => {
+			let i = e + 1;
+			return /* @__PURE__ */ r("label", {
+				className: "star-rating__option",
+				onPointerEnter: () => {
+					p || E(i);
+				},
+				children: [
+					/* @__PURE__ */ n("input", {
+						className: "star-rating__input visually-hidden",
+						type: "radio",
+						name: h ?? S,
+						value: i,
+						checked: Math.round(O) === i,
+						disabled: p,
+						onChange: () => j(i),
+						onFocus: () => E(i),
+						onBlur: () => E(void 0)
+					}),
+					/* @__PURE__ */ n(c, { fill: i <= M ? "full" : "empty" }),
+					/* @__PURE__ */ n(t, { children: v(i, d) })
+				]
+			}, i);
+		})
+	});
+}
+//#endregion
+export { l as StarRating };

package/dist/stat-tile.css

@@ -0,0 +1 @@
+.stat-tile{align-items:flex-start;gap:var(--stat-tile-gap);padding-block:var(--stat-tile-padding-block-start) var(--stat-tile-padding-block-end);padding-inline:var(--stat-tile-padding-inline);border:var(--stat-tile-border-width) solid var(--stat-tile-border-color);border-radius:var(--stat-tile-border-radius);background-color:var(--stat-tile-bg);flex-direction:column;display:flex}.stat-tile.stat-tile--sm{gap:var(--stat-tile-sm-gap);padding-block:var(--stat-tile-sm-padding-block);padding-inline:var(--stat-tile-sm-padding-inline)}.stat-tile__label{align-items:center;gap:var(--stat-tile-label-gap);font-size:var(--stat-tile-label-font-size);font-weight:var(--stat-tile-label-font-weight);color:var(--stat-tile-label-color);margin-block:0;margin-inline:0;display:flex}.stat-tile.stat-tile--sm .stat-tile__label{font-size:var(--stat-tile-sm-label-font-size)}.stat-tile__icon{color:var(--stat-tile-icon-color);flex-shrink:0;display:inline-flex}.stat-tile .stat-tile__icon svg{--icon-size:var(--stat-tile-icon-size)}.stat-tile__value{font-size:var(--stat-tile-value-font-size);font-weight:var(--stat-tile-value-font-weight);line-height:var(--stat-tile-value-line-height);letter-spacing:var(--stat-tile-value-letter-spacing);color:var(--stat-tile-value-color);margin-block:0;margin-inline:0}.stat-tile.stat-tile--sm .stat-tile__value{font-size:var(--stat-tile-sm-value-font-size)}.stat-tile__delta{align-items:center;gap:var(--stat-tile-delta-gap);display:inline-flex}.stat-tile .stat-tile__delta-icon{--icon-size:var(--stat-tile-delta-icon-size)}.stat-tile__delta-icon--up{transform:rotate(-90deg)}.stat-tile__delta-icon--down{transform:rotate(90deg)}.stat-tile__description{font-size:var(--stat-tile-description-font-size);line-height:var(--stat-tile-description-line-height);color:var(--stat-tile-description-color);margin-block:0;margin-inline:0}

package/dist/stat-tile.js

@@ -0,0 +1,64 @@
+import './stat-tile.css';
+import { Icon as e } from "./icon.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Tag as n } from "./tag.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+//#region src/stories/molecules/StatTile/StatTile.tsx
+var o = {
+	up: "positive",
+	down: "negative",
+	flat: "neutral"
+}, s = {
+	positive: "success",
+	negative: "danger",
+	neutral: "neutral"
+}, c = {
+	up: "Sube",
+	down: "Baja",
+	flat: "Sin cambio"
+}, l = a(function({ label: a, value: l, delta: u, description: d, icon: f, size: p = "md", className: m, ...h }, g) {
+	let _ = [
+		"stat-tile",
+		p === "md" ? "" : `stat-tile--${p}`,
+		m ?? ""
+	].filter(Boolean).join(" "), v = u?.direction ?? "flat", y = u?.tone ?? o[v], b = u?.label ?? c[v];
+	return /* @__PURE__ */ i("div", {
+		ref: g,
+		className: _,
+		...h,
+		children: [
+			/* @__PURE__ */ i("p", {
+				className: "stat-tile__label",
+				children: [f && /* @__PURE__ */ r("span", {
+					className: "stat-tile__icon",
+					"aria-hidden": "true",
+					children: f
+				}), a]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "stat-tile__value",
+				children: l
+			}),
+			u && /* @__PURE__ */ i(n, {
+				variant: s[y],
+				className: "stat-tile__delta",
+				children: [
+					/* @__PURE__ */ r(e, {
+						name: "arrow",
+						size: "sm",
+						className: `stat-tile__delta-icon stat-tile__delta-icon--${v}`
+					}),
+					/* @__PURE__ */ r(t, { children: b }),
+					u.value
+				]
+			}),
+			d && /* @__PURE__ */ r("p", {
+				className: "stat-tile__description",
+				children: d
+			})
+		]
+	});
+});
+//#endregion
+export { l as StatTile };

package/dist/step-marker.css

@@ -0,0 +1 @@
+.step-marker{border-radius:var(--step-border-radius);font-family:var(--step-font-family);font-weight:var(--step-font-weight);transition:background-color var(--step-transition-duration) var(--step-transition-easing);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.step-marker--sm{inline-size:var(--step-size-sm);block-size:var(--step-size-sm);font-size:var(--step-font-size-sm)}.step-marker--md{inline-size:var(--step-size-md);block-size:var(--step-size-md);font-size:var(--step-font-size-md)}.step-marker--tone-primary{background-color:var(--step-tone-primary-bg);color:var(--step-tone-primary-color)}.step-marker--tone-accent-1{background-color:var(--step-tone-accent-1-bg);color:var(--step-tone-accent-1-color)}.step-marker--tone-accent-2{background-color:var(--step-tone-accent-2-bg);color:var(--step-tone-accent-2-color)}.step-marker--tone-support-1{background-color:var(--step-tone-support-1-bg);color:var(--step-tone-support-1-color)}.step-marker--tone-support-2{background-color:var(--step-tone-support-2-bg);color:var(--step-tone-support-2-color)}.step-marker--tone-danger{background-color:var(--step-tone-danger-bg);color:var(--step-tone-danger-color)}.step-marker--tone-success{background-color:var(--step-tone-success-bg);color:var(--step-tone-success-color)}.step-marker--tone-neutral{background-color:var(--step-tone-neutral-bg);color:var(--step-tone-neutral-color)}.step-marker--state-pending{background-color:var(--step-pending-bg);border-width:var(--step-border-width);border-style:solid;border-color:var(--step-pending-border-color);color:var(--step-pending-color)}.step-marker__icon{inline-size:var(--step-icon-size);block-size:var(--step-icon-size)}

package/dist/step-marker.js

@@ -0,0 +1,26 @@
+import './step-marker.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/stories/atoms/StepMarker/StepMarker.tsx
+function n({ state: n = "neutral", tone: r = "primary", size: i = "md", count: a, icon: o, className: s }) {
+	let c = n === "done", l = n === "pending", u = [
+		"step-marker",
+		`step-marker--${i}`,
+		`step-marker--state-${n}`,
+		!l && `step-marker--tone-${r}`,
+		s
+	].filter(Boolean).join(" "), d = a;
+	return c ? d = /* @__PURE__ */ t(e, {
+		name: "check",
+		className: "step-marker__icon"
+	}) : o && (d = /* @__PURE__ */ t(e, {
+		name: o,
+		className: "step-marker__icon"
+	})), /* @__PURE__ */ t("span", {
+		className: u,
+		"aria-hidden": "true",
+		children: d
+	});
+}
+//#endregion
+export { n as StepMarker };

package/dist/stepper.css

@@ -0,0 +1 @@
+.stepper{font-family:var(--stepper-font-family)}.stepper__compact{align-items:baseline;gap:var(--stepper-compact-gap);font-size:var(--stepper-compact-font-size);line-height:var(--stepper-line-height);flex-wrap:wrap;margin:0;display:flex}.stepper__compact-count{font-weight:var(--stepper-compact-count-font-weight);color:var(--stepper-compact-color)}.stepper__compact-label{color:var(--stepper-compact-label-color)}.stepper__list{margin:0;padding:0;list-style:none;display:none}@media (width>=768px){.stepper__compact{display:none}.stepper__list{gap:var(--stepper-gap);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}}.stepper__step{padding-block:var(--stepper-padding-block);position:relative}.stepper__step:not(:first-child):before{content:"";inline-size:calc(100% + var(--stepper-gap));block-size:var(--step-connector-thickness);translate:0 calc(-1 * var(--step-connector-thickness) / 2);background-color:var(--step-connector-color);z-index:0;position:absolute;inset-block-start:calc(var(--stepper-padding-block) + var(--step-size-md) / 2);inset-inline-end:50%}.stepper__step--completed:before,.stepper__step--current:before{background-color:var(--step-connector-done-color)}.stepper__item{z-index:1;justify-items:center;gap:var(--stepper-item-gap);text-align:center;font-size:var(--stepper-font-size);font-weight:var(--stepper-font-weight);line-height:var(--stepper-line-height);color:var(--stepper-label-color);display:grid;position:relative}.stepper__step--pending .stepper__item{color:var(--stepper-pending-color)}.stepper__step--current .stepper__item{font-weight:var(--stepper-current-font-weight)}.stepper__marker{flex-shrink:0}.stepper__text{gap:var(--stepper-text-gap);display:grid}.stepper__description{font-size:var(--stepper-description-font-size);font-weight:var(--stepper-font-weight);color:var(--stepper-description-color)}.stepper__item--action{cursor:pointer;background:0 0;border:0;inline-size:100%;margin:0;padding:0;font-family:inherit}.stepper__label{justify-self:center;padding-block-end:var(--stepper-label-hover-line-offset)}.stepper__item--action:hover .stepper__label{box-shadow:inset 0 calc(-1 * var(--stepper-label-hover-line-width)) 0 0 currentColor}.stepper__item--action:focus-visible{outline-width:var(--stepper-focus-ring-width);outline-style:solid;outline-color:var(--stepper-focus-ring-color);outline-offset:var(--stepper-focus-ring-offset)}

package/dist/stepper.js

@@ -0,0 +1,67 @@
+'use client';
+import './stepper.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { StepMarker as t } from "./step-marker.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/stories/molecules/Stepper/Stepper.tsx
+function a({ steps: a, current: o, onStepSelect: s, label: c = "Progreso", compactLabel: l = (e, t) => `Paso ${e} de ${t}`, labels: u, className: d, id: f }) {
+	if (a.length < 2) return null;
+	let p = {
+		completed: "Completado",
+		current: "Paso actual",
+		pending: "Pendiente",
+		...u
+	}, m = a.length, h = Math.min(Math.max(o, 0), m - 1), g = a[h];
+	return /* @__PURE__ */ i("div", {
+		id: f,
+		className: ["stepper", d].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ i("p", {
+			className: "stepper__compact",
+			children: [/* @__PURE__ */ r("span", {
+				className: "stepper__compact-count",
+				children: l(h + 1, m)
+			}), /* @__PURE__ */ r("span", {
+				className: "stepper__compact-label",
+				children: g.label
+			})]
+		}), /* @__PURE__ */ r("ol", {
+			className: "stepper__list",
+			"aria-label": c,
+			children: a.map((a, o) => {
+				let c = o < h ? "completed" : o === h ? "current" : "pending", l = s !== void 0 && c !== "current" && (a.reachable ?? c === "completed"), u = /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(t, {
+					state: c === "completed" ? "done" : c === "current" ? "current" : "pending",
+					count: o + 1,
+					className: "stepper__marker"
+				}), /* @__PURE__ */ i("span", {
+					className: "stepper__text",
+					children: [
+						/* @__PURE__ */ i(e, { children: [p[c], ": "] }),
+						/* @__PURE__ */ r("span", {
+							className: "stepper__label",
+							children: a.label
+						}),
+						a.description && /* @__PURE__ */ r("span", {
+							className: "stepper__description",
+							children: a.description
+						})
+					]
+				})] });
+				return /* @__PURE__ */ r("li", {
+					className: `stepper__step stepper__step--${c}`,
+					children: l ? /* @__PURE__ */ r("button", {
+						type: "button",
+						className: "stepper__item stepper__item--action",
+						onClick: () => s(o, a),
+						children: u
+					}) : /* @__PURE__ */ r("span", {
+						className: "stepper__item",
+						"aria-current": c === "current" ? "step" : void 0,
+						children: u
+					})
+				}, a.id ?? o);
+			})
+		})]
+	});
+}
+//#endregion
+export { a as Stepper };

package/dist/steps.css

@@ -0,0 +1 @@
+.steps{gap:var(--steps-gap);margin:0;padding:0;list-style:none;display:grid}.steps--horizontal{grid-template-columns:repeat(auto-fit, minmax(var(--steps-column-min-size), 1fr))}.steps__item{gap:var(--steps-marker-gap);grid-template-columns:auto 1fr;align-items:stretch;display:grid}.steps--horizontal .steps__item{grid-template-columns:1fr}.steps__marker{position:relative}.steps--vertical .steps__item:not(:last-child) .steps__marker:after{content:"";inline-size:var(--step-connector-thickness);background-color:var(--step-connector-color);position:absolute;inset-block-start:var(--step-size-md);inset-block-end:calc(-1 * var(--steps-gap));inset-inline-start:calc((var(--step-size-md) - var(--step-connector-thickness)) / 2)}.steps--horizontal .steps__item:not(:last-child) .steps__marker:after{content:"";block-size:var(--step-connector-thickness);background-color:var(--step-connector-color);position:absolute;inset-block-start:calc((var(--step-size-md) - var(--step-connector-thickness)) / 2);inset-inline-start:var(--step-size-md);inset-inline-end:calc(-1 * var(--steps-gap))}.steps__body{gap:var(--steps-body-gap);align-content:start;display:grid}.steps .steps__title{align-items:center;gap:var(--steps-title-gap);margin:0;display:flex}.steps .steps__description{color:var(--step-description-color);margin:0}.steps__body>:first-child{margin-block-start:0}.steps__body>:last-child{margin-block-end:0}

package/dist/steps.js

@@ -0,0 +1,94 @@
+'use client';
+import './steps.css';
+import { Icon as e } from "./icon.js";
+import { Heading as t } from "./heading.js";
+import { Paragraph as n } from "./paragraph.js";
+import { StepMarker as r } from "./step-marker.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Children as o, createContext as s, useContext as c } from "react";
+//#region src/stories/organisms/Steps/Steps.tsx
+var l = s(null);
+function u({ items: s, orientation: c = "vertical", tone: u, badgeVariant: d, titleLevel: f = 3, titleSize: p = 1, label: m, children: h, className: g, id: _ }) {
+	let v = [
+		"steps",
+		`steps--${c}`,
+		g
+	].filter(Boolean).join(" "), y = u ?? d ?? "primary";
+	return h === void 0 ? /* @__PURE__ */ i("ol", {
+		id: _,
+		className: v,
+		"aria-label": m,
+		children: (s ?? []).map((o, s) => /* @__PURE__ */ a("li", {
+			className: "steps__item",
+			children: [/* @__PURE__ */ i("span", {
+				className: "steps__marker",
+				children: /* @__PURE__ */ i(r, {
+					state: "neutral",
+					tone: y,
+					count: s + 1,
+					icon: o.icon,
+					className: "steps__number"
+				})
+			}), /* @__PURE__ */ a("div", {
+				className: "steps__body",
+				children: [/* @__PURE__ */ a(t, {
+					level: f,
+					size: p,
+					className: "steps__title",
+					children: [o.icon && /* @__PURE__ */ i(e, {
+						name: o.icon,
+						className: "steps__icon"
+					}), o.title]
+				}), o.description && /* @__PURE__ */ i(n, {
+					className: "steps__description",
+					children: o.description
+				})]
+			})]
+		}, o.id ?? s))
+	}) : /* @__PURE__ */ i("ol", {
+		id: _,
+		className: v,
+		"aria-label": m,
+		children: o.map(h, (e, t) => /* @__PURE__ */ i(l.Provider, {
+			value: {
+				index: t,
+				tone: y,
+				titleLevel: f,
+				titleSize: p
+			},
+			children: e
+		}))
+	});
+}
+function d({ title: n, icon: o, children: s, className: u, ...d }) {
+	let f = c(l);
+	if (f === null) throw Error("`Step` solo funciona dentro de `Steps`: de ahí saca su número.");
+	let { index: p, tone: m, titleLevel: h, titleSize: g } = f;
+	return /* @__PURE__ */ a("li", {
+		className: ["steps__item", u].filter(Boolean).join(" "),
+		...d,
+		children: [/* @__PURE__ */ i("span", {
+			className: "steps__marker",
+			children: /* @__PURE__ */ i(r, {
+				state: "neutral",
+				tone: m,
+				count: p + 1,
+				icon: o,
+				className: "steps__number"
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: "steps__body",
+			children: [/* @__PURE__ */ a(t, {
+				level: h,
+				size: g,
+				className: "steps__title",
+				children: [o && /* @__PURE__ */ i(e, {
+					name: o,
+					className: "steps__icon"
+				}), n]
+			}), s]
+		})]
+	});
+}
+//#endregion
+export { d as Step, u as Steps };

package/dist/switcher-field.css

@@ -0,0 +1 @@
+.switcher-field{align-items:flex-start;gap:var(--switcher-field-stack-gap);flex-direction:column;display:flex}.switcher-field__control{align-items:center;gap:var(--switcher-field-gap);padding-block:var(--switcher-field-padding-block);cursor:var(--switcher-field-cursor);display:inline-flex}.switcher-field__label{font-family:var(--switcher-field-label-font-family);font-size:var(--switcher-field-label-font-size);font-weight:var(--switcher-field-label-font-weight);line-height:var(--switcher-field-label-line-height);color:var(--switcher-field-label-color);letter-spacing:var(--switcher-field-label-letter-spacing)}.switcher-field.switcher-field--disabled .switcher-field__control{cursor:var(--switcher-field-disabled-cursor)}.switcher-field__helper{font-family:var(--switcher-field-helper-font-family);font-size:var(--switcher-field-helper-font-size);font-weight:var(--switcher-field-helper-font-weight);line-height:var(--switcher-field-helper-line-height);color:var(--switcher-field-helper-color)}.switcher-field.switcher-field--sm{--switcher-field-gap:var(--switcher-field-sm-gap);--switcher-field-padding-block:var(--switcher-field-sm-padding-block);--switcher-field-label-font-size:var(--switcher-field-sm-label-font-size)}.switcher-field.switcher-field--lg{--switcher-field-gap:var(--switcher-field-lg-gap);--switcher-field-padding-block:var(--switcher-field-lg-padding-block);--switcher-field-label-font-size:var(--switcher-field-lg-label-font-size)}

package/dist/switcher-field.js

@@ -0,0 +1,61 @@
+'use client';
+import './switcher-field.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { n as t } from "./_shared/form-size.js";
+import { ErrorText as n } from "./error-text.js";
+import { Switcher as r } from "./switcher.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/SwitcherField/SwitcherField.tsx
+var l = s(function({ label: s, labelHidden: l, id: u, checked: d, defaultChecked: f, disabled: p, required: m, name: h, value: g, size: _, error: v = !1, errorMessage: y, helperText: b, className: x, onCheckedChange: S, onBlur: C }, w) {
+	let T = i(l), E = t(_), D = c(), O = u ?? D, k = y ? `${O}-error` : void 0, A = b ? `${O}-helper` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = v || !!y;
+	return /* @__PURE__ */ o("div", {
+		className: [
+			"switcher-field",
+			E === "md" ? "" : `switcher-field--${E}`,
+			p ? "switcher-field--disabled" : "",
+			x
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ o("label", {
+				className: "switcher-field__control",
+				htmlFor: O,
+				children: [/* @__PURE__ */ a(r, {
+					ref: w,
+					id: O,
+					checked: d,
+					defaultChecked: f,
+					disabled: p,
+					size: E,
+					name: h,
+					value: g,
+					required: m,
+					error: M,
+					"aria-labelledby": `${O}-label`,
+					"aria-describedby": j,
+					onCheckedChange: S,
+					onBlur: C
+				}), T ? /* @__PURE__ */ a(e, {
+					id: `${O}-label`,
+					children: s
+				}) : /* @__PURE__ */ a("span", {
+					id: `${O}-label`,
+					className: "switcher-field__label",
+					children: s
+				})]
+			}),
+			y && /* @__PURE__ */ a(n, {
+				id: k,
+				children: y
+			}),
+			b && /* @__PURE__ */ a("span", {
+				id: A,
+				className: "switcher-field__helper",
+				children: b
+			})
+		]
+	});
+});
+//#endregion
+export { l as SwitcherField };

package/dist/switcher.css

@@ -0,0 +1 @@
+.switcher{all:unset;box-sizing:border-box;width:var(--switcher-track-width);height:var(--switcher-track-height);padding-inline:var(--switcher-track-padding);border-radius:var(--switcher-track-border-radius);background-color:var(--switcher-track-bg);cursor:var(--switcher-cursor);transition:background-color var(--switcher-transition-duration) var(--switcher-transition-easing);flex-shrink:0;align-items:center;display:inline-flex;position:relative}.switcher:after{content:"";inline-size:max(100%, var(--switcher-target-size));block-size:max(100%, var(--switcher-target-size));position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.switcher[data-checked]{background-color:var(--switcher-track-bg-checked)}.switcher__thumb{width:var(--switcher-thumb-size);height:var(--switcher-thumb-size);border-radius:var(--switcher-thumb-border-radius);background-color:var(--switcher-thumb-bg);transition:transform var(--switcher-transition-duration) var(--switcher-transition-easing);will-change:transform;display:block}.switcher[data-checked] .switcher__thumb{transform:translateX(calc(var(--switcher-track-width) - var(--switcher-track-padding) * 2 - var(--switcher-thumb-size)))}.switcher.switcher--error{outline:var(--switcher-error-ring-width) solid var(--switcher-error-ring-color);outline-offset:var(--switcher-error-ring-offset)}.switcher:focus-visible{outline:var(--switcher-focus-ring-width) solid var(--switcher-focus-ring-color);outline-offset:var(--switcher-focus-ring-offset)}.switcher[data-disabled]{opacity:var(--switcher-disabled-opacity);cursor:var(--switcher-disabled-cursor);pointer-events:none}.switcher.switcher--sm{--switcher-track-width:var(--switcher-sm-track-width);--switcher-track-height:var(--switcher-sm-track-height);--switcher-thumb-size:var(--switcher-sm-thumb-size)}.switcher.switcher--lg{--switcher-track-width:var(--switcher-lg-track-width);--switcher-track-height:var(--switcher-lg-track-height);--switcher-thumb-size:var(--switcher-lg-thumb-size)}

package/dist/switcher.js

@@ -0,0 +1,32 @@
+'use client';
+import './switcher.css';
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t, useCallback as n } from "react";
+import { Switch as r } from "@base-ui/react/switch";
+//#region src/stories/atoms/Switcher/Switcher.tsx
+var i = t(function({ size: t = "md", error: i = !1, className: a, value: o, onCheckedChange: s, id: c, ...l }, u) {
+	let d = [
+		"switcher",
+		t === "md" ? "" : `switcher--${t}`,
+		i ? "switcher--error" : "",
+		a ?? ""
+	].filter(Boolean).join(" "), f = n((e) => {
+		e && o !== void 0 && (e.value = o);
+	}, [o]);
+	return /* @__PURE__ */ e(r.Root, {
+		ref: u,
+		className: d,
+		inputRef: f,
+		render: /* @__PURE__ */ e("button", {
+			type: "button",
+			id: c
+		}),
+		nativeButton: !0,
+		"aria-invalid": i || void 0,
+		onCheckedChange: s ? (e) => s(e) : void 0,
+		...l,
+		children: /* @__PURE__ */ e(r.Thumb, { className: "switcher__thumb" })
+	});
+});
+//#endregion
+export { i as Switcher };