@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/typing-animation.js

@@ -0,0 +1,389 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_TIMING } from "../motion/tokens.js";
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const motionElements = {
+	article: motion.article,
+	div: motion.div,
+	h1: motion.h1,
+	h2: motion.h2,
+	h3: motion.h3,
+	h4: motion.h4,
+	h5: motion.h5,
+	h6: motion.h6,
+	li: motion.li,
+	p: motion.p,
+	section: motion.section,
+	span: motion.span
+};
+/** Idle cursors fade out and back in, like a text editor's caret. */
+const CURSOR_BLINK_OPACITY = [
+	1,
+	1,
+	0,
+	0,
+	1
+];
+const CURSOR_BLINK_TIMES = [
+	0,
+	.4,
+	.5,
+	.9,
+	1
+];
+export function TypingAnimation(t0) {
+	const $ = _c(68);
+	let children;
+	let className;
+	let deleteSpeed;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	let typeSpeed;
+	let words;
+	if ($[0] !== t0) {
+		({children, words, className, duration: t1, typeSpeed, deleteSpeed, delay: t2, pauseDelay: t3, loop: t4, as: t5, startOnView: t6, showCursor: t7, blinkCursor: t8, cursorStyle: t9, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = deleteSpeed;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = t9;
+		$[14] = typeSpeed;
+		$[15] = words;
+	} else {
+		children = $[1];
+		className = $[2];
+		deleteSpeed = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+		t9 = $[13];
+		typeSpeed = $[14];
+		words = $[15];
+	}
+	const duration = t1 === undefined ? 80 : t1;
+	const delay = t2 === undefined ? 0 : t2;
+	const pauseDelay = t3 === undefined ? 1e3 : t3;
+	const loop = t4 === undefined ? false : t4;
+	const Component = t5 === undefined ? "span" : t5;
+	const startOnView = t6 === undefined ? true : t6;
+	const showCursor = t7 === undefined ? true : t7;
+	const blinkCursor = t8 === undefined ? true : t8;
+	const cursorStyle = t9 === undefined ? "line" : t9;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const wasReducedMotionRef = useRef(false);
+	const MotionComponent = motionElements[Component];
+	const [displayedText, setDisplayedText] = useState("");
+	const [currentWordIndex, setCurrentWordIndex] = useState(0);
+	const [currentCharIndex, setCurrentCharIndex] = useState(0);
+	const [phase, setPhase] = useState("typing");
+	const elementRef = useRef(null);
+	let t10;
+	if ($[16] !== startOnView) {
+		t10 = () => !startOnView || typeof IntersectionObserver === "undefined";
+		$[16] = startOnView;
+		$[17] = t10;
+	} else {
+		t10 = $[17];
+	}
+	const [isInView, setIsInView] = useState(t10);
+	let t11;
+	if ($[18] !== children || $[19] !== words) {
+		t11 = words ?? (children ? [children] : []);
+		$[18] = children;
+		$[19] = words;
+		$[20] = t11;
+	} else {
+		t11 = $[20];
+	}
+	const wordsToAnimate = t11;
+	const hasMultipleWords = wordsToAnimate.length > 1;
+	const typingSpeed = typeSpeed ?? duration;
+	const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
+	const shouldStart = startOnView ? isInView : true;
+	let t12;
+	if ($[21] !== children || $[22] !== words) {
+		t12 = words ? words.join("\0") : children ?? "";
+		$[21] = children;
+		$[22] = words;
+		$[23] = t12;
+	} else {
+		t12 = $[23];
+	}
+	const animationSourceKey = t12;
+	const lastResetSourceKeyRef = useRef(animationSourceKey);
+	let t13;
+	let t14;
+	if ($[24] !== isInView || $[25] !== startOnView) {
+		t13 = () => {
+			if (!startOnView || isInView) {
+				return;
+			}
+			const element = elementRef.current;
+			if (!element || typeof IntersectionObserver === "undefined") {
+				return;
+			}
+			const observer = new IntersectionObserver((t15) => {
+				const [entry] = t15;
+				if (entry.isIntersecting) {
+					setIsInView(true);
+					observer.disconnect();
+				}
+			}, { threshold: .3 });
+			observer.observe(element);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t14 = [isInView, startOnView];
+		$[24] = isInView;
+		$[25] = startOnView;
+		$[26] = t13;
+		$[27] = t14;
+	} else {
+		t13 = $[26];
+		t14 = $[27];
+	}
+	useEffect(t13, t14);
+	let t15;
+	let t16;
+	if ($[28] !== animationSourceKey || $[29] !== shouldReduceMotion || $[30] !== wordsToAnimate) {
+		t15 = () => {
+			if (shouldReduceMotion) {
+				wasReducedMotionRef.current = true;
+				lastResetSourceKeyRef.current = animationSourceKey;
+				setDisplayedText(wordsToAnimate.join(" · "));
+				return;
+			}
+			if (lastResetSourceKeyRef.current === animationSourceKey && !wasReducedMotionRef.current) {
+				return;
+			}
+			wasReducedMotionRef.current = false;
+			lastResetSourceKeyRef.current = animationSourceKey;
+			const resetTimeout = setTimeout(() => {
+				setDisplayedText("");
+				setCurrentWordIndex(0);
+				setCurrentCharIndex(0);
+				setPhase("typing");
+			}, 0);
+			return () => {
+				clearTimeout(resetTimeout);
+			};
+		};
+		t16 = [
+			animationSourceKey,
+			shouldReduceMotion,
+			wordsToAnimate
+		];
+		$[28] = animationSourceKey;
+		$[29] = shouldReduceMotion;
+		$[30] = wordsToAnimate;
+		$[31] = t15;
+		$[32] = t16;
+	} else {
+		t15 = $[31];
+		t16 = $[32];
+	}
+	useEffect(t15, t16);
+	let t17;
+	let t18;
+	if ($[33] !== currentCharIndex || $[34] !== currentWordIndex || $[35] !== delay || $[36] !== deletingSpeed || $[37] !== displayedText || $[38] !== hasMultipleWords || $[39] !== loop || $[40] !== pauseDelay || $[41] !== phase || $[42] !== shouldReduceMotion || $[43] !== shouldStart || $[44] !== typingSpeed || $[45] !== wordsToAnimate) {
+		t17 = () => {
+			if (shouldReduceMotion) {
+				return;
+			}
+			let timeout = null;
+			if (shouldStart && wordsToAnimate.length > 0) {
+				const timeoutDelay = delay > 0 && displayedText === "" ? delay : phase === "typing" ? typingSpeed : phase === "deleting" ? deletingSpeed : pauseDelay;
+				timeout = setTimeout(() => {
+					const currentWord = wordsToAnimate[currentWordIndex] || "";
+					const graphemes = Array.from(currentWord);
+					bb136: switch (phase) {
+						case "typing": {
+							if (currentCharIndex < graphemes.length) {
+								setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(""));
+								setCurrentCharIndex(currentCharIndex + 1);
+							} else {
+								if (hasMultipleWords || loop) {
+									const isLastWord = currentWordIndex === wordsToAnimate.length - 1;
+									if (!isLastWord || loop) {
+										setPhase("pause");
+									}
+								}
+							}
+							break bb136;
+						}
+						case "pause": {
+							setPhase("deleting");
+							break bb136;
+						}
+						case "deleting": {
+							if (currentCharIndex > 0) {
+								setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(""));
+								setCurrentCharIndex(currentCharIndex - 1);
+							} else {
+								const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length;
+								setCurrentWordIndex(nextIndex);
+								setPhase("typing");
+							}
+						}
+					}
+				}, timeoutDelay);
+			}
+			return () => {
+				if (timeout !== null) {
+					clearTimeout(timeout);
+				}
+			};
+		};
+		t18 = [
+			shouldStart,
+			shouldReduceMotion,
+			phase,
+			currentCharIndex,
+			currentWordIndex,
+			displayedText,
+			wordsToAnimate,
+			hasMultipleWords,
+			loop,
+			typingSpeed,
+			deletingSpeed,
+			pauseDelay,
+			delay
+		];
+		$[33] = currentCharIndex;
+		$[34] = currentWordIndex;
+		$[35] = delay;
+		$[36] = deletingSpeed;
+		$[37] = displayedText;
+		$[38] = hasMultipleWords;
+		$[39] = loop;
+		$[40] = pauseDelay;
+		$[41] = phase;
+		$[42] = shouldReduceMotion;
+		$[43] = shouldStart;
+		$[44] = typingSpeed;
+		$[45] = wordsToAnimate;
+		$[46] = t17;
+		$[47] = t18;
+	} else {
+		t17 = $[46];
+		t18 = $[47];
+	}
+	useEffect(t17, t18);
+	let t19;
+	if ($[48] !== currentWordIndex || $[49] !== wordsToAnimate) {
+		t19 = Array.from(wordsToAnimate[currentWordIndex] || "");
+		$[48] = currentWordIndex;
+		$[49] = wordsToAnimate;
+		$[50] = t19;
+	} else {
+		t19 = $[50];
+	}
+	const currentWordGraphemes = t19;
+	const isComplete = !loop && currentWordIndex === wordsToAnimate.length - 1 && currentCharIndex >= currentWordGraphemes.length && phase !== "deleting";
+	const shouldShowCursor = showCursor && !shouldReduceMotion && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+	const isCursorIdle = !shouldStart || phase === "pause" || displayedText === "";
+	let t20;
+	if ($[51] !== cursorStyle) {
+		t20 = () => {
+			switch (cursorStyle) {
+				case "block": {
+					return "▌";
+				}
+				case "underscore": {
+					return "_";
+				}
+				case "line":
+				default: {
+					return "|";
+				}
+			}
+		};
+		$[51] = cursorStyle;
+		$[52] = t20;
+	} else {
+		t20 = $[52];
+	}
+	const getCursorChar = t20;
+	const t21 = Component === "h1" && "text-3xl font-medium leading-tight md:text-4xl";
+	const t22 = Component === "span" && "inline-block";
+	let t23;
+	if ($[53] !== className || $[54] !== t21 || $[55] !== t22) {
+		t23 = cn("tracking-[-0.02em]", t21, t22, className);
+		$[53] = className;
+		$[54] = t21;
+		$[55] = t22;
+		$[56] = t23;
+	} else {
+		t23 = $[56];
+	}
+	let t24;
+	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== isCursorIdle || $[60] !== shouldShowCursor) {
+		t24 = shouldShowCursor && /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": "true",
+			"data-slot": "typing-animation-cursor",
+			className: "inline-block",
+			animate: { opacity: blinkCursor && isCursorIdle ? CURSOR_BLINK_OPACITY : 1 },
+			transition: blinkCursor && isCursorIdle ? {
+				duration: MOTION_TIMING.cursorBlink,
+				times: CURSOR_BLINK_TIMES,
+				repeat: Infinity,
+				ease: "easeInOut"
+			} : { duration: MOTION_TIMING.fast },
+			children: getCursorChar()
+		});
+		$[57] = blinkCursor;
+		$[58] = getCursorChar;
+		$[59] = isCursorIdle;
+		$[60] = shouldShowCursor;
+		$[61] = t24;
+	} else {
+		t24 = $[61];
+	}
+	let t25;
+	if ($[62] !== MotionComponent || $[63] !== displayedText || $[64] !== props || $[65] !== t23 || $[66] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs(MotionComponent, {
+			ref: elementRef,
+			"data-slot": "typing-animation",
+			className: t23,
+			...props,
+			children: [displayedText, t24]
+		});
+		$[62] = MotionComponent;
+		$[63] = displayedText;
+		$[64] = props;
+		$[65] = t23;
+		$[66] = t24;
+		$[67] = t25;
+	} else {
+		t25 = $[67];
+	}
+	return t25;
+}

