@cube-dev/ui-kit 0.197.0 → 0.198.1

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

@@ -2,18 +2,16 @@
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import "../../content/Item/index.js";
-import { CubeItemProps } from "../../content/Item/Item.js";
+import { CubeItemBaseProps as 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 * as react from "react";
 import { ReactNode, RefObject } from "react";
 import { Placement } from "react-aria";
-
 //#region src/components/fields/ColorPicker/ColorPicker.d.ts
-interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<string | null | undefined> {
   /** The selected color, as a color string. */
   value?: string | null;
   /** The initial color of an uncontrolled picker. */
@@ -76,7 +74,6 @@ interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStylePro
  * 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.
  */
-declare const ColorPicker: react.ForwardRefExoticComponent<CubeColorPickerProps & react.RefAttributes<HTMLElement>>;
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<CubeColorPickerProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion
-export { ColorPicker, CubeColorPickerProps };
 //# sourceMappingURL=ColorPicker.d.ts.map

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
-import { _Text } from "../../content/Text.js";
+import { Text as _Text } from "../../content/Text.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useI18n } from "../../../i18n/useI18n.js";
-import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
+import { ItemButton as _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
 import { getValidationIcon } from "../../form/validation/ValidationIndicator.js";
@@ -16,10 +16,10 @@ import { ColorPopoverContext } from "../color/context.js";
 import { ColorSwatch } from "../ColorSwatch/ColorSwatch.js";
 import { ColorInput } from "../ColorInput/ColorInput.js";
 import { ColorSwatchGroup } from "../ColorSwatchGroup/ColorSwatchGroup.js";
+import { c } from "react/compiler-runtime";
 import { BLOCK_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/fields/ColorPicker/ColorPicker.tsx
 /**
 * A popover caps its height at half the viewport. The panel can exceed that on
@@ -58,130 +58,326 @@ const ColorPickerWrapper = tasty({
 * typed: a toolbar, a chart legend, a cell in a dense table.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
+	const $ = c(98);
 	const { t } = useI18n();
-	const props = useFieldProps(allProps, {
-		defaultValidationTrigger: "onChange",
-		valuePropsMapper: ({ value, onChange }) => ({
-			value,
-			onChange
-		})
-	});
-	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format = "hex", defaultSpace = "hst", isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement = "bottom start", children, placeholder = "Pick a color", size, type = "outline", theme = "default", triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
-	const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-	/**
-	* Loading locks the trigger, but the popover can outlive that — it may be
-	* controlled, or opened before the load began — so the editor inside has to
-	* refuse edits on the same terms.
-	*/
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			defaultValidationTrigger: "onChange",
+			valuePropsMapper: _temp
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const props = useFieldProps(allProps, t0);
+	const { qa, id, value: value_0, defaultValue, onChange: onChange_0, format: t1, defaultSpace: t2, isOpen: controlledOpen, defaultOpen, onOpenChange, shouldFlip, targetRef, placement: t3, children, placeholder: t4, size, type: t5, theme: t6, triggerTooltip, swatches, swatchColumns, triggerStyles, swatchStyles, isDisabled, isReadOnly, isLoading, isInvalid, isValid, autoFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy } = props;
+	const format = t1 === void 0 ? "hex" : t1;
+	const defaultSpace = t2 === void 0 ? "hst" : t2;
+	const placement = t3 === void 0 ? "bottom start" : t3;
+	const placeholder = t4 === void 0 ? "Pick a color" : t4;
+	const type = t5 === void 0 ? "outline" : t5;
+	const theme = t6 === void 0 ? "default" : t6;
+	let t7;
+	if ($[1] !== props) {
+		t7 = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
+		$[1] = props;
+		$[2] = t7;
+	} else t7 = $[2];
+	const styles = t7;
 	const isEditingDisabled = isDisabled || isLoading;
-	const [color, setColor] = useState(() => parseColor((value_0 ?? defaultValue ?? "").toString()));
+	let t8;
+	if ($[3] !== defaultValue || $[4] !== value_0) {
+		t8 = () => parseColor((value_0 ?? defaultValue ?? "").toString());
+		$[3] = defaultValue;
+		$[4] = value_0;
+		$[5] = t8;
+	} else t8 = $[5];
+	const [color, setColor] = useState(t8);
 	const [space, setSpace] = useState(defaultSpace);
 	const [isOpen, setOpen] = useState(defaultOpen ?? false);
-	/** What was last published, to tell our own updates from outside ones. */
 	const emitted = useRef(value_0);
-	useEffect(() => {
-		if (value_0 === void 0 || value_0 === emitted.current) return;
-		emitted.current = value_0;
-		setColor(parseColor((value_0 ?? "").toString()));
-	}, [value_0]);
-	const handleColorChange = useEvent((next) => {
-		const text = formatColor(next, format);
-		emitted.current = text;
-		setColor(next);
-		onChange_0?.(text);
-	});
-	const colorText = color ? formatColor(color, format) : null;
-	/**
-	* The palette and the value field both speak in strings, and the field can
-	* hand back `null` when it is cleared — which has to reach the picker, or the
-	* text empties while the preview and trigger keep the old color.
-	*/
-	const handleValueChange = useEvent((next_0) => {
-		emitted.current = next_0;
-		setColor(next_0 ? parseColor(next_0) : null);
-		onChange_0?.(next_0);
-	});
-	const handleOpenChange = useEvent((next_1) => {
-		setOpen(next_1);
-		onOpenChange?.(next_1);
-	});
-	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, {
+	let t10;
+	let t9;
+	if ($[6] !== value_0) {
+		t9 = () => {
+			if (value_0 === void 0 || value_0 === emitted.current) return;
+			emitted.current = value_0;
+			setColor(parseColor((value_0 ?? "").toString()));
+		};
+		t10 = [value_0];
+		$[6] = value_0;
+		$[7] = t10;
+		$[8] = t9;
+	} else {
+		t10 = $[7];
+		t9 = $[8];
+	}
+	useEffect(t9, t10);
+	let t11;
+	if ($[9] !== format || $[10] !== onChange_0) {
+		t11 = (next) => {
+			const text = formatColor(next, format);
+			emitted.current = text;
+			setColor(next);
+			onChange_0?.(text);
+		};
+		$[9] = format;
+		$[10] = onChange_0;
+		$[11] = t11;
+	} else t11 = $[11];
+	const handleColorChange = useEvent(t11);
+	let t12;
+	if ($[12] !== color || $[13] !== format) {
+		t12 = color ? formatColor(color, format) : null;
+		$[12] = color;
+		$[13] = format;
+		$[14] = t12;
+	} else t12 = $[14];
+	const colorText = t12;
+	let t13;
+	if ($[15] !== onChange_0) {
+		t13 = (next_0) => {
+			emitted.current = next_0;
+			setColor(next_0 ? parseColor(next_0) : null);
+			onChange_0?.(next_0);
+		};
+		$[15] = onChange_0;
+		$[16] = t13;
+	} else t13 = $[16];
+	const handleValueChange = useEvent(t13);
+	let t14;
+	if ($[17] !== onOpenChange) {
+		t14 = (next_1) => {
+			setOpen(next_1);
+			onOpenChange?.(next_1);
+		};
+		$[17] = onOpenChange;
+		$[18] = t14;
+	} else t14 = $[18];
+	const handleOpenChange = useEvent(t14);
+	let t15;
+	if ($[19] !== children || $[20] !== color || $[21] !== format || $[22] !== placeholder) {
+		t15 = children !== void 0 ? children : color ? formatColor(color, format) : /* @__PURE__ */ jsx(_Text.Placeholder, { children: placeholder });
+		$[19] = children;
+		$[20] = color;
+		$[21] = format;
+		$[22] = placeholder;
+		$[23] = t15;
+	} else t15 = $[23];
+	const label = t15;
+	const t16 = controlledOpen ?? isOpen;
+	const t17 = qa || "ColorPickerTrigger";
+	let t18;
+	if ($[24] !== isInvalid || $[25] !== isValid || $[26] !== theme) {
+		t18 = getValidationTheme(theme, {
+			isInvalid,
+			isValid
+		});
+		$[24] = isInvalid;
+		$[25] = isValid;
+		$[26] = theme;
+		$[27] = t18;
+	} else t18 = $[27];
+	let t19;
+	if ($[28] !== color || $[29] !== swatchStyles) {
+		t19 = /* @__PURE__ */ jsx(ColorSwatch, {
+			size: "small",
+			color,
+			styles: swatchStyles
+		});
+		$[28] = color;
+		$[29] = swatchStyles;
+		$[30] = t19;
+	} else t19 = $[30];
+	let t20;
+	if ($[31] !== isInvalid || $[32] !== isValid) {
+		t20 = getValidationIcon({
+			isInvalid,
+			isValid
+		});
+		$[31] = isInvalid;
+		$[32] = isValid;
+		$[33] = t20;
+	} else t20 = $[33];
+	const t21 = isEditingDisabled || isReadOnly;
+	const t22 = !color;
+	let t23;
+	if ($[34] !== t22) {
+		t23 = { placeholder: t22 };
+		$[34] = t22;
+		$[35] = t23;
+	} else t23 = $[35];
+	let t24;
+	if ($[36] !== ariaDescribedBy || $[37] !== ariaLabel || $[38] !== autoFocus || $[39] !== id || $[40] !== label || $[41] !== size || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21 || $[47] !== t23 || $[48] !== triggerStyles || $[49] !== triggerTooltip || $[50] !== type) {
+		t24 = /* @__PURE__ */ jsx(_ItemButton, {
+			"data-popover-trigger": true,
+			id,
+			qa: t17,
+			"data-input-type": "colorpicker",
+			type,
+			theme: t18,
+			size,
+			icon: t19,
+			rightIcon: t20,
+			tooltip: triggerTooltip,
+			isDisabled: t21,
+			autoFocus,
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedBy,
+			mods: t23,
+			styles: triggerStyles,
+			children: label
+		});
+		$[36] = ariaDescribedBy;
+		$[37] = ariaLabel;
+		$[38] = autoFocus;
+		$[39] = id;
+		$[40] = label;
+		$[41] = size;
+		$[42] = t17;
+		$[43] = t18;
+		$[44] = t19;
+		$[45] = t20;
+		$[46] = t21;
+		$[47] = t23;
+		$[48] = triggerStyles;
+		$[49] = triggerTooltip;
+		$[50] = type;
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== t) {
+		t25 = t("colorPicker.colorPicker", "Color picker");
+		$[52] = t;
+		$[53] = t25;
+	} else t25 = $[53];
+	const t26 = color ?? FALLBACK_COLOR;
+	const t27 = isEditingDisabled || isReadOnly;
+	let t28;
+	if ($[54] !== t) {
+		t28 = t("colorPicker.colorValue", "Color value");
+		$[54] = t;
+		$[55] = t28;
+	} else t28 = $[55];
+	let t29;
+	if ($[56] !== colorText || $[57] !== format || $[58] !== handleValueChange || $[59] !== isEditingDisabled || $[60] !== isReadOnly || $[61] !== t28) {
+		t29 = /* @__PURE__ */ jsx(ColorInput, {
+			isBare: true,
+			"aria-label": t28,
+			format,
+			value: colorText,
+			isDisabled: isEditingDisabled,
+			isReadOnly,
+			onChange: handleValueChange
+		});
+		$[56] = colorText;
+		$[57] = format;
+		$[58] = handleValueChange;
+		$[59] = isEditingDisabled;
+		$[60] = isReadOnly;
+		$[61] = t28;
+		$[62] = t29;
+	} else t29 = $[62];
+	let t30;
+	if ($[63] !== colorText || $[64] !== format || $[65] !== handleValueChange || $[66] !== isEditingDisabled || $[67] !== isReadOnly || $[68] !== swatchColumns || $[69] !== swatches || $[70] !== t) {
+		t30 = swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
+			isBare: true,
+			"aria-label": t("colorPicker.palette", "Palette"),
+			styles: PALETTE_STYLES,
+			colors: swatches,
+			columns: swatchColumns,
+			format,
+			value: colorText,
+			isDisabled: isEditingDisabled || isReadOnly,
+			onChange: handleValueChange
+		}) : null;
+		$[63] = colorText;
+		$[64] = format;
+		$[65] = handleValueChange;
+		$[66] = isEditingDisabled;
+		$[67] = isReadOnly;
+		$[68] = swatchColumns;
+		$[69] = swatches;
+		$[70] = t;
+		$[71] = t30;
+	} else t30 = $[71];
+	let t31;
+	if ($[72] !== format || $[73] !== handleColorChange || $[74] !== space || $[75] !== t26 || $[76] !== t27 || $[77] !== t29 || $[78] !== t30) {
+		t31 = /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
+			value: true,
+			children: /* @__PURE__ */ jsx(ColorPanel, {
+				color: t26,
+				space,
+				isDisabled: t27,
+				previewFormat: format,
+				input: t29,
+				swatches: t30,
+				onChange: handleColorChange,
+				onSpaceChange: setSpace
+			})
+		});
+		$[72] = format;
+		$[73] = handleColorChange;
+		$[74] = space;
+		$[75] = t26;
+		$[76] = t27;
+		$[77] = t29;
+		$[78] = t30;
+		$[79] = t31;
+	} else t31 = $[79];
+	let t32;
+	if ($[80] !== t25 || $[81] !== t31) {
+		t32 = /* @__PURE__ */ jsx(Dialog, {
+			"aria-label": t25,
+			width: "max-content",
+			styles: POPOVER_STYLES,
+			children: t31
+		});
+		$[80] = t25;
+		$[81] = t31;
+		$[82] = t32;
+	} else t32 = $[82];
+	let t33;
+	if ($[83] !== handleOpenChange || $[84] !== placement || $[85] !== shouldFlip || $[86] !== t16 || $[87] !== t24 || $[88] !== t32 || $[89] !== targetRef) {
+		t33 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
 			placement,
 			targetRef,
-			isOpen: controlledOpen ?? isOpen,
+			isOpen: t16,
 			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
-				}),
-				size,
-				icon: /* @__PURE__ */ jsx(ColorSwatch, {
-					size: "small",
-					color,
-					styles: swatchStyles
-				}),
-				rightIcon: getValidationIcon({
-					isInvalid,
-					isValid
-				}),
-				tooltip: triggerTooltip,
-				isDisabled: isEditingDisabled || isReadOnly,
-				autoFocus,
-				"aria-label": ariaLabel,
-				"aria-describedby": ariaDescribedBy,
-				mods: { placeholder: !color },
-				styles: triggerStyles,
-				children: label
-			}), /* @__PURE__ */ jsx(Dialog, {
-				"aria-label": t("colorPicker.colorPicker", "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: isEditingDisabled || isReadOnly,
-						previewFormat: format,
-						input: /* @__PURE__ */ jsx(ColorInput, {
-							isBare: true,
-							"aria-label": t("colorPicker.colorValue", "Color value"),
-							format,
-							value: colorText,
-							isDisabled: isEditingDisabled,
-							isReadOnly,
-							onChange: handleValueChange
-						}),
-						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
-							isBare: true,
-							"aria-label": t("colorPicker.palette", "Palette"),
-							styles: PALETTE_STYLES,
-							colors: swatches,
-							columns: swatchColumns,
-							format,
-							value: colorText,
-							isDisabled: isEditingDisabled || isReadOnly,
-							onChange: handleValueChange
-						}) : null,
-						onChange: handleColorChange,
-						onSpaceChange: setSpace
-					})
-				})
-			})]
-		})
-	}), ref, props);
+			children: [t24, t32]
+		});
+		$[83] = handleOpenChange;
+		$[84] = placement;
+		$[85] = shouldFlip;
+		$[86] = t16;
+		$[87] = t24;
+		$[88] = t32;
+		$[89] = targetRef;
+		$[90] = t33;
+	} else t33 = $[90];
+	let t34;
+	if ($[91] !== ref || $[92] !== styles || $[93] !== t33) {
+		t34 = /* @__PURE__ */ jsx(ColorPickerWrapper, {
+			ref,
+			styles,
+			children: t33
+		});
+		$[91] = ref;
+		$[92] = styles;
+		$[93] = t33;
+		$[94] = t34;
+	} else t34 = $[94];
+	const pickerField = t34;
+	let t35;
+	if ($[95] !== pickerField || $[96] !== props) {
+		t35 = wrapWithField(pickerField, props);
+		$[95] = pickerField;
+		$[96] = props;
+		$[97] = t35;
+	} else t35 = $[97];
+	return t35;
 });
 /**
 * Drives the legacy `<Field>` wiring: `Picker` validates on change and passes
@@ -189,7 +385,14 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 * coerce `null` into an empty string.
 */
 ColorPicker.cubeInputType = "Picker";
