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

package/es/tasty/hooks/useGlobalStyles.js

@@ -1,67 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { useInsertionEffect, useMemo, useRef } from 'react';
-import { injectGlobal } from '../injector/index.js';
-import { renderStyles } from '../pipeline/index.js';
-/**
- * Hook to inject global styles for a given selector.
- * Useful for styling elements by selector without generating classNames.
- *
- * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
- * @param styles - Tasty styles object
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   useGlobalStyles('.card', {
- *     padding: '2x',
- *     radius: '1r',
- *     fill: '#white',
- *   });
- *
- *   return <div className="card">Content</div>;
- * }
- * ```
- */
-export function useGlobalStyles(selector, styles) {
-    const disposeRef = useRef(null);
-    // Render styles with the provided selector
-    // Note: renderStyles overload with selector string returns StyleResult[] directly
-    const styleResults = useMemo(() => {
-        if (!styles)
-            return [];
-        // Validate selector - empty string would cause renderStyles to return RenderResult instead of StyleResult[]
-        if (!selector) {
-            if (process.env.NODE_ENV !== 'production') {
-                console.warn('[Tasty] useGlobalStyles: selector is required and cannot be empty. ' +
-                    'Styles will not be injected.');
-            }
-            return [];
-        }
-        const result = renderStyles(styles, selector);
-        // When a non-empty selector is provided, renderStyles returns StyleResult[]
-        return result;
-    }, [styles, selector]);
-    // Inject as global styles
-    useInsertionEffect(() => {
-        disposeRef.current?.();
-        if (styleResults.length > 0) {
-            const { dispose } = injectGlobal(styleResults);
-            disposeRef.current = dispose;
-        }
-        else {
-            disposeRef.current = null;
-        }
-        return () => {
-            disposeRef.current?.();
-            disposeRef.current = null;
-        };
-    }, [styleResults]);
-}
-
-        

package/es/tasty/hooks/useRawCSS.js

