@540deg/ds 0.0.0-stage → 0.1.0

package/dist/components/molecules/Carousel/Carousel.js

@@ -0,0 +1,148 @@
+import { Bullets } from "../../atoms/Bullets/Bullets.js";
+import { Button } from "../../atoms/Button/Button.js";
+import Carousel_module_default from "./Carousel.module.js";
+import { CAROUSEL_DEFAULTS } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/molecules/Carousel/Carousel.tsx
+/**
+* Carousel is a strip that is paged with the dots below. It can advance by itself, but not by default.
+*/
+function Carousel({ items, label, controls = CAROUSEL_DEFAULTS.controls, header, itemWidth, autoplay, itemLabel = CAROUSEL_DEFAULTS.itemLabel, className }) {
+	const trackRef = useRef(null);
+	const [current, setCurrent] = useState(1);
+	const [paused, setPaused] = useState(false);
+	const count = items.length;
+	const mode = header && controls === "dots" ? "row" : controls;
+	const goTo = useCallback((page) => {
+		const track = trackRef.current;
+		if (!track) return;
+		const index = (page - 1 + count) % count + 1;
+		const slot = track.children[index - 1];
+		if (slot) track.scrollTo({
+			left: slot.offsetLeft - track.offsetLeft,
+			behavior: "smooth"
+		});
+		setCurrent(index);
+	}, [count]);
+	useEffect(() => {
+		const track = trackRef.current;
+		if (!track) return;
+		const onScroll = () => {
+			const slots = Array.from(track.children);
+			const left = track.scrollLeft + track.offsetLeft;
+			let nearest = 0;
+			let best = Infinity;
+			slots.forEach((slot, i) => {
+				const d = Math.abs(slot.offsetLeft - left);
+				if (d < best) {
+					best = d;
+					nearest = i;
+				}
+			});
+			setCurrent(nearest + 1);
+		};
+		track.addEventListener("scroll", onScroll, { passive: true });
+		return () => track.removeEventListener("scroll", onScroll);
+	}, []);
+	useEffect(() => {
+		if (!autoplay || paused || count < 2) return;
+		if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const id = window.setInterval(() => goTo(current + 1), autoplay);
+		return () => window.clearInterval(id);
+	}, [
+		autoplay,
+		paused,
+		current,
+		count,
+		goTo
+	]);
+	const arrows = /* @__PURE__ */ jsxs("div", {
+		className: Carousel_module_default.arrows,
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			icon: /* @__PURE__ */ jsx(ChevronLeft, {}),
+			iconOnly: true,
+			onClick: () => goTo(current - 1),
+			children: "Anterior"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			icon: /* @__PURE__ */ jsx(ChevronRight, {}),
+			iconOnly: true,
+			onClick: () => goTo(current + 1),
+			children: "Siguiente"
+		})]
+	});
+	const dots = /* @__PURE__ */ jsx("div", {
+		className: Carousel_module_default.dots,
+		children: /* @__PURE__ */ jsx(Bullets, {
+			count,
+			current,
+			onSelect: goTo,
+			itemLabel,
+			label
+		})
+	});
+	const classes = [
+		Carousel_module_default.carousel,
+		mode === "sides" ? Carousel_module_default.sides : "",
+		className ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("section", {
+		className: classes,
+		role: "region",
+		"aria-roledescription": "carrusel",
+		"aria-label": label,
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: () => setPaused(false),
+		children: [
+			header ? /* @__PURE__ */ jsxs("div", {
+				className: Carousel_module_default.headerRow,
+				children: [header, mode === "row" ? arrows : null]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: Carousel_module_default.window,
+				children: /* @__PURE__ */ jsx("div", {
+					ref: trackRef,
+					className: Carousel_module_default.track,
+					style: itemWidth ? { "--carousel-item": itemWidth } : void 0,
+					children: items.map((item, i) => /* @__PURE__ */ jsx("div", {
+						className: Carousel_module_default.slot,
+						"aria-roledescription": "diapositiva",
+						"aria-label": `${itemLabel} ${i + 1} de ${count}`,
+						children: item
+					}, i))
+				})
+			}),
+			mode === "sides" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: [Carousel_module_default.side, Carousel_module_default.sidePrev].join(" "),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					icon: /* @__PURE__ */ jsx(ChevronLeft, {}),
+					iconOnly: true,
+					onClick: () => goTo(current - 1),
+					children: "Anterior"
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: [Carousel_module_default.side, Carousel_module_default.sideNext].join(" "),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					icon: /* @__PURE__ */ jsx(ChevronRight, {}),
+					iconOnly: true,
+					onClick: () => goTo(current + 1),
+					children: "Siguiente"
+				})
+			})] }) : null,
+			mode === "dots" ? dots : null,
+			mode === "row" && !header ? /* @__PURE__ */ jsxs("div", {
+				className: Carousel_module_default.row,
+				children: [dots, arrows]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Carousel };

package/dist/components/molecules/Carousel/Carousel.module.js

@@ -0,0 +1,29 @@
+//#region src/components/molecules/Carousel/Carousel.module.css
+var carousel = "_carousel_zjv2t_3";
+var headerRow = "_headerRow_zjv2t_9";
+var window = "_window_zjv2t_16";
+var track = "_track_zjv2t_20";
+var slot = "_slot_zjv2t_34";
+var dots = "_dots_zjv2t_47";
+var row = "_row_zjv2t_52";
+var arrows = "_arrows_zjv2t_62";
+var sides = "_sides_zjv2t_69";
+var side = "_side_zjv2t_69";
+var sidePrev = "_sidePrev_zjv2t_80";
+var sideNext = "_sideNext_zjv2t_84";
+var Carousel_module_default = {
+	carousel,
+	headerRow,
+	window,
+	track,
+	slot,
+	dots,
+	row,
+	arrows,
+	sides,
+	side,
+	sidePrev,
+	sideNext
+};
+//#endregion
+export { arrows, carousel, Carousel_module_default as default, dots, headerRow, row, side, sideNext, sidePrev, sides, slot, track, window };

package/dist/components/molecules/Carousel/index.d.ts

@@ -0,0 +1,3 @@
+export { Carousel } from './Carousel';
+export { CAROUSEL_CONTROLS, CAROUSEL_DEFAULTS } from './types';
+export type { CarouselControls, CarouselProps } from './types';

package/dist/components/molecules/Carousel/types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export declare const CAROUSEL_CONTROLS: readonly ["dots", "row", "sides"];
+export type CarouselControls = (typeof CAROUSEL_CONTROLS)[number];
+export type CarouselProps = {
+    /** The pieces, one per slot. */
+    items: ReactNode[];
+    /** Accessible name of the carousel. */
+    label: string;
+    /** dots: centered dots. row: dots and arrows in a row. sides: arrows over the strip, no dots. */
+    controls?: CarouselControls;
+    /** A header above the strip; with it, the controls move up to its row (dots alone do not exist there). */
+    header?: ReactNode;
+    /** Width of each slot, as CSS. Default: half the grid from 600 px, full width below. */
+    itemWidth?: string;
+    /** Advance by itself every n milliseconds. Off by default; pauses on hover and focus. */
+    autoplay?: number;
+    /** Word for the dot names: "Página 2 de 5". */
+    itemLabel?: string;
+    className?: string;
+};
+export declare const CAROUSEL_DEFAULTS: {
+    readonly controls: "dots";
+    readonly itemLabel: "Página";
+};

package/dist/components/molecules/Carousel/types.js

@@ -0,0 +1,12 @@
+//#region src/components/molecules/Carousel/types.ts
+var CAROUSEL_CONTROLS = [
+	"dots",
+	"row",
+	"sides"
+];
+var CAROUSEL_DEFAULTS = {
+	controls: "dots",
+	itemLabel: "Página"
+};
+//#endregion
+export { CAROUSEL_CONTROLS, CAROUSEL_DEFAULTS };

package/dist/components/molecules/CaseItem/CaseItem.d.ts

@@ -0,0 +1,6 @@
+import type { CaseItemProps } from './types';
+/**
+ * CaseItem is a portfolio case: the photo, and over it the name and the sentence,
+ * anchored at the bottom on a veil. With href, one link wraps the whole piece.
+ */
+export declare function CaseItem({ src, alt, title, description, href, level, className }: CaseItemProps): import("react").JSX.Element;

package/dist/components/molecules/CaseItem/CaseItem.js

@@ -0,0 +1,54 @@
+import { Image } from "../../atoms/Image/Image.js";
+import { Text } from "../../atoms/Text/Text.js";
+import CaseItem_module_default from "./CaseItem.module.js";
+import { CASE_ITEM_DEFAULTS } from "./types.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/CaseItem/CaseItem.tsx
+/**
+* CaseItem is a portfolio case: the photo, and over it the name and the sentence,
+* anchored at the bottom on a veil. With href, one link wraps the whole piece.
+*/
+function CaseItem({ src, alt = CASE_ITEM_DEFAULTS.alt, title, description, href, level = CASE_ITEM_DEFAULTS.level, className }) {
+	const classes = [
+		CaseItem_module_default.item,
+		href ? CaseItem_module_default.linked : "",
+		className ?? ""
+	].filter(Boolean).join(" ");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: CaseItem_module_default.frame,
+			children: /* @__PURE__ */ jsx(Image, {
+				src,
+				alt,
+				ratio: "fill"
+			})
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: CaseItem_module_default.veil,
+			"aria-hidden": "true"
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: CaseItem_module_default.data,
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: level,
+				variant: "title-s",
+				wrap: "balance",
+				children: title
+			}), description ? /* @__PURE__ */ jsx(Text, {
+				variant: "body-s",
+				wrap: "pretty",
+				children: description
+			}) : null]
+		})
+	] });
+	return href ? /* @__PURE__ */ jsx("a", {
+		className: classes,
+		href,
+		children: content
+	}) : /* @__PURE__ */ jsx("article", {
+		className: classes,
+		children: content
+	});
+}
+//#endregion
+export { CaseItem };

