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

package/types/components/navigation/LegacyTabs/LegacyTabs.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { Styles } from '../../../tasty';
+import { CubeButtonProps } from '../../actions';
+import { CubeFlexProps } from '../../layout/Flex';
+export interface CubeTabData {
+    id: string | number;
+    qa?: string;
+    title?: string;
+    isDisabled?: boolean;
+    isHidden?: boolean;
+}
+export interface LegacyCubeTabsContextValue {
+    addTab: (CubeTabData: any) => void;
+    setTab: (id: string | number) => void;
+    removeTab: (CubeTabData: any) => void;
+    changeTab: (CubeTabData: any) => void;
+    currentTab?: string | number;
+}
+export interface LegacyCubeTabProps extends Omit<CubeButtonProps, 'id'> {
+    id?: string | number;
+    title?: string;
+    isSelected?: boolean;
+    isHidden?: boolean;
+    onClose?: () => void;
+}
+export interface CubeTabsProps extends CubeFlexProps {
+    /** The initial active key in the tabs (uncontrolled). */
+    defaultActiveKey?: string;
+    /** The currently active key in the tabs (controlled). */
+    activeKey?: string | number;
+    /** Handler that is called when the tab is clicked. */
+    onTabClick?: (string: any) => void;
+    /** Handler that is called when the tab is closed. */
+    onTabClose?: (string: any) => void;
+    /** Styles for the each tab pane */
+    paneStyles?: Styles;
+    /** Additional content along the tabs */
+    extra?: ReactNode;
+}
+export declare function LegacyTabs({ defaultActiveKey, activeKey: activeKeyProp, onTabClick, onTabClose, paneStyles, extra, children, ...props }: CubeTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace LegacyTabs {
+    var TabPane: ({ id, title, qa, isHidden, isDisabled, children, ...props }: LegacyCubeTabProps) => import("react/jsx-runtime").JSX.Element;
+}

package/types/components/other/Base64Upload/Base64Upload.d.ts

@@ -0,0 +1,5 @@
+import { BaseProps, PositionStyleProps } from '../../../tasty';
+export interface CubeBase64UploadProps extends BaseProps, PositionStyleProps {
+    onInput?: (arg?: any) => void;
+}
+export declare const Base64Upload: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>, never>> & string & Omit<import("react").ForwardRefExoticComponent<CubeBase64UploadProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>, keyof import("react").Component<any, {}, any>>;

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

@@ -1,2 +1,2 @@
 import { SpinCubeProps } from './types';
-export declare const Cube: import("react").NamedExoticComponent<SpinCubeProps>;
+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>>;

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

@@ -1,6 +1,3 @@
-import { ReactNode } from 'react';
-export interface SpinsContainerProps {
-    ownSize: number;
-    children?: ReactNode;
-}
-export declare function SpinsContainer({ ownSize, children }: SpinsContainerProps): import("react/jsx-runtime").JSX.Element;
+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;

package/types/icons/add-new-icon.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/types/index.d.ts

@@ -62,6 +62,8 @@ 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';
@@ -98,6 +100,8 @@ 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';
@@ -132,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, 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 { 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
      */
@@ -101,12 +94,6 @@ export declare class StyleInjector {
     }): boolean;
     /**
      * Inject keyframes and return object with toString() and dispose()
-     *
-     * Keyframes are cached by content (steps). If the same content is injected
-     * multiple times with different provided names, the first injected name is reused.
-     *
-     * If the same name is provided with different content (collision), a unique
-     * name is generated to avoid overwriting the existing keyframes.
      */
     keyframes(steps: KeyframesSteps, nameOrOptions?: string | {
         root?: Document | ShadowRoot;
@@ -120,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;
@@ -82,10 +76,8 @@ export interface RootRegistry {
     metrics?: CacheMetrics;
     /** Counter for generating sequential class names like t0, t1, t2... */
     classCounter: number;
-    /** Keyframes cache by content hash -> entry */
+    /** Keyframes cache by JSON.stringify(steps) -> entry */
     keyframesCache: Map<string, KeyframesCacheEntry>;
-    /** Keyframes name to content hash mapping for collision detection */
-    keyframesNameToContent: Map<string, string>;
     /** Counter for generating keyframes names like k0, k1, k2... */
     keyframesCounter: number;
     /** Set of injected @property names for tracking */
@@ -93,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;
@@ -112,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/radius.d.ts

@@ -1,8 +1,16 @@
 export declare function radiusStyle({ radius }: {
     radius: any;
-}): "" | {
+}): "" | ({
+    '--local-radius': string;
     'border-radius': string;
-};
+    $?: undefined;
+    '--context-radius'?: undefined;
+} | {
+    $: string;
+    '--context-radius': string;
+    '--local-radius'?: undefined;
+    'border-radius'?: undefined;
+})[];
 export declare namespace radiusStyle {
     var __lookupStyles: string[];
 }

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

@@ -1,6 +1,5 @@
 import { CSSProperties } from 'react';
-import { KeyframesSteps } from '../injector/types';
-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';
@@ -28,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.
      *
@@ -360,25 +349,15 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * - `inset={true}` // all sides: 0
      */
     inset?: 'top' | 'right' | 'bottom' | 'left' | string | CSSProperties['inset'];
-    /**
-     * Local keyframes definitions for this component.
-     * Keys are animation names, values are keyframes step definitions.
-     * Local keyframes override global keyframes with the same name.
-     *
-     * Examples:
-     * - `'@keyframes': { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }`
-     * - `'@keyframes': { pulse: { '0%, 100%': 'transform: scale(1)', '50%': 'transform: scale(1.05)' } }`
-     */
-    '@keyframes'?: Record<string, KeyframesSteps>;
 }
 export type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z';
 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.