@cube-dev/ui-kit 0.0.0-canary-3f98351 → 0.0.0-canary-00718fb

package/types/index.d.ts

@@ -98,7 +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 * from './components/navigation';
 export { FileTabs } from './components/organisms/FileTabs/FileTabs';
 export type { CubeFileTabProps } from './components/organisms/FileTabs/FileTabs';
 export { StatsCard } from './components/organisms/StatsCard/StatsCard';

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

@@ -2,6 +2,3 @@ export { useStyles } from './useStyles';
 export type { UseStylesOptions, UseStylesResult } from './useStyles';
 export { useGlobalStyles } from './useGlobalStyles';
 export { useRawCSS } from './useRawCSS';
-export { useKeyframes } from './useKeyframes';
-export { useProperty } from './useProperty';
-export type { UsePropertyOptions } from './useProperty';

package/types/tasty/index.d.ts

@@ -1,6 +1,6 @@
 export { tasty, Element } from './tasty';
-export { useStyles, useGlobalStyles, useRawCSS, useProperty, useKeyframes, } from './hooks';
-export type { UseStylesOptions, UseStylesResult, UsePropertyOptions, } from './hooks';
+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';

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

@@ -58,62 +58,6 @@ export declare function keyframes(steps: import('./types').KeyframesSteps, nameO
     root?: Document | ShadowRoot;
     name?: string;
 }): import('./types').KeyframesResult;
-export interface PropertyOptions {
-    /**
-     * CSS syntax string for the property (e.g., '<color>', '<length>', '<angle>')
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
-     */
-    syntax?: string;
-    /**
-     * Whether the property inherits from parent elements
-     * @default true
-     */
-    inherits?: boolean;
-    /**
-     * Initial value for the property
-     */
-    initialValue?: string | number;
-    /**
-     * Shadow root or document to inject into
-     */
-    root?: Document | ShadowRoot;
-}
-/**
- * Define a CSS @property custom property.
- * This enables advanced features like animating custom properties.
- *
- * Note: @property rules are global and persistent once defined.
- * Re-registering the same property name is a no-op.
- *
- * @param name - The custom property name (must start with --)
- * @param options - Property configuration
- *
- * @example
- * ```ts
- * // Define a color property that can be animated
- * property('--my-color', {
- *   syntax: '<color>',
- *   initialValue: 'red',
- * });
- *
- * // Define an angle property
- * property('--rotation', {
- *   syntax: '<angle>',
- *   inherits: false,
- *   initialValue: '0deg',
- * });
- * ```
- */
-export declare function property(name: string, options?: PropertyOptions): void;
-/**
- * Check if a CSS @property has already been defined
- *
- * @param name - The custom property name to check
- * @param options - Options including root
- */
-export declare function isPropertyDefined(name: string, options?: {
-    root?: Document | ShadowRoot;
-}): boolean;
 /**
  * Get CSS text from all sheets (for SSR)
  */
@@ -149,6 +93,6 @@ 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, PropertyDefinition, } from './types';
+export type { StyleInjectorConfig, InjectResult, DisposeFunction, RuleInfo, SheetInfo, RootRegistry, StyleRule, KeyframesInfo, KeyframesResult, KeyframesSteps, KeyframesCacheEntry, CacheMetrics, RawCSSResult, } from './types';
 export { StyleInjector } from './injector';
 export { SheetManager } from './sheet-manager';

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

@@ -3,7 +3,7 @@
  * Eliminates CSS string parsing for better performance
  */
 import { StyleResult } from '../pipeline';
