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

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

@@ -1,50 +0,0 @@
-type UseRawCSSOptions = {
-    root?: Document | ShadowRoot;
-};
-/**
- * Hook to inject raw CSS text directly without parsing.
- * This is a low-overhead alternative for injecting global CSS that doesn't need tasty processing.
- *
- * The CSS is inserted into a separate style element (data-tasty-raw) to avoid conflicts
- * with tasty's chunked style sheets.
- *
- * @example Static CSS string
- * ```tsx
- * function GlobalStyles() {
- *   useRawCSS(`
- *     body {
- *       margin: 0;
- *       padding: 0;
- *       font-family: sans-serif;
- *     }
- *   `);
- *
- *   return null;
- * }
- * ```
- *
- * @example Factory function with dependencies (like useMemo)
- * ```tsx
- * function ThemeStyles({ theme }: { theme: 'light' | 'dark' }) {
- *   useRawCSS(() => `
- *     :root {
- *       --bg-color: ${theme === 'dark' ? '#1a1a1a' : '#ffffff'};
- *       --text-color: ${theme === 'dark' ? '#ffffff' : '#1a1a1a'};
- *     }
- *   `, [theme]);
- *
- *   return null;
- * }
- * ```
- *
- * @example With options
- * ```tsx
- * function ShadowStyles({ shadowRoot }) {
- *   useRawCSS(() => `.scoped { color: red; }`, [], { root: shadowRoot });
- *   return null;
- * }
- * ```
- */
-export declare function useRawCSS(css: string, options?: UseRawCSSOptions): void;
-export declare function useRawCSS(factory: () => string, deps: readonly unknown[], options?: UseRawCSSOptions): void;
-export {};

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

@@ -1,35 +0,0 @@
-import { Styles } from '../styles/types';
-/**
- * Tasty styles object to generate CSS classes for.
- * Can be undefined or empty object for no styles.
- */
-export type UseStylesOptions = Styles | undefined;
-export interface UseStylesResult {
-    /**
-     * Generated className(s) to apply to the element.
-     * Can be empty string if no styles are provided.
-     * With chunking enabled, may contain multiple space-separated class names.
-     */
-    className: string;
-}
-/**
- * Hook to generate CSS classes from Tasty styles.
- * Handles style rendering, className allocation, and CSS injection.
- *
- * Uses chunking to split styles into logical groups for better caching
- * and CSS reuse across components.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { className } = useStyles({
- *     padding: '2x',
- *     fill: '#purple',
- *     radius: '1r',
- *   });
- *
- *   return <div className={className}>Styled content</div>;
- * }
- * ```
- */
-export declare function useStyles(styles: UseStylesOptions): UseStylesResult;

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

@@ -1,49 +0,0 @@
-/**
- * Keyframes Utilities
- *
- * Optimized utilities for extracting and processing keyframes in styles.
- * Designed for zero overhead when no keyframes are used.
- */
-import { KeyframesSteps } from '../injector/types';
-import { Styles } from '../styles/types';
-/**
- * Check if styles object has local @keyframes definition.
- * Fast path: single property lookup.
- */
-export declare function hasLocalKeyframes(styles: Styles): boolean;
-/**
- * Extract local @keyframes from styles object.
- * Returns null if no local keyframes (fast path).
- */
-export declare function extractLocalKeyframes(styles: Styles): Record<string, KeyframesSteps> | null;
-/**
- * Merge local and global keyframes.
- * Local keyframes take priority over global.
- * Returns null if no keyframes exist (fast path).
- */
-export declare function mergeKeyframes(local: Record<string, KeyframesSteps> | null, global: Record<string, KeyframesSteps> | null): Record<string, KeyframesSteps> | null;
-/**
- * Get merged keyframes for styles (local + global).
- * Returns null if no keyframes defined anywhere (fast path).
- */
-export declare function getKeyframesForStyles(styles: Styles): Record<string, KeyframesSteps> | null;
-/**
- * Extract all animation names referenced in styles.
- * Scans 'animation' and 'animationName' properties including in state mappings.
- * Returns empty set if no animation properties found (fast path).
- */
-export declare function extractAnimationNamesFromStyles(styles: Styles): Set<string>;
-/**
- * Replace animation names in CSS declarations with injected names.
- * Optimized to avoid regex creation - uses simple string replacement.
- *
- * @param declarations CSS declarations string
- * @param nameMap Map from original name to injected name (only contains names that differ)
- * @returns Updated declarations string
- */
-export declare function replaceAnimationNames(declarations: string, nameMap: Map<string, string>): string;
-/**
- * Filter keyframes to only those that are actually used.
- * Returns null if no keyframes are used (fast path).
- */
-export declare function filterUsedKeyframes(keyframes: Record<string, KeyframesSteps> | null, usedNames: Set<string>): Record<string, KeyframesSteps> | null;

