@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/radio-group.js

@@ -0,0 +1,392 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's RadioGroup (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on Radix's radio group: a fieldset
+* whose legend names the choice and whose options render as Arc's rows. The mark dips on press, previews a faint dot
+* while held, and the new dot springs in while the old one shrinks away; one highlight travels to the chosen row on
+* the morph spring, so a change reads as a single physical move. Arrow keys take the same path.
+*/
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { animate, motion } from "motion/react";
+import { RADIO_GROUP_DOT_HIDDEN_SCALE, RADIO_GROUP_OPTION_ID_SUFFIX, RADIO_GROUP_READY_ATTRIBUTE } from "../constants/radio-group.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Selector of the option row that holds the checked radio. */
+const CHECKED_OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]:has([data-slot=\"radio-group-item\"][data-state=\"checked\"])";
+/** Selector of every option row, observed so the highlight follows rows that resize. */
+const OPTION_SELECTOR = "[data-slot=\"radio-group-option\"]";
+/** The value chosen in the enclosing group, read by each option to spring its dot in or out. */
+const RadioGroupValueContext = createContext(undefined);
+/**
+* Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it
+* at once, and a group without a chosen row hides it.
+* @param highlight - The travelling highlight element.
+* @param row - The checked option row, if any.
+* @param placedAt - Geometry the highlight was last placed at; updated in place.
+* @param shouldGlide - Whether this change should travel instead of jumping.
+*/
+function placeHighlight(highlight, row, placedAt, shouldGlide) {
+	const nextGeometry = row ? `${row.offsetLeft} ${row.offsetTop} ${row.offsetWidth} ${row.offsetHeight}` : "";
+	if (!highlight || nextGeometry === placedAt.current) return;
+	const wasVisible = placedAt.current !== "";
+	placedAt.current = nextGeometry;
+	if (!row) {
+		animate(highlight, { opacity: 0 }, { duration: 0 });
+		return;
+	}
+	const target = {
+		x: row.offsetLeft,
+		y: row.offsetTop,
+		width: row.offsetWidth,
+		height: row.offsetHeight,
+		opacity: 1
+	};
+	if (shouldGlide && wasVisible) {
+		animate(highlight, target, {
+			...ARC_SPRING_MORPH,
+			opacity: { duration: 0 }
+		});
+		return;
+	}
+	Object.assign(highlight.style, {
+		transform: `translateX(${target.x}px) translateY(${target.y}px)`,
+		width: `${target.width}px`,
+		height: `${target.height}px`,
+		opacity: "1"
+	});
+	animate(highlight, target, { duration: 0 });
+}
+/**
+* Arc's mark recipe: the faint preview dot and the press dip answer the whole row.
+*/
+const radioGroupItemClassName = "peer group/radio-group-item relative z-2 grid aspect-square size-[17px] shrink-0 cursor-pointer place-items-center rounded-full border border-border-strong bg-transparent p-0 [-webkit-tap-highlight-color:transparent] [transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_var(--duration-spring)_var(--ease-spring)] before:size-[7px] before:rounded-full before:bg-foreground before:opacity-0 before:transition-opacity before:duration-(--duration-instant) before:ease-(--ease-standard) before:[grid-area:1/1] before:content-[''] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-(--control-on) data-[state=checked]:bg-(--control-on) aria-invalid:data-[state=unchecked]:border-danger hover-fine:data-[state=unchecked]:not-disabled:border-text-muted active:not-disabled:scale-[.88] active:not-disabled:[transition:border-color_var(--duration-fast)_var(--ease-standard),background-color_var(--duration-fast)_var(--ease-standard),scale_100ms_var(--ease-standard)] active:not-disabled:data-[state=unchecked]:before:opacity-[.22] group-active/radio-group-option:not-disabled:scale-[.88] group-active/radio-group-option:not-disabled:data-[state=unchecked]:before:opacity-[.22] motion-reduce:scale-100 motion-reduce:transition-none motion-reduce:before:transition-none";
+/** Arc's option row: answers a press with color only, while the mark is what moves. */
+const optionClassName = "group/radio-group-option relative flex cursor-pointer items-center gap-(--space-3) rounded-(--radius-control) border border-border p-(--space-3) [-webkit-tap-highlight-color:transparent] transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-standard) hover-fine:bg-surface-muted active:bg-surface-muted has-disabled:cursor-not-allowed has-disabled:opacity-50 [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:border-(--control-on) [[data-slot=radio-group]:not([data-ready])_&]:has-data-[state=checked]:bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] motion-reduce:transition-none";
+/**
+* One option row: the radio mark and its copy.
+* @param option - The option to render.
+* @returns The row, a label that activates its radio.
+*/
+function RadioGroupOptionRow(t0) {
+	const $ = _c(26);
+	const { value, label, description, disabled } = t0;
+	const rowId = useId();
+	const labelId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.label}`;
+	const descriptionId = `${rowId}-${RADIO_GROUP_OPTION_ID_SUFFIX.description}`;
+	const reduceMotion = usePrefersReducedMotion();
+	const isChecked = useContext(RadioGroupValueContext) === value;
+	const t1 = description ? descriptionId : undefined;
+	let t2;
+	if ($[0] !== isChecked) {
+		t2 = isChecked ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: RADIO_GROUP_DOT_HIDDEN_SCALE,
+			opacity: 0
+		};
+		$[0] = isChecked;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== isChecked || $[3] !== reduceMotion) {
+		t3 = reduceMotion ? { duration: 0 } : {
+			...ARC_SPRING_SNAPPY,
+			opacity: { duration: isChecked ? ARC_DURATION.fast : ARC_DURATION.instant }
+		};
+		$[2] = isChecked;
+		$[3] = reduceMotion;
+		$[4] = t3;
+	} else {
+		t3 = $[4];
+	}
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Indicator, {
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(motion.span, {
+				"data-slot": "radio-group-indicator",
+				className: "pointer-events-none block size-[7px] rounded-full bg-(--control-glyph) [grid-area:1/1]",
+				initial: false,
+				animate: t2,
+				transition: t3
+			})
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] !== disabled || $[9] !== labelId || $[10] !== t1 || $[11] !== t4 || $[12] !== value) {
+		t5 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Item, {
+			"data-slot": "radio-group-item",
+			className: radioGroupItemClassName,
+			value,
+			disabled,
+			"aria-labelledby": labelId,
+			"aria-describedby": t1,
+			children: t4
+		});
+		$[8] = disabled;
+		$[9] = labelId;
+		$[10] = t1;
+		$[11] = t4;
+		$[12] = value;
+		$[13] = t5;
+	} else {
+		t5 = $[13];
+	}
+	let t6;
+	if ($[14] !== label || $[15] !== labelId) {
+		t6 = /* @__PURE__ */ _jsx("span", {
+			id: labelId,
+			"data-slot": "radio-group-option-label",
+			className: "block text-sm font-medium text-text-secondary transition-colors duration-(--duration-standard) ease-(--ease-standard) group-has-data-[state=checked]/radio-group-option:text-foreground motion-reduce:transition-none",
+			children: label
+		});
+		$[14] = label;
+		$[15] = labelId;
+		$[16] = t6;
+	} else {
+		t6 = $[16];
+	}
+	let t7;
+	if ($[17] !== description || $[18] !== descriptionId) {
+		t7 = description ? /* @__PURE__ */ _jsx("span", {
+			id: descriptionId,
+			"data-slot": "radio-group-option-description",
+			className: "mt-0.5 block text-xs text-text-muted",
+			children: description
+		}) : null;
+		$[17] = description;
+		$[18] = descriptionId;
+		$[19] = t7;
+	} else {
+		t7 = $[19];
+	}
+	let t8;
+	if ($[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs("span", {
+			className: "relative z-2 min-w-0",
+			children: [t6, t7]
+		});
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else {
+		t8 = $[22];
+	}
+	let t9;
+	if ($[23] !== t5 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("label", {
+			"data-slot": "radio-group-option",
+			className: optionClassName,
+			onClick: _temp,
+			children: [t5, t8]
+		});
+		$[23] = t5;
+		$[24] = t8;
+		$[25] = t9;
+	} else {
+		t9 = $[25];
+	}
+	return t9;
+}
+function _temp(event) {
+	const radio = event.currentTarget.querySelector("[data-slot=\"radio-group-item\"]");
+	if (radio && !radio.disabled && event.target !== radio) {
+		radio.focus({ preventScroll: true });
+	}
+}
+/**
+* A choice of one option from a visible set, controlled with `value` or uncontrolled with `defaultValue`.
+* @param props - Legend, options, value, change handler, form name and classes.
+* @returns The fieldset with its legend and option rows.
+*/
+function RadioGroup(t0) {
+	const $ = _c(32);
+	const { label, options, value, defaultValue, onValueChange, name, className } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	const generatedId = useId();
+	const legendId = `${generatedId}-legend`;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const selectedValue = value ?? uncontrolledValue;
+	const groupRef = useRef(null);
+	const optionsRef = useRef(null);
+	const highlightRef = useRef(null);
+	const shownValue = useRef(null);
+	const placedAt = useRef("");
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => optionsRef.current?.querySelector(CHECKED_OPTION_SELECTOR) ?? null;
+		$[0] = t1;
+	} else {
+		t1 = $[0];
+	}
+	const findCheckedRow = t1;
+	let t2;
+	let t3;
+	if ($[1] !== reduceMotion || $[2] !== selectedValue) {
+		t2 = () => {
+			const hasChanged = shownValue.current !== null && shownValue.current !== selectedValue;
+			placeHighlight(highlightRef.current, findCheckedRow(), placedAt, hasChanged && !reduceMotion);
+			shownValue.current = selectedValue;
+			groupRef.current?.setAttribute(RADIO_GROUP_READY_ATTRIBUTE, "");
+		};
+		t3 = [selectedValue, reduceMotion];
+		$[1] = reduceMotion;
+		$[2] = selectedValue;
+		$[3] = t2;
+		$[4] = t3;
+	} else {
+		t2 = $[3];
+		t3 = $[4];
+	}
+	useLayoutEffect(t2, t3);
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => {
+			const list = optionsRef.current;
+			if (!list || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver(() => placeHighlight(highlightRef.current, findCheckedRow(), placedAt, false));
+			observer.observe(list);
+			list.querySelectorAll(OPTION_SELECTOR).forEach((row) => observer.observe(row));
+			return () => observer.disconnect();
+		};
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	useEffect(t4);
+	const t5 = name ?? generatedId;
+	let t6;
+	if ($[6] !== onValueChange || $[7] !== value) {
+		t6 = (nextValue) => {
+			if (value === undefined) {
+				setUncontrolledValue(nextValue);
+			}
+			onValueChange?.(nextValue);
+		};
+		$[6] = onValueChange;
+		$[7] = value;
+		$[8] = t6;
+	} else {
+		t6 = $[8];
+	}
+	let t7;
+	if ($[9] !== className) {
+		t7 = cn("m-0 grid min-w-0 border-0 p-0", className);
+		$[9] = className;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] !== label || $[12] !== legendId) {
+		t8 = /* @__PURE__ */ _jsx("legend", {
+			id: legendId,
+			"data-slot": "radio-group-label",
+			className: "mb-(--space-2) p-0 text-sm font-medium text-foreground",
+			children: label
+		});
+		$[11] = label;
+		$[12] = legendId;
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	let t9;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ _jsx("span", {
+			ref: highlightRef,
+			"data-slot": "radio-group-highlight",
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute top-0 left-0 z-1 box-border rounded-(--radius-control) border border-(--control-on) bg-[color-mix(in_oklab,var(--control-on)_5%,transparent)] opacity-0"
+		});
+		$[14] = t9;
+	} else {
+		t9 = $[14];
+	}
+	let t10;
+	if ($[15] !== options) {
+		t10 = options.map(_temp2);
+		$[15] = options;
+		$[16] = t10;
+	} else {
+		t10 = $[16];
+	}
+	let t11;
+	if ($[17] !== t10) {
+		t11 = /* @__PURE__ */ _jsxs("div", {
+			ref: optionsRef,
+			"data-slot": "radio-group-options",
+			className: "relative grid w-full gap-(--space-2)",
+			children: [t9, t10]
+		});
+		$[17] = t10;
+		$[18] = t11;
+	} else {
+		t11 = $[18];
+	}
+	let t12;
+	if ($[19] !== legendId || $[20] !== t11 || $[21] !== t7 || $[22] !== t8) {
+		t12 = /* @__PURE__ */ _jsxs("fieldset", {
+			ref: groupRef,
+			"data-slot": "radio-group",
+			"aria-labelledby": legendId,
+			className: t7,
+			children: [t8, t11]
+		});
+		$[19] = legendId;
+		$[20] = t11;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t12;
+	} else {
+		t12 = $[23];
+	}
+	let t13;
+	if ($[24] !== selectedValue || $[25] !== t12 || $[26] !== t5 || $[27] !== t6) {
+		t13 = /* @__PURE__ */ _jsx(RadioGroupPrimitive.Root, {
+			asChild: true,
+			name: t5,
+			value: selectedValue,
+			onValueChange: t6,
+			children: t12
+		});
+		$[24] = selectedValue;
+		$[25] = t12;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = t13;
+	} else {
+		t13 = $[28];
+	}
+	let t14;
+	if ($[29] !== selectedValue || $[30] !== t13) {
+		t14 = /* @__PURE__ */ _jsx(RadioGroupValueContext.Provider, {
+			value: selectedValue,
+			children: t13
+		});
+		$[29] = selectedValue;
+		$[30] = t13;
+		$[31] = t14;
+	} else {
+		t14 = $[31];
+	}
+	return t14;
+}
+function _temp2(option) {
+	return /* @__PURE__ */ _jsx(RadioGroupOptionRow, { ...option }, option.value);
+}
+export { RadioGroup };

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

@@ -0,0 +1,30 @@
+/**
+ * Toggle for likes and similar reactions: the icon gets Arc's kick (https://uiarc.dev, MIT License, see
+ * THIRD_PARTY_NOTICES.md) when the viewer reacts and the counter rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+ */
+import { type ComponentType, type MouseEvent, type SVGProps } from "react";
+export interface ReactionButtonProps {
+    /** Accessible name, including the current count (for example "Me gusta 3"). */
+    ariaLabel: string;
+    isActive: boolean;
+    count: number;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    /** Icon of the reaction; it is filled with `activeColor` while active. */
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+    /**
+     * CSS color of the active icon, such as `var(--primary)` or `currentColor` to follow the
+     * button text. Defaults to the destructive color, the usual tone of a like.
+     */
+    activeColor?: string;
+    /** Formats the visible count, for example with a locale-aware compact format. */
+    formatCount?: (count: number) => string;
+    className?: string;
+}
+/**
+ * Renders an outline toggle button exposing its state with `aria-pressed`. Server-rendered and already-active
+ * reactions never kick on load; only a change to active does, and not at all with reduced motion.
+ * @param props - Accessible name, state, count, click handler and optional icon.
+ * @returns The reaction button.
+ */
+export declare function ReactionButton({ ariaLabel, isActive, count, onClick, isDisabled, icon: Icon, formatCount, activeColor, className, }: ReactionButtonProps): import("react").JSX.Element;

package/dist/components/reaction-button.js

@@ -0,0 +1,189 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Toggle for likes and similar reactions: the icon gets Arc's kick (https://uiarc.dev, MIT License, see
+* THIRD_PARTY_NOTICES.md) when the viewer reacts and the counter rolls in the direction of the change. The (optimistic) reaction state is owned by the caller.
+*/
+import { useEffect, useRef } from "react";
+import { HeartIcon } from "lucide-react";
+import { animate, motion, useMotionValue } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { AnimatedCount } from "./animated-count.js";
+import { ControlButton } from "./control-button.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+* Arc's kick: an impulse rather than a keyframe. The icon starts at rest with velocity, overshoots and settles, and a
+* quick second reaction adds to the running motion instead of restarting it.
+*/
+const REACTION_KICK = {
+	type: "spring",
+	stiffness: 420,
+	damping: 17
+};
+/** Scale velocity, per second, the kick gives the icon. */
+const REACTION_KICK_SCALE_VELOCITY = 11;
+/** Rotation velocity, in degrees per second, the kick gives the icon. */
+const REACTION_KICK_ROTATE_VELOCITY = -420;
+/**
+* Renders an outline toggle button exposing its state with `aria-pressed`. Server-rendered and already-active
+* reactions never kick on load; only a change to active does, and not at all with reduced motion.
+* @param props - Accessible name, state, count, click handler and optional icon.
+* @returns The reaction button.
+*/
+export function ReactionButton(t0) {
+	const $ = _c(32);
+	const { ariaLabel, isActive, count, onClick, isDisabled: t1, icon: t2, formatCount, activeColor, className } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const Icon = t2 === undefined ? HeartIcon : t2;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const scale = useMotionValue(1);
+	const rotate = useMotionValue(0);
+	const wasActive = useRef(isActive);
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[0] = t3;
+	} else {
+		t3 = $[0];
+	}
+	const kickControls = useRef(t3);
+	let t4;
+	let t5;
+	if ($[1] !== isActive || $[2] !== rotate || $[3] !== scale || $[4] !== shouldReduceMotion) {
+		t4 = () => {
+			const becameActive = isActive && !wasActive.current;
+			wasActive.current = isActive;
+			if (shouldReduceMotion) {
+				kickControls.current.forEach(_temp);
+				kickControls.current = [];
+				scale.jump(1);
+				rotate.jump(0);
+				return;
+			}
+			if (!becameActive) {
+				return;
+			}
+			kickControls.current = [animate(scale, 1, {
+				...REACTION_KICK,
+				velocity: scale.getVelocity() + REACTION_KICK_SCALE_VELOCITY
+			}), animate(rotate, 0, {
+				...REACTION_KICK,
+				velocity: rotate.getVelocity() + REACTION_KICK_ROTATE_VELOCITY
+			})];
+		};
+		t5 = [
+			isActive,
+			rotate,
+			scale,
+			shouldReduceMotion
+		];
+		$[1] = isActive;
+		$[2] = rotate;
+		$[3] = scale;
+		$[4] = shouldReduceMotion;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		t4 = $[5];
+		t5 = $[6];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[7] !== activeColor) {
+		t6 = activeColor ? { "--astra-reaction-active-color": activeColor } : undefined;
+		$[7] = activeColor;
+		$[8] = t6;
+	} else {
+		t6 = $[8];
+	}
+	const activeColorStyle = t6;
+	const t7 = isActive || undefined;
+	let t8;
+	if ($[9] !== className) {
+		t8 = cn("group/reaction", className);
+		$[9] = className;
+		$[10] = t8;
+	} else {
+		t8 = $[10];
+	}
+	let t9;
+	if ($[11] !== rotate || $[12] !== scale) {
+		t9 = {
+			scale,
+			rotate
+		};
+		$[11] = rotate;
+		$[12] = scale;
+		$[13] = t9;
+	} else {
+		t9 = $[13];
+	}
+	let t10;
+	if ($[14] !== Icon) {
+		t10 = /* @__PURE__ */ _jsx(Icon, { className: "size-4 transition-[fill,color] group-data-active/reaction:fill-current group-data-active/reaction:text-[var(--astra-reaction-active-color,var(--destructive))]" });
+		$[14] = Icon;
+		$[15] = t10;
+	} else {
+		t10 = $[15];
+	}
+	let t11;
+	if ($[16] !== t10 || $[17] !== t9) {
+		t11 = /* @__PURE__ */ _jsx(motion.span, {
+			"aria-hidden": true,
+			className: "inline-flex origin-center items-center justify-center",
+			style: t9,
+			children: t10
+		});
+		$[16] = t10;
+		$[17] = t9;
+		$[18] = t11;
+	} else {
+		t11 = $[18];
+	}
+	let t12;
+	if ($[19] !== count || $[20] !== formatCount) {
+		t12 = /* @__PURE__ */ _jsx(AnimatedCount, {
+			className: "min-w-[1ch]",
+			value: count,
+			format: formatCount
+		});
+		$[19] = count;
+		$[20] = formatCount;
+		$[21] = t12;
+	} else {
+		t12 = $[21];
+	}
+	let t13;
+	if ($[22] !== activeColorStyle || $[23] !== ariaLabel || $[24] !== isActive || $[25] !== isDisabled || $[26] !== onClick || $[27] !== t11 || $[28] !== t12 || $[29] !== t7 || $[30] !== t8) {
+		t13 = /* @__PURE__ */ _jsxs(ControlButton, {
+			"data-slot": "reaction-button",
+			"data-active": t7,
+			"aria-label": ariaLabel,
+			"aria-pressed": isActive,
+			className: t8,
+			disabled: isDisabled,
+			onClick,
+			style: activeColorStyle,
+			type: "button",
+			variant: "outline",
+			children: [t11, t12]
+		});
+		$[22] = activeColorStyle;
+		$[23] = ariaLabel;
+		$[24] = isActive;
+		$[25] = isDisabled;
+		$[26] = onClick;
+		$[27] = t11;
+		$[28] = t12;
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t13;
+	} else {
+		t13 = $[31];
+	}
+	return t13;
+}
+function _temp(controls) {
+	return controls.stop();
+}

package/dist/components/rich-link-editor.d.ts

@@ -0,0 +1,25 @@
+import type { RichLinkEditorController } from "../hooks/use-rich-link-editor.js";
+/** Copy for the link popover. Every entry is optional and defaults to Spanish. */
+export type RichLinkEditorCopy = {
+    editAction: string;
+    editCancel: string;
+    editSave: string;
+    popoverTextLabel: string;
+    popoverUrlLabel: string;
+    removeAction: string;
+};
+export type RichLinkEditorProps = {
+    ariaLabel: string;
+    copy?: Partial<RichLinkEditorCopy>;
+    editor: RichLinkEditorController;
+    placeholder: string;
+    ariaDescribedBy?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+/**
+ * `contentEditable` rich link editor: renders the controller's preview segments,
+ * turning each link into a popover that edits or removes it. All state lives in
+ * the `useRichLinkEditor` controller; this component is presentation only.
+ */
+export declare function RichLinkEditor({ ariaDescribedBy, ariaLabel, copy: copyOverrides, editor, isDisabled, isInvalid, placeholder, }: RichLinkEditorProps): import("react").JSX.Element;