@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/morph-text.js

@@ -0,0 +1,210 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Letter-by-letter label morph adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+* The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by `ActionButton` and `SplitButton`.
+*/
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { MORPH_TEXT_GLYPH_OFFSET_PX, MORPH_TEXT_MAX_GLYPH_DELAY_S, MORPH_TEXT_MIN_SHARED_RUN } from "../constants/morph-text.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_STAGGER } from "../motion/arc-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const restState = {
+	opacity: 1,
+	y: 0,
+	filter: "blur(0px)"
+};
+/** Letters rise in from a soft blur and lift away a little faster. */
+const glyphEnter = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.enter,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const glyphExit = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.exit,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+const reducedEnter = {
+	...restState,
+	opacity: 0
+};
+const reducedExit = {
+	opacity: 0,
+	transition: reducedTransition
+};
+/** Grapheme segmenter created once; absent on runtimes without `Intl.Segmenter`. */
+const graphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : undefined;
+/**
+* Splits text into user-perceived characters, so emoji sequences, flags and combining accents stay in one glyph.
+* Falls back to code points when `Intl.Segmenter` is unavailable.
+* @param text - Text to split.
+* @returns Graphemes in reading order.
+*/
+function splitGraphemes(text) {
+	if (!graphemeSegmenter) return [...text];
+	return Array.from(graphemeSegmenter.segment(text), (segment) => segment.segment);
+}
+/**
+* Turns characters into glyphs of one generation.
+* @param characters - Characters to wrap.
+* @param generation - Label generation, part of every glyph id.
+* @returns Glyphs in reading order.
+*/
+function toGlyphs(characters, generation) {
+	return characters.map((character, order) => ({
+		id: `${generation}:${order}`,
+		character,
+		order
+	}));
+}
+/**
+* Splits a label into glyphs, keeping the identity of the shared leading and trailing characters of the previous
+* label, so `Copy page` → `Copied` only replaces the changed letters.
+* @param text - Current label.
+* @returns Glyphs of the label.
+*/
+function useGlyphs(text) {
+	const $ = _c(10);
+	let t0;
+	if ($[0] !== text) {
+		t0 = () => ({
+			text,
+			generation: 0,
+			glyphs: toGlyphs(splitGraphemes(text), 0)
+		});
+		$[0] = text;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [glyphState, setGlyphState] = useState(t0);
+	if (glyphState.text === text) {
+		return glyphState.glyphs;
+	}
+	let t1;
+	if ($[2] !== glyphState.text) {
+		t1 = splitGraphemes(glyphState.text);
+		$[2] = glyphState.text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	const previous = t1;
+	let generation;
+	let t2;
+	if ($[4] !== glyphState.generation || $[5] !== glyphState.glyphs || $[6] !== previous || $[7] !== text) {
+		const next = splitGraphemes(text);
+		let sharedStart = 0;
+		let sharedEnd = 0;
+		while (sharedStart < previous.length && sharedStart < next.length && previous[sharedStart] === next[sharedStart]) {
+			sharedStart++;
+		}
+		while (sharedEnd < previous.length - sharedStart && sharedEnd < next.length - sharedStart && previous[previous.length - 1 - sharedEnd] === next[next.length - 1 - sharedEnd]) {
+			sharedEnd++;
+		}
+		if (sharedStart < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedStart = 0;
+		}
+		if (sharedEnd < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedEnd = 0;
+		}
+		generation = glyphState.generation + 1;
+		t2 = [
+			...glyphState.glyphs.slice(0, sharedStart),
+			...toGlyphs(next.slice(sharedStart, next.length - sharedEnd), generation),
+			...glyphState.glyphs.slice(glyphState.glyphs.length - sharedEnd)
+		];
+		$[4] = glyphState.generation;
+		$[5] = glyphState.glyphs;
+		$[6] = previous;
+		$[7] = text;
+		$[8] = generation;
+		$[9] = t2;
+	} else {
+		generation = $[8];
+		t2 = $[9];
+	}
+	const glyphs = t2;
+	setGlyphState({
+		text,
+		generation,
+		glyphs
+	});
+	return glyphs;
+}
+/**
+* Morphs one label into the next: kept letters glide into place and new ones rise in from a soft blur. The row
+* keeps its natural width; callers spring the slot around it.
+* @param props - Label text, whether the user prefers reduced motion and an optional ref to the row.
+* @returns The row of animated letters. Callers hide it from assistive tech and name their control otherwise.
+*/
+export function MorphText(t0) {
+	const $ = _c(12);
+	const { text, reduceMotion, ref } = t0;
+	const glyphs = useGlyphs(text);
+	let t1;
+	if ($[0] !== glyphs || $[1] !== reduceMotion || $[2] !== text) {
+		let t2;
+		if ($[4] !== reduceMotion || $[5] !== text) {
+			t2 = (glyph) => /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block",
+				layout: reduceMotion ? false : "position",
+				layoutDependency: text,
+				initial: reduceMotion ? reducedEnter : glyphEnter,
+				animate: restState,
+				exit: reduceMotion ? reducedExit : glyphExit,
+				transition: reduceMotion ? reducedTransition : {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.enter],
+					delay: Math.min(glyph.order * ARC_STAGGER.char, MORPH_TEXT_MAX_GLYPH_DELAY_S),
+					layout: ARC_SPRING_MORPH
+				},
+				children: glyph.character
+			}, glyph.id);
+			$[4] = reduceMotion;
+			$[5] = text;
+			$[6] = t2;
+		} else {
+			t2 = $[6];
+		}
+		t1 = glyphs.map(t2);
+		$[0] = glyphs;
+		$[1] = reduceMotion;
+		$[2] = text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: t1
+		});
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== ref || $[10] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			ref,
+			className: "relative inline-flex flex-none whitespace-pre",
+			children: t2
+		});
+		$[9] = ref;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}

