@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/presence-swap.js

@@ -0,0 +1,209 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Cross-fades between states of the same region, such as idle, loading and result. */
+import { useState } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR } from "../motion/arc-tokens.js";
+import { MOTION_EASE, MOTION_EASE_STANDARD, MOTION_TIMING } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Arc's swap: new content rises a third of a line out of a soft blur; old content leaves upward. */
+const SWAP_RISE = "0.3em";
+const SWAP_ENTER_BLUR = `blur(${ARC_BLUR.soft}px)`;
+const SWAP_EXIT_BLUR = `blur(${ARC_BLUR.subtle}px)`;
+const PRESENCE_SWAP_ELEMENTS = {
+	div: motion.div,
+	span: motion.span
+};
+/**
+* One keyed state of the swap. While it animates out it turns inert and hidden
+* from assistive technology, so stale controls cannot be clicked or announced.
+* @param props - Element type, class name and content.
+* @returns The animated state.
+*/
+function PresenceSwapItem(t0) {
+	const $ = _c(16);
+	const { as, className, children } = t0;
+	const MotionElement = PRESENCE_SWAP_ELEMENTS[as];
+	const isPresent = useIsPresent();
+	const [isMountedExiting] = useState(!isPresent);
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const rise = shouldReduceMotion ? 0 : SWAP_RISE;
+	const enterBlur = shouldReduceMotion ? "blur(0px)" : SWAP_ENTER_BLUR;
+	const exitBlur = shouldReduceMotion ? "blur(0px)" : SWAP_EXIT_BLUR;
+	if (isMountedExiting) {
+		return null;
+	}
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	let t3;
+	if ($[0] !== enterBlur || $[1] !== rise) {
+		t3 = {
+			opacity: 0,
+			y: rise,
+			filter: enterBlur
+		};
+		$[0] = enterBlur;
+		$[1] = rise;
+		$[2] = t3;
+	} else {
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			opacity: 1,
+			y: 0,
+			filter: "blur(0px)",
+			transition: {
+				duration: MOTION_TIMING.enter,
+				ease: MOTION_EASE
+			}
+		};
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	const t5 = shouldReduceMotion ? 0 : `-${SWAP_RISE}`;
+	let t6;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			duration: MOTION_TIMING.fast,
+			ease: MOTION_EASE_STANDARD
+		};
+		$[4] = t6;
+	} else {
+		t6 = $[4];
+	}
+	let t7;
+	if ($[5] !== exitBlur || $[6] !== t5) {
+		t7 = {
+			opacity: 0,
+			y: t5,
+			filter: exitBlur,
+			transition: t6
+		};
+		$[5] = exitBlur;
+		$[6] = t5;
+		$[7] = t7;
+	} else {
+		t7 = $[7];
+	}
+	let t8;
+	if ($[8] !== MotionElement || $[9] !== children || $[10] !== className || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(MotionElement, {
+			"data-slot": "presence-swap",
+			"aria-hidden": t1,
+			inert: t2,
+			className,
+			initial: t3,
+			animate: t4,
+			exit: t7,
+			children
+		});
+		$[8] = MotionElement;
+		$[9] = children;
+		$[10] = className;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	return t8;
+}
+/**
+* Gives every key change its own presence key. Motion keeps the exit bookkeeping of a key that
+* already left, so a reused key (loading → error → loading) mounted already exiting would have
+* its removal ignored and stall a `wait` swap forever.
+* @param presenceKey - Key identifying the current state.
+* @returns A key that is never reused within this swap.
+*/
+function usePresenceSwapKey(presenceKey) {
+	const $ = _c(5);
+	let t0;
+	if ($[0] !== presenceKey) {
+		t0 = {
+			presenceKey,
+			generation: 0
+		};
+		$[0] = presenceKey;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [current, setCurrent] = useState(t0);
+	if (current.presenceKey !== presenceKey) {
+		const t1 = current.generation + 1;
+		let t2;
+		if ($[2] !== presenceKey || $[3] !== t1) {
+			t2 = {
+				presenceKey,
+				generation: t1
+			};
+			$[2] = presenceKey;
+			$[3] = t1;
+			$[4] = t2;
+		} else {
+			t2 = $[4];
+		}
+		const next = t2;
+		setCurrent(next);
+		return `${next.generation}:${presenceKey}`;
+	}
+	return `${current.generation}:${presenceKey}`;
+}
+/**
+* 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 function PresenceSwap(t0) {
+	const $ = _c(11);
+	const { presenceKey, children, as: t1, className, mode: t2 } = t0;
+	const as = t1 === undefined ? "div" : t1;
+	const mode = t2 === undefined ? "wait" : t2;
+	const itemKey = usePresenceSwapKey(presenceKey);
+	const t3 = as === "span" && "inline-flex items-center";
+	let t4;
+	if ($[0] !== className || $[1] !== t3) {
+		t4 = cn("min-w-0", t3, className);
+		$[0] = className;
+		$[1] = t3;
+		$[2] = t4;
+	} else {
+		t4 = $[2];
+	}
+	let t5;
+	if ($[3] !== as || $[4] !== children || $[5] !== itemKey || $[6] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(PresenceSwapItem, {
+			as,
+			className: t4,
+			children
+		}, itemKey);
+		$[3] = as;
+		$[4] = children;
+		$[5] = itemKey;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	let t6;
+	if ($[8] !== mode || $[9] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode,
+			initial: false,
+			children: t5
+		});
+		$[8] = mode;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	return t6;
+}

package/dist/components/primitives/alert-dialog.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Internal confirmation composition on Arc's Dialog surface (https://uiarc.dev, MIT License, see
+ * THIRD_PARTY_NOTICES.md): Radix's alert dialog parts on the same overlay, raised panel, title and description type as
+ * the dialog primitive, so both read as one family, with Arc's dialog transition, media slot and Arc `Button`
+ * actions. Not exported from the package: the public `Dialog` uses it for its `alert` mode.
+ */
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { Button } from "../button.js";
+import { type DialogCloseButtonPlacement } from "../dialog-surface.js";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+/**
+ * Renders a compact confirmation while preserving the shared theme and viewport bound.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @param props.showCloseButton - Whether the confirmation renders a close button, which cancels it. Off by default:
+ * a confirmation is answered with its actions.
+ * @param props.closeButtonPlacement - `viewport` pins the close button to the viewport corner; `content` (default)
+ * keeps it in the panel.
+ * @param props.closeLabel - Accessible name of the close button.
+ * @param props.closeButtonRef - Ref of the close button, when it is rendered.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogContent({ className, size, children, showCloseButton, closeButtonPlacement, closeLabel, closeButtonRef, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: "default" | "sm";
+    showCloseButton?: boolean;
+    closeButtonPlacement?: DialogCloseButtonPlacement;
+    closeLabel?: string;
+    closeButtonRef?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Aligns confirmation headings and media with compact spacing.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Separates confirmation actions with an edge-to-edge footer under a hairline, bleeding through the panel padding.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Renders confirmation media at the compact default size.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/**
+ * Renders the confirmation heading in Arc's title type. Plain text that changes while open swaps with Arc's rise.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogTitle({ className, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+/**
+ * Renders the confirmation description in Arc's secondary text. Plain text that changes while open swaps with Arc's
+ * rise.
+ * @param props - Primitive properties and optional consumer overrides.
+ * @returns The styled primitive with its original interaction contract.
+ */
+declare function AlertDialogDescription({ className, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+/** Confirms the dialog with an Arc `Button`; Radix merges its behavior onto the button through `asChild`. */
+declare function AlertDialogAction({ className, variant, size, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+/** Dismisses the dialog with an Arc secondary `Button` by default. */
+declare function AlertDialogCancel({ className, variant, size, children, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };