@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/animated-count.js

@@ -0,0 +1,105 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Rolls a numeric value vertically when it changes, in the direction of the change. */
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { SPRING_POP } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Fraction of the line height the digits travel while rolling. */
+const COUNT_ROLL_DISTANCE = "60%";
+const COUNT_ROLL_DISTANCE_INVERTED = "-60%";
+const INCREMENT_DIRECTION = 1;
+const DECREMENT_DIRECTION = -1;
+const COUNT_ROLL_VARIANTS = {
+	enter: (direction) => ({
+		y: direction > 0 ? COUNT_ROLL_DISTANCE : COUNT_ROLL_DISTANCE_INVERTED,
+		opacity: 0
+	}),
+	center: {
+		y: 0,
+		opacity: 1
+	},
+	exit: (direction) => ({
+		y: direction > 0 ? COUNT_ROLL_DISTANCE_INVERTED : COUNT_ROLL_DISTANCE,
+		opacity: 0
+	})
+};
+/**
+* Renders `value` and animates each change: increments roll up, decrements roll down.
+* With reduced motion the new value replaces the previous one without travel.
+* @param props - Current value, optional formatter and class name.
+* @returns The animated number.
+*/
+export function AnimatedCount(t0) {
+	const $ = _c(13);
+	const { value, format, className } = t0;
+	const [previousValue, setPreviousValue] = useState(value);
+	const [direction, setDirection] = useState(INCREMENT_DIRECTION);
+	const shouldReduceMotion = usePrefersReducedMotion();
+	if (previousValue !== value) {
+		setDirection(value > previousValue ? INCREMENT_DIRECTION : DECREMENT_DIRECTION);
+		setPreviousValue(value);
+	}
+	let t1;
+	if ($[0] !== format || $[1] !== value) {
+		t1 = format ? format(value) : value;
+		$[0] = format;
+		$[1] = value;
+		$[2] = t1;
+	} else {
+		t1 = $[2];
+	}
+	const formattedValue = t1;
+	let t2;
+	if ($[3] !== className) {
+		t2 = cn("relative inline-flex overflow-hidden align-bottom tabular-nums", className);
+		$[3] = className;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== direction || $[6] !== formattedValue || $[7] !== shouldReduceMotion || $[8] !== value) {
+		t3 = shouldReduceMotion ? /* @__PURE__ */ _jsx("span", {
+			className: "inline-block",
+			children: formattedValue
+		}) : /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			custom: direction,
+			children: /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block",
+				custom: direction,
+				variants: COUNT_ROLL_VARIANTS,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: SPRING_POP,
+				children: formattedValue
+			}, value)
+		});
+		$[5] = direction;
+		$[6] = formattedValue;
+		$[7] = shouldReduceMotion;
+		$[8] = value;
+		$[9] = t3;
+	} else {
+		t3 = $[9];
+	}
+	let t4;
+	if ($[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "animated-count",
+			className: t2,
+			children: t3
+		});
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	return t4;
+}

package/dist/components/animated-list-item.d.ts

@@ -0,0 +1,25 @@
+/** List item that enters, leaves and reflows smoothly inside an `AnimatePresence`. */
+import type { HTMLAttributes, ReactNode } from "react";
+declare const ANIMATED_LIST_ITEM_ELEMENTS: {
+    readonly li: import("motion/react").ForwardRefComponent<HTMLLIElement, import("motion/react").HTMLMotionProps<"li">>;
+    readonly div: import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>;
+    readonly article: import("motion/react").ForwardRefComponent<HTMLElement, import("motion/react").HTMLMotionProps<"article">>;
+};
+/** Native handlers whose names collide with Motion's animation and drag callbacks. */
+type MotionConflictingHandlers = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd";
+export type AnimatedListItemProps = Omit<HTMLAttributes<HTMLElement>, MotionConflictingHandlers> & {
+    children: ReactNode;
+    as?: keyof typeof ANIMATED_LIST_ITEM_ELEMENTS;
+    /** Reflow siblings with a spring when items are added, removed or reordered. */
+    layout?: boolean;
+};
+/**
+ * Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
+ * first render animate in, and removed items animate out before leaving the DOM.
+ * A leaving item turns inert and hidden from assistive technology, so it can no
+ * longer be focused, clicked or announced during its exit.
+ * @param props - Native attributes, element type and content.
+ * @returns The animated item.
+ */
+export declare function AnimatedListItem({ children, as, layout, className, ...elementProps }: AnimatedListItemProps): import("react").JSX.Element;
+export {};

