@540deg/ds 0.0.0-stage → 0.1.0

package/dist/components/organisms/DeckFooter/DeckFooter.js

@@ -0,0 +1,75 @@
+import { Logo } from "../../atoms/Logo/Logo.js";
+import { SocialIcon } from "../../atoms/SocialIcon/SocialIcon.js";
+import { Text } from "../../atoms/Text/Text.js";
+import DeckFooter_module_default from "./DeckFooter.module.js";
+import { DECK_FOOTER_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/DeckFooter/DeckFooter.tsx
+/**
+* DeckFooter is the last stop of a talk: a full screen with the halo, the logo, the tagline,
+* the networks, the thanks and the signature, all centered.
+*/
+function DeckFooter({ tagline, networks = [], thanks = DECK_FOOTER_DEFAULTS.thanks, copyright, homeHref = DECK_FOOTER_DEFAULTS.homeHref, homeLabel = DECK_FOOTER_DEFAULTS.homeLabel, className }) {
+	const classes = [DeckFooter_module_default.pie, className ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		"data-deck-footer": "",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: DeckFooter_module_default.halo,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("div", {
+			className: DeckFooter_module_default.column,
+			children: /* @__PURE__ */ jsxs("footer", {
+				className: DeckFooter_module_default.footer,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: DeckFooter_module_default.brand,
+						children: [/* @__PURE__ */ jsx("a", {
+							className: DeckFooter_module_default.home,
+							href: homeHref,
+							"aria-label": homeLabel,
+							children: /* @__PURE__ */ jsx(Logo, {
+								size: "xs",
+								label: ""
+							})
+						}), /* @__PURE__ */ jsx(Text, {
+							variant: "body-m",
+							tone: "secondary",
+							wrap: "balance",
+							className: DeckFooter_module_default.tagline,
+							children: tagline
+						})]
+					}),
+					networks.length > 0 ? /* @__PURE__ */ jsx("ul", {
+						className: DeckFooter_module_default.networks,
+						children: networks.map((n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+							className: DeckFooter_module_default.network,
+							href: n.href,
+							"aria-label": n.label,
+							children: /* @__PURE__ */ jsx(SocialIcon, {
+								network: n.network,
+								size: "sm"
+							})
+						}) }, n.network))
+					}) : null,
+					thanks ? /* @__PURE__ */ jsx(Text, {
+						variant: "body-l",
+						tone: "secondary",
+						style: { fontWeight: "var(--540-font-weight-light)" },
+						children: thanks
+					}) : null,
+					/* @__PURE__ */ jsx("div", {
+						className: DeckFooter_module_default.closing,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "micro-light",
+							tone: "secondary",
+							children: copyright
+						})
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { DeckFooter };

package/dist/components/organisms/DeckFooter/DeckFooter.module.js

@@ -0,0 +1,25 @@
+//#region src/components/organisms/DeckFooter/DeckFooter.module.css
+var pie = "_pie_m97tq_4";
+var halo = "_halo_m97tq_13";
+var column = "_column_m97tq_24";
+var footer = "_footer_m97tq_32";
+var brand = "_brand_m97tq_39";
+var home = "_home_m97tq_45";
+var tagline = "_tagline_m97tq_55";
+var networks = "_networks_m97tq_59";
+var network = "_network_m97tq_59";
+var closing = "_closing_m97tq_86";
+var DeckFooter_module_default = {
+	pie,
+	halo,
+	column,
+	footer,
+	brand,
+	home,
+	tagline,
+	networks,
+	network,
+	closing
+};
+//#endregion
+export { brand, closing, column, DeckFooter_module_default as default, footer, halo, home, network, networks, pie, tagline };

package/dist/components/organisms/DeckFooter/index.d.ts

@@ -0,0 +1,3 @@
+export { DeckFooter } from './DeckFooter';
+export { DECK_FOOTER_DEFAULTS } from './types';
+export type { DeckFooterProps } from './types';

package/dist/components/organisms/DeckFooter/types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { FooterNetwork } from '../../molecules/Footer';
+export type DeckFooterProps = {
+    /** One line about the talk, at 38 characters. */
+    tagline: ReactNode;
+    /** The networks, each with its name. */
+    networks?: FooterNetwork[];
+    /** The thanks line. */
+    thanks?: ReactNode;
+    /** The signature. */
+    copyright: ReactNode;
+    /** Where the logo links to: the cover. */
+    homeHref?: string;
+    /** Accessible name of the logo link. */
+    homeLabel?: string;
+    className?: string;
+};
+export declare const DECK_FOOTER_DEFAULTS: {
+    readonly thanks: "¡Gracias!";
+    readonly homeHref: "#portada";
+    readonly homeLabel: "540, ir al inicio";
+};

package/dist/components/organisms/DeckFooter/types.js

@@ -0,0 +1,8 @@
+//#region src/components/organisms/DeckFooter/types.ts
+var DECK_FOOTER_DEFAULTS = {
+	thanks: "¡Gracias!",
+	homeHref: "#portada",
+	homeLabel: "540, ir al inicio"
+};
+//#endregion
+export { DECK_FOOTER_DEFAULTS };

package/dist/components/organisms/Flow/Flow.d.ts

@@ -0,0 +1,6 @@
+import type { FlowProps } from './types';
+/**
+ * Flow is a chain of steps: pills with an arrow centered in the gap between them.
+ * A column on narrow screens, a row from 600 px. One step can be highlighted.
+ */
+export declare function Flow({ steps, label, className }: FlowProps): import("react").JSX.Element;

package/dist/components/organisms/Flow/Flow.js

@@ -0,0 +1,26 @@
+import { Text } from "../../atoms/Text/Text.js";
+import Flow_module_default from "./Flow.module.js";
+import { FLOW_DEFAULTS } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/organisms/Flow/Flow.tsx
+/**
+* Flow is a chain of steps: pills with an arrow centered in the gap between them.
+* A column on narrow screens, a row from 600 px. One step can be highlighted.
+*/
+function Flow({ steps, label = FLOW_DEFAULTS.label, className }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: [Flow_module_default.flow, className ?? ""].filter(Boolean).join(" "),
+		"aria-label": label,
+		children: steps.map((step, i) => /* @__PURE__ */ jsx("li", {
+			className: [Flow_module_default.step, step.highlighted ? Flow_module_default.highlighted : ""].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "body-s",
+				className: Flow_module_default.label,
+				children: step.label
+			})
+		}, i))
+	});
+}
+//#endregion
+export { Flow };

package/dist/components/organisms/Flow/Flow.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Flow/Flow.module.css
+var flow = "_flow_1fjzk_4";
+var step = "_step_1fjzk_14";
+var highlighted = "_highlighted_1fjzk_22";
+var label = "_label_1fjzk_27";
+var Flow_module_default = {
+	flow,
+	step,
+	highlighted,
+	label
+};
+//#endregion
+export { Flow_module_default as default, flow, highlighted, label, step };

package/dist/components/organisms/Flow/index.d.ts

@@ -0,0 +1,3 @@
+export { Flow } from './Flow';
+export { FLOW_DEFAULTS } from './types';
+export type { FlowProps, FlowStep } from './types';

package/dist/components/organisms/Flow/types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type FlowStep = {
+    /** The name of the step. Two or three words. */
+    label: ReactNode;
+    /** The highlighted step: filled with the inverse background. */
+    highlighted?: boolean;
+};
+export type FlowProps = {
+    /** The steps, in order. */
+    steps: FlowStep[];
+    /** Accessible name of the list. */
+    label?: string;
+    className?: string;
+};
+export declare const FLOW_DEFAULTS: {
+    readonly label: "Pasos";
+};

package/dist/components/organisms/Flow/types.js

@@ -0,0 +1,4 @@
+//#region src/components/organisms/Flow/types.ts
+var FLOW_DEFAULTS = { label: "Pasos" };
+//#endregion
+export { FLOW_DEFAULTS };

package/dist/components/organisms/Form/Form.d.ts

@@ -0,0 +1,6 @@
+import type { FormProps } from './types';
+/**
+ * Form is the wrapper of a form: it places the fields and puts the submit. The fields come
+ * from whoever uses it. noValidate by default so the system's messages win over the browser's.
+ */
+export declare function Form({ children, submitLabel, align, className, noValidate, ...rest }: FormProps): import("react").JSX.Element;

