@cube-dev/ui-kit 0.0.0-canary-8ca04ef → 0.0.0-canary-dae9b2f

package/es/tokens/typography.js

@@ -1,237 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8ca04ef
- * Released under the MIT license.
- */
-
-/**
- * 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 const TYPOGRAPHY_PRESETS = {
-    // Text (basic)
-    text: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '400',
-    },
-    // Headings (h1-h6)
-    h1: {
-        fontSize: '36px',
-        lineHeight: '44px',
-        letterSpacing: '-0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '40px',
-    },
-    h2: {
-        fontSize: '24px',
-        lineHeight: '32px',
-        letterSpacing: '0em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '28px',
-    },
-    h3: {
-        fontSize: '20px',
-        lineHeight: '28px',
-        letterSpacing: '0em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '24px',
-    },
-    h4: {
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '22px',
-    },
-    h5: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '20px',
-    },
-    h6: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '20px',
-    },
-    // Text styles (t1-t4)
-    t1: {
-        fontSize: '18px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    t2: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    t2m: {
-        fontSize: '16px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '20px',
-    },
-    t3: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '18px',
-    },
-    t3m: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '18px',
-    },
-    t4: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '16px',
-    },
-    t4m: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '16px',
-    },
-    // Markdown/prose styles (m1-m3)
-    m1: {
-        fontSize: '18px',
-        lineHeight: '32px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '22px',
-    },
-    m2: {
-        fontSize: '16px',
-        lineHeight: '28px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    m3: {
-        fontSize: '14px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    // Paragraph styles (p1-p4)
-    p1: {
-        fontSize: '18px',
-        lineHeight: '28px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '22px',
-    },
-    p2: {
-        fontSize: '16px',
-        lineHeight: '24px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '20px',
-    },
-    p3: {
-        fontSize: '14px',
-        lineHeight: '22px',
-        letterSpacing: '0',
-        fontWeight: '400',
-        iconSize: '18px',
-    },
-    p4: {
-        fontSize: '12px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '500',
-        iconSize: '16px',
-    },
-    // Caption/uppercase styles (c1-c2)
-    c1: {
-        fontSize: '14px',
-        lineHeight: '20px',
-        letterSpacing: '0',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        textTransform: 'uppercase',
-        iconSize: '18px',
-    },
-    c2: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        textTransform: 'uppercase',
-        iconSize: '16px',
-    },
-    // Tag typography
-    tag: {
-        fontSize: '12px',
-        lineHeight: '18px',
-        letterSpacing: '0.01em',
-        fontWeight: '600',
-        boldFontWeight: '700',
-        iconSize: '16px',
-    },
-    // Inline semantic styles
-    strong: {
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        letterSpacing: 'inherit',
-        fontFamily: 'inherit',
-        fontStyle: 'inherit',
-        fontWeight: 'var(--bold-font-weight, var(--default-bold-font-weight, 600))',
-    },
-    em: {
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        letterSpacing: 'inherit',
-        fontFamily: 'inherit',
-        fontStyle: 'italic',
-        fontWeight: 'inherit',
-    },
-    // Default text style (references t3)
-    default: {
-        fontSize: 'var(--t3-font-size)',
-        lineHeight: 'var(--t3-line-height)',
-        letterSpacing: 'var(--t3-letter-spacing)',
-        fontWeight: 'var(--t3-font-weight)',
-        boldFontWeight: '600',
-        iconSize: 'inherit',
-    },
-};
-
-        

package/types/stories/playground/PlaygroundEditor.d.ts

@@ -1,6 +0,0 @@
-import { Styles } from '../../tasty/styles/types';
-export interface PlaygroundEditorProps {
-    value: Styles;
-    onChange: (styles: Styles) => void;
-}
-export declare function PlaygroundEditor({ value, onChange }: PlaygroundEditorProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/PlaygroundLayout.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-export interface PlaygroundLayoutProps {
-    toolbar: ReactNode;
-    editor: ReactNode;
-    preview?: ReactNode;
-    output: ReactNode;
-}
-export declare function PlaygroundLayout({ toolbar, editor, preview, output, }: PlaygroundLayoutProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/PlaygroundOutput.d.ts

@@ -1,5 +0,0 @@
-import { Styles } from '../../tasty/styles/types';
-export interface PlaygroundOutputProps {
-    styles: Styles;
-}
-export declare function PlaygroundOutput({ styles }: PlaygroundOutputProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/PlaygroundPreview.d.ts

@@ -1,6 +0,0 @@
-import { Styles } from '../../tasty/styles/types';
-export interface PlaygroundPreviewProps {
-    component: 'card' | 'button' | 'scroll-progress';
-    styles: Styles;
-}
-export declare function PlaygroundPreview({ component, styles, }: PlaygroundPreviewProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/components/Button.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-import { Styles } from '../../../tasty/styles/types';
-export interface ButtonProps {
-    styles?: Styles;
-    children?: ReactNode;
-    isDisabled?: boolean;
-    onPress?: () => void;
-    /** Override internal mods (for forcing specific states in demos) */
-    mods?: Record<string, boolean>;
-}
-export declare function Button({ styles, children, isDisabled, onPress, mods: externalMods, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/components/Card.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-import { Styles } from '../../../tasty/styles/types';
-export interface CardProps {
-    styles?: Styles;
-    children?: ReactNode;
-}
-export declare function Card({ styles, children }: CardProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/components/ScrollProgress.d.ts

@@ -1,5 +0,0 @@
-import { Styles } from '../../../tasty/styles/types';
-export interface ScrollProgressProps {
-    styles?: Styles;
-}
-export declare function ScrollProgress({ styles }: ScrollProgressProps): import("react/jsx-runtime").JSX.Element;

package/types/stories/playground/examples.d.ts

@@ -1,7 +0,0 @@
-import { Styles } from '../../tasty/styles/types';
-export interface PlaygroundExample {
-    name: string;
-    component: 'card' | 'button' | 'raw' | 'scroll-progress';
-    styles: Styles;
-}
-export declare const PLAYGROUND_EXAMPLES: PlaygroundExample[];

package/types/tasty/chunks/cacheKey.d.ts

@@ -1,26 +0,0 @@
-/**
- * Chunk-specific cache key generation.
- *
- * Generates cache keys that only include styles relevant to a specific chunk,
- * enabling more granular caching and reuse.
- *
- * Enhanced to support predefined states:
- * - Global predefined states don't affect cache keys (constant across app)
- * - Local predefined states only affect cache keys if referenced in the chunk
- */
-import { Styles } from '../styles/types';
-/**
- * Generate a cache key for a specific chunk.
- *
- * Only includes the styles that belong to this chunk, allowing
- * chunks to be cached independently.
- *
- * Also includes relevant local predefined states that are referenced
- * by this chunk's styles.
- *
- * @param styles - The full styles object
- * @param chunkName - Name of the chunk
- * @param styleKeys - Keys of styles belonging to this chunk
- * @returns A stable cache key string
- */
-export declare function generateChunkCacheKey(styles: Styles, chunkName: string, styleKeys: string[]): string;

package/types/tasty/chunks/definitions.d.ts

@@ -1,75 +0,0 @@
-/**
- * Style chunk definitions for CSS chunking optimization.
- *
- * Styles are grouped into chunks based on:
- * 1. Handler dependencies - styles that share a handler MUST be in the same chunk
- * 2. Logical grouping - related styles grouped for better cache reuse
- *
- * See STYLE_CHUNKING_SPEC.md for detailed rationale.
- */
-/**
- * Appearance chunk - visual styling with independent handlers
- */
-export declare const APPEARANCE_CHUNK_STYLES: readonly ["fill", "color", "opacity", "border", "radius", "outline", "outlineOffset", "shadow", "fade"];
-/**
- * Font chunk - typography styles
- * ⚠️ presetStyle handler requires: preset, fontSize, lineHeight, letterSpacing,
- *    textTransform, fontWeight, fontStyle, font - all MUST stay together
- */
-export declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight", "fontStyle", "fontSize", "lineHeight", "letterSpacing", "textTransform", "fontFamily", "textAlign", "whiteSpace", "textDecoration", "textOverflow", "wordBreak", "wordWrap", "boldFontWeight"];
-/**
- * Dimension chunk - sizing and spacing
- * ⚠️ paddingStyle handler requires all padding variants together
- * ⚠️ marginStyle handler requires all margin variants together
- */
-export declare const DIMENSION_CHUNK_STYLES: readonly ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingBlock", "paddingInline", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginBlock", "marginInline", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "flexBasis", "flexGrow", "flexShrink", "flex"];
-/**
- * Container chunk - display, flow, and grid layout
- * ⚠️ FORCED TOGETHER by transitive handler dependencies:
- *    displayStyle(display,hide) + flowStyle(display,flow) +
- *    gapStyle(display,flow,gap) + groupRadiusAttr(groupRadius,flow)
- */
-export declare const CONTAINER_CHUNK_STYLES: readonly ["display", "hide", "flow", "gap", "groupRadius", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "place", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas", "gridAutoFlow", "gridAutoColumns", "gridAutoRows"];
-/**
- * Scrollbar chunk - scrollbar and overflow
- * ⚠️ scrollbarStyle handler requires scrollbar ↔ overflow together
- */
-export declare const SCROLLBAR_CHUNK_STYLES: readonly ["scrollbar", "overflow", "styledScrollbar"];
-/**
- * Position chunk - element positioning (all independent handlers)
- */
-export declare const POSITION_CHUNK_STYLES: readonly ["position", "inset", "top", "right", "bottom", "left", "zIndex", "gridArea", "gridColumn", "gridRow", "order", "placeSelf", "alignSelf", "justifySelf", "transform", "transition", "animation"];
-export declare const CHUNK_NAMES: {
-    /** Special chunk for styles that cannot be split (e.g., @starting-style) */
-    readonly COMBINED: "combined";
-    readonly SUBCOMPONENTS: "subcomponents";
-    readonly APPEARANCE: "appearance";
-    readonly FONT: "font";
-    readonly DIMENSION: "dimension";
-    readonly CONTAINER: "container";
-    readonly SCROLLBAR: "scrollbar";
-    readonly POSITION: "position";
-    readonly MISC: "misc";
-};
-export type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];
-/**
- * Pre-computed map for O(1) style-to-chunk lookup.
- * Built once at module load time.
- */
-export declare const STYLE_TO_CHUNK: Map<string, ChunkName>;
-export interface ChunkInfo {
-    /** Name of the chunk */
-    name: ChunkName | string;
-    /** Style keys belonging to this chunk */
-    styleKeys: string[];
-}
-/**
- * Categorize style keys into chunks.
- *
- * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
- * of the order of keys in the input styles object.
- *
- * @param styles - The styles object to categorize
- * @returns Map of chunk name to array of style keys in that chunk (in priority order)
- */
-export declare function categorizeStyleKeys(styles: Record<string, unknown>): Map<string, string[]>;

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

@@ -1,4 +0,0 @@
-export { APPEARANCE_CHUNK_STYLES, FONT_CHUNK_STYLES, DIMENSION_CHUNK_STYLES, CONTAINER_CHUNK_STYLES, SCROLLBAR_CHUNK_STYLES, POSITION_CHUNK_STYLES, CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys, } from './definitions';
-export type { ChunkName, ChunkInfo } from './definitions';
-export { generateChunkCacheKey } from './cacheKey';
-export { renderStylesForChunk } from './renderChunk';

package/types/tasty/chunks/renderChunk.d.ts

@@ -1,25 +0,0 @@
-/**
- * Chunk-specific style rendering.
- *
- * Renders styles for a specific chunk by filtering the styles object
- * to only include relevant keys before passing to renderStyles.
- */
-import { RenderResult } from '../pipeline';
-import { Styles } from '../styles/types';
-/**
- * Render styles for a specific chunk.
- *
- * Creates a filtered styles object containing only the keys for this chunk,
- * then delegates to the existing renderStyles function.
- *
- * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
- * are always included in the filtered styles, regardless of which chunk is
- * being rendered. This ensures that state references like '@mobile' in any
- * chunk can be properly resolved by the pipeline.
- *
- * @param styles - The full styles object
- * @param chunkName - Name of the chunk being rendered
- * @param styleKeys - Keys of styles belonging to this chunk
- * @returns RenderResult with rules for this chunk
- */
-export declare function renderStylesForChunk(styles: Styles, chunkName: string, styleKeys: string[]): RenderResult;

package/types/tasty/config.d.ts

@@ -1,171 +0,0 @@
-/**
- * Tasty Configuration Module
- *
- * Centralizes all tasty configuration, including:
- * - Style injector settings (nonce, cleanup thresholds, etc.)
- * - Global predefined states for advanced state mapping
- * - stylesGenerated flag that locks configuration after first style generation
- *
- * Configuration must be done BEFORE any styles are generated.
- * After the first `inject()` call, configuration is locked and attempts to
- * reconfigure will emit a warning and be ignored.
- */
-import type { KeyframesSteps } from './injector/types';
-import type { StyleDetails, UnitHandler } from './parser/types';
-import type { TastyPlugin } from './plugins/types';
-/**
- * Configuration options for the Tasty style system
- */
-export interface TastyConfig {
-    /** CSP nonce for style elements */
-    nonce?: string;
-    /** Maximum rules per stylesheet (default: 8192) */
-    maxRulesPerSheet?: number;
-    /** Threshold for bulk cleanup of unused styles (default: 500) */
-    unusedStylesThreshold?: number;
-    /** Delay before bulk cleanup in ms, ignored if idleCleanup is true (default: 5000) */
-    bulkCleanupDelay?: number;
-    /** Use requestIdleCallback for cleanup when available (default: true) */
-    idleCleanup?: boolean;
-    /** Force text injection mode, auto-detected in test environments (default: auto) */
-    forceTextInjection?: boolean;
-    /** Enable development mode features: performance metrics and debug info (default: auto) */
-    devMode?: boolean;
-    /**
-     * Ratio of unused styles to delete per bulk cleanup run (0..1).
-     * Defaults to 0.5 (oldest half) to reduce risk of removing styles
-     * that may be restored shortly after being marked unused.
-     */
-    bulkCleanupBatchRatio?: number;
-    /**
-     * Minimum age (in ms) a style must remain unused before eligible for deletion.
-     * Helps avoid races during rapid mount/unmount cycles. Default: 10000ms.
-     */
-    unusedStylesMinAgeMs?: number;
-    /**
-     * Global predefined states for advanced state mapping.
-     * These are state aliases that can be used in any component.
-     * Example: { '@mobile': '@media(w < 920px)', '@dark': '@root(theme=dark)' }
-     */
-    states?: Record<string, string>;
-    /**
-     * Parser LRU cache size (default: 1000).
-     * Larger values improve performance for apps 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))`.
-     * @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>;
-    /**
-     * Plugins that extend tasty with custom functions, units, or states.
-     * Plugins are processed in order, with later plugins overriding earlier ones.
-     * @example
-     * ```ts
-     * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
-     *
-     * configure({
-     *   plugins: [okhslPlugin()],
-     * });
-     * ```
-     */
-    plugins?: TastyPlugin[];
-    /**
-     * Global keyframes definitions that can be referenced by animation names in styles.
-     * Keys are animation names, values are keyframes step definitions.
-     * Keyframes are only injected when actually used in styles.
-     * @example
-     * ```ts
-     * configure({
-     *   keyframes: {
-     *     fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } },
-     *     pulse: { '0%, 100%': { transform: 'scale(1)' }, '50%': { transform: 'scale(1.05)' } },
-     *   },
-     * });
-     * ```
-     */
-    keyframes?: Record<string, KeyframesSteps>;
-}
-declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
-declare global {
-    interface Window {
-        [GLOBAL_INJECTOR_KEY]?: import('./injector/injector').StyleInjector;
-    }
-}
-/**
- * Detect if we're running in a test environment
- */
-export declare function isTestEnvironment(): boolean;
-/**
- * Mark that styles have been generated (called by injector on first inject)
- * This locks the configuration - no further changes allowed.
- */
-export declare function markStylesGenerated(): void;
-/**
- * Check if styles have been generated (configuration is locked)
- */
-export declare function hasStylesGenerated(): boolean;
-/**
- * Reset styles generated flag (for testing only)
- */
-export declare function resetStylesGenerated(): void;
-/**
- * Check if any global keyframes are configured.
- * Fast path: returns false if no keyframes were ever set.
- */
-export declare function hasGlobalKeyframes(): boolean;
-/**
- * Get global keyframes configuration.
- * Returns null if no keyframes configured (fast path for zero-overhead).
- */
-export declare function getGlobalKeyframes(): Record<string, KeyframesSteps> | null;
-/**
- * Check if configuration is locked (styles have been generated)
- */
-export declare function isConfigLocked(): boolean;
-/**
- * Configure the Tasty style system.
- *
- * Must be called BEFORE any styles are generated (before first render that uses tasty).
- * After styles are generated, configuration is locked and calls to configure() will
- * emit a warning and be ignored.
- *
- * @example
- * ```ts
- * import { configure } from '@cube-dev/ui-kit';
- *
- * // Configure before app renders
- * configure({
- *   nonce: 'abc123',
- *   states: {
- *     '@mobile': '@media(w < 768px)',
- *     '@dark': '@root(theme=dark)',
- *   },
- * });
- * ```
- */
-export declare function configure(config?: Partial<TastyConfig>): void;
-/**
- * Get the current configuration.
- * If not configured, returns default configuration.
- */
-export declare function getConfig(): TastyConfig;
-/**
- * Get the global injector instance.
- * Auto-configures with defaults if not already configured.
- */
-export declare function getGlobalInjector(): import('./injector/injector').StyleInjector;
-/**
- * Reset configuration (for testing only).
- * Clears the global injector and allows reconfiguration.
- */
-export declare function resetConfig(): void;
-export type { TastyConfig as StyleInjectorConfig };

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

@@ -1,4 +0,0 @@
-export { useStyles } from './useStyles';
-export type { UseStylesOptions, UseStylesResult } from './useStyles';
-export { useGlobalStyles } from './useGlobalStyles';
-export { useRawCSS } from './useRawCSS';

package/types/tasty/hooks/useGlobalStyles.d.ts

@@ -1,22 +0,0 @@
-import { Styles } from '../styles/types';
-/**
- * Hook to inject global styles for a given selector.
- * Useful for styling elements by selector without generating classNames.
- *
- * @param selector - CSS selector to apply styles to (e.g., '.my-class', ':root', 'body')
- * @param styles - Tasty styles object
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   useGlobalStyles('.card', {
- *     padding: '2x',
- *     radius: '1r',
- *     fill: '#white',
- *   });
- *
- *   return <div className="card">Content</div>;
- * }
- * ```
- */
-export declare function useGlobalStyles(selector: string, styles?: Styles): void;