@cube-dev/ui-kit 0.98.8 → 0.99.0

package/es/tasty/zero/extractor.js

@@ -0,0 +1,222 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+import { createHash } from 'crypto';
+import { categorizeStyleKeys, generateChunkCacheKey, renderStylesForChunk, } from '../chunks/index.js';
+import { extractAnimationNamesFromStyles, extractLocalKeyframes, filterUsedKeyframes, hasLocalKeyframes, mergeKeyframes, } from '../keyframes/index.js';
+import { renderStyles } from '../pipeline/index.js';
+/**
+ * Generate a deterministic className from a cache key using content hash.
+ * This ensures the same styles always produce the same className,
+ * regardless of build order or incremental compilation.
+ */
+function generateClassName(cacheKey) {
+    const hash = createHash('md5').update(cacheKey).digest('hex').slice(0, 6);
+    return `ts${hash}`; // 'ts' prefix for "tasty-static" to distinguish from runtime 't' classes
+}
+/**
+ * Extract styles using chunking (for className mode).
+ * Returns multiple classes, one per chunk.
+ */
+export function extractStylesWithChunks(styles) {
+    const chunks = [];
+    // Categorize style keys into chunks
+    const chunkMap = categorizeStyleKeys(styles);
+    for (const [chunkName, chunkStyleKeys] of chunkMap) {
+        if (chunkStyleKeys.length === 0)
+            continue;
+        // Generate cache key for this chunk (used for className hash)
+        const cacheKey = generateChunkCacheKey(styles, chunkName, chunkStyleKeys);
+        // Render styles for this chunk
+        const renderResult = renderStylesForChunk(styles, chunkName, chunkStyleKeys);
+        if (renderResult.rules.length === 0)
+            continue;
+        // Generate deterministic className from content hash
+        const className = generateClassName(cacheKey);
+        const selector = `.${className}.${className}`;
+        // Format CSS
+        const css = formatRulesToCSS(renderResult.rules, selector);
+        chunks.push({ className, css });
+    }
+    return chunks;
+}
+/**
+ * Extract styles for a specific selector (for global/selector mode).
+ * Returns a single CSS block.
+ */
+export function extractStylesForSelector(selector, styles) {
+    // renderStyles with selector returns StyleResult[] with selectors already applied
+    const rules = renderStyles(styles, selector);
+    // Format without re-prefixing - rules already have the full selector
+    const css = formatRulesDirectly(rules);
+    return { selector, css };
+}
+/**
+ * Format StyleResult[] to CSS string.
+ * Prefixes each rule's selector with the base selector.
+ * Used for chunked styles where rules have relative selectors.
+ */
+function formatRulesToCSS(rules, baseSelector) {
+    return rules
+        .map((rule) => {
+        // Handle selector as array (OR conditions) or string
+        // Note: renderStyles without className joins array selectors with '|||' placeholder
+        const selectorParts = Array.isArray(rule.selector)
+            ? rule.selector
+            : rule.selector
+                ? rule.selector.split('|||')
+                : [''];
+        // Prefix each selector part with the base selector
+        const fullSelector = selectorParts
+            .map((part) => {
+            // Build selector: [rootPrefix] baseSelector[part]
+            let selector;
+            // If part is empty, just use base selector
+            if (!part) {
+                selector = baseSelector;
+            }
+            else if (part.startsWith(':') || part.startsWith('[')) {
+                // If part starts with a pseudo-class or pseudo-element, append to base
+                selector = `${baseSelector}${part}`;
+            }
+            else if (part.startsWith('>') ||
+                part.startsWith('+') ||
+                part.startsWith('~')) {
+                // If part starts with >, +, ~ combinator, append with space
+                selector = `${baseSelector}${part}`;
+            }
+            else {
+                // Otherwise, combine base with part
+                selector = `${baseSelector}${part}`;
+            }
+            // Prepend rootPrefix if present (for @root() states)
+            if (rule.rootPrefix) {
+                selector = `${rule.rootPrefix} ${selector}`;
+            }
+            return selector;
+        })
+            .join(', ');
+        let css = `${fullSelector} { ${rule.declarations} }`;
+        // Wrap in at-rules (in reverse order for proper nesting)
+        if (rule.atRules && rule.atRules.length > 0) {
+            for (const atRule of [...rule.atRules].reverse()) {
+                css = `${atRule} {\n  ${css}\n}`;
+            }
+        }
+        return css;
+    })
+        .join('\n\n');
+}
+/**
+ * Format StyleResult[] to CSS string directly without prefixing.
+ * Used for global styles where rules already have the full selector.
+ */
+function formatRulesDirectly(rules) {
+    return rules
+        .map((rule) => {
+        // Prepend rootPrefix if present (for @root() states)
+        const selector = rule.rootPrefix
+            ? `${rule.rootPrefix} ${rule.selector}`
+            : rule.selector;
+        let css = `${selector} { ${rule.declarations} }`;
+        // Wrap in at-rules (in reverse order for proper nesting)
+        if (rule.atRules && rule.atRules.length > 0) {
+            for (const atRule of [...rule.atRules].reverse()) {
+                css = `${atRule} {\n  ${css}\n}`;
+            }
+        }
+        return css;
+    })
+        .join('\n\n');
+}
+// Note: With hash-based className generation, counter management functions
+// are no longer needed. ClassNames are deterministic based on content.
+/**
+ * Generate a deterministic keyframes name from content hash.
+ * This ensures the same keyframes content always produces the same name,
+ * enabling automatic deduplication across elements and files.
+ */
+function generateKeyframesName(steps) {
+    const content = JSON.stringify(steps);
+    const hash = createHash('md5').update(content).digest('hex').slice(0, 6);
+    return `kf${hash}`; // 'kf' prefix for "keyframes"
+}
+/**
+ * Extract keyframes that are used in styles.
+ * Merges local @keyframes with global keyframes, filters to only used ones.
+ * Generates hash-based names from content for automatic deduplication.
+ *
+ * @param styles - The styles object (may contain @keyframes and animation properties)
+ * @param globalKeyframes - Optional global keyframes from config
+ * @returns Keyframes to inject and name mapping for replacement
+ */
+export function extractKeyframesFromStyles(styles, globalKeyframes) {
+    const emptyResult = {
+        keyframes: [],
+        nameMap: new Map(),
+    };
+    // Extract animation names from styles
+    const usedNames = extractAnimationNamesFromStyles(styles);
+    if (usedNames.size === 0)
+        return emptyResult;
+    // Merge local and global keyframes
+    const local = hasLocalKeyframes(styles)
+        ? extractLocalKeyframes(styles)
+        : null;
+    const allKeyframes = mergeKeyframes(local, globalKeyframes ?? null);
+    // Filter to only used keyframes
+    const usedKeyframes = filterUsedKeyframes(allKeyframes, usedNames);
+    if (!usedKeyframes)
+        return emptyResult;
+    // Generate hash-based names and collect unique keyframes
+    const seenHashes = new Set();
+    const nameMap = new Map();
+    const keyframesToEmit = [];
+    for (const [originalName, steps] of Object.entries(usedKeyframes)) {
+        const hashedName = generateKeyframesName(steps);
+        // Always map original name to hashed name (for CSS replacement)
+        nameMap.set(originalName, hashedName);
+        // Only emit each unique keyframe once
+        if (!seenHashes.has(hashedName)) {
+            seenHashes.add(hashedName);
+            const css = keyframesToCSS(hashedName, steps);
+            keyframesToEmit.push({ name: hashedName, css });
+        }
+    }
+    return { keyframes: keyframesToEmit, nameMap };
+}
+/**
+ * Convert keyframes steps to CSS string.
+ */
+function keyframesToCSS(name, steps) {
+    const stepRules = [];
+    for (const [key, value] of Object.entries(steps)) {
+        if (typeof value === 'string') {
+            // Raw CSS string
+            stepRules.push(`${key} { ${value.trim()} }`);
+        }
+        else if (value && typeof value === 'object') {
+            // Style map - convert to CSS declarations
+            const declarations = Object.entries(value)
+                .map(([prop, val]) => {
+                const cssProperty = camelToKebab(prop);
+                return `${cssProperty}: ${val}`;
+            })
+                .join('; ');
+            stepRules.push(`${key} { ${declarations} }`);
+        }
+    }
+    return `@keyframes ${name} { ${stepRules.join(' ')} }`;
+}
+/**
+ * Convert camelCase to kebab-case.
+ */
+function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+        

package/es/tasty/zero/index.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Zero-runtime module for programmatic use.
+ *
+ * For the Babel plugin, import from '@cube-dev/ui-kit/tasty/zero/babel'
+ *
+ * @example
+ * ```typescript
+ * import { extractStylesWithChunks, CSSWriter } from '@cube-dev/ui-kit/tasty/zero';
+ *
+ * const chunks = extractStylesWithChunks({ fill: '#blue', padding: '2x' });
+ * const writer = new CSSWriter('output.css');
+ * chunks.forEach(chunk => writer.add(chunk.className, chunk.css));
+ * writer.write();
+ * ```
+ */
+// Core extraction utilities
+export { extractStylesWithChunks, extractStylesForSelector } from './extractor.js';
+// CSS output utilities
+export { CSSWriter } from './css-writer.js';
+
+        

package/es/tasty/zero/next.js

@@ -0,0 +1,102 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * Provides a convenient way to configure the Babel plugin for Next.js projects.
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero({
+ *   output: 'public/tasty.css',
+ * })({
+ *   // your Next.js config
+ * });
+ * ```
+ */
+import * as path from 'path';
+/**
+ * Next.js configuration wrapper for tasty-zero.
+ *
+ * @param options - Configuration options
+ * @returns A function that wraps the Next.js config
+ *
+ * @example
+ * ```javascript
+ * // next.config.js
+ * const { withTastyZero } = require('@cube-dev/ui-kit/tasty/zero/next');
+ *
+ * module.exports = withTastyZero()({
+ *   reactStrictMode: true,
+ * });
+ * ```
+ */
+export function withTastyZero(options = {}) {
+    const { output = 'public/tasty.css', enabled = true } = options;
+    return (nextConfig = {}) => {
+        if (!enabled) {
+            return nextConfig;
+        }
+        return {
+            ...nextConfig,
+            webpack(config, context) {
+                const { isServer, dir } = context;
+                // Only process on client build to avoid duplicate CSS generation
+                if (!isServer) {
+                    // Get absolute output path
+                    const absoluteOutput = path.resolve(dir || process.cwd(), output);
+                    // Find existing babel-loader rule or add new one
+                    const babelPluginConfig = [
+                        require.resolve('./babel'),
+                        { output: absoluteOutput },
+                    ];
+                    // Add our plugin to the existing babel config or create new rule
+                    const existingRule = config.module?.rules?.find((rule) => rule.use?.loader === 'babel-loader' ||
+                        rule.use?.some?.((u) => u.loader === 'babel-loader'));
+                    if (existingRule) {
+                        // Add to existing babel-loader
+                        const babelUse = Array.isArray(existingRule.use)
+                            ? existingRule.use.find((u) => u.loader === 'babel-loader')
+                            : existingRule.use;
+                        if (babelUse?.options) {
+                            babelUse.options.plugins = babelUse.options.plugins || [];
+                            babelUse.options.plugins.push(babelPluginConfig);
+                        }
+                    }
+                    else {
+                        // Add new rule for our plugin
+                        config.module = config.module || {};
+                        config.module.rules = config.module.rules || [];
+                        config.module.rules.push({
+                            test: /\.(tsx?|jsx?)$/,
+                            exclude: /node_modules/,
+                            use: [
+                                {
+                                    loader: require.resolve('babel-loader'),
+                                    options: {
+                                        plugins: [babelPluginConfig],
+                                    },
+                                },
+                            ],
+                        });
+                    }
+                }
+                // Chain with existing webpack config
+                if (typeof nextConfig.webpack === 'function') {
+                    return nextConfig.webpack(config, context);
+                }
+                return config;
+            },
+        };
+    };
+}
+
+        

package/es/tokens/base.js

@@ -0,0 +1,64 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Base design system tokens.
+ * These define the fundamental units and values used throughout the system.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+export const BASE_TOKENS = {
+    // Typography base
+    /** @deprecated Use preset tokens instead */
+    '$font-size': '14px',
+    /** @deprecated Use preset tokens instead */
+    '$line-height': '20px',
+    // Input typography
+    '$input-font-size': '14px',
+    '$input-line-height': '20px',
+    '$input-letter-spacing': '0.02em',
+    // Opacity & dimensions
+    /** Opacity for disabled elements */
+    '$disabled-opacity': '.4',
+    /** Base gap unit for spacing (used with `.5x`, `1x`, `2x` etc.) */
+    $gap: '8px',
+    /** Stroke width for icons */
+    '$stroke-width': 1.5,
+    /** Focus outline width */
+    '$outline-width': 'calc(1rem / 16 * 3)',
+    /** Border width for bordered elements */
+    '$border-width': '1px',
+    // Border radius
+    /** Base border radius (used with `1r`, `2r` etc.) */
+    $radius: '6px',
+    /** Larger radius using tasty calc: 1r + 0.5x */
+    '$large-radius': '(1r + .5x)',
+    /** Card border radius */
+    '$card-radius': '(1r + .5x)',
+    /** Sharp corner for leaf shapes */
+    '$leaf-sharp-radius': '0px',
+    // Misc dimensions
+    /** Width of fade effect for overflowing content */
+    '$fade-width': '32px',
+    /** Minimum dialog width (responsive) */
+    '$min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',
+    // Transitions
+    /** Default transition duration */
+    $transition: '80ms',
+    /** Transition for disclosure animations */
+    '$disclosure-transition': '120ms',
+    // Scrollbar tokens
+    '$scrollbar-width': '1.5x',
+    '$scrollbar-outline-width': '1ow',
+    '$scrollbar-radius': '1.5r',
+    '#scrollbar-thumb': '#text.5',
+    '#scrollbar-outline': '#clear',
+    '#scrollbar-bg': '#dark-bg',
+    '#scrollbar-corner': '#clear',
+};
+
+        

package/es/tokens/colors.js

@@ -0,0 +1,68 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Color tokens with # prefix for tasty color definitions.
+ * The tasty system automatically generates {name}-color-rgb variants.
+ */
+export const COLOR_TOKENS = {
+    // Base colors
+    '#pink': 'rgb(255 100 146)',
+    '#pink-02': 'rgb(255 131 168)',
+    '#purple': 'rgb(113 110 238)',
+    '#purple-text': 'rgb(105 103 227)',
+    '#purple-bg': 'rgb(241 239 250)',
+    '#purple-icon': 'rgb(142 134 237)',
+    '#purple-01': 'rgb(122 119 255)',
+    '#purple-02': 'rgb(149 146 255)',
+    '#purple-03': 'rgb(175 173 255)',
+    '#purple-04': 'rgb(202 201 255)',
+    '#focus': 'rgb(172 163 238)',
+    '#text': 'rgb(91 92 125)',
+    '#dark': 'rgb(25 26 46)',
+    '#dark-01': 'rgb(25 26 46)',
+    '#dark-02': 'rgb(69 68 98)',
+    '#dark-03': 'rgb(115 114 139)',
+    '#dark-04': 'rgb(161 161 178)',
+    '#dark-05': 'rgb(213 213 222)',
+    '#dark-bg': 'rgb(249 249 251)',
+    '#light': 'rgb(246 246 248)',
+    '#white': 'rgb(255 255 255)',
+    '#black': 'rgb(0 0 0)',
+    '#danger': 'rgb(227 70 75)',
+    '#danger-text': 'rgb(208 57 56)',
+    '#danger-bg': 'rgb(253 245 244)',
+    '#danger-icon': 'rgb(245 101 99)',
+    '#success': 'rgb(9 145 88)',
+    '#success-text': 'rgb(12 135 82)',
+    '#success-icon': 'rgb(40 165 104)',
+    '#success-bg': 'rgb(238 249 242)',
+    '#note': 'rgb(158 119 19)',
+    '#note-text': 'rgb(150 112 8)',
+    '#note-bg': 'rgb(253 245 233)',
+    '#note-icon': 'rgb(181 140 44)',
+    '#border': 'rgb(227 227 233)',
+    '#light-border': 'rgb(227 227 233)',
+    // Semantic colors
+    '#clear': 'transparent',
+    '#border-opaque': 'rgb(227 227 233)',
+    '#shadow': '#dark.06',
+    '#draft': '#dark.2',
+    '#minor': '#dark.65',
+    '#danger-bg-hover': '#danger.1',
+    '#dark-75': '#dark.75',
+    '#primary': '#purple',
+    // Pink opacity variants
+    '#pink-8': '#pink.2',
+    '#pink-9': '#pink.1',
+    // Disabled state colors
+    '#disabled': '#dark-01.25',
+    '#disabled-text': '#dark-01.25',
+    '#disabled-bg': '#dark-05.2',
+};
+
+        

package/es/tokens/index.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Design tokens for the Cube UI Kit.
+ *
+ * This module exports all design tokens used throughout the design system.
+ * All token keys use $ prefix for CSS custom properties.
+ *
+ * Categories:
+ * - Colors: Base color palette with -color and -color-rgb variants
+ * - Typography: Font presets for headings, text, paragraphs, etc.
+ * - Sizes: Component size values (XS, SM, MD, LG, XL)
+ * - Spacing: Space tokens using gap multipliers
+ * - Shadows: Shadow definitions for elevation
+ * - Layout: Common layout dimensions
+ * - Base: Core design system values
+ */
+import { generateTypographyTokens } from '../tasty/utils/typography.js';
+import { BASE_TOKENS } from './base.js';
+import { COLOR_TOKENS } from './colors.js';
+import { LAYOUT_TOKENS } from './layout.js';
+import { SHADOW_TOKENS } from './shadows.js';
+import { SIZE_TOKENS } from './sizes.js';
+import { SPACE_TOKENS } from './spacing.js';
+/**
+ * All design tokens combined into a single Styles object.
+ * Keys use $ prefix for CSS custom properties.
+ *
+ * Ready for use with useGlobalStyles('body', TOKENS).
+ *
+ * Includes:
+ * - Base tokens ($gap, $radius, etc.)
+ * - Space tokens ($space-xs, $space-sm, etc.)
+ * - Size tokens ($size-xs, $size-sm, etc.)
+ * - Shadow tokens ($item-shadow, $card-shadow, etc.)
+ * - Layout tokens ($max-content-width, $topbar-height, etc.)
+ * - Typography tokens ($h1-font-size, $t3-line-height, etc.)
+ * - Color tokens ($purple-color, $purple-color-rgb, etc.)
+ */
+export const TOKENS = {
+    ...BASE_TOKENS,
+    ...SPACE_TOKENS,
+    ...SIZE_TOKENS,
+    ...SHADOW_TOKENS,
+    ...LAYOUT_TOKENS,
+    ...generateTypographyTokens(),
+    ...COLOR_TOKENS,
+};
+// Re-export category modules for direct access
+export { COLOR_TOKENS } from './colors.js';
+export { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from './sizes.js';
+export { SPACE_TOKENS } from './spacing.js';
+export { SHADOW_TOKENS } from './shadows.js';
+export { LAYOUT_TOKENS } from './layout.js';
+export { BASE_TOKENS } from './base.js';
+export { TYPOGRAPHY_PRESETS } from './typography.js';
+
+        

package/es/tokens/layout.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Layout-related tokens for common UI dimensions.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+export const LAYOUT_TOKENS = {
+    /** Maximum width for main content areas */
+    '$max-content-width': '1440px',
+    /** Height of the top navigation bar */
+    '$topbar-height': '48px',
+    /** Height of the development mode indicator bar */
+    '$devmodebar-height': '54px',
+    /** Width of the sidebar navigation */
+    '$sidebar-width': '200px',
+    /** Base border radius (legacy, prefer `radius`) */
+    '$border-radius-base': '4px',
+};
+
+        

package/es/tokens/shadows.js

@@ -0,0 +1,27 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Shadow tokens using tasty shorthand syntax.
+ *
+ * Format: `<offset-y> <blur> <spread?> <color>`
+ * - `1bw` = 1 × border-width
+ * - `.5x` = 0.5 × gap
+ * - `#dark.15` = dark color at 15% opacity
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+export const SHADOW_TOKENS = {
+    /** Subtle shadow for list items */
+    '$item-shadow': '0 1bw .375x #dark.15',
+    /** Standard card elevation */
+    '$card-shadow': '0 .5x 2x #shadow',
+    /** Elevated dialog shadow */
+    '$dialog-shadow': '0 1x 4x #dark.15',
+};
+
+        

