beez-ui 0.11.0 → 2.0.0

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 {

package/dist/components/file-upload.js

@@ -11,7 +11,7 @@ import { cn } from "../lib/utils.js";
 import { classifyFiles } from "../lib/file-acceptance.js";
 import { formatFileSize } from "../lib/format-file-size.js";
 import { AnimatedListItem } from "./animated-list-item.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const COMPLETE_PROGRESS = 100;
 const FILE_UPLOAD_DROP_ZONE_DEFAULT_LABELS = {
@@ -236,8 +236,8 @@ export function FileUploadDropZone(t0) {
 	}
 	let t22;
 	if ($[38] !== isDisabled || $[39] !== resolvedLabels.uploadAction || $[40] !== t20 || $[41] !== t21) {
-		t22 = /* @__PURE__ */ _jsxs(Button, {
-			className: "h-auto p-0 font-semibold",
+		t22 = /* @__PURE__ */ _jsxs(ControlButton, {
+			className: "h-auto p-0 font-medium",
 			disabled: isDisabled,
 			type: "button",
 			variant: "link",
@@ -575,7 +575,7 @@ export function FileUploadItem(t0) {
 	}
 	let t20;
 	if ($[45] !== isDeleteDisabled || $[46] !== name || $[47] !== onDelete || $[48] !== resolvedLabels.delete) {
-		t20 = onDelete ? /* @__PURE__ */ _jsx(Button, {
+		t20 = onDelete ? /* @__PURE__ */ _jsx(ControlButton, {
 			"aria-label": `${resolvedLabels.delete} ${name}`,
 			className: "-mt-2 -mr-2 self-start text-muted-foreground",
 			disabled: isDeleteDisabled,
@@ -607,7 +607,7 @@ export function FileUploadItem(t0) {
 	}
 	let t22;
 	if ($[53] !== clampedProgress || $[54] !== failed || $[55] !== isFillVariant || $[56] !== onRetry || $[57] !== progressBarProps || $[58] !== resolvedLabels.retry) {
-		t22 = failed ? onRetry ? /* @__PURE__ */ _jsx(Button, {
+		t22 = failed ? onRetry ? /* @__PURE__ */ _jsx(ControlButton, {
 			className: "mt-1.5 h-auto p-0 text-destructive",
 			size: "sm",
 			type: "button",

package/dist/components/filter-presets-bar.js

@@ -7,7 +7,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useId, useState } from "react";
 import { Bookmark, Pencil, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { FilterQueryBar } from "./filter-query-bar.js";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
@@ -143,7 +143,7 @@ export function FilterPresetSaveButton(t0) {
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(PopoverTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ _jsx(Button, {
+				children: /* @__PURE__ */ _jsx(ControlButton, {
 					"data-slot": "filter-preset-save-button",
 					"aria-label": resolvedLabels.saveAction,
 					className,
@@ -251,7 +251,7 @@ export function FilterPresetSaveButton(t0) {
 	}
 	let t14;
 	if ($[33] !== handleConfirmSave || $[34] !== resolvedLabels.saveConfirm || $[35] !== resolvedLabels.saveConfirmAriaLabel) {
-		t14 = /* @__PURE__ */ _jsx(Button, {
+		t14 = /* @__PURE__ */ _jsx(ControlButton, {
 			"aria-label": resolvedLabels.saveConfirmAriaLabel,
 			onClick: handleConfirmSave,
 			size: "sm",
@@ -450,7 +450,7 @@ export function FilterPresetsBar(t0) {
 								role: "alert",
 								children: editError
 							}) : null,
-							/* @__PURE__ */ _jsx(Button, {
+							/* @__PURE__ */ _jsx(ControlButton, {
 								"aria-label": resolvedLabels.editConfirmAriaLabel,
 								onClick: handleConfirmEdit,
 								size: "sm",
@@ -479,13 +479,13 @@ export function FilterPresetsBar(t0) {
 							children: resolvedLabels.deleteConfirmation(preset_1.name)
 						}), /* @__PURE__ */ _jsxs("div", {
 							className: "flex justify-end gap-2",
-							children: [/* @__PURE__ */ _jsx(Button, {
+							children: [/* @__PURE__ */ _jsx(ControlButton, {
 								onClick: () => setDeletingPresetName(null),
 								size: "sm",
 								type: "button",
 								variant: "outline",
 								children: resolvedLabels.cancel
-							}), /* @__PURE__ */ _jsx(Button, {
+							}), /* @__PURE__ */ _jsx(ControlButton, {
 								onClick: () => {
 									setDeletingPresetName(null);
 									onDeletePreset(preset_1.name);

package/dist/components/filter-query-bar.js

@@ -2,7 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Calendar, Check, CircleDot, CircleMinus, CircleSlash, Folder, Hash, List, Type, User, X } from "lucide-react";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
 import { GlideSlot } from "../motion/glide-slot.js";
@@ -708,7 +708,7 @@ export function FilterQueryBar(t0) {
 	}
 	let t31;
 	if ($[67] !== handleClear || $[68] !== value) {
-		t31 = value ? /* @__PURE__ */ _jsx(Button, {
+		t31 = value ? /* @__PURE__ */ _jsx(ControlButton, {
 			"aria-label": CLEAR_FILTER_ARIA_LABEL,
 			className: "active:-translate-y-0",
 			onClick: handleClear,

package/dist/components/input-group.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
@@ -9,7 +9,7 @@ declare function InputGroupAddon({ className, align, ...props }: React.Component
 declare const inputGroupButtonVariants: (props?: ({
     size?: "icon-sm" | "icon-xs" | "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof ControlButton>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;

package/dist/components/input-group.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -153,7 +153,7 @@ function InputGroupButton(t0) {
 	}
 	let t5;
 	if ($[9] !== props || $[10] !== size || $[11] !== t4 || $[12] !== type || $[13] !== variant) {
-		t5 = /* @__PURE__ */ _jsx(Button, {
+		t5 = /* @__PURE__ */ _jsx(ControlButton, {
 			type,
 			"data-size": size,
 			variant,

package/dist/components/pagination.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { type LinkProps } from "./link.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 /** Lists page links; the current page's highlight glides to the newly selected page. */
 declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function PaginationItem({ ...props }: React.ComponentProps<"li">): React.JSX.Element;
 export type PaginationLinkProps = {
     isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, "size"> & LinkProps;
+} & Pick<React.ComponentProps<typeof ControlButton>, "size"> & LinkProps;
 declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
 declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
     text?: string;

package/dist/components/pagination.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Link } from "./link.js";
 import { GlideSlot } from "../motion/glide-slot.js";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Pagination(t0) {
@@ -155,7 +155,7 @@ function PaginationLink(t0) {
 	}
 	let t6;
 	if ($[11] !== size || $[12] !== t2 || $[13] !== t3 || $[14] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(Button, {
+		t6 = /* @__PURE__ */ _jsx(ControlButton, {
 			asChild: true,
 			variant: t2,
 			size,

package/dist/components/reaction-button.js

@@ -6,7 +6,7 @@ import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js"
 import { cn } from "../lib/utils.js";
 import { MOTION_EASE, MOTION_TIMING } from "../motion/tokens.js";
 import { AnimatedCount } from "./animated-count.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Peak scale the icon reaches while popping into the active state. */
 const REACTION_ICON_POP_SCALE = 1.28;
@@ -95,7 +95,7 @@ export function ReactionButton(t0) {
 	}
 	let t10;
 	if ($[12] !== activeColorStyle || $[13] !== ariaLabel || $[14] !== isActive || $[15] !== isDisabled || $[16] !== onClick || $[17] !== t4 || $[18] !== t5 || $[19] !== t8 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ _jsxs(Button, {
+		t10 = /* @__PURE__ */ _jsxs(ControlButton, {
 			"data-slot": "reaction-button",
 			"data-active": t4,
 			"aria-label": ariaLabel,

package/dist/components/rich-link-editor.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../lib/utils.js";
 import { RICH_LINK_POPOVER_MODE, RICH_TEXT_EDITOR_KEY, RICH_TEXT_SEGMENT_TYPE } from "../lib/rich-text/link-markdown-constants.js";
-import { Button } from "./button.js";
+import { ControlButton } from "./control-button.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BUTTON_TYPE = "button";
@@ -22,11 +22,11 @@ const LINK_REL = "noreferrer";
 const RICH_LINK_EDITOR_CLASS_NAMES = {
 	editor: "min-h-28 w-full cursor-text border-0 bg-background p-0 leading-[1.65] whitespace-pre-wrap text-foreground [font:inherit] [overflow-wrap:anywhere] focus:outline-0 empty:before:pointer-events-none empty:before:text-muted-foreground/75 empty:before:content-[attr(data-placeholder)] max-md:text-base",
 	editorInvalid: "rounded-[0.35rem] shadow-[inset_0_-2px_0_var(--destructive)] outline-0",
-	editorLink: "cursor-pointer rounded-[0.2rem] font-bold text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+	editorLink: "cursor-pointer rounded-[0.2rem] font-medium text-primary underline decoration-[0.08em] underline-offset-[0.18em] transition-colors hover:text-[color-mix(in_oklab,var(--primary)_72%,var(--foreground))] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
 	popover: "gap-3",
 	editForm: "grid gap-3 animate-in fade-in slide-in-from-bottom-1 duration-200",
 	actions: "flex flex-wrap items-center gap-2",
-	label: "grid gap-[0.35rem] text-[0.85rem] font-bold text-muted-foreground",
+	label: "grid gap-[0.35rem] text-[0.85rem] font-medium text-muted-foreground",
 	input: "min-h-8 rounded-lg border border-border/80 bg-background px-[0.65rem] font-normal text-foreground outline-0 transition-[border-color,box-shadow] [font:inherit] focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--ring)_35%,transparent)] aria-invalid:border-destructive aria-invalid:focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--destructive)_25%,transparent)] max-md:text-base"
 };
 const RICH_LINK_EDITOR_DEFAULT_COPY = {
@@ -176,14 +176,14 @@ export function RichLinkEditor(t0) {
 				onPaste: _temp5,
 				children: popoverMode === RICH_LINK_POPOVER_MODE.actions ? /* @__PURE__ */ _jsxs("div", {
 					className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
-					children: [/* @__PURE__ */ _jsx(Button, {
+					children: [/* @__PURE__ */ _jsx(ControlButton, {
 						onClick: () => {
 							setPopoverMode(RICH_LINK_POPOVER_MODE.edit);
 						},
 						type: BUTTON_TYPE,
 						variant: BUTTON_VARIANT.ghost,
 						children: copy.editAction
-					}), /* @__PURE__ */ _jsx(Button, {
+					}), /* @__PURE__ */ _jsx(ControlButton, {
 						onClick: () => {
 							removeLink(segment);
 						},
@@ -221,7 +221,7 @@ export function RichLinkEditor(t0) {
 						}),
 						/* @__PURE__ */ _jsxs("div", {
 							className: RICH_LINK_EDITOR_CLASS_NAMES.actions,
-							children: [/* @__PURE__ */ _jsx(Button, {
+							children: [/* @__PURE__ */ _jsx(ControlButton, {
 								disabled: !isLinkEditValid,
 								onClick: () => {
 									if (activeLink) {
@@ -230,7 +230,7 @@ export function RichLinkEditor(t0) {
 								},
 								type: BUTTON_TYPE,
 								children: copy.editSave
-							}), /* @__PURE__ */ _jsx(Button, {
+							}), /* @__PURE__ */ _jsx(ControlButton, {
 								onClick: closeLinkPopover,
 								type: BUTTON_TYPE,
 								variant: BUTTON_VARIANT.outline,

package/dist/components/rich-text-content.js

@@ -16,7 +16,7 @@ export function RichTextContent({ content, onLinkClick, linkClassName }) {
 	const segments = parseRichTextSegments(content);
 	return /* @__PURE__ */ _jsx(_Fragment, { children: segments.map((segment, segmentIndex) => segment.type === RICH_TEXT_SEGMENT_TYPE.link ? /* @__PURE__ */ _jsx("a", {
 		"data-slot": "rich-text-link",
-		className: cn(RICH_TEXT_LINK_CLASS_NAME, "font-bold decoration-[0.08em]", linkClassName),
+		className: cn(RICH_TEXT_LINK_CLASS_NAME, "font-medium decoration-[0.08em]", linkClassName),
 		href: segment.url,
 		onClick: onLinkClick,
 		rel: LINK_REL,

package/dist/components/sheet.js

@@ -5,7 +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 { 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 Sheet(t0) {
@@ -209,7 +209,7 @@ function SheetContent(t0) {
 			asChild: true,
 			children: /* @__PURE__ */ _jsx(MotionSlot, {
 				kind: "delayed-pop",
-				children: /* @__PURE__ */ _jsxs(Button, {
+				children: /* @__PURE__ */ _jsxs(ControlButton, {
 					variant: "ghost",
 					className: "absolute top-4 right-4",
 					size: "icon-sm",

package/dist/components/sidebar.js

@@ -261,7 +261,7 @@ function SidebarProvider(t0) {
 	if ($[29] !== toggleSidebar) {
 		t8 = () => {
 			const handleShortcut = (event) => {
-				if (event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				if (typeof event.key === "string" && event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
 					event.preventDefault();
 					toggleSidebar();
 				}
@@ -1268,7 +1268,7 @@ function SidebarBrandButton(t0) {
 	const t3 = collapsed ? textLabel : undefined;
 	let t4;
 	if ($[7] !== className) {
-		t4 = cn("flex min-h-10 w-full min-w-0 items-center gap-3 rounded-xl px-2 py-1.5 text-left text-sm font-semibold text-sidebar-foreground outline-none transition-colors", "hover:bg-sidebar-accent/70 focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent/70", "disabled:cursor-not-allowed disabled:opacity-40", className);
+		t4 = cn("flex min-h-10 w-full min-w-0 items-center gap-3 rounded-xl px-2 py-1.5 text-left text-sm font-medium text-sidebar-foreground outline-none transition-colors", "hover:bg-sidebar-accent/70 focus-visible:bg-sidebar-accent/70 focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[state=open]:bg-sidebar-accent/70", "disabled:cursor-not-allowed disabled:opacity-40", className);
 		$[7] = className;
 		$[8] = t4;
 	} else {
@@ -1382,7 +1382,7 @@ function SidebarGroupLabel(t0) {
 	const t1 = collapsed ? "opacity-0" : "opacity-100";
 	let t2;
 	if ($[3] !== className || $[4] !== t1) {
-		t2 = cn("mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium tracking-[0.14em] text-sidebar-foreground/70 uppercase transition-opacity", t1, className);
+		t2 = cn("mb-1 h-7 overflow-hidden px-2 text-xs font-medium text-sidebar-foreground/70 transition-opacity", t1, className);
 		$[3] = className;
 		$[4] = t1;
 		$[5] = t2;

package/dist/components/typing-animation.js

@@ -332,7 +332,7 @@ export function TypingAnimation(t0) {
 		t20 = $[52];
 	}
 	const getCursorChar = t20;
-	const t21 = Component === "h1" && "text-3xl font-bold leading-tight md:text-4xl";
+	const t21 = Component === "h1" && "text-3xl font-medium leading-tight md:text-4xl";
 	const t22 = Component === "span" && "inline-block";
 	let t23;
 	if ($[53] !== className || $[54] !== t21 || $[55] !== t22) {