@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/es/icons/UnlockIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/UpIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/UserGroupIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/UserIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/UserLockIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/ViewIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/WarningFilledIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/WarningIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/add-new-icon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/icons/wrap-icon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
@@ -93,6 +93,5 @@ export * from './components/overlays/Toasts';
 export * from './shared';
 export * from './icons';
 export * from './components/form';
-export * from './tokens';
 
         

package/es/provider.js

@@ -1,24 +1,29 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, } from 'react';
 import { defaultNavigationAdapter } from './providers/navigationAdapter.default';
+import { BreakpointsProvider } from './tasty';
 import { EventBusProvider } from './utils/react/useEventBus';
 export const UIKitContext = createContext({
     navigation: defaultNavigationAdapter,
 });
 export function Provider(allProps) {
-    let { children, insideForm, isDisabled, isReadOnly, isRequired, validationState, navigation, root, ref, } = allProps;
+    let { breakpoints, children, insideForm, isDisabled, isReadOnly, isRequired, validationState, navigation, root, ref, } = allProps;
     const parentContext = useContext(UIKitContext);
+    if (breakpoints) {
+        children = (_jsx(BreakpointsProvider, { value: breakpoints, children: children }));
+    }
     // Wrap with EventBusProvider for menu synchronization
     children = _jsx(EventBusProvider, { children: children });
     const props = useMemo(() => ({
         ref,
+        breakpoints,
         insideForm,
         isDisabled,
         isReadOnly,
@@ -28,6 +33,7 @@ export function Provider(allProps) {
         root,
     }), [
         ref,
+        breakpoints,
         insideForm,
         isDisabled,
         isReadOnly,

package/es/providers/TrackingProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/providers/navigation.types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/providers/navigationAdapter.default.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/services/notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/shared/form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/shared/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/Form.legacy-stories.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/FormFieldArgs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/SimpleLayout.stories.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/Tasty.stories.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/components/ConfirmDeletionDialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/components/DialogFormApp.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/stories/components/StyledButton.js

@@ -1,35 +1,31 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../components/actions';
-import { tasty, useGlobalStyles } from '../../tasty';
+import { tasty } from '../../tasty';
 export const StyledButton = tasty(Button, {
     styles: {
         padding: '3x 6x',
         preset: 't1',
-        fill: 'okhsl(200 40% 80%)',
     },
 });
-export function GlobalStyledHeading() {
-    useGlobalStyles('.myButton', {
-        display: 'inline-block',
-        padding: '1x 2x',
-        preset: 't2',
-        border: true,
-        radius: true,
-        fill: {
-            '': '#white',
-            ':hover': '#purple.20',
-        },
-        color: '#dark',
-    });
-    return null;
-}
+export const GlobalStyledHeading = tasty('.myButton', {
+    display: 'inline-block',
+    padding: '1x 2x',
+    preset: 't2',
+    border: true,
+    radius: true,
+    fill: {
+        '': '#white',
+        ':hover': '#purple.20',
+    },
+    color: '#dark',
+});
 export function Block() {
     return (_jsxs(_Fragment, { children: [_jsx(StyledButton, { children: "123" }), _jsx(GlobalStyledHeading, {})] }));
 }

package/es/stories/lists/baseProps.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 

package/es/tasty/debug.js

@@ -1,14 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
+ * @cube-dev/ui-kit v0.0.0-canary-7e4ec9d
  * Released under the MIT license.
  */
 
 /**
  * Debug utilities for inspecting tasty-generated CSS at runtime
  */
-import { CHUNK_NAMES } from './chunks/definitions';
 import { getCssTextForNode, injector } from './injector';
 import { isDevEnv } from './utils/isDevEnv';
 /**
@@ -247,95 +246,6 @@ function getPageStats(options) {
     }
     return { cssSize, ruleCount, stylesheetCount, skippedStylesheets };
 }
-// ============================================================================
-// Chunk-aware helpers (for style chunking optimization)
-// ============================================================================
-/**
- * Extract chunk name from a cache key.
- *
- * Cache keys have the format: "chunkName\0key:value\0key:value..."
- * or "[states:...]\0chunkName\0..." for predefined states.
- *
- * @param cacheKey - The cache key to parse
- * @returns The chunk name, or null if not found
- */
-function extractChunkNameFromCacheKey(cacheKey) {
-    // Cache keys are separated by \0 (null character)
-    const parts = cacheKey.split('\0');
-    for (const part of parts) {
-        // Skip predefined states prefix
-        if (part.startsWith('[states:'))
-            continue;
-        // First non-states part that doesn't contain : is the chunk name
-        if (!part.includes(':') && part.length > 0) {
-            return part;
-        }
-    }
-    return null;
-}
-/**
- * Get chunk info for a className by reverse-looking up its cache key.
- *
- * @param className - The tasty class name (e.g., "t0", "t123")
- * @param root - The document or shadow root to search in
- * @returns Object with chunk name and cache key, or nulls if not found
- */
-function getChunkForClassName(className, root = document) {
-    const registry = injector.instance['sheetManager']?.getRegistry(root);
-    if (!registry) {
-        return { chunkName: null, cacheKey: null };
-    }
-    // Reverse lookup: find the cache key for this className
-    for (const [cacheKey, cn] of registry.cacheKeyToClassName) {
-        if (cn === className) {
-            return {
-                chunkName: extractChunkNameFromCacheKey(cacheKey),
-                cacheKey,
-            };
-        }
-    }
-    return { chunkName: null, cacheKey: null };
-}
-/**
- * Get chunk breakdown statistics for all styles.
- *
- * @param root - The document or shadow root to search in
- * @returns Object with breakdown by chunk type and totals
- */
-function getChunkBreakdown(root = document) {
-    const registry = injector.instance['sheetManager']?.getRegistry(root);
-    if (!registry) {
-        return {
-            byChunk: {},
-            totalChunkTypes: 0,
-        };
-    }
-    const byChunk = {};
-    // Group classes by chunk
-    for (const [cacheKey, className] of registry.cacheKeyToClassName) {
-        const chunkName = extractChunkNameFromCacheKey(cacheKey) || 'unknown';
-        if (!byChunk[chunkName]) {
-            byChunk[chunkName] = { classes: [], cssSize: 0, ruleCount: 0 };
-        }
-        byChunk[chunkName].classes.push(className);
-        // Get CSS for this class
-        const css = injector.instance.getCssTextForClasses([className], { root });
-        byChunk[chunkName].cssSize += css.length;
-        byChunk[chunkName].ruleCount += (css.match(/\{[^}]*\}/g) || []).length;
-    }
-    // Sort classes within each chunk for consistency
-    for (const entry of Object.values(byChunk)) {
-        entry.classes.sort((a, b) => {
-            const aNum = parseInt(a.slice(1));
-            const bNum = parseInt(b.slice(1));
-            return aNum - bNum;
-        });
-    }
-    return {
-        byChunk,
-        totalChunkTypes: Object.keys(byChunk).length,
-    };
-}
 /**
  * Concise tastyDebug API for inspecting styles at runtime
  */
@@ -406,7 +316,6 @@ export const tastyDebug = {
             return {
                 element: null,
                 classes: [],
-                chunks: [],
                 css: '',
                 size: 0,
                 rules: 0,
@@ -416,18 +325,12 @@ export const tastyDebug = {
         const tastyClasses = classList
             .split(/\s+/)
             .filter((cls) => /^t\d+$/.test(cls));
-        // Get chunk info for each tasty class
-        const chunks = tastyClasses.map((className) => ({
-            className,
-            chunkName: getChunkForClassName(className, root).chunkName,
-        }));
         const css = getCssTextForNode(element, { root });
         const prettifiedCSS = prettifyCSS(css);
         const ruleCount = (css.match(/\{[^}]*\}/g) || []).length;
         return {
             element,
             classes: tastyClasses,
-            chunks,
             css: prettifiedCSS,
             size: css.length,
             rules: ruleCount,
@@ -467,63 +370,7 @@ export const tastyDebug = {
         const { root } = opts || {};
         injector.instance.resetMetrics({ root });
     },
-    // 5) Chunk breakdown (style chunking optimization)
-    /**
-     * Get breakdown of styles by chunk type.
-     *
-     * With style chunking enabled, styles are split into logical chunks
-     * (appearance, font, dimension, container, etc.) for better caching
-     * and CSS reuse.
-     *
-     * @param opts - Options including root document/shadow root
-     * @returns Breakdown by chunk type with class counts and CSS sizes
-     */
-    chunks(opts) {
-        const { root = document, log = false } = opts || {};
-        const breakdown = getChunkBreakdown(root);
-        const totalClasses = Object.values(breakdown.byChunk).reduce((sum, entry) => sum + entry.classes.length, 0);
-        if (log) {
-            console.group('🧩 Style Chunk Breakdown');
-            // Define display order matching CHUNK_NAMES
-            const displayOrder = [
-                CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
-                CHUNK_NAMES.APPEARANCE,
-                CHUNK_NAMES.FONT,
-                CHUNK_NAMES.DIMENSION,
-                CHUNK_NAMES.CONTAINER,
-                CHUNK_NAMES.SCROLLBAR,
-                CHUNK_NAMES.POSITION,
-                CHUNK_NAMES.MISC,
-                CHUNK_NAMES.SUBCOMPONENTS,
-            ];
-            // Show chunks in order
-            for (const chunkName of displayOrder) {
-                const data = breakdown.byChunk[chunkName];
-                if (data) {
-                    const sizeStr = data.cssSize > 1024
-                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                        : `${data.cssSize}B`;
-                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                }
-            }
-            // Show any unknown chunks
-            for (const [chunkName, data] of Object.entries(breakdown.byChunk)) {
-                if (!displayOrder.includes(chunkName)) {
-                    const sizeStr = data.cssSize > 1024
-                        ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                        : `${data.cssSize}B`;
-                    console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                }
-            }
-            console.log(`📊 Total: ${totalClasses} classes across ${breakdown.totalChunkTypes} chunk types`);
-            console.groupEnd();
-        }
-        return {
-            ...breakdown,
-            totalClasses,
-        };
-    },
-    // 6) Get CSS for specific global types
+    // 5) Get CSS for specific global types
     getGlobalTypeCSS(type, opts) {
         const { root = document } = opts || {};
         const registry = injector.instance['sheetManager']?.getRegistry(root);
@@ -718,8 +565,6 @@ export const tastyDebug = {
                 propertyCSSSize: Math.round(propertyData.size * scaleFactor),
             };
         }
-        // Get chunk breakdown
-        const chunkBreakdown = getChunkBreakdown(root);
         const summary = {
             activeClasses: cacheStatus.classes.active,
             unusedClasses: cacheStatus.classes.unused,
@@ -746,7 +591,6 @@ export const tastyDebug = {
             propertyCount: definitions.properties.length,
             keyframeCount: definitions.keyframes.length,
             cleanupSummary,
-            chunkBreakdown,
         };
         if (log) {
             console.group('🎨 Comprehensive Tasty Debug Summary');
@@ -758,7 +602,7 @@ export const tastyDebug = {
             console.log(`  • Active CSS: ${summary.activeCSSSize} characters`);
             console.log(`  • Unused CSS: ${summary.unusedCSSSize} characters`);
             console.log(`  • Global CSS (injectGlobal): ${summary.globalCSSSize} characters (${summary.globalRuleCount} rules)`);
-            console.log(`  • Raw CSS (injectRawCSS/useRawCSS): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
+            console.log(`  • Raw CSS (createGlobalStyle): ${summary.rawCSSSize} characters (${summary.rawRuleCount} rules)`);
             console.log(`  • Keyframes CSS: ${summary.keyframesCSSSize} characters (${summary.keyframesRuleCount} rules)`);
             console.log(`  • Property CSS: ${summary.propertyCSSSize} characters (${summary.propertyRuleCount} rules)`);
             // Show breakdown calculation
@@ -808,30 +652,6 @@ export const tastyDebug = {
                     : '0';
                 console.log(`  • Overall cache hit rate: ${hitRate}%`);
             }
-            // Show chunk breakdown
-            if (summary.chunkBreakdown.totalChunkTypes > 0) {
-                console.log('🧩 Style Chunk Breakdown:');
-                const displayOrder = [
-                    CHUNK_NAMES.COMBINED, // non-chunked styles (e.g., @starting-style)
-                    CHUNK_NAMES.APPEARANCE,
-                    CHUNK_NAMES.FONT,
-                    CHUNK_NAMES.DIMENSION,
-                    CHUNK_NAMES.CONTAINER,
-                    CHUNK_NAMES.SCROLLBAR,
-                    CHUNK_NAMES.POSITION,
-                    CHUNK_NAMES.MISC,
-                    CHUNK_NAMES.SUBCOMPONENTS,
-                ];
-                for (const chunkName of displayOrder) {
-                    const data = summary.chunkBreakdown.byChunk[chunkName];
-                    if (data) {
-                        const sizeStr = data.cssSize > 1024
-                            ? `${(data.cssSize / 1024).toFixed(1)}KB`
-                            : `${data.cssSize}B`;
-                        console.log(`  • ${chunkName}: ${data.classes.length} classes, ${sizeStr}, ${data.ruleCount} rules`);
-                    }
-                }
-            }
             console.log('🔍 Details:');
             console.log('  • Active classes:', summary.activeClasses);
             console.log('  • Unused classes:', summary.unusedClasses);
@@ -915,15 +735,15 @@ export const tastyDebug = {
         console.groupEnd();
         console.groupEnd();
     },
-    // 12) Show help and usage examples
+    // 11) Show help and usage examples
     help() {
         console.group('🎨 tastyDebug - Quick Start Guide');
         console.log('💡 Essential commands:');
         console.log('  • tastyDebug.summary({ log: true }) - comprehensive overview');
-        console.log('  • tastyDebug.chunks({ log: true }) - style chunk breakdown');
         console.log('  • tastyDebug.log("active") - beautiful CSS display');
         console.log('  • tastyDebug.css("active") - get active CSS');
-        console.log('  • tastyDebug.inspect(".my-element") - element inspection with chunk info');
+        console.log('  • tastyDebug.inspect(".my-element") - detailed element inspection');
+        console.log('  • tastyDebug.global({ log: true }) - global CSS analysis');
         console.log('  • tastyDebug.cache() - cache status');
         console.log('  • tastyDebug.defs() - defined properties & keyframes');
         console.log('  • tastyDebug.pageCSS({ log: true }) - all page CSS');
@@ -932,7 +752,7 @@ export const tastyDebug = {
         console.log('  • "all" - all tasty CSS + global CSS');
         console.log('  • "active" - CSS for classes in DOM');
         console.log('  • "unused" - CSS for classes with refCount = 0');
-        console.log('  • "global" - only global CSS (injectGlobal)');
+        console.log('  • "global" - only global CSS (createGlobalStyle)');
         console.log('  • "page" - ALL page CSS (including non-tasty)');
         console.log('  • "t123" - specific tasty class');
         console.log('  • [".my-selector"] - CSS selector');
@@ -942,12 +762,6 @@ export const tastyDebug = {
         console.log('  • { title: "Custom" } - custom title for log()');
         console.log('  • { root: shadowRoot } - target Shadow DOM');
         console.log('  • { prettify: false } - skip CSS formatting');
-        console.log('');
-        console.log('🧩 Style Chunking:');
-        console.log('  Elements have multiple classes (one per chunk: appearance, font, dimension, etc.)');
-        console.log('  • tastyDebug.chunks({ log: true }) - breakdown by chunk type');
-        console.log('  • tastyDebug.inspect() - shows which chunk each class belongs to');
-        console.log('  Chunk types: combined (non-chunked), appearance, font, dimension, container, scrollbar, position, misc, subcomponents');
         console.groupEnd();
     },
 };