beez-ui 2.5.0 → 2.6.1

package/dist/components/select.js

@@ -1,7 +1,14 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Select (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix select:
+* Arc's trigger, whose hover, press and open states answer in color only so the anchored list never shifts, and its
+* raised list with option rows and an end check, on Arc's tokens. It keeps every subcomponent, prop and `data-slot`
+* of the previous API and beez-ui's option entrance, check pop and chevron rotation.
+*/
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
+import { SELECT_COLLISION_PADDING_PX } from "../constants/select.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
@@ -45,7 +52,7 @@ function SelectGroup(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("scroll-my-1 p-1", className);
+		t1 = cn("scroll-my-1.5", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -90,8 +97,10 @@ function SelectValue(t0) {
 	return t1;
 }
 /**
-* Renders compact default and small selection controls.
-* @param props - Primitive properties and optional consumer overrides.
+* Renders Arc's selection control: `default` matches the height of `Input` and `Button`, `sm` their small size.
+* Hover only answers on fine pointers, keyboard focus draws the shared outline, and `aria-invalid` turns the border
+* to the danger color.
+* @param props - Primitive properties, the `size` and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
 function SelectTrigger(t0) {
@@ -116,7 +125,7 @@ function SelectTrigger(t0) {
 	const size = t1 === undefined ? "default" : t1;
 	let t2;
 	if ($[5] !== className) {
-		t2 = cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border data-[state=open]:*:data-[slot=select-icon]:rotate-180 border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
+		t2 = cn("flex w-fit cursor-pointer items-center justify-between gap-3 rounded-(--radius-control) border border-border bg-surface px-3 text-left text-sm whitespace-nowrap text-foreground outline-none select-none transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none hover-fine:not-disabled:not-aria-invalid:border-border-strong hover-fine:not-disabled:bg-surface-muted active:not-disabled:not-aria-invalid:border-border-strong active:not-disabled:bg-surface-muted data-[state=open]:not-aria-invalid:border-border-strong data-[state=open]:bg-surface-muted focus-visible:not-aria-invalid:border-border-strong disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-text-muted data-[size=default]:min-h-(--control-height-md) data-[size=sm]:min-h-(--control-height-sm) data-[state=open]:*:data-[slot=select-icon]:rotate-180 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className);
 		$[5] = className;
 		$[6] = t2;
 	} else {
@@ -130,7 +139,8 @@ function SelectTrigger(t0) {
 				kind: "rotate",
 				children: /* @__PURE__ */ _jsx(ChevronDownIcon, {
 					"data-slot": "select-icon",
-					className: "pointer-events-none size-4 text-muted-foreground"
+					strokeWidth: 1.75,
+					className: "pointer-events-none size-4 text-text-muted"
 				})
 			})
 		});
