@ctrl-ui/react 0.8.20 → 0.9.0

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

@@ -1,4 +1,6 @@
 import { EmojiPickerKnobStyle } from "../knob-contracts/emoji-picker-knobs.js";
+import { IconPicker } from "./icon-picker.js";
+import { Tabs, TabsList } from "./tabs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Emoji, EmojiPicker as EmojiPicker$1 } from "frimousse";
 //#region src/ui/emoji-picker.d.ts
@@ -21,9 +23,16 @@ export declare function EmojiPickerRecent({ emojis, label, ...props }: EmojiPick
 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, ref, ...props }: EmojiPickerContentProps): import("react").JSX.Element;
+export declare function EmojiPickerContent({ className, ref, children, ...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;
+export declare function EmojiIconPicker({ children, defaultValue, ...props }: ComponentProps<typeof Tabs<"emoji" | "icons">>): import("react").JSX.Element;
+export declare function EmojiIconPickerTabs({ emojiLabel, iconsLabel, ...props }: Omit<ComponentProps<typeof TabsList>, "children"> & {
+  emojiLabel?: string;
+  iconsLabel?: string;
+}): import("react").JSX.Element;
+export declare function EmojiIconPickerEmoji(props: ComponentProps<typeof EmojiPicker>): import("react").JSX.Element;
+export declare function EmojiIconPickerIcons(props: ComponentProps<typeof IconPicker>): import("react").JSX.Element;
 //#endregion

package/dist/ui/emoji-picker.js

@@ -1,6 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Spinner } from "./spinner.js";
+import { PopoverViewport } from "./popover.js";
+import { IconPicker } from "./icon-picker.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
 import { Toolbar } from "@base-ui/react/toolbar";
 import { createContext, useContext, useImperativeHandle, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -16,6 +20,7 @@ function useEmojiPicker() {
 function EmojiPicker({ className, columns = 8, style, ref, onEmojiSelect, resolveEmojiData = defaultEmojiDataResolver, ...props }) {
 	const rootRef = useRef(null);
 	const viewportRef = useRef(null);
+	const listRef = useRef(null);
 	const [loadState, setLoadState] = useState({ status: "loading" });
 	const [retryAttempt, setRetryAttempt] = useState(0);
 	useImperativeHandle(ref, () => {
@@ -50,6 +55,7 @@ function EmojiPicker({ className, columns = 8, style, ref, onEmojiSelect, resolv
 			columns,
 			rootRef,
 			viewportRef,
+			listRef,
 			loadState,
 			retryEmojiData,
 			selectEmoji
@@ -96,17 +102,18 @@ function emojiCategoryRows(emojiData, columns) {
 	});
 }
 function EmojiPickerCategories({ "aria-label": ariaLabel = "Emoji categories", onKeyDown, ...props }) {
-	const { columns, loadState, rootRef, viewportRef } = useEmojiPicker();
+	const { columns, loadState, rootRef, viewportRef, listRef } = useEmojiPicker();
 	if (loadState.status !== "ready") return null;
 	const categories = emojiCategoryRows(loadState.data, columns);
 	const scrollToCategory = (startRow, categoryIndex) => {
 		const root = rootRef.current;
 		const viewport = viewportRef.current;
-		if (!root || !viewport) return;
+		const list = listRef.current;
+		if (!root || !viewport || !list) return;
 		const metrics = getComputedStyle(root);
 		const rowHeight = Number.parseFloat(metrics.getPropertyValue("--frimousse-row-height"));
 		const headerHeight = Number.parseFloat(metrics.getPropertyValue("--frimousse-category-header-height"));
-		viewport.scrollTo({ top: startRow * rowHeight + categoryIndex * headerHeight });
+		viewport.scrollTo({ top: list.offsetTop + startRow * rowHeight + categoryIndex * headerHeight });
 	};
 	return /* @__PURE__ */ jsx(Toolbar.Root, {
 		"data-control-ui": "emoji-picker",
@@ -204,7 +211,7 @@ function EmojiPickerRow({ children, className, ...props }) {
 		"data-control-ui": "emoji-picker",
 		"data-control-family": "emoji-picker",
 		"data-slot": "row",
-		className: cn("scroll-my-1", className),
+		className,
 		...props,
 		children
 	});
@@ -231,19 +238,23 @@ function EmojiPickerCategoryHeader({ category, className, ...props }) {
 		children: category.label
 	});
 }
-function EmojiPickerContent({ className, ref, ...props }) {
-	const { viewportRef, loadState, retryEmojiData } = useEmojiPicker();
+function EmojiPickerContent({ className, ref, children, ...props }) {
+	const { viewportRef, listRef, loadState, retryEmojiData } = useEmojiPicker();
 	useImperativeHandle(ref, () => {
 		if (!viewportRef.current) throw new Error("EmojiPicker viewport is not mounted.");
 		return viewportRef.current;
 	});
-	return /* @__PURE__ */ jsx(EmojiPicker$1.Viewport, {
-		"data-control-ui": "emoji-picker",
-		"data-control-family": "emoji-picker",
-		"data-slot": "content",
-		className: cn("relative min-h-0 flex-1 outline-none", className),
-		...props,
-		ref: viewportRef,
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		lockAxis: "x",
+		className: cn("min-h-0 flex-1", className),
+		viewportRef,
+		viewportProps: {
+			"data-control-ui": "emoji-picker",
+			"data-control-family": "emoji-picker",
+			"data-slot": "content",
+			...props,
+			render: renderEmojiViewport
+		},
 		children: loadState.status === "error" ? /* @__PURE__ */ jsxs("div", {
 			"data-control-ui": "emoji-picker",
 			"data-control-family": "emoji-picker",
@@ -255,6 +266,7 @@ function EmojiPickerContent({ className, ref, ...props }) {
 				children: "Try again"
 			})]
 		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			children,
 			/* @__PURE__ */ jsx(EmojiPicker$1.Loading, {
 				"data-control-ui": "emoji-picker",
 				"data-control-family": "emoji-picker",
@@ -274,6 +286,7 @@ function EmojiPickerContent({ className, ref, ...props }) {
 				"data-control-family": "emoji-picker",
 				"data-slot": "list",
 				className: "select-none",
+				ref: listRef,
 				components: {
 					Row: EmojiPickerRow,
 					Emoji: EmojiPickerEmoji,
@@ -283,6 +296,9 @@ function EmojiPickerContent({ className, ref, ...props }) {
 		] })
 	});
 }
+function renderEmojiViewport(viewportProps) {
+	return /* @__PURE__ */ jsx(EmojiPicker$1.Viewport, { ...viewportProps });
+}
 function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "emoji-picker",
@@ -311,5 +327,46 @@ function EmojiPickerFooter({ className, placeholder = "Pick an emoji…", ...pro
 		}) })
 	});
 }
+function EmojiIconPicker({ children, defaultValue = "emoji", ...props }) {
+	return /* @__PURE__ */ jsx(Tabs, {
+		"data-control-ui": "emoji-icon-picker",
+		"data-control-family": "tabs",
+		"data-slot": "root",
+		defaultValue,
+		...props,
+		children: /* @__PURE__ */ jsx(PopoverViewport, { children })
+	});
+}
+function EmojiIconPickerTabs({ emojiLabel = "Emoji", iconsLabel = "Icons", ...props }) {
+	return /* @__PURE__ */ jsxs(TabsList, {
+		size: "xs",
+		className: "mx-2 mt-2",
+		"aria-label": "Choose emoji or icon",
+		...props,
+		children: [/* @__PURE__ */ jsx(TabsTab, {
+			value: "emoji",
+			children: emojiLabel
+		}), /* @__PURE__ */ jsx(TabsTab, {
+			value: "icons",
+			children: iconsLabel
+		})]
+	});
+}
+function EmojiIconPickerEmoji(props) {
+	return /* @__PURE__ */ jsx(TabsPanel, {
+		value: "emoji",
+		"data-slide": void 0,
+		className: "mt-0",
+		children: /* @__PURE__ */ jsx(EmojiPicker, { ...props })
+	});
+}
+function EmojiIconPickerIcons(props) {
+	return /* @__PURE__ */ jsx(TabsPanel, {
+		value: "icons",
+		"data-slide": void 0,
+		className: "mt-0",
+		children: /* @__PURE__ */ jsx(IconPicker, { ...props })
+	});
+}
 //#endregion
-export { EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerFooter, EmojiPickerReactions, EmojiPickerRecent, EmojiPickerSearch };
+export { EmojiIconPicker, EmojiIconPickerEmoji, EmojiIconPickerIcons, EmojiIconPickerTabs, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerFooter, EmojiPickerReactions, EmojiPickerRecent, EmojiPickerSearch };

package/dist/ui/flow.js

@@ -146,7 +146,7 @@ function FlowEdgeLabelChip({ className, ...props }) {
 		"data-control-ui": "flow",
 		"data-control-family": "flow",
 		"data-slot": "edge-label-chip",
-		className: cn("inline-flex max-w-40 items-center truncate", className)
+		className: cn("max-w-40 truncate", className)
 	});
 }
 //#endregion

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

@@ -0,0 +1,19 @@
+import { ControlSize } from "../control-variants.js";
+//#region src/ui/gradient-editor-controls.d.ts
+type GradientEditorSelectProps = {
+  size?: ControlSize;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+};
+export type GradientEditorTypeSelectProps = GradientEditorSelectProps;
+export type GradientEditorInterpolationSelectProps = GradientEditorSelectProps;
+export type GradientEditorAngleProps = {
+  size?: ControlSize;
+  className?: string;
+  "aria-label"?: string;
+};
+export declare function GradientEditorTypeSelect(props: GradientEditorTypeSelectProps): import("react").JSX.Element;
+export declare function GradientEditorInterpolationSelect(props: GradientEditorInterpolationSelectProps): import("react").JSX.Element;
+export declare function GradientEditorAngle({ size, className, "aria-label": ariaLabel }: GradientEditorAngleProps): import("react").JSX.Element | null;
+//#endregion

package/dist/ui/gradient-editor-controls.js

@@ -0,0 +1,75 @@
+"use client";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "./number-field.js";
+import { useGradientEditor } from "./gradient-editor.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/gradient-editor-controls.tsx
+const GRADIENT_TYPE_LABELS = {
+	linear: "Linear",
+	radial: "Radial",
+	conic: "Conic"
+};
+const GRADIENT_INTERPOLATION_LABELS = {
+	srgb: "sRGB",
+	oklab: "OKLab",
+	oklch: "OKLCH"
+};
+const WHOLE_DEGREES = { maximumFractionDigits: 0 };
+function GradientEditorSelect({ value, onValueChange, labels, defaultLabel, size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
+	return /* @__PURE__ */ jsxs(Select, {
+		value,
+		onValueChange,
+		items: labels,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? defaultLabel : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: Object.entries(labels).map(([option, label]) => /* @__PURE__ */ jsx(SelectItem, {
+			value: option,
+			children: label
+		}, option)) })]
+	});
+}
+function GradientEditorTypeSelect(props) {
+	const { type, setType } = useGradientEditor();
+	return /* @__PURE__ */ jsx(GradientEditorSelect, {
+		value: type,
+		onValueChange: setType,
+		labels: GRADIENT_TYPE_LABELS,
+		defaultLabel: "Gradient type",
+		...props
+	});
+}
+function GradientEditorInterpolationSelect(props) {
+	const { interpolation, setInterpolation } = useGradientEditor();
+	return /* @__PURE__ */ jsx(GradientEditorSelect, {
+		value: interpolation,
+		onValueChange: setInterpolation,
+		labels: GRADIENT_INTERPOLATION_LABELS,
+		defaultLabel: "Gradient color space",
+		...props
+	});
+}
+function GradientEditorAngle({ size = "sm", className, "aria-label": ariaLabel = "Gradient angle" }) {
+	const { type, angle, setAngle } = useGradientEditor();
+	if (type === "radial") return null;
+	return /* @__PURE__ */ jsx(NumberField, {
+		size,
+		className,
+		value: angle,
+		min: 0,
+		max: 360,
+		format: WHOLE_DEGREES,
+		onValueChange: (next) => {
+			if (next !== null) setAngle(next);
+		},
+		children: /* @__PURE__ */ jsxs(NumberFieldGroup, {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(NumberFieldInput, { "aria-label": ariaLabel }), /* @__PURE__ */ jsx(NumberFieldScrubArea, { children: "°" })]
+		})
+	});
+}
+//#endregion
+export { GradientEditorAngle, GradientEditorInterpolationSelect, GradientEditorTypeSelect };

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

