@cube-dev/ui-kit 0.197.0 → 0.198.0

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

@@ -1,13 +1,11 @@
 
 import "./color.js";
-
 //#region src/components/fields/color/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];
+export declare const COLOR_SPACES: readonly ["hst", "lch", "rgb"];
+export type ColorSpace = (typeof COLOR_SPACES)[number];
 //#endregion
-export { COLOR_SPACES, ColorSpace };
 //# sourceMappingURL=channels.d.ts.map

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
-
 //#region src/components/fields/color/channels.ts
 /**
 * The three color concepts the popover can be driven by. They all edit the
@@ -189,7 +188,7 @@ const CHANNELS = {
 		rgbChannel("b", "B", "Blue")
 	]
 };
-
 //#endregion
 export { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS };
+
 //# sourceMappingURL=channels.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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","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":";;;;;;;;AAkBA,MAAaW,eAAe;CAAC;CAAO;CAAO;AAAK;AAIhD,MAAaG,qBAAiD;CAC5DE,KAAK;CACLC,KAAK;CACLC,KAAK;AACP;AAEA,MAAaC,oBAAgD;CAC3DH,KAAK;CACLC,KAAK;CACLC,KAAK;AACP;AAoBA,MAAMa,YAAYJ,gBAAwBA;AAE1C,SAASK,MAAML,OAAeM,YAAY,GAAW;CACnD,MAAMC,SAAS,MAAMD;CAErB,OAAOE,KAAKH,MAAML,QAAQO,MAAM,IAAIA;AACtC;;;;;;;;AASA,SAASE,KAAKC,OAAeC,IAA8C;CACzE,OAAOE,MAAMC,KAAK,EAAEC,QAAQL,MAAM,IAAIM,GAAGC,UACvCrC,MAAM+B,GAAGM,SAASP,QAAQ,EAAE,CAAC,CAC/B,CAAC,CAACQ,KAAK,IAAI;AACb;;;;;;;AAQA,MAAMC,YAAYV,KAAK,KAAKG,cAAc;CACxCQ,GAAGR,WAAW;CACdS,GAAG;CACHC,GAAG;AACL,EAAE;AAEF,MAAMC,aAA2B;CAC/B7B,OAAO;CACPC,OAAO;CACPC,KAAK;CAGLE,KAAKM,SAAS,GAAG;CACjBP,MAAM;CACNG,QAAQD,UAAUM,MAAMN,MAAMqB,GAAG,CAAC;CAClCnB,QAAQF,OAAOC,WAAW;EAAE,GAAGD;EAAOqB,GAAGzC,aAAaqB,KAAK;CAAE;CAC7DE,aAAaiB;CACbhB,UAAUJ,UAAU,GAAGS,KAAKH,MAAMN,MAAMqB,CAAC,EAAC;AAC5C;AAEA,MAAMI,oBAAkC;CACtC9B,OAAO;CACPC,OAAO;CACPC,KAAK;CACLE,KAAKM,SAAS,GAAG;CACjBP,MAAM;CACNG,QAAQD,UAAUM,MAAMN,MAAMsB,IAAI,KAAK,CAAC;CACxCpB,QAAQF,OAAOC,WAAW;EAAE,GAAGD;EAAOsB,GAAGrB,QAAQ;CAAI;CACrDE,QAAQH,UAAUU,KAAK,IAAIG,cAAc;EAAE,GAAGb;EAAOsB,GAAGT;CAAS,EAAE;CACnET,UAAUJ,UAAU,GAAGS,KAAKH,MAAMN,MAAMsB,IAAI,GAAG,EAAC;AAClD;AAEA,MAAMI,cAA4B;CAChC/B,OAAO;CACPC,OAAO;CACPC,KAAK;CACLE,KAAKM,SAAS,GAAG;CACjBP,MAAM;CACNG,QAAQD,UAAUM,MAAMxB,QAAQkB,KAAK,CAAC,CAAC2B,IAAI,KAAK,CAAC;CACjDzB,QAAQF,OAAOC,UACb1B,UAAU;EAAE8C,GAAGrB,MAAMqB;EAAGC,GAAGtB,MAAMsB;EAAGK,GAAG1B,QAAQ;CAAI,CAAC;CACtDE,QAAQH,UACNU,KAAK,IAAIG,aAAatC,UAAU;EAAE8C,GAAGrB,MAAMqB;EAAGC,GAAGtB,MAAMsB;EAAGK,GAAGd;CAAS,CAAC,CAAC;CAC1ET,UAAUJ,UAAU,GAAGS,KAAKH,MAAMxB,QAAQkB,KAAK,CAAC,CAAC2B,IAAI,GAAG,EAAC;AAC3D;AAEA,MAAMC,mBAAiC;CACrCjC,OAAO;CACPC,OAAO;CACPC,KAAK;CACLE,KAAKM,SAAS,GAAG;CACjBP,MAAM;CACNG,QAAQD,UAAUM,MAAMvB,QAAQiB,KAAK,CAAC,CAACuB,IAAI,KAAK,CAAC;CACjDrB,QAAQF,OAAOC,UAAU;EACvB,MAAM,EAAE4B,GAAGR,MAAMtC,QAAQiB,KAAK;EAE9B,OAAOxB,aAAU;GAAE+C,GAAGtB,QAAQ;GAAK4B;GAAGR;EAAE,CAAC;CAC3C;CACAlB,QAAQH,UAAU;EAChB,MAAM,EAAE6B,GAAGR,MAAMtC,QAAQiB,KAAK;EAE9B,OAAOU,KAAK,IAAIG,aAAarC,aAAU;GAAE+C,GAAGV;GAAUgB;GAAGR;EAAE,CAAC,CAAC;CAC/D;CACAjB,UAAUJ,UAAU,GAAGS,KAAKH,MAAMvB,QAAQiB,KAAK,CAAC,CAACuB,IAAI,GAAG,EAAC;AAC3D;AAEA,MAAMO,gBAA8B;CAClCnC,OAAO;CACPC,OAAO;CACPC,KAAK;CAILE,MAAMC,UAAUS,KAAKV,IAAIO,MAAM3B,UAAUqB,MAAMqB,GAAGrB,MAAMuB,CAAC,GAAG,CAAC,GAAG,IAAK;CACrEzB,MAAM;CACNG,QAAQD,UAAUM,MAAMvB,QAAQiB,KAAK,CAAC,CAAC6B,GAAG,CAAC;CAC3C3B,QAAQF,OAAOC,UAAU;EACvB,MAAM,EAAEsB,GAAGF,MAAMtC,QAAQiB,KAAK;EAE9B,OAAOxB,aAAU;GAAE+C;GAAGM,GAAG5B;GAAOoB;EAAE,CAAC;CACrC;CACAlB,QAAQH,UAAU;EAChB,MAAM,EAAEuB,GAAGF,MAAMtC,QAAQiB,KAAK;EAC9B,MAAM+B,QAAQpD,UAAUqB,MAAMqB,GAAGrB,MAAMuB,CAAC;EAExC,OAAOb,KAAK,IAAIG,aAAarC,aAAU;GAAE+C;GAAGM,GAAGhB,WAAWkB;GAAOV;EAAE,CAAC,CAAC;CACvE;CACAjB,UAAUJ,UAAUjB,QAAQiB,KAAK,CAAC,CAAC6B,EAAEG,QAAQ,CAAC;AAChD;AAEA,SAASC,WACPC,KACAvC,OACAC,OACc;CACd,MAAMgB,MAAMZ,OAAmBC,UAC7BxB,QAAQ;EAAE,GAAGO,MAAMgB,KAAK;GAAIkC,MAAMjC;CAAM,CAAC;CAE3C,OAAO;EACLN;EACAC;EACAC,KAAK;EACLE,KAAKM,SAAS,GAAG;EACjBP,MAAM;EACNG,QAAQD,UAAUhB,MAAMgB,KAAK,CAAC,CAACkC;EAC/BhC,QAAQF,OAAOC,UAAU;GACvB,MAAMkC,OAAOvB,GAAGZ,OAAOC,KAAK;GAK5B,OAAOvB,aAAayD,IAAI,IAAI;IAAE,GAAGA;IAAMd,GAAGrB,MAAMqB;GAAE,IAAIc;EACxD;EAGAhC,QAAQH,UAAUU,KAAK,IAAIG,aAAaD,GAAGZ,OAAOa,WAAW,GAAG,CAAC;EACjET,UAAUJ,UAAU,GAAGhB,MAAMgB,KAAK,CAAC,CAACkC;CACtC;AACF;AAEA,MAAaE,WAA+C;CAC1D9C,KAAK;EAACkC;EAAYC;EAAmBC;CAAW;CAChDnC,KAAK;EAACqC;EAAkBE;EAAeN;CAAU;CACjDhC,KAAK;EACHyC,WAAW,KAAK,KAAK,KAAK;EAC1BA,WAAW,KAAK,KAAK,OAAO;EAC5BA,WAAW,KAAK,KAAK,MAAM;CAAC;AAEhC"}

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

@@ -1,7 +1,6 @@
 
 import "../../../utils/colors.js";
 import { OkhslColor } from "@tenphi/glaze";
-
 //#region src/components/fields/color/color.d.ts
 /**
  * Every color format the picker can read and write.
@@ -9,14 +8,14 @@ import { OkhslColor } from "@tenphi/glaze";
  * `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];
+export declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl", "okhsl", "okhst", "oklch"];
+export type ColorFormat = (typeof COLOR_FORMATS)[number];
 /**
  * OKHSL is the canonical space of the picker: it is Glaze's authoring space,
  * every channel is bounded, and — unlike OKLCh — every value inside those
  * bounds is inside the sRGB gamut, so no state can be unrepresentable.
  */
