beez-ui 2.3.1 → 2.5.0

package/dist/components/split-button.js

@@ -0,0 +1,306 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's SplitButton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) built from beez-ui's `Button` and
+* `DropdownMenu`: a main action whose icon and label morph in place, joined to a menu of related actions. The menu
+* half never scales on press, so the menu opens from a still anchor.
+*/
+import { isValidElement, useRef } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { SPLIT_BUTTON_SIZE_BY_VARIANT } from "../constants/split-button.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_ICON_ENTER as iconEnter, ARC_ICON_EXIT as iconExit, ARC_ICON_TRANSITION as iconTransition, ARC_REDUCED_ENTER as reducedEnter, ARC_REDUCED_EXIT as reducedExit, ARC_REDUCED_TRANSITION as reducedTransition, ARC_SWAP_REST as restState } from "../motion/arc-swap.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { MorphText } from "./morph-text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Names an icon element, so swapping Copy for Check morphs while a re-render of the same icon stays still.
+* @param icon - Icon node.
+* @returns Element name, the text of a text node, or an empty string.
+*/
+function getIconKey(icon) {
+	if (!isValidElement(icon)) return icon == null || typeof icon === "boolean" ? "" : String(icon);
+	const elementType = icon.type;
+	return typeof elementType === "string" ? elementType : elementType?.displayName ?? elementType?.name ?? "icon";
+}
+/**
+* Visible content of the main action: the icon and the morphing label, inside a slot whose width follows on a
+* spring when either changes.
+* @param props - Label, icon and whether the user prefers reduced motion.
+* @returns Content hidden from assistive tech; the button names itself through `aria-label`.
+*/
+function SplitButtonMainContent(t0) {
+	const $ = _c(17);
+	const { label, icon, reduceMotion } = t0;
+	const contentRef = useRef(null);
+	let t1;
+	if ($[0] !== icon) {
+		t1 = getIconKey(icon);
+		$[0] = icon;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const iconKey = t1;
+	const width = useMorphWidth(contentRef, `${iconKey}|${label}`, reduceMotion);
+	let t2;
+	if ($[2] !== width) {
+		t2 = { width };
+		$[2] = width;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== icon || $[5] !== iconKey || $[6] !== reduceMotion) {
+		t3 = icon ? /* @__PURE__ */ _jsx("span", {
+			className: "inline-grid flex-none place-items-center",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "col-start-1 row-start-1 inline-flex items-center justify-center",
+					initial: reduceMotion ? reducedEnter : iconEnter,
+					animate: restState,
+					exit: reduceMotion ? reducedExit : iconExit,
+					transition: reduceMotion ? reducedTransition : iconTransition,
+					children: icon
+				}, iconKey)
+			})
+		}) : null;
+		$[4] = icon;
+		$[5] = iconKey;
+		$[6] = reduceMotion;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] !== label || $[9] !== reduceMotion) {
+		t4 = /* @__PURE__ */ _jsx(MorphText, {
+			text: label,
+			reduceMotion
+		});
+		$[8] = label;
+		$[9] = reduceMotion;
+		$[10] = t4;
+	} else {
+		t4 = $[10];
+	}
+	let t5;
+	if ($[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ _jsxs("span", {
+			ref: contentRef,
+			className: "inline-flex flex-none items-center gap-2 whitespace-nowrap",
+			children: [t3, t4]
+		});
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else {
+		t5 = $[13];
+	}
+	let t6;
+	if ($[14] !== t2 || $[15] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "split-button-label",
+			className: "inline-flex min-w-0 items-center data-morphing:[clip-path:inset(-50%_calc(var(--spacing)*-2))]",
+			style: t2,
+			"aria-hidden": "true",
+			children: t5
+		});
+		$[14] = t2;
+		$[15] = t5;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	return t6;
+}
+/**
+* A main action joined to a menu of related actions, such as Copy page with Copy as Markdown and Open in a new tab.
+* The main half announces label changes politely; the menu half opens a `DropdownMenu` aligned to its end.
+* @param props - Main action, its icon, the menu actions, the variant and accessible names.
+* @returns The joined pair of buttons and their menu.
+*/
+function SplitButton(t0) {
+	const $ = _c(39);
+	const { label, actions, onClick, disabled, icon, variant: t1, menuLabel, className } = t0;
+	const variant = t1 === undefined ? "primary" : t1;
+	const reduceMotion = usePrefersReducedMotion();
+	const size = SPLIT_BUTTON_SIZE_BY_VARIANT[variant];
+	let t2;
+	if ($[0] !== className) {
+		t2 = cn("inline-flex items-stretch", className);
+		$[0] = className;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== icon || $[3] !== label || $[4] !== reduceMotion) {
+		t3 = /* @__PURE__ */ _jsx(SplitButtonMainContent, {
+			label,
+			icon,
+			reduceMotion
+		});
+		$[2] = icon;
+		$[3] = label;
+		$[4] = reduceMotion;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== disabled || $[7] !== label || $[8] !== onClick || $[9] !== size || $[10] !== t3 || $[11] !== variant) {
+		t4 = /* @__PURE__ */ _jsx(Button, {
+			variant,
+			size,
+			"aria-label": label,
+			className: "rounded-r-none border-r-0",
+			disabled,
+			onClick,
+			children: t3
+		});
+		$[6] = disabled;
+		$[7] = label;
+		$[8] = onClick;
+		$[9] = size;
+		$[10] = t3;
+		$[11] = variant;
+		$[12] = t4;
+	} else {
+		t4 = $[12];
+	}
+	const t5 = menuLabel ?? `Más acciones de ${label}`;
+	const t6 = variant === "primary" ? "border-l-[color-mix(in_oklab,var(--background)_18%,var(--foreground))]" : "w-(--control-height-sm) border-l-border";
+	let t7;
+	if ($[13] !== t6) {
+		t7 = cn("w-(--control-height-md) rounded-l-none px-0 [&_svg]:transition-transform [&_svg]:duration-(--duration-fast) data-[state=open]:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none", t6);
+		$[13] = t6;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ _jsx(ChevronDown, {
+			strokeWidth: 1.75,
+			"aria-hidden": "true"
+		});
+		$[15] = t8;
+	} else {
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== size || $[17] !== t5 || $[18] !== t7 || $[19] !== variant) {
+		t9 = /* @__PURE__ */ _jsx(Button, {
+			variant,
+			size,
+			"aria-label": t5,
+			className: t7,
+			children: t8
+		});
+		$[16] = size;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = variant;
+		$[20] = t9;
+	} else {
+		t9 = $[20];
+	}
+	let t10;
+	if ($[21] !== disabled || $[22] !== t9) {
+		t10 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
+			disabled,
+			children: t9
+		});
+		$[21] = disabled;
+		$[22] = t9;
+		$[23] = t10;
+	} else {
+		t10 = $[23];
+	}
+	let t11;
+	if ($[24] !== label) {
+		t11 = /* @__PURE__ */ _jsx("span", {
+			className: "sr-only",
+			"aria-live": "polite",
+			children: label
+		});
+		$[24] = label;
+		$[25] = t11;
+	} else {
+		t11 = $[25];
+	}
+	let t12;
+	if ($[26] !== t10 || $[27] !== t11 || $[28] !== t2 || $[29] !== t4 || $[30] !== variant) {
+		t12 = /* @__PURE__ */ _jsxs("div", {
+			role: "group",
+			"data-slot": "split-button",
+			"data-variant": variant,
+			className: t2,
+			children: [
+				t4,
+				t10,
+				t11
+			]
+		});
+		$[26] = t10;
+		$[27] = t11;
+		$[28] = t2;
+		$[29] = t4;
+		$[30] = variant;
+		$[31] = t12;
+	} else {
+		t12 = $[31];
+	}
+	let t13;
+	if ($[32] !== actions) {
+		t13 = actions.map(_temp);
+		$[32] = actions;
+		$[33] = t13;
+	} else {
+		t13 = $[33];
+	}
+	let t14;
+	if ($[34] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			align: "end",
+			sideOffset: 4,
+			collisionPadding: 12,
+			loop: true,
+			children: t13
+		});
+		$[34] = t13;
+		$[35] = t14;
+	} else {
+		t14 = $[35];
+	}
+	let t15;
+	if ($[36] !== t12 || $[37] !== t14) {
+		t15 = /* @__PURE__ */ _jsxs(DropdownMenu, { children: [t12, t14] });
+		$[36] = t12;
+		$[37] = t14;
+		$[38] = t15;
+	} else {
+		t15 = $[38];
+	}
+	return t15;
+}
+function _temp(action) {
+	return /* @__PURE__ */ _jsxs(DropdownMenuItem, {
+		variant: action.destructive ? "destructive" : "default",
+		disabled: action.disabled,
+		onSelect: action.onSelect,
+		children: [action.icon ? /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			children: action.icon
+		}) : null, action.label]
+	}, action.label);
+}
+export { SplitButton };

