@cube-dev/ui-kit 0.0.0-canary-acb9af5 → 0.0.0-canary-e9dc427

package/es/tasty/hooks/useRawCSS.js

@@ -1,40 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-acb9af5
- * Released under the MIT license.
- */
-
-import { useInsertionEffect, useMemo, useRef } from 'react';
-import { injectRawCSS } from '../injector';
-// Implementation
-export function useRawCSS(cssOrFactory, depsOrOptions, options) {
-    // Detect which overload is being used
-    const isFactory = typeof cssOrFactory === 'function';
-    // Parse arguments based on overload
-    const deps = isFactory && Array.isArray(depsOrOptions) ? depsOrOptions : undefined;
-    const opts = isFactory
-        ? options
-        : depsOrOptions;
-    // Memoize CSS - for factory functions, use provided deps; for strings, use the string itself
-    const css = useMemo(() => isFactory ? cssOrFactory() : cssOrFactory, isFactory ? deps ?? [] : [cssOrFactory]);
-    const disposeRef = useRef(null);
-    useInsertionEffect(() => {
-        // Dispose previous injection if any
-        disposeRef.current?.();
-        if (!css.trim()) {
-            disposeRef.current = null;
-            return;
-        }
-        // Inject new CSS
-        const { dispose } = injectRawCSS(css, opts);
-        disposeRef.current = dispose;
-        // Cleanup on unmount or when css changes
-        return () => {
-            disposeRef.current?.();
-            disposeRef.current = null;
-        };
-    }, [css, opts?.root]);
-}
-
-        

package/es/tasty/hooks/useStyles.js

@@ -1,146 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-acb9af5
- * Released under the MIT license.
- */
-
-import { useInsertionEffect, useMemo, useRef } from 'react';
-import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesForChunk, } from '../chunks';
-import { allocateClassName, inject } from '../injector';
-import { renderStyles } from '../pipeline';
-import { stringifyStyles } from '../utils/styles';
-/**
- * Check if styles contain @starting-style rules.
- *
- * @starting-style CSS cannot be applied via multiple class names because
- * of cascade - later rules override earlier ones. When @starting is detected,
- * we disable chunking and use a single class name for all styles.
- */
-function containsStartingStyle(styleKey) {
-    return styleKey.includes('@starting');
-}
-/**
- * Hook to generate CSS classes from Tasty styles.
- * Handles style rendering, className allocation, and CSS injection.
- *
- * Uses chunking to split styles into logical groups for better caching
- * and CSS reuse across components.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { className } = useStyles({
- *     styles: {
- *       padding: '2x',
- *       fill: '#purple',
- *       radius: '1r',
- *     }
- *   });
- *
- *   return <div className={className}>Styled content</div>;
- * }
- * ```
- */
-export function useStyles({ styles }) {
-    // Array of dispose functions for each chunk
-    const disposeRef = useRef([]);
-    // Store styles by their stringified key to avoid recomputing when only reference changes
-    const stylesRef = useRef({
-        key: '',
-        styles: undefined,
-    });
-    // Compute style key - this is a primitive string that captures style content
-    const styleKey = useMemo(() => {
-        if (!styles || Object.keys(styles).length === 0) {
-            return '';
-        }
-        return stringifyStyles(styles);
-    }, [styles]);
-    // Update ref when styleKey changes (content actually changed)
-    if (stylesRef.current.key !== styleKey) {
-        stylesRef.current = { key: styleKey, styles };
-    }
-    // Process chunks: categorize, generate cache keys, render, and allocate classNames
-    // Only depends on styleKey (primitive), not styles object reference
-    const processedChunks = useMemo(() => {
-        const currentStyles = stylesRef.current.styles;
-        if (!styleKey || !currentStyles) {
-            return [];
-        }
-        // Disable chunking for styles containing @starting-style rules.
-        // @starting-style CSS cannot work with multiple class names due to cascade -
-        // the rules would override each other instead of combining properly.
-        if (containsStartingStyle(styleKey)) {
-            const renderResult = renderStyles(currentStyles);
-            if (renderResult.rules.length === 0) {
-                return [];
-            }
-            const { className } = allocateClassName(styleKey);
-            return [
-                {
-                    name: CHUNK_NAMES.COMBINED,
-                    styleKeys: Object.keys(currentStyles),
-                    cacheKey: styleKey,
-                    renderResult,
-                    className,
-                },
-            ];
-        }
-        // Categorize style keys into chunks
-        const chunkMap = categorizeStyleKeys(currentStyles);
-        const chunks = [];
-        for (const [chunkName, chunkStyleKeys] of chunkMap) {
-            // Skip empty chunks
-            if (chunkStyleKeys.length === 0) {
-                continue;
-            }
-            // Generate cache key for this chunk
-            const cacheKey = generateChunkCacheKey(currentStyles, chunkName, chunkStyleKeys);
-            // Render styles for this chunk
-            const renderResult = renderStylesForChunk(currentStyles, chunkName, chunkStyleKeys);
-            // Skip chunks with no rules
-            if (renderResult.rules.length === 0) {
-                continue;
-            }
-            // Allocate className for this chunk (safe in render phase)
-            const { className } = allocateClassName(cacheKey);
-            chunks.push({
-                name: chunkName,
-                styleKeys: chunkStyleKeys,
-                cacheKey,
-                renderResult,
-                className,
-            });
-        }
-        return chunks;
-    }, [styleKey]);
-    // Inject styles in insertion effect (avoids render phase side effects)
-    useInsertionEffect(() => {
-        // Cleanup all previous chunk disposals
-        disposeRef.current.forEach((dispose) => dispose?.());
-        disposeRef.current = [];
-        // Inject each chunk and collect dispose functions
-        for (const chunk of processedChunks) {
-            if (chunk.renderResult.rules.length > 0) {
-                const { dispose } = inject(chunk.renderResult.rules, {
-                    cacheKey: chunk.cacheKey,
-                });
-                disposeRef.current.push(dispose);
-            }
-        }
-        return () => {
-            disposeRef.current.forEach((dispose) => dispose?.());
-            disposeRef.current = [];
-        };
-    }, [processedChunks]);
-    // Combine all chunk classNames
-    const className = useMemo(() => {
-        return processedChunks.map((chunk) => chunk.className).join(' ');
-    }, [processedChunks]);
-    return {
-        className,
-    };
-}
-
-        

