@studiolxd/brand 49.11.0 → 49.13.0

package/dist/recurrence-field.js

@@ -0,0 +1,185 @@
+'use client';
+import './recurrence-field.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Fieldset as t } from "./fieldset.js";
+import { Toggle as n } from "./toggle.js";
+import { ToggleGroup as r } from "./toggle-group.js";
+import { SelectField as i } from "./select-field.js";
+import { DatePickerField as a } from "./date-picker-field.js";
+import { NumberInputField as o } from "./number-input-field.js";
+import { useId as s, useMemo as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/stories/molecules/RecurrenceField/recurrenceRule.ts
+var f = [
+	"MO",
+	"TU",
+	"WE",
+	"TH",
+	"FR",
+	"SA",
+	"SU"
+], p = {
+	frequency: "weekly",
+	interval: 1,
+	weekdays: [],
+	end: { type: "never" }
+}, m = [
+	"daily",
+	"weekly",
+	"monthly",
+	"yearly"
+], h = Date.UTC(2024, 0, 1);
+function g({ value: g, onValueChange: _, id: v, legend: y, disabled: b, size: x, locale: S = "es-ES", weekStartsOn: C = "monday", minDate: w, maxDate: T, className: E, frequencyLabel: D, weekdaysLabel: O, endLabel: k }) {
+	let A = e("recurrenceField"), j = s(), M = v ?? j, N = c(() => {
+		let e = new Intl.DateTimeFormat(S, {
+			weekday: "short",
+			timeZone: "UTC"
+		}), t = new Intl.DateTimeFormat(S, {
+			weekday: "long",
+			timeZone: "UTC"
+		}), n = f.map((n, r) => {
+			let i = new Date(h + r * 864e5);
+			return {
+				key: n,
+				short: e.format(i),
+				long: t.format(i)
+			};
+		});
+		return C === "sunday" ? [n[6], ...n.slice(0, 6)] : n;
+	}, [S, C]), P = (e) => {
+		g && _({
+			...g,
+			...e
+		});
+	}, F = [{
+		value: "",
+		label: A("never")
+	}, ...m.map((e) => ({
+		value: e,
+		label: A(e)
+	}))], I = [
+		{
+			value: "never",
+			label: A("endNever")
+		},
+		{
+			value: "until",
+			label: A("endUntil")
+		},
+		{
+			value: "count",
+			label: A("endCount")
+		}
+	], L = /* @__PURE__ */ d("div", {
+		className: ["recurrence-field", E].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ u(i, {
+			id: `${M}-frequency`,
+			label: A("frequency", D),
+			options: F,
+			value: g?.frequency ?? "",
+			disabled: b,
+			size: x,
+			onValueChange: (e) => {
+				if (!e) return _(null);
+				_({
+					...g ?? p,
+					frequency: e
+				});
+			}
+		}), g ? /* @__PURE__ */ d(l, { children: [
+			/* @__PURE__ */ u("div", {
+				className: "recurrence-field__row",
+				children: /* @__PURE__ */ u(o, {
+					id: `${M}-interval`,
+					className: "recurrence-field__interval",
+					label: A("interval")(g.frequency),
+					value: g.interval,
+					min: 1,
+					max: 99,
+					disabled: b,
+					size: x,
+					onChange: (e) => P({ interval: Number.isFinite(e) ? Math.max(1, e) : 1 })
+				})
+			}),
+			g.frequency === "weekly" ? /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
+				className: "recurrence-field__weekdays-label",
+				id: `${M}-weekdays-label`,
+				children: A("weekdays", O)
+			}), /* @__PURE__ */ u(r, {
+				className: "recurrence-field__weekdays",
+				multiple: !0,
+				size: x,
+				value: g.weekdays,
+				"aria-labelledby": `${M}-weekdays-label`,
+				onValueChange: (e) => P({ weekdays: e }),
+				children: N.map((e) => /* @__PURE__ */ u(n, {
+					value: e.key,
+					"aria-label": e.long,
+					disabled: b,
+					children: e.short
+				}, e.key))
+			})] }) : null,
+			/* @__PURE__ */ d("div", {
+				className: "recurrence-field__row",
+				children: [
+					/* @__PURE__ */ u(i, {
+						id: `${M}-end`,
+						className: "recurrence-field__end",
+						label: A("end", k),
+						options: I,
+						value: g.end.type,
+						disabled: b,
+						size: x,
+						onValueChange: (e) => {
+							if (e === "until") return P({ end: {
+								type: "until",
+								date: null
+							} });
+							if (e === "count") return P({ end: {
+								type: "count",
+								count: 10
+							} });
+							P({ end: { type: "never" } });
+						}
+					}),
+					g.end.type === "until" ? /* @__PURE__ */ u(a, {
+						id: `${M}-until`,
+						className: "recurrence-field__end",
+						label: A("until"),
+						value: g.end.date,
+						locale: S,
+						minDate: w,
+						maxDate: T,
+						disabled: b,
+						size: x,
+						onChange: (e) => P({ end: {
+							type: "until",
+							date: e
+						} })
+					}) : null,
+					g.end.type === "count" ? /* @__PURE__ */ u(o, {
+						id: `${M}-count`,
+						className: "recurrence-field__end",
+						label: A("count"),
+						value: g.end.count,
+						min: 1,
+						max: 999,
+						disabled: b,
+						size: x,
+						onChange: (e) => P({ end: {
+							type: "count",
+							count: Number.isFinite(e) ? Math.max(1, e) : 1
+						} })
+					}) : null
+				]
+			})
+		] }) : null]
+	});
+	return y ? /* @__PURE__ */ u(t, {
+		legend: y,
+		disabled: b,
+		children: L
+	}) : L;
+}
+//#endregion
+export { g as RecurrenceField };

