@studiolxd/brand 38.12.4

package/dist/card.js

@@ -0,0 +1,115 @@
+'use client';
+import './card.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { Arrow as t } from "./arrow.js";
+import { Heading as n } from "./heading.js";
+import { Paragraph as r } from "./paragraph.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useRender as c } from "@base-ui/react/use-render";
+//#region src/stories/molecules/Card/Card.tsx
+var l = s(function({ href: r, render: s, external: l = !1, title: u, description: d, ctaLabel: f, color: p = "outline", variant: m = "default", media: h, selectable: g = !1, selected: _ = !1, className: v, children: y, ...b }, x) {
+	let S = [
+		"card",
+		`card--${p}`,
+		m === "default" ? "" : `card--${m}`,
+		g ? "card--selectable" : "",
+		g && _ ? "card--selected" : "",
+		v ?? ""
+	].filter(Boolean).join(" "), C = /* @__PURE__ */ o(i, { children: [
+		u !== void 0 && /* @__PURE__ */ a(n, {
+			level: 2,
+			size: 8,
+			children: u
+		}),
+		d && (typeof d == "string" ? /* @__PURE__ */ a("p", { children: d }) : d),
+		y,
+		f !== void 0 && /* @__PURE__ */ a(e, { children: f }),
+		/* @__PURE__ */ a(t, { size: "lg" })
+	] }), w = h && /* @__PURE__ */ a("div", {
+		className: "card__media",
+		children: /* @__PURE__ */ a("img", {
+			src: h.src,
+			alt: h.alt
+		})
+	}), T = m === "default" && !h ? C : /* @__PURE__ */ o(i, { children: [w, /* @__PURE__ */ a("div", {
+		className: "card__body",
+		children: C
+	})] });
+	return c({
+		render: s,
+		ref: x,
+		enabled: s !== void 0,
+		props: {
+			className: S,
+			...b,
+			children: T
+		}
+	}) || (r === void 0 ? /* @__PURE__ */ a("div", {
+		ref: x,
+		className: S,
+		...b,
+		children: y
+	}) : /* @__PURE__ */ a("a", {
+		ref: x,
+		href: r,
+		className: S,
+		...l ? {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : {},
+		...b,
+		children: T
+	}));
+}), u = s(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ a("div", {
+		ref: n,
+		className: ["card__header", e].filter(Boolean).join(" "),
+		...t
+	});
+}), d = s(function({ level: e = 3, size: t = 4, className: r, children: i, ...o }, s) {
+	return /* @__PURE__ */ a(n, {
+		ref: s,
+		level: e,
+		size: t,
+		className: ["card__title", r].filter(Boolean).join(" "),
+		...o,
+		children: i
+	});
+}), f = s(function({ size: e = "small", lines: t, className: n, children: i, ...o }, s) {
+	return /* @__PURE__ */ a(r, {
+		ref: s,
+		size: e,
+		className: [
+			"card__description",
+			t ? `card__description--lines-${t}` : "",
+			n
+		].filter(Boolean).join(" "),
+		...o,
+		children: i
+	});
+}), p = s(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ a("div", {
+		ref: n,
+		className: ["card__action", e].filter(Boolean).join(" "),
+		...t
+	});
+}), m = s(function({ className: e, ...t }, n) {
+	return /* @__PURE__ */ a("div", {
+		ref: n,
+		className: ["card__content", e].filter(Boolean).join(" "),
+		...t
+	});
+}), h = s(function({ direction: e = "row", className: t, ...n }, r) {
+	return /* @__PURE__ */ a("div", {
+		ref: r,
+		className: [
+			"card__footer",
+			e === "column" ? "card__footer--column" : "",
+			t
+		].filter(Boolean).join(" "),
+		...n
+	});
+});
+//#endregion
+export { l as Card, p as CardAction, m as CardContent, f as CardDescription, h as CardFooter, u as CardHeader, d as CardTitle };

package/dist/carousel.css

