aeon-ui-engine 1.8.0 → 1.9.0

package/packages/panda/styled-system/jsx/helper.js

@@ -0,0 +1,92 @@
+import { css, cva } from '../css/index';
+
+export const composeShouldForwardProps = (tag, shouldForwardProp) => {
+  if (!tag.__shouldForwardProps__ || !shouldForwardProp) return shouldForwardProp
+  return (prop) => tag.__shouldForwardProps__(prop) && shouldForwardProp(prop)
+}
+
+export const composeCvaFn = (cvaA, cvaB) => {
+  if (cvaA && !cvaB) return cvaA
+  if (!cvaA && cvaB) return cvaB
+  if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB, cva)
+  const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
+  TypeError.captureStackTrace?.(error)
+  throw error
+}
+
+// Like React's defaultProps: an explicit `undefined` keeps the default.
+export function mergeDefaultProps(defaultProps, props) {
+  const merged = Object.assign({}, defaultProps)
+  for (const key in props) {
+    if (props[key] !== undefined) merged[key] = props[key]
+  }
+  return merged
+}
+
+export const getDisplayName = (Component) => {
+  if (typeof Component === 'string') return Component
+  return Component?.displayName || Component?.name || 'Component'
+}
+
+const htmlPropsMap = {
+  htmlWidth: 'width',
+  htmlHeight: 'height',
+  htmlTranslate: 'translate',
+  htmlContent: 'content',
+}
+const hasOwn = Object.prototype.hasOwnProperty
+
+export function splitJsxProps(props, shouldForwardProp, variantSet, isCssProperty, skipClass) {
+  let htmlProps
+  let forwardedProps
+  let variantProps
+  let propStyles
+  let cssStyles
+  let elementProps
+  const keys = Object.keys(props)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = props[key]
+    if (value === void 0) continue
+    if (key === 'className' || (skipClass && key === 'class') || key === 'as' || key === 'unstyled' || key === 'children') continue
+    if (hasOwn.call(htmlPropsMap, key)) {
+      htmlProps ||= Object.create(null)
+      htmlProps[htmlPropsMap[key]] = value
+    } else if (shouldForwardProp(key)) {
+      forwardedProps ||= Object.create(null)
+      forwardedProps[key] = value
+    } else if (variantSet.has(key)) {
+      variantProps ||= Object.create(null)
+      variantProps[key] = value
+    } else if (key === 'css') {
+      cssStyles = value
+    } else if (isCssProperty(key)) {
+      (propStyles ||= {})[key] = value
+    } else {
+      elementProps ||= Object.create(null)
+      elementProps[key] = value
+    }
+  }
+  return [htmlProps, forwardedProps, variantProps || {}, propStyles, cssStyles, elementProps]
+}
+
+export function serializeSplitStyles(propStyles, cssStyles, baseStyles) {
+  if (baseStyles !== void 0) {
+    return propStyles ? cssStyles !== void 0 ? css(baseStyles, propStyles, cssStyles) : css(baseStyles, propStyles) : css(baseStyles, cssStyles)
+  }
+  return propStyles ? cssStyles !== void 0 ? css(propStyles, cssStyles) : css(propStyles) : css(cssStyles)
+}
+
+export function splitStyleProps(styleProps) {
+  let propStyles
+  let cssStyles
+  const keys = Object.keys(styleProps)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = styleProps[key]
+    if (value === void 0) continue
+    if (key === 'css') cssStyles = value
+    else (propStyles ||= {})[key] = value
+  }
+  return [propStyles, cssStyles]
+}

package/packages/panda/styled-system/jsx/hstack.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { HstackProperties } from '../patterns/hstack';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties > {}
-
-
-export declare const HStack: FunctionComponent<HstackProps>
+export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties> {}
+export declare const HStack: FunctionComponent<HstackProps>;

package/packages/panda/styled-system/jsx/hstack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { hstack } from '../patterns/hstack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, hstack.propKeys)
+  const styleProps = hstack.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/index.d.ts

@@ -1,25 +1,25 @@
-/* eslint-disable */
 export * from './factory';
 export * from './is-valid-prop';
-export * from './create-style-context';
+export * from './create-recipe-context';
+export * from './create-slot-recipe-context';
+export * from './aspect-ratio';
+export * from './bleed';
 export * from './box';
