@cube-dev/ui-kit 0.0.0-canary-4777472 → 0.0.0-canary-b26ec55

package/types/tasty/plugins/okhsl-plugin.d.ts

@@ -0,0 +1,45 @@
+/**
+ * OKHSL Plugin for Tasty
+ *
+ * Converts OKHSL color syntax to RGB notation.
+ * Supports angle units: deg, turn, rad, or unitless (degrees).
+ *
+ * Examples:
+ *   okhsl(240.5 50% 50%)
+ *   okhsl(240.5deg 50% 50%)
+ *   okhsl(0.25turn 50% 50%)
+ *   okhsl(1.57rad 50% 50%)
+ *
+ * Conversion math inlined from @texel/color to avoid external dependencies.
+ */
+import type { StyleDetails } from '../parser/types';
+import type { TastyPluginFactory } from './types';
+/**
+ * The okhsl function handler for tasty parser.
+ * Receives parsed style groups and returns an RGB color string.
+ */
+declare const okhslFunc: (groups: StyleDetails[]) => string;
+/**
+ * OKHSL Plugin for Tasty.
+ *
+ * Adds support for the `okhsl()` color function in tasty styles.
+ *
+ * @example
+ * ```ts
+ * import { configure } from '@cube-dev/ui-kit';
+ * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
+ *
+ * configure({
+ *   plugins: [okhslPlugin()],
+ * });
+ *
+ * // Now you can use okhsl in styles:
+ * const Box = tasty({
+ *   styles: {
+ *     fill: 'okhsl(240 50% 50%)',
+ *   },
+ * });
+ * ```
+ */
+export declare const okhslPlugin: TastyPluginFactory;
+export { okhslFunc };

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

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

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

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

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

@@ -0,0 +1,44 @@
+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/styles/fill.d.ts

@@ -1,6 +1,16 @@
 export declare function fillStyle({ fill }: {
     fill: any;
-}): any[] | "";
+}): "" | {
+    'background-color': any;
+};
 export declare namespace fillStyle {
     var __lookupStyles: string[];
 }
+export declare function svgFillStyle({ svgFill }: {
+    svgFill: any;
+}): "" | {
+    fill: any;
+};
+export declare namespace svgFillStyle {
+    var __lookupStyles: string[];
+}

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

@@ -7,7 +7,9 @@ export declare function marginStyle({ margin, marginBlock, marginInline, marginT
     marginBottom?: string | number | boolean;
     marginLeft?: string | number | boolean;
 }): {
-    [key: string]: string;
+    margin?: undefined;
+} | {
+    margin: string;
 };
 export declare namespace marginStyle {
     var __lookupStyles: string[];

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

@@ -7,7 +7,9 @@ export declare function paddingStyle({ padding, paddingBlock, paddingInline, pad
     paddingBottom?: string | number | boolean;
     paddingLeft?: string | number | boolean;
 }): {
-    [key: string]: string;
+    padding?: undefined;
+} | {
+    padding: string;
 };
 export declare namespace paddingStyle {
     var __lookupStyles: string[];

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { ResponsiveStyleValue } from '../utils/styles';
+import { StyleValue, StyleValueStateMap } from '../utils/styles';
 type NamedColor = 'purple' | 'purple-text' | 'purple-icon' | 'purple-bg' | 'purple-01' | 'purple-02' | 'purple-03' | 'purple-04' | 'dark' | 'dark-01' | 'dark-02' | 'dark-03' | 'dark-04' | 'dark-05' | 'dark-bg' | 'text' | 'primary' | 'disabled' | 'disabled-bg' | 'disabled-text' | 'danger' | 'danger-bg' | 'danger-text' | 'danger-icon' | 'success' | 'success-bg' | 'success-text' | 'success-icon' | 'note' | 'note-bg' | 'note-text' | 'note-icon' | 'white' | 'light' | 'light-grey' | 'black' | 'pink' | 'pink-01' | 'pink-02' | 'border' | 'clear' | 'shadow' | 'draft' | 'minor';
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
@@ -27,6 +27,16 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * - `fill={true}` // default fill color
      */
     fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
+    /**
+     * Set the fill color of SVG elements. Outputs the native CSS `fill` property with enhanced support for Tasty color tokens and syntaxes.
+     *
+     * Examples:
+     * - `svgFill="#purple.10"` // purple fill with 10% opacity
+     * - `svgFill="#danger"` // danger theme color
+     * - `svgFill="rgb(255 128 0)"` // custom RGB color
+     * - `svgFill="currentColor"` // inherit from parent color
+     */
+    svgFill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | (string & {});
     /**
      * Set the text (current) color of the element. Shortcut for `color` with enhanced support for Tasty color tokens and syntaxes.
      *
@@ -354,10 +364,10 @@ export type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' |
 export type Selector = `${SuffixForSelector}${string}`;
 export type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
 export type StylesWithoutSelectors = {
-    [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;
+    [key in keyof StylesInterface]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]>;
 };
 export type Styles = StylesWithoutSelectors & {
-    [key: string]: ResponsiveStyleValue<string | number | boolean | undefined> | Styles;
+    [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles;
     /**
      * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
      * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.