package/dist/constants/action-button.d.ts

@@ -0,0 +1,20 @@
+/** Tuning of `ActionButton`: its async states, reset delay and the icon that follows each state. */
+/** Phases an action goes through: ready to run, running, and finished successfully. */
+export type ActionButtonState = "idle" | "pending" | "success";
+/** Value of each phase, exposed on the button as `data-action-state`, apart from `data-state`, which marks popup triggers that never press. */
+export declare const ACTION_BUTTON_STATE: {
+    readonly idle: "idle";
+    readonly pending: "pending";
+    readonly success: "success";
+};
+/** Time the success state stays on the button before it returns to idle on its own. */
+export declare const ACTION_BUTTON_DEFAULT_RESET_AFTER_MS = 2400;
+/** Side, in pixels, of the slot that swaps the arrow, the spinner and the check. */
+export declare const ACTION_BUTTON_ICON_SIZE_PX = 17;
+/** Horizontal offsets, in pixels, of the arrow returning from behind and leaving forward. */
+export declare const ACTION_BUTTON_ARROW_OFFSET_PX: {
+    readonly enter: -6;
+    readonly exit: 8;
+};
+/** Delay, in seconds, before the success check starts drawing itself. */
+export declare const ACTION_BUTTON_CHECK_DRAW_DELAY_S = 0.05;

