@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/dropzone.js

@@ -9,6 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlert, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
 //#region src/ui/dropzone.tsx
 const DropzoneContext = createContext(null);
+const DropzoneFocusContext = createContext(null);
 const fileRenderKeys = /* @__PURE__ */ new WeakMap();
 let nextFileRenderKey = 0;
 function getFileRenderKey(file) {
@@ -24,8 +25,48 @@ function useDropzoneContext() {
 	if (!context) throw new Error("Dropzone parts must be used inside Dropzone.");
 	return context;
 }
-function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
+function createFocusTargets() {
+	const triggers = /* @__PURE__ */ new Set();
+	const removes = /* @__PURE__ */ new Set();
+	const inDocumentOrder = (nodes) => [...nodes].filter((node) => !node.matches(":disabled")).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+	return {
+		register(kind, node) {
+			const nodes = kind === "trigger" ? triggers : removes;
+			nodes.add(node);
+			return () => {
+				nodes.delete(node);
+			};
+		},
+		focusAfterRemoval(control, all) {
+			const siblings = all ? [] : inDocumentOrder(removes);
+			const index = siblings.indexOf(control);
+			(siblings[index + 1] ?? siblings[index - 1] ?? inDocumentOrder(triggers)[0])?.focus();
+		}
+	};
+}
+function useFocusTargetRef(kind, ref) {
+	const focusTargets = useContext(DropzoneFocusContext);
+	return (node) => {
+		const unregister = focusTargets?.register(kind, node);
+		let release;
+		if (typeof ref === "function") {
+			const cleanup = ref(node);
+			release = typeof cleanup === "function" ? cleanup : () => ref(null);
+		} else if (ref) {
+			ref.current = node;
+			release = () => {
+				ref.current = null;
+			};
+		}
+		return () => {
+			unregister?.();
+			release?.();
+		};
+	};
+}
+function Dropzone({ value, defaultValue, onValueChange, policy, disabled, drag, paste, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
 	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
+	const [focusTargets] = useState(createFocusTargets);
 	const [registerGlobalOverlay] = useState(() => () => {
 		let registered = true;
 		setGlobalOverlayCount((count) => count + 1);
@@ -41,6 +82,8 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFil
 		onValueChange,
 		policy,
 		disabled,
+		drag,
+		paste,
 		getFilesFromEvent,
 		onDrop,
 		onError,
@@ -53,15 +96,18 @@ function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFil
 	const empty = dropzone.value.length === 0 && dropzone.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
 		value: context,
-		children: /* @__PURE__ */ jsx("div", {
-			...props,
-			"data-control-ui": "dropzone",
-			"data-control-family": "dropzone",
-			"data-slot": "root",
-			"data-disabled": dropzone.disabled ? "true" : void 0,
-			"data-empty": empty ? "true" : void 0,
-			className: cn("min-w-0", className),
-			children
+		children: /* @__PURE__ */ jsx(DropzoneFocusContext.Provider, {
+			value: focusTargets,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				"data-control-ui": "dropzone",
+				"data-control-family": "dropzone",
+				"data-slot": "root",
+				"data-disabled": dropzone.disabled ? "true" : void 0,
+				"data-empty": empty ? "true" : void 0,
+				className: cn("min-w-0", className),
+				children
+			})
 		})
 	});
 }
@@ -87,26 +133,32 @@ function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby":
 	});
 	return /* @__PURE__ */ jsx("input", {
 		...inputProps,
+		tabIndex: -1,
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "input",
 		className: cn("sr-only", className)
 	});
 }
