@astra-kit/ui 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,25 @@
+import type { ButtonProps } from "./button.js";
+export type ActionButtonProps = Omit<ButtonProps, "children" | "loading" | "onClick"> & {
+    /** Idle label and the button's accessible name. */
+    label: string;
+    /** Runs on press; the pending state lasts until its promise settles. */
+    onAction: () => void | Promise<void>;
+    /** Label while `onAction` runs. */
+    pendingLabel?: string;
+    /** Label after `onAction` resolves. */
+    successLabel?: string;
+    /** Delay before returning to idle after success; `0` keeps the success state. */
+    resetAfterMs?: number;
+    /** Called when `onAction` rejects; the button returns to idle. Without it, the error is logged to the console. */
+    onActionError?: (error: unknown) => void;
+};
+/**
+ * A single async commit, such as Save, Publish or Submit, whose result shows on the button itself. While the
+ * action runs the button stays focusable (`aria-disabled` and `aria-busy` instead of `disabled`) and ignores new
+ * presses; a polite status region announces the pending and success labels. For a plain form submit without a
+ * success state, use `Button` with `loading`.
+ * @param props - Labels, the action, its error handler, the reset delay and `Button` props except `onClick`.
+ * @returns The button followed by its visually hidden status region.
+ */
+declare function ActionButton({ label, onAction, pendingLabel, successLabel, resetAfterMs, onActionError, ...props }: ActionButtonProps): import("react").JSX.Element;
+export { ActionButton };

package/dist/components/action-button.js

