@cube-dev/ui-kit 0.0.0-canary-a6187c8 → 0.0.0-canary-521eedd

package/es/stories/playground/PlaygroundPreview.js

@@ -1,91 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * Released under the MIT license.
- */
-
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Layout } from '../../components/content/Layout/index.js';
-import { tasty } from '../../tasty/index.js';
-import { Button } from './components/Button.js';
-import { Card } from './components/Card.js';
-import { ScrollProgress } from './components/ScrollProgress.js';
-const PreviewContent = tasty({
-    styles: {
-        display: 'flex',
-        flex: 1,
-        placeContent: 'center',
-        placeItems: 'center',
-        overflow: 'auto',
-        padding: '4x',
-        fill: '#light',
-        // Checkered pattern to show transparency
-        backgroundImage: 'linear-gradient(45deg, #dark.05 25%, transparent 25%), linear-gradient(-45deg, #dark.05 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dark.05 75%), linear-gradient(-45deg, transparent 75%, #dark.05 75%)',
-        backgroundSize: '20px 20px',
-        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
-    },
-});
-const StateRow = tasty({
-    styles: {
-        display: 'flex',
-        gap: '2x',
-        placeItems: 'center',
-    },
-});
-const StateLabel = tasty({
-    styles: {
-        display: 'inline-flex',
-        width: '80px',
-        preset: 't4',
-        color: '#dark-03',
-    },
-});
-const ButtonColumn = tasty({
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        gap: '12px',
-        padding: '3x',
-        radius: '1r',
-    },
-    styleProps: ['fill'],
-});
-// Button state configurations for forced preview
-const BUTTON_STATES = [
-    {
-        label: 'Default',
-        mods: { hovered: false, focused: false, pressed: false, disabled: false },
-    },
-    {
-        label: 'Hovered',
-        mods: { hovered: true, focused: false, pressed: false, disabled: false },
-    },
-    {
-        label: 'Focused',
-        mods: { hovered: false, focused: true, pressed: false, disabled: false },
-    },
-    {
-        label: 'Pressed',
-        mods: { hovered: false, focused: false, pressed: true, disabled: false },
-    },
-    {
-        label: 'Disabled',
-        mods: { hovered: false, focused: false, pressed: false, disabled: true },
-        isDisabled: true,
-    },
-    {
-        label: 'Hover+Focus',
-        mods: { hovered: true, focused: true, pressed: false, disabled: false },
-    },
-];
-export function PlaygroundPreview({ component, styles, }) {
-    return (_jsxs(Layout, { height: "100%", children: [_jsxs(Layout.Toolbar, { children: ["Preview: ", component] }), _jsx(Layout.Content, { padding: 0, children: _jsxs(PreviewContent, { children: [component === 'card' && _jsx(Card, { styles: styles }), component === 'scroll-progress' && (_jsx(ScrollProgress, { styles: styles })), component === 'button' && (_jsxs("div", { style: { display: 'flex', gap: '24px' }, children: [_jsx("div", { style: {
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        gap: '12px',
-                                        padding: '24px 0',
-                                    }, children: BUTTON_STATES.map((state) => (_jsx(StateLabel, { style: { height: '32px' }, children: state.label }, state.label))) }), _jsx(ButtonColumn, { children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) }), _jsx(ButtonColumn, { fill: "#white", children: BUTTON_STATES.map((state) => (_jsx(Button, { styles: styles, isDisabled: 'isDisabled' in state ? state.isDisabled : false, mods: state.mods, children: "Button" }, state.label))) })] }))] }) })] }));
-}
-
-        

package/es/stories/playground/components/Button.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useButton, useFocusRing, useHover } from 'react-aria';
-import { tasty } from '../../../tasty/index.js';
-const ButtonElement = tasty({
-    as: 'button',
-    qa: 'PlaygroundButton',
-    styles: {
-        display: 'inline-flex',
-        placeItems: 'center',
-        border: 0,
-        background: 'none',
-        font: 'inherit',
-    },
-});
-export function Button({ styles, children, isDisabled = false, onPress, mods: externalMods, }) {
-    const ref = useRef(null);
-    const { buttonProps, isPressed } = useButton({
-        isDisabled,
-        onPress,
-    }, ref);
-    const { hoverProps, isHovered } = useHover({ isDisabled });
-    const { focusProps, isFocusVisible } = useFocusRing();
-    // Internal mods from react-aria hooks
-    const internalMods = {
-        pressed: isPressed,
-        hovered: isHovered,
-        focused: isFocusVisible,
-        disabled: isDisabled,
-    };
-    // External mods override internal ones
-    const mergedMods = externalMods
-        ? { ...internalMods, ...externalMods }
-        : internalMods;
-    return (_jsx(ButtonElement, { ...buttonProps, ...hoverProps, ...focusProps, ref: ref, styles: styles, mods: mergedMods, children: children || 'Click me' }));
-}
-
-        

package/es/stories/playground/components/Card.js

