@spear-ai/spectral 1.16.9 → 1.17.0

package/dist/RadialMenu.js

@@ -0,0 +1,331 @@
+'use client';
+import { ChevronDownIcon } from "./Icons/ChevronDownIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/components/RadialMenu/RadialMenu.tsx
+const BOUNCE_EASE = "motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]";
+const LABEL_SHADOW = "[text-shadow:0_0_5px_var(--color-text-inverted),0_0_5px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_22px_var(--color-text-inverted)]";
+const CLOSE_MS = 260;
+const LEVEL_MS = 200;
+const LABEL_OFFSET = 30;
+const PRIMARY_RADIUS = 70;
+const SUB_RADIUS = 96;
+const ITEM_REACH = 44;
+const VIEWPORT_MARGIN = 16;
+const clamp = (value, min, max) => min > max ? (min + max) / 2 : Math.min(Math.max(value, min), max);
+const runAfterPaint = (callback) => {
+	let inner = 0;
+	const outer = requestAnimationFrame(() => {
+		inner = requestAnimationFrame(callback);
+	});
+	return () => {
+		cancelAnimationFrame(outer);
+		cancelAnimationFrame(inner);
+	};
+};
+const positionForIndex = (index, count, radius) => {
+	const angle = -Math.PI / 2 + index * 2 * Math.PI / count;
+	return {
+		x: Math.cos(angle) * radius,
+		y: Math.sin(angle) * radius
+	};
+};
+const SUB_ARC_CENTER = -Math.PI / 2;
+const SUB_ARC_SPAN = Math.PI * .7;
+const positionOnArc = (index, count, radius) => {
+	const angle = count <= 1 ? SUB_ARC_CENTER : SUB_ARC_CENTER - SUB_ARC_SPAN / 2 + index / (count - 1) * SUB_ARC_SPAN;
+	return {
+		x: Math.cos(angle) * radius,
+		y: Math.sin(angle) * radius
+	};
+};
+const RadialMenu = ({ ariaLabel, backLabel = "Back", className, dataTestId, items, onClose, position, ref }) => {
+	const resolvedTestId = dataTestId ?? "spectral-radial-menu";
+	const containerRef = useRef(null);
+	const levelTimersRef = useRef([]);
+	const [activeSubmenuId, setActiveSubmenuId] = useState(null);
+	const [highlightIndex, setHighlightIndex] = useState(-1);
+	const [renderCenter, setRenderCenter] = useState(position);
+	const [expanded, setExpanded] = useState(false);
+	const [spreadOrigin, setSpreadOrigin] = useState({
+		x: 0,
+		y: 0
+	});
+	const [backSkin, setBackSkin] = useState(null);
+	const [returningId, setReturningId] = useState(null);
+	const clearLevelTimers = useCallback(() => {
+		levelTimersRef.current.forEach((id) => clearTimeout(id));
+		levelTimersRef.current = [];
+	}, []);
+	useEffect(() => {
+		clearLevelTimers();
+		if (position !== null) {
+			setRenderCenter(position);
+			setActiveSubmenuId(null);
+			setHighlightIndex(-1);
+			setSpreadOrigin({
+				x: 0,
+				y: 0
+			});
+			setBackSkin(null);
+			setReturningId(null);
+			setExpanded(false);
+			return runAfterPaint(() => {
+				setExpanded(true);
+				containerRef.current?.focus();
+			});
+		}
+		setExpanded(false);
+		setSpreadOrigin({
+			x: 0,
+			y: 0
+		});
+		const timer = setTimeout(() => {
+			setRenderCenter(null);
+			setBackSkin(null);
+		}, CLOSE_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [clearLevelTimers, position]);
+	useEffect(() => {
+		if (position === null) return () => {};
+		window.addEventListener("scroll", onClose, true);
+		window.addEventListener("resize", onClose);
+		return () => {
+			window.removeEventListener("scroll", onClose, true);
+			window.removeEventListener("resize", onClose);
+		};
+	}, [position, onClose]);
+	const renderCenterRef = useRef(renderCenter);
+	renderCenterRef.current = renderCenter;
+	useEffect(() => {
+		if (renderCenterRef.current === null) return () => {};
+		return runAfterPaint(() => {
+			setExpanded(true);
+		});
+	}, [activeSubmenuId]);
+	useEffect(() => clearLevelTimers, [clearLevelTimers]);
+	const activeItems = useMemo(() => {
+		if (activeSubmenuId === null) return items;
+		return items.find((item) => item.id === activeSubmenuId)?.items ?? items;
+	}, [activeSubmenuId, items]);
+	const activate = useCallback((item) => {
+		if (item.disabled === true) return;
+		if (item.items && item.items.length > 0) {
+			clearLevelTimers();
+			const offset = positionForIndex(items.findIndex((candidate) => candidate.id === item.id), items.length, PRIMARY_RADIUS);
+			setSpreadOrigin(offset);
+			setReturningId(null);
+			setBackSkin({
+				item: {
+					...item,
+					description: void 0,
+					icon: /* @__PURE__ */ jsx(ChevronDownIcon, {
+						className: "rotate-90",
+						size: 20
+					}),
+					id: `${item.id}__back`,
+					items: void 0,
+					label: backLabel
+				},
+				offset
+			});
+			setActiveSubmenuId(item.id);
+			setHighlightIndex(-1);
+			setExpanded(false);
+			return;
+		}
+		item.onSelect?.();
+		onClose();
+	}, [
+		backLabel,
+		clearLevelTimers,
+		items,
+		onClose
+	]);
+	const goBack = useCallback(() => {
+		const returningSubmenuId = activeSubmenuId;
+		const index = items.findIndex((candidate) => candidate.id === returningSubmenuId);
+		setSpreadOrigin(index >= 0 ? positionForIndex(index, items.length, PRIMARY_RADIUS) : {
+			x: 0,
+			y: 0
+		});
+		setExpanded(false);
+		setHighlightIndex(-1);
+		clearLevelTimers();
+		levelTimersRef.current = [window.setTimeout(() => {
+			if (renderCenterRef.current === null) return;
+			setActiveSubmenuId(null);
+			setBackSkin(null);
+			setReturningId(returningSubmenuId);
+		}, LEVEL_MS), window.setTimeout(() => {
+			if (renderCenterRef.current !== null) setReturningId(null);
+		}, LEVEL_MS + 350)];
+	}, [
+		activeSubmenuId,
+		clearLevelTimers,
+		items
+	]);
+	const handleKeyDown = useCallback((event) => {
+		const count = activeItems.length;
+		if (count === 0) return;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				event.preventDefault();
+				setHighlightIndex((index) => index < 0 ? 0 : (index + 1) % count);
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				event.preventDefault();
+				setHighlightIndex((index) => index < 0 ? count - 1 : (index - 1 + count) % count);
+				break;
+			case "Enter":
+			case " ": {
+				event.preventDefault();
+				const item = activeItems[highlightIndex];
+				if (item) activate(item);
+				break;
+			}
+			case "Escape":
+				event.preventDefault();
+				if (activeSubmenuId === null) onClose();
+				else goBack();
+				break;
+			case "Tab":
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}, [
+		activate,
+		activeItems,
+		activeSubmenuId,
+		goBack,
+		highlightIndex,
+		onClose
+	]);
+	if (renderCenter === null || typeof document === "undefined") return null;
+	const inSubmenu = activeSubmenuId !== null;
+	const parentIndex = inSubmenu ? items.findIndex((item) => item.id === activeSubmenuId) : -1;
+	const base = (parentIndex >= 0 ? items[parentIndex] ?? null : null) === null ? {
+		x: 0,
+		y: 0
+	} : positionForIndex(parentIndex, items.length, PRIMARY_RADIUS);
+	const ringRadius = inSubmenu ? SUB_RADIUS : PRIMARY_RADIUS;
+	const reach = (inSubmenu ? PRIMARY_RADIUS + SUB_RADIUS : PRIMARY_RADIUS) + ITEM_REACH;
+	const cx = clamp(renderCenter.x, reach + VIEWPORT_MARGIN, window.innerWidth - reach - VIEWPORT_MARGIN);
+	const cy = clamp(renderCenter.y, reach + VIEWPORT_MARGIN, window.innerHeight - reach - VIEWPORT_MARGIN);
+	const renderSpoke = (options) => {
+		const { delay = 0, isActive = false, isHighlighted = false, item, nonInteractive = false, onClick, opacity, testId, x, y } = options;
+		const hasSubmenu = Boolean(item.items && item.items.length > 0);
+		const circle = /* @__PURE__ */ jsxs("button", {
+			"aria-disabled": item.disabled,
+			"aria-haspopup": hasSubmenu ? "menu" : void 0,
+			"aria-label": item.label,
+			className: cn("size-12 absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full", "border border-border-primary bg-popover-bg text-popover-text shadow-elevation-3", "hover:scale-110 hover:cursor-pointer hover:border-toggle-border hover:bg-level-three", "motion-safe:transition-[left,top,opacity,transform] motion-safe:duration-300", BOUNCE_EASE, (isHighlighted || isActive) && "border-toggle-border bg-level-three", isHighlighted && "scale-110", item.destructive === true && "text-danger-300", item.disabled === true && "pointer-events-none hover:scale-100", nonInteractive && "pointer-events-none"),
+			"data-testid": testId,
+			disabled: item.disabled,
+			onClick,
+			role: "menuitem",
+			style: {
+				left: x,
+				opacity,
+				top: y,
+				transitionDelay: `${delay}ms`
+			},
+			type: "button",
+			children: [item.icon, hasSubmenu && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "size-4 -right-0.5 -top-0.5 font-semibold absolute flex items-center justify-center rounded-full border border-border-primary bg-level-four text-[9px] leading-none text-text-primary tabular-nums",
+				"data-testid": `${testId}-submenu-count`,
+				children: item.items?.length
+			})]
+		});
+		return /* @__PURE__ */ jsxs(Fragment, { children: [item.description ? /* @__PURE__ */ jsxs(Tooltip, {
+			delayDuration: 400,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: circle
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: item.description })]
+		}) : circle, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("w-20 font-medium leading-tight pointer-events-none absolute -translate-x-1/2 text-center text-[10px]", LABEL_SHADOW, "motion-safe:transition-[left,top,opacity] motion-safe:duration-300", BOUNCE_EASE, item.destructive === true ? "text-danger-300" : "text-text-primary"),
+			"data-testid": `${testId}-label`,
+			style: {
+				left: x,
+				opacity,
+				top: y + LABEL_OFFSET,
+				transitionDelay: `${delay}ms`
+			},
+			children: item.label
+		})] }, item.id);
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "inset-0 fixed z-50 motion-safe:duration-150 motion-safe:animate-in motion-safe:fade-in-0",
+		"data-testid": resolvedTestId,
+		onContextMenu: (event) => {
+			event.preventDefault();
+		},
+		onPointerDown: (event) => {
+			if (event.target === event.currentTarget) onClose();
+		},
+		ref,
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-label": ariaLabel,
+			className: cn("focus-visible:ring-ring absolute origin-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", className),
+			"data-testid": `${resolvedTestId}-menu`,
+			onKeyDown: handleKeyDown,
+			ref: containerRef,
+			role: "menu",
+			style: {
+				left: cx,
+				top: cy
+			},
+			tabIndex: -1,
+			children: [
+				!inSubmenu && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "size-1.5 absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-text-secondary opacity-60",
+					"data-testid": `${resolvedTestId}-center`
+				}),
+				backSkin !== null && renderSpoke({
+					isActive: true,
+					item: backSkin.item,
+					nonInteractive: !inSubmenu,
+					onClick: goBack,
+					opacity: inSubmenu ? 1 : 0,
+					testId: `${resolvedTestId}-back`,
+					x: backSkin.offset.x,
+					y: backSkin.offset.y
+				}),
+				activeItems.map((item, index) => {
+					const offset = inSubmenu ? positionOnArc(index, activeItems.length, ringRadius) : positionForIndex(index, activeItems.length, ringRadius);
+					const settled = expanded || item.id === returningId;
+					return renderSpoke({
+						delay: item.id === returningId ? 0 : expanded ? index * 25 : 0,
+						isHighlighted: index === highlightIndex,
+						item,
+						onClick: () => {
+							activate(item);
+						},
+						opacity: settled ? item.disabled === true ? .4 : 1 : 0,
+						testId: `${resolvedTestId}-item`,
+						x: settled ? base.x + offset.x : spreadOrigin.x,
+						y: settled ? base.y + offset.y : spreadOrigin.y
+					});
+				})
+			]
+		})
+	}), document.body);
+};
+RadialMenu.displayName = "RadialMenu";
+
+//#endregion
+export { RadialMenu };
+//# sourceMappingURL=RadialMenu.js.map

