@pandacss/generator 1.1.0 → 1.3.0

package/dist/index.js

@@ -996,7 +996,7 @@ function generatePreactJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, children, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, ...restProps } = props
 
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
@@ -1017,7 +1017,13 @@ function generatePreactJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return h(Element, {
           ...forwardedProps,
@@ -1025,7 +1031,7 @@ function generatePreactJsxFactory(ctx) {
           ...normalizeHTMLProps(htmlProps),
           ref,
           className: classes()
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1151,9 +1157,23 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -1162,12 +1182,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1188,7 +1208,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1426,9 +1446,16 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -1480,7 +1507,7 @@ function generateQwikJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = __base__, children, className, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, className, ...restProps } = props
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
 
@@ -1501,14 +1528,20 @@ function generateQwikJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.class, className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return h(Element, {
           ...forwardedProps,
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           class: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       }
 
       const name = getDisplayName(__base__)
@@ -1640,7 +1673,21 @@ interface Dict {
   [k: string]: unknown
 }
 
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T> & UnstyledProps & AsProps, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
 
 interface RecipeFn {
   __type: any
@@ -1648,12 +1695,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1674,7 +1721,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1765,8 +1812,15 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
 }
 
 export interface JsxFactory {
@@ -1818,7 +1872,7 @@ function generateReactJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, children, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, ...restProps } = props
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -1838,7 +1892,13 @@ function generateReactJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return createElement(Element, {
           ref,
@@ -1846,7 +1906,7 @@ function generateReactJsxFactory(ctx) {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           className: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1970,13 +2030,27 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -1985,12 +2059,12 @@ interface RecipeFn {
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -2011,7 +2085,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2248,13 +2322,20 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
-}
+} & AsProps
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -2322,6 +2403,7 @@ function generateSolidJsxFactory(ctx) {
 
         const [localProps, restProps] = splitProps(mergedProps, [
           'as',
+          'unstyled',
           'class',
           'className',
         ])
@@ -2364,7 +2446,13 @@ function generateSolidJsxFactory(ctx) {
           )
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (localProps.unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), localProps.class, localProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         if (forwardedProps.className) {
           delete forwardedProps.className
@@ -2510,11 +2598,25 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -2523,12 +2625,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -2549,7 +2651,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2815,11 +2917,18 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export type ${componentName}<T extends ElementType> = {
-    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-    displayName?: string
+    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+    displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -2877,6 +2986,7 @@ function generateVueJsxFactory(ctx) {
         inheritAttrs: false,
         props: {
           modelValue: null,
+          unstyled: { type: Boolean, default: false },
           as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
@@ -2900,7 +3010,14 @@ function generateVueJsxFactory(ctx) {
             return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
           })
 
-          const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+          const classes = computed(() => {
+            if (props.unstyled) {
+              const [_htmlProps, _forwardedProps, _variantProps, styleProps, _elementProps] = splittedProps.value
+              const { css: cssStyles, ...propStyles } = styleProps
+              return cx(css(propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            }
+            return configOrCva.__recipe__ ? recipeClass.value : cvaClass.value
+          })
 
           const vModelProps = computed(() => {
             const result = {};
@@ -3074,8 +3191,26 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
+interface Dict {
+  [k: string]: unknown
+}
+
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>
 > {}
 
 interface RecipeFn {
@@ -3084,12 +3219,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
+export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P['__type']>>;
 
 export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -3110,7 +3245,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -3420,8 +3555,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T>>
+  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T> & AsProps>
 }
 
 export interface JsxFactory {
@@ -3511,7 +3653,7 @@ var import_ts_pattern14 = require("ts-pattern");
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkipInk'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'color'\n  | 'direction'\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hangingPunctuation'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'tabSize'\n  | 'textAlign'\n  | 'textAlignLast'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkip'\n  | 'textDecorationSkipBox'\n  | 'textDecorationSkipInk'\n  | 'textDecorationSkipInset'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textStroke'\n  | 'textStrokeColor'\n  | 'textStrokeWidth'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'unicodeBidi'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n  | 'writingMode'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'\n\ntype PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'\n\ntype Placement = PhysicalPlacement | LogicalPlacement\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'aspectRatio'\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'border'\n  | 'borderColor'\n  | 'borderImage'\n  | 'borderImageOutset'\n  | 'borderImageRepeat'\n  | 'borderImageSlice'\n  | 'borderImageSource'\n  | 'borderImageWidth'\n  | 'borderRadius'\n  | 'borderStyle'\n  | 'borderWidth'\n  | `border${Placement}`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | 'boxShadow'\n  | 'boxShadowColor'\n  | 'clipPath'\n  | 'color'\n  | 'contain'\n  | 'content'\n  | 'contentVisibility'\n  | 'cursor'\n  | 'display'\n  | 'filter'\n  | 'backdropFilter'\n  | 'height'\n  | 'width'\n  | 'minHeight'\n  | 'minWidth'\n  | 'maxHeight'\n  | 'maxWidth'\n  | `margin${Placement}`\n  | 'inset'\n  | `inset${LogicalPlacement}`\n  | Lowercase<PhysicalPlacement>\n  | 'isolation'\n  | 'mask'\n  | 'maskClip'\n  | 'maskComposite'\n  | 'maskImage'\n  | 'maskMode'\n  | 'maskOrigin'\n  | 'maskPosition'\n  | 'maskRepeat'\n  | 'maskSize'\n  | 'mixBlendMode'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'opacity'\n  | 'outline'\n  | 'outlineColor'\n  | 'outlineOffset'\n  | 'outlineStyle'\n  | 'outlineWidth'\n  | 'overflow'\n  | 'overflowX'\n  | 'overflowY'\n  | 'padding'\n  | `padding${Placement}`\n  | 'pointerEvents'\n  | 'position'\n  | 'resize'\n  | 'transform'\n  | 'transition'\n  | 'visibility'\n  | 'willChange'\n  | 'zIndex'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
 };
 
 // src/artifacts/generated/csstype.d.ts.json
@@ -5307,6 +5449,9 @@ function generateResetCss(ctx, sheet) {
         "--placeholder-fallback": "color-mix(in oklab, currentcolor 50%, transparent)"
       }
     },
+    "::selection": {
+      backgroundColor: "var(--global-color-selection, rgba(0, 115, 255, 0.3))"
+    },
     textarea: {
       resize: "vertical"
     },
@@ -5386,7 +5531,15 @@ function generateResetCss(ctx, sheet) {
     }
   };
   if (level === "element") {
-    const modified = (0, import_shared6.mapEntries)(scoped, (k, v) => [k, { [selector]: v }]);
+    const modified = (0, import_shared6.mapEntries)(scoped, (k, v) => {
+      const [trailingPseudo, rebuiltSelector] = (0, import_core4.extractTrailingPseudos)(k.toString());
+      if (trailingPseudo) {
+        const scopeClass = selector.replace("&", "");
+        const newSelector = rebuiltSelector ? `${scopeClass} ${rebuiltSelector}${trailingPseudo}` : `${scopeClass} ${trailingPseudo}`;
+        return [newSelector, v];
+      }
+      return [k, { [selector]: v }];
+    });
     Object.assign(reset, modified);
   } else if (selector) {
     reset[selector] = scoped;

package/dist/index.mjs

@@ -960,7 +960,7 @@ function generatePreactJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, children, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, ...restProps } = props
 
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
@@ -981,7 +981,13 @@ function generatePreactJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.class, combinedProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return h(Element, {
           ...forwardedProps,
@@ -989,7 +995,7 @@ function generatePreactJsxFactory(ctx) {
           ...normalizeHTMLProps(htmlProps),
           ref,
           className: classes()
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1115,9 +1121,23 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -1126,12 +1146,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1152,7 +1172,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1390,9 +1410,16 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -1444,7 +1471,7 @@ function generateQwikJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = __base__, children, className, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, className, ...restProps } = props
 
         const combinedProps = Object.assign({}, defaultProps, restProps)
 
@@ -1465,14 +1492,20 @@ function generateQwikJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.class, className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return h(Element, {
           ...forwardedProps,
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           class: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       }
 
       const name = getDisplayName(__base__)
@@ -1604,7 +1637,21 @@ interface Dict {
   [k: string]: unknown
 }
 
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T>, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T> & UnstyledProps & AsProps, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
 
 interface RecipeFn {
   __type: any
@@ -1612,12 +1659,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1638,7 +1685,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1729,8 +1776,15 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
 }
 
 export interface JsxFactory {
@@ -1782,7 +1836,7 @@ function generateReactJsxFactory(ctx) {
       const __base__ = Dynamic.__base__ || Dynamic
 
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = __base__, children, ...restProps } = props
+        const { as: Element = __base__, unstyled, children, ...restProps } = props
 
         const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
@@ -1802,7 +1856,13 @@ function generateReactJsxFactory(ctx) {
           return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), combinedProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         return createElement(Element, {
           ref,
@@ -1810,7 +1870,7 @@ function generateReactJsxFactory(ctx) {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           className: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1934,13 +1994,27 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -1949,12 +2023,12 @@ interface RecipeFn {
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1975,7 +2049,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2212,13 +2286,20 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
-}
+} & AsProps
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -2286,6 +2367,7 @@ function generateSolidJsxFactory(ctx) {
 
         const [localProps, restProps] = splitProps(mergedProps, [
           'as',
+          'unstyled',
           'class',
           'className',
         ])
@@ -2328,7 +2410,13 @@ function generateSolidJsxFactory(ctx) {
           )
         }
 
-        const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+        const classes = () => {
+          if (localProps.unstyled) {
+            const { css: cssStyles, ...propStyles } = styleProps
+            return cx(css(propStyles, cssStyles), localProps.class, localProps.className)
+          }
+          return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+        }
 
         if (forwardedProps.className) {
           delete forwardedProps.className
@@ -2474,11 +2562,25 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -2487,12 +2589,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -2513,7 +2615,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2779,11 +2881,18 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export type ${componentName}<T extends ElementType> = {
-    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-    displayName?: string
+    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+    displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -2841,6 +2950,7 @@ function generateVueJsxFactory(ctx) {
         inheritAttrs: false,
         props: {
           modelValue: null,
+          unstyled: { type: Boolean, default: false },
           as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
@@ -2864,7 +2974,14 @@ function generateVueJsxFactory(ctx) {
             return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
           })
 
-          const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+          const classes = computed(() => {
+            if (props.unstyled) {
+              const [_htmlProps, _forwardedProps, _variantProps, styleProps, _elementProps] = splittedProps.value
+              const { css: cssStyles, ...propStyles } = styleProps
+              return cx(css(propStyles, cssStyles), combinedProps.value.className, combinedProps.value.class)
+            }
+            return configOrCva.__recipe__ ? recipeClass.value : cvaClass.value
+          })
 
           const vModelProps = computed(() => {
             const result = {};
@@ -3038,8 +3155,26 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
+interface Dict {
+  [k: string]: unknown
+}
+
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>
 > {}
 
 interface RecipeFn {
@@ -3048,12 +3183,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
+export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P['__type']>>;
 
 export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -3074,7 +3209,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -3384,8 +3519,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T>>
+  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T> & AsProps>
 }
 
 export interface JsxFactory {
@@ -3475,7 +3617,7 @@ import { match as match14 } from "ts-pattern";
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkipInk'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'color'\n  | 'direction'\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hangingPunctuation'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'tabSize'\n  | 'textAlign'\n  | 'textAlignLast'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkip'\n  | 'textDecorationSkipBox'\n  | 'textDecorationSkipInk'\n  | 'textDecorationSkipInset'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textStroke'\n  | 'textStrokeColor'\n  | 'textStrokeWidth'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'unicodeBidi'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n  | 'writingMode'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'\n\ntype PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'\n\ntype Placement = PhysicalPlacement | LogicalPlacement\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'aspectRatio'\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'border'\n  | 'borderColor'\n  | 'borderImage'\n  | 'borderImageOutset'\n  | 'borderImageRepeat'\n  | 'borderImageSlice'\n  | 'borderImageSource'\n  | 'borderImageWidth'\n  | 'borderRadius'\n  | 'borderStyle'\n  | 'borderWidth'\n  | `border${Placement}`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | 'boxShadow'\n  | 'boxShadowColor'\n  | 'clipPath'\n  | 'color'\n  | 'contain'\n  | 'content'\n  | 'contentVisibility'\n  | 'cursor'\n  | 'display'\n  | 'filter'\n  | 'backdropFilter'\n  | 'height'\n  | 'width'\n  | 'minHeight'\n  | 'minWidth'\n  | 'maxHeight'\n  | 'maxWidth'\n  | `margin${Placement}`\n  | 'inset'\n  | `inset${LogicalPlacement}`\n  | Lowercase<PhysicalPlacement>\n  | 'isolation'\n  | 'mask'\n  | 'maskClip'\n  | 'maskComposite'\n  | 'maskImage'\n  | 'maskMode'\n  | 'maskOrigin'\n  | 'maskPosition'\n  | 'maskRepeat'\n  | 'maskSize'\n  | 'mixBlendMode'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'opacity'\n  | 'outline'\n  | 'outlineColor'\n  | 'outlineOffset'\n  | 'outlineStyle'\n  | 'outlineWidth'\n  | 'overflow'\n  | 'overflowX'\n  | 'overflowY'\n  | 'padding'\n  | `padding${Placement}`\n  | 'pointerEvents'\n  | 'position'\n  | 'resize'\n  | 'transform'\n  | 'transition'\n  | 'visibility'\n  | 'willChange'\n  | 'zIndex'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
 };
 
 // src/artifacts/generated/csstype.d.ts.json
@@ -5200,7 +5342,7 @@ var generateParserCss = (ctx, decoder) => {
 };
 
 // src/artifacts/css/reset-css.ts
-import "@pandacss/core";
+import { extractTrailingPseudos } from "@pandacss/core";
 import { isObject, mapEntries } from "@pandacss/shared";
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
@@ -5271,6 +5413,9 @@ function generateResetCss(ctx, sheet) {
         "--placeholder-fallback": "color-mix(in oklab, currentcolor 50%, transparent)"
       }
     },
+    "::selection": {
+      backgroundColor: "var(--global-color-selection, rgba(0, 115, 255, 0.3))"
+    },
     textarea: {
       resize: "vertical"
     },
@@ -5350,7 +5495,15 @@ function generateResetCss(ctx, sheet) {
     }
   };
   if (level === "element") {
-    const modified = mapEntries(scoped, (k, v) => [k, { [selector]: v }]);
+    const modified = mapEntries(scoped, (k, v) => {
+      const [trailingPseudo, rebuiltSelector] = extractTrailingPseudos(k.toString());
+      if (trailingPseudo) {
+        const scopeClass = selector.replace("&", "");
+        const newSelector = rebuiltSelector ? `${scopeClass} ${rebuiltSelector}${trailingPseudo}` : `${scopeClass} ${trailingPseudo}`;
+        return [newSelector, v];
+      }
+      return [k, { [selector]: v }];
+    });
     Object.assign(reset, modified);
   } else if (selector) {
     reset[selector] = scoped;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.49",
     "ts-pattern": "5.8.0",
-    "@pandacss/core": "1.1.0",
-    "@pandacss/is-valid-prop": "^1.1.0",
-    "@pandacss/logger": "1.1.0",
-    "@pandacss/shared": "1.1.0",
-    "@pandacss/token-dictionary": "1.1.0",
-    "@pandacss/types": "1.1.0"
+    "@pandacss/core": "1.3.0",
+    "@pandacss/is-valid-prop": "^1.3.0",
+    "@pandacss/logger": "1.3.0",
+    "@pandacss/shared": "1.3.0",
+    "@pandacss/token-dictionary": "1.3.0",
+    "@pandacss/types": "1.3.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"