package/dist/components/pagination.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Arc's Pagination (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): previous and next arrows around a
+ * sliding five page window, with a current-page mark that glides to the selected page. Arc's API (`page`,
+ * `pageCount`, `onPageChange`, `label`), with @astra-kit/ui's extensions: links through the provider's `Link` adapter
+ * (`getHref`), cursor paging without a page count (`hasNextPage`), arrow labels and Spanish copy.
+ */
+import type { MouseEvent } from "react";
+/**
+ * Click that requested a page, from a page link or button or an arrow. Call `event.preventDefault()` on a link to keep
+ * the provider's `Link` from navigating, for example to page in place on plain clicks while modified clicks still
+ * open the address in a new tab.
+ */
+export type PaginationClickEvent = MouseEvent<HTMLAnchorElement | HTMLButtonElement>;
+/** Called with the requested page and the click that requested it. */
+export type PaginationPageChangeHandler = (page: number, event: PaginationClickEvent) => void;
+/** Props shared by every way of paging. */
+type PaginationBaseProps = {
+    /** Current page, 1-based. Clamped to the range. */
+    page: number;
+    /**
+     * Total pages. Zero renders an empty landmark. Leave it out for cursor paging: only the arrows render, and
+     * `hasNextPage` decides whether the next one is enabled.
+     */
+    pageCount?: number;
+    /** Whether a page follows the current one, for cursor paging without `pageCount`. Ignored with `pageCount`. */
+    hasNextPage?: boolean;
+    /** Accessible name of the navigation landmark. Defaults to "Paginación". */
+    label?: string;
+    /** Visible label of the previous arrow, hidden on small screens. Defaults to "Anterior". */
+    previousLabel?: string;
+    /** Visible label of the next arrow, hidden on small screens. Defaults to "Siguiente". */
+    nextLabel?: string;
+    /** Classes of the navigation landmark. */
+    className?: string;
+};
+/** Props of `Pagination`: buttons that report the page, or links built with `getHref`. */
+export type PaginationProps = PaginationBaseProps & ({
+    /** Called with the requested page and the click event. */
+    onPageChange: PaginationPageChangeHandler;
+    getHref?: undefined;
+} | {
+    /**
+     * Called with the requested page and the click event when a link is clicked, before it navigates. Calling
+     * `event.preventDefault()` cancels the navigation of that link.
+     */
+    onPageChange?: PaginationPageChangeHandler;
+    /**
+     * Builds the address of a page. Every control becomes a link rendered through the provider's `Link` adapter,
+     * so pages live in the URL and render on the server.
+     */
+    getHref: (page: number) => string;
+});
+/**
+ * Previous and next arrows around a five page window. Disabled arrows keep `aria-disabled` and never request a page.
+ * @param props - Current page, page count or next-page flag, handlers and copy.
+ * @returns The navigation landmark.
+ */
+declare function Pagination({ page, pageCount, hasNextPage, onPageChange, getHref, label, previousLabel, nextLabel, className, }: PaginationProps): import("react").JSX.Element;
+export { Pagination };