@@ -0,0 +1,264 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's ActionButton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on top of @astra-kit/ui's `Button`: a
+* call to action with a trailing arrow that runs an async action and morphs, letter by letter, through a pending
+* and a success label before returning to idle on its own.
+*/
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { ACTION_BUTTON_ARROW_OFFSET_PX, ACTION_BUTTON_CHECK_DRAW_DELAY_S, ACTION_BUTTON_DEFAULT_RESET_AFTER_MS, ACTION_BUTTON_ICON_SIZE_PX, ACTION_BUTTON_STATE } from "../constants/action-button.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER as iconEnter, ARC_ICON_EXIT as iconExit, ARC_ICON_TRANSITION as iconTransition, ARC_REDUCED_ENTER as reducedEnter, ARC_REDUCED_EXIT as reducedExit, ARC_REDUCED_TRANSITION as reducedTransition, ARC_SWAP_EXIT_TRANSITION as exitTransition, ARC_SWAP_REST as restState } from "../motion/arc-swap.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
+import { Button } from "./button.js";
+import { MorphText } from "./morph-text.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The arrow leaves in the direction of the action and returns from behind once the button resets. */
+const arrowEnter = {
+	opacity: 0,
+	x: ACTION_BUTTON_ARROW_OFFSET_PX.enter,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const arrowExit = {
+	opacity: 0,
+	x: ACTION_BUTTON_ARROW_OFFSET_PX.exit,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: exitTransition
+};
+const iconSlotStyle = {
+	width: ACTION_BUTTON_ICON_SIZE_PX,
+	height: ACTION_BUTTON_ICON_SIZE_PX
+};
+/**
+* The success tick draws itself from its short stroke, the way a hand would write it.
+* @param props - Whether the user prefers reduced motion, which shows the tick at once.
+* @returns The check icon.
+*/
+function DrawnCheck(t0) {
+	const $ = _c(6);
+	const { reduceMotion } = t0;
+	let t1;
+	if ($[0] !== reduceMotion) {
+		t1 = reduceMotion ? false : {
+			pathLength: 0,
+			opacity: 0
+		};
+		$[0] = reduceMotion;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			pathLength: 1,
+			opacity: 1
+		};
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			pathLength: {
+				duration: ARC_DURATION.standard,
+				ease: [...ARC_EASE.enter],
+				delay: ACTION_BUTTON_CHECK_DRAW_DELAY_S
+			},
+			opacity: {
+				duration: ACTION_BUTTON_CHECK_DRAW_DELAY_S,
+				delay: ACTION_BUTTON_CHECK_DRAW_DELAY_S
+			}
+		};
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ _jsx("svg", {
+			width: ACTION_BUTTON_ICON_SIZE_PX,
+			height: ACTION_BUTTON_ICON_SIZE_PX,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ _jsx(motion.path, {
+				d: "M4 12l5 5L20 6",
+				initial: t1,
+				animate: t2,
+				transition: t3
+			})
+		});
+		$[4] = t1;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/**
+* Visible content of the button: the morphing label, whose width follows on a spring, and a slot that swaps the
+* arrow, the spinner and the check.
+* @param props - Current state, the text it shows and whether the user prefers reduced motion.
+* @returns Content hidden from assistive tech; the button's name and status region carry its meaning.
+*/
+function ActionButtonContent(t0) {
+	const $ = _c(20);
+	const { state, text, reduceMotion } = t0;
+	const rowRef = useRef(null);
+	const width = useMorphWidth(rowRef, text, reduceMotion);
+	const isIdle = state === ACTION_BUTTON_STATE.idle;
+	let t1;
+	if ($[0] !== width) {
+		t1 = { width };
+		$[0] = width;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== reduceMotion || $[3] !== text) {
+		t2 = /* @__PURE__ */ _jsx(MorphText, {
+			ref: rowRef,
+			text,
+			reduceMotion
+		});
+		$[2] = reduceMotion;
+		$[3] = text;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "action-button-label",
+			className: "inline-flex min-w-0 data-morphing:[clip-path:inset(-0.6em_0_-0.6em_-0.3em)]",
+			style: t1,
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	const t4 = reduceMotion ? reducedEnter : isIdle ? arrowEnter : iconEnter;
+	const t5 = reduceMotion ? reducedExit : isIdle ? arrowExit : iconExit;
+	const t6 = reduceMotion ? reducedTransition : iconTransition;
+	let t7;
+	if ($[8] !== reduceMotion || $[9] !== state) {
+		t7 = state === ACTION_BUTTON_STATE.pending ? /* @__PURE__ */ _jsx("span", { className: "size-4 animate-spin rounded-full border-[1.5px] border-current border-r-transparent motion-reduce:animate-none" }) : state === ACTION_BUTTON_STATE.success ? /* @__PURE__ */ _jsx(DrawnCheck, { reduceMotion }) : /* @__PURE__ */ _jsx(ArrowRight, {
+			width: ACTION_BUTTON_ICON_SIZE_PX,
+			height: ACTION_BUTTON_ICON_SIZE_PX
+		});
+		$[8] = reduceMotion;
+		$[9] = state;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] !== state || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: "grid flex-none place-items-center",
+			style: iconSlotStyle,
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "col-start-1 row-start-1 grid place-items-center",
+					style: iconSlotStyle,
+					initial: t4,
+					animate: restState,
+					exit: t5,
+					transition: t6,
+					children: t7
+				}, state)
+			})
+		});
+		$[11] = state;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	let t9;
+	if ($[17] !== t3 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("span", {
+			className: "inline-flex items-center justify-center gap-[inherit] whitespace-nowrap",
+			"aria-hidden": "true",
+			children: [t3, t8]
+		});
+		$[17] = t3;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t9 = $[19];
+	}
+	return t9;
+}
+/**
+* A single async commit, such as Save, Publish or Submit, whose result shows on the button itself. While the
+* action runs the button stays focusable (`aria-disabled` and `aria-busy` instead of `disabled`) and ignores new
+* presses; a polite status region announces the pending and success labels. For a plain form submit without a
+* success state, use `Button` with `loading`.
+* @param props - Labels, the action, its error handler, the reset delay and `Button` props except `onClick`.
+* @returns The button followed by its visually hidden status region.
+*/
+function ActionButton({ label, onAction, pendingLabel = "Guardando", successLabel = "Guardado", resetAfterMs = ACTION_BUTTON_DEFAULT_RESET_AFTER_MS, onActionError, ...props }) {
+	const [state, setState] = useState(ACTION_BUTTON_STATE.idle);
+	const resetTimer = useRef(null);
+	const isRunning = useRef(false);
+	const reduceMotion = usePrefersReducedMotion();
+	const isPending = state === ACTION_BUTTON_STATE.pending;
+	const text = isPending ? pendingLabel : state === ACTION_BUTTON_STATE.success ? successLabel : label;
+	useEffect(() => () => {
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+	}, []);
+	async function runAction() {
+		if (isRunning.current) return;
+		isRunning.current = true;
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+		setState(ACTION_BUTTON_STATE.pending);
+		try {
+			await onAction();
+			setState(ACTION_BUTTON_STATE.success);
+			if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState(ACTION_BUTTON_STATE.idle), resetAfterMs);
+		} catch (error) {
+			setState(ACTION_BUTTON_STATE.idle);
+			if (onActionError) onActionError(error);
+			else console.error(`ActionButton:onAction failed for "${label}"; pass onActionError to handle it.`, error);
+		} finally {
+			isRunning.current = false;
+		}
+	}
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Button, {
+		...props,
+		"data-slot": "action-button",
+		"data-action-state": state,
+		"aria-label": label,
+		"aria-busy": isPending || undefined,
+		"aria-disabled": isPending || props["aria-disabled"] || undefined,
+		onClick: runAction,
+		children: /* @__PURE__ */ _jsx(ActionButtonContent, {
+			state,
+			text,
+			reduceMotion
+		})
+	}), /* @__PURE__ */ _jsx("span", {
+		className: "sr-only",
+		role: "status",
+		children: isPending ? pendingLabel : state === ACTION_BUTTON_STATE.success ? successLabel : ""
+	})] });
+}
+export { ActionButton };

package/dist/components/alert.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { AlertTone } from "../constants/alert.js";
+export type { AlertTone };
+export type AlertProps = Omit<ComponentProps<"div">, "title" | "children"> & {
+    /** Headline. A new title rises in over the old one. */
+    title: string;
+    /**
+     * Colour and icon: `info` (default), `success`, `warning` or `danger`. Danger interrupts with `role="alert"`; the
+     * rest are announced politely with `role="status"`.
+     */
+    tone?: AlertTone;
+    /** Details under the title. String details rise in over the old ones when they change. */
+    children?: ReactNode;
+    /** Controls presence: hiding the alert collapses its height while it fades out. */
+    open?: boolean;
+    /** Shows a dismiss button. An uncontrolled alert collapses first and then calls this. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button; defaults to "Descartar aviso: " followed by the title. */
+    dismissLabel?: string;
+    /** Replaces the tone icon, or hides it with `false`. */
+    icon?: ReactNode;
+    /** A control beside the copy, such as a button that resolves the alert. */
+    action?: ReactNode;
+};
+/**
+ * A persistent, in-flow message with a tone icon, a title and optional details, action and dismissal.
+ * @param props - Title, tone, details, presence and dismissal, extensions and native div attributes.
+ * @returns The alert; with `open` or `onDismiss` it collapses its own height when hidden.
+ */
+declare function Alert({ open, onDismiss, ref: consumerRef, ...props }: AlertProps): import("react").JSX.Element;
+export { Alert };