@540deg/ds 0.0.0-stage → 0.1.0

package/dist/components/organisms/Bars/Bars.js

@@ -0,0 +1,94 @@
+import { useReveal } from "../../../hooks/useReveal.js";
+import { Text } from "../../atoms/Text/Text.js";
+import Bars_module_default from "./Bars.module.js";
+import { BARS_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+//#region src/components/organisms/Bars/Bars.tsx
+/**
+* Bars is a horizontal bar chart: each row its label, a bar that grows from the left when it
+* comes into view (or its Step lights up) and its figure at the tip. Ported from the newsletter talk.
+*/
+function Bars({ rows, label, header, max, unit = BARS_DEFAULTS.unit, decimals = BARS_DEFAULTS.decimals, className }) {
+	const ref = useRef(null);
+	const on = useReveal(ref);
+	const top = max ?? Math.max(...rows.map((r) => r.value), 0);
+	const format = useMemo(() => new Intl.NumberFormat("es-ES", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	}), [decimals]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: [Bars_module_default.bars, className ?? ""].filter(Boolean).join(" "),
+		children: [header ? /* @__PURE__ */ jsxs("div", {
+			className: Bars_module_default.head,
+			"aria-hidden": "true",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "micro-bold",
+					tone: "secondary",
+					className: Bars_module_default.label,
+					children: header.label
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "micro-bold",
+					tone: "secondary",
+					className: Bars_module_default.track,
+					children: header.value
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "micro-bold",
+					tone: "secondary",
+					className: Bars_module_default.detail,
+					children: header.detail
+				})
+			]
+		}) : null, /* @__PURE__ */ jsx("ul", {
+			className: Bars_module_default.list,
+			"aria-label": label,
+			children: rows.map((row, i) => {
+				const share = top > 0 ? Math.max(0, Math.min(1, row.value / top)) : 0;
+				return /* @__PURE__ */ jsxs("li", {
+					className: Bars_module_default.row,
+					"data-dimmed": row.dimmed ? "" : void 0,
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							variant: "body-m",
+							className: Bars_module_default.label,
+							children: row.label
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: Bars_module_default.track,
+							children: [/* @__PURE__ */ jsx("span", {
+								className: [Bars_module_default.fill, Bars_module_default[`tone-${row.tone ?? "ink"}`]].join(" "),
+								style: {
+									inlineSize: on ? `${share * 100}%` : 0,
+									transitionDelay: on ? `${i * 50}ms` : "0ms"
+								},
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								variant: "body-s-bold",
+								className: Bars_module_default.value,
+								children: row.display ?? `${format.format(row.value)}${unit}`
+							})]
+						}),
+						row.detail ? /* @__PURE__ */ jsx(Text, {
+							as: "span",
+							variant: "body-s",
+							tone: "secondary",
+							className: Bars_module_default.detail,
+							children: row.detail
+						}) : null
+					]
+				}, i);
+			})
+		})]
+	});
+}
+//#endregion
+export { Bars };

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

@@ -0,0 +1,26 @@
+//#region src/components/organisms/Bars/Bars.module.css
+var bars = "_bars_11g54_4";
+var list = "_list_11g54_10";
+var row = "_row_11g54_18";
+var label = "_label_11g54_41";
+var track = "_track_11g54_45";
+var fill = "_fill_11g54_53";
+var value = "_value_11g54_72";
+var detail = "_detail_11g54_78";
+var head = "_head_11g54_84 _row_11g54_18";
+var Bars_module_default = {
+	bars,
+	list,
+	row,
+	label,
+	track,
+	fill,
+	"tone-ink": "_tone-ink_11g54_60",
+	"tone-context": "_tone-context_11g54_64",
+	"tone-accent": "_tone-accent_11g54_68",
+	value,
+	detail,
+	head
+};
+//#endregion
+export { bars, Bars_module_default as default, detail, fill, head, label, list, row, track, value };

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