package/dist/components/organisms/Form/Form.js

@@ -0,0 +1,28 @@
+import { Button } from "../../atoms/Button/Button.js";
+import Form_module_default from "./Form.module.js";
+import { FORM_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Form/Form.tsx
+/**
+* Form is the wrapper of a form: it places the fields and puts the submit. The fields come
+* from whoever uses it. noValidate by default so the system's messages win over the browser's.
+*/
+function Form({ children, submitLabel, align = FORM_DEFAULTS.align, className, noValidate = FORM_DEFAULTS.noValidate, ...rest }) {
+	return /* @__PURE__ */ jsxs("form", {
+		className: [Form_module_default.form, className ?? ""].filter(Boolean).join(" "),
+		noValidate,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Form_module_default.fields,
+			children
+		}), /* @__PURE__ */ jsx("div", {
+			className: [Form_module_default.submit, align === "center" ? Form_module_default.center : ""].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				children: submitLabel
+			})
+		})]
+	});
+}
+//#endregion
+export { Form };

package/dist/components/organisms/Form/Form.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Form/Form.module.css
+var form = "_form_du2ma_4";
+var fields = "_fields_du2ma_9";
+var submit = "_submit_du2ma_14";
+var center = "_center_du2ma_19";
+var Form_module_default = {
+	form,
+	fields,
+	submit,
+	center
+};
+//#endregion
+export { center, Form_module_default as default, fields, form, submit };

package/dist/components/organisms/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { Form } from './Form';
+export { FORM_ALIGNS, FORM_DEFAULTS } from './types';
+export type { FormAlign, FormProps } from './types';

package/dist/components/organisms/Form/types.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const FORM_ALIGNS: readonly ["end", "center"];
+export type FormAlign = (typeof FORM_ALIGNS)[number];
+export type FormProps = {
+    /** The fields, usually Field. */
+    children: ReactNode;
+    /** The verb and the object of the submit button: "Enviar mensaje". */
+    submitLabel: string;
+    /** Where the submit goes: end of the row (web) or centered (a talk, where everything is centered). */
+    align?: FormAlign;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<'form'>, 'className' | 'children'>;
+export declare const FORM_DEFAULTS: {
+    readonly noValidate: true;
+    readonly align: "end";
+};

package/dist/components/organisms/Form/types.js

@@ -0,0 +1,8 @@
+//#region src/components/organisms/Form/types.ts
+var FORM_ALIGNS = ["end", "center"];
+var FORM_DEFAULTS = {
+	noValidate: true,
+	align: "end"
+};
+//#endregion
+export { FORM_ALIGNS, FORM_DEFAULTS };

package/dist/components/organisms/Heartbeat/Heartbeat.d.ts

@@ -0,0 +1,3 @@
+import type { HeartbeatProps } from './types';
+/** Heartbeat is a red heart that beats with a wave around it: "la maquineta" alive. Decoration. */
+export declare function Heartbeat({ className }: HeartbeatProps): import("react").JSX.Element;

package/dist/components/organisms/Heartbeat/Heartbeat.js

@@ -0,0 +1,17 @@
+import Heartbeat_module_default from "./Heartbeat.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Heartbeat/Heartbeat.tsx
+/** Heartbeat is a red heart that beats with a wave around it: "la maquineta" alive. Decoration. */
+function Heartbeat({ className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: [Heartbeat_module_default.heartbeat, className ?? ""].filter(Boolean).join(" "),
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", { className: Heartbeat_module_default.wave }), /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 48 44",
+			className: Heartbeat_module_default.heart,
+			children: /* @__PURE__ */ jsx("path", { d: "M24 41C24 41 3 27.5 3 14.5C3 7.6 8.6 2 15.5 2C19.8 2 22.6 4.2 24 6.6C25.4 4.2 28.2 2 32.5 2C39.4 2 45 7.6 45 14.5C45 27.5 24 41 24 41Z" })
+		})]
+	});
+}
+//#endregion
+export { Heartbeat };