@@ -0,0 +1 @@
+.carousel{display:block}.carousel__track{gap:var(--carousel-gap);overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;display:flex;overflow-x:auto}.carousel__track::-webkit-scrollbar{display:none}.carousel__track:focus-visible{outline:var(--carousel-focus-ring-width) solid var(--carousel-focus-ring-color);outline-offset:var(--carousel-focus-ring-offset)}.carousel__slide{flex:0 0 var(--carousel-slide-size);scroll-snap-align:start;min-inline-size:0}.carousel__controls{justify-content:space-between;align-items:center;gap:var(--carousel-controls-gap);flex-wrap:wrap;margin-block-start:var(--carousel-controls-space-before);display:flex}.carousel__indicators{align-items:center;gap:var(--carousel-controls-gap);display:flex}.carousel__indicator{cursor:pointer;inline-size:var(--carousel-indicator-inline-size);block-size:var(--carousel-indicator-hit-block-size);background:0 0;border:0;align-items:center;padding:0;display:flex}.carousel__indicator:before{content:"";inline-size:100%;block-size:var(--carousel-indicator-block-size);background-color:var(--carousel-indicator-color)}.carousel__indicator[aria-current]:before{background-color:var(--carousel-indicator-current-color)}.carousel__indicator:focus-visible{outline:var(--carousel-focus-ring-width) solid var(--carousel-focus-ring-color);outline-offset:var(--carousel-focus-ring-offset)}.carousel__buttons{align-items:center;gap:var(--carousel-controls-gap);margin-inline-start:auto;display:flex}

package/dist/carousel.js

@@ -0,0 +1,124 @@
+'use client';
+import './carousel.css';
+import { Icon as e } from "./icon.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Button as n } from "./button.js";
+import { t as r } from "./_shared/css-properties.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as s, useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+//#region src/stories/molecules/Carousel/Carousel.tsx
+function f({ children: f, label: p = "Carrusel", roleDescription: m = "carrusel", trackLabel: h = "Diapositivas", slideSize: g, controls: _ = !0, indicators: v = !1, autoplay: y, prevLabel: b = "Anterior", nextLabel: x = "Siguiente", indicatorLabel: S = (e) => `Ir a la diapositiva ${e + 1}`, pauseLabel: C = "Pausar", playLabel: w = "Reproducir", slideStatusLabel: T = (e, t) => `Diapositiva ${e + 1} de ${t}`, className: E, id: D }) {
+	let O = u(null), [k, A] = d(0), j = u(0), [M, N] = d(!1), [P, F] = d(!1), I = s.count(f), L = y !== void 0 && !P, R = (e) => Array.from(e.children), z = c((e) => {
+		let t = O.current;
+		if (!t) return;
+		let n = R(t);
+		if (n.length === 0) return;
+		let r = n[(e + n.length) % n.length], i = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		t.scrollTo({
+			left: r.offsetLeft - n[0].offsetLeft,
+			behavior: i ? "auto" : "smooth"
+		});
+	}, []);
+	l(() => {
+		let e = O.current;
+		if (!e) return;
+		let t = () => {
+			let t = R(e);
+			if (t.length === 0) return;
+			let n = t[0].offsetLeft, r = 0, i = Infinity;
+			t.forEach((t, a) => {
+				let o = Math.abs(t.offsetLeft - n - e.scrollLeft);
+				o < i && (i = o, r = a);
+			}), j.current = r, A(r);
+		};
+		return t(), e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	}, [f]), l(() => {
+		if (!y || P || M || I < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let e = window.setInterval(() => z(j.current + 1), y);
+		return () => window.clearInterval(e);
+	}, [
+		y,
+		P,
+		M,
+		I,
+		z
+	]);
+	let B = (e) => {
+		e.key === "ArrowRight" ? (e.preventDefault(), z(k + 1)) : e.key === "ArrowLeft" && (e.preventDefault(), z(k - 1));
+	};
+	return /* @__PURE__ */ o("div", {
+		id: D,
+		ref: r({ "--carousel-slide-size": g }),
+		className: ["carousel", E].filter(Boolean).join(" "),
+		role: "region",
+		"aria-roledescription": m,
+		"aria-label": p,
+		onMouseEnter: () => N(!0),
+		onMouseLeave: () => N(!1),
+		onFocus: () => N(!0),
+		onBlur: () => N(!1),
+		children: [
+			/* @__PURE__ */ a("div", {
+				ref: O,
+				className: "carousel__track",
+				tabIndex: 0,
+				role: "group",
+				"aria-label": h,
+				onKeyDown: B,
+				children: f
+			}),
+			/* @__PURE__ */ a(t, {
+				as: "div",
+				role: "status",
+				"aria-live": L ? "off" : "polite",
+				"aria-atomic": "true",
+				children: T(k, I)
+			}),
+			(_ || v || y !== void 0) && /* @__PURE__ */ o("div", {
+				className: "carousel__controls",
+				children: [v && /* @__PURE__ */ a("div", {
+					className: "carousel__indicators",
+					children: Array.from({ length: I }, (e, t) => /* @__PURE__ */ a("button", {
+						type: "button",
+						className: "carousel__indicator",
+						"aria-label": S(t),
+						"aria-current": t === k ? "true" : void 0,
+						onClick: () => z(t)
+					}, t))
+				}), (_ || y !== void 0) && /* @__PURE__ */ o("div", {
+					className: "carousel__buttons",
+					children: [y !== void 0 && /* @__PURE__ */ a(n, {
+						variant: "ghost",
+						iconOnly: !0,
+						"aria-label": L ? C : w,
+						onClick: () => F((e) => !e),
+						children: /* @__PURE__ */ a(e, { name: L ? "pause" : "play" })
+					}), _ && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+						variant: "ghost",
+						iconOnly: !0,
+						"aria-label": b,
+						onClick: () => z(k - 1),
+						children: /* @__PURE__ */ a(e, { name: "arrow-left" })
+					}), /* @__PURE__ */ a(n, {
+						variant: "ghost",
+						iconOnly: !0,
+						"aria-label": x,
+						onClick: () => z(k + 1),
+						children: /* @__PURE__ */ a(e, { name: "arrow" })
+					})] })]
+				})]
+			})
+		]
+	});
+}
+function p({ roleDescription: e = "diapositiva", className: t, children: n, ...r }) {
+	return /* @__PURE__ */ a("div", {
+		className: ["carousel__slide", t].filter(Boolean).join(" "),
+		role: "group",
+		"aria-roledescription": e,
+		...r,
+		children: n
+	});
+}
+//#endregion
+export { f as Carousel, p as CarouselSlide };