-export * from './flex';
-export * from './stack';
-export * from './vstack';
-export * from './hstack';
-export * from './spacer';
-export * from './square';
-export * from './circle';
 export * from './center';
-export * from './link-overlay';
-export * from './aspect-ratio';
-export * from './grid';
-export * from './grid-item';
-export * from './wrap';
+export * from './circle';
 export * from './container';
+export * from './cq';
 export * from './divider';
+export * from './flex';
 export * from './float';
-export * from './bleed';
+export * from './grid';
+export * from './grid-item';
+export * from './hstack';
+export * from './link-overlay';
+export * from './spacer';
+export * from './square';
+export * from './stack';
 export * from './visually-hidden';
-export * from './cq';
-export type { HTMLStyledProps, StyledComponent } from '../types/jsx';
+export * from './vstack';
+export * from './wrap';
+export { HTMLStyledProps, StyledComponent, Styled, StyledVariantProps, JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';

package/packages/panda/styled-system/jsx/index.js

@@ -0,0 +1,24 @@
+export * from './factory';
+export * from './is-valid-prop';
+export * from './create-recipe-context';
+export * from './create-slot-recipe-context';
+export * from './aspect-ratio';
+export * from './bleed';
+export * from './box';
+export * from './center';
+export * from './circle';
+export * from './container';
+export * from './cq';
+export * from './divider';
+export * from './flex';
+export * from './float';
+export * from './grid';
+export * from './grid-item';
+export * from './hstack';
+export * from './link-overlay';
+export * from './spacer';
+export * from './square';
+export * from './stack';
+export * from './visually-hidden';
+export * from './vstack';
+export * from './wrap';

package/packages/panda/styled-system/jsx/is-valid-prop.d.ts

@@ -1,11 +1,6 @@
-/* eslint-disable */
-import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types';
+import type { DistributiveOmit, JsxStyleProps } from '../types/system';
 
-declare const isCssProperty: (value: string) => boolean;
-
-type CssPropKey = keyof JsxStyleProps
-type OmittedCssProps<T> = Pretty<DistributiveOmit<T, CssPropKey>>
-
-declare const splitCssProps: <T>(props: T) => [JsxStyleProps, OmittedCssProps<T>]
-
-export { isCssProperty, splitCssProps };
+export type CssPropKey = keyof JsxStyleProps;
+export type OmittedCssProps<T> = DistributiveOmit<T, CssPropKey>;
+export declare function isCssProperty(value: string): boolean;
+export declare function splitCssProps<T>(props: T): [JsxStyleProps, OmittedCssProps<T>];

package/packages/panda/styled-system/jsx/is-valid-prop.js

@@ -0,0 +1,12 @@
+import { splitProps } from '../helpers';
+
+const cssPropertySet = new Set(["2xl","2xlDown","2xlOnly","@/2xl","@/2xlDown","@/2xlOnly","@/2xlTo3xl","@/2xlTo4xl","@/2xlTo5xl","@/2xlTo6xl","@/2xlTo7xl","@/2xlTo8xl","@/2xs","@/2xsDown","@/2xsOnly","@/2xsTo2xl","@/2xsTo3xl","@/2xsTo4xl","@/2xsTo5xl","@/2xsTo6xl","@/2xsTo7xl","@/2xsTo8xl","@/2xsToLg","@/2xsToMd","@/2xsToSm","@/2xsToXl","@/2xsToXs","@/3xl","@/3xlDown","@/3xlOnly","@/3xlTo4xl","@/3xlTo5xl","@/3xlTo6xl","@/3xlTo7xl","@/3xlTo8xl","@/3xs","@/3xsDown","@/3xsOnly","@/3xsTo2xl","@/3xsTo2xs","@/3xsTo3xl","@/3xsTo4xl","@/3xsTo5xl","@/3xsTo6xl","@/3xsTo7xl","@/3xsTo8xl","@/3xsToLg","@/3xsToMd","@/3xsToSm","@/3xsToXl","@/3xsToXs","@/4xl","@/4xlDown","@/4xlOnly","@/4xlTo5xl","@/4xlTo6xl","@/4xlTo7xl","@/4xlTo8xl","@/5xl","@/5xlDown","@/5xlOnly","@/5xlTo6xl","@/5xlTo7xl","@/5xlTo8xl","@/6xl","@/6xlDown","@/6xlOnly","@/6xlTo7xl","@/6xlTo8xl","@/7xl","@/7xlDown","@/7xlOnly","@/7xlTo8xl","@/8xl","@/8xlDown","@/8xlOnly","@/lg","@/lgDown","@/lgOnly","@/lgTo2xl","@/lgTo3xl","@/lgTo4xl","@/lgTo5xl","@/lgTo6xl","@/lgTo7xl","@/lgTo8xl","@/lgToXl","@/md","@/mdDown","@/mdOnly","@/mdTo2xl","@/mdTo3xl","@/mdTo4xl","@/mdTo5xl","@/mdTo6xl","@/mdTo7xl","@/mdTo8xl","@/mdToLg","@/mdToXl","@/sm","@/smDown","@/smOnly","@/smTo2xl","@/smTo3xl","@/smTo4xl","@/smTo5xl","@/smTo6xl","@/smTo7xl","@/smTo8xl","@/smToLg","@/smToMd","@/smToXl","@/xl","@/xlDown","@/xlOnly","@/xlTo2xl","@/xlTo3xl","@/xlTo4xl","@/xlTo5xl","@/xlTo6xl","@/xlTo7xl","@/xlTo8xl","@/xs","@/xsDown","@/xsOnly","@/xsTo2xl","@/xsTo3xl","@/xsTo4xl","@/xsTo5xl","@/xsTo6xl","@/xsTo7xl","@/xsTo8xl","@/xsToLg","@/xsToMd","@/xsToSm","@/xsToXl","WebkitAppearance","WebkitBorderBefore","WebkitBorderBeforeColor","WebkitBorderBeforeStyle","WebkitBorderBeforeWidth","WebkitBoxReflect","WebkitLineClamp","WebkitMask","WebkitMaskAttachment","WebkitMaskClip","WebkitMaskComposite","WebkitMaskImage","WebkitMaskOrigin","WebkitMaskPosition","WebkitMaskPositionX","WebkitMaskPositionY","WebkitMaskRepeat","WebkitMaskRepeatX","WebkitMaskRepeatY","WebkitMaskSize","WebkitOverflowScrolling","WebkitTapHighlightColor","WebkitTextFillColor","WebkitTextStroke","WebkitTextStrokeColor","WebkitTextStrokeWidth","WebkitTouchCallout","WebkitUserModify","WebkitUserSelect","_active","_aeonActive","_aeonChecked","_aeonClosed","_aeonCollapsed","_aeonDocked","_aeonEmpty","_aeonExpanded","_aeonFailure","_aeonFloating","_aeonHidden","_aeonInactive","_aeonInvalid","_aeonOpen","_aeonOverlayOpen","_aeonPending","_aeonReady","_aeonSelected","_aeonSuccess","_after","_anyPointerCoarse","_anyPointerFine","_anyPointerNone","_atValue","_autofill","_backdrop","_before","_checked","_closed","_complete","_current","_currentPage","_currentStep","_dark","_default","_disabled","_dragging","_empty","_enabled","_even","_expanded","_file","_first","_firstLetter","_firstLine","_firstOfType","_focus","_focusVisible","_focusWithin","_fullscreen","_grabbed","_groupActive","_groupChecked","_groupDisabled","_groupExpanded","_groupFocus","_groupFocusVisible","_groupFocusWithin","_groupHover","_groupInvalid","_hidden","_highContrast","_highlighted","_horizontal","_hover","_icon","_inRange","_incomplete","_indeterminate","_inert","_invalid","_invertedColors","_landscape","_last","_lastOfType","_lessContrast","_light","_loading","_ltr","_marker","_moreContrast","_motionReduce","_motionSafe","_noscript","_now","_odd","_only","_onlyOfType","_open","_optional","_osDark","_osLight","_outOfRange","_overValue","_peerActive","_peerChecked","_peerDisabled","_peerExpanded","_peerFocus","_peerFocusVisible","_peerFocusWithin","_peerHover","_peerInvalid","_peerPlaceholderShown","_placeholder","_placeholderShown","_pointerCoarse","_pointerFine","_pointerNone","_portrait","_pressed","_print","_rangeEnd","_rangeStart","_readOnly","_readWrite","_required","_rtl","_scrollbar","_scrollbarThumb","_scrollbarTrack","_selected","_selection","_starting","_target","_today","_topmost","_unavailable","_underValue","_userInvalid","_userValid","_valid","_vertical","_visited","accentColor","alignContent","alignItems","alignSelf","alignTracks","alignmentBaseline","all","anchorName","anchorScope","animation","animationComposition","animationDelay","animationDirection","animationDuration","animationFillMode","animationIterationCount","animationName","animationPlayState","animationRange","animationRangeEnd","animationRangeStart","animationState","animationTimeline","animationTimingFunction","appearance","aspectRatio","backdropBlur","backdropBrightness","backdropContrast","backdropFilter","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backfaceVisibility","background","backgroundAttachment","backgroundBlendMode","backgroundClip","backgroundColor","backgroundConic","backgroundGradient","backgroundImage","backgroundLinear","backgroundOrigin","backgroundPosition","backgroundPositionX","backgroundPositionY","backgroundRadial","backgroundRepeat","backgroundSize","base","baselineShift","bg","bgAttachment","bgBlendMode","bgClip","bgColor","bgConic","bgGradient","bgImage","bgLinear","bgOrigin","bgPosition","bgPositionX","bgPositionY","bgRadial","bgRepeat","bgSize","blockSize","blur","border","borderBlock","borderBlockColor","borderBlockEnd","borderBlockEndColor","borderBlockEndStyle","borderBlockEndWidth","borderBlockStart","borderBlockStartColor","borderBlockStartStyle","borderBlockStartWidth","borderBlockStyle","borderBlockWidth","borderBottom","borderBottomColor","borderBottomLeftRadius","borderBottomRadius","borderBottomRightRadius","borderBottomStyle","borderBottomWidth","borderCollapse","borderColor","borderEnd","borderEndColor","borderEndEndRadius","borderEndRadius","borderEndStartRadius","borderEndWidth","borderImage","borderImageOutset","borderImageRepeat","borderImageSlice","borderImageSource","borderImageWidth","borderInline","borderInlineColor","borderInlineEnd","borderInlineEndColor","borderInlineEndStyle","borderInlineEndWidth","borderInlineStart","borderInlineStartColor","borderInlineStartStyle","borderInlineStartWidth","borderInlineStyle","borderInlineWidth","borderLeft","borderLeftColor","borderLeftRadius","borderLeftStyle","borderLeftWidth","borderRadius","borderRight","borderRightColor","borderRightRadius","borderRightStyle","borderRightWidth","borderSpacing","borderSpacingX","borderSpacingY","borderStart","borderStartColor","borderStartEndRadius","borderStartRadius","borderStartStartRadius","borderStartWidth","borderStyle","borderTop","borderTopColor","borderTopLeftRadius","borderTopRadius","borderTopRightRadius","borderTopStyle","borderTopWidth","borderWidth","borderX","borderXColor","borderXWidth","borderY","borderYColor","borderYWidth","bottom","boxAlign","boxDecorationBreak","boxDirection","boxFlex","boxFlexGroup","boxLines","boxOrdinalGroup","boxOrient","boxPack","boxShadow","boxShadowColor","boxSize","boxSizing","breakAfter","breakBefore","breakInside","brightness","captionSide","caret","caretColor","caretShape","clear","clip","clipPath","clipRule","color","colorInterpolation","colorInterpolationFilters","colorPalette","colorRendering","colorScheme","columnCount","columnFill","columnGap","columnRule","columnRuleColor","columnRuleStyle","columnRuleWidth","columnSpan","columnWidth","columns","contain","containIntrinsicBlockSize","containIntrinsicHeight","containIntrinsicInlineSize","containIntrinsicSize","containIntrinsicWidth","container","containerName","containerType","content","contentVisibility","contrast","counterIncrement","counterReset","counterSet","css","cursor","cx","cy","d","debug","direction","display","divideColor","divideStyle","divideX","divideY","dominantBaseline","dropShadow","emptyCells","end","fieldSizing","fill","fillOpacity","fillRule","filter","flex","flexBasis","flexDir","flexDirection","flexFlow","flexGrow","flexShrink","flexWrap","float","floodColor","floodOpacity","focusRing","focusRingColor","focusRingOffset","focusRingStyle","focusRingWidth","focusVisibleRing","font","fontFamily","fontFeatureSettings","fontKerning","fontLanguageOverride","fontOpticalSizing","fontPalette","fontSize","fontSizeAdjust","fontSmooth","fontSmoothing","fontStretch","fontStyle","fontSynthesis","fontSynthesisPosition","fontSynthesisSmallCaps","fontSynthesisStyle","fontSynthesisWeight","fontVariant","fontVariantAlternates","fontVariantCaps","fontVariantEastAsian","fontVariantEmoji","fontVariantLigatures","fontVariantNumeric","fontVariantPosition","fontVariationSettings","fontWeight","fontWidth","forcedColorAdjust","gap","glyphOrientationVertical","gradientFrom","gradientFromPosition","gradientTo","gradientToPosition","gradientVia","gradientViaPosition","grayscale","grid","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridColumn","gridColumnEnd","gridColumnGap","gridColumnStart","gridGap","gridRow","gridRowEnd","gridRowGap","gridRowStart","gridTemplate","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","h","hangingPunctuation","height","hideBelow","hideFrom","hueRotate","hyphenateCharacter","hyphenateLimitChars","hyphens","imageOrientation","imageRendering","imageResolution","imeMode","initialLetter","initialLetterAlign","inlineSize","inset","insetBlock","insetBlockEnd","insetBlockStart","insetEnd","insetInline","insetInlineEnd","insetInlineStart","insetStart","insetX","insetY","interpolateSize","invert","isolation","justifyContent","justifyItems","justifySelf","justifyTracks","left","letterSpacing","lg","lgDown","lgOnly","lgTo2xl","lgToXl","lightingColor","lineBreak","lineClamp","lineHeight","lineHeightStep","listStyle","listStyleImage","listStylePosition","listStyleType","m","margin","marginBlock","marginBlockEnd","marginBlockStart","marginBottom","marginEnd","marginInline","marginInlineEnd","marginInlineStart","marginLeft","marginRight","marginStart","marginTop","marginTrim","marginX","marginY","marker","markerEnd","markerMid","markerStart","mask","maskBorder","maskBorderMode","maskBorderOutset","maskBorderRepeat","maskBorderSlice","maskBorderSource","maskBorderWidth","maskBottomFrom","maskBottomFromColor","maskBottomTo","maskBottomToColor","maskClip","maskComposite","maskConic","maskConicFrom","maskConicFromColor","maskConicTo","maskConicToColor","maskImage","maskLeftFrom","maskLeftFromColor","maskLeftTo","maskLeftToColor","maskLinear","maskLinearFrom","maskLinearFromColor","maskLinearTo","maskLinearToColor","maskMode","maskOrigin","maskPosition","maskRadial","maskRadialAt","maskRadialFrom","maskRadialFromColor","maskRadialShape","maskRadialSize","maskRadialTo","maskRadialToColor","maskRepeat","maskRightFrom","maskRightFromColor","maskRightTo","maskRightToColor","maskSize","maskTopFrom","maskTopFromColor","maskTopTo","maskTopToColor","maskType","maskXFrom","maskXFromColor","maskXTo","maskXToColor","maskYFrom","maskYFromColor","maskYTo","maskYToColor","masonryAutoFlow","mathDepth","mathShift","mathStyle","maxBlockSize","maxH","maxHeight","maxInlineSize","maxLines","maxW","maxWidth","mb","md","mdDown","mdOnly","mdTo2xl","mdToLg","mdToXl","me","minBlockSize","minH","minHeight","minInlineSize","minW","minWidth","mixBlendMode","ml","mr","ms","mt","mx","my","objectFit","objectPosition","objectViewBox","offset","offsetAnchor","offsetDistance","offsetPath","offsetPosition","offsetRotate","opacity","order","orphans","outline","outlineColor","outlineOffset","outlineStyle","outlineWidth","overflow","overflowAnchor","overflowBlock","overflowClipBox","overflowClipMargin","overflowInline","overflowWrap","overflowX","overflowY","overlay","overscrollBehavior","overscrollBehaviorBlock","overscrollBehaviorInline","overscrollBehaviorX","overscrollBehaviorY","p","padding","paddingBlock","paddingBlockEnd","paddingBlockStart","paddingBottom","paddingEnd","paddingInline","paddingInlineEnd","paddingInlineStart","paddingLeft","paddingRight","paddingStart","paddingTop","paddingX","paddingY","page","pageBreakAfter","pageBreakBefore","pageBreakInside","paintOrder","pb","pe","perspective","perspectiveOrigin","pl","placeContent","placeItems","placeSelf","pointerEvents","pos","position","positionAnchor","positionArea","positionTry","positionTryFallbacks","positionTryOrder","positionVisibility","pr","printColorAdjust","ps","pt","px","py","quotes","r","resize","right","ring","ringColor","ringOffset","ringWidth","rotate","rotateX","rotateY","rotateZ","rounded","roundedBottom","roundedBottomLeft","roundedBottomRight","roundedEnd","roundedEndEnd","roundedEndStart","roundedLeft","roundedRight","roundedStart","roundedStartEnd","roundedStartStart","roundedTop","roundedTopLeft","roundedTopRight","rowGap","rubyAlign","rubyMerge","rubyOverhang","rubyPosition","rx","ry","saturate","scale","scaleX","scaleY","scrollBehavior","scrollInitialTarget","scrollMargin","scrollMarginBlock","scrollMarginBlockEnd","scrollMarginBlockStart","scrollMarginBottom","scrollMarginInline","scrollMarginInlineEnd","scrollMarginInlineStart","scrollMarginLeft","scrollMarginRight","scrollMarginTop","scrollMarginX","scrollMarginY","scrollPadding","scrollPaddingBlock","scrollPaddingBlockEnd","scrollPaddingBlockStart","scrollPaddingBottom","scrollPaddingInline","scrollPaddingInlineEnd","scrollPaddingInlineStart","scrollPaddingLeft","scrollPaddingRight","scrollPaddingTop","scrollPaddingX","scrollPaddingY","scrollSnapAlign","scrollSnapCoordinate","scrollSnapDestination","scrollSnapMargin","scrollSnapMarginBottom","scrollSnapMarginLeft","scrollSnapMarginRight","scrollSnapMarginTop","scrollSnapPointsX","scrollSnapPointsY","scrollSnapStop","scrollSnapStrictness","scrollSnapType","scrollSnapTypeX","scrollSnapTypeY","scrollTimeline","scrollTimelineAxis","scrollTimelineName","scrollbar","scrollbarColor","scrollbarGutter","scrollbarThumb","scrollbarTrack","scrollbarWidth","sepia","shadow","shadowColor","shapeImageThreshold","shapeMargin","shapeOutside","shapeRendering","sm","smDown","smOnly","smTo2xl","smToLg","smToMd","smToXl","spaceX","spaceY","speakAs","srOnly","start","stopColor","stopOpacity","stroke","strokeColor","strokeDasharray","strokeDashoffset","strokeLinecap","strokeLinejoin","strokeMiterlimit","strokeOpacity","strokeWidth","tabSize","tableLayout","textAlign","textAlignLast","textAnchor","textAutospace","textBox","textBoxEdge","textBoxTrim","textCombineUpright","textDecoration","textDecorationColor","textDecorationLine","textDecorationSkip","textDecorationSkipInk","textDecorationStyle","textDecorationThickness","textEmphasis","textEmphasisColor","textEmphasisPosition","textEmphasisStyle","textGradient","textIndent","textJustify","textOrientation","textOverflow","textRendering","textShadow","textShadowColor","textSizeAdjust","textSpacingTrim","textStyle","textTransform","textUnderlineOffset","textUnderlinePosition","textWrap","textWrapMode","textWrapStyle","timelineScope","top","touchAction","transform","transformBox","transformOrigin","transformStyle","transition","transitionBehavior","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","translate","translateX","translateY","translateZ","truncate","unicodeBidi","userSelect","vectorEffect","verticalAlign","viewTimeline","viewTimelineAxis","viewTimelineInset","viewTimelineName","viewTransitionClass","viewTransitionName","visibility","w","whiteSpace","whiteSpaceCollapse","widows","width","willChange","wordBreak","wordSpacing","wordWrap","writingMode","x","xl","xlDown","xlOnly","xlTo2xl","y","z","zIndex","zoom"])
+const cssPropertySelectorRe = /&|@/
+
+export function isCssProperty(value) {
+  return cssPropertySet.has(value) || value.startsWith("--") || cssPropertySelectorRe.test(value)
+}
+
+export function splitCssProps(props) {
+  return splitProps(props, isCssProperty)
+}

package/packages/panda/styled-system/jsx/link-overlay.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { LinkOverlayProperties } from '../patterns/link-overlay';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties > {}
-
-
-export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>
+export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties> {}
+export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>;

package/packages/panda/styled-system/jsx/link-overlay.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { linkOverlay } from '../patterns/link-overlay';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
+  const [patternProps, restProps] = splitProps(props, linkOverlay.propKeys)
+  const styleProps = linkOverlay.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["a"], mergedProps)
+})