package/dist/components/organisms/Heartbeat/Heartbeat.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/Heartbeat/Heartbeat.module.css
+var heartbeat = "_heartbeat_13f55_3";
+var wave = "_wave_13f55_13";
+var heart = "_heart_13f55_3";
+var beat = "_beat_13f55_1";
+var Heartbeat_module_default = {
+	heartbeat,
+	wave,
+	heart,
+	beat
+};
+//#endregion
+export { beat, Heartbeat_module_default as default, heart, heartbeat, wave };

package/dist/components/organisms/Heartbeat/index.d.ts

@@ -0,0 +1,2 @@
+export { Heartbeat } from './Heartbeat';
+export type { HeartbeatProps } from './types';

package/dist/components/organisms/Heartbeat/types.d.ts

@@ -0,0 +1,3 @@
+export type HeartbeatProps = {
+    className?: string;
+};

package/dist/components/organisms/LogoCarousel/LogoCarousel.d.ts

@@ -0,0 +1,6 @@
+import type { LogoCarouselProps } from './types';
+/**
+ * LogoCarousel is the strip of client logos: equal slots, an odd number so there is always one
+ * in the center, at full ink and 8 % bigger. Steps by itself; pauses on hover and focus.
+ */
+export declare function LogoCarousel({ logos, label, interval, className }: LogoCarouselProps): import("react").JSX.Element;

package/dist/components/organisms/LogoCarousel/LogoCarousel.js

@@ -0,0 +1,72 @@
+import LogoCarousel_module_default from "./LogoCarousel.module.js";
+import { LOGO_CAROUSEL_DEFAULTS } from "./types.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/organisms/LogoCarousel/LogoCarousel.tsx
+/**
+* LogoCarousel is the strip of client logos: equal slots, an odd number so there is always one
+* in the center, at full ink and 8 % bigger. Steps by itself; pauses on hover and focus.
+*/
+function LogoCarousel({ logos, label, interval = LOGO_CAROUSEL_DEFAULTS.interval, className }) {
+	const n = logos.length;
+	const [offset, setOffset] = useState(0);
+	const [jump, setJump] = useState(false);
+	const [paused, setPaused] = useState(false);
+	const trackRef = useRef(null);
+	useEffect(() => {
+		if (n < 2 || paused) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const id = window.setInterval(() => setOffset((o) => o + 1), interval);
+		return () => window.clearInterval(id);
+	}, [
+		n,
+		paused,
+		interval
+	]);
+	useEffect(() => {
+		if (offset < n) return;
+		const track = trackRef.current;
+		const onEnd = () => {
+			setJump(true);
+			setOffset((o) => o - n);
+			requestAnimationFrame(() => requestAnimationFrame(() => setJump(false)));
+		};
+		track?.addEventListener("transitionend", onEnd, { once: true });
+		return () => track?.removeEventListener("transitionend", onEnd);
+	}, [offset, n]);
+	const items = [
+		...logos,
+		...logos,
+		...logos
+	];
+	return /* @__PURE__ */ jsx("section", {
+		className: [LogoCarousel_module_default.carousel, className ?? ""].filter(Boolean).join(" "),
+		role: "region",
+		"aria-roledescription": "carrusel",
+		"aria-label": label,
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: () => setPaused(false),
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: trackRef,
+			className: LogoCarousel_module_default.track,
+			"data-jump": jump ? "" : void 0,
+			style: { "--offset": offset },
+			children: items.map((logo, i) => /* @__PURE__ */ jsx("div", {
+				className: LogoCarousel_module_default.slot,
+				"data-pos": i - offset,
+				"aria-hidden": i >= n ? true : void 0,
+				children: /* @__PURE__ */ jsx("img", {
+					className: LogoCarousel_module_default.logo,
+					src: logo.src,
+					alt: i < n ? logo.name : "",
+					loading: "lazy"
+				})
+			}, i))
+		})
+	});
+}
+//#endregion
+export { LogoCarousel };

package/dist/components/organisms/LogoCarousel/LogoCarousel.module.js

