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

package/es/tasty/zero/next.js

@@ -1,102 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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

@@ -1,64 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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

@@ -1,68 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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

@@ -1,63 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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';
-import { BASE_TOKENS } from './base';
-import { COLOR_TOKENS } from './colors';
-import { LAYOUT_TOKENS } from './layout';
-import { SHADOW_TOKENS } from './shadows';
-import { SIZE_TOKENS } from './sizes';
-import { SPACE_TOKENS } from './spacing';
-/**
- * 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';
-export { SIZES, SIZE_NAME_TO_KEY, SIZES_MAP, SIZE_TOKENS } from './sizes';
-export { SPACE_TOKENS } from './spacing';
-export { SHADOW_TOKENS } from './shadows';
-export { LAYOUT_TOKENS } from './layout';
-export { BASE_TOKENS } from './base';
-export { TYPOGRAPHY_PRESETS } from './typography';
-
-        

package/es/tokens/layout.js

@@ -1,26 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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

@@ -1,27 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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

@@ -1,44 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * 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',
-};
-/** @deprecated Use SIZE_NAME_TO_KEY instead */
-export const SIZES_MAP = SIZE_NAME_TO_KEY;
-/**
- * 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

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

package/es/tokens/typography.js

@@ -1,237 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-76be278
- * Released under the MIT license.
- */
-
-/**
- * Typography presets for headings, text, and special styles.
- *
- * Naming conventions:
- * - `h1`-`h6`: Headings (bold by default)
- * - `t1`-`t4`: Text styles (regular weight)
- * - `t1m`-`t4m`: Text styles medium weight
- * - `m1`-`m3`: Markdown/prose styles (larger line-height)
- * - `p1`-`p4`: Paragraph styles
- * - `c1`-`c2`: Caption/uppercase styles
- * - `tag`: Tag/badge typography
- * - `strong`, `em`: Inline semantic styles
- * - `default`: Base text style
- */
-export const TYPOGRAPHY_PRESETS = {
-    // Text (basic)
-    text: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '400',
-    },
-    // Headings (h1-h6)
-    h1: {
-        fontSize: '36px',
-        lineHeight: '44px',
-        letterSpacing: '-0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '40px',
-    },
-    h2: {
-        fontSize: '24px',
-        lineHeight: '32px',
-        letterSpacing: '0em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '28px',
-    },
-    h3: {
-        fontSize: '20px',
-        lineHeight: '28px',
-        letterSpacing: '0em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '24px',
-    },
-    h4: {
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '22px',
-    },
-    h5: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '20px',
-    },
-    h6: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '20px',
-    },
-    // Text styles (t1-t4)
-    t1: {
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    t2: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    t2m: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '20px',
-    },
-    t3: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '18px',
-    },
-    t3m: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '18px',
-    },
-    t4: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '16px',
-    },
-    t4m: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '16px',
-    },
-    // Markdown/prose styles (m1-m3)
-    m1: {
-        fontSize: '18px',
-        lineHeight: '32px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '22px',
-    },
-    m2: {
-        fontSize: '16px',
-        lineHeight: '28px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    m3: {
-        fontSize: '14px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    // Paragraph styles (p1-p4)
-    p1: {
-        fontSize: '18px',
-        lineHeight: '28px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '22px',
-    },
-    p2: {
-        fontSize: '16px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    p3: {
-        fontSize: '14px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '18px',
-    },
-    p4: {
-        fontSize: '12px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '16px',
-    },
-    // Caption/uppercase styles (c1-c2)
-    c1: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        textTransform: 'uppercase',
-        iconSize: '18px',
-    },
-    c2: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        textTransform: 'uppercase',
-        iconSize: '16px',
-    },
-    // Tag typography
-    tag: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '16px',
-    },
-    // Inline semantic styles
-    strong: {
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        letterSpacing: 'inherit',
-        fontFamily: 'inherit',
-        fontStyle: 'inherit',
-        fontWeight: 'var(--bold-font-weight, var(--default-bold-font-weight, 600))',
-    },
-    em: {
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        letterSpacing: 'inherit',
-        fontFamily: 'inherit',
-        fontStyle: 'italic',
-        fontWeight: 'inherit',
-    },
-    // Default text style (references t3)
-    default: {
-        fontSize: 'var(--t3-font-size)',
-        lineHeight: 'var(--t3-line-height)',
-        letterSpacing: 'var(--t3-letter-spacing)',
-        fontWeight: 'var(--t3-font-weight)',
-        boldFontWeight: '600',
-        iconSize: 'inherit',
-    },
-};
-
-        

package/types/tasty/chunks/cacheKey.d.ts

@@ -1,26 +0,0 @@
-/**
- * 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 { Styles } from '../styles/types';
-/**
- * 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 declare function generateChunkCacheKey(styles: Styles, chunkName: string, styleKeys: string[]): string;