package/dist/constants/action-button.js

@@ -0,0 +1,17 @@
+/** Value of each phase, exposed on the button as `data-action-state`, apart from `data-state`, which marks popup triggers that never press. */
+export const ACTION_BUTTON_STATE = {
+	idle: "idle",
+	pending: "pending",
+	success: "success"
+};
+/** Time the success state stays on the button before it returns to idle on its own. */
+export const ACTION_BUTTON_DEFAULT_RESET_AFTER_MS = 2400;
+/** Side, in pixels, of the slot that swaps the arrow, the spinner and the check. */
+export const ACTION_BUTTON_ICON_SIZE_PX = 17;
+/** Horizontal offsets, in pixels, of the arrow returning from behind and leaving forward. */
+export const ACTION_BUTTON_ARROW_OFFSET_PX = {
+	enter: -6,
+	exit: 8
+};
+/** Delay, in seconds, before the success check starts drawing itself. */
+export const ACTION_BUTTON_CHECK_DRAW_DELAY_S = .05;

package/dist/constants/alert.d.ts

@@ -0,0 +1,16 @@
+/** Copy and options of Arc's Alert. */
+/** Arc's semantic tones for an alert; `danger` interrupts as an alert, the rest are polite statuses. */
+export type AlertTone = "info" | "success" | "warning" | "danger";
+/** Default Spanish accessible name of the dismiss button, followed by the alert's title. */
+export declare const ALERT_DISMISS_LABEL = "Descartar aviso";
+/** Separator between the dismiss label and the title, as in "Descartar aviso: Nueva versión". */
+export declare const ALERT_DISMISS_LABEL_SEPARATOR = ": ";
+/** Vertical travel, in em, of a new title or detail rising in and the old one lifting out. */
+export declare const ALERT_TEXT_OFFSET_EM = 0.3;
+/** Live-region roles: only a danger alert interrupts; every other tone is announced politely. */
+export declare const ALERT_TONE_ROLE: {
+    readonly info: "status";
+    readonly success: "status";
+    readonly warning: "status";
+    readonly danger: "alert";
+};