package/dist/components/pagination.js

@@ -0,0 +1,190 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { PAGINATION_DEFAULT_COPY, PAGINATION_FIRST_PAGE, PAGINATION_WINDOW_SIZE } from "../constants/pagination.js";
+import { PaginationButton, PaginationContent, PaginationItem, PaginationLink, PaginationRoot, PaginationStep } from "./primitives/pagination.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Lists the pages of the window around the current page.
+* @param currentPage - Clamped current page.
+* @param pageCount - Total pages.
+* @returns The visible page numbers, in order.
+*/
+function getVisiblePages(currentPage, pageCount) {
+	const halfWindow = Math.floor(PAGINATION_WINDOW_SIZE / 2);
+	const start = Math.max(PAGINATION_FIRST_PAGE, Math.min(pageCount - PAGINATION_WINDOW_SIZE + 1, currentPage - halfWindow));
+	return Array.from({ length: Math.min(pageCount, PAGINATION_WINDOW_SIZE) }, (_, index) => start + index);
+}
+/**
+* Previous and next arrows around a five page window. Disabled arrows keep `aria-disabled` and never request a page.
+* @param props - Current page, page count or next-page flag, handlers and copy.
+* @returns The navigation landmark.
+*/
+function Pagination(t0) {
+	const $ = _c(43);
+	const { page, pageCount, hasNextPage: t1, onPageChange, getHref, label: t2, previousLabel: t3, nextLabel: t4, className } = t0;
+	const hasNextPage = t1 === undefined ? false : t1;
+	const label = t2 === undefined ? PAGINATION_DEFAULT_COPY.navigationLabel : t2;
+	const previousLabel = t3 === undefined ? PAGINATION_DEFAULT_COPY.previousText : t3;
+	const nextLabel = t4 === undefined ? PAGINATION_DEFAULT_COPY.nextText : t4;
+	const isCursor = pageCount === undefined;
+	const safePageCount = isCursor ? 0 : Math.max(0, Math.floor(pageCount));
+	if (!isCursor && safePageCount === 0) {
+		let t5;
+		if ($[0] !== className || $[1] !== label) {
+			t5 = /* @__PURE__ */ _jsx(PaginationRoot, {
+				"aria-label": label,
+				className
+			});
+			$[0] = className;
+			$[1] = label;
+			$[2] = t5;
+		} else {
+			t5 = $[2];
+		}
+		return t5;
+	}
+	const lowestPage = Math.max(PAGINATION_FIRST_PAGE, Math.floor(page));
+	const currentPage = isCursor ? lowestPage : Math.min(lowestPage, safePageCount);
+	const isFirst = currentPage <= PAGINATION_FIRST_PAGE;
+	const isLast = isCursor ? !hasNextPage : currentPage >= safePageCount;
+	let t5;
+	if ($[3] !== getHref) {
+		t5 = (target) => getHref?.(target);
+		$[3] = getHref;
+		$[4] = t5;
+	} else {
+		t5 = $[4];
+	}
+	const hrefOf = t5;
+	const t6 = previousLabel === PAGINATION_DEFAULT_COPY.previousText ? PAGINATION_DEFAULT_COPY.previousLabel : previousLabel;
+	const t7 = isFirst ? currentPage : currentPage - 1;
+	let t8;
+	if ($[5] !== hrefOf || $[6] !== t7) {
+		t8 = hrefOf(t7);
+		$[5] = hrefOf;
+		$[6] = t7;
+		$[7] = t8;
+	} else {
+		t8 = $[7];
+	}
+	let t9;
+	if ($[8] !== currentPage || $[9] !== onPageChange) {
+		t9 = (event) => onPageChange?.(currentPage - 1, event);
+		$[8] = currentPage;
+		$[9] = onPageChange;
+		$[10] = t9;
+	} else {
+		t9 = $[10];
+	}
+	let t10;
+	if ($[11] !== isFirst || $[12] !== previousLabel || $[13] !== t6 || $[14] !== t8 || $[15] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(PaginationItem, { children: /* @__PURE__ */ _jsx(PaginationStep, {
+			direction: "previous",
+			text: previousLabel,
+			label: t6,
+			href: t8,
+			disabled: isFirst,
+			onClick: t9
+		}) });
+		$[11] = isFirst;
+		$[12] = previousLabel;
+		$[13] = t6;
+		$[14] = t8;
+		$[15] = t9;
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== currentPage || $[18] !== getHref || $[19] !== isCursor || $[20] !== onPageChange || $[21] !== safePageCount) {
+		t11 = isCursor ? null : getVisiblePages(currentPage, safePageCount).map((pageNumber) => {
+			const controlProps = {
+				isActive: pageNumber === currentPage,
+				"aria-label": `${PAGINATION_DEFAULT_COPY.pageLabelPrefix} ${pageNumber}`,
+				onClick: (event_0) => onPageChange?.(pageNumber, event_0),
+				children: pageNumber
+			};
+			return /* @__PURE__ */ _jsx(PaginationItem, { children: getHref ? /* @__PURE__ */ _jsx(PaginationLink, {
+				href: getHref(pageNumber),
+				...controlProps
+			}) : /* @__PURE__ */ _jsx(PaginationButton, { ...controlProps }) }, pageNumber);
+		});
+		$[17] = currentPage;
+		$[18] = getHref;
+		$[19] = isCursor;
+		$[20] = onPageChange;
+		$[21] = safePageCount;
+		$[22] = t11;
+	} else {
+		t11 = $[22];
+	}
+	const t12 = nextLabel === PAGINATION_DEFAULT_COPY.nextText ? PAGINATION_DEFAULT_COPY.nextLabel : nextLabel;
+	const t13 = isLast ? currentPage : currentPage + 1;
+	let t14;
+	if ($[23] !== hrefOf || $[24] !== t13) {
+		t14 = hrefOf(t13);
+		$[23] = hrefOf;
+		$[24] = t13;
+		$[25] = t14;
+	} else {
+		t14 = $[25];
+	}
+	let t15;
+	if ($[26] !== currentPage || $[27] !== onPageChange) {
+		t15 = (event_1) => onPageChange?.(currentPage + 1, event_1);
+		$[26] = currentPage;
+		$[27] = onPageChange;
+		$[28] = t15;
+	} else {
+		t15 = $[28];
+	}
+	let t16;
+	if ($[29] !== isLast || $[30] !== nextLabel || $[31] !== t12 || $[32] !== t14 || $[33] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(PaginationItem, { children: /* @__PURE__ */ _jsx(PaginationStep, {
+			direction: "next",
+			text: nextLabel,
+			label: t12,
+			href: t14,
+			disabled: isLast,
+			onClick: t15
+		}) });
+		$[29] = isLast;
+		$[30] = nextLabel;
+		$[31] = t12;
+		$[32] = t14;
+		$[33] = t15;
+		$[34] = t16;
+	} else {
+		t16 = $[34];
+	}
+	let t17;
+	if ($[35] !== t10 || $[36] !== t11 || $[37] !== t16) {
+		t17 = /* @__PURE__ */ _jsxs(PaginationContent, { children: [
+			t10,
+			t11,
+			t16
+		] });
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t16;
+		$[38] = t17;
+	} else {
+		t17 = $[38];
+	}
+	let t18;
+	if ($[39] !== className || $[40] !== label || $[41] !== t17) {
+		t18 = /* @__PURE__ */ _jsx(PaginationRoot, {
+			"aria-label": label,
+			className,
+			children: t17
+		});
+		$[39] = className;
+		$[40] = label;
+		$[41] = t17;
+		$[42] = t18;
+	} else {
+		t18 = $[42];
+	}
+	return t18;
+}
+export { Pagination };

