@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/badge.js

@@ -0,0 +1,297 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Badge (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a small pill for status, category or
+* metadata on Arc's tones and tokens. A new text label rises in while the pill springs to its new width, and a new
+* icon crossfades in place. The API is Arc's: `tone`, `size`, `icon` and `children`.
+*/
+import { isValidElement, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { BADGE_LABEL_OFFSET_EM } from "../constants/badge.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER, ARC_ICON_EXIT, ARC_ICON_TRANSITION, ARC_REDUCED_EXIT, ARC_REDUCED_TRANSITION, ARC_SWAP_EXIT_TRANSITION, ARC_SWAP_REST } from "../motion/arc-swap.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+* Arc's badge recipe. Each tone sets the pill's colour roles as custom properties, so hover can mix the tone into the
+* border and fill. Hover answers on fine pointers only.
+*/
+const badgeRecipe = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-clip rounded-(--radius-pill) border border-(--badge-border) bg-(--badge-background) leading-none font-medium tracking-[-.01em] whitespace-nowrap text-(--badge-foreground) transition-[border-color,background-color,color] duration-(--duration-standard) ease-(--ease-standard) motion-reduce:duration-(--duration-instant) hover-fine:border-[color-mix(in_oklab,var(--badge-color)_32%,var(--border))] hover-fine:bg-[color-mix(in_oklab,var(--badge-color)_10%,var(--surface))] aria-invalid:border-danger [&>svg]:pointer-events-none [&>svg]:size-3! [&>svg]:text-(--badge-color)", { variants: {
+	tone: {
+		neutral: "[--badge-background:var(--surface-muted)] [--badge-border:var(--border)] [--badge-color:var(--text-secondary)] [--badge-foreground:var(--text-secondary)]",
+		success: "[--badge-background:color-mix(in_oklab,var(--success)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--success)_25%,var(--border))] [--badge-color:var(--success)] [--badge-foreground:var(--success)]",
+		info: "[--badge-background:var(--accent-subtle)] [--badge-border:color-mix(in_oklab,var(--accent)_24%,var(--border))] [--badge-color:var(--accent)] [--badge-foreground:var(--accent-strong)]",
+		warning: "[--badge-background:color-mix(in_oklab,var(--warning)_11%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--warning)_27%,var(--border))] [--badge-color:var(--warning)] [--badge-foreground:var(--warning)]",
+		danger: "[--badge-background:color-mix(in_oklab,var(--danger)_10%,var(--surface))] [--badge-border:color-mix(in_oklab,var(--danger)_26%,var(--border))] [--badge-color:var(--danger)] [--badge-foreground:var(--danger)]"
+	},
+	size: {
+		sm: "min-h-[22px] gap-1 px-2 text-[11px]",
+		md: "min-h-[26px] gap-[5px] px-2.5 text-xs"
+	}
+} });
+/** A new label rises out of a soft blur; the old one lifts away faster. */
+const labelEnter = {
+	opacity: 0,
+	y: `${BADGE_LABEL_OFFSET_EM.enter}em`,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const labelExit = {
+	opacity: 0,
+	y: `${BADGE_LABEL_OFFSET_EM.exit}em`,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: ARC_SWAP_EXIT_TRANSITION
+};
+const labelTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+const reducedEnter = { opacity: 0 };
+/** Outgoing copies are hidden from assistive technology while they fade, so only the current one is read. */
+function BadgeSwap(props) {
+	const $ = _c(3);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	let t1;
+	if ($[0] !== props || $[1] !== t0) {
+		t1 = /* @__PURE__ */ _jsx(motion.span, {
+			...props,
+			"aria-hidden": t0
+		});
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	return t1;
+}
+/** Keys an icon by its component, so a new icon crossfades in while re-rendering the same icon stays still. */
+function getIconKey(icon) {
+	if (!isValidElement(icon)) return "icon";
+	const iconType = icon.type;
+	return typeof iconType === "string" ? iconType : iconType.displayName ?? iconType.name ?? "icon";
+}
+/** Arc's swapping content: the icon and text change in place while the pill springs to the new width. */
+function BadgeContent(t0) {
+	const $ = _c(19);
+	const { icon, label, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== icon) {
+		t1 = icon ? getIconKey(icon) : "";
+		$[0] = icon;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const iconKey = t1;
+	const width = useMorphWidth(contentRef, `${iconKey}\n${label}`, reduceMotion);
+	let t2;
+	if ($[2] !== width) {
+		t2 = { width };
+		$[2] = width;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== icon || $[5] !== iconKey || $[6] !== reduceMotion) {
+		t3 = icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
+			icon,
+			iconKey,
+			reduceMotion
+		}) : null;
+		$[4] = icon;
+		$[5] = iconKey;
+		$[6] = reduceMotion;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	const t4 = reduceMotion ? reducedEnter : labelEnter;
+	const t5 = reduceMotion ? ARC_REDUCED_EXIT : labelExit;
+	const t6 = reduceMotion ? ARC_REDUCED_TRANSITION : labelTransition;
+	let t7;
+	if ($[8] !== label || $[9] !== t4 || $[10] !== t5 || $[11] !== t6) {
+		t7 = /* @__PURE__ */ _jsx("span", {
+			className: "relative inline-flex items-center",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(BadgeSwap, {
+					className: "block",
+					initial: t4,
+					animate: ARC_SWAP_REST,
+					exit: t5,
+					transition: t6,
+					children: label
+				}, label)
+			})
+		});
+		$[8] = label;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	let t8;
+	if ($[13] !== t3 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs("span", {
+			ref: contentRef,
+			className: "relative inline-flex w-max items-center gap-[inherit]",
+			children: [t3, t7]
+		});
+		$[13] = t3;
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== t2 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "badge-content",
+			className: "block gap-[inherit] data-morphing:overflow-clip",
+			style: t2,
+			children: t8
+		});
+		$[16] = t2;
+		$[17] = t8;
+		$[18] = t9;
+	} else {
+		t9 = $[18];
+	}
+	return t9;
+}
+/** The leading icon, tinted with the tone; a different icon component crossfades in. */
+function BadgeIcon(t0) {
+	const $ = _c(6);
+	const { icon, iconKey, reduceMotion } = t0;
+	const t1 = reduceMotion ? reducedEnter : ARC_ICON_ENTER;
+	const t2 = reduceMotion ? ARC_REDUCED_EXIT : ARC_ICON_EXIT;
+	const t3 = reduceMotion ? ARC_REDUCED_TRANSITION : ARC_ICON_TRANSITION;
+	let t4;
+	if ($[0] !== icon || $[1] !== iconKey || $[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "badge-icon",
+			"aria-hidden": "true",
+			className: "relative inline-flex flex-none items-center justify-center leading-none text-(--badge-color) [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(BadgeSwap, {
+					className: "relative inline-flex items-center",
+					initial: t1,
+					animate: ARC_SWAP_REST,
+					exit: t2,
+					transition: t3,
+					children: icon
+				}, iconKey)
+			})
+		});
+		$[0] = icon;
+		$[1] = iconKey;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/**
+* A small label for status, category or metadata. String or number children swap in place with Arc's motion and the
+* pill springs to the new width; other children render as they are.
+* @param props - Tone, size, optional icon and native span attributes.
+* @returns The badge.
+*/
+function Badge(t0) {
+	const $ = _c(22);
+	let children;
+	let className;
+	let icon;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({className, tone: t1, size: t2, icon, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+	}
+	const tone = t1 === undefined ? "neutral" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const reduceMotion = usePrefersReducedMotion();
+	const label = typeof children === "string" || typeof children === "number" ? String(children) : null;
+	let t3;
+	if ($[7] !== children || $[8] !== icon || $[9] !== label || $[10] !== reduceMotion) {
+		t3 = label === null ? /* @__PURE__ */ _jsxs(_Fragment, { children: [icon ? /* @__PURE__ */ _jsx(BadgeIcon, {
+			icon,
+			iconKey: getIconKey(icon),
+			reduceMotion
+		}) : null, children] }) : /* @__PURE__ */ _jsx(BadgeContent, {
+			icon,
+			label,
+			reduceMotion
+		});
+		$[7] = children;
+		$[8] = icon;
+		$[9] = label;
+		$[10] = reduceMotion;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	const content = t3;
+	let t4;
+	if ($[12] !== className || $[13] !== size || $[14] !== tone) {
+		t4 = cn(badgeRecipe({
+			tone,
+			size
+		}), className);
+		$[12] = className;
+		$[13] = size;
+		$[14] = tone;
+		$[15] = t4;
+	} else {
+		t4 = $[15];
+	}
+	let t5;
+	if ($[16] !== content || $[17] !== props || $[18] !== size || $[19] !== t4 || $[20] !== tone) {
+		t5 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "badge",
+			"data-tone": tone,
+			"data-size": size,
+			className: t4,
+			...props,
+			children: content
+		});
+		$[16] = content;
+		$[17] = props;
+		$[18] = size;
+		$[19] = t4;
+		$[20] = tone;
+		$[21] = t5;
+	} else {
+		t5 = $[21];
+	}
+	return t5;
+}
+export { Badge };

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

