@cube-dev/ui-kit 0.98.8 → 0.99.0

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

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