@@ -0,0 +1,3 @@
+export { Bars } from './Bars';
+export { BARS_DEFAULTS, BAR_TONES } from './types';
+export type { Bar, BarTone, BarsProps } from './types';

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export declare const BAR_TONES: readonly ["ink", "context", "accent"];
+export type BarTone = (typeof BAR_TONES)[number];
+export type Bar = {
+    /** What the row is ("España", "#3 Título del post"). */
+    label: ReactNode;
+    /** The figure, as a number: it sets the length. */
+    value: number;
+    /** How the figure is written at the tip, if not the number itself ("45,9 %"). */
+    display?: ReactNode;
+    /** An extra column on the right ("45,9 % · 12 altas"). */
+    detail?: ReactNode;
+    /** ink: the series that tells the story. context: the rest, in gray. accent: the one row that matters (one per chart). */
+    tone?: BarTone;
+    /** Fade the row to 30 %, to point at the others. */
+    dimmed?: boolean;
+};
+export type BarsProps = {
+    /** The rows, in the order they are read (usually from the biggest). */
+    rows: Bar[];
+    /** Accessible name of the chart ("Suscriptores por país"). */
+    label: string;
+    /** Optional column headings, in micro: the label, the figure and the detail. */
+    header?: {
+        /** Heading of the label column. */
+        label: ReactNode;
+        /** Heading of the figure column. */
+        value?: ReactNode;
+        /** Heading of the detail column. */
+        detail?: ReactNode;
+    };
+    /** The value of a full bar. By default, the biggest row. */
+    max?: number;
+    /** Text after every figure when there is no display (" %"). */
+    unit?: string;
+    /** Decimals for the figures written from the number. */
+    decimals?: number;
+    className?: string;
+};
+export declare const BARS_DEFAULTS: {
+    readonly unit: "";
+    readonly decimals: 0;
+};

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

@@ -0,0 +1,12 @@
+//#region src/components/organisms/Bars/types.ts
+var BAR_TONES = [
+	"ink",
+	"context",
+	"accent"
+];
+var BARS_DEFAULTS = {
+	unit: "",
+	decimals: 0
+};
+//#endregion
+export { BARS_DEFAULTS, BAR_TONES };

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

@@ -0,0 +1,3 @@
+import type { BlobsProps } from './types';
+/** Blobs are the two soft yellow stains that drift behind the whole talk. Pure decoration. */
+export declare function Blobs({ className }: BlobsProps): import("react").JSX.Element;

package/dist/components/organisms/Blobs/Blobs.js

@@ -0,0 +1,14 @@
+import Blobs_module_default from "./Blobs.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Blobs/Blobs.tsx
+/** Blobs are the two soft yellow stains that drift behind the whole talk. Pure decoration. */
+function Blobs({ className }) {
+	const classes = [Blobs_module_default.blobs, className ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("div", { className: Blobs_module_default.a }), /* @__PURE__ */ jsx("div", { className: Blobs_module_default.b })]
+	});
+}
+//#endregion
+export { Blobs };

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

@@ -0,0 +1,15 @@
+//#region src/components/organisms/Blobs/Blobs.module.css
+var blobs = "_blobs_2bbak_3";
+var a = "_a_2bbak_11";
+var b = "_b_2bbak_3";
+var driftA = "_driftA_2bbak_1";
+var driftB = "_driftB_2bbak_1";
+var Blobs_module_default = {
+	blobs,
+	a,
+	b,
+	driftA,
+	driftB
+};
+//#endregion
+export { a, b, blobs, Blobs_module_default as default, driftA, driftB };

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { BlockTitleProps } from './types';
+/**
+ * BlockTitle is a numbered block title and, right behind it, its photo. The title is a stop;
+ * the photo is not: Deck aligns the title at the top so the photo peeks under it.
+ */
+export declare function BlockTitle({ id, ordinal, title, photo, className }: BlockTitleProps): import("react").JSX.Element;

package/dist/components/organisms/BlockTitle/BlockTitle.js

