@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/skeleton.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export type SkeletonProps = {
+    /** Accessible name of the loading status; defaults to "Cargando contenido". */
+    label?: string;
+    /** Number of text lines, clamped to 1-6; defaults to 3. */
+    lines?: number;
+    /** Adds a round avatar block before the lines. */
+    avatar?: boolean;
+    /** Content to reveal once loading finishes; with children the placeholder crossfades into them. */
+    children?: ReactNode;
+    /** Keeps the placeholder visible while true (the default). Only used together with `children`. */
+    loading?: boolean;
+    /** Classes for the outer element: the placeholder, or the reveal frame when there are children. */
+    className?: string;
+};
+/**
+ * Reserves space while content loads. Without children it draws Arc's placeholder, three text lines by default; with
+ * children it shows that placeholder while `loading` and then crossfades into them.
+ * @param props - Placeholder shape, accessible label, loading state and classes.
+ * @returns The placeholder, or the reveal frame when there are children.
+ */
+declare function Skeleton({ label, lines, avatar, children, loading, className, }: SkeletonProps): import("react").JSX.Element;
+export { Skeleton };

package/dist/components/skeleton.js

@@ -0,0 +1,334 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's Skeleton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): placeholders that reserve space while
+* content loads, with a calm, finite pulse that ripples down the blocks and rests after about 20 seconds. It draws
+* Arc's placeholder of text lines and an optional avatar, and with children its reveal, which crossfades into the
+* content while the height springs to its new size. Like Arc, it only draws lines and an avatar: other shapes are
+* built by the consumer.
+*/
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
+import { SKELETON_DEFAULT_LABEL, SKELETON_DEFAULT_LINES, SKELETON_LINE_LIMITS, SKELETON_MORPH_WINDOW_MS, SKELETON_REVEAL_OFFSET_PX } from "../constants/skeleton.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's block: a soft fill mixed from the strong border, and a 1.8s pulse that starts a beat later for each
+* `--index` and stops after 11 rounds. Reduced motion shows a still block.
+*/
+const blockClassName = "block rounded-(--radius-control) bg-[color-mix(in_oklab,var(--border-strong)_38%,var(--surface))] animate-pulse [animation-delay:calc(var(--index,0)*90ms)] [animation-duration:1.8s] [animation-fill-mode:both] [animation-iteration-count:11] [animation-timing-function:var(--ease-in-out)] motion-reduce:animate-none";
+/**
+* Follows the content height. After `busy` flips, the frame springs from its old height to its new one, owning its
+* inline height and overflow only while it moves and restoring the consumer's values afterwards, so a fixed height
+* from `className` or `style` keeps applying at rest. It clips only while moving, so focus rings stay visible at rest.
+* @param contentRef - The measured content; its parent is the frame that springs.
+* @param busy - Whether the placeholder is showing; a change opens the window in which resizes spring.
+* @param reduceMotion - Whether every resize should jump.
+*/
+function useMorphHeight(contentRef, busy, reduceMotion) {
+	const changedAt = useRef(0);
+	useLayoutEffect(() => {
+		changedAt.current = performance.now();
+	}, [busy]);
+	useEffect(() => {
+		const content = contentRef.current;
+		const frame = content?.parentElement;
+		if (!content || !frame || typeof ResizeObserver === "undefined") return;
+		let lastFrameHeight;
+		let controls;
+		let restingStyle;
+		const readFrameHeight = () => frame.getBoundingClientRect().height;
+		const settle = () => {
+			if (restingStyle) Object.assign(frame.style, restingStyle);
+			restingStyle = undefined;
+		};
+		const observer = new ResizeObserver(() => {
+			controls?.stop();
+			const fromHeight = restingStyle ? readFrameHeight() : lastFrameHeight;
+			if (restingStyle) frame.style.height = restingStyle.height;
+			const nextHeight = readFrameHeight();
+			lastFrameHeight = nextHeight;
+			const isOutsideWindow = performance.now() - changedAt.current > SKELETON_MORPH_WINDOW_MS;
+			if (reduceMotion || fromHeight === undefined || fromHeight === nextHeight || isOutsideWindow) return settle();
+			restingStyle ??= {
+				height: frame.style.height,
+				overflow: frame.style.overflow
+			};
+			frame.style.overflow = "hidden";
+			frame.style.height = `${fromHeight}px`;
+			controls = animate(fromHeight, nextHeight, {
+				...ARC_SPRING_SMOOTH,
+				onUpdate: (animatedHeight) => {
+					frame.style.height = `${animatedHeight}px`;
+				},
+				onComplete: settle
+			});
+		});
+		observer.observe(content);
+		return () => {
+			observer.disconnect();
+			controls?.stop();
+			settle();
+		};
+	}, [contentRef, reduceMotion]);
+}
+/** Arc's composed placeholder: an optional avatar and a column of lines, announced once as a busy status. */
+function SkeletonPlaceholder(t0) {
+	const $ = _c(14);
+	const { lines, avatar, label, className } = t0;
+	const lineCount = Math.min(Math.max(Math.floor(lines), SKELETON_LINE_LIMITS.min), SKELETON_LINE_LIMITS.max);
+	const firstLineIndex = avatar ? 1 : 0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = cn("flex w-full min-w-0 items-start gap-(--space-4)", className);
+		$[0] = className;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== avatar) {
+		t2 = avatar ? /* @__PURE__ */ _jsx("span", {
+			"data-slot": "skeleton",
+			"aria-hidden": "true",
+			className: cn(blockClassName, "size-(--control-height-md) flex-none rounded-(--radius-pill)")
+		}) : null;
+		$[2] = avatar;
+		$[3] = t2;
+	} else {
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== firstLineIndex || $[5] !== lineCount) {
+		let t4;
+		if ($[7] !== firstLineIndex) {
+			t4 = (_, lineIndex) => /* @__PURE__ */ _jsx("span", {
+				"data-slot": "skeleton",
+				className: cn(blockClassName, "h-(--space-3) w-full first:h-(--space-4) first:w-[48%] last:not-first:w-[72%]"),
+				style: { "--index": lineIndex + firstLineIndex }
+			}, lineIndex);
+			$[7] = firstLineIndex;
+			$[8] = t4;
+		} else {
+			t4 = $[8];
+		}
+		t3 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": "true",
+			className: "grid flex-1 gap-(--space-3) pt-(--space-1)",
+			children: Array.from({ length: lineCount }, t4)
+		});
+		$[4] = firstLineIndex;
+		$[5] = lineCount;
+		$[6] = t3;
+	} else {
+		t3 = $[6];
+	}
+	let t4;
+	if ($[9] !== label || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "skeleton-placeholder",
+			role: "status",
+			"aria-label": label,
+			"aria-busy": "true",
+			className: t1,
+			children: [t2, t3]
+		});
+		$[9] = label;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t4 = $[13];
+	}
+	return t4;
+}
+/**
+* One side of the reveal. While it fades out it turns inert and hidden from assistive technology, so stale content
+* under the new branch cannot be clicked, focused or announced.
+*/
+function SkeletonBranch(t0) {
+	const $ = _c(8);
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+	} else {
+		props = $[1];
+		ref = $[2];
+	}
+	const isPresent = useIsPresent();
+	const t1 = isPresent ? undefined : true;
+	const t2 = !isPresent || undefined;
+	let t3;
+	if ($[3] !== props || $[4] !== ref || $[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(motion.div, {
+			ref,
+			...props,
+			"aria-hidden": t1,
+			inert: t2
+		});
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	return t3;
+}
+/** Arc's reveal: the placeholder crossfades into the content while the frame springs to the new height. */
+function SkeletonReveal(t0) {
+	const $ = _c(12);
+	const { loading, placeholder, children, className } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	const contentRef = useRef(null);
+	useMorphHeight(contentRef, loading, reduceMotion);
+	const t1 = reduceMotion ? ARC_DURATION.instant : ARC_DURATION.fast;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { duration: t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	const exitTransition = t2;
+	let t3;
+	if ($[2] !== children || $[3] !== exitTransition || $[4] !== loading || $[5] !== placeholder || $[6] !== reduceMotion) {
+		t3 = /* @__PURE__ */ _jsx("div", {
+			ref: contentRef,
+			className: "relative flow-root",
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				mode: "popLayout",
+				initial: false,
+				children: loading ? /* @__PURE__ */ _jsx(SkeletonBranch, {
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: {
+						opacity: 0,
+						transition: exitTransition
+					},
+					transition: {
+						duration: reduceMotion ? ARC_DURATION.instant : ARC_DURATION.fast,
+						ease: [...ARC_EASE.standard]
+					},
+					children: placeholder
+				}, "placeholder") : /* @__PURE__ */ _jsx(SkeletonBranch, {
+					initial: reduceMotion ? { opacity: 0 } : {
+						opacity: 0,
+						y: SKELETON_REVEAL_OFFSET_PX
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					exit: {
+						opacity: 0,
+						transition: exitTransition
+					},
+					transition: {
+						duration: reduceMotion ? ARC_DURATION.instant : ARC_DURATION.standard,
+						ease: [...ARC_EASE.enter]
+					},
+					children
+				}, "content")
+			})
+		});
+		$[2] = children;
+		$[3] = exitTransition;
+		$[4] = loading;
+		$[5] = placeholder;
+		$[6] = reduceMotion;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	let t4;
+	if ($[8] !== className || $[9] !== loading || $[10] !== t3) {
+		t4 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "skeleton-reveal",
+			"aria-busy": loading,
+			className,
+			children: t3
+		});
+		$[8] = className;
+		$[9] = loading;
+		$[10] = t3;
+		$[11] = t4;
+	} else {
+		t4 = $[11];
+	}
+	return t4;
+}
+/**
+* Reserves space while content loads. Without children it draws Arc's placeholder, three text lines by default; with
+* children it shows that placeholder while `loading` and then crossfades into them.
+* @param props - Placeholder shape, accessible label, loading state and classes.
+* @returns The placeholder, or the reveal frame when there are children.
+*/
+function Skeleton(t0) {
+	const $ = _c(14);
+	const { label: t1, lines: t2, avatar: t3, children, loading: t4, className } = t0;
+	const label = t1 === undefined ? SKELETON_DEFAULT_LABEL : t1;
+	const lines = t2 === undefined ? SKELETON_DEFAULT_LINES : t2;
+	const avatar = t3 === undefined ? false : t3;
+	const loading = t4 === undefined ? true : t4;
+	if (children === undefined) {
+		let t5;
+		if ($[0] !== avatar || $[1] !== className || $[2] !== label || $[3] !== lines) {
+			t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, {
+				lines,
+				avatar,
+				label,
+				className
+			});
+			$[0] = avatar;
+			$[1] = className;
+			$[2] = label;
+			$[3] = lines;
+			$[4] = t5;
+		} else {
+			t5 = $[4];
+		}
+		return t5;
+	}
+	let t5;
+	if ($[5] !== avatar || $[6] !== label || $[7] !== lines) {
+		t5 = /* @__PURE__ */ _jsx(SkeletonPlaceholder, {
+			lines,
+			avatar,
+			label
+		});
+		$[5] = avatar;
+		$[6] = label;
+		$[7] = lines;
+		$[8] = t5;
+	} else {
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== children || $[10] !== className || $[11] !== loading || $[12] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(SkeletonReveal, {
+			loading,
+			placeholder: t5,
+			className,
+			children
+		});
+		$[9] = children;
+		$[10] = className;
+		$[11] = loading;
+		$[12] = t5;
+		$[13] = t6;
+	} else {
+		t6 = $[13];
+	}
+	return t6;
+}
+export { Skeleton };

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 @astra-kit/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 "./primitives/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/svgs/whatsappIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const WhatsappIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export { WhatsappIcon };