package/packages/panda/styled-system/jsx/spacer.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { SpacerProperties } from '../patterns/spacer';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties > {}
-
-
-export declare const Spacer: FunctionComponent<SpacerProps>
+export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties> {}
+export declare const Spacer: FunctionComponent<SpacerProps>;

package/packages/panda/styled-system/jsx/spacer.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { spacer } from '../patterns/spacer';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
+  const [patternProps, restProps] = splitProps(props, spacer.propKeys)
+  const styleProps = spacer.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/square.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { SquareProperties } from '../patterns/square';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties > {}
-
-
-export declare const Square: FunctionComponent<SquareProps>
+export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties> {}
+export declare const Square: FunctionComponent<SquareProps>;

package/packages/panda/styled-system/jsx/square.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { square } from '../patterns/square';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
+  const [patternProps, restProps] = splitProps(props, square.propKeys)
+  const styleProps = square.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/stack.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { StackProperties } from '../patterns/stack';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties > {}
-
-
-export declare const Stack: FunctionComponent<StackProps>
+export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties> {}
+export declare const Stack: FunctionComponent<StackProps>;

package/packages/panda/styled-system/jsx/stack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { stack } from '../patterns/stack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, stack.propKeys)
+  const styleProps = stack.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/visually-hidden.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties > {}
-
-
-export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>
+export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties> {}
+export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>;

