@cube-dev/ui-kit 0.0.0-canary-9f74ccc → 0.0.0-canary-a93b304

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

@@ -1,149 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9f74ccc | Cube Dev Team */
-import { useEvent } from "../../../_internal/hooks/use-event.js";
-import { formatColor, getContrastingColor, toHex } from "./color.js";
-import { __Radio } from "../RadioGroup/Radio.js";
-import { __Slider } from "../Slider/Slider.js";
-import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";
-import { tasty } from "@tenphi/tasty";
-import { useMemo } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/fields/ColorPicker/ColorPickerPanel.tsx
-const PanelElement = tasty({
-	qa: "ColorPickerPanel",
-	styles: {
-		display: "grid",
-		flow: "row",
-		gap: "1x",
-		padding: "1x",
-		width: "34x"
-	}
-});
-const PreviewElement = tasty({
-	qa: "ColorPreview",
-	styles: {
-		display: "grid",
-		placeItems: "center",
-		height: "6x",
-		radius: true,
-		preset: "s4",
-		fill: "(#color-picker, #clear)",
-		color: "(#color-picker-contrast, #dark)",
-		shadow: "inset 0 0 0 1bw #dark.1"
-	}
-});
-const ChannelsElement = tasty({ styles: {
-	display: "grid",
-	gridColumns: "max-content 1sf max-content",
-	placeItems: "center stretch",
-	gap: "1x"
-} });
-const ChannelLabelElement = tasty({ styles: {
-	preset: "c2",
-	color: "#dark-03",
-	textAlign: "center",
-	width: "2x"
-} });
-const ChannelTrackElement = tasty({ styles: {
-	display: "grid",
-	placeItems: "center stretch"
-} });
-const ChannelValueElement = tasty({ styles: {
-	preset: "s4",
-	color: "#dark-02",
-	textAlign: "right",
-	whiteSpace: "nowrap",
-	width: "5.5x"
-} });
-/**
-* The gradient reaches the track through a plain custom property so the track
-* keeps a single cached style rule. A color picker moves its channels
-* continuously, and a fresh `styles` object per frame would emit a fresh CSS
-* rule per frame.
-*/
-const TRACK_STYLES = {
-	height: "1x",
-	top: ".5x",
-	radius: "1r",
-	fill: "#clear",
-	image: "$channel-gradient",
-	shadow: "inset 0 0 0 1bw #dark.1",
-	Fill: false
-};
-/** A ring keeps the thumb visible wherever it sits on its own gradient. */
-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, {
-			"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) })
-	] });
-}
-/**
-* The popover body of `ColorPicker`: a preview, a switch between the three
-* color concepts, and one gradient slider per channel of the active one.
-*/
-function ColorPickerPanel(props) {
-	const { color, space, isDisabled, previewFormat, 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: [
-			/* @__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, {
-				channel,
-				color,
-				isDisabled,
-				onChange
-			}, `${space}-${channel.label}`)) })
-		]
-	});
-}
-
-//#endregion
-export { ColorPickerPanel };
-//# sourceMappingURL=ColorPickerPanel.js.map

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

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

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

@@ -1,13 +0,0 @@
-
-import "./color.js";
-
-//#region src/components/fields/ColorPicker/channels.d.ts
-/**
- * The three color concepts the popover can be driven by. They all edit the
- * same canonical value — only the axes the user manipulates differ.
- */
-declare const COLOR_SPACES: readonly ["hst", "lch", "rgb"];
-type ColorSpace = (typeof COLOR_SPACES)[number];
-//#endregion
-export { COLOR_SPACES, ColorSpace };
-//# sourceMappingURL=channels.d.ts.map

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

@@ -1,194 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9f74ccc | Cube Dev Team */
-import { fromOkhst, fromOklch, fromRgb, isAchromatic, maxChroma, normalizeHue, toHex, toOkhst, toOklch, toRgb } from "./color.js";
-
-//#region src/components/fields/ColorPicker/channels.ts
-/**
-* The three color concepts the popover can be driven by. They all edit the
-* same canonical value — only the axes the user manipulates differ.
-*/
-const COLOR_SPACES = [
-	"hst",
-	"lch",
-	"rgb"
-];
-const COLOR_SPACE_LABELS = {
-	hst: "HST",
-	lch: "LCH",
-	rgb: "RGB"
-};
-const COLOR_SPACE_HINTS = {
-	hst: "OKHST — hue, saturation, tone",
-	lch: "OKLCH — lightness, chroma, hue",
-	rgb: "sRGB — red, green, blue"
-};
-const constant = (value) => () => value;
-function round(value, precision = 2) {
-	const factor = 10 ** precision;
-	return Math.round(value * factor) / factor;
-}
-/**
-* `count` evenly spaced gradient stops, always as hex. Perceptual channels are
-* not linear in sRGB, so a two-stop gradient would misrepresent them —
-* sampling the real conversion keeps the track honest. Hex (rather than an
-* `okhsl()` string) because the gradient reaches the DOM as a raw custom
-* property, without passing through Tasty's color functions.
-*/
-function ramp(count, at) {
-	return Array.from({ length: count }, (_, index) => toHex(at(index / (count - 1)))).join(", ");
-}
-/**
-* The hue strip is drawn at full saturation and a fixed OKHSL lightness, which
-* keeps it perceptually even instead of spiking at yellow the way a CSS-HSL
-* rainbow does. Its own saturation and tone stay fixed: the strip is the same
-* in HST and in LCH, where `H` means the same thing.
-*/
-const HUE_STOPS = ramp(25, (position) => ({
-	h: position * 360,
-	s: 1,
-	l: .6
-}));
-const hueChannel = {
-	label: "H",
-	title: "Hue",
-	min: 0,
-	max: constant(359),
-	step: 1,
-	value: (color) => round(color.h, 1),
-	apply: (color, value) => ({
-		...color,
-		h: normalizeHue(value)
-	}),
-	stops: () => HUE_STOPS,
-	display: (color) => `${Math.round(color.h)}°`
-};
-const saturationChannel = {
-	label: "S",
-	title: "Saturation",
-	min: 0,
-	max: constant(100),
-	step: 1,
-	value: (color) => round(color.s * 100, 1),
-	apply: (color, value) => ({
-		...color,
-		s: value / 100
-	}),
-	stops: (color) => ramp(7, (position) => ({
-		...color,
-		s: position
-	})),
-	display: (color) => `${Math.round(color.s * 100)}%`
-};
-const toneChannel = {
-	label: "T",
-	title: "Tone",
-	min: 0,
-	max: constant(100),
-	step: 1,
-	value: (color) => round(toOkhst(color).t * 100, 1),
-	apply: (color, value) => fromOkhst({
-		h: color.h,
-		s: color.s,
-		t: value / 100
-	}),
-	stops: (color) => ramp(7, (position) => fromOkhst({
-		h: color.h,
-		s: color.s,
-		t: position
-	})),
-	display: (color) => `${Math.round(toOkhst(color).t * 100)}%`
-};
-const lightnessChannel = {
-	label: "L",
-	title: "Lightness",
-	min: 0,
-	max: constant(100),
-	step: 1,
-	value: (color) => round(toOklch(color).l * 100, 1),
-	apply: (color, value) => {
-		const { c, h } = toOklch(color);
-		return fromOklch({
-			l: value / 100,
-			c,
-			h
-		});
-	},
-	stops: (color) => {
-		const { c, h } = toOklch(color);
-		return ramp(7, (position) => fromOklch({
-			l: position,
-			c,
-			h
-		}));
-	},
-	display: (color) => `${Math.round(toOklch(color).l * 100)}%`
-};
-const chromaChannel = {
-	label: "C",
-	title: "Chroma",
-	min: 0,
-	max: (color) => Math.max(round(maxChroma(color.h, color.l), 4), .001),
-	step: .001,
-	value: (color) => round(toOklch(color).c, 4),
-	apply: (color, value) => {
-		const { l, h } = toOklch(color);
-		return fromOklch({
-			l,
-			c: value,
-			h
-		});
-	},
-	stops: (color) => {
-		const { l, h } = toOklch(color);
-		const limit = maxChroma(color.h, color.l);
-		return ramp(7, (position) => fromOklch({
-			l,
-			c: position * limit,
-			h
-		}));
-	},
-	display: (color) => toOklch(color).c.toFixed(3)
-};
-function rgbChannel(key, label, title) {
-	const at = (color, value) => fromRgb({
-		...toRgb(color),
-		[key]: value
-	});
-	return {
-		label,
-		title,
-		min: 0,
-		max: constant(255),
-		step: 1,
-		value: (color) => toRgb(color)[key],
-		apply: (color, value) => {
-			const next = at(color, value);
-			return isAchromatic(next) ? {
-				...next,
-				h: color.h
-			} : next;
-		},
-		stops: (color) => ramp(2, (position) => at(color, position * 255)),
-		display: (color) => `${toRgb(color)[key]}`
-	};
-}
-const CHANNELS = {
-	hst: [
-		hueChannel,
-		saturationChannel,
-		toneChannel
-	],
-	lch: [
-		lightnessChannel,
-		chromaChannel,
-		hueChannel
-	],
-	rgb: [
-		rgbChannel("r", "R", "Red"),
-		rgbChannel("g", "G", "Green"),
-		rgbChannel("b", "B", "Blue")
-	]
-};
-
-//#endregion
-export { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS };
-//# sourceMappingURL=channels.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"channels.js","names":[],"sources":["../../../../src/components/fields/ColorPicker/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/ColorPicker/color.d.ts

@@ -1,15 +0,0 @@
-
-import "@tenphi/glaze";
-
-//#region src/components/fields/ColorPicker/color.d.ts
-/**
- * Every color format the picker can read and write.
- *
- * `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,
- * but Tasty parses both, so the produced strings are usable as style values.
- */
-declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl", "okhsl", "okhst", "oklch"];
-type ColorFormat = (typeof COLOR_FORMATS)[number];
-//#endregion
-export { COLOR_FORMATS, ColorFormat };
-//# sourceMappingURL=color.d.ts.map

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

@@ -1,274 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-9f74ccc | Cube Dev Team */
-import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, oklabToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
-
-//#region src/components/fields/ColorPicker/color.ts
-/**
-* Every color format the picker can read and write.
-*
-* `okhsl` and `okhst` are Glaze / Tasty spaces rather than native CSS ones,
-* but Tasty parses both, so the produced strings are usable as style values.
-*/
-const COLOR_FORMATS = [
-	"hex",
-	"rgb",
-	"hsl",
-	"okhsl",
-	"okhst",
-	"oklch"
-];
-const FUNCTION_RE = /^([a-z]+)\(([^()]+)\)$/;
-const NUMBER_RE = /^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?(%|deg)?$/;
-/**
-* Saturation below this rounds to `0%` in every output notation, so the color
-* is achromatic for display purposes even when the conversion left a residue.
-*/
-const ACHROMATIC_SATURATION = 5e-5;
-function clamp(value, min, max) {
-	return value < min ? min : value > max ? max : value;
-}
-function normalizeHue(hue) {
-	if (!Number.isFinite(hue)) return 0;
-	return (hue % 360 + 360) % 360;
-}
-/**
-* The color carries no meaningful hue: every conversion out of it invents an
-* angle, so callers that need one should keep the hue they already had.
-*/
-function isAchromatic(color) {
-	return color.s < ACHROMATIC_SATURATION;
-}
-/**
-* Split a color-function body into its numeric arguments, dropping the alpha
-* component. Both the modern space-separated and the legacy comma-separated
-* syntaxes are accepted.
-*
-* Each argument keeps its unit so the caller can tell `50%` from `50`.
-*/
-function splitArguments(body) {
-	const [values, ...rest] = body.split("/");
-	if (rest.length > 1) return null;
-	const args = values.trim().split(values.includes(",") ? "," : /\s+/).map((part) => part.trim()).filter(Boolean);
-	if (args.length === 4) args.pop();
-	return args.every((arg) => NUMBER_RE.test(arg)) ? args : null;
-}
-/** Parse an argument that may carry a `%` unit. `scale` is the 100% value. */
-function scalar(arg, scale) {
-	return arg.endsWith("%") ? parseFloat(arg) / 100 * scale : parseFloat(arg);
-}
-function hueArgument(arg) {
-	return arg.endsWith("%") ? NaN : normalizeHue(parseFloat(arg));
-}
-function fromRgb(color) {
-	const [h, s, l] = srgbToOkhsl([
-		clamp(color.r, 0, 255) / 255,
-		clamp(color.g, 0, 255) / 255,
-		clamp(color.b, 0, 255) / 255
-	]);
-	return {
-		h: normalizeHue(h),
-		s: clamp(s, 0, 1),
-		l: clamp(l, 0, 1)
-	};
-}
-function toRgb(color) {
-	const [r, g, b] = okhslToSrgb(color.h, color.s, color.l);
-	return {
-		r: Math.round(clamp(r, 0, 1) * 255),
-		g: Math.round(clamp(g, 0, 1) * 255),
-		b: Math.round(clamp(b, 0, 1) * 255)
-	};
-}
-function fromOkhst(color) {
-	const { h, s, l } = okhstToOkhsl({
-		h: normalizeHue(color.h),
-		s: clamp(color.s, 0, 1),
-		t: clamp(color.t, 0, 1)
-	});
-	return {
-		h: normalizeHue(h),
-		s: clamp(s, 0, 1),
-		l: clamp(l, 0, 1)
-	};
-}
-function toOkhst(color) {
-	const { t } = okhslToOkhst(color);
-	return {
-		h: color.h,
-		s: color.s,
-		t: clamp(t, 0, 1)
-	};
-}
-/**
-* The largest OKLCh chroma that stays inside the sRGB gamut for the given hue
-* and OKHSL lightness — that is exactly what OKHSL saturation `1` means.
-*/
-function maxChroma(hue, lightness) {
-	return okhslToOklch(normalizeHue(hue), 1, clamp(lightness, 0, 1))[1];
-}
-function toOklch(color) {
-	const [l, c, h] = okhslToOklch(color.h, color.s, color.l);
-	return {
-		l,
-		c,
-		h: normalizeHue(h)
-	};
-}
-/**
-* OKLCh addresses colors outside the sRGB gamut, so chroma is clipped to the
-* gamut boundary at the requested lightness before it is stored. Hue is taken
-* from the input rather than from the conversion, which loses it at zero
-* chroma.
-*/
-function fromOklch(color) {
-	const h = normalizeHue(color.h);
-	const c = Math.max(color.c, 0);
-	const radians = h * Math.PI / 180;
-	const [, s, l] = oklabToOkhsl([
-		clamp(color.l, 0, 1),
-		c * Math.cos(radians),
-		c * Math.sin(radians)
-	]);
-	const limit = maxChroma(h, l);
-	return {
-		h,
-		s: limit > 0 ? c >= limit ? 1 : clamp(s, 0, 1) : 0,
-		l: clamp(l, 0, 1)
-	};
-}
-function toHex(color) {
-	return srgbToHex(okhslToSrgb(color.h, color.s, color.l));
-}
-/**
-* Read any supported color notation into the canonical space. Returns `null`
-* for anything that is not a real color — that is what lets the picker reject
-* partial input instead of guessing.
-*
-* Named CSS colors (`red`, `rebeccapurple`) are intentionally not supported,
-* matching `glaze.color()`.
-*/
-function parseColor(input) {
-	const text = input.trim().toLowerCase();
-	if (!text) return null;
-	if (text.startsWith("#")) {
-		const parsed = parseHexAlpha(text);
-		return parsed ? fromRgb(rgbFromSrgb(parsed.rgb)) : null;
-	}
-	const match = FUNCTION_RE.exec(text);
-	if (!match) return null;
-	const [, name, body] = match;
-	const args = splitArguments(body);
-	if (!args || args.length !== 3) return null;
-	switch (name) {
-		case "rgb":
-		case "rgba": {
-			const [r, g, b] = args.map((arg) => scalar(arg, 255));
-			return anyNaN(r, g, b) ? null : fromRgb({
-				r,
-				g,
-				b
-			});
-		}
-		case "hsl":
-		case "hsla": {
-			const h = hueArgument(args[0]);
-			const s = scalar(args[1], 100) / 100;
-			const l = scalar(args[2], 100) / 100;
-			if (anyNaN(h, s, l)) return null;
-			return fromRgb(rgbFromSrgb(hslToSrgb(h, clamp(s, 0, 1), clamp(l, 0, 1))));
-		}
-		case "okhsl": {
-			const h = hueArgument(args[0]);
-			const s = scalar(args[1], 100) / 100;
-			const l = scalar(args[2], 100) / 100;
-			if (anyNaN(h, s, l)) return null;
-			return {
-				h,
-				s: clamp(s, 0, 1),
-				l: clamp(l, 0, 1)
-			};
-		}
-		case "okhst": {
-			const h = hueArgument(args[0]);
-			const s = scalar(args[1], 100) / 100;
-			const t = scalar(args[2], 100) / 100;
-			if (anyNaN(h, s, t)) return null;
-			return fromOkhst({
-				h,
-				s,
-				t
-			});
-		}
-		case "oklch": {
-			const l = scalar(args[0], 1);
-			const c = scalar(args[1], .4);
-			const h = hueArgument(args[2]);
-			return anyNaN(l, c, h) ? null : fromOklch({
-				l,
-				c,
-				h
-			});
-		}
-		default: return null;
-	}
-}
-function anyNaN(...values) {
-	return values.some((value) => !Number.isFinite(value));
-}
-function rgbFromSrgb([r, g, b]) {
-	return {
-		r: r * 255,
-		g: g * 255,
-		b: b * 255
-	};
-}
-/** Serialize the canonical color into one of the supported notations. */
-function formatColor(color, format) {
-	const gray = isAchromatic(color);
-	const hue = gray ? 0 : color.h;
-	const saturation = color.s * 100;
-	const lightness = color.l * 100;
-	switch (format) {
-		case "rgb": return formatRgb(hue, saturation, lightness);
-		case "hsl": {
-			const text = formatHsl(hue, saturation, lightness);
-			return gray ? text.replace(/\(-?[\d.]+/, "(0") : text;
-		}
-		case "okhsl": return formatOkhsl(hue, saturation, lightness);
-		case "okhst": return formatOkhst(hue, saturation, toOkhst(color).t * 100);
-		case "oklch": return formatOklch(hue, saturation, lightness);
-		default: return toHex(color);
-	}
-}
-/**
-* Which notation a string is written in, or `null` when it is not a color.
-* Used to keep the user's own notation while still normalizing the value.
-*/
-function detectFormat(input) {
-	const text = input.trim().toLowerCase();
-	if (!parseColor(text)) return null;
-	if (text.startsWith("#")) return "hex";
-	switch (FUNCTION_RE.exec(text)?.[1]) {
-		case "rgb":
-		case "rgba": return "rgb";
-		case "hsl":
-		case "hsla": return "hsl";
-		case "okhsl": return "okhsl";
-		case "okhst": return "okhst";
-		case "oklch": return "oklch";
-		default: return null;
-	}
-}
-/**
-* Black or white — whichever the WCAG contrast ratio favors on the given
-* color. Keeps the popover preview label readable at any lightness. Returns a
-* literal hex rather than a token, because the answer is measured against this
-* exact fill and must not adapt with the color scheme.
-*/
-function getContrastingColor(color) {
-	const luminance = relativeLuminanceFromLinearRgb(okhslToLinearSrgb(color.h, color.s, color.l));
-	return contrastRatioFromLuminance(luminance, 0) >= contrastRatioFromLuminance(1, luminance) ? "#000000" : "#ffffff";
-}
-
-//#endregion
-export { COLOR_FORMATS, detectFormat, formatColor, fromOkhst, fromOklch, fromRgb, getContrastingColor, isAchromatic, maxChroma, normalizeHue, parseColor, toHex, toOkhst, toOklch, toRgb };
-//# sourceMappingURL=color.js.map