@@ -1,19 +1,11 @@
-import { ControlSize } from "../control-variants.js";
 import { GradientEditorKnobStyle } from "../knob-contracts/gradient-editor-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
+import { GradientInterpolation, GradientStop, GradientType, GradientValue } from "../lib/gradient.js";
+import { CSSProperties, ComponentProps, RefObject } from "react";
 //#region src/ui/gradient-editor.d.ts
-export type GradientType = "linear" | "radial" | "conic";
-export type GradientStop = {
-  id: string;
-  position: number;
-  color: string;
-};
 export type GradientEditorProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
-  value?: string;
-  defaultStops?: GradientStop[];
-  defaultType?: GradientType;
-  defaultAngle?: number;
-  onValueChange?: (value: string) => void;
+  value?: GradientValue;
+  defaultValue?: GradientValue;
+  onValueChange?: (value: GradientValue) => void;
 } & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
@@ -30,17 +22,26 @@ export type GradientEditorStopProps = Omit<ComponentProps<"button">, "style"> &
 export type GradientEditorStopAddProps = Omit<ComponentProps<"button">, "onClick" | "style"> & {
   style?: CSSProperties & GradientEditorKnobStyle;
 };
-export type GradientEditorTypeSelectProps = {
-  size?: ControlSize;
-  className?: string;
-  "aria-label"?: string;
-  "aria-labelledby"?: string;
+type GradientEditorContextValue = GradientValue & {
+  gradient: string;
+  selectedStop: GradientStop | undefined;
+  canRemoveStop: boolean;
+  trackRef: RefObject<HTMLFieldSetElement | null>;
+  stopNodes: Map<string, HTMLButtonElement>;
+  select: (id: string) => void;
+  setStopColor: (id: string, color: string) => void;
+  setStopPosition: (id: string, position: number) => void;
+  addStop: (position: number) => void;
+  removeStop: (id: string) => void;
+  setType: (type: GradientType) => void;
+  setAngle: (angle: number) => void;
+  setInterpolation: (interpolation: GradientInterpolation) => void;
 };
-export declare function GradientEditor({ defaultStops, defaultType, defaultAngle, onValueChange, className, children, value: _value, ...props }: GradientEditorProps): import("react").JSX.Element;
+export declare function useGradientEditor(): GradientEditorContextValue;
+export declare function GradientEditor({ value: controlledValue, defaultValue, onValueChange, className, children, ...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, 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;
-//#endregion
+//#endregion
+export type { GradientInterpolation, GradientStop, GradientType, GradientValue };

package/dist/ui/gradient-editor.js

@@ -1,85 +1,86 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { useColorArea } from "../hooks/use-color-area.js";
-import { formatGradient } from "../lib/color.js";
-import { ColorPicker, ColorPickerAlpha, ColorPickerArea, ColorPickerContent, ColorPickerFormatSelect, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "./color-picker.js";
+import { formatGradient, gradientColorAt } from "../lib/gradient.js";
 import { createContext, useContext, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/gradient-editor.tsx
-const DEFAULT_STOPS = [{
-	id: "stop-1",
-	position: 0,
-	color: "#7c3aed"
-}, {
-	id: "stop-2",
-	position: 1,
-	color: "#3b82f6"
-}];
-const isGradientType = (v) => v === "linear" || v === "radial" || v === "conic";
+const DEFAULT_GRADIENT = {
+	type: "linear",
+	angle: 90,
+	interpolation: "oklab",
+	stops: [{
+		id: "stop-1",
+		position: 0,
+		color: "#7c3aed"
+	}, {
+		id: "stop-2",
+		position: 1,
+		color: "#3b82f6"
+	}]
+};
+const MIN_GRADIENT_STOPS = 2;
 const clamp01 = (n) => Math.min(1, Math.max(0, n));
+function unusedStopId(stops) {
+	const taken = new Set(stops.map((stop) => stop.id));
+	let ordinal = stops.length + 1;
+	while (taken.has(`stop-${ordinal}`)) ordinal += 1;
+	return `stop-${ordinal}`;
+}
 const GradientEditorContext = createContext(null);
 function useGradientEditor() {
 	const ctx = useContext(GradientEditorContext);
 	if (!ctx) throw new Error("GradientEditor parts must be rendered inside <GradientEditor>.");
 	return ctx;
 }
-function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear", defaultAngle = 90, onValueChange, className, children, value: _value, ...props }) {
-	const [stops, setStops] = useState(defaultStops);
-	const [type, setTypeState] = useState(defaultType);
-	const [angle] = useState(defaultAngle);
-	const [selectedId, setSelectedId] = useState(defaultStops[0]?.id ?? "stop-1");
-	const idCounter = useRef(defaultStops.length);
+function GradientEditor({ value: controlledValue, defaultValue = DEFAULT_GRADIENT, onValueChange, className, children, ...props }) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const value = controlledValue ?? uncontrolledValue;
+	const { stops } = value;
+	const [selectedId, setSelectedId] = useState(stops[0]?.id);
 	const trackRef = useRef(null);
 	const [stopNodes] = useState(() => /* @__PURE__ */ new Map());
-	const gradient = formatGradient(stops, type, angle);
-	function updateStops(nextStops) {
-		setStops(nextStops);
-		onValueChange?.(formatGradient(nextStops, type, angle));
+	function change(patch) {
+		const next = {
+			...value,
+			...patch
+		};
+		if (controlledValue === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
 	}
-	const setStopColor = (id, color) => updateStops(stops.map((stop) => stop.id === id ? {
-		...stop,
-		color
-	} : stop));
-	const setStopPosition = (id, position) => updateStops(stops.map((stop) => stop.id === id ? {
+	const canRemoveStop = stops.length > MIN_GRADIENT_STOPS;
+	const changeStop = (id, patch) => change({ stops: stops.map((stop) => stop.id === id ? {
 		...stop,
-		position: clamp01(position)
-	} : stop));
+		...patch
+	} : stop) });
 	const addStop = (position) => {
-		idCounter.current += 1;
-		const id = `stop-${idCounter.current}`;
-		const near = [...stops].sort((a, b) => Math.abs(a.position - position) - Math.abs(b.position - position))[0];
-		updateStops([...stops, {
+		const id = unusedStopId(stops);
+		const clamped = clamp01(position);
+		change({ stops: [...stops, {
 			id,
-			position: clamp01(position),
-			color: near?.color ?? "#ffffff"
-		}]);
+			position: clamped,
+			color: gradientColorAt(value, clamped)
+		}] });
 		setSelectedId(id);
 	};
 	const removeStop = (id) => {
-		if (stops.length <= 2) return;
-		const nextStops = stops.filter((stop) => stop.id !== id);
-		updateStops(nextStops);
-		setSelectedId((current) => current === id ? nextStops[0]?.id ?? current : current);
-	};
-	const setType = (nextType) => {
-		setTypeState(nextType);
-		onValueChange?.(formatGradient(stops, nextType, angle));
+		if (canRemoveStop) change({ stops: stops.filter((stop) => stop.id !== id) });
 	};
 	const ctx = {
-		stops,
-		type,
-		angle,
-		selectedId,
-		gradient,
+		...value,
+		gradient: formatGradient(value),
+		selectedStop: stops.find((stop) => stop.id === selectedId) ?? stops[0],
+		canRemoveStop,
 		trackRef,
 		stopNodes,
 		select: setSelectedId,
-		setStopColor,
-		setStopPosition,
+		setStopColor: (id, color) => changeStop(id, { color }),
+		setStopPosition: (id, position) => changeStop(id, { position: clamp01(position) }),
 		addStop,
 		removeStop,
-		setType
+		setType: (type) => change({ type }),
+		setAngle: (angle) => change({ angle }),
+		setInterpolation: (interpolation) => change({ interpolation })
 	};
 	return /* @__PURE__ */ jsx(GradientEditorContext.Provider, {
 		value: ctx,
@@ -95,6 +96,10 @@ function GradientEditor({ defaultStops = DEFAULT_STOPS, defaultType = "linear",
 }
 function GradientEditorPreview({ className, style, "aria-label": ariaLabel = "Gradient preview", ...props }) {
 	const { gradient } = useGradientEditor();
+	const imageStyle = {
+		...style,
+		"--_gradient-editor-image": gradient
+	};
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "gradient-editor",
 		"data-control-family": "gradient-editor",
@@ -102,16 +107,21 @@ function GradientEditorPreview({ className, style, "aria-label": ariaLabel = "Gr
 		role: "img",
 		"aria-label": ariaLabel,
 		className: cn("w-full", className),
-		style: {
-			...style,
-			backgroundImage: gradient
-		},
+		style: imageStyle,
 		...props
 	});
 }
 function GradientEditorTrack({ className, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
-	const { stops, trackRef, addStop } = useGradientEditor();
-	const stripe = formatGradient(stops, "linear", 90);
+	const { stops, interpolation, trackRef, addStop } = useGradientEditor();
+	const imageStyle = {
+		...style,
+		"--_gradient-editor-image": formatGradient({
+			type: "linear",
+			angle: 90,
+			interpolation,
+			stops
+		})
+	};
 	return /* @__PURE__ */ jsx("fieldset", {
 		ref: trackRef,
 		"data-control-ui": "gradient-editor",
@@ -120,12 +130,9 @@ function GradientEditorTrack({ className, children, style, "aria-label": ariaLab
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Gradient stops" : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
 		className: cn("relative m-0 min-w-0 w-full cursor-copy touch-pan-y p-0", className),
-		style: {
-			...style,
-			backgroundImage: stripe
-		},
+		style: imageStyle,
 		onPointerDown: (event) => {
-			if (event.target !== event.currentTarget) return;
+			if (!(event.target === event.currentTarget)) return;
 			const rect = event.currentTarget.getBoundingClientRect();
 			addStop((event.clientX - rect.left) / rect.width);
 		},
@@ -134,9 +141,7 @@ function GradientEditorTrack({ className, children, style, "aria-label": ariaLab
 	});
 }
 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 { stops, selectedStop, canRemoveStop, select, setStopPosition, removeStop, trackRef, stopNodes } = useGradientEditor();
 	const { onPointerDown: startDrag } = useColorArea((offset, rect) => setStopPosition(stop.id, offset.x / rect.width), trackRef);
 	function handlePointerDown(event) {
 		onPointerDown?.(event);
@@ -157,7 +162,7 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 		};
 	}
 	function remove() {
-		if (!canRemove) return;
+		if (!canRemoveStop) 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();
@@ -200,7 +205,7 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 				break;
 			case "Backspace":
 			case "Delete":
-				if (!canRemove) return;
+				if (!canRemoveStop) return;
 				event.preventDefault();
 				remove();
 		}
@@ -218,7 +223,7 @@ function GradientEditorStop({ stop, className, style, onPointerDown, onKeyDown,
 		"data-control-ui": "gradient-editor",
 		"data-control-family": "gradient-editor",
 		"data-slot": "stop",
-		"data-selected": selected ? "true" : void 0,
+		"data-selected": stop.id === selectedStop?.id ? "true" : void 0,
 		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? defaultLabel : ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
 		"aria-orientation": "horizontal",
@@ -262,56 +267,5 @@ function GradientEditorStopAdd({ className, children, ...props }) {
 		})
 	});
 }
-function GradientEditorStopColor() {
-	const { stops, selectedId, setStopColor } = useGradientEditor();
-	const selected = stops.find((s) => s.id === selectedId) ?? stops[0];
-	if (!selected) return null;
-	return /* @__PURE__ */ jsxs(ColorPicker, {
-		value: selected.color,
-		onValueChange: (color) => setStopColor(selected.id, color),
-		defaultFormat: "hex",
-		children: [/* @__PURE__ */ jsx(ColorPickerTrigger, {}), /* @__PURE__ */ jsxs(ColorPickerContent, { children: [
-			/* @__PURE__ */ jsx(ColorPickerArea, {}),
-			/* @__PURE__ */ jsx(ColorPickerHue, {}),
-			/* @__PURE__ */ jsx(ColorPickerAlpha, {}),
-			/* @__PURE__ */ jsxs("div", {
-				"data-control-ui": "gradient-editor",
-				"data-control-family": "gradient-editor",
-				"data-slot": "value-row",
-				className: "flex",
-				children: [/* @__PURE__ */ jsx(ColorPickerFormatSelect, {}), /* @__PURE__ */ jsx(ColorPickerInput, { className: "flex-1" })]
-			})
-		] })]
-	});
-}
-function GradientEditorTypeSelect({ size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
-	const { type, setType } = useGradientEditor();
-	return /* @__PURE__ */ jsxs(Select, {
-		value: type,
-		onValueChange: (value) => {
-			if (isGradientType(value)) setType(value);
-		},
-		children: [/* @__PURE__ */ jsx(SelectTrigger, {
-			size,
-			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Gradient type" : ariaLabel,
-			"aria-labelledby": ariaLabelledBy,
-			className,
-			children: /* @__PURE__ */ jsx(SelectValue, {})
-		}), /* @__PURE__ */ jsxs(SelectContent, { children: [
-			/* @__PURE__ */ jsx(SelectItem, {
-				value: "linear",
-				children: "Linear"
-			}),
-			/* @__PURE__ */ jsx(SelectItem, {
-				value: "radial",
-				children: "Radial"
-			}),
-			/* @__PURE__ */ jsx(SelectItem, {
-				value: "conic",
-				children: "Conic"
-			})
-		] })]
-	});
-}
 //#endregion
-export { GradientEditor, GradientEditorPreview, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopColor, GradientEditorTrack, GradientEditorTypeSelect };
+export { GradientEditor, GradientEditorPreview, GradientEditorStop, GradientEditorStopAdd, GradientEditorTrack, useGradientEditor };

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

@@ -27,7 +27,7 @@ export declare function IconPickerSearch({ placeholder, "aria-label": ariaLabel,
 export type IconPickerContentProps = Omit<ComponentProps<"div">, "style" | "children"> & IconPickerStyle & {
   empty?: ReactNode;
 };
-export declare function IconPickerContent({ className, empty, "aria-label": ariaLabel, ...props }: IconPickerContentProps): import("react").JSX.Element;
+export declare function IconPickerContent({ className, ref, empty, "aria-label": ariaLabel, ...props }: IconPickerContentProps): import("react").JSX.Element;
 export type IconPickerColorsProps = Omit<ComponentProps<"div">, "style" | "defaultValue" | "onChange" | "children"> & IconPickerStyle & ControlledChoice & {
   colors: readonly IconPickerColor[];
 };