@@ -161,117 +171,115 @@ function SelectTrigger(t0) {
 	return t4;
 }
 /**
-* Keeps selection options readable with a twelve-rem minimum width.
+* Renders Arc's raised option list, at least twelve rem wide so options stay readable. With `position="popper"` it
+* grows from the trigger edge, matches the trigger width, keeps 12px from the viewport edges and caps its height at
+* 20rem.
 * @param props - Primitive properties and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
 function SelectContent(t0) {
-	const $ = _c(24);
+	const $ = _c(23);
 	let children;
 	let className;
 	let props;
 	let t1;
 	let t2;
+	let t3;
 	if ($[0] !== t0) {
-		({className, children, position: t1, align: t2, ...props} = t0);
+		({className, children, position: t1, align: t2, collisionPadding: t3, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = props;
 		$[4] = t1;
 		$[5] = t2;
+		$[6] = t3;
 	} else {
 		children = $[1];
 		className = $[2];
 		props = $[3];
 		t1 = $[4];
 		t2 = $[5];
+		t3 = $[6];
 	}
 	const position = t1 === undefined ? "item-aligned" : t1;
 	const align = t2 === undefined ? "center" : t2;
-	const t3 = position === "item-aligned";
-	const t4 = position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
-	let t5;
-	if ($[6] !== className || $[7] !== t4) {
-		t5 = cn("z-50 max-h-(--radix-select-content-available-height) min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg text-popover-foreground shadow-md ring-1 ring-foreground/10 relative bg-popover/70 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground!", t4, className);
-		$[6] = className;
-		$[7] = t4;
-		$[8] = t5;
-	} else {
-		t5 = $[8];
-	}
+	const collisionPadding = t3 === undefined ? SELECT_COLLISION_PADDING_PX : t3;
+	const t4 = position === "item-aligned";
+	const t5 = position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1";
 	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
+	if ($[7] !== className || $[8] !== t5) {
+		t6 = cn("relative z-50 max-h-[min(20rem,var(--radix-select-content-available-height))] min-w-48 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[calc(var(--radius-control)+2px)] border border-border bg-surface-raised p-1.5 text-foreground shadow-(--shadow-floating)", t5, className);
+		$[7] = className;
+		$[8] = t5;
 		$[9] = t6;
 	} else {
 		t6 = $[9];
 	}
-	const t7 = position === "popper" && "";
-	let t8;
-	if ($[10] !== t7) {
-		t8 = cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", t7);
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ _jsx(SelectScrollUpButton, {});
 		$[10] = t7;
-		$[11] = t8;
 	} else {
-		t8 = $[11];
+		t7 = $[10];
 	}
-	let t9;
-	if ($[12] !== children || $[13] !== position || $[14] !== t8) {
-		t9 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
+	let t8;
+	if ($[11] !== children || $[12] !== position) {
+		t8 = /* @__PURE__ */ _jsx(SelectPrimitive.Viewport, {
 			"data-position": position,
-			className: t8,
+			className: "py-0.5 data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
 			children
 		});
-		$[12] = children;
-		$[13] = position;
-		$[14] = t8;
-		$[15] = t9;
+		$[11] = children;
+		$[12] = position;
+		$[13] = t8;
 	} else {
-		t9 = $[15];
+		t8 = $[13];
 	}
-	let t10;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
-		$[16] = t10;
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ _jsx(SelectScrollDownButton, {});
+		$[14] = t9;
 	} else {
-		t10 = $[16];
+		t9 = $[14];
 	}
-	let t11;
-	if ($[17] !== align || $[18] !== position || $[19] !== props || $[20] !== t3 || $[21] !== t5 || $[22] !== t9) {
-		t11 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
+	let t10;
+	if ($[15] !== align || $[16] !== collisionPadding || $[17] !== position || $[18] !== props || $[19] !== t4 || $[20] !== t6 || $[21] !== t8) {
+		t10 = /* @__PURE__ */ _jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "surface",
 			children: /* @__PURE__ */ _jsx(GlideSlot, {
 				preset: "menu",
 				children: /* @__PURE__ */ _jsxs(SelectPrimitive.Content, {
 					"data-slot": "select-content",
-					"data-align-trigger": t3,
-					className: t5,
+					"data-align-trigger": t4,
+					className: t6,
 					position,
 					align,
+					collisionPadding,
 					...props,
 					children: [
-						t6,
-						t9,
-						t10
+						t7,
+						t8,
+						t9
 					]
 				})
 			})
 		}) });
-		$[17] = align;
-		$[18] = position;
-		$[19] = props;
-		$[20] = t3;
-		$[21] = t5;
-		$[22] = t9;
-		$[23] = t11;
-	} else {
-		t11 = $[23];
-	}
-	return t11;
+		$[15] = align;
+		$[16] = collisionPadding;
+		$[17] = position;
+		$[18] = props;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t8;
+		$[22] = t10;
+	} else {
+		t10 = $[22];
+	}
+	return t10;
 }
 /**
-* Renders compact option group labels.
+* Renders a muted option group label aligned with the option text.
 * @param props - Primitive properties and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
@@ -290,7 +298,7 @@ function SelectLabel(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("px-1.5 py-1 text-xs text-muted-foreground", className);
+		t1 = cn("px-[11px] py-1.5 text-xs font-medium text-text-muted", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -312,7 +320,8 @@ function SelectLabel(t0) {
 	return t2;
 }
 /**
-* Renders compact options while retaining selection and disabled semantics.
+* Renders Arc's option row: 36px tall, a muted fill when highlighted and the check of the chosen option at the end,
+* while retaining selection and disabled semantics.
 * @param props - Primitive properties and optional consumer overrides.
 * @returns The styled primitive with its original interaction contract.
 */
