@pandacss/node 0.0.0-dev-20230109182737 → 0.0.0-dev-20230110151021

package/dist/index.js

@@ -130,20 +130,19 @@ var import_fs2 = require("fs");
 var import_outdent23 = __toESM(require("outdent"));
 
 // src/generators/conditions.ts
-var import_shared = require("@pandacss/shared");
 var import_outdent = __toESM(require("outdent"));
 function generateConditions(ctx) {
   const keys = Object.keys(ctx.conditions.values).concat("base");
   return {
     js: import_outdent.default`
-     import { withoutSpace } from '../helpers'
-     const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
-     
-     export function isCondition(value){
+    import { withoutSpace } from '../helpers'
+    const conditions = new Set([${keys.map((key) => JSON.stringify(key))}])
+    
+    export function isCondition(value){
       return conditions.has(value) || /^@|&|&$/.test(value)
-     }
-
-     export function finalizeConditions(paths){
+    }
+    
+    export function finalizeConditions(paths){
       return paths.map((path) => {
         if (conditions.has(path)){
           return path.replace(/^_/, '')
@@ -152,11 +151,11 @@ function generateConditions(ctx) {
         if (/&|@/.test(path)){
           return \`[\${withoutSpace(path.trim())}]\`
         }
-
+        
         return path
       })}
-
-     export function sortConditions(paths){
+      
+      export function sortConditions(paths){
         return paths.sort((a, b) => {
           const aa = isCondition(a)
           const bb = isCondition(b)
@@ -164,12 +163,34 @@ function generateConditions(ctx) {
           if (!aa && bb) return -1
           return 0
         })
-     }
-    `,
+      }
+      `,
     dts: import_outdent.default`
-  export type Condition = ${(0, import_shared.unionType)(keys)}
+    import type { AnySelector, Selectors } from './selectors'
+    
+    export type Conditions = {
+    ${keys.map((key) => `	${JSON.stringify(key)}: string`).join("\n")}
+    }
 
-  export type Conditions = Record<Condition, string>
+    export type Condition = keyof Conditions
+
+    export type Conditional<V> =
+      | V
+      | Array<V | null>
+      | {
+          [K in keyof Conditions]?: Conditional<V>
+        }
+    
+    export type ConditionalValue<T> = Conditional<T>
+
+    export type Nested<P> = P & {
+      [K in Selectors]?: Nested<P>
+    } & {
+      [K in AnySelector]?: Nested<P>
+    } & {
+      [K in keyof Conditions]?: Nested<P>
+    }
+    
   `
   };
 }
@@ -367,7 +388,7 @@ function generatePreactJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(Object.create(null), {
+      return new Proxy(styled, {
         apply(_, __, args) {
           return styled(...args)
         },
@@ -442,8 +463,8 @@ function generatePreactLayoutGrid() {
 var import_outdent7 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 function generate(ctx, name, pattern) {
-  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
-  const { componentName } = ctx.jsxFactoryDetails;
+  const { upperName, styleFn, dashName, jsxName, props, blocklistType } = ctx.getPatternDetails(name, pattern);
+  const { typeName } = ctx.jsxFactoryDetails;
   return {
     name: dashName,
     js: import_outdent7.outdent`
@@ -467,11 +488,14 @@ function generate(ctx, name, pattern) {
     })    
     `,
     dts: import_outdent7.outdent`
+    import { FunctionComponent } from 'preact'
     import { ${upperName}Properties } from '../patterns/${dashName}'
-    import { ${componentName} } from '../types/jsx'
+    import { ${typeName} } from '../types/jsx'
+
+    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'div'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: ${componentName}<"div", ${upperName}Properties>
+    export declare const ${jsxName}: FunctionComponent<${upperName}Props>
     `
   };
 }
@@ -501,32 +525,20 @@ type AdditionalHtmlProps = {
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<ComponentProps> = Omit<
-  ComponentProps,
-  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
-> &
-  AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
 
-type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
-  Polyfill<ComponentProps>,
-  AdditionalProps
->
+type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
-export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
-  (
-    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
-  ): JSX.Element
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+  (props: Props<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
 export type ${upperName} = {
-  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
-    Component,
-    AdditionalProps
-  >
+  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & JsxStyleProps
+export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
   `
   };
 }