package/dist/RadialMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialMenu.js","names":[],"sources":["../src/components/RadialMenu/RadialMenu.tsx"],"sourcesContent":["import { ChevronDownIcon } from '@components/Icons'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@components/Tooltip/Tooltip'\nimport { cn } from '@utils/twUtils'\nimport { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type Ref } from 'react'\nimport { createPortal } from 'react-dom'\n\nexport interface RadialMenuItem {\n  /** Optional longer description shown in a tooltip on hover, since labels are kept short. */\n  description?: string\n  destructive?: boolean\n  disabled?: boolean\n  icon: ReactNode\n  id: string\n  items?: RadialMenuItem[]\n  label: string\n  onSelect?: () => void\n}\n\nexport interface RadialMenuProps {\n  ariaLabel: string\n  backLabel?: string\n  className?: string\n  dataTestId?: string\n  items: RadialMenuItem[]\n  onClose: () => void\n  position: { x: number; y: number } | null\n}\n\nconst BOUNCE_EASE = 'motion-safe:ease-[cubic-bezier(0.34,1.56,0.64,1)]'\n// Stacked soft shadows form a dense-but-soft halo so labels stay legible over any background.\nconst LABEL_SHADOW =\n  '[text-shadow:0_0_5px_var(--color-text-inverted),0_0_5px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_10px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_16px_var(--color-text-inverted),0_0_22px_var(--color-text-inverted)]'\nconst CLOSE_MS = 260\nconst LEVEL_MS = 200\nconst LABEL_OFFSET = 30\nconst PRIMARY_RADIUS = 70\nconst SUB_RADIUS = 96\nconst ITEM_REACH = 44\nconst VIEWPORT_MARGIN = 16\n\n// When the menu is larger than the viewport (min > max), center it; otherwise clamp normally.\nconst clamp = (value: number, min: number, max: number) => (min > max ? (min + max) / 2 : Math.min(Math.max(value, min), max))\n\n// Double rAF so the collapsed \"from\" state paints before the transition target is applied.\nconst runAfterPaint = (callback: () => void) => {\n  let inner = 0\n  const outer = requestAnimationFrame(() => {\n    inner = requestAnimationFrame(callback)\n  })\n  return () => {\n    cancelAnimationFrame(outer)\n    cancelAnimationFrame(inner)\n  }\n}\n\nconst positionForIndex = (index: number, count: number, radius: number) => {\n  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / count\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\n// Fanned across an arc centered straight up, so a sub-ring arches above its parent.\nconst SUB_ARC_CENTER = -Math.PI / 2\nconst SUB_ARC_SPAN = Math.PI * 0.7\nconst positionOnArc = (index: number, count: number, radius: number) => {\n  const angle = count <= 1 ? SUB_ARC_CENTER : SUB_ARC_CENTER - SUB_ARC_SPAN / 2 + (index / (count - 1)) * SUB_ARC_SPAN\n  return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }\n}\n\nexport const RadialMenu = ({ ariaLabel, backLabel = 'Back', className, dataTestId, items, onClose, position, ref }: RadialMenuProps & { ref?: Ref<HTMLDivElement> }) => {\n  const resolvedTestId = dataTestId ?? 'spectral-radial-menu'\n  const containerRef = useRef<HTMLDivElement>(null)\n  const levelTimersRef = useRef<number[]>([])\n  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null)\n  const [highlightIndex, setHighlightIndex] = useState(-1)\n  // Items animate between `spreadOrigin` (collapsed) and `base + ring offset` (expanded).\n  const [renderCenter, setRenderCenter] = useState(position)\n  const [expanded, setExpanded] = useState(false)\n  const [spreadOrigin, setSpreadOrigin] = useState<{ x: number; y: number }>({ x: 0, y: 0 })\n  // Parent re-skinned as a back control, kept mounted so it swaps cleanly with the real item.\n  const [backSkin, setBackSkin] = useState<{ item: RadialMenuItem; offset: { x: number; y: number } } | null>(null)\n  // The returned item appears instantly at its spot (swapping in for the chevron) rather than fading.\n  const [returningId, setReturningId] = useState<string | null>(null)\n\n  const clearLevelTimers = useCallback(() => {\n    levelTimersRef.current.forEach((id) => clearTimeout(id))\n    levelTimersRef.current = []\n  }, [])\n\n  useEffect(() => {\n    // Cancel any in-flight level-change timers so a stale callback can't mutate a new cycle.\n    clearLevelTimers()\n    if (position !== null) {\n      setRenderCenter(position)\n      setActiveSubmenuId(null)\n      setHighlightIndex(-1)\n      setSpreadOrigin({ x: 0, y: 0 })\n      setBackSkin(null)\n      setReturningId(null)\n      setExpanded(false)\n      return runAfterPaint(() => {\n        setExpanded(true)\n        containerRef.current?.focus()\n      })\n    }\n    setExpanded(false)\n    // Collapse to the center, not the lingering sub-ring origin, so close mirrors open.\n    setSpreadOrigin({ x: 0, y: 0 })\n    const timer = setTimeout(() => {\n      setRenderCenter(null)\n      setBackSkin(null)\n    }, CLOSE_MS)\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [clearLevelTimers, position])\n\n  useEffect(() => {\n    if (position === null) {\n      return () => {}\n    }\n    window.addEventListener('scroll', onClose, true)\n    window.addEventListener('resize', onClose)\n    return () => {\n      window.removeEventListener('scroll', onClose, true)\n      window.removeEventListener('resize', onClose)\n    }\n  }, [position, onClose])\n\n  const renderCenterRef = useRef(renderCenter)\n  renderCenterRef.current = renderCenter\n  useEffect(() => {\n    if (renderCenterRef.current === null) {\n      return () => {}\n    }\n    return runAfterPaint(() => {\n      setExpanded(true)\n    })\n  }, [activeSubmenuId])\n\n  useEffect(() => clearLevelTimers, [clearLevelTimers])\n\n  const activeItems = useMemo(() => {\n    if (activeSubmenuId === null) return items\n    return items.find((item) => item.id === activeSubmenuId)?.items ?? items\n  }, [activeSubmenuId, items])\n\n  const activate = useCallback(\n    (item: RadialMenuItem) => {\n      if (item.disabled === true) return\n      if (item.items && item.items.length > 0) {\n        clearLevelTimers()\n        const index = items.findIndex((candidate) => candidate.id === item.id)\n        const offset = positionForIndex(index, items.length, PRIMARY_RADIUS)\n        setSpreadOrigin(offset)\n        setReturningId(null)\n        setBackSkin({\n          item: {\n            ...item,\n            description: undefined,\n            icon: (\n              <ChevronDownIcon\n                className='rotate-90'\n                size={20}\n              />\n            ),\n            id: `${item.id}__back`,\n            items: undefined,\n            label: backLabel,\n          },\n          offset,\n        })\n        setActiveSubmenuId(item.id)\n        setHighlightIndex(-1)\n        setExpanded(false)\n        return\n      }\n      item.onSelect?.()\n      onClose()\n    },\n    [backLabel, clearLevelTimers, items, onClose],\n  )\n\n  const goBack = useCallback(() => {\n    const returningSubmenuId = activeSubmenuId\n    const index = items.findIndex((candidate) => candidate.id === returningSubmenuId)\n    setSpreadOrigin(index >= 0 ? positionForIndex(index, items.length, PRIMARY_RADIUS) : { x: 0, y: 0 })\n    setExpanded(false)\n    setHighlightIndex(-1)\n    clearLevelTimers()\n    levelTimersRef.current = [\n      window.setTimeout(() => {\n        if (renderCenterRef.current === null) return\n        setActiveSubmenuId(null)\n        setBackSkin(null)\n        setReturningId(returningSubmenuId)\n      }, LEVEL_MS),\n      window.setTimeout(() => {\n        if (renderCenterRef.current !== null) {\n          setReturningId(null)\n        }\n      }, LEVEL_MS + 350),\n    ]\n  }, [activeSubmenuId, clearLevelTimers, items])\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const count = activeItems.length\n      if (count === 0) return\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? 0 : (index + 1) % count))\n          break\n        }\n        case 'ArrowLeft':\n        case 'ArrowUp': {\n          event.preventDefault()\n          setHighlightIndex((index) => (index < 0 ? count - 1 : (index - 1 + count) % count))\n          break\n        }\n        case 'Enter':\n        case ' ': {\n          event.preventDefault()\n          const item = activeItems[highlightIndex]\n          if (item) activate(item)\n          break\n        }\n        case 'Escape': {\n          event.preventDefault()\n          if (activeSubmenuId === null) {\n            onClose()\n          } else {\n            goBack()\n          }\n          break\n        }\n        case 'Tab': {\n          event.preventDefault()\n          break\n        }\n        default: {\n          break\n        }\n      }\n    },\n    [activate, activeItems, activeSubmenuId, goBack, highlightIndex, onClose],\n  )\n\n  if (renderCenter === null || typeof document === 'undefined') {\n    return null\n  }\n\n  const inSubmenu = activeSubmenuId !== null\n  const parentIndex = inSubmenu ? items.findIndex((item) => item.id === activeSubmenuId) : -1\n  const parentItem = parentIndex >= 0 ? (items[parentIndex] ?? null) : null\n  const base = parentItem === null ? { x: 0, y: 0 } : positionForIndex(parentIndex, items.length, PRIMARY_RADIUS)\n  const ringRadius = inSubmenu ? SUB_RADIUS : PRIMARY_RADIUS\n\n  const reach = (inSubmenu ? PRIMARY_RADIUS + SUB_RADIUS : PRIMARY_RADIUS) + ITEM_REACH\n  const cx = clamp(renderCenter.x, reach + VIEWPORT_MARGIN, window.innerWidth - reach - VIEWPORT_MARGIN)\n  const cy = clamp(renderCenter.y, reach + VIEWPORT_MARGIN, window.innerHeight - reach - VIEWPORT_MARGIN)\n\n  const renderSpoke = (options: { delay?: number; isActive?: boolean; isHighlighted?: boolean; item: RadialMenuItem; nonInteractive?: boolean; onClick: () => void; opacity: number; testId: string; x: number; y: number }) => {\n    const { delay = 0, isActive = false, isHighlighted = false, item, nonInteractive = false, onClick, opacity, testId, x, y } = options\n    const hasSubmenu = Boolean(item.items && item.items.length > 0)\n    const circle = (\n      <button\n        aria-disabled={item.disabled}\n        aria-haspopup={hasSubmenu ? 'menu' : undefined}\n        aria-label={item.label}\n        className={cn(\n          'size-12 absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full',\n          'border border-border-primary bg-popover-bg text-popover-text shadow-elevation-3',\n          'hover:scale-110 hover:cursor-pointer hover:border-toggle-border hover:bg-level-three',\n          'motion-safe:transition-[left,top,opacity,transform] motion-safe:duration-300',\n          BOUNCE_EASE,\n          (isHighlighted || isActive) && 'border-toggle-border bg-level-three',\n          isHighlighted && 'scale-110',\n          item.destructive === true && 'text-danger-300',\n          item.disabled === true && 'pointer-events-none hover:scale-100',\n          nonInteractive && 'pointer-events-none',\n        )}\n        data-testid={testId}\n        disabled={item.disabled}\n        onClick={onClick}\n        role='menuitem'\n        style={{ left: x, opacity, top: y, transitionDelay: `${delay}ms` }}\n        type='button'\n      >\n        {item.icon}\n        {hasSubmenu && (\n          <span\n            aria-hidden\n            className='size-4 -right-0.5 -top-0.5 font-semibold absolute flex items-center justify-center rounded-full border border-border-primary bg-level-four text-[9px] leading-none text-text-primary tabular-nums'\n            data-testid={`${testId}-submenu-count`}\n          >\n            {item.items?.length}\n          </span>\n        )}\n      </button>\n    )\n    return (\n      <Fragment key={item.id}>\n        {item.description ? (\n          <Tooltip delayDuration={400}>\n            <TooltipTrigger asChild>{circle}</TooltipTrigger>\n            <TooltipContent>{item.description}</TooltipContent>\n          </Tooltip>\n        ) : (\n          circle\n        )}\n        <span\n          aria-hidden\n          className={cn(\n            'w-20 font-medium leading-tight pointer-events-none absolute -translate-x-1/2 text-center text-[10px]',\n            LABEL_SHADOW,\n            'motion-safe:transition-[left,top,opacity] motion-safe:duration-300',\n            BOUNCE_EASE,\n            item.destructive === true ? 'text-danger-300' : 'text-text-primary',\n          )}\n          data-testid={`${testId}-label`}\n          style={{ left: x, opacity, top: y + LABEL_OFFSET, transitionDelay: `${delay}ms` }}\n        >\n          {item.label}\n        </span>\n      </Fragment>\n    )\n  }\n\n  return createPortal(\n    <div\n      className='inset-0 fixed z-50 motion-safe:duration-150 motion-safe:animate-in motion-safe:fade-in-0'\n      data-testid={resolvedTestId}\n      onContextMenu={(event) => {\n        event.preventDefault()\n      }}\n      onPointerDown={(event) => {\n        if (event.target === event.currentTarget) {\n          onClose()\n        }\n      }}\n      ref={ref}\n    >\n      <div\n        aria-label={ariaLabel}\n        className={cn('focus-visible:ring-ring absolute origin-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none', className)}\n        data-testid={`${resolvedTestId}-menu`}\n        onKeyDown={handleKeyDown}\n        ref={containerRef}\n        role='menu'\n        style={{ left: cx, top: cy }}\n        tabIndex={-1}\n      >\n        {!inSubmenu && (\n          <span\n            aria-hidden\n            className='size-1.5 absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-text-secondary opacity-60'\n            data-testid={`${resolvedTestId}-center`}\n          />\n        )}\n        {backSkin !== null &&\n          renderSpoke({\n            isActive: true,\n            item: backSkin.item,\n            nonInteractive: !inSubmenu,\n            onClick: goBack,\n            opacity: inSubmenu ? 1 : 0,\n            testId: `${resolvedTestId}-back`,\n            x: backSkin.offset.x,\n            y: backSkin.offset.y,\n          })}\n        {activeItems.map((item, index) => {\n          const offset = inSubmenu ? positionOnArc(index, activeItems.length, ringRadius) : positionForIndex(index, activeItems.length, ringRadius)\n          const settled = expanded || item.id === returningId\n          return renderSpoke({\n            delay: item.id === returningId ? 0 : expanded ? index * 25 : 0,\n            isHighlighted: index === highlightIndex,\n            item,\n            onClick: () => {\n              activate(item)\n            },\n            opacity: settled ? (item.disabled === true ? 0.4 : 1) : 0,\n            testId: `${resolvedTestId}-item`,\n            x: settled ? base.x + offset.x : spreadOrigin.x,\n            y: settled ? base.y + offset.y : spreadOrigin.y,\n          })\n        })}\n      </div>\n    </div>,\n    document.body,\n  )\n}\n\nRadialMenu.displayName = 'RadialMenu'\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 'use client';
 import { Accordion, AccordionProps } from "./Accordion.js";
 import { Alert, AlertProps } from "./Alert.js";