-type ColorValue = OkhslColor;
+export type ColorValue = OkhslColor;
 //#endregion
-export { COLOR_FORMATS, ColorFormat, ColorValue };
+export type { OkhslColor };
 //# sourceMappingURL=color.d.ts.map

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

@@ -1,7 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.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";
-
 //#region src/components/fields/color/color.ts
 /**
 * Every color format the picker can read and write.
@@ -198,7 +197,7 @@ 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, fromRgb, getContrastingColor, isAchromatic, parseColor, toHex, toOkhst, toOklch, toRgb };
+export { COLOR_FORMATS, detectFormat, formatColor, fromOkhst, oklchToOkhsl as fromOklch, fromRgb, getContrastingColor, isAchromatic, maxChroma, normalizeHue, parseColor, toHex, toOkhst, toOklch, toRgb };
+
 //# sourceMappingURL=color.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"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":";;;;;;;;;;AAqDA,MAAa8B,gBAAgB;CAC3B;CACA;CACA;CACA;CACA;CACA;AAAO;;;;;AAgBT,MAAMI,wBAAwB;;;;;AAM9B,SAAgBC,aAAaC,OAA4B;CACvD,OAAOA,MAAMC,IAAIH;AACnB;AAaA,SAAgBW,QAAQT,OAA6B;CACnD,MAAM,CAACO,GAAGN,GAAGO,KAAK7B,YAAY;EAC5BE,MAAMmB,MAAMU,GAAG,GAAG,GAAG,IAAI;EACzB7B,MAAMmB,MAAMW,GAAG,GAAG,GAAG,IAAI;EACzB9B,MAAMmB,MAAMI,GAAG,GAAG,GAAG,IAAI;CAAG,CAC7B;CAED,OAAO;EAAEG,GAAGxB,aAAawB,CAAC;EAAGN,GAAGpB,MAAMoB,GAAG,GAAG,CAAC;EAAGO,GAAG3B,MAAM2B,GAAG,GAAG,CAAC;CAAE;AACpE;AAEA,SAAgBI,MAAMZ,OAA6B;CACjD,MAAM,CAACU,GAAGC,GAAGP,KAAK9B,YAAY0B,MAAMO,GAAGP,MAAMC,GAAGD,MAAMQ,CAAC;CAEvD,OAAO;EACLE,GAAGL,KAAKQ,MAAMhC,MAAM6B,GAAG,GAAG,CAAC,IAAI,GAAG;EAClCC,GAAGN,KAAKQ,MAAMhC,MAAM8B,GAAG,GAAG,CAAC,IAAI,GAAG;EAClCP,GAAGC,KAAKQ,MAAMhC,MAAMuB,GAAG,GAAG,CAAC,IAAI,GAAG;CACpC;AACF;AAEA,SAAgBU,UAAUd,OAA+B;CACvD,MAAM,EAAEO,GAAGN,GAAGO,MAAMjC,aAAa;EAC/BgC,GAAGxB,aAAaiB,MAAMO,CAAC;EACvBN,GAAGpB,MAAMmB,MAAMC,GAAG,GAAG,CAAC;EACtBc,GAAGlC,MAAMmB,MAAMe,GAAG,GAAG,CAAC;CACxB,CAAC;CAED,OAAO;EAAER,GAAGxB,aAAawB,CAAC;EAAGN,GAAGpB,MAAMoB,GAAG,GAAG,CAAC;EAAGO,GAAG3B,MAAM2B,GAAG,GAAG,CAAC;CAAE;AACpE;AAEA,SAAgBQ,QAAQhB,OAA+B;CACrD,MAAM,EAAEe,MAAM3C,aAAa4B,KAAK;CAEhC,OAAO;EAAEO,GAAGP,MAAMO;EAAGN,GAAGD,MAAMC;EAAGc,GAAGlC,MAAMkC,GAAG,GAAG,CAAC;CAAE;AACrD;AAEA,SAAgBE,QAAQjB,OAA+B;CACrD,MAAM,CAACQ,GAAGU,GAAGX,KAAKlC,aAAa2B,MAAMO,GAAGP,MAAMC,GAAGD,MAAMQ,CAAC;CAExD,OAAO;EAAEA;EAAGU;EAAGX,GAAGxB,aAAawB,CAAC;CAAE;AACpC;AAEA,SAAgBY,MAAMnB,OAA2B;CAC/C,OAAOtB,UAAUJ,YAAY0B,MAAMO,GAAGP,MAAMC,GAAGD,MAAMQ,CAAC,CAAC;AACzD;;;;;;;;;AAUA,SAAgBY,WAAWC,OAAkC;CAC3D,MAAMC,OAAOD,MAAME,KAAK,CAAC,CAACC,YAAY;CAEtC,IAAI,CAACF,MAAM,OAAO;CAElB,IAAIA,KAAKG,WAAW,GAAG,GAAG;EACxB,MAAMC,SAASlD,cAAc8C,IAAI;EAEjC,OAAOI,SAASjB,QAAQrB,YAAYsC,OAAOC,GAAG,CAAC,IAAI;CACrD;CAEA,MAAMD,SAASzC,mBAAmBqC,IAAI;CAEtC,IAAI,CAACI,UAAUA,OAAOE,KAAKC,WAAW,GAAG,OAAO;CAEhD,MAAM,EAAEC,MAAMF,SAASF;CAEvB,QAAQI,MAAR;EACE,KAAK;EACL,KAAK,QAAQ;GACX,MAAM,CAACpB,GAAGC,GAAGP,KAAKwB,KAAKG,KAAKC,QAAQ9C,cAAc8C,KAAK,GAAG,CAAC;GAE3D,OAAOpD,OAAO8B,GAAGC,GAAGP,CAAC,IAAI,OAAOK,QAAQ;IAAEC;IAAGC;IAAGP;GAAE,CAAC;EACrD;EACA,KAAK;EACL,KAAK,QAAQ;GACX,MAAMG,IAAIpB,QAAQyC,KAAK,EAAE;GACzB,MAAM3B,IAAIf,cAAc0C,KAAK,IAAI,GAAG,IAAI;GACxC,MAAMpB,IAAItB,cAAc0C,KAAK,IAAI,GAAG,IAAI;GAExC,IAAIhD,OAAO2B,GAAGN,GAAGO,CAAC,GAAG,OAAO;GAE5B,OAAOC,QAAQrB,YAAYlB,UAAUqC,GAAG1B,MAAMoB,GAAG,GAAG,CAAC,GAAGpB,MAAM2B,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;EAC1E;EACA,KAAK,SAAS;GACZ,MAAMD,IAAIpB,QAAQyC,KAAK,EAAE;GACzB,MAAM3B,IAAIf,cAAc0C,KAAK,IAAI,GAAG,IAAI;GACxC,MAAMpB,IAAItB,cAAc0C,KAAK,IAAI,GAAG,IAAI;GAExC,IAAIhD,OAAO2B,GAAGN,GAAGO,CAAC,GAAG,OAAO;GAE5B,OAAO;IAAED;IAAGN,GAAGpB,MAAMoB,GAAG,GAAG,CAAC;IAAGO,GAAG3B,MAAM2B,GAAG,GAAG,CAAC;GAAE;EACnD;EACA,KAAK,SAAS;GACZ,MAAMD,IAAIpB,QAAQyC,KAAK,EAAE;GACzB,MAAM3B,IAAIf,cAAc0C,KAAK,IAAI,GAAG,IAAI;GACxC,MAAMb,IAAI7B,cAAc0C,KAAK,IAAI,GAAG,IAAI;GAExC,IAAIhD,OAAO2B,GAAGN,GAAGc,CAAC,GAAG,OAAO;GAE5B,OAAOD,UAAU;IAAEP;IAAGN;IAAGc;GAAE,CAAC;EAC9B;EACA,KAAK,SAAS;GAEZ,MAAMP,IAAItB,cAAc0C,KAAK,IAAI,CAAC;GAClC,MAAMV,IAAIhC,cAAc0C,KAAK,IAAI,EAAG;GACpC,MAAMrB,IAAIpB,QAAQyC,KAAK,EAAE;GAEzB,OAAOhD,OAAO4B,GAAGU,GAAGX,CAAC,IAAI,OAAOvB,aAAa;IAAEwB;IAAGU;IAAGX;GAAE,CAAC;EAC1D;EACA,SACE,OAAO;CACX;AACF;;AAGA,SAAgB0B,YAAYjC,OAAmBkC,QAA6B;CAG1E,MAAMC,OAAOpC,aAAaC,KAAK;CAC/B,MAAMoC,MAAMD,OAAO,IAAInC,MAAMO;CAC7B,MAAM8B,aAAarC,MAAMC;CACzB,MAAMqC,YAAYtC,MAAMQ;CAExB,QAAQ0B,QAAR;EACE,KAAK,OACH,OAAOjE,UAAUmE,KAAKC,YAAYC,SAAS;EAC7C,KAAK,OAAO;GACV,MAAMhB,OAAOzD,UAAUuE,KAAKC,YAAYC,SAAS;GAKjD,OAAOH,OAAOb,KAAKiB,QAAQ,cAAc,IAAI,IAAIjB;EACnD;EACA,KAAK,SACH,OAAOxD,YAAYsE,KAAKC,YAAYC,SAAS;EAC/C,KAAK,SACH,OAAOvE,YAAYqE,KAAKC,YAAYrB,QAAQhB,KAAK,CAAC,CAACe,CAAC;EACtD,KAAK,SACH,OAAO/C,YAAYoE,KAAKC,YAAYC,SAAS;EAC/C,SACE,OAAOnB,MAAMnB,KAAK;CACtB;AACF;;;;;AAMA,SAAgBwC,aAAanB,OAAmC;CAC9D,MAAMC,OAAOD,MAAME,KAAK,CAAC,CAACC,YAAY;CAEtC,IAAI,CAACJ,WAAWE,IAAI,GAAG,OAAO;CAE9B,IAAIA,KAAKG,WAAW,GAAG,GAAG,OAAO;CAIjC,QAFaxC,mBAAmBqC,IAAI,CAAC,EAAEQ,MAEvC;EACE,KAAK;EACL,KAAK,QACH,OAAO;EACT,KAAK;EACL,KAAK,QACH,OAAO;EACT,KAAK,SACH,OAAO;EACT,KAAK,SACH,OAAO;EACT,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;;;;;AAQA,SAAgBW,oBAAoBzC,OAA0C;CAC5E,MAAM0C,YAAYjE,+BAChBN,kBAAkB6B,MAAMO,GAAGP,MAAMC,GAAGD,MAAMQ,CAAC,CAC7C;CAEA,OAAO5C,2BAA2B8E,WAAW,CAAC,KAC5C9E,2BAA2B,GAAG8E,SAAS,IACrC,YACA;AACN"}

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

@@ -1,6 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
-
 //#region src/components/fields/color/context.ts
 /**
 * Marks the subtree inside a color popover.
@@ -14,7 +13,7 @@ const ColorPopoverContext = createContext(false);
 function useIsInsideColorPopover() {
 	return useContext(ColorPopoverContext);
 }
-
 //#endregion
 export { ColorPopoverContext, useIsInsideColorPopover };
+
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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,KAAK;AAEtD,SAAOG,0BAAA;CAAA,OACEF,WAAWC,mBAAmB;AAAC"}

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

@@ -1,3 +1,4 @@
 
 import { COLOR_FORMATS, ColorFormat } from "./color.js";
-import { COLOR_SPACES, ColorSpace } from "./channels.js";
+import { COLOR_SPACES, ColorSpace } from "./channels.js";
+export { COLOR_FORMATS, COLOR_SPACES, type ColorFormat as ColorPickerFormat, type ColorSpace as ColorPickerSpace };

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

@@ -3,20 +3,20 @@ import { AriaTextFieldProps, CubeBufferedValueProps, CubeTextInputBaseProps, DEF
 import { CubeSearchInputProps, SearchFieldProps, SearchInput, useSearchField, useSearchFieldState } from "./SearchInput/SearchInput.js";
 import { CubeListBoxProps, ListBox } from "./ListBox/ListBox.js";
 import "./ListBox/index.js";
-import { AriaSelectProps, CubeSelectBaseProps, CubeSelectProps, ListBoxElement, ListBoxPopup, __Select, useSelectState } from "./Select/Select.js";
-import { CubeFileInputProps, _FileInput } from "./FileInput/FileInput.js";
-import { AriaNumberFieldProps, CubeNumberInputProps, _NumberInput } from "./NumberInput/NumberInput.js";
-import { CubePasswordInputProps, _PasswordInput } from "./PasswordInput/PasswordInput.js";
-import { CubeTextAreaProps, _TextArea } from "./TextArea/TextArea.js";
+import { AriaSelectProps, CubeSelectBaseProps, CubeSelectProps, ListBoxElement, ListBoxPopup, Select as __Select, useSelectState } from "./Select/Select.js";
+import { CubeFileInputProps, FileInput as _FileInput } from "./FileInput/FileInput.js";
+import { AriaNumberFieldProps, CubeNumberInputProps, NumberInput as _NumberInput } from "./NumberInput/NumberInput.js";
+import { CubePasswordInputProps, PasswordInput as _PasswordInput } from "./PasswordInput/PasswordInput.js";
+import { CubeTextAreaProps, TextArea as _TextArea } from "./TextArea/TextArea.js";
 import { CubeTextInputProps, TextInput, useTextField } from "./TextInput/TextInput.js";
 import "./TextInput/index.js";
 import { Input } from "./Input/Input.js";
 import "./Input/index.js";
 import "./TextArea/index.js";
-import { ActiveToken, CommandTextAreaFilterFn, CommandTrigger, CubeCommandTextAreaProps, _CommandTextArea } from "./CommandTextArea/CommandTextArea.js";
+import { ActiveToken, CommandTextArea as _CommandTextArea, CommandTextAreaFilterFn, CommandTrigger, CubeCommandTextAreaProps } from "./CommandTextArea/CommandTextArea.js";
 import "./CommandTextArea/index.js";
-import { CubeCheckboxGroupProps, _CheckboxGroup } from "./Checkbox/CheckboxGroup.js";
-import { AriaCheckboxProps, CubeCheckboxProps, __Checkbox, useCheckbox } from "./Checkbox/Checkbox.js";
+import { CheckboxGroup as _CheckboxGroup, CubeCheckboxGroupProps } from "./Checkbox/CheckboxGroup.js";
+import { AriaCheckboxProps, Checkbox as __Checkbox, CubeCheckboxProps, useCheckbox } from "./Checkbox/Checkbox.js";
 import "./Checkbox/index.js";
 import { COLOR_FORMATS, ColorFormat } from "./color/color.js";
 import { COLOR_SPACES, ColorSpace } from "./color/channels.js";
@@ -30,33 +30,33 @@ import "./ColorPicker/index.js";
 import { ColorSwatch, CubeColorSwatchProps } from "./ColorSwatch/ColorSwatch.js";
 import "./ColorSwatch/index.js";
 import { DateFieldBase, Granularity } from "./DatePicker/types.js";
-import { CubeTimeInputProps, _TimeInput } from "./DatePicker/TimeInput.js";
-import { CubeDateInputProps, _DateInput } from "./DatePicker/DateInput.js";
-import { CubeDatePickerProps, _DatePicker } from "./DatePicker/DatePicker.js";
-import { CubeDateRangePickerProps, _DateRangePicker } from "./DatePicker/DateRangePicker.js";
+import { CubeTimeInputProps, TimeInput as _TimeInput } from "./DatePicker/TimeInput.js";
+import { CubeDateInputProps, DateInput as _DateInput } from "./DatePicker/DateInput.js";
+import { CubeDatePickerProps, DatePicker as _DatePicker } from "./DatePicker/DatePicker.js";
+import { CubeDateRangePickerProps, DateRangePicker as _DateRangePicker } from "./DatePicker/DateRangePicker.js";
 import { parseAbsoluteDate } from "./DatePicker/parseDate.js";
-import { CubeDateRangeSeparatedPickerProps, _DateRangeSeparatedPicker } from "./DatePicker/DateRangeSeparatedPicker.js";
+import { CubeDateRangeSeparatedPickerProps, DateRangeSeparatedPicker as _DateRangeSeparatedPicker } from "./DatePicker/DateRangeSeparatedPicker.js";
 import { PickerType, formatPeriod, getQuarter, getWeekNumber, snapToPeriod } from "./DatePicker/period.js";
 import { CubePeriodPickerProps, PeriodPicker } from "./DatePicker/PeriodPicker.js";
-import { CubeMonthPickerProps, _MonthPicker } from "./DatePicker/MonthPicker.js";
-import { CubeQuarterPickerProps, _QuarterPicker } from "./DatePicker/QuarterPicker.js";
-import { CubeYearPickerProps, _YearPicker } from "./DatePicker/YearPicker.js";
-import { CubeWeekPickerProps, _WeekPicker } from "./DatePicker/WeekPicker.js";
+import { CubeMonthPickerProps, MonthPicker as _MonthPicker } from "./DatePicker/MonthPicker.js";
+import { CubeQuarterPickerProps, QuarterPicker as _QuarterPicker } from "./DatePicker/QuarterPicker.js";
+import { CubeYearPickerProps, YearPicker as _YearPicker } from "./DatePicker/YearPicker.js";
+import { CubeWeekPickerProps, WeekPicker as _WeekPicker } from "./DatePicker/WeekPicker.js";
 import "./DatePicker/index.js";
-import { CubeRadioGroupProps, _RadioGroup } from "./RadioGroup/RadioGroup.js";
-import { AriaRadioProps, CubeRadioProps, __Radio, useRadio } from "./RadioGroup/Radio.js";
+import { CubeRadioGroupProps, RadioGroup as _RadioGroup } from "./RadioGroup/RadioGroup.js";
+import { AriaRadioProps, CubeRadioProps, Radio as __Radio, useRadio } from "./RadioGroup/Radio.js";
 import "./RadioGroup/index.js";
 import "./SearchInput/index.js";
 import { AriaSliderProps, CubeSliderBaseProps } from "./Slider/types.js";
-import { CubeRangeSliderProps, __RangeSlider } from "./Slider/RangeSlider.js";
-import { CubeSliderProps, __Slider } from "./Slider/Slider.js";
-import { CubeHueSliderProps, __HueSlider } from "./Slider/HueSlider.js";
+import { CubeRangeSliderProps, RangeSlider as __RangeSlider } from "./Slider/RangeSlider.js";
+import { CubeSliderProps, Slider as __Slider } from "./Slider/Slider.js";
+import { CubeHueSliderProps, HueSlider as __HueSlider } from "./Slider/HueSlider.js";
 import { SliderState, useSliderState } from "./Slider/index.js";
-import { AriaSwitchProps, CubeSwitchProps, _Switch, useSwitch } from "./Switch/Switch.js";
+import { AriaSwitchProps, CubeSwitchProps, Switch as _Switch, useSwitch } from "./Switch/Switch.js";
 import "./Select/index.js";
 import { ComboBox, CubeComboBoxProps } from "./ComboBox/ComboBox.js";
 import "./ComboBox/index.js";
-import { CubeTagInputProps, TagInputPopoverTrigger, TagValidationResult, _TagInput } from "./TagInput/TagInput.js";
+import { CubeTagInputProps, TagInput as _TagInput, TagInputPopoverTrigger, TagValidationResult } from "./TagInput/TagInput.js";
 import "./TagInput/index.js";
 import { CubeSearchComboBoxProps, SearchComboBox } from "./SearchComboBox/SearchComboBox.js";
 import "./SearchComboBox/index.js";
@@ -66,5 +66,6 @@ import { CubeFilterPickerProps, FilterPicker } from "./FilterPicker/FilterPicker
 import "./FilterPicker/index.js";
 import { CubePickerProps, Picker } from "./Picker/Picker.js";
 import "./Picker/index.js";
-import { CubeTextInputMapperInputProps, CubeTextInputMapperProps, _TextInputMapper } from "./TextInputMapper/TextInputMapper.js";
-import "./TextInputMapper/index.js";
+import { CubeTextInputMapperInputProps, CubeTextInputMapperProps, TextInputMapper as _TextInputMapper } from "./TextInputMapper/TextInputMapper.js";
+import "./TextInputMapper/index.js";
+export { type ActiveToken, type AriaCheckboxProps, type AriaNumberFieldProps, type AriaRadioProps, type AriaSelectProps, type AriaSliderProps, type AriaSwitchProps, type AriaTextFieldProps, COLOR_FORMATS, COLOR_SPACES, __Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, ColorInput, type ColorInputFormatMode, ColorPicker, type ColorFormat as ColorPickerFormat, type ColorSpace as ColorPickerSpace, ColorSwatch, ColorSwatchGroup, ComboBox, _CommandTextArea as CommandTextArea, type CommandTextAreaFilterFn, type CommandTrigger, CubeBufferedValueProps, CubeCheckboxGroupProps, CubeCheckboxProps, type CubeColorInputProps, type CubeColorPickerProps, type CubeColorSwatchGroupProps, type CubeColorSwatchItem, type CubeColorSwatchProps, type CubeComboBoxProps, type CubeCommandTextAreaProps, CubeDateInputProps, CubeDatePickerProps, CubeDateRangePickerProps, CubeDateRangeSeparatedPickerProps, CubeFileInputProps, CubeFilterListBoxProps, CubeFilterPickerProps, CubeHueSliderProps, CubeListBoxProps, CubeMonthPickerProps, CubeNumberInputProps, CubePasswordInputProps, CubePeriodPickerProps, type CubePickerProps, CubeQuarterPickerProps, CubeRadioGroupProps, CubeRadioProps, CubeRangeSliderProps, type CubeSearchComboBoxProps, CubeSearchInputProps, CubeSelectBaseProps, CubeSelectProps, CubeSliderBaseProps, CubeSliderProps, CubeSwitchProps, type CubeTagInputProps, CubeTextAreaProps, CubeTextInputBaseProps, CubeTextInputMapperInputProps, CubeTextInputMapperProps, CubeTextInputProps, CubeTimeInputProps, CubeWeekPickerProps, CubeYearPickerProps, DEFAULT_INPUT_STYLES, DateFieldBase, _DateInput as DateInput, _DatePicker as DatePicker, _DateRangePicker as DateRangePicker, _DateRangeSeparatedPicker as DateRangeSeparatedPicker, _FileInput as FileInput, FilterListBox, FilterPicker, Granularity, __HueSlider as HueSlider, INPUT_WRAPPER_STYLES, Input, ListBox, ListBoxElement, ListBoxPopup, _MonthPicker as MonthPicker, _NumberInput as NumberInput, _PasswordInput as PasswordInput, PeriodPicker, Picker, PickerType, _QuarterPicker as QuarterPicker, __Radio as Radio, _RadioGroup as RadioGroup, __RangeSlider as RangeSlider, SearchComboBox, type SearchFieldProps, SearchInput, __Select as Select, __Slider as Slider, type SliderState, _Switch as Switch, _TagInput as TagInput, type TagInputPopoverTrigger, type TagValidationResult, _TextArea as TextArea, TextInput, TextInputBase, _TextInputMapper as TextInputMapper, _TimeInput as TimeInput, _WeekPicker as WeekPicker, _YearPicker as YearPicker, formatPeriod, getQuarter, getWeekNumber, parseAbsoluteDate, snapToPeriod, useCheckbox, useRadio, useSearchField, useSearchFieldState, useSelectState, useSliderState, useSwitch, useTextField };

package/dist/components/fields/option-origin-press.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.0 | Cube Dev Team */
 //#region src/components/fields/option-origin-press.ts
 let activePress = null;
 function isInside(rect, event) {
@@ -72,7 +72,7 @@ function useOptionOriginPress(options) {
 		wrapPointerUp
 	};
 }
