beez-ui 2.3.1 → 2.4.0

package/dist/components/morph-text.js

@@ -0,0 +1,210 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Letter-by-letter label morph 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 `ActionButton` and `SplitButton`.
+*/
+import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { MORPH_TEXT_GLYPH_OFFSET_PX, MORPH_TEXT_MAX_GLYPH_DELAY_S, MORPH_TEXT_MIN_SHARED_RUN } from "../constants/morph-text.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_STAGGER } from "../motion/arc-tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const restState = {
+	opacity: 1,
+	y: 0,
+	filter: "blur(0px)"
+};
+/** Letters rise in from a soft blur and lift away a little faster. */
+const glyphEnter = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.enter,
+	filter: `blur(${ARC_BLUR.soft}px)`
+};
+const glyphExit = {
+	opacity: 0,
+	y: MORPH_TEXT_GLYPH_OFFSET_PX.exit,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: {
+		duration: ARC_DURATION.fast,
+		ease: [...ARC_EASE.standard]
+	}
+};
+const reducedTransition = { duration: ARC_DURATION.instant };
+const reducedEnter = {
+	...restState,
+	opacity: 0
+};
+const reducedExit = {
+	opacity: 0,
+	transition: reducedTransition
+};
+/** Grapheme segmenter created once; absent on runtimes without `Intl.Segmenter`. */
+const graphemeSegmenter = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(undefined, { granularity: "grapheme" }) : undefined;
+/**
+* Splits text into user-perceived characters, so emoji sequences, flags and combining accents stay in one glyph.
+* Falls back to code points when `Intl.Segmenter` is unavailable.
+* @param text - Text to split.
+* @returns Graphemes in reading order.
+*/
+function splitGraphemes(text) {
+	if (!graphemeSegmenter) return [...text];
+	return Array.from(graphemeSegmenter.segment(text), (segment) => segment.segment);
+}
+/**
+* Turns characters into glyphs of one generation.
+* @param characters - Characters to wrap.
+* @param generation - Label generation, part of every glyph id.
+* @returns Glyphs in reading order.
+*/
+function toGlyphs(characters, generation) {
+	return characters.map((character, order) => ({
+		id: `${generation}:${order}`,
+		character,
+		order
+	}));
+}
+/**
+* Splits a label into glyphs, keeping the identity of the shared leading and trailing characters of the previous
+* label, so `Copy page` → `Copied` only replaces the changed letters.
+* @param text - Current label.
+* @returns Glyphs of the label.
+*/
+function useGlyphs(text) {
+	const $ = _c(10);
+	let t0;
+	if ($[0] !== text) {
+		t0 = () => ({
+			text,
+			generation: 0,
+			glyphs: toGlyphs(splitGraphemes(text), 0)
+		});
+		$[0] = text;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const [glyphState, setGlyphState] = useState(t0);
+	if (glyphState.text === text) {
+		return glyphState.glyphs;
+	}
+	let t1;
+	if ($[2] !== glyphState.text) {
+		t1 = splitGraphemes(glyphState.text);
+		$[2] = glyphState.text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	const previous = t1;
+	let generation;
+	let t2;
+	if ($[4] !== glyphState.generation || $[5] !== glyphState.glyphs || $[6] !== previous || $[7] !== text) {
+		const next = splitGraphemes(text);
+		let sharedStart = 0;
+		let sharedEnd = 0;
+		while (sharedStart < previous.length && sharedStart < next.length && previous[sharedStart] === next[sharedStart]) {
+			sharedStart++;
+		}
+		while (sharedEnd < previous.length - sharedStart && sharedEnd < next.length - sharedStart && previous[previous.length - 1 - sharedEnd] === next[next.length - 1 - sharedEnd]) {
+			sharedEnd++;
+		}
+		if (sharedStart < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedStart = 0;
+		}
+		if (sharedEnd < MORPH_TEXT_MIN_SHARED_RUN) {
+			sharedEnd = 0;
+		}
+		generation = glyphState.generation + 1;
+		t2 = [
+			...glyphState.glyphs.slice(0, sharedStart),
+			...toGlyphs(next.slice(sharedStart, next.length - sharedEnd), generation),
+			...glyphState.glyphs.slice(glyphState.glyphs.length - sharedEnd)
+		];
+		$[4] = glyphState.generation;
+		$[5] = glyphState.glyphs;
+		$[6] = previous;
+		$[7] = text;
+		$[8] = generation;
+		$[9] = t2;
+	} else {
+		generation = $[8];
+		t2 = $[9];
+	}
+	const glyphs = t2;
+	setGlyphState({
+		text,
+		generation,
+		glyphs
+	});
+	return glyphs;
+}
+/**
+* Morphs one label into the next: kept letters glide into place and new ones rise in from a soft blur. The row
+* keeps its natural width; callers spring the slot around it.
+* @param props - Label text, whether the user prefers reduced motion and an optional ref to the row.
+* @returns The row of animated letters. Callers hide it from assistive tech and name their control otherwise.
+*/
+export function MorphText(t0) {
+	const $ = _c(12);
+	const { text, reduceMotion, ref } = t0;
+	const glyphs = useGlyphs(text);
+	let t1;
+	if ($[0] !== glyphs || $[1] !== reduceMotion || $[2] !== text) {
+		let t2;
+		if ($[4] !== reduceMotion || $[5] !== text) {
+			t2 = (glyph) => /* @__PURE__ */ _jsx(motion.span, {
+				className: "inline-block",
+				layout: reduceMotion ? false : "position",
+				layoutDependency: text,
+				initial: reduceMotion ? reducedEnter : glyphEnter,
+				animate: restState,
+				exit: reduceMotion ? reducedExit : glyphExit,
+				transition: reduceMotion ? reducedTransition : {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.enter],
+					delay: Math.min(glyph.order * ARC_STAGGER.char, MORPH_TEXT_MAX_GLYPH_DELAY_S),
+					layout: ARC_SPRING_MORPH
+				},
+				children: glyph.character
+			}, glyph.id);
+			$[4] = reduceMotion;
+			$[5] = text;
+			$[6] = t2;
+		} else {
+			t2 = $[6];
+		}
+		t1 = glyphs.map(t2);
+		$[0] = glyphs;
+		$[1] = reduceMotion;
+		$[2] = text;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	let t2;
+	if ($[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			mode: "popLayout",
+			initial: false,
+			children: t1
+		});
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	let t3;
+	if ($[9] !== ref || $[10] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("span", {
+			ref,
+			className: "relative inline-flex flex-none whitespace-pre",
+			children: t2
+		});
+		$[9] = ref;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { SplitButtonVariant } from "../constants/split-button.js";
+export type { SplitButtonVariant } from "../constants/split-button.js";
+/** One entry of the menu half. */
+export type SplitButtonAction = {
+    label: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Marks an action that deletes or discards, drawn in the danger color. */
+    destructive?: boolean;
+    icon?: ReactNode;
+};
+export type SplitButtonProps = {
+    /** Label of the main action and its accessible name; changing it morphs the letters in place. */
+    label: string;
+    /** Actions of the menu half, in order. */
+    actions: SplitButtonAction[];
+    /** Runs the main action. */
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Icon before the label; swapping it for another element (such as Copy for Check) crossfades it. */
+    icon?: ReactNode;
+    /** `primary` for the main action of a surface, `secondary` for a quieter, smaller one. */
+    variant?: SplitButtonVariant;
+    /** Accessible name of the menu half; defaults to "Más acciones de {label}". */
+    menuLabel?: string;
+    className?: string;
+};
+/**
+ * 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.
+ */
+declare function SplitButton({ label, actions, onClick, disabled, icon, variant, menuLabel, className, }: SplitButtonProps): import("react").JSX.Element;
+export { SplitButton };

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