@ctrl-ui/react 0.8.20 → 0.9.0

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

@@ -0,0 +1,129 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { formatColor, hsvaToRgba, parseColor } from "../lib/color.js";
+import { useColorPicker } from "./color-picker-context.js";
+import { TARGET_RATIO, contrastFailBands, contrastOf, fixColorForContrast, formatContrastRatio, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/color-picker-contrast.tsx
+function ColorPickerContrast({ background = "#ffffff", passLabel = "Passes", failLabel = "Fails", className, ...props }) {
+	const { hsva, setFromString, disabled } = useColorPicker();
+	const bg = parseColor(background);
+	if (!bg) return null;
+	const bgRgba = hsvaToRgba(bg);
+	const ratio = contrastOf(hsva, bgRgba);
+	const levels = wcagLevels(ratio);
+	const target = nextFixLevel(levels);
+	const applyFix = () => {
+		if (!target) return;
+		const fixed = fixColorForContrast(hsva, bgRgba, TARGET_RATIO[target]);
+		if (fixed) setFromString(formatColor(fixed, "hex"));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "contrast",
+		className: cn("flex items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "contrast-ratio",
+				children: [formatContrastRatio(ratio), ":1"]
+			}),
+			/* @__PURE__ */ jsx(WcagPill, {
+				ok: levels.AA,
+				passLabel,
+				failLabel,
+				children: "AA"
+			}),
+			/* @__PURE__ */ jsx(WcagPill, {
+				ok: levels.AAA,
+				passLabel,
+				failLabel,
+				children: "AAA"
+			}),
+			target ? /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "contrast-fix",
+				disabled,
+				onClick: applyFix,
+				className: "ms-auto cursor-pointer disabled:cursor-not-allowed",
+				children: ["Fix for ", target]
+			}) : null
+		]
+	});
+}
+function WcagPill({ ok, passLabel, failLabel, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "contrast-level",
+		"data-passing": ok ? "true" : void 0,
+		className: "inline-flex items-center",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: ok ? "✓" : "✕"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: ok ? passLabel : failLabel
+			}),
+			" ",
+			children
+		]
+	});
+}
+const AREA_EDGE_MARGIN = .5;
+const isInsideArea = (brightness) => brightness > AREA_EDGE_MARGIN && brightness < 99.5;
+function failRegionClipPath(bands) {
+	const brightEdge = bands.map((band) => `${band.saturation}% ${100 - band.failsTo}%`);
+	const darkEdge = bands.toReversed().map((band) => `${band.saturation}% ${100 - band.failsFrom}%`);
+	return `polygon(${[...brightEdge, ...darkEdge].join(", ")})`;
+}
+function thresholdPath(bands, edge) {
+	return bands.flatMap((band, column) => {
+		const next = bands[column + 1];
+		if (!next || !(isInsideArea(band[edge]) || isInsideArea(next[edge]))) return [];
+		return [`M${band.saturation} ${100 - band[edge]}L${next.saturation} ${100 - next[edge]}`];
+	}).join("");
+}
+function ColorPickerAreaContrast({ background = "#ffffff", level = "AA", className, ...props }) {
+	const { hsva } = useColorPicker();
+	const bg = parseColor(background);
+	if (!bg) return null;
+	const bands = contrastFailBands(hsva, hsvaToRgba(bg), TARGET_RATIO[level]);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "area-contrast",
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute inset-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "area-contrast-fail",
+			className: "absolute inset-0",
+			style: { clipPath: failRegionClipPath(bands) }
+		}), /* @__PURE__ */ jsx("svg", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "area-contrast-threshold",
+			"aria-hidden": "true",
+			viewBox: "0 0 100 100",
+			preserveAspectRatio: "none",
+			fill: "none",
+			className: "absolute inset-0 size-full",
+			children: /* @__PURE__ */ jsx("path", {
+				d: thresholdPath(bands, "failsFrom") + thresholdPath(bands, "failsTo"),
+				vectorEffect: "non-scaling-stroke"
+			})
+		})]
+	});
+}
+//#endregion
+export { ColorPickerAreaContrast, ColorPickerContrast };

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

@@ -0,0 +1,15 @@
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/color-picker-sliders.d.ts
+export type ColorPickerSliderProps = Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export type ColorPickerHueProps = ColorPickerSliderProps;
+export type ColorPickerSaturationProps = ColorPickerSliderProps;
+export type ColorPickerBrightnessProps = ColorPickerSliderProps;
+export type ColorPickerAlphaProps = ColorPickerSliderProps;
+export declare function ColorPickerHue(props: ColorPickerHueProps): import("react").JSX.Element;
+export declare function ColorPickerSaturation(props: ColorPickerSaturationProps): import("react").JSX.Element;
+export declare function ColorPickerBrightness(props: ColorPickerBrightnessProps): import("react").JSX.Element;
+export declare function ColorPickerAlpha(props: ColorPickerAlphaProps): import("react").JSX.Element | null;
+//#endregion

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