package/dist/components/popover.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Arc's Popover (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a raised panel with Arc's panel radius
+ * and floating shadow that starts a few pixels toward its trigger and settles on a spring, leaving faster than it
+ * arrives. It follows Arc's composition: `Popover`, `PopoverTrigger`, `PopoverContent` and `PopoverClose`.
+ */
+import type { ComponentProps } from "react";
+import { Popover, PopoverClose, PopoverContent as PopoverContentPrimitive, PopoverTrigger } from "./primitives/popover.js";
+export type PopoverContentProps = ComponentProps<typeof PopoverContentPrimitive>;
+/**
+ * Renders the portaled panel anchored to the trigger, kept inside the viewport; content taller than the room left
+ * scrolls inside the panel.
+ * @param props - Radix content properties. Arc's defaults: `align="start"`, a 6px `sideOffset` and a 10px
+ *   `collisionPadding`.
+ * @returns The panel.
+ */
+declare function PopoverContent({ align, ...props }: PopoverContentProps): import("react").JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/popover.js

@@ -0,0 +1,40 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { Popover, PopoverClose, PopoverContent as PopoverContentPrimitive, PopoverTrigger } from "./primitives/popover.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+* Renders the portaled panel anchored to the trigger, kept inside the viewport; content taller than the room left
+* scrolls inside the panel.
+* @param props - Radix content properties. Arc's defaults: `align="start"`, a 6px `sideOffset` and a 10px
+*   `collisionPadding`.
+* @returns The panel.
+*/
+function PopoverContent(t0) {
+	const $ = _c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({align: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const align = t1 === undefined ? "start" : t1;
+	let t2;
+	if ($[3] !== align || $[4] !== props) {
+		t2 = /* @__PURE__ */ _jsx(PopoverContentPrimitive, {
+			align,
+			...props
+		});
+		$[3] = align;
+		$[4] = props;
+		$[5] = t2;
+	} else {
+		t2 = $[5];
+	}
+	return t2;
+}
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/components/presence-swap.d.ts

@@ -0,0 +1,22 @@
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import { type ReactNode } from "react";
+declare const PRESENCE_SWAP_ELEMENTS: {
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
+    readonly span: import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>;
+};
+export interface PresenceSwapProps {
+    /** Changing the key plays the exit of the previous content and the entry of the new one. */
+    presenceKey: string;
+    children: ReactNode;
+    as?: keyof typeof PRESENCE_SWAP_ELEMENTS;
+    className?: string;
+    /** `wait` swaps sequentially; `popLayout` overlaps them for inline content. */
+    mode?: "wait" | "popLayout";
+}
+/**
+ * Swaps keyed content with Arc's swap (a short rise out of a blur); the first render is not animated.
+ * @param props - Key identifying the current state and its content.
+ * @returns The animated content.
+ */
+export declare function PresenceSwap({ presenceKey, children, as, className, mode }: PresenceSwapProps): import("react").JSX.Element;
+export {};