+import { AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPopupProps, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, AlertDialogTriggerProps } from "./AlertDialog.js";
 import { Avatar, AvatarProps } from "./Avatar.js";
 import { Badge, BadgeProps } from "./Badge.js";
 import { Button, ButtonProps } from "./Button.js";
@@ -110,6 +111,7 @@ import { Kbd, KbdGroup, KbdGroupProps, KbdProps, KbdSymbol } from "./Kbd.js";
 import { Label, LabelProps } from "./Label.js";
 import { MultiSelect, MultiSelectProps } from "./MultiSelect.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.js";
+import { RadialMenu, RadialMenuItem, RadialMenuProps } from "./RadialMenu.js";
 import { RadioButton, RadioButtonProps } from "./RadioButton.js";
 import { RadioButtonGroup, RadioButtonGroupItem, RadioButtonGroupItemProps, RadioButtonGroupProps } from "./RadioButtonGroup.js";
 import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.js";
@@ -132,4 +134,4 @@ import { useControllableState } from "./hooks/useControllableState.js";
 import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./primitives/input-group.js";
 import { cn } from "./utils/twUtils.js";
-export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, InputSearch, type InputSearchOption, type InputSearchProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, SyncIcon, SyncOffIcon, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, type AccordionProps, AdjustmentsIcon, Alert, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, type AlertDialogPopupProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, type AvatarProps, Badge, type BadgeProps, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, type ButtonGroupProps, ButtonGroupSeparator, ButtonIcon, type ButtonIconProps, ButtonIconSlideout, type ButtonIconSlideoutProps, type ButtonProps, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, type CheckboxProps, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, type ComboboxOption, type ComboboxProps, ControlGroupSelect, type ControlGroupSelectCaptionLayout, type ControlGroupSelectProps, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, type DataCardProps, DatabaseIcon, DateTimePicker, type DateTimePickerProps, DeleteIcon, Dialog, Drawer, type DrawerProps, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, type FormFieldMessageValue, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, type HoverCardProps, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, type InputNumericProps, InputOTP, type InputOTPBaseProps, type InputOTPProps, type InputProps, InputSearch, type InputSearchOption, type InputSearchProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, type KbdSymbol, KeyboardIcon, Label, LabelIcon, type LabelProps, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, type MultiSelectProps, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadialMenu, type RadialMenuItem, type RadialMenuProps, RadioButton, RadioButtonGroup, RadioButtonGroupItem, type RadioButtonGroupItemProps, type RadioButtonGroupProps, type RadioButtonProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, type SelectExtendedProps, type SelectProps, Separator, type SeparatorProps, SettingsIcon, Skeleton, Slider, type SliderProps, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, type SpectralProviderProps, StackIcon, StarIcon, SvgIdContext, Switch, type SwitchProps, SyncIcon, SyncOffIcon, Tabs, type TabsProps, Textarea, type TextareaProps, Toast, type ToastProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, ToggleGroupSplitMenuItem, type ToggleGroupSplitMenuItemProps, type ToggleProps, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, type TrayBaseProps, type TrayBodyProps, type TrayContentProps, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/index.js