-import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, PropertyDefinition, RawCSSResult, StyleInjectorConfig } from './types';
+import { GlobalInjectResult, InjectResult, KeyframesResult, KeyframesSteps, RawCSSResult, StyleInjectorConfig } from './types';
 export declare class StyleInjector {
     private sheetManager;
     private config;
@@ -82,31 +82,19 @@ export declare class StyleInjector {
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * Define a CSS @property custom property.
-     *
-     * Accepts tasty token syntax for the property name:
-     * - `$name` → defines `--name`
-     * - `#name` → defines `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
-     * - `--name` → defines `--name` (legacy format)
-     *
+     * Define a CSS @property custom property
      * Example:
      * @property --rotation { syntax: "<angle>"; inherits: false; initial-value: 45deg; }
-     *
      * Note: No caching or dispose — this defines a global property.
-     *
-     * If the same property is registered with different options, a warning is emitted
-     * but the original definition is preserved (CSS @property cannot be redefined).
      */
-    property(name: string, options?: PropertyDefinition & {
+    property(name: string, options?: {
+        syntax?: string;
+        inherits?: boolean;
+        initialValue?: string | number;
         root?: Document | ShadowRoot;
     }): void;
     /**
-     * Check whether a given @property name was already injected by this injector.
-     *
-     * Accepts tasty token syntax:
-     * - `$name` → checks `--name`
-     * - `#name` → checks `--name-color`
-     * - `--name` → checks `--name` (legacy format)
+     * Check whether a given @property name was already injected by this injector
      */
     isPropertyDefined(name: string, options?: {
         root?: Document | ShadowRoot;

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

@@ -88,8 +88,8 @@ export interface RootRegistry {
     keyframesNameToContent: Map<string, string>;
     /** Counter for generating keyframes names like k0, k1, k2... */
     keyframesCounter: number;
-    /** Map of injected @property names to their normalized declarations for tracking */
-    injectedProperties: Map<string, string>;
+    /** Set of injected @property names for tracking */
+    injectedProperties: Set<string>;
     /** Global rules tracking for index adjustment */
     globalRules: Map<string, RuleInfo>;
 }
@@ -112,18 +112,6 @@ export interface KeyframesCacheEntry {
     refCount: number;
     info: KeyframesInfo;
 }
-/**
- * Definition for a CSS @property at-rule.
- * Used to define custom property syntax, inheritance, and initial value.
- */
-export interface PropertyDefinition {
-    /** CSS syntax string (e.g., '<color>', '<angle>', '<number>') */
-    syntax?: string;
-    /** Whether the property inherits (default: true) */
-    inherits?: boolean;
-    /** Initial value for the property */
-    initialValue?: string | number;
-}
 export interface RawCSSInfo {
     /** Unique identifier for this raw CSS block */
     id: string;

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

@@ -1,19 +1,11 @@
 /**
- * Border style handler with multi-group support.
  *
- * Single group (backward compatible):
- * - `border="1bw solid #red"` - all sides
- * - `border="1bw solid #red top left"` - only top and left
- *
- * Multi-group (new):
- * - `border="1bw #red, 2bw #blue top"` - all sides red 1bw, then top overridden to blue 2bw
- * - `border="1bw, dashed top bottom, #purple left right"` - base 1bw, dashed on top/bottom, purple on left/right
- *
- * Later groups override earlier groups for conflicting directions.
+ * @param border
+ * @return {{border: string}|*}
  */
 export declare function borderStyle({ border }: {
     border: any;
-}): Record<string, string> | undefined;
+}): {} | undefined;
 export declare namespace borderStyle {
     var __lookupStyles: string[];
 }

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

@@ -1,7 +1,7 @@
 export declare function fadeStyle({ fade }: {
     fade: any;
 }): {
-    mask: string;
+    mask: any;
     'mask-composite': string;
 } | undefined;
 export declare namespace fadeStyle {

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

@@ -1,7 +1,17 @@
-export declare function fillStyle({ fill }: {
+export declare function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background, }: {
     fill: any;
-}): {
-    'background-color': any;
+    backgroundColor: any;
+    image: any;
+    backgroundImage: any;
+    backgroundPosition: any;
+    backgroundSize: any;
+    backgroundRepeat: any;
+    backgroundAttachment: any;
+    backgroundOrigin: any;
+    backgroundClip: any;
+    background: any;
+}): Record<string, string> | {
+    background: any;
 } | undefined;
 export declare namespace fillStyle {
     var __lookupStyles: string[];

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

@@ -3,10 +3,10 @@ export declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn
 export declare const BLOCK_INNER_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
 export declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
 export declare const BLOCK_STYLES: readonly ["reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
-export declare const COLOR_STYLES: readonly ["color", "fill", "fade"];
+export declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
 export declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 export declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
 export declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
 export declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
-export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+export declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "reset", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { KeyframesSteps, PropertyDefinition } from '../injector/types';
+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;
@@ -28,6 +28,27 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * - `fill={true}` // default fill color
      */
     fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
+    /**
+     * @deprecated Use `fill` instead.
+     */
+    backgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * Set the background image of the element. Shortcut for `background-image` with enhanced support for Tasty tokens.
+     *
+     * Examples:
+     * - `image="url(/path/to/image.png)"` // image from URL
+     * - `image="linear-gradient(to right, #purple, #danger)"` // gradient
+     */
+    image?: CSSProperties['backgroundImage'];
+    /**
+     * @deprecated Use `image` instead.
+     */
+    backgroundImage?: CSSProperties['backgroundImage'];
+    /**
+     * @deprecated Use separate background styles (`fill`, `image`, `backgroundSize`, etc.) instead.
+     * When set, overrides all other background-related styles.
+     */
+    background?: CSSProperties['background'];
     /**
      * Set the fill color of SVG elements. Outputs the native CSS `fill` property with enhanced support for Tasty color tokens and syntaxes.
      *
@@ -51,23 +72,13 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
     /**
      * The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
      *
-     * Syntax: `[width] [directions] [#transparent-color] [#opaque-color]`
-     *
-     * Multiple groups can be separated by commas to specify different colors per direction.
-     *
-     * Color tokens (optional):
-     * - First color: transparent mask color (start of gradient, default: `rgb(0 0 0 / 0)`)
-     * - Second color: opaque mask color (end of gradient, default: `rgb(0 0 0 / 1)`)
+     * Syntax: `[width] [directions]`
      *
      * Examples:
      * - `fade="top"` // fade only top edge with default width
      * - `fade="2x left right"` // fade left and right edges with 2x width
      * - `fade="1x top"` // fade only top edge with 1x width
      * - `fade="3x 1x top bottom"` // top: 3x width, bottom: 1x width
-     * - `fade="2x #transparent #dark"` // custom colors for gradient mask
-     * - `fade="1x top #clear #solid"` // top edge with custom mask colors
-     * - `fade="top #red #blue, bottom #green #yellow"` // different colors per direction
-     * - `fade="2x top #a #b, 1x bottom #c #d"` // different widths and colors per direction
      */
     fade?: 'top' | 'right' | 'bottom' | 'left' | string;
     /**
@@ -167,15 +178,11 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      *
      * Syntax: `[width] [style] [color] [directions]` | `[directions]` | `true`
      *
-     * Multiple groups can be separated by commas. Later groups override earlier groups for conflicting directions.
-     *
      * Examples:
      * - `border={true}` // default border on all sides (1bw solid)
      * - `border="2bw dashed #purple"` // 2bw dashed purple border
      * - `border="2bw top"` // only top border: 2bw solid
      * - `border="dotted #danger left right"` // left/right: 1bw dotted danger
-     * - `border="1bw #red, 2bw #blue top"` // all sides red 1bw, top overridden to blue 2bw
-     * - `border="1bw, dashed top bottom, #purple left right"` // base 1bw, dashed on top/bottom, purple on left/right
      */
     border?: CSSProperties['border'] | string | boolean;
     /**
@@ -384,41 +391,19 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * - `'@keyframes': { pulse: { '0%, 100%': 'transform: scale(1)', '50%': 'transform: scale(1.05)' } }`
      */
     '@keyframes'?: Record<string, KeyframesSteps>;
-    /**
-     * CSS @property definitions for custom properties using tasty token syntax.
-     * Properties are registered once and are permanent (never removed).
-     *
-     * Token formats:
-     * - `$name` for regular properties → `--name` (requires syntax to be specified)
-     * - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
-     *
-     * Examples:
-     * - `'@properties': { '$rotation': { syntax: '<angle>', inherits: false, initialValue: '45deg' } }`
-     * - `'@properties': { '#theme': { initialValue: 'purple' } }` // syntax: '<color>' is auto-set
-     */
-    '@properties'?: Record<string, PropertyDefinition>;
 }
 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>;
-/** Special style keys that should not be wrapped in StyleValue/StyleValueStateMap */
-type SpecialStyleKeys = '@keyframes' | '@properties';
 export type StylesWithoutSelectors = {
-    [key in keyof StylesInterface as key extends SpecialStyleKeys ? never : key]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]>;
+    [key in keyof StylesInterface]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]>;
 };
-/** Special properties that are not regular style values */
-export interface SpecialStyleProperties {
-    '@keyframes'?: StylesInterface['@keyframes'];
-    '@properties'?: StylesInterface['@properties'];
-}
-/** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
-export interface StylesIndexSignature {
-    [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | StylesInterface['@keyframes'] | StylesInterface['@properties'];
+export type Styles = StylesWithoutSelectors & {
+    [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.
      */
     $?: string;
-}
-export type Styles = StylesWithoutSelectors & SpecialStyleProperties & StylesIndexSignature;
+};
 export {};