@@ -0,0 +1,13 @@
+//#region src/components/organisms/LogoCarousel/LogoCarousel.module.css
+var carousel = "_carousel_w1h3y_4";
+var track = "_track_w1h3y_21";
+var slot = "_slot_w1h3y_32";
+var logo = "_logo_w1h3y_42";
+var LogoCarousel_module_default = {
+	carousel,
+	track,
+	slot,
+	logo
+};
+//#endregion
+export { carousel, LogoCarousel_module_default as default, logo, slot, track };

package/dist/components/organisms/LogoCarousel/index.d.ts

@@ -0,0 +1,3 @@
+export { LogoCarousel } from './LogoCarousel';
+export { LOGO_CAROUSEL_DEFAULTS } from './types';
+export type { ClientLogo, LogoCarouselProps } from './types';

package/dist/components/organisms/LogoCarousel/types.d.ts

@@ -0,0 +1,18 @@
+export type ClientLogo = {
+    /** Path or URL of the logo file. */
+    src: string;
+    /** The name of the client. */
+    name: string;
+};
+export type LogoCarouselProps = {
+    /** The client logos, in order. */
+    logos: ClientLogo[];
+    /** Accessible name of the carousel. */
+    label: string;
+    /** Milliseconds between steps. Off with prefers-reduced-motion. */
+    interval?: number;
+    className?: string;
+};
+export declare const LOGO_CAROUSEL_DEFAULTS: {
+    readonly interval: 2400;
+};

package/dist/components/organisms/LogoCarousel/types.js

@@ -0,0 +1,4 @@
+//#region src/components/organisms/LogoCarousel/types.ts
+var LOGO_CAROUSEL_DEFAULTS = { interval: 2400 };
+//#endregion
+export { LOGO_CAROUSEL_DEFAULTS };

package/dist/components/organisms/Marquee/Marquee.d.ts

@@ -0,0 +1,7 @@
+import type { MarqueeProps } from './types';
+/**
+ * Marquee is a strip of short pieces that scrolls endlessly between two hairlines, edge to edge.
+ * The pieces are repeated until one round covers the window, then doubled (the copies hidden from
+ * screen readers), so the loop never shows its end. The speed stays the same however many repeats.
+ */
+export declare function Marquee({ items, duration, className }: MarqueeProps): import("react").JSX.Element;

package/dist/components/organisms/Marquee/Marquee.js

@@ -0,0 +1,57 @@
+import { Text } from "../../atoms/Text/Text.js";
+import Marquee_module_default from "./Marquee.module.js";
+import { MARQUEE_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/organisms/Marquee/Marquee.tsx
+/**
+* Marquee is a strip of short pieces that scrolls endlessly between two hairlines, edge to edge.
+* The pieces are repeated until one round covers the window, then doubled (the copies hidden from
+* screen readers), so the loop never shows its end. The speed stays the same however many repeats.
+*/
+function Marquee({ items, duration = MARQUEE_DEFAULTS.duration, className }) {
+	const frame = useRef(null);
+	const round = useRef(null);
+	const [repeats, setRepeats] = useState(1);
+	useEffect(() => {
+		const f = frame.current;
+		const r = round.current;
+		if (!f || !r || typeof ResizeObserver === "undefined") return;
+		const fit = () => {
+			const one = r.scrollWidth / repeats;
+			if (one > 0) setRepeats(Math.max(1, Math.ceil(f.clientWidth / one)));
+		};
+		const ro = new ResizeObserver(fit);
+		ro.observe(f);
+		fit();
+		return () => ro.disconnect();
+	}, [repeats, items]);
+	const pieces = (copy) => items.map((item, i) => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: "body-m",
+		tone: "secondary",
+		className: Marquee_module_default.piece,
+		"aria-hidden": copy > 0 ? true : void 0,
+		children: item
+	}, `${copy}-${i}`));
+	const roundOf = (offset) => Array.from({ length: repeats }, (_, k) => pieces(offset + k));
+	return /* @__PURE__ */ jsx("div", {
+		ref: frame,
+		className: [Marquee_module_default.marquee, className ?? ""].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: Marquee_module_default.strip,
+			style: { "--marquee-duration": `${duration * repeats}s` },
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: round,
+				className: Marquee_module_default.round,
+				children: roundOf(0)
+			}), /* @__PURE__ */ jsx("div", {
+				className: Marquee_module_default.round,
+				"aria-hidden": "true",
+				children: roundOf(repeats)
+			})]
+		})
+	});
+}
+//#endregion
+export { Marquee };