package/dist/constants/alert.js

@@ -0,0 +1,13 @@
+/** Default Spanish accessible name of the dismiss button, followed by the alert's title. */
+export const ALERT_DISMISS_LABEL = "Descartar aviso";
+/** Separator between the dismiss label and the title, as in "Descartar aviso: Nueva versión". */
+export const ALERT_DISMISS_LABEL_SEPARATOR = ": ";
+/** Vertical travel, in em, of a new title or detail rising in and the old one lifting out. */
+export const ALERT_TEXT_OFFSET_EM = .3;
+/** Live-region roles: only a danger alert interrupts; every other tone is announced politely. */
+export const ALERT_TONE_ROLE = {
+	info: "status",
+	success: "status",
+	warning: "status",
+	danger: "alert"
+};

package/dist/constants/avatar.d.ts

@@ -0,0 +1,38 @@
+/** Presence an avatar can show with Arc's status dot. */
+export type AvatarStatus = "online" | "offline";
+/** Avatar diameters: 24px (`sm`), 32px (`md`), 40px (`lg`) and Arc's 88px profile size (`xl`). */
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+/** Sizes an avatar group accepts for its avatars and overflow chip. */
+export type AvatarGroupSize = "sm" | "md" | "lg";
+/**
+ * Referrer policy of avatar photos. They are usually hosted by an identity provider (Google, GitHub), and Google rejects
+ * some photos requested with a cross-site `Referer`, which left the avatar on its initials. Omitting the referrer also
+ * keeps the consumer's page private. A consumer can still pass its own `referrerPolicy`.
+ */
+export declare const AVATAR_IMAGE_REFERRER_POLICY = "no-referrer";
+/** Default Spanish labels read by assistive technology for each presence. */
+export declare const AVATAR_STATUS_LABEL: {
+    readonly online: "En línea";
+    readonly offline: "Desconectado";
+};
+/** Separator between the name and the presence in the avatar's accessible name, as in "Ana, En línea". */
+export declare const AVATAR_LABEL_SEPARATOR = ", ";
+/** Scale the status dot grows from and shrinks back to. */
+export declare const AVATAR_STATUS_HIDDEN_SCALE = 0.6;
+/** Diameter of each size in CSS pixels, passed to image adapters as the `sizes` hint. */
+export declare const AVATAR_SIZE_PX: {
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 40;
+    readonly xl: 88;
+};
+/** Default Spanish accessible name of an avatar group, also used in its overflow label. */
+export declare const AVATAR_GROUP_DEFAULT_LABEL = "Integrantes";
+/** Avatars an avatar group shows before the rest collapse into the overflow chip. */
+export declare const AVATAR_GROUP_DEFAULT_MAX = 4;
+/** Word that closes the overflow chip's accessible name, as in "2 integrantes más". */
+export declare const AVATAR_GROUP_OVERFLOW_SUFFIX = "m\u00E1s";
+/** Vertical travel, in em, of the overflow count rolling in the direction it moved. */
+export declare const AVATAR_GROUP_COUNT_OFFSET_EM = 0.4;
+/** Scale a joining or leaving member's slot opens from and closes to. */
+export declare const AVATAR_GROUP_SLOT_HIDDEN_SCALE = 0.9;