@@ -0,0 +1,146 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { formatColor } from "../lib/color.js";
+import { useColorPicker } from "./color-picker-context.js";
+import { jsx } from "react/jsx-runtime";
+import { Slider } from "@base-ui/react/slider";
+//#region src/ui/color-picker-sliders.tsx
+const THUMB_HALF_SIZE = "calc(var(--_color-picker-thumb-size) / 2)";
+const HUE_TRACK_STOPS = [
+	"hsl(0 100% 50%)",
+	"hsl(60 100% 50%)",
+	"hsl(120 100% 50%)",
+	"hsl(180 100% 50%)",
+	"hsl(240 100% 50%)",
+	"hsl(300 100% 50%)",
+	"hsl(360 100% 50%)"
+];
+const opaqueHex = (hsva) => formatColor({
+	...hsva,
+	a: 1
+}, "hex");
+const SLIDER_AXES = {
+	h: {
+		label: "Hue",
+		max: 360,
+		step: 1,
+		format: {
+			style: "unit",
+			unit: "degree"
+		},
+		trackStops: () => HUE_TRACK_STOPS
+	},
+	s: {
+		label: "Saturation",
+		max: 100,
+		step: 1,
+		format: {
+			style: "unit",
+			unit: "percent"
+		},
+		trackStops: (hsva) => [opaqueHex({
+			...hsva,
+			s: 0
+		}), opaqueHex({
+			...hsva,
+			s: 100
+		})]
+	},
+	v: {
+		label: "Brightness",
+		max: 100,
+		step: 1,
+		format: {
+			style: "unit",
+			unit: "percent"
+		},
+		trackStops: (hsva) => [opaqueHex({
+			...hsva,
+			v: 0
+		}), opaqueHex({
+			...hsva,
+			v: 100
+		})]
+	},
+	a: {
+		label: "Opacity",
+		max: 1,
+		step: .01,
+		format: { style: "percent" },
+		trackStops: (hsva) => ["transparent", opaqueHex(hsva)]
+	}
+};
+function edgeAlignedTrackStyle(stops) {
+	const lastIndex = stops.length - 1;
+	return { "--_color-picker-slider-track-image": `linear-gradient(to right, ${stops.map((stop, index) => {
+		if (index === 0) return `${stop} ${THUMB_HALF_SIZE}`;
+		if (index === lastIndex) return `${stop} calc(100% - ${THUMB_HALF_SIZE})`;
+		return stop;
+	}).join(", ")})` };
+}
+function ColorPickerSlider({ axis, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const { hsva, setHsva, disabled } = useColorPicker();
+	const { label, max, step, format, trackStops } = SLIDER_AXES[axis];
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "slider",
+		format,
+		"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? label : ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		value: hsva[axis],
+		min: 0,
+		max,
+		step,
+		disabled,
+		thumbAlignment: "edge",
+		onValueChange: (next) => setHsva({ [axis]: next }),
+		className: cn("relative flex w-full cursor-pointer touch-pan-y select-none items-center data-[disabled]:cursor-not-allowed", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "flex h-full w-full items-center",
+			children: /* @__PURE__ */ jsx(Slider.Track, {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "slider-track",
+				className: "relative w-full",
+				style: edgeAlignedTrackStyle(trackStops(hsva)),
+				children: /* @__PURE__ */ jsx(Slider.Thumb, {
+					"data-control-ui": "color-picker",
+					"data-control-family": "color-picker",
+					"data-slot": "slider-thumb",
+					"data-focus-ring": "within",
+					className: "block"
+				})
+			})
+		})
+	});
+}
+function ColorPickerHue(props) {
+	return /* @__PURE__ */ jsx(ColorPickerSlider, {
+		axis: "h",
+		...props
+	});
+}
+function ColorPickerSaturation(props) {
+	return /* @__PURE__ */ jsx(ColorPickerSlider, {
+		axis: "s",
+		...props
+	});
+}
+function ColorPickerBrightness(props) {
+	return /* @__PURE__ */ jsx(ColorPickerSlider, {
+		axis: "v",
+		...props
+	});
+}
+function ColorPickerAlpha(props) {
+	const { alpha } = useColorPicker();
+	if (!alpha) return null;
+	return /* @__PURE__ */ jsx(ColorPickerSlider, {
+		axis: "a",
+		...props
+	});
+}
+//#endregion
+export { ColorPickerAlpha, ColorPickerBrightness, ColorPickerHue, ColorPickerSaturation };

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

