@cube-dev/ui-kit 0.99.2 → 0.100.0

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

@@ -18,10 +18,17 @@ export type CSSMap = {
     [key: string]: string | string[];
 };
 export type StyleHandlerResult = CSSMap | CSSMap[] | void;
-export type RawStyleHandler = (value: StyleValueStateMap, suffix?: string) => StyleHandlerResult;
+export type RawStyleHandler = (value: StyleValueStateMap) => StyleHandlerResult;
 export type StyleHandler = RawStyleHandler & {
     __lookupStyles: string[];
 };
+/**
+ * Handler definition forms for configure() and plugins.
+ * - Function only: lookup styles inferred from key name
+ * - Single property tuple: ['styleName', handler]
+ * - Multi-property tuple: [['style1', 'style2'], handler]
+ */
+export type StyleHandlerDefinition = RawStyleHandler | [string, RawStyleHandler] | [string[], RawStyleHandler];
 export interface StyleStateData {
     model?: ComputeModel;
     tokens?: string[];
@@ -62,10 +69,7 @@ export declare const CUSTOM_UNITS: {
     x: string;
     fs: string;
     lh: string;
-    rp: string;
-    gp: string;
     sf: (num: any) => string;
-    sp: (num: any) => string;
 };
 export declare const DIRECTIONS: string[];
 export declare function getModSelector(modName: string): string;
@@ -80,6 +84,25 @@ export declare function getGlobalParser(): StyleParser;
  * Used by configure() to merge with new functions.
  */
 export declare function getGlobalFuncs(): Record<string, (groups: StyleDetails[]) => string>;
+/**
+ * Set global predefined tokens.
+ * Called from configure() after processing token values.
+ * Merges with existing tokens (new tokens override existing ones with same key).
+ * Keys are normalized to lowercase (parser lowercases input before classification).
+ * @internal
+ */
+export declare function setGlobalPredefinedTokens(tokens: Record<string, string>): void;
+/**
+ * Get the current global predefined tokens.
+ * Returns null if no tokens are configured.
+ */
+export declare function getGlobalPredefinedTokens(): Record<string, string> | null;
+/**
+ * Reset global predefined tokens.
+ * Used for testing.
+ * @internal
+ */
+export declare function resetGlobalPredefinedTokens(): void;
 /**
  *
  * @param {String} value

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

@@ -16,9 +16,11 @@
  * };
  * ```
  */
+import { StyleHandlerDefinition } from '../utils/styles';
 import type { PluginPass } from '@babel/core';
 import type { KeyframesSteps } from '../injector/types';
 import type { StyleDetails, UnitHandler } from '../parser/types';
+import type { TastyPlugin } from '../plugins/types';
 /**
  * Build-time configuration for zero-runtime mode.
  * Subset of TastyConfig that applies at build time.
@@ -34,6 +36,11 @@ export interface TastyZeroConfig {
      * Default: false
      */
     devMode?: boolean;
+    /**
+     * Parser LRU cache size (default: 1000).
+     * Larger values improve performance for builds with many unique style values.
+     */
+    parserCacheSize?: number;
     /**
      * Custom units for the style parser (merged with built-in units).
      * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
@@ -46,12 +53,52 @@ export interface TastyZeroConfig {
      * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
      */
     funcs?: Record<string, (groups: StyleDetails[]) => string>;
+    /**
+     * Plugins that extend tasty with custom functions, units, states, handlers, or tokens.
+     * Plugins are processed in order, with later plugins overriding earlier ones.
+     * @example
+     * ```ts
+     * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
+     *
+     * // babel.config.js
+     * module.exports = {
+     *   plugins: [
+     *     ['@cube-dev/ui-kit/tasty/zero/babel', {
+     *       config: { plugins: [okhslPlugin()] }
+     *     }]
+     *   ]
+     * };
+     * ```
+     */
+    plugins?: TastyPlugin[];
     /**
      * 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>;
+    /**
+     * Custom style handlers that transform style properties into CSS declarations.
+     * Handlers replace built-in handlers for the same style name.
+     * @example
+     * ```ts
+     * handlers: {
+     *   fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
+     *   elevation: ({ elevation }) => ({
+     *     'box-shadow': `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
+     *   }),
+     * }
+     * ```
+     */
+    handlers?: Record<string, StyleHandlerDefinition>;
+    /**
+     * Predefined tokens that are replaced during style parsing.
+     * Use `$name` for custom properties and `#name` for color tokens.
+     * @example { $spacing: '2x', '#accent': '#purple' }
+     */
+    tokens?: {
+        [key: `$${string}` | `#${string}`]: string | number;
+    };
 }
 export interface TastyZeroBabelOptions {
     /** Output path for generated CSS (default: 'tasty.css') */

package/es/tasty/styles/font.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.2
- * Released under the MIT license.
- */
-
-export function fontStyle({ font }) {
-    if (font == null || font === false)
-        return null;
-    const fontFamily = font === 'monospace'
-        ? 'var(--monospace-font)'
-        : font === true
-            ? 'var(--font)'
-            : `${font}, var(--font)`;
-    return {
-        'font-family': fontFamily,
-        '--font-family': fontFamily,
-    };
-}
-fontStyle.__lookupStyles = ['font'];
-
-        

package/es/tasty/styles/fontStyle.js

@@ -1,19 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.2
- * Released under the MIT license.
- */
-
-export function fontStyleStyle({ fontStyle }) {
-    if (fontStyle === true) {
-        fontStyle = 'italic';
-    }
-    if (fontStyle !== 'inherit') {
-        fontStyle = fontStyle ? 'italic' : 'normal';
-    }
-    return { 'font-style': fontStyle };
-}
-fontStyleStyle.__lookupStyles = ['fontStyle'];
-
-        

package/es/tasty/styles/groupRadius.js

@@ -1,61 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.99.2
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-const MAP = {
-    row: ['* 0 0 *', '0 * * 0'],
-    column: ['* * 0 0', '0 0 * *'],
-};
-export function groupRadiusAttr({ groupRadius, flow }) {
-    if (!groupRadius)
-        return '';
-    if (groupRadius === true)
-        groupRadius = '1r';
-    const processed = parseStyle(groupRadius);
-    const { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
-    flow = flow || 'row';
-    const reverse = mods.includes('reverse');
-    let value = values[0];
-    if (!value) {
-        if (mods.includes('round')) {
-            value = '9999rem';
-        }
-        else if (mods.includes('ellipse')) {
-            value = '50%';
-        }
-        else {
-            value = 'var(--radius)';
-        }
-    }
-    const startValue = MAP[flow][reverse ? 1 : 0].replace(/\*/g, value);
-    const endValue = MAP[flow][reverse ? 0 : 1].replace(/\*/g, value);
-    return [
-        {
-            $: '>:first-child:not(:last-child)',
-            'border-radius': startValue,
-            '--local-radius': startValue,
-        },
-        {
-            $: '>:last-child:not(:first-child)',
-            'border-radius': endValue,
-            '--local-radius': endValue,
-        },
-        {
-            $: '>:last-child:first-child',
-            'border-radius': value,
-            '--local-radius': value,
-        },
-        {
-            $: '>:not(:last-child):not(:first-child)',
-            'border-radius': '0',
-            '--local-radius': '0',
-        },
-    ];
-}
-groupRadiusAttr.__lookupStyles = ['groupRadius', 'flow'];
-
-        

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

@@ -1,9 +0,0 @@
-export declare function fontStyle({ font }: {
-    font: any;
-}): {
-    'font-family': string;
-    '--font-family': string;
-} | null;
-export declare namespace fontStyle {
-    var __lookupStyles: string[];
-}

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

@@ -1,8 +0,0 @@
-export declare function fontStyleStyle({ fontStyle }: {
-    fontStyle: any;
-}): {
-    'font-style': any;
-};
-export declare namespace fontStyleStyle {
-    var __lookupStyles: string[];
-}

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

@@ -1,11 +0,0 @@
-export declare function groupRadiusAttr({ groupRadius, flow }: {
-    groupRadius: any;
-    flow: any;
-}): "" | {
-    $: string;
-    'border-radius': any;
-    '--local-radius': any;
-}[];
-export declare namespace groupRadiusAttr {
-    var __lookupStyles: string[];
-}