beez-ui 0.11.0 → 2.0.0

package/dist/components/button-label.js

@@ -0,0 +1,322 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Label morph and loading spinner adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli,
+* MIT License. The full license text ships in THIRD_PARTY_NOTICES.md. Internal to Button.
+*/
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue } from "motion/react";
+import { BUTTON_MORPH_WINDOW_MS } from "../constants/button.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const restState = {
+	opacity: 1,
+	y: 0,
+	scale: 1,
+	filter: "blur(0px)"
+};
+/** Outgoing labels and icons leave faster than they enter. */
+const exitTransition = {
+	duration: ARC_DURATION.fast,
+	ease: [...ARC_EASE.standard]
+};
+/** Text rises out of a soft blur; the outgoing label lifts away a little faster. */
+const textEnter = {
+	opacity: 0,
+	y: 4,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const textExit = {
+	opacity: 0,
+	y: -3,
+	filter: `blur(${ARC_BLUR.soft}px)`,
+	transition: exitTransition
+};
+const iconEnter = {
+	opacity: 0,
+	scale: .6,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const iconExit = {
+	...iconEnter,
+	transition: exitTransition
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+const reducedEnter = {
+	...restState,
+	opacity: 0
+};
+const reducedExit = {
+	opacity: 0,
+	transition: reducedTransition
+};
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+const iconTransition = {
+	...ARC_SPRING_SNAPPY,
+	opacity: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	},
+	filter: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.enter]
+	}
+};
+const textTransition = {
+	duration: ARC_DURATION.standard,
+	ease: [...ARC_EASE.enter]
+};
+/** Matches markup tags inside a label key so icon-only labels can be detected. */
+const LABEL_KEY_TAG_PATTERN = /<[^>]*>/g;
+/** Detects visible text left in a label key. */
+const VISIBLE_TEXT_PATTERN = /\S/;
+/** Builds a key from text and element names, so a new label crossfades while prop-only updates stay in place. */
+function getLabelKey(node) {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") return String(node);
+	if (Array.isArray(node)) return node.map(getLabelKey).join("");
+	if (!isValidElement(node)) return "";
+	const elementType = node.type;
+	const elementName = typeof elementType === "string" ? elementType : elementType?.displayName ?? elementType?.name ?? "";
+	return `<${elementName}>${getLabelKey(node.props.children)}`;
+}
+/**
+* Springs the label slot to the natural width of an incoming label, so a new label never snaps the
+* button's size. Other resizes jump straight to the new width.
+*/
+function useMorphWidth(contentRef, labelKey, reduceMotion) {
+	const $ = _c(8);
+	const width = useMotionValue("auto");
+	const lastLabelKey = useRef(labelKey);
+	const morphDeadline = useRef(0);
+	let t0;
+	let t1;
+	if ($[0] !== labelKey) {
+		t0 = () => {
+			if (lastLabelKey.current === labelKey) {
+				return;
+			}
+			lastLabelKey.current = labelKey;
+			morphDeadline.current = performance.now() + BUTTON_MORPH_WINDOW_MS;
+		};
+		t1 = [labelKey];
+		$[0] = labelKey;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[3] !== contentRef || $[4] !== reduceMotion || $[5] !== width) {
+		t2 = () => {
+			const content = contentRef.current;
+			const slot = content?.parentElement;
+			if (!content || !slot || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			let hasMeasured = false;
+			const observer = new ResizeObserver((t4) => {
+				const [entry] = t4;
+				if (!entry) {
+					return;
+				}
+				const nextWidth = entry.contentRect.width;
+				const shouldJump = !nextWidth || !hasMeasured || reduceMotion || performance.now() > morphDeadline.current;
+				if (shouldJump) {
+					hasMeasured = nextWidth > 0;
+					width.jump(nextWidth || "auto");
+					delete slot.dataset.morphing;
+					return;
+				}
+				slot.dataset.morphing = "";
+				animate(width, nextWidth, {
+					...ARC_SPRING_MORPH,
+					onComplete: () => {
+						delete slot.dataset.morphing;
+					}
+				});
+			});
+			observer.observe(content);
+			return () => observer.disconnect();
+		};
+		t3 = [
+			contentRef,
+			reduceMotion,
+			width
+		];
+		$[3] = contentRef;
+		$[4] = reduceMotion;
+		$[5] = width;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	return width;
+}
+/** One generation of the label; the outgoing one is hidden from assistive tech while it leaves. */
+function LabelPhase(t0) {
+	const $ = _c(7);
+	const { children, isIcon, reduceMotion, ref } = t0;
+	const isPresent = useIsPresent();
+	const t1 = isPresent ? undefined : true;
+	const t2 = reduceMotion ? reducedEnter : isIcon ? iconEnter : textEnter;
+	const t3 = reduceMotion ? reducedExit : isIcon ? iconExit : textExit;
+	const t4 = reduceMotion ? reducedTransition : isIcon ? iconTransition : textTransition;
+	let t5;
+	if ($[0] !== children || $[1] !== ref || $[2] !== t1 || $[3] !== t2 || $[4] !== t3 || $[5] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(motion.span, {
+			ref,
+			className: "inline-flex items-center justify-center gap-[inherit] whitespace-nowrap",
+			"aria-hidden": t1,
+			initial: t2,
+			animate: restState,
+			exit: t3,
+			transition: t4,
+			children
+		});
+		$[0] = children;
+		$[1] = ref;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		t5 = $[6];
+	}
+	return t5;
+}
+/** Button content: a spinner while loading and a label whose width springs when it changes. */
+export function ButtonLabel(t0) {
+	const $ = _c(25);
+	const { children, loading, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== children) {
+		t1 = getLabelKey(children);
+		$[0] = children;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const labelKey = t1;
+	const width = useMorphWidth(contentRef, labelKey, reduceMotion);
+	let t2;
+	if ($[2] !== loading || $[3] !== reduceMotion) {
+		t2 = loading ? /* @__PURE__ */ _jsx(motion.span, {
+			className: "absolute top-1/2 left-1/2 -m-2 grid size-4",
+			"aria-hidden": "true",
+			initial: reduceMotion ? { opacity: 0 } : {
+				opacity: 0,
+				scale: .6
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: reduceMotion ? reducedExit : {
+				...iconExit,
+				scale: .8
+			},
+			transition: reduceMotion ? reducedTransition : iconTransition,
+			children: /* @__PURE__ */ _jsx("span", { className: "animate-spin rounded-full border-[1.5px] border-current border-r-transparent motion-reduce:animate-none" })
+		}, "loader") : null;
+		$[2] = loading;
+		$[3] = reduceMotion;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t2
+		});
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	const t4 = loading && "opacity-0";
+	let t5;
+	if ($[7] !== t4) {
+		t5 = cn("inline-flex min-w-0 items-center justify-center gap-[inherit] transition-opacity duration-150 data-morphing:[clip-path:inset(-50%_calc(var(--spacing)*-3))]", t4);
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== width) {
+		t6 = { width };
+		$[9] = width;
+		$[10] = t6;
+	} else {
+		t6 = $[10];
+	}
+	let t7;
+	if ($[11] !== labelKey) {
+		t7 = VISIBLE_TEXT_PATTERN.test(labelKey.replace(LABEL_KEY_TAG_PATTERN, ""));
+		$[11] = labelKey;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	const t8 = !t7;
+	let t9;
+	if ($[13] !== children || $[14] !== labelKey || $[15] !== reduceMotion || $[16] !== t8) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center gap-[inherit]",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: /* @__PURE__ */ _jsx(LabelPhase, {
+					isIcon: t8,
+					reduceMotion,
+					children
+				}, labelKey)
+			})
+		});
+		$[13] = children;
+		$[14] = labelKey;
+		$[15] = reduceMotion;
+		$[16] = t8;
+		$[17] = t9;
+	} else {
+		t9 = $[17];
+	}
+	let t10;
+	if ($[18] !== t5 || $[19] !== t6 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "button-label",
+			className: t5,
+			style: t6,
+			children: t9
+		});
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t10;
+	} else {
+		t10 = $[21];
+	}
+	let t11;
+	if ($[22] !== t10 || $[23] !== t3) {
+		t11 = /* @__PURE__ */ _jsxs(_Fragment, { children: [t3, t10] });
+		$[22] = t10;
+		$[23] = t3;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	return t11;
+}

