@cube-dev/ui-kit 0.0.0-canary-76be278 → 0.0.0-canary-7e4ec9d

package/types/index.d.ts

@@ -136,4 +136,3 @@ export * from './components/overlays/Toasts';
 export * from './shared';
 export * from './icons';
 export * from './components/form';
-export * from './tokens';

package/types/provider.d.ts

@@ -2,6 +2,7 @@ import { ForwardedRef, PropsWithChildren, ReactElement } from 'react';
 import { NavigationAdapter } from './providers/navigation.types';
 import { Props } from './tasty';
 export interface ProviderProps extends Props {
+    breakpoints?: number[];
     insideForm?: boolean;
     isDisabled?: boolean;
     isReadOnly?: boolean;
@@ -11,7 +12,7 @@ export interface ProviderProps extends Props {
     ref?: ReactElement;
     root?: ForwardedRef<any>;
 }
-export type ProviderInsideProps = Omit<ProviderProps, 'styles'>;
+export type ProviderInsideProps = Omit<ProviderProps, 'styles' | 'breakpoints'>;
 export declare const UIKitContext: import("react").Context<ProviderInsideProps>;
 export declare function Provider(allProps: PropsWithChildren<ProviderProps>): import("react/jsx-runtime").JSX.Element;
 export declare function useProviderProps<T extends ProviderProps = Props>(props: T): T;

package/types/stories/components/StyledButton.d.ts

@@ -3,5 +3,5 @@ export declare const StyledButton: import("react").ComponentType<{
     [x: number]: any;
     [x: symbol]: any;
 } & {}>;
-export declare function GlobalStyledHeading(): null;
+export declare const GlobalStyledHeading: any;
 export declare function Block(): import("react/jsx-runtime").JSX.Element;

package/types/tasty/debug.d.ts

@@ -7,14 +7,9 @@ interface CssOptions {
     prettify?: boolean;
     log?: boolean;
 }
-interface ChunkInfo {
-    className: string;
-    chunkName: string | null;
-}
 interface InspectResult {
     element?: Element | null;
     classes: string[];
-    chunks: ChunkInfo[];
     css: string;
     size: number;
     rules: number;
@@ -109,14 +104,6 @@ interface Summary {
             rulesDeleted: number;
         };
     };
-    chunkBreakdown: {
-        byChunk: Record<string, {
-            classes: string[];
-            cssSize: number;
-            ruleCount: number;
-        }>;
-        totalChunkTypes: number;
-    };
 }
 /**
  * Concise tastyDebug API for inspecting styles at runtime
@@ -139,28 +126,6 @@ export declare const tastyDebug: {
     resetMetrics(opts?: {
         root?: Document | ShadowRoot;
     }): void;
-    /**
-     * Get breakdown of styles by chunk type.
-     *
-     * With style chunking enabled, styles are split into logical chunks
-     * (appearance, font, dimension, container, etc.) for better caching
-     * and CSS reuse.
-     *
-     * @param opts - Options including root document/shadow root
-     * @returns Breakdown by chunk type with class counts and CSS sizes
-     */
-    chunks(opts?: {
-        root?: Document | ShadowRoot;
-        log?: boolean;
-    }): {
-        byChunk: Record<string, {
-            classes: string[];
-            cssSize: number;
-            ruleCount: number;
-        }>;
-        totalChunkTypes: number;
-        totalClasses: number;
-    };
     getGlobalTypeCSS(type: "global" | "raw" | "keyframes" | "property", opts?: {
         root?: Document | ShadowRoot;
     }): {

package/types/tasty/index.d.ts

@@ -1,29 +1,19 @@
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
-export type { UseStylesOptions, UseStylesResult } from './hooks';
-export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, } from './config';
-export type { TastyConfig } from './config';
-export { okhslPlugin, okhslFunc } from './plugins';
-export type { TastyPlugin, TastyPluginFactory } from './plugins';
-export { CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys } from './chunks';
-export type { ChunkName, ChunkInfo } from './chunks';
-export { getGlobalPredefinedStates, setGlobalPredefinedStates } from './states';
-export type { StateParserContext, ParsedAdvancedState, AtRuleContext, } from './states';
 export * from './utils/filterBaseProps';
 export * from './utils/colors';
 export * from './utils/styles';
 export * from './utils/modAttrs';
-export { renderStyles, isSelector } from './pipeline';
-export type { StyleResult, RenderResult } from './pipeline';
+export * from './utils/responsive';
+export * from './utils/renderStyles';
 export * from './utils/dotize';
 export * from './styles/list';
+export * from './providers/BreakpointsProvider';
 export * from './utils/mergeStyles';
 export * from './utils/warnings';
 export * from './utils/getDisplayName';
 export * from './utils/processTokens';
-export * from './utils/typography';
 export * from './injector';
 export * from './debug';
