@cube-dev/ui-kit 0.0.0-canary-8ca04ef → 0.0.0-canary-dae9b2f

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/stories/playground/PlaygroundEditor.js

@@ -1,89 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { json } from '@codemirror/lang-json';
-import CodeMirror from '@uiw/react-codemirror';
-import { parse } from 'best-effort-json-parser';
-import { useCallback, useRef, useState } from 'react';
-import { Layout } from '../../components/content/Layout/index.js';
-import { tasty } from '../../tasty/index.js';
-const ErrorDisplay = tasty({
-    styles: {
-        padding: '1x 2x',
-        fill: '#danger.10',
-        color: '#danger-text',
-        preset: 't4',
-        borderTop: '#danger.20',
-    },
-});
-export function PlaygroundEditor({ value, onChange }) {
-    const [error, setError] = useState(null);
-    const [editorValue, setEditorValue] = useState(() => JSON.stringify(value, null, 2));
-    const isFocusedRef = useRef(false);
-    const handleChange = useCallback((val) => {
-        setEditorValue(val);
-        try {
-            // Use best-effort parser for lenient parsing (handles JS-like syntax)
-            const parsed = parse(val);
-            if (parsed && typeof parsed === 'object') {
-                setError(null);
-                onChange(parsed);
-            }
-        }
-        catch (e) {
-            setError(e.message);
-        }
-    }, [onChange]);
-    const handleFocus = useCallback(() => {
-        isFocusedRef.current = true;
-    }, []);
-    // Normalize JSON on blur - format it properly
-    const handleBlur = useCallback(() => {
-        isFocusedRef.current = false;
-        try {
-            const parsed = parse(editorValue);
-            if (parsed && typeof parsed === 'object') {
-                const normalized = JSON.stringify(parsed, null, 2);
-                setEditorValue(normalized);
-                setError(null);
-            }
-        }
-        catch {
-            // Keep current value if parsing fails
-        }
-    }, [editorValue]);
-    // Normalize on paste
-    const handlePaste = useCallback(() => {
-        // Use setTimeout to let the paste complete first
-        setTimeout(() => {
-            try {
-                const parsed = parse(editorValue);
-                if (parsed && typeof parsed === 'object') {
-                    const normalized = JSON.stringify(parsed, null, 2);
-                    setEditorValue(normalized);
-                    setError(null);
-                }
-            }
-            catch {
-                // Keep current value if parsing fails
-            }
-        }, 0);
-    }, [editorValue]);
-    // Sync external value changes only when not focused
-    const currentJson = JSON.stringify(value, null, 2);
-    if (currentJson !== editorValue && !error && !isFocusedRef.current) {
-        setEditorValue(currentJson);
-    }
-    return (_jsxs(Layout, { height: "100%", children: [_jsx(Layout.Toolbar, { children: "Styles (JSON)" }), _jsx(Layout.Content, { padding: 0, children: _jsxs(Layout.Grid, { rows: "1sf max-content", flexGrow: 1, children: [_jsx(CodeMirror, { value: editorValue, height: "100%", extensions: [json()], theme: "light", basicSetup: {
-                                lineNumbers: true,
-                                foldGutter: true,
-                                highlightActiveLine: true,
-                            }, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste }), error && _jsxs(ErrorDisplay, { children: ["JSON Error: ", error] })] }) })] }));
-}
-
-        

package/es/stories/playground/PlaygroundLayout.js

@@ -1,16 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Layout } from '../../components/content/Layout/index.js';
-export function PlaygroundLayout({ toolbar, editor, preview, output, }) {
-    return (_jsxs(Layout, { height: "100vh", children: [_jsx(Layout.Toolbar, { children: toolbar }), _jsx(Layout.Panel, { isResizable: true, side: "bottom", defaultSize: 250, minSize: 150, maxSize: 400, contentPadding: 0, sizeStorageKey: "tasty-playground-output-size", children: output }), preview ? (_jsxs(Layout, { children: [_jsx(Layout.Panel, { isResizable: true, side: "left", defaultSize: 450, minSize: 300, maxSize: 700, contentPadding: 0, sizeStorageKey: "tasty-playground-editor-size", children: editor }), _jsx(Layout.Content, { padding: 0, children: preview })] })) : (
-            /* No preview - editor takes full width */
-            _jsx(Layout.Content, { padding: 0, children: editor }))] }));
-}
-
-        