package/dist/components/animated-list-item.js

@@ -0,0 +1,134 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { 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, SPRING_PANEL } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Arc's rows settle 4px into place out of a subtle blur. */
+const LIST_ITEM_RISE_PX = 4;
+const LIST_ITEM_BLUR = `blur(${ARC_BLUR.subtle}px)`;
+const ANIMATED_LIST_ITEM_ELEMENTS = {
+	li: motion.li,
+	div: motion.div,
+	article: motion.article
+};
+/** Arc's rows enter on the standard tween and reorder on the smooth spring, without overshoot. */
+const LIST_ITEM_TRANSITION = {
+	duration: MOTION_TIMING.standard,
+	ease: MOTION_EASE,
+	layout: SPRING_PANEL
+};
+const LIST_ITEM_EXIT_TRANSITION = {
+	duration: MOTION_TIMING.exit,
+	ease: MOTION_EASE_STANDARD
+};
+/**
+* Wrap the list in `<AnimatePresence initial={false}>` so only items added after the
+* first render animate in, and removed items animate out before leaving the DOM.
+* A leaving item turns inert and hidden from assistive technology, so it can no
+* longer be focused, clicked or announced during its exit.
+* @param props - Native attributes, element type and content.
+* @returns The animated item.
+*/
+export function AnimatedListItem(t0) {
+	const $ = _c(22);
+	let children;
+	let className;
+	let elementProps;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, as: t1, layout: t2, className, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = elementProps;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		elementProps = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const as = t1 === undefined ? "li" : t1;
+	const layout = t2 === undefined ? true : t2;
+	const MotionElement = ANIMATED_LIST_ITEM_ELEMENTS[as];
+	const isPresent = useIsPresent();
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const distance = shouldReduceMotion ? 0 : LIST_ITEM_RISE_PX;
+	const blur = shouldReduceMotion ? "blur(0px)" : LIST_ITEM_BLUR;
+	const t3 = isPresent ? elementProps["aria-hidden"] : true;
+	const t4 = !isPresent || undefined;
+	let t5;
+	if ($[6] !== className) {
+		t5 = cn("min-w-0", className);
+		$[6] = className;
+		$[7] = t5;
+	} else {
+		t5 = $[7];
+	}
+	const t6 = layout && !shouldReduceMotion ? "position" : false;
+	let t7;
+	if ($[8] !== blur || $[9] !== distance) {
+		t7 = {
+			opacity: 0,
+			y: distance,
+			filter: blur
+		};
+		$[8] = blur;
+		$[9] = distance;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	let t9;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			opacity: 1,
+			y: 0,
+			filter: "blur(0px)"
+		};
+		t9 = {
+			opacity: 0,
+			transition: LIST_ITEM_EXIT_TRANSITION
+		};
+		$[11] = t8;
+		$[12] = t9;
+	} else {
+		t8 = $[11];
+		t9 = $[12];
+	}
+	let t10;
+	if ($[13] !== MotionElement || $[14] !== children || $[15] !== elementProps || $[16] !== t3 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7) {
+		t10 = /* @__PURE__ */ _jsx(MotionElement, {
+			"data-slot": "animated-list-item",
+			...elementProps,
+			"aria-hidden": t3,
+			inert: t4,
+			className: t5,
+			layout: t6,
+			initial: t7,
+			animate: t8,
+			exit: t9,
+			transition: LIST_ITEM_TRANSITION,
+			children
+		});
+		$[13] = MotionElement;
+		$[14] = children;
+		$[15] = elementProps;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t10;
+	} else {
+		t10 = $[21];
+	}
+	return t10;
+}

package/dist/components/animated-theme-toggler.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeMode, ResolvedTheme } from "../theme.js";
+export interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"button"> {
+    /**
+     * @deprecated The trigger no longer turns when the theme changes: like Arc's theme switch, only its icon swaps.
+     * The value is ignored.
+     */
+    duration?: number;
+    theme?: ThemeMode;
+    resolvedTheme?: ResolvedTheme;
+    onThemeChange?: (theme: ThemeMode) => void;
+}
+export declare const AnimatedThemeToggler: ({ className, duration: _duration, disabled, theme: controlledTheme, resolvedTheme: controlledResolvedTheme, onThemeChange: controlledOnThemeChange, ...props }: AnimatedThemeTogglerProps) => import("react").JSX.Element;

package/dist/components/animated-theme-toggler.js

