@cube-dev/ui-kit 0.0.0-canary-0f4773b → 0.0.0-canary-458bf0e

package/types/tasty/index.d.ts

@@ -11,8 +11,6 @@ export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
-export * from './injector';
-export * from './debug';
 export type { TastyProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

package/types/tasty/parser/lru.d.ts

@@ -3,13 +3,9 @@ export declare class Lru<K, V> {
     private map;
     private head;
     private tail;
-    private onEvict?;
-    constructor(limit?: number, onEvict?: (key: K, value: V) => void);
-    setOnEvict(fn?: (key: K, value: V) => void): void;
+    constructor(limit?: number);
     get(key: K): V | undefined;
     set(key: K, value: V): void;
-    delete(key: K): void;
-    keys(): IterableIterator<K>;
     private touch;
     private evict;
     clear(): void;

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

@@ -1,8 +1,6 @@
 export declare function colorStyle({ color }: {
     color: any;
-}): "" | {
-    color: any;
-};
+}): any[] | "";
 export declare namespace colorStyle {
     var __lookupStyles: string[];
 }

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

@@ -1,6 +1,7 @@
+import { CSSMap } from '../utils/styles';
 export declare function resetStyle({ reset }: {
     reset: any;
-}): any[] | undefined;
+}): CSSMap[] | undefined;
 export declare namespace resetStyle {
     var __lookupStyles: string[];
 }

package/types/tasty/types.d.ts

@@ -32,6 +32,8 @@ export interface BasePropsWithoutChildren<K extends TagName = TagName> extends P
     isDisabled?: boolean;
     /** Plain css for the element */
     css?: string;
