@cube-dev/ui-kit 0.0.0-canary-8eb1690 → 0.0.0-canary-3efb91b

package/types/tasty/chunks/definitions.d.ts

@@ -15,8 +15,9 @@ export declare const APPEARANCE_CHUNK_STYLES: readonly ["fill", "color", "opacit
  * Font chunk - typography styles
  * ⚠️ presetStyle handler requires: preset, fontSize, lineHeight, letterSpacing,
  *    textTransform, fontWeight, fontStyle, font - all MUST stay together
+ * Note: textOverflow, whiteSpace moved to CONTAINER chunk (displayStyle handler)
  */
-export declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight", "fontStyle", "fontSize", "lineHeight", "letterSpacing", "textTransform", "fontFamily", "textAlign", "whiteSpace", "textDecoration", "textOverflow", "wordBreak", "wordWrap", "boldFontWeight"];
+export declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight", "fontStyle", "fontSize", "lineHeight", "letterSpacing", "textTransform", "fontFamily", "textAlign", "textDecoration", "wordBreak", "wordWrap", "boldFontWeight"];
 /**
  * Dimension chunk - sizing and spacing
  * ⚠️ paddingStyle handler requires all padding variants together
@@ -24,17 +25,20 @@ export declare const FONT_CHUNK_STYLES: readonly ["preset", "font", "fontWeight"
  */
 export declare const DIMENSION_CHUNK_STYLES: readonly ["padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingBlock", "paddingInline", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginBlock", "marginInline", "width", "height", "minWidth", "maxWidth", "minHeight", "maxHeight", "flexBasis", "flexGrow", "flexShrink", "flex"];
 /**
- * Container chunk - display, flow, and grid layout
- * ⚠️ FORCED TOGETHER by transitive handler dependencies:
- *    displayStyle(display,hide) + flowStyle(display,flow) +
- *    gapStyle(display,flow,gap) + groupRadiusAttr(groupRadius,flow)
+ * Display chunk - display mode, text overflow, and scrollbar
+ * ⚠️ displayStyle handler requires: display, hide, textOverflow, overflow, whiteSpace
+ *    Multi-line textOverflow needs display: -webkit-box
+ *    Single-line textOverflow forces white-space: nowrap and overflow: hidden
+ * ⚠️ scrollbarStyle reads overflow for 'always' mode fallback
  */
-export declare const CONTAINER_CHUNK_STYLES: readonly ["display", "hide", "flow", "gap", "groupRadius", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "place", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas", "gridAutoFlow", "gridAutoColumns", "gridAutoRows"];
+export declare const DISPLAY_CHUNK_STYLES: readonly ["display", "hide", "textOverflow", "overflow", "whiteSpace", "scrollbar", "styledScrollbar"];
 /**
- * Scrollbar chunk - scrollbar and overflow
- * ⚠️ scrollbarStyle handler requires scrollbar ↔ overflow together
+ * Layout chunk - flex/grid flow and alignment
+ * ⚠️ flowStyle handler requires: display, flow together
+ * ⚠️ gapStyle handler requires: display, flow, gap together
+ * Note: display is in DISPLAY chunk, but flowStyle/gapStyle can still read it
  */
-export declare const SCROLLBAR_CHUNK_STYLES: readonly ["scrollbar", "overflow", "styledScrollbar"];
+export declare const LAYOUT_CHUNK_STYLES: readonly ["flow", "gap", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "place", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas", "gridAutoFlow", "gridAutoColumns", "gridAutoRows"];
 /**
  * Position chunk - element positioning (all independent handlers)
  */
@@ -46,8 +50,8 @@ export declare const CHUNK_NAMES: {
     readonly APPEARANCE: "appearance";
     readonly FONT: "font";
     readonly DIMENSION: "dimension";
-    readonly CONTAINER: "container";
-    readonly SCROLLBAR: "scrollbar";
+    readonly DISPLAY: "display";
+    readonly LAYOUT: "layout";
     readonly POSITION: "position";
     readonly MISC: "misc";
 };

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

@@ -1,4 +1,4 @@
-export { APPEARANCE_CHUNK_STYLES, FONT_CHUNK_STYLES, DIMENSION_CHUNK_STYLES, CONTAINER_CHUNK_STYLES, SCROLLBAR_CHUNK_STYLES, POSITION_CHUNK_STYLES, CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys, } from './definitions';
+export { APPEARANCE_CHUNK_STYLES, FONT_CHUNK_STYLES, DIMENSION_CHUNK_STYLES, DISPLAY_CHUNK_STYLES, LAYOUT_CHUNK_STYLES, POSITION_CHUNK_STYLES, CHUNK_NAMES, STYLE_TO_CHUNK, categorizeStyleKeys, } from './definitions';
 export type { ChunkName, ChunkInfo } from './definitions';
 export { generateChunkCacheKey } from './cacheKey';
 export { renderStylesForChunk } from './renderChunk';

package/types/tasty/parser/tokenizer.d.ts

@@ -1,2 +1,2 @@
-export type TokenCallback = (token: string, isComma: boolean, precedingChar: string | null) => void;
+export type TokenCallback = (token: string, isComma: boolean, isSlash: boolean, precedingChar: string | null) => void;
 export declare function scan(src: string, cb: TokenCallback): void;

package/types/tasty/parser/types.d.ts

@@ -3,13 +3,37 @@ export declare enum Bucket {
     Value = 1,
     Mod = 2
 }
+/**
+ * A part within a group, representing a slash-separated segment.
+ * For example, in `'2px solid #red / 4px'`, there are two parts:
+ * - Part 0: `2px solid #red`
+ * - Part 1: `4px`
+ */
+export interface StyleDetailsPart {
+    mods: string[];
+    values: string[];
+    colors: string[];
+    all: string[];
+    output: string;
+}
+/**
+ * A group of style details, representing a comma-separated segment.
+ * Contains aggregated values from all parts for backward compatibility,
+ * plus the structured `parts` array for handlers that need slash separation.
+ */
 export interface StyleDetails {
     input: string;
     output: string;
+    /** Aggregated mods from all parts (backward compatible) */
     mods: string[];
+    /** Aggregated values from all parts (backward compatible) */
     values: string[];
+    /** Aggregated colors from all parts (backward compatible) */
     colors: string[];
+    /** Aggregated all tokens from all parts (backward compatible) */
     all: string[];
+    /** Slash-separated parts within this group */
+    parts: StyleDetailsPart[];
 }
 export interface ProcessedStyle {
     output: string;
@@ -21,5 +45,11 @@ export interface ParserOptions {
     units?: Record<string, string | UnitHandler>;
     cacheSize?: number;
 }
+export declare const makeEmptyPart: () => StyleDetailsPart;
 export declare const makeEmptyDetails: () => StyleDetails;
-export declare const finalizeGroup: (d: StyleDetails) => StyleDetails;
+export declare const finalizePart: (p: StyleDetailsPart) => StyleDetailsPart;
+/**
+ * Aggregate parts into a StyleDetails group.
+ * Combines all parts' arrays into group-level arrays for backward compatibility.
+ */
+export declare const finalizeGroup: (d: StyleDetails, parts: StyleDetailsPart[]) => StyleDetails;

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

@@ -1 +1,16 @@
-export declare function dimensionStyle(name: any): (val: any) => Record<string, string | string[]> | undefined;
+interface DimensionProps {
+    value?: string | number | boolean;
+    min?: string | number | boolean;
+    max?: string | number | boolean;
+}
+/**
+ * Creates a dimension style handler for width or height.
+ *
+ * Supports:
+ * - Main dimension prop (width/height) with syntax for min/max
+ * - Separate min/max props (minWidth/maxWidth or minHeight/maxHeight)
+ *
+ * Priority: Individual min/max props override values from main prop syntax
+ */
+export declare function dimensionStyle(name: 'width' | 'height'): ({ value, min, max }: DimensionProps) => Record<string, string | string[]> | undefined;
+export {};

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

@@ -1,9 +1,27 @@
-export declare function displayStyle({ display, hide }: {
-    display: any;
-    hide: any;
-}): {
-    display: any;
-};
+interface DisplayStyleProps {
+    display?: string;
+    hide?: boolean;
+    textOverflow?: string | boolean;
+    overflow?: string;
+    whiteSpace?: string;
+}
+/**
+ * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+ *
+ * textOverflow syntax:
+ * - `textOverflow="ellipsis"` - single-line truncation with ellipsis
+ * - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
+ * - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
+ * - `textOverflow="clip / 2"` - multi-line clip (2 lines)
+ * - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
+ *
+ * Priority:
+ * 1. `hide` takes precedence (display: none)
+ * 2. Multi-line `textOverflow` forces display: -webkit-box
+ * 3. Single-line `textOverflow` forces white-space: nowrap and overflow: hidden
+ */
+export declare function displayStyle({ display, hide, textOverflow, overflow, whiteSpace, }: DisplayStyleProps): Record<string, string | number> | undefined;
 export declare namespace displayStyle {
     var __lookupStyles: string[];
 }
+export {};

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

@@ -1,6 +1,10 @@
-export declare function heightStyle({ height }: {
-    height: any;
-}): Record<string, string | string[]> | undefined;
+interface HeightStyleProps {
+    height?: string | number | boolean;
+    minHeight?: string | number | boolean;
+    maxHeight?: string | number | boolean;
+}
+export declare function heightStyle({ height, minHeight, maxHeight, }: HeightStyleProps): Record<string, string | string[]> | undefined;
 export declare namespace heightStyle {
     var __lookupStyles: string[];
 }
+export {};

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

@@ -1,6 +1,16 @@
-export declare function insetStyle({ inset }: {
-    inset: any;
-}): any;
+export declare function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left, }: {
+    inset?: string | number | boolean;
+    insetBlock?: string | number | boolean;
+    insetInline?: string | number | boolean;
+    top?: string | number | boolean;
+    right?: string | number | boolean;
+    bottom?: string | number | boolean;
+    left?: string | number | boolean;
+}): {
+    inset?: undefined;
+} | {
+    inset: string;
+};
 export declare namespace insetStyle {
     var __lookupStyles: string[];
 }

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

@@ -1,17 +1,23 @@
+interface OutlineStyleProps {
+    outline?: string | boolean;
+    outlineOffset?: string | number;
+}
 /**
+ * Generates CSS for outline property with optional offset.
+ *
+ * Syntax:
+ * - `outline="2px solid #red"` - outline only
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
+ * - `outline="2px / 4px"` - width with offset (simpler form)
+ * - `outline={true}` - default 1ow solid outline
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
+ *
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
  *
- * @param outline
- * @return {{outline: string}|*}
+ * @return CSS properties for outline and optionally outline-offset
  */
-export declare function outlineStyle({ outline }: {
-    outline: any;
-}): {
-    outline: string;
-    'outline-offset': string;
-} | {
-    outline: string;
-    'outline-offset'?: undefined;
-} | undefined;
+export declare function outlineStyle({ outline, outlineOffset }: OutlineStyleProps): Record<string, string> | undefined;
 export declare namespace outlineStyle {
     var __lookupStyles: string[];
 }
+export {};

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

@@ -6,10 +6,7 @@ import { displayStyle } from './display';
 import { fadeStyle } from './fade';
 import { fillStyle, svgFillStyle } from './fill';
 import { flowStyle } from './flow';
-import { fontStyle } from './font';
-import { fontStyleStyle } from './fontStyle';
 import { gapStyle } from './gap';
-import { groupRadiusAttr } from './groupRadius';
 import { heightStyle } from './height';
 import { insetStyle } from './inset';
 import { justifyStyle } from './justify';
@@ -93,10 +90,7 @@ export declare const styleHandlers: {
     readonly fill: typeof fillStyle;
     readonly svgFill: typeof svgFillStyle;
     readonly flow: typeof flowStyle;
-    readonly font: typeof fontStyle;
-    readonly fontStyle: typeof fontStyleStyle;
     readonly gap: typeof gapStyle;
-    readonly groupRadius: typeof groupRadiusAttr;
     readonly height: typeof heightStyle;
     readonly inset: typeof insetStyle;
     readonly justify: typeof justifyStyle;

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

@@ -1,14 +1,33 @@
 import { Styles } from './types';
-export declare function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, font, }: {
+interface PresetStyleProps {
     preset?: string | boolean;
     fontSize?: string | number;
     lineHeight?: string | number;
     textTransform?: string;
     letterSpacing?: string | number;
     fontWeight?: string | number;
-    fontStyle?: string;
-    font?: string;
-}): Styles | undefined;
+    fontStyle?: string | boolean;
+    fontFamily?: string;
+    /** Alias for fontFamily with special handling for 'monospace' and boolean */
+    font?: string | boolean;
+}
+/**
+ * Handles typography preset and individual font properties.
+ *
+ * When `preset` is defined, it sets up CSS custom properties for typography.
+ * Individual font props can be used with or without `preset`:
+ * - With `preset`: overrides the preset value for that property
+ * - Without `preset`: outputs the CSS directly
+ *
+ * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.
+ * fontWeight accepts numbers directly (e.g., 400, 700).
+ *
+ * font vs fontFamily:
+ * - `font` is the recommended prop with special handling (monospace, boolean, fallback)
+ * - `fontFamily` is a direct value without special handling
+ */
+export declare function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacing, fontWeight, fontStyle, fontFamily, font, }: PresetStyleProps): Styles | undefined;
 export declare namespace presetStyle {
     var __lookupStyles: string[];
 }