-
 //#endregion
 export { useOptionOriginPress };
+
 //# sourceMappingURL=option-origin-press.js.map

package/dist/components/fields/option-origin-press.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-origin-press.js","names":["SelectionManager","Key","PointerEvent","ReactPointerEvent","RefObject","OriginPress","element","HTMLElement","rect","DOMRect","settle","event","isCancelled","activePress","isInside","clientX","left","right","clientY","top","bottom","cancelPress","forgetPress","window","removeEventListener","settleOnRelease","press","button","target","Node","contains","isConnected","useOptionOriginPress","options","key","ref","manager","isDisabled","onSettle","pressTarget","EventTarget","onPointerDown","current","pointerType","getBoundingClientRect","releaseEvent","canSelectItem","select","addEventListener","wrapPointerUp","handler","E"],"sources":["../../../src/components/fields/option-origin-press.ts"],"sourcesContent":["import type { SelectionManager } from '@react-stately/selection';\nimport type { Key } from '@react-types/shared';\nimport type { PointerEvent as ReactPointerEvent, RefObject } from 'react';\n\n/**\n * A mouse press on a list option, from pointer down until the pointer is\n * released anywhere in the window.\n */\ninterface OriginPress {\n  element: HTMLElement;\n  /** The option's box when the press started. */\n  rect: DOMRect;\n  /** Selects the option, as releasing on it would. */\n  settle: (event: PointerEvent) => void;\n  /** Escape or another key ended the press early. */\n  isCancelled: boolean;\n}\n\n// One mouse press at a time, so one record serves every list on the page.\nlet activePress: OriginPress | null = null;\n\nfunction isInside(rect: DOMRect, event: PointerEvent) {\n  return (\n    event.clientX >= rect.left &&\n    event.clientX <= rect.right &&\n    event.clientY >= rect.top &&\n    event.clientY <= rect.bottom\n  );\n}\n\nfunction cancelPress() {\n  if (activePress) activePress.isCancelled = true;\n}\n\n// Also runs on `pointercancel`, after which no `pointerup` comes, and on the\n// next `pointerdown`, in case a handler stopped the last `pointerup` before it\n// reached the window. A stale record would swallow the next press.\nfunction forgetPress() {\n  activePress = null;\n  window.removeEventListener('pointerdown', forgetPress, true);\n  window.removeEventListener('pointerup', settleOnRelease, true);\n  window.removeEventListener('pointerup', forgetPress);\n  window.removeEventListener('pointercancel', forgetPress, true);\n  window.removeEventListener('keydown', cancelPress, true);\n}\n\n// Capture phase, before React and the options' own press handling. When the\n// list moved under the pointer (it was still opening, or scrolled while\n// closing), the option the press started on may no longer be under it. Select\n// that option here if the pointer comes up inside the box it had when the\n// press started.\nfunction settleOnRelease(event: PointerEvent) {\n  const press = activePress;\n\n  if (!press || press.isCancelled || event.button !== 0) return;\n\n  const target = event.target instanceof Node ? event.target : null;\n\n  // Released on the option itself: React Aria selects it as usual.\n  if ((target && press.element.contains(target)) || !press.element.isConnected)\n    return;\n\n  if (isInside(press.rect, event)) press.settle(event);\n}\n\n/**\n * Makes a mouse press on a list option pick the option it started on.\n *\n * The lists select on press up, so that a press that opened a picker can end\n * on an option. React Aria then selects whichever option the pointer is\n * released over, or none when the press must end where it started. If the\n * list moves between press and release (it is still animating in, or scrolls\n * while closing), the release lands on a neighbour or on nothing. With this\n * hook a mouse press selects the option it started on when the pointer comes\n * up inside that option's original box. A release over another option never\n * selects that option, and a press that Escape or another key interrupted\n * doesn't pick the moved option.\n *\n * Put `onPointerDown` on the option element and wrap the option's own\n * `onPointerUp` with `wrapPointerUp`. `onSettle` runs after a moved press\n * selects the option, with the element the press started on, for the side\n * effects a click on the option would have had.\n */\nexport function useOptionOriginPress(options: {\n  key: Key;\n  ref: RefObject<HTMLElement | null>;\n  manager: SelectionManager;\n  isDisabled?: boolean;\n  onSettle?: (pressTarget: EventTarget | null) => void;\n}) {\n  const { key, ref, manager, isDisabled, onSettle } = options;\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLElement>) => {\n    const element = ref.current;\n    const pressTarget = event.target;\n\n    forgetPress();\n\n    if (\n      isDisabled ||\n      !element ||\n      event.pointerType !== 'mouse' ||\n      event.button !== 0\n    ) {\n      return;\n    }\n\n    activePress = {\n      element,\n      rect: element.getBoundingClientRect(),\n      settle(releaseEvent) {\n        if (!manager.canSelectItem(key)) return;\n\n        manager.select(key, releaseEvent);\n        onSettle?.(pressTarget);\n      },\n      isCancelled: false,\n    };\n\n    window.addEventListener('pointerdown', forgetPress, true);\n    window.addEventListener('pointerup', settleOnRelease, true);\n    // Bubble phase: after every option has seen the release.\n    window.addEventListener('pointerup', forgetPress);\n    window.addEventListener('pointercancel', forgetPress, true);\n    window.addEventListener('keydown', cancelPress, true);\n  };\n\n  const wrapPointerUp =\n    <E extends ReactPointerEvent<HTMLElement>>(\n      handler: ((event: E) => void) | undefined,\n    ) =>\n    (event: E) => {\n      // The press started on another option, or was cancelled: this release\n      // doesn't pick anything.\n      if (\n        activePress &&\n        (activePress.isCancelled || activePress.element !== ref.current)\n      ) {\n        return;\n      }\n\n      handler?.(event);\n    };\n\n  return { onPointerDown, wrapPointerUp };\n}\n"],"mappings":";;AAmBA,IAAIa,cAAkC;AAEtC,SAASC,SAASN,MAAeG,OAAqB;AACpD,QACEA,MAAMI,WAAWP,KAAKQ,QACtBL,MAAMI,WAAWP,KAAKS,SACtBN,MAAMO,WAAWV,KAAKW,OACtBR,MAAMO,WAAWV,KAAKY;;AAI1B,SAASC,cAAc;AACrB,KAAIR,YAAaA,aAAYD,cAAc;;AAM7C,SAASU,cAAc;AACrBT,eAAc;AACdU,QAAOC,oBAAoB,eAAeF,aAAa,KAAK;AAC5DC,QAAOC,oBAAoB,aAAaC,iBAAiB,KAAK;AAC9DF,QAAOC,oBAAoB,aAAaF,YAAY;AACpDC,QAAOC,oBAAoB,iBAAiBF,aAAa,KAAK;AAC9DC,QAAOC,oBAAoB,WAAWH,aAAa,KAAK;;AAQ1D,SAASI,gBAAgBd,OAAqB;CAC5C,MAAMe,QAAQb;AAEd,KAAI,CAACa,SAASA,MAAMd,eAAeD,MAAMgB,WAAW,EAAG;CAEvD,MAAMC,SAASjB,MAAMiB,kBAAkBC,OAAOlB,MAAMiB,SAAS;AAG7D,KAAKA,UAAUF,MAAMpB,QAAQwB,SAASF,OAAO,IAAK,CAACF,MAAMpB,QAAQyB,YAC/D;AAEF,KAAIjB,SAASY,MAAMlB,MAAMG,MAAM,CAAEe,OAAMhB,OAAOC,MAAM;;;;;;;;;;;;;;;;;;;;AAqBtD,SAAgBqB,qBAAqBC,SAMlC;CACD,MAAM,EAAEC,KAAKC,KAAKC,SAASC,YAAYC,aAAaL;CAEpD,MAAMQ,iBAAiB9B,UAA0C;EAC/D,MAAML,UAAU6B,IAAIO;EACpB,MAAMH,cAAc5B,MAAMiB;AAE1BN,eAAa;AAEb,MACEe,cACA,CAAC/B,WACDK,MAAMgC,gBAAgB,WACtBhC,MAAMgB,WAAW,EAEjB;AAGFd,gBAAc;GACZP;GACAE,MAAMF,QAAQsC,uBAAuB;GACrClC,OAAOmC,cAAc;AACnB,QAAI,CAACT,QAAQU,cAAcZ,IAAI,CAAE;AAEjCE,YAAQW,OAAOb,KAAKW,aAAa;AACjCP,eAAWC,YAAY;;GAEzB3B,aAAa;GACd;AAEDW,SAAOyB,iBAAiB,eAAe1B,aAAa,KAAK;AACzDC,SAAOyB,iBAAiB,aAAavB,iBAAiB,KAAK;AAE3DF,SAAOyB,iBAAiB,aAAa1B,YAAY;AACjDC,SAAOyB,iBAAiB,iBAAiB1B,aAAa,KAAK;AAC3DC,SAAOyB,iBAAiB,WAAW3B,aAAa,KAAK;;CAGvD,MAAM4B,iBAEFC,aAEDvC,UAAa;AAGZ,MACEE,gBACCA,YAAYD,eAAeC,YAAYP,YAAY6B,IAAIO,SAExD;AAGFQ,YAAUvC,MAAM;;AAGpB,QAAO;EAAE8B;EAAeQ;EAAe"}
+{"version":3,"file":"option-origin-press.js","names":["SelectionManager","Key","PointerEvent","ReactPointerEvent","RefObject","OriginPress","element","HTMLElement","rect","DOMRect","settle","event","isCancelled","activePress","isInside","clientX","left","right","clientY","top","bottom","cancelPress","forgetPress","window","removeEventListener","settleOnRelease","press","button","target","Node","contains","isConnected","useOptionOriginPress","options","key","ref","manager","isDisabled","onSettle","pressTarget","EventTarget","onPointerDown","current","pointerType","getBoundingClientRect","releaseEvent","canSelectItem","select","addEventListener","wrapPointerUp","handler","E"],"sources":["../../../src/components/fields/option-origin-press.ts"],"sourcesContent":["import type { SelectionManager } from '@react-stately/selection';\nimport type { Key } from '@react-types/shared';\nimport type { PointerEvent as ReactPointerEvent, RefObject } from 'react';\n\n/**\n * A mouse press on a list option, from pointer down until the pointer is\n * released anywhere in the window.\n */\ninterface OriginPress {\n  element: HTMLElement;\n  /** The option's box when the press started. */\n  rect: DOMRect;\n  /** Selects the option, as releasing on it would. */\n  settle: (event: PointerEvent) => void;\n  /** Escape or another key ended the press early. */\n  isCancelled: boolean;\n}\n\n// One mouse press at a time, so one record serves every list on the page.\nlet activePress: OriginPress | null = null;\n\nfunction isInside(rect: DOMRect, event: PointerEvent) {\n  return (\n    event.clientX >= rect.left &&\n    event.clientX <= rect.right &&\n    event.clientY >= rect.top &&\n    event.clientY <= rect.bottom\n  );\n}\n\nfunction cancelPress() {\n  if (activePress) activePress.isCancelled = true;\n}\n\n// Also runs on `pointercancel`, after which no `pointerup` comes, and on the\n// next `pointerdown`, in case a handler stopped the last `pointerup` before it\n// reached the window. A stale record would swallow the next press.\nfunction forgetPress() {\n  activePress = null;\n  window.removeEventListener('pointerdown', forgetPress, true);\n  window.removeEventListener('pointerup', settleOnRelease, true);\n  window.removeEventListener('pointerup', forgetPress);\n  window.removeEventListener('pointercancel', forgetPress, true);\n  window.removeEventListener('keydown', cancelPress, true);\n}\n\n// Capture phase, before React and the options' own press handling. When the\n// list moved under the pointer (it was still opening, or scrolled while\n// closing), the option the press started on may no longer be under it. Select\n// that option here if the pointer comes up inside the box it had when the\n// press started.\nfunction settleOnRelease(event: PointerEvent) {\n  const press = activePress;\n\n  if (!press || press.isCancelled || event.button !== 0) return;\n\n  const target = event.target instanceof Node ? event.target : null;\n\n  // Released on the option itself: React Aria selects it as usual.\n  if ((target && press.element.contains(target)) || !press.element.isConnected)\n    return;\n\n  if (isInside(press.rect, event)) press.settle(event);\n}\n\n/**\n * Makes a mouse press on a list option pick the option it started on.\n *\n * The lists select on press up, so that a press that opened a picker can end\n * on an option. React Aria then selects whichever option the pointer is\n * released over, or none when the press must end where it started. If the\n * list moves between press and release (it is still animating in, or scrolls\n * while closing), the release lands on a neighbour or on nothing. With this\n * hook a mouse press selects the option it started on when the pointer comes\n * up inside that option's original box. A release over another option never\n * selects that option, and a press that Escape or another key interrupted\n * doesn't pick the moved option.\n *\n * Put `onPointerDown` on the option element and wrap the option's own\n * `onPointerUp` with `wrapPointerUp`. `onSettle` runs after a moved press\n * selects the option, with the element the press started on, for the side\n * effects a click on the option would have had.\n */\nexport function useOptionOriginPress(options: {\n  key: Key;\n  ref: RefObject<HTMLElement | null>;\n  manager: SelectionManager;\n  isDisabled?: boolean;\n  onSettle?: (pressTarget: EventTarget | null) => void;\n}) {\n  const { key, ref, manager, isDisabled, onSettle } = options;\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLElement>) => {\n    const element = ref.current;\n    const pressTarget = event.target;\n\n    forgetPress();\n\n    if (\n      isDisabled ||\n      !element ||\n      event.pointerType !== 'mouse' ||\n      event.button !== 0\n    ) {\n      return;\n    }\n\n    activePress = {\n      element,\n      rect: element.getBoundingClientRect(),\n      settle(releaseEvent) {\n        if (!manager.canSelectItem(key)) return;\n\n        manager.select(key, releaseEvent);\n        onSettle?.(pressTarget);\n      },\n      isCancelled: false,\n    };\n\n    window.addEventListener('pointerdown', forgetPress, true);\n    window.addEventListener('pointerup', settleOnRelease, true);\n    // Bubble phase: after every option has seen the release.\n    window.addEventListener('pointerup', forgetPress);\n    window.addEventListener('pointercancel', forgetPress, true);\n    window.addEventListener('keydown', cancelPress, true);\n  };\n\n  const wrapPointerUp =\n    <E extends ReactPointerEvent<HTMLElement>>(\n      handler: ((event: E) => void) | undefined,\n    ) =>\n    (event: E) => {\n      // The press started on another option, or was cancelled: this release\n      // doesn't pick anything.\n      if (\n        activePress &&\n        (activePress.isCancelled || activePress.element !== ref.current)\n      ) {\n        return;\n      }\n\n      handler?.(event);\n    };\n\n  return { onPointerDown, wrapPointerUp };\n}\n"],"mappings":";;AAmBA,IAAIa,cAAkC;AAEtC,SAASC,SAASN,MAAeG,OAAqB;CACpD,OACEA,MAAMI,WAAWP,KAAKQ,QACtBL,MAAMI,WAAWP,KAAKS,SACtBN,MAAMO,WAAWV,KAAKW,OACtBR,MAAMO,WAAWV,KAAKY;AAE1B;AAEA,SAASC,cAAc;CACrB,IAAIR,aAAaA,YAAYD,cAAc;AAC7C;AAKA,SAASU,cAAc;CACrBT,cAAc;CACdU,OAAOC,oBAAoB,eAAeF,aAAa,IAAI;CAC3DC,OAAOC,oBAAoB,aAAaC,iBAAiB,IAAI;CAC7DF,OAAOC,oBAAoB,aAAaF,WAAW;CACnDC,OAAOC,oBAAoB,iBAAiBF,aAAa,IAAI;CAC7DC,OAAOC,oBAAoB,WAAWH,aAAa,IAAI;AACzD;AAOA,SAASI,gBAAgBd,OAAqB;CAC5C,MAAMe,QAAQb;CAEd,IAAI,CAACa,SAASA,MAAMd,eAAeD,MAAMgB,WAAW,GAAG;CAEvD,MAAMC,SAASjB,MAAMiB,kBAAkBC,OAAOlB,MAAMiB,SAAS;CAG7D,IAAKA,UAAUF,MAAMpB,QAAQwB,SAASF,MAAM,KAAM,CAACF,MAAMpB,QAAQyB,aAC/D;CAEF,IAAIjB,SAASY,MAAMlB,MAAMG,KAAK,GAAGe,MAAMhB,OAAOC,KAAK;AACrD;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBqB,qBAAqBC,SAMlC;CACD,MAAM,EAAEC,KAAKC,KAAKC,SAASC,YAAYC,aAAaL;CAEpD,MAAMQ,iBAAiB9B,UAA0C;EAC/D,MAAML,UAAU6B,IAAIO;EACpB,MAAMH,cAAc5B,MAAMiB;EAE1BN,YAAY;EAEZ,IACEe,cACA,CAAC/B,WACDK,MAAMgC,gBAAgB,WACtBhC,MAAMgB,WAAW,GAEjB;EAGFd,cAAc;GACZP;GACAE,MAAMF,QAAQsC,sBAAsB;GACpClC,OAAOmC,cAAc;IACnB,IAAI,CAACT,QAAQU,cAAcZ,GAAG,GAAG;IAEjCE,QAAQW,OAAOb,KAAKW,YAAY;IAChCP,WAAWC,WAAW;GACxB;GACA3B,aAAa;EACf;EAEAW,OAAOyB,iBAAiB,eAAe1B,aAAa,IAAI;EACxDC,OAAOyB,iBAAiB,aAAavB,iBAAiB,IAAI;EAE1DF,OAAOyB,iBAAiB,aAAa1B,WAAW;EAChDC,OAAOyB,iBAAiB,iBAAiB1B,aAAa,IAAI;EAC1DC,OAAOyB,iBAAiB,WAAW3B,aAAa,IAAI;CACtD;CAEA,MAAM4B,iBAEFC,aAEDvC,UAAa;EAGZ,IACEE,gBACCA,YAAYD,eAAeC,YAAYP,YAAY6B,IAAIO,UAExD;EAGFQ,UAAUvC,KAAK;CACjB;CAEF,OAAO;EAAE8B;EAAeQ;CAAc;AACxC"}

