@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/types/tasty/utils/getModCombinations.d.ts

@@ -0,0 +1,9 @@
+export type ConflictChecker = (combination: string[]) => boolean;
+/**
+ * Efficient iterative combination generator with early pruning
+ * Generates combinations one by one and prunes branches early when conflicts are detected
+ * @param array - Array of mod strings to generate combinations from
+ * @param allowEmpty - Whether to include empty combination
+ * @param conflictChecker - Function to detect conflicting combinations (required)
+ */
+export declare function getModCombinationsIterative(array: string[], allowEmpty?: boolean, conflictChecker?: ConflictChecker): string[][];

package/types/tasty/utils/renderStyles.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Style rendering that works with structured style objects.
+ * Eliminates CSS string parsing for better performance.
+ *
+ * Key optimizations:
+ * - Early exit checks (hasSameAttributeConflicts) handle common cases without overhead
+ * - Logical rule caching (logicalRulesCache) memoizes expensive style processing
+ * - Conflict detection prevents invalid CSS selector combinations
+ * - Not-selector optimization reduces CSS size
+ * - Priority-based filtering handles mod precedence correctly
+ * - Consolidated mod processing eliminates code duplication
+ */
+import { Styles } from '../styles/types';
+export interface StyleResult {
+    selector: string;
+    declarations: string;
+    atRules?: string[];
+    needsClassName?: boolean;
+}
+export interface RenderResult {
+    rules: StyleResult[];
+    className?: string;
+}
+/**
+ * Check if a key represents a CSS selector
+ */
+export declare function isSelector(key: string): boolean;
+/**
+ * Render styles to StyleResult[] format (recommended)
+ * Supports both component and global styling with advanced optimizations
+ */
+export declare function renderStyles(styles?: Styles, responsive?: number[], className?: string): RenderResult;
+/**
+ * Render styles without className for element styles (injector will add it)
+ */
+export declare function renderStyles(styles: Styles | undefined, responsive?: number[]): RenderResult;
+/**
+ * Render styles for direct injection with a specific selector
+ * Bypasses CSS text generation and flattening by directly creating StyleResult[]
+ */
+export declare function renderStyles(styles: Styles | undefined, responsive: number[], selector: string): StyleResult[];

package/types/tasty/utils/responsive.d.ts

@@ -0,0 +1,8 @@
+import { ResponsiveStyleValue } from './styles';
+export interface ResponsiveZone {
+    max?: number;
+    min?: number;
+    mediaQuery?: string;
+}
+export declare function pointsToZones(points: number[]): any;
+export declare function normalizeStyleZones(value: ResponsiveStyleValue, zoneNumber: number): any[] | null | undefined;

package/types/tasty/utils/styles.d.ts

@@ -1,16 +1,10 @@
-import { StyleParser } from '../parser/parser';
 import { Styles } from '../styles/types';
 import type { ProcessedStyle, StyleDetails } from '../parser/types';
-import type { AtRuleContext, ParsedAdvancedState } from '../states';
 export type StyleValue<T = string> = T | boolean | number | null | undefined;
 export type StyleValueStateMap<T = string> = {
     [key: string]: StyleValue<T>;
 };