package/dist/components/molecules/CaseItem/CaseItem.module.js

@@ -0,0 +1,19 @@
+//#region src/components/molecules/CaseItem/CaseItem.module.css
+var item = "_item_1gpwq_4";
+var frame = "_frame_1gpwq_13";
+var linked = "_linked_1gpwq_25";
+var forceHover = "_forceHover_1gpwq_26";
+var forceActive = "_forceActive_1gpwq_31";
+var veil = "_veil_1gpwq_41";
+var data = "_data_1gpwq_48";
+var CaseItem_module_default = {
+	item,
+	frame,
+	linked,
+	forceHover,
+	forceActive,
+	veil,
+	data
+};
+//#endregion
+export { data, CaseItem_module_default as default, forceActive, forceHover, frame, item, linked, veil };

package/dist/components/molecules/CaseItem/index.d.ts

@@ -0,0 +1,3 @@
+export { CaseItem } from './CaseItem';
+export { CASE_ITEM_DEFAULTS } from './types';
+export type { CaseItemProps } from './types';

package/dist/components/molecules/CaseItem/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export type CaseItemProps = {
+    /** The photo, always cropped to 2:1. The image is half the piece. */
+    src: string;
+    /** Alt of the photo. Usually "" because the title says what it is. */
+    alt?: string;
+    /** The name of the case. */
+    title: ReactNode;
+    /** One sentence about what the case was. */
+    description?: ReactNode;
+    /** With href the whole piece is one link named by the title; without it, nothing is pressed. */
+    href?: string;
+    /** Heading level of the title. */
+    level?: 'h2' | 'h3' | 'h4';
+    className?: string;
+};
+export declare const CASE_ITEM_DEFAULTS: {
+    readonly alt: "";
+    readonly level: "h3";
+};