@@ -88,9 +88,10 @@ import { useAccordionAutoScroll } from "./hooks/useAccordionAutoScroll.js";
 import { cn } from "./utils/twUtils.js";
 import { Accordion } from "./Accordion.js";
 import { Alert } from "./Alert.js";
+import { Button } from "./Button.js";
+import { AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.js";
 import { Avatar } from "./Avatar.js";
 import { Badge } from "./Badge.js";
-import { Button } from "./Button.js";
 import { Separator } from "./Separator.js";
 import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator } from "./ButtonGroup.js";
 import { ButtonIcon } from "./ButtonIcon.js";
@@ -116,6 +117,8 @@ import { InputOTP } from "./InputOTP.js";
 import { InputSearch } from "./InputSearch.js";
 import { Kbd, KbdGroup } from "./Kbd.js";
 import { MultiSelect } from "./MultiSelect.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
+import { RadialMenu } from "./RadialMenu.js";
 import { RadioButtonGroup, RadioButtonGroupItem } from "./RadioButtonGroup.js";
 import { RadioButton } from "./RadioButton.js";
 import { RadioGroup, RadioGroupItem } from "./RadioGroup.js";
@@ -130,7 +133,6 @@ import { Toggle } from "./Toggle.js";
 import { ToggleGroupItem } from "./ToggleGroup/ToggleGroupItem.js";
 import { ToggleGroupSplitMenuItem } from "./ToggleGroup/ToggleGroupSplitMenuItem.js";
 import { ToggleGroup } from "./ToggleGroup.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./Tooltip.js";
 import { Tray } from "./Tray.js";
 