@@ -334,7 +343,7 @@ function SelectItem(t0) {
 	}
 	let t1;
 	if ($[4] !== className) {
-		t1 = cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
+		t1 = cn("relative flex min-h-9 w-full cursor-default items-center gap-1.5 rounded-[calc(var(--radius-control)-4px)] py-1 pr-[34px] pl-[11px] text-sm text-foreground outline-hidden select-none transition-colors duration-(--duration-instant) ease-(--ease-standard) motion-reduce:transition-none data-highlighted:bg-surface-muted data-disabled:pointer-events-none data-disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className);
 		$[4] = className;
 		$[5] = t1;
 	} else {
@@ -343,10 +352,13 @@ function SelectItem(t0) {
 	let t2;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ _jsx("span", {
-			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
+			className: "pointer-events-none absolute right-2.5 flex size-4 items-center justify-center text-foreground",
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { className: "pointer-events-none" }) })
+				children: /* @__PURE__ */ _jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, {
+					strokeWidth: 1.75,
+					className: "pointer-events-none"
+				}) })
 			})
 		});
 		$[6] = t2;
@@ -396,7 +408,7 @@ function SelectSeparator(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("pointer-events-none -mx-1 my-1 h-px bg-border", className);
+		t1 = cn("pointer-events-none -mx-1.5 my-1 h-px bg-border-subtle", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -432,7 +444,7 @@ function SelectScrollUpButton(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("z-10 flex h-7 cursor-default items-center justify-center bg-surface-raised text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -440,7 +452,7 @@ function SelectScrollUpButton(t0) {
 	}
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronUpIcon, {});
+		t2 = /* @__PURE__ */ _jsx(ChevronUpIcon, { strokeWidth: 1.75 });
 		$[5] = t2;
 	} else {
 		t2 = $[5];
@@ -476,7 +488,7 @@ function SelectScrollDownButton(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className);
+		t1 = cn("z-10 flex h-7 cursor-default items-center justify-center bg-surface-raised text-text-muted [&_svg:not([class*='size-'])]:size-4", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {
@@ -484,7 +496,7 @@ function SelectScrollDownButton(t0) {
 	}
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronDownIcon, {});
+		t2 = /* @__PURE__ */ _jsx(ChevronDownIcon, { strokeWidth: 1.75 });
 		$[5] = t2;
 	} else {
 		t2 = $[5];

package/dist/components/sheet.js

@@ -5,6 +5,7 @@ import { Dialog as SheetPrimitive } from "radix-ui";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
+import { keepOpenOnToastInteraction } from "../lib/toast-layer.js";
 import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -160,7 +161,7 @@ function SheetOverlay(t0) {
 * @returns The styled primitive with its original interaction contract.
 */
 function SheetContent(t0) {
-	const $ = _c(20);
+	const $ = _c(23);
 	let children;
 	let className;
 	let props;
@@ -203,8 +204,16 @@ function SheetContent(t0) {
 		t5 = $[8];
 	}
 	let t6;
-	if ($[9] !== showCloseButton) {
-		t6 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
+	if ($[9] !== props.onInteractOutside) {
+		t6 = keepOpenOnToastInteraction(props.onInteractOutside);
+		$[9] = props.onInteractOutside;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== showCloseButton) {
+		t7 = showCloseButton && /* @__PURE__ */ _jsx(SheetPrimitive.Close, {
 			"data-slot": "sheet-close",
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
@@ -220,14 +229,14 @@ function SheetContent(t0) {
 				})
 			})
 		});
-		$[9] = showCloseButton;
-		$[10] = t6;
+		$[11] = showCloseButton;
+		$[12] = t7;
 	} else {
-		t6 = $[10];
+		t7 = $[12];
 	}
-	let t7;
-	if ($[11] !== children || $[12] !== props || $[13] !== side || $[14] !== t5 || $[15] !== t6) {
-		t7 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
+	let t8;
+	if ($[13] !== children || $[14] !== props || $[15] !== side || $[16] !== t5 || $[17] !== t6 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(React.Fragment, { children: [t4, /* @__PURE__ */ _jsx(MotionSlot, {
 			kind: "sheet",
 			children: /* @__PURE__ */ _jsxs(SheetPrimitive.Content, {
 				forceMount: true,
@@ -235,35 +244,37 @@ function SheetContent(t0) {
 				"data-side": side,
 				className: t5,
 				...props,
-				children: [children, t6]
+				onInteractOutside: t6,
+				children: [children, t7]
 			})
 		})] });
-		$[11] = children;
-		$[12] = props;
-		$[13] = side;
-		$[14] = t5;
-		$[15] = t6;
-		$[16] = t7;
+		$[13] = children;
+		$[14] = props;
+		$[15] = side;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+		$[19] = t8;
 	} else {
-		t7 = $[16];
+		t8 = $[19];
 	}
-	let t8;
-	if ($[17] !== props.forceMount || $[18] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(SheetPortal, {
+	let t9;
+	if ($[20] !== props.forceMount || $[21] !== t8) {
+		t9 = /* @__PURE__ */ _jsx(SheetPortal, {
 			forceMount: true,
 			children: /* @__PURE__ */ _jsx(MotionPresence, {
 				scope: "sheet",
 				forceMount: t3,
-				children: t7
+				children: t8
 			})
 		});
-		$[17] = props.forceMount;
-		$[18] = t7;
-		$[19] = t8;
+		$[20] = props.forceMount;
+		$[21] = t8;
+		$[22] = t9;
 	} else {
-		t8 = $[19];
+		t9 = $[22];
 	}
-	return t8;
+	return t9;
 }
 function SheetHeader(t0) {
 	const $ = _c(8);

package/dist/components/sidebar.js

@@ -404,15 +404,22 @@ function MobileSidebar(t0) {
 			const previousBodyStyles = {
 				left: body.style.left,
 				overflow: body.style.overflow,
+				paddingRight: body.style.paddingRight,
 				position: body.style.position,
 				right: body.style.right,
 				top: body.style.top
 			};
+			const clientWidthBeforeLock = document.documentElement.clientWidth;
+			const bodyPaddingRight = Number.parseFloat(getComputedStyle(body).paddingRight) || 0;
 			body.style.position = "fixed";
 			body.style.top = `-${scrollY}px`;
 			body.style.left = "0";
 			body.style.right = "0";
 			body.style.overflow = "hidden";
+			const scrollbarWidth = document.documentElement.clientWidth - clientWidthBeforeLock;
+			if (scrollbarWidth > 0) {
+				body.style.paddingRight = `${bodyPaddingRight + scrollbarWidth}px`;
+			}
 			const restoreTriggerFocus = () => triggerRef.current?.focus({ preventScroll: true });
 			const focusFrame = requestAnimationFrame(() => {
 				const firstFocusable = panelRef.current?.querySelector(FOCUSABLE_SELECTOR);
@@ -425,6 +432,7 @@ function MobileSidebar(t0) {
 				body.style.left = previousBodyStyles.left;
 				body.style.right = previousBodyStyles.right;
 				body.style.overflow = previousBodyStyles.overflow;
+				body.style.paddingRight = previousBodyStyles.paddingRight;
 				window.scrollTo(0, scrollY);
 				restoreTriggerFocus();
 			};
@@ -447,6 +455,9 @@ function MobileSidebar(t0) {
 	let t5;
 	if ($[7] !== setOpenMobile) {
 		t5 = (event) => {
+			if (event.defaultPrevented || !panelRef.current?.contains(event.target)) {
+				return;
+			}
 			if (event.key === "Escape") {
 				event.preventDefault();
 				setOpenMobile(false);

package/dist/components/skeleton.d.ts

@@ -1,8 +1,22 @@
+import type { ComponentProps } from "react";
+export type SkeletonProps = ComponentProps<"div"> & {
+    /** Draws Arc's composed placeholder with this many text lines, from 1 to 6. */
+    lines?: number;
+    /** Adds a round avatar block before the lines of the composed placeholder. */
+    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.
+     */
+    loading?: boolean;
+};
 /**
- * Placeholder with a soft shine that sweeps across it while content loads.
- * The shine rests outside the box, so reduced motion shows a plain muted block.
- * @param props - Native div properties and optional consumer overrides.
- * @returns The placeholder element with its loading animation.
+ * 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.
  */
-declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function Skeleton({ lines, avatar, label, loading, className, children, ...props }: SkeletonProps): import("react").JSX.Element;
 export { Skeleton };