@@ -0,0 +1,46 @@
+import { Image } from "../../atoms/Image/Image.js";
+import { Text } from "../../atoms/Text/Text.js";
+import { SectionHeader } from "../../molecules/SectionHeader/SectionHeader.js";
+import { Slide } from "../Slide/Slide.js";
+import BlockTitle_module_default from "./BlockTitle.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/BlockTitle/BlockTitle.tsx
+/**
+* BlockTitle is a numbered block title and, right behind it, its photo. The title is a stop;
+* the photo is not: Deck aligns the title at the top so the photo peeks under it.
+*/
+function BlockTitle({ id, ordinal, title, photo, className }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slide, {
+		id,
+		full: false,
+		className,
+		"aria-labelledby": `${id}-title`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: BlockTitle_module_default.title,
+			children: [ordinal ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "micro-light",
+				tone: "secondary",
+				"aria-hidden": "true",
+				children: ordinal
+			}) : null, /* @__PURE__ */ jsx(SectionHeader, {
+				title,
+				titleId: `${id}-title`,
+				align: "center"
+			})]
+		})
+	}), photo ? /* @__PURE__ */ jsx("div", {
+		className: BlockTitle_module_default.photo,
+		"data-deck-photo": "",
+		children: /* @__PURE__ */ jsx("div", {
+			className: BlockTitle_module_default.layer,
+			children: /* @__PURE__ */ jsx(Image, {
+				src: photo.src,
+				alt: photo.alt,
+				ratio: "2:1"
+			})
+		})
+	}) : null] });
+}
+//#endregion
+export { BlockTitle };

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

@@ -0,0 +1,15 @@
+//#region src/components/organisms/BlockTitle/BlockTitle.module.css
+var title = "_title_40wtv_4";
+var photo = "_photo_40wtv_10";
+var layer = "_layer_40wtv_15";
+var reveal = "_reveal_40wtv_1";
+var settle = "_settle_40wtv_1";
+var BlockTitle_module_default = {
+	title,
+	photo,
+	layer,
+	reveal,
+	settle
+};
+//#endregion
+export { BlockTitle_module_default as default, layer, photo, reveal, settle, title };

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

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

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export type BlockTitleProps = {
+    /** The stop's anchor ("#bloque-1"). The title takes it too, with -title. */
+    id: string;
+    /** The ordinal of the block ("01"). Decorative. */
+    ordinal?: string;
+    /** The title. */
+    title: ReactNode;
+    /** The photo that goes right behind the title, 2:1. Not a stop: it goes with its title. */
+    photo?: {
+        /** Path or URL of the photo. */
+        src: string;
+        /** What the photo shows, in words. */
+        alt: string;
+    };
+    className?: string;
+};
+export declare const BLOCK_TITLE_DEFAULTS: {};

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

@@ -0,0 +1,6 @@
+import type { CardListProps } from './types';
+/**
+ * CardList is the stack of full-width bands (Card in its row variant). It leaves the column
+ * to the window edge and closes the stack with the bottom line no row can draw.
+ */
+export declare function CardList({ children, className }: CardListProps): import("react").JSX.Element;

package/dist/components/organisms/CardList/CardList.js

@@ -0,0 +1,15 @@
+import CardList_module_default from "./CardList.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/organisms/CardList/CardList.tsx
+/**
+* CardList is the stack of full-width bands (Card in its row variant). It leaves the column
+* to the window edge and closes the stack with the bottom line no row can draw.
+*/
+function CardList({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: [CardList_module_default.list, className ?? ""].filter(Boolean).join(" "),
+		children
+	});
+}
+//#endregion
+export { CardList };

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

@@ -0,0 +1,5 @@
+//#region src/components/organisms/CardList/CardList.module.css
+var list = "_list_jhida_4";
+var CardList_module_default = { list };
+//#endregion
+export { CardList_module_default as default, list };

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

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

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type CardListProps = {
+    /** Only Card in its row variant: it is the only thing that brings the line between bands. */
+    children: ReactNode;
+    className?: string;
+};

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

@@ -0,0 +1,6 @@
+import type { ClosingProps } from './types';
+/**
+ * Closing is the last slide before the footer: the closing sentence in statement,
+ * with an optional body at half the grid and a final line.
+ */
+export declare function Closing({ id, sentence, body, punchline, className }: ClosingProps): import("react").JSX.Element;