package/dist/components/molecules/CaseItem/types.js

@@ -0,0 +1,7 @@
+//#region src/components/molecules/CaseItem/types.ts
+var CASE_ITEM_DEFAULTS = {
+	alt: "",
+	level: "h3"
+};
+//#endregion
+export { CASE_ITEM_DEFAULTS };

package/dist/components/molecules/Dialog/Dialog.d.ts

@@ -0,0 +1,6 @@
+import type { DialogProps } from './types';
+/**
+ * Dialog is a window that covers the page to tell one thing. A real <dialog>: focus goes in on
+ * open, stays in, and returns to the opener on close. Escape closes; so does a click on the veil.
+ */
+export declare function Dialog({ open, onClose, title, media, footer, className, children }: DialogProps): import("react").JSX.Element;

package/dist/components/molecules/Dialog/Dialog.js

@@ -0,0 +1,81 @@
+import { Button } from "../../atoms/Button/Button.js";
+import { Image } from "../../atoms/Image/Image.js";
+import { Text } from "../../atoms/Text/Text.js";
+import Dialog_module_default from "./Dialog.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { X } from "lucide-react";
+//#region src/components/molecules/Dialog/Dialog.tsx
+/**
+* Dialog is a window that covers the page to tell one thing. A real <dialog>: focus goes in on
+* open, stays in, and returns to the opener on close. Escape closes; so does a click on the veil.
+*/
+function Dialog({ open, onClose, title, media, footer, className, children }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const dialog = ref.current;
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		if (!open && dialog.open) dialog.close();
+	}, [open]);
+	const classes = [Dialog_module_default.dialog, className ?? ""].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx("dialog", {
+		ref,
+		className: classes,
+		"aria-labelledby": "dialog-title",
+		onClose,
+		onCancel: (e) => {
+			e.preventDefault();
+			onClose();
+		},
+		onClick: (e) => {
+			if (e.target === e.currentTarget) onClose();
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: Dialog_module_default.inner,
+			children: [media ? /* @__PURE__ */ jsx("div", {
+				className: Dialog_module_default.media,
+				children: /* @__PURE__ */ jsx(Image, {
+					src: media.src,
+					alt: media.alt,
+					ratio: "1:1"
+				})
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: Dialog_module_default.body,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: Dialog_module_default.header,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "h2",
+							variant: "title-s",
+							wrap: "balance",
+							id: "dialog-title",
+							children: title
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							icon: /* @__PURE__ */ jsx(X, {}),
+							iconOnly: true,
+							onClick: onClose,
+							children: "Cerrar"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: Dialog_module_default.content,
+						children: /* @__PURE__ */ jsx(Text, {
+							variant: "body-m",
+							wrap: "pretty",
+							children
+						})
+					}),
+					footer ? /* @__PURE__ */ jsx("div", {
+						className: Dialog_module_default.footer,
+						children: footer
+					}) : null
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { Dialog };

package/dist/components/molecules/Dialog/Dialog.module.js

@@ -0,0 +1,19 @@
+//#region src/components/molecules/Dialog/Dialog.module.css
+var dialog = "_dialog_y1k69_4";
+var inner = "_inner_y1k69_23";
+var media = "_media_y1k69_30";
+var body = "_body_y1k69_36";
+var header = "_header_y1k69_44";
+var content = "_content_y1k69_52";
+var footer = "_footer_y1k69_57";
+var Dialog_module_default = {
+	dialog,
+	inner,
+	media,
+	body,
+	header,
+	content,
+	footer
+};
+//#endregion
+export { body, content, Dialog_module_default as default, dialog, footer, header, inner, media };

package/dist/components/molecules/Dialog/index.d.ts

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

package/dist/components/molecules/Dialog/types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export type DialogProps = {
+    /** Whether it is open. The state lives outside: only the screen knows whom it is showing. */
+    open: boolean;
+    /** Called when the user closes: Escape, the cross, or a click on the veil. */
+    onClose: () => void;
+    /** The title: the heading that is seen and the name of the dialog. */
+    title: ReactNode;
+    /** Optional portrait, full bleed at the top, cropped to 1:1. */
+    media?: {
+        /** Path or URL of the portrait. */
+        src: string;
+        /** What the portrait shows, in words. */
+        alt: string;
+    };
+    /** Optional actions row at the bottom. */
+    footer?: ReactNode;
+    /** The text. The only thing that scrolls if it does not fit. */
+    children: ReactNode;
+    className?: string;
+};
+export declare const DIALOG_DEFAULTS: {};

package/dist/components/molecules/Field/Field.d.ts

@@ -0,0 +1,6 @@
+import type { FieldProps } from './types';
+/**
+ * Field is a form field: the label above and the control, tied by the id.
+ * The control is not a separate component: a field without a label is what this exists to avoid.
+ */
+export declare function Field(props: FieldProps): import("react").JSX.Element;

package/dist/components/molecules/Field/Field.js

@@ -0,0 +1,47 @@
+import { Text } from "../../atoms/Text/Text.js";
+import Field_module_default from "./Field.module.js";
+import { FIELD_DEFAULTS } from "./types.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/Field/Field.tsx
+/**
+* Field is a form field: the label above and the control, tied by the id.
+* The control is not a separate component: a field without a label is what this exists to avoid.
+*/
+function Field(props) {
+	const { label, id, size = FIELD_DEFAULTS.size, className, ...rest } = props;
+	const classes = [Field_module_default.field, className ?? ""].filter(Boolean).join(" ");
+	const controlClasses = [
+		Field_module_default.control,
+		Field_module_default[`size-${size}`],
+		rest.multiline ? Field_module_default.multiline : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		children: [/* @__PURE__ */ jsx("label", {
+			className: Field_module_default.label,
+			htmlFor: id,
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: "micro-bold",
+				tone: "secondary",
+				children: label
+			})
+		}), rest.multiline ? (() => {
+			const { multiline: _m, ...textareaProps } = rest;
+			return /* @__PURE__ */ jsx("textarea", {
+				id,
+				className: controlClasses,
+				...textareaProps
+			});
+		})() : (() => {
+			const { multiline: _m, ...inputProps } = rest;
+			return /* @__PURE__ */ jsx("input", {
+				id,
+				className: controlClasses,
+				...inputProps
+			});
+		})()]
+	});
+}
+//#endregion
+export { Field };

package/dist/components/molecules/Field/Field.module.js

@@ -0,0 +1,15 @@
+//#region src/components/molecules/Field/Field.module.css
+var field = "_field_1i00h_4";
+var label = "_label_1i00h_10";
+var control = "_control_1i00h_17";
+var multiline = "_multiline_1i00h_64";
+var Field_module_default = {
+	field,
+	label,
+	control,
+	"size-md": "_size-md_1i00h_55",
+	"size-sm": "_size-sm_1i00h_59",
+	multiline
+};
+//#endregion
+export { control, Field_module_default as default, field, label, multiline };

package/dist/components/molecules/Field/index.d.ts

@@ -0,0 +1,3 @@
+export { Field } from './Field';
+export { FIELD_DEFAULTS, FIELD_SIZES } from './types';
+export type { FieldProps, FieldSize } from './types';

package/dist/components/molecules/Field/types.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export declare const FIELD_SIZES: readonly ["md", "sm"];
+export type FieldSize = (typeof FIELD_SIZES)[number];
+type Common = {
+    /** The label. Required: it is why this molecule exists. Written in normal case. */
+    label: string;
+    /** Ties label and control. */
+    id: string;
+    /** Control height: md 45, sm 36. */
+    size?: FieldSize;
+    className?: string;
+};
+type AsInput = Common & {
+    multiline?: false;
+} & Omit<ComponentPropsWithoutRef<'input'>, 'id' | 'className' | 'size'>;
+type AsTextarea = Common & {
+    /** A textarea for messages. */
+    multiline: true;
+} & Omit<ComponentPropsWithoutRef<'textarea'>, 'id' | 'className'>;
+export type FieldProps = AsInput | AsTextarea;
+export declare const FIELD_DEFAULTS: {
+    readonly size: "md";
+};
+export {};

package/dist/components/molecules/Field/types.js

@@ -0,0 +1,5 @@
+//#region src/components/molecules/Field/types.ts
+var FIELD_SIZES = ["md", "sm"];
+var FIELD_DEFAULTS = { size: "md" };
+//#endregion
+export { FIELD_DEFAULTS, FIELD_SIZES };

package/dist/components/molecules/Footer/Footer.d.ts

@@ -0,0 +1,6 @@
+import type { FooterProps } from './types';
+/**
+ * Footer closes the page: the brand with its tagline, the columns of links, the networks
+ * and the signature. The top only exists if there is something to put in it.
+ */
+export declare function Footer({ tagline, groups, networks, networksTitle, copyright, legal, homeHref, homeLabel, className, ...rest }: FooterProps): import("react").JSX.Element;