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

package/types/tasty/plugins/types.d.ts

@@ -1,34 +0,0 @@
-import type { StyleDetails, UnitHandler } from '../parser/types';
-/**
- * A tasty plugin that extends the style system with custom functions, units, or states.
- */
-export interface TastyPlugin {
-    /** Unique name for the plugin (used for debugging and conflict detection) */
-    name: string;
-    /** Custom functions that transform parsed style groups into CSS values */
-    funcs?: Record<string, (groups: StyleDetails[]) => string>;
-    /** Custom units that transform numeric values (e.g., `2x` → `calc(2 * var(--gap))`) */
-    units?: Record<string, string | UnitHandler>;
-    /** Custom state aliases (e.g., `'@mobile': '@media(w < 768px)'`) */
-    states?: Record<string, string>;
-}
-/**
- * A factory function that creates a TastyPlugin.
- * Can optionally accept configuration options.
- *
- * @example
- * ```ts
- * // Plugin without options
- * const okhslPlugin: TastyPluginFactory = () => ({
- *   name: 'okhsl',
- *   funcs: { okhsl: okhslFunc },
- * });
- *
- * // Plugin with options
- * const debugPlugin: TastyPluginFactory<{ verbose: boolean }> = (options) => ({
- *   name: 'debug',
- *   funcs: { debug: createDebugFunc(options.verbose) },
- * });
- * ```
- */
-export type TastyPluginFactory<TOptions = void> = TOptions extends void ? () => TastyPlugin : (options: TOptions) => TastyPlugin;

package/types/tasty/states/index.d.ts

@@ -1,101 +0,0 @@
-/**
- * Advanced State Mapping - Predefined States Management
- *
- * This module handles global and local predefined states for the Tasty styling system.
- * See ADVANCED_STATE_MAPPING.md for full specification.
- */
-import { Styles } from '../styles/types';
-/**
- * Parsed advanced state information
- */
-export interface ParsedAdvancedState {
-    type: 'media' | 'container' | 'root' | 'own' | 'starting' | 'predefined' | 'modifier';
-    condition: string;
-    containerName?: string;
-    raw: string;
-    mediaType?: string;
-}
-/**
- * Context for state parsing operations
- */
-export interface StateParserContext {
-    localPredefinedStates: Record<string, string>;
-    globalPredefinedStates: Record<string, string>;
-    isSubElement?: boolean;
-}
-/**
- * At-rule context for CSS generation
- */
-export interface AtRuleContext {
-    media?: string[];
-    container?: {
-        name?: string;
-        condition: string;
-    }[];
-    startingStyle?: boolean;
-    rootStates?: string[];
-    negatedRootStates?: string[];
-}
-/**
- * Configure global predefined states
- */
-export declare function setGlobalPredefinedStates(states: Record<string, string>): void;
-/**
- * Get global predefined states
- */
-export declare function getGlobalPredefinedStates(): Record<string, string>;
-/**
- * Clear global predefined states (for testing only)
- */
-export declare function clearGlobalPredefinedStates(): void;
-/**
- * Extract predefined state references from a string
- */
-export declare function extractPredefinedStateRefs(value: string): string[];
-/**
- * Check if a state key is a predefined state reference
- */
-export declare function isPredefinedStateRef(stateKey: string): boolean;
-/**
- * Extract local predefined states from a styles object
- * Local predefined states are top-level keys starting with @ that have string values
- * and are valid predefined state names (not built-in like @media, @root, etc.)
- */
-export declare function extractLocalPredefinedStates(styles: Styles): Record<string, string>;
-/**
- * Create a state parser context from styles
- */
-export declare function createStateParserContext(styles?: Styles, isSubElement?: boolean): StateParserContext;
-/**
- * Resolve a predefined state reference to its value
- * Returns the resolved value or null if not found
- */
-export declare function resolvePredefinedState(stateKey: string, ctx: StateParserContext): string | null;
-/**
- * Normalize state key by trimming whitespace and removing trailing/leading operators
- */
-export declare function normalizeStateKey(stateKey: string): {
-    key: string;
-    warnings: string[];
-};
-/**
- * Expand dimension shorthands in a condition string
- * w -> width, h -> height, is -> inline-size, bs -> block-size
- */
-export declare function expandDimensionShorthands(condition: string): string;
-/**
- * Convert tasty units in a string (e.g., 40x -> calc(var(--gap) * 40))
- */
-export declare function expandTastyUnits(value: string): string;
-/**
- * Parse an advanced state key and return its type and components
- */
-export declare function parseAdvancedState(stateKey: string, ctx: StateParserContext): ParsedAdvancedState;
-/**
- * Check if a state key is an advanced state (starts with @)
- */
-export declare function isAdvancedState(stateKey: string): boolean;
-/**
- * Detect the type of advanced state from a raw state key
- */
-export declare function detectAdvancedStateType(stateKey: string): ParsedAdvancedState['type'];

