@cube-dev/ui-kit 0.0.0-canary-3f98351 → 0.0.0-canary-837dfc4

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

@@ -3,7 +3,7 @@ import { ReactElement, ReactNode } from 'react';
 import { BaseProps, Styles } from '../../../tasty';
 import { CubeItemProps } from '../../content/Item';
 /** Visual appearance type for tabs */
-export type TabType = 'default' | 'panel' | 'radio';
+export type TabType = 'default' | 'file' | 'panel' | 'radio';
 /** Tab size options */
 export type TabSize = 'medium' | 'large';
 /** Common props for panel rendering behavior */
@@ -39,7 +39,8 @@ export interface CubeTabsProps extends BaseProps, PanelBehaviorProps {
     /**
      * Visual appearance type for tabs.
      * - `default` - Standard tabs with selection indicator below (default)
-     * - `panel` - Panel-style tabs with sharp edges and no gaps
+     * - `file` - File-style tabs with fill highlight on selection, delimiter between tabs
+     * - `panel` - Panel-style tabs with border bottom highlight on selection, delimiter between tabs
      * - `radio` - Radio button style for tab selection
      * @default 'default'
      */

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

@@ -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.
      *