@ctrl-ui/react 0.8.20 → 0.9.0

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

@@ -0,0 +1,244 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
+import { getChannels } from "../lib/color.js";
+import { useColorPicker } from "./color-picker-context.js";
+import { Input } from "./input.js";
+import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
+import { useId, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/color-picker-values.tsx
+const isColorFormat = (v) => v === "hex" || v === "rgb" || v === "hsl" || v === "oklch";
+const CHANNEL_NAMES = {
+	r: "Red",
+	g: "Green",
+	b: "Blue",
+	h: "Hue",
+	s: "Saturation",
+	l: "Lightness",
+	okl: "OKLCH lightness",
+	okc: "OKLCH chroma",
+	okh: "OKLCH hue",
+	a: "Opacity"
+};
+function subscribeEyeDropper() {
+	return () => {};
+}
+function getEyeDropperSnapshot() {
+	return typeof window !== "undefined" && Boolean(window.EyeDropper);
+}
+function getEyeDropperServerSnapshot() {
+	return false;
+}
+function ColorPickerInput({ size = "sm", className, invalidLabel = "Enter a hex, rgb(), hsl() or oklch() color.", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onFocus, onBlur, onKeyDown, ...props }) {
+	const { valueString, setFromString, disabled } = useColorPicker();
+	const invalidMessageId = useId();
+	const [draft, setDraft] = useState(valueString);
+	const [editing, setEditing] = useState(false);
+	const [invalid, setInvalid] = useState(false);
+	const describedBy = [ariaDescribedBy, invalid ? invalidMessageId : void 0].filter(Boolean).join(" ") || void 0;
+	const shown = editing ? draft : valueString;
+	const commit = () => {
+		const accepted = setFromString(draft);
+		setInvalid(!accepted);
+		if (accepted) setEditing(false);
+	};
+	const revert = () => {
+		setInvalid(false);
+		setEditing(false);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "input",
+		className: "contents",
+		children: [/* @__PURE__ */ jsx(Input, {
+			...props,
+			size,
+			value: shown,
+			disabled,
+			spellCheck: false,
+			autoComplete: "off",
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color value" : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-invalid": invalid || void 0,
+			"aria-describedby": describedBy,
+			className,
+			onFocus: (event) => {
+				onFocus?.(event);
+				if (editing) return;
+				setDraft(valueString);
+				setEditing(true);
+			},
+			onChange: (event) => setDraft(event.target.value),
+			onBlur: (event) => {
+				onBlur?.(event);
+				commit();
+			},
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				if (event.defaultPrevented) return;
+				if (event.key === "Enter") commit();
+				else if (event.key === "Escape") revert();
+			}
+		}), invalid ? /* @__PURE__ */ jsx("span", {
+			id: invalidMessageId,
+			className: "sr-only",
+			children: invalidLabel
+		}) : null]
+	});
+}
+function ColorPickerFormatSelect({ formats = [
+	"hex",
+	"rgb",
+	"hsl",
+	"oklch"
+], size = "sm", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style }) {
+	const { format, setFormat, disabled } = useColorPicker();
+	return /* @__PURE__ */ jsxs(Select, {
+		value: format,
+		disabled,
+		onValueChange: (value) => {
+			if (isColorFormat(value)) setFormat(value);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size,
+			"data-control-ui": "color-picker",
+			"data-slot": "format",
+			"aria-label": ariaLabelledBy === void 0 ? ariaLabel ?? "Color format" : ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			className,
+			style,
+			children: /* @__PURE__ */ jsx(SelectValue, {})
+		}), /* @__PURE__ */ jsx(SelectContent, { children: formats.map((f) => /* @__PURE__ */ jsx(SelectItem, {
+			value: f,
+			children: f.toUpperCase()
+		}, f)) })]
+	});
+}
+function ColorPickerChannels({ className, children, ...props }) {
+	const { hsva, format, alpha } = useColorPicker();
+	const specs = getChannels(hsva, format).filter((spec) => alpha || spec.id !== "a");
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "channels",
+		className: cn("grid grid-flow-col auto-cols-fr", className),
+		...props,
+		children: children ?? specs.map((spec) => /* @__PURE__ */ jsx(ColorPickerChannel, {
+			channel: spec.id,
+			label: spec.label
+		}, spec.id))
+	});
+}
+function ColorPickerChannel({ channel, label, className, "aria-label": ariaLabel, ...props }) {
+	const { hsva, format, setChannelValue, disabled } = useColorPicker();
+	const spec = getChannels(hsva, format).find((s) => s.id === channel);
+	if (!spec) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "channel",
+		className: cn("grid grid-cols-1", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(NumberField, {
+			size: "sm",
+			value: spec.value,
+			min: spec.min,
+			max: spec.max,
+			step: spec.step,
+			disabled,
+			onValueChange: (value) => {
+				if (value !== null) setChannelValue(channel, value);
+			},
+			children: /* @__PURE__ */ jsx(NumberFieldGroup, {
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(NumberFieldInput, {
+					"aria-label": ariaLabel ?? `${CHANNEL_NAMES[channel]} channel`,
+					className: "px-1 text-center"
+				})
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "channel-label",
+			children: label ?? spec.label
+		})]
+	});
+}
+function ColorPickerEyeDropper({ className, children, ...props }) {
+	const { setFromString, disabled } = useColorPicker();
+	if (!useSyncExternalStore(subscribeEyeDropper, getEyeDropperSnapshot, getEyeDropperServerSnapshot)) return null;
+	const pick = async () => {
+		const Ctor = window.EyeDropper;
+		if (!Ctor) return;
+		try {
+			const result = await new Ctor().open();
+			setFromString(result.sRGBHex);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "surface",
+		size: "sm",
+		iconOnly: true,
+		disabled,
+		"aria-label": "Pick a color from the screen",
+		"data-control-ui": "color-picker",
+		"data-slot": "eye-dropper",
+		className,
+		onClick: pick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(EyeDropperIcon, {})
+	});
+}
+function ColorPickerOutput({ className, children, renderValue, ...props }) {
+	const { valueString } = useColorPicker();
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "color-picker",
+		"data-control-family": "color-picker",
+		"data-slot": "output",
+		className: cn("flex items-center", className),
+		...props,
+		children: renderValue ? renderValue({ value: valueString }) : children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "output-swatch",
+			className: "relative shrink-0 overflow-hidden",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "output-checker",
+				"aria-hidden": true,
+				className: "absolute inset-0"
+			}), /* @__PURE__ */ jsx("span", {
+				"data-control-ui": "color-picker",
+				"data-control-family": "color-picker",
+				"data-slot": "output-color",
+				"aria-hidden": true,
+				className: "absolute inset-0",
+				style: { backgroundColor: valueString }
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "color-picker",
+			"data-control-family": "color-picker",
+			"data-slot": "output-value",
+			children: valueString
+		})] })
+	});
+}
+function EyeDropperIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-4",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M10.5 2.5a1.8 1.8 0 0 1 2.5 2.5l-1.3 1.3.9.9-1.1 1.1-.9-.9-4.4 4.4-2.2.6.6-2.2 4.4-4.4-.9-.9 1.1-1.1.9.9 1.3-1.3Z" })
+	});
+}
+//#endregion
+export { ColorPickerChannel, ColorPickerChannels, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerInput, ColorPickerOutput };

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

