@tenphi/tasty 1.2.0 → 1.4.0

package/dist/tasty.d.ts

@@ -1,6 +1,6 @@
 import { StyleValue, StyleValueStateMap } from "./utils/styles.js";
 import { Styles, StylesInterface } from "./styles/types.js";
-import { AllBaseProps, BaseProps, BaseStyleProps, ModValue, Mods, Props, Tokens } from "./types.js";
+import { AllBaseProps, BaseProps, BaseStyleProps, ModValue, Mods, Props, TokenValue, Tokens } from "./types.js";
 import * as _$react from "react";
 import { AllHTMLAttributes, ComponentType, ForwardRefExoticComponent, JSX, PropsWithoutRef, RefAttributes } from "react";
 
@@ -18,6 +18,16 @@ type ModPropsInput = ModPropsList | ModPropsMap;
 type ResolveModPropDef<T> = T extends BooleanConstructor ? boolean : T extends StringConstructor ? string : T extends NumberConstructor ? number : T extends readonly (infer U)[] ? U : ModValue;
 /** Resolve an entire `modProps` definition to the component prop types it adds. */
 type ResolveModProps<M extends ModPropsInput> = M extends readonly (infer K)[] ? Partial<Record<K & string, ModValue>> : M extends Record<string, ModPropDef> ? { [key in keyof M & string]?: ResolveModPropDef<M[key]> } : {};
+/** A token key with `$` or `#` prefix. */
+type TokenPropKey = `$${string}` | `#${string}`;
+/** Array form: list of prop names. Names ending in `Color` map to `#` color tokens. */
+type TokenPropsList = readonly string[];
+/** Object form: prop name -> token key with explicit `$`/`#` prefix. */
+type TokenPropsMap = Readonly<Record<string, TokenPropKey>>;
+/** Either array or object form accepted by `tokenProps` option. */
+type TokenPropsInput = TokenPropsList | TokenPropsMap;
+/** Resolve a `tokenProps` definition to the component prop types it adds. */
+type ResolveTokenProps<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? Partial<Record<K & string, TokenValue>> : TP extends Record<string, TokenPropKey> ? Partial<Record<keyof TP & string, TokenValue>> : {};
 type PropsWithStyles = {
   styles?: Styles;
 } & Omit<Props, 'styles'>;
@@ -67,18 +77,19 @@ type SubElementComponents<E extends ElementsDefinition> = { [K in keyof E]: Forw
  * Base type containing common properties shared between TastyProps and TastyElementOptions.
  * Separated to avoid code duplication while allowing different type constraints.
  */
-type TastyBaseProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, M extends ModPropsInput = readonly never[]> = {
+type TastyBaseProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = {
   /** Default styles of the element. */styles?: Styles; /** The list of styles that can be provided by props */
   styleProps?: K; /** Modifier keys exposed as top-level component props (array or typed object form). */
-  modProps?: M;
+  modProps?: M; /** Token keys exposed as top-level component props (array or typed object form). */
+  tokenProps?: TP;
   element?: BaseProps['element'];
   variants?: V; /** Default tokens for inline CSS custom properties */
   tokens?: Tokens; /** Sub-element definitions for compound components */
   elements?: E;
 } & Pick<BaseProps, 'qa' | 'qaVal'> & WithVariant<V>;
-type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, DefaultProps = Props, M extends ModPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M> & {
+type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, DefaultProps = Props, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
   /** The tag name of the element or a React component. */as?: string | ComponentType<any>;
-} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokens'>>;
+} & Partial<Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens'>>;
 /**
  * TastyElementOptions is used for the element-creation overload of tasty().
  * It includes a Tag generic that allows TypeScript to infer the correct
@@ -87,15 +98,19 @@ type TastyProps<K extends StyleList, V extends VariantMap, E extends ElementsDef
  * Note: Uses a separate index signature with `unknown` instead of inheriting
  * from Props (which has `any`) to ensure strict type checking for styles.
  */
-type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M> & {
+type TastyElementOptions<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = TastyBaseProps<K, V, E, M, TP> & {
   /** The tag name of the element or a React component. */as?: Tag | ComponentType<any>;
 } & Record<string, unknown>;
-type AllBasePropsWithMods<K extends StyleList, M extends ModPropsInput = readonly never[]> = AllBaseProps & { [key in K[number]]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> } & BaseStyleProps & ResolveModProps<M>;
+type AllBasePropsWithMods<K extends StyleList, M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = AllBaseProps & { [key in K[number]]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> } & BaseStyleProps & ResolveModProps<M> & ResolveTokenProps<TP>;
 /**
  * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.
  * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.
  */
 type TastySpecificKeys = 'as' | 'qa' | 'qaVal' | 'element' | 'styles' | 'breakpoints' | 'block' | 'inline' | 'mods' | 'isHidden' | 'isDisabled' | 'css' | 'style' | 'theme' | 'tokens' | 'ref' | 'color';
+/** Extract prop key names from a ModPropsInput (array elements or object keys). */
+type ModPropsKeys<M extends ModPropsInput> = M extends readonly (infer K)[] ? K & string : keyof M & string;
+/** Extract prop key names from a TokenPropsInput (array elements or object keys). */
+type TokenPropsKeys<TP extends TokenPropsInput> = TP extends readonly (infer K)[] ? K & string : keyof TP & string;
 /**
  * Props type for tasty elements that combines:
  * - AllBasePropsWithMods for style props with strict tokens type
@@ -106,14 +121,14 @@ type TastySpecificKeys = 'as' | 'qa' | 'qaVal' | 'element' | 'styles' | 'breakpo
  * with tag-specific types from JSX.IntrinsicElements (e.g. `src` is `string`
  * in AllHTMLAttributes but `string | Blob` in ImgHTMLAttributes). To avoid
  * intersection-narrowing, we Omit tag-specific keys from AllBasePropsWithMods
- * (keeping TastySpecificKeys and style props) and let JSX.IntrinsicElements
- * supply the authoritative HTML attribute types.
+ * (keeping TastySpecificKeys, style props, mod props, and token props) and let
+ * JSX.IntrinsicElements supply the authoritative HTML attribute types.
  */
-type TastyElementProps<K extends StyleList, V extends VariantMap, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[]> = Omit<AllBasePropsWithMods<K, M>, Exclude<keyof JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number]>> & WithVariant<V> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> & JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number]>;
+type TastyElementProps<K extends StyleList, V extends VariantMap, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]> = Omit<AllBasePropsWithMods<K, M, TP>, Exclude<keyof JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>> & WithVariant<V> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> & JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>>;
 type TastyComponentPropsWithDefaults<Props extends PropsWithStyles, DefaultProps extends Partial<Props>> = keyof DefaultProps extends never ? Props : { [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key] } & { [key in keyof Omit<Props, keyof DefaultProps>]: Props[key] };
-declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[]>(options: TastyElementOptions<K, V, E, Tag, M>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag, M>> & RefAttributes<unknown>> & SubElementComponents<E>;
+declare function tasty<K extends StyleList, V extends VariantMap, E extends ElementsDefinition = Record<string, never>, Tag extends keyof JSX.IntrinsicElements = 'div', M extends ModPropsInput = readonly never[], TP extends TokenPropsInput = readonly never[]>(options: TastyElementOptions<K, V, E, Tag, M, TP>, secondArg?: never): ForwardRefExoticComponent<PropsWithoutRef<TastyElementProps<K, V, Tag, M, TP>> & RefAttributes<unknown>> & SubElementComponents<E>;
 declare function tasty<Props extends PropsWithStyles, DefaultProps extends Partial<Props> = Partial<Props>>(Component: ComponentType<Props>, options?: TastyProps<never, never, Record<string, never>, Props>): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;
-declare const Element: ForwardRefExoticComponent<Omit<AllBasePropsWithMods<StyleList, readonly never[]>, "slot" | "title" | "children" | "className" | "role" | "id" | "hidden" | "prefix" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "key"> & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof _$react.ClassAttributes<HTMLDivElement> | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement>, "style" | "clipPath" | "filter" | "image" | "marker" | "mask" | "fill" | "top" | "right" | "bottom" | "left" | "mods" | "css" | "content" | "translate" | "as" | "background" | "align" | "border" | "color" | "height" | "width" | "display" | "font" | "preset" | "hide" | "whiteSpace" | "opacity" | "transition" | "gridArea" | "order" | "gridColumn" | "gridRow" | "placeSelf" | "alignSelf" | "justifySelf" | "zIndex" | "margin" | "inset" | "position" | "scrollMargin" | "padding" | "paddingInline" | "paddingBlock" | "overflow" | "scrollbar" | "textAlign" | "radius" | "shadow" | "outline" | "fade" | "textTransform" | "fontWeight" | "fontStyle" | "flexBasis" | "flexGrow" | "flexShrink" | "flex" | "flow" | "place" | "placeItems" | "placeContent" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "justify" | "gap" | "columnGap" | "rowGap" | "gridColumns" | "gridRows" | "gridTemplate" | "gridAreas" | "all" | "page" | "qa" | "qaVal" | "scrollMarginTop" | "scrollMarginRight" | "scrollMarginBottom" | "scrollMarginLeft" | "scrollMarginBlock" | "scrollMarginInline" | "accentColor" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxDecorationBreak" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "caretShape" | "clear" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "flexDirection" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "animation" | "animationRange" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "grid" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "maskBorder" | "motion" | "offset" | "overscrollBehavior" | "positionTry" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "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" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "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" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "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" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "boldFontWeight" | "@keyframes" | "@properties" | "@fontFace" | "@counterStyle" | "recipe" | "element" | "styles" | "breakpoints" | "block" | "inline" | "isHidden" | "isDisabled" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
+declare const Element: ForwardRefExoticComponent<Omit<AllBasePropsWithMods<StyleList, readonly never[], readonly never[]>, "children" | "slot" | "title" | "className" | "role" | "id" | "hidden" | "prefix" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "key"> & WithVariant<VariantMap> & Omit<Omit<AllHTMLAttributes<HTMLElement>, keyof _$react.ClassAttributes<HTMLDivElement> | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement>, "top" | "right" | "bottom" | "left" | "display" | "font" | "preset" | "hide" | "whiteSpace" | "opacity" | "transition" | "gridArea" | "order" | "gridColumn" | "gridRow" | "placeSelf" | "alignSelf" | "justifySelf" | "zIndex" | "margin" | "inset" | "position" | "scrollMargin" | "padding" | "paddingInline" | "paddingBlock" | "overflow" | "scrollbar" | "textAlign" | "border" | "radius" | "shadow" | "outline" | "color" | "fill" | "fade" | "image" | "textTransform" | "fontWeight" | "fontStyle" | "width" | "height" | "flexBasis" | "flexGrow" | "flexShrink" | "flex" | "flow" | "place" | "placeItems" | "placeContent" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "align" | "justify" | "gap" | "columnGap" | "rowGap" | "gridColumns" | "gridRows" | "gridTemplate" | "gridAreas" | "style" | "mods" | "css" | "content" | "translate" | "as" | "background" | "all" | "page" | "qa" | "qaVal" | "scrollMarginTop" | "scrollMarginRight" | "scrollMarginBottom" | "scrollMarginLeft" | "scrollMarginBlock" | "scrollMarginInline" | "accentColor" | "alignTracks" | "alignmentBaseline" | "anchorName" | "anchorScope" | "animationComposition" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationRangeEnd" | "animationRangeStart" | "animationTimeline" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "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" | "clipRule" | "colorAdjust" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "contain" | "containIntrinsicBlockSize" | "containIntrinsicHeight" | "containIntrinsicInlineSize" | "containIntrinsicWidth" | "containerName" | "containerType" | "contentVisibility" | "counterIncrement" | "counterReset" | "counterSet" | "cursor" | "cx" | "cy" | "d" | "direction" | "dominantBaseline" | "emptyCells" | "fieldSizing" | "fillOpacity" | "fillRule" | "filter" | "flexDirection" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontLanguageOverride" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontSmooth" | "fontSynthesis" | "fontSynthesisPosition" | "fontSynthesisSmallCaps" | "fontSynthesisStyle" | "fontSynthesisWeight" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantEmoji" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWidth" | "forcedColorAdjust" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "hangingPunctuation" | "hyphenateCharacter" | "hyphenateLimitChars" | "hyphens" | "imageOrientation" | "imageRendering" | "imageResolution" | "initialLetter" | "initialLetterAlign" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "interpolateSize" | "isolation" | "justifyTracks" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "lineHeightStep" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "marginTrim" | "marker" | "markerEnd" | "markerMid" | "markerStart" | "maskBorderMode" | "maskBorderOutset" | "maskBorderRepeat" | "maskBorderSlice" | "maskBorderSource" | "maskBorderWidth" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "masonryAutoFlow" | "mathDepth" | "mathShift" | "mathStyle" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxLines" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "motionDistance" | "motionPath" | "motionRotation" | "objectFit" | "objectPosition" | "objectViewBox" | "offsetAnchor" | "offsetDistance" | "offsetPath" | "offsetPosition" | "offsetRotate" | "offsetRotation" | "orphans" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflowAnchor" | "overflowBlock" | "overflowClipBox" | "overflowClipMargin" | "overflowInline" | "overflowWrap" | "overflowX" | "overflowY" | "overlay" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "paintOrder" | "perspective" | "perspectiveOrigin" | "pointerEvents" | "positionAnchor" | "positionArea" | "positionTryFallbacks" | "positionTryOrder" | "positionVisibility" | "printColorAdjust" | "quotes" | "r" | "resize" | "rotate" | "rubyAlign" | "rubyMerge" | "rubyOverhang" | "rubyPosition" | "rx" | "ry" | "scale" | "scrollBehavior" | "scrollInitialTarget" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "scrollSnapMarginTop" | "scrollSnapStop" | "scrollSnapType" | "scrollTimelineAxis" | "scrollTimelineName" | "scrollbarColor" | "scrollbarGutter" | "scrollbarWidth" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "speakAs" | "stopColor" | "stopOpacity" | "stroke" | "strokeColor" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlignLast" | "textAnchor" | "textAutospace" | "textBox" | "textBoxEdge" | "textBoxTrim" | "textCombineUpright" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkip" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textJustify" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textSizeAdjust" | "textSpacingTrim" | "textUnderlineOffset" | "textUnderlinePosition" | "textWrapMode" | "textWrapStyle" | "timelineScope" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transitionBehavior" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "unicodeBidi" | "userSelect" | "vectorEffect" | "verticalAlign" | "viewTimelineAxis" | "viewTimelineInset" | "viewTimelineName" | "viewTransitionClass" | "viewTransitionName" | "visibility" | "whiteSpaceCollapse" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "x" | "y" | "zoom" | "animation" | "animationRange" | "backgroundPosition" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockStart" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderColor" | "borderImage" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineStart" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "caret" | "columnRule" | "columns" | "containIntrinsicSize" | "container" | "flexFlow" | "grid" | "insetBlock" | "insetInline" | "lineClamp" | "listStyle" | "marginBlock" | "marginInline" | "mask" | "maskBorder" | "motion" | "offset" | "overscrollBehavior" | "positionTry" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingInline" | "scrollSnapMargin" | "scrollTimeline" | "textDecoration" | "textEmphasis" | "textWrap" | "viewTimeline" | "MozAnimationDelay" | "MozAnimationDirection" | "MozAnimationDuration" | "MozAnimationFillMode" | "MozAnimationIterationCount" | "MozAnimationName" | "MozAnimationPlayState" | "MozAnimationTimingFunction" | "MozAppearance" | "MozBackfaceVisibility" | "MozBinding" | "MozBorderBottomColors" | "MozBorderEndColor" | "MozBorderEndStyle" | "MozBorderEndWidth" | "MozBorderLeftColors" | "MozBorderRightColors" | "MozBorderStartColor" | "MozBorderStartStyle" | "MozBorderTopColors" | "MozBoxSizing" | "MozColumnRuleColor" | "MozColumnRuleStyle" | "MozColumnRuleWidth" | "MozColumnWidth" | "MozContextProperties" | "MozFontFeatureSettings" | "MozFontLanguageOverride" | "MozHyphens" | "MozMarginEnd" | "MozMarginStart" | "MozOrient" | "MozOsxFontSmoothing" | "MozOutlineRadiusBottomleft" | "MozOutlineRadiusBottomright" | "MozOutlineRadiusTopleft" | "MozOutlineRadiusTopright" | "MozPaddingEnd" | "MozPaddingStart" | "MozPerspective" | "MozPerspectiveOrigin" | "MozStackSizing" | "MozTabSize" | "MozTextBlink" | "MozTextSizeAdjust" | "MozTransform" | "MozTransformOrigin" | "MozTransformStyle" | "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" | "WebkitLogicalHeight" | "WebkitLogicalWidth" | "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" | "MozOutlineRadius" | "MozTransition" | "msContentZoomLimit" | "msContentZoomSnap" | "msFlex" | "msScrollLimit" | "msScrollSnapX" | "msScrollSnapY" | "msTransition" | "WebkitAnimation" | "WebkitBorderBefore" | "WebkitBorderImage" | "WebkitBorderRadius" | "WebkitColumnRule" | "WebkitColumns" | "WebkitFlex" | "WebkitFlexFlow" | "WebkitMask" | "WebkitMaskBoxImage" | "WebkitTextEmphasis" | "WebkitTextStroke" | "WebkitTransition" | "boxAlign" | "boxDirection" | "boxFlex" | "boxFlexGroup" | "boxLines" | "boxOrdinalGroup" | "boxOrient" | "boxPack" | "clip" | "fontStretch" | "gridColumnGap" | "gridGap" | "gridRowGap" | "imeMode" | "insetArea" | "offsetBlock" | "offsetBlockEnd" | "offsetBlockStart" | "offsetInline" | "offsetInlineEnd" | "offsetInlineStart" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "positionTryOptions" | "scrollSnapCoordinate" | "scrollSnapDestination" | "scrollSnapPointsX" | "scrollSnapPointsY" | "scrollSnapTypeX" | "scrollSnapTypeY" | "KhtmlBoxAlign" | "KhtmlBoxDirection" | "KhtmlBoxFlex" | "KhtmlBoxFlexGroup" | "KhtmlBoxLines" | "KhtmlBoxOrdinalGroup" | "KhtmlBoxOrient" | "KhtmlBoxPack" | "KhtmlLineBreak" | "KhtmlOpacity" | "KhtmlUserSelect" | "MozBackgroundClip" | "MozBackgroundOrigin" | "MozBackgroundSize" | "MozBorderRadius" | "MozBorderRadiusBottomleft" | "MozBorderRadiusBottomright" | "MozBorderRadiusTopleft" | "MozBorderRadiusTopright" | "MozBoxAlign" | "MozBoxDirection" | "MozBoxFlex" | "MozBoxOrdinalGroup" | "MozBoxOrient" | "MozBoxPack" | "MozBoxShadow" | "MozColumnCount" | "MozColumnFill" | "MozFloatEdge" | "MozForceBrokenImageIcon" | "MozOpacity" | "MozOutline" | "MozOutlineColor" | "MozOutlineStyle" | "MozOutlineWidth" | "MozTextAlignLast" | "MozTextDecorationColor" | "MozTextDecorationLine" | "MozTextDecorationStyle" | "MozTransitionDelay" | "MozTransitionDuration" | "MozTransitionProperty" | "MozTransitionTimingFunction" | "MozUserFocus" | "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" | "colorInterpolation" | "colorRendering" | "glyphOrientationVertical" | "svgFill" | "boldFontWeight" | "@keyframes" | "@properties" | "@fontFace" | "@counterStyle" | "recipe" | "element" | "styles" | "breakpoints" | "block" | "inline" | "isHidden" | "isDisabled" | "theme" | "tokens" | "ref"> & RefAttributes<unknown>> & SubElementComponents<Record<string, never>>;
 //#endregion
-export { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, VariantMap, WithVariant, tasty };
+export { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, ResolveTokenProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, TokenPropsInput, VariantMap, WithVariant, tasty };
 //# sourceMappingURL=tasty.d.ts.map

package/dist/tasty.js

@@ -1,13 +1,14 @@
 import { isSelector } from "./pipeline/index.js";
 import { BASE_STYLES } from "./styles/list.js";
-import { _modAttrs } from "./utils/mod-attrs.js";
-import { mergeStyles } from "./utils/merge-styles.js";
-import { processTokens, stringifyTokens } from "./utils/process-tokens.js";
+import { touch } from "./injector/index.js";
 import { hasKeys } from "./utils/has-keys.js";
-import { useStyles } from "./hooks/useStyles.js";
+import { mergeStyles } from "./utils/merge-styles.js";
+import { computeStyles } from "./compute-styles.js";
+import { _modAttrs } from "./utils/mod-attrs.js";
+import { processTokens } from "./utils/process-tokens.js";
 import { getDisplayName } from "./utils/get-display-name.js";
 import { isValidElementType } from "./utils/is-valid-element-type.js";
-import { createElement, forwardRef, useMemo, useRef } from "react";
+import { Fragment, createElement, forwardRef } from "react";
 //#region src/tasty.tsx
 /**
 * Precalculated entries for performance optimization
@@ -71,6 +72,18 @@ function createSubElement(elementName, definition) {
 	SubElement.displayName = `SubElement(${elementName})`;
 	return SubElement;
 }
+/**
+* Pre-compute the mapping from prop name to token key at component-creation time.
+* Array form: `'progress'` -> `'$progress'`, `'accentColor'` -> `'#accent'`.
+* Object form: entries used as-is.
+*/
+function buildTokenPropsMapping(def) {
+	if (Array.isArray(def)) return def.map((propName) => {
+		if (propName.endsWith("Color") && propName.length > 5) return [propName, `#${propName.slice(0, -5)}`];
+		return [propName, `$${propName}`];
+	});
+	return Object.entries(def);
+}
 function tasty(Component, options) {
 	if (isValidElementType(Component)) return tastyWrap(Component, options);
 	return tastyElement(Component);
@@ -80,15 +93,13 @@ function tastyWrap(Component, options) {
 	const propsWithStyles = ["styles"].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith("Styles")));
 	const _WrappedComponent = forwardRef((props, ref) => {
 		const { as, element, ...restProps } = props;
-		const mergedStylesMap = useMemo(() => {
-			return propsWithStyles.reduce((map, prop) => {
-				const restValue = restProps[prop];
-				const defaultValue = defaultProps[prop];
-				if (restValue != null && defaultValue != null) map[prop] = mergeStyles(defaultValue, restValue);
-				else map[prop] = restValue ?? defaultValue;
-				return map;
-			}, {});
-		}, [propsWithStyles.map((prop) => props[prop])]);
+		const mergedStylesMap = propsWithStyles.reduce((map, prop) => {
+			const restValue = restProps[prop];
+			const defaultValue = defaultProps[prop];
+			if (restValue != null && defaultValue != null) map[prop] = mergeStyles(defaultValue, restValue);
+			else map[prop] = restValue ?? defaultValue;
+			return map;
+		}, {});
 		return createElement(Component, {
 			...defaultProps,
 			...restProps,
@@ -102,7 +113,7 @@ function tastyWrap(Component, options) {
 	return _WrappedComponent;
 }
 function tastyElement(tastyOptions) {
-	const { as: originalAs = "div", element: defaultElement, styles: defaultStyles, styleProps, modProps: modPropsDef, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
+	const { as: originalAs = "div", element: defaultElement, styles: defaultStyles, styleProps, modProps: modPropsDef, tokenProps: tokenPropsDef, variants, tokens: defaultTokens, elements, ...defaultProps } = tastyOptions;
 	let variantStylesMap;
 	if (variants) {
 		let baseStyles = defaultStyles;
@@ -128,11 +139,12 @@ function tastyElement(tastyOptions) {
 	const { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
 	const propsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
 	const modPropsKeys = modPropsDef ? Array.isArray(modPropsDef) ? modPropsDef : Object.keys(modPropsDef) : void 0;
+	const tokenPropsMapping = tokenPropsDef ? buildTokenPropsMapping(tokenPropsDef) : void 0;
+	const classNameCache = /* @__PURE__ */ new Map();
 	const _TastyComponent = forwardRef((allProps, ref) => {
 		const { as, styles: rawStyles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, ...otherProps } = allProps;
 		let styles = rawStyles;
 		let propStyles = null;
-		let propStylesKey = "";
 		for (const prop of propsToCheck) {
 			const key = prop;
 			if (key in otherProps) {
@@ -140,51 +152,9 @@ function tastyElement(tastyOptions) {
 				const value = otherProps[key];
 				propStyles[key] = value;
 				delete otherProps[key];
-				propStylesKey += key + "\0" + value + "\0";
 			}
 		}
 		if (!styles || styles && !hasKeys(styles)) styles = void 0;
-		const propStylesRef = useRef({
-			key: "",
-			styles: null
-		});
-		if (propStylesRef.current.key !== propStylesKey) propStylesRef.current = {
-			key: propStylesKey,
-			styles: propStyles
-		};
-		const baseStyles = variantStylesMap ? variantStylesMap[variant || "default"] ?? variantStylesMap["default"] : defaultStyles;
-		const { className: stylesClassName } = useStyles(useMemo(() => {
-			const currentPropStyles = propStylesRef.current.styles;
-			const hasStyleProps = styles && hasKeys(styles);
-			const hasPropStyles = currentPropStyles && hasKeys(currentPropStyles);
-			if (!hasStyleProps && !hasPropStyles) return baseStyles;
-			return mergeStyles(baseStyles, styles, currentPropStyles);
-		}, [
-			baseStyles,
-			styles,
-			propStylesKey
-		]));
-		const mergedTokens = useMemo(() => {
-			if (!defaultTokens && !tokens) return void 0;
-			if (!defaultTokens) return tokens;
-			if (!tokens) return defaultTokens;
-			return {
-				...defaultTokens,
-				...tokens
-			};
-		}, [stringifyTokens(tokens)]);
-		const processedTokenStyle = useMemo(() => {
-			return processTokens(mergedTokens);
-		}, [mergedTokens]);
-		const mergedStyle = useMemo(() => {
-			if (!processedTokenStyle && !style) return void 0;
-			if (!processedTokenStyle) return style;
-			if (!style) return processedTokenStyle;
-			return {
-				...processedTokenStyle,
-				...style
-			};
-		}, [processedTokenStyle, style]);
 		let propMods;
 		if (modPropsKeys) {
 			for (const key of modPropsKeys) if (key in otherProps) {
@@ -193,13 +163,50 @@ function tastyElement(tastyOptions) {
 				delete otherProps[key];
 			}
 		}
+		let propTokens;
+		if (tokenPropsMapping) {
+			for (const [propName, tokenKey] of tokenPropsMapping) if (propName in otherProps) {
+				if (!propTokens) propTokens = {};
+				propTokens[tokenKey] = otherProps[propName];
+				delete otherProps[propName];
+			}
+		}
+		const baseStyles = variantStylesMap ? variantStylesMap[variant || "default"] ?? variantStylesMap["default"] : defaultStyles;
+		const hasInstanceStyles = styles && hasKeys(styles);
+		const hasPropStyles = propStyles && hasKeys(propStyles);
+		const allStyles = hasInstanceStyles || hasPropStyles ? mergeStyles(baseStyles, styles, propStyles) : baseStyles;
+		const useFactoryCache = typeof document !== "undefined";
+		let stylesResult;
+		if (useFactoryCache && allStyles === baseStyles && classNameCache.has(allStyles)) {
+			stylesResult = { className: classNameCache.get(allStyles) };
+			touch(stylesResult.className);
+		} else {
+			stylesResult = computeStyles(allStyles);
+			if (useFactoryCache && allStyles === baseStyles) classNameCache.set(allStyles, stylesResult.className);
+		}
+		let mergedTokens;
+		if (defaultTokens || tokens || propTokens) if (!defaultTokens && !propTokens) mergedTokens = tokens;
+		else if (!tokens && !propTokens) mergedTokens = defaultTokens;
+		else mergedTokens = {
+			...defaultTokens,
+			...tokens,
+			...propTokens
+		};
+		const processedTokenStyle = processTokens(mergedTokens);
+		let mergedStyle;
+		if (processedTokenStyle || style) if (!processedTokenStyle) mergedStyle = style;
+		else if (!style) mergedStyle = processedTokenStyle;
+		else mergedStyle = {
+			...processedTokenStyle,
+			...style
+		};
 		const mergedMods = propMods ? {
 			...mods,
 			...propMods
 		} : mods;
 		let modDataAttrs;
 		if (mergedMods) modDataAttrs = _modAttrs(mergedMods);
-		const finalClassName = [userClassName || "", stylesClassName].filter(Boolean).join(" ");
+		const finalClassName = [userClassName || "", stylesResult.className].filter(Boolean).join(" ");
 		const elementProps = {
 			"data-element": element || defaultElement,
 			"data-qa": qa || defaultQa,
@@ -212,7 +219,12 @@ function tastyElement(tastyOptions) {
 			ref
 		};
 		handleIsProperties(elementProps);
-		return createElement(as ?? originalAs, elementProps);
+		const el = createElement(as ?? originalAs, elementProps);
+		if (stylesResult.css) return createElement(Fragment, null, createElement("style", {
+			"data-tasty-rsc": "",
+			dangerouslySetInnerHTML: { __html: stylesResult.css }
+		}), el);
+		return el;
 	});
 	_TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
 	if (elements) {

package/dist/tasty.js.map

@@ -1 +1 @@
-{"version":3,"file":"tasty.js","names":["modAttrs"],"sources":["../src/tasty.tsx"],"sourcesContent":["import type {\n  AllHTMLAttributes,\n  ComponentType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from 'react';\nimport { createElement, forwardRef, useMemo, useRef } from 'react';\nimport { useStyles } from './hooks/useStyles';\nimport { BASE_STYLES } from './styles/list';\nimport type { Styles, StylesInterface } from './styles/types';\nimport type {\n  AllBaseProps,\n  BaseProps,\n  BaseStyleProps,\n  ModValue,\n  Mods,\n  Props,\n  Tokens,\n} from './types';\nimport { getDisplayName } from './utils/get-display-name';\nimport { isValidElementType } from './utils/is-valid-element-type';\nimport { mergeStyles } from './utils/merge-styles';\nimport { isSelector } from './pipeline';\nimport { hasKeys } from './utils/has-keys';\nimport { modAttrs } from './utils/mod-attrs';\nimport { processTokens, stringifyTokens } from './utils/process-tokens';\n\nimport type { StyleValue, StyleValueStateMap } from './utils/styles';\n\n/**\n * Mapping of is* properties to their corresponding HTML attributes\n */\nconst IS_PROPERTIES_MAP = {\n  isDisabled: 'disabled',\n  isHidden: 'hidden',\n  isChecked: 'checked',\n} as const;\n\n/**\n * Precalculated entries for performance optimization\n */\nconst IS_PROPERTIES_ENTRIES = Object.entries(IS_PROPERTIES_MAP);\n\n/**\n * Helper function to handle is* properties consistently\n * Transforms is* props to HTML attributes and adds corresponding data-* attributes\n */\nfunction handleIsProperties(props: Record<string, unknown>) {\n  for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {\n    if (isProperty in props) {\n      props[targetAttribute] = props[isProperty];\n      delete props[isProperty];\n    }\n\n    // Add data-* attribute if target attribute is truthy and doesn't already exist\n    const dataAttribute = `data-${targetAttribute}`;\n    if (!(dataAttribute in props) && props[targetAttribute]) {\n      props[dataAttribute] = '';\n    }\n  }\n}\n\n/**\n * Creates a sub-element component for compound component patterns.\n * Sub-elements are lightweight components with data-element attribute for CSS targeting.\n */\nfunction createSubElement<Tag extends keyof JSX.IntrinsicElements>(\n  elementName: string,\n  definition: SubElementDefinition<Tag>,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n> {\n  // Normalize definition to object form\n  const config =\n    typeof definition === 'string'\n      ? { as: definition as Tag }\n      : (definition as { as?: Tag; qa?: string; qaVal?: string | number });\n\n  const tag = config.as ?? ('div' as Tag);\n  const defaultQa = config.qa;\n  const defaultQaVal = config.qaVal;\n\n  const SubElement = forwardRef<unknown, SubElementProps<Tag>>((props, ref) => {\n    const {\n      qa,\n      qaVal,\n      mods,\n      tokens,\n      isDisabled,\n      isHidden,\n      isChecked,\n      className,\n      style,\n      ...htmlProps\n    } = props as SubElementProps<Tag> & {\n      className?: string;\n      style?: Record<string, unknown>;\n    };\n\n    // Build mod attributes\n    let modDataAttrs: Record<string, unknown> | undefined;\n    if (mods) {\n      modDataAttrs = modAttrs(mods as Mods) as Record<string, unknown>;\n    }\n\n    // Process tokens into inline style properties\n    const tokenStyle = tokens\n      ? (processTokens(tokens) as Record<string, unknown>)\n      : undefined;\n\n    // Merge token styles with explicit style prop (style has priority)\n    let mergedStyle: Record<string, unknown> | undefined;\n    if (tokenStyle || style) {\n      mergedStyle =\n        tokenStyle && style\n          ? { ...tokenStyle, ...style }\n          : ((tokenStyle ?? style) as Record<string, unknown>);\n    }\n\n    const elementProps = {\n      'data-element': elementName,\n      'data-qa': qa ?? defaultQa,\n      'data-qaval': qaVal ?? defaultQaVal,\n      ...(modDataAttrs || {}),\n      ...htmlProps,\n      className,\n      style: mergedStyle,\n      isDisabled,\n      isHidden,\n      isChecked,\n      ref,\n    } as Record<string, unknown>;\n\n    // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)\n    handleIsProperties(elementProps);\n\n    // Clean up undefined data attributes\n    if (elementProps['data-qa'] === undefined) delete elementProps['data-qa'];\n    if (elementProps['data-qaval'] === undefined)\n      delete elementProps['data-qaval'];\n\n    return createElement(tag, elementProps);\n  });\n\n  SubElement.displayName = `SubElement(${elementName})`;\n\n  return SubElement as ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n  >;\n}\n\ntype StyleList = readonly (keyof {\n  [key in keyof StylesInterface]: StylesInterface[key];\n})[];\n\n// ============================================================================\n// Mod props types — expose modifier keys as top-level component props\n// ============================================================================\n\n/** Type descriptor for a single mod prop: a JS constructor or an enum array. */\nexport type ModPropDef =\n  | BooleanConstructor\n  | StringConstructor\n  | NumberConstructor\n  | readonly string[];\n\n/** Array form: list of mod key names (types default to ModValue). */\ntype ModPropsList = readonly string[];\n\n/** Object form: map of mod key names to type descriptors. */\ntype ModPropsMap = Readonly<Record<string, ModPropDef>>;\n\n/** Either array or object form accepted by `modProps` option. */\nexport type ModPropsInput = ModPropsList | ModPropsMap;\n\n/** Resolve a single ModPropDef to its TypeScript type. */\nexport type ResolveModPropDef<T> = T extends BooleanConstructor\n  ? boolean\n  : T extends StringConstructor\n    ? string\n    : T extends NumberConstructor\n      ? number\n      : T extends readonly (infer U)[]\n        ? U\n        : ModValue;\n\n/** Resolve an entire `modProps` definition to the component prop types it adds. */\nexport type ResolveModProps<M extends ModPropsInput> =\n  M extends readonly (infer K)[]\n    ? Partial<Record<K & string, ModValue>>\n    : M extends Record<string, ModPropDef>\n      ? { [key in keyof M & string]?: ResolveModPropDef<M[key]> }\n      : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n        {};\n\nexport type PropsWithStyles = {\n  styles?: Styles;\n} & Omit<Props, 'styles'>;\n\nexport type VariantMap = Record<string, Styles>;\n\nexport interface WithVariant<V extends VariantMap> {\n  variant?: keyof V;\n}\n\n// ============================================================================\n// Sub-element types for compound components\n// ============================================================================\n\n/**\n * Definition for a sub-element. Can be either:\n * - A tag name string (e.g., 'div', 'span')\n * - An object with configuration options\n */\nexport type SubElementDefinition<\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> =\n  | Tag\n  | {\n      as?: Tag;\n      qa?: string;\n      qaVal?: string | number;\n    };\n\n/**\n * Map of sub-element definitions.\n * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)\n */\nexport type ElementsDefinition = Record<\n  string,\n  SubElementDefinition<keyof JSX.IntrinsicElements>\n>;\n\n/**\n * Resolves the tag from a SubElementDefinition\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ResolveElementTag<T extends SubElementDefinition<any>> = T extends string\n  ? T\n  : T extends { as?: infer Tag }\n    ? Tag extends keyof JSX.IntrinsicElements\n      ? Tag\n      : 'div'\n    : 'div';\n\n/**\n * Props for sub-element components.\n * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)\n */\nexport type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> =\n  Omit<\n    JSX.IntrinsicElements[Tag],\n    'ref' | 'color' | 'content' | 'translate'\n  > & {\n    qa?: string;\n    qaVal?: string | number;\n    mods?: Mods;\n    tokens?: Tokens;\n    isDisabled?: boolean;\n    isHidden?: boolean;\n    isChecked?: boolean;\n  };\n\n/**\n * Generates the sub-element component types from an ElementsDefinition\n */\ntype SubElementComponents<E extends ElementsDefinition> = {\n  [K in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> &\n      RefAttributes<\n        ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[ResolveElementTag<E[K]>]\n          : Element\n      >\n  >;\n};\n\n/**\n * Base type containing common properties shared between TastyProps and TastyElementOptions.\n * Separated to avoid code duplication while allowing different type constraints.\n */\ntype TastyBaseProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  M extends ModPropsInput = readonly never[],\n> = {\n  /** Default styles of the element. */\n  styles?: Styles;\n  /** The list of styles that can be provided by props */\n  styleProps?: K;\n  /** Modifier keys exposed as top-level component props (array or typed object form). */\n  modProps?: M;\n  element?: BaseProps['element'];\n  variants?: V;\n  /** Default tokens for inline CSS custom properties */\n  tokens?: Tokens;\n  /** Sub-element definitions for compound components */\n  elements?: E;\n} & Pick<BaseProps, 'qa' | 'qaVal'> &\n  WithVariant<V>;\n\nexport type TastyProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  DefaultProps = Props,\n  M extends ModPropsInput = readonly never[],\n> = TastyBaseProps<K, V, E, M> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: string | ComponentType<any>;\n} & Partial<\n    Omit<DefaultProps, 'as' | 'styles' | 'styleProps' | 'modProps' | 'tokens'>\n  >;\n\n/**\n * TastyElementOptions is used for the element-creation overload of tasty().\n * It includes a Tag generic that allows TypeScript to infer the correct\n * HTML element type from the `as` prop.\n *\n * Note: Uses a separate index signature with `unknown` instead of inheriting\n * from Props (which has `any`) to ensure strict type checking for styles.\n */\nexport type TastyElementOptions<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n> = TastyBaseProps<K, V, E, M> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: Tag | ComponentType<any>;\n} & Record<string, unknown>;\n\nexport type AllBasePropsWithMods<\n  K extends StyleList,\n  M extends ModPropsInput = readonly never[],\n> = AllBaseProps & {\n  [key in K[number]]?:\n    | StyleValue<StylesInterface[key]>\n    | StyleValueStateMap<StylesInterface[key]>;\n} & BaseStyleProps &\n  ResolveModProps<M>;\n\n/**\n * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.\n * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.\n */\ntype TastySpecificKeys =\n  | 'as'\n  | 'qa'\n  | 'qaVal'\n  | 'element'\n  | 'styles'\n  | 'breakpoints'\n  | 'block'\n  | 'inline'\n  | 'mods'\n  | 'isHidden'\n  | 'isDisabled'\n  | 'css'\n  | 'style'\n  | 'theme'\n  | 'tokens'\n  | 'ref'\n  | 'color';\n\n/**\n * Props type for tasty elements that combines:\n * - AllBasePropsWithMods for style props with strict tokens type\n * - HTML attributes for flexibility (properly typed based on tag)\n * - Variant support\n *\n * AllBasePropsWithMods carries generic AllHTMLAttributes which can conflict\n * with tag-specific types from JSX.IntrinsicElements (e.g. `src` is `string`\n * in AllHTMLAttributes but `string | Blob` in ImgHTMLAttributes). To avoid\n * intersection-narrowing, we Omit tag-specific keys from AllBasePropsWithMods\n * (keeping TastySpecificKeys and style props) and let JSX.IntrinsicElements\n * supply the authoritative HTML attribute types.\n */\nexport type TastyElementProps<\n  K extends StyleList,\n  V extends VariantMap,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n> = Omit<\n  AllBasePropsWithMods<K, M>,\n  Exclude<keyof JSX.IntrinsicElements[Tag], TastySpecificKeys | K[number]>\n> &\n  WithVariant<V> &\n  Omit<\n    Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> &\n      JSX.IntrinsicElements[Tag],\n    TastySpecificKeys | K[number]\n  >;\n\ntype TastyComponentPropsWithDefaults<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props>,\n> = keyof DefaultProps extends never\n  ? Props\n  : {\n      [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];\n    } & {\n      [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];\n    };\n\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n>(\n  options: TastyElementOptions<K, V, E, Tag, M>,\n  secondArg?: never,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<TastyElementProps<K, V, Tag, M>> & RefAttributes<unknown>\n> &\n  SubElementComponents<E>;\nexport function tasty<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props> = Partial<Props>,\n>(\n  Component: ComponentType<Props>,\n  options?: TastyProps<never, never, Record<string, never>, Props>,\n): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Implementation\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  _C = Record<string, unknown>,\n>(Component: any, options?: any) {\n  if (isValidElementType(Component)) {\n    return tastyWrap(Component as ComponentType<any>, options);\n  }\n\n  return tastyElement(Component as TastyProps<K, V>);\n}\n\nfunction tastyWrap<\n  P extends PropsWithStyles,\n  DefaultProps extends Partial<P> = Partial<P>,\n>(\n  Component: ComponentType<P>,\n  options?: TastyProps<never, never, P>,\n): ComponentType<TastyComponentPropsWithDefaults<P, DefaultProps>> {\n  const {\n    as: extendTag,\n    element: extendElement,\n    ...defaultProps\n  } = (options ?? {}) as TastyProps<never, never, P>;\n\n  const propsWithStyles = ['styles'].concat(\n    Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')),\n  );\n\n  const _WrappedComponent = forwardRef<any, any>((props, ref) => {\n    const { as, element, ...restProps } = props as Record<string, unknown>;\n    const propsWithStylesValues = propsWithStyles.map(\n      (prop) => (props as any)[prop],\n    );\n\n    const mergedStylesMap: Styles | undefined = useMemo(() => {\n      return propsWithStyles.reduce((map, prop) => {\n        const restValue = (restProps as any)[prop];\n        const defaultValue = (defaultProps as any)[prop];\n\n        if (restValue != null && defaultValue != null) {\n          (map as any)[prop] = mergeStyles(defaultValue, restValue);\n        } else {\n          (map as any)[prop] = restValue ?? defaultValue;\n        }\n\n        return map;\n      }, {} as Styles);\n    }, [propsWithStylesValues]);\n\n    const elementProps = {\n      ...(defaultProps as unknown as Record<string, unknown>),\n      ...(restProps as unknown as Record<string, unknown>),\n      ...(mergedStylesMap as unknown as Record<string, unknown>),\n      as: (as as string | undefined) ?? extendTag,\n      element: (element as string | undefined) || extendElement,\n      ref,\n    } as unknown as P;\n\n    return createElement(Component as ComponentType<P>, elementProps);\n  });\n\n  _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(\n    Component,\n    (defaultProps as any).qa ?? (extendTag as any) ?? 'Anonymous',\n  )})`;\n\n  return _WrappedComponent as unknown as ComponentType<\n    TastyComponentPropsWithDefaults<P, DefaultProps>\n  >;\n}\n\nfunction tastyElement<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition,\n>(tastyOptions: TastyProps<K, V, E>) {\n  const {\n    as: originalAs = 'div',\n    element: defaultElement,\n    styles: defaultStyles,\n    styleProps,\n    modProps: modPropsDef,\n    variants,\n    tokens: defaultTokens,\n    elements,\n    ...defaultProps\n  } = tastyOptions;\n\n  // Pre-compute merged styles for each variant (if variants are defined)\n  // This avoids creating separate component instances per variant\n  let variantStylesMap: Record<string, Styles | undefined> | undefined;\n  if (variants) {\n    // Split defaultStyles: extend-mode state maps (no '' key, non-selector)\n    // are pulled out and applied AFTER variant merge so they survive\n    // replace-mode maps in variants.\n    let baseStyles = defaultStyles;\n    let extensionStyles: Styles | undefined;\n\n    if (defaultStyles) {\n      for (const key of Object.keys(defaultStyles)) {\n        if (isSelector(key)) continue;\n\n        const value = (defaultStyles as Record<string, unknown>)[key];\n\n        if (\n          typeof value === 'object' &&\n          value !== null &&\n          !Array.isArray(value) &&\n          !('' in value)\n        ) {\n          if (!extensionStyles) {\n            baseStyles = { ...defaultStyles } as Styles;\n            extensionStyles = {} as Styles;\n          }\n          (extensionStyles as Record<string, unknown>)[key] = value;\n          delete (baseStyles as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    const variantEntries = Object.entries(variants) as [string, Styles][];\n    variantStylesMap = variantEntries.reduce(\n      (map, [variant, variantStyles]) => {\n        map[variant] = extensionStyles\n          ? mergeStyles(baseStyles, variantStyles, extensionStyles)\n          : mergeStyles(baseStyles, variantStyles);\n        return map;\n      },\n      {} as Record<string, Styles | undefined>,\n    );\n    // Ensure 'default' variant always exists\n    if (!variantStylesMap['default']) {\n      variantStylesMap['default'] = defaultStyles;\n    }\n  }\n\n  const {\n    qa: defaultQa,\n    qaVal: defaultQaVal,\n    ...otherDefaultProps\n  } = defaultProps ?? {};\n\n  const propsToCheck = styleProps\n    ? (styleProps as StyleList).concat(BASE_STYLES)\n    : BASE_STYLES;\n\n  const modPropsKeys: string[] | undefined = modPropsDef\n    ? ((Array.isArray(modPropsDef)\n        ? modPropsDef\n        : Object.keys(modPropsDef)) as string[])\n    : undefined;\n\n  const _TastyComponent = forwardRef<\n    unknown,\n    AllBasePropsWithMods<K> & WithVariant<V>\n  >((allProps, ref) => {\n    const {\n      as,\n      styles: rawStyles,\n      variant,\n      mods,\n      element,\n      qa,\n      qaVal,\n      className: userClassName,\n      tokens,\n      style,\n      ...otherProps\n    } = allProps as Record<string, unknown> as AllBasePropsWithMods<K> &\n      WithVariant<V> & {\n        className?: string;\n        tokens?: Tokens;\n        style?: Record<string, unknown>;\n      };\n\n    let styles = rawStyles;\n\n    let propStyles: Styles | null = null;\n    let propStylesKey = '';\n\n    for (const prop of propsToCheck) {\n      const key = prop as unknown as string;\n\n      if (key in otherProps) {\n        if (!propStyles) propStyles = {};\n        const value = (otherProps as any)[key];\n        (propStyles as any)[key] = value;\n        delete (otherProps as any)[key];\n        propStylesKey += key + '\\0' + value + '\\0';\n      }\n    }\n\n    if (!styles || (styles && !hasKeys(styles as Record<string, unknown>))) {\n      styles = undefined as unknown as Styles;\n    }\n\n    // Stabilize propStyles reference: only update when content actually changes\n    const propStylesRef = useRef<{ key: string; styles: Styles | null }>({\n      key: '',\n      styles: null,\n    });\n    if (propStylesRef.current.key !== propStylesKey) {\n      propStylesRef.current = { key: propStylesKey, styles: propStyles };\n    }\n\n    // Determine base styles: use variant styles if available, otherwise default styles\n    const baseStyles = variantStylesMap\n      ? (variantStylesMap[(variant as string) || 'default'] ??\n        variantStylesMap['default'])\n      : defaultStyles;\n\n    // Merge base styles with instance styles and prop styles\n    const allStyles = useMemo(() => {\n      const currentPropStyles = propStylesRef.current.styles;\n      const hasStyleProps =\n        styles && hasKeys(styles as Record<string, unknown>);\n      const hasPropStyles = currentPropStyles && hasKeys(currentPropStyles);\n\n      if (!hasStyleProps && !hasPropStyles) {\n        return baseStyles;\n      }\n\n      return mergeStyles(\n        baseStyles,\n        styles as Styles,\n        currentPropStyles as Styles,\n      );\n    }, [baseStyles, styles, propStylesKey]);\n\n    // Use the useStyles hook for style generation and injection\n    const { className: stylesClassName } = useStyles(allStyles);\n\n    // Merge default tokens with instance tokens (instance overrides defaults)\n    const tokensKey = stringifyTokens(tokens as Tokens | undefined);\n    const mergedTokens = useMemo(() => {\n      if (!defaultTokens && !tokens) return undefined;\n      if (!defaultTokens) return tokens as Tokens;\n      if (!tokens) return defaultTokens;\n      return { ...defaultTokens, ...tokens } as Tokens;\n    }, [tokensKey]);\n\n    // Process merged tokens into inline style properties\n    const processedTokenStyle = useMemo(() => {\n      return processTokens(mergedTokens);\n    }, [mergedTokens]);\n\n    // Merge processed tokens with explicit style prop (style has priority)\n    const mergedStyle = useMemo(() => {\n      if (!processedTokenStyle && !style) return undefined;\n      if (!processedTokenStyle) return style;\n      if (!style) return processedTokenStyle;\n      return { ...processedTokenStyle, ...style };\n    }, [processedTokenStyle, style]);\n\n    let propMods: Record<string, ModValue> | undefined;\n    if (modPropsKeys) {\n      for (const key of modPropsKeys) {\n        if (key in otherProps) {\n          if (!propMods) propMods = {};\n          propMods[key] = (otherProps as Record<string, unknown>)[\n            key\n          ] as ModValue;\n          delete (otherProps as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    const mergedMods = propMods\n      ? { ...(mods as Record<string, ModValue>), ...propMods }\n      : (mods as Record<string, ModValue> | undefined);\n\n    let modDataAttrs: Record<string, unknown> | undefined;\n    if (mergedMods) {\n      modDataAttrs = modAttrs(mergedMods as unknown as Mods) as Record<\n        string,\n        unknown\n      >;\n    }\n\n    // Merge user className with generated className\n    const finalClassName = [(userClassName as string) || '', stylesClassName]\n      .filter(Boolean)\n      .join(' ');\n\n    const elementProps = {\n      'data-element': (element as string | undefined) || defaultElement,\n      'data-qa': (qa as string | undefined) || defaultQa,\n      'data-qaval': (qaVal as string | undefined) || defaultQaVal,\n      ...(otherDefaultProps as unknown as Record<string, unknown>),\n      ...(modDataAttrs || {}),\n      ...(otherProps as unknown as Record<string, unknown>),\n      className: finalClassName,\n      style: mergedStyle,\n      ref,\n    } as Record<string, unknown>;\n\n    // Apply the helper to handle is* properties\n    handleIsProperties(elementProps);\n\n    const renderedElement = createElement(\n      (as as string | 'div') ?? originalAs,\n      elementProps,\n    );\n\n    return renderedElement;\n  });\n\n  _TastyComponent.displayName = `TastyComponent(${\n    (defaultProps as any).qa || originalAs\n  })`;\n\n  // Attach sub-element components if elements are defined\n  if (elements) {\n    const subElements = Object.entries(elements).reduce(\n      (acc, [name, definition]) => {\n        acc[name] = createSubElement(\n          name,\n          definition as SubElementDefinition<keyof JSX.IntrinsicElements>,\n        );\n        return acc;\n      },\n      {} as Record<string, ForwardRefExoticComponent<any>>,\n    );\n\n    return Object.assign(_TastyComponent, subElements);\n  }\n\n  return _TastyComponent;\n}\n\nexport const Element = tasty({});\n"],"mappings":"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"}
+{"version":3,"file":"tasty.js","names":["modAttrs"],"sources":["../src/tasty.tsx"],"sourcesContent":["import type {\n  AllHTMLAttributes,\n  ComponentType,\n  ForwardRefExoticComponent,\n  JSX,\n  PropsWithoutRef,\n  RefAttributes,\n} from 'react';\nimport { createElement, forwardRef, Fragment } from 'react';\nimport type { ComputeStylesResult } from './compute-styles';\nimport { computeStyles } from './compute-styles';\nimport { BASE_STYLES } from './styles/list';\nimport type { Styles, StylesInterface } from './styles/types';\nimport type {\n  AllBaseProps,\n  BaseProps,\n  BaseStyleProps,\n  ModValue,\n  Mods,\n  Props,\n  TokenValue,\n  Tokens,\n} from './types';\nimport { getDisplayName } from './utils/get-display-name';\nimport { isValidElementType } from './utils/is-valid-element-type';\nimport { mergeStyles } from './utils/merge-styles';\nimport { isSelector } from './pipeline';\nimport { hasKeys } from './utils/has-keys';\nimport { modAttrs } from './utils/mod-attrs';\nimport { processTokens } from './utils/process-tokens';\nimport { touch } from './injector';\n\nimport type { StyleValue, StyleValueStateMap } from './utils/styles';\n\n/**\n * Mapping of is* properties to their corresponding HTML attributes\n */\nconst IS_PROPERTIES_MAP = {\n  isDisabled: 'disabled',\n  isHidden: 'hidden',\n  isChecked: 'checked',\n} as const;\n\n/**\n * Precalculated entries for performance optimization\n */\nconst IS_PROPERTIES_ENTRIES = Object.entries(IS_PROPERTIES_MAP);\n\n/**\n * Helper function to handle is* properties consistently\n * Transforms is* props to HTML attributes and adds corresponding data-* attributes\n */\nfunction handleIsProperties(props: Record<string, unknown>) {\n  for (const [isProperty, targetAttribute] of IS_PROPERTIES_ENTRIES) {\n    if (isProperty in props) {\n      props[targetAttribute] = props[isProperty];\n      delete props[isProperty];\n    }\n\n    // Add data-* attribute if target attribute is truthy and doesn't already exist\n    const dataAttribute = `data-${targetAttribute}`;\n    if (!(dataAttribute in props) && props[targetAttribute]) {\n      props[dataAttribute] = '';\n    }\n  }\n}\n\n/**\n * Creates a sub-element component for compound component patterns.\n * Sub-elements are lightweight components with data-element attribute for CSS targeting.\n */\nfunction createSubElement<Tag extends keyof JSX.IntrinsicElements>(\n  elementName: string,\n  definition: SubElementDefinition<Tag>,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n> {\n  // Normalize definition to object form\n  const config =\n    typeof definition === 'string'\n      ? { as: definition as Tag }\n      : (definition as { as?: Tag; qa?: string; qaVal?: string | number });\n\n  const tag = config.as ?? ('div' as Tag);\n  const defaultQa = config.qa;\n  const defaultQaVal = config.qaVal;\n\n  const SubElement = forwardRef<unknown, SubElementProps<Tag>>((props, ref) => {\n    const {\n      qa,\n      qaVal,\n      mods,\n      tokens,\n      isDisabled,\n      isHidden,\n      isChecked,\n      className,\n      style,\n      ...htmlProps\n    } = props as SubElementProps<Tag> & {\n      className?: string;\n      style?: Record<string, unknown>;\n    };\n\n    // Build mod attributes\n    let modDataAttrs: Record<string, unknown> | undefined;\n    if (mods) {\n      modDataAttrs = modAttrs(mods as Mods) as Record<string, unknown>;\n    }\n\n    // Process tokens into inline style properties\n    const tokenStyle = tokens\n      ? (processTokens(tokens) as Record<string, unknown>)\n      : undefined;\n\n    // Merge token styles with explicit style prop (style has priority)\n    let mergedStyle: Record<string, unknown> | undefined;\n    if (tokenStyle || style) {\n      mergedStyle =\n        tokenStyle && style\n          ? { ...tokenStyle, ...style }\n          : ((tokenStyle ?? style) as Record<string, unknown>);\n    }\n\n    const elementProps = {\n      'data-element': elementName,\n      'data-qa': qa ?? defaultQa,\n      'data-qaval': qaVal ?? defaultQaVal,\n      ...(modDataAttrs || {}),\n      ...htmlProps,\n      className,\n      style: mergedStyle,\n      isDisabled,\n      isHidden,\n      isChecked,\n      ref,\n    } as Record<string, unknown>;\n\n    // Handle is* properties (isDisabled -> disabled + data-disabled, etc.)\n    handleIsProperties(elementProps);\n\n    // Clean up undefined data attributes\n    if (elementProps['data-qa'] === undefined) delete elementProps['data-qa'];\n    if (elementProps['data-qaval'] === undefined)\n      delete elementProps['data-qaval'];\n\n    return createElement(tag, elementProps);\n  });\n\n  SubElement.displayName = `SubElement(${elementName})`;\n\n  return SubElement as ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<Tag>> & RefAttributes<unknown>\n  >;\n}\n\ntype StyleList = readonly (keyof {\n  [key in keyof StylesInterface]: StylesInterface[key];\n})[];\n\n// ============================================================================\n// Mod props types — expose modifier keys as top-level component props\n// ============================================================================\n\n/** Type descriptor for a single mod prop: a JS constructor or an enum array. */\nexport type ModPropDef =\n  | BooleanConstructor\n  | StringConstructor\n  | NumberConstructor\n  | readonly string[];\n\n/** Array form: list of mod key names (types default to ModValue). */\ntype ModPropsList = readonly string[];\n\n/** Object form: map of mod key names to type descriptors. */\ntype ModPropsMap = Readonly<Record<string, ModPropDef>>;\n\n/** Either array or object form accepted by `modProps` option. */\nexport type ModPropsInput = ModPropsList | ModPropsMap;\n\n/** Resolve a single ModPropDef to its TypeScript type. */\nexport type ResolveModPropDef<T> = T extends BooleanConstructor\n  ? boolean\n  : T extends StringConstructor\n    ? string\n    : T extends NumberConstructor\n      ? number\n      : T extends readonly (infer U)[]\n        ? U\n        : ModValue;\n\n/** Resolve an entire `modProps` definition to the component prop types it adds. */\nexport type ResolveModProps<M extends ModPropsInput> =\n  M extends readonly (infer K)[]\n    ? Partial<Record<K & string, ModValue>>\n    : M extends Record<string, ModPropDef>\n      ? { [key in keyof M & string]?: ResolveModPropDef<M[key]> }\n      : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n        {};\n\n// ============================================================================\n// Token props types — expose token keys as top-level component props\n// ============================================================================\n\n/** A token key with `$` or `#` prefix. */\ntype TokenPropKey = `$${string}` | `#${string}`;\n\n/** Array form: list of prop names. Names ending in `Color` map to `#` color tokens. */\ntype TokenPropsList = readonly string[];\n\n/** Object form: prop name -> token key with explicit `$`/`#` prefix. */\ntype TokenPropsMap = Readonly<Record<string, TokenPropKey>>;\n\n/** Either array or object form accepted by `tokenProps` option. */\nexport type TokenPropsInput = TokenPropsList | TokenPropsMap;\n\n/** Resolve a `tokenProps` definition to the component prop types it adds. */\nexport type ResolveTokenProps<TP extends TokenPropsInput> =\n  TP extends readonly (infer K)[]\n    ? Partial<Record<K & string, TokenValue>>\n    : TP extends Record<string, TokenPropKey>\n      ? Partial<Record<keyof TP & string, TokenValue>>\n      : // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n        {};\n\n/**\n * Pre-compute the mapping from prop name to token key at component-creation time.\n * Array form: `'progress'` -> `'$progress'`, `'accentColor'` -> `'#accent'`.\n * Object form: entries used as-is.\n */\nfunction buildTokenPropsMapping(\n  def: TokenPropsInput,\n): [propName: string, tokenKey: string][] {\n  if (Array.isArray(def)) {\n    return (def as string[]).map((propName) => {\n      if (propName.endsWith('Color') && propName.length > 5) {\n        return [propName, `#${propName.slice(0, -5)}`];\n      }\n      return [propName, `$${propName}`];\n    });\n  }\n  return Object.entries(def);\n}\n\nexport type PropsWithStyles = {\n  styles?: Styles;\n} & Omit<Props, 'styles'>;\n\nexport type VariantMap = Record<string, Styles>;\n\nexport interface WithVariant<V extends VariantMap> {\n  variant?: keyof V;\n}\n\n// ============================================================================\n// Sub-element types for compound components\n// ============================================================================\n\n/**\n * Definition for a sub-element. Can be either:\n * - A tag name string (e.g., 'div', 'span')\n * - An object with configuration options\n */\nexport type SubElementDefinition<\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n> =\n  | Tag\n  | {\n      as?: Tag;\n      qa?: string;\n      qaVal?: string | number;\n    };\n\n/**\n * Map of sub-element definitions.\n * Keys become the sub-component names (e.g., { Icon: 'span' } -> Component.Icon)\n */\nexport type ElementsDefinition = Record<\n  string,\n  SubElementDefinition<keyof JSX.IntrinsicElements>\n>;\n\n/**\n * Resolves the tag from a SubElementDefinition\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype ResolveElementTag<T extends SubElementDefinition<any>> = T extends string\n  ? T\n  : T extends { as?: infer Tag }\n    ? Tag extends keyof JSX.IntrinsicElements\n      ? Tag\n      : 'div'\n    : 'div';\n\n/**\n * Props for sub-element components.\n * Combines HTML attributes with tasty-specific props (qa, qaVal, mods, tokens, isDisabled, etc.)\n */\nexport type SubElementProps<Tag extends keyof JSX.IntrinsicElements = 'div'> =\n  Omit<\n    JSX.IntrinsicElements[Tag],\n    'ref' | 'color' | 'content' | 'translate'\n  > & {\n    qa?: string;\n    qaVal?: string | number;\n    mods?: Mods;\n    tokens?: Tokens;\n    isDisabled?: boolean;\n    isHidden?: boolean;\n    isChecked?: boolean;\n  };\n\n/**\n * Generates the sub-element component types from an ElementsDefinition\n */\ntype SubElementComponents<E extends ElementsDefinition> = {\n  [K in keyof E]: ForwardRefExoticComponent<\n    PropsWithoutRef<SubElementProps<ResolveElementTag<E[K]>>> &\n      RefAttributes<\n        ResolveElementTag<E[K]> extends keyof HTMLElementTagNameMap\n          ? HTMLElementTagNameMap[ResolveElementTag<E[K]>]\n          : Element\n      >\n  >;\n};\n\n/**\n * Base type containing common properties shared between TastyProps and TastyElementOptions.\n * Separated to avoid code duplication while allowing different type constraints.\n */\ntype TastyBaseProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n> = {\n  /** Default styles of the element. */\n  styles?: Styles;\n  /** The list of styles that can be provided by props */\n  styleProps?: K;\n  /** Modifier keys exposed as top-level component props (array or typed object form). */\n  modProps?: M;\n  /** Token keys exposed as top-level component props (array or typed object form). */\n  tokenProps?: TP;\n  element?: BaseProps['element'];\n  variants?: V;\n  /** Default tokens for inline CSS custom properties */\n  tokens?: Tokens;\n  /** Sub-element definitions for compound components */\n  elements?: E;\n} & Pick<BaseProps, 'qa' | 'qaVal'> &\n  WithVariant<V>;\n\nexport type TastyProps<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  DefaultProps = Props,\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n> = TastyBaseProps<K, V, E, M, TP> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: string | ComponentType<any>;\n} & Partial<\n    Omit<\n      DefaultProps,\n      'as' | 'styles' | 'styleProps' | 'modProps' | 'tokenProps' | 'tokens'\n    >\n  >;\n\n/**\n * TastyElementOptions is used for the element-creation overload of tasty().\n * It includes a Tag generic that allows TypeScript to infer the correct\n * HTML element type from the `as` prop.\n *\n * Note: Uses a separate index signature with `unknown` instead of inheriting\n * from Props (which has `any`) to ensure strict type checking for styles.\n */\nexport type TastyElementOptions<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n> = TastyBaseProps<K, V, E, M, TP> & {\n  /** The tag name of the element or a React component. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  as?: Tag | ComponentType<any>;\n} & Record<string, unknown>;\n\nexport type AllBasePropsWithMods<\n  K extends StyleList,\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n> = AllBaseProps & {\n  [key in K[number]]?:\n    | StyleValue<StylesInterface[key]>\n    | StyleValueStateMap<StylesInterface[key]>;\n} & BaseStyleProps &\n  ResolveModProps<M> &\n  ResolveTokenProps<TP>;\n\n/**\n * Keys from BasePropsWithoutChildren that should be omitted from HTML attributes.\n * This excludes event handlers so they can be properly typed from JSX.IntrinsicElements.\n */\ntype TastySpecificKeys =\n  | 'as'\n  | 'qa'\n  | 'qaVal'\n  | 'element'\n  | 'styles'\n  | 'breakpoints'\n  | 'block'\n  | 'inline'\n  | 'mods'\n  | 'isHidden'\n  | 'isDisabled'\n  | 'css'\n  | 'style'\n  | 'theme'\n  | 'tokens'\n  | 'ref'\n  | 'color';\n\n/** Extract prop key names from a ModPropsInput (array elements or object keys). */\ntype ModPropsKeys<M extends ModPropsInput> = M extends readonly (infer K)[]\n  ? K & string\n  : keyof M & string;\n\n/** Extract prop key names from a TokenPropsInput (array elements or object keys). */\ntype TokenPropsKeys<TP extends TokenPropsInput> =\n  TP extends readonly (infer K)[] ? K & string : keyof TP & string;\n\n/**\n * Props type for tasty elements that combines:\n * - AllBasePropsWithMods for style props with strict tokens type\n * - HTML attributes for flexibility (properly typed based on tag)\n * - Variant support\n *\n * AllBasePropsWithMods carries generic AllHTMLAttributes which can conflict\n * with tag-specific types from JSX.IntrinsicElements (e.g. `src` is `string`\n * in AllHTMLAttributes but `string | Blob` in ImgHTMLAttributes). To avoid\n * intersection-narrowing, we Omit tag-specific keys from AllBasePropsWithMods\n * (keeping TastySpecificKeys, style props, mod props, and token props) and let\n * JSX.IntrinsicElements supply the authoritative HTML attribute types.\n */\nexport type TastyElementProps<\n  K extends StyleList,\n  V extends VariantMap,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n> = Omit<\n  AllBasePropsWithMods<K, M, TP>,\n  Exclude<\n    keyof JSX.IntrinsicElements[Tag],\n    TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>\n  >\n> &\n  WithVariant<V> &\n  Omit<\n    Omit<AllHTMLAttributes<HTMLElement>, keyof JSX.IntrinsicElements[Tag]> &\n      JSX.IntrinsicElements[Tag],\n    TastySpecificKeys | K[number] | ModPropsKeys<M> | TokenPropsKeys<TP>\n  >;\n\ntype TastyComponentPropsWithDefaults<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props>,\n> = keyof DefaultProps extends never\n  ? Props\n  : {\n      [key in Extract<keyof Props, keyof DefaultProps>]?: Props[key];\n    } & {\n      [key in keyof Omit<Props, keyof DefaultProps>]: Props[key];\n    };\n\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition = Record<string, never>,\n  Tag extends keyof JSX.IntrinsicElements = 'div',\n  M extends ModPropsInput = readonly never[],\n  TP extends TokenPropsInput = readonly never[],\n>(\n  options: TastyElementOptions<K, V, E, Tag, M, TP>,\n  secondArg?: never,\n): ForwardRefExoticComponent<\n  PropsWithoutRef<TastyElementProps<K, V, Tag, M, TP>> & RefAttributes<unknown>\n> &\n  SubElementComponents<E>;\nexport function tasty<\n  Props extends PropsWithStyles,\n  DefaultProps extends Partial<Props> = Partial<Props>,\n>(\n  Component: ComponentType<Props>,\n  options?: TastyProps<never, never, Record<string, never>, Props>,\n): ComponentType<TastyComponentPropsWithDefaults<Props, DefaultProps>>;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Implementation\nexport function tasty<\n  K extends StyleList,\n  V extends VariantMap,\n  _C = Record<string, unknown>,\n>(Component: any, options?: any) {\n  if (isValidElementType(Component)) {\n    return tastyWrap(Component as ComponentType<any>, options);\n  }\n\n  return tastyElement(Component as TastyProps<K, V>);\n}\n\nfunction tastyWrap<\n  P extends PropsWithStyles,\n  DefaultProps extends Partial<P> = Partial<P>,\n>(\n  Component: ComponentType<P>,\n  options?: TastyProps<never, never, P>,\n): ComponentType<TastyComponentPropsWithDefaults<P, DefaultProps>> {\n  const {\n    as: extendTag,\n    element: extendElement,\n    ...defaultProps\n  } = (options ?? {}) as TastyProps<never, never, P>;\n\n  const propsWithStyles = ['styles'].concat(\n    Object.keys(defaultProps).filter((prop) => prop.endsWith('Styles')),\n  );\n\n  const _WrappedComponent = forwardRef<any, any>((props, ref) => {\n    const { as, element, ...restProps } = props as Record<string, unknown>;\n\n    const mergedStylesMap = propsWithStyles.reduce(\n      (map, prop) => {\n        const restValue = (restProps as any)[prop];\n        const defaultValue = (defaultProps as any)[prop];\n\n        if (restValue != null && defaultValue != null) {\n          (map as any)[prop] = mergeStyles(defaultValue, restValue);\n        } else {\n          (map as any)[prop] = restValue ?? defaultValue;\n        }\n\n        return map;\n      },\n      {} as Record<string, unknown>,\n    );\n\n    const elementProps = {\n      ...(defaultProps as unknown as Record<string, unknown>),\n      ...(restProps as unknown as Record<string, unknown>),\n      ...mergedStylesMap,\n      as: (as as string | undefined) ?? extendTag,\n      element: (element as string | undefined) || extendElement,\n      ref,\n    } as unknown as P;\n\n    return createElement(Component as ComponentType<P>, elementProps);\n  });\n\n  _WrappedComponent.displayName = `TastyWrappedComponent(${getDisplayName(\n    Component,\n    (defaultProps as any).qa ?? (extendTag as any) ?? 'Anonymous',\n  )})`;\n\n  return _WrappedComponent as unknown as ComponentType<\n    TastyComponentPropsWithDefaults<P, DefaultProps>\n  >;\n}\n\nfunction tastyElement<\n  K extends StyleList,\n  V extends VariantMap,\n  E extends ElementsDefinition,\n>(tastyOptions: TastyProps<K, V, E>) {\n  const {\n    as: originalAs = 'div',\n    element: defaultElement,\n    styles: defaultStyles,\n    styleProps,\n    modProps: modPropsDef,\n    tokenProps: tokenPropsDef,\n    variants,\n    tokens: defaultTokens,\n    elements,\n    ...defaultProps\n  } = tastyOptions;\n\n  // Pre-compute merged styles for each variant (if variants are defined)\n  // This avoids creating separate component instances per variant\n  let variantStylesMap: Record<string, Styles | undefined> | undefined;\n  if (variants) {\n    // Split defaultStyles: extend-mode state maps (no '' key, non-selector)\n    // are pulled out and applied AFTER variant merge so they survive\n    // replace-mode maps in variants.\n    let baseStyles = defaultStyles;\n    let extensionStyles: Styles | undefined;\n\n    if (defaultStyles) {\n      for (const key of Object.keys(defaultStyles)) {\n        if (isSelector(key)) continue;\n\n        const value = (defaultStyles as Record<string, unknown>)[key];\n\n        if (\n          typeof value === 'object' &&\n          value !== null &&\n          !Array.isArray(value) &&\n          !('' in value)\n        ) {\n          if (!extensionStyles) {\n            baseStyles = { ...defaultStyles } as Styles;\n            extensionStyles = {} as Styles;\n          }\n          (extensionStyles as Record<string, unknown>)[key] = value;\n          delete (baseStyles as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    const variantEntries = Object.entries(variants) as [string, Styles][];\n    variantStylesMap = variantEntries.reduce(\n      (map, [variant, variantStyles]) => {\n        map[variant] = extensionStyles\n          ? mergeStyles(baseStyles, variantStyles, extensionStyles)\n          : mergeStyles(baseStyles, variantStyles);\n        return map;\n      },\n      {} as Record<string, Styles | undefined>,\n    );\n    // Ensure 'default' variant always exists\n    if (!variantStylesMap['default']) {\n      variantStylesMap['default'] = defaultStyles;\n    }\n  }\n\n  const {\n    qa: defaultQa,\n    qaVal: defaultQaVal,\n    ...otherDefaultProps\n  } = defaultProps ?? {};\n\n  const propsToCheck = styleProps\n    ? (styleProps as StyleList).concat(BASE_STYLES)\n    : BASE_STYLES;\n\n  const modPropsKeys: string[] | undefined = modPropsDef\n    ? ((Array.isArray(modPropsDef)\n        ? modPropsDef\n        : Object.keys(modPropsDef)) as string[])\n    : undefined;\n\n  const tokenPropsMapping: [string, string][] | undefined = tokenPropsDef\n    ? buildTokenPropsMapping(tokenPropsDef as TokenPropsInput)\n    : undefined;\n\n  // Factory-level cache: maps stable style references to computed classNames.\n  // For the common case (no instance overrides), this avoids recomputation.\n  const classNameCache = new Map<Styles | undefined, string>();\n\n  const _TastyComponent = forwardRef<\n    unknown,\n    AllBasePropsWithMods<K> & WithVariant<V>\n  >((allProps, ref) => {\n    const {\n      as,\n      styles: rawStyles,\n      variant,\n      mods,\n      element,\n      qa,\n      qaVal,\n      className: userClassName,\n      tokens,\n      style,\n      ...otherProps\n    } = allProps as Record<string, unknown> as AllBasePropsWithMods<K> &\n      WithVariant<V> & {\n        className?: string;\n        tokens?: Tokens;\n        style?: Record<string, unknown>;\n      };\n\n    let styles = rawStyles;\n\n    let propStyles: Styles | null = null;\n\n    for (const prop of propsToCheck) {\n      const key = prop as unknown as string;\n\n      if (key in otherProps) {\n        if (!propStyles) propStyles = {};\n        const value = (otherProps as any)[key];\n        (propStyles as any)[key] = value;\n        delete (otherProps as any)[key];\n      }\n    }\n\n    if (!styles || (styles && !hasKeys(styles as Record<string, unknown>))) {\n      styles = undefined as unknown as Styles;\n    }\n\n    let propMods: Record<string, ModValue> | undefined;\n    if (modPropsKeys) {\n      for (const key of modPropsKeys) {\n        if (key in otherProps) {\n          if (!propMods) propMods = {};\n          propMods[key] = (otherProps as Record<string, unknown>)[\n            key\n          ] as ModValue;\n          delete (otherProps as Record<string, unknown>)[key];\n        }\n      }\n    }\n\n    let propTokens: Tokens | undefined;\n    if (tokenPropsMapping) {\n      for (const [propName, tokenKey] of tokenPropsMapping) {\n        if (propName in otherProps) {\n          if (!propTokens) propTokens = {} as Tokens;\n          (propTokens as Record<string, TokenValue>)[tokenKey] = (\n            otherProps as Record<string, unknown>\n          )[propName] as TokenValue;\n          delete (otherProps as Record<string, unknown>)[propName];\n        }\n      }\n    }\n\n    const baseStyles = variantStylesMap\n      ? (variantStylesMap[(variant as string) || 'default'] ??\n        variantStylesMap['default'])\n      : defaultStyles;\n\n    const hasInstanceStyles =\n      styles && hasKeys(styles as Record<string, unknown>);\n    const hasPropStyles = propStyles && hasKeys(propStyles);\n\n    const allStyles =\n      hasInstanceStyles || hasPropStyles\n        ? mergeStyles(baseStyles, styles as Styles, propStyles as Styles)\n        : baseStyles;\n\n    // Use factory-level cache for stable style references (client only).\n    // On the server the cache must be skipped: both the SSR collector and\n    // the RSC inline-style paths are per-request, so every request must\n    // call computeStyles() to ensure CSS is actually collected/emitted.\n    const useFactoryCache = typeof document !== 'undefined';\n    let stylesResult: ComputeStylesResult;\n    if (\n      useFactoryCache &&\n      allStyles === baseStyles &&\n      classNameCache.has(allStyles)\n    ) {\n      stylesResult = { className: classNameCache.get(allStyles)! };\n      touch(stylesResult.className);\n    } else {\n      stylesResult = computeStyles(allStyles);\n      if (useFactoryCache && allStyles === baseStyles) {\n        classNameCache.set(allStyles, stylesResult.className);\n      }\n    }\n\n    // Merge tokens: default -> instance -> tokenProps\n    let mergedTokens: Tokens | undefined;\n    if (defaultTokens || tokens || propTokens) {\n      if (!defaultTokens && !propTokens) {\n        mergedTokens = tokens as Tokens;\n      } else if (!tokens && !propTokens) {\n        mergedTokens = defaultTokens;\n      } else {\n        mergedTokens = {\n          ...defaultTokens,\n          ...(tokens as Tokens),\n          ...propTokens,\n        } as Tokens;\n      }\n    }\n\n    const processedTokenStyle = processTokens(mergedTokens);\n\n    let mergedStyle: Record<string, unknown> | undefined;\n    if (processedTokenStyle || style) {\n      if (!processedTokenStyle) {\n        mergedStyle = style;\n      } else if (!style) {\n        mergedStyle = processedTokenStyle as Record<string, unknown>;\n      } else {\n        mergedStyle = {\n          ...(processedTokenStyle as Record<string, unknown>),\n          ...style,\n        };\n      }\n    }\n\n    const mergedMods = propMods\n      ? { ...(mods as Record<string, ModValue>), ...propMods }\n      : (mods as Record<string, ModValue> | undefined);\n\n    let modDataAttrs: Record<string, unknown> | undefined;\n    if (mergedMods) {\n      modDataAttrs = modAttrs(mergedMods as unknown as Mods) as Record<\n        string,\n        unknown\n      >;\n    }\n\n    const finalClassName = [\n      (userClassName as string) || '',\n      stylesResult.className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const elementProps = {\n      'data-element': (element as string | undefined) || defaultElement,\n      'data-qa': (qa as string | undefined) || defaultQa,\n      'data-qaval': (qaVal as string | undefined) || defaultQaVal,\n      ...(otherDefaultProps as unknown as Record<string, unknown>),\n      ...(modDataAttrs || {}),\n      ...(otherProps as unknown as Record<string, unknown>),\n      className: finalClassName,\n      style: mergedStyle,\n      ref,\n    } as Record<string, unknown>;\n\n    handleIsProperties(elementProps);\n\n    const el = createElement(\n      (as as string | 'div') ?? originalAs,\n      elementProps,\n    );\n\n    // RSC mode: wrap element with inline <style> for server-rendered CSS\n    if (stylesResult.css) {\n      return createElement(\n        Fragment,\n        null,\n        createElement('style', {\n          'data-tasty-rsc': '',\n          dangerouslySetInnerHTML: { __html: stylesResult.css },\n        }),\n        el,\n      );\n    }\n\n    return el;\n  });\n\n  _TastyComponent.displayName = `TastyComponent(${\n    (defaultProps as any).qa || originalAs\n  })`;\n\n  // Attach sub-element components if elements are defined\n  if (elements) {\n    const subElements = Object.entries(elements).reduce(\n      (acc, [name, definition]) => {\n        acc[name] = createSubElement(\n          name,\n          definition as SubElementDefinition<keyof JSX.IntrinsicElements>,\n        );\n        return acc;\n      },\n      {} as Record<string, ForwardRefExoticComponent<any>>,\n    );\n\n    return Object.assign(_TastyComponent, subElements);\n  }\n\n  return _TastyComponent;\n}\n\nexport const Element = tasty({});\n"],"mappings":"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"}