-export type { TastyProps, TastyElementOptions, TastyElementProps, AllBasePropsWithMods, SubElementDefinition, ElementsDefinition, SubElementProps, } from './tasty';
+export type { TastyProps, TastyElementOptions, TastyElementProps, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
 export type { AllBaseProps, BaseProps, BaseStyleProps, DimensionStyleProps, ColorStyleProps, OuterStyleProps, PositionStyleProps, TextStyleProps, BlockStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, ContainerStyleProps, BasePropsWithoutChildren, Props, FlowStyleProps, ShortGridStyles, GlobalStyledProps, TagName, Mods, ModValue, Tokens, TokenValue, } from './types';
 export type { StylesInterface, Styles, StylesWithoutSelectors, NoType, Selector, SuffixForSelector, NotSelector, } from './styles/types';

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

@@ -1,6 +1,16 @@
-import { StyleResult } from '../pipeline';
+import { StyleResult } from '../utils/renderStyles';
 import { StyleInjector } from './injector';
 import { GlobalInjectResult, InjectResult, StyleInjectorConfig } from './types';
+declare const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
+declare global {
+    interface Window {
+        [GLOBAL_INJECTOR_KEY]?: StyleInjector;
+    }
+}
+/**
+ * Configure the global style injector
+ */
+export declare function configure(config?: Partial<StyleInjectorConfig>): void;
 /**
  * Allocate a className for a cacheKey without injecting styles yet
  */
@@ -23,34 +33,6 @@ export declare function inject(rules: StyleResult[], options?: {
 export declare function injectGlobal(rules: StyleResult[], options?: {
     root?: Document | ShadowRoot;
 }): GlobalInjectResult;
-/**
- * Inject raw CSS text directly without parsing
- * This is a low-overhead method for injecting raw CSS that doesn't need tasty processing.
- * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking.
- *
- * @example
- * ```tsx
- * // Inject raw CSS
- * const { dispose } = injectRawCSS(`
- *   body { margin: 0; padding: 0; }
- *   .my-class { color: red; }
- * `);
- *
- * // Later, remove the injected CSS
- * dispose();
- * ```
- */
-export declare function injectRawCSS(css: string, options?: {
-    root?: Document | ShadowRoot;
-}): {
-    dispose: () => void;
-};
-/**
- * Get raw CSS text for SSR
- */
-export declare function getRawCSSText(options?: {
-    root?: Document | ShadowRoot;
-}): string;
 /**
  * Inject keyframes and return object with toString() and dispose()
  */
@@ -93,6 +75,13 @@ export declare function destroy(root?: Document | ShadowRoot): void;
  * Create a new isolated injector instance
  */
 export declare function createInjector(config?: Partial<StyleInjectorConfig>): StyleInjector;
-export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, } from './types';
+/**
+ * Create a global style component like styled-components createGlobalStyle
+ * Returns a React component that injects global styles when mounted and cleans up when unmounted
+ */
+export declare function createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): import('react').ComponentType<Props & {
+    root?: Document | ShadowRoot;
+}>;
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, } from './types';
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';

package/types/tasty/injector/injector.d.ts

@@ -2,8 +2,9 @@
  * Style injector that works with structured style objects
  * Eliminates CSS string parsing for better performance
  */
-import { StyleResult } from '../pipeline';
-import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, RawCSSResult, StyleInjectorConfig } from './types';
+import { StyleResult } from '../utils/renderStyles';
+import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, StyleInjectorConfig } from './types';
+import type { ComponentType } from 'react';
 export declare class StyleInjector {
     private sheetManager;
     private config;
@@ -36,19 +37,11 @@ export declare class StyleInjector {
         root?: Document | ShadowRoot;
     }): GlobalInjectResult;
     /**
-     * Inject raw CSS text directly without parsing
-     * This is a low-overhead alternative to createGlobalStyle for raw CSS
-     * The CSS is inserted into a separate style element to avoid conflicts with tasty's chunking
+     * Inject styles from createGlobalStyle (separate from injectGlobal for tracking)
      */
-    injectRawCSS(css: string, options?: {
+    injectCreateGlobalStyle(rules: StyleResult[], options?: {
         root?: Document | ShadowRoot;
-    }): RawCSSResult;
-    /**
-     * Get raw CSS text for SSR
-     */
-    getRawCSSText(options?: {
-        root?: Document | ShadowRoot;
-    }): string;
+    }): GlobalInjectResult;
     /**
      * Dispose of a className
      */
@@ -114,4 +107,11 @@ export declare class StyleInjector {
      * Destroy all resources for a root
      */
     destroy(root?: Document | ShadowRoot): void;
+    /**
+     * Create a global style component like styled-components createGlobalStyle
+     * Returns a React component that injects global styles when mounted and cleans up when unmounted
+     */
+    createGlobalStyle<Props = {}>(strings: TemplateStringsArray, ...interpolations: Array<string | number | ((props: Props) => string | number)>): ComponentType<Props & {
+        root?: Document | ShadowRoot;
+    }>;
 }