package/dist/components/button.d.ts

@@ -1,10 +1,23 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
-    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): import("react").JSX.Element;
-export { Button, buttonVariants };
+/**
+ * Arc's Button (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its variants, sizes, tokens and motion,
+ * with width-aware press feedback, a label that springs to its new width and a loading spinner. It renders a native
+ * button; style links as links instead. Composite components that need icon sizes use the internal `ControlButton`.
+ */
+import type { ComponentProps } from "react";
+/** Visual weight, as in Arc: one primary action per surface. */
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+/** Height and padding, from Arc's control heights. */
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonProps = ComponentProps<"button"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Shows a spinner, sets `aria-busy` and swallows clicks while keeping keyboard focus. */
+    loading?: boolean;
+};
+/**
+ * A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
+ * @param props - Variant, size, loading state and native button attributes, including `ref`.
+ * @returns The native button.
+ */
+declare function Button({ className, variant, size, loading, type, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export { Button };

package/dist/components/button.js

@@ -1,98 +1,145 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
-import { Slot } from "radix-ui";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { useIsPresent } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
+import { useArcPress } from "../motion/arc-press.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
+import { ButtonLabel } from "./button-label.js";
+import { LEAVING_ATTRIBUTES, LOADING_INERT_HANDLERS } from "./button-interaction.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 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", {
+/**
+* Arc's button recipe on its tokens. Press scale is driven by Motion alone, so `transform` never gets a CSS
+* transition, and anchors of floating layers never scale because Radix measures them on pointerdown. Keyboard focus
+* uses the foundation's shared outline; pointer focus draws no ring.
+*/
+const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-(--radius-control) border border-transparent px-4 font-sans text-sm leading-(--leading-body) font-medium whitespace-nowrap select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-(--duration-fast) ease-(--ease-standard) disabled:cursor-not-allowed disabled:opacity-[.52] aria-busy:cursor-progress motion-reduce:transition-none [&:is([aria-haspopup]:not([aria-haspopup=false]),[data-state],[role=combobox])]:transform-none! [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/80",
-			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-			link: "text-primary underline-offset-4 hover:underline"
+			primary: "border-foreground bg-foreground text-background hover-fine:not-disabled:opacity-[.91] hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:opacity-[.84]",
+			secondary: "border-border bg-surface text-foreground hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:shadow-(--shadow-resting) active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-text-muted disabled:opacity-100",
+			ghost: "bg-transparent text-text-secondary hover-fine:not-disabled:bg-surface-muted hover-fine:not-disabled:text-foreground active:not-disabled:bg-surface-muted active:not-disabled:text-foreground disabled:text-text-muted disabled:opacity-100",
+			danger: "border-border bg-surface text-danger hover-fine:not-disabled:border-danger hover-fine:not-disabled:bg-surface-muted active:not-disabled:border-danger active:not-disabled:bg-surface-muted disabled:bg-surface-muted disabled:text-[color-mix(in_oklab,var(--danger)_55%,var(--surface-muted))] disabled:opacity-100"
 		},
 		size: {
-			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-			icon: "size-8",
-			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-			"icon-lg": "size-9"
+			sm: "min-h-(--control-height-sm) px-3",
+			md: "min-h-(--control-height-md)",
+			lg: "min-h-(--control-height-lg) px-5"
 		}
 	},
 	defaultVariants: {
-		variant: "default",
-		size: "default"
+		variant: "primary",
+		size: "md"
 	}
 });