package/packages/panda/styled-system/jsx/visually-hidden.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { visuallyHidden } from '../patterns/visually-hidden';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
+  const [patternProps, restProps] = splitProps(props, visuallyHidden.propKeys)
+  const styleProps = visuallyHidden.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/vstack.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { VstackProperties } from '../patterns/vstack';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties > {}
-
-
-export declare const VStack: FunctionComponent<VstackProps>
+export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties> {}
+export declare const VStack: FunctionComponent<VstackProps>;

package/packages/panda/styled-system/jsx/vstack.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { vstack } from '../patterns/vstack';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, vstack.propKeys)
+  const styleProps = vstack.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/jsx/wrap.d.ts

@@ -1,10 +1,7 @@
-/* eslint-disable */
-import type { FunctionComponent } from 'react'
+import type { FunctionComponent } from 'react';
 import type { WrapProperties } from '../patterns/wrap';
 import type { HTMLStyledProps } from '../types/jsx';
-import type { DistributiveOmit } from '../types/system-types';
+import type { DistributiveOmit } from '../types/system';
 
-export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
-
-
-export declare const Wrap: FunctionComponent<WrapProps>
+export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties> {}
+export declare const Wrap: FunctionComponent<WrapProps>;

package/packages/panda/styled-system/jsx/wrap.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { wrap } from '../patterns/wrap';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
+  const [patternProps, restProps] = splitProps(props, wrap.propKeys)
+  const styleProps = wrap.raw(patternProps)
+  const mergedProps = { ref, ...styleProps, ...restProps }
+  return createElement(styled["div"], mergedProps)
+})

