@cube-dev/ui-kit 0.0.0-canary-9fab1b3 → 0.0.0-canary-8a06567

package/dist/components/fields/ColorPicker/ColorPicker.d.ts

@@ -1,26 +1,35 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import "../../content/Item/index.js";
-import { CubeItemProps } from "../../content/Item/Item.js";
-import { ColorFormat } from "../color/color.js";
-import { ColorSpace } from "../color/channels.js";
-import { CubeColorSwatchItem } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import "../ColorSwatchGroup/index.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { ColorFormat } from "./color.js";
+import { ColorSpace } from "./channels.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { ReactNode } from "react";
+import { FocusEvent } from "react";
 
 //#region src/components/fields/ColorPicker/ColorPicker.d.ts
-interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps {
+/**
+ * How the text in the input relates to the committed value.
+ *
+ * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,
+ *   and the value is always written in `format`.
+ * - `derive` — the user's own notation is left alone, and the value is
+ *   normalized in whichever notation the text is written in.
+ * - `free` — the text *is* the value, verbatim. It is still verified, so an
+ *   unparsable entry falls back to the last valid one.
+ */
+type ColorPickerFormatMode = 'forced' | 'derive' | 'free';
+interface CubeColorPickerProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, ColorStyleProps, FieldBaseProps {
   /** The selected color, as a color string. */
   value?: string | null;
   /** The initial color of an uncontrolled picker. */
   defaultValue?: string | null;
-  /** Called with the color string, or `null` when there is no color. */
+  /** Called with the normalized color string, or `null` when the field is cleared. */
   onChange?: (value: string | null) => void;
-  /** Notation the value is written in. */
+  /** Notation the value is written in, and the one `forced` mode displays. */
   format?: ColorFormat;
+  /** How strictly the input text is tied to `format`. */
+  formatMode?: ColorPickerFormatMode;
   /** Color concept the popover opens with. */
   defaultSpace?: ColorSpace;
   /** Whether the popover is open. Makes the disclosure controlled. */
@@ -29,36 +38,30 @@ interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStylePro
   defaultOpen?: boolean;
   /** Called when the popover opens or closes. */
   onOpenChange?: (isOpen: boolean) => void;
-  /** Whether the popover may flip to the other side of the trigger. */
+  /** Whether the popover may flip to the other side of the input. */
   shouldFlip?: boolean;
-  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */
-  children?: ReactNode;
-  /** Shown on the trigger while there is no color. */
-  placeholder?: ReactNode;
-  /** The size of the trigger. */
-  size?: CubeItemProps['size'];
-  /** The visual type of the trigger. */
-  type?: CubeItemProps['type'];
-  theme?: CubeItemProps['theme'];
-  /** Tooltip for the trigger, separate from the field tooltip. */
-  triggerTooltip?: CubeItemProps['tooltip'];
-  /** Colors to offer under the editor, for picking without dialing one in. */
-  swatches?: CubeColorSwatchItem[];
-  /** How many swatches per row. Defaults to a single row. */
-  swatchColumns?: number;
+  /** Text shown while the field is empty. */
+  placeholder?: string;
+  /** The size of the input. */
+  size?: 'small' | 'medium' | 'large' | (string & {});
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
   styles?: Styles;
-  /** Styles of the trigger button. */
+  /** Styles of the text input element. */
+  inputStyles?: Styles;
+  /** Styles of the popover trigger button. */
   triggerStyles?: Styles;
-  /** Styles of the color swatch. */
+  /** Styles of the color swatch shown inside the input. */
   swatchStyles?: Styles;
-  'aria-label'?: string;
 }
 /**
- * A color swatch that opens the color popover — the same one `ColorInput`
- * uses, without the text field. Reach for it when a color is chosen but never
- * typed: a toolbar, a chart legend, a cell in a dense table.
+ * A color field: the color as text, a swatch of the current value, and a
+ * popover to dial it in across OKHST, OKLCH and RGB.
  */
 declare const ColorPicker: react.ForwardRefExoticComponent<CubeColorPickerProps & react.RefAttributes<HTMLElement>>;
 //#endregion
-export { ColorPicker, CubeColorPickerProps };
+export { ColorPicker, ColorPickerFormatMode, CubeColorPickerProps };
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/fields/ColorPicker/ColorPicker.js

@@ -1,176 +1,239 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9fab1b3 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a06567 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { _Text } from "../../content/Text.js";
-import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
-import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
-import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
+import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { PipetteIcon } from "../../../icons/PipetteIcon.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
-import { wrapWithField } from "../../form/wrapper.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
-import { formatColor, parseColor } from "../color/color.js";
-import { ColorSwatch } from "../color/ColorSwatch.js";
-import { ColorPanel } from "../color/ColorPanel.js";
-import { ColorPopoverContext } from "../color/context.js";
-import { ColorInput } from "../ColorInput/ColorInput.js";
-import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
-import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
+import { TextInputBase } from "../TextInput/TextInputBase.js";
+import { detectFormat, formatColor, parseColor, toHex } from "./color.js";
+import { ColorPickerPanel } from "./ColorPickerPanel.js";
+import { tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useTextField } from "react-aria";
 
 //#region src/components/fields/ColorPicker/ColorPicker.tsx
-/**
-* A popover caps its height at half the viewport. The panel can exceed that on
-* a short screen, and would otherwise spill outside the popover's own border.
-*/
-const POPOVER_STYLES = { overflow: "auto" };
-/**
-* The rule separating the palette from the editor. `Divider` is not used: it
-* places itself on named grid lines meant for menu layouts, which this panel
-* does not define, so it lands in the wrong row and spawns a stray column.
-*/
-const PALETTE_STYLES = {
-	border: "top",
-	padding: "1x top",
-	width: "100%"
-};
 /** What the popover starts from when there is no color to edit yet. */
 const FALLBACK_COLOR = {
 	h: 264,
 	s: .8,
 	l: .6
 };
-const ColorPickerWrapper = tasty({
-	qa: "ColorPickerWrapper",
+const SwatchElement = tasty({
+	qa: "ColorSwatch",
 	styles: {
-		display: "inline-grid",
-		flow: "column",
-		gridRows: "1sf",
-		placeContent: "stretch",
-		placeItems: "stretch"
+		display: "block",
+		width: "2.5x",
+		height: "2.5x",
+		radius: "1r",
+		fill: {
+			"": "(#color-picker, #clear)",
+			empty: "#clear"
+		},
+		shadow: "inset 0 0 0 1bw #dark.15",
+		image: {
+			"": false,
+			empty: "linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)"
+		}
 	}
 });
+const ColorPickerButton = tasty(ItemAction, {
+	qa: "ColorPickerButton",
+	icon: /* @__PURE__ */ jsx(PipetteIcon, {})
+});
 /**
-* A color swatch that opens the color popover — the same one `ColorInput`
-* uses, without the text field. Reach for it when a color is chosen but never
-* typed: a toolbar, a chart legend, a cell in a dense table.
+* A color field: the color as text, a swatch of the current value, and a
+* popover to dial it in across OKHST, OKLCH and RGB.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 	const props = useFieldProps(allProps, {
-		defaultValidationTrigger: "onChange",
+		defaultValidationTrigger: "onBlur",
 		valuePropsMapper: ({ value, onChange }) => ({
 			value,
 			onChange
 		})
 	});
-	const { qa, id, value, defaultValue, onChange, format = "hex", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, children, placeholder = "Pick a color", size, type = "outline", theme = "default", triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel } = props;
-	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-	const [color, setColor] = useState(() => parseColor((value ?? defaultValue ?? "").toString()));
+	const { qa, value, defaultValue, onChange, format = "hex", formatMode = "forced", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, placeholder = "Pick a color", size, isDisabled, isReadOnly, isInvalid, isValid, isLoading, autoFocus, inputStyles, triggerStyles, swatchStyles, labelProps: userLabelProps, onBlur: userOnBlur, onFocus, label, description, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, id } = props;
+	const initialText = (value ?? defaultValue ?? "").toString();
+	const [text, setText] = useState(() => {
+		const parsed = parseColor(initialText);
+		return parsed && formatMode === "forced" ? formatColor(parsed, format) : initialText;
+	});
+	const [color, setColor] = useState(() => parseColor(initialText));
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
-	/** What was last published, to tell our own updates from outside ones. */
+	const targetRef = useRef(null);
+	const inputRef = useRef(null);
+	/** The last text that parsed, so an invalid entry has something to fall back to. */
+	const validText = useRef(parseColor(initialText) ? text : "");
+	/** What was last handed to `onChange`, to tell our own updates from outside ones. */
 	const emitted = useRef(value);
+	const emit = useEvent((next) => {
+		emitted.current = next;
+		onChange?.(next);
+	});
+	/** The notation a value should be written in, given the current text. */
+	const outputFormat = (source) => formatMode === "forced" ? format : detectFormat(source) ?? format;
 	useEffect(() => {
 		if (value === void 0 || value === emitted.current) return;
 		emitted.current = value;
-		setColor(parseColor((value ?? "").toString()));
-	}, [value]);
-	const handleColorChange = useEvent((next) => {
-		const text = formatColor(next, format);
-		emitted.current = text;
-		setColor(next);
-		onChange?.(text);
+		const raw = (value ?? "").toString();
+		const parsed = parseColor(raw);
+		const nextText = parsed && formatMode === "forced" ? formatColor(parsed, format) : raw;
+		setColor(parsed);
+		setText(nextText);
+		validText.current = parsed ? nextText : "";
+	}, [
+		value,
+		format,
+		formatMode
+	]);
+	const handleTextChange = useEvent((nextText) => {
+		setText(nextText);
+		if (!nextText.trim()) {
+			setColor(null);
+			validText.current = "";
+			emit(null);
+			return;
+		}
+		const parsed = parseColor(nextText);
+		if (!parsed) return;
+		setColor(parsed);
+		validText.current = nextText;
+		emit(formatMode === "free" ? nextText.trim() : formatColor(parsed, outputFormat(nextText)));
 	});
-	const colorText = color ? formatColor(color, format) : null;
-	const handleSwatchChange = useEvent((next) => {
-		const parsed = next ? parseColor(next) : null;
-		if (parsed) handleColorChange(parsed);
+	/** Resolve whatever is in the input into a real color, or undo it. */
+	const settle = useEvent(() => {
+		if (!text.trim()) return;
+		const parsed = parseColor(text);
+		if (!parsed) {
+			setText(validText.current);
+			return;
+		}
+		if (formatMode === "forced") setText(formatColor(parsed, format));
+	});
+	/**
+	* Focusing offers the whole value up for replacement, the way a hex field
+	* does. The string is the unit of editing here: a single channel is tuned
+	* with the sliders, not by hand-editing one number inside `oklch(…)`.
+	*
+	* Read off the event rather than `inputRef`, which `TextInputBase` re-points
+	* through `useCombinedRefs`.
+	*/
+	const handleFocus = useEvent((event) => {
+		event.currentTarget.select();
+		onFocus?.(event);
+	});
+	/**
+	* A click would otherwise drop a caret and undo that selection — the browser
+	* applies it after the focus handler has run. Suppressing the default action
+	* of the focusing press means no caret is ever placed; focus is then moved
+	* here instead, which selects.
+	*
+	* Only the press that *takes* focus is suppressed, so clicking a field that
+	* already has focus still positions the caret, and dragging still selects a
+	* range.
+	*/
+	const handleMouseDown = useEvent((event) => {
+		if (document.activeElement === event.currentTarget) return;
+		event.preventDefault();
+		event.currentTarget.focus();
+	});
+	const handleBlur = useEvent((event) => {
+		settle();
+		userOnBlur?.(event);
+	});
+	const handleKeyDown = useEvent((event) => {
+		if (event.key === "Enter") settle();
+	});
+	const handleColorChange = useEvent((nextColor) => {
+		const nextText = formatColor(nextColor, outputFormat(text));
+		setColor(nextColor);
+		setText(nextText);
+		validText.current = nextText;
+		emit(nextText);
 	});
 	const handleOpenChange = useEvent((next) => {
 		setOpen(next);
 		onOpenChange?.(next);
 	});
-	const label = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
-	return wrapWithField(/* @__PURE__ */ jsx(ColorPickerWrapper, {
-		styles,
-		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+	const { labelProps, inputProps } = useTextField({
+		id,
+		label,
+		description,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		"aria-describedby": ariaDescribedby,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		autoFocus,
+		placeholder,
+		value: text,
+		type: "text",
+		onChange: handleTextChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown
+	}, inputRef);
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref,
+		qa: qa || "ColorPicker",
+		size,
+		autocomplete: "off",
+		icon: /* @__PURE__ */ jsx(SwatchElement, {
+			mods: { empty: !color },
+			styles: swatchStyles,
+			style: color ? { "--color-picker-color": toHex(color) } : void 0
+		}),
+		inputRef,
+		inputProps: {
+			...inputProps,
+			spellCheck: false,
+			onMouseDown: handleMouseDown
+		},
+		inputStyles,
+		labelProps: mergeProps$1(labelProps, userLabelProps),
+		wrapperRef: targetRef,
+		isDisabled,
+		isReadOnly,
+		isInvalid,
+		isValid,
+		isLoading,
+		suffixPosition: "after",
+		suffix: /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			mobileType: "tray",
-			placement: "bottom start",
+			placement: "bottom right",
+			targetRef,
 			isOpen: controlledOpen ?? isOpen,
 			shouldFlip,
 			onOpenChange: handleOpenChange,
-			children: [/* @__PURE__ */ jsx(_ItemButton, {
-				"data-popover-trigger": true,
-				id,
-				qa: qa || "ColorPickerTrigger",
-				"data-input-type": "colorpicker",
-				type,
-				theme: getValidationTheme(theme, {
-					isInvalid,
-					isValid
-				}),
+			children: [/* @__PURE__ */ jsx(ColorPickerButton, {
 				size,
-				icon: /* @__PURE__ */ jsx(ColorSwatch, {
-					color,
-					styles: swatchStyles
-				}),
-				rightIcon: getValidationIcon({
-					isInvalid,
-					isValid
-				}),
-				tooltip: triggerTooltip,
-				isDisabled: isDisabled || isLoading || isReadOnly,
-				autoFocus,
-				"aria-label": ariaLabel,
-				mods: { placeholder: !color },
-				styles: triggerStyles,
-				children: label
+				"aria-label": "Open the color picker",
+				isDisabled: isDisabled || isReadOnly,
+				styles: triggerStyles
 			}), /* @__PURE__ */ jsx(Dialog, {
 				"aria-label": "Color picker",
 				width: "max-content",
-				styles: POPOVER_STYLES,
-				children: /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
-					value: true,
-					children: /* @__PURE__ */ jsx(ColorPanel, {
-						color: color ?? FALLBACK_COLOR,
-						space,
-						isDisabled: isDisabled || isReadOnly,
-						previewFormat: format,
-						input: /* @__PURE__ */ jsx(ColorInput, {
-							"aria-label": "Color value",
-							format,
-							value: colorText,
-							isDisabled,
-							isReadOnly,
-							onChange: handleSwatchChange
-						}),
-						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
-							"aria-label": "Palette",
-							styles: PALETTE_STYLES,
-							colors: swatches,
-							columns: swatchColumns,
-							format,
-							value: colorText,
-							isDisabled: isDisabled || isReadOnly,
-							onChange: handleSwatchChange
-						}) : null,
-						onChange: handleColorChange,
-						onSpaceChange: setSpace
-					})
+				children: /* @__PURE__ */ jsx(ColorPickerPanel, {
+					color: color ?? FALLBACK_COLOR,
+					space,
+					isDisabled: isDisabled || isReadOnly,
+					previewFormat: outputFormat(text),
+					onChange: handleColorChange,
+					onSpaceChange: setSpace
 				})
 			})]
 		})
-	}), ref, props);
+	});
 });