+/**
+* A single action on a page, form or dialog. Defaults to `type="button"`, so it only submits a form when asked to.
+* @param props - Variant, size, loading state and native button attributes, including `ref`.
+* @returns The native button.
+*/
 function Button(t0) {
-	const $ = _c(16);
+	const $ = _c(29);
+	let children;
 	let className;
 	let props;
+	let ref;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({className, variant: t1, size: t2, asChild: t3, ...props} = t0);
+		({className, variant: t1, size: t2, loading: t3, type: t4, children, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
 	}
-	const variant = t1 === undefined ? "default" : t1;
-	const size = t2 === undefined ? "default" : t2;
-	const asChild = t3 === undefined ? false : t3;
-	const Comp = asChild ? Slot.Root : ButtonPrimitive;
-	let t4;
-	if ($[6] !== className || $[7] !== size || $[8] !== variant) {
-		t4 = cn(buttonVariants({
+	const variant = t1 === undefined ? "primary" : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const loading = t3 === undefined ? false : t3;
+	const type = t4 === undefined ? "button" : t4;
+	const reduceMotion = usePrefersReducedMotion();
+	const isPresent = useIsPresent();
+	const [element, attach] = useAttachedElement(ref);
+	useArcPress(element, !reduceMotion);
+	let t5;
+	if ($[9] !== className || $[10] !== size || $[11] !== variant) {
+		t5 = cn(buttonVariants({
 			variant,
 			size,
 			className
 		}));
-		$[6] = className;
-		$[7] = size;
-		$[8] = variant;
-		$[9] = t4;
+		$[9] = className;
+		$[10] = size;
+		$[11] = variant;
+		$[12] = t5;
 	} else {
-		t4 = $[9];
+		t5 = $[12];
 	}
-	let t5;
-	if ($[10] !== Comp || $[11] !== props || $[12] !== size || $[13] !== t4 || $[14] !== variant) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "press",
-			children: /* @__PURE__ */ _jsx(Comp, {
-				"data-slot": "button",
-				"data-variant": variant,
-				"data-size": size,
-				className: t4,
-				...props
-			})
+	const t6 = loading || undefined;
+	const t7 = loading || props["aria-disabled"] || undefined;
+	const t8 = loading ? LOADING_INERT_HANDLERS : undefined;
+	const t9 = isPresent ? undefined : LEAVING_ATTRIBUTES;
+	let t10;
+	if ($[13] !== children || $[14] !== loading || $[15] !== reduceMotion) {
+		t10 = /* @__PURE__ */ _jsx(ButtonLabel, {
+			loading,
+			reduceMotion,
+			children
+		});
+		$[13] = children;
+		$[14] = loading;
+		$[15] = reduceMotion;
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== attach || $[18] !== props || $[19] !== size || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 || $[26] !== type || $[27] !== variant) {
+		t11 = /* @__PURE__ */ _jsx("button", {
+			ref: attach,
+			type,
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t5,
+			"aria-busy": t6,
+			...props,
+			"aria-disabled": t7,
+			...t8,
+			...t9,
+			children: t10
 		});
-		$[10] = Comp;
-		$[11] = props;
-		$[12] = size;
-		$[13] = t4;
-		$[14] = variant;
-		$[15] = t5;
+		$[17] = attach;
+		$[18] = props;
+		$[19] = size;
+		$[20] = t10;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = type;
+		$[27] = variant;
+		$[28] = t11;
 	} else {
-		t5 = $[15];
+		t11 = $[28];
 	}
-	return t5;
+	return t11;
 }
-export { Button, buttonVariants };
+export { Button };

package/dist/components/calendar.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { DayPicker, type DayButton, type Locale } from "react-day-picker";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    buttonVariant?: React.ComponentProps<typeof ControlButton>["variant"];
 }): React.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
     locale?: Partial<Locale>;

package/dist/components/calendar.js

@@ -7,7 +7,7 @@ import { animate, frame } from "motion/react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { MOTION_EASE, MOTION_MONTH_DISTANCE, MOTION_TIMING } from "../motion/tokens.js";
 import { cn } from "../lib/utils.js";
-import { Button, buttonVariants } from "./button.js";
+import { ControlButton, controlButtonVariants } from "./control-button.js";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Calendar(t0) {
@@ -75,8 +75,8 @@ function Calendar(t0) {
 	const t9 = cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months);
 	const t10 = cn("flex w-full flex-col gap-4", defaultClassNames.month);
 	const t11 = cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav);
-	const t12 = cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous);
-	const t13 = cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next);
+	const t12 = cn(controlButtonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous);
+	const t13 = cn(controlButtonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next);
 	const t14 = cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption);
 	const t15 = cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns);
 	const t16 = cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root);