-export { Accordion, AdjustmentsIcon, Alert, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, InputSearch, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, SyncIcon, SyncOffIcon, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };
+export { Accordion, AdjustmentsIcon, Alert, AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, AnalyzeIcon, AnnotationsIcon, ApprovedIcon, ArrowDownIcon, ArrowUpIcon, Avatar, Badge, BoxToolIcon, Button, ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonIcon, ButtonIconSlideout, CalendarIcon, CheckCircleIcon, CheckSquareIcon, Checkbox, CheckmarkIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, CloseIcon, Combobox, ControlGroupSelect, Crosshairs2Icon, CrosshairsIcon, DashboardIcon, DataCard, DatabaseIcon, DateTimePicker, DeleteIcon, Dialog, Drawer, DurationIcon, EditIcon, EmailIcon, EraserIcon, ErrorIcon, ErrorMessage, EyeClosedIcon, EyeClosedIcon2, EyeOpenIcon, FileDownloadIcon, GoToFirstIcon, GoToLastIcon, HarmonicCursorsIcon, HoverCard, HoverCardContent, HoverCardTrigger, IconBase, InfoIcon, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputNumeric, InputOTP, InputSearch, Kbd, KbdGroup, KeyboardIcon, Label, LabelIcon, LassoIcon, LineToolIcon, LinkIcon, LiveViewIcon, LoaderIcon, LocationIcon, LogoutIcon, MaximizeIcon, MeasureIcon, MenuDotsIcon, MenuIcon, MessagesIcon, MetadataIcon, MinimizeIcon, MinusIcon, MultiSelect, OntologyIcon, PanelIconClose, PanelIconOpen, PauseIcon, PlayIcon, PlusIcon, PolygonIcon, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrinterIcon, ProgressCheckIcon, RadialMenu, RadioButton, RadioButtonGroup, RadioButtonGroupItem, RadioGroup, RadioGroupItem, ResetIcon, ReviewedIcon, ScissorsIcon, SearchIcon, Select, Separator, SettingsIcon, Skeleton, Slider, SortAscendingIcon, SortAtoZIcon, SortDescendingIcon, SortZtoAIcon, SparklesIcon, SpectralProvider, StackIcon, StarIcon, SvgIdContext, Switch, SyncIcon, SyncOffIcon, Tabs, Textarea, Toast, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSplitMenuItem, Tooltip, TooltipContent, TooltipTrigger, TrashIcon, Tray, UndoIcon, UnlinkIcon, UploadIcon, User2Icon, UserIcon, WarningIcon, WarningMessage, ZoomAllIcon, ZoomXIcon, ZoomYIcon, cn, toast, useAccordionAutoScroll, useControllableState, useUncontrolledState };