-/**
-* Drives the legacy `<Field>` wiring: `Picker` validates on change and passes
-* the value through untouched, where `Text` would default to `onBlur` and
-* coerce `null` into an empty string.
-*/
-ColorPicker.cubeInputType = "Picker";
+ColorPicker.cubeInputType = "Text";
 
 //#endregion
 export { ColorPicker };

package/dist/components/fields/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["Text","ItemButton"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { FieldBaseProps } from '../../../shared';\nimport { extractStyles } from '../../../utils/styles';\nimport { ItemButton } from '../../actions';\nimport { CubeItemProps } from '../../content/Item';\nimport { Text } from '../../content/Text';\nimport {\n  getValidationIcon,\n  getValidationTheme,\n  useFieldProps,\n  wrapWithField,\n} from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorSwatch } from '../color/ColorSwatch';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatchGroup, CubeColorSwatchItem } from '../ColorSwatchGroup';\n\n/**\n * A popover caps its height at half the viewport. The panel can exceed that on\n * a short screen, and would otherwise spill outside the popover's own border.\n */\nconst POPOVER_STYLES: Styles = { overflow: 'auto' };\n\n/**\n * The rule separating the palette from the editor. `Divider` is not used: it\n * places itself on named grid lines meant for menu layouts, which this panel\n * does not define, so it lands in the wrong row and spawns a stray column.\n */\nconst PALETTE_STYLES: Styles = {\n  border: 'top',\n  padding: '1x top',\n  width: '100%',\n};\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst ColorPickerWrapper = tasty({\n  qa: 'ColorPickerWrapper',\n  styles: {\n    display: 'inline-grid',\n    flow: 'column',\n    gridRows: '1sf',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n  },\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the color string, or `null` when there is no color. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the trigger. */\n  shouldFlip?: boolean;\n  /** Replaces the color shown on the trigger. Pass `null` for a swatch on its own. */\n  children?: ReactNode;\n  /** Shown on the trigger while there is no color. */\n  placeholder?: ReactNode;\n  /** The size of the trigger. */\n  size?: CubeItemProps['size'];\n  /** The visual type of the trigger. */\n  type?: CubeItemProps['type'];\n  theme?: CubeItemProps['theme'];\n  /** Tooltip for the trigger, separate from the field tooltip. */\n  triggerTooltip?: CubeItemProps['tooltip'];\n  /** Colors to offer under the editor, for picking without dialing one in. */\n  swatches?: CubeColorSwatchItem[];\n  /** How many swatches per row. Defaults to a single row. */\n  swatchColumns?: number;\n  styles?: Styles;\n  /** Styles of the trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    children,\n    placeholder = 'Pick a color',\n    size,\n    type = 'outline',\n    theme = 'default',\n    triggerTooltip,\n    swatches,\n    swatchColumns,\n    triggerStyles,\n    swatchStyles,\n    isDisabled,\n    isReadOnly,\n    isLoading,\n    isInvalid,\n    isValid,\n    autoFocus,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  const [color, setColor] = useState(() =>\n    parseColor((value ?? defaultValue ?? '').toString()),\n  );\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  /** What was last published, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n    setColor(parseColor((value ?? '').toString()));\n  }, [value]);\n\n  const handleColorChange = useEvent((next: ColorValue) => {\n    const text = formatColor(next, format);\n\n    emitted.current = text;\n    setColor(next);\n    onChange?.(text);\n  });\n\n  const colorText = color ? formatColor(color, format) : null;\n\n  const handleSwatchChange = useEvent((next: string | null) => {\n    const parsed = next ? parseColor(next) : null;\n\n    if (parsed) handleColorChange(parsed);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  // The swatch carries the color and the label spells it out. `children`\n  // replaces that label, and `null` leaves the swatch on its own.\n  const label =\n    children !== undefined ? (\n      children\n    ) : color ? (\n      formatColor(color, format)\n    ) : (\n      // Muted, so an unset picker never reads like one holding a value —\n      // the same treatment `Picker` and `Select` give their placeholders.\n      <Text.Placeholder>{placeholder}</Text.Placeholder>\n    );\n\n  const pickerField = (\n    <ColorPickerWrapper styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        mobileType=\"tray\"\n        placement=\"bottom start\"\n        isOpen={controlledOpen ?? isOpen}\n        shouldFlip={shouldFlip}\n        onOpenChange={handleOpenChange}\n      >\n        <ItemButton\n          data-popover-trigger\n          id={id}\n          qa={qa || 'ColorPickerTrigger'}\n          data-input-type=\"colorpicker\"\n          type={type}\n          theme={getValidationTheme(theme, { isInvalid, isValid })}\n          size={size}\n          icon={<ColorSwatch color={color} styles={swatchStyles} />}\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isDisabled || isLoading || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"Color value\"\n                  format={format}\n                  value={colorText}\n                  isDisabled={isDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleSwatchChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    aria-label=\"Palette\"\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isDisabled || isReadOnly}\n                    onChange={handleSwatchChange}\n                  />\n                ) : null\n              }\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </ColorPopoverContext.Provider>\n        </Dialog>\n      </DialogTrigger>\n    </ColorPickerWrapper>\n  );\n\n  return wrapWithField(pickerField, ref as any, props);\n});\n\n/**\n * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes\n * the value through untouched, where `Text` would default to `onBlur` and\n * coerce `null` into an empty string.\n */\n(ColorPicker as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":["mergeProps"],"sources":["../../../../src/components/fields/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction } from '../../actions';\nimport { useFieldProps } from '../../form';\nimport { Dialog, DialogTrigger } from '../../overlays/Dialog';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\nimport { ColorSpace } from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  detectFormat,\n  formatColor,\n  parseColor,\n  toHex,\n} from './color';\nimport { ColorPickerPanel } from './ColorPickerPanel';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorPickerFormatMode = 'forced' | 'derive' | 'free';\n\n/** What the popover starts from when there is no color to edit yet. */\nconst FALLBACK_COLOR: ColorValue = { h: 264, s: 0.8, l: 0.6 };\n\nconst SwatchElement = tasty({\n  qa: 'ColorSwatch',\n  styles: {\n    display: 'block',\n    width: '2.5x',\n    height: '2.5x',\n    radius: '1r',\n    fill: {\n      '': '(#color-picker, #clear)',\n      empty: '#clear',\n    },\n    shadow: 'inset 0 0 0 1bw #dark.15',\n    // A single diagonal stroke is the conventional \"no color\" swatch.\n    image: {\n      '': false,\n      empty:\n        'linear-gradient(to bottom right, #clear 46%, #danger 46%, #danger 54%, #clear 54%)',\n    },\n  },\n});\n\nconst ColorPickerButton = tasty(ItemAction, {\n  qa: 'ColorPickerButton',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorPickerProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\n    FieldBaseProps {\n  /** The selected color, as a color string. */\n  value?: string | null;\n  /** The initial color of an uncontrolled picker. */\n  defaultValue?: string | null;\n  /** Called with the normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorPickerFormatMode;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the input. */\n  shouldFlip?: boolean;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      qa={qa || 'ColorPicker'}\n      size={size}\n      autocomplete=\"off\"\n      icon={\n        <SwatchElement\n          mods={{ empty: !color }}\n          styles={swatchStyles}\n          style={color ? { '--color-picker-color': toHex(color) } : undefined}\n        />\n      }\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        <DialogTrigger\n          hideArrow\n          type=\"popover\"\n          mobileType=\"tray\"\n          placement=\"bottom right\"\n          targetRef={targetRef}\n          isOpen={controlledOpen ?? isOpen}\n          shouldFlip={shouldFlip}\n          onOpenChange={handleOpenChange}\n        >\n          <ColorPickerButton\n            size={size}\n            aria-label=\"Open the color picker\"\n            isDisabled={isDisabled || isReadOnly}\n            styles={triggerStyles}\n          />\n          <Dialog aria-label=\"Color picker\" width=\"max-content\">\n            <ColorPickerPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isDisabled || isReadOnly}\n              previewFormat={outputFormat(text)}\n              onChange={handleColorChange}\n              onSpaceChange={setSpace}\n            />\n          </Dialog>\n        </DialogTrigger>\n      }\n    />\n  );\n});\n\n(ColorPicker as any).cubeInputType = 'Text';\n"],"mappings":"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"}

package/dist/components/fields/{color/ColorPanel.js → ColorPicker/ColorPickerPanel.js}

@@ -1,16 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9fab1b3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a06567 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
-import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { __Radio } from "../RadioGroup/Radio.js";
 import { __Slider } from "../Slider/Slider.js";
+import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { tasty } from "@tenphi/tasty";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/fields/color/ColorPanel.tsx
+//#region src/components/fields/ColorPicker/ColorPickerPanel.tsx
 const PanelElement = tasty({
-	qa: "ColorPanel",
+	qa: "ColorPickerPanel",
 	styles: {
 		display: "grid",
 		flow: "row",
@@ -104,12 +104,11 @@ function ChannelRow({ channel, color, isDisabled, onChange }) {
 	] });
 }
 /**
-* The popover body shared by `ColorInput` and `ColorPicker`: a preview, a
-* switch between the three color concepts, and one gradient slider per channel
-* of the active one.
+* The popover body of `ColorPicker`: a preview, a switch between the three
+* color concepts, and one gradient slider per channel of the active one.
 */
-function ColorPanel(props) {
-	const { color, space, isDisabled, previewFormat, swatches, input, onChange, onSpaceChange } = props;
+function ColorPickerPanel(props) {
+	const { color, space, isDisabled, previewFormat, onChange, onSpaceChange } = props;
 	const colorTokens = useMemo(() => ({
 		"--color-picker-color": toHex(color),
 		"--color-picker-contrast-color": getContrastingColor(color)
@@ -120,7 +119,6 @@ function ColorPanel(props) {
 	return /* @__PURE__ */ jsxs(PanelElement, {
 		style: colorTokens,
 		children: [
-			input,
 			/* @__PURE__ */ jsx(PreviewElement, { children: formatColor(color, previewFormat) }),
 			/* @__PURE__ */ jsx(__Radio.Tabs, {
 				"aria-label": "Color space",
@@ -141,12 +139,11 @@ function ColorPanel(props) {
 				color,
 				isDisabled,
 				onChange
-			}, `${space}-${channel.label}`)) }),
-			swatches
+			}, `${space}-${channel.label}`)) })
 		]
 	});
 }
 
 //#endregion
-export { ColorPanel };
-//# sourceMappingURL=ColorPanel.js.map
+export { ColorPickerPanel };
+//# sourceMappingURL=ColorPickerPanel.js.map

package/dist/components/fields/ColorPicker/ColorPickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.js","names":["Slider","Radio"],"sources":["../../../../src/components/fields/ColorPicker/ColorPickerPanel.tsx"],"sourcesContent":["import { Styles, tasty } from '@tenphi/tasty';\nimport { useMemo } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { Radio } from '../RadioGroup';\nimport { Slider } from '../Slider';\n\nimport {\n  CHANNELS,\n  COLOR_SPACE_HINTS,\n  COLOR_SPACE_LABELS,\n  COLOR_SPACES,\n  ColorChannel,\n  ColorSpace,\n} from './channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  getContrastingColor,\n  toHex,\n} from './color';\n\nconst PanelElement = tasty({\n  qa: 'ColorPickerPanel',\n  styles: {\n    display: 'grid',\n    flow: 'row',\n    gap: '1x',\n    padding: '1x',\n    width: '34x',\n  },\n});\n\nconst PreviewElement = tasty({\n  qa: 'ColorPreview',\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    height: '6x',\n    radius: true,\n    preset: 's4',\n    fill: '(#color-picker, #clear)',\n    color: '(#color-picker-contrast, #dark)',\n    shadow: 'inset 0 0 0 1bw #dark.1',\n  },\n});\n\nconst ChannelsElement = tasty({\n  styles: {\n    display: 'grid',\n    gridColumns: 'max-content 1sf max-content',\n    placeItems: 'center stretch',\n    gap: '1x',\n  },\n});\n\nconst ChannelLabelElement = tasty({\n  styles: {\n    preset: 'c2',\n    color: '#dark-03',\n    textAlign: 'center',\n    width: '2x',\n  },\n});\n\nconst ChannelTrackElement = tasty({\n  styles: {\n    display: 'grid',\n    placeItems: 'center stretch',\n  },\n});\n\nconst ChannelValueElement = tasty({\n  styles: {\n    preset: 's4',\n    color: '#dark-02',\n    textAlign: 'right',\n    whiteSpace: 'nowrap',\n    width: '5.5x',\n  },\n});\n\n/**\n * The gradient reaches the track through a plain custom property so the track\n * keeps a single cached style rule. A color picker moves its channels\n * continuously, and a fresh `styles` object per frame would emit a fresh CSS\n * rule per frame.\n */\nconst TRACK_STYLES: Styles = {\n  height: '1x',\n  top: '.5x',\n  radius: '1r',\n  fill: '#clear',\n  image: '$channel-gradient',\n  shadow: 'inset 0 0 0 1bw #dark.1',\n  Fill: false,\n};\n\n/** A ring keeps the thumb visible wherever it sits on its own gradient. */\nconst THUMB_STYLES: Styles = {\n  shadow: '0 0 0 2bw #surface, 0 0 0 3bw #dark.2',\n};\n\nconst THUMB_TOKENS = { '#slider-thumb': '(#color-picker, #surface)' };\n\nconst SPACE_STYLES: Styles = { width: '100%' };\nconst TAB_STYLES: Styles = { flexGrow: 1 };\n\nexport interface ColorPickerPanelProps {\n  color: ColorValue;\n  space: ColorSpace;\n  isDisabled?: boolean;\n  /** Notation used for the preview caption. */\n  previewFormat: ColorFormat;\n  onChange: (color: ColorValue) => void;\n  onSpaceChange: (space: ColorSpace) => void;\n}\n\ninterface ChannelRowProps {\n  channel: ColorChannel;\n  color: ColorValue;\n  isDisabled?: boolean;\n  onChange: (color: ColorValue) => void;\n}\n\nfunction ChannelRow({ channel, color, isDisabled, onChange }: ChannelRowProps) {\n  const max = channel.max(color);\n\n  const handleChange = useEvent((value: number) => {\n    onChange(channel.apply(color, value));\n  });\n\n  return (\n    <>\n      <ChannelLabelElement aria-hidden=\"true\">\n        {channel.label}\n      </ChannelLabelElement>\n      <ChannelTrackElement\n        style={{\n          '--channel-gradient': `linear-gradient(to right, ${channel.stops(\n            color,\n          )})`,\n        }}\n      >\n        <Slider\n          aria-label={channel.title}\n          value={Math.min(channel.value(color), max)}\n          minValue={channel.min}\n          maxValue={max}\n          step={channel.step}\n          isDisabled={isDisabled}\n          trackStyles={TRACK_STYLES}\n          thumbStyles={THUMB_STYLES}\n          thumbTokens={THUMB_TOKENS}\n          onChange={handleChange}\n        />\n      </ChannelTrackElement>\n      <ChannelValueElement>{channel.display(color)}</ChannelValueElement>\n    </>\n  );\n}\n\n/**\n * The popover body of `ColorPicker`: a preview, a switch between the three\n * color concepts, and one gradient slider per channel of the active one.\n */\nexport function ColorPickerPanel(props: ColorPickerPanelProps) {\n  const { color, space, isDisabled, previewFormat, onChange, onSpaceChange } =\n    props;\n\n  const colorTokens = useMemo(\n    () => ({\n      '--color-picker-color': toHex(color),\n      '--color-picker-contrast-color': getContrastingColor(color),\n    }),\n    [color],\n  );\n\n  const handleSpaceChange = useEvent((value: string) => {\n    onSpaceChange(value as ColorSpace);\n  });\n\n  return (\n    <PanelElement style={colorTokens}>\n      <PreviewElement>{formatColor(color, previewFormat)}</PreviewElement>\n      <Radio.Tabs\n        aria-label=\"Color space\"\n        value={space}\n        isDisabled={isDisabled}\n        styles={SPACE_STYLES}\n        onChange={handleSpaceChange}\n      >\n        {COLOR_SPACES.map((item) => (\n          <Radio\n            key={item}\n            value={item}\n            aria-label={COLOR_SPACE_LABELS[item]}\n            tooltip={COLOR_SPACE_HINTS[item]}\n            styles={TAB_STYLES}\n          >\n            {COLOR_SPACE_LABELS[item]}\n          </Radio>\n        ))}\n      </Radio.Tabs>\n      <ChannelsElement>\n        {CHANNELS[space].map((channel) => (\n          <ChannelRow\n            key={`${space}-${channel.label}`}\n            channel={channel}\n            color={color}\n            isDisabled={isDisabled}\n            onChange={onChange}\n          />\n        ))}\n      </ChannelsElement>\n    </PanelElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,KAAK;EACL,SAAS;EACT,OAAO;EACR;CACF,CAAC;AAEF,MAAM,iBAAiB,MAAM;CAC3B,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAEF,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,aAAa;CACb,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,OAAO;CACR,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,SAAS;CACT,YAAY;CACb,EACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,QAAQ;CACR,OAAO;CACP,WAAW;CACX,YAAY;CACZ,OAAO;CACR,EACF,CAAC;;;;;;;AAQF,MAAM,eAAuB;CAC3B,QAAQ;CACR,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACP;;AAGD,MAAM,eAAuB,EAC3B,QAAQ,yCACT;AAED,MAAM,eAAe,EAAE,iBAAiB,6BAA6B;AAErE,MAAM,eAAuB,EAAE,OAAO,QAAQ;AAC9C,MAAM,aAAqB,EAAE,UAAU,GAAG;AAmB1C,SAAS,WAAW,EAAE,SAAS,OAAO,YAAY,YAA6B;CAC7E,MAAM,MAAM,QAAQ,IAAI,MAAM;CAE9B,MAAM,eAAe,UAAU,UAAkB;AAC/C,WAAS,QAAQ,MAAM,OAAO,MAAM,CAAC;GACrC;AAEF,QACE;EACE,oBAAC;GAAoB,eAAY;aAC9B,QAAQ;IACW;EACtB,oBAAC;GACC,OAAO,EACL,sBAAsB,6BAA6B,QAAQ,MACzD,MACD,CAAC,IACH;aAED,oBAACA;IACC,cAAY,QAAQ;IACpB,OAAO,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,IAAI;IAC1C,UAAU,QAAQ;IAClB,UAAU;IACV,MAAM,QAAQ;IACF;IACZ,aAAa;IACb,aAAa;IACb,aAAa;IACb,UAAU;KACV;IACkB;EACtB,oBAAC,iCAAqB,QAAQ,QAAQ,MAAM,GAAuB;KAClE;;;;;;AAQP,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,OAAO,OAAO,YAAY,eAAe,UAAU,kBACzD;CAEF,MAAM,cAAc,eACX;EACL,wBAAwB,MAAM,MAAM;EACpC,iCAAiC,oBAAoB,MAAM;EAC5D,GACD,CAAC,MAAM,CACR;CAED,MAAM,oBAAoB,UAAU,UAAkB;AACpD,gBAAc,MAAoB;GAClC;AAEF,QACE,qBAAC;EAAa,OAAO;;GACnB,oBAAC,4BAAgB,YAAY,OAAO,cAAc,GAAkB;GACpE,oBAACC,QAAM;IACL,cAAW;IACX,OAAO;IACK;IACZ,QAAQ;IACR,UAAU;cAET,aAAa,KAAK,SACjB,oBAACA;KAEC,OAAO;KACP,cAAY,mBAAmB;KAC/B,SAAS,kBAAkB;KAC3B,QAAQ;eAEP,mBAAmB;OANf,KAOC,CACR;KACS;GACb,oBAAC,6BACE,SAAS,OAAO,KAAK,YACpB,oBAAC;IAEU;IACF;IACK;IACF;MAJL,GAAG,MAAM,GAAG,QAAQ,QAKzB,CACF,GACc;;GACL"}

package/dist/components/fields/{color → ColorPicker}/channels.d.ts

@@ -1,7 +1,7 @@
 
 import "./color.js";
 
-//#region src/components/fields/color/channels.d.ts
+//#region src/components/fields/ColorPicker/channels.d.ts
 /**
  * The three color concepts the popover can be driven by. They all edit the
  * same canonical value — only the axes the user manipulates differ.

package/dist/components/fields/{color → ColorPicker}/channels.js

@@ -1,7 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9fab1b3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-8a06567 | Cube Dev Team */
 import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 
-//#region src/components/fields/color/channels.ts
+//#region src/components/fields/ColorPicker/channels.ts
 /**
 * The three color concepts the popover can be driven by. They all edit the
 * same canonical value — only the axes the user manipulates differ.