@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/radial-menu/radial-menu.js

@@ -0,0 +1,313 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/radial-menu/radial-menu.tsx
+const OVERSHOOT = "cubic-bezier(.24,1.34,.38,1)";
+function ms(value) {
+	return `calc(${String(value)}ms * var(--motion-scale))`;
+}
+const radialMenuVariants = cva("relative grid place-items-center rounded-full [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		part: {
+			core: "z-3 size-14 touch-none select-none active:scale-94 [&_svg]:size-5",
+			item: "size-12 shadow-md [&_svg]:size-4.5"
+		},
+		tone: {
+			default: "",
+			inverted: ""
+		},
+		stroke: {
+			true: "inset-ring inset-ring-border",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			part: "core",
+			tone: "default",
+			className: "bg-foreground text-background"
+		},
+		{
+			part: "core",
+			tone: "inverted",
+			className: "bg-card text-foreground"
+		},
+		{
+			part: "item",
+			tone: "default",
+			className: "bg-card text-foreground"
+		},
+		{
+			part: "item",
+			tone: "inverted",
+			className: "bg-foreground text-background"
+		}
+	],
+	defaultVariants: {
+		part: "core",
+		tone: "default",
+		stroke: false
+	}
+});
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+	});
+}
+/** Offset of option `index` of `count` from the core's centre. */
+function radialPosition(index, count, arc, radius, rtl = false) {
+	let angle = 90;
+	if (count > 1) {
+		const step = arc >= 360 ? 360 / count : arc / (count - 1);
+		angle = 90 + step * (count - 1) / 2 - step * index;
+	}
+	const radians = angle * Math.PI / 180;
+	const x = Math.round(radius * Math.cos(radians) * 100) / 100;
+	const y = Math.round(-radius * Math.sin(radians) * 100) / 100;
+	return {
+		x: rtl ? -x || 0 : x || 0,
+		y: y || 0
+	};
+}
+/** A round button that fans out a menu of options along an arc. */
+function RadialMenu({ items, onSelect, label = "Add", icon, radius = 68, arc = 180, stagger = 28, open: openProp, defaultOpen = false, onOpenChange, tone, stroke, className, ref, onBlur, ...props }) {
+	const menuId = useId();
+	const rootRef = useRef(null);
+	const coreRef = useRef(null);
+	const itemRefs = useRef([]);
+	const pressing = useRef(false);
+	const pendingFocus = useRef(null);
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const [live, setLive] = useState(null);
+	const [rtl, setRtl] = useState(false);
+	const open = openProp ?? innerOpen;
+	const setRoot = useCallback((node) => {
+		rootRef.current = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const setOpen = useCallback((next) => {
+		if (openProp === void 0) setInnerOpen(next);
+		onOpenChange?.(next);
+	}, [openProp, onOpenChange]);
+	const close = useCallback((refocus) => {
+		pressing.current = false;
+		setLive(null);
+		setOpen(false);
+		if (refocus) coreRef.current?.focus();
+	}, [setOpen]);
+	const enabled = items.map((item, index) => item.disabled ? -1 : index).filter((i) => i >= 0);
+	const openAndFocus = (index) => {
+		if (open) {
+			if (index !== void 0) itemRefs.current[index]?.focus();
+			return;
+		}
+		pendingFocus.current = index ?? null;
+		setOpen(true);
+	};
+	const select = (item) => {
+		if (item.disabled) return;
+		onSelect?.(item.value);
+		close(true);
+	};
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		setRtl(root.closest("[dir]")?.getAttribute("dir") === "rtl" || getComputedStyle(root).direction === "rtl");
+	}, [open]);
+	useEffect(() => {
+		if (!open || pendingFocus.current === null) return;
+		itemRefs.current[pendingFocus.current]?.focus();
+		pendingFocus.current = null;
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!rootRef.current?.contains(event.target)) close(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => {
+			document.removeEventListener("pointerdown", onPointerDown);
+		};
+	}, [open, close]);
+	const hitTest = (x, y) => {
+		const inside = (element) => {
+			const rect = element?.getBoundingClientRect();
+			return rect ? x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom : false;
+		};
+		if (inside(coreRef.current)) return null;
+		return enabled.find((index) => inside(itemRefs.current[index])) ?? null;
+	};
+	const onCorePointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (open) {
+			close(false);
+			return;
+		}
+		pressing.current = true;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		setOpen(true);
+	};
+	const onCorePointerMove = (event) => {
+		if (pressing.current) setLive(hitTest(event.clientX, event.clientY));
+	};
+	const onCorePointerUp = (event) => {
+		if (!pressing.current) return;
+		pressing.current = false;
+		const hit = hitTest(event.clientX, event.clientY);
+		setLive(null);
+		if (hit !== null) select(items[hit]);
+	};
+	const onCoreKeyDown = (event) => {
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			openAndFocus(event.key === "ArrowDown" ? enabled[0] : enabled[enabled.length - 1]);
+		} else if (event.key === "Escape" && open) {
+			event.preventDefault();
+			close(true);
+		}
+	};
+	const onMenuKeyDown = (event) => {
+		const current = enabled.indexOf(itemRefs.current.indexOf(event.target));
+		const count = enabled.length;
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = current + (rtl ? -1 : 1);
+				break;
+			case "ArrowLeft":
+				next = current + (rtl ? 1 : -1);
+				break;
+			case "ArrowDown":
+				next = current + 1;
+				break;
+			case "ArrowUp":
+				next = current - 1;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = count - 1;
+				break;
+			case "Escape":
+				event.preventDefault();
+				close(true);
+				return;
+			case "Tab":
+				close(false);
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		itemRefs.current[enabled[(next + count) % count]]?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setRoot,
+		"data-slot": "radial-menu",
+		"data-state": open ? "open" : "closed",
+		className: cn("relative inline-grid size-14 place-items-center", className),
+		onBlur: (event) => {
+			onBlur?.(event);
+			const to = event.relatedTarget;
+			if (open && to && !event.currentTarget.contains(to)) close(false);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("button", {
+			ref: coreRef,
+			type: "button",
+			"data-slot": "radial-menu-core",
+			"data-state": open ? "open" : "closed",
+			"aria-label": label,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-controls": menuId,
+			className: cn(radialMenuVariants({
+				part: "core",
+				tone,
+				stroke
+			}), focusRing, "transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]"),
+			onPointerDown: onCorePointerDown,
+			onPointerMove: onCorePointerMove,
+			onPointerUp: onCorePointerUp,
+			onPointerCancel: () => {
+				pressing.current = false;
+				setLive(null);
+			},
+			onClick: (event) => {
+				if (event.detail !== 0) return;
+				if (open) close(false);
+				else openAndFocus(enabled[0]);
+			},
+			onKeyDown: onCoreKeyDown,
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "radial-menu-core-icon",
+				className: cn("grid place-items-center", open && "rotate-135"),
+				style: { transition: `rotate ${ms(380)} ${OVERSHOOT}` },
+				children: icon ?? /* @__PURE__ */ jsx(PlusIcon, {})
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			id: menuId,
+			role: "menu",
+			"aria-label": label,
+			tabIndex: -1,
+			"data-slot": "radial-menu-list",
+			inert: !open,
+			"aria-hidden": open ? void 0 : true,
+			className: "pointer-events-none absolute inset-0",
+			onKeyDown: onMenuKeyDown,
+			children: items.map((item, index) => {
+				const { x, y } = radialPosition(index, items.length, arc, radius, rtl);
+				const delay = open ? ms(index * stagger) : "0s";
+				return /* @__PURE__ */ jsxs("button", {
+					ref: (node) => {
+						itemRefs.current[index] = node;
+					},
+					type: "button",
+					role: "menuitem",
+					tabIndex: -1,
+					"aria-label": item.label,
+					"aria-disabled": item.disabled || void 0,
+					"data-slot": "radial-menu-item",
+					"data-live": live === index ? "" : void 0,
+					className: cn(radialMenuVariants({
+						part: "item",
+						tone,
+						stroke
+					}), focusRing, "group absolute inset-0 m-auto", open && "pointer-events-auto", "aria-disabled:opacity-55 data-[live]:z-2 data-[live]:ring-2 data-[live]:ring-foreground"),
+					style: {
+						opacity: open ? 1 : 0,
+						transform: open ? `translate(${String(x)}px, ${String(y)}px) scale(1)` : "translate(0px, 0px) scale(0.4)",
+						transition: `transform ${ms(420)} ${OVERSHOOT} ${delay}, opacity ${ms(200)} ease ${delay}`
+					},
+					onClick: () => {
+						select(item);
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "grid place-items-center",
+						children: item.icon
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "radial-menu-caption",
+						className: cn("pointer-events-none absolute inset-x-0 top-full mx-auto mt-1.25 w-max", "font-mono text-[0.5rem] tracking-[.06em] whitespace-nowrap uppercase", "text-muted-foreground/70 opacity-0 transition-[opacity,color] duration-[var(--duration-fast)]", "group-hover:text-muted-foreground group-hover:opacity-100", "group-focus-visible:text-muted-foreground group-focus-visible:opacity-100", "group-data-[live]:text-muted-foreground group-data-[live]:opacity-100"),
+						children: item.label
+					})]
+				}, item.value);
+			})
+		})]
+	});
+}
+//#endregion
+export { RadialMenu, radialMenuVariants, radialPosition };
+
+//# sourceMappingURL=radial-menu.js.map