package/es/tokens/sizes.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Component size values in pixels.
+ * Used for buttons, inputs, and other interactive elements.
+ */
+export const SIZES = {
+    XS: 24,
+    SM: 28,
+    MD: 32,
+    LG: 40,
+    XL: 48,
+};
+/**
+ * Map from size names to size keys.
+ * @example SIZE_NAME_TO_KEY['small'] // 'SM'
+ */
+export const SIZE_NAME_TO_KEY = {
+    xsmall: 'XS',
+    small: 'SM',
+    medium: 'MD',
+    large: 'LG',
+    xlarge: 'XL',
+};
+/**
+ * Size tokens with $ prefix for CSS custom properties.
+ * Creates tokens like `$size-xs`, `$size-sm`, etc.
+ */
+export const SIZE_TOKENS = {
+    '$size-xs': `${SIZES.XS}px`,
+    '$size-sm': `${SIZES.SM}px`,
+    '$size-md': `${SIZES.MD}px`,
+    '$size-lg': `${SIZES.LG}px`,
+    '$size-xl': `${SIZES.XL}px`,
+};
+
+        

package/es/tokens/spacing.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.99.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Spacing tokens using tasty multiplier syntax.
+ * Values like `.5x` mean 0.5 × gap, `2x` means 2 × gap.
+ *
+ * Keys use $ prefix for CSS custom properties.
+ */
+export const SPACE_TOKENS = {
+    '$space-xs': '.5x',
+    '$space-sm': '.75x',
+    '$space-md': '1x',
+    '$space-lg': '1.5x',
+    '$space-xl': '2x',
+};
+
+