package/es/tasty/pipeline/conditions.js

@@ -1,469 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-acb9af5
- * Released under the MIT license.
- */
-
-/**
- * ConditionNode Types and Helpers
- *
- * Core data structures for representing style conditions as an abstract syntax tree.
- * Used throughout the pipeline for parsing, simplification, and CSS generation.
- */
-// ============================================================================
-// Constructor Functions
-// ============================================================================
-/**
- * Create a TRUE condition (matches everything)
- */
-export function trueCondition() {
-    return { kind: 'true' };
-}
-/**
- * Create a FALSE condition (matches nothing)
- */
-export function falseCondition() {
-    return { kind: 'false' };
-}
-/**
- * Create an AND compound condition
- */
-export function and(...children) {
-    const filtered = [];
-    for (const child of children) {
-        // Short-circuit on FALSE
-        if (child.kind === 'false') {
-            return falseCondition();
-        }
-        // Skip TRUE (identity for AND)
-        if (child.kind === 'true') {
-            continue;
-        }
-        // Flatten nested ANDs
-        if (child.kind === 'compound' && child.operator === 'AND') {
-            filtered.push(...child.children);
-        }
-        else {
-            filtered.push(child);
-        }
-    }
-    if (filtered.length === 0) {
-        return trueCondition();
-    }
-    if (filtered.length === 1) {
-        return filtered[0];
-    }
-    return {
-        kind: 'compound',
-        operator: 'AND',
-        children: filtered,
-    };
-}
-/**
- * Create an OR compound condition
- */
-export function or(...children) {
-    const filtered = [];
-    for (const child of children) {
-        // Short-circuit on TRUE
-        if (child.kind === 'true') {
-            return trueCondition();
-        }
-        // Skip FALSE (identity for OR)
-        if (child.kind === 'false') {
-            continue;
-        }
-        // Flatten nested ORs
-        if (child.kind === 'compound' && child.operator === 'OR') {
-            filtered.push(...child.children);
-        }
-        else {
-            filtered.push(child);
-        }
-    }
-    if (filtered.length === 0) {
-        return falseCondition();
-    }
-    if (filtered.length === 1) {
-        return filtered[0];
-    }
-    return {
-        kind: 'compound',
-        operator: 'OR',
-        children: filtered,
-    };
-}
-/**
- * Negate a condition
- */
-export function not(node) {
-    // NOT(TRUE) = FALSE
-    if (node.kind === 'true') {
-        return falseCondition();
-    }
-    // NOT(FALSE) = TRUE
-    if (node.kind === 'false') {
-        return trueCondition();
-    }
-    // NOT(state) = toggle negated flag
-    if (node.kind === 'state') {
-        return {
-            ...node,
-            negated: !node.negated,
-            uniqueId: node.negated
-                ? node.uniqueId.replace(/^!/, '')
-                : `!${node.uniqueId}`,
-        };
-    }
-    // NOT(AND(a, b, ...)) = OR(NOT(a), NOT(b), ...) - De Morgan's law
-    if (node.kind === 'compound' && node.operator === 'AND') {
-        return or(...node.children.map((c) => not(c)));
-    }
-    // NOT(OR(a, b, ...)) = AND(NOT(a), NOT(b), ...) - De Morgan's law
-    if (node.kind === 'compound' && node.operator === 'OR') {
-        return and(...node.children.map((c) => not(c)));
-    }
-    // Fallback - should not reach here
-    return node;
-}
-// ============================================================================
-// Condition Type Checking
-// ============================================================================
-/**
- * Check if a condition is a state condition
- */
-export function isStateCondition(node) {
-    return node.kind === 'state';
-}
-/**
- * Check if a condition is a compound condition
- */
-export function isCompoundCondition(node) {
-    return node.kind === 'compound';
-}
-/**
- * Check if a condition is TRUE
- */
-export function isTrueCondition(node) {
-    return node.kind === 'true';
-}
-/**
- * Check if a condition is FALSE
- */
-export function isFalseCondition(node) {
-    return node.kind === 'false';
-}
-// ============================================================================
-// UniqueId Generation
-// ============================================================================
-/**
- * Generate a normalized unique ID for a modifier condition
- */
-export function modifierUniqueId(attribute, value, operator = '=', negated = false) {
-    const base = value
-        ? `mod:${attribute}${operator}${value}`
-        : `mod:${attribute}`;
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for a pseudo condition
- */
-export function pseudoUniqueId(pseudo, negated = false) {
-    const base = `pseudo:${pseudo}`;
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for a media condition
- */
-export function mediaUniqueId(subtype, props, negated = false) {
-    let base;
-    if (subtype === 'dimension') {
-        const parts = ['media', 'dim', props.dimension];
-        if (props.lowerBound) {
-            parts.push(props.lowerBound.inclusive ? '>=' : '>');
-            parts.push(props.lowerBound.value);
-        }
-        if (props.upperBound) {
-            parts.push(props.upperBound.inclusive ? '<=' : '<');
-            parts.push(props.upperBound.value);
-        }
-        base = parts.join(':');
-    }
-    else if (subtype === 'feature') {
-        base = props.featureValue
-            ? `media:feat:${props.feature}:${props.featureValue}`
-            : `media:feat:${props.feature}`;
-    }
-    else {
-        base = `media:type:${props.mediaType}`;
-    }
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for a container condition
- */
-export function containerUniqueId(subtype, props, negated = false) {
-    let base;
-    const name = props.containerName || '_';
-    if (subtype === 'dimension') {
-        const parts = ['container', 'dim', name, props.dimension];
-        if (props.lowerBound) {
-            parts.push(props.lowerBound.inclusive ? '>=' : '>');
-            parts.push(props.lowerBound.value);
-        }
-        if (props.upperBound) {
-            parts.push(props.upperBound.inclusive ? '<=' : '<');
-            parts.push(props.upperBound.value);
-        }
-        base = parts.join(':');
-    }
-    else {
-        base = props.propertyValue
-            ? `container:style:${name}:--${props.property}:${props.propertyValue}`
-            : `container:style:${name}:--${props.property}`;
-    }
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for a root condition
- */
-export function rootUniqueId(selector, negated = false) {
-    const base = `root:${selector}`;
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for an own condition
- */
-export function ownUniqueId(innerUniqueId, negated = false) {
-    const base = `own:${innerUniqueId}`;
-    return negated ? `!${base}` : base;
-}
-/**
- * Generate a normalized unique ID for a starting condition
- */
-export function startingUniqueId(negated = false) {
-    return negated ? '!starting' : 'starting';
-}
-// ============================================================================
-// Condition Creation Helpers
-// ============================================================================
-/**
- * Create a modifier condition
- */
-export function createModifierCondition(attribute, value, operator = '=', negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'modifier',
-        negated,
-        raw: raw || (value ? `${attribute}${operator}${value}` : attribute),
-        uniqueId: modifierUniqueId(attribute, value, operator, negated),
-        attribute,
-        value,
-        operator: value ? operator : undefined,
-    };
-}
-/**
- * Create a pseudo condition
- */
-export function createPseudoCondition(pseudo, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'pseudo',
-        negated,
-        raw: raw || pseudo,
-        uniqueId: pseudoUniqueId(pseudo, negated),
-        pseudo,
-    };
-}
-/**
- * Create a media dimension condition
- */
-export function createMediaDimensionCondition(dimension, lowerBound, upperBound, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'media',
-        subtype: 'dimension',
-        negated,
-        raw: raw || `@media(${dimension})`,
-        uniqueId: mediaUniqueId('dimension', { dimension, lowerBound, upperBound }, negated),
-        dimension,
-        lowerBound,
-        upperBound,
-    };
-}
-/**
- * Create a media feature condition
- */
-export function createMediaFeatureCondition(feature, featureValue, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'media',
-        subtype: 'feature',
-        negated,
-        raw: raw || `@media(${feature}${featureValue ? `: ${featureValue}` : ''})`,
-        uniqueId: mediaUniqueId('feature', { feature, featureValue }, negated),
-        feature,
-        featureValue,
-    };
-}
-/**
- * Create a media type condition
- */
-export function createMediaTypeCondition(mediaType, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'media',
-        subtype: 'type',
-        negated,
-        raw: raw || `@media:${mediaType}`,
-        uniqueId: mediaUniqueId('type', { mediaType }, negated),
-        mediaType,
-    };
-}
-/**
- * Create a container dimension condition
- */
-export function createContainerDimensionCondition(dimension, lowerBound, upperBound, containerName, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'container',
-        subtype: 'dimension',
-        negated,
-        raw: raw || `@(${containerName ? containerName + ', ' : ''}${dimension})`,
-        uniqueId: containerUniqueId('dimension', { containerName, dimension, lowerBound, upperBound }, negated),
-        containerName,
-        dimension,
-        lowerBound,
-        upperBound,
-    };
-}
-/**
- * Create a container style condition
- */
-export function createContainerStyleCondition(property, propertyValue, containerName, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'container',
-        subtype: 'style',
-        negated,
-        raw: raw ||
-            `@(${containerName ? containerName + ', ' : ''}$${property}${propertyValue ? '=' + propertyValue : ''})`,
-        uniqueId: containerUniqueId('style', { containerName, property, propertyValue }, negated),
-        containerName,
-        property,
-        propertyValue,
-    };
-}
-/**
- * Create a root condition
- */
-export function createRootCondition(selector, negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'root',
-        negated,
-        raw: raw || `@root(${selector})`,
-        uniqueId: rootUniqueId(selector, negated),
-        selector,
-    };
-}
-/**
- * Create an own condition
- */
-export function createOwnCondition(innerCondition, negated = false, raw) {
-    const innerUniqueId = getConditionUniqueId(innerCondition);
-    return {
-        kind: 'state',
-        type: 'own',
-        negated,
-        raw: raw || `@own(...)`,
-        uniqueId: ownUniqueId(innerUniqueId, negated),
-        innerCondition,
-    };
-}
-/**
- * Create a starting condition
- */
-export function createStartingCondition(negated = false, raw) {
-    return {
-        kind: 'state',
-        type: 'starting',
-        negated,
-        raw: raw || '@starting',
-        uniqueId: startingUniqueId(negated),
-    };
-}
-// ============================================================================
-// Utility Functions
-// ============================================================================
-/**
- * Get the unique ID for any condition node
- */
-export function getConditionUniqueId(node) {
-    if (node.kind === 'true') {
-        return 'TRUE';
-    }
-    if (node.kind === 'false') {
-        return 'FALSE';
-    }
-    if (node.kind === 'state') {
-        return node.uniqueId;
-    }
-    if (node.kind === 'compound') {
-        const childIds = node.children.map(getConditionUniqueId).sort();
-        return `${node.operator}(${childIds.join(',')})`;
-    }
-    return 'UNKNOWN';
-}
-/**
- * Check if two conditions are equal based on their unique IDs
- */
-export function conditionsEqual(a, b) {
-    return getConditionUniqueId(a) === getConditionUniqueId(b);
-}
-/**
- * Get all state conditions from a condition tree (flattened)
- */
-export function getAllStateConditions(node) {
-    if (node.kind === 'true' || node.kind === 'false') {
-        return [];
-    }
-    if (node.kind === 'state') {
-        return [node];
-    }
-    if (node.kind === 'compound') {
-        const result = [];
-        for (const child of node.children) {
-            result.push(...getAllStateConditions(child));
-        }
-        return result;
-    }
-    return [];
-}
-/**
- * Clone a condition node (deep copy)
- */
-export function cloneCondition(node) {
-    if (node.kind === 'true' || node.kind === 'false') {
-        return { ...node };
-    }
-    if (node.kind === 'state') {
-        if (node.type === 'own') {
-            return {
-                ...node,
-                innerCondition: cloneCondition(node.innerCondition),
-            };
-        }
-        return { ...node };
-    }
-    if (node.kind === 'compound') {
-        return {
-            ...node,
-            children: node.children.map(cloneCondition),
-        };
-    }
-    return node;
-}
-
-