-
+function _temp(t0) {
+	const { value, onChange } = t0;
+	return {
+		value,
+		onChange
+	};
+}
 //#endregion
 export { ColorPicker };
+
 //# sourceMappingURL=ColorPicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","t","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","isEditingDisabled","color","setColor","toString","space","setSpace","setOpen","emitted","undefined","current","handleColorChange","next","text","colorText","handleValueChange","handleOpenChange","label","pickerField","length","cubeInputType"],"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  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\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 } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\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<string | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\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 `labelTooltip`. */\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  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: 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 { t } = useI18n();\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    targetRef,\n    placement = 'bottom start',\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    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\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  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\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        placement={placement}\n        targetRef={targetRef}\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          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', '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={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAMuC,iBAAyB,EAAEC,UAAU,QAAQ;;;;;;AAOnD,MAAMC,iBAAyB;CAC7BC,QAAQ;CACRC,SAAS;CACTC,OAAO;CACR;;AAGD,MAAMC,iBAA6B;CAAEC,GAAG;CAAKC,GAAG;CAAKC,GAAG;CAAK;AAE7D,MAAMC,qBAAqB3C,MAAM;CAC/B4C,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;EACd;CACD,CAAC;;;;;;AAsEF,MAAawB,cAAcxE,WAAW,SAASwE,YAC7CC,UACAC,KACA;CACA,MAAM,EAAEC,MAAMnE,SAAS;CACvB,MAAMoE,QAAQ5D,cAAcyD,UAAU;EACpCI,0BAA0B;EAC1BC,mBAAmB,EAAE5B,OAAOE,gBAAgB;GACnCF;GACPE;GACD;EACF,CAAC;CAEF,MAAM,EACJV,IACAqC,IACA7B,OAAAA,SACAC,cACAC,UAAAA,YACAC,SAAS,OACTC,eAAe,OACfC,QAAQyB,gBACRxB,aACAC,cACAC,YACAC,WACAE,YAAY,gBACZC,UACAC,cAAc,gBACdC,MACAC,OAAO,WACPC,QAAQ,WACRC,gBACAC,UACAC,eACAC,eACAC,cACAU,YACAC,YACAC,WACAC,WACAC,SACAC,WACA,cAAcC,WACd,oBAAoBC,oBAClBZ;CAEJ,MAAMjC,SAASjC,cAAckE,OAAO,CAAC,GAAGjF,cAAc,GAAGF,aAAa,CAAC;;;;;;CAOvE,MAAMgG,oBAAoBR,cAAcE;CAExC,MAAM,CAACO,OAAOC,YAAYtF,eACxBmB,YAAY0B,WAASC,gBAAgB,IAAIyC,UAAU,CACrD,CAAC;CACD,MAAM,CAACC,OAAOC,YAAYzF,SAAqBiD,aAAa;CAC5D,MAAM,CAACC,QAAQwC,WAAW1F,SAASmD,eAAe,MAAM;;CAGxD,MAAMwC,UAAU5F,OAAkC8C,QAAM;AAIxD/C,iBAAgB;AACd,MAAI+C,YAAU+C,UAAa/C,YAAU8C,QAAQE,QAAS;AAEtDF,UAAQE,UAAUhD;AAClByC,WAASnE,YAAY0B,WAAS,IAAI0C,UAAU,CAAC,CAAC;IAC7C,CAAC1C,QAAM,CAAC;CAEX,MAAMiD,oBAAoB5F,UAAU6F,SAAqB;EACvD,MAAMC,OAAO9E,YAAY6E,MAAM/C,OAAO;AAEtC2C,UAAQE,UAAUG;AAClBV,WAASS,KAAK;AACdhD,eAAWiD,KAAK;GAChB;CAEF,MAAMC,YAAYZ,QAAQnE,YAAYmE,OAAOrC,OAAO,GAAG;;;;;;CAOvD,MAAMkD,oBAAoBhG,UAAU6F,WAAwB;AAC1DJ,UAAQE,UAAUE;AAClBT,WAASS,SAAO5E,WAAW4E,OAAK,GAAG,KAAK;AACxChD,eAAWgD,OAAK;GAChB;CAEF,MAAMI,mBAAmBjG,UAAU6F,WAAkB;AACnDL,UAAQK,OAAK;AACb3C,iBAAe2C,OAAK;GACpB;CAIF,MAAMK,QACJ3C,aAAamC,SACXnC,WACE4B,QACFnE,YAAYmE,OAAOrC,OAAO,GAI1B,oBAAC,MAAK,yBAAaU,cACpB;AAuFH,QAAO9C,cApFL,oBAAC;EAA2B0B;YAC1B,qBAAC;GACC;GACA,MAAK;GACMkB;GACAF;GACX,QAAQqB,kBAAkBzB;GACdG;GACZ,cAAc8C;cAEd,oBAAC;IACC;IACIzB;IACJ,IAAIrC,MAAM;IACV,mBAAgB;IACVuB;IACN,OAAOlD,mBAAmBmD,OAAO;KAAEkB;KAAWC;KAAS,CAAC;IAClDrB;IAGN,MACE,oBAAC;KAAY,MAAK;KAAe0B;KAAO,QAAQnB;MAClD;IACA,WAAWzD,kBAAkB;KAAEsE;KAAWC;KAAS,CAAC;IACpD,SAASlB;IACT,YAAYsB,qBAAqBP;IACtBI;IACX,cAAYC;IAGZ,oBAAkBC;IAClB,MAAM,EAAEzB,aAAa,CAAC2B,OAAO;IAC7B,QAAQpB;cAEPmC;KACS,EACZ,oBAAC;IACC,cAAY9B,EAAE,2BAA2B,eAAe;IACxD,OAAM;IACN,QAAQ5C;cAIR,oBAAC,oBAAoB;KAAS,OAAO;eACnC,oBAAC;MACC,OAAO2D,SAASrD;MACTwD;MACP,YAAYJ,qBAAqBP;MACjC,eAAe7B;MACf,OACE,oBAAC;OACC;OACA,cAAYsB,EAAE,0BAA0B,cAAc;OAC9CtB;OACR,OAAOiD;OACP,YAAYb;OACAP;OACZ,UAAUqB;QAEd;MACA,UACEnC,UAAUuC,SACR,oBAAC;OACC;OACA,cAAYhC,EAAE,uBAAuB,UAAU;OAC/C,QAAQ1C;OACR,QAAQmC;OACR,SAASC;OACDhB;OACR,OAAOiD;OACP,YAAYb,qBAAqBP;OACjC,UAAUqB;QACV,GACA;MAEN,UAAUJ;MACV,eAAeL;OAAS;MAEE;KACxB;IACK;GAElB,EAEiCpB,KAAYE,MAAM;EACpD;;;;;;AAOF,AAACJ,YAAoBoC,gBAAgB"}
