@cube-dev/ui-kit 0.155.0 → 0.156.0

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

@@ -0,0 +1,15 @@
+
+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

@@ -0,0 +1,282 @@
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | 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]+)\(([^()]+)\)$/;
+/**
+* A number with an optional `%` or `deg` unit.
+*
+* The integer and fraction parts are deliberately written so that no two
+* quantifiers can consume the same digit — `\d+(?:\.\d*)?` rather than
+* `\d+\.?\d*`, whose `\d+` and `\d*` can split a digit run n ways and make
+* rejecting a long one quadratic. This runs on whatever the user types.
+*/
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../../../src/components/fields/ColorPicker/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  oklabToOkhsl,\n  parseHexAlpha,\n  relativeLuminanceFromLinearRgb,\n  srgbToHex,\n  srgbToOkhsl,\n} from '@tenphi/glaze';\n\nimport type {\n  OkhslColor,\n  OkhstColor,\n  OklchColor,\n  RgbColor,\n} from '@tenphi/glaze';\n\nexport type { OkhslColor, OkhstColor, OklchColor, RgbColor };\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\nconst FUNCTION_RE = /^([a-z]+)\\(([^()]+)\\)$/;\n/**\n * A number with an optional `%` or `deg` unit.\n *\n * The integer and fraction parts are deliberately written so that no two\n * quantifiers can consume the same digit — `\\d+(?:\\.\\d*)?` rather than\n * `\\d+\\.?\\d*`, whose `\\d+` and `\\d*` can split a digit run n ways and make\n * rejecting a long one quadratic. This runs on whatever the user types.\n */\nconst NUMBER_RE = /^[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)(?:e[+-]?\\d+)?(?:%|deg)?$/;\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\nfunction clamp(value: number, min: number, max: number): number {\n  return value < min ? min : value > max ? max : value;\n}\n\nexport function normalizeHue(hue: number): number {\n  if (!Number.isFinite(hue)) return 0;\n\n  return ((hue % 360) + 360) % 360;\n}\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\n/**\n * Split a color-function body into its numeric arguments, dropping the alpha\n * component. Both the modern space-separated and the legacy comma-separated\n * syntaxes are accepted.\n *\n * Each argument keeps its unit so the caller can tell `50%` from `50`.\n */\nfunction splitArguments(body: string): string[] | null {\n  const [values, ...rest] = body.split('/');\n\n  // More than one slash is never valid syntax.\n  if (rest.length > 1) return null;\n\n  const args = values\n    .trim()\n    .split(values.includes(',') ? ',' : /\\s+/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n\n  // Legacy `rgba(r, g, b, a)` / `hsla(h, s, l, a)` carry alpha as a fourth\n  // argument. Alpha is not part of the value, so it is dropped either way.\n  if (args.length === 4) args.pop();\n\n  return args.every((arg) => NUMBER_RE.test(arg)) ? args : null;\n}\n\n/** Parse an argument that may carry a `%` unit. `scale` is the 100% value. */\nfunction scalar(arg: string, scale: number): number {\n  return arg.endsWith('%') ? (parseFloat(arg) / 100) * scale : parseFloat(arg);\n}\n\nfunction hueArgument(arg: string): number {\n  // A percentage is not a valid hue angle.\n  return arg.endsWith('%') ? NaN : normalizeHue(parseFloat(arg));\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\n/**\n * The largest OKLCh chroma that stays inside the sRGB gamut for the given hue\n * and OKHSL lightness — that is exactly what OKHSL saturation `1` means.\n */\nexport function maxChroma(hue: number, lightness: number): number {\n  return okhslToOklch(normalizeHue(hue), 1, clamp(lightness, 0, 1))[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\n/**\n * OKLCh addresses colors outside the sRGB gamut, so chroma is clipped to the\n * gamut boundary at the requested lightness before it is stored. Hue is taken\n * from the input rather than from the conversion, which loses it at zero\n * chroma.\n */\nexport function fromOklch(color: OklchColor): ColorValue {\n  const h = normalizeHue(color.h);\n  const c = Math.max(color.c, 0);\n  const radians = (h * Math.PI) / 180;\n  const [, s, l] = oklabToOkhsl([\n    clamp(color.l, 0, 1),\n    c * Math.cos(radians),\n    c * Math.sin(radians),\n  ]);\n  const limit = maxChroma(h, l);\n\n  return {\n    h,\n    s: limit > 0 ? (c >= limit ? 1 : clamp(s, 0, 1)) : 0,\n    l: clamp(l, 0, 1),\n  };\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 match = FUNCTION_RE.exec(text);\n\n  if (!match) return null;\n\n  const [, name, body] = match;\n  const args = splitArguments(body);\n\n  if (!args || args.length !== 3) return null;\n\n  switch (name) {\n    case 'rgb':\n    case 'rgba': {\n      const [r, g, b] = args.map((arg) => scalar(arg, 255));\n\n      return anyNaN(r, g, b) ? null : fromRgb({ r, g, b });\n    }\n    case 'hsl':\n    case 'hsla': {\n      const h = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const l = scalar(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 = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const l = scalar(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 = hueArgument(args[0]);\n      const s = scalar(args[1], 100) / 100;\n      const t = scalar(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 = scalar(args[0], 1);\n      const c = scalar(args[1], 0.4);\n      const h = hueArgument(args[2]);\n\n      return anyNaN(l, c, h) ? null : fromOklch({ l, c, h });\n    }\n    default:\n      return null;\n  }\n}\n\nfunction anyNaN(...values: number[]): boolean {\n  return values.some((value) => !Number.isFinite(value));\n}\n\nfunction rgbFromSrgb([r, g, b]: [number, number, number]): RgbColor {\n  return { r: r * 255, g: g * 255, b: b * 255 };\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 * 100;\n  const lightness = color.l * 100;\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 * 100);\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 = FUNCTION_RE.exec(text)?.[1];\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/ColorPicker/index.d.ts

@@ -0,0 +1,4 @@
+
+import { COLOR_FORMATS, ColorFormat } from "./color.js";
+import { COLOR_SPACES, ColorSpace } from "./channels.js";
+import { ColorPicker, ColorPickerFormatMode, CubeColorPickerProps } from "./ColorPicker.js";

package/dist/components/fields/ComboBox/ComboBox.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/CommandTextArea.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { chain } from "../../../utils/react/chain.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";

package/dist/components/fields/CommandTextArea/caretPosition.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 //#region src/components/fields/CommandTextArea/caretPosition.ts
 const MIRROR_STYLES = [
 	"boxSizing",

package/dist/components/fields/CommandTextArea/useCaretAnchor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { getCaretRect } from "./caretPosition.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
 

package/dist/components/fields/DatePicker/DateInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/DateInputBase.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";

package/dist/components/fields/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/DatePickerButton.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { CalendarIcon } from "../../../icons/CalendarIcon.js";
 import { tasty } from "@tenphi/tasty";

package/dist/components/fields/DatePicker/DatePickerElement.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { Space } from "../../layout/Space.js";
 import { tasty } from "@tenphi/tasty";
 

package/dist/components/fields/DatePicker/DatePickerInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { DatePickerSegment } from "./DatePickerSegment.js";
 import { formatSegments } from "./utils.js";

package/dist/components/fields/DatePicker/DatePickerSegment.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { Space } from "../../layout/Space.js";

package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useI18n } from "../../../i18n/useI18n.js";

package/dist/components/fields/DatePicker/MonthPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/PeriodPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/QuarterPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/TimeInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";

package/dist/components/fields/DatePicker/WeekPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/YearPicker.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { _PeriodPicker } from "./PeriodPicker.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/fields/DatePicker/parseDate.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { parseAbsolute } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/parseDate.ts

package/dist/components/fields/DatePicker/period.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { CalendarDate, startOfMonth, startOfWeek, startOfYear, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/fields/DatePicker/period.ts

package/dist/components/fields/DatePicker/props.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 //#region src/components/fields/DatePicker/props.ts
 const DEFAULT_DATE_PROPS = {
 	granularity: "day",

package/dist/components/fields/DatePicker/utils.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { useImperativeHandle, useRef } from "react";
 import { createDOMRef } from "@react-spectrum/utils";
 import { createFocusManager } from "@react-aria/focus";

package/dist/components/fields/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { useI18n } from "../../../i18n/useI18n.js";

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

@@ -1,11 +1,11 @@
 
 import { FieldBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
-import { CubeCollectionItemProps } from "../../CollectionItem.js";
+import { CubeCollectionItemProps, _CollectionItem } from "../../CollectionItem.js";
 import { CubeListBoxProps } from "../ListBox/ListBox.js";
 import { Styles } from "@tenphi/tasty";
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from "react";
-import { Item, Section } from "react-stately";
+import { Section } from "react-stately";
 import { Collection, Key as Key$1, Node } from "@react-types/shared";
 
 //#region src/components/fields/FilterListBox/FilterListBox.d.ts
@@ -80,7 +80,7 @@ interface CubeFilterListBoxProps<T> extends Omit<CubeListBoxProps<T>, 'filter'>,
 declare const FilterListBox: (<T>(props: CubeFilterListBoxProps<T> & {
   ref?: ForwardedRef<HTMLDivElement>;
 }) => ReactElement) & {
-  Item: typeof Item;
+  Item: typeof _CollectionItem;
   Section: typeof Section;
 };
 //#endregion

package/dist/components/fields/FilterListBox/FilterListBox.js

@@ -1,10 +1,11 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.156.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { modAttrs } from "../../../utils/react/index.js";
 import { useFocus as useFocus$1 } from "../../../utils/react/interactions.js";
 import { LoadingIcon } from "../../../icons/LoadingIcon.js";
+import { _CollectionItem } from "../../CollectionItem.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { StyledHeader } from "../../actions/Menu/styled.js";
 import { getValidationMods } from "../../form/validation/resolve-validation-props.js";
@@ -16,7 +17,7 @@ import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, tasty } from "@tenphi/tasty";
 import { cloneElement, forwardRef, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFilter, useKeyboard } from "react-aria";
-import { Item, Section, useListState } from "react-stately";
+import { Section, useListState } from "react-stately";
 
 //#region src/components/fields/FilterListBox/FilterListBox.tsx
 const FilterListBoxWrapperElement = tasty({ styles: {
@@ -132,7 +133,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		if (!children && customKeys.size === 0) return children;
 		const term = searchValue.trim();
 		const localFilter = typeof filter === "function" ? filter : contains;
-		const customArray = Array.from(customKeys).filter((key) => !term || localFilter(key, term)).map((key) => /* @__PURE__ */ jsx(Item, {
+		const customArray = Array.from(customKeys).filter((key) => !term || localFilter(key, term)).map((key) => /* @__PURE__ */ jsx(_CollectionItem, {
 			textValue: key,
 			...customValueProps,
 			children: key
@@ -222,9 +223,9 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 			for (const customKey of customKeys) if (localFilter(customKey, term)) return true;
 			return false;
 		})();
-		const customOption = /* @__PURE__ */ jsx(Item, {
+		const customOption = /* @__PURE__ */ jsx(_CollectionItem, {
 			textValue: term,
-			...mergeProps$1(customValueProps, newCustomValueProps),
+			...mergeProps$1(customValueProps ?? {}, newCustomValueProps ?? {}),
 			children: term
 		}, term);
 		if (hasVisibleFilteredItems && childrenToProcess) {
@@ -542,7 +543,7 @@ const FilterListBox = forwardRef(function FilterListBox(props, ref) {
 		]
 	}), ref, props);
 });
-FilterListBox.Item = ListBox.Item;
+FilterListBox.Item = _CollectionItem;
 FilterListBox.Section = Section;
 Object.defineProperty(FilterListBox, "cubeInputType", {
 	value: "FilterListBox",