@@ -0,0 +1,23 @@
+/** Interaction states shared by `Button` and the internal `ControlButton`. */
+import type { MouseEvent } from "react";
+/** Swallows activation while loading, keeping the button focusable instead of disabling it. */
+declare function preventActivation(event: MouseEvent<HTMLElement>): void;
+/**
+ * While loading, these handlers are dropped: Radix triggers open their layer from pointer and key handlers they
+ * inject through `asChild`, so swallowing only the click would leave a busy trigger able to open it. Keyboard focus
+ * stays, since nothing here touches focusability.
+ */
+export declare const LOADING_INERT_HANDLERS: {
+    readonly onClick: typeof preventActivation;
+    readonly onPointerDown: undefined;
+    readonly onKeyDown: undefined;
+};
+/**
+ * Applied while a parent `AnimatePresence` removes the button, so a stale control can be neither clicked, focused
+ * nor announced during the exit animation.
+ */
+export declare const LEAVING_ATTRIBUTES: {
+    readonly inert: true;
+    readonly "aria-hidden": true;
+};
+export {};

package/dist/components/button-interaction.js

@@ -0,0 +1,22 @@
+/** Swallows activation while loading, keeping the button focusable instead of disabling it. */
+function preventActivation(event) {
+	event.preventDefault();
+}
+/**
+* While loading, these handlers are dropped: Radix triggers open their layer from pointer and key handlers they
+* inject through `asChild`, so swallowing only the click would leave a busy trigger able to open it. Keyboard focus
+* stays, since nothing here touches focusability.
+*/
+export const LOADING_INERT_HANDLERS = {
+	onClick: preventActivation,
+	onPointerDown: undefined,
+	onKeyDown: undefined
+};
+/**
+* Applied while a parent `AnimatePresence` removes the button, so a stale control can be neither clicked, focused
+* nor announced during the exit animation.
+*/
+export const LEAVING_ATTRIBUTES = {
+	inert: true,
+	"aria-hidden": true
+};

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+export type ButtonLabelProps = {
+    children: ReactNode;
+    loading: boolean;
+    reduceMotion: boolean;
+};
+/** Button content: a spinner while loading and a label whose width springs when it changes. */
+export declare function ButtonLabel({ children, loading, reduceMotion }: ButtonLabelProps): import("react").JSX.Element;

