beez-ui 0.10.0 → 2.0.0

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 };

package/dist/components/control-button.js

@@ -0,0 +1,215 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Internal compact control for composite components (dialog close buttons, carousel and pagination arrows, calendar
+* cells, table and editor actions) that need icon sizes, a link variant or `asChild`, which the public Arc `Button`
+* leaves out. Keeps Arc's press feedback and label motion (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md).
+* Not exported from the package: consumers use `Button`.
+*/
+import { Children, cloneElement, isValidElement } from "react";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+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";
+/**
+* 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.
+*/
+const controlButtonVariants = cva("group/button relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap outline-none select-none [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,opacity,box-shadow] duration-150 ease-out focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-progress aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 motion-reduce:transition-none dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&: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: "border-foreground bg-foreground text-background hover:not-disabled:opacity-90 hover:not-disabled:shadow-xs active:not-disabled:opacity-85",
+			outline: "border-border bg-background text-foreground hover:not-disabled:bg-muted hover:not-disabled:shadow-xs active:not-disabled:bg-muted aria-expanded:bg-muted disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+			secondary: "bg-muted text-foreground hover:not-disabled:bg-muted/70 active:not-disabled:bg-muted/70 aria-expanded:bg-muted/70",
+			ghost: "text-muted-foreground hover:not-disabled:bg-muted hover:not-disabled:text-foreground active:not-disabled:bg-muted active:not-disabled:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground disabled:text-muted-foreground/60 disabled:opacity-100",
+			destructive: "border-border bg-background text-destructive hover:not-disabled:border-destructive hover:not-disabled:bg-muted active:not-disabled:border-destructive active:not-disabled:bg-muted focus-visible:border-destructive/40 focus-visible:ring-destructive/20 disabled:bg-muted disabled:text-destructive/55 disabled:opacity-100 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		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"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* Wraps the content of an `asChild` element in the Arc label, so links morph and spin like buttons.
+* While loading, the child's own activation handlers are dropped too, because Slot runs them before ours.
+* Children given as render functions keep their content untouched.
+*/
+function withArcLabel(children, loading, renderLabel) {
+	const child = Children.only(children);
+	if (!isValidElement(child)) return child;
+	const content = child.props.children;
+	const overrides = loading ? LOADING_INERT_HANDLERS : undefined;
+	const label = typeof content === "function" ? content : renderLabel(content);
+	return cloneElement(child, overrides, label);
+}
+function ControlButton(t0) {
+	const $ = _c(40);
+	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, loading: t4, children, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		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 loading = t4 === undefined ? false : t4;
+	const reduceMotion = usePrefersReducedMotion();
+	const isPresent = useIsPresent();
+	const [element, attach] = useAttachedElement(ref);
+	useArcPress(element, !reduceMotion && variant !== "link");
+	let t5;
+	if ($[9] !== loading || $[10] !== reduceMotion) {
+		t5 = (content) => /* @__PURE__ */ _jsx(ButtonLabel, {
+			loading,
+			reduceMotion,
+			children: content
+		});
+		$[9] = loading;
+		$[10] = reduceMotion;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	const renderLabel = t5;
+	let t6;
+	if ($[12] !== className || $[13] !== size || $[14] !== variant) {
+		t6 = cn(controlButtonVariants({
+			variant,
+			size,
+			className
+		}));
+		$[12] = className;
+		$[13] = size;
+		$[14] = variant;
+		$[15] = t6;
+	} else {
+		t6 = $[15];
+	}
+	const t7 = loading || undefined;
+	const t8 = loading || props["aria-disabled"] || undefined;
+	const t9 = loading ? LOADING_INERT_HANDLERS : undefined;
+	const t10 = isPresent ? undefined : LEAVING_ATTRIBUTES;
+	let t11;
+	if ($[16] !== props || $[17] !== size || $[18] !== t10 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== t9 || $[23] !== variant) {
+		t11 = {
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t6,
+			"aria-busy": t7,
+			...props,
+			"aria-disabled": t8,
+			...t9,
+			...t10
+		};
+		$[16] = props;
+		$[17] = size;
+		$[18] = t10;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+		$[23] = variant;
+		$[24] = t11;
+	} else {
+		t11 = $[24];
+	}
+	const sharedProps = t11;
+	if (asChild) {
+		const t12 = sharedProps;
+		let t13;
+		if ($[25] !== children || $[26] !== loading || $[27] !== renderLabel) {
+			t13 = withArcLabel(children, loading, renderLabel);
+			$[25] = children;
+			$[26] = loading;
+			$[27] = renderLabel;
+			$[28] = t13;
+		} else {
+			t13 = $[28];
+		}
+		let t14;
+		if ($[29] !== attach || $[30] !== t12 || $[31] !== t13) {
+			t14 = /* @__PURE__ */ _jsx(Slot.Root, {
+				ref: attach,
+				...t12,
+				children: t13
+			});
+			$[29] = attach;
+			$[30] = t12;
+			$[31] = t13;
+			$[32] = t14;
+		} else {
+			t14 = $[32];
+		}
+		return t14;
+	}
+	const t12 = sharedProps;
+	let t13;
+	if ($[33] !== children || $[34] !== renderLabel) {
+		t13 = renderLabel(children);
+		$[33] = children;
+		$[34] = renderLabel;
+		$[35] = t13;
+	} else {
+		t13 = $[35];
+	}
+	let t14;
+	if ($[36] !== attach || $[37] !== t12 || $[38] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(ButtonPrimitive, {
+			ref: attach,
+			...t12,
+			children: t13
+		});
+		$[36] = attach;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+	} else {
+		t14 = $[39];
+	}
+	return t14;
+}
+export { ControlButton, controlButtonVariants };

package/dist/components/data-table.js

@@ -5,7 +5,7 @@ import { CircleAlert, ChevronDown, ChevronRight, Ellipsis, Eraser, X } from "luc
 import { cn } from "../lib/utils.js";
 import { matchesColumnFilterValue, normalizeFilterToken } from "../lib/column-filter-value.js";
 import { MotionSlot } from "../motion/motion-slot.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { Badge } from "./badge.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
 import { parseFilterQuery, serializeFilterQuery } from "./filter-query-grammar.js";
@@ -649,7 +649,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 									value: resolvedFilterValue
 								}), /* @__PURE__ */ _jsxs("div", {
 									className: "absolute right-1 top-1/2 flex -translate-y-1/2 items-center gap-0.5",
-									children: [resolvedFilterValue ? /* @__PURE__ */ _jsx(Button, {
+									children: [resolvedFilterValue ? /* @__PURE__ */ _jsx(ControlButton, {
 										"aria-label": CLEAR_FILTER_ARIA_LABEL,
 										className: "active:-translate-y-0",
 										onClick: handleClearMainFilter,
@@ -657,7 +657,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 										type: "button",
 										variant: "ghost",
 										children: /* @__PURE__ */ _jsx(X, { "aria-hidden": "true" })
-									}) : null, showExcludeFilterToggle ? /* @__PURE__ */ _jsxs(Button, {
+									}) : null, showExcludeFilterToggle ? /* @__PURE__ */ _jsxs(ControlButton, {
 										"aria-expanded": isExcludeFilterInputVisible,
 										"aria-label": isExcludeFilterInputVisible ? HIDE_EXCLUDE_FILTERS_ARIA_LABEL : excludeFilterToggleLabel,
 										className: "relative",
@@ -707,7 +707,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 										placeholder: excludeFilterPlaceholder,
 										type: "text",
 										value: excludeFilterInputValue
-									}), /* @__PURE__ */ _jsx(Button, {
+									}), /* @__PURE__ */ _jsx(ControlButton, {
 										"aria-label": CLEAR_ALL_EXCLUSIONS_FROM_INPUT_ARIA_LABEL,
 										className: "shrink-0",
 										disabled: !hasActiveExcludeFilterValues,
@@ -748,7 +748,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 								children: [
 									/* @__PURE__ */ _jsx("span", { children: `${EXCLUDED_ROWS_SUMMARY_LABEL}:` }),
 									/* @__PURE__ */ _jsx("span", {
-										className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold",
+										className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-medium",
 										children: excludeFilterUniqueRowsCount
 									}),
 									/* @__PURE__ */ _jsx("button", {
@@ -771,7 +771,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 										/* @__PURE__ */ _jsx("span", { children: `− ${excludeFilterValue}` }),
 										excludedRowsCount != null ? /* @__PURE__ */ _jsx("span", {
 											"aria-label": `Filas excluidas por ${excludeFilterValue}: ${excludedRowsCount}`,
-											className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-semibold",
+											className: "inline-flex min-w-5 items-center justify-center rounded-full bg-destructive/20 px-1.5 text-[10px] leading-4 font-medium",
 											children: excludedRowsCount
 										}) : null,
 										/* @__PURE__ */ _jsx("button", {
@@ -795,7 +795,7 @@ export function DataTable({ columns, data, emptyMessage, toolbarActions, onVisib
 					className: "ml-auto flex flex-wrap items-center gap-2",
 					children: [toolbarActions, shouldShowColumnVisibilityToggle ? /* @__PURE__ */ _jsxs(DropdownMenu, { children: [/* @__PURE__ */ _jsx(DropdownMenuTrigger, {
 						asChild: true,
-						children: /* @__PURE__ */ _jsxs(Button, {
+						children: /* @__PURE__ */ _jsxs(ControlButton, {
 							"aria-label": columnVisibilityButtonLabel,
 							className: "relative aria-expanded:*:data-[slot=data-table-columns-chevron]:rotate-180",
 							type: "button",

package/dist/components/dialog.js

@@ -6,6 +6,7 @@ import { MotionSlot } from "../motion/motion-slot.js";
 import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { XIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dialog(t0) {
@@ -205,7 +206,7 @@ function DialogContent(t0) {
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "delayed-pop",
-				children: /* @__PURE__ */ _jsxs(Button, {
+				children: /* @__PURE__ */ _jsxs(ControlButton, {
 					variant: "ghost",
 					className: "absolute top-2 right-2",
 					size: "icon-sm",
@@ -333,7 +334,7 @@ function DialogFooter(t0) {
 		t3 = showCloseButton && /* @__PURE__ */ _jsx(DialogPrimitive.Close, {
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(Button, {
-				variant: "outline",
+				variant: "secondary",
 				children: "Cerrar"
 			})
 		});

package/dist/components/dropdown-menu.js

@@ -498,7 +498,7 @@ function DropdownMenuShortcut(t0) {
 	}
 	let t1;
 	if ($[3] !== className) {
-		t1 = cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className);
+		t1 = cn("ml-auto text-xs text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className);
 		$[3] = className;
 		$[4] = t1;
 	} else {