beez-ui 0.7.0 → 0.8.0

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

@@ -0,0 +1,132 @@
+"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 { MOTION_EASE, MOTION_ITEM_ENTER_SCALE, MOTION_LIST_ITEM_DISTANCE, MOTION_TIMING, SPRING_LAYOUT } from "../motion/tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATED_LIST_ITEM_ELEMENTS = {
+	li: motion.li,
+	div: motion.div,
+	article: motion.article
+};
+const LIST_ITEM_TRANSITION = {
+	duration: MOTION_TIMING.panel,
+	ease: MOTION_EASE,
+	layout: SPRING_LAYOUT
+};
+const LIST_ITEM_EXIT_TRANSITION = {
+	duration: MOTION_TIMING.exit,
+	ease: MOTION_EASE
+};
+/** Reduced motion keeps enter/exit semantics (inert while leaving) but without travel or delay. */
+const INSTANT_TRANSITION = { duration: 0 };
+/**
+* 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 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;
+	let t8;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			opacity: 0,
+			y: MOTION_LIST_ITEM_DISTANCE,
+			scale: MOTION_ITEM_ENTER_SCALE
+		};
+		t8 = {
+			opacity: 1,
+			y: 0,
+			scale: 1
+		};
+		$[8] = t7;
+		$[9] = t8;
+	} else {
+		t7 = $[8];
+		t8 = $[9];
+	}
+	const t9 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_EXIT_TRANSITION;
+	let t10;
+	if ($[10] !== t9) {
+		t10 = {
+			opacity: 0,
+			scale: MOTION_ITEM_ENTER_SCALE,
+			transition: t9
+		};
+		$[10] = t9;
+		$[11] = t10;
+	} else {
+		t10 = $[11];
+	}
+	const t11 = shouldReduceMotion ? INSTANT_TRANSITION : LIST_ITEM_TRANSITION;
+	let t12;
+	if ($[12] !== MotionElement || $[13] !== children || $[14] !== elementProps || $[15] !== t10 || $[16] !== t11 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t12 = /* @__PURE__ */ _jsx(MotionElement, {
+			"data-slot": "animated-list-item",
+			...elementProps,
+			"aria-hidden": t3,
+			inert: t4,
+			className: t5,
+			layout: t6,
+			initial: t7,
+			animate: t8,
+			exit: t10,
+			transition: t11,
+			children
+		});
+		$[12] = MotionElement;
+		$[13] = children;
+		$[14] = elementProps;
+		$[15] = t10;
+		$[16] = t11;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t12;
+	} else {
+		t12 = $[21];
+	}
+	return t12;
+}

package/dist/components/bouncing-dots-loader.d.ts

@@ -0,0 +1,19 @@
+/** Animated three-dot bouncing loader with synchronized floor shadows. */
+import type { HTMLAttributes } from "react";
+export type BouncingDotsLoaderSize = "sm" | "md";
+export type BouncingDotsLoaderProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-label" | "role"> & {
+    /**
+     * Accessible label announced by assistive technologies. Also rendered as visually hidden text
+     * so screen readers can read it independently of the `aria-label`.
+     */
+    label?: string;
+    /** Use `"sm"` for inline or compact contexts and `"md"` (default) for standalone loading panels. */
+    size?: BouncingDotsLoaderSize;
+};
+/**
+ * Renders the loader as a `role="status"` region. It fades in after a short delay, so loads that
+ * finish quickly never flash it. Reduced motion stops the bounce through the shared fallback.
+ * @param props - Label, size and native attributes.
+ * @returns The loader.
+ */
+export declare function BouncingDotsLoader({ label, size, className, ...rest }: BouncingDotsLoaderProps): import("react").JSX.Element;

package/dist/components/bouncing-dots-loader.js