package/dist/components/button-label.js

@@ -0,0 +1,203 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Label morph and loading spinner adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli,
+* MIT License. The full license text ships in THIRD_PARTY_NOTICES.md. Internal to Button.
+*/
+import { isValidElement, useRef } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { cn } from "../lib/utils.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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Text rises out of a soft blur; the outgoing label lifts away a little faster. */
+const textEnter = {
+	opacity: 0,
+	y: 4,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const textExit = {
+	opacity: 0,
+	y: -3,
+	filter: `blur(${ARC_BLUR.soft}px)`,
+	transition: exitTransition
+};
+const textTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+/** Matches markup tags inside a label key so icon-only labels can be detected. */
+const LABEL_KEY_TAG_PATTERN = /<[^>]*>/g;
+/** Detects visible text left in a label key. */
+const VISIBLE_TEXT_PATTERN = /\S/;
+/** Builds a key from text and element names, so a new label crossfades while prop-only updates stay in place. */
+function getLabelKey(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(getLabelKey).join("");
+	if (!isValidElement(node)) return "";
+	const elementType = node.type;
+	const elementName = typeof elementType === "string" ? elementType : elementType?.displayName ?? elementType?.name ?? "";
+	return `<${elementName}>${getLabelKey(node.props.children)}`;
+}
+/** One generation of the label; the outgoing one is hidden from assistive tech while it leaves. */
+function LabelPhase(t0) {
+	const $ = _c(7);
+	const { children, isIcon, reduceMotion, ref } = t0;
+	const isPresent = useIsPresent();
+	const t1 = isPresent ? undefined : true;
+	const t2 = reduceMotion ? reducedEnter : isIcon ? iconEnter : textEnter;
+	const t3 = reduceMotion ? reducedExit : isIcon ? iconExit : textExit;
+	const t4 = reduceMotion ? reducedTransition : isIcon ? iconTransition : textTransition;
+	let t5;
+	if ($[0] !== children || $[1] !== ref || $[2] !== t1 || $[3] !== t2 || $[4] !== t3 || $[5] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(motion.span, {
+			ref,
+			className: "inline-flex items-center justify-center gap-[inherit] whitespace-nowrap",
+			"aria-hidden": t1,
+			initial: t2,
+			animate: restState,
+			exit: t3,
+			transition: t4,
+			children
+		});
+		$[0] = children;
+		$[1] = ref;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	return t5;
+}
+/** Button content: a spinner while loading and a label whose width springs when it changes. */
+export function ButtonLabel(t0) {
+	const $ = _c(25);
+	const { children, loading, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== children) {
+		t1 = getLabelKey(children);
+		$[0] = children;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const labelKey = t1;
+	const width = useMorphWidth(contentRef, labelKey, reduceMotion);
+	let t2;
+	if ($[2] !== loading || $[3] !== reduceMotion) {
+		t2 = loading ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute top-1/2 left-1/2 -m-2 grid size-4",
+			"aria-hidden": "true",
+			initial: reduceMotion ? { opacity: 0 } : {
+				opacity: 0,
+				scale: .6
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: reduceMotion ? reducedExit : {
+				...iconExit,
+				scale: .8
+			},
+			transition: reduceMotion ? reducedTransition : iconTransition,
+			children: /* @__PURE__ */ _jsx("span", { className: "animate-spin rounded-full border-[1.5px] border-current border-r-transparent motion-reduce:animate-none" })
+		}, "loader") : null;
+		$[2] = loading;
+		$[3] = reduceMotion;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	const t4 = loading && "opacity-0";
+	let t5;
+	if ($[7] !== t4) {
+		t5 = cn("inline-flex min-w-0 items-center justify-center gap-[inherit] transition-opacity duration-150 data-morphing:[clip-path:inset(-50%_calc(var(--spacing)*-3))]", t4);
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== width) {
+		t6 = { width };
+		$[9] = width;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== labelKey) {
+		t7 = VISIBLE_TEXT_PATTERN.test(labelKey.replace(LABEL_KEY_TAG_PATTERN, ""));
+		$[11] = labelKey;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	const t8 = !t7;
+	let t9;
+	if ($[13] !== children || $[14] !== labelKey || $[15] !== reduceMotion || $[16] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center gap-[inherit]",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(LabelPhase, {
+					isIcon: t8,
+					reduceMotion,
+					children
+				}, labelKey)
+			})
+		});
+		$[13] = children;
+		$[14] = labelKey;
+		$[15] = reduceMotion;
+		$[16] = t8;
+		$[17] = t9;
+	} else {
+		t9 = $[17];
+	}
+	let t10;
+	if ($[18] !== t5 || $[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "button-label",
+			className: t5,
+			style: t6,
+			children: t9
+		});
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else {
+		t10 = $[21];
+	}
+	let t11;
+	if ($[22] !== t10 || $[23] !== t3) {
+		t11 = /* @__PURE__ */ _jsxs(_Fragment, { children: [t3, t10] });
+		$[22] = t10;
+		$[23] = t3;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	return t11;
+}

package/dist/components/button.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its variants, sizes, tokens and motion,
+ * with width-aware press feedback, a label that springs to its new width and a loading spinner. It renders a native
+ * button; style links as links instead. Composite components that need icon sizes use the internal `ControlButton`.
+ */
+import type { ComponentProps } from "react";
+/** Visual weight, as in Arc: one primary action per surface. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Height and padding, from Arc's control heights. */
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonProps = ComponentProps<"button"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Shows a spinner, sets `aria-busy` and swallows clicks while keeping keyboard focus. */
+    loading?: boolean;
+};
+/**
+ * A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
+ * @param props - Variant, size, loading state and native button attributes, including `ref`.
+ * @returns The native button.
+ */
+declare function Button({ className, variant, size, loading, type, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export { Button };