package/dist/chart.css

@@ -0,0 +1 @@
+.chart{gap:var(--chart-block-gap);font-family:var(--chart-label-font-family);flex-direction:column;margin:0;display:flex}.chart__title{color:var(--chart-label-color);font-family:var(--chart-label-font-family);font-size:var(--chart-label-font-size);font-weight:var(--chart-value-font-weight)}.chart__caption,.chart__empty{color:var(--chart-label-color);font-family:var(--chart-label-font-family);font-size:var(--chart-label-font-size);margin:0}.chart__plot{position:relative}.chart__canvas{width:100%;height:auto;display:block;overflow:visible}.chart__grid-line{stroke:var(--chart-grid-color);stroke-width:var(--chart-grid-width);fill:none}.chart__axis{stroke:var(--chart-axis-color);stroke-width:var(--chart-axis-width)}.chart__axis-label{fill:var(--chart-label-color);font-family:var(--chart-label-font-family);font-size:var(--chart-label-font-size);font-weight:var(--chart-label-font-weight);font-variant-numeric:tabular-nums}.chart__value-label,.chart__center-value{fill:var(--chart-label-color);font-family:var(--chart-label-font-family);font-size:var(--chart-label-font-size);font-weight:var(--chart-value-font-weight)}.chart__crosshair{stroke:var(--chart-crosshair-color);stroke-width:var(--chart-grid-width)}.chart [data-slot="1"]{--chart-mark-color:var(--chart-series-1)}.chart [data-slot="2"]{--chart-mark-color:var(--chart-series-2)}.chart [data-slot="3"]{--chart-mark-color:var(--chart-series-3)}.chart [data-slot="4"]{--chart-mark-color:var(--chart-series-4)}.chart [data-slot="5"]{--chart-mark-color:var(--chart-series-5)}.chart [data-slot="6"]{--chart-mark-color:var(--chart-series-6)}.chart [data-slot="7"]{--chart-mark-color:var(--chart-series-7)}.chart [data-slot="8"]{--chart-mark-color:var(--chart-series-8)}.chart [data-slot=muted]{--chart-mark-color:var(--chart-muted-color)}.chart__line{fill:none;stroke-width:var(--chart-line-width);stroke-linecap:round;stroke-linejoin:round}.chart__line:not([stroke]){stroke:var(--chart-mark-color)}.chart__area{fill-opacity:var(--chart-area-fill-opacity);stroke:none}.chart__area:not([fill]){fill:var(--chart-mark-color)}.chart__marker{stroke:var(--chart-surface);stroke-width:var(--chart-marker-ring-width)}.chart__marker:not([fill]){fill:var(--chart-mark-color)}.chart__bar,.chart__slice,.chart__funnel-step,.chart__tile,.chart__radial-bar{transition:fill-opacity var(--chart-transition-duration) var(--chart-transition-easing)}.chart__bar:not([fill]),.chart__slice:not([fill]),.chart__funnel-step:not([fill]),.chart__tile:not([fill]),.chart__radial-bar:not([fill]){fill:var(--chart-mark-color)}.chart__funnel-step,.chart__tile,.chart__radial-bar{stroke:var(--chart-surface);stroke-width:var(--chart-mark-gap)}.chart__radial-track{fill:var(--chart-radial-track-color);stroke:none}.chart__point{stroke:var(--chart-surface);stroke-width:var(--chart-marker-ring-width);transition:fill-opacity var(--chart-transition-duration) var(--chart-transition-easing)}.chart__point:not([fill]){fill:var(--chart-mark-color)}.chart__radar-shape{fill-opacity:var(--chart-radar-fill-opacity);stroke-width:var(--chart-line-width);stroke-linejoin:round}.chart__radar-shape:not([fill]){fill:var(--chart-mark-color)}.chart__radar-shape:not([stroke]){stroke:var(--chart-mark-color)}.chart__tile-label{fill:var(--chart-tile-label-color);font-family:var(--chart-label-font-family);font-size:var(--chart-label-font-size)}.chart__tile-label[data-slot="1"]{--chart-tile-label-color:var(--chart-tile-label-color-1)}.chart__tile-label[data-slot="2"]{--chart-tile-label-color:var(--chart-tile-label-color-2)}.chart__tile-label[data-slot="3"]{--chart-tile-label-color:var(--chart-tile-label-color-3)}.chart__tile-label[data-slot="4"]{--chart-tile-label-color:var(--chart-tile-label-color-4)}.chart__tile-label[data-slot="5"]{--chart-tile-label-color:var(--chart-tile-label-color-5)}.chart__tile-label[data-slot="6"]{--chart-tile-label-color:var(--chart-tile-label-color-6)}.chart__tile-label[data-slot="7"]{--chart-tile-label-color:var(--chart-tile-label-color-7)}.chart__tile-label[data-slot="8"]{--chart-tile-label-color:var(--chart-tile-label-color-8)}.chart__slice{stroke:var(--chart-surface);stroke-width:var(--chart-mark-gap)}.chart__line.chart__line--muted,.chart__area.chart__area--muted,.chart__marker.chart__marker--muted,.chart__bar.chart__bar--muted,.chart__slice.chart__slice--muted,.chart__funnel-step.chart__funnel-step--muted,.chart__tile.chart__tile--muted,.chart__radial-bar.chart__radial-bar--muted,.chart__point.chart__point--muted,.chart__radar-shape.chart__radar-shape--muted{--chart-mark-color:var(--chart-muted-color)}:is(.chart__marks:has([data-active]) .chart__bar:not([data-active]),.chart__marks:has([data-active]) .chart__slice:not([data-active]),.chart__marks:has([data-active]) .chart__funnel-step:not([data-active]),.chart__marks:has([data-active]) .chart__tile:not([data-active]),.chart__marks:has([data-active]) .chart__radial-bar:not([data-active]),.chart__marks:has([data-active]) .chart__point:not([data-active])){fill-opacity:var(--chart-hover-opacity)}.chart__hit-layer{background:0 0;position:absolute}.chart__hit-layer:focus-visible{outline:var(--control-focus-ring-width) solid var(--chart-axis-color);outline-offset:var(--control-focus-ring-inset-offset)}.chart__tooltip{transform:translate(-50%, calc(-100% - var(--chart-tooltip-offset)));max-width:var(--chart-tooltip-max-width);padding-block:var(--chart-tooltip-padding-block);padding-inline:var(--chart-tooltip-padding-inline);border-radius:var(--chart-tooltip-border-radius);background:var(--chart-tooltip-bg);color:var(--chart-tooltip-color);font-family:var(--chart-label-font-family);font-size:var(--chart-tooltip-font-size);line-height:var(--chart-tooltip-line-height);pointer-events:none;position:absolute}.chart__tooltip-header{font-weight:var(--chart-value-font-weight);margin:0}.chart__tooltip-list{gap:var(--chart-tooltip-row-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.chart__tooltip-row{align-items:center;gap:var(--chart-tooltip-row-gap);display:flex}.chart__tooltip-key{inline-size:var(--chart-legend-swatch-line-width);block-size:var(--chart-line-width);flex:none;display:inline-block}.chart__tooltip-value{font-weight:var(--chart-value-font-weight);font-variant-numeric:tabular-nums}.chart__legend-item{align-items:center;gap:var(--chart-legend-gap);display:inline-flex}.chart__legend-item.chart__legend-item--muted .chart__legend-swatch{--chart-mark-color:var(--chart-muted-color)}.chart__legend-swatch{inline-size:var(--chart-legend-swatch-size);block-size:var(--chart-legend-swatch-size);flex:none;display:inline-block}.chart__legend-swatch rect:not([fill]),.chart__tooltip-key rect:not([fill]){fill:var(--chart-mark-color)}.chart__legend-swatch.chart__legend-swatch--line{inline-size:var(--chart-legend-swatch-line-width);block-size:var(--chart-line-width)}