@cube-dev/ui-kit 0.193.1 → 0.194.0

package/dist/components/fields/Checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","extractStyles","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isRequired","necessityIndicator","label","extra","isInvalid","isValid","children","t2","message","description","labelStyles","labelProps","baseLabelProps","labelSuffix","form","otherProps","undefined","domRef","state","t3","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","t10","fieldProps","value","onChange","_CheckboxGroup","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    ContainerStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  let radioGroup = (\n    <CheckGroupElement\n      id={id}\n      styles={inputStyles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        <CheckboxGroupContext.Provider value={state}>\n          {children}\n        </CheckboxGroupContext.Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    fieldProps: groupProps,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMmB,oBAAoBd,MAAM;CAC9Be,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,YAAY;EACZC,cAAc;EACdC,MAAM;GACJ,IAAI;GACJC,YAAY;GACb;EACDC,KAAK;GACH,IAAI;GACJD,YAAY;GACd;EACF;CACD,CAAC;AAWF,SAAAM,cAAAC,UAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAF,UAAA;AAIaI,OAAAzB,uBAAuBqB,SAAS;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAE;OAAAA,MAAAF,EAAA;AAA3CF,YAAWA;CAAH,IAAAK;AAAA,KAAAH,EAAA,OAAAI,OAAAC,IAAA,4BAAA,EAAA;AAC4BF,OAAA;GAAAG,0BACR;GAAUC,kBAClBC;GAInB;AAAAR,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAND,MAAAS,QAAY5B,cAAciB,UAAUK,GAMlC;CAEF,MAAA,EAAAO,IAAAC,YAAAC,YAAAC,oBAAAC,OAAAC,OAAAC,WAAAC,SAAAC,UAAAvB,aAAAwB,IAAAC,SAAAC,aAAAC,aAAAC,YAAAC,gBAAAC,aAAA7B,aAAA8B,MAAA,GAAAC,eAmBIlB;CATF,MAAAd,cAAAwB,OAAAS,SAAA,aAAAT;CAUF,MAAAU,SAAahE,aAAakC,IAAI;AAEjBpB,eAAcgD,YAAY5D,iBAAiB;CAExD,MAAA+D,QAAYxD,sBAAsBmC,MAAM;CAAC,IAAAsB;AAAA,KAAA/B,EAAA,OAAAS,OAAA;AAIvCsB,OAAA;GAAA,GAAKtB;GAAKiB,MAAQE;GAAW;AAAA5B,IAAA,KAAAS;AAAAT,IAAA,KAAA+B;OAAAA,MAAA/B,EAAA;CAD/B,MAAA,EAAAgC,YAAAT,eAAiClD,iBAC/B0D,IACAD,MACD;CAOiB,MAAAG,KAAAtC,gBAAgB;CAAY,IAAAuC;AAAA,KAAAlC,EAAA,OAAAiC,IAAA;AADpCC,OAAA,EAAA3C,YACQ0C,IACb;AAAAjC,IAAA,KAAAiC;AAAAjC,IAAA,KAAAkC;OAAAA,MAAAlC,EAAA;CAAA,IAAAmC;AAAA,KAAAnC,EAAA,OAAAW,cAAAX,EAAA,OAAAgB,aAAAhB,EAAA,OAAAiB,SAAA;AAGQkB,OAAA;GAAAxB;GAAAK;GAAAC;GAIN;AAAAjB,IAAA,KAAAW;AAAAX,IAAA,KAAAgB;AAAAhB,IAAA,KAAAiB;AAAAjB,IAAA,MAAAmC;OAAAA,MAAAnC,EAAA;CAAA,IAAAoC;AAAA,KAAApC,EAAA,QAAAkB,YAAAlB,EAAA,QAAA8B,OAAA;AAEDM,OAAA,oBAAA,qBAAA;GAAsCN,OAAAA;GACnCZ;IAC6B;AAAAlB,IAAA,MAAAkB;AAAAlB,IAAA,MAAA8B;AAAA9B,IAAA,MAAAoC;OAAAA,MAAApC,EAAA;CAAA,IAAAqC;AAAA,KAAArC,EAAA,QAAAmC,MAAAnC,EAAA,QAAAoC,IAAA;AATlCC,OAAA,oBAAC;GACQ,OAAAF;aAMPC;IAGc;AAAApC,IAAA,MAAAmC;AAAAnC,IAAA,MAAAoC;AAAApC,IAAA,MAAAqC;OAAAA,MAAArC,EAAA;CAAA,IAAAsC;AAAA,KAAAtC,EAAA,QAAAU,MAAAV,EAAA,QAAAJ,eAAAI,EAAA,QAAAkC,MAAAlC,EAAA,QAAAqC,IAAA;AAjBlBC,OAAA,oBAAC;GACK5B;GACId,QAAAA;GACF,MAAAsC;aAING;IAWkB;AAAArC,IAAA,MAAAU;AAAAV,IAAA,MAAAJ;AAAAI,IAAA,MAAAkC;AAAAlC,IAAA,MAAAqC;AAAArC,IAAA,MAAAsC;OAAAA,MAAAtC,EAAA;CAnBtB,MAAAuC,aACED;CAmBA,IAAAE;AAAA,KAAAxC,EAAA,QAAAwB,kBAAAxB,EAAA,QAAA6B,UAAA7B,EAAA,QAAAgC,cAAAhC,EAAA,QAAAuB,cAAAvB,EAAA,QAAAS,SAAAT,EAAA,QAAAuC,YAAA;AAEKC,QAAA1D,cAAcyD,YAAYV,QAAQ;GAAA,GACpCpB;GAAKgC,YACIT;GAAUT,YACV/C,aAAWgD,gBAAgBD,WAAU;GAClD,CAAC;AAAAvB,IAAA,MAAAwB;AAAAxB,IAAA,MAAA6B;AAAA7B,IAAA,MAAAgC;AAAAhC,IAAA,MAAAuB;AAAAvB,IAAA,MAAAS;AAAAT,IAAA,MAAAuC;AAAAvC,IAAA,MAAAwC;OAAAA,OAAAxC,EAAA;AAAA,QAJKwC;;;;;;AAnET,SAAAhC,MAAAN,IAAA;CAOuB,MAAA,EAAAwC,OAAAC,aAAAzC;AAAmB,QAAM;EAAAwC,OACnCA,SAAS,OAATA,QAAA,EAA0B;EAAAC;EAElC;;AAoEL,MAAMC,iBAAiBzE,WAAW0B,cAAc;AAEhD,AAAC+C,eAAuBC,gBAAgB;AACxCD,eAAeE,cAAc"}
+{"version":3,"file":"CheckboxGroup.js","names":["useObjectRef","BaseProps","CONTAINER_STYLES","ContainerStyleProps","Styles","tasty","forwardRef","AriaCheckboxGroupProps","useCheckboxGroup","useCheckboxGroupState","FieldBaseProps","mergeProps","castNullableArrayValue","WithNullableValue","extractStyles","FormScopeMask","useFieldProps","wrapWithField","CheckboxGroupContext","CheckGroupElement","qa","styles","display","placeItems","placeContent","flow","horizontal","gap","CubeCheckboxGroupProps","Omit","orientation","inputStyles","CheckboxGroup","rawProps","ref","$","_c","t0","t1","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","id","isDisabled","isRequired","necessityIndicator","label","extra","isInvalid","isValid","children","t2","message","description","labelStyles","labelProps","baseLabelProps","labelSuffix","form","otherProps","undefined","domRef","state","t3","groupProps","t4","t5","t6","t7","t8","t9","radioGroup","t10","value","onChange","_CheckboxGroup","cubeInputType","displayName"],"sources":["../../../../src/components/fields/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef } from 'react';\nimport { AriaCheckboxGroupProps, useCheckboxGroup } from 'react-aria';\nimport { useCheckboxGroupState } from 'react-stately';\n\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport {\n  castNullableArrayValue,\n  WithNullableValue,\n} from '../../../utils/react/nullableValue';\nimport { extractStyles } from '../../../utils/styles';\nimport { FormScopeMask, useFieldProps, wrapWithField } from '../../form';\n\nimport { CheckboxGroupContext } from './context';\n\nconst CheckGroupElement = tasty({\n  qa: 'CheckboxGroup',\n  styles: {\n    display: 'flex',\n    placeItems: 'start',\n    placeContent: 'start',\n    flow: {\n      '': 'column',\n      horizontal: 'row wrap',\n    },\n    gap: {\n      '': '1x',\n      horizontal: '1x 2x',\n    },\n  },\n});\n\nexport interface CubeCheckboxGroupProps\n  extends BaseProps,\n    Omit<AriaCheckboxGroupProps, 'errorMessage' | 'form' | 'name'>,\n    FieldBaseProps<readonly string[] | null | undefined>,\n    ContainerStyleProps {\n  orientation?: 'vertical' | 'horizontal';\n  inputStyles?: Styles;\n}\n\nfunction CheckboxGroup(\n  rawProps: WithNullableValue<CubeCheckboxGroupProps>,\n  ref,\n) {\n  rawProps = castNullableArrayValue(rawProps);\n  let props = useFieldProps(rawProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value != null ? value : [],\n      onChange: onChange,\n    }),\n  });\n\n  let {\n    id,\n    isDisabled,\n    isRequired,\n    necessityIndicator,\n    label,\n    extra,\n    isInvalid,\n    isValid,\n    children,\n    orientation = 'vertical',\n    message,\n    description,\n    labelStyles,\n    labelProps: baseLabelProps,\n    labelSuffix,\n    inputStyles,\n    form,\n    ...otherProps\n  } = props;\n  let domRef = useObjectRef(ref);\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  let state = useCheckboxGroupState(props);\n  // React Aria hands `form` to every item's input as the id of its `<form>`,\n  // so the form instance would render as `form=\"[object Object]\"` on each.\n  let { groupProps, labelProps } = useCheckboxGroup(\n    { ...props, form: undefined },\n    state,\n  );\n\n  // The group semantics go on the group itself, as in `RadioGroup`, not on the\n  // field wrapper: that is only rendered with a label, and an `aria-label`-only\n  // group would lose its role, name and description with it.\n  let radioGroup = (\n    <CheckGroupElement\n      {...groupProps}\n      id={id}\n      styles={inputStyles}\n      mods={{\n        horizontal: orientation === 'horizontal',\n      }}\n    >\n      <FormScopeMask\n        value={{\n          isDisabled,\n          isInvalid,\n          isValid,\n        }}\n      >\n        <CheckboxGroupContext.Provider value={state}>\n          {children}\n        </CheckboxGroupContext.Provider>\n      </FormScopeMask>\n    </CheckGroupElement>\n  );\n\n  return wrapWithField(radioGroup, domRef, {\n    ...props,\n    labelProps: mergeProps(baseLabelProps, labelProps),\n  });\n}\n\n/**\n * Checkbox groups allow users to select a single option from a list of mutually exclusive options.\n * All possible options are exposed up front for users to compare.\n */\nconst _CheckboxGroup = forwardRef(CheckboxGroup);\n\n(_CheckboxGroup as any).cubeInputType = 'CheckboxGroup';\n_CheckboxGroup.displayName = 'CheckboxGroup';\n\nexport { _CheckboxGroup as CheckboxGroup };\n"],"mappings":"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"}

package/dist/components/fields/Checkbox/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { createContext } from "react";
 
 //#region src/components/fields/Checkbox/context.ts

package/dist/components/fields/ColorInput/ColorInput.js

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { ItemActionProvider } from "../../actions/ItemActionContext.js";
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
 import { DialogTrigger } from "../../overlays/Dialog/DialogTrigger.js";
@@ -39,7 +40,8 @@ const ColorInputTrigger = tasty(ItemAction, {
 * popover to dial it in across OKHST, OKLCH and RGB.
 */
 const ColorInput = forwardRef(function ColorInput(allProps, ref) {
-	const $ = c(103);
+	const $ = c(104);
+	const { t } = useI18n();
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = {
@@ -309,7 +311,7 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 		$[68] = t27;
 	} else t27 = $[68];
 	let t28;
-	if ($[69] !== color || $[70] !== controlledOpen || $[71] !== handleColorChange || $[72] !== handleOpenChange || $[73] !== isDisabled || $[74] !== isInsidePopover || $[75] !== isOpen || $[76] !== isReadOnly || $[77] !== outputFormat || $[78] !== placement || $[79] !== shouldFlip || $[80] !== size || $[81] !== space || $[82] !== targetRefProp || $[83] !== text || $[84] !== triggerStyles) {
+	if ($[69] !== color || $[70] !== controlledOpen || $[71] !== handleColorChange || $[72] !== handleOpenChange || $[73] !== isDisabled || $[74] !== isInsidePopover || $[75] !== isOpen || $[76] !== isReadOnly || $[77] !== outputFormat || $[78] !== placement || $[79] !== shouldFlip || $[80] !== size || $[81] !== space || $[82] !== t || $[83] !== targetRefProp || $[84] !== text || $[85] !== triggerStyles) {
 		t28 = isInsidePopover ? null : /* @__PURE__ */ jsxs(DialogTrigger, {
 			hideArrow: true,
 			type: "popover",
@@ -322,12 +324,12 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 				isDisabled,
 				children: /* @__PURE__ */ jsx(ColorInputTrigger, {
 					size,
-					"aria-label": "Open the color picker",
+					"aria-label": t("colorInput.openColorPicker", "Open the color picker"),
 					isDisabled: isReadOnly && !isDisabled ? true : void 0,
 					styles: triggerStyles
 				})
 			}), /* @__PURE__ */ jsx(Dialog, {
-				"aria-label": "Color picker",
+				"aria-label": t("colorPicker.colorPicker", "Color picker"),
 				width: "max-content",
 				styles: POPOVER_STYLES,
 				children: /* @__PURE__ */ jsx(ColorPanel, {
@@ -353,13 +355,14 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 		$[79] = shouldFlip;
 		$[80] = size;
 		$[81] = space;
-		$[82] = targetRefProp;
-		$[83] = text;
-		$[84] = triggerStyles;
-		$[85] = t28;
-	} else t28 = $[85];
+		$[82] = t;
+		$[83] = targetRefProp;
+		$[84] = text;
+		$[85] = triggerStyles;
+		$[86] = t28;
+	} else t28 = $[86];
 	let t29;
-	if ($[86] !== inputStyles || $[87] !== isDisabled || $[88] !== isInvalid || $[89] !== isLoading || $[90] !== isReadOnly || $[91] !== isValid || $[92] !== props || $[93] !== ref || $[94] !== size || $[95] !== t23 || $[96] !== t24 || $[97] !== t25 || $[98] !== t26 || $[99] !== t27 || $[100] !== t28 || $[101] !== text) {
+	if ($[87] !== inputStyles || $[88] !== isDisabled || $[89] !== isInvalid || $[90] !== isLoading || $[91] !== isReadOnly || $[92] !== isValid || $[93] !== props || $[94] !== ref || $[95] !== size || $[96] !== t23 || $[97] !== t24 || $[98] !== t25 || $[99] !== t26 || $[100] !== t27 || $[101] !== t28 || $[102] !== text) {
 		t29 = /* @__PURE__ */ jsx(TextInputBase, {
 			...props,
 			ref,
@@ -382,24 +385,24 @@ const ColorInput = forwardRef(function ColorInput(allProps, ref) {
 			suffixPosition: "after",
 			suffix: t28
 		});
-		$[86] = inputStyles;
-		$[87] = isDisabled;
-		$[88] = isInvalid;
-		$[89] = isLoading;
-		$[90] = isReadOnly;
-		$[91] = isValid;
-		$[92] = props;
-		$[93] = ref;
-		$[94] = size;
-		$[95] = t23;
-		$[96] = t24;
-		$[97] = t25;
-		$[98] = t26;
-		$[99] = t27;
-		$[100] = t28;
-		$[101] = text;
-		$[102] = t29;
-	} else t29 = $[102];
+		$[87] = inputStyles;
+		$[88] = isDisabled;
+		$[89] = isInvalid;
+		$[90] = isLoading;
+		$[91] = isReadOnly;
+		$[92] = isValid;
+		$[93] = props;
+		$[94] = ref;
+		$[95] = size;
+		$[96] = t23;
+		$[97] = t24;
+		$[98] = t25;
+		$[99] = t26;
+		$[100] = t27;
+		$[101] = t28;
+		$[102] = text;
+		$[103] = t29;
+	} else t29 = $[103];
 	return t29;
 });
 ColorInput.cubeInputType = "Text";

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

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.js","names":["BaseProps","BaseStyleProps","BlockStyleProps","ColorStyleProps","OuterStyleProps","Styles","tasty","FocusEvent","ForwardedRef","forwardRef","KeyboardEvent","MouseEvent","RefObject","useEffect","useRef","useState","Placement","useTextField","useEvent","PipetteIcon","FieldBaseProps","mergeProps","ItemAction","ItemActionProvider","useFieldProps","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","detectFormat","formatColor","parseColor","ColorPanel","useIsInsideColorPopover","ColorSwatch","TextInputBase","ColorInputFormatMode","POPOVER_STYLES","overflow","FALLBACK_COLOR","h","s","l","ColorInputTrigger","qa","icon","CubeColorInputProps","value","defaultValue","onChange","format","formatMode","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","placeholder","size","onFocus","event","HTMLInputElement","onBlur","styles","inputStyles","triggerStyles","swatchStyles","ColorInput","allProps","ref","$","_c","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","t1","t2","t3","controlledOpen","targetRefProp","t4","t5","isDisabled","isReadOnly","isInvalid","isValid","isLoading","autoFocus","labelProps","userLabelProps","userOnBlur","label","description","ariaLabel","ariaLabelledby","ariaDescribedby","id","undefined","isInsidePopover","t6","t7","toString","initialText","t8","parsed","text","setText","t9","color","setColor","space","setSpace","setOpen","inputRef","t10","validText","emitted","t11","next","current","emit","t12","source","outputFormat","t13","t14","raw","parsed_0","nextText","t15","nextText_0","trim","parsed_1","handleTextChange","t16","parsed_2","settle","t17","currentTarget","select","handleFocus","handleMouseDown","_temp2","t18","event_1","handleBlur","t19","event_2","key","handleKeyDown","t20","nextColor","nextText_1","handleColorChange","t21","next_0","handleOpenChange","t22","type","onKeyDown","inputProps","t23","t24","t25","t26","spellCheck","onMouseDown","t27","t28","t29","cubeInputType","event_0","document","activeElement","preventDefault","focus"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement, useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { PipetteIcon } from '../../../icons/PipetteIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } 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  detectFormat,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorInputFormatMode = 'forced' | 'derive' | 'free';\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/** 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 ColorInputTrigger = tasty(ItemAction, {\n  qa: 'ColorInputTrigger',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\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 normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorInputFormatMode;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the input. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\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 right'\n   */\n  placement?: Placement;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorInput = forwardRef(function ColorInput(\n  allProps: CubeColorInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef: targetRefProp,\n    placement = 'bottom right',\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  // Already inside a color popover: this is the value field for that popover,\n  // so it must not offer a popover of its own.\n  const isInsidePopover = useIsInsideColorPopover();\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      value={text}\n      defaultValue={props.defaultValue ?? undefined}\n      qa={qa || 'ColorInput'}\n      size={size}\n      autoComplete=\"off\"\n      // A flat 20px at every field size, which is what this has always rendered.\n      // Neither of the other two options is right here: tracking `$size` puts a\n      // large field's swatch against the border, because a text input hangs its\n      // prefix off the edge with no padding of its own, and passing the field's\n      // own size through grows the swatch with the field — visibly, and for no\n      // reason a caller asked for. The swatch is a fixed badge, not a control.\n      icon={<ColorSwatch size=\"small\" color={color} styles={swatchStyles} />}\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        isInsidePopover ? null : (\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={placement}\n            targetRef={targetRefProp ?? targetRef}\n            isOpen={controlledOpen ?? isOpen}\n            shouldFlip={shouldFlip}\n            onOpenChange={handleOpenChange}\n          >\n            {/*\n              The trigger is disabled by either flag, but the two arrive through\n              different channels on purpose. A disabled FIELD travels through the\n              provider so `current` treats the state as inherited: the field has\n              already faded the colour the trigger paints from, and fading again\n              multiplies the two (measured `.12` — all but invisible). Read-only\n              alone leaves the field's text opaque, so there the trigger really is\n              disabled on its own and should fade itself.\n            */}\n            <ItemActionProvider isDisabled={isDisabled}>\n              <ColorInputTrigger\n                size={size}\n                aria-label=\"Open the color picker\"\n                isDisabled={isReadOnly && !isDisabled ? true : undefined}\n                styles={triggerStyles}\n              />\n            </ItemActionProvider>\n            <Dialog\n              aria-label=\"Color picker\"\n              width=\"max-content\"\n              styles={POPOVER_STYLES}\n            >\n              <ColorPanel\n                color={color ?? FALLBACK_COLOR}\n                space={space}\n                isDisabled={isDisabled || isReadOnly}\n                previewFormat={outputFormat(text)}\n                onChange={handleColorChange}\n                onSpaceChange={setSpace}\n              />\n            </Dialog>\n          </DialogTrigger>\n        )\n      }\n    />\n  );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.js","names":["BaseProps","BaseStyleProps","BlockStyleProps","ColorStyleProps","OuterStyleProps","Styles","tasty","FocusEvent","ForwardedRef","forwardRef","KeyboardEvent","MouseEvent","RefObject","useEffect","useRef","useState","Placement","useTextField","useEvent","useI18n","PipetteIcon","FieldBaseProps","mergeProps","ItemAction","ItemActionProvider","useFieldProps","Dialog","DialogTrigger","ColorSpace","ColorFormat","ColorValue","detectFormat","formatColor","parseColor","ColorPanel","useIsInsideColorPopover","ColorSwatch","TextInputBase","ColorInputFormatMode","POPOVER_STYLES","overflow","FALLBACK_COLOR","h","s","l","ColorInputTrigger","qa","icon","CubeColorInputProps","value","defaultValue","onChange","format","formatMode","defaultSpace","isOpen","defaultOpen","onOpenChange","shouldFlip","targetRef","HTMLElement","placement","placeholder","size","onFocus","event","HTMLInputElement","onBlur","styles","inputStyles","triggerStyles","swatchStyles","ColorInput","allProps","ref","$","_c","t","t0","Symbol","for","defaultValidationTrigger","valuePropsMapper","_temp","props","value_0","onChange_0","t1","t2","t3","controlledOpen","targetRefProp","t4","t5","isDisabled","isReadOnly","isInvalid","isValid","isLoading","autoFocus","labelProps","userLabelProps","userOnBlur","label","description","ariaLabel","ariaLabelledby","ariaDescribedby","id","undefined","isInsidePopover","t6","t7","toString","initialText","t8","parsed","text","setText","t9","color","setColor","space","setSpace","setOpen","inputRef","t10","validText","emitted","t11","next","current","emit","t12","source","outputFormat","t13","t14","raw","parsed_0","nextText","t15","nextText_0","trim","parsed_1","handleTextChange","t16","parsed_2","settle","t17","currentTarget","select","handleFocus","handleMouseDown","_temp2","t18","event_1","handleBlur","t19","event_2","key","handleKeyDown","t20","nextColor","nextText_1","handleColorChange","t21","next_0","handleOpenChange","t22","type","onKeyDown","inputProps","t23","t24","t25","t26","spellCheck","onMouseDown","t27","t28","t29","cubeInputType","event_0","document","activeElement","preventDefault","focus"],"sources":["../../../../src/components/fields/ColorInput/ColorInput.tsx"],"sourcesContent":["import {\n  BaseProps,\n  BaseStyleProps,\n  BlockStyleProps,\n  ColorStyleProps,\n  OuterStyleProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Placement, useTextField } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport { useI18n } from '../../../i18n';\nimport { PipetteIcon } from '../../../icons/PipetteIcon';\nimport { FieldBaseProps } from '../../../shared';\nimport { mergeProps } from '../../../utils/react';\nimport { ItemAction, ItemActionProvider } from '../../actions';\nimport { useFieldProps } 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  detectFormat,\n  formatColor,\n  parseColor,\n} from '../color/color';\nimport { ColorPanel } from '../color/ColorPanel';\nimport { useIsInsideColorPopover } from '../color/context';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { TextInputBase } from '../TextInput/TextInputBase';\n\n/**\n * How the text in the input relates to the committed value.\n *\n * - `forced` — the text is rewritten in `format` whenever it is not mid-edit,\n *   and the value is always written in `format`.\n * - `derive` — the user's own notation is left alone, and the value is\n *   normalized in whichever notation the text is written in.\n * - `free` — the text *is* the value, verbatim. It is still verified, so an\n *   unparsable entry falls back to the last valid one.\n */\nexport type ColorInputFormatMode = 'forced' | 'derive' | 'free';\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/** 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 ColorInputTrigger = tasty(ItemAction, {\n  qa: 'ColorInputTrigger',\n  icon: <PipetteIcon />,\n});\n\nexport interface CubeColorInputProps\n  extends BaseProps,\n    BaseStyleProps,\n    OuterStyleProps,\n    BlockStyleProps,\n    ColorStyleProps,\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 normalized color string, or `null` when the field is cleared. */\n  onChange?: (value: string | null) => void;\n  /** Notation the value is written in, and the one `forced` mode displays. */\n  format?: ColorFormat;\n  /** How strictly the input text is tied to `format`. */\n  formatMode?: ColorInputFormatMode;\n  /** Color concept the popover opens with. */\n  defaultSpace?: ColorSpace;\n  /** Whether the popover is open. Makes the disclosure controlled. */\n  isOpen?: boolean;\n  /** Whether the popover is open initially. */\n  defaultOpen?: boolean;\n  /** Called when the popover opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Whether the popover may flip to the other side of the input. */\n  shouldFlip?: boolean;\n  /**\n   * The ref of the element the popover should visually attach itself to.\n   * Defaults to the field wrapper.\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 right'\n   */\n  placement?: Placement;\n  /** Text shown while the field is empty. */\n  placeholder?: string;\n  /** The size of the input. */\n  size?: 'small' | 'medium' | 'large' | (string & {});\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  'aria-describedby'?: string;\n  styles?: Styles;\n  /** Styles of the text input element. */\n  inputStyles?: Styles;\n  /** Styles of the popover trigger button. */\n  triggerStyles?: Styles;\n  /** Styles of the color swatch shown inside the input. */\n  swatchStyles?: Styles;\n}\n\n/**\n * A color field: the color as text, a swatch of the current value, and a\n * popover to dial it in across OKHST, OKLCH and RGB.\n */\nexport const ColorInput = forwardRef(function ColorInput(\n  allProps: CubeColorInputProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const { t } = useI18n();\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onBlur',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    formatMode = 'forced',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    targetRef: targetRefProp,\n    placement = 'bottom right',\n    placeholder = 'Pick a color',\n    size,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    isLoading,\n    autoFocus,\n    inputStyles,\n    triggerStyles,\n    swatchStyles,\n    labelProps: userLabelProps,\n    onBlur: userOnBlur,\n    onFocus,\n    label,\n    description,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    id,\n  } = props;\n\n  // Already inside a color popover: this is the value field for that popover,\n  // so it must not offer a popover of its own.\n  const isInsidePopover = useIsInsideColorPopover();\n\n  const initialText = (value ?? defaultValue ?? '').toString();\n  const [text, setText] = useState(() => {\n    const parsed = parseColor(initialText);\n\n    return parsed && formatMode === 'forced'\n      ? formatColor(parsed, format)\n      : initialText;\n  });\n  const [color, setColor] = useState(() => parseColor(initialText));\n  const [space, setSpace] = useState<ColorSpace>(defaultSpace);\n  const [isOpen, setOpen] = useState(defaultOpen ?? false);\n\n  const targetRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  /** The last text that parsed, so an invalid entry has something to fall back to. */\n  const validText = useRef(parseColor(initialText) ? text : '');\n  /** What was last handed to `onChange`, to tell our own updates from outside ones. */\n  const emitted = useRef<string | null | undefined>(value);\n\n  const emit = useEvent((next: string | null) => {\n    emitted.current = next;\n    onChange?.(next);\n  });\n\n  /** The notation a value should be written in, given the current text. */\n  const outputFormat = (source: string): ColorFormat =>\n    formatMode === 'forced' ? format : detectFormat(source) ?? format;\n\n  // Adopt values that did not come from here — a form reset, or a parent that\n  // overrides what the user picked.\n  useEffect(() => {\n    if (value === undefined || value === emitted.current) return;\n\n    emitted.current = value;\n\n    const raw = (value ?? '').toString();\n    const parsed = parseColor(raw);\n    const nextText =\n      parsed && formatMode === 'forced' ? formatColor(parsed, format) : raw;\n\n    setColor(parsed);\n    setText(nextText);\n    validText.current = parsed ? nextText : '';\n  }, [value, format, formatMode]);\n\n  const handleTextChange = useEvent((nextText: string) => {\n    setText(nextText);\n\n    if (!nextText.trim()) {\n      setColor(null);\n      validText.current = '';\n      emit(null);\n\n      return;\n    }\n\n    const parsed = parseColor(nextText);\n\n    // Half-typed input keeps the last valid color, so the value stays a real\n    // color at every keystroke.\n    if (!parsed) return;\n\n    setColor(parsed);\n    validText.current = nextText;\n    emit(\n      formatMode === 'free'\n        ? nextText.trim()\n        : formatColor(parsed, outputFormat(nextText)),\n    );\n  });\n\n  /** Resolve whatever is in the input into a real color, or undo it. */\n  const settle = useEvent(() => {\n    if (!text.trim()) return;\n\n    const parsed = parseColor(text);\n\n    if (!parsed) {\n      setText(validText.current);\n\n      return;\n    }\n\n    if (formatMode === 'forced') setText(formatColor(parsed, format));\n  });\n\n  /**\n   * Focusing offers the whole value up for replacement, the way a hex field\n   * does. The string is the unit of editing here: a single channel is tuned\n   * with the sliders, not by hand-editing one number inside `oklch(…)`.\n   *\n   * Read off the event rather than `inputRef`, which `TextInputBase` re-points\n   * through `useCombinedRefs`.\n   */\n  const handleFocus = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    event.currentTarget.select();\n    onFocus?.(event);\n  });\n\n  /**\n   * A click would otherwise drop a caret and undo that selection — the browser\n   * applies it after the focus handler has run. Suppressing the default action\n   * of the focusing press means no caret is ever placed; focus is then moved\n   * here instead, which selects.\n   *\n   * Only the press that *takes* focus is suppressed, so clicking a field that\n   * already has focus still positions the caret, and dragging still selects a\n   * range.\n   */\n  const handleMouseDown = useEvent((event: MouseEvent<HTMLInputElement>) => {\n    if (document.activeElement === event.currentTarget) return;\n\n    event.preventDefault();\n    event.currentTarget.focus();\n  });\n\n  const handleBlur = useEvent((event: FocusEvent<HTMLInputElement>) => {\n    settle();\n    userOnBlur?.(event);\n  });\n\n  const handleKeyDown = useEvent((event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') settle();\n  });\n\n  const handleColorChange = useEvent((nextColor: ColorValue) => {\n    const nextText = formatColor(nextColor, outputFormat(text));\n\n    setColor(nextColor);\n    setText(nextText);\n    validText.current = nextText;\n    emit(nextText);\n  });\n\n  const handleOpenChange = useEvent((next: boolean) => {\n    setOpen(next);\n    onOpenChange?.(next);\n  });\n\n  const { labelProps, inputProps } = useTextField(\n    {\n      id,\n      label,\n      description,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      isDisabled,\n      isReadOnly,\n      isInvalid,\n      autoFocus,\n      placeholder,\n      value: text,\n      type: 'text',\n      onChange: handleTextChange,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    inputRef,\n  );\n\n  return (\n    <TextInputBase\n      {...props}\n      ref={ref}\n      value={text}\n      defaultValue={props.defaultValue ?? undefined}\n      qa={qa || 'ColorInput'}\n      size={size}\n      autoComplete=\"off\"\n      // A flat 20px at every field size, which is what this has always rendered.\n      // Neither of the other two options is right here: tracking `$size` puts a\n      // large field's swatch against the border, because a text input hangs its\n      // prefix off the edge with no padding of its own, and passing the field's\n      // own size through grows the swatch with the field — visibly, and for no\n      // reason a caller asked for. The swatch is a fixed badge, not a control.\n      icon={<ColorSwatch size=\"small\" color={color} styles={swatchStyles} />}\n      inputRef={inputRef}\n      inputProps={{\n        ...inputProps,\n        spellCheck: false,\n        onMouseDown: handleMouseDown,\n      }}\n      inputStyles={inputStyles}\n      labelProps={mergeProps(labelProps, userLabelProps)}\n      wrapperRef={targetRef}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isInvalid={isInvalid}\n      isValid={isValid}\n      isLoading={isLoading}\n      // The validation state reads left of the trigger, the way `DateInputBase`\n      // orders it for the date pickers.\n      suffixPosition=\"after\"\n      suffix={\n        isInsidePopover ? null : (\n          <DialogTrigger\n            hideArrow\n            type=\"popover\"\n            placement={placement}\n            targetRef={targetRefProp ?? targetRef}\n            isOpen={controlledOpen ?? isOpen}\n            shouldFlip={shouldFlip}\n            onOpenChange={handleOpenChange}\n          >\n            {/*\n              The trigger is disabled by either flag, but the two arrive through\n              different channels on purpose. A disabled FIELD travels through the\n              provider so `current` treats the state as inherited: the field has\n              already faded the colour the trigger paints from, and fading again\n              multiplies the two (measured `.12` — all but invisible). Read-only\n              alone leaves the field's text opaque, so there the trigger really is\n              disabled on its own and should fade itself.\n            */}\n            <ItemActionProvider isDisabled={isDisabled}>\n              <ColorInputTrigger\n                size={size}\n                aria-label={t(\n                  'colorInput.openColorPicker',\n                  'Open the color picker',\n                )}\n                isDisabled={isReadOnly && !isDisabled ? true : undefined}\n                styles={triggerStyles}\n              />\n            </ItemActionProvider>\n            <Dialog\n              aria-label={t('colorPicker.colorPicker', 'Color picker')}\n              width=\"max-content\"\n              styles={POPOVER_STYLES}\n            >\n              <ColorPanel\n                color={color ?? FALLBACK_COLOR}\n                space={space}\n                isDisabled={isDisabled || isReadOnly}\n                previewFormat={outputFormat(text)}\n                onChange={handleColorChange}\n                onSpaceChange={setSpace}\n              />\n            </Dialog>\n          </DialogTrigger>\n        )\n      }\n    />\n  );\n});\n\n(ColorInput as any).cubeInputType = 'Text';\n"],"mappings":"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"}

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

@@ -68,6 +68,8 @@ interface CubeColorPickerProps extends BaseProps, OuterStyleProps, BlockStylePro
   /** Styles of the color swatch. */
   swatchStyles?: Styles;
   'aria-label'?: string;
+  /** Ids of elements that also describe the trigger, beside the field's own description and message. */
+  'aria-describedby'?: string;
 }
 /**
  * A color swatch that opens the color popover — the same one `ColorInput`

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

@@ -1,7 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { _Text } from "../../content/Text.js";
+import { useI18n } from "../../../i18n/useI18n.js";
 import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
 import { Dialog } from "../../overlays/Dialog/Dialog.js";
 import { getValidationTheme } from "../../form/validation/resolve-validation-props.js";
@@ -57,6 +58,7 @@ const ColorPickerWrapper = tasty({
 * typed: a toolbar, a chart legend, a cell in a dense table.
 */
 const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
+	const { t } = useI18n();
 	const props = useFieldProps(allProps, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -64,7 +66,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 			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 } = props;
+	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
@@ -138,11 +140,12 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 				isDisabled: isEditingDisabled || isReadOnly,
 				autoFocus,
 				"aria-label": ariaLabel,
+				"aria-describedby": ariaDescribedBy,
 				mods: { placeholder: !color },
 				styles: triggerStyles,
 				children: label
 			}), /* @__PURE__ */ jsx(Dialog, {
-				"aria-label": "Color picker",
+				"aria-label": t("colorPicker.colorPicker", "Color picker"),
 				width: "max-content",
 				styles: POPOVER_STYLES,
 				children: /* @__PURE__ */ jsx(ColorPopoverContext.Provider, {
@@ -153,7 +156,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 						isDisabled: isEditingDisabled || isReadOnly,
 						previewFormat: format,
 						input: /* @__PURE__ */ jsx(ColorInput, {
-							"aria-label": "Color value",
+							"aria-label": t("colorPicker.colorValue", "Color value"),
 							format,
 							value: colorText,
 							isDisabled: isEditingDisabled,
@@ -161,7 +164,7 @@ const ColorPicker = forwardRef(function ColorPicker(allProps, ref) {
 							onChange: handleValueChange
 						}),
 						swatches: swatches?.length ? /* @__PURE__ */ jsx(ColorSwatchGroup, {
-							"aria-label": "Palette",
+							"aria-label": t("colorPicker.palette", "Palette"),
 							styles: PALETTE_STYLES,
 							colors: swatches,
 							columns: swatchColumns,

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","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","props","defaultValidationTrigger","valuePropsMapper","id","controlledOpen","isDisabled","isReadOnly","isLoading","isInvalid","isValid","autoFocus","ariaLabel","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 { 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}\n\n/**\n * A color swatch that opens the color popover — the same one `ColorInput`\n * uses, without the text field. Reach for it when a color is chosen but never\n * typed: a toolbar, a chart legend, a cell in a dense table.\n */\nexport const ColorPicker = forwardRef(function ColorPicker(\n  allProps: CubeColorPickerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const props = useFieldProps(allProps, {\n    defaultValidationTrigger: 'onChange',\n    valuePropsMapper: ({ value, onChange }) => ({\n      value: value as string | null | undefined,\n      onChange,\n    }),\n  });\n\n  const {\n    qa,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    format = 'hex',\n    defaultSpace = 'hst',\n    isOpen: controlledOpen,\n    defaultOpen,\n    onOpenChange,\n    shouldFlip,\n    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  } = 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          mods={{ placeholder: !color }}\n          styles={triggerStyles}\n        >\n          {label}\n        </ItemButton>\n        <Dialog\n          aria-label=\"Color picker\"\n          width=\"max-content\"\n          styles={POPOVER_STYLES}\n        >\n          {/* Marks the subtree so a nested swatch group drops its custom-color\n              escape hatch, which is a picker and would recurse forever. */}\n          <ColorPopoverContext.Provider value={true}>\n            <ColorPanel\n              color={color ?? FALLBACK_COLOR}\n              space={space}\n              isDisabled={isEditingDisabled || isReadOnly}\n              previewFormat={format}\n              input={\n                <ColorInput\n                  aria-label=\"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                    aria-label=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAMsC,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,qBAAqB1C,MAAM;CAC/B2C,IAAI;CACJC,QAAQ;EACNC,SAAS;EACTC,MAAM;EACNC,UAAU;EACVC,cAAc;EACdC,YAAY;EACd;CACD,CAAC;;;;;;AAoEF,MAAawB,cAAcvE,WAAW,SAASuE,YAC7CC,UACAC,KACA;CACA,MAAMC,QAAQ3D,cAAcyD,UAAU;EACpCG,0BAA0B;EAC1BC,mBAAmB,EAAE3B,OAAOE,gBAAgB;GACnCF;GACPE;GACD;EACF,CAAC;CAEF,MAAM,EACJV,IACAoC,IACA5B,OAAAA,SACAC,cACAC,UAAAA,YACAC,SAAS,OACTC,eAAe,OACfC,QAAQwB,gBACRvB,aACAC,cACAC,YACAC,WACAE,YAAY,gBACZC,UACAC,cAAc,gBACdC,MACAC,OAAO,WACPC,QAAQ,WACRC,gBACAC,UACAC,eACAC,eACAC,cACAS,YACAC,YACAC,WACAC,WACAC,SACAC,WACA,cAAcC,cACZX;CAEJ,MAAMhC,SAASjC,cAAciE,OAAO,CAAC,GAAG/E,cAAc,GAAGF,aAAa,CAAC;;;;;;CAOvE,MAAM6F,oBAAoBP,cAAcE;CAExC,MAAM,CAACM,OAAOC,YAAYnF,eACxBkB,YAAY0B,WAASC,gBAAgB,IAAIuC,UAAU,CACrD,CAAC;CACD,MAAM,CAACC,OAAOC,YAAYtF,SAAqBgD,aAAa;CAC5D,MAAM,CAACC,QAAQsC,WAAWvF,SAASkD,eAAe,MAAM;;CAGxD,MAAMsC,UAAUzF,OAAkC6C,QAAM;AAIxD9C,iBAAgB;AACd,MAAI8C,YAAU6C,UAAa7C,YAAU4C,QAAQE,QAAS;AAEtDF,UAAQE,UAAU9C;AAClBuC,WAASjE,YAAY0B,WAAS,IAAIwC,UAAU,CAAC,CAAC;IAC7C,CAACxC,QAAM,CAAC;CAEX,MAAM+C,oBAAoBzF,UAAU0F,SAAqB;EACvD,MAAMC,OAAO5E,YAAY2E,MAAM7C,OAAO;AAEtCyC,UAAQE,UAAUG;AAClBV,WAASS,KAAK;AACd9C,eAAW+C,KAAK;GAChB;CAEF,MAAMC,YAAYZ,QAAQjE,YAAYiE,OAAOnC,OAAO,GAAG;;;;;;CAOvD,MAAMgD,oBAAoB7F,UAAU0F,WAAwB;AAC1DJ,UAAQE,UAAUE;AAClBT,WAASS,SAAO1E,WAAW0E,OAAK,GAAG,KAAK;AACxC9C,eAAW8C,OAAK;GAChB;CAEF,MAAMI,mBAAmB9F,UAAU0F,WAAkB;AACnDL,UAAQK,OAAK;AACbzC,iBAAeyC,OAAK;GACpB;CAIF,MAAMK,QACJzC,aAAaiC,SACXjC,WACE0B,QACFjE,YAAYiE,OAAOnC,OAAO,GAI1B,oBAAC,MAAK,yBAAaU,cACpB;AAkFH,QAAO9C,cA/EL,oBAAC;EAA2B0B;YAC1B,qBAAC;GACC;GACA,MAAK;GACMkB;GACAF;GACX,QAAQoB,kBAAkBxB;GACdG;GACZ,cAAc4C;cAEd,oBAAC;IACC;IACIxB;IACJ,IAAIpC,MAAM;IACV,mBAAgB;IACVuB;IACN,OAAOlD,mBAAmBmD,OAAO;KAAEiB;KAAWC;KAAS,CAAC;IAClDpB;IAGN,MACE,oBAAC;KAAY,MAAK;KAAewB;KAAO,QAAQjB;MAClD;IACA,WAAWzD,kBAAkB;KAAEqE;KAAWC;KAAS,CAAC;IACpD,SAASjB;IACT,YAAYoB,qBAAqBN;IACtBI;IACX,cAAYC;IACZ,MAAM,EAAEvB,aAAa,CAACyB,OAAO;IAC7B,QAAQlB;cAEPiC;KACS,EACZ,oBAAC;IACC,cAAW;IACX,OAAM;IACN,QAAQxE;cAIR,oBAAC,oBAAoB;KAAS,OAAO;eACnC,oBAAC;MACC,OAAOyD,SAASnD;MACTsD;MACP,YAAYJ,qBAAqBN;MACjC,eAAe5B;MACf,OACE,oBAAC;OACC,cAAW;OACHA;OACR,OAAO+C;OACP,YAAYb;OACAN;OACZ,UAAUoB;QAEd;MACA,UACEjC,UAAUqC,SACR,oBAAC;OACC,cAAW;OACX,QAAQxE;OACR,QAAQmC;OACR,SAASC;OACDhB;OACR,OAAO+C;OACP,YAAYb,qBAAqBN;OACjC,UAAUoB;QACV,GACA;MAEN,UAAUJ;MACV,eAAeL;OAAS;MAEE;KACxB;IACK;GAElB,EAEiClB,KAAYC,MAAM;EACpD;;;;;;AAOF,AAACH,YAAoBkC,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","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                  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                    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":"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"}

package/dist/components/fields/ColorSwatch/ColorSwatch.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { parseColor, toHex } from "../color/color.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,8 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.193.1 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.194.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 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";
+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";
@@ -224,6 +225,7 @@ function Swatch(t0) {
 * ambiguous.
 */
 const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
+	const { t } = useI18n();
 	const props = useFieldProps(allProps, {
 		defaultValidationTrigger: "onChange",
 		valuePropsMapper: ({ value, onChange }) => ({
@@ -267,13 +269,14 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 		value: selectedKey ?? null,
 		isDisabled,
 		isReadOnly: props.isReadOnly,
+		isInvalid,
 		onChange: handleChange
 	});
 	const domRef = useObjectRef(ref);
 	const { radioGroupProps, labelProps } = useRadioGroup({
 		...props,
 		form: void 0,
-		"aria-label": props.label ? void 0 : ariaLabel ?? "Colors",
+		"aria-label": props.label ? void 0 : ariaLabel ?? t("colorSwatchGroup.colors", "Colors"),
 		orientation: "horizontal"
 	}, state);
 	return wrapWithField(/* @__PURE__ */ jsxs(GroupElement, {
@@ -301,7 +304,7 @@ const ColorSwatchGroup = forwardRef(function ColorSwatchGroup(allProps, ref) {
 				styles: swatchStyles
 			}, swatch.key))
 		}), showCustom ? /* @__PURE__ */ jsx(ColorPicker, {
-			"aria-label": "Custom color",
+			"aria-label": t("colorSwatchGroup.customColor", "Custom color"),
 			qa: "ColorSwatchGroupCustom",
 			format,
 			type: "clear",