@studiolxd/brand 49.11.0 → 49.12.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/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 };