package/dist/components/organisms/Marquee/Marquee.module.js

@@ -0,0 +1,15 @@
+//#region src/components/organisms/Marquee/Marquee.module.css
+var marquee = "_marquee_19w0s_3";
+var strip = "_strip_19w0s_12";
+var scroll = "_scroll_19w0s_1";
+var round = "_round_19w0s_18";
+var piece = "_piece_19w0s_23";
+var Marquee_module_default = {
+	marquee,
+	strip,
+	scroll,
+	round,
+	piece
+};
+//#endregion
+export { Marquee_module_default as default, marquee, piece, round, scroll, strip };

package/dist/components/organisms/Marquee/index.d.ts

@@ -0,0 +1,3 @@
+export { Marquee } from './Marquee';
+export { MARQUEE_DEFAULTS } from './types';
+export type { MarqueeProps } from './types';

package/dist/components/organisms/Marquee/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type MarqueeProps = {
+    /** The pieces that scroll. They are repeated to loop. */
+    items: ReactNode[];
+    /** Seconds for a full loop. */
+    duration?: number;
+    className?: string;
+};
+export declare const MARQUEE_DEFAULTS: {
+    readonly duration: 40;
+};

package/dist/components/organisms/Marquee/types.js

@@ -0,0 +1,4 @@
+//#region src/components/organisms/Marquee/types.ts
+var MARQUEE_DEFAULTS = { duration: 40 };
+//#endregion
+export { MARQUEE_DEFAULTS };

package/dist/components/organisms/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,6 @@
+import type { ProgressBarProps } from './types';
+/**
+ * ProgressBar is a time bar or an adoption bar: a track with a fill that grows from the left,
+ * labels at both ends and, optionally, milestones that light up as they are reached.
+ */
+export declare function ProgressBar({ value, start, end, milestones, reached, label, className }: ProgressBarProps): import("react").JSX.Element;

package/dist/components/organisms/ProgressBar/ProgressBar.js

@@ -0,0 +1,56 @@
+import { Text } from "../../atoms/Text/Text.js";
+import ProgressBar_module_default from "./ProgressBar.module.js";
+import { PROGRESS_BAR_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/ProgressBar/ProgressBar.tsx
+/**
+* ProgressBar is a time bar or an adoption bar: a track with a fill that grows from the left,
+* labels at both ends and, optionally, milestones that light up as they are reached.
+*/
+function ProgressBar({ value, start, end, milestones = PROGRESS_BAR_DEFAULTS.milestones, reached = PROGRESS_BAR_DEFAULTS.reached, label, className }) {
+	const v = Math.max(0, Math.min(1, value));
+	return /* @__PURE__ */ jsxs("div", {
+		className: [ProgressBar_module_default.bar, className ?? ""].filter(Boolean).join(" "),
+		role: "progressbar",
+		"aria-label": label,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(v * 100),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: ProgressBar_module_default.track,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: ProgressBar_module_default.fill,
+					style: { transform: `scaleX(${v})` }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: ProgressBar_module_default.dot,
+					style: { left: 0 },
+					"aria-hidden": "true"
+				}),
+				Array.from({ length: milestones }, (_, i) => /* @__PURE__ */ jsx("span", {
+					className: [ProgressBar_module_default.dot, ProgressBar_module_default.milestone].join(" "),
+					style: { left: `${(i + 1) / (milestones + 1) * 100}%` },
+					"data-on": i < reached ? "" : void 0,
+					"aria-hidden": "true"
+				}, i)),
+				/* @__PURE__ */ jsx("span", {
+					className: ProgressBar_module_default.dot,
+					style: { left: "100%" },
+					"aria-hidden": "true"
+				})
+			]
+		}), start || end ? /* @__PURE__ */ jsxs("div", {
+			className: ProgressBar_module_default.ends,
+			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "body-s",
+				children: start
+			}), /* @__PURE__ */ jsx(Text, {
+				variant: "body-s",
+				children: end
+			})]
+		}) : null]
+	});
+}
+//#endregion
+export { ProgressBar };