package/dist/constants/avatar.js

@@ -0,0 +1,32 @@
+/**
+* Referrer policy of avatar photos. They are usually hosted by an identity provider (Google, GitHub), and Google rejects
+* some photos requested with a cross-site `Referer`, which left the avatar on its initials. Omitting the referrer also
+* keeps the consumer's page private. A consumer can still pass its own `referrerPolicy`.
+*/
+export const AVATAR_IMAGE_REFERRER_POLICY = "no-referrer";
+/** Default Spanish labels read by assistive technology for each presence. */
+export const AVATAR_STATUS_LABEL = {
+	online: "En línea",
+	offline: "Desconectado"
+};
+/** Separator between the name and the presence in the avatar's accessible name, as in "Ana, En línea". */
+export const AVATAR_LABEL_SEPARATOR = ", ";
+/** Scale the status dot grows from and shrinks back to. */
+export const AVATAR_STATUS_HIDDEN_SCALE = .6;
+/** Diameter of each size in CSS pixels, passed to image adapters as the `sizes` hint. */
+export const AVATAR_SIZE_PX = {
+	sm: 24,
+	md: 32,
+	lg: 40,
+	xl: 88
+};
+/** Default Spanish accessible name of an avatar group, also used in its overflow label. */
+export const AVATAR_GROUP_DEFAULT_LABEL = "Integrantes";
+/** Avatars an avatar group shows before the rest collapse into the overflow chip. */
+export const AVATAR_GROUP_DEFAULT_MAX = 4;
+/** Word that closes the overflow chip's accessible name, as in "2 integrantes más". */
+export const AVATAR_GROUP_OVERFLOW_SUFFIX = "más";
+/** Vertical travel, in em, of the overflow count rolling in the direction it moved. */
+export const AVATAR_GROUP_COUNT_OFFSET_EM = .4;
+/** Scale a joining or leaving member's slot opens from and closes to. */
+export const AVATAR_GROUP_SLOT_HIDDEN_SCALE = .9;

package/dist/constants/badge.d.ts

@@ -0,0 +1,6 @@
+/** Tuning of Arc's Badge label swap. */
+/** Vertical offsets, in em, of a new label rising in and the old one lifting out. */
+export declare const BADGE_LABEL_OFFSET_EM: {
+    readonly enter: 0.3;
+    readonly exit: -0.3;
+};

package/dist/constants/badge.js

