@cube-dev/ui-kit 0.200.1 → 0.202.0

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

@@ -1,15 +1,16 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
 import { ColorFormat } from "../color/color.js";
-import { BaseProps, BlockStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { BaseProps, Styles } from "@tenphi/tasty";
 //#region src/components/fields/ColorSwatchGroup/ColorSwatchGroup.d.ts
 /** A swatch: a color, and optionally a name to announce instead of the color. */
 export type CubeColorSwatchItem = string | {
   color: string;
   label?: string;
 };
-export interface CubeColorSwatchGroupProps extends BaseProps, OuterStyleProps, BlockStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeColorSwatchGroupProps extends BaseProps, FieldLayoutStyleProps, FieldBaseProps<string | null | undefined> {
   /** The colors to offer. Duplicates of the same color are dropped. */
   colors?: CubeColorSwatchItem[];
   /** The selected color (controlled). */

package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js

@@ -1,5 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { extractStyles } from "../../../utils/styles.js";
+/** @license MIT | @cube-dev/ui-kit v0.202.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
@@ -7,12 +6,13 @@ import { useI18n } from "../../../i18n/useI18n.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { wrapWithField } from "../../form/wrapper.js";
+import { splitFieldLayout } from "../../form/field-layout.js";
 import { HiddenInput } from "../../HiddenInput.js";
 import { formatColor, parseColor, toHex } from "../color/color.js";
 import { useIsInsideColorPopover } from "../color/context.js";
 import { ColorPicker } from "../ColorPicker/ColorPicker.js";
 import { c } from "react/compiler-runtime";
-import { BLOCK_STYLES, OUTER_STYLES, mergeStyles, tasty } from "@tenphi/tasty";
+import { mergeStyles, tasty } from "@tenphi/tasty";
 import { forwardRef, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadio, useRadioGroup } from "react-aria";
@@ -221,7 +221,7 @@ function Swatch(t0) {
 * ambiguous.
 */
 const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
-	const $ = c(74);
+	const $ = c(59);
 	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -242,17 +242,11 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 	const colors = t4;
 	const format = t2 === void 0 ? "hex" : t2;
 	const size = t3 === void 0 ? "medium" : t3;
-	let t5;
-	if ($[3] !== props) {
-		t5 = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);
-		$[3] = props;
-		$[4] = t5;
-	} else t5 = $[4];
-	const styles = t5;
+	const { styles, field } = splitFieldLayout(props);
 	const isInsidePopover = useIsInsideColorPopover();
 	const showCustom = allowCustom && !isInsidePopover;
-	let t6;
-	if ($[5] !== colors || $[6] !== format) {
+	let t5;
+	if ($[3] !== colors || $[4] !== format) {
 		const seen = /* @__PURE__ */ new Map();
 		for (const entry of colors) {
 			const raw = typeof entry === "string" ? entry : entry.color;
@@ -265,129 +259,128 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 				label: (typeof entry === "string" ? void 0 : entry.label) ?? formatColor(parsed, format)
 			});
 		}
-		t6 = [...seen.values()];
-		$[5] = colors;
-		$[6] = format;
+		t5 = [...seen.values()];
+		$[3] = colors;
+		$[4] = format;
+		$[5] = t5;
+	} else t5 = $[5];
+	const swatches = t5;
+	let t6;
+	if ($[6] !== defaultValue) {
+		t6 = () => defaultValue ?? null;
+		$[6] = defaultValue;
 		$[7] = t6;
 	} else t6 = $[7];
-	const swatches = t6;
+	const [internalValue, setInternalValue] = useState(t6);
+	const currentValue = value_0 !== void 0 ? value_0 : internalValue;
 	let t7;