-function DropzoneTrigger({ className, children, onClick, disabled, ...props }) {
+function DropzoneTrigger({ className, children, onClick, disabled, ref, ...props }) {
 	const context = useDropzoneContext();
-	const triggerDisabled = disabled || context.disabled || context.isProcessing;
+	const triggerRef = useFocusTargetRef("trigger", ref);
+	const triggerDisabled = disabled || context.disabled;
+	const busy = context.isProcessing && !triggerDisabled;
 	return /* @__PURE__ */ jsx("button", {
 		...props,
+		ref: triggerRef,
 		type: "button",
 		disabled: triggerDisabled,
+		"aria-disabled": busy ? "true" : void 0,
 		"data-control-ui": "dropzone",
 		"data-control-family": "dropzone",
 		"data-slot": "trigger",
 		"data-state": context.visualState,
-		"data-disabled": triggerDisabled ? "true" : void 0,
-		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed", className),
+		"data-disabled": triggerDisabled || busy ? "true" : void 0,
+		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed", className),
 		onClick: (event) => {
+			if (busy) return;
 			onClick?.(event);
 			if (!event.defaultPrevented) context.open();
 		},
@@ -191,10 +243,13 @@ function DropzoneStatus({ className, children, role = "status", "aria-live": ari
 		children: children ? children(context) : getDropzoneStatusMessage(context)
 	});
 }
-function DropzoneRemove({ file, children, onClick, disabled, ...props }) {
+function DropzoneRemove({ file, children, onClick, disabled, ref, ...props }) {
 	const context = useDropzoneContext();
+	const focusTargets = useContext(DropzoneFocusContext);
+	const removeRef = useFocusTargetRef("remove", ref);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
+		ref: removeRef,
 		type: "button",
 		variant: props.variant ?? "quiet",
 		size: props.size ?? "sm",
@@ -203,13 +258,16 @@ function DropzoneRemove({ file, children, onClick, disabled, ...props }) {
 		disabled: disabled || context.disabled || context.isProcessing,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented) context.removeFile(file);
+			if (event.defaultPrevented) return;
+			focusTargets?.focusAfterRemoval(event.currentTarget, false);
+			context.removeFile(file);
 		},
 		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
 	});
 }
 function DropzoneClear({ children, onClick, disabled, ...props }) {
 	const context = useDropzoneContext();
+	const focusTargets = useContext(DropzoneFocusContext);
 	const empty = context.value.length === 0 && context.fileRejections.length === 0;
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
@@ -219,7 +277,9 @@ function DropzoneClear({ children, onClick, disabled, ...props }) {
 		disabled: disabled || context.disabled || context.isProcessing || empty,
 		onClick: (event) => {
 			onClick?.(event);
-			if (!event.defaultPrevented) context.reset();
+			if (event.defaultPrevented) return;
+			focusTargets?.focusAfterRemoval(event.currentTarget, true);
+			context.reset();
 		},
 		children: children ?? "Clear all"
 	});
@@ -232,6 +292,7 @@ function DropzoneFeedback({ state }) {
 			"data-control-ui": "dropzone",
 			"data-control-family": "dropzone",
 			"data-slot": "feedback-spinner",
+			"data-motion-essential": "",
 			"aria-hidden": "true"
 		});
 		message = "Checking files…";

package/dist/ui/emoji-picker.d.ts