@@ -0,0 +1,47 @@
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOADING_LABEL = "Cargando...";
+/** Stage, dot and shadow geometry per size; the keyframes in `keyframes.css` match these values. */
+const LOADER_SIZE_CLASS_NAMES = {
+	md: {
+		stage: "h-[3.75rem] w-[12.5rem]",
+		dot: "size-5 animate-[beez-bouncing-dot-md_0.5s_ease_infinite_alternate]",
+		shadow: "top-[3.875rem] h-1 w-5"
+	},
+	sm: {
+		stage: "h-[1.875rem] w-[6.5rem]",
+		dot: "size-2.5 animate-[beez-bouncing-dot-sm_0.5s_ease_infinite_alternate]",
+		shadow: "top-[1.9375rem] h-[0.1875rem] w-2.5"
+	}
+};
+/** Horizontal slot and phase of each dot: the middle and right dots trail the left one. */
+const DOT_POSITION_CLASS_NAMES = [
+	"left-[15%]",
+	"left-[45%] delay-200",
+	"right-[15%] delay-300"
+];
+/**
+* Renders the loader as a `role="status"` region. It fades in after a short delay, so loads that
+* finish quickly never flash it. Reduced motion stops the bounce through the shared fallback.
+* @param props - Label, size and native attributes.
+* @returns The loader.
+*/
+export function BouncingDotsLoader({ label = DEFAULT_LOADING_LABEL, size = "md", className, ...rest }) {
+	const sizeClassNames = LOADER_SIZE_CLASS_NAMES[size];
+	return /* @__PURE__ */ _jsxs("div", {
+		"data-slot": "bouncing-dots-loader",
+		"data-size": size,
+		...rest,
+		"aria-label": label,
+		role: "status",
+		className: cn("flex w-full items-center justify-center animate-in fade-in fill-mode-both delay-120 duration-300", className),
+		children: [/* @__PURE__ */ _jsxs("div", {
+			"aria-hidden": "true",
+			className: cn("relative z-[1]", sizeClassNames.stage),
+			children: [DOT_POSITION_CLASS_NAMES.map((positionClassName) => /* @__PURE__ */ _jsx("span", { className: cn("absolute top-0 origin-bottom rounded-full bg-foreground", sizeClassNames.dot, positionClassName) }, `dot-${positionClassName}`)), DOT_POSITION_CLASS_NAMES.map((positionClassName) => /* @__PURE__ */ _jsx("span", { className: cn("absolute -z-[1] rounded-full bg-foreground/35 blur-[1px] animate-[beez-bouncing-dot-shadow_0.5s_ease_infinite_alternate]", sizeClassNames.shadow, positionClassName) }, `shadow-${positionClassName}`))]
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+}

package/dist/components/confirm-delete-button.d.ts

@@ -0,0 +1,29 @@
+/** Row action menu whose destructive item asks for an inline confirmation before running. */
+import { type ReactNode } from "react";
+export interface ConfirmDeleteButtonLabels {
+    /** Dismisses the confirmation. */
+    cancel?: string;
+    /** Runs `onConfirm`. */
+    confirm?: string;
+    /** Destructive menu item that opens the confirmation. */
+    delete?: string;
+    /** Accessible name of the icon-only menu trigger. */
+    menu?: string;
+}
+export interface ConfirmDeleteButtonProps {
+    /** Question shown in the confirmation, also used as its accessible name. */
+    message: string;
+    onConfirm: () => void;
+    /** Extra menu items (for example Edit), rendered before the delete item. */
+    extraMenuItems?: ReactNode;
+    labels?: ConfirmDeleteButtonLabels;
+    className?: string;
+}
+/**
+ * Renders an icon menu with a destructive item. Choosing it opens a confirmation anchored to
+ * the trigger; only its confirm button runs `onConfirm`. Escape, an outside click or Cancel
+ * dismiss it without side effects.
+ * @param props - Confirmation copy, callback, extra items and optional labels.
+ * @returns The menu trigger with its confirmation.
+ */
+export declare function ConfirmDeleteButton({ message, onConfirm, extraMenuItems, labels, className, }: ConfirmDeleteButtonProps): import("react").JSX.Element;

package/dist/components/confirm-delete-button.js

@@ -0,0 +1,254 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Row action menu whose destructive item asks for an inline confirmation before running. */
+import { useId, useRef, useState } from "react";
+import { MoreVertical, Trash2 } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CONFIRM_DELETE_DEFAULT_LABELS = {
+	cancel: "Cancelar",
+	confirm: "Confirmar",
+	delete: "Eliminar",
+	menu: "Abrir acciones"
+};
+/**
+* Renders an icon menu with a destructive item. Choosing it opens a confirmation anchored to
+* the trigger; only its confirm button runs `onConfirm`. Escape, an outside click or Cancel
+* dismiss it without side effects.
+* @param props - Confirmation copy, callback, extra items and optional labels.
+* @returns The menu trigger with its confirmation.
+*/
+export function ConfirmDeleteButton(t0) {
+	const $ = _c(43);
+	const { message, onConfirm, extraMenuItems: t1, labels, className } = t0;
+	const extraMenuItems = t1 === undefined ? null : t1;
+	let t2;
+	if ($[0] !== labels) {
+		t2 = {
+			...CONFIRM_DELETE_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const resolvedLabels = t2;
+	const [isConfirming, setIsConfirming] = useState(false);
+	const isOpeningConfirmationRef = useRef(false);
+	const messageId = useId();
+	let t3;
+	if ($[2] !== className) {
+		t3 = cn("inline-flex justify-end", className);
+		$[2] = className;
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ _jsx(MoreVertical, { "aria-hidden": "true" });
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	let t5;
+	if ($[5] !== resolvedLabels.menu) {
+		t5 = /* @__PURE__ */ _jsx(PopoverAnchor, {
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ _jsx(Button, {
+					"aria-label": resolvedLabels.menu,
+					size: "icon-sm",
+					type: "button",
+					variant: "ghost",
+					children: t4
+				})
+			})
+		});
+		$[5] = resolvedLabels.menu;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event) => {
+			if (!isOpeningConfirmationRef.current) {
+				return;
+			}
+			isOpeningConfirmationRef.current = false;
+			event.preventDefault();
+		};
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	let t7;
+	let t8;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			isOpeningConfirmationRef.current = true;
+			setIsConfirming(true);
+		};
+		t8 = /* @__PURE__ */ _jsx(Trash2, { "aria-hidden": "true" });
+		$[8] = t7;
+		$[9] = t8;
+	} else {
+		t7 = $[8];
+		t8 = $[9];
+	}
+	let t9;
+	if ($[10] !== resolvedLabels.delete) {
+		t9 = /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+			variant: "destructive",
+			onSelect: t7,
+			children: [t8, resolvedLabels.delete]
+		});
+		$[10] = resolvedLabels.delete;
+		$[11] = t9;
+	} else {
+		t9 = $[11];
+	}
+	let t10;
+	if ($[12] !== extraMenuItems || $[13] !== t9) {
+		t10 = /* @__PURE__ */ _jsxs(DropdownMenuContent, {
+			align: "end",
+			onCloseAutoFocus: t6,
+			children: [extraMenuItems, t9]
+		});
+		$[12] = extraMenuItems;
+		$[13] = t9;
+		$[14] = t10;
+	} else {
+		t10 = $[14];
+	}
+	let t11;
+	if ($[15] !== t10 || $[16] !== t5) {
+		t11 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t5, t10] });
+		$[15] = t10;
+		$[16] = t5;
+		$[17] = t11;
+	} else {
+		t11 = $[17];
+	}
+	let t12;
+	if ($[18] !== message || $[19] !== messageId) {
+		t12 = /* @__PURE__ */ _jsx("p", {
+			id: messageId,
+			className: "m-0 text-sm text-foreground",
+			children: message
+		});
+		$[18] = message;
+		$[19] = messageId;
+		$[20] = t12;
+	} else {
+		t12 = $[20];
+	}
+	let t13;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = () => setIsConfirming(false);
+		$[21] = t13;
+	} else {
+		t13 = $[21];
+	}
+	let t14;
+	if ($[22] !== resolvedLabels.cancel) {
+		t14 = /* @__PURE__ */ _jsx(Button, {
+			size: "sm",
+			type: "button",
+			variant: "outline",
+			onClick: t13,
+			children: resolvedLabels.cancel
+		});
+		$[22] = resolvedLabels.cancel;
+		$[23] = t14;
+	} else {
+		t14 = $[23];
+	}
+	let t15;
+	if ($[24] !== onConfirm) {
+		t15 = () => {
+			setIsConfirming(false);
+			onConfirm();
+		};
+		$[24] = onConfirm;
+		$[25] = t15;
+	} else {
+		t15 = $[25];
+	}
+	let t16;
+	if ($[26] !== resolvedLabels.confirm || $[27] !== t15) {
+		t16 = /* @__PURE__ */ _jsx(Button, {
+			size: "sm",
+			type: "button",
+			variant: "destructive",
+			onClick: t15,
+			children: resolvedLabels.confirm
+		});
+		$[26] = resolvedLabels.confirm;
+		$[27] = t15;
+		$[28] = t16;
+	} else {
+		t16 = $[28];
+	}
+	let t17;
+	if ($[29] !== t14 || $[30] !== t16) {
+		t17 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t14, t16]
+		});
+		$[29] = t14;
+		$[30] = t16;
+		$[31] = t17;
+	} else {
+		t17 = $[31];
+	}
+	let t18;
+	if ($[32] !== messageId || $[33] !== t12 || $[34] !== t17) {
+		t18 = /* @__PURE__ */ _jsxs(PopoverContent, {
+			align: "end",
+			"aria-labelledby": messageId,
+			className: "w-[min(18rem,calc(100vw-2rem))] gap-3 p-3.5",
+			children: [t12, t17]
+		});
+		$[32] = messageId;
+		$[33] = t12;
+		$[34] = t17;
+		$[35] = t18;
+	} else {
+		t18 = $[35];
+	}
+	let t19;
+	if ($[36] !== isConfirming || $[37] !== t11 || $[38] !== t18) {
+		t19 = /* @__PURE__ */ _jsxs(Popover, {
+			open: isConfirming,
+			onOpenChange: setIsConfirming,
+			children: [t11, t18]
+		});
+		$[36] = isConfirming;
+		$[37] = t11;
+		$[38] = t18;
+		$[39] = t19;
+	} else {
+		t19 = $[39];
+	}
+	let t20;
+	if ($[40] !== t19 || $[41] !== t3) {
+		t20 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "confirm-delete-button",
+			className: t3,
+			children: t19
+		});
+		$[40] = t19;
+		$[41] = t3;
+		$[42] = t20;
+	} else {
+		t20 = $[42];
+	}
+	return t20;
+}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,24 @@
+/** Placeholder for regions without content yet: empty lists, sections in construction or first steps. */
+import type { ReactNode } from "react";
+export type EmptyStateTitleElement = "h1" | "h2" | "h3" | "p";
+export interface EmptyStateProps {
+    title: ReactNode;
+    /** Heading level that fits the surrounding outline; a paragraph for minor regions. */
+    titleAs?: EmptyStateTitleElement;
+    /** Short uppercase label above the title, such as "Próximamente". */
+    eyebrow?: ReactNode;
+    description?: ReactNode;
+    /** Actions or extra content, such as buttons or a template list. */
+    children?: ReactNode;
+    align?: "start" | "center";
+    /** `page` uses display typography for full sections; `inline` stays compact inside panels. */
+    size?: "page" | "inline";
+    className?: string;
+}
+/**
+ * Renders the empty region as a labelled section. It does not add a landmark besides the
+ * section, so it composes inside an existing `main`.
+ * @param props - Title, optional eyebrow, description, actions and layout.
+ * @returns The empty state.
+ */
+export declare function EmptyState({ title, titleAs: TitleElement, eyebrow, description, children, align, size, className, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/empty-state.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Copy settles in one line after another; reduced motion drops it through the shared fallback. */
+const ENTER_CLASS_NAME = "animate-in fade-in slide-in-from-bottom-1.5 fill-mode-both duration-300";
+/**
+* Renders the empty region as a labelled section. It does not add a landmark besides the
+* section, so it composes inside an existing `main`.
+* @param props - Title, optional eyebrow, description, actions and layout.
+* @returns The empty state.
+*/
+export function EmptyState({ title, titleAs: TitleElement = "h2", eyebrow, description, children, align = "start", size = "inline", className }) {
+	const isCentered = align === "center";
+	const isPage = size === "page";
+	return /* @__PURE__ */ _jsxs("section", {
+		"data-slot": "empty-state",
+		"data-size": size,
+		className: cn("grid gap-2", isCentered ? "justify-items-center text-center" : "justify-items-start", isPage ? "max-w-2xl gap-2.5 py-6" : "py-6", className),
+		children: [
+			eyebrow ? /* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 text-[0.78rem] font-bold tracking-[0.08em] text-[color-mix(in_oklab,var(--primary)_76%,var(--foreground))] uppercase", ENTER_CLASS_NAME),
+				children: eyebrow
+			}) : null,
+			/* @__PURE__ */ _jsx(TitleElement, {
+				className: cn("m-0 text-balance [overflow-wrap:anywhere]", isPage ? "font-display text-[clamp(2rem,6vw,4rem)] leading-[1.05] font-semibold" : "font-semibold", ENTER_CLASS_NAME, "delay-40"),
+				children: title
+			}),
+			description ? /* @__PURE__ */ _jsx("p", {
+				className: cn("m-0 max-w-xl text-pretty text-muted-foreground", isPage && "text-[clamp(1rem,2vw,1.15rem)] leading-relaxed", ENTER_CLASS_NAME, "delay-80"),
+				children: description
+			}) : null,
+			children ? /* @__PURE__ */ _jsx("div", {
+				className: cn("mt-2 flex w-full flex-wrap gap-2", isCentered && "justify-center", ENTER_CLASS_NAME, "delay-120"),
+				children
+			}) : null
+		]
+	});
+}

package/dist/components/error-state.d.ts

@@ -0,0 +1,20 @@
+/** Full-page recovery view for route and global error boundaries: explains the failure and offers a retry. */
+import type { ReactNode } from "react";
+export interface ErrorStateProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    retryLabel: string;
+    onRetry: () => void;
+    /** Destination of the secondary action. Without it, only the retry action is shown. */
+    homeHref?: string;
+    homeLabel?: string;
+    className?: string;
+}
+/**
+ * Renders a full-height section with the error copy, a retry button and an optional way home.
+ * The home link uses the router adapter configured in `BeezUIProvider`.
+ * @param props - Copy, retry callback and optional home destination.
+ * @returns The error view.
+ */
+export declare function ErrorState({ eyebrow, title, description, retryLabel, onRetry, homeHref, homeLabel, className }: ErrorStateProps): import("react").JSX.Element;