@@ -0,0 +1,23 @@
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/color-picker-swatches.d.ts
+export type ColorPickerSwatchesProps = ComponentProps<"div"> & {
+  colors?: string[];
+  label?: ReactNode;
+} & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export type ColorPickerSwatchProps = Omit<Omit<ComponentProps<"button">, "color">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  color: string;
+};
+export type ColorPickerSwatchAddProps = Omit<Omit<ComponentProps<"button">, "onClick">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  onAdd?: (value: string) => void;
+};
+export declare function ColorPickerSwatches({ colors, label, className, children, ...props }: ColorPickerSwatchesProps): import("react").JSX.Element;
+export declare function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }: ColorPickerSwatchProps): import("react").JSX.Element;
+export declare function ColorPickerSwatchAdd({ onAdd, className, children, ...props }: ColorPickerSwatchAddProps): import("react").JSX.Element;
+//#endregion

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

@@ -0,0 +1,94 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { formatColor, parseColor } from "../lib/color.js";
+import { useColorPicker } from "./color-picker-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/color-picker-swatches.tsx
+function ColorPickerSwatches({ colors, label, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatches-group",
+		className: "grid",
+		children: [label ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatches-label",
+			children: label
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatches",
+			className: cn("flex flex-wrap", className),
+			...props,
+			children: [colors?.map((color) => /* @__PURE__ */ jsx(ColorPickerSwatch, { color }, color)), children]
+		})]
+	});
+}
+function ColorPickerSwatch({ color, className, "aria-label": ariaLabel, ...props }) {
+	const { setFromString, valueString, disabled } = useColorPicker();
+	const selected = sameColor(valueString, color);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatch",
+		"data-selected": selected ? "true" : void 0,
+		"aria-pressed": selected,
+		"aria-label": ariaLabel ?? `Set color ${color}`,
+		title: color,
+		disabled,
+		onClick: () => setFromString(color),
+		className: cn("relative shrink-0 cursor-pointer overflow-hidden disabled:cursor-not-allowed", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatch-checker",
+			"aria-hidden": true,
+			className: "absolute inset-0"
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "swatch-color",
+			"aria-hidden": true,
+			className: "absolute inset-0",
+			style: { backgroundColor: color }
+		})]
+	});
+}
+function ColorPickerSwatchAdd({ onAdd, className, children, ...props }) {
+	const { valueString, disabled } = useColorPicker();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "swatch-add",
+		"aria-label": "Add current color",
+		disabled,
+		onClick: () => onAdd?.(valueString),
+		className: cn("relative flex shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+function sameColor(a, b) {
+	const pa = parseColor(a);
+	const pb = parseColor(b);
+	if (!pa || !pb) return false;
+	return formatColor(pa, "hex", { alpha: true }) === formatColor(pb, "hex", { alpha: true });
+}
+function PlusIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10" })
+	});
+}
+//#endregion
+export { ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatches };

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

@@ -0,0 +1,59 @@
+import { ControlSize } from "../control-variants.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { ChannelId, ColorFormat } from "../lib/color.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/color-picker-values.d.ts
+export type ColorPickerEyeDropperProps = Omit<Omit<ComponentProps<"button">, "onError">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+export type ColorPickerInputProps = Omit<Omit<ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "size">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  size?: ControlSize;
+  invalidLabel?: string;
+};
+export type ColorPickerFormatSelectProps = {
+  formats?: ColorFormat[];
+  size?: ControlSize;
+  className?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  style?: CSSProperties & ButtonKnobStyle;
+};
+export type ColorPickerChannelsProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+};
+export type ColorPickerChannelProps = Omit<Omit<ComponentProps<"div">, "children" | "aria-label">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  channel: ChannelId;
+  label?: ReactNode;
+  "aria-label"?: string;
+};
+export type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
+  style?: CSSProperties & ColorPickerKnobStyle;
+} & {
+  children?: ReactNode;
+  renderValue?: (state: {
+    value: string;
+  }) => ReactNode;
+};
+export declare function ColorPickerInput({ size, className, invalidLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onKeyDown, ...props }: ColorPickerInputProps): import("react").JSX.Element;
+export declare function ColorPickerFormatSelect({ formats, size, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }: ColorPickerFormatSelectProps): import("react").JSX.Element;
+export declare function ColorPickerChannels({ className, children, ...props }: ColorPickerChannelsProps): import("react").JSX.Element;
+export declare function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }: ColorPickerChannelProps): import("react").JSX.Element | null;
+declare global {
+  interface Window {
+    EyeDropper?: {
+      new (): {
+        open: () => Promise<{
+          sRGBHex: string;
+        }>;
+      };
+    };
+  }
+}
+export declare function ColorPickerEyeDropper({ className, children, ...props }: ColorPickerEyeDropperProps): import("react").JSX.Element | null;
+export declare function ColorPickerOutput({ className, children, renderValue, ...props }: ColorPickerOutputProps): import("react").JSX.Element;
+//#endregion