package/packages/panda/styled-system/patterns/aspect-ratio.d.ts

@@ -1,20 +1,19 @@
-/* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types/index';
-import type { Properties } from '../types/csstype';
-import type { SystemProperties } from '../types/style-props';
-import type { DistributiveOmit } from '../types/system-types';
-import type { Tokens } from '../tokens/index';
+import type { ConditionalValue, SystemStyleObject } from '../types/system';
 
 export interface AspectRatioProperties {
-   ratio?: ConditionalValue<number>
+  ratio?: ConditionalValue<number>
 }
 
-interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
+type AspectRatioRestStyles = Omit<SystemStyleObject, keyof AspectRatioProperties | "aspectRatio">
+
+interface AspectRatioStyles extends AspectRatioProperties, AspectRatioRestStyles {}
 
 interface AspectRatioPatternFn {
   (styles?: AspectRatioStyles): string
   raw: (styles?: AspectRatioStyles) => SystemStyleObject
+  propKeys: Array<keyof AspectRatioProperties>
 }
 
+export declare function aspectRatioRaw(styles?: AspectRatioStyles): SystemStyleObject;
 
-export declare const aspectRatio: AspectRatioPatternFn;
+export declare const aspectRatio: AspectRatioPatternFn;

package/packages/panda/styled-system/patterns/aspect-ratio.js

@@ -0,0 +1,37 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+const aspectRatioConfig = { transform(props, { map }) {
+  const { ratio = 4 / 3, ...rest } = props;
+  return {
+    position: "relative",
+    _before: {
+      content: `""`,
+      display: "block",
+      height: "0",
+      paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
+    },
+    "&>*": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    },
+    "&>img, &>video": { objectFit: "cover" },
+    ...rest
+  };
+} }
+
+export function aspectRatioRaw(styles) {
+  const s = getPatternStyles(aspectRatioConfig, styles || {})
+  return aspectRatioConfig.transform(s, patternFns)
+}
+
+export const aspectRatio = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function aspectRatio(styles = {}) {
+  return css(aspectRatioRaw(styles))
+}), { raw: aspectRatioRaw, propKeys: ["ratio"] })

package/packages/panda/styled-system/patterns/bleed.d.ts

@@ -1,21 +1,20 @@
-/* eslint-disable */
-import type { SystemStyleObject, ConditionalValue } from '../types/index';
-import type { Properties } from '../types/csstype';
-import type { SystemProperties } from '../types/style-props';
-import type { DistributiveOmit } from '../types/system-types';
-import type { Tokens } from '../tokens/index';
+import type { SystemProperties, SystemStyleObject } from '../types/system';
 
 export interface BleedProperties {
-   inline?: SystemProperties["marginInline"]
-	block?: SystemProperties["marginBlock"]
+  block?: SystemProperties["marginBlock"]
+  inline?: SystemProperties["marginInline"]
 }
 
-interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
+type BleedRestStyles = Omit<SystemStyleObject, keyof BleedProperties>
+
+interface BleedStyles extends BleedProperties, BleedRestStyles {}
 
 interface BleedPatternFn {
   (styles?: BleedStyles): string
   raw: (styles?: BleedStyles) => SystemStyleObject
+  propKeys: Array<keyof BleedProperties>
 }
 
+export declare function bleedRaw(styles?: BleedStyles): SystemStyleObject;
 
-export declare const bleed: BleedPatternFn;
+export declare const bleed: BleedPatternFn;

package/packages/panda/styled-system/patterns/bleed.js

@@ -0,0 +1,30 @@
+import { getPatternStyles, patternFns } from './runtime';
+import { memo } from '../helpers';
+import { css } from '../css/index';
+
+const bleedConfig = {
+  transform(props, { map, isCssUnit, isCssVar }) {
+    const { inline, block, ...rest } = props;
+    const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+    return {
+      "--bleed-x": map(inline, valueFn),
+      "--bleed-y": map(block, valueFn),
+      marginInline: "calc(var(--bleed-x, 0) * -1)",
+      marginBlock: "calc(var(--bleed-y, 0) * -1)",
+      ...rest
+    };
+  },
+  defaultValues: {
+    inline: "0",
+    block: "0"
+  }
+}
+
+export function bleedRaw(styles) {
+  const s = getPatternStyles(bleedConfig, styles || {})
+  return bleedConfig.transform(s, patternFns)
+}
+
+export const bleed = /* @__PURE__ */ Object.assign(/* @__PURE__ */ memo(function bleed(styles = {}) {
+  return css(bleedRaw(styles))
+}), { raw: bleedRaw, propKeys: ["block","inline"] })