+export {};

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

@@ -245,18 +245,6 @@ export interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' |
      * - `radius="1r top"` // round only top corners
      */
     radius?: 'round' | 'ellipse' | 'leaf' | 'backleaf' | string | true;
-    /**
-     * The group radius style rounds the corners of a container's outer border edge by applying radius styles to its children.
-     *
-     * Syntax: `[value] [shape]` | `true`
-     *
-     * Examples:
-     * - `groupRadius="2r"` // apply 2r radius to children
-     * - `groupRadius="round"` // fully rounded children
-     * - `groupRadius="ellipse"` // elliptical children corners
-     * - `groupRadius={true}` // default group radius
-     */
-    groupRadius?: 'round' | 'ellipse' | string | boolean;
     /**
      * The flow style is a unified shorthand for controlling layout direction and wrapping in both flex and grid containers. Replaces `flexDirection` and `gridAutoFlow`.
      *

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

@@ -1,6 +1,10 @@
-export declare function widthStyle({ width }: {
-    width: any;
-}): Record<string, string | string[]> | undefined;
+interface WidthStyleProps {
+    width?: string | number | boolean;
+    minWidth?: string | number | boolean;
+    maxWidth?: string | number | boolean;
+}
+export declare function widthStyle({ width, minWidth, maxWidth }: WidthStyleProps): Record<string, string | string[]> | undefined;
 export declare namespace widthStyle {
     var __lookupStyles: string[];
 }
+export {};

package/types/tasty/tasty.d.ts

@@ -931,7 +931,6 @@ export declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLE
     hide?: StyleValue<boolean | undefined> | StyleValueStateMap<boolean | undefined>;
     shadow?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
     radius?: StyleValue<string | true | undefined> | StyleValueStateMap<string | true | undefined>;
-    groupRadius?: StyleValue<string | boolean | undefined> | StyleValueStateMap<string | boolean | undefined>;
     flow?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
     gridAreas?: StyleValue<import("csstype").Property.GridTemplateAreas | undefined> | StyleValueStateMap<import("csstype").Property.GridTemplateAreas | undefined>;
     gridColumns?: StyleValue<import("csstype").Property.GridTemplateColumns<string | number> | undefined> | StyleValueStateMap<import("csstype").Property.GridTemplateColumns<string | number> | undefined>;
@@ -942,5 +941,5 @@ export declare const Element: ForwardRefExoticComponent<AllBaseProps<keyof HTMLE
     place?: StyleValue<string | (string & {}) | undefined> | StyleValueStateMap<string | (string & {}) | undefined>;
     "@keyframes"?: StyleValue<Record<string, import("./injector").KeyframesSteps> | undefined> | StyleValueStateMap<Record<string, import("./injector").KeyframesSteps> | undefined>;
     "@properties"?: StyleValue<Record<string, import("./injector").PropertyDefinition> | undefined> | StyleValueStateMap<Record<string, import("./injector").PropertyDefinition> | undefined>;
-} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "color" | "filter" | "fill" | "top" | "right" | "bottom" | "left" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "image" | "svgFill" | "fade" | "reset" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "groupRadius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "block" | "style" | "inline" | "element" | "styles" | "mods" | "tokens" | "as" | "qa" | "qaVal" | "breakpoints" | "isHidden" | "isDisabled" | "css" | "theme" | "ref"> & RefAttributes<unknown>> & SubElementComponents<{}>;
+} & BaseStyleProps & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "color" | "filter" | "fill" | "top" | "right" | "bottom" | "left" | "font" | "outline" | "gap" | "padding" | "margin" | "width" | "height" | "border" | "transition" | "placeContent" | "placeItems" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignTracks" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "blockOverflow" | "blockSize" | "borderBlockColor" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineColor" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipPath" | "colorAdjust" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "content" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "direction" | "display" | "emptyCells" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "inlineSize" | "inputSecurity" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "justifyTracks" | "letterSpacing" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "opacity" | "order" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "page" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyAlign" | "rubyMerge" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "viewTransitionName" | "visibility" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex" | "zoom" | "all" | "animation" | "background" | "backgroundPosition" | "borderBlock" | "borderBlockEnd" | "borderBlockStart" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flex" | "flexFlow" | "grid" | "gridArea" | "gridColumn" | "gridRow" | "gridTemplate" | "inset" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overflow" | "overscrollBehavior" | "paddingBlock" | "paddingInline" | "placeSelf" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginInline" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnCount" | "MozColumnFill" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozImageRegion" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransformOrigin" | "MozTransformStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "MozUserModify" | "MozUserSelect" | "MozWindowDragging" | "MozWindowShadow" | "msAccelerator" | "msBlockProgression" | "msContentZoomChaining" | "msContentZoomLimitMax" | "msContentZoomLimitMin" | "msContentZoomSnapPoints" | "msContentZoomSnapType" | "msContentZooming" | "msFilter" | "msFlexDirection" | "msFlexPositive" | "msFlowFrom" | "msFlowInto" | "msGridColumns" | "msGridRows" | "msHighContrastAdjust" | "msHyphenateLimitChars" | "msHyphenateLimitLines" | "msHyphenateLimitZone" | "msHyphens" | "msImeAlign" | "msLineBreak" | "msOrder" | "msOverflowStyle" | "msOverflowX" | "msOverflowY" | "msScrollChaining" | "msScrollLimitXMax" | "msScrollLimitXMin" | "msScrollLimitYMax" | "msScrollLimitYMin" | "msScrollRails" | "msScrollSnapPointsX" | "msScrollSnapPointsY" | "msScrollSnapType" | "msScrollTranslation" | "msScrollbar3dlightColor" | "msScrollbarArrowColor" | "msScrollbarBaseColor" | "msScrollbarDarkshadowColor" | "msScrollbarFaceColor" | "msScrollbarHighlightColor" | "msScrollbarShadowColor" | "msScrollbarTrackColor" | "msTextAutospace" | "msTextCombineHorizontal" | "msTextOverflow" | "msTouchAction" | "msTouchSelect" | "msTransform" | "msTransformOrigin" | "msTransitionDelay" | "msTransitionDuration" | "msTransitionProperty" | "msTransitionTimingFunction" | "msUserSelect" | "msWordBreak" | "msWrapFlow" | "msWrapMargin" | "msWrapThrough" | "msWritingMode" | "WebkitAlignContent" | "WebkitAlignItems" | "WebkitAlignSelf" | "WebkitAnimationDelay" | "WebkitAnimationDirection" | "WebkitAnimationDuration" | "WebkitAnimationFillMode" | "WebkitAnimationIterationCount" | "WebkitAnimationName" | "WebkitAnimationPlayState" | "WebkitAnimationTimingFunction" | "WebkitAppearance" | "WebkitBackdropFilter" | "WebkitBackfaceVisibility" | "WebkitBackgroundClip" | "WebkitBackgroundOrigin" | "WebkitBackgroundSize" | "WebkitBorderBeforeColor" | "WebkitBorderBeforeStyle" | "WebkitBorderBeforeWidth" | "WebkitBorderBottomLeftRadius" | "WebkitBorderBottomRightRadius" | "WebkitBorderImageSlice" | "WebkitBorderTopLeftRadius" | "WebkitBorderTopRightRadius" | "WebkitBoxDecorationBreak" | "WebkitBoxReflect" | "WebkitBoxShadow" | "WebkitBoxSizing" | "WebkitClipPath" | "WebkitColumnCount" | "WebkitColumnFill" | "WebkitColumnRuleColor" | "WebkitColumnRuleStyle" | "WebkitColumnRuleWidth" | "WebkitColumnSpan" | "WebkitColumnWidth" | "WebkitFilter" | "WebkitFlexBasis" | "WebkitFlexDirection" | "WebkitFlexGrow" | "WebkitFlexShrink" | "WebkitFlexWrap" | "WebkitFontFeatureSettings" | "WebkitFontKerning" | "WebkitFontSmoothing" | "WebkitFontVariantLigatures" | "WebkitHyphenateCharacter" | "WebkitHyphens" | "WebkitInitialLetter" | "WebkitJustifyContent" | "WebkitLineBreak" | "WebkitLineClamp" | "WebkitMarginEnd" | "WebkitMarginStart" | "WebkitMaskAttachment" | "WebkitMaskBoxImageOutset" | "WebkitMaskBoxImageRepeat" | "WebkitMaskBoxImageSlice" | "WebkitMaskBoxImageSource" | "WebkitMaskBoxImageWidth" | "WebkitMaskClip" | "WebkitMaskComposite" | "WebkitMaskImage" | "WebkitMaskOrigin" | "WebkitMaskPosition" | "WebkitMaskPositionX" | "WebkitMaskPositionY" | "WebkitMaskRepeat" | "WebkitMaskRepeatX" | "WebkitMaskRepeatY" | "WebkitMaskSize" | "WebkitMaxInlineSize" | "WebkitOrder" | "WebkitOverflowScrolling" | "WebkitPaddingEnd" | "WebkitPaddingStart" | "WebkitPerspective" | "WebkitPerspectiveOrigin" | "WebkitPrintColorAdjust" | "WebkitRubyPosition" | "WebkitScrollSnapType" | "WebkitShapeMargin" | "WebkitTapHighlightColor" | "WebkitTextCombine" | "WebkitTextDecorationColor" | "WebkitTextDecorationLine" | "WebkitTextDecorationSkip" | "WebkitTextDecorationStyle" | "WebkitTextEmphasisColor" | "WebkitTextEmphasisPosition" | "WebkitTextEmphasisStyle" | "WebkitTextFillColor" | "WebkitTextOrientation" | "WebkitTextSizeAdjust" | "WebkitTextStrokeColor" | "WebkitTextStrokeWidth" | "WebkitTextUnderlinePosition" | "WebkitTouchCallout" | "WebkitTransform" | "WebkitTransformOrigin" | "WebkitTransformStyle" | "WebkitTransitionDelay" | "WebkitTransitionDuration" | "WebkitTransitionProperty" | "WebkitTransitionTimingFunction" | "WebkitUserModify" | "WebkitUserSelect" | "WebkitWritingMode" | "MozAnimation" | "MozBorderImage" | "MozColumnRule" | "MozColumns" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "azimuth" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundInlinePolicy" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineRadius" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozUserInput" | "msImeMode" | "OAnimation" | "OAnimationDelay" | "OAnimationDirection" | "OAnimationDuration" | "OAnimationFillMode" | "OAnimationIterationCount" | "OAnimationName" | "OAnimationPlayState" | "OAnimationTimingFunction" | "OBackgroundSize" | "OBorderImage" | "OObjectFit" | "OObjectPosition" | "OTabSize" | "OTextOverflow" | "OTransform" | "OTransformOrigin" | "OTransition" | "OTransitionDelay" | "OTransitionDuration" | "OTransitionProperty" | "OTransitionTimingFunction" | "WebkitBoxAlign" | "WebkitBoxDirection" | "WebkitBoxFlex" | "WebkitBoxFlexGroup" | "WebkitBoxLines" | "WebkitBoxOrdinalGroup" | "WebkitBoxOrient" | "WebkitBoxPack" | "WebkitScrollSnapPointsX" | "WebkitScrollSnapPointsY" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "image" | "svgFill" | "fade" | "reset" | "styledScrollbar" | "scrollbar" | "boldFontWeight" | "hide" | "shadow" | "radius" | "flow" | "gridAreas" | "gridColumns" | "gridRows" | "preset" | "align" | "justify" | "place" | "@keyframes" | "@properties" | "block" | "style" | "inline" | "element" | "styles" | "mods" | "tokens" | "as" | "qa" | "qaVal" | "breakpoints" | "isHidden" | "isDisabled" | "css" | "theme" | "ref"> & RefAttributes<unknown>> & SubElementComponents<{}>;
 export {};

package/types/tasty/zero/babel.d.ts

@@ -20,6 +20,7 @@ import { StyleHandlerDefinition } from '../utils/styles';
 import type { PluginPass } from '@babel/core';
 import type { KeyframesSteps } from '../injector/types';
 import type { StyleDetails, UnitHandler } from '../parser/types';
+import type { TastyPlugin } from '../plugins/types';
 /**
  * Build-time configuration for zero-runtime mode.
  * Subset of TastyConfig that applies at build time.
@@ -35,6 +36,11 @@ export interface TastyZeroConfig {
      * Default: false
      */
     devMode?: boolean;