package/dist/components/radial-menu/radial-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-menu.js","names":[],"sources":["../../../src/components/radial-menu/radial-menu.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Radial menu (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A marking menu: a round core button whose options fan out along an arc\n * above it. Press the core and drag onto an option, release to pick it; or\n * release on the core to leave the fan open and click an option; or use the\n * keyboard — Enter/Space (or Down/Up) opens and focuses the first (last)\n * option, arrows walk around the ring, Home/End jump, Enter/Space select,\n * Escape closes and refocuses the core, Tab closes and moves on.\n *\n * The source had no menu semantics or keyboard path at all. Here the core is\n * a menu button (aria-haspopup, aria-expanded, aria-controls) and the options\n * are role=\"menuitem\" buttons in a role=\"menu\", inert while closed.\n *\n * Positions are polar, spread evenly over `arc` degrees centred on straight\n * up (endpoints included), with x mirrored in RTL. Motion is plain CSS\n * transitions on inline transforms — the springy fly-out is a fixed\n * overshoot curve with a per-item delay — so reduced motion settles it\n * instantly through --motion-scale.\n */\n\nconst OVERSHOOT = \"cubic-bezier(.24,1.34,.38,1)\";\n\nfunction ms(value: number): string {\n  return `calc(${String(value)}ms * var(--motion-scale))`;\n}\n\nconst radialMenuVariants = cva(\n  \"relative grid place-items-center rounded-full [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      part: {\n        core: \"z-3 size-14 touch-none select-none active:scale-94 [&_svg]:size-5\",\n        item: \"size-12 shadow-md [&_svg]:size-4.5\",\n      },\n      tone: { default: \"\", inverted: \"\" },\n      stroke: { true: \"inset-ring inset-ring-border\", false: \"\" },\n    },\n    compoundVariants: [\n      { part: \"core\", tone: \"default\", className: \"bg-foreground text-background\" },\n      { part: \"core\", tone: \"inverted\", className: \"bg-card text-foreground\" },\n      { part: \"item\", tone: \"default\", className: \"bg-card text-foreground\" },\n      { part: \"item\", tone: \"inverted\", className: \"bg-foreground text-background\" },\n    ],\n    defaultVariants: { part: \"core\", tone: \"default\", stroke: false },\n  },\n);\n\nfunction PlusIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n}\n\nexport interface RadialMenuItem {\n  value: string;\n  /** The option's accessible name, also shown as its caption. */\n  label: string;\n  /** Decorative icon. */\n  icon: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface RadialMenuProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"onSelect\">,\n    Omit<VariantProps<typeof radialMenuVariants>, \"part\"> {\n  items: RadialMenuItem[];\n  /** Called with the chosen item's value. The menu then closes. */\n  onSelect?: (value: string) => void;\n  /** The core button's accessible name, and the menu's. */\n  label?: string;\n  /** The core's icon. It turns 135° while open, so a plus reads as a cross. */\n  icon?: ReactNode;\n  /** Distance of the options from the core's centre, in px. */\n  radius?: number;\n  /** Angular spread in degrees, centred on straight up. */\n  arc?: number;\n  /** Delay between options flying out, in ms. */\n  stagger?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/** Offset of option `index` of `count` from the core's centre. */\nexport function radialPosition(\n  index: number,\n  count: number,\n  arc: number,\n  radius: number,\n  rtl = false,\n): { x: number; y: number } {\n  let angle = 90;\n  if (count > 1) {\n    const step = arc >= 360 ? 360 / count : arc / (count - 1);\n    angle = 90 + (step * (count - 1)) / 2 - step * index;\n  }\n  const radians = (angle * Math.PI) / 180;\n  const x = Math.round(radius * Math.cos(radians) * 100) / 100;\n  const y = Math.round(-radius * Math.sin(radians) * 100) / 100;\n  return { x: rtl ? -x || 0 : x || 0, y: y || 0 };\n}\n\n/** A round button that fans out a menu of options along an arc. */\nexport function RadialMenu({\n  items,\n  onSelect,\n  label = \"Add\",\n  icon,\n  radius = 68,\n  arc = 180,\n  stagger = 28,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  tone,\n  stroke,\n  className,\n  ref,\n  onBlur,\n  ...props\n}: RadialMenuProps) {\n  const menuId = useId();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const coreRef = useRef<HTMLButtonElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const pressing = useRef(false);\n  const pendingFocus = useRef<number | null>(null);\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const [live, setLive] = useState<number | null>(null);\n  const [rtl, setRtl] = useState(false);\n  const open = openProp ?? innerOpen;\n\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === \"function\") return ref(node);\n      if (ref) (ref as { current: HTMLDivElement | null }).current = node;\n    },\n    [ref],\n  );\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setInnerOpen(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  const close = useCallback(\n    (refocus: boolean) => {\n      pressing.current = false;\n      setLive(null);\n      setOpen(false);\n      if (refocus) coreRef.current?.focus();\n    },\n    [setOpen],\n  );\n\n  const enabled = items\n    .map((item, index) => (item.disabled ? -1 : index))\n    .filter((i) => i >= 0);\n\n  const openAndFocus = (index: number | undefined) => {\n    if (open) {\n      if (index !== undefined) itemRefs.current[index]?.focus();\n      return;\n    }\n    pendingFocus.current = index ?? null;\n    setOpen(true);\n  };\n\n  const select = (item: RadialMenuItem) => {\n    if (item.disabled) return;\n    onSelect?.(item.value);\n    close(true);\n  };\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    setRtl(\n      root.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\" ||\n        getComputedStyle(root).direction === \"rtl\",\n    );\n  }, [open]);\n\n  // Keyboard opening moves focus to an option once the menu is no longer inert.\n  useEffect(() => {\n    if (!open || pendingFocus.current === null) return;\n    itemRefs.current[pendingFocus.current]?.focus();\n    pendingFocus.current = null;\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: globalThis.PointerEvent) => {\n      if (!rootRef.current?.contains(event.target as Node)) close(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onPointerDown);\n    };\n  }, [open, close]);\n\n  const hitTest = (x: number, y: number): number | null => {\n    const inside = (element: Element | null | undefined) => {\n      const rect = element?.getBoundingClientRect();\n      return rect\n        ? x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom\n        : false;\n    };\n    // The core sits above the options, which start collapsed beneath it.\n    if (inside(coreRef.current)) return null;\n    return enabled.find((index) => inside(itemRefs.current[index])) ?? null;\n  };\n\n  const onCorePointerDown = (event: PointerEvent<HTMLButtonElement>) => {\n    if (event.button !== 0) return;\n    if (open) {\n      close(false);\n      return;\n    }\n    pressing.current = true;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    setOpen(true);\n  };\n\n  const onCorePointerMove = (event: PointerEvent<HTMLButtonElement>) => {\n    if (pressing.current) setLive(hitTest(event.clientX, event.clientY));\n  };\n\n  const onCorePointerUp = (event: PointerEvent<HTMLButtonElement>) => {\n    if (!pressing.current) return;\n    pressing.current = false;\n    const hit = hitTest(event.clientX, event.clientY);\n    setLive(null);\n    // Released on an option: pick it. Anywhere else the fan stays open.\n    if (hit !== null) select(items[hit] as RadialMenuItem);\n  };\n\n  const onCoreKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      openAndFocus(event.key === \"ArrowDown\" ? enabled[0] : enabled[enabled.length - 1]);\n    } else if (event.key === \"Escape\" && open) {\n      event.preventDefault();\n      close(true);\n    }\n  };\n\n  const onMenuKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = enabled.indexOf(\n      itemRefs.current.indexOf(event.target as HTMLButtonElement),\n    );\n    const count = enabled.length;\n    let next: number | undefined;\n    switch (event.key) {\n      case \"ArrowRight\":\n        next = current + (rtl ? -1 : 1);\n        break;\n      case \"ArrowLeft\":\n        next = current + (rtl ? 1 : -1);\n        break;\n      case \"ArrowDown\":\n        next = current + 1;\n        break;\n      case \"ArrowUp\":\n        next = current - 1;\n        break;\n      case \"Home\":\n        next = 0;\n        break;\n      case \"End\":\n        next = count - 1;\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        close(true);\n        return;\n      case \"Tab\":\n        close(false);\n        return;\n      default:\n        return;\n    }\n    event.preventDefault();\n    itemRefs.current[enabled[(next + count) % count] as number]?.focus();\n  };\n\n  return (\n    <div\n      ref={setRoot}\n      data-slot=\"radial-menu\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(\"relative inline-grid size-14 place-items-center\", className)}\n      onBlur={(event) => {\n        onBlur?.(event);\n        const to = event.relatedTarget;\n        if (open && to && !event.currentTarget.contains(to)) close(false);\n      }}\n      {...props}\n    >\n      <button\n        ref={coreRef}\n        type=\"button\"\n        data-slot=\"radial-menu-core\"\n        data-state={open ? \"open\" : \"closed\"}\n        aria-label={label}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        className={cn(\n          radialMenuVariants({ part: \"core\", tone, stroke }),\n          focusRing,\n          \"transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n        )}\n        onPointerDown={onCorePointerDown}\n        onPointerMove={onCorePointerMove}\n        onPointerUp={onCorePointerUp}\n        onPointerCancel={() => {\n          pressing.current = false;\n          setLive(null);\n        }}\n        onClick={(event) => {\n          // Pointer presses are handled on pointerdown/up; this is the keyboard.\n          if (event.detail !== 0) return;\n          if (open) close(false);\n          else openAndFocus(enabled[0]);\n        }}\n        onKeyDown={onCoreKeyDown}\n      >\n        <span\n          data-slot=\"radial-menu-core-icon\"\n          className={cn(\"grid place-items-center\", open && \"rotate-135\")}\n          style={{ transition: `rotate ${ms(380)} ${OVERSHOOT}` }}\n        >\n          {icon ?? <PlusIcon />}\n        </span>\n      </button>\n      <div\n        id={menuId}\n        role=\"menu\"\n        aria-label={label}\n        tabIndex={-1}\n        data-slot=\"radial-menu-list\"\n        inert={!open}\n        aria-hidden={open ? undefined : true}\n        className=\"pointer-events-none absolute inset-0\"\n        onKeyDown={onMenuKeyDown}\n      >\n        {items.map((item, index) => {\n          const { x, y } = radialPosition(index, items.length, arc, radius, rtl);\n          const delay = open ? ms(index * stagger) : \"0s\";\n          return (\n            <button\n              key={item.value}\n              ref={(node) => {\n                itemRefs.current[index] = node;\n              }}\n              type=\"button\"\n              role=\"menuitem\"\n              tabIndex={-1}\n              aria-label={item.label}\n              aria-disabled={item.disabled || undefined}\n              data-slot=\"radial-menu-item\"\n              data-live={live === index ? \"\" : undefined}\n              className={cn(\n                radialMenuVariants({ part: \"item\", tone, stroke }),\n                focusRing,\n                \"group absolute inset-0 m-auto\",\n                open && \"pointer-events-auto\",\n                \"aria-disabled:opacity-55 data-[live]:z-2 data-[live]:ring-2 data-[live]:ring-foreground\",\n              )}\n              style={{\n                opacity: open ? 1 : 0,\n                transform: open\n                  ? `translate(${String(x)}px, ${String(y)}px) scale(1)`\n                  : \"translate(0px, 0px) scale(0.4)\",\n                // Staggered out, collapsed together.\n                transition: `transform ${ms(420)} ${OVERSHOOT} ${delay}, opacity ${ms(200)} ease ${delay}`,\n              }}\n              onClick={() => {\n                select(item);\n              }}\n            >\n              <span aria-hidden=\"true\" className=\"grid place-items-center\">\n                {item.icon}\n              </span>\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"radial-menu-caption\"\n                className={cn(\n                  \"pointer-events-none absolute inset-x-0 top-full mx-auto mt-1.25 w-max\",\n                  \"font-mono text-[0.5rem] tracking-[.06em] whitespace-nowrap uppercase\",\n                  \"text-muted-foreground/70 opacity-0 transition-[opacity,color] duration-[var(--duration-fast)]\",\n                  \"group-hover:text-muted-foreground group-hover:opacity-100\",\n                  \"group-focus-visible:text-muted-foreground group-focus-visible:opacity-100\",\n                  \"group-data-[live]:text-muted-foreground group-data-[live]:opacity-100\",\n                )}\n              >\n                {item.label}\n              </span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport { radialMenuVariants };\n"],"mappings":"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"}

