@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/fields/color/ColorPanel.js

@@ -1,12 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
 import { __Radio } from "../RadioGroup/Radio.js";
 import { __Slider } from "../Slider/Slider.js";
+import { c } from "react-compiler-runtime";
 import { tasty } from "@tenphi/tasty";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/fields/color/ColorPanel.tsx
 const PanelElement = tasty({
@@ -75,33 +75,119 @@ const THUMB_STYLES = { shadow: "0 0 0 2bw #surface, 0 0 0 3bw #dark.2" };
 const THUMB_TOKENS = { "#slider-thumb": "(#color-picker, #surface)" };
 const SPACE_STYLES = { width: "100%" };
 const TAB_STYLES = { flexGrow: 1 };
-function ChannelRow({ channel, color, isDisabled, onChange }) {
-	const max = channel.max(color);
-	const handleChange = useEvent((value) => {
-		onChange(channel.apply(color, value));
-	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(ChannelLabelElement, {
+function ChannelRow(t0) {
+	const $ = c(37);
+	const { channel, color, isDisabled, onChange } = t0;
+	let t1;
+	if ($[0] !== channel || $[1] !== color) {
+		t1 = channel.max(color);
+		$[0] = channel;
+		$[1] = color;
+		$[2] = t1;
+	} else t1 = $[2];
+	const max = t1;
+	let t2;
+	if ($[3] !== channel || $[4] !== color || $[5] !== onChange) {
+		t2 = (value) => {
+			onChange(channel.apply(color, value));
+		};
+		$[3] = channel;
+		$[4] = color;
+		$[5] = onChange;
+		$[6] = t2;
+	} else t2 = $[6];
+	const handleChange = useEvent(t2);
+	let t3;
+	if ($[7] !== channel.label) {
+		t3 = /* @__PURE__ */ jsx(ChannelLabelElement, {
 			"aria-hidden": "true",
 			children: channel.label
-		}),
-		/* @__PURE__ */ jsx(ChannelTrackElement, {
-			style: { "--channel-gradient": `linear-gradient(to right, ${channel.stops(color)})` },
-			children: /* @__PURE__ */ jsx(__Slider, {
-				"aria-label": channel.title,
-				value: Math.min(channel.value(color), max),
-				minValue: channel.min,
-				maxValue: max,
-				step: channel.step,
-				isDisabled,
-				trackStyles: TRACK_STYLES,
-				thumbStyles: THUMB_STYLES,
-				thumbTokens: THUMB_TOKENS,
-				onChange: handleChange
-			})
-		}),
-		/* @__PURE__ */ jsx(ChannelValueElement, { children: channel.display(color) })
-	] });
+		});
+		$[7] = channel.label;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== channel || $[10] !== color) {
+		t4 = channel.stops(color);
+		$[9] = channel;
+		$[10] = color;
+		$[11] = t4;
+	} else t4 = $[11];
+	const t5 = `linear-gradient(to right, ${t4})`;
+	let t6;
+	if ($[12] !== t5) {
+		t6 = { "--channel-gradient": t5 };
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const t7 = channel.title;
+	let t8;
+	if ($[14] !== channel || $[15] !== color) {
+		t8 = channel.value(color);
+		$[14] = channel;
+		$[15] = color;
+		$[16] = t8;
+	} else t8 = $[16];
+	const t9 = Math.min(t8, max);
+	let t10;
+	if ($[17] !== channel.min || $[18] !== channel.step || $[19] !== channel.title || $[20] !== handleChange || $[21] !== isDisabled || $[22] !== max || $[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(__Slider, {
+			"aria-label": t7,
+			value: t9,
+			minValue: channel.min,
+			maxValue: max,
+			step: channel.step,
+			isDisabled,
+			trackStyles: TRACK_STYLES,
+			thumbStyles: THUMB_STYLES,
+			thumbTokens: THUMB_TOKENS,
+			onChange: handleChange
+		});
+		$[17] = channel.min;
+		$[18] = channel.step;
+		$[19] = channel.title;
+		$[20] = handleChange;
+		$[21] = isDisabled;
+		$[22] = max;
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10 || $[26] !== t6) {
+		t11 = /* @__PURE__ */ jsx(ChannelTrackElement, {
+			style: t6,
+			children: t10
+		});
+		$[25] = t10;
+		$[26] = t6;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== channel || $[29] !== color) {
+		t12 = channel.display(color);
+		$[28] = channel;
+		$[29] = color;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== t12) {
+		t13 = /* @__PURE__ */ jsx(ChannelValueElement, { children: t12 });
+		$[31] = t12;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== t11 || $[34] !== t13 || $[35] !== t3) {
+		t14 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t3,
+			t11,
+			t13
+		] });
+		$[33] = t11;
+		$[34] = t13;
+		$[35] = t3;
+		$[36] = t14;
+	} else t14 = $[36];
+	return t14;
 }
 /**
 * The popover body shared by `ColorInput` and `ColorPicker`: a preview, a
@@ -109,42 +195,134 @@ function ChannelRow({ channel, color, isDisabled, onChange }) {
 * of the active one.
 */
 function ColorPanel(props) {
+	const $ = c(39);
 	const { color, space, isDisabled, previewFormat, swatches, input, onChange, onSpaceChange } = props;
-	const colorTokens = useMemo(() => ({
-		"--color-picker-color": toHex(color),
-		"--color-picker-contrast-color": getContrastingColor(color)
-	}), [color]);
-	const handleSpaceChange = useEvent((value) => {
-		onSpaceChange(value);
-	});
-	return /* @__PURE__ */ jsxs(PanelElement, {
-		style: colorTokens,
-		children: [
-			input,
-			/* @__PURE__ */ jsx(PreviewElement, { children: formatColor(color, previewFormat) }),
-			/* @__PURE__ */ jsx(__Radio.Tabs, {
-				"aria-label": "Color space",
-				value: space,
-				isDisabled,
-				styles: SPACE_STYLES,
-				onChange: handleSpaceChange,
-				children: COLOR_SPACES.map((item) => /* @__PURE__ */ jsx(__Radio, {
-					value: item,
-					"aria-label": COLOR_SPACE_LABELS[item],
-					tooltip: COLOR_SPACE_HINTS[item],
-					styles: TAB_STYLES,
-					children: COLOR_SPACE_LABELS[item]
-				}, item))
-			}),
-			/* @__PURE__ */ jsx(ChannelsElement, { children: CHANNELS[space].map((channel) => /* @__PURE__ */ jsx(ChannelRow, {
+	let t0;
+	if ($[0] !== color) {
+		t0 = toHex(color);
+		$[0] = color;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== color) {
+		t1 = getContrastingColor(color);
+		$[2] = color;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0 || $[5] !== t1) {
+		t2 = {
+			"--color-picker-color": t0,
+			"--color-picker-contrast-color": t1
+		};
+		$[4] = t0;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const colorTokens = t2;
+	let t3;
+	if ($[7] !== onSpaceChange) {
+		t3 = (value) => {
+			onSpaceChange(value);
+		};
+		$[7] = onSpaceChange;
+		$[8] = t3;
+	} else t3 = $[8];
+	const handleSpaceChange = useEvent(t3);
+	let t4;
+	if ($[9] !== color || $[10] !== previewFormat) {
+		t4 = formatColor(color, previewFormat);
+		$[9] = color;
+		$[10] = previewFormat;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(PreviewElement, { children: t4 });
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = COLOR_SPACES.map(_temp);
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== handleSpaceChange || $[16] !== isDisabled || $[17] !== space) {
+		t7 = /* @__PURE__ */ jsx(__Radio.Tabs, {
+			"aria-label": "Color space",
+			value: space,
+			isDisabled,
+			styles: SPACE_STYLES,
+			onChange: handleSpaceChange,
+			children: t6
+		});
+		$[15] = handleSpaceChange;
+		$[16] = isDisabled;
+		$[17] = space;
+		$[18] = t7;
+	} else t7 = $[18];
+	const t8 = CHANNELS[space];
+	let t9;
+	if ($[19] !== color || $[20] !== isDisabled || $[21] !== onChange || $[22] !== space || $[23] !== t8) {
+		let t10;
+		if ($[25] !== color || $[26] !== isDisabled || $[27] !== onChange || $[28] !== space) {
+			t10 = (channel) => /* @__PURE__ */ jsx(ChannelRow, {
 				channel,
 				color,
 				isDisabled,
 				onChange
-			}, `${space}-${channel.label}`)) }),
-			swatches
-		]
-	});
+			}, `${space}-${channel.label}`);
+			$[25] = color;
+			$[26] = isDisabled;
+			$[27] = onChange;
+			$[28] = space;
+			$[29] = t10;
+		} else t10 = $[29];
+		t9 = t8.map(t10);
+		$[19] = color;
+		$[20] = isDisabled;
+		$[21] = onChange;
+		$[22] = space;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[30] !== t9) {
+		t10 = /* @__PURE__ */ jsx(ChannelsElement, { children: t9 });
+		$[30] = t9;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== colorTokens || $[33] !== input || $[34] !== swatches || $[35] !== t10 || $[36] !== t5 || $[37] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(PanelElement, {
+			style: colorTokens,
+			children: [
+				input,
+				t5,
+				t7,
+				t10,
+				swatches
+			]
+		});
+		$[32] = colorTokens;
+		$[33] = input;
+		$[34] = swatches;
+		$[35] = t10;
+		$[36] = t5;
+		$[37] = t7;
+		$[38] = t11;
+	} else t11 = $[38];
+	return t11;
+}
+function _temp(item) {
+	return /* @__PURE__ */ jsx(__Radio, {
+		value: item,
+		"aria-label": COLOR_SPACE_LABELS[item],
+		tooltip: COLOR_SPACE_HINTS[item],
+		styles: TAB_STYLES,
+		children: COLOR_SPACE_LABELS[item]
+	}, item);
 }
 
 //#endregion

package/dist/components/fields/color/ColorPanel.js.map

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

package/dist/components/fields/color/channels.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 

package/dist/components/fields/color/channels.js.map

@@ -1 +1 @@
-{"version":3,"file":"channels.js","names":["fromOklch"],"sources":["../../../../src/components/fields/color/channels.ts"],"sourcesContent":["import {\n  ColorValue,\n  fromOkhst,\n  fromOklch,\n  fromRgb,\n  isAchromatic,\n  maxChroma,\n  normalizeHue,\n  toHex,\n  toOkhst,\n  toOklch,\n  toRgb,\n} from './color';\n\n/**\n * The three color concepts the popover can be driven by. They all edit the\n * same canonical value — only the axes the user manipulates differ.\n */\nexport const COLOR_SPACES = ['hst', 'lch', 'rgb'] as const;\n\nexport type ColorSpace = (typeof COLOR_SPACES)[number];\n\nexport const COLOR_SPACE_LABELS: Record<ColorSpace, string> = {\n  hst: 'HST',\n  lch: 'LCH',\n  rgb: 'RGB',\n};\n\nexport const COLOR_SPACE_HINTS: Record<ColorSpace, string> = {\n  hst: 'OKHST — hue, saturation, tone',\n  lch: 'OKLCH — lightness, chroma, hue',\n  rgb: 'sRGB — red, green, blue',\n};\n\nexport interface ColorChannel {\n  /** Single-letter axis name shown next to the slider. */\n  label: string;\n  /** Accessible name for the slider. */\n  title: string;\n  min: number;\n  step: number;\n  /** The upper bound. Chroma is gamut-bound, so it depends on the color. */\n  max: (color: ColorValue) => number;\n  value: (color: ColorValue) => number;\n  /** The color this channel produces when moved to `value`. */\n  apply: (color: ColorValue, value: number) => ColorValue;\n  /** Comma-separated gradient stops describing the channel's whole range. */\n  stops: (color: ColorValue) => string;\n  /** Human-readable rendering of the current channel value. */\n  display: (color: ColorValue) => string;\n}\n\nconst constant = (value: number) => () => value;\n\nfunction round(value: number, precision = 2): number {\n  const factor = 10 ** precision;\n\n  return Math.round(value * factor) / factor;\n}\n\n/**\n * `count` evenly spaced gradient stops, always as hex. Perceptual channels are\n * not linear in sRGB, so a two-stop gradient would misrepresent them —\n * sampling the real conversion keeps the track honest. Hex (rather than an\n * `okhsl()` string) because the gradient reaches the DOM as a raw custom\n * property, without passing through Tasty's color functions.\n */\nfunction ramp(count: number, at: (position: number) => ColorValue): string {\n  return Array.from({ length: count }, (_, index) =>\n    toHex(at(index / (count - 1))),\n  ).join(', ');\n}\n\n/**\n * The hue strip is drawn at full saturation and a fixed OKHSL lightness, which\n * keeps it perceptually even instead of spiking at yellow the way a CSS-HSL\n * rainbow does. Its own saturation and tone stay fixed: the strip is the same\n * in HST and in LCH, where `H` means the same thing.\n */\nconst HUE_STOPS = ramp(25, (position) => ({\n  h: position * 360,\n  s: 1,\n  l: 0.6,\n}));\n\nconst hueChannel: ColorChannel = {\n  label: 'H',\n  title: 'Hue',\n  min: 0,\n  // 360° is the same angle as 0°, so the last usable stop is 359 — the range\n  // `HueSlider` exposes as well.\n  max: constant(359),\n  step: 1,\n  value: (color) => round(color.h, 1),\n  apply: (color, value) => ({ ...color, h: normalizeHue(value) }),\n  stops: () => HUE_STOPS,\n  display: (color) => `${Math.round(color.h)}°`,\n};\n\nconst saturationChannel: ColorChannel = {\n  label: 'S',\n  title: 'Saturation',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(color.s * 100, 1),\n  apply: (color, value) => ({ ...color, s: value / 100 }),\n  stops: (color) => ramp(7, (position) => ({ ...color, s: position })),\n  display: (color) => `${Math.round(color.s * 100)}%`,\n};\n\nconst toneChannel: ColorChannel = {\n  label: 'T',\n  title: 'Tone',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOkhst(color).t * 100, 1),\n  apply: (color, value) =>\n    fromOkhst({ h: color.h, s: color.s, t: value / 100 }),\n  stops: (color) =>\n    ramp(7, (position) => fromOkhst({ h: color.h, s: color.s, t: position })),\n  display: (color) => `${Math.round(toOkhst(color).t * 100)}%`,\n};\n\nconst lightnessChannel: ColorChannel = {\n  label: 'L',\n  title: 'Lightness',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOklch(color).l * 100, 1),\n  apply: (color, value) => {\n    const { c, h } = toOklch(color);\n\n    return fromOklch({ l: value / 100, c, h });\n  },\n  stops: (color) => {\n    const { c, h } = toOklch(color);\n\n    return ramp(7, (position) => fromOklch({ l: position, c, h }));\n  },\n  display: (color) => `${Math.round(toOklch(color).l * 100)}%`,\n};\n\nconst chromaChannel: ColorChannel = {\n  label: 'C',\n  title: 'Chroma',\n  min: 0,\n  // Chroma has no fixed ceiling: how far it can go depends on how far the sRGB\n  // gamut reaches at the current lightness and hue. Never zero, so the slider\n  // always has a range to divide by.\n  max: (color) => Math.max(round(maxChroma(color.h, color.l), 4), 0.001),\n  step: 0.001,\n  value: (color) => round(toOklch(color).c, 4),\n  apply: (color, value) => {\n    const { l, h } = toOklch(color);\n\n    return fromOklch({ l, c: value, h });\n  },\n  stops: (color) => {\n    const { l, h } = toOklch(color);\n    const limit = maxChroma(color.h, color.l);\n\n    return ramp(7, (position) => fromOklch({ l, c: position * limit, h }));\n  },\n  display: (color) => toOklch(color).c.toFixed(3),\n};\n\nfunction rgbChannel(\n  key: 'r' | 'g' | 'b',\n  label: string,\n  title: string,\n): ColorChannel {\n  const at = (color: ColorValue, value: number) =>\n    fromRgb({ ...toRgb(color), [key]: value });\n\n  return {\n    label,\n    title,\n    min: 0,\n    max: constant(255),\n    step: 1,\n    value: (color) => toRgb(color)[key],\n    apply: (color, value) => {\n      const next = at(color, value);\n\n      // A gray has no hue of its own, and the conversion invents one. Keeping\n      // the authored hue means switching back to HST or LCH resumes where the\n      // user left off.\n      return isAchromatic(next) ? { ...next, h: color.h } : next;\n    },\n    // An sRGB channel is linear in the space CSS interpolates gradients in, so\n    // the two ends describe the whole ramp exactly.\n    stops: (color) => ramp(2, (position) => at(color, position * 255)),\n    display: (color) => `${toRgb(color)[key]}`,\n  };\n}\n\nexport const CHANNELS: Record<ColorSpace, ColorChannel[]> = {\n  hst: [hueChannel, saturationChannel, toneChannel],\n  lch: [lightnessChannel, chromaChannel, hueChannel],\n  rgb: [\n    rgbChannel('r', 'R', 'Red'),\n    rgbChannel('g', 'G', 'Green'),\n    rgbChannel('b', 'B', 'Blue'),\n  ],\n};\n"],"mappings":"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"}
+{"version":3,"file":"channels.js","names":["ColorValue","fromOkhst","fromOklch","fromRgb","isAchromatic","maxChroma","normalizeHue","toHex","toOkhst","toOklch","toRgb","COLOR_SPACES","const","ColorSpace","COLOR_SPACE_LABELS","Record","hst","lch","rgb","COLOR_SPACE_HINTS","ColorChannel","label","title","min","step","max","color","value","apply","stops","display","constant","round","precision","factor","Math","ramp","count","at","position","Array","from","length","_","index","join","HUE_STOPS","h","s","l","hueChannel","saturationChannel","toneChannel","t","lightnessChannel","c","chromaChannel","limit","toFixed","rgbChannel","key","next","CHANNELS"],"sources":["../../../../src/components/fields/color/channels.ts"],"sourcesContent":["import {\n  ColorValue,\n  fromOkhst,\n  fromOklch,\n  fromRgb,\n  isAchromatic,\n  maxChroma,\n  normalizeHue,\n  toHex,\n  toOkhst,\n  toOklch,\n  toRgb,\n} from './color';\n\n/**\n * The three color concepts the popover can be driven by. They all edit the\n * same canonical value — only the axes the user manipulates differ.\n */\nexport const COLOR_SPACES = ['hst', 'lch', 'rgb'] as const;\n\nexport type ColorSpace = (typeof COLOR_SPACES)[number];\n\nexport const COLOR_SPACE_LABELS: Record<ColorSpace, string> = {\n  hst: 'HST',\n  lch: 'LCH',\n  rgb: 'RGB',\n};\n\nexport const COLOR_SPACE_HINTS: Record<ColorSpace, string> = {\n  hst: 'OKHST — hue, saturation, tone',\n  lch: 'OKLCH — lightness, chroma, hue',\n  rgb: 'sRGB — red, green, blue',\n};\n\nexport interface ColorChannel {\n  /** Single-letter axis name shown next to the slider. */\n  label: string;\n  /** Accessible name for the slider. */\n  title: string;\n  min: number;\n  step: number;\n  /** The upper bound. Chroma is gamut-bound, so it depends on the color. */\n  max: (color: ColorValue) => number;\n  value: (color: ColorValue) => number;\n  /** The color this channel produces when moved to `value`. */\n  apply: (color: ColorValue, value: number) => ColorValue;\n  /** Comma-separated gradient stops describing the channel's whole range. */\n  stops: (color: ColorValue) => string;\n  /** Human-readable rendering of the current channel value. */\n  display: (color: ColorValue) => string;\n}\n\nconst constant = (value: number) => () => value;\n\nfunction round(value: number, precision = 2): number {\n  const factor = 10 ** precision;\n\n  return Math.round(value * factor) / factor;\n}\n\n/**\n * `count` evenly spaced gradient stops, always as hex. Perceptual channels are\n * not linear in sRGB, so a two-stop gradient would misrepresent them —\n * sampling the real conversion keeps the track honest. Hex (rather than an\n * `okhsl()` string) because the gradient reaches the DOM as a raw custom\n * property, without passing through Tasty's color functions.\n */\nfunction ramp(count: number, at: (position: number) => ColorValue): string {\n  return Array.from({ length: count }, (_, index) =>\n    toHex(at(index / (count - 1))),\n  ).join(', ');\n}\n\n/**\n * The hue strip is drawn at full saturation and a fixed OKHSL lightness, which\n * keeps it perceptually even instead of spiking at yellow the way a CSS-HSL\n * rainbow does. Its own saturation and tone stay fixed: the strip is the same\n * in HST and in LCH, where `H` means the same thing.\n */\nconst HUE_STOPS = ramp(25, (position) => ({\n  h: position * 360,\n  s: 1,\n  l: 0.6,\n}));\n\nconst hueChannel: ColorChannel = {\n  label: 'H',\n  title: 'Hue',\n  min: 0,\n  // 360° is the same angle as 0°, so the last usable stop is 359 — the range\n  // `HueSlider` exposes as well.\n  max: constant(359),\n  step: 1,\n  value: (color) => round(color.h, 1),\n  apply: (color, value) => ({ ...color, h: normalizeHue(value) }),\n  stops: () => HUE_STOPS,\n  display: (color) => `${Math.round(color.h)}°`,\n};\n\nconst saturationChannel: ColorChannel = {\n  label: 'S',\n  title: 'Saturation',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(color.s * 100, 1),\n  apply: (color, value) => ({ ...color, s: value / 100 }),\n  stops: (color) => ramp(7, (position) => ({ ...color, s: position })),\n  display: (color) => `${Math.round(color.s * 100)}%`,\n};\n\nconst toneChannel: ColorChannel = {\n  label: 'T',\n  title: 'Tone',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOkhst(color).t * 100, 1),\n  apply: (color, value) =>\n    fromOkhst({ h: color.h, s: color.s, t: value / 100 }),\n  stops: (color) =>\n    ramp(7, (position) => fromOkhst({ h: color.h, s: color.s, t: position })),\n  display: (color) => `${Math.round(toOkhst(color).t * 100)}%`,\n};\n\nconst lightnessChannel: ColorChannel = {\n  label: 'L',\n  title: 'Lightness',\n  min: 0,\n  max: constant(100),\n  step: 1,\n  value: (color) => round(toOklch(color).l * 100, 1),\n  apply: (color, value) => {\n    const { c, h } = toOklch(color);\n\n    return fromOklch({ l: value / 100, c, h });\n  },\n  stops: (color) => {\n    const { c, h } = toOklch(color);\n\n    return ramp(7, (position) => fromOklch({ l: position, c, h }));\n  },\n  display: (color) => `${Math.round(toOklch(color).l * 100)}%`,\n};\n\nconst chromaChannel: ColorChannel = {\n  label: 'C',\n  title: 'Chroma',\n  min: 0,\n  // Chroma has no fixed ceiling: how far it can go depends on how far the sRGB\n  // gamut reaches at the current lightness and hue. Never zero, so the slider\n  // always has a range to divide by.\n  max: (color) => Math.max(round(maxChroma(color.h, color.l), 4), 0.001),\n  step: 0.001,\n  value: (color) => round(toOklch(color).c, 4),\n  apply: (color, value) => {\n    const { l, h } = toOklch(color);\n\n    return fromOklch({ l, c: value, h });\n  },\n  stops: (color) => {\n    const { l, h } = toOklch(color);\n    const limit = maxChroma(color.h, color.l);\n\n    return ramp(7, (position) => fromOklch({ l, c: position * limit, h }));\n  },\n  display: (color) => toOklch(color).c.toFixed(3),\n};\n\nfunction rgbChannel(\n  key: 'r' | 'g' | 'b',\n  label: string,\n  title: string,\n): ColorChannel {\n  const at = (color: ColorValue, value: number) =>\n    fromRgb({ ...toRgb(color), [key]: value });\n\n  return {\n    label,\n    title,\n    min: 0,\n    max: constant(255),\n    step: 1,\n    value: (color) => toRgb(color)[key],\n    apply: (color, value) => {\n      const next = at(color, value);\n\n      // A gray has no hue of its own, and the conversion invents one. Keeping\n      // the authored hue means switching back to HST or LCH resumes where the\n      // user left off.\n      return isAchromatic(next) ? { ...next, h: color.h } : next;\n    },\n    // An sRGB channel is linear in the space CSS interpolates gradients in, so\n    // the two ends describe the whole ramp exactly.\n    stops: (color) => ramp(2, (position) => at(color, position * 255)),\n    display: (color) => `${toRgb(color)[key]}`,\n  };\n}\n\nexport const CHANNELS: Record<ColorSpace, ColorChannel[]> = {\n  hst: [hueChannel, saturationChannel, toneChannel],\n  lch: [lightnessChannel, chromaChannel, hueChannel],\n  rgb: [\n    rgbChannel('r', 'R', 'Red'),\n    rgbChannel('g', 'G', 'Green'),\n    rgbChannel('b', 'B', 'Blue'),\n  ],\n};\n"],"mappings":"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"}

package/dist/components/fields/color/color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 

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

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":[],"sources":["../../../../src/components/fields/color/color.ts"],"sourcesContent":["import {\n  contrastRatioFromLuminance,\n  formatHsl,\n  formatOkhsl,\n  formatOkhst,\n  formatOklch,\n  formatRgb,\n  hslToSrgb,\n  okhslToLinearSrgb,\n  okhslToOkhst,\n  okhslToOklch,\n  okhslToSrgb,\n  okhstToOkhsl,\n  parseHexAlpha,\n  relativeLuminanceFromLinearRgb,\n  srgbToHex,\n  srgbToOkhsl,\n} from '@tenphi/glaze';\n\nimport {\n  anyNaN,\n  clamp,\n  maxChroma,\n  normalizeHue,\n  oklchToOkhsl,\n  parseColorFunction,\n  readComponent,\n  readHue,\n  rgbFromSrgb,\n} from '../../../utils/colors';\n\nimport type {\n  OkhslColor,\n  OkhstColor,\n  OklchColor,\n  RgbColor,\n} from '@tenphi/glaze';\n\nexport type { OkhslColor, OkhstColor, OklchColor, RgbColor };\n\n// The color-literal grammar and the OKLCh gamut clamp are shared with\n// `toLegacyColor()` (see `src/utils/colors.ts`) — two parsers for one notation\n// drift, and the drift is invisible. Re-exported because the picker's own\n// modules import them from here, `fromOklch` under the name its `toOklch`\n// counterpart pairs it by.\nexport { maxChroma, normalizeHue, oklchToOkhsl as fromOklch };\n\n/**\n * Every color format the picker can read and write.\n *\n * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,\n * but Tasty parses both, so the produced strings are usable as style values.\n */\nexport const COLOR_FORMATS = [\n  'hex',\n  'rgb',\n  'hsl',\n  'okhsl',\n  'okhst',\n  'oklch',\n] as const;\n\nexport type ColorFormat = (typeof COLOR_FORMATS)[number];\n\n/**\n * OKHSL is the canonical space of the picker: it is Glaze's authoring space,\n * every channel is bounded, and — unlike OKLCh — every value inside those\n * bounds is inside the sRGB gamut, so no state can be unrepresentable.\n */\nexport type ColorValue = OkhslColor;\n\n/**\n * Saturation below this rounds to `0%` in every output notation, so the color\n * is achromatic for display purposes even when the conversion left a residue.\n */\nconst ACHROMATIC_SATURATION = 5e-5;\n\n/**\n * The color carries no meaningful hue: every conversion out of it invents an\n * angle, so callers that need one should keep the hue they already had.\n */\nexport function isAchromatic(color: ColorValue): boolean {\n  return color.s < ACHROMATIC_SATURATION;\n}\n\n/** Both channel objects describe the same color, within display precision. */\nexport function isSameColor(a?: ColorValue | null, b?: ColorValue | null) {\n  if (!a || !b) return a === b;\n\n  return (\n    Math.abs(a.h - b.h) < 1e-6 &&\n    Math.abs(a.s - b.s) < 1e-6 &&\n    Math.abs(a.l - b.l) < 1e-6\n  );\n}\n\nexport function fromRgb(color: RgbColor): ColorValue {\n  const [h, s, l] = srgbToOkhsl([\n    clamp(color.r, 0, 255) / 255,\n    clamp(color.g, 0, 255) / 255,\n    clamp(color.b, 0, 255) / 255,\n  ]);\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toRgb(color: ColorValue): RgbColor {\n  const [r, g, b] = okhslToSrgb(color.h, color.s, color.l);\n\n  return {\n    r: Math.round(clamp(r, 0, 1) * 255),\n    g: Math.round(clamp(g, 0, 1) * 255),\n    b: Math.round(clamp(b, 0, 1) * 255),\n  };\n}\n\nexport function fromOkhst(color: OkhstColor): ColorValue {\n  const { h, s, l } = okhstToOkhsl({\n    h: normalizeHue(color.h),\n    s: clamp(color.s, 0, 1),\n    t: clamp(color.t, 0, 1),\n  });\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toOkhst(color: ColorValue): OkhstColor {\n  const { t } = okhslToOkhst(color);\n\n  return { h: color.h, s: color.s, t: clamp(t, 0, 1) };\n}\n\nexport function toOklch(color: ColorValue): OklchColor {\n  const [l, c, h] = okhslToOklch(color.h, color.s, color.l);\n\n  return { l, c, h: normalizeHue(h) };\n}\n\nexport function toHex(color: ColorValue): string {\n  return srgbToHex(okhslToSrgb(color.h, color.s, color.l));\n}\n\n/**\n * Read any supported color notation into the canonical space. Returns `null`\n * for anything that is not a real color — that is what lets the picker reject\n * partial input instead of guessing.\n *\n * Named CSS colors (`red`, `rebeccapurple`) are intentionally not supported,\n * matching `glaze.color()`.\n */\nexport function parseColor(input: string): ColorValue | null {\n  const text = input.trim().toLowerCase();\n\n  if (!text) return null;\n\n  if (text.startsWith('#')) {\n    const parsed = parseHexAlpha(text);\n\n    return parsed ? fromRgb(rgbFromSrgb(parsed.rgb)) : null;\n  }\n\n  const parsed = parseColorFunction(text);\n\n  if (!parsed || parsed.args.length !== 3) return null;\n\n  const { name, args } = parsed;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba': {\n      const [r, g, b] = args.map((arg) => readComponent(arg, 255));\n\n      return anyNaN(r, g, b) ? null : fromRgb({ r, g, b });\n    }\n    case 'hsl':\n    case 'hsla': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const l = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return fromRgb(rgbFromSrgb(hslToSrgb(h, clamp(s, 0, 1), clamp(l, 0, 1))));\n    }\n    case 'okhsl': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const l = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return { h, s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n    }\n    case 'okhst': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const t = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, t)) return null;\n\n      return fromOkhst({ h, s, t });\n    }\n    case 'oklch': {\n      // In `oklch()` a percentage means 1 for lightness and 0.4 for chroma.\n      const l = readComponent(args[0], 1);\n      const c = readComponent(args[1], 0.4);\n      const h = readHue(args[2]);\n\n      return anyNaN(l, c, h) ? null : oklchToOkhsl({ l, c, h });\n    }\n    default:\n      return null;\n  }\n}\n\n/** Serialize the canonical color into one of the supported notations. */\nexport function formatColor(color: ColorValue, format: ColorFormat): string {\n  // An achromatic color has no meaningful hue, and the conversions leave\n  // whatever angle the source happened to carry. Zero reads better.\n  const gray = isAchromatic(color);\n  const hue = gray ? 0 : color.h;\n  const saturation = color.s;\n  const lightness = color.l;\n\n  switch (format) {\n    case 'rgb':\n      return formatRgb(hue, saturation, lightness);\n    case 'hsl': {\n      const text = formatHsl(hue, saturation, lightness);\n\n      // CSS HSL derives its hue from the sRGB channels, which is undefined\n      // when they are equal — Glaze emits whatever the formula produces. Every\n      // other notation carries the hue through, so only HSL needs this.\n      return gray ? text.replace(/\\(-?[\\d.]+/, '(0') : text;\n    }\n    case 'okhsl':\n      return formatOkhsl(hue, saturation, lightness);\n    case 'okhst':\n      return formatOkhst(hue, saturation, toOkhst(color).t);\n    case 'oklch':\n      return formatOklch(hue, saturation, lightness);\n    default:\n      return toHex(color);\n  }\n}\n\n/**\n * Which notation a string is written in, or `null` when it is not a color.\n * Used to keep the user's own notation while still normalizing the value.\n */\nexport function detectFormat(input: string): ColorFormat | null {\n  const text = input.trim().toLowerCase();\n\n  if (!parseColor(text)) return null;\n\n  if (text.startsWith('#')) return 'hex';\n\n  const name = parseColorFunction(text)?.name;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba':\n      return 'rgb';\n    case 'hsl':\n    case 'hsla':\n      return 'hsl';\n    case 'okhsl':\n      return 'okhsl';\n    case 'okhst':\n      return 'okhst';\n    case 'oklch':\n      return 'oklch';\n    default:\n      return null;\n  }\n}\n\n/**\n * Black or white — whichever the WCAG contrast ratio favors on the given\n * color. Keeps the popover preview label readable at any lightness. Returns a\n * literal hex rather than a token, because the answer is measured against this\n * exact fill and must not adapt with the color scheme.\n */\nexport function getContrastingColor(color: ColorValue): '#000000' | '#ffffff' {\n  const luminance = relativeLuminanceFromLinearRgb(\n    okhslToLinearSrgb(color.h, color.s, color.l),\n  );\n\n  return contrastRatioFromLuminance(luminance, 0) >=\n    contrastRatioFromLuminance(1, luminance)\n    ? '#000000'\n    : '#ffffff';\n}\n"],"mappings":"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"}
+{"version":3,"file":"color.js","names":["contrastRatioFromLuminance","formatHsl","formatOkhsl","formatOkhst","formatOklch","formatRgb","hslToSrgb","okhslToLinearSrgb","okhslToOkhst","okhslToOklch","okhslToSrgb","okhstToOkhsl","parseHexAlpha","relativeLuminanceFromLinearRgb","srgbToHex","srgbToOkhsl","anyNaN","clamp","maxChroma","normalizeHue","oklchToOkhsl","parseColorFunction","readComponent","readHue","rgbFromSrgb","OkhslColor","OkhstColor","OklchColor","RgbColor","fromOklch","COLOR_FORMATS","const","ColorFormat","ColorValue","ACHROMATIC_SATURATION","isAchromatic","color","s","isSameColor","a","b","Math","abs","h","l","fromRgb","r","g","toRgb","round","fromOkhst","t","toOkhst","toOklch","c","toHex","parseColor","input","text","trim","toLowerCase","startsWith","parsed","rgb","args","length","name","map","arg","formatColor","format","gray","hue","saturation","lightness","replace","detectFormat","getContrastingColor","luminance"],"sources":["../../../../src/components/fields/color/color.ts"],"sourcesContent":["import {\n  contrastRatioFromLuminance,\n  formatHsl,\n  formatOkhsl,\n  formatOkhst,\n  formatOklch,\n  formatRgb,\n  hslToSrgb,\n  okhslToLinearSrgb,\n  okhslToOkhst,\n  okhslToOklch,\n  okhslToSrgb,\n  okhstToOkhsl,\n  parseHexAlpha,\n  relativeLuminanceFromLinearRgb,\n  srgbToHex,\n  srgbToOkhsl,\n} from '@tenphi/glaze';\n\nimport {\n  anyNaN,\n  clamp,\n  maxChroma,\n  normalizeHue,\n  oklchToOkhsl,\n  parseColorFunction,\n  readComponent,\n  readHue,\n  rgbFromSrgb,\n} from '../../../utils/colors';\n\nimport type {\n  OkhslColor,\n  OkhstColor,\n  OklchColor,\n  RgbColor,\n} from '@tenphi/glaze';\n\nexport type { OkhslColor, OkhstColor, OklchColor, RgbColor };\n\n// The color-literal grammar and the OKLCh gamut clamp are shared with\n// `toLegacyColor()` (see `src/utils/colors.ts`) — two parsers for one notation\n// drift, and the drift is invisible. Re-exported because the picker's own\n// modules import them from here, `fromOklch` under the name its `toOklch`\n// counterpart pairs it by.\nexport { maxChroma, normalizeHue, oklchToOkhsl as fromOklch };\n\n/**\n * Every color format the picker can read and write.\n *\n * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,\n * but Tasty parses both, so the produced strings are usable as style values.\n */\nexport const COLOR_FORMATS = [\n  'hex',\n  'rgb',\n  'hsl',\n  'okhsl',\n  'okhst',\n  'oklch',\n] as const;\n\nexport type ColorFormat = (typeof COLOR_FORMATS)[number];\n\n/**\n * OKHSL is the canonical space of the picker: it is Glaze's authoring space,\n * every channel is bounded, and — unlike OKLCh — every value inside those\n * bounds is inside the sRGB gamut, so no state can be unrepresentable.\n */\nexport type ColorValue = OkhslColor;\n\n/**\n * Saturation below this rounds to `0%` in every output notation, so the color\n * is achromatic for display purposes even when the conversion left a residue.\n */\nconst ACHROMATIC_SATURATION = 5e-5;\n\n/**\n * The color carries no meaningful hue: every conversion out of it invents an\n * angle, so callers that need one should keep the hue they already had.\n */\nexport function isAchromatic(color: ColorValue): boolean {\n  return color.s < ACHROMATIC_SATURATION;\n}\n\n/** Both channel objects describe the same color, within display precision. */\nexport function isSameColor(a?: ColorValue | null, b?: ColorValue | null) {\n  if (!a || !b) return a === b;\n\n  return (\n    Math.abs(a.h - b.h) < 1e-6 &&\n    Math.abs(a.s - b.s) < 1e-6 &&\n    Math.abs(a.l - b.l) < 1e-6\n  );\n}\n\nexport function fromRgb(color: RgbColor): ColorValue {\n  const [h, s, l] = srgbToOkhsl([\n    clamp(color.r, 0, 255) / 255,\n    clamp(color.g, 0, 255) / 255,\n    clamp(color.b, 0, 255) / 255,\n  ]);\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toRgb(color: ColorValue): RgbColor {\n  const [r, g, b] = okhslToSrgb(color.h, color.s, color.l);\n\n  return {\n    r: Math.round(clamp(r, 0, 1) * 255),\n    g: Math.round(clamp(g, 0, 1) * 255),\n    b: Math.round(clamp(b, 0, 1) * 255),\n  };\n}\n\nexport function fromOkhst(color: OkhstColor): ColorValue {\n  const { h, s, l } = okhstToOkhsl({\n    h: normalizeHue(color.h),\n    s: clamp(color.s, 0, 1),\n    t: clamp(color.t, 0, 1),\n  });\n\n  return { h: normalizeHue(h), s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n}\n\nexport function toOkhst(color: ColorValue): OkhstColor {\n  const { t } = okhslToOkhst(color);\n\n  return { h: color.h, s: color.s, t: clamp(t, 0, 1) };\n}\n\nexport function toOklch(color: ColorValue): OklchColor {\n  const [l, c, h] = okhslToOklch(color.h, color.s, color.l);\n\n  return { l, c, h: normalizeHue(h) };\n}\n\nexport function toHex(color: ColorValue): string {\n  return srgbToHex(okhslToSrgb(color.h, color.s, color.l));\n}\n\n/**\n * Read any supported color notation into the canonical space. Returns `null`\n * for anything that is not a real color — that is what lets the picker reject\n * partial input instead of guessing.\n *\n * Named CSS colors (`red`, `rebeccapurple`) are intentionally not supported,\n * matching `glaze.color()`.\n */\nexport function parseColor(input: string): ColorValue | null {\n  const text = input.trim().toLowerCase();\n\n  if (!text) return null;\n\n  if (text.startsWith('#')) {\n    const parsed = parseHexAlpha(text);\n\n    return parsed ? fromRgb(rgbFromSrgb(parsed.rgb)) : null;\n  }\n\n  const parsed = parseColorFunction(text);\n\n  if (!parsed || parsed.args.length !== 3) return null;\n\n  const { name, args } = parsed;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba': {\n      const [r, g, b] = args.map((arg) => readComponent(arg, 255));\n\n      return anyNaN(r, g, b) ? null : fromRgb({ r, g, b });\n    }\n    case 'hsl':\n    case 'hsla': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const l = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return fromRgb(rgbFromSrgb(hslToSrgb(h, clamp(s, 0, 1), clamp(l, 0, 1))));\n    }\n    case 'okhsl': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const l = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, l)) return null;\n\n      return { h, s: clamp(s, 0, 1), l: clamp(l, 0, 1) };\n    }\n    case 'okhst': {\n      const h = readHue(args[0]);\n      const s = readComponent(args[1], 100) / 100;\n      const t = readComponent(args[2], 100) / 100;\n\n      if (anyNaN(h, s, t)) return null;\n\n      return fromOkhst({ h, s, t });\n    }\n    case 'oklch': {\n      // In `oklch()` a percentage means 1 for lightness and 0.4 for chroma.\n      const l = readComponent(args[0], 1);\n      const c = readComponent(args[1], 0.4);\n      const h = readHue(args[2]);\n\n      return anyNaN(l, c, h) ? null : oklchToOkhsl({ l, c, h });\n    }\n    default:\n      return null;\n  }\n}\n\n/** Serialize the canonical color into one of the supported notations. */\nexport function formatColor(color: ColorValue, format: ColorFormat): string {\n  // An achromatic color has no meaningful hue, and the conversions leave\n  // whatever angle the source happened to carry. Zero reads better.\n  const gray = isAchromatic(color);\n  const hue = gray ? 0 : color.h;\n  const saturation = color.s;\n  const lightness = color.l;\n\n  switch (format) {\n    case 'rgb':\n      return formatRgb(hue, saturation, lightness);\n    case 'hsl': {\n      const text = formatHsl(hue, saturation, lightness);\n\n      // CSS HSL derives its hue from the sRGB channels, which is undefined\n      // when they are equal — Glaze emits whatever the formula produces. Every\n      // other notation carries the hue through, so only HSL needs this.\n      return gray ? text.replace(/\\(-?[\\d.]+/, '(0') : text;\n    }\n    case 'okhsl':\n      return formatOkhsl(hue, saturation, lightness);\n    case 'okhst':\n      return formatOkhst(hue, saturation, toOkhst(color).t);\n    case 'oklch':\n      return formatOklch(hue, saturation, lightness);\n    default:\n      return toHex(color);\n  }\n}\n\n/**\n * Which notation a string is written in, or `null` when it is not a color.\n * Used to keep the user's own notation while still normalizing the value.\n */\nexport function detectFormat(input: string): ColorFormat | null {\n  const text = input.trim().toLowerCase();\n\n  if (!parseColor(text)) return null;\n\n  if (text.startsWith('#')) return 'hex';\n\n  const name = parseColorFunction(text)?.name;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba':\n      return 'rgb';\n    case 'hsl':\n    case 'hsla':\n      return 'hsl';\n    case 'okhsl':\n      return 'okhsl';\n    case 'okhst':\n      return 'okhst';\n    case 'oklch':\n      return 'oklch';\n    default:\n      return null;\n  }\n}\n\n/**\n * Black or white — whichever the WCAG contrast ratio favors on the given\n * color. Keeps the popover preview label readable at any lightness. Returns a\n * literal hex rather than a token, because the answer is measured against this\n * exact fill and must not adapt with the color scheme.\n */\nexport function getContrastingColor(color: ColorValue): '#000000' | '#ffffff' {\n  const luminance = relativeLuminanceFromLinearRgb(\n    okhslToLinearSrgb(color.h, color.s, color.l),\n  );\n\n  return contrastRatioFromLuminance(luminance, 0) >=\n    contrastRatioFromLuminance(1, luminance)\n    ? '#000000'\n    : '#ffffff';\n}\n"],"mappings":"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"}

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

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

package/dist/components/fields/color/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/fields/color/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Marks the subtree inside a color popover.\n *\n * A `ColorSwatchGroup` offers a custom-color escape hatch, and that escape\n * hatch is a `ColorPicker` — which opens a popover that may itself contain a\n * swatch group. Reading this flag lets the group drop the escape hatch when it\n * is already inside one, so the recursion cannot be written even by accident.\n */\nexport const ColorPopoverContext = createContext(false);\n\nexport function useIsInsideColorPopover(): boolean {\n  return useContext(ColorPopoverContext);\n}\n"],"mappings":";;;;;;;;;;;;AAUA,MAAa,sBAAsB,cAAc,MAAM;AAEvD,SAAgB,0BAAmC;AACjD,QAAO,WAAW,oBAAoB"}
+{"version":3,"file":"context.js","names":["createContext","useContext","ColorPopoverContext","useIsInsideColorPopover"],"sources":["../../../../src/components/fields/color/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Marks the subtree inside a color popover.\n *\n * A `ColorSwatchGroup` offers a custom-color escape hatch, and that escape\n * hatch is a `ColorPicker` — which opens a popover that may itself contain a\n * swatch group. Reading this flag lets the group drop the escape hatch when it\n * is already inside one, so the recursion cannot be written even by accident.\n */\nexport const ColorPopoverContext = createContext(false);\n\nexport function useIsInsideColorPopover(): boolean {\n  return useContext(ColorPopoverContext);\n}\n"],"mappings":";;;;;;;;;;;;AAUA,MAAaE,sBAAsBF,cAAc,MAAM;AAEvD,SAAOG,0BAAA;AAAA,QACEF,WAAWC,oBAAoB"}