package/dist/components/organisms/Closing/Closing.js

@@ -0,0 +1,42 @@
+import { Text } from "../../atoms/Text/Text.js";
+import { Slide } from "../Slide/Slide.js";
+import Closing_module_default from "./Closing.module.js";
+import { CLOSING_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Closing/Closing.tsx
+/**
+* Closing is the last slide before the footer: the closing sentence in statement,
+* with an optional body at half the grid and a final line.
+*/
+function Closing({ id = CLOSING_DEFAULTS.id, sentence, body = [], punchline, className }) {
+	return /* @__PURE__ */ jsxs(Slide, {
+		id,
+		className: [Closing_module_default.closing, className ?? ""].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "p",
+			variant: "statement",
+			align: "center",
+			wrap: "balance",
+			measure: "wide",
+			children: sentence
+		}), body.length > 0 || punchline ? /* @__PURE__ */ jsxs("div", {
+			className: Closing_module_default.body,
+			children: [body.map((p, i) => /* @__PURE__ */ jsx(Text, {
+				variant: "body-l",
+				tone: "secondary",
+				align: "center",
+				wrap: "pretty",
+				measure: "half",
+				children: p
+			}, i)), punchline ? /* @__PURE__ */ jsx(Text, {
+				variant: "body-l",
+				align: "center",
+				wrap: "pretty",
+				measure: "half",
+				children: punchline
+			}) : null]
+		}) : null]
+	});
+}
+//#endregion
+export { Closing };

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

@@ -0,0 +1,9 @@
+//#region src/components/organisms/Closing/Closing.module.css
+var closing = "_closing_ursam_4";
+var body = "_body_ursam_8";
+var Closing_module_default = {
+	closing,
+	body
+};
+//#endregion
+export { body, closing, Closing_module_default as default };

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

@@ -0,0 +1,3 @@
+export { Closing } from './Closing';
+export { CLOSING_DEFAULTS } from './types';
+export type { ClosingProps } from './types';

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export type ClosingProps = {
+    /** The stop's anchor. */
+    id?: string;
+    /** The closing sentence, in statement, three quarters wide. May contain <strong>. */
+    sentence: ReactNode;
+    /** Optional paragraphs under it, at half the grid, body-l secondary. */
+    body?: ReactNode[];
+    /** The last line, body-l primary. */
+    punchline?: ReactNode;
+    className?: string;
+};
+export declare const CLOSING_DEFAULTS: {
+    readonly id: "cierre";
+};

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

@@ -0,0 +1,4 @@
+//#region src/components/organisms/Closing/types.ts
+var CLOSING_DEFAULTS = { id: "cierre" };
+//#endregion
+export { CLOSING_DEFAULTS };

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

@@ -0,0 +1,6 @@
+import type { CoverProps } from './types';
+/**
+ * Cover is the first stop of a talk: the title in statement, one line per line, the question,
+ * the lead, the event card, the client logo and the full-bleed photo glued to the bottom.
+ */
+export declare function Cover({ id, title, question, lead, event, client, photo, className }: CoverProps): import("react").JSX.Element;

package/dist/components/organisms/Cover/Cover.js