package/dist/components/textarea.d.ts

@@ -1,8 +1,16 @@
-import * as React from "react";
 /**
- * Distinguishes disabled fields with a muted background in both theme modes.
- * @param props - Primitive properties and optional consumer overrides.
- * @returns The styled primitive with its original interaction contract.
+ * Arc's Textarea (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): a multi-line field on Arc's tokens with
+ * a 110px minimum height and a vertical resize handle. With a `label`, `description` or `error` it renders Arc's
+ * labelled field, where a live count in the description rolls its digits; without them it renders the bare control.
  */
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+import type { ComponentProps } from "react";
+import type { FieldCopyProps } from "./field.js";
+export type TextareaProps = ComponentProps<"textarea"> & FieldCopyProps;
+/**
+ * Free-form multi-line text, controlled or uncontrolled like a native textarea.
+ * @param textareaProps - Optional field copy plus every native textarea attribute, including `ref`, `rows` and `maxLength`.
+ * @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+ *   bare control.
+ */
+declare function Textarea(textareaProps: TextareaProps): import("react").JSX.Element;
 export { Textarea };

package/dist/components/textarea.js

@@ -1,20 +1,115 @@
-import * as React from "react";
+"use client";
+import { c as _c } from "react/compiler-runtime";
 import { MotionSlot } from "../motion/motion-slot.js";
 import { cn } from "../lib/utils.js";