+    /** The element name for using in style overriding */
+    styleName?: string;
     /** The CSS style map */
     style?: CSSProperties | (CSSProperties & {
         [key: string]: string | number | null;

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

@@ -1,28 +1,10 @@
-/**
- * Style rendering that works with structured style objects
- * Eliminates CSS string parsing for better performance
- */
 import { Styles } from '../styles/types';
-export interface StyleResult {
-    selector: string;
-    declarations: string;
-    atRules?: string[];
-}
-export interface RenderResult {
-    rules: StyleResult[];
-    className?: string;
-}
-/**
- * Check if a key represents a CSS selector
- */
-export declare function isSelector(key: string): boolean;
-/**
- * Render styles without CSS string conversion
- * This is a performance-optimized version of renderStyles
- */
-export declare function renderStyles(styles?: Styles, responsive?: number[], className?: string): RenderResult;
+export declare function isSelector(key: any): any;
 /**
- * Render styles for global injection (without class names)
- * Returns CSS with & selectors that injectGlobal can process
+ * Render style props to complete Styled Components CSS.
+ * @param styles - Complete style props.
+ * @param responsive - A list of responsive zones
+ * @param {string} [suffix]
+ * @return {string}
  */
-export declare function renderStylesForGlobal(styles?: Styles, responsive?: number[]): string;
+export declare function renderStyles(styles?: Styles, responsive?: number[], suffix?: string): any;

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

@@ -95,7 +95,6 @@ export declare const CUSTOM_UNITS: {
 };
 export declare const DIRECTIONS: string[];
 export declare function createRule(prop: string, value: StyleValue, selector?: string): string;
-export declare function getModSelector(modName: string): string;
 export declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
 /**
  *
@@ -138,6 +137,12 @@ export declare function extractStyles(props: {
 }, styleList?: readonly string[], defaultStyles?: Styles, propMap?: {
     [key: string]: string;
 }, ignoreList?: readonly string[]): Styles;
+/**
+ * Render CSSMap to Styled Components CSS
+ * @param styles
+ * @param [selector]
+ */
+export declare function renderStylesToSC(styles: StyleHandlerResult, selector?: string): any;
 /**
  * Compile states to finite CSS with selectors.
  * State values should contain a string value with CSS style list.
@@ -146,6 +151,9 @@ export declare function extractStyles(props: {
  * @param {string} suffix
  */
 export declare function applyStates(selector: string, states: any, suffix?: string): any;
+export declare function styleHandlerCacheWrapper(styleHandler: StyleHandler, limit?: number): ((styleMap: any, suffix?: string | undefined) => any) & {
+    __lookupStyles: string[];
+};
 /**
  * Replace state values with new ones.
  * For example, if you want to replace initial values with finite CSS code.

package/es/tasty/debug.js

@@ -1,282 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-0f4773b
- * Released under the MIT license.
- */
-
-/**
- * Debug utilities for inspecting tasty-generated CSS at runtime
- */
-import { getCssText, getCssTextForNode, injector } from './injector';
-/**
- * Pretty-print CSS with proper indentation and formatting
- */
-function prettifyCSS(css) {
-    if (!css || css.trim() === '') {
-        return '';
-    }
-    // First, normalize whitespace but preserve structure
-    let formatted = css.replace(/\s+/g, ' ').trim();
-    // Add newlines after opening braces
-    formatted = formatted.replace(/\s*\{\s*/g, ' {\n');
-    // Add newlines after semicolons (but not inside strings or functions)
-    formatted = formatted.replace(/;(?![^"']*["'][^"']*$)(?![^()]*\))/g, ';\n');
-    // Add newlines before closing braces
-    formatted = formatted.replace(/\s*\}\s*/g, '\n}\n');
-    // Handle comma-separated selectors (only outside of property values)
-    // This regex looks for commas that are:
-    // 1. Not inside quotes
-    // 2. Not inside parentheses (CSS functions)
-    // 3. Not followed by a colon (not in a property value)
-    formatted = formatted.replace(/,(?![^"']*["'][^"']*$)(?![^()]*\))(?=.*:.*\{|.*\{)/g, ',\n');
-    // Process line by line for proper indentation
-    const lines = formatted.split('\n');
-    let indentLevel = 0;
-    const indentSize = 2;
-    const formattedLines = lines.map((line) => {
-        const trimmed = line.trim();
-        if (!trimmed)
-            return '';
-        // Handle closing braces - decrease indent first
-        if (trimmed === '}') {
-            indentLevel = Math.max(0, indentLevel - 1);
-            return ' '.repeat(indentLevel * indentSize) + trimmed;
-        }
-        // Current line with proper indentation
-        const indent = ' '.repeat(indentLevel * indentSize);
-        let result = indent + trimmed;
-        // Handle opening braces - increase indent for next line
-        if (trimmed.endsWith('{')) {
-            indentLevel++;
-        }
-        return result;
-    });
-    // Clean up the result and ensure proper spacing
-    let result = formattedLines
-        .filter((line) => line.trim()) // Remove empty lines
-        .join('\n')
-        .replace(/\n{3,}/g, '\n\n') // Max 2 consecutive newlines
-        .trim();
-    // Final cleanup: ensure single spaces in function calls
-    result = result.replace(/,\s+/g, ', ');
-    return result;
-}
-/**
- * Debug utilities for inspecting tasty styles in runtime applications
- */
-export const tastyDebug = {
-    /**
-     * Get CSS for a specific tasty class (e.g., 't24')
-     */
-    getCSSForClass(className) {
-        if (!className.match(/^t\d+$/)) {
-            console.warn(`"${className}" doesn't look like a tasty class. Expected format: t{number}`);
-        }
-        const css = injector.instance.getCssTextForClasses([className]);
-        return prettifyCSS(css);
-    },
-    /**
-     * Get CSS for multiple tasty classes
-     */
-    getCSSForClasses(classNames) {
-        const css = injector.instance.getCssTextForClasses(classNames);
-        return prettifyCSS(css);
-    },
-    /**
-     * Log CSS for a specific tasty class (e.g., 't24') to console
-     */
-    logCSSForClass(className) {
-        if (!className.match(/^t\d+$/)) {
-            console.warn(`"${className}" doesn't look like a tasty class. Expected format: t{number}`);
-        }
-        const css = this.getCSSForClass(className);
-        this.logCSS(css, `CSS for class "${className}"`);
-    },
-    /**
-     * Log CSS for multiple tasty classes to console
-     */
-    logCSSForClasses(classNames) {
-        const css = this.getCSSForClasses(classNames);
-        const title = `CSS for classes [${classNames.join(', ')}]`;
-        this.logCSS(css, title);
-    },
-    /**
-     * Inspect an element by CSS selector and get its tasty CSS
-     */
-    inspectElement(selector) {
-        const element = document.querySelector(selector);
-        if (!element) {
-            return `Element not found: ${selector}`;
-        }
-        console.group(`🎨 Tasty CSS for "${selector}"`);
-        console.log('Element:', element);
-        const css = getCssTextForNode(element);
-        if (css) {
-            const prettified = prettifyCSS(css);
-            console.log('Generated CSS:\n' + prettified);
-            console.groupEnd();
-            return prettified;
-        }
-        else {
-            console.log('No tasty CSS found for this element');
-            console.groupEnd();
-            return 'No tasty CSS found';
-        }
-    },
-    /**
-     * Inspect a DOM element directly and get its tasty CSS
-     */
-    inspectDOMElement(element) {
-        if (!element) {
-            return 'Element is null or undefined';
-        }
-        console.group('🎨 Tasty CSS for element');
-        console.log('Element:', element);
-        const css = getCssTextForNode(element);
-        if (css) {
-            const prettified = prettifyCSS(css);
-            console.log('Generated CSS:\n' + prettified);
-            console.groupEnd();
-            return prettified;
-        }
-        else {
-            console.log('No tasty CSS found for this element');
-            console.groupEnd();
-            return 'No tasty CSS found';
-        }
-    },
-    /**
-     * Get all tasty CSS currently injected into the page
-     */
-    getAllCSS() {
-        return getCssText();
-    },
-    /**
-     * Find all tasty classes used in the page
-     */
-    findAllTastyClasses() {
-        const classes = new Set();
-        // Find all elements with class attributes
-        const elements = document.querySelectorAll('[class]');
-        elements.forEach((element) => {
-            const classList = element.getAttribute('class');
-            if (classList) {
-                // Extract tasty classes (t + digits)
-                const tastyClasses = classList
-                    .split(/\s+/)
-                    .filter((cls) => /^t\d+$/.test(cls));
-                tastyClasses.forEach((cls) => classes.add(cls));
-            }
-        });
-        return Array.from(classes).sort((a, b) => {
-            // Sort numerically by the number part
-            const aNum = parseInt(a.slice(1));
-            const bNum = parseInt(b.slice(1));
-            return aNum - bNum;
-        });
-    },
-    /**
-     * Get a summary of all tasty styles in use
-     */
-    getSummary() {
-        const classes = this.findAllTastyClasses();
-        const allCSS = this.getAllCSS();
-        const summary = {
-            totalClasses: classes.length,
-            classes,
-            totalCSSSize: allCSS.length,
-            allCSS,
-        };
-        console.group('🎨 Tasty Debug Summary');
-        console.log(`Total tasty classes found: ${summary.totalClasses}`);
-        console.log(`Total CSS size: ${summary.totalCSSSize} characters`);
-        console.log('Classes in use:', summary.classes);
-        console.groupEnd();
-        return summary;
-    },
-    /**
-     * Helper to log CSS in a readable format
-     */
-    logCSS(css, title = 'CSS') {
-        if (!css || css.trim() === '') {
-            console.log(`${title}: (empty)`);
-            return;
-        }
-        console.group(`🎨 ${title}`);
-        const prettified = prettifyCSS(css);
-        console.log(prettified);
-        console.groupEnd();
-    },
-    /**
-     * Advanced inspection with detailed breakdown
-     */
-    inspect(target) {
-        const element = typeof target === 'string' ? document.querySelector(target) : target;
-        if (!element) {
-            console.error(`Element not found: ${target}`);
-            return {
-                element: null,
-                tastyClasses: [],
-                css: '',
-                breakdown: {},
-            };
-        }
-        // Find tasty classes on this element
-        const classList = element.getAttribute('class') || '';
-        const tastyClasses = classList
-            .split(/\s+/)
-            .filter((cls) => /^t\d+$/.test(cls));
-        // Get CSS for the entire subtree
-        const fullCSS = getCssTextForNode(element);
-        // Get CSS breakdown per class
-        const breakdown = {};
-        tastyClasses.forEach((className) => {
-            breakdown[className] = this.getCSSForClass(className);
-        });
-        const result = {
-            element,
-            tastyClasses,
-            css: prettifyCSS(fullCSS),
-            breakdown,
-        };
-        console.group(`🔍 Detailed Tasty Inspection`);
-        console.log('Element:', element);
-        console.log('Tasty classes found:', tastyClasses);
-        console.log('Total CSS for element tree:\n' + prettifyCSS(fullCSS));
-        console.log('CSS breakdown by class:', breakdown);
-        console.groupEnd();
-        return result;
-    },
-};
-/**
- * Check if we're in a development environment at runtime
- * Uses bracket notation to avoid bundler compilation
- */
-function isDevelopmentEnvironment() {
-    if (typeof process === 'undefined')
-        return false;
-    // Use bracket notation to avoid bundler replacement
-    const nodeEnv = process.env?.['NODE_ENV'];
-    return nodeEnv === 'development' || nodeEnv !== 'production';
-}
-/**
- * Install tastyDebug on window object for easy access in browser console
- * Only in non-production environments
- */
-export function installGlobalDebug() {
-    if (typeof window !== 'undefined' &&
-        isDevelopmentEnvironment() &&
-        window.tastyDebug !== tastyDebug) {
-        window.tastyDebug = tastyDebug;
-        console.log('🎨 tastyDebug installed on window. Try: tastyDebug.getSummary()');
-    }
-}
-/**
- * Auto-install in development
- */
-if (typeof window !== 'undefined' && isDevelopmentEnvironment()) {
-    installGlobalDebug();
-}
-
-