@@ -0,0 +1,18 @@
+import { EmojiPickerKnobStyle } from "../knob-contracts/emoji-picker-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { EmojiPicker as EmojiPicker$1 } from "frimousse";
+//#region src/ui/emoji-picker.d.ts
+type EmojiPickerStyle = {
+  style?: CSSProperties & EmojiPickerKnobStyle;
+};
+export type EmojiPickerProps = Omit<ComponentProps<typeof EmojiPicker$1.Root>, "style"> & EmojiPickerStyle;
+export declare function EmojiPicker({ className, columns, ...props }: EmojiPickerProps): import("react").JSX.Element;
+export type EmojiPickerSearchProps = Omit<ComponentProps<typeof EmojiPicker$1.Search>, "style"> & EmojiPickerStyle;
+export declare function EmojiPickerSearch({ className, placeholder, "aria-label": ariaLabel, ...props }: EmojiPickerSearchProps): import("react").JSX.Element;
+export type EmojiPickerContentProps = Omit<ComponentProps<typeof EmojiPicker$1.Viewport>, "style"> & EmojiPickerStyle;
+export declare function EmojiPickerContent({ className, ...props }: EmojiPickerContentProps): import("react").JSX.Element;
+export type EmojiPickerFooterProps = Omit<ComponentProps<"div">, "style" | "children"> & EmojiPickerStyle & {
+  placeholder?: string;
+};
+export declare function EmojiPickerFooter({ className, placeholder, ...props }: EmojiPickerFooterProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/emoji-picker.js

@@ -0,0 +1,136 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./spinner.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SearchIcon } from "lucide-react";
+import { EmojiPicker as EmojiPicker$1 } from "frimousse";
+//#region src/ui/emoji-picker.tsx
+function EmojiPicker({ className, columns = 9, ...props }) {
+	return /* @__PURE__ */ jsx(EmojiPicker$1.Root, {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "root",
+		columns,
+		className: cn("isolate flex h-72 w-fit flex-col", className),
+		...props
+	});
+}
+function EmojiPickerSearch({ className, placeholder = "Search emoji…", "aria-label": ariaLabel = "Search emoji", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "search",
+		className: "flex items-center",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			"aria-hidden": "true",
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "search-icon"
+		}), /* @__PURE__ */ jsx(EmojiPicker$1.Search, {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "search-input",
+			placeholder,
+			"aria-label": ariaLabel,
+			className: cn("min-w-0 flex-1", className),
+			...props
+		})]
+	});
+}
+function EmojiPickerRow({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "row",
+		className: cn("scroll-my-1", className),
+		...props,
+		children
+	});
+}
+function EmojiPickerEmoji({ emoji, className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "emoji",
+		"data-active": emoji.isActive ? "" : void 0,
+		className: cn("flex items-center justify-center", className),
+		...props,
+		children: emoji.emoji
+	});
+}
+function EmojiPickerCategoryHeader({ category, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "category-header",
+		className,
+		...props,
+		children: category.label
+	});
+}
+function EmojiPickerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsxs(EmojiPicker$1.Viewport, {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "content",
+		className: cn("relative flex-1 outline-none", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(EmojiPicker$1.Loading, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "loading",
+				className: "absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(Spinner, { label: "Loading emoji" })
+			}),
+			/* @__PURE__ */ jsx(EmojiPicker$1.Empty, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "empty",
+				className: "absolute inset-0 flex items-center justify-center",
+				children: "No emoji found."
+			}),
+			/* @__PURE__ */ jsx(EmojiPicker$1.List, {
+				"data-control-ui": "emoji-picker",
+				"data-control-family": "emoji-picker",
+				"data-slot": "list",
+				className: "select-none",
+				components: {
+					Row: EmojiPickerRow,
+					Emoji: EmojiPickerEmoji,
+					CategoryHeader: EmojiPickerCategoryHeader
+				}
+			})
+		]
+	});
+}
+function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "emoji-picker",
+		"data-control-family": "emoji-picker",
+		"data-slot": "footer",
+		className: cn("flex min-w-0 items-center", className),
+		...props,
+		children: /* @__PURE__ */ jsx(EmojiPicker$1.ActiveEmoji, { children: ({ emoji }) => emoji ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-emoji",
+			className: "flex-none",
+			children: emoji.emoji
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-label",
+			className: "truncate",
+			children: emoji.label
+		})] }) : /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "footer-placeholder",
+			className: "truncate",
+			children: placeholder
+		}) })
+	});
+}
+//#endregion
+export { EmojiPicker, EmojiPickerContent, EmojiPickerFooter, EmojiPickerSearch };

package/dist/ui/empty.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { EmptyKnobStyle } from "../knob-contracts/empty-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/empty.d.ts
@@ -17,12 +18,13 @@ export type EmptyDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
 export type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & EmptyKnobStyle;
 };
 export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
 export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
 export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
-export declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
+export declare function EmptyTitle({ render, ...props }: EmptyTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
 export declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/empty.js

@@ -1,4 +1,6 @@
+"use client";
 import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/empty.tsx
 function Empty({ className, ...props }) {
@@ -28,13 +30,16 @@ function EmptyMedia({ className, ...props }) {
 		...props
 	});
 }