@@ -0,0 +1,200 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+import { useSyncExternalStore } from "react";
+import { Monitor, Moon, Sun, SunMoon } from "lucide-react";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { useTheme } from "next-themes";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const THEME_OPTIONS = [
+	{
+		icon: Sun,
+		label: "Claro",
+		value: "light"
+	},
+	{
+		icon: Moon,
+		label: "Oscuro",
+		value: "dark"
+	},
+	{
+		icon: Monitor,
+		label: "Sistema",
+		value: "system"
+	}
+];
+export const AnimatedThemeToggler = (t0) => {
+	const $ = _c(30);
+	let className;
+	let controlledOnThemeChange;
+	let controlledResolvedTheme;
+	let controlledTheme;
+	let disabled;
+	let props;
+	if ($[0] !== t0) {
+		const { className: t1, duration: _duration, disabled: t2, theme: t3, resolvedTheme: t4, onThemeChange: t5, ...t6 } = t0;
+		className = t1;
+		disabled = t2;
+		controlledTheme = t3;
+		controlledResolvedTheme = t4;
+		controlledOnThemeChange = t5;
+		props = t6;
+		$[0] = t0;
+		$[1] = className;
+		$[2] = controlledOnThemeChange;
+		$[3] = controlledResolvedTheme;
+		$[4] = controlledTheme;
+		$[5] = disabled;
+		$[6] = props;
+	} else {
+		className = $[1];
+		controlledOnThemeChange = $[2];
+		controlledResolvedTheme = $[3];
+		controlledTheme = $[4];
+		disabled = $[5];
+		props = $[6];
+	}
+	const providerTheme = useTheme();
+	const theme = controlledTheme ?? providerTheme.theme;
+	const resolvedTheme = controlledResolvedTheme ?? providerTheme.resolvedTheme;
+	const onThemeChange = controlledOnThemeChange ?? providerTheme.setTheme;
+	const isHydrated = useSyncExternalStore(_temp2, _temp3, _temp4);
+	const isThemeReady = isHydrated && (resolvedTheme === "light" || resolvedTheme === "dark");
+	const isDark = resolvedTheme === "dark";
+	const selectedTheme = theme === "light" || theme === "dark" || theme === "system" ? theme : "system";
+	const isDisabled = !isThemeReady || disabled;
+	let t1;
+	if ($[7] !== isDisabled || $[8] !== onThemeChange) {
+		t1 = (nextTheme) => {
+			if (isDisabled) {
+				return;
+			}
+			onThemeChange(nextTheme);
+		};
+		$[7] = isDisabled;
+		$[8] = onThemeChange;
+		$[9] = t1;
+	} else {
+		t1 = $[9];
+	}
+	const selectTheme = t1;
+	let t2;
+	if ($[10] !== className) {
+		t2 = cn(className);
+		$[10] = className;
+		$[11] = t2;
+	} else {
+		t2 = $[11];
+	}
+	let t3;
+	if ($[12] !== isDark || $[13] !== isThemeReady) {
+		t3 = !isThemeReady ? /* @__PURE__ */ _jsx(SunMoon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "icon-swap",
+			children: isDark ? /* @__PURE__ */ _jsx(Moon, { "aria-hidden": "true" }) : /* @__PURE__ */ _jsx(Sun, { "aria-hidden": "true" })
+		}, isDark ? "dark" : "light");
+		$[12] = isDark;
+		$[13] = isThemeReady;
+		$[14] = t3;
+	} else {
+		t3 = $[14];
+	}
+	let t4;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: "Alternar tema"
+		});
+		$[15] = t4;
+	} else {
+		t4 = $[15];
+	}
+	let t5;
+	if ($[16] !== isDisabled || $[17] !== props || $[18] !== t2 || $[19] !== t3) {
+		t5 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsxs("button", {
+				type: "button",
+				disabled: isDisabled,
+				className: t2,
+				...props,
+				children: [t3, t4]
+			})
+		});
+		$[16] = isDisabled;
+		$[17] = props;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t5;
+	} else {
+		t5 = $[20];
+	}
+	let t6;
+	if ($[21] !== selectTheme) {
+		t6 = (nextTheme_0) => {
+			selectTheme(nextTheme_0);
+		};
+		$[21] = selectTheme;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	let t7;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = THEME_OPTIONS.map(_temp5);
+		$[23] = t7;
+	} else {
+		t7 = $[23];
+	}
+	let t8;
+	if ($[24] !== selectedTheme || $[25] !== t6) {
+		t8 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			"data-astra-theme-menu": true,
+			align: "end",
+			className: "w-44 rounded-xl p-2",
+			side: "bottom",
+			sideOffset: 8,
+			children: /* @__PURE__ */ _jsx(DropdownMenuRadioGroup, {
+				onValueChange: t6,
+				value: selectedTheme,
+				children: t7
+			})
+		});
+		$[24] = selectedTheme;
+		$[25] = t6;
+		$[26] = t8;
+	} else {
+		t8 = $[26];
+	}
+	let t9;
+	if ($[27] !== t5 || $[28] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t5, t8] });
+		$[27] = t5;
+		$[28] = t8;
+		$[29] = t9;
+	} else {
+		t9 = $[29];
+	}
+	return t9;
+};
+function _temp() {}
+function _temp2() {
+	return _temp;
+}
+function _temp3() {
+	return true;
+}
+function _temp4() {
+	return false;
+}
+function _temp5(t0) {
+	const { icon: Icon, label, value } = t0;
+	return /* @__PURE__ */ _jsxs(DropdownMenuRadioItem, {
+		className: "h-11 gap-3 px-3 pr-9 text-base",
+		value,
+		children: [/* @__PURE__ */ _jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-5"
+		}), /* @__PURE__ */ _jsx("span", { children: label })]
+	}, value);
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentProps, ReactNode } from "react";
+import type { AvatarGroupSize, AvatarSize, AvatarStatus } from "../constants/avatar.js";
+export type { AvatarGroupSize, AvatarSize, AvatarStatus };
+export type AvatarProps = Omit<ComponentProps<"span">, "children"> & {
+    /** Full name: the accessible name of the avatar and the source of its first two initials. */
+    name: string;
+    /** Photo URL, rendered through the provider's `Image` adapter. Falls back to the initials if it fails to load. */
+    src?: string | null;
+    /** Diameter: 24px (`sm`), 32px (`md`, default), 40px (`lg`) or Arc's 88px profile size (`xl`). */
+    size?: AvatarSize;
+    /** Adds a presence dot and appends the presence to the accessible name. */
+    status?: AvatarStatus;
+    /** Presence text appended to the accessible name; defaults to "En línea" or "Desconectado". */
+    statusLabel?: string;
+    /** Replaces the initials, for example with an icon. */
+    fallback?: ReactNode;
+    /** A custom corner badge; the presence dot moves to the top corner while it is shown. */
+    badge?: ReactNode;
+    /** Accessible text to use instead of `name`, when the photo needs a different description. */
+    alt?: string;
+};
+/**
+ * A round portrait for one person, with initials as fallback and an optional presence dot.
+ * @param props - Name, photo, size, presence, optional fallback and badge, plus native span attributes for the root.
+ * @returns The avatar, announced as one image.
+ */
+declare function Avatar({ name, src, size, status, statusLabel, fallback, badge, alt, ...props }: AvatarProps): import("react").JSX.Element;
+/** One person of an avatar group. */
+export type AvatarGroupMember = {
+    /** Full name, shown on hover and used as the avatar's accessible name. */
+    name: string;
+    /** Photo URL. */
+    src?: string | null;
+    /** Presence dot of the avatar. */
+    status?: AvatarStatus;
+    /** Stable key for members that share a name; defaults to `name`. */
+    key?: string;
+};
+export type AvatarGroupProps = Omit<ComponentProps<"div">, "children" | "role" | "aria-label"> & {
+    /**
+     * People in display order. Pass the whole list and let `max` collapse the rest, or a preview of it together with
+     * `total`.
+     */
+    members: AvatarGroupMember[];
+    /**
+     * How many people the group has when `members` is only a preview of them. When it is larger than
+     * `members.length`, the +N chip counts the people left out against it. Defaults to `members.length`.
+     */
+    total?: number;
+    /** Avatars shown before the rest collapse into the overflow count. */
+    max?: number;
+    /** Size of each avatar and of the overflow chip. */
+    size?: AvatarGroupSize;
+    /** Accessible name of the group, also used in the overflow label; defaults to "Integrantes". */
+    label?: string;
+    /** Classes for the group. Native attributes such as `aria-hidden`, `style` or `data-*` also go to the root. */
+    className?: string;
+};
+/**
+ * An overlapping stack of avatars with a +N overflow chip.
+ * @param props - Members, optional total, how many to show, size, accessible label, classes and native root attributes.
+ * @returns The group.
+ */
+declare function AvatarGroup({ members, total, max, size, label, className, style, ...props }: AvatarGroupProps): import("react").JSX.Element;
+export { Avatar, AvatarGroup };