package/dist/styles/horizon/colors.css

@@ -73,41 +73,49 @@
   --color-badge-destructive-bg: var(--horizon-color-danger-400);
   --color-badge-destructive-border: var(--horizon-color-danger-400);
 
-  --color-button-primary-bg: var(--horizon-color-accent);
-  --color-button-primary-bg--hover: var(--horizon-color-level-two);
-  --color-button-primary-bg--disabled: var(--horizon-color-neutral-500);
-  --color-button-primary-border: var(--horizon-color-accent);
-  --color-button-primary-border--hover: var(--horizon-color-level-two);
+  --color-button-primary-bg: oklch(from var(--horizon-color-accent) l c h / 0.2);
+  --color-button-primary-bg--hover: oklch(from var(--horizon-color-accent) l c h / 0.4);
+  --color-button-primary-bg--disabled: oklch(from var(--horizon-color-level-four) l c h / 0.3);
+  --color-button-primary-bg--loading: oklch(from var(--horizon-color-level-four) l c h / 0.3);
+  --color-button-primary-border: oklch(from var(--horizon-color-accent) l c h / 0.8);
   --color-button-primary-border--disabled: var(--horizon-color-neutral-500);
-  --color-button-primary-text: var(--horizon-color-neutral-900);
+  --color-button-primary-border--loading: var(--horizon-color-neutral-500);
+  --color-button-primary-text: var(--horizon-color-accent);
   --color-button-primary-text--hover: var(--horizon-color-accent);