+    /**
+     * Parser LRU cache size (default: 1000).
+     * Larger values improve performance for builds with many unique style values.
+     */
+    parserCacheSize?: number;
     /**
      * Custom units for the style parser (merged with built-in units).
      * Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
@@ -47,6 +53,24 @@ export interface TastyZeroConfig {
      * @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
      */
     funcs?: Record<string, (groups: StyleDetails[]) => string>;
+    /**
+     * Plugins that extend tasty with custom functions, units, states, handlers, or tokens.
+     * Plugins are processed in order, with later plugins overriding earlier ones.
+     * @example
+     * ```ts
+     * import { okhslPlugin } from '@cube-dev/ui-kit/tasty/plugins';
+     *
+     * // babel.config.js
+     * module.exports = {
+     *   plugins: [
+     *     ['@cube-dev/ui-kit/tasty/zero/babel', {
+     *       config: { plugins: [okhslPlugin()] }
+     *     }]
+     *   ]
+     * };
+     * ```
+     */
+    plugins?: TastyPlugin[];
     /**
      * Global keyframes definitions for static extraction.
      * Keys are animation names, values are keyframes step definitions.

package/es/tasty/styles/font.js

@@ -1,23 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
- * Released under the MIT license.
- */
-
-export function fontStyle({ font }) {
-    if (font == null || font === false)
-        return null;
-    const fontFamily = font === 'monospace'
-        ? 'var(--monospace-font)'
-        : font === true
-            ? 'var(--font)'
-            : `${font}, var(--font)`;
-    return {
-        'font-family': fontFamily,
-        '--font-family': fontFamily,
-    };
-}
-fontStyle.__lookupStyles = ['font'];
-
-        