package/types/tasty/static/index.d.ts

@@ -1,39 +0,0 @@
-/**
- * Build-time only module for zero-runtime static site generation.
- *
- * Usage:
- * ```typescript
- * import { tastyStatic } from '@cube-dev/ui-kit/tasty/static';
- *
- * // Returns StaticStyle object (className + styles + toString)
- * const button = tastyStatic({
- *   fill: '#blue',
- *   padding: '2x',
- * });
- *
- * // Extend existing styles
- * const primaryButton = tastyStatic(button, {
- *   fill: '#purple',
- * });
- *
- * // Global styles (removed at build time)
- * tastyStatic('.heading', { preset: 'h1' });
- *
- * // Usage in JSX
- * <div className={button} />           // toString() coercion
- * <div className={button.className} /> // Explicit
- * ```
- *
- * Requires the Babel plugin to be configured:
- * ```javascript
- * // babel.config.js
- * plugins: [
- *   ['@cube-dev/ui-kit/tasty/zero/babel', { output: 'public/tasty.css' }]
- * ]
- * ```
- */
-export { tastyStatic } from './tastyStatic';
-export { createStaticStyle, isStaticStyle } from './types';
-export type { StaticStyle } from './types';
-export type { Styles } from '../styles/types';
-export { mergeStyles } from '../utils/mergeStyles';

package/types/tasty/static/tastyStatic.d.ts

@@ -1,41 +0,0 @@
-import { Styles } from '../styles/types';
-import { StaticStyle } from './types';
-/**
- * Generate styles and return a StaticStyle object.
- * The object has `className`, `styles`, and `toString()`.
- *
- * @example
- * ```typescript
- * const button = tastyStatic({
- *   fill: '#blue',
- *   padding: '2x',
- * });
- * // After build: { className: 'ts3f2a1b', styles: {...}, toString() }
- *
- * <div className={button} />  // Works via toString()
- * ```
- */
-export declare function tastyStatic(styles: Styles): StaticStyle;
-/**
- * Extend an existing StaticStyle with additional styles.
- * Uses mergeStyles() internally for proper nested selector handling.
- *
- * @example
- * ```typescript
- * const button = tastyStatic({ fill: '#blue' });
- * const primary = tastyStatic(button, { fill: '#purple' });
- * // After build: { className: 'ts8c4d2e', styles: {...merged...}, toString() }
- * ```
- */
-export declare function tastyStatic(base: StaticStyle, styles: Styles): StaticStyle;
-/**
- * Generate styles for a specific CSS selector.
- * The call is completely removed after build transformation.
- *
- * @example
- * ```typescript
- * tastyStatic('.heading', { preset: 'h1', color: '#primary' });
- * // After build: (removed)
- * ```
- */
-export declare function tastyStatic(selector: string, styles: Styles): void;

package/types/tasty/static/types.d.ts

@@ -1,44 +0,0 @@
-import { Styles } from '../styles/types';
-/**
- * Static style definition returned by tastyStatic().
- *
- * Supports both explicit className access and implicit string coercion via toString().
- *
- * @example
- * ```typescript
- * const button = tastyStatic({ fill: '#blue' });
- *
- * // Both work in JSX:
- * <div className={button} />           // Uses toString()
- * <div className={button.className} /> // Explicit
- *
- * // Extension:
- * const primary = tastyStatic(button, { fill: '#purple' });
- * ```
- */
-export interface StaticStyle {
-    /**
-     * Generated className(s) for use in JSX.
-     * May contain multiple space-separated class names due to chunking.
-     */
-    className: string;
-    /**
-     * The original (or merged) styles object.
-     * Available for extension via tastyStatic(base, overrides).
-     */
-    styles: Styles;
-    /**
-     * Returns className for implicit string coercion.
-     * Enables `<div className={button} />` syntax.
-     */
-    toString(): string;
-}
-/**
- * Create a StaticStyle object.
- * Used internally by the Babel plugin to generate output.
- */
-export declare function createStaticStyle(className: string, styles: Styles): StaticStyle;
-/**
- * Type guard to check if a value is a StaticStyle object.
- */
-export declare function isStaticStyle(value: unknown): value is StaticStyle;

package/types/tasty/utils/typography.d.ts