-	if ($[8] !== defaultValue) {
-		t7 = () => defaultValue ?? null;
-		$[8] = defaultValue;
+	if ($[8] !== currentValue) {
+		const selectedColor = parseColor((currentValue ?? "").toString());
+		t7 = selectedColor ? toHex(selectedColor) : null;
+		$[8] = currentValue;
 		$[9] = t7;
 	} else t7 = $[9];
-	const [internalValue, setInternalValue] = useState(t7);
-	const currentValue = value_0 !== void 0 ? value_0 : internalValue;
+	const selectedKey = t7;
 	let t8;
-	if ($[10] !== currentValue) {
-		const selectedColor = parseColor((currentValue ?? "").toString());
-		t8 = selectedColor ? toHex(selectedColor) : null;
-		$[10] = currentValue;
-		$[11] = t8;
-	} else t8 = $[11];
-	const selectedKey = t8;
+	if ($[10] !== selectedKey || $[11] !== swatches) {
+		t8 = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
+		$[10] = selectedKey;
+		$[11] = swatches;
+		$[12] = t8;
+	} else t8 = $[12];
+	const isCustom = t8;
 	let t9;
-	if ($[12] !== selectedKey || $[13] !== swatches) {
-		t9 = !!selectedKey && !swatches.some((s) => s.key === selectedKey);
-		$[12] = selectedKey;
-		$[13] = swatches;
-		$[14] = t9;
-	} else t9 = $[14];
-	const isCustom = t9;
-	let t10;
-	if ($[15] !== onChange_0 || $[16] !== value_0) {
-		t10 = (next) => {
+	if ($[13] !== onChange_0 || $[14] !== value_0) {
+		t9 = (next) => {
 			if (value_0 === void 0) setInternalValue(next);
 			onChange_0?.(next);
 		};
-		$[15] = onChange_0;
-		$[16] = value_0;
-		$[17] = t10;
-	} else t10 = $[17];
-	const publish = useEvent(t10);
-	let t11;
-	if ($[18] !== format || $[19] !== publish) {
-		t11 = (nextKey) => {
+		$[13] = onChange_0;
+		$[14] = value_0;
+		$[15] = t9;
+	} else t9 = $[15];
+	const publish = useEvent(t9);
+	let t10;
+	if ($[16] !== format || $[17] !== publish) {
+		t10 = (nextKey) => {
 			const parsed_0 = nextKey == null ? null : parseColor(nextKey);
 			publish(parsed_0 ? formatColor(parsed_0, format) : null);
 		};
-		$[18] = format;
-		$[19] = publish;
-		$[20] = t11;
-	} else t11 = $[20];
-	const handleChange = useEvent(t11);
-	const t12 = selectedKey ?? null;
-	let t13;
-	if ($[21] !== handleChange || $[22] !== isDisabled || $[23] !== isInvalid || $[24] !== props.isReadOnly || $[25] !== t12) {
-		t13 = {
-			value: t12,
+		$[16] = format;
+		$[17] = publish;
+		$[18] = t10;
+	} else t10 = $[18];
+	const handleChange = useEvent(t10);
+	const t11 = selectedKey ?? null;
+	let t12;
+	if ($[19] !== handleChange || $[20] !== isDisabled || $[21] !== isInvalid || $[22] !== props.isReadOnly || $[23] !== t11) {
+		t12 = {
+			value: t11,
 			isDisabled,
 			isReadOnly: props.isReadOnly,
 			isInvalid,
 			onChange: handleChange
 		};
-		$[21] = handleChange;
-		$[22] = isDisabled;
-		$[23] = isInvalid;
-		$[24] = props.isReadOnly;
-		$[25] = t12;
-		$[26] = t13;
-	} else t13 = $[26];
-	const state = useRadioGroupState(t13);
+		$[19] = handleChange;
+		$[20] = isDisabled;
+		$[21] = isInvalid;
+		$[22] = props.isReadOnly;
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	const state = useRadioGroupState(t12);
 	const domRef = useObjectRef(ref);
+	let t13;
+	if ($[25] !== ariaLabel || $[26] !== props.label || $[27] !== t) {
+		t13 = props.label ? void 0 : ariaLabel ?? t("colorSwatchGroup.colors", "Colors");
+		$[25] = ariaLabel;
+		$[26] = props.label;
+		$[27] = t;
+		$[28] = t13;
+	} else t13 = $[28];
 	let t14;
-	if ($[27] !== ariaLabel || $[28] !== props.label || $[29] !== t) {
-		t14 = props.label ? void 0 : ariaLabel ?? t("colorSwatchGroup.colors", "Colors");
-		$[27] = ariaLabel;
-		$[28] = props.label;
-		$[29] = t;
-		$[30] = t14;
-	} else t14 = $[30];
-	let t15;
-	if ($[31] !== props || $[32] !== t14) {
-		t15 = {
+	if ($[29] !== props || $[30] !== t13) {
+		t14 = {
 			...props,
 			form: void 0,
-			"aria-label": t14,
+			"aria-label": t13,
 			orientation: "horizontal"
 		};
-		$[31] = props;
-		$[32] = t14;
-		$[33] = t15;
-	} else t15 = $[33];
-	const { radioGroupProps, labelProps } = useRadioGroup(t15, state);
-	const t16 = qa || "ColorSwatchGroup";
-	let t17;
-	if ($[34] !== isInvalid || $[35] !== isValid) {
-		t17 = getValidationMods({
+		$[29] = props;
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	const { radioGroupProps, labelProps } = useRadioGroup(t14, state);
+	let t15;
+	if ($[32] !== isInvalid || $[33] !== isValid) {
+		t15 = getValidationMods({
 			isInvalid,
 			isValid
 		});
-		$[34] = isInvalid;
-		$[35] = isValid;
-		$[36] = t17;
-	} else t17 = $[36];
-	const t18 = !!columns;
-	let t19;
-	if ($[37] !== t17 || $[38] !== t18) {
-		t19 = {
-			...t17,
-			columns: t18
+		$[32] = isInvalid;
+		$[33] = isValid;
+		$[34] = t15;
+	} else t15 = $[34];
+	const t16 = !!columns;
+	let t17;
+	if ($[35] !== t15 || $[36] !== t16) {
+		t17 = {
+			...t15,
+			columns: t16
 		};
+		$[35] = t15;
+		$[36] = t16;
 		$[37] = t17;
-		$[38] = t18;
-		$[39] = t19;
-	} else t19 = $[39];
-	let t20;
-	if ($[40] !== columns) {
-		t20 = columns ? { $columns: columns } : void 0;
-		$[40] = columns;
-		$[41] = t20;
-	} else t20 = $[41];
-	let t21;
-	if ($[42] !== isDisabled || $[43] !== size || $[44] !== state || $[45] !== swatchStyles || $[46] !== swatches) {
-		t21 = swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== columns) {
+		t18 = columns ? { $columns: columns } : void 0;
+		$[38] = columns;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== isDisabled || $[41] !== size || $[42] !== state || $[43] !== swatchStyles || $[44] !== swatches) {
+		t19 = swatches.map((swatch) => /* @__PURE__ */ jsx(Swatch, {
 			colorKey: swatch.key,
 			label: swatch.label,
 			state,
@@ -395,26 +388,26 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			size,
 			styles: swatchStyles
 		}, swatch.key));
-		$[42] = isDisabled;
-		$[43] = size;
-		$[44] = state;
-		$[45] = swatchStyles;
-		$[46] = swatches;
-		$[47] = t21;
-	} else t21 = $[47];
-	let t22;
-	if ($[48] !== radioGroupProps || $[49] !== t21) {
-		t22 = /* @__PURE__ */ jsx(RadiosElement, {
+		$[40] = isDisabled;
+		$[41] = size;
+		$[42] = state;
+		$[43] = swatchStyles;
+		$[44] = swatches;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== radioGroupProps || $[47] !== t19) {
+		t20 = /* @__PURE__ */ jsx(RadiosElement, {
 			...radioGroupProps,
-			children: t21
+			children: t19
 		});
-		$[48] = radioGroupProps;
-		$[49] = t21;
-		$[50] = t22;
-	} else t22 = $[50];
-	let t23;
-	if ($[51] !== currentValue || $[52] !== format || $[53] !== isCustom || $[54] !== isDisabled || $[55] !== props.isReadOnly || $[56] !== publish || $[57] !== showCustom || $[58] !== size || $[59] !== t) {
-		t23 = showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
+		$[46] = radioGroupProps;
+		$[47] = t19;
+		$[48] = t20;
+	} else t20 = $[48];
+	let t21;
+	if ($[49] !== currentValue || $[50] !== format || $[51] !== isCustom || $[52] !== isDisabled || $[53] !== props.isReadOnly || $[54] !== publish || $[55] !== showCustom || $[56] !== size || $[57] !== t) {
+		t21 = showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
 			isBare: true,
 			"aria-label": t("colorSwatchGroup.customColor", "Custom color"),
 			qa: "ColorSwatchGroupCustom",
@@ -429,52 +422,31 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 			onChange: publish,
 			children: null
 		}) : null;
-		$[51] = currentValue;
-		$[52] = format;
-		$[53] = isCustom;
-		$[54] = isDisabled;
-		$[55] = props.isReadOnly;
-		$[56] = publish;
-		$[57] = showCustom;
-		$[58] = size;
-		$[59] = t;
-		$[60] = t23;
-	} else t23 = $[60];
-	let t24;
-	if ($[61] !== domRef || $[62] !== size || $[63] !== styles || $[64] !== t16 || $[65] !== t19 || $[66] !== t20 || $[67] !== t22 || $[68] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(GroupElement, {
-			ref: domRef,
-			qa: t16,
-			"data-size": size,
-			"data-input-type": "colorswatchgroup",
-			styles,
-			mods: t19,
-			tokens: t20,
-			children: [t22, t23]
-		});
-		$[61] = domRef;
-		$[62] = size;
-		$[63] = styles;
-		$[64] = t16;
-		$[65] = t19;
-		$[66] = t20;
-		$[67] = t22;
-		$[68] = t23;
-		$[69] = t24;
-	} else t24 = $[69];
-	const group = t24;
-	let t25;
-	if ($[70] !== group || $[71] !== labelProps || $[72] !== props) {
-		t25 = wrapWithField(group, {
-			...props,
-			labelProps: mergeProps$1(props.labelProps, labelProps)
-		});
-		$[70] = group;
-		$[71] = labelProps;
-		$[72] = props;
-		$[73] = t25;
-	} else t25 = $[73];
-	return t25;
+		$[49] = currentValue;
+		$[50] = format;
+		$[51] = isCustom;
+		$[52] = isDisabled;
+		$[53] = props.isReadOnly;
+		$[54] = publish;
+		$[55] = showCustom;
+		$[56] = size;
+		$[57] = t;
+		$[58] = t21;
+	} else t21 = $[58];
+	return wrapWithField(/* @__PURE__ */ jsxs(GroupElement, {
+		ref: domRef,
+		qa: qa || "ColorSwatchGroup",
+		"data-size": size,
+		"data-input-type": "colorswatchgroup",
+		styles,
+		mods: t17,
+		tokens: t18,
+		children: [t20, t21]
+	}), {
+		...props,
+		...field,
+		labelProps: mergeProps$1(props.labelProps, labelProps)
+	});
 });
 ColorSwatchGroup.cubeInputType = "Picker";
 function _temp(t0) {

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","BLOCK_STYLES","BlockStyleProps","mergeStyles","OUTER_STYLES","OuterStyleProps","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","extractStyles","getValidationMods","useFieldProps","wrapWithField","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","t","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","isInvalid","isValid","ariaLabel","undefined","isInsidePopover","showCustom","seen","Map","entry","raw","parsed","key","has","set","values","swatches","internalValue","setInternalValue","currentValue","t8","selectedColor","toString","selectedKey","t9","some","s","isCustom","t10","next","publish","t11","nextKey","parsed_0","handleChange","t12","t13","isReadOnly","domRef","t14","t15","form","orientation","radioGroupProps","labelProps","t16","t17","t18","t19","t20","$columns","t21","map","swatch","t22","t23","t24","group","t25","cubeInputType","_c","useFocus","mergeProps"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  mergeStyles,\n  OUTER_STYLES,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { extractStyles } from '../../../utils/styles';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as two ring widths\n * of `#surface-text` at the edge and two of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING =\n  'inset 0 0 0 (2 * $ring-width) #surface-text, inset 0 0 0 (4 * $ring-width) #surface';\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  // `size` sets the control's height; the box is pinned here as well so a flex\n  // row cannot let the button size itself to its content instead.\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n  position: 'relative',\n};\n\n/**\n * The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  position: 'absolute',\n  inset: 0,\n  width: 'auto',\n  height: 'auto',\n  radius: '1r',\n};\n\n/**\n * The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n */\nconst CUSTOM_SWATCH_SELECTED_STYLES = mergeStyles(CUSTOM_SWATCH_STYLES, {\n  shadow: SELECTED_RING,\n});\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    // Wrapping is the better default: it is a single row wherever there is\n    // room, and folds instead of overflowing where there is not. A fixed\n    // `columns` switches to a grid, sized to the swatches rather than to the\n    // container — `1fr` tracks would stretch them apart.\n    display: {\n      '': 'flex',\n      columns: 'grid',\n    },\n    flow: {\n      '': 'row wrap',\n      columns: 'row',\n    },\n    gap: '.5x',\n    placeItems: {\n      '': 'center start',\n      columns: 'stretch',\n    },\n    width: {\n      '': 'auto',\n      columns: 'max-content',\n    },\n    gridColumns: 'repeat($columns, max-content)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\n/**\n * Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n */\nconst RadiosElement = tasty({\n  styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected: SELECTED_RING,\n    },\n    // The outline offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '(2 * $ring-width) #focus.0 / $outline-offset',\n      focused: '(2 * $ring-width) #focus / $outline-offset',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends\n    BaseProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus(true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      tokens={{ '#color-swatch': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\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    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const styles = extractStyles(props, [...OUTER_STYLES, ...BLOCK_STYLES]);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    // Becomes the group's `aria-invalid`, which is what says the field is\n    // invalid to a screen reader; the red outline says it only to the eye.\n    isInvalid,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label\n        ? undefined\n        : (ariaLabel ?? t('colorSwatchGroup.colors', 'Colors')),\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={{\n        ...getValidationMods({ isInvalid, isValid }),\n        columns: !!columns,\n      }}\n      tokens={columns ? { $columns: columns } : undefined}\n    >\n      <RadiosElement {...radioGroupProps}>\n        {swatches.map((swatch) => (\n          <Swatch\n            key={swatch.key}\n            colorKey={swatch.key}\n            label={swatch.label}\n            state={state}\n            isDisabled={isDisabled}\n            size={size}\n            styles={swatchStyles}\n          />\n        ))}\n      </RadiosElement>\n      {showCustom ? (\n        <ColorPicker\n          isBare\n          aria-label={t('colorSwatchGroup.customColor', 'Custom color')}\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? (currentValue ?? null) : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={CUSTOM_TRIGGER_STYLES}\n          swatchStyles={\n            isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n          }\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, {\n    ...props,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}
+{"version":3,"file":"ColorSwatchGroup.js","names":["useObjectRef","BaseProps","mergeStyles","Styles","tasty","ForwardedRef","forwardRef","useMemo","useRef","useState","useRadio","useRadioGroup","useRadioGroupState","useEvent","useI18n","FieldBaseProps","mergeProps","useFocus","getValidationMods","useFieldProps","wrapWithField","FieldLayoutStyleProps","splitFieldLayout","HiddenInput","ColorFormat","formatColor","parseColor","toHex","useIsInsideColorPopover","ColorPicker","RadioGroupState","CubeColorSwatchItem","color","label","SELECTED_RING","SWATCH_PX","Record","small","medium","large","CUSTOM_TRIGGER_STYLES","width","height","padding","radius","border","position","CUSTOM_SWATCH_STYLES","inset","CUSTOM_SWATCH_SELECTED_STYLES","shadow","GroupElement","qa","styles","display","columns","flow","gap","placeItems","gridColumns","RadiosElement","SwatchElement","as","cursor","disabled","fill","opacity","selected","outline","focused","transition","CubeColorSwatchGroupProps","colors","value","defaultValue","onChange","format","allowCustom","size","swatchStyles","SwatchProps","colorKey","state","isDisabled","mods","Swatch","t0","$","_c","inputRef","t1","inputProps","isSelected","isRadioDisabled","isFocused","focusProps","t2","t3","t4","t5","button","t6","t7","ColorSwatchGroup","allProps","ref","t","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","isInvalid","isValid","ariaLabel","undefined","field","isInsidePopover","showCustom","seen","Map","entry","raw","parsed","key","has","set","values","swatches","internalValue","setInternalValue","currentValue","selectedColor","toString","selectedKey","t8","some","s","isCustom","t9","next","publish","t10","nextKey","parsed_0","handleChange","t11","t12","isReadOnly","domRef","t13","t14","form","orientation","radioGroupProps","labelProps","t15","t16","t17","t18","$columns","t19","map","swatch","t20","t21","group","cubeInputType","_c","useFocus","mergeProps"],"sources":["../../../../src/components/fields/ColorSwatchGroup/ColorSwatchGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport { BaseProps, mergeStyles, Styles, tasty } from '@tenphi/tasty';\nimport { ForwardedRef, forwardRef, useMemo, useRef, useState } from 'react';\nimport { useRadio, useRadioGroup } from 'react-aria';\nimport { useRadioGroupState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { useFocus } from '../../../utils/react/interactions';\nimport { getValidationMods, useFieldProps, wrapWithField } from '../../form';\nimport {\n  FieldLayoutStyleProps,\n  splitFieldLayout,\n} from '../../form/field-layout';\nimport { HiddenInput } from '../../HiddenInput';\nimport { ColorFormat, formatColor, parseColor, toHex } from '../color/color';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorPicker } from '../ColorPicker';\n\nimport type { RadioGroupState } from 'react-stately';\n\n/** A swatch: a color, and optionally a name to announce instead of the color. */\nexport type CubeColorSwatchItem = string | { color: string; label?: string };\n\n/**\n * Two rings drawn inside the swatch, as React Aria marks selection. Outer ring\n * first: earlier shadows paint over later ones, so this reads as two ring widths\n * of `#surface-text` at the edge and two of `#surface` within it. Two tones that\n * flip with the scheme stay visible against any color the swatch holds.\n */\nconst SELECTED_RING =\n  'inset 0 0 0 (2 * $ring-width) #surface-text, inset 0 0 0 (4 * $ring-width) #surface';\n\n/** The swatch edge in px, per size. `Item` takes an exact number. */\nconst SWATCH_PX: Record<string, number> = {\n  small: 16,\n  medium: 20,\n  large: 24,\n};\n\n/**\n * The trailing picker is a button wrapping a swatch, which would otherwise read\n * as a box inside a box. Stripping its chrome leaves just the swatch, so it\n * sits in the row as one of them.\n */\nconst CUSTOM_TRIGGER_STYLES: Styles = {\n  // `size` sets the control's height; the box is pinned here as well so a flex\n  // row cannot let the button size itself to its content instead.\n  width: '$swatch-size $swatch-size',\n  height: '$swatch-size $swatch-size',\n  padding: 0,\n  radius: '1r',\n  border: 0,\n  position: 'relative',\n};\n\n/**\n * The swatch is docked over the whole button rather than placed inside it.\n * `Item` lays its icon out in a grid that reserves room for a label even when\n * there is none, which left the swatch a pixel off centre.\n */\nconst CUSTOM_SWATCH_STYLES: Styles = {\n  position: 'absolute',\n  inset: 0,\n  width: 'auto',\n  height: 'auto',\n  radius: '1r',\n};\n\n/**\n * The ring goes on the swatch, not on the button around it: an inset shadow\n * paints under child content, and the swatch covers the button edge to edge.\n */\nconst CUSTOM_SWATCH_SELECTED_STYLES = mergeStyles(CUSTOM_SWATCH_STYLES, {\n  shadow: SELECTED_RING,\n});\n\nconst GroupElement = tasty({\n  qa: 'ColorSwatchGroup',\n  styles: {\n    // Wrapping is the better default: it is a single row wherever there is\n    // room, and folds instead of overflowing where there is not. A fixed\n    // `columns` switches to a grid, sized to the swatches rather than to the\n    // container — `1fr` tracks would stretch them apart.\n    display: {\n      '': 'flex',\n      columns: 'grid',\n    },\n    flow: {\n      '': 'row wrap',\n      columns: 'row',\n    },\n    gap: '.5x',\n    placeItems: {\n      '': 'center start',\n      columns: 'stretch',\n    },\n    width: {\n      '': 'auto',\n      columns: 'max-content',\n    },\n    gridColumns: 'repeat($columns, max-content)',\n\n    // 20px, 16px and 24px — 1x is 8px.\n    '$swatch-size': {\n      '': '2.5x',\n      'size=small': '2x',\n      'size=large': '3x',\n    },\n  },\n});\n\n/**\n * Only the swatches belong to the radiogroup. The custom picker is a button,\n * and inside `role=\"radiogroup\"` it both misreports what the palette holds and\n * hands arrow keys to React Aria's radio walker — pressing one while the picker\n * is focused jumps into a swatch and changes the color. The box is dropped so\n * the swatches remain direct children of the group's own layout.\n */\nconst RadiosElement = tasty({\n  styles: { display: 'contents' },\n});\n\nconst SwatchElement = tasty({\n  as: 'label',\n  qa: 'ColorSwatchOption',\n  styles: {\n    display: 'grid',\n    placeItems: 'stretch',\n    position: 'relative',\n    radius: '1r',\n    cursor: {\n      '': 'pointer',\n      disabled: 'default',\n    },\n    width: '$swatch-size $swatch-size',\n    height: '$swatch-size $swatch-size',\n    fill: '(#color-swatch, #clear)',\n    opacity: {\n      '': 1,\n      disabled: '$disabled-opacity',\n    },\n    // A ring at one border-width's distance, so the color area stays whole —\n    // the inner ring is the surface showing through as the gap. `outline` is\n    // deliberately left to the focus ring.\n    shadow: {\n      '': 'inset 0 0 0 1bw #dark.15',\n      selected: SELECTED_RING,\n    },\n    // The outline offset keeps the ring clear of the 4px gap to its neighbours.\n    outline: {\n      '': '(2 * $ring-width) #focus.0 / $outline-offset',\n      focused: '(2 * $ring-width) #focus / $outline-offset',\n    },\n    transition: 'theme',\n  },\n});\n\nexport interface CubeColorSwatchGroupProps\n  extends\n    BaseProps,\n    FieldLayoutStyleProps,\n    FieldBaseProps<string | null | undefined> {\n  /** The colors to offer. Duplicates of the same color are dropped. */\n  colors?: CubeColorSwatchItem[];\n  /** The selected color (controlled). */\n  value?: string | null;\n  /** The selected color (uncontrolled). */\n  defaultValue?: string | null;\n  /** Called with the chosen color, written in `format`. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in. */\n  format?: ColorFormat;\n  /** How many swatches per row. Defaults to a single row. */\n  columns?: number;\n  /**\n   * Append a `ColorPicker` for colors outside the set. Ignored inside a color\n   * popover, which is where that picker would otherwise recurse.\n   */\n  allowCustom?: boolean;\n  /** The size of each swatch. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  styles?: Styles;\n  /** Styles of an individual swatch. */\n  swatchStyles?: Styles;\n  'aria-label'?: string;\n}\n\ninterface SwatchProps {\n  colorKey: string;\n  label: string;\n  state: RadioGroupState;\n  isDisabled?: boolean;\n  size?: string;\n  styles?: Styles;\n  mods?: Record<string, boolean | undefined>;\n}\n\nfunction Swatch({\n  colorKey,\n  label,\n  state,\n  isDisabled,\n  size,\n  styles,\n  mods,\n}: SwatchProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    inputProps,\n    isSelected,\n    isDisabled: isRadioDisabled,\n  } = useRadio(\n    { value: colorKey, 'aria-label': label, isDisabled },\n    state,\n    inputRef,\n  );\n  // `useRadio` reports selection but not focus, and the swatch is the only\n  // thing a keyboard user can see — without this the ring never appears.\n  const { isFocused, focusProps } = useFocus(true);\n\n  return (\n    <SwatchElement\n      data-size={size}\n      mods={{\n        selected: isSelected,\n        disabled: isRadioDisabled,\n        focused: isFocused,\n        ...mods,\n      }}\n      styles={styles}\n      tokens={{ '#color-swatch': colorKey }}\n    >\n      <HiddenInput\n        {...mergeProps(inputProps, focusProps)}\n        ref={inputRef}\n        qa=\"ColorSwatchInput\"\n        mods={{ button: true, disabled: isRadioDisabled }}\n      />\n    </SwatchElement>\n  );\n}\n\n/**\n * A grid of color swatches, one of which can be selected — the palette half of\n * choosing a color, where `ColorPicker` is the freeform half.\n *\n * Swatches are keyed by their canonical hex, so the same color written two ways\n * collapses into one entry. Equivalent colors would otherwise make selection\n * ambiguous.\n */\nexport const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(\n  allProps: CubeColorSwatchGroupProps,\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    colors = [],\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    columns,\n    allowCustom,\n    size = 'medium',\n    isDisabled,\n    isInvalid,\n    isValid,\n    swatchStyles,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const { styles, field } = splitFieldLayout(props);\n  const isInsidePopover = useIsInsideColorPopover();\n  // A custom picker inside a color popover would open a popover of its own.\n  const showCustom = allowCustom && !isInsidePopover;\n\n  /** Keyed by canonical hex so the same color written two ways is one swatch. */\n  const swatches = useMemo(() => {\n    const seen = new Map<string, { key: string; label: string }>();\n\n    for (const entry of colors) {\n      const raw = typeof entry === 'string' ? entry : entry.color;\n      const parsed = parseColor(raw);\n\n      if (!parsed) continue;\n\n      const key = toHex(parsed);\n\n      if (seen.has(key)) continue;\n\n      seen.set(key, {\n        key,\n        label:\n          (typeof entry === 'string' ? undefined : entry.label) ??\n          formatColor(parsed, format),\n      });\n    }\n\n    return [...seen.values()];\n  }, [colors, format]);\n\n  const [internalValue, setInternalValue] = useState<string | null>(\n    () => defaultValue ?? null,\n  );\n  const currentValue = value !== undefined ? value : internalValue;\n\n  const selectedColor = parseColor((currentValue ?? '').toString());\n  const selectedKey = selectedColor ? toHex(selectedColor) : null;\n  const isCustom =\n    !!selectedKey && !swatches.some((s) => s.key === selectedKey);\n\n  const publish = useEvent((next: string | null) => {\n    if (value === undefined) setInternalValue(next);\n\n    onChange?.(next);\n  });\n\n  // `null` arrives from React Aria's native form reset of a group that\n  // mounted with no value.\n  const handleChange = useEvent((nextKey: string | null) => {\n    const parsed = nextKey == null ? null : parseColor(nextKey);\n\n    publish(parsed ? formatColor(parsed, format) : null);\n  });\n\n  const state = useRadioGroupState({\n    value: selectedKey ?? null,\n    isDisabled,\n    isReadOnly: props.isReadOnly,\n    // Becomes the group's `aria-invalid`, which is what says the field is\n    // invalid to a screen reader; the red outline says it only to the eye.\n    isInvalid,\n    onChange: handleChange,\n  });\n\n  // `useFocusableRef` wants the ref of a real focusable control to forward to,\n  // and a group of radios has no single one — `RadioGroup` takes the same\n  // approach for the same reason.\n  const domRef = useObjectRef(ref);\n  const { radioGroupProps, labelProps } = useRadioGroup(\n    {\n      ...props,\n      // React Aria hands `form` to every swatch's input as the id of its\n      // `<form>`, so the form instance would render as `form=\"[object Object]\"`.\n      form: undefined,\n      // Only name the group here when nothing else does: an `aria-label` set\n      // unconditionally would outrank the visible label React Aria wires up.\n      'aria-label': props.label\n        ? undefined\n        : (ariaLabel ?? t('colorSwatchGroup.colors', 'Colors')),\n      orientation: 'horizontal',\n    },\n    state,\n  );\n\n  const group = (\n    <GroupElement\n      ref={domRef}\n      qa={qa || 'ColorSwatchGroup'}\n      data-size={size}\n      data-input-type=\"colorswatchgroup\"\n      styles={styles}\n      mods={{\n        ...getValidationMods({ isInvalid, isValid }),\n        columns: !!columns,\n      }}\n      tokens={columns ? { $columns: columns } : undefined}\n    >\n      <RadiosElement {...radioGroupProps}>\n        {swatches.map((swatch) => (\n          <Swatch\n            key={swatch.key}\n            colorKey={swatch.key}\n            label={swatch.label}\n            state={state}\n            isDisabled={isDisabled}\n            size={size}\n            styles={swatchStyles}\n          />\n        ))}\n      </RadiosElement>\n      {showCustom ? (\n        <ColorPicker\n          isBare\n          aria-label={t('colorSwatchGroup.customColor', 'Custom color')}\n          qa=\"ColorSwatchGroupCustom\"\n          format={format}\n          type=\"clear\"\n          size={SWATCH_PX[size] ?? SWATCH_PX.medium}\n          value={isCustom ? (currentValue ?? null) : null}\n          isDisabled={isDisabled}\n          isReadOnly={props.isReadOnly}\n          triggerStyles={CUSTOM_TRIGGER_STYLES}\n          swatchStyles={\n            isCustom ? CUSTOM_SWATCH_SELECTED_STYLES : CUSTOM_SWATCH_STYLES\n          }\n          onChange={publish}\n        >\n          {null}\n        </ColorPicker>\n      ) : null}\n    </GroupElement>\n  );\n\n  return wrapWithField(group, {\n    ...props,\n    ...field,\n    labelProps: mergeProps(props.labelProps, labelProps),\n  });\n});\n\n(ColorSwatchGroup as any).cubeInputType = 'Picker';\n"],"mappings":"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"}

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

@@ -2,14 +2,15 @@
 import { FieldBaseProps, TextFieldKeyboardProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { CollectionItem as _CollectionItem } from "../../CollectionItem.js";
-import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from "@tenphi/tasty";
+import { FieldLayoutStyleProps } from "../../form/field-layout.js";
+import { BasePropsWithoutChildren, Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
 import { Section } from "react-stately";
 import { FocusableRef, Key as Key$1 } from "@react-types/shared";
 //#region src/components/fields/ComboBox/ComboBox.d.ts
 type FilterFn = (textValue: string, inputValue: string) => boolean;
 export type PopoverTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps<string | null | undefined> {
+export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, FieldLayoutStyleProps, FieldBaseProps<string | null | undefined> {
   /** The selected key in controlled mode */
   selectedKey?: string | null;
   /** The default selected key in uncontrolled mode */
@@ -37,8 +38,9 @@ export interface CubeComboBoxProps<T> extends BasePropsWithoutChildren, BaseStyl
    * key handling. Receives React Aria's keyboard event: `e.preventDefault()`
    * skips the built-in handling for the key. `Escape` and `Tab` go on to
    * ancestors, such as a surrounding dialog, unless ComboBox acts on them
-   * (`Escape` closing the list or clearing the value); other keys stop at the
-   * input unless the handler calls `e.continuePropagation()`.
+   * (`Escape` closing the list or clearing the value) or the handler prevents
+   * them; other keys stop at the input unless the handler calls
+   * `e.continuePropagation()`.
    */
   onKeyDown?: TextFieldKeyboardProps['onKeyDown'];
   /**