@cube-dev/ui-kit 0.74.3 → 0.75.0

package/types/tasty/utils/renderStyles.d.ts

@@ -1,10 +1,28 @@
+/**
+ * Style rendering that works with structured style objects
+ * Eliminates CSS string parsing for better performance
+ */
 import { Styles } from '../styles/types';
-export declare function isSelector(key: any): any;
+export interface StyleResult {
+    selector: string;
+    declarations: string;
+    atRules?: string[];
+}
+export interface RenderResult {
+    rules: StyleResult[];
+    className?: string;
+}
+/**
+ * Check if a key represents a CSS selector
+ */
+export declare function isSelector(key: string): boolean;
+/**
+ * Render styles to StyleResult[] format (recommended)
+ * Supports both component and global styling with advanced optimizations
+ */
+export declare function renderStyles(styles?: Styles, responsive?: number[], className?: string): RenderResult;
 /**
- * Render style props to complete Styled Components CSS.
- * @param styles - Complete style props.
- * @param responsive - A list of responsive zones
- * @param {string} [suffix]
- * @return {string}
+ * Render styles for direct injection with a specific selector
+ * Bypasses CSS text generation and flattening by directly creating StyleResult[]
  */
-export declare function renderStyles(styles?: Styles, responsive?: number[], suffix?: string): any;
+export declare function renderStyles(styles: Styles | undefined, responsive: number[], selector: string, directSelector: true): StyleResult[];

package/types/tasty/utils/responsive.d.ts

@@ -1,5 +1,4 @@
 import { ResponsiveStyleValue } from './styles';
