@tenphi/tasty 1.5.3 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -15
- package/dist/compute-styles.js +13 -26
- package/dist/compute-styles.js.map +1 -1
- package/dist/config.d.ts +39 -1
- package/dist/config.js +64 -2
- package/dist/config.js.map +1 -1
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +1 -1
- package/dist/debug.js +4 -4
- package/dist/debug.js.map +1 -1
- package/dist/hooks/useCounterStyle.js +2 -1
- package/dist/hooks/useCounterStyle.js.map +1 -1
- package/dist/hooks/useGlobalStyles.js +2 -2
- package/dist/hooks/useKeyframes.js +2 -1
- package/dist/hooks/useKeyframes.js.map +1 -1
- package/dist/hooks/useRawCSS.js +1 -1
- package/dist/hooks/useStyles.d.ts +4 -4
- package/dist/hooks/useStyles.js +7 -5
- package/dist/hooks/useStyles.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/injector/index.js +1 -1
- package/dist/injector/index.js.map +1 -1
- package/dist/injector/injector.d.ts +5 -0
- package/dist/injector/injector.js +93 -6
- package/dist/injector/injector.js.map +1 -1
- package/dist/injector/sheet-manager.js +3 -2
- package/dist/injector/sheet-manager.js.map +1 -1
- package/dist/injector/types.d.ts +9 -2
- package/dist/pipeline/exclusive.js +57 -2
- package/dist/pipeline/exclusive.js.map +1 -1
- package/dist/pipeline/index.js +2 -2
- package/dist/pipeline/index.js.map +1 -1
- package/dist/pipeline/materialize.js +56 -2
- package/dist/pipeline/materialize.js.map +1 -1
- package/dist/pipeline/simplify.js +180 -5
- package/dist/pipeline/simplify.js.map +1 -1
- package/dist/plugins/types.d.ts +12 -1
- package/dist/rsc-cache.js +2 -4
- package/dist/rsc-cache.js.map +1 -1
- package/dist/ssr/astro-client.js +5 -10
- package/dist/ssr/astro-client.js.map +1 -1
- package/dist/ssr/astro.d.ts +4 -2
- package/dist/ssr/astro.js +4 -4
- package/dist/ssr/astro.js.map +1 -1
- package/dist/ssr/collector.d.ts +9 -13
- package/dist/ssr/collector.js +32 -16
- package/dist/ssr/collector.js.map +1 -1
- package/dist/ssr/context.js +16 -0
- package/dist/ssr/context.js.map +1 -0
- package/dist/ssr/hydrate.d.ts +20 -13
- package/dist/ssr/hydrate.js +24 -28
- package/dist/ssr/hydrate.js.map +1 -1
- package/dist/ssr/index.d.ts +3 -3
- package/dist/ssr/index.js +4 -4
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/next.d.ts +7 -4
- package/dist/ssr/next.js +7 -6
- package/dist/ssr/next.js.map +1 -1
- package/dist/ssr/ssr-collector-ref.js +17 -1
- package/dist/ssr/ssr-collector-ref.js.map +1 -1
- package/dist/tasty.d.ts +1 -1
- package/dist/tasty.js +9 -4
- package/dist/tasty.js.map +1 -1
- package/dist/utils/typography.d.ts +21 -10
- package/dist/utils/typography.js +1 -1
- package/dist/utils/typography.js.map +1 -1
- package/dist/zero/babel.d.ts +7 -108
- package/dist/zero/babel.js +36 -12
- package/dist/zero/babel.js.map +1 -1
- package/docs/README.md +2 -2
- package/docs/adoption.md +5 -3
- package/docs/comparison.md +24 -25
- package/docs/configuration.md +69 -1
- package/docs/design-system.md +22 -10
- package/docs/dsl.md +3 -3
- package/docs/getting-started.md +10 -10
- package/docs/injector.md +2 -2
- package/docs/methodology.md +2 -2
- package/docs/{runtime.md → react-api.md} +5 -1
- package/docs/ssr.md +14 -7
- package/docs/tasty-static.md +14 -2
- package/package.json +5 -5
package/dist/tasty.d.ts
CHANGED
|
@@ -128,7 +128,7 @@ type TastyElementProps<K extends StyleList, V extends VariantMap, Tag extends ke
|
|
|
128
128
|
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] };
|
|
129
129
|
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>;
|
|
130
130
|
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>>;
|
|
131
|
-
declare const Element: ForwardRefExoticComponent<Omit<AllBasePropsWithMods<StyleList, readonly never[], readonly never[]>, "children" | "property" | "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" | "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>, "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" | "top" | "right" | "bottom" | "left" | "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>>;
|
|
131
|
+
declare const Element: ForwardRefExoticComponent<Omit<AllBasePropsWithMods<StyleList, readonly never[], readonly never[]>, "slot" | "title" | "children" | "property" | "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" | "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" | "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" | "fade" | "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" | "top" | "right" | "bottom" | "left" | "all" | "page" | "mods" | "css" | "content" | "translate" | "as" | "background" | "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>>;
|
|
132
132
|
//#endregion
|
|
133
133
|
export { AllBasePropsWithMods, Element, ElementsDefinition, ModPropDef, ModPropsInput, ResolveModPropDef, ResolveModProps, ResolveTokenProps, SubElementDefinition, SubElementProps, TastyElementOptions, TastyElementProps, TastyProps, TokenPropsInput, VariantMap, WithVariant, tasty };
|
|
134
134
|
//# sourceMappingURL=tasty.d.ts.map
|
package/dist/tasty.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { isSelector } from "./pipeline/index.js";
|
|
2
|
+
import { getConfig } from "./config.js";
|
|
2
3
|
import { BASE_STYLES } from "./styles/list.js";
|
|
3
4
|
import { touch } from "./injector/index.js";
|
|
4
5
|
import { hasKeys } from "./utils/has-keys.js";
|
|
@@ -220,10 +221,14 @@ function tastyElement(tastyOptions) {
|
|
|
220
221
|
};
|
|
221
222
|
handleIsProperties(elementProps);
|
|
222
223
|
const el = createElement(as ?? originalAs, elementProps);
|
|
223
|
-
if (stylesResult.css)
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
224
|
+
if (stylesResult.css) {
|
|
225
|
+
const nonce = getConfig().nonce;
|
|
226
|
+
return createElement(Fragment, null, createElement("style", {
|
|
227
|
+
"data-tasty-rsc": "",
|
|
228
|
+
nonce,
|
|
229
|
+
dangerouslySetInnerHTML: { __html: stylesResult.css }
|
|
230
|
+
}), el);
|
|
231
|
+
}
|
|
227
232
|
return el;
|
|
228
233
|
});
|
|
229
234
|
_TastyComponent.displayName = `TastyComponent(${defaultProps.qa || originalAs})`;
|
package/dist/tasty.js.map
CHANGED
|
@@ -1 +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, 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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"}
|
|
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, 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 { getConfig } from './config';\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> tag.\n // Class names are extracted from these tags on the client via\n // the doubled-specificity pattern (.tXXX.tXXX), so no <script> is needed.\n if (stylesResult.css) {\n const nonce = getConfig().nonce;\n\n return createElement(\n Fragment,\n null,\n createElement('style', {\n 'data-tasty-rsc': '',\n nonce,\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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"}
|
|
@@ -1,22 +1,33 @@
|
|
|
1
1
|
import { ConfigTokens } from "../styles/types.js";
|
|
2
2
|
|
|
3
3
|
//#region src/utils/typography.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* A typography token value: plain value or a state map for responsive/theme-aware presets.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* // Plain value
|
|
9
|
+
* fontWeight: '400'
|
|
10
|
+
* // State map
|
|
11
|
+
* fontWeight: { '': '400', '@dark': '300' }
|
|
12
|
+
*/
|
|
13
|
+
type TypographyTokenValue = string | number | Record<string, string | number | undefined | null | '@inherit'>;
|
|
4
14
|
/**
|
|
5
15
|
* Typography preset configuration.
|
|
6
16
|
* Each preset defines font properties that get expanded into CSS custom properties.
|
|
17
|
+
* All fields accept plain values or state maps for responsive/theme-aware tokens.
|
|
7
18
|
*
|
|
8
19
|
* Use with `generateTypographyTokens()` to create typography tokens for your design system.
|
|
9
20
|
*/
|
|
10
21
|
interface TypographyPreset {
|
|
11
|
-
fontSize:
|
|
12
|
-
lineHeight:
|
|
13
|
-
letterSpacing?:
|
|
14
|
-
fontWeight:
|
|
15
|
-
boldFontWeight?:
|
|
16
|
-
iconSize?:
|
|
17
|
-
textTransform?:
|
|
18
|
-
fontFamily?:
|
|
19
|
-
fontStyle?:
|
|
22
|
+
fontSize: TypographyTokenValue;
|
|
23
|
+
lineHeight: TypographyTokenValue;
|
|
24
|
+
letterSpacing?: TypographyTokenValue;
|
|
25
|
+
fontWeight: TypographyTokenValue;
|
|
26
|
+
boldFontWeight?: TypographyTokenValue;
|
|
27
|
+
iconSize?: TypographyTokenValue;
|
|
28
|
+
textTransform?: TypographyTokenValue;
|
|
29
|
+
fontFamily?: TypographyTokenValue;
|
|
30
|
+
fontStyle?: TypographyTokenValue;
|
|
20
31
|
}
|
|
21
32
|
/**
|
|
22
33
|
* Generate typography tokens with $ prefix for CSS custom properties.
|
|
@@ -43,5 +54,5 @@ interface TypographyPreset {
|
|
|
43
54
|
*/
|
|
44
55
|
declare function generateTypographyTokens(presets: Record<string, TypographyPreset>): ConfigTokens;
|
|
45
56
|
//#endregion
|
|
46
|
-
export { TypographyPreset, generateTypographyTokens };
|
|
57
|
+
export { TypographyPreset, TypographyTokenValue, generateTypographyTokens };
|
|
47
58
|
//# sourceMappingURL=typography.d.ts.map
|
package/dist/utils/typography.js
CHANGED
|
@@ -35,7 +35,7 @@ function generateTypographyTokens(presets) {
|
|
|
35
35
|
if (RESERVED_PRESET_NAMES.has(name)) throw new Error(`Invalid typography preset name "${name}". This name is reserved as a preset modifier.`);
|
|
36
36
|
tokens[`$${name}-font-size`] = preset.fontSize;
|
|
37
37
|
tokens[`$${name}-line-height`] = preset.lineHeight;
|
|
38
|
-
tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? "
|
|
38
|
+
tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? "normal";
|
|
39
39
|
tokens[`$${name}-font-weight`] = preset.fontWeight;
|
|
40
40
|
if (preset.boldFontWeight !== void 0) tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;
|
|
41
41
|
if (preset.iconSize !== void 0) tokens[`$${name}-icon-size`] = preset.iconSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n 'strong',\n 'bold',\n 'italic',\n 'icon',\n 'tight',\n]);\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n fontSize:
|
|
1
|
+
{"version":3,"file":"typography.js","names":[],"sources":["../../src/utils/typography.ts"],"sourcesContent":["import type { ConfigTokens } from '../styles/types';\n\nconst RESERVED_PRESET_NAMES = new Set([\n 'strong',\n 'bold',\n 'italic',\n 'icon',\n 'tight',\n]);\n\n/**\n * A typography token value: plain value or a state map for responsive/theme-aware presets.\n *\n * @example\n * // Plain value\n * fontWeight: '400'\n * // State map\n * fontWeight: { '': '400', '@dark': '300' }\n */\nexport type TypographyTokenValue =\n | string\n | number\n | Record<string, string | number | undefined | null | '@inherit'>;\n\n/**\n * Typography preset configuration.\n * Each preset defines font properties that get expanded into CSS custom properties.\n * All fields accept plain values or state maps for responsive/theme-aware tokens.\n *\n * Use with `generateTypographyTokens()` to create typography tokens for your design system.\n */\nexport interface TypographyPreset {\n fontSize: TypographyTokenValue;\n lineHeight: TypographyTokenValue;\n letterSpacing?: TypographyTokenValue;\n fontWeight: TypographyTokenValue;\n boldFontWeight?: TypographyTokenValue;\n iconSize?: TypographyTokenValue;\n textTransform?: TypographyTokenValue;\n fontFamily?: TypographyTokenValue;\n fontStyle?: TypographyTokenValue;\n}\n\n/**\n * Generate typography tokens with $ prefix for CSS custom properties.\n *\n * Each preset generates the following CSS custom properties:\n * - `${name}-font-size`\n * - `${name}-line-height`\n * - `${name}-letter-spacing`\n * - `${name}-font-weight`\n * - `${name}-bold-font-weight` (if defined)\n * - `${name}-icon-size` (if defined)\n * - `${name}-text-transform` (if defined)\n * - `${name}-font-family` (if defined)\n * - `${name}-font-style` (if defined)\n *\n * @param presets - Typography presets object\n * @returns ConfigTokens object with $ prefixed keys\n *\n * @example\n * const customTokens = generateTypographyTokens({\n * myHeading: { fontSize: '24px', lineHeight: '32px', fontWeight: '700' },\n * body: { fontSize: '16px', lineHeight: '24px', fontWeight: '400' },\n * });\n */\nexport function generateTypographyTokens(\n presets: Record<string, TypographyPreset>,\n): ConfigTokens {\n const tokens: ConfigTokens = {} as ConfigTokens;\n\n for (const [name, preset] of Object.entries(presets)) {\n if (RESERVED_PRESET_NAMES.has(name)) {\n throw new Error(\n `Invalid typography preset name \"${name}\". This name is reserved as a preset modifier.`,\n );\n }\n\n tokens[`$${name}-font-size`] = preset.fontSize;\n tokens[`$${name}-line-height`] = preset.lineHeight;\n tokens[`$${name}-letter-spacing`] = preset.letterSpacing ?? 'normal';\n tokens[`$${name}-font-weight`] = preset.fontWeight;\n\n if (preset.boldFontWeight !== undefined) {\n tokens[`$${name}-bold-font-weight`] = preset.boldFontWeight;\n }\n\n if (preset.iconSize !== undefined) {\n tokens[`$${name}-icon-size`] = preset.iconSize;\n }\n\n if (preset.textTransform !== undefined) {\n tokens[`$${name}-text-transform`] = preset.textTransform;\n }\n\n if (preset.fontFamily !== undefined) {\n tokens[`$${name}-font-family`] = preset.fontFamily;\n }\n\n if (preset.fontStyle !== undefined) {\n tokens[`$${name}-font-style`] = preset.fontStyle;\n }\n }\n\n return tokens;\n}\n"],"mappings":";AAEA,MAAM,wBAAwB,IAAI,IAAI;CACpC;CACA;CACA;CACA;CACA;CACD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;AA0DF,SAAgB,yBACd,SACc;CACd,MAAM,SAAuB,EAAE;AAE/B,MAAK,MAAM,CAAC,MAAM,WAAW,OAAO,QAAQ,QAAQ,EAAE;AACpD,MAAI,sBAAsB,IAAI,KAAK,CACjC,OAAM,IAAI,MACR,mCAAmC,KAAK,gDACzC;AAGH,SAAO,IAAI,KAAK,eAAe,OAAO;AACtC,SAAO,IAAI,KAAK,iBAAiB,OAAO;AACxC,SAAO,IAAI,KAAK,oBAAoB,OAAO,iBAAiB;AAC5D,SAAO,IAAI,KAAK,iBAAiB,OAAO;AAExC,MAAI,OAAO,mBAAmB,KAAA,EAC5B,QAAO,IAAI,KAAK,sBAAsB,OAAO;AAG/C,MAAI,OAAO,aAAa,KAAA,EACtB,QAAO,IAAI,KAAK,eAAe,OAAO;AAGxC,MAAI,OAAO,kBAAkB,KAAA,EAC3B,QAAO,IAAI,KAAK,oBAAoB,OAAO;AAG7C,MAAI,OAAO,eAAe,KAAA,EACxB,QAAO,IAAI,KAAK,iBAAiB,OAAO;AAG1C,MAAI,OAAO,cAAc,KAAA,EACvB,QAAO,IAAI,KAAK,gBAAgB,OAAO;;AAI3C,QAAO"}
|
package/dist/zero/babel.d.ts
CHANGED
|
@@ -1,122 +1,21 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { StyleDetails, UnitHandler } from "../parser/types.js";
|
|
3
|
-
import { StyleHandlerDefinition } from "../utils/styles.js";
|
|
4
|
-
import { ConfigTokens, RecipeStyles } from "../styles/types.js";
|
|
5
|
-
import { TastyPlugin } from "../plugins/types.js";
|
|
1
|
+
import { TastyConfig } from "../config.js";
|
|
6
2
|
import * as _$_babel_core0 from "@babel/core";
|
|
7
3
|
import { PluginPass } from "@babel/core";
|
|
8
4
|
|
|
9
5
|
//#region src/zero/babel.d.ts
|
|
10
6
|
/**
|
|
11
7
|
* Build-time configuration for zero-runtime mode.
|
|
12
|
-
* Subset of TastyConfig
|
|
8
|
+
* Subset of TastyConfig excluding runtime-only DOM options
|
|
9
|
+
* (`nonce`, `maxRulesPerSheet`, `forceTextInjection`, `gc`)
|
|
10
|
+
* and overriding `devMode` default to `false`.
|
|
13
11
|
*/
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Global predefined states for advanced state mapping.
|
|
17
|
-
* Example: { '@mobile': '@media(w < 768px)', '@dark': '@root(theme=dark)' }
|
|
18
|
-
*/
|
|
19
|
-
states?: Record<string, string>;
|
|
12
|
+
type TastyZeroConfig = Omit<TastyConfig, 'nonce' | 'maxRulesPerSheet' | 'forceTextInjection' | 'gc' | 'devMode'> & {
|
|
20
13
|
/**
|
|
21
14
|
* Enable development mode features: source comments in generated CSS.
|
|
22
|
-
*
|
|
15
|
+
* @default false
|
|
23
16
|
*/
|
|
24
17
|
devMode?: boolean;
|
|
25
|
-
|
|
26
|
-
* Parser LRU cache size (default: 1000).
|
|
27
|
-
* Larger values improve performance for builds with many unique style values.
|
|
28
|
-
*/
|
|
29
|
-
parserCacheSize?: number;
|
|
30
|
-
/**
|
|
31
|
-
* Custom units for the style parser (merged with built-in units).
|
|
32
|
-
* Units transform numeric values like `2x` → `calc(2 * var(--gap))`.
|
|
33
|
-
* @example { em: 'em', vw: 'vw', custom: (n) => `${n * 10}px` }
|
|
34
|
-
*/
|
|
35
|
-
units?: Record<string, string | UnitHandler>;
|
|
36
|
-
/**
|
|
37
|
-
* Custom functions for the style parser (merged with existing).
|
|
38
|
-
* Functions process parsed style groups and return CSS values.
|
|
39
|
-
* @example { myFunc: (groups) => groups.map(g => g.output).join(' ') }
|
|
40
|
-
*/
|
|
41
|
-
funcs?: Record<string, (groups: StyleDetails[]) => string>;
|
|
42
|
-
/**
|
|
43
|
-
* Plugins that extend tasty with custom functions, units, states, and handlers.
|
|
44
|
-
* Plugins are processed in order, with later plugins overriding earlier ones.
|
|
45
|
-
* @example
|
|
46
|
-
* ```ts
|
|
47
|
-
* import { okhslPlugin } from '@tenphi/tasty';
|
|
48
|
-
*
|
|
49
|
-
* // babel.config.js
|
|
50
|
-
* module.exports = {
|
|
51
|
-
* plugins: [
|
|
52
|
-
* ['@tenphi/tasty/babel-plugin', {
|
|
53
|
-
* config: { plugins: [okhslPlugin()] }
|
|
54
|
-
* }]
|
|
55
|
-
* ]
|
|
56
|
-
* };
|
|
57
|
-
* ```
|
|
58
|
-
*/
|
|
59
|
-
plugins?: TastyPlugin[];
|
|
60
|
-
/**
|
|
61
|
-
* Global keyframes definitions for static extraction.
|
|
62
|
-
* Keys are animation names, values are keyframes step definitions.
|
|
63
|
-
* @example { fadeIn: { from: { opacity: 0 }, to: { opacity: 1 } } }
|
|
64
|
-
*/
|
|
65
|
-
keyframes?: Record<string, KeyframesSteps>;
|
|
66
|
-
/**
|
|
67
|
-
* Global @font-face definitions for static extraction.
|
|
68
|
-
* Keys are font-family names, values are descriptors or arrays of descriptors.
|
|
69
|
-
*/
|
|
70
|
-
fontFace?: Record<string, FontFaceInput>;
|
|
71
|
-
/**
|
|
72
|
-
* Global @counter-style definitions for static extraction.
|
|
73
|
-
* Keys are counter-style names, values are descriptor objects.
|
|
74
|
-
*/
|
|
75
|
-
counterStyle?: Record<string, CounterStyleDescriptors>;
|
|
76
|
-
/**
|
|
77
|
-
* Custom style handlers that transform style properties into CSS declarations.
|
|
78
|
-
* Handlers replace built-in handlers for the same style name.
|
|
79
|
-
* @example
|
|
80
|
-
* ```ts
|
|
81
|
-
* handlers: {
|
|
82
|
-
* fill: ({ fill }) => fill ? { 'background-color': fill } : undefined,
|
|
83
|
-
* elevation: ({ elevation }) => ({
|
|
84
|
-
* 'box-shadow': `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,
|
|
85
|
-
* }),
|
|
86
|
-
* }
|
|
87
|
-
* ```
|
|
88
|
-
*/
|
|
89
|
-
handlers?: Record<string, StyleHandlerDefinition>;
|
|
90
|
-
/**
|
|
91
|
-
* Design tokens injected as CSS custom properties on `:root`.
|
|
92
|
-
* Values are parsed through the Tasty DSL. Supports state maps.
|
|
93
|
-
* @example { '$gap': '4px', '#primary': { '': '#purple', '@dark': '#light-purple' } }
|
|
94
|
-
*/
|
|
95
|
-
tokens?: ConfigTokens;
|
|
96
|
-
/**
|
|
97
|
-
* Predefined tokens replaced during style parsing (parse-time substitution).
|
|
98
|
-
* Use `$name` for custom properties and `#name` for color tokens.
|
|
99
|
-
* @example { $spacing: '2x', '#accent': '#purple' }
|
|
100
|
-
*/
|
|
101
|
-
replaceTokens?: Record<`$${string}` | `#${string}`, string | number>;
|
|
102
|
-
/**
|
|
103
|
-
* Predefined style recipes -- named style bundles that can be applied via `recipe` style property.
|
|
104
|
-
* Recipe values are flat tasty styles (no sub-element keys).
|
|
105
|
-
* @example
|
|
106
|
-
* ```ts
|
|
107
|
-
* recipes: {
|
|
108
|
-
* card: { padding: '4x', fill: '#surface', radius: '1r', border: true },
|
|
109
|
-
* elevated: { shadow: '2x 2x 4x #shadow' },
|
|
110
|
-
* }
|
|
111
|
-
* ```
|
|
112
|
-
*/
|
|
113
|
-
recipes?: Record<string, RecipeStyles>;
|
|
114
|
-
/**
|
|
115
|
-
* Automatically infer and register CSS @property declarations from values.
|
|
116
|
-
* @default true
|
|
117
|
-
*/
|
|
118
|
-
autoPropertyTypes?: boolean;
|
|
119
|
-
}
|
|
18
|
+
};
|
|
120
19
|
interface TastyZeroBabelOptions {
|
|
121
20
|
/** Output path for generated CSS (default: 'tasty.css') */
|
|
122
21
|
output?: string;
|