-  --color-button-primary-text--disabled: var(--horizon-color-neutral-200);
-
-  --color-button-secondary-bg: var(--horizon-color-level-two);
-  --color-button-secondary-bg--hover: var(--horizon-color-accent);
-  --color-button-secondary-bg--disabled: var(--horizon-color-neutral-500);
+  --color-button-primary-text--disabled: var(--horizon-color-neutral-400);
+  --color-button-primary-text--loading: var(--horizon-color-neutral-400);
+
+  --color-button-secondary-bg: var(--horizon-color-transparent);
+  --color-button-secondary-bg--hover: oklch(from var(--horizon-color-neutral-50) l c h / 0.2);
+  --color-button-secondary-bg--disabled: oklch(from var(--horizon-color-level-four) l c h / 0.3);
+  --color-button-secondary-bg--loading: var(--horizon-color-transparent);
+  --color-button-secondary-border: var(--horizon-color-neutral-50);
+  --color-button-secondary-border--hover: var(--horizon-color-neutral-50);
+  --color-button-secondary-border--disabled: var(--horizon-color-neutral-600);
+  --color-button-secondary-border--loading: var(--horizon-color-neutral-600);
   --color-button-secondary-text: var(--horizon-color-neutral-50);
-  --color-button-secondary-text--hover: var(--horizon-color-level-two);
-  --color-button-secondary-text--disabled: var(--horizon-color-neutral-200);
-  --color-button-secondary-border: var(--horizon-color-neutral-900);
-  --color-button-secondary-border--disabled: var(--horizon-color-neutral-500);
-
-  --color-button-outline-bg: var(--horizon-color-transparent);
-  --color-button-outline-bg--hover: var(--horizon-color-level-two);
-  --color-button-outline-text: var(--horizon-color-neutral-50);
-  --color-button-outline-text--hover: var(--horizon-color-accent);
-  --color-button-outline-text--disabled: var(--horizon-color-neutral-400);
-  --color-button-outline-border: var(--horizon-color-accent);
-  --color-button-outline-border--disabled: var(--horizon-color-neutral-400);
+  --color-button-secondary-text--hover: var(--horizon-color-neutral-50);
+  --color-button-secondary-text--disabled: var(--horizon-color-neutral-400);
+  --color-button-secondary-text--loading: var(--horizon-color-neutral-400);
 
   --color-button-ghost-bg: var(--horizon-color-transparent);
   --color-button-ghost-bg--hover: var(--horizon-color-level-two);
   --color-button-ghost-text: var(--horizon-color-neutral-50);
   --color-button-ghost-text--hover: var(--horizon-color-accent);
   --color-button-ghost-text--disabled: var(--horizon-color-neutral-400);
