@ctrl-ui/react 0.8.20 → 0.9.0

package/dist/ui/chart.js

@@ -0,0 +1,257 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { readDurationMs } from "../lib/motion.js";
+import { CHART_COLORS, chartColor } from "./chart-colors.js";
+import { useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Chart as Chart$1 } from "@tanstack/charts/react/tooltip";
+//#region src/ui/chart.tsx
+const NON_ID_CHARACTERS = /[^\w-]/g;
+function Chart({ className, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "root",
+		className: cn(className),
+		style,
+		...props
+	});
+}
+function chartPatternStyle(id) {
+	return {
+		"--_cui-chart-hatch-blue": `url(#${id}-hatch-blue)`,
+		"--_cui-chart-hatch-purple": `url(#${id}-hatch-purple)`,
+		"--_cui-chart-hatch-pink": `url(#${id}-hatch-pink)`,
+		"--_cui-chart-hatch-orange": `url(#${id}-hatch-orange)`,
+		"--_cui-chart-hatch-green": `url(#${id}-hatch-green)`,
+		"--_cui-chart-hatch-yellow": `url(#${id}-hatch-yellow)`,
+		"--_cui-chart-hatch-red": `url(#${id}-hatch-red)`,
+		"--_cui-chart-hatch-neutral": `url(#${id}-hatch-neutral)`,
+		"--_cui-chart-fade": `url(#${id}-fade)`
+	};
+}
+function ChartPatterns({ id }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		focusable: "false",
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "patterns",
+		width: "0",
+		height: "0",
+		className: "absolute size-0 overflow-hidden",
+		children: /* @__PURE__ */ jsxs("defs", { children: [
+			CHART_COLORS.map((color) => /* @__PURE__ */ jsxs("pattern", {
+				id: `${id}-hatch-${color}`,
+				patternUnits: "userSpaceOnUse",
+				width: "6",
+				height: "6",
+				patternTransform: "rotate(45)",
+				children: [/* @__PURE__ */ jsx("rect", {
+					"data-control-ui": "chart",
+					"data-control-family": "chart",
+					"data-slot": "hatch-tint",
+					width: "6",
+					height: "6",
+					fill: chartColor(color)
+				}), /* @__PURE__ */ jsx("rect", {
+					"data-control-ui": "chart",
+					"data-control-family": "chart",
+					"data-slot": "hatch-stripe",
+					width: "2",
+					height: "6",
+					fill: chartColor(color)
+				})]
+			}, color)),
+			/* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-fade-gradient`,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0",
+					stopColor: "oklch(1 0 0)"
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: "oklch(1 0 0)",
+					stopOpacity: "0.15"
+				})]
+			}),
+			/* @__PURE__ */ jsx("mask", {
+				id: `${id}-fade`,
+				maskContentUnits: "objectBoundingBox",
+				children: /* @__PURE__ */ jsx("rect", {
+					width: "1",
+					height: "1",
+					fill: `url(#${id}-fade-gradient)`
+				})
+			})
+		] })
+	});
+}
+function renderChartTooltipBody(context) {
+	return /* @__PURE__ */ jsx(ChartTooltipBody, { content: context.content });
+}
+function ChartPlot({ className, style, children, ...props }) {
+	const patternId = `cui-chart-${useId().replace(NON_ID_CHARACTERS, "")}`;
+	const plotRef = useRef(null);
+	useEffect(() => {
+		const node = plotRef.current;
+		if (!node) return;
+		let settleTimer;
+		const observer = new ResizeObserver(() => {
+			node.dataset.resizing = "";
+			clearTimeout(settleTimer);
+			settleTimer = window.setTimeout(() => {
+				delete node.dataset.resizing;
+			}, readDurationMs(node, "--duration-fast"));
+		});
+		observer.observe(node);
+		return () => {
+			observer.disconnect();
+			clearTimeout(settleTimer);
+		};
+	}, []);
+	useEffect(() => {
+		const node = plotRef.current;
+		if (!node) return;
+		let enterTimer;
+		const observer = new MutationObserver((records) => {
+			if (!records.some((record) => record.oldValue !== null && record.target instanceof HTMLElement && record.target.classList.contains("ts-chart-tooltip") && !record.target.hidden)) return;
+			node.dataset.tooltipEntering = "";
+			clearTimeout(enterTimer);
+			enterTimer = window.setTimeout(() => {
+				delete node.dataset.tooltipEntering;
+			}, readDurationMs(node, "--duration-fast"));
+		});
+		observer.observe(node, {
+			subtree: true,
+			attributeFilter: ["hidden"],
+			attributeOldValue: true
+		});
+		return () => {
+			observer.disconnect();
+			clearTimeout(enterTimer);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: plotRef,
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "plot",
+		"data-focus-ring": "within",
+		className: cn(className),
+		style: {
+			...chartPatternStyle(patternId),
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx(ChartPatterns, { id: patternId }),
+			/* @__PURE__ */ jsx(Chart$1, {
+				renderTooltipBody: renderChartTooltipBody,
+				...props
+			}),
+			children
+		]
+	});
+}
+function ChartCenter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "center",
+		className: cn("pointer-events-none absolute inset-0 grid place-content-center text-center", className),
+		...props
+	});
+}
+function ChartLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "legend",
+		className: cn("text-label text-muted-foreground", className),
+		...props
+	});
+}
+function ChartSwatch({ color }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "swatch",
+		style: { "--_cui-chart-swatch": color }
+	});
+}
+function ChartLegendItem({ color, fill = "solid", hidden = false, onHiddenChange, children, className, style, ...props }) {
+	const legendStyle = {
+		"--_cui-chart-swatch": chartColor(color),
+		...style
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "swatch"
+	}), children] });
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "legend-item",
+		"data-fill": fill,
+		"data-hidden": hidden ? "true" : void 0,
+		className: cn(className),
+		style: legendStyle,
+		...props,
+		children: onHiddenChange ? /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-control-ui": "chart",
+			"data-control-family": "chart",
+			"data-slot": "legend-toggle",
+			"aria-pressed": !hidden,
+			onClick: () => onHiddenChange(!hidden),
+			children: content
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: content
+		})
+	});
+}
+function ChartTooltipBody({ content, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "chart",
+		"data-control-family": "chart",
+		"data-slot": "tooltip",
+		className: cn("grid min-w-32 gap-1.5", className),
+		...props,
+		children: typeof content === "string" ? /* @__PURE__ */ jsx("p", {
+			className: "text-label",
+			children: content
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [content.title ? /* @__PURE__ */ jsx("p", {
+			"data-control-ui": "chart",
+			"data-control-family": "chart",
+			"data-slot": "tooltip-title",
+			className: "font-medium text-label",
+			children: content.title
+		}) : null, content.rows.map((row) => /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "chart",
+			"data-control-family": "chart",
+			"data-slot": "tooltip-row",
+			"data-active": row.active ? "true" : void 0,
+			className: "flex items-center gap-2 text-label",
+			children: [
+				/* @__PURE__ */ jsx(ChartSwatch, { color: row.color ?? "currentColor" }),
+				/* @__PURE__ */ jsx("span", {
+					className: row.active ? void 0 : "text-muted-foreground",
+					children: row.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ms-auto font-medium tabular-nums",
+					children: row.value
+				})
+			]
+		}, row.label))] })
+	});
+}
+//#endregion
+export { Chart, ChartCenter, ChartLegend, ChartLegendItem, ChartPlot, ChartTooltipBody };

