@cube-dev/ui-kit 0.155.0 → 0.157.0

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { getPaletteConfig, getPaletteVersion, resolvePaletteConfig } from "./palette-config.js";
 import { lazyStyles } from "./lazy-styles.js";
 import { glaze } from "@tenphi/glaze";

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.d.ts

@@ -24,7 +24,7 @@ interface TypographyPreset {
  * - `t1m`-`t4m`: Text styles medium weight
  * - `m1`-`m3`: Markdown/prose styles (larger line-height)
  * - `p1`-`p4`: Paragraph styles
- * - `c1`-`c2`: Caption/uppercase styles
+ * - `c1`-`c3`: Caption/uppercase styles
  * - `s2`-`s4`: Snippet / monospace styles (parallel to `t2`-`t4`)
  * - `tag`: Tag/badge typography
  * - `default`: Base text style

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.
@@ -9,7 +9,7 @@
 * - `t1m`-`t4m`: Text styles medium weight
 * - `m1`-`m3`: Markdown/prose styles (larger line-height)
 * - `p1`-`p4`: Paragraph styles
-* - `c1`-`c2`: Caption/uppercase styles
+* - `c1`-`c3`: Caption/uppercase styles
 * - `s2`-`s4`: Snippet / monospace styles (parallel to `t2`-`t4`)
 * - `tag`: Tag/badge typography
 * - `default`: Base text style
@@ -199,6 +199,15 @@ const TYPOGRAPHY_PRESETS = {
 		textTransform: "uppercase",
 		iconSize: "16px"
 	},
+	c3: {
+		fontSize: "11px",
+		lineHeight: "16px",
+		letterSpacing: "0.02em",
+		fontWeight: "600",
+		boldFontWeight: "700",
+		textTransform: "uppercase",
+		iconSize: "14px"
+	},
 	tag: {
 		fontSize: "12px",
 		lineHeight: "18px",

package/dist/tokens/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","names":[],"sources":["../../src/tokens/typography.ts"],"sourcesContent":["/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n */\nexport interface TypographyPreset {\n  fontSize: string;\n  lineHeight: string;\n  letterSpacing?: string;\n  fontWeight: string | number;\n  boldFontWeight?: string | number;\n  iconSize?: string;\n  textTransform?: string;\n  fontFamily?: string;\n  fontStyle?: string;\n}\n\n/**\n * Typography presets for headings, text, and special styles.\n *\n * Naming conventions:\n * - `h1`-`h6`: Headings (bold by default)\n * - `t1`-`t4`: Text styles (regular weight)\n * - `t1m`-`t4m`: Text styles medium weight\n * - `m1`-`m3`: Markdown/prose styles (larger line-height)\n * - `p1`-`p4`: Paragraph styles\n * - `c1`-`c2`: Caption/uppercase styles\n * - `s2`-`s4`: Snippet / monospace styles (parallel to `t2`-`t4`)\n * - `tag`: Tag/badge typography\n * - `default`: Base text style\n */\nexport const TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  // Text (basic)\n  text: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n  },\n\n  // Headings (h1-h6)\n  h1: {\n    fontSize: '36px',\n    lineHeight: '44px',\n    letterSpacing: '-0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '40px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '32px',\n    letterSpacing: '0em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '28px',\n  },\n  h3: {\n    fontSize: '20px',\n    lineHeight: '28px',\n    letterSpacing: '0em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '24px',\n  },\n  h4: {\n    fontSize: '18px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '22px',\n  },\n  h5: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '20px',\n  },\n  h6: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '20px',\n  },\n\n  // Text styles (t1-t4)\n  t1: {\n    fontSize: '18px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t2: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t2m: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t3: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  t3m: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  t4: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '16px',\n  },\n  t4m: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '16px',\n  },\n\n  // Markdown/prose styles (m1-m3)\n  m1: {\n    fontSize: '18px',\n    lineHeight: '32px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '22px',\n  },\n  m2: {\n    fontSize: '16px',\n    lineHeight: '28px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  m3: {\n    fontSize: '14px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n\n  // Paragraph styles (p1-p4)\n  p1: {\n    fontSize: '18px',\n    lineHeight: '28px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '22px',\n  },\n  p2: {\n    fontSize: '16px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  p3: {\n    fontSize: '14px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  p4: {\n    fontSize: '12px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '16px',\n  },\n\n  // Caption/uppercase styles (c1-c2)\n  c1: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    textTransform: 'uppercase',\n    iconSize: '18px',\n  },\n  c2: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    textTransform: 'uppercase',\n    iconSize: '16px',\n  },\n\n  // Tag typography\n  tag: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '16px',\n  },\n\n  // Snippet / monospace styles (s2-s4) — sized to parallel t2-t4\n  s2: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n    fontFamily: 'var(--font-mono)',\n  },\n  s3: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n    fontFamily: 'var(--font-mono)',\n  },\n  s4: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '16px',\n    fontFamily: 'var(--font-mono)',\n  },\n\n  // Default text style (references t3)\n  default: {\n    fontSize: 'var(--t3-font-size)',\n    lineHeight: 'var(--t3-line-height)',\n    letterSpacing: 'var(--t3-letter-spacing)',\n    fontWeight: 'var(--t3-font-weight)',\n    boldFontWeight: 'var(--t3-bold-font-weight)',\n    iconSize: 'var(--t3-icon-size)',\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"typography.js","names":[],"sources":["../../src/tokens/typography.ts"],"sourcesContent":["/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n */\nexport interface TypographyPreset {\n  fontSize: string;\n  lineHeight: string;\n  letterSpacing?: string;\n  fontWeight: string | number;\n  boldFontWeight?: string | number;\n  iconSize?: string;\n  textTransform?: string;\n  fontFamily?: string;\n  fontStyle?: string;\n}\n\n/**\n * Typography presets for headings, text, and special styles.\n *\n * Naming conventions:\n * - `h1`-`h6`: Headings (bold by default)\n * - `t1`-`t4`: Text styles (regular weight)\n * - `t1m`-`t4m`: Text styles medium weight\n * - `m1`-`m3`: Markdown/prose styles (larger line-height)\n * - `p1`-`p4`: Paragraph styles\n * - `c1`-`c3`: Caption/uppercase styles\n * - `s2`-`s4`: Snippet / monospace styles (parallel to `t2`-`t4`)\n * - `tag`: Tag/badge typography\n * - `default`: Base text style\n */\nexport const TYPOGRAPHY_PRESETS: Record<string, TypographyPreset> = {\n  // Text (basic)\n  text: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n  },\n\n  // Headings (h1-h6)\n  h1: {\n    fontSize: '36px',\n    lineHeight: '44px',\n    letterSpacing: '-0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '40px',\n  },\n  h2: {\n    fontSize: '24px',\n    lineHeight: '32px',\n    letterSpacing: '0em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '28px',\n  },\n  h3: {\n    fontSize: '20px',\n    lineHeight: '28px',\n    letterSpacing: '0em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '24px',\n  },\n  h4: {\n    fontSize: '18px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '22px',\n  },\n  h5: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '20px',\n  },\n  h6: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '20px',\n  },\n\n  // Text styles (t1-t4)\n  t1: {\n    fontSize: '18px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t2: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t2m: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  t3: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  t3m: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  t4: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '16px',\n  },\n  t4m: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '16px',\n  },\n\n  // Markdown/prose styles (m1-m3)\n  m1: {\n    fontSize: '18px',\n    lineHeight: '32px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '22px',\n  },\n  m2: {\n    fontSize: '16px',\n    lineHeight: '28px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  m3: {\n    fontSize: '14px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n\n  // Paragraph styles (p1-p4)\n  p1: {\n    fontSize: '18px',\n    lineHeight: '28px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '22px',\n  },\n  p2: {\n    fontSize: '16px',\n    lineHeight: '24px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n  },\n  p3: {\n    fontSize: '14px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n  },\n  p4: {\n    fontSize: '12px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '500',\n    boldFontWeight: '600',\n    iconSize: '16px',\n  },\n\n  // Caption/uppercase styles (c1-c3)\n  c1: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    textTransform: 'uppercase',\n    iconSize: '18px',\n  },\n  c2: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    textTransform: 'uppercase',\n    iconSize: '16px',\n  },\n  c3: {\n    fontSize: '11px',\n    lineHeight: '16px',\n    letterSpacing: '0.02em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    textTransform: 'uppercase',\n    iconSize: '14px',\n  },\n\n  // Tag typography\n  tag: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0.01em',\n    fontWeight: '600',\n    boldFontWeight: '700',\n    iconSize: '16px',\n  },\n\n  // Snippet / monospace styles (s2-s4) — sized to parallel t2-t4\n  s2: {\n    fontSize: '16px',\n    lineHeight: '22px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '20px',\n    fontFamily: 'var(--font-mono)',\n  },\n  s3: {\n    fontSize: '14px',\n    lineHeight: '20px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '18px',\n    fontFamily: 'var(--font-mono)',\n  },\n  s4: {\n    fontSize: '12px',\n    lineHeight: '18px',\n    letterSpacing: '0',\n    fontWeight: '400',\n    boldFontWeight: '600',\n    iconSize: '16px',\n    fontFamily: 'var(--font-mono)',\n  },\n\n  // Default text style (references t3)\n  default: {\n    fontSize: 'var(--t3-font-size)',\n    lineHeight: 'var(--t3-line-height)',\n    letterSpacing: 'var(--t3-letter-spacing)',\n    fontWeight: 'var(--t3-font-weight)',\n    boldFontWeight: 'var(--t3-bold-font-weight)',\n    iconSize: 'var(--t3-icon-size)',\n  },\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAa,qBAAuD;CAElE,MAAM;EACJ,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACb;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,KAAK;EACH,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,KAAK;EACH,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,KAAK;EACH,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,UAAU;EACX;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,UAAU;EACX;CAGD,KAAK;EACH,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CAGD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,YAAY;EACb;CACD,IAAI;EACF,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,YAAY;EACb;CAGD,SAAS;EACP,UAAU;EACV,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACF"}

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/index.d.ts

@@ -16,6 +16,7 @@ import { RenderCache, RenderCacheProps } from "./react/RenderCache.js";
 import { useLocalStorage } from "./react/useLocalStorage.js";
 import { DynamicIcon, IconRenderFn, ResolvedIcon, resolveIcon } from "./react/resolveIcon.js";
 import { useMergeStyles } from "./react/useMergeStyles.js";
+import { UseBufferedValueOptions, UseBufferedValueResult, useBufferedValue } from "./react/useBufferedValue.js";
 import { modAttrs } from "./react/index.js";
 import { chainRaf } from "./raf.js";
 import { toFlatTree } from "./tree.js";

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

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

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.d.ts

@@ -16,5 +16,6 @@ import { RenderCache, RenderCacheProps } from "./RenderCache.js";
 import { useLocalStorage } from "./useLocalStorage.js";
 import { DynamicIcon, IconRenderFn, ResolvedIcon, resolveIcon } from "./resolveIcon.js";
 import { useMergeStyles } from "./useMergeStyles.js";
+import { UseBufferedValueOptions, UseBufferedValueResult, useBufferedValue } from "./useBufferedValue.js";
 import { modAttrs } from "@tenphi/tasty";
 export { modAttrs };

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";
@@ -16,6 +16,7 @@ import { RenderCache } from "./RenderCache.js";
 import { useLocalStorage } from "./useLocalStorage.js";
 import { resolveIcon } from "./resolveIcon.js";
 import { useMergeStyles } from "./useMergeStyles.js";
+import { useBufferedValue } from "./useBufferedValue.js";
 import { modAttrs } from "@tenphi/tasty";
 
 export { modAttrs };

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useBufferedValue.d.ts

@@ -0,0 +1,56 @@
+
+//#region src/utils/react/useBufferedValue.d.ts
+interface UseBufferedValueOptions<T> {
+  /**
+   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour
+   * stops, a settings object. Defaults to the value itself, which is what strings want.
+   */
+  getKey?: (value: T) => unknown;
+  /** Nothing can be typed into a disabled control, so there is nothing to protect. */
+  isDisabled?: boolean;
+  /** Same for a read-only one. */
+  isReadOnly?: boolean;
+  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */
+  isBuffered?: boolean;
+}
+interface UseBufferedValueResult<T> {
+  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */
+  value: T | undefined;
+  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */
+  onChange: (next: T) => void;
+  /** Drop the buffer and let `value` win again. The text fields call it on blur. */
+  reset: () => void;
+}
+/**
+ * Holds a controlled value locally so a parent that echoes the new value back *late* cannot
+ * overwrite what the user is doing.
+ *
+ * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands
+ * it. If the parent hands back the pre-keystroke string — because its state reaches the component
+ * through a store that publishes a render late, or through a debounce, or a deferred update —
+ * React writes that stale string into the DOM node, and a native `value` assignment collapses the
+ * selection to the end. Typing in the middle of a field throws the caret to the end. The value
+ * eventually lands, so it looks like a caret bug rather than a data-flow one.
+ *
+ * The buffer keeps the typed text on screen until the parent catches up, while still emitting
+ * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,
+ * no swallowed calls.
+ *
+ * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array
+ * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature
+ * function they already have.
+ *
+ * ```tsx
+ * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });
+ *
+ * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />
+ * ```
+ *
+ * One case it cannot resolve: an external change that lands *between* an emit and its echo, and
+ * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a
+ * sequence number from the store rather than value matching.
+ */
+declare function useBufferedValue<T>(value: T | undefined, onChange?: (next: T) => void, options?: UseBufferedValueOptions<T>): UseBufferedValueResult<T>;
+//#endregion
+export { UseBufferedValueOptions, UseBufferedValueResult, useBufferedValue };
+//# sourceMappingURL=useBufferedValue.d.ts.map

package/dist/utils/react/useBufferedValue.js

@@ -0,0 +1,86 @@
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
+import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
+import { useCallback, useRef, useState } from "react";
+
+//#region src/utils/react/useBufferedValue.ts
+const NOTHING_PENDING = [];
+/**
+* Holds a controlled value locally so a parent that echoes the new value back *late* cannot
+* overwrite what the user is doing.
+*
+* **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands
+* it. If the parent hands back the pre-keystroke string — because its state reaches the component
+* through a store that publishes a render late, or through a debounce, or a deferred update —
+* React writes that stale string into the DOM node, and a native `value` assignment collapses the
+* selection to the end. Typing in the middle of a field throws the caret to the end. The value
+* eventually lands, so it looks like a caret bug rather than a data-flow one.
+*
+* The buffer keeps the typed text on screen until the parent catches up, while still emitting
+* `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,
+* no swallowed calls.
+*
+* Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array
+* of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature
+* function they already have.
+*
+* ```tsx
+* const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });
+*
+* <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />
+* ```
+*
+* One case it cannot resolve: an external change that lands *between* an emit and its echo, and
+* happens to equal a value still in flight, is read as our own echo. Telling those apart needs a
+* sequence number from the store rather than value matching.
+*/
+function useBufferedValue(value, onChange, options = {}) {
+	const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;
+	const isActive = isBuffered && value !== void 0 && !isDisabled && !isReadOnly;
+	const keyOf = (next) => getKey && next != null ? getKey(next) : next;
+	const valueKey = keyOf(value);
+	const [draft, setDraft] = useState(value);
+	const pendingRef = useRef(NOTHING_PENDING);
+	const seenKeyRef = useRef(valueKey);
+	const latestRef = useRef({
+		value,
+		onChange,
+		keyOf,
+		isActive
+	});
+	const pending = pendingRef.current;
+	const propMoved = valueKey !== seenKeyRef.current;
+	const echoAt = propMoved ? pending.indexOf(valueKey) : -1;
+	const isExternal = propMoved && echoAt < 0;
+	const rendered = isActive && !isExternal && pending.length > 0 ? draft : value;
+	useLayoutEffect$1(() => {
+		latestRef.current = {
+			value,
+			onChange,
+			keyOf,
+			isActive
+		};
+		seenKeyRef.current = valueKey;
+		if (!isActive || isExternal) pendingRef.current = NOTHING_PENDING;
+		else if (echoAt >= 0) pendingRef.current = pending.slice(echoAt + 1);
+	});
+	return {
+		value: rendered,
+		onChange: useCallback((next) => {
+			const { onChange: latestOnChange, keyOf: latestKeyOf, isActive: latestIsActive } = latestRef.current;
+			if (latestIsActive) {
+				pendingRef.current = [...pendingRef.current, latestKeyOf(next)];
+				setDraft(next);
+			}
+			latestOnChange?.(next);
+		}, []),
+		reset: useCallback(() => {
+			const { value: latestValue } = latestRef.current;
+			pendingRef.current = NOTHING_PENDING;
+			setDraft(latestValue);
+		}, [])
+	};
+}
+
+//#endregion
+export { useBufferedValue };
+//# sourceMappingURL=useBufferedValue.js.map

package/dist/utils/react/useBufferedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBufferedValue.js","names":[],"sources":["../../../src/utils/react/useBufferedValue.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nconst NOTHING_PENDING: unknown[] = [];\n\nexport interface UseBufferedValueOptions<T> {\n  /**\n   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour\n   * stops, a settings object. Defaults to the value itself, which is what strings want.\n   */\n  getKey?: (value: T) => unknown;\n  /** Nothing can be typed into a disabled control, so there is nothing to protect. */\n  isDisabled?: boolean;\n  /** Same for a read-only one. */\n  isReadOnly?: boolean;\n  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */\n  isBuffered?: boolean;\n}\n\nexport interface UseBufferedValueResult<T> {\n  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */\n  value: T | undefined;\n  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */\n  onChange: (next: T) => void;\n  /** Drop the buffer and let `value` win again. The text fields call it on blur. */\n  reset: () => void;\n}\n\n/**\n * Holds a controlled value locally so a parent that echoes the new value back *late* cannot\n * overwrite what the user is doing.\n *\n * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands\n * it. If the parent hands back the pre-keystroke string — because its state reaches the component\n * through a store that publishes a render late, or through a debounce, or a deferred update —\n * React writes that stale string into the DOM node, and a native `value` assignment collapses the\n * selection to the end. Typing in the middle of a field throws the caret to the end. The value\n * eventually lands, so it looks like a caret bug rather than a data-flow one.\n *\n * The buffer keeps the typed text on screen until the parent catches up, while still emitting\n * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,\n * no swallowed calls.\n *\n * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array\n * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature\n * function they already have.\n *\n * ```tsx\n * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });\n *\n * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />\n * ```\n *\n * One case it cannot resolve: an external change that lands *between* an emit and its echo, and\n * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a\n * sequence number from the store rather than value matching.\n */\nexport function useBufferedValue<T>(\n  value: T | undefined,\n  onChange?: (next: T) => void,\n  options: UseBufferedValueOptions<T> = {},\n): UseBufferedValueResult<T> {\n  const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;\n\n  // An `undefined` value means the control is uncontrolled — it already owns its text.\n  const isActive =\n    isBuffered && value !== undefined && !isDisabled && !isReadOnly;\n\n  const keyOf = (next: T | undefined): unknown =>\n    getKey && next != null ? getKey(next) : next;\n  const valueKey = keyOf(value);\n\n  // The only state, and the only thing that can force a render: what the user typed. It is rendered\n  // *while we are ahead of the parent* and ignored otherwise — which is what makes adopting an\n  // external value free, since there is nothing to write.\n  const [draft, setDraft] = useState(value);\n  // Keys we have emitted that the parent hasn't echoed back yet. A queue rather than one slot: the\n  // user can type again before the first echo returns, and each echo has to be recognised as ours\n  // or applying it would swallow everything typed after it.\n  const pendingRef = useRef<unknown[]>(NOTHING_PENDING);\n  // The last value we accepted as the parent's opinion — not the last one we rendered.\n  const seenKeyRef = useRef<unknown>(valueKey);\n  const latestRef = useRef({ value, onChange, keyOf, isActive });\n\n  // These three refs are read during render but written *only* in an event handler or after commit,\n  // never during a render. That is what keeps them honest under concurrent rendering: React may\n  // discard a render (an interrupted pass, a StrictMode double-invoke), and a discarded render runs\n  // no effects, so it cannot leave the bookkeeping describing a pass that never committed.\n  const pending = pendingRef.current;\n  const propMoved = valueKey !== seenKeyRef.current;\n  // Our own echo, a render or more late — possibly an earlier emit a later one superseded.\n  const echoAt = propMoved ? pending.indexOf(valueKey) : -1;\n  // A real change from the parent: undo/redo, a reset, a transformed value, another record.\n  const isExternal = propMoved && echoAt < 0;\n  const isAhead = isActive && !isExternal && pending.length > 0;\n  // Not being ahead is the whole of \"the parent wins\", so an external change needs no state write\n  // and costs no extra render. Being ahead — including when the value is the stale one the parent\n  // held *before* the keystroke — is what stops React writing that string back and collapsing the\n  // selection.\n  const rendered = isAhead ? draft : value;\n\n  useLayoutEffect(() => {\n    latestRef.current = { value, onChange, keyOf, isActive };\n    seenKeyRef.current = valueKey;\n\n    if (!isActive || isExternal) {\n      pendingRef.current = NOTHING_PENDING;\n    } else if (echoAt >= 0) {\n      pendingRef.current = pending.slice(echoAt + 1);\n    }\n  });\n\n  const handleChange = useCallback((next: T) => {\n    const {\n      onChange: latestOnChange,\n      keyOf: latestKeyOf,\n      isActive: latestIsActive,\n    } = latestRef.current;\n\n    if (latestIsActive) {\n      // A ref write in an event handler, which runs after a commit — never mid-render.\n      pendingRef.current = [...pendingRef.current, latestKeyOf(next)];\n      setDraft(next);\n    }\n\n    latestOnChange?.(next);\n  }, []);\n\n  const reset = useCallback(() => {\n    const { value: latestValue } = latestRef.current;\n\n    // Emptying the queue is what hands control back: with nothing in flight we are no longer ahead,\n    // so the parent's value is rendered again. `setDraft` is only here to schedule that render.\n    pendingRef.current = NOTHING_PENDING;\n    setDraft(latestValue);\n  }, []);\n\n  return { value: rendered, onChange: handleChange, reset };\n}\n"],"mappings":";;;;;AAIA,MAAM,kBAA6B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDrC,SAAgB,iBACd,OACA,UACA,UAAsC,EAAE,EACb;CAC3B,MAAM,EAAE,QAAQ,YAAY,YAAY,aAAa,SAAS;CAG9D,MAAM,WACJ,cAAc,UAAU,UAAa,CAAC,cAAc,CAAC;CAEvD,MAAM,SAAS,SACb,UAAU,QAAQ,OAAO,OAAO,KAAK,GAAG;CAC1C,MAAM,WAAW,MAAM,MAAM;CAK7B,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CAIzC,MAAM,aAAa,OAAkB,gBAAgB;CAErD,MAAM,aAAa,OAAgB,SAAS;CAC5C,MAAM,YAAY,OAAO;EAAE;EAAO;EAAU;EAAO;EAAU,CAAC;CAM9D,MAAM,UAAU,WAAW;CAC3B,MAAM,YAAY,aAAa,WAAW;CAE1C,MAAM,SAAS,YAAY,QAAQ,QAAQ,SAAS,GAAG;CAEvD,MAAM,aAAa,aAAa,SAAS;CAMzC,MAAM,WALU,YAAY,CAAC,cAAc,QAAQ,SAAS,IAKjC,QAAQ;AAEnC,yBAAsB;AACpB,YAAU,UAAU;GAAE;GAAO;GAAU;GAAO;GAAU;AACxD,aAAW,UAAU;AAErB,MAAI,CAAC,YAAY,WACf,YAAW,UAAU;WACZ,UAAU,EACnB,YAAW,UAAU,QAAQ,MAAM,SAAS,EAAE;GAEhD;AA2BF,QAAO;EAAE,OAAO;EAAU,UAzBL,aAAa,SAAY;GAC5C,MAAM,EACJ,UAAU,gBACV,OAAO,aACP,UAAU,mBACR,UAAU;AAEd,OAAI,gBAAgB;AAElB,eAAW,UAAU,CAAC,GAAG,WAAW,SAAS,YAAY,KAAK,CAAC;AAC/D,aAAS,KAAK;;AAGhB,oBAAiB,KAAK;KACrB,EAAE,CAAC;EAW4C,OATpC,kBAAkB;GAC9B,MAAM,EAAE,OAAO,gBAAgB,UAAU;AAIzC,cAAW,UAAU;AACrB,YAAS,YAAY;KACpB,EAAE,CAAC;EAEmD"}

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

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

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.155.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.157.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.155.0";
+const VERSION = "0.157.0";
 const TASTY_VERSION = "3.0.1";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/actions/ButtonGroup.md

@@ -9,7 +9,7 @@ A container for grouping buttons with consistent spacing. Extends `Space` and in
 
 ## Properties
 
-Inherits all Space properties.
+Inherits all [Space](../layout/Space.md) properties.
 
 ### Style Defaults