@@ -1,32 +0,0 @@
-import { TypographyPreset } from '../../tokens/typography';
-import type { Styles } from '../styles/types';
-export type { TypographyPreset };
-/**
- * Generate typography tokens with $ prefix for CSS custom properties.
- *
- * Each preset generates the following CSS custom properties:
- * - `${name}-font-size`
- * - `${name}-line-height`
- * - `${name}-letter-spacing`
- * - `${name}-font-weight`
- * - `${name}-bold-font-weight` (if defined)
- * - `${name}-icon-size` (if defined)
- * - `${name}-text-transform` (if defined)
- * - `${name}-font-family` (if defined)
- * - `${name}-font-style` (if defined)
- *
- * @param presets - Typography presets object (defaults to TYPOGRAPHY_PRESETS)
- * @returns Styles object with $ prefixed keys
- *
- * @example
- * // Using default presets
- * const tokens = generateTypographyTokens();
- * // tokens['$h1-font-size'] === '36px'
- *
- * @example
- * // Using custom presets
- * const customTokens = generateTypographyTokens({
- *   myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' }
- * });
- */
-export declare function generateTypographyTokens(presets?: Record<string, TypographyPreset>): Styles;

package/types/tasty/zero/babel.d.ts

@@ -1,63 +0,0 @@
-/**
- * Babel plugin for zero-runtime tasty static site generation.
- *
- * Transforms:
- * - `tastyStatic(styles)` → StaticStyle object { className, styles, toString() }
- * - `tastyStatic(base, styles)` → StaticStyle object with merged styles
- * - `tastyStatic(selector, styles)` → removed entirely
- *
- * Usage:
- * ```javascript
- * // babel.config.js
- * module.exports = {
- *   plugins: [
- *     ['@cube-dev/ui-kit/tasty/zero/babel', { output: 'public/tasty.css' }]
- *   ]
- * };
- * ```
- */
-import type { PluginPass } from '@babel/core';
-import type { KeyframesSteps } from '../injector/types';
-import type { StyleDetails, UnitHandler } from '../parser/types';
-/**
- * Build-time configuration for zero-runtime mode.
- * Subset of TastyConfig that applies at build time.
- */
-export interface TastyZeroConfig {
-    /**
-     * Global predefined states for advanced state mapping.
-     * Example: { '@mobile': '@media(w < 768px)', '@dark': '@root(theme=dark)' }
-     */
-    states?: Record<string, string>;
-    /**
-     * Enable development mode features: source comments in generated CSS.
-     * Default: false
-     */
-    devMode?: boolean;
-    /**
-     * Custom units for the style parser (merged with built-in units).
-     * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
-     * @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
-     */
-    units?: Record<string, string | UnitHandler>;
-    /**
-     * Custom functions for the style parser (merged with existing).
-     * Functions process parsed style groups and return CSS values.
-     * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
-     */
-    funcs?: Record<string, (groups: StyleDetails[]) => string>;
-    /**
-     * Global keyframes definitions for static extraction.
-     * Keys are animation names, values are keyframes step definitions.
-     * @example { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }
-     */
-    keyframes?: Record<string, KeyframesSteps>;
-}
-export interface TastyZeroBabelOptions {
-    /** Output path for generated CSS (default: 'tasty.css') */
-    output?: string;
-    /** Tasty configuration for build-time processing */
-    config?: TastyZeroConfig;
-}
-declare const _default: (api: object, options: TastyZeroBabelOptions | null | undefined, dirname: string) => import("@babel/core").PluginObj<PluginPass>;
-export default _default;

package/types/tasty/zero/css-writer.d.ts

@@ -1,41 +0,0 @@
-export interface CSSWriterOptions {
-    /** Enable source comments in output (e.g., "from: Button.tsx") */
-    devMode?: boolean;
-}
-export declare class CSSWriter {
-    private cssBlocks;
-    private outputPath;
-    private devMode;
-    constructor(outputPath: string, options?: CSSWriterOptions);
-    /**
-     * Add CSS block with deduplication key
-     * @param key - Unique key for deduplication
-     * @param css - CSS content
-     * @param source - Optional source file path (used in devMode)
-     */
-    add(key: string, css: string, source?: string): void;
-    /**
-     * Check if a key already exists
-     */
-    has(key: string): boolean;
-    /**
-     * Get the number of CSS blocks
-     */
-    get size(): number;
-    /**
-     * Write all collected CSS to the output file
-     */
-    write(): void;
-    /**
-     * Get all CSS as string (for testing or in-memory use)
-     */
-    getCSS(): string;
-    /**
-     * Clear all collected CSS
-     */
-    clear(): void;
-    /**
-     * Get the output path
-     */
-    getOutputPath(): string;
-}

package/types/tasty/zero/extractor.d.ts