package/dist/ui/color-picker-area.d.ts

@@ -0,0 +1,16 @@
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/color-picker-area.d.ts
+export type ColorPickerAreaProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export type ColorPickerAreaThumbProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export type ColorPickerWheelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export declare function ColorPickerArea({ className, style, children, ...props }: ColorPickerAreaProps): import("react").JSX.Element;
+export declare function ColorPickerAreaThumb({ className, style, ...props }: ColorPickerAreaThumbProps): import("react").JSX.Element;
+export declare function ColorPickerWheel({ className, style, ...props }: ColorPickerWheelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/color-picker-area.js

@@ -0,0 +1,175 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useColorArea } from "../hooks/use-color-area.js";
+import { pointToHueSat, pointToSaturationValue } from "../lib/color.js";
+import { useColorPicker } from "./color-picker-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/color-picker-area.tsx
+function ColorPickerArea({ className, style, children, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	const { areaRef, onPointerDown, dragging } = useColorArea((offset, rect) => {
+		if (disabled) return;
+		const { s, v } = pointToSaturationValue(rect, offset.x, offset.y);
+		setHsva({
+			s,
+			v
+		});
+	});
+	function axisKey(axis, event) {
+		if (!event.shiftKey) return;
+		const cur = axis === "s" ? hsva.s : hsva.v;
+		let delta = 0;
+		if (event.key === "ArrowUp" || event.key === "ArrowRight") delta = 10;
+		else if (event.key === "ArrowDown" || event.key === "ArrowLeft") delta = -10;
+		if (delta === 0) return;
+		event.preventDefault();
+		const next = Math.min(100, Math.max(0, cur + delta));
+		setHsva(axis === "s" ? { s: next } : { v: next });
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-focus-ring": "within",
+		ref: areaRef,
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "area",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-dragging": dragging ? "true" : void 0,
+		role: "group",
+		"aria-label": "Saturation and brightness",
+		onPointerDown: disabled ? void 0 : onPointerDown,
+		className: cn("group relative w-full touch-none select-none overflow-hidden", disabled ? "cursor-not-allowed" : "cursor-crosshair", className),
+		style: {
+			...style,
+			backgroundColor: `hsl(${hsva.h} 100% 50%)`
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "area-saturation",
+				className: "absolute inset-0"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "area-brightness",
+				className: "absolute inset-0"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Saturation",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.s),
+				disabled,
+				onChange: (event) => setHsva({ s: Number(event.target.value) }),
+				onKeyDown: (event) => axisKey("s", event)
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Brightness",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.v),
+				disabled,
+				onChange: (event) => setHsva({ v: Number(event.target.value) }),
+				onKeyDown: (event) => axisKey("v", event)
+			}),
+			children ?? /* @__PURE__ */ jsx(ColorPickerAreaThumb, {})
+		]
+	});
+}
+function ColorPickerAreaThumb({ className, style, ...props }) {
+	const { hsva } = useColorPicker();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "area-thumb",
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute -translate-x-1/2 -translate-y-1/2", className),
+		style: {
+			...style,
+			left: `${hsva.s}%`,
+			top: `${100 - hsva.v}%`
+		},
+		...props
+	});
+}
+function ColorPickerWheel({ className, style, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	const { areaRef, onPointerDown, dragging } = useColorArea((offset, rect) => {
+		if (disabled) return;
+		const { h, s } = pointToHueSat(rect, offset.x, offset.y);
+		setHsva({
+			h,
+			s
+		});
+	});
+	const radius = hsva.s / 100 * 50;
+	const rad = hsva.h * Math.PI / 180;
+	const left = 50 + radius * Math.cos(rad);
+	const top = 50 + radius * Math.sin(rad);
+	const wheelStyle = {
+		...style,
+		"--_color-picker-wheel-shade": String(1 - hsva.v / 100)
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-focus-ring": "within",
+		ref: areaRef,
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "wheel",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-dragging": dragging ? "true" : void 0,
+		role: "group",
+		"aria-label": "Color wheel",
+		onPointerDown: disabled ? void 0 : onPointerDown,
+		className: cn("group relative aspect-square w-full touch-none select-none", disabled ? "cursor-not-allowed" : "cursor-crosshair", className),
+		style: wheelStyle,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "wheel-thumb",
+				"aria-hidden": true,
+				className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2",
+				style: {
+					left: `${left}%`,
+					top: `${top}%`
+				}
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Wheel hue",
+				className: "sr-only",
+				min: 0,
+				max: 360,
+				step: 1,
+				value: Math.round(hsva.h),
+				disabled,
+				onChange: (event) => setHsva({ h: Number(event.target.value) })
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "range",
+				"aria-label": "Wheel saturation",
+				className: "sr-only",
+				min: 0,
+				max: 100,
+				step: 1,
+				value: Math.round(hsva.s),
+				disabled,
+				onChange: (event) => setHsva({ s: Number(event.target.value) })
+			})
+		]
+	});
+}
+//#endregion
+export { ColorPickerArea, ColorPickerAreaThumb, ColorPickerWheel };