@@ -584,7 +596,7 @@ function generateReactJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(Object.create(null), {
+      return new Proxy(styled, {
         apply(_, __, args) {
           return styled(...args)
         },
@@ -660,8 +672,8 @@ function generateReactLayoutGrid() {
 var import_outdent11 = require("outdent");
 var import_ts_pattern2 = require("ts-pattern");
 function generate2(ctx, name, pattern) {
-  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
-  const { componentName } = ctx.jsxFactoryDetails;
+  const { upperName, styleFn, dashName, jsxName, props, blocklistType } = ctx.getPatternDetails(name, pattern);
+  const { typeName } = ctx.jsxFactoryDetails;
   return {
     name: dashName,
     js: import_outdent11.outdent`
@@ -686,11 +698,14 @@ function generate2(ctx, name, pattern) {
     })    
     `,
     dts: import_outdent11.outdent`
+    import { FunctionComponent } from 'react'
     import { ${upperName}Properties } from '../patterns/${dashName}'
-    import { ${componentName} } from '../types/jsx'
+    import { ${typeName} } from '../types/jsx'
+
+    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'div'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: ${componentName}<'div', ${upperName}Properties>
+    export declare const ${jsxName}: FunctionComponent<${upperName}Props>
     `
   };
 }
@@ -720,32 +735,20 @@ type AdditionalHtmlProps = {
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<ComponentProps> = Omit<
-  ComponentProps,
-  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
-> &
-  AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
 
-type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
-  Polyfill<ComponentProps>,
-  AdditionalProps
->
+type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
-export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
-  (
-    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
-  ): JSX.Element
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+  (props: Props<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
 export type ${upperName} = {
-  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
-    Component,
-    AdditionalProps
-  >
+  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & JsxStyleProps
+export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
   `
   };
 }
@@ -799,7 +802,7 @@ function generateSolidJsxFactory(ctx) {
     function createJsxFactory() {
       const cache = new Map()
     
-      return new Proxy(Object.create(null), {
+      return new Proxy(styled, {
         apply(_, __, args) {
           return styled(...args)
         },
@@ -874,8 +877,8 @@ function generateSolidLayoutGrid() {
 var import_outdent15 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
 function generate3(ctx, name, pattern) {
-  const { upperName, styleFn, dashName, jsxName, props } = ctx.getPatternDetails(name, pattern);
-  const { componentName } = ctx.jsxFactoryDetails;
+  const { upperName, styleFn, dashName, jsxName, props, blocklistType } = ctx.getPatternDetails(name, pattern);
+  const { typeName } = ctx.jsxFactoryDetails;
   return {
     name: dashName,
     js: import_outdent15.outdent`
@@ -899,11 +902,14 @@ function generate3(ctx, name, pattern) {
     }
     `,
     dts: import_outdent15.outdent`
+    import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
-    import { ${componentName} } from '../types/jsx'
+    import { ${typeName} } from '../types/jsx'
+
+    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'div'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${pattern.description ? `/** ${pattern.description} */` : ""}
-    export declare const ${jsxName}: ${componentName}<"div", ${upperName}Properties>
+    export declare const ${jsxName}: Component<${upperName}Props>
     `
   };
 }
@@ -926,7 +932,7 @@ import type { JsxStyleProps, Assign } from '.'
 
 type Dict = Record<string, unknown>
 
-type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>;
+type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 type AdditionalHtmlProps = {
   htmlSize?: string | number
@@ -935,33 +941,20 @@ type AdditionalHtmlProps = {
   htmlTranslate?: 'yes' | 'no' | undefined
 }
 
-type Polyfill<ComponentProps> = Omit<
-  ComponentProps,
-  'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'
-> &
-  AdditionalHtmlProps
+type Polyfill<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size'> & AdditionalHtmlProps
 
-type Props<ComponentProps extends Dict, AdditionalProps extends Dict = {}> = Assign<
-  Polyfill<ComponentProps>,
-  AdditionalProps
->
+type Props<T extends Dict, P extends Dict = {}> = Assign<Polyfill<T>, P>
 
-export type ${componentName}<ComponentType extends ElementType, AdditionalProps extends Dict = {}> = {
-  (
-    props: Props<ComponentProps<ComponentType>, AdditionalProps> & JsxStyleProps<AdditionalProps>,
-  ): JSX.Element
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = {
+  (props: Props<ComponentProps<T>, P> & JsxStyleProps): JSX.Element
   displayName?: string
 }
 
-
 export type ${upperName} = {
-  <Component extends ElementType, AdditionalProps extends Dict = {}>(component: Component): ${componentName}<
-    Component,
-    AdditionalProps
-  >
+  <T extends ElementType, P extends Dict = {}>(component: T): ${componentName}<T, P>
 } & { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${typeName}<ComponentType extends ElementType> = Polyfill<ComponentProps<ComponentType>> & JsxStyleProps
+export type ${typeName}<T extends ElementType> = Polyfill<ComponentProps<T>> & JsxStyleProps
   `
   };
 }
@@ -1005,33 +998,33 @@ function generateLayoutGrid(ctx) {
 }
 
 // src/generators/pattern.ts
-var import_shared2 = require("@pandacss/shared");
+var import_shared = require("@pandacss/shared");
 var import_outdent17 = require("outdent");
 var import_telejson = require("telejson");
 var import_ts_pattern4 = require("ts-pattern");
-function generate4(name, pattern) {
+function generate4(ctx, name, pattern) {
   const { properties, transform, strict, description } = pattern;
-  const upperName = (0, import_shared2.capitalize)(name);
-  const upperFn = `get${upperName}Style`;
+  const { upperName, styleFn, blocklistType } = ctx.getPatternDetails(name, pattern);
   return {
-    name: (0, import_shared2.dashCase)(name),
+    name: (0, import_shared.dashCase)(name),
     dts: import_outdent17.outdent`
-    import { SystemStyleObject, ConditionalValue } from "../types"
-    import { Properties } from "../types/csstype"
-    import { Tokens } from "../types/token"
+    import { SystemStyleObject, ConditionalValue } from '../types'
+    import { PropertyValue } from '../types/prop-type'
+    import { Properties } from '../types/csstype'
+    import { Tokens } from '../types/token'
 
-    export type ${(0, import_shared2.capitalize)(name)}Properties = {
+    export type ${(0, import_shared.capitalize)(name)}Properties = {
        ${Object.keys(properties ?? {}).map((key) => {
       const value = properties[key];
       return (0, import_ts_pattern4.match)(value).with({ type: "property" }, (value2) => {
-        return `${key}?: SystemStyleObject["${value2.value}"]`;
+        return `${key}?: PropertyValue<'${value2.value}'>`;
       }).with({ type: "token" }, (value2) => {
         if (value2.property) {
           return `${key}?: ConditionalValue<Tokens["${value2.value}"] | Properties["${value2.property}"]>`;
         }
         return `${key}?: ConditionalValue<Tokens["${value2.value}"]>`;
       }).with({ type: "enum" }, (value2) => {
-        return `${key}?: ConditionalValue<${(0, import_shared2.unionType)(value2.value)}>`;
+        return `${key}?: ConditionalValue<${(0, import_shared.unionType)(value2.value)}>`;
       }).otherwise(() => {
         return `${key}?: ConditionalValue<${value.type}>`;
       });
@@ -1039,39 +1032,43 @@ function generate4(name, pattern) {
     }
 
     ${strict ? import_outdent17.outdent`export declare function ${name}(options: ${upperName}Properties): string` : import_outdent17.outdent`
-        
+                
+        type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
+
         ${description ? `/** ${description} */` : ""}
-        export declare function ${name}(options: SystemStyleObject<${upperName}Properties>): string
+        export declare function ${name}(options: ${upperName}Options): string
         `}
 
    `,
     js: import_outdent17.outdent`
-  import { mapObject } from "../helpers"
-  import { css } from "../css"
+  import { mapObject } from '../helpers'
+  import { css } from '../css'
 
   const config = ${(0, import_telejson.stringify)({ transform })}
 
-  export const ${upperFn} = (styles) => config.transform(styles, { map: mapObject })
+  export const ${styleFn} = (styles) => config.transform(styles, { map: mapObject })
 
-  export const ${name} = (styles) => css(${upperFn}(styles))
-  `.replace(/"_function_([^|]*)\|(.*)"/, "$2").replace(/\\"/g, '"').replace("return", "; return").replace(";;", ";")
+  export const ${name} = (styles) => css(${styleFn}(styles))
+  `.replace(/"_function_([^|]*)\|(.*)"/, "$2").replace(/\\"/g, '"').replace("return", "; return").replace(";;", ";").replace("{;", "{")
   };
 }
 function generatePattern(ctx) {
   if (!ctx.hasPatterns)
     return;
-  return Object.entries(ctx.patterns).map(([name, pattern]) => generate4(name, pattern));
+  return Object.entries(ctx.patterns).map(([name, pattern]) => generate4(ctx, name, pattern));
 }
 
 // src/generators/prop-types.ts
 var import_outdent18 = require("outdent");
-function generatePropTypes(utility) {
+function generatePropTypes(utility, strict) {
+  const strictText = `${strict ? "" : " | NativeValue<T>"}`;
   const result = [
     import_outdent18.outdent`
+    import { ConditionalValue } from './conditions';
     import { Properties as CSSProperties } from './csstype'
     import { Tokens } from './token'
 
-    type BasePropTypes  = {`
+    type PropertyValueTypes  = {`
   ];
   const types = utility.getTypes();
   for (const [prop, values] of types.entries()) {
@@ -1079,23 +1076,29 @@ function generatePropTypes(utility) {
   }
   result.push("}", "\n");
   result.push(`
-  type CssProp<T> = T extends keyof CSSProperties ? CSSProperties[T] : never
-  
-  type BaseProp<T> = T extends keyof BasePropTypes ? BasePropTypes[T] : never
-  
-  type Shorthand<T> = CssProp<T> | BaseProp<T>
+  type NativeValue<T> = T extends keyof CSSProperties ? CSSProperties[T] : never
+    
+  type Shorthand<T> = T extends keyof PropertyValueTypes ? PropertyValueTypes[T]${strictText} : NativeValue<T>
    
-  export type PropTypes = BasePropTypes & {
+  export type PropertyTypes = PropertyValueTypes & {
   `);
   utility.shorthands.forEach((value, key) => {
     result.push(`	${key}: Shorthand<${JSON.stringify(value)}>;`);
   });
   result.push("}");
-  return result.join("\n");
+  return import_outdent18.outdent`
+  ${result.join("\n")}
+
+  export type PropertyValue<T extends string> = T extends keyof PropertyTypes
+    ? ConditionalValue<PropertyTypes[T]${strictText}>
+    : T extends keyof CSSProperties
+    ? ConditionalValue<CSSProperties[T]>
+    : never
+  `;
 }
 
 // src/generators/recipe.ts
-var import_shared3 = require("@pandacss/shared");
+var import_shared2 = require("@pandacss/shared");
 var import_outdent19 = require("outdent");
 function generateRecipes(ctx) {
   const { recipes = {}, hash, hasRecipes, utility } = ctx;
@@ -1146,16 +1149,16 @@ function generateRecipes(ctx) {
     export const ${name} = createRecipe('${name}', ${JSON.stringify(defaultVariants ?? {})})
     `);
     dts.push(import_outdent19.outdent`
-    export type ${(0, import_shared3.capitalize)(name)}Variants = {
+    export type ${(0, import_shared2.capitalize)(name)}Variants = {
       ${Object.keys(variants ?? {}).map((key) => {
       const value = variants[key];
       const keys = Object.keys(value);
-      return `${key}?: ConditionalValue<${(0, import_shared3.unionType)(keys)}>`;
+      return `${key}?: ConditionalValue<${(0, import_shared2.unionType)(keys)}>`;
     }).join("\n")}
     }
 
     ${description ? `/** ${description} */` : ""}
-    export declare function ${name}(value?: ${(0, import_shared3.capitalize)(name)}Variants): string
+    export declare function ${name}(variants?: ${(0, import_shared2.capitalize)(name)}Variants): string
     `);
   });
   return {
@@ -1338,20 +1341,20 @@ function cleanupSelectors(css2, varSelector) {
 }
 
 // src/generators/token-dts.ts
-var import_shared4 = require("@pandacss/shared");
+var import_shared3 = require("@pandacss/shared");
 var import_outdent20 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 function generateTokenDts(dict) {
   const set = /* @__PURE__ */ new Set();
-  set.add(`export type Token = ${dict.isEmpty ? "string" : (0, import_shared4.unionType)(dict.allNames)}`);
+  set.add(`export type Token = ${dict.isEmpty ? "string" : (0, import_shared3.unionType)(dict.allNames)}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
   if (dict.isEmpty) {
     result.add("[token: string]: string");
   } else {
     for (const [key, value] of dict.categoryMap.entries()) {
-      const typeName = (0, import_shared4.capitalize)(import_pluralize.default.singular(key));
-      set.add(`export type ${typeName} = ${(0, import_shared4.unionType)(value.keys())}`);
-      set.add(`export type ColorPalette = ${(0, import_shared4.unionType)(Object.keys(dict.colorPalettes))}`);
+      const typeName = (0, import_shared3.capitalize)(import_pluralize.default.singular(key));
+      set.add(`export type ${typeName} = ${(0, import_shared3.unionType)(value.keys())}`);
+      set.add(`export type ColorPalette = ${(0, import_shared3.unionType)(Object.keys(dict.colorPalettes))}`);
       result.add(`		${key}: ${typeName}`);
     }
   }
@@ -1393,6 +1396,7 @@ function generateTokenJs(dict) {
 }
 
 // src/generators/types.ts
+var import_is_valid_prop = require("@pandacss/is-valid-prop");
 var import_fs_extra = require("fs-extra");
 var import_outdent22 = __toESM(require("outdent"));
 function getType(file) {
@@ -1400,27 +1404,23 @@ function getType(file) {
   return (0, import_fs_extra.readFileSync)(filepath, "utf8");
 }
 function generateCssType(ctx) {
-  const strict = ctx.strictTokens;
-  const strictArg = strict ? "true" : "false";
+  const propList = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()));
   return {
     cssType: getType("csstype.d.ts"),
     pandaCssType: getType("system-types.d.ts"),
+    selectorType: getType("selectors.d.ts"),
     publicType: import_outdent22.default`
-    import * as System from './system-types'
-    import { PropTypes } from './prop-type'
-    import { Conditions } from './conditions'
-    
-    export type SystemStyleObject<Overrides extends Record<string, unknown> = {}> = System.StyleObject<Conditions, PropTypes, ${strictArg}, Overrides>
-    
-    export type GlobalStyleObject<Overrides extends Record<string, unknown> = {}> = System.GlobalStyleObject<Conditions, PropTypes, ${strictArg}, Overrides>
-    
-    export type JsxStyleProps<Overrides extends Record<string, unknown> = {}> = System.JsxStyleProps<Conditions, PropTypes, ${strictArg}, Overrides>
-    
-    export type ConditionalValue<Value> = System.Conditional<Conditions, Value>
-
-    type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
+    export { ConditionalValue } from './conditions'
+    export { GlobalStyleObject, JsxStyleProps, SystemStyleObject } from './system-types'
     
-    export type Assign<Target, Override> = DistributiveOmit<Target, keyof Override> & Override
+    export type Assign<Target, Override> = Omit<Target, keyof Override> & Override
+    `,
+    styleProps: import_outdent22.default`
+    import { PropertyValue } from './prop-type'
+  
+    export type SystemProperties = {
+      ${Array.from(propList).map((v) => `	${v}?: PropertyValue<'${v}'>`).join("\n")}
+    }
     `
   };
 }
@@ -1466,9 +1466,11 @@ function setupTypes(ctx) {
       jsx ? { file: "jsx.d.ts", code: jsx.jsxType } : null,
       { file: "csstype.d.ts", code: code.cssType },
       { file: "system-types.d.ts", code: code.pandaCssType },
+      { file: "selectors.d.ts", code: code.selectorType },
       { file: "index.d.ts", code: code.publicType },
       { file: "token.d.ts", code: generateTokenDts(ctx.tokens) },
       { file: "prop-type.d.ts", code: generatePropTypes(ctx.utility) },
+      { file: "style-props.d.ts", code: code.styleProps },
       { file: "conditions.d.ts", code: conditions.dts }
     ].filter(Boolean)
   };
@@ -1707,7 +1709,7 @@ function getBaseCss(ctx) {
 var import_core4 = require("@pandacss/core");
 var import_error = require("@pandacss/error");
 var import_logger5 = require("@pandacss/logger");
-var import_shared6 = require("@pandacss/shared");
+var import_shared5 = require("@pandacss/shared");
 var import_fs4 = require("fs");
 var import_fs_extra3 = require("fs-extra");
 var import_path4 = require("path");
@@ -1718,10 +1720,10 @@ var import_look_it_up = require("look-it-up");
 
 // src/context.ts
 var import_core3 = require("@pandacss/core");
-var import_is_valid_prop2 = require("@pandacss/is-valid-prop");
+var import_is_valid_prop3 = require("@pandacss/is-valid-prop");
 var import_logger4 = require("@pandacss/logger");
 var import_parser = require("@pandacss/parser");
-var import_shared5 = require("@pandacss/shared");
+var import_shared4 = require("@pandacss/shared");
 var import_token_dictionary = require("@pandacss/token-dictionary");
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_fs3 = require("fs");
@@ -1732,7 +1734,7 @@ var import_postcss2 = __toESM(require("postcss"));
 var import_ts_morph = require("ts-morph");
 var import_ts_pattern5 = require("ts-pattern");
 var helpers = {
-  map: import_shared5.mapObject
+  map: import_shared4.mapObject
 };
 var fileSystem = {
   read: (path) => {
@@ -1774,9 +1776,9 @@ function createContext(conf, io = fileSystem) {
   } = theme;
   const jsxFactoryDetails = {
     name: jsxFactory,
-    upperName: (0, import_shared5.capitalize)(jsxFactory),
-    typeName: `HTML${(0, import_shared5.capitalize)(jsxFactory)}Props`,
-    componentName: `${(0, import_shared5.capitalize)(jsxFactory)}Component`,
+    upperName: (0, import_shared4.capitalize)(jsxFactory),
+    typeName: `HTML${(0, import_shared4.capitalize)(jsxFactory)}Props`,
+    componentName: `${(0, import_shared4.capitalize)(jsxFactory)}Component`,
     framework: jsxFramework
   };
   const cwd = (0, import_path2.resolve)(cwdProp);
@@ -1800,7 +1802,7 @@ function createContext(conf, io = fileSystem) {
   import_logger4.logger.debug({ type: "ctx:conditions", msg: conditions });
   (0, import_core3.assignCompositions)(
     { conditions, utility },
-    (0, import_shared5.compact)({
+    (0, import_shared4.compact)({
       textStyle: textStyles,
       layerStyle: layerStyles
     })
@@ -1820,24 +1822,25 @@ function createContext(conf, io = fileSystem) {
     return pattern?.transform?.(data, helpers) ?? {};
   }
   function getPatternDetails(name, pattern) {
-    const upperName = (0, import_shared5.capitalize)(name);
+    const upperName = (0, import_shared4.capitalize)(name);
     return {
       name,
       props: Object.keys(pattern?.properties ?? {}),
-      dashName: (0, import_shared5.dashCase)(name),
+      dashName: (0, import_shared4.dashCase)(name),
       upperName,
       styleFn: `get${upperName}Style`,
-      jsxName: pattern?.jsx ?? upperName
+      jsxName: pattern?.jsx ?? upperName,
+      blocklistType: pattern?.blocklist ? `| '${pattern.blocklist.join("' | '")}'` : ""
     };
   }
   const patternNodes = Object.entries(patterns).map(([name, pattern]) => ({
     type: "pattern",
-    name: pattern.jsx ?? (0, import_shared5.capitalize)(name),
+    name: pattern.jsx ?? (0, import_shared4.capitalize)(name),
     props: Object.keys(pattern.properties),
     baseName: name
   }));
   function getPatternFnName(jsx) {
-    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared5.uncapitalize)(jsx);
+    return patternNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared4.uncapitalize)(jsx);
   }
   const hasPatterns = Object.keys(patterns).length > 0;
   function getRecipe(name) {
@@ -1845,18 +1848,18 @@ function createContext(conf, io = fileSystem) {
   }
   const recipeNodes = Object.entries(recipes).map(([name, recipe]) => ({
     type: "recipe",
-    name: recipe.jsx ?? (0, import_shared5.capitalize)(name),
+    name: recipe.jsx ?? (0, import_shared4.capitalize)(name),
     props: Object.keys(recipe.variants ?? {}),
     baseName: name
   }));
   function getRecipeFnName(jsx) {
-    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared5.uncapitalize)(jsx);
+    return recipeNodes.find((node) => node.name === jsx)?.baseName ?? (0, import_shared4.uncapitalize)(jsx);
   }
   function splitRecipeProps(name, props) {
     const recipe = recipeNodes.find((node) => node.name === name);
     if (!recipe)
       return [{}, props];
-    return (0, import_shared5.splitObject)(props, (key) => recipe.props.includes(key));
+    return (0, import_shared4.splitObject)(props, (key) => recipe.props.includes(key));
   }
   function getRecipeDetails() {
     return Object.entries(recipes).map(([name, recipe]) => ({
@@ -1872,7 +1875,7 @@ function createContext(conf, io = fileSystem) {
     return regex.test(prop);
   }
   function isStyleProp(prop) {
-    return (0, import_is_valid_prop2.isCssProperty)(prop) || isCustomCssProperty(prop);
+    return (0, import_is_valid_prop3.isCssProperty)(prop) || isCustomCssProperty(prop);
   }
   function getPath(...str) {
     return (0, import_path2.join)(cwd, outdir, ...str);
@@ -2200,7 +2203,7 @@ function getConfigHash() {
   if (!file) {
     throw new import_error.ConfigNotFoundError();
   }
-  return (0, import_shared6.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
+  return (0, import_shared5.toHash)((0, import_fs4.readFileSync)(file, "utf-8"));
 }
 var setupCount = 0;
 var Builder = class {