beez-ui 2.7.1 → 3.0.1

package/dist/components/skeleton.d.ts

@@ -1,22 +1,23 @@
-import type { ComponentProps } from "react";
-export type SkeletonProps = ComponentProps<"div"> & {
-    /** Draws Arc's composed placeholder with this many text lines, from 1 to 6. */
+import type { ReactNode } from "react";
+export type SkeletonProps = {
+    /** Accessible name of the loading status; defaults to "Cargando contenido". */
+    label?: string;
+    /** Number of text lines, clamped to 1-6; defaults to 3. */
     lines?: number;
-    /** Adds a round avatar block before the lines of the composed placeholder. */
+    /** Adds a round avatar block before the lines. */
     avatar?: boolean;
-    /** Accessible name of the composed placeholder; defaults to "Cargando contenido". */
-    label?: string;
-    /**
-     * Turns the skeleton into Arc's reveal: while true it shows the composed placeholder, and once false it crossfades
-     * into `children` while the height springs to the content's size.
-     */
+    /** Content to reveal once loading finishes; with children the placeholder crossfades into them. */
+    children?: ReactNode;
+    /** Keeps the placeholder visible while true (the default). Only used together with `children`. */
     loading?: boolean;
+    /** Classes for the outer element: the placeholder, or the reveal frame when there are children. */
+    className?: string;
 };
 /**
- * Reserves space while content loads. Without Arc's props it is a bare block sized by `className`; with `lines` or
- * `avatar` it draws Arc's composed placeholder; with `loading` it reveals `children` once loading finishes.
- * @param props - Optional placeholder shape, label and loading state, plus native div attributes.
- * @returns The placeholder, or the reveal frame when `loading` is set.
+ * Reserves space while content loads. Without children it draws Arc's placeholder, three text lines by default; with
+ * children it shows that placeholder while `loading` and then crossfades into them.
+ * @param props - Placeholder shape, accessible label, loading state and classes.
+ * @returns The placeholder, or the reveal frame when there are children.
  */
-declare function Skeleton({ lines, avatar, label, loading, className, children, ...props }: SkeletonProps): import("react").JSX.Element;
+declare function Skeleton({ label, lines, avatar, children, loading, className, }: SkeletonProps): import("react").JSX.Element;
 export { Skeleton };

package/dist/components/skeleton.js

@@ -2,9 +2,10 @@
 import { c as _c } from "react/compiler-runtime";
 /**
 * Arc's Skeleton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): placeholders that reserve space while
-* content loads, with a calm, finite pulse that ripples down the blocks and rests after about 20 seconds. Besides the
-* bare block it renders Arc's composed placeholder (`lines`, `avatar`) and its reveal, which crossfades into the
-* content while the height springs to its new size (`loading` with children).
+* content loads, with a calm, finite pulse that ripples down the blocks and rests after about 20 seconds. It draws
+* Arc's placeholder of text lines and an optional avatar, and with children its reveal, which crossfades into the
+* content while the height springs to its new size. Like Arc, it only draws lines and an avatar: other shapes are
+* built by the consumer.
 */
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
@@ -75,93 +76,72 @@ function useMorphHeight(contentRef, busy, reduceMotion) {
 }
 /** Arc's composed placeholder: an optional avatar and a column of lines, announced once as a busy status. */
 function SkeletonPlaceholder(t0) {
-	const $ = _c(21);
-	let avatar;
-	let className;
-	let label;
-	let lines;
-	let props;
-	if ($[0] !== t0) {
-		({lines, avatar, label, className, ...props} = t0);
-		$[0] = t0;
-		$[1] = avatar;
-		$[2] = className;
-		$[3] = label;
-		$[4] = lines;
-		$[5] = props;
-	} else {
-		avatar = $[1];
-		className = $[2];
-		label = $[3];
-		lines = $[4];
-		props = $[5];
-	}
+	const $ = _c(14);
+	const { lines, avatar, label, className } = t0;
 	const lineCount = Math.min(Math.max(Math.floor(lines), SKELETON_LINE_LIMITS.min), SKELETON_LINE_LIMITS.max);
 	const firstLineIndex = avatar ? 1 : 0;
 	let t1;
-	if ($[6] !== className) {
+	if ($[0] !== className) {
 		t1 = cn("flex w-full min-w-0 items-start gap-(--space-4)", className);
-		$[6] = className;
-		$[7] = t1;
+		$[0] = className;
+		$[1] = t1;
 	} else {
-		t1 = $[7];
+		t1 = $[1];
 	}
 	let t2;
-	if ($[8] !== avatar) {
+	if ($[2] !== avatar) {
 		t2 = avatar ? /* @__PURE__ */ _jsx("span", {
 			"data-slot": "skeleton",
 			"aria-hidden": "true",
 			className: cn(blockClassName, "size-(--control-height-md) flex-none rounded-(--radius-pill)")
 		}) : null;
-		$[8] = avatar;
-		$[9] = t2;
+		$[2] = avatar;
+		$[3] = t2;
 	} else {
-		t2 = $[9];
+		t2 = $[3];
 	}
 	let t3;
-	if ($[10] !== firstLineIndex || $[11] !== lineCount) {
+	if ($[4] !== firstLineIndex || $[5] !== lineCount) {
 		let t4;
-		if ($[13] !== firstLineIndex) {
+		if ($[7] !== firstLineIndex) {
 			t4 = (_, lineIndex) => /* @__PURE__ */ _jsx("span", {
 				"data-slot": "skeleton",
 				className: cn(blockClassName, "h-(--space-3) w-full first:h-(--space-4) first:w-[48%] last:not-first:w-[72%]"),
 				style: { "--index": lineIndex + firstLineIndex }
 			}, lineIndex);
-			$[13] = firstLineIndex;
-			$[14] = t4;
+			$[7] = firstLineIndex;
+			$[8] = t4;
 		} else {
-			t4 = $[14];
+			t4 = $[8];
 		}
 		t3 = /* @__PURE__ */ _jsx("span", {
 			"aria-hidden": "true",
 			className: "grid flex-1 gap-(--space-3) pt-(--space-1)",
 			children: Array.from({ length: lineCount }, t4)
 		});
-		$[10] = firstLineIndex;
-		$[11] = lineCount;
-		$[12] = t3;
+		$[4] = firstLineIndex;
+		$[5] = lineCount;
+		$[6] = t3;
 	} else {
-		t3 = $[12];
+		t3 = $[6];
 	}
 	let t4;
-	if ($[15] !== label || $[16] !== props || $[17] !== t1 || $[18] !== t2 || $[19] !== t3) {
+	if ($[9] !== label || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
 		t4 = /* @__PURE__ */ _jsxs("div", {
 			"data-slot": "skeleton-placeholder",
 			role: "status",
 			"aria-label": label,
 			"aria-busy": "true",
 			className: t1,
-			...props,
 			children: [t2, t3]
 		});
-		$[15] = label;
-		$[16] = props;
-		$[17] = t1;
-		$[18] = t2;
-		$[19] = t3;
-		$[20] = t4;
+		$[9] = label;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
 	} else {
-		t4 = $[20];
+		t4 = $[13];
 	}
 	return t4;
 }
@@ -205,47 +185,24 @@ function SkeletonBranch(t0) {
 }
 /** Arc's reveal: the placeholder crossfades into the content while the frame springs to the new height. */
 function SkeletonReveal(t0) {
-	const $ = _c(21);
-	let children;
-	let className;
-	let loading;
-	let placeholder;
-	let props;
-	let style;
-	if ($[0] !== t0) {
-		({loading, placeholder, children, className, style, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = loading;
-		$[4] = placeholder;
-		$[5] = props;
-		$[6] = style;
-	} else {
-		children = $[1];
-		className = $[2];
-		loading = $[3];
-		placeholder = $[4];
-		props = $[5];
-		style = $[6];
-	}
+	const $ = _c(12);
+	const { loading, placeholder, children, className } = t0;
 	const reduceMotion = usePrefersReducedMotion();
 	const contentRef = useRef(null);
 	useMorphHeight(contentRef, loading, reduceMotion);
 	const t1 = reduceMotion ? ARC_DURATION.instant : ARC_DURATION.fast;
 	let t2;
-	if ($[7] !== t1) {
+	if ($[0] !== t1) {
 		t2 = { duration: t1 };
-		$[7] = t1;
-		$[8] = t2;
+		$[0] = t1;
+		$[1] = t2;
 	} else {
-		t2 = $[8];
+		t2 = $[1];
 	}
 	const exitTransition = t2;
-	const t3 = props;
-	let t4;
-	if ($[9] !== children || $[10] !== exitTransition || $[11] !== loading || $[12] !== placeholder || $[13] !== reduceMotion) {
-		t4 = /* @__PURE__ */ _jsx("div", {
+	let t3;
+	if ($[2] !== children || $[3] !== exitTransition || $[4] !== loading || $[5] !== placeholder || $[6] !== reduceMotion) {
+		t3 = /* @__PURE__ */ _jsx("div", {
 			ref: contentRef,
 			className: "relative flow-root",
 			children: /* @__PURE__ */ _jsx(AnimatePresence, {
@@ -284,156 +241,93 @@ function SkeletonReveal(t0) {
 				}, "content")
 			})
 		});
-		$[9] = children;
-		$[10] = exitTransition;
-		$[11] = loading;
-		$[12] = placeholder;
-		$[13] = reduceMotion;
-		$[14] = t4;
+		$[2] = children;
+		$[3] = exitTransition;
+		$[4] = loading;
+		$[5] = placeholder;
+		$[6] = reduceMotion;
+		$[7] = t3;
 	} else {
-		t4 = $[14];
+		t3 = $[7];
 	}
-	let t5;
-	if ($[15] !== className || $[16] !== loading || $[17] !== style || $[18] !== t3 || $[19] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(motion.div, {
+	let t4;
+	if ($[8] !== className || $[9] !== loading || $[10] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("div", {
 			"data-slot": "skeleton-reveal",
 			"aria-busy": loading,
 			className,
-			...t3,
-			style,
-			children: t4
+			children: t3
 		});
-		$[15] = className;
-		$[16] = loading;
-		$[17] = style;
-		$[18] = t3;
-		$[19] = t4;
-		$[20] = t5;
+		$[8] = className;
+		$[9] = loading;
+		$[10] = t3;
+		$[11] = t4;
 	} else {
-		t5 = $[20];
+		t4 = $[11];
 	}
-	return t5;
+	return t4;
 }
 /**
-* Reserves space while content loads. Without Arc's props it is a bare block sized by `className`; with `lines` or
-* `avatar` it draws Arc's composed placeholder; with `loading` it reveals `children` once loading finishes.
-* @param props - Optional placeholder shape, label and loading state, plus native div attributes.
-* @returns The placeholder, or the reveal frame when `loading` is set.
+* Reserves space while content loads. Without children it draws Arc's placeholder, three text lines by default; with
+* children it shows that placeholder while `loading` and then crossfades into them.
+* @param props - Placeholder shape, accessible label, loading state and classes.
+* @returns The placeholder, or the reveal frame when there are children.
 */
 function Skeleton(t0) {
-	const $ = _c(30);
-	let avatar;
-	let children;
-	let className;
-	let lines;
-	let loading;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({lines, avatar, label: t1, loading, className, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = avatar;
-		$[2] = children;
-		$[3] = className;
-		$[4] = lines;
-		$[5] = loading;
-		$[6] = props;
-		$[7] = t1;
-	} else {
-		avatar = $[1];
-		children = $[2];
-		className = $[3];
-		lines = $[4];
-		loading = $[5];
-		props = $[6];
-		t1 = $[7];
-	}
+	const $ = _c(14);
+	const { label: t1, lines: t2, avatar: t3, children, loading: t4, className } = t0;
 	const label = t1 === undefined ? SKELETON_DEFAULT_LABEL : t1;
-	const t2 = lines ?? SKELETON_DEFAULT_LINES;
-	const t3 = avatar ?? false;
-	let t4;
-	if ($[8] !== label || $[9] !== t2 || $[10] !== t3) {
-		t4 = {
-			lines: t2,
-			avatar: t3,
-			label
-		};
-		$[8] = label;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-	} else {
-		t4 = $[11];
-	}
-	const shape = t4;
-	if (loading !== undefined) {
+	const lines = t2 === undefined ? SKELETON_DEFAULT_LINES : t2;
+	const avatar = t3 === undefined ? false : t3;
+	const loading = t4 === undefined ? true : t4;
+	if (children === undefined) {
 		let t5;
-		if ($[12] !== shape) {
-			t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, { ...shape });
-			$[12] = shape;
-			$[13] = t5;
-		} else {
-			t5 = $[13];
-		}
-		let t6;
-		if ($[14] !== children || $[15] !== className || $[16] !== loading || $[17] !== props || $[18] !== t5) {
-			t6 = /* @__PURE__ */ _jsx(SkeletonReveal, {
-				loading,
-				placeholder: t5,
-				className,
-				...props,
-				children
-			});
-			$[14] = children;
-			$[15] = className;
-			$[16] = loading;
-			$[17] = props;
-			$[18] = t5;
-			$[19] = t6;
-		} else {
-			t6 = $[19];
-		}
-		return t6;
-	}
-	if (lines !== undefined || avatar) {
-		let t5;
-		if ($[20] !== className || $[21] !== props || $[22] !== shape) {
+		if ($[0] !== avatar || $[1] !== className || $[2] !== label || $[3] !== lines) {
 			t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, {
-				...shape,
-				className,
-				...props
+				lines,
+				avatar,
+				label,
+				className
 			});
-			$[20] = className;
-			$[21] = props;
-			$[22] = shape;
-			$[23] = t5;
+			$[0] = avatar;
+			$[1] = className;
+			$[2] = label;
+			$[3] = lines;
+			$[4] = t5;
 		} else {
-			t5 = $[23];
+			t5 = $[4];
 		}
 		return t5;
 	}
 	let t5;
-	if ($[24] !== className) {
-		t5 = cn(blockClassName, className);
-		$[24] = className;
-		$[25] = t5;
+	if ($[5] !== avatar || $[6] !== label || $[7] !== lines) {
+		t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, {
+			lines,
+			avatar,
+			label
+		});
+		$[5] = avatar;
+		$[6] = label;
+		$[7] = lines;
+		$[8] = t5;
 	} else {
-		t5 = $[25];
+		t5 = $[8];
 	}
 	let t6;
-	if ($[26] !== children || $[27] !== props || $[28] !== t5) {
-		t6 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "skeleton",
-			className: t5,
-			...props,
+	if ($[9] !== children || $[10] !== className || $[11] !== loading || $[12] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(SkeletonReveal, {
+			loading,
+			placeholder: t5,
+			className,
 			children
 		});
-		$[26] = children;
-		$[27] = props;
-		$[28] = t5;
-		$[29] = t6;
+		$[9] = children;
+		$[10] = className;
+		$[11] = loading;
+		$[12] = t5;
+		$[13] = t6;
 	} else {
-		t6 = $[29];
+		t6 = $[13];
 	}
 	return t6;
 }

package/dist/components/split-button.js

@@ -14,7 +14,7 @@ import { cn } from "../lib/utils.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_REST as restState } from "../motion/arc-swap.js";
 import { useMorphWidth } from "../motion/use-morph-width.js";
 import { Button } from "./button.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
 import { MorphText } from "./morph-text.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/dist/components/switch.d.ts

@@ -1,16 +1,13 @@
 import type { ComponentProps } from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
-import type { SwitchSize } from "../constants/switch.js";
 export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
-    /** Track size: Arc's 42 by 24 track (`default`) or a compact one for dense rows (`sm`). */
-    size?: SwitchSize;
-    /** Visible text rendered inside the control, after the track; it also names the switch. */
+    /** Visible text rendered inside the control, after the track; also its `aria-label` when none is passed. */
     label?: string;
 };
 /**
  * A binary setting that applies at once, controlled or uncontrolled like Radix's switch.
- * @param switchProps - Every Radix switch prop, including `ref`, plus the Arc `size` and `label`.
+ * @param switchProps - Every Radix switch prop, including `ref`, plus Arc's `label`.
  * @returns The switch button, with its label inside when one is passed.
  */
-declare function Switch({ className, size, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props }: SwitchProps): import("react").JSX.Element;
+declare function Switch({ className, label, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, disabled, "aria-label": ariaLabel, ...props }: SwitchProps): import("react").JSX.Element;
 export { Switch };