@@ -1,40 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { useInsertionEffect, useMemo, useRef } from 'react';
-import { injectRawCSS } from '../injector/index.js';
-// 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,206 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-import { useInsertionEffect, useMemo, useRef } from 'react';
-import { categorizeStyleKeys, CHUNK_NAMES, generateChunkCacheKey, renderStylesForChunk, } from '../chunks/index.js';
-import { getGlobalKeyframes, hasGlobalKeyframes } from '../config.js';
-import { allocateClassName, inject, keyframes } from '../injector/index.js';
-import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, replaceAnimationNames, } from '../keyframes/index.js';
-import { renderStyles } from '../pipeline/index.js';
-import { stringifyStyles } from '../utils/styles.js';
-/**
- * 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');
-}
-/**
- * Get keyframes that are actually used in styles.
- * Returns null if no keyframes are used (fast path for zero overhead).
- *
- * Optimization order:
- * 1. Check if any keyframes are defined (local or global) - if not, return null
- * 2. Extract animation names from styles - if none, return null
- * 3. Merge and filter keyframes to only used ones
- */
-function getUsedKeyframes(styles) {
-    // Fast path: no keyframes defined anywhere
-    const hasLocal = hasLocalKeyframes(styles);
-    const hasGlobal = hasGlobalKeyframes();
-    if (!hasLocal && !hasGlobal)
-        return null;
-    // Extract animation names from styles (not from rendered CSS - faster)
-    const usedNames = extractAnimationNamesFromStyles(styles);
-    if (usedNames.size === 0)
-        return null;
-    // Merge local and global keyframes
-    const local = hasLocal ? extractLocalKeyframes(styles) : null;
-    const global = hasGlobal ? getGlobalKeyframes() : null;
-    const allKeyframes = mergeKeyframes(local, global);
-    // Filter to only used keyframes
-    return filterUsedKeyframes(allKeyframes, usedNames);
-}
-/**
- * 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({
- *     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 disposals
-        disposeRef.current.forEach((dispose) => dispose?.());
-        disposeRef.current = [];
-        // Fast path: no chunks to inject
-        if (processedChunks.length === 0) {
-            return;
-        }
-        const currentStyles = stylesRef.current.styles;
-        // Get keyframes that are actually used (returns null if none - zero overhead)
-        const usedKeyframes = currentStyles
-            ? getUsedKeyframes(currentStyles)
-            : null;
-        // Inject keyframes and build name map (only if we have keyframes)
-        let nameMap = null;
-        if (usedKeyframes) {
-            nameMap = new Map();
-            for (const [name, steps] of Object.entries(usedKeyframes)) {
-                const result = keyframes(steps, { name });
-                const injectedName = result.toString();
-                // Only add to map if name differs (optimization for replacement check)
-                if (injectedName !== name) {
-                    nameMap.set(name, injectedName);
-                }
-                disposeRef.current.push(result.dispose);
-            }
-            // Clear map if no replacements needed
-            if (nameMap.size === 0) {
-                nameMap = null;
-            }
-        }
-        // Inject each chunk
-        for (const chunk of processedChunks) {
-            if (chunk.renderResult.rules.length > 0) {
-                // Replace animation names only if needed
-                const rulesToInject = nameMap
-                    ? chunk.renderResult.rules.map((rule) => ({
-                        ...rule,
-                        declarations: replaceAnimationNames(rule.declarations, nameMap),
-                    }))
-                    : chunk.renderResult.rules;
-                const { dispose } = inject(rulesToInject, {
-                    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/keyframes/index.js

@@ -1,301 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-/**
- * Keyframes Utilities
- *
- * Optimized utilities for extracting and processing keyframes in styles.
- * Designed for zero overhead when no keyframes are used.
- */
-import { getGlobalKeyframes, hasGlobalKeyframes } from '../config.js';
-// ============================================================================
-// Constants
-// ============================================================================
-const KEYFRAMES_KEY = '@keyframes';
-/**
- * Pattern to extract animation names from CSS animation property values.
- * Animation name is typically the first identifier in the shorthand.
- * Handles: "fadeIn 300ms ease-in", "pulse 1s infinite", etc.
- *
- * CSS animation shorthand order (all optional except name):
- * animation: name | duration | timing | delay | iteration | direction | fill-mode | play-state
- *
- * Animation names must:
- * - Start with a letter, underscore, or hyphen (but not a digit or CSS keyword)
- * - Not be CSS keywords: none, initial, inherit, unset, revert
- */
-const CSS_KEYWORDS = new Set([
-    'none',
-    'initial',
-    'inherit',
-    'unset',
-    'revert',
-    'auto',
-    'normal',
-    'running',
-    'paused',
-]);
-/**
- * Pattern to match animation name at the start of an animation value.
- * Must start with letter, underscore, or hyphen (not digit).
- */
-const ANIMATION_NAME_PATTERN = /^([a-zA-Z_-][a-zA-Z0-9_-]*)/;
-// ============================================================================
-// Extraction Functions
-// ============================================================================
-/**
- * Check if styles object has local @keyframes definition.
- * Fast path: single property lookup.
- */
-export function hasLocalKeyframes(styles) {
-    return KEYFRAMES_KEY in styles;
-}
-/**
- * Extract local @keyframes from styles object.
- * Returns null if no local keyframes (fast path).
- */
-export function extractLocalKeyframes(styles) {
-    const keyframes = styles[KEYFRAMES_KEY];
-    if (!keyframes || typeof keyframes !== 'object') {
-        return null;
-    }
-    return keyframes;
-}
-/**
- * Merge local and global keyframes.
- * Local keyframes take priority over global.
- * Returns null if no keyframes exist (fast path).
- */
-export function mergeKeyframes(local, global) {
-    if (!local && !global)
-        return null;
-    if (!local)
-        return global;
-    if (!global)
-        return local;
-    // Local overrides global
-    return { ...global, ...local };
-}
-/**
- * Get merged keyframes for styles (local + global).
- * Returns null if no keyframes defined anywhere (fast path).
- */
-export function getKeyframesForStyles(styles) {
-    const local = extractLocalKeyframes(styles);
-    const global = hasGlobalKeyframes() ? getGlobalKeyframes() : null;
-    return mergeKeyframes(local, global);
-}
-// ============================================================================
-// Animation Name Extraction
-// ============================================================================
-/**
- * Extract animation name from a single animation value.
- * Returns null if no valid name found.
- *
- * Examples:
- * - "fadeIn 300ms ease-in" → "fadeIn"
- * - "1s pulse infinite" → "pulse" (name can be anywhere)
- * - "none" → null (CSS keyword)
- * - "300ms ease-in" → null (no name, just duration/timing)
- */
-function extractAnimationNameFromValue(value) {
-    const trimmed = value.trim();
-    if (!trimmed)
-        return null;
-    // Split by whitespace and find the first valid animation name
-    const parts = trimmed.split(/\s+/);
-    for (const part of parts) {
-        // Skip CSS keywords
-        if (CSS_KEYWORDS.has(part.toLowerCase()))
-            continue;
-        // Skip time values (e.g., 300ms, 1s, 0.5s)
-        if (/^-?[\d.]+m?s$/i.test(part))
-            continue;
-        // Skip iteration counts (e.g., infinite, 3)
-        if (part === 'infinite' || /^\d+$/.test(part))
-            continue;
-        // Skip direction values
-        if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part.toLowerCase()))
-            continue;
-        // Skip fill-mode values
-        if (['forwards', 'backwards', 'both'].includes(part.toLowerCase()))
-            continue;
-        // Skip play-state values
-        if (['running', 'paused'].includes(part.toLowerCase()))
-            continue;
-        // Skip timing functions (ease, linear, ease-in, etc., or cubic-bezier/steps)
-        if (/^(ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end)$/i.test(part))
-            continue;
-        if (/^(cubic-bezier|steps)\(/i.test(part))
-            continue;
-        // Check if it looks like a valid animation name
-        const match = ANIMATION_NAME_PATTERN.exec(part);
-        if (match) {
-            return match[1];
-        }
-    }
-    return null;
-}
-/**
- * Extract all animation names from an animation property value.
- * Handles multiple animations separated by commas.
- *
- * Example: "fadeIn 300ms, slideIn 500ms ease-out" → ["fadeIn", "slideIn"]
- */
-function extractAnimationNamesFromAnimationValue(value) {
-    const names = [];
-    // Split by comma for multiple animations
-    const animations = value.split(',');
-    for (const animation of animations) {
-        const name = extractAnimationNameFromValue(animation);
-        if (name && !names.includes(name)) {
-            names.push(name);
-        }
-    }
-    return names;
-}
-/**
- * Extract animation names from a style value (handles mappings and arrays).
- */
-function extractAnimationNamesFromStyleValue(value, names) {
-    if (typeof value === 'string') {
-        for (const name of extractAnimationNamesFromAnimationValue(value)) {
-            names.add(name);
-        }
-    }
-    else if (Array.isArray(value)) {
-        // Responsive array
-        for (const v of value) {
-            extractAnimationNamesFromStyleValue(v, names);
-        }
-    }
-    else if (value && typeof value === 'object') {
-        // State mapping
-        for (const v of Object.values(value)) {
-            extractAnimationNamesFromStyleValue(v, names);
-        }
-    }
-}
-/**
- * Extract all animation names referenced in styles.
- * Scans 'animation' and 'animationName' properties including in state mappings.
- * Returns empty set if no animation properties found (fast path).
- */
-export function extractAnimationNamesFromStyles(styles) {
-    const names = new Set();
-    // Check animation property
-    if ('animation' in styles) {
-        extractAnimationNamesFromStyleValue(styles.animation, names);
-    }
-    // Check animationName property
-    if ('animationName' in styles) {
-        extractAnimationNamesFromStyleValue(styles.animationName, names);
-    }
-    // Check nested selectors (sub-elements)
-    for (const [key, value] of Object.entries(styles)) {
-        // Skip non-selector keys and special keys
-        if (key === '$' || key === KEYFRAMES_KEY)
-            continue;
-        // Check if it's a selector (starts with &, ., or uppercase)
-        if ((key.startsWith('&') || key.startsWith('.') || /^[A-Z]/.test(key)) &&
-            value &&
-            typeof value === 'object') {
-            // Recursively extract from nested styles
-            const nestedNames = extractAnimationNamesFromStyles(value);
-            for (const name of nestedNames) {
-                names.add(name);
-            }
-        }
-    }
-    return names;
-}
-// ============================================================================
-// Name Replacement
-// ============================================================================
-/**
- * Replace animation names in CSS declarations with injected names.
- * Optimized to avoid regex creation - uses simple string replacement.
- *
- * @param declarations CSS declarations string
- * @param nameMap Map from original name to injected name (only contains names that differ)
- * @returns Updated declarations string
- */
-export function replaceAnimationNames(declarations, nameMap) {
-    // Fast path: no animation properties
-    if (!declarations.includes('animation'))
-        return declarations;
-    // Parse and replace
-    const parts = declarations.split(';');
-    let modified = false;
-    for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        const colonIdx = part.indexOf(':');
-        if (colonIdx === -1)
-            continue;
-        const prop = part.slice(0, colonIdx).trim().toLowerCase();
-        if (prop === 'animation' || prop === 'animation-name') {
-            const prefix = part.slice(0, colonIdx + 1);
-            let value = part.slice(colonIdx + 1);
-            // Replace each animation name using simple word replacement
-            for (const [original, injected] of nameMap) {
-                // Simple word boundary replacement without regex
-                const newValue = replaceWord(value, original, injected);
-                if (newValue !== value) {
-                    value = newValue;
-                    modified = true;
-                }
-            }
-            parts[i] = prefix + value;
-        }
-    }
-    return modified ? parts.join(';') : declarations;
-}
-/**
- * Replace a word in a string (word boundary aware, no regex).
- */
-function replaceWord(str, word, replacement) {
-    let result = str;
-    let idx = 0;
-    while ((idx = result.indexOf(word, idx)) !== -1) {
-        // Check word boundaries
-        const before = idx === 0 ? ' ' : result[idx - 1];
-        const after = idx + word.length >= result.length ? ' ' : result[idx + word.length];
-        const isWordBoundaryBefore = !/[a-zA-Z0-9_-]/.test(before);
-        const isWordBoundaryAfter = !/[a-zA-Z0-9_-]/.test(after);
-        if (isWordBoundaryBefore && isWordBoundaryAfter) {
-            result =
-                result.slice(0, idx) + replacement + result.slice(idx + word.length);
-            idx += replacement.length;
-        }
-        else {
-            idx += word.length;
-        }
-    }
-    return result;
-}
-// ============================================================================
-// Filter Functions
-// ============================================================================
-/**
- * Filter keyframes to only those that are actually used.
- * Returns null if no keyframes are used (fast path).
- */
-export function filterUsedKeyframes(keyframes, usedNames) {
-    if (!keyframes || usedNames.size === 0)
-        return null;
-    const used = {};
-    let hasAny = false;
-    for (const name of usedNames) {
-        if (keyframes[name]) {
-            used[name] = keyframes[name];
-            hasAny = true;
-        }
-    }
-    return hasAny ? used : null;
-}
-
-