@cube-dev/ui-kit 0.0.0-canary-b2f8ae7 → 0.0.0-canary-26fe35d

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { TYPOGRAPHY_PRESETS } from "./typography.js";
 import { generateTypographyTokens } from "../tasty/utils/typography.js";
 import { BASE_TOKENS } from "./base.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

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

package/dist/utils/cache-wrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tasty/utils/cache-wrapper.ts
 /**
 * Create a function that caches the result up to the limit.

package/dist/utils/case-converter.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tasty/utils/case-converter.ts
 function camelToKebab(str) {
 	return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();

package/dist/utils/hsl-to-rgb.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { hslToRgbValues } from "./process-tokens.js";
 
 //#region src/tasty/utils/hsl-to-rgb.ts

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tasty/utils/is-dev-env.ts
 /**
 * Check if we're in a development environment at runtime

package/dist/utils/merge-styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { isDevEnv } from "./is-dev-env.js";
 import { isSelector } from "../pipeline/index.js";
 

package/dist/utils/modules.js

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

package/dist/utils/okhsl-to-rgb.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tasty/utils/okhsl-to-rgb.ts
 const OKLab_to_LMS_M = [
 	[

package/dist/utils/process-tokens.js

@@ -1,4 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
+import "./styles.js";
+
 //#region src/tasty/utils/process-tokens.ts
 const devMode = process.env.NODE_ENV !== "production";
 /**

package/dist/utils/process-tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/tasty/utils/process-tokens.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { Tokens, TokenValue } from '../types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n  getRgbValuesFromRgbaString,\n  hexToRgb,\n  normalizeColorTokenValue,\n  parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n *   hsl(200, 40%, 50%)\n *   hsl(200 40% 50%)\n *   hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n  const match = str.match(/hsla?\\(([^)]+)\\)/i);\n  if (!match) return null;\n\n  const inner = match[1].trim();\n  // Split by slash first (for alpha), then handle color components\n  const [colorPart] = inner.split('/');\n  // Split by comma or whitespace\n  const parts = colorPart\n    .trim()\n    .split(/[,\\s]+/)\n    .filter(Boolean);\n\n  if (parts.length < 3) return null;\n\n  // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n  let h = parseFloat(parts[0]);\n  const hueStr = parts[0].toLowerCase();\n  if (hueStr.endsWith('turn')) {\n    h = parseFloat(hueStr) * 360;\n  } else if (hueStr.endsWith('rad')) {\n    h = (parseFloat(hueStr) * 180) / Math.PI;\n  } else if (hueStr.endsWith('grad')) {\n    h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n  }\n  // deg or unitless are already in degrees\n\n  // Normalize hue to 0-360 range\n  h = h % 360;\n  if (h < 0) h += 360;\n\n  // Parse saturation and lightness (percentages)\n  const parsePercent = (val: string): number => {\n    const num = parseFloat(val);\n    return val.includes('%') ? num / 100 : num;\n  };\n\n  const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n  const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n  return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n  h: number,\n  s: number,\n  l: number,\n): [number, number, number] {\n  const a = s * Math.min(l, 1 - l);\n\n  const f = (n: number): number => {\n    const k = (n + h / 30) % 12;\n    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n  };\n\n  // Convert 0-1 range to 0-255\n  return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n  return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n  // If the parsed output references a color variable, use the -rgb variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-rgb)`;\n  }\n\n  // For rgb(...) values, extract the triplet\n  if (parsedOutput.startsWith('rgb(')) {\n    const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n    if (rgbValues && rgbValues.length >= 3) {\n      return rgbValues.join(' ');\n    }\n  }\n\n  // For hsl(...) values, convert to RGB triplet\n  if (\n    parsedOutput.startsWith('hsl(') ||\n    parsedOutput.startsWith('hsla(') ||\n    colorValue.startsWith('hsl(') ||\n    colorValue.startsWith('hsla(')\n  ) {\n    // Try parsedOutput first, then original colorValue\n    const hslValues =\n      parseHslValues(parsedOutput) || parseHslValues(colorValue);\n    if (hslValues) {\n      const [r, g, b] = hslToRgbValues(\n        hslValues[0],\n        hslValues[1],\n        hslValues[2],\n      );\n      return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n    }\n  }\n\n  // For okhsl(...) values, convert to RGB triplet\n  if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n    // Try parsedOutput first, then original colorValue\n    const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // For hex values, convert to RGB triplet\n  if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n    const rgbResult = hexToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // Fallback: return the parsed output (may not be ideal but covers edge cases)\n  return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n  value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n\n  if (typeof value === 'object') {\n    if (devMode) {\n      console.warn(\n        'CubeUIKit: Object values are not allowed in tokens prop. ' +\n          'Tokens do not support state-based styling. Use a primitive value instead.',\n      );\n    }\n    return false;\n  }\n\n  return (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n  if (typeof value === 'number') {\n    // 0 should remain as \"0\", not converted to any unit\n    if (value === 0) {\n      return '0';\n    }\n    return parseStyle(String(value)).output;\n  }\n  return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n  tokens: Tokens | undefined,\n): CSSProperties | undefined {\n  if (!tokens) {\n    return undefined;\n  }\n\n  const keys = Object.keys(tokens);\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let result: Record<string, string> | undefined;\n\n  for (const key of keys) {\n    const value = tokens[key as keyof Tokens];\n\n    // Skip undefined/null values\n    if (!isValidTokenValue(value)) {\n      continue;\n    }\n\n    if (key.startsWith('$')) {\n      // Custom property token: $name -> --name\n      const propName = `--${key.slice(1)}`;\n      // Boolean true for custom properties converts to empty string (valid CSS value)\n      const effectiveValue = value === true ? '' : value;\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[propName] = processedValue;\n    } else if (key.startsWith('#')) {\n      // Color token: #name -> --name-color and --name-color-rgb\n      const colorName = key.slice(1);\n\n      // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n      const effectiveValue = normalizeColorTokenValue(value);\n      // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n      if (effectiveValue === null) continue;\n\n      const originalValue =\n        typeof effectiveValue === 'number'\n          ? String(effectiveValue)\n          : effectiveValue;\n      const lowerValue = originalValue.toLowerCase();\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[`--${colorName}-color`] = processedValue;\n\n      // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n      // Match only #current or #current.opacity, not #current-theme or #currently-used\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-rgb`] = extractRgbValue(\n        originalValue,\n        processedValue,\n      );\n    }\n  }\n\n  return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n  if (!tokens) return '';\n  return JSON.stringify(tokens);\n}\n"],"mappings":";;AAYA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;;;;;;;;AAgEzC,SAAgB,eACd,GACA,GACA,GAC0B;CAC1B,MAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE;CAEhC,MAAM,KAAK,MAAsB;EAC/B,MAAM,KAAK,IAAI,IAAI,MAAM;AACzB,SAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;;AAIxD,QAAO;EAAC,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAI"}
+{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/tasty/utils/process-tokens.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { Tokens, TokenValue } from '../types';\n\nimport { okhslToRgb } from './okhsl-to-rgb';\nimport {\n  getRgbValuesFromRgbaString,\n  hexToRgb,\n  normalizeColorTokenValue,\n  parseStyle,\n} from './styles';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Parse HSL values from an hsl()/hsla() string.\n * Supports both comma-separated (legacy) and space-separated (modern) syntax:\n *   hsl(200, 40%, 50%)\n *   hsl(200 40% 50%)\n *   hsl(200 40% 50% / 0.5)\n *\n * Returns [h, s, l] where h is 0-360, s and l are 0-1, or null if parsing fails.\n */\nfunction parseHslValues(str: string): [number, number, number] | null {\n  const match = str.match(/hsla?\\(([^)]+)\\)/i);\n  if (!match) return null;\n\n  const inner = match[1].trim();\n  // Split by slash first (for alpha), then handle color components\n  const [colorPart] = inner.split('/');\n  // Split by comma or whitespace\n  const parts = colorPart\n    .trim()\n    .split(/[,\\s]+/)\n    .filter(Boolean);\n\n  if (parts.length < 3) return null;\n\n  // Parse hue (can be unitless degrees, deg, turn, rad, or grad)\n  let h = parseFloat(parts[0]);\n  const hueStr = parts[0].toLowerCase();\n  if (hueStr.endsWith('turn')) {\n    h = parseFloat(hueStr) * 360;\n  } else if (hueStr.endsWith('rad')) {\n    h = (parseFloat(hueStr) * 180) / Math.PI;\n  } else if (hueStr.endsWith('grad')) {\n    h = parseFloat(hueStr) * 0.9; // 400 grad = 360 deg\n  }\n  // deg or unitless are already in degrees\n\n  // Normalize hue to 0-360 range\n  h = h % 360;\n  if (h < 0) h += 360;\n\n  // Parse saturation and lightness (percentages)\n  const parsePercent = (val: string): number => {\n    const num = parseFloat(val);\n    return val.includes('%') ? num / 100 : num;\n  };\n\n  const s = Math.max(0, Math.min(1, parsePercent(parts[1])));\n  const l = Math.max(0, Math.min(1, parsePercent(parts[2])));\n\n  return [h, s, l];\n}\n\n/**\n * Convert HSL to RGB (sRGB).\n * Algorithm from: https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative\n * Same as used in CSS Color 4 spec.\n *\n * @param h - Hue in degrees (0-360)\n * @param s - Saturation (0-1)\n * @param l - Lightness (0-1)\n * @returns RGB values in 0-255 range (may have fractional values)\n */\nexport function hslToRgbValues(\n  h: number,\n  s: number,\n  l: number,\n): [number, number, number] {\n  const a = s * Math.min(l, 1 - l);\n\n  const f = (n: number): number => {\n    const k = (n + h / 30) % 12;\n    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));\n  };\n\n  // Convert 0-1 range to 0-255\n  return [f(0) * 255, f(8) * 255, f(4) * 255];\n}\n\n/**\n * Format a number to a string with up to 1 decimal place, removing trailing zeros.\n */\nfunction formatRgbComponent(n: number): string {\n  return parseFloat(n.toFixed(1)).toString();\n}\n\n/**\n * Extract RGB triplet from a color value.\n * Returns the RGB values as a space-separated string (e.g., \"255 128 0\")\n * or a CSS variable reference for token colors.\n */\nfunction extractRgbValue(colorValue: string, parsedOutput: string): string {\n  // If the parsed output references a color variable, use the -rgb variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-rgb)`;\n  }\n\n  // For rgb(...) values, extract the triplet\n  if (parsedOutput.startsWith('rgb(')) {\n    const rgbValues = getRgbValuesFromRgbaString(parsedOutput);\n    if (rgbValues && rgbValues.length >= 3) {\n      return rgbValues.join(' ');\n    }\n  }\n\n  // For hsl(...) values, convert to RGB triplet\n  if (\n    parsedOutput.startsWith('hsl(') ||\n    parsedOutput.startsWith('hsla(') ||\n    colorValue.startsWith('hsl(') ||\n    colorValue.startsWith('hsla(')\n  ) {\n    // Try parsedOutput first, then original colorValue\n    const hslValues =\n      parseHslValues(parsedOutput) || parseHslValues(colorValue);\n    if (hslValues) {\n      const [r, g, b] = hslToRgbValues(\n        hslValues[0],\n        hslValues[1],\n        hslValues[2],\n      );\n      return `${formatRgbComponent(r)} ${formatRgbComponent(g)} ${formatRgbComponent(b)}`;\n    }\n  }\n\n  // For okhsl(...) values, convert to RGB triplet\n  if (parsedOutput.startsWith('okhsl(') || colorValue.startsWith('okhsl(')) {\n    // Try parsedOutput first, then original colorValue\n    const rgbResult = okhslToRgb(parsedOutput) || okhslToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // For hex values, convert to RGB triplet\n  if (colorValue.startsWith('#') && /^#[0-9a-fA-F]{3,8}$/.test(colorValue)) {\n    const rgbResult = hexToRgb(colorValue);\n    if (rgbResult) {\n      const rgbValues = getRgbValuesFromRgbaString(rgbResult);\n      if (rgbValues && rgbValues.length >= 3) {\n        return rgbValues.join(' ');\n      }\n    }\n  }\n\n  // Fallback: return the parsed output (may not be ideal but covers edge cases)\n  return parsedOutput;\n}\n\n/**\n * Check if a value is a valid token value (string, number, or boolean - not object).\n * Returns false for `false` values (they mean \"skip this token\").\n */\nfunction isValidTokenValue(\n  value: unknown,\n): value is Exclude<TokenValue, undefined | null | false> {\n  if (value === undefined || value === null || value === false) {\n    return false;\n  }\n\n  if (typeof value === 'object') {\n    if (devMode) {\n      console.warn(\n        'CubeUIKit: Object values are not allowed in tokens prop. ' +\n          'Tokens do not support state-based styling. Use a primitive value instead.',\n      );\n    }\n    return false;\n  }\n\n  return (\n    typeof value === 'string' ||\n    typeof value === 'number' ||\n    typeof value === 'boolean'\n  );\n}\n\n/**\n * Process a single token value through the tasty parser.\n * Numbers are converted to strings; 0 stays as \"0\".\n */\nfunction processTokenValue(value: string | number): string {\n  if (typeof value === 'number') {\n    // 0 should remain as \"0\", not converted to any unit\n    if (value === 0) {\n      return '0';\n    }\n    return parseStyle(String(value)).output;\n  }\n  return parseStyle(value).output;\n}\n\n/**\n * Process tokens object into inline style properties.\n * - $name -> --name with parsed value\n * - #name -> --name-color AND --name-color-rgb with parsed values\n *\n * @param tokens - The tokens object to process\n * @returns CSSProperties object or undefined if no tokens to process\n */\nexport function processTokens(\n  tokens: Tokens | undefined,\n): CSSProperties | undefined {\n  if (!tokens) {\n    return undefined;\n  }\n\n  const keys = Object.keys(tokens);\n  if (keys.length === 0) {\n    return undefined;\n  }\n\n  let result: Record<string, string> | undefined;\n\n  for (const key of keys) {\n    const value = tokens[key as keyof Tokens];\n\n    // Skip undefined/null values\n    if (!isValidTokenValue(value)) {\n      continue;\n    }\n\n    if (key.startsWith('$')) {\n      // Custom property token: $name -> --name\n      const propName = `--${key.slice(1)}`;\n      // Boolean true for custom properties converts to empty string (valid CSS value)\n      const effectiveValue = value === true ? '' : value;\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[propName] = processedValue;\n    } else if (key.startsWith('#')) {\n      // Color token: #name -> --name-color and --name-color-rgb\n      const colorName = key.slice(1);\n\n      // Normalize color token value (true → 'transparent', false is already filtered by isValidTokenValue)\n      const effectiveValue = normalizeColorTokenValue(value);\n      // Skip if normalized to null (shouldn't happen since false is filtered by isValidTokenValue)\n      if (effectiveValue === null) continue;\n\n      const originalValue =\n        typeof effectiveValue === 'number'\n          ? String(effectiveValue)\n          : effectiveValue;\n      const lowerValue = originalValue.toLowerCase();\n      const processedValue = processTokenValue(effectiveValue);\n\n      if (!result) result = {};\n      result[`--${colorName}-color`] = processedValue;\n\n      // Skip RGB generation for #current values (currentcolor is dynamic, cannot extract RGB)\n      // Match only #current or #current.opacity, not #current-theme or #currently-used\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-rgb`] = extractRgbValue(\n        originalValue,\n        processedValue,\n      );\n    }\n  }\n\n  return result as CSSProperties | undefined;\n}\n\n/**\n * Stringify tokens for memoization key.\n */\nexport function stringifyTokens(tokens: Tokens | undefined): string {\n  if (!tokens) return '';\n  return JSON.stringify(tokens);\n}\n"],"mappings":";;;;AAYA,MAAM,UAAU,QAAQ,IAAI,aAAa;;;;;;;;;;;AAgEzC,SAAgB,eACd,GACA,GACA,GAC0B;CAC1B,MAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,EAAE;CAEhC,MAAM,KAAK,MAAsB;EAC/B,MAAM,KAAK,IAAI,IAAI,MAAM;AACzB,SAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;;AAIxD,QAAO;EAAC,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAK,EAAE,EAAE,GAAG;EAAI"}

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { mergeStyles } from "../../tasty/utils/merge-styles.js";
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { mergeStyles } from "../../tasty/utils/merge-styles.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/resolve-recipes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { isDevEnv } from "./is-dev-env.js";
 import { getGlobalRecipes } from "../config.js";
 import { isSelector } from "../pipeline/index.js";

package/dist/utils/string.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/tasty/utils/string.ts
 function toSnakeCase(str) {
 	return str.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 import { StyleParser } from "../parser/parser.js";
 import { okhslFunc } from "../plugins/okhsl-plugin.js";
 import { cacheWrapper } from "./cache-wrapper.js";

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | 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.0.0-canary-b2f8ae7 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-26fe35d | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.0.0-canary-b2f8ae7";
+const VERSION = "0.0.0-canary-26fe35d";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-b2f8ae7",
+  "version": "0.0.0-canary-26fe35d",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {