@tenphi/tasty 0.2.0 → 0.4.0

package/dist/styles/types.d.ts

@@ -1,6 +1,6 @@
 import { KeyframesSteps, PropertyDefinition } from "../injector/types.js";
+import { CSSProperties } from "../utils/css-types.js";
 import { StyleValue, StyleValueStateMap } from "../utils/styles.js";
-import { CSSProperties } from "react";
 
 //#region src/styles/types.d.ts
 /**
@@ -441,13 +441,15 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * Apply one or more predefined style recipes by name.
    * Recipes are defined globally via `configure({ recipes: { ... } })`.
-   * Multiple recipes are space-separated. Use `|` to separate base recipes
+   * Multiple recipes are space-separated. Use `/` to separate base recipes
    * (applied before component styles) from post recipes (applied after, via mergeStyles).
+   * Use `none` to explicitly skip base recipes.
    *
    * Examples:
    * - `recipe: 'card'` // Apply the 'card' recipe
    * - `recipe: 'card elevated'` // Apply 'card' then 'elevated', then component styles
-   * - `recipe: 'reset input | input-autofill'` // Base recipes, then post recipe
+   * - `recipe: 'reset input / input-autofill'` // Base recipes, then post recipe
+   * - `recipe: 'none / disabled'` // No base recipes, only post recipe
    * - `recipe: ''` // Clear recipes from base styles when extending
    */
   recipe?: string;

package/dist/tasty.d.ts

@@ -1,7 +1,6 @@
 import { KeyframesSteps, PropertyDefinition } from "./injector/types.js";
 import { StyleValue, StyleValueStateMap } from "./utils/styles.js";
 import { Styles, StylesInterface } from "./styles/types.js";