package/dist/site-search.css

@@ -0,0 +1 @@
+.site-search{gap:var(--site-search-gap);flex-direction:column;display:flex}.site-search__form{align-items:flex-end;gap:var(--site-search-form-gap);flex-wrap:wrap;display:flex}.site-search__field{flex:1 1 var(--site-search-field-basis);min-inline-size:0}.site-search__submit{flex:none}.site-search__status{align-items:center;gap:var(--site-search-status-gap);font-size:var(--site-search-status-font-size);line-height:var(--site-search-status-line-height);color:var(--site-search-status-color);margin-block:0;margin-inline:0;display:flex}.site-search__status-text{overflow-wrap:anywhere;min-inline-size:0}.site-search__suggestions{gap:var(--site-search-suggestions-gap);flex-direction:column;display:flex}.site-search__suggestions-label{font-size:var(--site-search-suggestions-label-font-size);color:var(--site-search-suggestions-label-color)}.site-search__suggestions-list{gap:var(--site-search-suggestions-gap);flex-wrap:wrap;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.site-search__loading{gap:var(--site-search-results-gap);flex-direction:column;display:flex}.site-search__ghost{gap:var(--site-search-skeleton-gap);flex-direction:column;display:flex}.site-search__ghost-section{inline-size:var(--site-search-ghost-section-inline-size)}.site-search__ghost-title{inline-size:var(--site-search-ghost-title-inline-size)}.site-search__ghost-url{inline-size:var(--site-search-ghost-url-inline-size)}.site-search__results{gap:var(--site-search-results-gap);flex-direction:column;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.site-search__result{gap:var(--site-search-result-gap);flex-direction:column;display:flex}.site-search__result+.site-search__result{border-block-start:var(--site-search-result-separator-width) solid var(--site-search-result-separator-color);padding-block-start:var(--site-search-result-padding-block)}.site-search__result-section,.site-search__result-excerpt,.site-search__result-url{margin-block:0;margin-inline:0}.site-search__result-section{font-size:var(--site-search-result-section-font-size);color:var(--site-search-result-section-color)}.site-search__result-title{font-size:var(--site-search-result-title-font-size);font-weight:var(--site-search-result-title-font-weight);color:var(--site-search-result-title-color);margin-block:0;margin-inline:0}.site-search .site-search__result-link{box-shadow:none;color:inherit;padding-block-end:0}.site-search .site-search__result-link:hover{box-shadow:inset 0 calc(-1 * var(--site-search-result-link-hover-line-width)) 0 0 currentColor;padding-block-end:var(--site-search-result-link-hover-line-offset)}.site-search .site-search__result-link:focus-visible{outline:var(--site-search-result-focus-ring-width) solid var(--site-search-result-focus-ring-color);outline-offset:var(--site-search-result-focus-ring-offset)}.site-search__result-excerpt{font-size:var(--site-search-result-excerpt-font-size);line-height:var(--site-search-result-excerpt-line-height);color:var(--site-search-result-excerpt-color);max-inline-size:var(--site-search-result-measure);overflow-wrap:anywhere}.site-search__result-excerpt mark{background-color:var(--site-search-result-mark-bg);color:var(--site-search-result-mark-color)}.site-search__result-url{font-size:var(--site-search-result-url-font-size);color:var(--site-search-result-url-color);overflow-wrap:anywhere}

package/dist/site-search.js

@@ -0,0 +1,161 @@
+'use client';
+import './site-search.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Spinner as t } from "./spinner.js";
+import { Button as n } from "./button.js";
+import { Skeleton as r } from "./skeleton.js";
+import { Alert as i } from "./alert.js";
+import { InputField as a } from "./input-field.js";
+import { EmptyState as o } from "./empty-state.js";
+import { forwardRef as s, useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/stories/organisms/SiteSearch/SiteSearch.tsx
+function d(e) {
+	return /* @__PURE__ */ l("a", { ...e });
+}
+var f = s(function({ query: s, onQueryChange: f, onSubmit: p, action: m, name: h = "q", status: g = "idle", results: _ = [], total: v, minLength: y = 2, suggestions: b, onSuggestionSelect: x, onRetry: S, toolbar: C, footer: w, headingLevel: T = 2, size: E, loadingRows: D = 3, onSelect: O, renderLink: k = d, label: A, labelHidden: j = !0, placeholder: M, submitLabel: N, resultsLabel: P, className: F, id: I, ...L }, R) {
+	let z = e("siteSearch"), B = c(), V = I ?? B, H = `${V}-input`, U = `${V}-status`, W = `${V}-results`, G = `h${T}`, K = s.trim(), q = v ?? _.length, J = g === "ready" && _.length > 0, Y = g === "idle" ? z("idle") : g === "typing" ? K.length < y ? z("minLength")(y) : z("pending") : g === "loading" ? z("loading") : g === "error" ? null : z("results")(q, K);
+	function X(e) {
+		if (p) {
+			e.preventDefault(), K && p(K);
+			return;
+		}
+		K || e.preventDefault();
+	}
+	return /* @__PURE__ */ u("div", {
+		className: ["site-search", F].filter(Boolean).join(" "),
+		...L,
+		children: [
+			/* @__PURE__ */ u("form", {
+				className: "site-search__form",
+				role: "search",
+				"aria-label": z("label", A),
+				action: m,
+				method: "get",
+				onSubmit: X,
+				children: [/* @__PURE__ */ l(a, {
+					ref: R,
+					className: "site-search__field",
+					id: H,
+					name: h,
+					kind: "search",
+					clearable: !0,
+					label: z("label", A),
+					labelHidden: j,
+					placeholder: z("placeholder", M),
+					value: s,
+					onChange: (e) => f(e.target.value),
+					onClear: () => f(""),
+					"aria-describedby": U,
+					...J ? { "aria-controls": W } : {},
+					...E ? { size: E } : {}
+				}), /* @__PURE__ */ l(n, {
+					className: "site-search__submit",
+					type: "submit",
+					...E ? { size: E } : {},
+					children: z("submit", N)
+				})]
+			}),
+			C ? /* @__PURE__ */ l("div", {
+				className: "site-search__toolbar",
+				children: C
+			}) : null,
+			/* @__PURE__ */ u("p", {
+				className: "site-search__status",
+				id: U,
+				role: "status",
+				"aria-live": "polite",
+				children: [g === "loading" ? /* @__PURE__ */ l(t, {
+					size: "sm",
+					"aria-hidden": !0
+				}) : null, /* @__PURE__ */ l("span", {
+					className: "site-search__status-text",
+					children: Y
+				})]
+			}),
+			g === "idle" && b && b.length > 0 && x ? /* @__PURE__ */ u("div", {
+				className: "site-search__suggestions",
+				children: [/* @__PURE__ */ l("span", {
+					className: "site-search__suggestions-label",
+					id: `${V}-suggestions`,
+					children: z("suggestionsLabel")
+				}), /* @__PURE__ */ l("ul", {
+					className: "site-search__suggestions-list",
+					"aria-labelledby": `${V}-suggestions`,
+					children: b.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(n, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => x(e),
+						children: e
+					}) }, e))
+				})]
+			}) : null,
+			g === "loading" ? /* @__PURE__ */ l("div", {
+				className: "site-search__loading",
+				"aria-hidden": !0,
+				children: Array.from({ length: D }, (e, t) => /* @__PURE__ */ u("div", {
+					className: "site-search__ghost",
+					children: [
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-section" }),
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-title" }),
+						/* @__PURE__ */ l(r, {}),
+						/* @__PURE__ */ l(r, { className: "site-search__ghost-url" })
+					]
+				}, t))
+			}) : null,
+			J ? /* @__PURE__ */ l("ol", {
+				className: "site-search__results",
+				id: W,
+				"aria-label": z("resultsLabel", P),
+				children: _.map((e) => /* @__PURE__ */ u("li", {
+					className: "site-search__result",
+					children: [
+						e.section ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-section",
+							children: e.section
+						}) : null,
+						/* @__PURE__ */ l(G, {
+							className: "site-search__result-title",
+							children: k({
+								href: e.href,
+								className: "site-search__result-link",
+								children: e.title,
+								onClick: () => O?.(e)
+							})
+						}),
+						e.excerpt ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-excerpt",
+							children: e.excerpt
+						}) : null,
+						e.displayUrl ? /* @__PURE__ */ l("p", {
+							className: "site-search__result-url",
+							children: e.displayUrl
+						}) : null
+					]
+				}, e.href))
+			}) : null,
+			g === "ready" && _.length === 0 ? /* @__PURE__ */ l(o, {
+				className: "site-search__empty",
+				title: z("emptyTitle"),
+				description: z("emptyDescription")
+			}) : null,
+			g === "error" ? /* @__PURE__ */ l(i, {
+				className: "site-search__error",
+				variant: "error",
+				title: z("errorTitle"),
+				description: z("errorDescription"),
+				actions: S ? /* @__PURE__ */ l(n, {
+					variant: "outline",
+					onClick: S,
+					children: z("retry")
+				}) : void 0
+			}) : null,
+			w && J ? /* @__PURE__ */ l("div", {
+				className: "site-search__footer",
+				children: w
+			}) : null
+		]
+	});
+});
+//#endregion
+export { f as SiteSearch };