@@ -0,0 +1,6 @@
+/** Tuning of Arc's Badge label swap. */
+/** Vertical offsets, in em, of a new label rising in and the old one lifting out. */
+export const BADGE_LABEL_OFFSET_EM = {
+	enter: .3,
+	exit: -.3
+};

package/dist/constants/button.d.ts

@@ -0,0 +1,16 @@
+/** Tuning shared by Button's Arc press feedback and label width morph. */
+/** Buttons wider than this press a little less so large surfaces don't feel spongy. */
+export declare const BUTTON_WIDE_THRESHOLD_PX = 220;
+/** Buttons up to this width are icon-sized and press a little deeper. */
+export declare const BUTTON_ICON_THRESHOLD_PX = 48;
+/** Press scale for wide buttons. */
+export declare const BUTTON_WIDE_PRESS_SCALE = 0.985;
+/** Press scale for icon-sized buttons. */
+export declare const BUTTON_ICON_PRESS_SCALE = 0.96;
+/** Press scale for every other button. */
+export declare const BUTTON_DEFAULT_PRESS_SCALE = 0.97;
+/**
+ * After the label changes, resizes inside this window spring to the new width; later resizes
+ * (late web fonts, parent reflows) jump so nothing wobbles on first paint.
+ */
+export declare const BUTTON_MORPH_WINDOW_MS = 700;

package/dist/constants/button.js

@@ -0,0 +1,16 @@
+/** Tuning shared by Button's Arc press feedback and label width morph. */
+/** Buttons wider than this press a little less so large surfaces don't feel spongy. */
+export const BUTTON_WIDE_THRESHOLD_PX = 220;
+/** Buttons up to this width are icon-sized and press a little deeper. */
+export const BUTTON_ICON_THRESHOLD_PX = 48;
+/** Press scale for wide buttons. */
+export const BUTTON_WIDE_PRESS_SCALE = .985;
+/** Press scale for icon-sized buttons. */
+export const BUTTON_ICON_PRESS_SCALE = .96;
+/** Press scale for every other button. */
+export const BUTTON_DEFAULT_PRESS_SCALE = .97;
+/**
+* After the label changes, resizes inside this window spring to the new width; later resizes
+* (late web fonts, parent reflows) jump so nothing wobbles on first paint.
+*/
+export const BUTTON_MORPH_WINDOW_MS = 700;

package/dist/constants/calendar.d.ts

@@ -0,0 +1,36 @@
+/** Tuning of `Calendar`, adapted from Arc's calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Spring of a month sliding in: Arc's month strip, critically damped so it never overshoots or queues. */
+export declare const CALENDAR_MONTH_SPRING: {
+    readonly type: "spring";
+    readonly visualDuration: 0.36;
+    readonly bounce: 0;
+    readonly restDelta: 0.002;
+};
+/** Opacity a month starts from while it slides in, matching Arc's neighbouring pane one step off the strip. */
+export declare const CALENDAR_MONTH_ENTER_OPACITY = 0.4;
+/** Scale the selected disc grows from when the selection enters a month. */
+export declare const CALENDAR_SELECTION_ENTER_SCALE = 0.6;
+/** Duration, in seconds, of the selected disc fading out when the selection leaves a month. */
+export declare const CALENDAR_SELECTION_EXIT_DURATION_S = 0.14;
+/** Day button that holds a single selection, the only one the gliding disc follows. */
+export declare const CALENDAR_SELECTED_DAY_SELECTOR = "[data-selected-single=\"true\"]";
+/** Attribute the month sets while its disc paints the selection, so the selected day drops its own fill. */
+export declare const CALENDAR_SELECTION_DISC_ATTRIBUTE = "data-selection-disc";
+/** Default copy of the optional Today button. */
+export declare const CALENDAR_COPY: {
+    readonly today: "Hoy";
+};
+/** Months in a year, to compare dates by calendar month. */
+export declare const CALENDAR_MONTHS_PER_YEAR = 12;
+/** Locale of `Calendar` when the consumer does not pick one: Spanish as written in Argentina, weeks start on Monday. */
+export declare const CALENDAR_DEFAULT_LOCALE = "es-AR";
+/**
+ * Languages `Calendar` ships full translations for, including react-day-picker's accessible labels. Any other locale
+ * keeps English labels while month and weekday names come from `Intl`.
+ */
+export declare const CALENDAR_TRANSLATED_LANGUAGE: {
+    readonly spanish: "es";
+    readonly english: "en";
+};
+/** Separator between the language and the region of a BCP 47 locale such as `es-AR`. */
+export declare const CALENDAR_LOCALE_SEPARATOR = "-";

