@cube-dev/ui-kit 0.0.0-canary-e9dc427 → 0.0.0-canary-5eba492

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/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';
@@ -354,10 +354,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.