-export declare function mediaWrapper(cssRules: any, points: any): any;
 export interface ResponsiveZone {
     max?: number;
     min?: number;

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

@@ -25,15 +25,6 @@ export interface StyleStateData {
     /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
     notMods: string[];
 }
-export interface ParsedStyle {
-    value: ResponsiveStyleValue;
-    values: string[];
-    all: string[];
-    colors: string[];
-    color?: string;
-    /** The list of mods to apply */
-    mods: string[];
-}
 export interface ParsedColor {
     color?: string;
     name?: string;
@@ -43,41 +34,11 @@ export type StyleStateDataList = StyleStateData[];
 export type StyleStateDataListMap = {
     [key: string]: StyleStateDataList;
 };
-/** An object that describes a relation between specific modifiers and style value. **/
-export interface StyleState {
-    /** The list of mods to apply */
-    mods: string[];
-    /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
-    notMods: string[];
-    /** The value to apply */
-    value: StyleMap;
-}
-export interface RenderedStyleState {
-    /** The list of mods to apply */
-    mods: string[];
-    /** The list of **not** mods to apply (e.g. `:not(:hover)`) */
-    notMods: string[];
-    /** The value to apply */
-    value: string;
-}
-export type ComputeUnit = string | (string | string[])[];
-export type StyleStateList = StyleState[];
-export type RenderedStyleStateList = RenderedStyleState[];
 export type StyleMap = {
     [key: string]: ResponsiveStyleValue;
 };
 export type StyleStateMap = {
-    [key: string]: StyleState;
-};
-export type RenderedStyleStateMap = {
-    [key: string]: RenderedStyleState;
-};
-export type StyleStateMapList = StyleStateMap[];
-export type RenderedStyleStateMapList = {
-    [key: string]: RenderedStyleStateMap;
-};
-export type StyleStateListMap = {
-    [key: string]: StyleStateList;
+    [key: string]: StyleStateData;
 };
 export declare const CUSTOM_UNITS: {
     r: string;
@@ -94,7 +55,7 @@ export declare const CUSTOM_UNITS: {
     sp: (num: any) => string;
 };
 export declare const DIRECTIONS: string[];
-export declare function createRule(prop: string, value: StyleValue, selector?: string): string;
+export declare function getModSelector(modName: string): string;
 export declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
 /**
  *
@@ -103,26 +64,15 @@ export declare function customFunc(name: string, fn: (groups: StyleDetails[]) =>
  * @returns {Object<String,String|Array>}
  */
 export declare function parseStyle(value: StyleValue): ProcessedStyle;
-export declare function flattenStyleDetails(processed: ProcessedStyle): {
-    values: string[];
-    mods: string[];
-    colors: string[];
-    all: string[];
-    value: string;
-    color: string | undefined;
-};
 /**
  * Parse color. Find it value, name and opacity.
+ * Optimized to avoid heavy parseStyle calls for simple color patterns.
  */
 export declare function parseColor(val: string, ignoreError?: boolean): ParsedColor;
-export declare function rgbColorProp(colorName: string, opacity: number, fallbackColorName?: Function, fallbackValue?: Function): string;
-export declare function colorProp(colorName: any, fallbackColorName: any, fallbackValue: any): string;
 export declare function strToRgb(color: any, ignoreAlpha?: boolean): any;
 export declare function getRgbValuesFromRgbaString(str: any): any;
 export declare function hexToRgb(hex: any): string | null;
-export declare function transferMods(mods: any, from: any, to: any): void;
 export declare function filterMods(mods: any, allowedMods: any): any;
-export declare function customUnit(value: any, unit: any): any;
 export declare function extendStyles(defaultStyles: any, newStyles: any): {};
 /**
  * Split properties into style and non-style properties.
@@ -137,40 +87,6 @@ export declare function extractStyles(props: {
 }, styleList?: readonly string[], defaultStyles?: Styles, propMap?: {
     [key: string]: string;
 }, ignoreList?: readonly string[]): Styles;
-/**
- * Render CSSMap to Styled Components CSS
- * @param styles
- * @param [selector]
- */
-export declare function renderStylesToSC(styles: StyleHandlerResult, selector?: string): any;
-/**
- * Compile states to finite CSS with selectors.
- * State values should contain a string value with CSS style list.
- * @param {string} selector
- * @param {StyleStateList|StyleStateMapList} states
- * @param {string} suffix
- */
-export declare function applyStates(selector: string, states: any, suffix?: string): any;
-export declare function styleHandlerCacheWrapper(styleHandler: StyleHandler, limit?: number): ((styleMap: any, suffix?: string | undefined) => any) & {
-    __lookupStyles: string[];
-};
-/**
- * Replace state values with new ones.
- * For example, if you want to replace initial values with finite CSS code.
- */
-export declare function replaceStateValues(states: StyleStateList | StyleStateMapList, replaceFn: (value: string) => string): RenderedStyleStateList | RenderedStyleStateMapList;
-/**
- * Get all presented modes from the style state list.
- */
-export declare function getModesFromStyleStateList(stateList: StyleStateList): string[];
-/**
- * Get all presented modes from the style state map list.
- */
-export declare function getModesFromStyleStateListMap(stateListMap: StyleStateMapList): string[];
-/**
- * Convert the style map to the normalized style state list.
- */
-export declare function styleMapToStyleMapStateList(styleMap: StyleMap, filterKeys?: string[]): StyleStateList;
 export declare const STATE_OPERATORS: {
     NOT: string;
     AND: string;
@@ -192,9 +108,9 @@ export declare function styleStateMapToStyleStateDataList(styleStateMap: StyleSt
 };
 export declare const COMPUTE_FUNC_MAP: {
     '!': (a: any) => boolean;
-    '^': (a: any, b: any) => number;
-    '|': (a: any, b: any) => number;
-    '&': (a: any, b: any) => number;
+    '^': (a: any, b: any) => any;
+    '|': (a: any, b: any) => any;
+    '&': (a: any, b: any) => any;
 };
 /**
  * Compute a result based on a model and incoming map.

package/types/tokens.d.ts

@@ -29,23 +29,12 @@ declare const TOKENS: {
     'draft-color': string;
     'minor-color': string;
     'danger-bg-hover-color': string;
-    'primary-1': string;
-    'primary-2': string;
-    'primary-3': string;
-    'primary-4': string;
-    'primary-5': string;
-    'primary-6': string;
-    'primary-7': string;
-    'primary-8': string;
-    'primary-9': string;
-    'primary-10': string;
     'dark-75-color': string;
     'primary-color': string;
     'pink-8-color': string;
     'pink-9-color': string;
     'disabled-color': string;
     'disabled-text-color': string;
-    'disabled-bg': string;
     'disabled-bg-color': string;
     'max-content-width': string;
     'topbar-height': string;