package/dist/components/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/radio-group.tsx"],"mappings":";;;;;;;;;;KAeY,kBAAkB,6BAA6B,WAAoB;iBAE/D,eAAa,cAAc,SAAS,kCAAe,IAAA;KAUvD,sBAAsB,6BAA6B,WAAoB;iBAEnE,iBAAiB,cAAc,SAAS,sCAAmB,IAAA"}
+{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../../src/components/radio-group/radio-group.tsx"],"mappings":";;;;;;;;;;KAgBY,kBAAkB,6BAA6B,WAAoB;iBAE/D,eAAa,cAAc,SAAS,kCAAe,IAAA;KAUvD,sBAAsB,6BAA6B,WAAoB;iBAEnE,iBAAiB,cAAc,SAAS,sCAAmB,IAAA"}

package/dist/components/radio-group/radio-group.js

@@ -19,7 +19,10 @@ function RadioGroupItem({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {
 			"data-slot": "radio-group-indicator",
 			className: "grid size-full place-items-center",
-			children: /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-primary" })
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "radio-group-dot",
+				className: cn("size-2 rounded-full bg-primary", "transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] starting:scale-0")
+			})
 		})
 	});
 }

package/dist/components/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A set of mutually exclusive options.\n *\n * Radios are for choosing one of a small, visible set. Once a radio is\n * selected it cannot be unselected by clicking it again, so include an explicit\n * \"None\" option if the choice must be reversible.\n */\nexport type RadioGroupProps = ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>;\n\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = ComponentPropsWithRef<typeof RadioGroupPrimitive.Item>;\n\nexport function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"peer aspect-square size-4 shrink-0 rounded-full border border-input bg-background shadow-xs\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--duration-fast)]\",\n        \"data-[state=checked]:border-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        \"aria-invalid:border-destructive\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"grid size-full place-items-center\"\n      >\n        <span className=\"size-2 rounded-full bg-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n"],"mappings":";;;;;;AAiBA,SAAgBA,aAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAACC,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAACA,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GACT,+FACA,yFACA,uCACA,mDACA,mCACA,WACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,WAAoB,WAArB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,WAAU,iCAAkC,CAAA;EACrB,CAAA;CACP,CAAA;AAE9B"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../../src/components/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI RadioGroup (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A set of mutually exclusive options.\n *\n * Radios are for choosing one of a small, visible set. Once a radio is\n * selected it cannot be unselected by clicking it again, so include an explicit\n * \"None\" option if the choice must be reversible.\n */\nexport type RadioGroupProps = ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>;\n\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = ComponentPropsWithRef<typeof RadioGroupPrimitive.Item>;\n\nexport function RadioGroupItem({ className, ...props }: RadioGroupItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"peer aspect-square size-4 shrink-0 rounded-full border border-input bg-background shadow-xs\",\n        \"transition-[background-color,border-color,box-shadow] duration-[var(--duration-fast)]\",\n        \"data-[state=checked]:border-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-55\",\n        \"aria-invalid:border-destructive\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"grid size-full place-items-center\"\n      >\n        {/* The dot springs in from nothing: `starting:` gives its first frame\n            a zero scale and the overshoot curve carries it slightly past full\n            size. A transition rather than a keyframe, so without\n            @starting-style, or under reduced motion, it is simply there. */}\n        <span\n          data-slot=\"radio-group-dot\"\n          className={cn(\n            \"size-2 rounded-full bg-primary\",\n            \"transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] starting:scale-0\",\n          )}\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgBA,aAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OACE,oBAACC,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAIA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAACA,WAAoB,MAArB;EACE,aAAU;EACV,WAAW,GACT,+FACA,yFACA,uCACA,mDACA,mCACA,WACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,WAAoB,WAArB;GACE,aAAU;GACV,WAAU;GAMV,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,kCACA,oGACF;GACD,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B"}