@@ -390,7 +390,7 @@ function CalendarDayButton(t0) {
 		t2 = $[8];
 	}
 	React.useEffect(t1, t2);
-	const T0 = Button;
+	const T0 = ControlButton;
 	const t3 = "ghost";
 	const t4 = "icon";
 	let t5;

package/dist/components/carousel.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -23,6 +23,6 @@ declare function useCarousel(): CarouselContextProps;
 declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
 declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof ControlButton>): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof ControlButton>): React.JSX.Element;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, useCarousel, };

package/dist/components/carousel.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Arrow keys that move to the previous and next slide along each axis. */
@@ -389,7 +389,7 @@ function CarouselPrevious(t0) {
 	}
 	let t8;
 	if ($[10] !== props || $[11] !== scrollPrev || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
-		t8 = /* @__PURE__ */ _jsxs(Button, {
+		t8 = /* @__PURE__ */ _jsxs(ControlButton, {
 			"data-slot": "carousel-previous",
 			variant,
 			size,
@@ -460,7 +460,7 @@ function CarouselNext(t0) {
 	}
 	let t8;
 	if ($[10] !== props || $[11] !== scrollNext || $[12] !== size || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
-		t8 = /* @__PURE__ */ _jsxs(Button, {
+		t8 = /* @__PURE__ */ _jsxs(ControlButton, {
 			"data-slot": "carousel-next",
 			variant,
 			size,

package/dist/components/control-button.d.ts

@@ -0,0 +1,16 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Class recipe. Press scale is driven by Motion alone, so `transform` never gets a CSS transition,
+ * and anchors of floating layers never scale because Radix measures them on pointerdown.
+ */
+declare const controlButtonVariants: (props?: ({
+    variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ControlButton({ className, variant, size, asChild, loading, children, ref, ...props }: ButtonPrimitive.Props & VariantProps<typeof controlButtonVariants> & {
+    asChild?: boolean;
+    /** Shows a spinner, sets `aria-busy` and swallows clicks while keeping keyboard focus. */
+    loading?: boolean;
+}): import("react").JSX.Element;
+export { ControlButton, controlButtonVariants };