@cube-dev/ui-kit 0.98.9 → 0.99.0

package/types/components/status/Spin/Cube.d.ts

@@ -1,2 +1,2 @@
 import { SpinCubeProps } from './types';
-export declare const Cube: import("react").NamedExoticComponent<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, SpinCubeProps>, never>>;
+export declare const Cube: import("react").NamedExoticComponent<SpinCubeProps>;

package/types/components/status/Spin/SpinsContainer.d.ts

@@ -1,3 +1,6 @@
-export declare const SpinsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, {
-    $ownSize: number;
-}>, never>> & string;
+import { ReactNode } from 'react';
+export interface SpinsContainerProps {
+    ownSize: number;
+    children?: ReactNode;
+}
+export declare function SpinsContainer({ ownSize, children }: SpinsContainerProps): import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -62,8 +62,6 @@ export type { CubeResultProps, CubeResultStatus, } from './components/content/Re
 export { Layout, GridLayout } from './components/content/Layout';
 export type { CubeLayoutProps, CubeGridLayoutProps, CubeLayoutToolbarProps, CubeLayoutHeaderProps, CubeLayoutFooterProps, CubeLayoutContentProps, CubeLayoutPaneProps, CubeLayoutPanelProps, CubeLayoutPanelHeaderProps, ScrollbarType, } from './components/content/Layout';
 export * from './components/status';
-export { Base64Upload } from './components/other/Base64Upload/Base64Upload';
-export type { CubeBase64UploadProps } from './components/other/Base64Upload/Base64Upload';
 export { Card } from './components/content/Card/Card';
 export type { CubeCardProps } from './components/content/Card/Card';
 export * from './components/actions';
@@ -100,8 +98,6 @@ export type { CubeTooltipTriggerProps } from './components/overlays/Tooltip/Tool
 export { TooltipProvider } from './components/overlays/Tooltip/TooltipProvider';
 export type { CubeTooltipProviderProps } from './components/overlays/Tooltip/TooltipProvider';
 export * from './components/content/Alert';
-export { LegacyTabs } from './components/navigation/LegacyTabs/LegacyTabs';
-export type { CubeTabsProps } from './components/navigation/LegacyTabs/LegacyTabs';
 export { FileTabs } from './components/organisms/FileTabs/FileTabs';
 export type { CubeFileTabProps } from './components/organisms/FileTabs/FileTabs';
 export { StatsCard } from './components/organisms/StatsCard/StatsCard';
@@ -136,3 +132,4 @@ export * from './components/overlays/Toasts';
 export * from './shared';
 export * from './icons';
 export * from './components/form';
+export * from './tokens';

package/types/provider.d.ts

@@ -2,7 +2,6 @@ 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;
@@ -12,7 +11,7 @@ export interface ProviderProps extends Props {
     ref?: ReactElement;
     root?: ForwardedRef<any>;
 }
-export type ProviderInsideProps = Omit<ProviderProps, 'styles' | 'breakpoints'>;
+export type ProviderInsideProps = Omit<ProviderProps, 'styles'>;
 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 const GlobalStyledHeading: any;
+export declare function GlobalStyledHeading(): null;
 export declare function Block(): import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,171 @@
+/**
+ * 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/debug.d.ts

@@ -7,9 +7,14 @@ 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;
@@ -104,6 +109,14 @@ interface Summary {
             rulesDeleted: number;
         };
     };
+    chunkBreakdown: {
+        byChunk: Record<string, {
+            classes: string[];
+            cssSize: number;
+            ruleCount: number;
+        }>;
+        totalChunkTypes: number;
+    };
 }
 /**
  * Concise tastyDebug API for inspecting styles at runtime
@@ -126,6 +139,28 @@ 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/hooks/index.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+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/index.d.ts

@@ -1,19 +1,29 @@
 export { tasty, Element } from './tasty';
+export { useStyles, useGlobalStyles, useRawCSS } from './hooks';
+export type { UseStylesOptions, UseStylesResult } from './hooks';
+export { configure, getConfig, isConfigLocked, hasStylesGenerated, resetConfig, isTestEnvironment, hasGlobalKeyframes, getGlobalKeyframes, } 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 * from './utils/responsive';
-export * from './utils/renderStyles';
+export { renderStyles, isSelector } from './pipeline';
+export type { StyleResult, RenderResult } from './pipeline';
 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, GlobalTastyProps, AllBasePropsWithMods, } from './tasty';
+export type { TastyProps, TastyElementOptions, TastyElementProps, AllBasePropsWithMods, SubElementDefinition, ElementsDefinition, SubElementProps, } 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';