package/dist/ui/color-picker-context.d.ts

@@ -0,0 +1,27 @@
+import { ChannelId, ColorFormat, Hsva } from "../lib/color.js";
+//#region src/ui/color-picker-context.d.ts
+export type ColorPickerStateProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  format?: ColorFormat;
+  defaultFormat?: ColorFormat;
+  onFormatChange?: (format: ColorFormat) => void;
+  alpha?: boolean;
+  disabled?: boolean;
+};
+type ColorPickerContextValue = {
+  hsva: Hsva;
+  format: ColorFormat;
+  alpha: boolean;
+  disabled: boolean;
+  valueString: string;
+  setHsva: (partial: Partial<Hsva>) => void;
+  setChannelValue: (id: ChannelId, value: number) => void;
+  setFromString: (raw: string) => boolean;
+  setFormat: (format: ColorFormat) => void;
+};
+export declare const ColorPickerContext: import("react").Context<ColorPickerContextValue | null>;
+export declare function useColorPicker(): ColorPickerContextValue;
+export declare function useColorState(props: ColorPickerStateProps): ColorPickerContextValue;
+//#endregion

package/dist/ui/color-picker-context.js

@@ -0,0 +1,87 @@
+"use client";
+import { formatColor, parseColor, preserveAchromatic, setChannel } from "../lib/color.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+//#region src/ui/color-picker-context.ts
+const ColorPickerContext = createContext(null);
+function useColorPicker() {
+	const ctx = useContext(ColorPickerContext);
+	if (!ctx) throw new Error("ColorPicker parts must be rendered inside <ColorPicker>.");
+	return ctx;
+}
+function useColorState(props) {
+	const { value, defaultValue = "#000000", onValueChange, format: formatProp, defaultFormat = "hex", onFormatChange, alpha = true, disabled = false } = props;
+	const [hsva, setHsvaState] = useState(() => parseColor(value ?? defaultValue) ?? {
+		h: 0,
+		s: 0,
+		v: 0,
+		a: 1
+	});
+	const [formatState, setFormatState] = useState(defaultFormat);
+	const format = formatProp ?? formatState;
+	const hsvaRef = useRef(hsva);
+	const formatRef = useRef(format);
+	const alphaRef = useRef(alpha);
+	const onValueChangeRef = useRef(onValueChange);
+	const lastEmitted = useRef(null);
+	useEffect(() => {
+		hsvaRef.current = hsva;
+		formatRef.current = format;
+		alphaRef.current = alpha;
+		onValueChangeRef.current = onValueChange;
+	}, [
+		hsva,
+		format,
+		alpha,
+		onValueChange
+	]);
+	const emit = (next, fmt) => {
+		const str = formatColor(next, fmt, { alpha: alphaRef.current });
+		lastEmitted.current = str;
+		onValueChangeRef.current?.(str);
+	};
+	const commit = (next) => {
+		hsvaRef.current = next;
+		setHsvaState(next);
+		emit(next, formatRef.current);
+	};
+	useEffect(() => {
+		if (lastEmitted.current === null) lastEmitted.current = formatColor(hsvaRef.current, formatRef.current, { alpha: alphaRef.current });
+		if (value === void 0 || value === lastEmitted.current) return;
+		const parsed = parseColor(value);
+		if (!parsed) return;
+		const reconciled = preserveAchromatic(parsed, hsvaRef.current);
+		hsvaRef.current = reconciled;
+		lastEmitted.current = value;
+		setHsvaState(reconciled);
+	}, [value]);
+	const setHsva = (partial) => commit({
+		...hsvaRef.current,
+		...partial
+	});
+	const setChannelValue = (id, next) => commit(setChannel(hsvaRef.current, id, next));
+	const setFromString = (raw) => {
+		const parsed = parseColor(raw);
+		if (!parsed) return false;
+		commit(preserveAchromatic(parsed, hsvaRef.current));
+		return true;
+	};
+	const setFormat = (next) => {
+		if (formatProp === void 0) setFormatState(next);
+		formatRef.current = next;
+		onFormatChange?.(next);
+		emit(hsvaRef.current, next);
+	};
+	return {
+		hsva,
+		format,
+		alpha,
+		disabled,
+		valueString: formatColor(hsva, format, { alpha }),
+		setHsva,
+		setChannelValue,
+		setFromString,
+		setFormat
+	};
+}
+//#endregion
+export { ColorPickerContext, useColorPicker, useColorState };

package/dist/ui/color-picker-contrast.d.ts

@@ -0,0 +1,20 @@
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { WcagLevel } from "../lib/contrast.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/color-picker-contrast.d.ts
+export type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  background?: string;
+  passLabel?: string;
+  failLabel?: string;
+};
+export type ColorPickerAreaContrastProps = Omit<ComponentProps<"span">, "children" | "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  background?: string;
+  level?: WcagLevel;
+};
+export declare function ColorPickerContrast({ background, passLabel, failLabel, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
+export declare function ColorPickerAreaContrast({ background, level, className, ...props }: ColorPickerAreaContrastProps): import("react").JSX.Element | null;
+//#endregion