@cube-dev/ui-kit 0.98.8 → 0.99.0

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

@@ -1,10 +1,16 @@
+import { StyleParser } from '../parser/parser';
 import { Styles } from '../styles/types';
 import type { ProcessedStyle, StyleDetails } from '../parser/types';
+import type { AtRuleContext, ParsedAdvancedState } from '../states';
 export type StyleValue<T = string> = T | boolean | number | null | undefined;
 export type StyleValueStateMap<T = string> = {
     [key: string]: StyleValue<T>;
 };
-export type ResponsiveStyleValue<T = string> = StyleValue<T> | StyleValue<T>[] | StyleValueStateMap<T> | StyleValueStateMap<T>[];
+/**
+ * Combined type for style values that can be either a direct value or a state map.
+ * Use this for component props that accept style values.
+ */
+export type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;
 export type ComputeModel = string | number;
 export type CSSMap = {
     $?: string | string[];
@@ -19,11 +25,19 @@ export type StyleHandler = RawStyleHandler & {
 export interface StyleStateData {
     model?: ComputeModel;
     tokens?: string[];
-    value: ResponsiveStyleValue;
+    value: StyleValue | StyleValueStateMap;
     /** The list of mods to apply */
     mods: string[];
     /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
     notMods: string[];
+    /** Advanced states (media queries, container queries, etc.) */
+    advancedStates?: ParsedAdvancedState[];
+    /** At-rule context for CSS generation */
+    atRuleContext?: AtRuleContext;
+    /** Own mods for sub-element states (from @own()) - applied to sub-element selector */
+    ownMods?: string[];
+    /** Negated own mods for sub-element states */
+    negatedOwnMods?: string[];
 }
 export interface ParsedColor {
     color?: string;
@@ -35,7 +49,7 @@ export type StyleStateDataListMap = {
     [key: string]: StyleStateDataList;
 };
 export type StyleMap = {
-    [key: string]: ResponsiveStyleValue;
+    [key: string]: StyleValue | StyleValueStateMap;
 };
 export type StyleStateMap = {
     [key: string]: StyleStateData;
@@ -51,12 +65,21 @@ export declare const CUSTOM_UNITS: {
     rp: string;
     gp: string;
     sf: (num: any) => string;
-    dvh: (num: any) => string;
     sp: (num: any) => string;
 };
 export declare const DIRECTIONS: string[];
 export declare function getModSelector(modName: string): string;
 export declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
+/**
+ * Get the global StyleParser instance.
+ * Used by configure() to apply parser configuration.
+ */
+export declare function getGlobalParser(): StyleParser;
+/**
+ * Get the current custom functions registry.
+ * Used by configure() to merge with new functions.
+ */
+export declare function getGlobalFuncs(): Record<string, (groups: StyleDetails[]) => string>;
 /**
  *
  * @param {String} value
@@ -70,7 +93,18 @@ export declare function parseStyle(value: StyleValue): ProcessedStyle;
  */
 export declare function parseColor(val: string, ignoreError?: boolean): ParsedColor;
 export declare function strToRgb(color: any, ignoreAlpha?: boolean): any;
-export declare function getRgbValuesFromRgbaString(str: any): any;
+/**
+ * Extract RGB values from an rgb()/rgba() string.
+ * Supports all modern CSS syntax variations:
+ * - Comma-separated: rgb(255, 128, 0)
+ * - Space-separated: rgb(255 128 0)
+ * - Fractional: rgb(128.5, 64.3, 32.1)
+ * - Percentages: rgb(50%, 25%, 75%)
+ * - Slash alpha notation: rgb(255 128 0 / 0.5)
+ *
+ * Returns array of RGB values (0-255 range), converting percentages as needed.
+ */
+export declare function getRgbValuesFromRgbaString(str: string): number[];
 export declare function hexToRgb(hex: any): string | null;
 export declare function filterMods(mods: any, allowedMods: any): any;
 export declare function extendStyles(defaultStyles: any, newStyles: any): {};
@@ -87,6 +121,10 @@ export declare function extractStyles(props: {
 }, styleList?: readonly string[], defaultStyles?: Styles, propMap?: {
     [key: string]: string;
 }, ignoreList?: readonly string[]): Styles;
+/**
+ * Check if a token is an advanced state (starts with @)
+ */
+export declare function isAdvancedStateToken(token: string): boolean;
 export declare const STATE_OPERATORS: {
     NOT: string;
     AND: string;
@@ -99,12 +137,18 @@ export declare const STATE_OPERATOR_LIST: string[];
  */
 declare function parseStateNotationInner(notation: string, value: any): StyleStateData;
 export declare const parseStateNotation: typeof parseStateNotationInner;
+/**
+ * Build an AtRuleContext from parsed advanced states
+ */
+export declare function buildAtRuleContext(advancedStates: ParsedAdvancedState[], negatedStates: Set<string>): AtRuleContext | undefined;
 /**
  * Parse state notation and return tokens, modifiers and compute model.
+ * Enhanced to detect and extract advanced states.
  */
-export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleStateMap | ResponsiveStyleValue): {
+export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleStateMap | StyleValue | StyleValueStateMap, parserContext?: import('../states').StateParserContext): {
     states: StyleStateDataList;
     mods: string[];
+    hasAdvancedStates: boolean;
 };
 export declare const COMPUTE_FUNC_MAP: {
     '!': (a: any) => boolean;

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,63 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,40 @@
+import { KeyframesSteps } from '../injector/types';
+import { Styles } from '../styles/types';
+export interface ExtractedChunk {
+    className: string;
+    css: string;
+}
+export interface ExtractedSelector {
+    selector: string;
+    css: string;
+}
+export interface ExtractedKeyframes {
+    name: string;
+    css: string;
+}
+export interface KeyframesExtractionResult {
+    /** Keyframes to inject (deduplicated by content) */
+    keyframes: ExtractedKeyframes[];
+    /** Map from original animation name to canonical name (for replacement) */
+    nameMap: Map<string, 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;
+/**
+ * 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 declare function extractKeyframesFromStyles(styles: Styles, globalKeyframes?: Record<string, KeyframesSteps> | null): KeyframesExtractionResult;

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

@@ -0,0 +1,18 @@
+/**
+ * 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

@@ -0,0 +1,57 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,30 @@
+/**
+ * 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>;