-
-  --color-button-danger: var(--horizon-color-danger-400);
-  --color-button-danger--hover: oklch(from var(--horizon-color-danger-500) l c h / 0.8);
+  --color-button-ghost-text--loading: var(--horizon-color-neutral-400);
+
+  --color-button-destructive-bg: oklch(from var(--horizon-color-danger-400) l c h / 0.15);
+  --color-button-destructive-bg--hover: oklch(from var(--horizon-color-danger-400) l c h / 0.3);
+  --color-button-destructive-bg--disabled: oklch(from var(--horizon-color-level-four) l c h / 0.15);
+  --color-button-destructive-bg--loading: oklch(from var(--horizon-color-level-four) l c h / 0.15);
+  --color-button-destructive-border: oklch(from var(--horizon-color-danger-400) l c h / 0.6);
+  --color-button-destructive-border--disabled: oklch(from var(--horizon-color-danger-400) l c h / 0.6);
+  --color-button-destructive-border--loading: oklch(from var(--horizon-color-danger-400) l c h / 0.6);
+  --color-button-destructive-text: var(--horizon-color-danger-400);
+  --color-button-destructive-text--hover: var(--horizon-color-danger-400);
+  --color-button-destructive-text--disabled: oklch(from var(--horizon-color-danger-400) l c h / 0.6);
+  --color-button-destructive-text--loading: oklch(from var(--horizon-color-danger-400) l c h / 0.6);
 
   --color-checkbox-border: var(--horizon-color-neutral-100);
   --color-checkbox-border--focus: var(--horizon-color-accent);