package/dist/timeline.css

@@ -0,0 +1 @@
+.timeline{font-family:var(--timeline-font-family);margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.timeline__item{column-gap:var(--timeline-column-gap);grid-template-columns:auto 1fr;display:grid}.timeline__item:not(:last-child) .timeline__body{padding-block-end:var(--timeline-gap)}.timeline__marker{align-items:center;gap:var(--timeline-rail-gap);flex-direction:column;display:flex}.timeline__rail{inline-size:var(--timeline-rail-width);min-block-size:var(--timeline-gap);background-color:var(--timeline-rail-color);flex:auto}.timeline__body{gap:var(--timeline-body-gap);flex-direction:column;min-inline-size:0;display:flex}.timeline__title{font-size:var(--timeline-title-font-size);font-weight:var(--timeline-title-font-weight);line-height:var(--timeline-title-line-height);color:var(--timeline-title-color);margin-block:0}.timeline__meta{align-items:baseline;gap:var(--timeline-meta-gap);font-size:var(--timeline-meta-font-size);color:var(--timeline-meta-color);flex-wrap:wrap;margin-block:0;display:flex}.timeline__date+.timeline__author:before{content:"·";color:var(--timeline-meta-separator-color);margin-inline-end:var(--timeline-meta-gap)}.timeline__note{font-size:var(--timeline-note-font-size);line-height:var(--timeline-note-line-height);color:var(--timeline-note-color);margin-block:0}.timeline__actions{margin-block-start:var(--timeline-actions-margin-block-start)}

package/dist/timeline.js

@@ -0,0 +1,57 @@
+'use client';
+import './timeline.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { StepMarker as n } from "./step-marker.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/molecules/Timeline/Timeline.tsx
+var o = r(function({ items: r, label: o, currentLabel: s, markerSize: c = "sm", className: l, ...u }, d) {
+	let f = e("timeline");
+	return /* @__PURE__ */ i("ol", {
+		ref: d,
+		className: ["timeline", l].filter(Boolean).join(" "),
+		"aria-label": f("label", o),
+		...u,
+		children: r.map((e, o) => /* @__PURE__ */ a("li", {
+			className: "timeline__item",
+			children: [/* @__PURE__ */ a("span", {
+				className: "timeline__marker",
+				children: [/* @__PURE__ */ i(n, {
+					state: e.current ? "current" : "neutral",
+					tone: e.tone ?? "neutral",
+					size: c,
+					icon: e.icon ?? "dot"
+				}), o < r.length - 1 ? /* @__PURE__ */ i("span", { className: "timeline__rail" }) : null]
+			}), /* @__PURE__ */ a("div", {
+				className: "timeline__body",
+				children: [
+					/* @__PURE__ */ a("p", {
+						className: "timeline__title",
+						children: [e.title, e.current ? /* @__PURE__ */ i(t, { children: ` (${f("current", s)})` }) : null]
+					}),
+					e.date || e.author ? /* @__PURE__ */ a("p", {
+						className: "timeline__meta",
+						children: [e.date ? /* @__PURE__ */ i("span", {
+							className: "timeline__date",
+							children: e.date
+						}) : null, e.author ? /* @__PURE__ */ i("span", {
+							className: "timeline__author",
+							children: e.author
+						}) : null]
+					}) : null,
+					e.note ? /* @__PURE__ */ i("p", {
+						className: "timeline__note",
+						children: e.note
+					}) : null,
+					e.actions ? /* @__PURE__ */ i("div", {
+						className: "timeline__actions",
+						children: e.actions
+					}) : null
+				]
+			})]
+		}, e.id))
+	});
+});
+//#endregion
+export { o as Timeline };