-import "./injector/index.js";
 import { AllBaseProps, BaseProps, BaseStyleProps, Mods, Props, Tokens } from "./types.js";
 import * as react from "react";
 import { AllHTMLAttributes, ComponentType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";

package/dist/tasty.js

@@ -1,9 +1,9 @@
 import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { BASE_STYLES } from "./styles/list.js";
+import { _modAttrs } from "./utils/mod-attrs.js";
 import { mergeStyles } from "./utils/merge-styles.js";
 import { useStyles } from "./hooks/useStyles.js";
-import { BASE_STYLES } from "./styles/list.js";
 import { getDisplayName } from "./utils/get-display-name.js";
-import { _modAttrs } from "./utils/mod-attrs.js";
 import { createElement, forwardRef, useMemo } from "react";
 import { isValidElementType } from "react-is";
 

package/dist/types.d.ts

@@ -1,6 +1,7 @@
+import { CSSProperties } from "./utils/css-types.js";
 import { Styles } from "./styles/types.js";
-import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
-import { AllHTMLAttributes, CSSProperties, ComponentType } from "react";
+import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
+import { AllHTMLAttributes, ComponentType } from "react";
 
 //#region src/types.d.ts
 interface GlobalStyledProps {
@@ -94,6 +95,7 @@ type DimensionStyleProps = Pick<Styles, (typeof DIMENSION_STYLES)[number]>;
 type FlowStyleProps = Pick<Styles, (typeof FLOW_STYLES)[number]>;
 type ContainerStyleProps = Pick<Styles, (typeof CONTAINER_STYLES)[number]>;
 type OuterStyleProps = Pick<Styles, (typeof OUTER_STYLES)[number]>;
+type InnerStyleProps = Pick<Styles, (typeof INNER_STYLES)[number]>;
 interface ShortGridStyles {
   template?: Styles['gridTemplate'];
   columns?: Styles['gridColumns'];
@@ -178,5 +180,5 @@ interface TastyExtensionConfig {
   stateDescriptions?: Record<string, string>;
 }
 //#endregion
-export { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens };
+export { AllBaseProps, BaseProps, BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, ColorStyleProps, ContainerStyleProps, DimensionStyleProps, FlowStyleProps, GlobalStyledProps, InnerStyleProps, ModValue, Mods, OuterStyleProps, PositionStyleProps, Props, ShortGridStyles, TagName, TastyExtensionConfig, TastyThemeNames, TextStyleProps, TokenValue, Tokens };
 //# sourceMappingURL=types.d.ts.map

package/dist/utils/css-types.d.ts

@@ -0,0 +1,7 @@
+import { Properties } from "csstype";
+
+//#region src/utils/css-types.d.ts
+type CSSProperties = Properties<string | number>;
+//#endregion
+export { CSSProperties };
+//# sourceMappingURL=css-types.d.ts.map

package/dist/utils/process-tokens.d.ts

@@ -1,5 +1,5 @@
+import { CSSProperties } from "./css-types.js";
 import { Tokens } from "../types.js";
-import { CSSProperties } from "react";
 
 //#region src/utils/process-tokens.d.ts
 /**

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 { CSSProperties } from 'react';\n\nimport type { 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":"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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 { 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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"}

package/dist/utils/resolve-recipes.js

@@ -1,6 +1,6 @@
 import { isDevEnv } from "./is-dev-env.js";
-import { getGlobalRecipes } from "../config.js";
 import { isSelector } from "../pipeline/index.js";
+import { getGlobalRecipes } from "../config.js";
 import { mergeStyles } from "./merge-styles.js";
 
 //#region src/utils/resolve-recipes.ts
@@ -13,7 +13,7 @@ import { mergeStyles } from "./merge-styles.js";
 * Resolution order per level (top-level and each sub-element independently):
 * base_recipe_1 base_recipe_2 → component styles → post_recipe_1 post_recipe_2
 *
-* The `|` separator splits base recipes (before component styles)
+* The `/` separator splits base recipes (before component styles)
 * from post recipes (after component styles). All merges use mergeStyles
 * semantics: primitives and state maps with '' key fully replace;
 * state maps without '' key extend the existing value.
@@ -24,10 +24,11 @@ const devMode = isDevEnv();
 /**
 * Parse a recipe string into base and post recipe name groups.
 *
-* Syntax: `'base1 base2 | post1 post2'`
+* Syntax: `'base1 base2 / post1 post2'`
 * - Names are space-separated within each group
-* - `|` separates base (before component) from post (after component) groups
-* - `|` is optional; if absent, all names are base
+* - `/` separates base (before component) from post (after component) groups
+* - `/` is optional; if absent, all names are base
+* - `none` as the sole base value means "no base recipes"
 *
 * Returns `{ base: null, post: null }` if the string is empty or invalid.
 */
@@ -39,15 +40,18 @@ function parseRecipeNames(value) {
 	if (typeof value !== "string") return empty;
 	const trimmed = value.trim();
 	if (trimmed === "") return empty;
-	const pipeIndex = trimmed.indexOf("|");
-	if (pipeIndex === -1) return {
-		base: splitNames(trimmed),
-		post: null
-	};
-	const basePart = trimmed.slice(0, pipeIndex);
-	const postPart = trimmed.slice(pipeIndex + 1);
+	const slashIndex = trimmed.indexOf("/");
+	if (slashIndex === -1) {
+		if (trimmed === "none") return empty;
+		return {
+			base: splitNames(trimmed),
+			post: null
+		};
+	}
+	const basePart = trimmed.slice(0, slashIndex);
+	const postPart = trimmed.slice(slashIndex + 1);
 	return {
-		base: splitNames(basePart),
+		base: basePart.trim() === "none" ? null : splitNames(basePart),
 		post: splitNames(postPart)
 	};
 }

package/dist/utils/resolve-recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-recipes.js","names":[],"sources":["../../src/utils/resolve-recipes.ts"],"sourcesContent":["/**\n * Recipe resolution utility.\n *\n * Resolves `recipe` style properties by looking up predefined recipe styles\n * from global configuration and merging them with the component's own styles.\n *\n * Resolution order per level (top-level and each sub-element independently):\n * base_recipe_1 base_recipe_2 → component styles → post_recipe_1 post_recipe_2\n *\n * The `|` separator splits base recipes (before component styles)\n * from post recipes (after component styles). All merges use mergeStyles\n * semantics: primitives and state maps with '' key fully replace;\n * state maps without '' key extend the existing value.\n *\n * Returns the same object reference if no recipes are present (zero overhead).\n */\n\nimport { getGlobalRecipes } from '../config';\nimport { isSelector } from '../pipeline';\nimport type { RecipeStyles, Styles } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\nimport { mergeStyles } from './merge-styles';\n\nconst devMode = isDevEnv();\n\ninterface ParsedRecipeGroups {\n  base: string[] | null;\n  post: string[] | null;\n}\n\n/**\n * Parse a recipe string into base and post recipe name groups.\n *\n * Syntax: `'base1 base2 | post1 post2'`\n * - Names are space-separated within each group\n * - `|` separates base (before component) from post (after component) groups\n * - `|` is optional; if absent, all names are base\n *\n * Returns `{ base: null, post: null }` if the string is empty or invalid.\n */\nfunction parseRecipeNames(value: unknown): ParsedRecipeGroups {\n  const empty: ParsedRecipeGroups = { base: null, post: null };\n\n  if (typeof value !== 'string') return empty;\n  const trimmed = value.trim();\n  if (trimmed === '') return empty;\n\n  const pipeIndex = trimmed.indexOf('|');\n\n  if (pipeIndex === -1) {\n    const names = splitNames(trimmed);\n    return { base: names, post: null };\n  }\n\n  const basePart = trimmed.slice(0, pipeIndex);\n  const postPart = trimmed.slice(pipeIndex + 1);\n\n  return {\n    base: splitNames(basePart),\n    post: splitNames(postPart),\n  };\n}\n\nfunction splitNames(s: string): string[] | null {\n  const names = s.split(/\\s+/).filter(Boolean);\n  return names.length > 0 ? names : null;\n}\n\n/**\n * Collect merged styles for a list of recipe names.\n * Each recipe is flat-spread on top of the previous.\n */\nfunction collectRecipeStyles(\n  names: string[],\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> {\n  let merged: Record<string, unknown> = {};\n\n  for (const name of names) {\n    const recipeStyles = recipes[name];\n\n    if (!recipeStyles) {\n      if (devMode) {\n        console.warn(\n          `[Tasty] Recipe \"${name}\" not found. ` +\n            `Make sure it is defined in configure({ recipes: { ... } }).`,\n        );\n      }\n      continue;\n    }\n\n    merged = { ...merged, ...(recipeStyles as Record<string, unknown>) };\n  }\n\n  return merged;\n}\n\n/**\n * Resolve recipe references in a flat styles object (no sub-elements).\n * Returns null if no `recipe` key is present.\n *\n * Resolution: base recipes → component styles → post recipes (all via mergeStyles)\n */\nfunction resolveRecipesForLevel(\n  styles: Record<string, unknown>,\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> | null {\n  if (!('recipe' in styles)) return null;\n\n  const { base, post } = parseRecipeNames(styles.recipe);\n\n  // Separate selector keys (sub-elements) from flat style properties.\n  // mergeStyles handles selectors with its own semantics (e.g. false = delete),\n  // but at this level we only want recipe merging on flat properties.\n\n  const { recipe: _recipe, ...allRest } = styles;\n  const flatStyles: Record<string, unknown> = {};\n  const selectorStyles: Record<string, unknown> = {};\n\n  for (const key of Object.keys(allRest)) {\n    if (isSelector(key)) {\n      selectorStyles[key] = allRest[key];\n    } else {\n      flatStyles[key] = allRest[key];\n    }\n  }\n\n  if (!base && !post) {\n    return allRest;\n  }\n\n  // 1. Merge base recipes, then component styles on top (via mergeStyles)\n  let result: Record<string, unknown>;\n\n  if (base) {\n    const baseStyles = collectRecipeStyles(base, recipes);\n    result = mergeStyles(baseStyles as Styles, flatStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  } else {\n    result = { ...flatStyles };\n  }\n\n  // 2. Apply post recipes via mergeStyles (state map extend semantics)\n  if (post) {\n    const postStyles = collectRecipeStyles(post, recipes);\n    result = mergeStyles(result as Styles, postStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  }\n\n  // Re-attach selector keys unchanged\n  for (const key of Object.keys(selectorStyles)) {\n    result[key] = selectorStyles[key];\n  }\n\n  return result;\n}\n\n/**\n * Resolve all `recipe` style properties in a styles object.\n *\n * Handles both top-level and sub-element recipe references.\n * Returns the same object reference if no recipes are present anywhere\n * (zero overhead for the common case).\n *\n * @param styles - The styles object potentially containing `recipe` keys\n * @returns Resolved styles with recipe values merged in, or the original object if unchanged\n */\nexport function resolveRecipes(styles: Styles): Styles {\n  const recipes = getGlobalRecipes();\n\n  // Fast path: no recipes configured globally\n  if (!recipes) return styles;\n\n  let changed = false;\n\n  // Resolve top-level recipe\n  const topResolved = resolveRecipesForLevel(\n    styles as Record<string, unknown>,\n    recipes,\n  );\n\n  let result: Record<string, unknown>;\n\n  if (topResolved) {\n    changed = true;\n    result = topResolved;\n  } else {\n    // Keep reference; a shallow copy is deferred until a sub-element actually changes\n    result = styles as Record<string, unknown>;\n  }\n\n  // Resolve sub-element recipes\n  const keys = Object.keys(result);\n\n  for (const key of keys) {\n    if (!isSelector(key)) continue;\n\n    const subStyles = result[key];\n\n    if (\n      !subStyles ||\n      typeof subStyles !== 'object' ||\n      Array.isArray(subStyles)\n    ) {\n      continue;\n    }\n\n    const subRecord = subStyles as Record<string, unknown>;\n\n    if (!('recipe' in subRecord)) continue;\n\n    const subResolved = resolveRecipesForLevel(subRecord, recipes);\n\n    if (subResolved) {\n      if (!changed) {\n        // First change in sub-elements -- need to shallow-copy the top level\n        changed = true;\n        result = { ...(styles as Record<string, unknown>) };\n      }\n      result[key] = subResolved;\n    }\n  }\n\n  return changed ? (result as Styles) : styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,UAAU;;;;;;;;;;;AAiB1B,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,QAA4B;EAAE,MAAM;EAAM,MAAM;EAAM;AAE5D,KAAI,OAAO,UAAU,SAAU,QAAO;CACtC,MAAM,UAAU,MAAM,MAAM;AAC5B,KAAI,YAAY,GAAI,QAAO;CAE3B,MAAM,YAAY,QAAQ,QAAQ,IAAI;AAEtC,KAAI,cAAc,GAEhB,QAAO;EAAE,MADK,WAAW,QAAQ;EACX,MAAM;EAAM;CAGpC,MAAM,WAAW,QAAQ,MAAM,GAAG,UAAU;CAC5C,MAAM,WAAW,QAAQ,MAAM,YAAY,EAAE;AAE7C,QAAO;EACL,MAAM,WAAW,SAAS;EAC1B,MAAM,WAAW,SAAS;EAC3B;;AAGH,SAAS,WAAW,GAA4B;CAC9C,MAAM,QAAQ,EAAE,MAAM,MAAM,CAAC,OAAO,QAAQ;AAC5C,QAAO,MAAM,SAAS,IAAI,QAAQ;;;;;;AAOpC,SAAS,oBACP,OACA,SACyB;CACzB,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,eAAe,QAAQ;AAE7B,MAAI,CAAC,cAAc;AACjB,OAAI,QACF,SAAQ,KACN,mBAAmB,KAAK,0EAEzB;AAEH;;AAGF,WAAS;GAAE,GAAG;GAAQ,GAAI;GAA0C;;AAGtE,QAAO;;;;;;;;AAST,SAAS,uBACP,QACA,SACgC;AAChC,KAAI,EAAE,YAAY,QAAS,QAAO;CAElC,MAAM,EAAE,MAAM,SAAS,iBAAiB,OAAO,OAAO;CAMtD,MAAM,EAAE,QAAQ,SAAS,GAAG,YAAY;CACxC,MAAM,aAAsC,EAAE;CAC9C,MAAM,iBAA0C,EAAE;AAElD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,KAAI,WAAW,IAAI,CACjB,gBAAe,OAAO,QAAQ;KAE9B,YAAW,OAAO,QAAQ;AAI9B,KAAI,CAAC,QAAQ,CAAC,KACZ,QAAO;CAIT,IAAI;AAEJ,KAAI,KAEF,UAAS,YADU,oBAAoB,MAAM,QAAQ,EACV,WAAqB;KAKhE,UAAS,EAAE,GAAG,YAAY;AAI5B,KAAI,MAAM;EACR,MAAM,aAAa,oBAAoB,MAAM,QAAQ;AACrD,WAAS,YAAY,QAAkB,WAAqB;;AAO9D,MAAK,MAAM,OAAO,OAAO,KAAK,eAAe,CAC3C,QAAO,OAAO,eAAe;AAG/B,QAAO;;;;;;;;;;;;AAaT,SAAgB,eAAe,QAAwB;CACrD,MAAM,UAAU,kBAAkB;AAGlC,KAAI,CAAC,QAAS,QAAO;CAErB,IAAI,UAAU;CAGd,MAAM,cAAc,uBAClB,QACA,QACD;CAED,IAAI;AAEJ,KAAI,aAAa;AACf,YAAU;AACV,WAAS;OAGT,UAAS;CAIX,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AACtB,MAAI,CAAC,WAAW,IAAI,CAAE;EAEtB,MAAM,YAAY,OAAO;AAEzB,MACE,CAAC,aACD,OAAO,cAAc,YACrB,MAAM,QAAQ,UAAU,CAExB;EAGF,MAAM,YAAY;AAElB,MAAI,EAAE,YAAY,WAAY;EAE9B,MAAM,cAAc,uBAAuB,WAAW,QAAQ;AAE9D,MAAI,aAAa;AACf,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,aAAS,EAAE,GAAI,QAAoC;;AAErD,UAAO,OAAO;;;AAIlB,QAAO,UAAW,SAAoB"}
+{"version":3,"file":"resolve-recipes.js","names":[],"sources":["../../src/utils/resolve-recipes.ts"],"sourcesContent":["/**\n * Recipe resolution utility.\n *\n * Resolves `recipe` style properties by looking up predefined recipe styles\n * from global configuration and merging them with the component's own styles.\n *\n * Resolution order per level (top-level and each sub-element independently):\n * base_recipe_1 base_recipe_2 → component styles → post_recipe_1 post_recipe_2\n *\n * The `/` separator splits base recipes (before component styles)\n * from post recipes (after component styles). All merges use mergeStyles\n * semantics: primitives and state maps with '' key fully replace;\n * state maps without '' key extend the existing value.\n *\n * Returns the same object reference if no recipes are present (zero overhead).\n */\n\nimport { getGlobalRecipes } from '../config';\nimport { isSelector } from '../pipeline';\nimport type { RecipeStyles, Styles } from '../styles/types';\n\nimport { isDevEnv } from './is-dev-env';\nimport { mergeStyles } from './merge-styles';\n\nconst devMode = isDevEnv();\n\ninterface ParsedRecipeGroups {\n  base: string[] | null;\n  post: string[] | null;\n}\n\n/**\n * Parse a recipe string into base and post recipe name groups.\n *\n * Syntax: `'base1 base2 / post1 post2'`\n * - Names are space-separated within each group\n * - `/` separates base (before component) from post (after component) groups\n * - `/` is optional; if absent, all names are base\n * - `none` as the sole base value means \"no base recipes\"\n *\n * Returns `{ base: null, post: null }` if the string is empty or invalid.\n */\nfunction parseRecipeNames(value: unknown): ParsedRecipeGroups {\n  const empty: ParsedRecipeGroups = { base: null, post: null };\n\n  if (typeof value !== 'string') return empty;\n  const trimmed = value.trim();\n  if (trimmed === '') return empty;\n\n  const slashIndex = trimmed.indexOf('/');\n\n  if (slashIndex === -1) {\n    if (trimmed === 'none') return empty;\n    const names = splitNames(trimmed);\n    return { base: names, post: null };\n  }\n\n  const basePart = trimmed.slice(0, slashIndex);\n  const postPart = trimmed.slice(slashIndex + 1);\n\n  return {\n    base: basePart.trim() === 'none' ? null : splitNames(basePart),\n    post: splitNames(postPart),\n  };\n}\n\nfunction splitNames(s: string): string[] | null {\n  const names = s.split(/\\s+/).filter(Boolean);\n  return names.length > 0 ? names : null;\n}\n\n/**\n * Collect merged styles for a list of recipe names.\n * Each recipe is flat-spread on top of the previous.\n */\nfunction collectRecipeStyles(\n  names: string[],\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> {\n  let merged: Record<string, unknown> = {};\n\n  for (const name of names) {\n    const recipeStyles = recipes[name];\n\n    if (!recipeStyles) {\n      if (devMode) {\n        console.warn(\n          `[Tasty] Recipe \"${name}\" not found. ` +\n            `Make sure it is defined in configure({ recipes: { ... } }).`,\n        );\n      }\n      continue;\n    }\n\n    merged = { ...merged, ...(recipeStyles as Record<string, unknown>) };\n  }\n\n  return merged;\n}\n\n/**\n * Resolve recipe references in a flat styles object (no sub-elements).\n * Returns null if no `recipe` key is present.\n *\n * Resolution: base recipes → component styles → post recipes (all via mergeStyles)\n */\nfunction resolveRecipesForLevel(\n  styles: Record<string, unknown>,\n  recipes: Record<string, RecipeStyles>,\n): Record<string, unknown> | null {\n  if (!('recipe' in styles)) return null;\n\n  const { base, post } = parseRecipeNames(styles.recipe);\n\n  // Separate selector keys (sub-elements) from flat style properties.\n  // mergeStyles handles selectors with its own semantics (e.g. false = delete),\n  // but at this level we only want recipe merging on flat properties.\n\n  const { recipe: _recipe, ...allRest } = styles;\n  const flatStyles: Record<string, unknown> = {};\n  const selectorStyles: Record<string, unknown> = {};\n\n  for (const key of Object.keys(allRest)) {\n    if (isSelector(key)) {\n      selectorStyles[key] = allRest[key];\n    } else {\n      flatStyles[key] = allRest[key];\n    }\n  }\n\n  if (!base && !post) {\n    return allRest;\n  }\n\n  // 1. Merge base recipes, then component styles on top (via mergeStyles)\n  let result: Record<string, unknown>;\n\n  if (base) {\n    const baseStyles = collectRecipeStyles(base, recipes);\n    result = mergeStyles(baseStyles as Styles, flatStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  } else {\n    result = { ...flatStyles };\n  }\n\n  // 2. Apply post recipes via mergeStyles (state map extend semantics)\n  if (post) {\n    const postStyles = collectRecipeStyles(post, recipes);\n    result = mergeStyles(result as Styles, postStyles as Styles) as Record<\n      string,\n      unknown\n    >;\n  }\n\n  // Re-attach selector keys unchanged\n  for (const key of Object.keys(selectorStyles)) {\n    result[key] = selectorStyles[key];\n  }\n\n  return result;\n}\n\n/**\n * Resolve all `recipe` style properties in a styles object.\n *\n * Handles both top-level and sub-element recipe references.\n * Returns the same object reference if no recipes are present anywhere\n * (zero overhead for the common case).\n *\n * @param styles - The styles object potentially containing `recipe` keys\n * @returns Resolved styles with recipe values merged in, or the original object if unchanged\n */\nexport function resolveRecipes(styles: Styles): Styles {\n  const recipes = getGlobalRecipes();\n\n  // Fast path: no recipes configured globally\n  if (!recipes) return styles;\n\n  let changed = false;\n\n  // Resolve top-level recipe\n  const topResolved = resolveRecipesForLevel(\n    styles as Record<string, unknown>,\n    recipes,\n  );\n\n  let result: Record<string, unknown>;\n\n  if (topResolved) {\n    changed = true;\n    result = topResolved;\n  } else {\n    // Keep reference; a shallow copy is deferred until a sub-element actually changes\n    result = styles as Record<string, unknown>;\n  }\n\n  // Resolve sub-element recipes\n  const keys = Object.keys(result);\n\n  for (const key of keys) {\n    if (!isSelector(key)) continue;\n\n    const subStyles = result[key];\n\n    if (\n      !subStyles ||\n      typeof subStyles !== 'object' ||\n      Array.isArray(subStyles)\n    ) {\n      continue;\n    }\n\n    const subRecord = subStyles as Record<string, unknown>;\n\n    if (!('recipe' in subRecord)) continue;\n\n    const subResolved = resolveRecipesForLevel(subRecord, recipes);\n\n    if (subResolved) {\n      if (!changed) {\n        // First change in sub-elements -- need to shallow-copy the top level\n        changed = true;\n        result = { ...(styles as Record<string, unknown>) };\n      }\n      result[key] = subResolved;\n    }\n  }\n\n  return changed ? (result as Styles) : styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,UAAU;;;;;;;;;;;;AAkB1B,SAAS,iBAAiB,OAAoC;CAC5D,MAAM,QAA4B;EAAE,MAAM;EAAM,MAAM;EAAM;AAE5D,KAAI,OAAO,UAAU,SAAU,QAAO;CACtC,MAAM,UAAU,MAAM,MAAM;AAC5B,KAAI,YAAY,GAAI,QAAO;CAE3B,MAAM,aAAa,QAAQ,QAAQ,IAAI;AAEvC,KAAI,eAAe,IAAI;AACrB,MAAI,YAAY,OAAQ,QAAO;AAE/B,SAAO;GAAE,MADK,WAAW,QAAQ;GACX,MAAM;GAAM;;CAGpC,MAAM,WAAW,QAAQ,MAAM,GAAG,WAAW;CAC7C,MAAM,WAAW,QAAQ,MAAM,aAAa,EAAE;AAE9C,QAAO;EACL,MAAM,SAAS,MAAM,KAAK,SAAS,OAAO,WAAW,SAAS;EAC9D,MAAM,WAAW,SAAS;EAC3B;;AAGH,SAAS,WAAW,GAA4B;CAC9C,MAAM,QAAQ,EAAE,MAAM,MAAM,CAAC,OAAO,QAAQ;AAC5C,QAAO,MAAM,SAAS,IAAI,QAAQ;;;;;;AAOpC,SAAS,oBACP,OACA,SACyB;CACzB,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,QAAQ,OAAO;EACxB,MAAM,eAAe,QAAQ;AAE7B,MAAI,CAAC,cAAc;AACjB,OAAI,QACF,SAAQ,KACN,mBAAmB,KAAK,0EAEzB;AAEH;;AAGF,WAAS;GAAE,GAAG;GAAQ,GAAI;GAA0C;;AAGtE,QAAO;;;;;;;;AAST,SAAS,uBACP,QACA,SACgC;AAChC,KAAI,EAAE,YAAY,QAAS,QAAO;CAElC,MAAM,EAAE,MAAM,SAAS,iBAAiB,OAAO,OAAO;CAMtD,MAAM,EAAE,QAAQ,SAAS,GAAG,YAAY;CACxC,MAAM,aAAsC,EAAE;CAC9C,MAAM,iBAA0C,EAAE;AAElD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,KAAI,WAAW,IAAI,CACjB,gBAAe,OAAO,QAAQ;KAE9B,YAAW,OAAO,QAAQ;AAI9B,KAAI,CAAC,QAAQ,CAAC,KACZ,QAAO;CAIT,IAAI;AAEJ,KAAI,KAEF,UAAS,YADU,oBAAoB,MAAM,QAAQ,EACV,WAAqB;KAKhE,UAAS,EAAE,GAAG,YAAY;AAI5B,KAAI,MAAM;EACR,MAAM,aAAa,oBAAoB,MAAM,QAAQ;AACrD,WAAS,YAAY,QAAkB,WAAqB;;AAO9D,MAAK,MAAM,OAAO,OAAO,KAAK,eAAe,CAC3C,QAAO,OAAO,eAAe;AAG/B,QAAO;;;;;;;;;;;;AAaT,SAAgB,eAAe,QAAwB;CACrD,MAAM,UAAU,kBAAkB;AAGlC,KAAI,CAAC,QAAS,QAAO;CAErB,IAAI,UAAU;CAGd,MAAM,cAAc,uBAClB,QACA,QACD;CAED,IAAI;AAEJ,KAAI,aAAa;AACf,YAAU;AACV,WAAS;OAGT,UAAS;CAIX,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AACtB,MAAI,CAAC,WAAW,IAAI,CAAE;EAEtB,MAAM,YAAY,OAAO;AAEzB,MACE,CAAC,aACD,OAAO,cAAc,YACrB,MAAM,QAAQ,UAAU,CAExB;EAGF,MAAM,YAAY;AAElB,MAAI,EAAE,YAAY,WAAY;EAE9B,MAAM,cAAc,uBAAuB,WAAW,QAAQ;AAE9D,MAAI,aAAa;AACf,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,aAAS,EAAE,GAAI,QAAoC;;AAErD,UAAO,OAAO;;;AAIlB,QAAO,UAAW,SAAoB"}

package/dist/utils/styles.js

@@ -1,10 +1,10 @@
 import { StyleParser } from "../parser/parser.js";
 import { okhslFunc } from "../plugins/okhsl-plugin.js";
+import { createStateParserContext, parseAdvancedState } from "../states/index.js";
 import { cacheWrapper } from "./cache-wrapper.js";
 import { camelToKebab } from "./case-converter.js";
 import { okhslToRgb } from "./okhsl-to-rgb.js";
 import { hslToRgb } from "./hsl-to-rgb.js";
-import { createStateParserContext, parseAdvancedState } from "../states/index.js";
 
 //#region src/utils/styles.ts
 /**

package/dist/zero/extractor.d.ts

@@ -1,4 +1,3 @@
-import "../injector/types.js";
 import { Styles } from "../styles/types.js";
 
 //#region src/zero/extractor.d.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "exports": {
@@ -34,10 +34,10 @@
         "default": "./dist/zero/next.js"
       }
     },
-    "./parser": {
+    "./core": {
       "import": {
-        "types": "./dist/parser/index.d.ts",
-        "default": "./dist/parser/index.js"
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
       }
     }
   },

package/dist/chunks/cacheKey.d.ts

@@ -1 +0,0 @@
-import "../styles/types.js";

package/dist/chunks/index.d.ts

@@ -1,3 +0,0 @@
-import { CHUNK_NAMES, ChunkInfo, ChunkName, STYLE_TO_CHUNK, categorizeStyleKeys } from "./definitions.js";
-import "./cacheKey.js";
-import "./renderChunk.js";

package/dist/chunks/renderChunk.d.ts

@@ -1,2 +0,0 @@
-import "../styles/types.js";
-import "../pipeline/index.js";

package/dist/hooks/index.d.ts

@@ -1,5 +0,0 @@
-import { UseStylesOptions, UseStylesResult, useStyles } from "./useStyles.js";
-import { useGlobalStyles } from "./useGlobalStyles.js";
-import { useRawCSS } from "./useRawCSS.js";
-import { useKeyframes } from "./useKeyframes.js";
-import { UsePropertyOptions, useProperty } from "./useProperty.js";

package/dist/parser/index.d.ts

@@ -1,3 +0,0 @@
-import { Bucket, ParserOptions, ProcessedStyle, StyleDetails, StyleDetailsPart, UnitHandler } from "./types.js";
-import { StyleParser } from "./parser.js";
-export { Bucket, type ParserOptions, type ProcessedStyle, type StyleDetails, type StyleDetailsPart, StyleParser, type UnitHandler };

package/dist/parser/index.js

@@ -1,4 +0,0 @@
-import { Bucket } from "./types.js";
-import { StyleParser } from "./parser.js";
-
-export { Bucket, StyleParser };

package/dist/pipeline/exclusive.d.ts

@@ -1 +0,0 @@
-import "../utils/styles.js";

package/dist/plugins/index.d.ts

@@ -1,2 +0,0 @@
-import { TastyPlugin, TastyPluginFactory } from "./types.js";
-import { okhslFunc, okhslPlugin } from "./okhsl-plugin.js";