@tenphi/tasty 0.0.0-snapshot.b3fbcbb → 0.0.0-snapshot.bae20d4

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

@@ -1 +1 @@
-{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { Tokens, TokenValue } from '../types';\n\nimport type { CSSProperties } from './css-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":"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"}
+{"version":3,"file":"process-tokens.js","names":[],"sources":["../../src/utils/process-tokens.ts"],"sourcesContent":["import type { Tokens, TokenValue } from '../types';\n\nimport type { CSSProperties } from './css-types';\n\nimport { getColorSpaceComponents, getColorSpaceSuffix } from './color-space';\nimport { normalizeColorTokenValue, parseStyle } from './styles';\n\nexport { hslToRgbValues } from './color-math';\n\nconst devMode = process.env.NODE_ENV !== 'production';\n\n/**\n * Extract color components in the configured color space.\n * Returns a CSS variable reference for token colors, or decomposed\n * components as a space-separated string.\n */\nfunction extractColorSpaceValue(\n  colorValue: string,\n  parsedOutput: string,\n): string {\n  const suffix = getColorSpaceSuffix();\n\n  // If the parsed output references a color variable, use the companion variant\n  const varMatch = parsedOutput.match(/var\\(--([a-z0-9-]+)-color\\)/);\n  if (varMatch) {\n    return `var(--${varMatch[1]}-color-${suffix})`;\n  }\n\n  // Try the original color value first, then parsed output\n  const components = getColorSpaceComponents(colorValue);\n  if (components !== colorValue) return components;\n\n  const componentsFromParsed = getColorSpaceComponents(parsedOutput);\n  if (componentsFromParsed !== parsedOutput) return componentsFromParsed;\n\n  // Fallback: return the parsed output\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-{colorSpace} 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      const colorName = key.slice(1);\n      const suffix = getColorSpaceSuffix();\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 component generation for #current values (currentcolor is dynamic, cannot decompose)\n      if (/^#current(?:\\.|$)/i.test(lowerValue)) {\n        continue;\n      }\n\n      result[`--${colorName}-color-${suffix}`] = extractColorSpaceValue(\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":";;;;;;;;;;AAgBA,SAAS,uBACP,YACA,cACQ;CACR,MAAM,SAAS,qBAAqB;CAGpC,MAAM,WAAW,aAAa,MAAM,8BAA8B;AAClE,KAAI,SACF,QAAO,SAAS,SAAS,GAAG,SAAS,OAAO;CAI9C,MAAM,aAAa,wBAAwB,WAAW;AACtD,KAAI,eAAe,WAAY,QAAO;CAEtC,MAAM,uBAAuB,wBAAwB,aAAa;AAClE,KAAI,yBAAyB,aAAc,QAAO;AAGlD,QAAO;;;;;;AAOT,SAAS,kBACP,OACwD;AACxD,KAAI,UAAU,UAAa,UAAU,QAAQ,UAAU,MACrD,QAAO;AAGT,KAAI,OAAO,UAAU,UAAU;AAE3B,UAAQ,KACN,qIAED;AAEH,SAAO;;AAGT,QACE,OAAO,UAAU,YACjB,OAAO,UAAU,YACjB,OAAO,UAAU;;;;;;AAQrB,SAAS,kBAAkB,OAAgC;AACzD,KAAI,OAAO,UAAU,UAAU;AAE7B,MAAI,UAAU,EACZ,QAAO;AAET,SAAO,WAAW,OAAO,MAAM,CAAC,CAAC;;AAEnC,QAAO,WAAW,MAAM,CAAC;;;;;;;;;;AAW3B,SAAgB,cACd,QAC2B;AAC3B,KAAI,CAAC,OACH;CAGF,MAAM,OAAO,OAAO,KAAK,OAAO;AAChC,KAAI,KAAK,WAAW,EAClB;CAGF,IAAI;AAEJ,MAAK,MAAM,OAAO,MAAM;EACtB,MAAM,QAAQ,OAAO;AAGrB,MAAI,CAAC,kBAAkB,MAAM,CAC3B;AAGF,MAAI,IAAI,WAAW,IAAI,EAAE;GAEvB,MAAM,WAAW,KAAK,IAAI,MAAM,EAAE;GAGlC,MAAM,iBAAiB,kBADA,UAAU,OAAO,KAAK,MACW;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,YAAY;aACV,IAAI,WAAW,IAAI,EAAE;GAC9B,MAAM,YAAY,IAAI,MAAM,EAAE;GAC9B,MAAM,SAAS,qBAAqB;GAGpC,MAAM,iBAAiB,yBAAyB,MAAM;AAEtD,OAAI,mBAAmB,KAAM;GAE7B,MAAM,gBACJ,OAAO,mBAAmB,WACtB,OAAO,eAAe,GACtB;GACN,MAAM,aAAa,cAAc,aAAa;GAC9C,MAAM,iBAAiB,kBAAkB,eAAe;AAExD,OAAI,CAAC,OAAQ,UAAS,EAAE;AACxB,UAAO,KAAK,UAAU,WAAW;AAGjC,OAAI,qBAAqB,KAAK,WAAW,CACvC;AAGF,UAAO,KAAK,UAAU,SAAS,YAAY,uBACzC,eACA,eACD;;;AAIL,QAAO;;;;;AAMT,SAAgB,gBAAgB,QAAoC;AAClE,KAAI,CAAC,OAAQ,QAAO;AACpB,QAAO,KAAK,UAAU,OAAO"}

package/dist/utils/selector-transform.js

@@ -0,0 +1,32 @@
+//#region src/utils/selector-transform.ts
+/**
+* Shared utility for transforming capitalized PascalCase element names
+* in CSS selector content to `[data-element="..."]` attribute selectors.
+*
+* Lowercase words are treated as HTML tags and left unchanged.
+*/
+/**
+* Matches a capitalized PascalCase word at the start of the string
+* or after a CSS combinator/separator character.
+*/
+const ELEMENT_NAME_RE = /(^|[\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;
+/**
+* Replace capitalized PascalCase words with `[data-element="Name"]` selectors.
+*
+* @example
+* transformSelectorContent('> Field + input:checked')
+* // → '> [data-element="Field"] + input:checked'
+*
+* transformSelectorContent('Body > Row')
+* // → '[data-element="Body"] > [data-element="Row"]'
+*
+* transformSelectorContent('button')
+* // → 'button'  (lowercase = HTML tag, unchanged)
+*/
+function transformSelectorContent(content) {
+	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
+}
+
+//#endregion
+export { transformSelectorContent };
+//# sourceMappingURL=selector-transform.js.map

package/dist/utils/selector-transform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-transform.js","names":[],"sources":["../../src/utils/selector-transform.ts"],"sourcesContent":["/**\n * Shared utility for transforming capitalized PascalCase element names\n * in CSS selector content to `[data-element=\"...\"]` attribute selectors.\n *\n * Lowercase words are treated as HTML tags and left unchanged.\n */\n\n/**\n * Matches a capitalized PascalCase word at the start of the string\n * or after a CSS combinator/separator character.\n */\nconst ELEMENT_NAME_RE = /(^|[\\s>+~,(])([A-Z][a-zA-Z0-9]*)/g;\n\n/**\n * Replace capitalized PascalCase words with `[data-element=\"Name\"]` selectors.\n *\n * @example\n * transformSelectorContent('> Field + input:checked')\n * // → '> [data-element=\"Field\"] + input:checked'\n *\n * transformSelectorContent('Body > Row')\n * // → '[data-element=\"Body\"] > [data-element=\"Row\"]'\n *\n * transformSelectorContent('button')\n * // → 'button'  (lowercase = HTML tag, unchanged)\n */\nexport function transformSelectorContent(content: string): string {\n  return content.replace(\n    ELEMENT_NAME_RE,\n    (_, prefix, name) => `${prefix}[data-element=\"${name}\"]`,\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,kBAAkB;;;;;;;;;;;;;;AAexB,SAAgB,yBAAyB,SAAyB;AAChE,QAAO,QAAQ,QACb,kBACC,GAAG,QAAQ,SAAS,GAAG,OAAO,iBAAiB,KAAK,IACtD"}

package/dist/utils/styles.d.ts

@@ -1,7 +1,6 @@
 import { ProcessedStyle, StyleDetails } from "../parser/types.js";
 import { StyleParser } from "../parser/parser.js";
-import { AtRuleContext, ParsedAdvancedState, StateParserContext } from "../states/index.js";
-import { Styles } from "../styles/types.js";
+import { getRgbValuesFromRgbaString, hexToRgb, strToRgb } from "./color-math.js";
 
 //#region src/utils/styles.d.ts
 type StyleValue<T = string> = T | boolean | number | null | undefined;
@@ -21,7 +20,6 @@ type StyleValueStateMap<T = string> = Record<string, StyleValue<T> | '@inherit'>
  * Use this for component props that accept style values.
  */
 type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;
-type ComputeModel = string | number;
 type CSSMap = {
   $?: string | string[];
 } & Record<string, string | string[]>;
@@ -37,32 +35,12 @@ type StyleHandler = RawStyleHandler & {
  * - Multi-property tuple: [['style1', 'style2'], handler]
  */
 type StyleHandlerDefinition = RawStyleHandler | [string, RawStyleHandler] | [string[], RawStyleHandler];
-interface StyleStateData {
-  model?: ComputeModel;
-  tokens?: string[];
-  value: StyleValue | StyleValueStateMap | StyleStateData;
-  /** The list of mods to apply */
-  mods: string[];
-  /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
-  notMods: string[];
-  /** Advanced states (media queries, container queries, etc.) */
-  advancedStates?: ParsedAdvancedState[];
-  /** At-rule context for CSS generation */
-  atRuleContext?: AtRuleContext;
-  /** Own mods for sub-element states (from @own()) - applied to sub-element selector */
-  ownMods?: string[];
-  /** Negated own mods for sub-element states */
-  negatedOwnMods?: string[];
-}
 interface ParsedColor {
   color?: string;
   name?: string;
   opacity?: number;
 }
-type StyleStateDataList = StyleStateData[];
-type StyleStateDataListMap = Record<string, StyleStateDataList>;
 type StyleMap = Record<string, StyleValue | StyleValueStateMap>;
-type StyleStateMap = Record<string, StyleStateData>;
 declare const CUSTOM_UNITS: {
   r: string;
   cr: string;
@@ -74,7 +52,6 @@ declare const CUSTOM_UNITS: {
   sf: (num: number) => string;
 };
 declare const DIRECTIONS: string[];
-declare function getModSelector(modName: string): string;
 declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
 /**
  * Get the global StyleParser instance.
@@ -117,62 +94,8 @@ declare function parseStyle(value: StyleValue): ProcessedStyle;
  * Optimized to avoid heavy parseStyle calls for simple color patterns.
  */
 declare function parseColor(val: string, ignoreError?: boolean): ParsedColor;
-declare function strToRgb(color: string, _ignoreAlpha?: boolean): string | null | undefined;
-/**
- * Extract RGB values from an rgb()/rgba() string.
- * Supports all modern CSS syntax variations:
- * - Comma-separated: rgb(255, 128, 0)
- * - Space-separated: rgb(255 128 0)
- * - Fractional: rgb(128.5, 64.3, 32.1)
- * - Percentages: rgb(50%, 25%, 75%)
- * - Slash alpha notation: rgb(255 128 0 / 0.5)
- *
- * Returns array of RGB values (0-255 range), converting percentages as needed.
- */
-declare function getRgbValuesFromRgbaString(str: string): number[];
-declare function hexToRgb(hex: string): string | null;
 declare function filterMods(mods: string[], allowedMods: string[]): string[];
-declare function extendStyles(defaultStyles?: Record<string, unknown> | null, newStyles?: Record<string, unknown> | null): Record<string, unknown>;
-/**
- * Split properties into style and non-style properties.
- * @param props - Component prop map.
- * @param [styleList] - List of all style properties.
- * @param [defaultStyles] - Default style map of the component.
- * @param [propMap] - Props to style alias map.
- * @param [ignoreList] - A list of properties to ignore.
- */
-declare function extractStyles(props: Record<string, unknown>, styleList?: readonly string[], defaultStyles?: Styles, propMap?: Record<string, string>, ignoreList?: readonly string[]): Styles;
-/**
- * Check if a token is an advanced state (starts with @)
- */
-declare function isAdvancedStateToken(token: string): boolean;
-declare const STATE_OPERATORS: {
-  NOT: string;
-  AND: string;
-  OR: string;
-  XOR: string;
-};
-declare const STATE_OPERATOR_LIST: string[];
-declare const parseStateNotation: (firstArg: string, secondArg?: string | number | boolean | StyleValueStateMap<string> | StyleStateData | null | undefined) => StyleStateData;
-/**
- * Build an AtRuleContext from parsed advanced states
- */
-declare function buildAtRuleContext(advancedStates: ParsedAdvancedState[], negatedStates: Set<string>): AtRuleContext | undefined;
-/**
- * Parse state notation and return tokens, modifiers and compute model.
- * Enhanced to detect and extract advanced states.
- */
-declare function styleStateMapToStyleStateDataList(styleStateMap: StyleStateMap | StyleValue | StyleValueStateMap, parserContext?: StateParserContext): {
-  states: StyleStateDataList;
-  mods: string[];
-  hasAdvancedStates: boolean;
-};
-declare const COMPUTE_FUNC_MAP: Record<string, (a: unknown, b?: unknown) => unknown>;
-/**
- * Compute a result based on a model and incoming map.
- */
-declare function computeState(computeModel: ComputeModel, valueMap: (number | boolean)[] | Record<string, boolean> | ((...args: unknown[]) => unknown)): unknown;
 declare function stringifyStyles(styles: unknown): string;
 //#endregion
-export { COMPUTE_FUNC_MAP, CSSMap, CUSTOM_UNITS, ComputeModel, DIRECTIONS, ParsedColor, RawStyleHandler, STATE_OPERATORS, STATE_OPERATOR_LIST, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, buildAtRuleContext, computeState, customFunc, extendStyles, extractStyles, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, getModSelector, getRgbValuesFromRgbaString, hexToRgb, isAdvancedStateToken, normalizeColorTokenValue, parseColor, parseStateNotation, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, strToRgb, stringifyStyles, styleStateMapToStyleStateDataList };
+export { CSSMap, CUSTOM_UNITS, DIRECTIONS, ParsedColor, RawStyleHandler, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleMap, StylePropValue, StyleValue, StyleValueStateMap, customFunc, filterMods, getGlobalFuncs, getGlobalParser, getGlobalPredefinedTokens, normalizeColorTokenValue, parseColor, parseStyle, resetGlobalPredefinedTokens, setGlobalPredefinedTokens, stringifyStyles };
 //# sourceMappingURL=styles.d.ts.map