package/types/tasty/pipeline/conditions.d.ts

@@ -1,243 +0,0 @@
-/**
- * ConditionNode Types and Helpers
- *
- * Core data structures for representing style conditions as an abstract syntax tree.
- * Used throughout the pipeline for parsing, simplification, and CSS generation.
- */
-/**
- * Base interface for all state conditions (leaf nodes)
- */
-interface BaseStateCondition {
-    kind: 'state';
-    negated: boolean;
-    raw: string;
-    uniqueId: string;
-}
-/**
- * Modifier condition: [data-attr] or [data-attr="value"]
- */
-export interface ModifierCondition extends BaseStateCondition {
-    type: 'modifier';
-    attribute: string;
-    value?: string;
-    operator?: '=' | '^=' | '$=' | '*=';
-}
-/**
- * Pseudo-class condition: :hover, :focus-visible
- */
-export interface PseudoCondition extends BaseStateCondition {
-    type: 'pseudo';
-    pseudo: string;
-}
-/**
- * Numeric bound for dimension queries
- */
-export interface NumericBound {
-    value: string;
-    valueNumeric: number | null;
-    inclusive: boolean;
-}
-/**
- * Media query condition
- */
-export interface MediaCondition extends BaseStateCondition {
-    type: 'media';
-    subtype: 'dimension' | 'feature' | 'type';
-    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    feature?: string;
-    featureValue?: string;
-    mediaType?: 'print' | 'screen' | 'all' | 'speech';
-}
-/**
- * Container query condition
- */
-export interface ContainerCondition extends BaseStateCondition {
-    type: 'container';
-    subtype: 'dimension' | 'style';
-    containerName?: string;
-    dimension?: 'width' | 'height' | 'inline-size' | 'block-size';
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    property?: string;
-    propertyValue?: string;
-}
-/**
- * Root state condition: @root(theme=dark)
- */
-export interface RootCondition extends BaseStateCondition {
-    type: 'root';
-    selector: string;
-}
-/**
- * Own state condition: @own(hovered)
- */
-export interface OwnCondition extends BaseStateCondition {
-    type: 'own';
-    innerCondition: ConditionNode;
-}
-/**
- * Starting style condition: @starting
- */
-export interface StartingCondition extends BaseStateCondition {
-    type: 'starting';
-}
-/**
- * Supports query condition: @supports(display: grid), @supports($, :has(*))
- */
-export interface SupportsCondition extends BaseStateCondition {
-    type: 'supports';
-    subtype: 'feature' | 'selector';
-    condition: string;
-}
-/**
- * Union of all state condition types
- */
-export type StateCondition = ModifierCondition | PseudoCondition | MediaCondition | ContainerCondition | RootCondition | OwnCondition | StartingCondition | SupportsCondition;
-/**
- * Compound node: combines conditions with AND/OR
- */
-export interface CompoundCondition {
-    kind: 'compound';
-    operator: 'AND' | 'OR';
-    children: ConditionNode[];
-}
-/**
- * True condition (matches everything)
- */
-export interface TrueCondition {
-    kind: 'true';
-}
-/**
- * False condition (matches nothing - skip this rule)
- */
-export interface FalseCondition {
-    kind: 'false';
-}
-/**
- * Union of all condition node types
- */
-export type ConditionNode = StateCondition | CompoundCondition | TrueCondition | FalseCondition;
-/**
- * Create a TRUE condition (matches everything)
- */
-export declare function trueCondition(): TrueCondition;
-/**
- * Create a FALSE condition (matches nothing)
- */
-export declare function falseCondition(): FalseCondition;
-/**
- * Create an AND compound condition
- */
-export declare function and(...children: ConditionNode[]): ConditionNode;
-/**
- * Create an OR compound condition
- */
-export declare function or(...children: ConditionNode[]): ConditionNode;
-/**
- * Negate a condition
- */
-export declare function not(node: ConditionNode): ConditionNode;
-/**
- * Check if a condition is a compound condition
- */
-export declare function isCompoundCondition(node: ConditionNode): node is CompoundCondition;
-/**
- * Generate a normalized unique ID for a modifier condition
- */
-export declare function modifierUniqueId(attribute: string, value?: string, operator?: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a pseudo condition
- */
-export declare function pseudoUniqueId(pseudo: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a media condition
- */
-export declare function mediaUniqueId(subtype: 'dimension' | 'feature' | 'type', props: {
-    dimension?: string;
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    feature?: string;
-    featureValue?: string;
-    mediaType?: string;
-}, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a container condition
- */
-export declare function containerUniqueId(subtype: 'dimension' | 'style', props: {
-    containerName?: string;
-    dimension?: string;
-    lowerBound?: NumericBound;
-    upperBound?: NumericBound;
-    property?: string;
-    propertyValue?: string;
-}, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a root condition
- */
-export declare function rootUniqueId(selector: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for an own condition
- */
-export declare function ownUniqueId(innerUniqueId: string, negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a starting condition
- */
-export declare function startingUniqueId(negated?: boolean): string;
-/**
- * Generate a normalized unique ID for a supports condition
- */
-export declare function supportsUniqueId(subtype: 'feature' | 'selector', condition: string, negated?: boolean): string;
-/**
- * Create a modifier condition
- */
-export declare function createModifierCondition(attribute: string, value?: string, operator?: '=' | '^=' | '$=' | '*=', negated?: boolean, raw?: string): ModifierCondition;
-/**
- * Create a pseudo condition
- */
-export declare function createPseudoCondition(pseudo: string, negated?: boolean, raw?: string): PseudoCondition;
-/**
- * Create a media dimension condition
- */
-export declare function createMediaDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a media feature condition
- */
-export declare function createMediaFeatureCondition(feature: string, featureValue?: string, negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a media type condition
- */
-export declare function createMediaTypeCondition(mediaType: 'print' | 'screen' | 'all' | 'speech', negated?: boolean, raw?: string): MediaCondition;
-/**
- * Create a container dimension condition
- */
-export declare function createContainerDimensionCondition(dimension: 'width' | 'height' | 'inline-size' | 'block-size', lowerBound?: NumericBound, upperBound?: NumericBound, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
-/**
- * Create a container style condition
- */
-export declare function createContainerStyleCondition(property: string, propertyValue?: string, containerName?: string, negated?: boolean, raw?: string): ContainerCondition;
-/**
- * Create a root condition
- */
-export declare function createRootCondition(selector: string, negated?: boolean, raw?: string): RootCondition;
-/**
- * Create an own condition
- */
-export declare function createOwnCondition(innerCondition: ConditionNode, negated?: boolean, raw?: string): OwnCondition;
-/**
- * Create a starting condition
- */
-export declare function createStartingCondition(negated?: boolean, raw?: string): StartingCondition;
-/**
- * Create a supports condition
- *
- * @param subtype 'feature' for @supports(display: grid), 'selector' for @supports($, :has(*))
- * @param condition The condition string (e.g., "display: grid" or ":has(*)")
- */
-export declare function createSupportsCondition(subtype: 'feature' | 'selector', condition: string, negated?: boolean, raw?: string): SupportsCondition;
-/**
- * Get the unique ID for any condition node
- */
-export declare function getConditionUniqueId(node: ConditionNode): string;
-export {};

package/types/tasty/pipeline/exclusive.d.ts

@@ -1,103 +0,0 @@
-/**
- * Exclusive Condition Builder
- *
- * Transforms parsed style entries into exclusive conditions.
- * Each entry's condition is ANDed with the negation of all higher-priority conditions,
- * ensuring exactly one condition matches at any given time.
- */
-import { StyleValue } from '../utils/styles';
-import { ConditionNode } from './conditions';
-/**
- * Parsed style entry with condition
- */
-export interface ParsedStyleEntry {
-    styleKey: string;
-    stateKey: string;
-    value: StyleValue;
-    condition: ConditionNode;
-    priority: number;
-}
-/**
- * Style entry with exclusive condition
- */
-export interface ExclusiveStyleEntry extends ParsedStyleEntry {
-    exclusiveCondition: ConditionNode;
-}
-/**
- * Build exclusive conditions for a list of parsed style entries.
- *
- * The entries should be ordered by priority (highest priority first).
- *
- * For each entry, we compute:
- *   exclusiveCondition = condition & !prior[0] & !prior[1] & ...
- *
- * This ensures exactly one condition matches at any time.
- *
- * Example:
- *   Input (ordered highest to lowest priority):
- *     A: value1 (priority 2)
- *     B: value2 (priority 1)
- *     C: value3 (priority 0)
- *
- *   Output:
- *     A: A
- *     B: B & !A
- *     C: C & !A & !B
- *
- * @param entries Parsed style entries ordered by priority (highest first)
- * @returns Entries with exclusive conditions, filtered to remove impossible ones
- */
-export declare function buildExclusiveConditions(entries: ParsedStyleEntry[]): ExclusiveStyleEntry[];
-/**
- * Parse style entries from a value mapping object.
- *
- * @param styleKey The style key (e.g., 'padding')
- * @param valueMap The value mapping { '': '2x', 'compact': '1x', '@media(w < 768px)': '0.5x' }
- * @param parseCondition Function to parse state keys into conditions
- * @returns Parsed entries ordered by priority (highest first)
- */
-export declare function parseStyleEntries(styleKey: string, valueMap: Record<string, StyleValue>, parseCondition: (stateKey: string) => ConditionNode): ParsedStyleEntry[];
-/**
- * Check if a value is a style value mapping (object with state keys)
- */
-export declare function isValueMapping(value: StyleValue | Record<string, StyleValue>): value is Record<string, StyleValue>;
-/**
- * Expand OR conditions in parsed entries into multiple exclusive entries.
- *
- * For an entry with condition `A | B | C`, this creates 3 entries:
- *   - condition: A
- *   - condition: B & !A
- *   - condition: C & !A & !B
- *
- * This ensures OR branches are mutually exclusive BEFORE the main
- * exclusive condition building pass.
- *
- * @param entries Parsed entries (may contain OR conditions)
- * @returns Expanded entries with OR branches made exclusive
- */
-export declare function expandOrConditions(entries: ParsedStyleEntry[]): ParsedStyleEntry[];
-/**
- * Expand OR conditions in exclusive entries AFTER buildExclusiveConditions.
- *
- * This handles ORs that arise from De Morgan expansion during negation:
- *   !(A & B) = !A | !B
- *
- * These ORs need to be made exclusive to avoid overlapping CSS rules:
- *   !A | !B  →  !A | (A & !B)
- *
- * This is logically equivalent but ensures each branch has proper context.
- *
- * Example:
- *   Input: { "": V1, "@supports(...) & :has()": V2 }
- *   V2's exclusive = @supports & :has
- *   V1's exclusive = !(@supports & :has) = !@supports | !:has
- *
- *   Without this fix: V1 gets two rules:
- *     - @supports (not ...) → V1  ✓
- *     - :not(:has()) → V1  ✗ (missing @supports context!)
- *
- *   With this fix: V1 gets two exclusive rules:
- *     - @supports (not ...) → V1  ✓
- *     - @supports (...) { :not(:has()) } → V1  ✓ (proper context!)
- */
-export declare function expandExclusiveOrs(entries: ExclusiveStyleEntry[]): ExclusiveStyleEntry[];

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

@@ -1,67 +0,0 @@
-/**
- * Tasty Style Rendering Pipeline
- *
- * This is the main entrypoint for the new pipeline implementation.
- * It implements the complete flow from style objects to CSS rules.
- *
- * Pipeline stages:
- * 1. PARSE CONDITIONS - Parse state keys into ConditionNode trees
- * 2. BUILD EXCLUSIVE CONDITIONS - AND with negation of higher-priority conditions
- * 3. SIMPLIFY CONDITIONS - Apply boolean algebra, detect contradictions
- * 4. GROUP BY HANDLER - Collect styles per handler, compute combinations
- * 5. COMPUTE CSS VALUES - Call handlers to get CSS declarations
- * 6. MERGE BY VALUE - Merge rules with identical CSS output
- * 7. MATERIALIZE CSS - Convert conditions to CSS selectors + at-rules
- */
-import { Styles } from '../styles/types';
-import { CSSRule } from './materialize';
-/**
- * Matches the old StyleResult interface for backward compatibility
- */
-export interface StyleResult {
-    selector: string;
-    declarations: string;
-    atRules?: string[];
-    needsClassName?: boolean;
-    rootPrefix?: string;
-}
-/**
- * Matches the old RenderResult interface for backward compatibility
- */
-export interface RenderResult {
-    rules: StyleResult[];
-    className?: string;
-}
-export interface PipelineResult {
-    rules: CSSRule[];
-    className?: string;
-}
-/**
- * Render styles using the new pipeline.
- *
- * This is the main entrypoint that implements the complete flow.
- */
-export declare function renderStylesPipeline(styles?: Styles, className?: string): PipelineResult;
-/**
- * Clear the pipeline cache (for testing)
- */
-export declare function clearPipelineCache(): void;
-/**
- * Check if a key is a CSS selector
- */
-export declare function isSelector(key: string): boolean;
-/**
- * Render styles to CSS rules.
- *
- * When called without classNameOrSelector, returns RenderResult with needsClassName=true.
- * When called with a selector/className string, returns StyleResult[] for direct injection.
- */
-export declare function renderStyles(styles?: Styles): RenderResult;
-export declare function renderStyles(styles: Styles | undefined, classNameOrSelector: string): StyleResult[];
-export type { ConditionNode } from './conditions';
-export { and, or, not, trueCondition, falseCondition } from './conditions';
-export { parseStateKey } from './parseStateKey';
-export { simplifyCondition } from './simplify';
-export { buildExclusiveConditions } from './exclusive';
-export { conditionToCSS } from './materialize';
-export type { CSSRule } from './materialize';