package/dist/components/form/FieldWrapper/FieldWrapper.d.ts

@@ -4,41 +4,37 @@ import { LabelPosition, NecessityIndicator, ValidationProps } from "../../../sha
 import { CubeLabelProps } from "../Label.js";
 import "../index.js";
 import "../../../index.js";
-import * as _tenphi_tasty0 from "@tenphi/tasty";
-import * as react from "react";
-import { ReactNode } from "react";
-
 //#region src/components/form/FieldWrapper/FieldWrapper.d.ts
 /**
  * A wrapper for form fields to provide additional decoration for inputs.
  * @internal Do not use this component directly.
  */
-declare const FieldWrapper: react.ForwardRefExoticComponent<ValidationProps & {
+export declare const FieldWrapper: import("react").ForwardRefExoticComponent<ValidationProps & {
   as?: keyof HTMLElementTagNameMap;
-  styles?: _tenphi_tasty0.Styles;
+  styles?: import("@tenphi/tasty").Styles;
   isRequired?: boolean;
   isOptional?: boolean;
   isDisabled?: boolean;
   fieldProps?: Props;
   isHidden?: boolean;
   isBare?: boolean;
-  label?: ReactNode;
+  label?: import("react").ReactNode;
   labelPosition?: LabelPosition;
-  labelSuffix?: ReactNode;
-  labelStyles?: _tenphi_tasty0.Styles;
+  labelSuffix?: import("react").ReactNode;
+  labelStyles?: import("@tenphi/tasty").Styles;
   labelProps?: CubeLabelProps;
-  description?: ReactNode;
+  labelRef?: import("react").Ref<HTMLElement>;
+  description?: import("react").ReactNode;
   requiredMark?: boolean;
-  labelTooltip?: ReactNode;
-  extra?: ReactNode;
+  labelTooltip?: import("react").ReactNode;
+  extra?: import("react").ReactNode;
   necessityIndicator?: NecessityIndicator | null;
-  message?: string | ReactNode;
-  messageStyles?: _tenphi_tasty0.Styles;
-  errorMessage?: string | ReactNode;
-  Component?: react.ReactElement;
+  message?: string | import("react").ReactNode;
+  messageStyles?: import("@tenphi/tasty").Styles;
+  errorMessage?: string | import("react").ReactNode;
+  Component?: import("react").ReactElement;
   controlId?: string;
-  children?: ReactNode;
-} & react.RefAttributes<unknown>>;
+  children?: import("react").ReactNode;
+} & import("react").RefAttributes<unknown>>;
 //#endregion
-export { FieldWrapper };
 //# sourceMappingURL=FieldWrapper.d.ts.map