package/types/tasty/injector/sheet-manager.d.ts

@@ -1,13 +1,7 @@
-import { CacheMetrics, KeyframesInfo, KeyframesSteps, RawCSSResult, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
+import { CacheMetrics, KeyframesInfo, KeyframesSteps, RootRegistry, RuleInfo, SheetInfo, StyleInjectorConfig, StyleRule } from './types';
 export declare class SheetManager {
     private rootRegistries;
     private config;
-    /** Dedicated style elements for raw CSS per root */
-    private rawStyleElements;
-    /** Tracking for raw CSS blocks per root */
-    private rawCSSBlocks;
-    /** Counter for generating unique raw CSS IDs */
-    private rawCSSCounter;
     constructor(config: StyleInjectorConfig);
     /**
      * Get or create registry for a root (Document or ShadowRoot)
@@ -101,22 +95,4 @@ export declare class SheetManager {
      * Clean up resources for a root
      */
     cleanup(root: Document | ShadowRoot): void;
-    /**
-     * Get or create a dedicated style element for raw CSS
-     * Raw CSS is kept separate from tasty-managed sheets to avoid index conflicts
-     */
-    private getOrCreateRawStyleElement;
-    /**
-     * Inject raw CSS text directly without parsing
-     * Returns a dispose function to remove the injected CSS
-     */
-    injectRawCSS(css: string, root: Document | ShadowRoot): RawCSSResult;
-    /**
-     * Remove a raw CSS block by ID
-     */
-    private disposeRawCSS;
-    /**
-     * Get the raw CSS content for SSR
-     */
-    getRawCSSText(root: Document | ShadowRoot): string;
 }

package/types/tasty/injector/types.d.ts

@@ -26,12 +26,6 @@ export interface StyleInjectorConfig {
      * 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>;
 }
 export interface RuleInfo {
     className: string;
@@ -91,7 +85,7 @@ export interface RootRegistry {
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
-export type StyleRule = import('../pipeline').StyleResult;
+export type StyleRule = import('../utils/renderStyles').StyleResult;
 export interface KeyframesInfo {
     name: string;
     sheetIndex: number;
@@ -110,16 +104,3 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
-export interface RawCSSInfo {
-    /** Unique identifier for this raw CSS block */
-    id: string;
-    /** The raw CSS text */
-    css: string;
-    /** Start offset in the style element's textContent */
-    startOffset: number;
-    /** End offset in the style element's textContent */
-    endOffset: number;
-}
-export interface RawCSSResult {
-    dispose: () => void;
-}

package/types/tasty/parser/parser.d.ts

@@ -7,9 +7,5 @@ export declare class StyleParser {
     setFuncs(funcs: Required<ParserOptions>['funcs']): void;
     setUnits(units: Required<ParserOptions>['units']): void;
     updateOptions(patch: Partial<ParserOptions>): void;
-    /**
-     * Get the current units configuration.
-     */
-    getUnits(): ParserOptions['units'];
 }
 export type { StyleDetails, ProcessedStyle } from './types';

package/types/tasty/parser/types.d.ts

@@ -4,7 +4,6 @@ export declare enum Bucket {
     Mod = 2
 }
 export interface StyleDetails {
-    input: string;
     output: string;
     mods: string[];
     values: string[];

package/types/tasty/providers/BreakpointsProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare const BreakpointsContext: import("react").Context<number[]>;
+interface BreakpointsProviderProps {
+    value: number[];
+    children: ReactNode;
+}
+export declare function BreakpointsProvider({ value, children, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,16 +1,6 @@
 export declare function fillStyle({ fill }: {
     fill: any;
-}): "" | {
-    'background-color': any;
-};
+}): 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,9 +7,7 @@ export declare function marginStyle({ margin, marginBlock, marginInline, marginT
     marginBottom?: string | number | boolean;
     marginLeft?: string | number | boolean;
 }): {
-    margin?: undefined;
-} | {
-    margin: string;
+    [key: string]: string;
 };
 export declare namespace marginStyle {
     var __lookupStyles: string[];

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

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

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { StyleValue, StyleValueStateMap } from '../utils/styles';
+import { ResponsiveStyleValue } 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,16 +27,6 @@ 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.
      *
@@ -364,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]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]>;
+    [key in keyof StylesInterface]?: ResponsiveStyleValue<StylesInterface[key]>;
 };
 export type Styles = StylesWithoutSelectors & {
-    [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles;
+    [key: string]: ResponsiveStyleValue<string | number | boolean | undefined> | Styles;
     /**
      * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
      * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.