package/es/tasty/styles/fontStyle.js

@@ -1,19 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
- * Released under the MIT license.
- */
-
-export function fontStyleStyle({ fontStyle }) {
-    if (fontStyle === true) {
-        fontStyle = 'italic';
-    }
-    if (fontStyle !== 'inherit') {
-        fontStyle = fontStyle ? 'italic' : 'normal';
-    }
-    return { 'font-style': fontStyle };
-}
-fontStyleStyle.__lookupStyles = ['fontStyle'];
-
-        

package/es/tasty/styles/groupRadius.js

@@ -1,61 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8eb1690
- * Released under the MIT license.
- */
-
-import { parseStyle } from '../utils/styles.js';
-const MAP = {
-    row: ['* 0 0 *', '0 * * 0'],
-    column: ['* * 0 0', '0 0 * *'],
-};
-export function groupRadiusAttr({ groupRadius, flow }) {
-    if (!groupRadius)
-        return;
-    if (groupRadius === true)
-        groupRadius = '1r';
-    const processed = parseStyle(groupRadius);
-    const { values, mods } = processed.groups[0] ?? { values: [], mods: [] };
-    flow = flow || 'row';
-    const reverse = mods.includes('reverse');
-    let value = values[0];
-    if (!value) {
-        if (mods.includes('round')) {
-            value = '9999rem';
-        }
-        else if (mods.includes('ellipse')) {
-            value = '50%';
-        }
-        else {
-            value = 'var(--radius)';
-        }
-    }
-    const startValue = MAP[flow][reverse ? 1 : 0].replace(/\*/g, value);
-    const endValue = MAP[flow][reverse ? 0 : 1].replace(/\*/g, value);
-    return [
-        {
-            $: '>:first-child:not(:last-child)',
-            'border-radius': startValue,
-            '--local-radius': startValue,
-        },
-        {
-            $: '>:last-child:not(:first-child)',
-            'border-radius': endValue,
-            '--local-radius': endValue,
-        },
-        {
-            $: '>:last-child:first-child',
-            'border-radius': value,
-            '--local-radius': value,
-        },
-        {
-            $: '>:not(:last-child):not(:first-child)',
-            'border-radius': '0',
-            '--local-radius': '0',
-        },
-    ];
-}
-groupRadiusAttr.__lookupStyles = ['groupRadius', 'flow'];
-
-        

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

@@ -1,9 +0,0 @@
-export declare function fontStyle({ font }: {
-    font: any;
-}): {
-    'font-family': string;
-    '--font-family': string;
-} | null;
-export declare namespace fontStyle {
-    var __lookupStyles: string[];
-}

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

@@ -1,8 +0,0 @@
-export declare function fontStyleStyle({ fontStyle }: {
-    fontStyle: any;
-}): {
-    'font-style': any;
-};
-export declare namespace fontStyleStyle {
-    var __lookupStyles: string[];
-}