+{"version":3,"file":"ColorPicker.js","names":["BaseProps","BLOCK_STYLES","BlockStyleProps","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","ReactNode","RefObject","useEffect","useRef","useState","Placement","useEvent","useI18n","FieldBaseProps","extractStyles","ItemButton","CubeItemProps","Text","getValidationIcon","getValidationTheme","useFieldProps","wrapWithField","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","formatColor","parseColor","ColorPanel","ColorPopoverContext","ColorInput","ColorSwatch","ColorSwatchGroup","CubeColorSwatchItem","POPOVER_STYLES","overflow","PALETTE_STYLES","border","padding","width","FALLBACK_COLOR","h","s","l","ColorPickerWrapper","qa","styles","display","flow","gridRows","placeContent","placeItems","CubeColorPickerProps","value","defaultValue","onChange","format","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","children","placeholder","size","type","theme","triggerTooltip","swatches","swatchColumns","triggerStyles","swatchStyles","ColorPicker","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","value_0","onChange_0","t1","t2","controlledOpen","t3","t4","t5","t6","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","ariaDescribedBy","undefined","t7","isEditingDisabled","t8","toString","color","setColor","space","setSpace","setOpen","emitted","t10","t9","current","t11","next","text","handleColorChange","t12","colorText","t13","next_0","handleValueChange","t14","next_1","handleOpenChange","t15","label","t16","t17","t18","t19","t20","t21","t22","t23","t24","t25","t26","t27","t28","t29","t30","length","t31","t32","t33","t34","pickerField","t35","cubeInputType","_c","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  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\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 } from '../../overlays/Dialog/Dialog';\nimport { DialogTrigger } from '../../overlays/Dialog/DialogTrigger';\nimport { ColorSpace } from '../color/channels';\nimport {\n  ColorFormat,\n  ColorValue,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { ColorPopoverContext } from '../color/context';\nimport { ColorInput } from '../ColorInput';\nimport { ColorSwatch } from '../ColorSwatch';\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\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\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  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the trigger button.\n   *\n   * Forwarded to `DialogTrigger`, so the anchor also becomes what outside-click\n   * dismissal treats as the trigger.\n   */\n  targetRef?: RefObject<HTMLElement | null>;\n  /**\n   * Placement of the popover relative to the anchor.\n   * Accepts React Aria's `Placement` strings (e.g. `'bottom start'`,\n   * `'top start'`, `'right top'`, `'left top'`).\n   * @default 'bottom start'\n   */\n  placement?: Placement;\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 `labelTooltip`. */\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  /** Ids of elements that also describe the trigger, beside the field's own description and message. */\n  'aria-describedby'?: 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 { t } = useI18n();\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    targetRef,\n    placement = 'bottom start',\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    'aria-describedby': ariaDescribedBy,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n\n  /**\n   * Loading locks the trigger, but the popover can outlive that — it may be\n   * controlled, or opened before the load began — so the editor inside has to\n   * refuse edits on the same terms.\n   */\n  const isEditingDisabled = isDisabled || isLoading;\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  /**\n   * The palette and the value field both speak in strings, and the field can\n   * hand back `null` when it is cleared — which has to reach the picker, or the\n   * text empties while the preview and trigger keep the old color.\n   */\n  const handleValueChange = useEvent((next: string | null) => {\n    emitted.current = next;\n    setColor(next ? parseColor(next) : null);\n    onChange?.(next);\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 ref={ref} styles={styles}>\n      <DialogTrigger\n        hideArrow\n        type=\"popover\"\n        placement={placement}\n        targetRef={targetRef}\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          // Fixed 20px rather than tracking the trigger, same as `ColorInput`\n          // and same as this has always rendered.\n          icon={\n            <ColorSwatch size=\"small\" color={color} styles={swatchStyles} />\n          }\n          rightIcon={getValidationIcon({ isInvalid, isValid })}\n          tooltip={triggerTooltip}\n          isDisabled={isEditingDisabled || isReadOnly}\n          autoFocus={autoFocus}\n          aria-label={ariaLabel}\n          // The trigger is the control, so the field's description and\n          // message describe it.\n          aria-describedby={ariaDescribedBy}\n          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label={t('colorPicker.colorPicker', '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={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  isBare\n                  aria-label={t('colorPicker.colorValue', 'Color value')}\n                  format={format}\n                  value={colorText}\n                  isDisabled={isEditingDisabled}\n                  isReadOnly={isReadOnly}\n                  onChange={handleValueChange}\n                />\n              }\n              swatches={\n                swatches?.length ? (\n                  <ColorSwatchGroup\n                    isBare\n                    aria-label={t('colorPicker.palette', 'Palette')}\n                    styles={PALETTE_STYLES}\n                    colors={swatches}\n                    columns={swatchColumns}\n                    format={format}\n                    value={colorText}\n                    isDisabled={isEditingDisabled || isReadOnly}\n                    onChange={handleValueChange}\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, 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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"}

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

@@ -1,2 +1,3 @@
 
-import { ColorPicker, CubeColorPickerProps } from "./ColorPicker.js";
+import { ColorPicker, CubeColorPickerProps } from "./ColorPicker.js";
+export { ColorPicker, type CubeColorPickerProps };

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

@@ -1,10 +1,8 @@
 
 import { ColorValue } from "../color/color.js";
 import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
-import * as react from "react";
-
 //#region src/components/fields/ColorSwatch/ColorSwatch.d.ts
-interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, DimensionStyleProps {
+export interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProps, BlockStyleProps, DimensionStyleProps {
   /** The color to show. Anything the color inputs accept; `null` shows the empty state. */
   color?: string | ColorValue | null;
   /**
@@ -22,7 +20,6 @@ interface CubeColorSwatchProps extends BaseProps, BaseStyleProps, OuterStyleProp
  * The color travels as an inline custom property rather than through `styles`,
  * so the swatch keeps a single cached style rule however often it changes.
  */
-declare const ColorSwatch: react.ForwardRefExoticComponent<CubeColorSwatchProps & react.RefAttributes<HTMLDivElement>>;
+export declare const ColorSwatch: import("react").ForwardRefExoticComponent<CubeColorSwatchProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
-export { ColorSwatch, CubeColorSwatchProps };
 //# sourceMappingURL=ColorSwatch.d.ts.map