@@ -0,0 +1,85 @@
+import { Image } from "../../atoms/Image/Image.js";
+import { Text } from "../../atoms/Text/Text.js";
+import { Slide } from "../Slide/Slide.js";
+import Cover_module_default from "./Cover.module.js";
+import { COVER_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/Cover/Cover.tsx
+/**
+* Cover is the first stop of a talk: the title in statement, one line per line, the question,
+* the lead, the event card, the client logo and the full-bleed photo glued to the bottom.
+*/
+function Cover({ id = COVER_DEFAULTS.id, title, question, lead, event, client, photo, className }) {
+	return /* @__PURE__ */ jsx(Slide, {
+		id,
+		className: [Cover_module_default.cover, className ?? ""].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: Cover_module_default.block,
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: Cover_module_default.text,
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							as: "h1",
+							variant: "statement",
+							align: "center",
+							children: title.map((line) => /* @__PURE__ */ jsx("span", {
+								className: Cover_module_default.line,
+								children: line
+							}, line))
+						}),
+						question ? /* @__PURE__ */ jsx(Text, {
+							variant: "body-m",
+							tone: "secondary",
+							align: "center",
+							wrap: "balance",
+							measure: "half",
+							children: question
+						}) : null,
+						lead ? /* @__PURE__ */ jsx(Text, {
+							variant: "body-m",
+							tone: "secondary",
+							align: "center",
+							wrap: "pretty",
+							measure: "half",
+							children: lead
+						}) : null,
+						event ? /* @__PURE__ */ jsx(Text, {
+							variant: "body-s",
+							tone: "secondary",
+							align: "center",
+							children: event
+						}) : null
+					]
+				}),
+				client ? /* @__PURE__ */ jsxs("div", {
+					className: Cover_module_default.client,
+					children: [/* @__PURE__ */ jsx("img", {
+						className: Cover_module_default.clientLight,
+						src: client.light,
+						alt: client.alt,
+						loading: "eager",
+						decoding: "async"
+					}), /* @__PURE__ */ jsx("img", {
+						className: Cover_module_default.clientDark,
+						src: client.dark,
+						alt: client.alt,
+						loading: "eager",
+						decoding: "async"
+					})]
+				}) : null,
+				photo ? /* @__PURE__ */ jsx("div", {
+					className: Cover_module_default.photo,
+					children: /* @__PURE__ */ jsx(Image, {
+						src: photo.src,
+						alt: photo.alt,
+						ratio: "2:1",
+						loading: "eager"
+					})
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { Cover };

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

@@ -0,0 +1,21 @@
+//#region src/components/organisms/Cover/Cover.module.css
+var cover = "_cover_weyps_4";
+var block = "_block_weyps_9";
+var text = "_text_weyps_15";
+var line = "_line_weyps_21";
+var client = "_client_weyps_25";
+var clientDark = "_clientDark_weyps_35";
+var clientLight = "_clientLight_weyps_39";
+var photo = "_photo_weyps_48";
+var Cover_module_default = {
+	cover,
+	block,
+	text,
+	line,
+	client,
+	clientDark,
+	clientLight,
+	photo
+};
+//#endregion
+export { block, client, clientDark, clientLight, cover, Cover_module_default as default, line, photo, text };

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

@@ -0,0 +1,3 @@
+export { Cover } from './Cover';
+export { COVER_DEFAULTS } from './types';
+export type { CoverProps } from './types';

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+export type CoverProps = {
+    /** The stop's anchor. */
+    id?: string;
+    /** The title lines, one per line, in statement. */
+    title: string[];
+    /** The question under the title, at half the grid, balanced. */
+    question?: ReactNode;
+    /** The lead, at half the grid, pretty. */
+    lead?: ReactNode;
+    /** The event card ("Open space 2026"). */
+    event?: ReactNode;
+    /** A client logo, with a light and a dark file. */
+    client?: {
+        /** The logo file shown on the light theme. */
+        light: string;
+        /** The logo file shown on the dark theme. */
+        dark: string;
+        /** The client's name. */
+        alt: string;
+    };
+    /** The full-bleed photo under everything, 2:1. */
+    photo?: {
+        /** Path or URL of the photo. */
+        src: string;
+        /** What the photo shows, in words. */
+        alt: string;
+    };
+    className?: string;
+};
+export declare const COVER_DEFAULTS: {
+    readonly id: "portada";
+};

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

@@ -0,0 +1,4 @@
+//#region src/components/organisms/Cover/types.ts
+var COVER_DEFAULTS = { id: "portada" };
+//#endregion
+export { COVER_DEFAULTS };

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

@@ -0,0 +1,6 @@
+import type { CycleProps } from './types';
+/**
+ * Cycle is a ring of phases with an arc of progress. The phases before the active one are done;
+ * marks paint a node red, green or yellow.
+ */
+export declare function Cycle({ phases, active, all, highlightFirst, marks, label, className }: CycleProps): import("react").JSX.Element;