@@ -1,19 +0,0 @@
-import { Styles } from '../styles/types';
-export interface ExtractedChunk {
-    className: string;
-    css: string;
-}
-export interface ExtractedSelector {
-    selector: string;
-    css: string;
-}
-/**
- * Extract styles using chunking (for className mode).
- * Returns multiple classes, one per chunk.
- */
-export declare function extractStylesWithChunks(styles: Styles): ExtractedChunk[];
-/**
- * Extract styles for a specific selector (for global/selector mode).
- * Returns a single CSS block.
- */
-export declare function extractStylesForSelector(selector: string, styles: Styles): ExtractedSelector;

package/types/tasty/zero/index.d.ts

@@ -1,18 +0,0 @@
-/**
- * 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();
- * ```
- */
-export { extractStylesWithChunks, extractStylesForSelector } from './extractor';
-export type { ExtractedChunk, ExtractedSelector } from './extractor';
-export { CSSWriter } from './css-writer';

package/types/tasty/zero/next.d.ts

@@ -1,57 +0,0 @@
-/**
- * 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
- * });
- * ```
- */
-interface WebpackConfigContext {
-    isServer: boolean;
-    dev: boolean;
-    buildId: string;
-    dir: string;
-}
-interface NextConfig {
-    webpack?: (config: any, context: WebpackConfigContext) => any;
-    [key: string]: unknown;
-}
-export interface TastyZeroNextOptions {
-    /**
-     * Output path for CSS relative to project root.
-     * @default 'public/tasty.css'
-     */
-    output?: string;
-    /**
-     * Whether to enable the plugin.
-     * @default true
-     */
-    enabled?: boolean;
-}
-/**
- * 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 declare function withTastyZero(options?: TastyZeroNextOptions): (nextConfig?: NextConfig) => NextConfig;
-export {};

package/types/tokens/base.d.ts

@@ -1,8 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * Base design system tokens.
- * These define the fundamental units and values used throughout the system.
- *
- * Keys use $ prefix for CSS custom properties.
- */
-export declare const BASE_TOKENS: Styles;

package/types/tokens/colors.d.ts

@@ -1,6 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * Color tokens with # prefix for tasty color definitions.
- * The tasty system automatically generates {name}-color-rgb variants.
- */
-export declare const COLOR_TOKENS: Styles;

package/types/tokens/index.d.ts

@@ -1,41 +0,0 @@
-/**
- * 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 type { Styles } from '../tasty/styles/types';
-/**
- * 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 declare const TOKENS: Styles;
-export { COLOR_TOKENS } from './colors';
-export { SIZES, SIZE_NAME_TO_KEY, SIZE_TOKENS } from './sizes';
-export type { SizeKey, SizeName } 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';
-export type { TypographyPreset } from './typography';

package/types/tokens/layout.d.ts

@@ -1,7 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * Layout-related tokens for common UI dimensions.
- *
- * Keys use $ prefix for CSS custom properties.
- */
-export declare const LAYOUT_TOKENS: Styles;

package/types/tokens/shadows.d.ts

@@ -1,12 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * 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 declare const SHADOW_TOKENS: Styles;

package/types/tokens/sizes.d.ts

@@ -1,25 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * Component size values in pixels.
- * Used for buttons, inputs, and other interactive elements.
- */
-export declare const SIZES: {
-    readonly XS: 24;
-    readonly SM: 28;
-    readonly MD: 32;
-    readonly LG: 40;
-    readonly XL: 48;
-};
-export type SizeKey = keyof typeof SIZES;
-/** Human-readable size names */
-export type SizeName = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-/**
- * Map from size names to size keys.
- * @example SIZE_NAME_TO_KEY['small'] // 'SM'
- */
-export declare const SIZE_NAME_TO_KEY: Record<SizeName, SizeKey>;
-/**
- * Size tokens with $ prefix for CSS custom properties.
- * Creates tokens like `$size-xs`, `$size-sm`, etc.
- */
-export declare const SIZE_TOKENS: Styles;

package/types/tokens/spacing.d.ts

@@ -1,8 +0,0 @@
-import type { Styles } from '../tasty/styles/types';
-/**
- * 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 declare const SPACE_TOKENS: Styles;

package/types/tokens/typography.d.ts

@@ -1,30 +0,0 @@
-/**
- * Typography preset configuration.
- * Each preset defines font properties that get expanded into CSS custom properties.
- */
-export interface TypographyPreset {
-    fontSize: string;
-    lineHeight: string;
-    letterSpacing?: string;
-    fontWeight: string | number;
-    boldFontWeight?: string | number;
-    iconSize?: string;
-    textTransform?: string;
-    fontFamily?: string;
-    fontStyle?: string;
-}
-/**
- * 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 declare const TYPOGRAPHY_PRESETS: Record<string, TypographyPreset>;