package/dist/components/range-dial/index.d.ts

@@ -0,0 +1,2 @@
+import { RangeDial, RangeDialProps, RangeDialValue } from "./range-dial.js";
+export { RangeDial, type RangeDialProps, type RangeDialValue };

package/dist/components/range-dial/index.js

@@ -0,0 +1,2 @@
+import { RangeDial } from "./range-dial.js";
+export { RangeDial };

package/dist/components/range-dial/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/range-dial/meta.ts
+const meta = defineMeta({
+	name: "range-dial",
+	title: "Range Dial",
+	description: "A 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.",
+	category: "form",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["range-dial.tsx"],
+	a11y: "A labelled role=\"group\" (default \"Time range\") holding two focusable role=\"slider\" thumbs (\"Start time\", \"End time\"), each with aria-valuemin 0, aria-valuemax 1439, aria-valuenow in minutes and an aria-valuetext time such as \"10:30 PM\" (locale-aware, overridable). Arrow keys step by the snap, Page Up/Down by an hour, Home/End jump to midnight and the last step of the day, all wrapping round midnight; up/right always add time because a clock face does not mirror. The centre readout has a spoken equivalent, and a polite live region announces the new duration only after a change. Ticks and knobs are aria-hidden; the pointer grabs the nearest thumb and moves focus to it. Tick draw-in runs through --motion-scale and is instant under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/range-dial/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/range-dial/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"range-dial\",\n  title: \"Range Dial\",\n  description:\n    \"A 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"range-dial.tsx\"],\n  a11y:\n    'A labelled role=\"group\" (default \"Time range\") holding two focusable role=\"slider\" thumbs (\"Start time\", ' +\n    '\"End time\"), each with aria-valuemin 0, aria-valuemax 1439, aria-valuenow in minutes and an aria-valuetext ' +\n    'time such as \"10:30 PM\" (locale-aware, overridable). Arrow keys step by the snap, Page Up/Down by an hour, ' +\n    \"Home/End jump to midnight and the last step of the day, all wrapping round midnight; up/right always add time \" +\n    \"because a clock face does not mirror. The centre readout has a spoken equivalent, and a polite live region \" +\n    \"announces the new duration only after a change. Ticks and knobs are aria-hidden; the pointer grabs the \" +\n    \"nearest thumb and moves focus to it. Tick draw-in runs through --motion-scale and is instant under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAOJ,CAAC"}

package/dist/components/range-dial/range-dial.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/range-dial/range-dial.d.ts
+type RangeDialValue = [start: number, end: number];
+interface RangeDialProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children"> {
+  /** `[start, end]` in minutes after midnight, 0–1439. The window runs clockwise. */
+  value?: RangeDialValue;
+  /** Uncontrolled start value. Defaults to 23:00 → 06:30 (7h30m). */
+  defaultValue?: RangeDialValue;
+  /** Called on every change: while dragging and per key press. */
+  onValueChange?: (value: RangeDialValue) => void;
+  /** Called when an interaction ends: pointer released or key press. */
+  onValueCommit?: (value: RangeDialValue) => void;
+  /** Step in minutes for the pointer and the arrow keys. */
+  snap?: 5 | 15 | 30;
+  /** Number of ticks round the dial, 24–96 (the source's slider stepped by 8). */
+  density?: number;
+  /** Tick ring radius in viewBox units, 44–68. Scales the whole dial geometry. */
+  reach?: number;
+  /** Accessible names of the two thumbs. */
+  thumbLabels?: [start: string, end: string];
+  /** Locale for the default time format. */
+  locale?: string;
+  /** Formats a time (minutes after midnight) for `aria-valuetext`. */
+  formatTime?: (minutes: number) => string;
+  /** Formats a duration in minutes for the live announcement. */
+  formatDuration?: (minutes: number) => string;
+  disabled?: boolean;
+}
+/** A 24-hour circular two-thumb range, such as a sleep window. */
+declare function RangeDial({ className, style, value: valueProp, defaultValue, onValueChange, onValueCommit, snap, density, reach, thumbLabels, locale, formatTime, formatDuration, disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, ...props }: RangeDialProps): import("react").JSX.Element;
+//#endregion
+export { RangeDial, RangeDialProps, RangeDialValue };
+//# sourceMappingURL=range-dial.d.ts.map

package/dist/components/range-dial/range-dial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-dial.d.ts","names":[],"sources":["../../../src/components/range-dial/range-dial.tsx"],"mappings":";;KA6CY,kBAAkB,eAAe;UAE5B,uBAAuB,KACtC;;EAIA,QAAQ;;EAER,eAAe;;EAEf,iBAAiB,OAAO;;EAExB,iBAAiB,OAAO;;EAExB;;EAEA;;EAEA;;EAEA,eAAe,eAAe;;EAE9B;;EAEA,cAAc;;EAEd,kBAAkB;EAClB;;;iBAqCc,YACd,WACA,OACA,OAAO,WACP,cACA,eACA,eACA,MACA,SACA,OACA,aACA,QACA,YACA,gBACA,wBACc,8BACK,gBACnB,eACA,eACA,aACA,oBACG,SACF,iCAAc,IAAA"}