@@ -1,20 +1,19 @@
 import { OpenChangeEventDetails } from "../control-props.js";
-import { ControlSize } from "../control-variants.js";
-import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { ColorPickerKnobStyle } from "../knob-contracts/color-picker-knobs.js";
+import { ColorFormat } from "../lib/color.js";
+import { GradientInterpolation, GradientStop, GradientType, GradientValue } from "../lib/gradient.js";
+import { ColorPickerArea, ColorPickerAreaProps, ColorPickerAreaThumb, ColorPickerAreaThumbProps, ColorPickerWheel, ColorPickerWheelProps } from "./color-picker-area.js";
+import { ColorPickerStateProps } from "./color-picker-context.js";
+import { ColorPickerAreaContrast, ColorPickerAreaContrastProps, ColorPickerContrast, ColorPickerContrastProps } from "./color-picker-contrast.js";
+import { ColorPickerAlpha, ColorPickerAlphaProps, ColorPickerBrightness, ColorPickerBrightnessProps, ColorPickerHue, ColorPickerHueProps, ColorPickerSaturation, ColorPickerSaturationProps } from "./color-picker-sliders.js";
+import { ColorPickerSwatch, ColorPickerSwatchAdd, ColorPickerSwatchAddProps, ColorPickerSwatchProps, ColorPickerSwatches, ColorPickerSwatchesProps } from "./color-picker-swatches.js";
+import { ColorPickerChannel, ColorPickerChannelProps, ColorPickerChannels, ColorPickerChannelsProps, ColorPickerEyeDropper, ColorPickerEyeDropperProps, ColorPickerFormatSelect, ColorPickerFormatSelectProps, ColorPickerInput, ColorPickerInputProps, ColorPickerOutput, ColorPickerOutputProps } from "./color-picker-values.js";
+import { GradientEditor, GradientEditorPreview, GradientEditorPreviewProps, GradientEditorProps, GradientEditorStop, GradientEditorStopAdd, GradientEditorStopAddProps, GradientEditorStopProps, GradientEditorTrack, GradientEditorTrackProps } from "./gradient-editor.js";
+import { GradientEditorAngle, GradientEditorAngleProps, GradientEditorInterpolationSelect, GradientEditorInterpolationSelectProps, GradientEditorTypeSelect, GradientEditorTypeSelectProps } from "./gradient-editor-controls.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/color-picker.d.ts
-export type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
-export type ColorPickerProps = {
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-  format?: ColorFormat;
-  defaultFormat?: ColorFormat;
-  onFormatChange?: (format: ColorFormat) => void;
-  alpha?: boolean;
-  disabled?: boolean;
+export type ColorPickerProps = ColorPickerStateProps & {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
@@ -33,107 +32,13 @@ export type ColorPickerContentProps = Omit<ComponentProps<"div">, "style"> & {
 export type ColorPickerPanelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-export type ColorPickerAreaProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-};
-export type ColorPickerAreaThumbProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-};
-export type ColorPickerHueProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-};
-export type ColorPickerAlphaProps = Omit<Pick<ComponentProps<"div">, "className" | "aria-label" | "aria-labelledby" | "style">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-};
-export type ColorPickerWheelProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-};
-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: "r" | "g" | "b" | "h" | "s" | "l" | "okl" | "okc" | "okh" | "a";
-  label?: ReactNode;
-  "aria-label"?: string;
-};
-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 type ColorPickerContrastProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-} & {
-  background?: string;
-  passLabel?: string;
-  failLabel?: string;
-};
-export type ColorPickerOutputProps = Omit<Omit<ComponentProps<"div">, "children">, "style"> & {
-  style?: CSSProperties & ColorPickerKnobStyle;
-} & {
+export type GradientEditorStopColorProps = {
   children?: ReactNode;
-  renderValue?: (state: {
-    value: string;
-  }) => ReactNode;
 };
 export declare function ColorPicker({ open, defaultOpen, onOpenChange, children, ...state }: ColorPickerProps): import("react").JSX.Element;
 export declare function ColorPickerTrigger({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerTriggerProps): import("react").JSX.Element;
 export declare function ColorPickerContent({ className, children, side, align, sideOffset, ...props }: ColorPickerContentProps): import("react").JSX.Element;
 export declare function ColorPickerPanel({ className, children, ...props }: ColorPickerPanelProps): import("react").JSX.Element;
-export declare function ColorPickerArea({ className, style, ...props }: ColorPickerAreaProps): import("react").JSX.Element;
-export declare function ColorPickerAreaThumb({ className, ...props }: ColorPickerAreaThumbProps): import("react").JSX.Element;
-export declare function ColorPickerHue({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerHueProps): import("react").JSX.Element;
-export declare function ColorPickerAlpha({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ColorPickerAlphaProps): import("react").JSX.Element | null;
-export declare function ColorPickerWheel({ className, style, ...props }: ColorPickerWheelProps): import("react").JSX.Element;
-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 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;
-export declare function ColorPickerContrast({ background, passLabel, failLabel, className, ...props }: ColorPickerContrastProps): import("react").JSX.Element | null;
-export declare function ColorPickerOutput({ className, children, renderValue, ...props }: ColorPickerOutputProps): import("react").JSX.Element;
-//#endregion
+export declare function GradientEditorStopColor({ children }: GradientEditorStopColorProps): import("react").JSX.Element | null;
+//#endregion
+export { type ColorFormat, ColorPickerAlpha, type ColorPickerAlphaProps, ColorPickerArea, ColorPickerAreaContrast, type ColorPickerAreaContrastProps, type ColorPickerAreaProps, ColorPickerAreaThumb, type ColorPickerAreaThumbProps, ColorPickerBrightness, type ColorPickerBrightnessProps, ColorPickerChannel, type ColorPickerChannelProps, ColorPickerChannels, type ColorPickerChannelsProps, ColorPickerContrast, type ColorPickerContrastProps, ColorPickerEyeDropper, type ColorPickerEyeDropperProps, ColorPickerFormatSelect, type ColorPickerFormatSelectProps, ColorPickerHue, type ColorPickerHueProps, ColorPickerInput, type ColorPickerInputProps, ColorPickerOutput, type ColorPickerOutputProps, ColorPickerSaturation, type ColorPickerSaturationProps, ColorPickerSwatch, ColorPickerSwatchAdd, type ColorPickerSwatchAddProps, type ColorPickerSwatchProps, ColorPickerSwatches, type ColorPickerSwatchesProps, ColorPickerWheel, type ColorPickerWheelProps, GradientEditor, GradientEditorAngle, type GradientEditorAngleProps, GradientEditorInterpolationSelect, type GradientEditorInterpolationSelectProps, GradientEditorPreview, type GradientEditorPreviewProps, type GradientEditorProps, GradientEditorStop, GradientEditorStopAdd, type GradientEditorStopAddProps, type GradientEditorStopProps, GradientEditorTrack, type GradientEditorTrackProps, GradientEditorTypeSelect, type GradientEditorTypeSelectProps, type GradientInterpolation, type GradientStop, type GradientType, type GradientValue };