+import { Field, usesFieldCopy, useFieldAria } from "./field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/** Same focus language as `Input`: the border answers alone and the box never changes size. */
+const textareaClassName = "flex min-h-[110px] w-full resize-y rounded-(--radius-control) border border-border-strong bg-surface p-(--space-3) font-sans text-base leading-(--leading-body) tracking-(--tracking-body) text-foreground outline-none transition-[color,background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) motion-reduce:transition-none placeholder:text-text-muted hover-fine:not-disabled:not-aria-invalid:border-foreground focus-visible:border-foreground aria-invalid:border-danger disabled:cursor-not-allowed disabled:bg-surface-muted disabled:opacity-60 md:text-sm";
 /**
-* Distinguishes disabled fields with a muted background in both theme modes.
-* @param props - Primitive properties and optional consumer overrides.
-* @returns The styled primitive with its original interaction contract.
+* Free-form multi-line text, controlled or uncontrolled like a native textarea.
+* @param textareaProps - Optional field copy plus every native textarea attribute, including `ref`, `rows` and `maxLength`.
+* @returns The labelled field when `label`, `description` or `error` is passed (even as `undefined`), otherwise the
+*   bare control.
 */
-function Textarea({ className, ...props }) {
-	return /* @__PURE__ */ _jsx(MotionSlot, {
-		kind: "field",
-		children: /* @__PURE__ */ _jsx("textarea", {
-			"data-slot": "textarea",
-			className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-[color,background-color,border-color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
+function Textarea(textareaProps) {
+	const $ = _c(26);
+	let className;
+	let description;
+	let error;
+	let id;
+	let label;
+	let props;
+	if ($[0] !== textareaProps) {
+		({className, label, description, error, id, ...props} = textareaProps);
+		$[0] = textareaProps;
+		$[1] = className;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+		$[5] = label;
+		$[6] = props;
+	} else {
+		className = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+		label = $[5];
+		props = $[6];
+	}
+	let t0;
+	if ($[7] !== description || $[8] !== error || $[9] !== id || $[10] !== props) {
+		t0 = {
+			id,
+			description,
+			error,
 			...props
-		})
-	});
+		};
+		$[7] = description;
+		$[8] = error;
+		$[9] = id;
+		$[10] = props;
+		$[11] = t0;
+	} else {
+		t0 = $[11];
+	}
+	const aria = useFieldAria(t0);
+	const isField = usesFieldCopy(textareaProps);
+	let t1;
+	if ($[12] !== className) {
+		t1 = cn(textareaClassName, className);
+		$[12] = className;
+		$[13] = t1;
+	} else {
+		t1 = $[13];
+	}
+	const t2 = isField ? aria.controlId : id;
+	const t3 = aria["aria-describedby"];
+	const t4 = aria["aria-invalid"];
+	let t5;
+	if ($[14] !== props || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "field",
+			children: /* @__PURE__ */ _jsx("textarea", {
+				"data-slot": "textarea",
+				className: t1,
+				...props,
+				id: t2,
+				"aria-describedby": t3,
+				"aria-invalid": t4
+			})
+		});
+		$[14] = props;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	const control = t5;
+	if (!isField) {
+		return control;
+	}
+	let t6;
+	if ($[20] !== aria || $[21] !== control || $[22] !== description || $[23] !== error || $[24] !== label) {
+		t6 = /* @__PURE__ */ _jsx(Field, {
+			label,
+			description,
+			error,
+			aria,
+			children: control
+		});
+		$[20] = aria;
+		$[21] = control;
+		$[22] = description;
+		$[23] = error;
+		$[24] = label;
+		$[25] = t6;
+	} else {
+		t6 = $[25];
+	}
+	return t6;
 }
 export { Textarea };

package/dist/constants/action-button.d.ts

@@ -0,0 +1,20 @@
+/** Tuning of `ActionButton`: its async states, reset delay and the icon that follows each state. */
+/** Phases an action goes through: ready to run, running, and finished successfully. */
+export type ActionButtonState = "idle" | "pending" | "success";
+/** Value of each phase, exposed on the button as `data-action-state`, apart from `data-state`, which marks popup triggers that never press. */
+export declare const ACTION_BUTTON_STATE: {
+    readonly idle: "idle";
+    readonly pending: "pending";
+    readonly success: "success";
+};
+/** Time the success state stays on the button before it returns to idle on its own. */
+export declare const ACTION_BUTTON_DEFAULT_RESET_AFTER_MS = 2400;
+/** Side, in pixels, of the slot that swaps the arrow, the spinner and the check. */
+export declare const ACTION_BUTTON_ICON_SIZE_PX = 17;
+/** Horizontal offsets, in pixels, of the arrow returning from behind and leaving forward. */
+export declare const ACTION_BUTTON_ARROW_OFFSET_PX: {
+    readonly enter: -6;
+    readonly exit: 8;
+};
+/** Delay, in seconds, before the success check starts drawing itself. */
+export declare const ACTION_BUTTON_CHECK_DRAW_DELAY_S = 0.05;

package/dist/constants/action-button.js

@@ -0,0 +1,17 @@
+/** Value of each phase, exposed on the button as `data-action-state`, apart from `data-state`, which marks popup triggers that never press. */
+export const ACTION_BUTTON_STATE = {
+	idle: "idle",
+	pending: "pending",
+	success: "success"
+};
+/** Time the success state stays on the button before it returns to idle on its own. */
+export const ACTION_BUTTON_DEFAULT_RESET_AFTER_MS = 2400;
+/** Side, in pixels, of the slot that swaps the arrow, the spinner and the check. */
+export const ACTION_BUTTON_ICON_SIZE_PX = 17;
+/** Horizontal offsets, in pixels, of the arrow returning from behind and leaving forward. */
+export const ACTION_BUTTON_ARROW_OFFSET_PX = {
+	enter: -6,
+	exit: 8
+};
+/** Delay, in seconds, before the success check starts drawing itself. */
+export const ACTION_BUTTON_CHECK_DRAW_DELAY_S = .05;

package/dist/constants/field.d.ts

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export declare const FIELD_MESSAGE_WORD_OFFSET_EM: {
+    readonly enter: 0.35;
+    readonly exit: -0.35;
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export declare const FIELD_MESSAGE_DIGIT_OFFSET_EM = 0.6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export declare const FIELD_MESSAGE_NUMBER_PATTERN: RegExp;
+/**
+ * Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+ * exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+ */
+export declare const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN: RegExp;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export declare const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN: RegExp;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export declare const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export declare const FIELD_MESSAGE_ID_SUFFIX: {
+    readonly description: "description";
+    readonly error: "error";
+};

package/dist/constants/field.js

@@ -0,0 +1,24 @@
+/** Tuning of the internal labelled field shared by `Input` and `Textarea`. */
+/** Vertical offsets, in em, of changed message words rising in and lifting out. */
+export const FIELD_MESSAGE_WORD_OFFSET_EM = {
+	enter: .35,
+	exit: -.35
+};
+/** Vertical travel, in em, of a digit rolling in or out of a count in the message. */
+export const FIELD_MESSAGE_DIGIT_OFFSET_EM = .6;
+/** A message word that rolls its digits instead of rising in: counts, decimals, ratios, times and percentages. */
+export const FIELD_MESSAGE_NUMBER_PATTERN = /^\d[\d.,/:]*%?$/;
+/**
+* Grouping separators removed before comparing two counts to pick the roll direction: a dot or comma followed by
+* exactly three digits, so both `1.000` (es) and `1,000` (en) read as a thousand while `1,5` stays a decimal.
+*/
+export const FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN = /[.,](?=\d{3}(?!\d))/g;
+/** Separators between the components of a time (`0:09`) or a ratio (`3/10`), compared one by one. */
+export const FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN = /[:/]/;
+/** Decimal comma of locales such as Spanish, read as a decimal point once the grouping separators are gone. */
+export const FIELD_MESSAGE_DECIMAL_COMMA = ",";
+/** Suffixes of the ids that tie the helper and error rows to the control through `aria-describedby`. */
+export const FIELD_MESSAGE_ID_SUFFIX = {
+	description: "description",
+	error: "error"
+};

package/dist/constants/morph-text.d.ts

@@ -0,0 +1,13 @@
+/** Tuning of the internal letter-by-letter label morph shared by `ActionButton` and `SplitButton`. */
+/** Longest entrance delay a single letter gets, so long labels still finish their morph quickly. */
+export declare const MORPH_TEXT_MAX_GLYPH_DELAY_S = 0.1;
+/**
+ * Shared leading or trailing runs shorter than this are replaced instead of kept, so a one-letter coincidence does
+ * not leave a lonely letter standing while the rest of the label morphs.
+ */
+export declare const MORPH_TEXT_MIN_SHARED_RUN = 2;
+/** Vertical offsets, in pixels, of letters rising in and lifting out of the label. */
+export declare const MORPH_TEXT_GLYPH_OFFSET_PX: {
+    readonly enter: 5;
+    readonly exit: -4;
+};

package/dist/constants/morph-text.js

@@ -0,0 +1,13 @@
+/** Tuning of the internal letter-by-letter label morph shared by `ActionButton` and `SplitButton`. */
+/** Longest entrance delay a single letter gets, so long labels still finish their morph quickly. */
+export const MORPH_TEXT_MAX_GLYPH_DELAY_S = .1;
+/**
+* Shared leading or trailing runs shorter than this are replaced instead of kept, so a one-letter coincidence does
+* not leave a lonely letter standing while the rest of the label morphs.
+*/
+export const MORPH_TEXT_MIN_SHARED_RUN = 2;
+/** Vertical offsets, in pixels, of letters rising in and lifting out of the label. */
+export const MORPH_TEXT_GLYPH_OFFSET_PX = {
+	enter: 5,
+	exit: -4
+};

package/dist/constants/split-button.d.ts

@@ -0,0 +1,7 @@
+/** `primary` for the main action of a surface, `secondary` for a quieter, smaller one. */
+export type SplitButtonVariant = "primary" | "secondary";
+/** Height of both halves for each variant: the secondary split button is compact, as in Arc. */
+export declare const SPLIT_BUTTON_SIZE_BY_VARIANT: {
+    readonly primary: "md";
+    readonly secondary: "sm";
+};

package/dist/constants/split-button.js

@@ -0,0 +1,5 @@
+/** Height of both halves for each variant: the secondary split button is compact, as in Arc. */
+export const SPLIT_BUTTON_SIZE_BY_VARIANT = {
+	primary: "md",
+	secondary: "sm"
+};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { useTheme } from "next-themes";
 export { Link, type LinkProps } from "./components/link.js";
 export { BeezUIProvider, type BeezUIProviderProps } from "./providers/native-provider.js";
 export type { BeezUIComponents, BeezImageProps, BeezLinkProps } from "./providers/beez-ui-provider.js";
+export * from "./components/action-button.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
@@ -21,6 +22,7 @@ export * from "./components/separator.js";
 export * from "./components/sheet.js";
 export * from "./components/sidebar.js";
 export * from "./components/skeleton.js";
+export * from "./components/split-button.js";
 export * from "./components/switch.js";
 export * from "./components/table.js";
 export * from "./components/tabs.js";

package/dist/index.js

@@ -2,6 +2,7 @@
 export { useTheme } from "next-themes";
 export { Link } from "./components/link.js";
 export { BeezUIProvider } from "./providers/native-provider.js";
+export * from "./components/action-button.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/avatar.js";
 export * from "./components/badge.js";
@@ -20,6 +21,7 @@ export * from "./components/separator.js";
 export * from "./components/sheet.js";
 export * from "./components/sidebar.js";
 export * from "./components/skeleton.js";
+export * from "./components/split-button.js";
 export * from "./components/switch.js";
 export * from "./components/table.js";
 export * from "./components/tabs.js";

package/dist/motion/arc-swap.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Swap presets adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli, MIT License.
+ * The full license text ships in THIRD_PARTY_NOTICES.md. Internal: shared by the Arc-derived buttons to swap icons
+ * and labels in place.
+ */
+import type { TargetAndTransition, Transition } from "motion/react";
+/** Resting pose every swapped element settles into. */
+export declare const ARC_SWAP_REST: TargetAndTransition;
+/** Outgoing elements leave faster than incoming ones arrive. */
+export declare const ARC_SWAP_EXIT_TRANSITION: Transition;
+/** An incoming icon grows out of a slight blur. */
+export declare const ARC_ICON_ENTER: TargetAndTransition;
+/** An outgoing icon shrinks back into the same blur. */
+export declare const ARC_ICON_EXIT: TargetAndTransition;
+/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
+export declare const ARC_ICON_TRANSITION: Transition;
+/** With reduced motion, every swap is an instant fade. */
+export declare const ARC_REDUCED_TRANSITION: Transition;
+/** Reduced-motion entrance: the resting pose, only faded out. */
+export declare const ARC_REDUCED_ENTER: TargetAndTransition;
+/** Reduced-motion exit: an instant fade. */
+export declare const ARC_REDUCED_EXIT: TargetAndTransition;