@@ -1,20 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { tasty } from '../../../tasty/index.js';
-const CardElement = tasty({
-    qa: 'PlaygroundCard',
-    styles: {
-        display: 'block',
-    },
-});
-export function Card({ styles, children }) {
-    return (_jsx(CardElement, { styles: styles, children: children || (_jsxs(_Fragment, { children: [_jsx("div", { style: { fontWeight: 600, marginBottom: '8px' }, children: "Card Title" }), _jsx("div", { style: { opacity: 0.7 }, children: "This is a simple card component for demonstrating tasty styles." })] })) }));
-}
-
-        

package/es/stories/playground/components/ScrollProgress.js

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tasty } from '../../../tasty/index.js';
-const ScrollProgressElement = tasty({
-    qa: 'PlaygroundScrollProgress',
-});
-export function ScrollProgress({ styles }) {
-    return (_jsxs(ScrollProgressElement, { styles: styles, children: [_jsx("div", { "data-element": "ProgressBar" }), _jsxs("div", { "data-element": "Content", children: [_jsx("p", { style: { margin: 0, opacity: 0.7 }, children: "Scroll down to see the progress bar animate" }), _jsxs("p", { style: { margin: '16px 0 0', opacity: 0.5, fontSize: '12px' }, children: ["(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {}), "(Requires browser support for animation-timeline)", _jsx("br", {})] })] })] }));
-}
-
-        

package/es/stories/playground/examples.js

@@ -1,156 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * Released under the MIT license.
- */
-
-import { DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, } from '../../data/item-themes.js';
-// Common button layout styles
-const BUTTON_BASE_STYLES = {
-    display: 'inline-flex',
-    placeItems: 'center',
-    gap: '1x',
-    padding: '(1.25x - 1bw) (2x - 1bw)',
-    radius: '1r',
-    preset: 't3',
-    cursor: {
-        '': 'pointer',
-        disabled: 'not-allowed',
-    },
-    transition: 'theme',
-};
-export const PLAYGROUND_EXAMPLES = [
-    {
-        name: 'Raw (No preview)',
-        component: 'raw',
-        styles: {
-            display: 'flex',
-            flow: 'column',
-            gap: '2x',
-            padding: '3x',
-            fill: '#white',
-            radius: '2r',
-            border: true,
-        },
-    },
-    {
-        name: 'Card - Basic',
-        component: 'card',
-        styles: {
-            display: 'flex',
-            flow: 'column',
-            gap: '2x',
-            padding: '3x',
-            fill: '#white',
-            radius: '2r',
-            border: true,
-            shadow: '0 2px 8px #dark.10',
-        },
-    },
-    {
-        name: 'Card - Purple',
-        component: 'card',
-        styles: {
-            display: 'flex',
-            flow: 'column',
-            gap: '2x',
-            padding: '4x',
-            fill: '#purple',
-            color: '#white',
-            radius: '2r',
-        },
-    },
-    {
-        name: 'Card - Responsive',
-        component: 'card',
-        styles: {
-            display: 'flex',
-            flow: 'column',
-            gap: '2x',
-            padding: {
-                '': '4x',
-                '@(w < 768px)': '2x',
-            },
-            fill: '#white',
-            radius: '2r',
-            border: true,
-            width: {
-                '': '400px',
-                '@(w < 768px)': '100%',
-            },
-        },
-    },
-    {
-        name: 'Button - Primary',
-        component: 'button',
-        styles: {
-            ...BUTTON_BASE_STYLES,
-            ...DEFAULT_PRIMARY_STYLES,
-        },
-    },
-    {
-        name: 'Button - Outline',
-        component: 'button',
-        styles: {
-            ...BUTTON_BASE_STYLES,
-            ...DEFAULT_OUTLINE_STYLES,
-        },
-    },
-    {
-        name: 'Scroll Progress (@supports)',
-        component: 'scroll-progress',
-        styles: {
-            // Container styles
-            display: 'flex',
-            flow: 'column',
-            width: '300px',
-            height: '200px',
-            radius: '2r',
-            border: true,
-            overflow: 'auto',
-            fill: '#white',
-            // Define keyframes for the progress animation
-            '@keyframes': {
-                'grow-progress': {
-                    from: 'scale: 0 1',
-                    to: 'scale: 1 1',
-                },
-            },
-            // Progress bar element
-            ProgressBar: {
-                position: 'sticky',
-                top: 0,
-                left: 0,
-                zIndex: 1,
-                height: 'min .5x',
-                margin: '-.5x bottom',
-                fill: '#purple',
-                radius: 'round',
-                transformOrigin: 'left center',
-                // Fallback for browsers without animation-timeline
-                scale: {
-                    '': '1 1',
-                    // When animation-timeline is supported, use scale: 0 1 as starting point
-                    '@supports(animation-timeline: scroll())': '0 1',
-                },
-                // Animation properties only when supported
-                animation: {
-                    '': 'none',
-                    '@supports(animation-timeline: scroll())': 'grow-progress linear both',
-                },
-                animationTimeline: {
-                    '': 'auto',
-                    '@supports(animation-timeline: scroll())': 'scroll(nearest block)',
-                },
-            },
-            // Scrollable content area
-            Content: {
-                display: 'block',
-                padding: '2x',
-            },
-        },
-    },
-];
-
-        

package/es/tasty/chunks/cacheKey.js

@@ -1,98 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
- * 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/index.js';
-/**
- * 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');
-}
-
-