package/dist/constants/calendar.js

@@ -0,0 +1,34 @@
+/** Tuning of `Calendar`, adapted from Arc's calendar (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Spring of a month sliding in: Arc's month strip, critically damped so it never overshoots or queues. */
+export const CALENDAR_MONTH_SPRING = {
+	type: "spring",
+	visualDuration: .36,
+	bounce: 0,
+	restDelta: .002
+};
+/** Opacity a month starts from while it slides in, matching Arc's neighbouring pane one step off the strip. */
+export const CALENDAR_MONTH_ENTER_OPACITY = .4;
+/** Scale the selected disc grows from when the selection enters a month. */
+export const CALENDAR_SELECTION_ENTER_SCALE = .6;
+/** Duration, in seconds, of the selected disc fading out when the selection leaves a month. */
+export const CALENDAR_SELECTION_EXIT_DURATION_S = .14;
+/** Day button that holds a single selection, the only one the gliding disc follows. */
+export const CALENDAR_SELECTED_DAY_SELECTOR = "[data-selected-single=\"true\"]";
+/** Attribute the month sets while its disc paints the selection, so the selected day drops its own fill. */
+export const CALENDAR_SELECTION_DISC_ATTRIBUTE = "data-selection-disc";
+/** Default copy of the optional Today button. */
+export const CALENDAR_COPY = { today: "Hoy" };
+/** Months in a year, to compare dates by calendar month. */
+export const CALENDAR_MONTHS_PER_YEAR = 12;
+/** Locale of `Calendar` when the consumer does not pick one: Spanish as written in Argentina, weeks start on Monday. */
+export const CALENDAR_DEFAULT_LOCALE = "es-AR";
+/**
+* Languages `Calendar` ships full translations for, including react-day-picker's accessible labels. Any other locale
+* keeps English labels while month and weekday names come from `Intl`.
+*/
+export const CALENDAR_TRANSLATED_LANGUAGE = {
+	spanish: "es",
+	english: "en"
+};
+/** Separator between the language and the region of a BCP 47 locale such as `es-AR`. */
+export const CALENDAR_LOCALE_SEPARATOR = "-";

package/dist/constants/card.d.ts

@@ -0,0 +1,23 @@
+/** Copy and tuning of Arc's Card and its quick look, adapted from Arc (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). */
+/** Heading levels a card title can take; Arc renders an `h3`. */
+export type CardHeadingLevel = 2 | 3 | 4;
+/** Heading level of the card title when none is passed. */
+export declare const CARD_DEFAULT_HEADING_LEVEL = 3;
+/** Default Spanish accessible name of the quick look's close button. */
+export declare const CARD_CLOSE_LABEL = "Cerrar vista r\u00E1pida";
+/** Visual duration, in seconds, of the spring that grows the card into the quick look. */
+export declare const CARD_GROW_DURATION_S = 0.3;
+/** Visual duration, in seconds, of the slightly quicker spring that settles the quick look back into the card. */
+export declare const CARD_SETTLE_DURATION_S = 0.26;
+/** Time, in milliseconds, the closing quick look travels above the page before the card takes over again. */
+export declare const CARD_RETURN_MS = 300;
+/** Delay, in seconds, between the words of a new status rising in one after another. */
+export declare const CARD_STATUS_WORD_STAGGER_S = 0.03;
+/** Vertical travel, in em, of a status line rising in and the old one lifting away. */
+export declare const CARD_STATUS_OFFSET_EM = 0.3;
+/** Vertical travel, in pixels, of the quick look details settling in under the copy. */
+export declare const CARD_DETAILS_OFFSET_PX = 6;
+/** Scale the quick look's close button grows from. */
+export declare const CARD_CLOSE_HIDDEN_SCALE = 0.9;
+/** Scale the close button dips to while pressed. */
+export declare const CARD_CLOSE_PRESS_SCALE = 0.94;