package/es/stories/playground/PlaygroundOutput.js

@@ -1,92 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import copy from 'clipboard-copy';
-import { useCallback, useMemo } from 'react';
-import { Button } from '../../components/actions/Button/index.js';
-import { Layout } from '../../components/content/Layout/index.js';
-import { PrismCode } from '../../components/content/PrismCode/PrismCode.js';
-import { useToastsApi } from '../../components/overlays/Toasts/index.js';
-import { CopyIcon } from '../../icons/index.js';
-import { tasty } from '../../tasty/index.js';
-import { renderStyles } from '../../tasty/pipeline/index.js';
-const OutputContent = tasty({
-    styles: {
-        display: 'block',
-        flex: 1,
-        overflow: 'auto',
-        padding: '2x',
-        margin: 0,
-        fill: '#dark-bg',
-    },
-});
-function formatStyleResults(results) {
-    if (results.length === 0) {
-        return '/* No styles generated */';
-    }
-    // Group rules by selector + atRules combination
-    const groupedRules = new Map();
-    for (const result of results) {
-        const { selector, declarations, atRules } = result;
-        // Create a unique key for grouping: selector + atRules
-        const atRulesKey = atRules?.join('|') ?? '';
-        const groupKey = `${selector}|||${atRulesKey}`;
-        const declList = declarations.split(';').filter(Boolean);
-        if (!groupedRules.has(groupKey)) {
-            groupedRules.set(groupKey, []);
-        }
-        groupedRules.get(groupKey).push(...declList);
-    }
-    const lines = [];
-    for (const [groupKey, declList] of groupedRules) {
-        const [selector, atRulesKey] = groupKey.split('|||');
-        const atRules = atRulesKey ? atRulesKey.split('|') : [];
-        // Build the rule with merged declarations
-        const rule = `${selector} {\n  ${declList.join(';\n  ')};\n}`;
-        if (atRules.length > 0) {
-            // Wrap in at-rules (nested)
-            let wrapped = rule;
-            for (let i = atRules.length - 1; i >= 0; i--) {
-                const indent = '  '.repeat(atRules.length - i);
-                const innerIndent = '  '.repeat(atRules.length - i + 1);
-                wrapped = `${atRules[i]} {\n${wrapped
-                    .split('\n')
-                    .map((line) => innerIndent + line)
-                    .join('\n')}\n${indent.slice(2)}}`;
-            }
-            lines.push(wrapped);
-        }
-        else {
-            lines.push(rule);
-        }
-    }
-    return lines.join('\n\n');
-}
-export function PlaygroundOutput({ styles }) {
-    const { toast } = useToastsApi();
-    const cssOutput = useMemo(() => {
-        if (!styles || Object.keys(styles).length === 0) {
-            return '/* Enter styles in the editor to see generated CSS */';
-        }
-        try {
-            // Use a demo selector for display purposes
-            const results = renderStyles(styles, '.demo');
-            return formatStyleResults(results);
-        }
-        catch (e) {
-            return `/* Error generating CSS: ${e.message} */`;
-        }
-    }, [styles]);
-    const handleCopy = useCallback(async () => {
-        await copy(cssOutput);
-        toast.success('CSS copied to clipboard');
-    }, [cssOutput, toast]);
-    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: [_jsx("span", { children: "Generated CSS" }), _jsx(Button, { size: "small", type: "clear", icon: _jsx(CopyIcon, {}), "aria-label": "Copy CSS", onPress: handleCopy })] }), _jsx(Layout.Content, { padding: 0, children: _jsx(OutputContent, { children: _jsx(PrismCode, { code: cssOutput, language: "css" }) }) })] }));
-}
-
-