-function EmptyTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "empty",
-		"data-control-family": "empty",
-		"data-slot": "title",
-		className,
-		...props
+function EmptyTitle({ render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "empty",
+			"data-control-family": "empty",
+			"data-slot": "title"
+		}
 	});
 }
 function EmptyDescription({ className, ...props }) {

package/dist/ui/field.js

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { Separator } from "./separator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
 import { Field as Field$1 } from "@base-ui/react/field";
 import { Fieldset } from "@base-ui/react/fieldset";
+import { cva } from "class-variance-authority";
 //#region src/ui/field.tsx
 const fieldVariants = cva("group/field flex w-full", {
 	variants: { orientation: {

package/dist/ui/gradient-editor.d.ts

@@ -39,7 +39,7 @@ export type GradientEditorTypeSelectProps = {
 export declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
 export declare function GradientEditorPreview({ className, style, "aria-label": ariaLabel, ...props }: GradientEditorPreviewProps): import("react").JSX.Element;
 export declare function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorTrackProps): import("react").JSX.Element;
-export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: GradientEditorStopProps): import("react").JSX.Element;
+export declare function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: GradientEditorStopProps): import("react").JSX.Element;
 export declare function GradientEditorStopAdd({ className, children, ...props }: GradientEditorStopAddProps): import("react").JSX.Element;
 export declare function GradientEditorStopColor(): import("react").JSX.Element | null;
 export declare function GradientEditorTypeSelect({ size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }: GradientEditorTypeSelectProps): import("react").JSX.Element;

package/dist/ui/gradient-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { formatGradient } from "../lib/color.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
@@ -30,6 +31,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 	const [selectedId, setSelectedId] = useState(defaultStops[0]?.id ?? "stop-1");
 	const idCounter = useRef(defaultStops.length);
 	const trackRef = useRef(null);
+	const [stopNodes] = useState(() => /* @__PURE__ */ new Map());
 	const gradient = formatGradient(stops, type, angle);
 	function updateStops(nextStops) {
 		setStops(nextStops);
@@ -58,7 +60,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 		if (stops.length <= 2) return;
 		const nextStops = stops.filter((stop) => stop.id !== id);
 		updateStops(nextStops);
-		if (selectedId === id) setSelectedId(nextStops[0]?.id ?? selectedId);
+		setSelectedId((current) => current === id ? nextStops[0]?.id ?? current : current);
 	};
 	const setType = (nextType) => {
 		setTypeState(nextType);
@@ -71,6 +73,7 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 		selectedId,
 		gradient,
 		trackRef,
+		stopNodes,
 		select: setSelectedId,
 		setStopColor,
 		setStopPosition,
@@ -130,30 +133,35 @@ function GradientEditorTrack({ className, children, style, "aria-label": ariaLab
 		children: children ?? stops.map((stop) => /* @__PURE__ */ jsx(GradientEditorStop, { stop }, stop.id))
 	});
 }
-function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
-	const { stops, selectedId, select, setStopPosition, removeStop, trackRef } = useGradientEditor();
+function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown, onFocus, onDoubleClick, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }) {
+	const { stops, selectedId, select, setStopPosition, removeStop, trackRef, stopNodes } = useGradientEditor();
 	const selected = stop.id === selectedId;
 	const canRemove = stops.length > 2;
+	const { onPointerDown: startDrag } = useColorArea((offset, rect) => setStopPosition(stop.id, offset.x / rect.width), trackRef);
 	function handlePointerDown(event) {
 		onPointerDown?.(event);
 		if (event.defaultPrevented) return;
 		select(stop.id);
 		event.currentTarget.focus();
-		event.preventDefault();
-		const track = trackRef.current;
-		if (!track) return;
-		const move = (moveEvent) => {
-			const rect = track.getBoundingClientRect();
-			setStopPosition(stop.id, (moveEvent.clientX - rect.left) / rect.width);
-		};
-		const up = () => {
-			window.removeEventListener("pointermove", move);
-			window.removeEventListener("pointerup", up);
-			document.body.style.userSelect = "";
+		startDrag(event);
+	}
+	function registerStop(node) {
+		stopNodes.set(stop.id, node);
+		const cleanup = typeof ref === "function" ? ref(node) : void 0;
+		if (ref && typeof ref === "object") ref.current = node;
+		return () => {
+			stopNodes.delete(stop.id);
+			if (typeof cleanup === "function") cleanup();
+			else if (typeof ref === "function") ref(null);
+			else if (ref) ref.current = null;
 		};
-		document.body.style.userSelect = "none";
-		window.addEventListener("pointermove", move);
-		window.addEventListener("pointerup", up);
+	}
+	function remove() {
+		if (!canRemove) return;
+		const index = stops.findIndex((candidate) => candidate.id === stop.id);
+		const neighbour = stops[index + 1] ?? stops[index - 1];
+		if (neighbour) stopNodes.get(neighbour.id)?.focus();
+		removeStop(stop.id);
 	}
 	function handleFocus(event) {
 		onFocus?.(event);
@@ -194,27 +202,35 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 			case "Delete":
 				if (!canRemove) return;
 				event.preventDefault();
-				removeStop(stop.id);
+				remove();
 		}
 	}
 	function handleDoubleClick(event) {
 		onDoubleClick?.(event);
-		if (!event.defaultPrevented) removeStop(stop.id);
+		if (!event.defaultPrevented) remove();
 	}
-	const defaultLabel = `Gradient stop at ${Math.round(stop.position * 100)}%. Use arrow keys to move${canRemove ? ", Delete to remove" : ""}.`;
+	const percent = Math.round(stop.position * 100);
+	const defaultLabel = `Gradient stop ${stops.indexOf(stop) + 1}`;
 	return /* @__PURE__ */ jsx("button", {
+		ref: registerStop,
 		type: "button",
+		role: "slider",
 		"data-control-ui": "gradient-editor",
 		"data-control-family": "gradient-editor",
 		"data-slot": "stop",
 		"data-selected": selected ? "true" : void 0,
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? defaultLabel : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
+		"aria-orientation": "horizontal",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": percent,
+		"aria-valuetext": `${percent}%, ${stop.color}`,
 		onPointerDown: handlePointerDown,
 		onFocus: handleFocus,
 		onKeyDown: handleKeyDown,
 		onDoubleClick: handleDoubleClick,
-		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab touch-pan-y overflow-hidden active:cursor-grabbing", className),
+		className: cn("-translate-x-1/2 absolute top-1/2 -translate-y-1/2 cursor-grab touch-pan-y active:cursor-grabbing", className),
 		style: {
 			...style,
 			left: `${stop.position * 100}%`,

package/dist/ui/infinite-canvas.d.ts

@@ -22,6 +22,17 @@ export type InfiniteCanvasProps = Omit<ComponentProps<"section">, "onChange" | "
 export type InfiniteCanvasContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
+export type InfiniteCanvasPoint = {
+  x: number;
+  y: number;
+};
+export type InfiniteCanvasItemProps = Omit<ComponentProps<"div">, "style"> & {
+  x: number;
+  y: number;
+  onPositionChange?: (position: InfiniteCanvasPoint) => void;
+  movableItemLabel?: string;
+  style?: CSSProperties & InfiniteCanvasKnobStyle;
+};
 export type InfiniteCanvasControlsProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   style?: CSSProperties & InfiniteCanvasKnobStyle;
 };
@@ -33,7 +44,8 @@ type InfiniteCanvasContextValue = {
   zoomBy: (factor: number, reason: InfiniteCanvasMoveReason) => void;
 };
 export declare function useInfiniteCanvas(): InfiniteCanvasContextValue;
-export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
+export declare function InfiniteCanvas({ transform: controlledTransform, defaultTransform, onTransformChange, minScale: minScaleProp, maxScale: maxScaleProp, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel, "aria-keyshortcuts": ariaKeyShortcuts, ...props }: InfiniteCanvasProps): import("react").JSX.Element;
 export declare function InfiniteCanvasContent({ className, style, ...props }: InfiniteCanvasContentProps): import("react").JSX.Element;
+export declare function InfiniteCanvasItem({ x, y, onPositionChange, movableItemLabel, className, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onKeyDown, ...props }: InfiniteCanvasItemProps): import("react").JSX.Element;
 export declare function InfiniteCanvasControls({ className, ...props }: InfiniteCanvasControlsProps): import("react").JSX.Element;
 //#endregion