-/**
- * Combined type for style values that can be either a direct value or a state map.
- * Use this for component props that accept style values.
- */
-export type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;
+export type ResponsiveStyleValue<T = string> = StyleValue<T> | StyleValue<T>[] | StyleValueStateMap<T> | StyleValueStateMap<T>[];
 export type ComputeModel = string | number;
 export type CSSMap = {
     $?: string | string[];
@@ -25,19 +19,11 @@ export type StyleHandler = RawStyleHandler & {
 export interface StyleStateData {
     model?: ComputeModel;
     tokens?: string[];
-    value: StyleValue | StyleValueStateMap;
+    value: ResponsiveStyleValue;
     /** 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[];
 }
 export interface ParsedColor {
     color?: string;
@@ -49,7 +35,7 @@ export type StyleStateDataListMap = {
     [key: string]: StyleStateDataList;
 };
 export type StyleMap = {
-    [key: string]: StyleValue | StyleValueStateMap;
+    [key: string]: ResponsiveStyleValue;
 };
 export type StyleStateMap = {
     [key: string]: StyleStateData;
@@ -65,21 +51,12 @@ export declare const CUSTOM_UNITS: {
     rp: string;
     gp: string;
     sf: (num: any) => string;
+    dvh: (num: any) => string;
     sp: (num: any) => string;
 };
 export declare const DIRECTIONS: string[];
 export declare function getModSelector(modName: string): string;
 export declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
-/**
- * Get the global StyleParser instance.
- * Used by configure() to apply parser configuration.
- */
-export declare function getGlobalParser(): StyleParser;
-/**
- * Get the current custom functions registry.
- * Used by configure() to merge with new functions.
- */
-export declare function getGlobalFuncs(): Record<string, (groups: StyleDetails[]) => string>;
 /**
  *
  * @param {String} value
@@ -93,18 +70,7 @@ export declare function parseStyle(value: StyleValue): ProcessedStyle;
  */
 export declare function parseColor(val: string, ignoreError?: boolean): ParsedColor;
 export declare function strToRgb(color: any, ignoreAlpha?: boolean): any;
-/**
- * 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.
- */
-export declare function getRgbValuesFromRgbaString(str: string): number[];
+export declare function getRgbValuesFromRgbaString(str: any): any;
 export declare function hexToRgb(hex: any): string | null;
 export declare function filterMods(mods: any, allowedMods: any): any;
 export declare function extendStyles(defaultStyles: any, newStyles: any): {};
@@ -121,10 +87,6 @@ export declare function extractStyles(props: {
 }, styleList?: readonly string[], defaultStyles?: Styles, propMap?: {
     [key: string]: string;
 }, ignoreList?: readonly string[]): Styles;
-/**
- * Check if a token is an advanced state (starts with @)
- */
-export declare function isAdvancedStateToken(token: string): boolean;
 export declare const STATE_OPERATORS: {
     NOT: string;
     AND: string;
@@ -137,18 +99,12 @@ export declare const STATE_OPERATOR_LIST: string[];
  */
 declare function parseStateNotationInner(notation: string, value: any): StyleStateData;
 export declare const parseStateNotation: typeof parseStateNotationInner;
-/**
- * Build an AtRuleContext from parsed advanced states
- */
-export 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.
  */
-export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleStateMap | StyleValue | StyleValueStateMap, parserContext?: import('../states').StateParserContext): {
+export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleStateMap | ResponsiveStyleValue): {
     states: StyleStateDataList;
     mods: string[];
-    hasAdvancedStates: boolean;
 };
 export declare const COMPUTE_FUNC_MAP: {
     '!': (a: any) => boolean;

package/types/tokens.d.ts

@@ -0,0 +1,221 @@
+export declare const SIZES: {
+    XS: number;
+    SM: number;
+    MD: number;
+    LG: number;
+    XL: number;
+};
+export declare const SIZES_MAP: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+};
+declare const TOKENS: {
+    'font-size': string;
+    'line-height': string;
+    'input-font-size': string;
+    'input-line-height': string;
+    'input-letter-spacing': string;
+    'disabled-opacity': string;
+    gap: string;
+    'stroke-width': number;
+    'outline-width': string;
+    'border-width': string;
+    radius: string;
+    'large-radius': string;
+    'card-radius': string;
+    'leaf-sharp-radius': string;
+    'fade-width': string;
+    transition: string;
+    'disclosure-transition': string;
+    'min-dialog-size': string;
+    'clear-color': string;
+    'border-opaque-color': string;
+    'shadow-color': string;
+    'draft-color': string;
+    'minor-color': string;
+    'danger-bg-hover-color': string;
+    'dark-75-color': string;
+    'primary-color': string;
+    'pink-8-color': string;
+    'pink-9-color': string;
+    'disabled-color': string;
+    'disabled-text-color': string;
+    'disabled-bg-color': string;
+    'max-content-width': string;
+    'topbar-height': string;
+    'devmodebar-height': string;
+    'sidebar-width': string;
+    'border-radius-base': string;
+    'item-shadow': string;
+    'card-shadow': string;
+    'dialog-shadow': string;
+    'size-xs': string;
+    'size-sm': string;
+    'size-md': string;
+    'size-lg': string;
+    'size-xl': string;
+    'space-xs': string;
+    'space-sm': string;
+    'space-md': string;
+    'space-lg': string;
+    'space-xl': string;
+    'text-font-size': string;
+    'text-line-height': string;
+    'text-letter-spacing': string;
+    'h1-font-size': string;
+    'h1-line-height': string;
+    'h1-letter-spacing': string;
+    'h1-font-weight': string;
+    'h1-bold-font-weight': string;
+    'h1-icon-size': string;
+    'h2-font-size': string;
+    'h2-line-height': string;
+    'h2-letter-spacing': string;
+    'h2-font-weight': string;
+    'h2-bold-font-weight': string;
+    'h2-icon-size': string;
+    'h3-font-size': string;
+    'h3-line-height': string;
+    'h3-letter-spacing': string;
+    'h3-font-weight': string;
+    'h3-bold-font-weight': string;
+    'h3-icon-size': string;
+    'h4-font-size': string;
+    'h4-line-height': string;
+    'h4-letter-spacing': string;
+    'h4-font-weight': string;
+    'h4-bold-font-weight': string;
+    'h4-icon-size': string;
+    'h5-font-size': string;
+    'h5-line-height': string;
+    'h5-letter-spacing': string;
+    'h5-font-weight': string;
+    'h5-bold-font-weight': string;
+    'h5-icon-size': string;
+    'h6-font-size': string;
+    'h6-line-height': string;
+    'h6-letter-spacing': string;
+    'h6-font-weight': string;
+    'h6-bold-font-weight': string;
+    'h6-icon-size': string;
+    't1-font-size': string;
+    't1-line-height': string;
+    't1-letter-spacing': string;
+    't1-font-weight': string;
+    't1-icon-size': string;
+    't2-font-size': string;
+    't2-line-height': string;
+    't2-letter-spacing': string;
+    't2-font-weight': string;
+    't2-icon-size': string;
+    't2m-font-size': string;
+    't2m-line-height': string;
+    't2m-letter-spacing': string;
+    't2m-font-weight': string;
+    't2m-icon-size': string;
+    't3-font-size': string;
+    't3-line-height': string;
+    't3-letter-spacing': string;
+    't3-font-weight': string;
+    't3-icon-size': string;
+    't3m-font-size': string;
+    't3m-line-height': string;
+    't3m-letter-spacing': string;
+    't3m-font-weight': string;
+    't3m-icon-size': string;
+    't4-font-size': string;
+    't4-line-height': string;
+    't4-letter-spacing': string;
+    't4-font-weight': string;
+    't4-icon-size': string;
+    't4m-font-size': string;
+    't4m-line-height': string;
+    't4m-letter-spacing': string;
+    't4m-font-weight': string;
+    't4m-bold-font-weight': string;
+    't4m-icon-size': string;
+    'm1-font-size': string;
+    'm1-line-height': string;
+    'm1-letter-spacing': string;
+    'm1-font-weight': string;
+    'm1-icon-size': string;
+    'm2-font-size': string;
+    'm2-line-height': string;
+    'm2-letter-spacing': string;
+    'm2-font-weight': string;
+    'm2-icon-size': string;
+    'm3-font-size': string;
+    'm3-line-height': string;
+    'm3-letter-spacing': string;
+    'm3-font-weight': string;
+    'm3-icon-size': string;
+    'p1-font-size': string;
+    'p1-line-height': string;
+    'p1-letter-spacing': string;
+    'p1-font-weight': string;
+    'p1-icon-size': string;
+    'p2-font-size': string;
+    'p2-line-height': string;
+    'p2-letter-spacing': string;
+    'p2-font-weight': string;
+    'p2-icon-size': string;
+    'p3-font-size': string;
+    'p3-line-height': string;
+    'p3-letter-spacing': string;
+    'p3-font-weight': string;
+    'p3-icon-size': string;
+    'p4-font-size': string;
+    'p4-line-height': string;
+    'p4-letter-spacing': string;
+    'p4-font-weight': string;
+    'p4-icon-size': string;
+    'c1-font-size': string;
+    'c1-line-height': string;
+    'c1-letter-spacing': string;
+    'c1-font-weight': string;
+    'c1-font-bold-weight': string;
+    'c1-text-transform': string;
+    'c1-icon-size': string;
+    'c2-font-size': string;
+    'c2-line-height': string;
+    'c2-letter-spacing': string;
+    'c2-font-weight': string;
+    'c2-font-bold-weight': string;
+    'c2-text-transform': string;
+    'c2-icon-size': string;
+    'tag-font-size': string;
+    'tag-line-height': string;
+    'tag-letter-spacing': string;
+    'tag-font-weight': string;
+    'tag-bold-font-weight': string;
+    'tag-icon-size': string;
+    'strong-font-size': string;
+    'strong-line-height': string;
+    'strong-letter-spacing': string;
+    'strong-font-family': string;
+    'strong-font-style': string;
+    'strong-font-weight': string;
+    'em-font-size': string;
+    'em-line-height': string;
+    'em-letter-spacing': string;
+    'em-font-family': string;
+    'em-font-style': string;
+    'em-font-weight': string;
+    'default-font-size': string;
+    'default-line-height': string;
+    'default-letter-spacing': string;
+    'default-font-weight': string;
+    'default-bold-font-weight': string;
+    'default-icon-size': string;
+    'scrollbar-width': string;
+    'scrollbar-outline-width': string;
+    'scrollbar-radius': string;
+    'scrollbar-thumb-color': string;
+    'scrollbar-outline-color': string;
+    'scrollbar-bg-color': string;
+    'scrollbar-corner-color': string;
+};
+export { TOKENS };

package/es/tasty/chunks/cacheKey.js

@@ -1,98 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * Released under the MIT license.
- */
-
-/**
- * Chunk-specific cache key generation.
- *
- * Generates cache keys that only include styles relevant to a specific chunk,
- * enabling more granular caching and reuse.
- *
- * Enhanced to support predefined states:
- * - Global predefined states don't affect cache keys (constant across app)
- * - Local predefined states only affect cache keys if referenced in the chunk
- */
-import { extractLocalPredefinedStates, extractPredefinedStateRefs, } from '../states';
-/**
- * Recursively serialize a value with sorted keys for stable output.
- * This ensures that {a: 1, b: 2} and {b: 2, a: 1} produce the same string.
- */
-function stableStringify(value) {
-    if (value === null) {
-        return 'null';
-    }
-    if (value === undefined) {
-        return 'undefined';
-    }
-    if (typeof value !== 'object') {
-        return JSON.stringify(value);
-    }
-    if (Array.isArray(value)) {
-        return '[' + value.map(stableStringify).join(',') + ']';
-    }
-    // Object: sort keys for stable order
-    const obj = value;
-    const sortedKeys = Object.keys(obj).sort();
-    const parts = [];
-    for (const key of sortedKeys) {
-        if (obj[key] !== undefined) {
-            parts.push(`${JSON.stringify(key)}:${stableStringify(obj[key])}`);
-        }
-    }
-    return '{' + parts.join(',') + '}';
-}
-/**
- * Generate a cache key for a specific chunk.
- *
- * Only includes the styles that belong to this chunk, allowing
- * chunks to be cached independently.
- *
- * Also includes relevant local predefined states that are referenced
- * by this chunk's styles.
- *
- * @param styles - The full styles object
- * @param chunkName - Name of the chunk
- * @param styleKeys - Keys of styles belonging to this chunk
- * @returns A stable cache key string
- */
-export function generateChunkCacheKey(styles, chunkName, styleKeys) {
-    // Start with chunk name for namespace separation
-    const parts = [chunkName];
-    // Sort keys for stable ordering
-    const sortedKeys = styleKeys.slice().sort();
-    // Build the chunk-specific styles string for predefined state detection
-    let chunkStylesStr = '';
-    for (const key of sortedKeys) {
-        const value = styles[key];
-        if (value !== undefined) {
-            // Use stable stringify for consistent serialization regardless of key order
-            const serialized = stableStringify(value);
-            parts.push(`${key}:${serialized}`);
-            chunkStylesStr += serialized;
-        }
-    }
-    // Extract local predefined states from the full styles object
-    const localStates = extractLocalPredefinedStates(styles);
-    // Only include local predefined states that are actually referenced in this chunk
-    if (Object.keys(localStates).length > 0) {
-        const referencedStates = extractPredefinedStateRefs(chunkStylesStr);
-        const relevantLocalStates = [];
-        for (const stateName of referencedStates) {
-            if (localStates[stateName]) {
-                relevantLocalStates.push(`${stateName}=${localStates[stateName]}`);
-            }
-        }
-        // Add relevant local states to the cache key (sorted for stability)
-        if (relevantLocalStates.length > 0) {
-            relevantLocalStates.sort();
-            parts.unshift(`[states:${relevantLocalStates.join('|')}]`);
-        }
-    }
-    // Use null character as separator (safe, not in JSON output)
-    return parts.join('\0');
-}
-
-