@pandacss/studio 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -28,24 +28,24 @@
   "dependencies": {
     "@ark-ui/react": "0.7.2",
     "@astrojs/react": "2.2.1",
-    "astro": "2.8.0",
+    "astro": "2.8.4",
     "javascript-stringify": "2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "4.4.2",
-    "@pandacss/types": "0.7.0",
-    "@pandacss/config": "0.7.0",
-    "@pandacss/shared": "0.7.0",
-    "@pandacss/token-dictionary": "0.7.0",
-    "@pandacss/logger": "0.7.0",
-    "@pandacss/node": "0.7.0"
+    "@pandacss/types": "0.9.0",
+    "@pandacss/config": "0.9.0",
+    "@pandacss/shared": "0.9.0",
+    "@pandacss/token-dictionary": "0.9.0",
+    "@pandacss/logger": "0.9.0",
+    "@pandacss/node": "0.9.0"
   },
   "devDependencies": {
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@vitejs/plugin-react": "4.0.3",
     "execa": "7.1.1",
-    "@pandacss/dev": "0.7.0"
+    "@pandacss/dev": "0.9.0"
   },
   "scripts": {
     "codegen": "panda",

package/styled-system/css/css.d.ts

@@ -1,3 +1,9 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types'
-export declare function css(styles: SystemStyleObject): string
+
+interface CssFunction {
+  (styles: SystemStyleObject): string
+  raw: (styles: SystemStyleObject) => SystemStyleObject
+}
+
+export declare const css: CssFunction;

package/styled-system/css/css.mjs

@@ -393,5 +393,6 @@ const context = {
 }
 
 export const css = createCss(context)
+css.raw = (styles) => styles
 
 export const { mergeCss, assignCss } = createMergeCss(context)

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

@@ -11,5 +11,10 @@ export type AspectRatioProperties = {
 
 type AspectRatioOptions = AspectRatioProperties & Omit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
 
+interface AspectRatioPatternFn {
+  (options?: AspectRatioOptions): string
+  raw: (options: AspectRatioOptions) => AspectRatioOptions
+}
+
 
-export declare function aspectRatio(options?: AspectRatioOptions): string
+export declare const aspectRatio: AspectRatioPatternFn;

package/styled-system/patterns/aspect-ratio.mjs

@@ -33,3 +33,4 @@ const aspectRatioConfig = {
 export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
 
 export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
+aspectRatio.raw = (styles) => styles

package/styled-system/patterns/box.d.ts

@@ -11,5 +11,10 @@ export type BoxProperties = {
 
 type BoxOptions = BoxProperties & Omit<SystemStyleObject, keyof BoxProperties >
 
+interface BoxPatternFn {
+  (options?: BoxOptions): string
+  raw: (options: BoxOptions) => BoxOptions
+}
+
 
-export declare function box(options?: BoxOptions): string
+export declare const box: BoxPatternFn;

package/styled-system/patterns/box.mjs

@@ -10,3 +10,4 @@ const boxConfig = {
 export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
 
 export const box = (styles) => css(getBoxStyle(styles))
+box.raw = (styles) => styles

package/styled-system/patterns/center.d.ts

@@ -11,5 +11,10 @@ export type CenterProperties = {
 
 type CenterOptions = CenterProperties & Omit<SystemStyleObject, keyof CenterProperties >
 
+interface CenterPatternFn {
+  (options?: CenterOptions): string
+  raw: (options: CenterOptions) => CenterOptions
+}
+
 
-export declare function center(options?: CenterOptions): string
+export declare const center: CenterPatternFn;

package/styled-system/patterns/center.mjs

@@ -16,3 +16,4 @@ const centerConfig = {
 export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
 
 export const center = (styles) => css(getCenterStyle(styles))
+center.raw = (styles) => styles

package/styled-system/patterns/circle.d.ts

@@ -11,5 +11,10 @@ export type CircleProperties = {
 
 type CircleOptions = CircleProperties & Omit<SystemStyleObject, keyof CircleProperties >
 
+interface CirclePatternFn {
+  (options?: CircleOptions): string
+  raw: (options: CircleOptions) => CircleOptions
+}
+
 
-export declare function circle(options?: CircleOptions): string
+export declare const circle: CirclePatternFn;

package/styled-system/patterns/circle.mjs

@@ -20,3 +20,4 @@ const circleConfig = {
 export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
 
 export const circle = (styles) => css(getCircleStyle(styles))
+circle.raw = (styles) => styles

package/styled-system/patterns/container.d.ts

@@ -11,5 +11,10 @@ export type ContainerProperties = {
 
 type ContainerOptions = ContainerProperties & Omit<SystemStyleObject, keyof ContainerProperties >
 
+interface ContainerPatternFn {
+  (options?: ContainerOptions): string
+  raw: (options: ContainerOptions) => ContainerOptions
+}
+
 
-export declare function container(options?: ContainerOptions): string
+export declare const container: ContainerPatternFn;

package/styled-system/patterns/container.mjs

@@ -16,3 +16,4 @@ const containerConfig = {
 export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
 
 export const container = (styles) => css(getContainerStyle(styles))
+container.raw = (styles) => styles

package/styled-system/patterns/divider.d.ts

@@ -13,5 +13,10 @@ export type DividerProperties = {
 
 type DividerOptions = DividerProperties & Omit<SystemStyleObject, keyof DividerProperties >
 
+interface DividerPatternFn {
+  (options?: DividerOptions): string
+  raw: (options: DividerOptions) => DividerOptions
+}
+
 
-export declare function divider(options?: DividerOptions): string
+export declare const divider: DividerPatternFn;

package/styled-system/patterns/divider.mjs

@@ -19,3 +19,4 @@ const dividerConfig = {
 export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
 
 export const divider = (styles) => css(getDividerStyle(styles))
+divider.raw = (styles) => styles

package/styled-system/patterns/flex.d.ts

@@ -17,5 +17,10 @@ export type FlexProperties = {
 
 type FlexOptions = FlexProperties & Omit<SystemStyleObject, keyof FlexProperties >
 
+interface FlexPatternFn {
+  (options?: FlexOptions): string
+  raw: (options: FlexOptions) => FlexOptions
+}
+
 
-export declare function flex(options?: FlexOptions): string
+export declare const flex: FlexPatternFn;

package/styled-system/patterns/flex.mjs

@@ -21,3 +21,4 @@ const flexConfig = {
 export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
 
 export const flex = (styles) => css(getFlexStyle(styles))
+flex.raw = (styles) => styles

package/styled-system/patterns/float.d.ts

@@ -14,5 +14,10 @@ export type FloatProperties = {
 
 type FloatOptions = FloatProperties & Omit<SystemStyleObject, keyof FloatProperties >
 
+interface FloatPatternFn {
+  (options?: FloatOptions): string
+  raw: (options: FloatOptions) => FloatOptions
+}
+
 
-export declare function float(options?: FloatOptions): string
+export declare const float: FloatPatternFn;

package/styled-system/patterns/float.mjs

@@ -43,3 +43,4 @@ const floatConfig = {
 export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
 
 export const float = (styles) => css(getFloatStyle(styles))
+float.raw = (styles) => styles

package/styled-system/patterns/grid-item.d.ts

@@ -16,5 +16,10 @@ export type GridItemProperties = {
 
 type GridItemOptions = GridItemProperties & Omit<SystemStyleObject, keyof GridItemProperties >
 
+interface GridItemPatternFn {
+  (options?: GridItemOptions): string
+  raw: (options: GridItemOptions) => GridItemOptions
+}
+
 
-export declare function gridItem(options?: GridItemOptions): string
+export declare const gridItem: GridItemPatternFn;

package/styled-system/patterns/grid-item.mjs

@@ -20,3 +20,4 @@ const gridItemConfig = {
 export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
 
 export const gridItem = (styles) => css(getGridItemStyle(styles))
+gridItem.raw = (styles) => styles

package/styled-system/patterns/grid.d.ts

@@ -15,5 +15,10 @@ export type GridProperties = {
 
 type GridOptions = GridProperties & Omit<SystemStyleObject, keyof GridProperties >
 
+interface GridPatternFn {
+  (options?: GridOptions): string
+  raw: (options: GridOptions) => GridOptions
+}
+
 
-export declare function grid(options?: GridOptions): string
+export declare const grid: GridPatternFn;

package/styled-system/patterns/grid.mjs

@@ -23,3 +23,4 @@ const gridConfig = {
 export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
 
 export const grid = (styles) => css(getGridStyle(styles))
+grid.raw = (styles) => styles

package/styled-system/patterns/hstack.d.ts

@@ -12,5 +12,10 @@ export type HstackProperties = {
 
 type HstackOptions = HstackProperties & Omit<SystemStyleObject, keyof HstackProperties >
 
+interface HstackPatternFn {
+  (options?: HstackOptions): string
+  raw: (options: HstackOptions) => HstackOptions
+}
+
 
-export declare function hstack(options?: HstackOptions): string
+export declare const hstack: HstackPatternFn;

package/styled-system/patterns/hstack.mjs

@@ -18,3 +18,4 @@ const hstackConfig = {
 export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
 
 export const hstack = (styles) => css(getHstackStyle(styles))
+hstack.raw = (styles) => styles

package/styled-system/patterns/link-box.d.ts

@@ -11,5 +11,10 @@ export type LinkBoxProperties = {
 
 type LinkBoxOptions = LinkBoxProperties & Omit<SystemStyleObject, keyof LinkBoxProperties >
 
+interface LinkBoxPatternFn {
+  (options?: LinkBoxOptions): string
+  raw: (options: LinkBoxOptions) => LinkBoxOptions
+}
+
 
-export declare function linkBox(options?: LinkBoxOptions): string
+export declare const linkBox: LinkBoxPatternFn;

package/styled-system/patterns/link-box.mjs

@@ -17,3 +17,4 @@ const linkBoxConfig = {
 export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
 
 export const linkBox = (styles) => css(getLinkBoxStyle(styles))
+linkBox.raw = (styles) => styles

package/styled-system/patterns/link-overlay.d.ts

@@ -11,5 +11,10 @@ export type LinkOverlayProperties = {
 
 type LinkOverlayOptions = LinkOverlayProperties & Omit<SystemStyleObject, keyof LinkOverlayProperties >
 
+interface LinkOverlayPatternFn {
+  (options?: LinkOverlayOptions): string
+  raw: (options: LinkOverlayOptions) => LinkOverlayOptions
+}
+
 
-export declare function linkOverlay(options?: LinkOverlayOptions): string
+export declare const linkOverlay: LinkOverlayPatternFn;

package/styled-system/patterns/link-overlay.mjs

@@ -22,3 +22,4 @@ const linkOverlayConfig = {
 export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
 
 export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
+linkOverlay.raw = (styles) => styles

package/styled-system/patterns/spacer.d.ts

@@ -11,5 +11,10 @@ export type SpacerProperties = {
 
 type SpacerOptions = SpacerProperties & Omit<SystemStyleObject, keyof SpacerProperties >
 
+interface SpacerPatternFn {
+  (options?: SpacerOptions): string
+  raw: (options: SpacerOptions) => SpacerOptions
+}
+
 
-export declare function spacer(options?: SpacerOptions): string
+export declare const spacer: SpacerPatternFn;

package/styled-system/patterns/spacer.mjs

@@ -16,3 +16,4 @@ const spacerConfig = {
 export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
 
 export const spacer = (styles) => css(getSpacerStyle(styles))
+spacer.raw = (styles) => styles

package/styled-system/patterns/square.d.ts

@@ -11,5 +11,10 @@ export type SquareProperties = {
 
 type SquareOptions = SquareProperties & Omit<SystemStyleObject, keyof SquareProperties >
 
+interface SquarePatternFn {
+  (options?: SquareOptions): string
+  raw: (options: SquareOptions) => SquareOptions
+}
+
 
-export declare function square(options?: SquareOptions): string
+export declare const square: SquarePatternFn;

package/styled-system/patterns/square.mjs

@@ -19,3 +19,4 @@ const squareConfig = {
 export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
 
 export const square = (styles) => css(getSquareStyle(styles))
+square.raw = (styles) => styles

package/styled-system/patterns/stack.d.ts

@@ -14,5 +14,10 @@ export type StackProperties = {
 
 type StackOptions = StackProperties & Omit<SystemStyleObject, keyof StackProperties >
 
+interface StackPatternFn {
+  (options?: StackOptions): string
+  raw: (options: StackOptions) => StackOptions
+}
+
 
-export declare function stack(options?: StackOptions): string
+export declare const stack: StackPatternFn;

package/styled-system/patterns/stack.mjs

@@ -18,3 +18,4 @@ const stackConfig = {
 export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
 
 export const stack = (styles) => css(getStackStyle(styles))
+stack.raw = (styles) => styles

package/styled-system/patterns/styled-link.d.ts

@@ -11,5 +11,10 @@ export type StyledLinkProperties = {
 
 type StyledLinkOptions = StyledLinkProperties & Omit<SystemStyleObject, keyof StyledLinkProperties >
 
+interface StyledLinkPatternFn {
+  (options?: StyledLinkOptions): string
+  raw: (options: StyledLinkOptions) => StyledLinkOptions
+}
+
 
-export declare function styledLink(options?: StyledLinkOptions): string
+export declare const styledLink: StyledLinkPatternFn;

package/styled-system/patterns/styled-link.mjs

@@ -16,3 +16,4 @@ const styledLinkConfig = {
 export const getStyledLinkStyle = (styles = {}) => styledLinkConfig.transform(styles, { map: mapObject })
 
 export const styledLink = (styles) => css(getStyledLinkStyle(styles))
+styledLink.raw = (styles) => styles

package/styled-system/patterns/vstack.d.ts

@@ -12,5 +12,10 @@ export type VstackProperties = {
 
 type VstackOptions = VstackProperties & Omit<SystemStyleObject, keyof VstackProperties >
 
+interface VstackPatternFn {
+  (options?: VstackOptions): string
+  raw: (options: VstackOptions) => VstackOptions
+}
+
 
-export declare function vstack(options?: VstackOptions): string
+export declare const vstack: VstackPatternFn;

package/styled-system/patterns/vstack.mjs

@@ -18,3 +18,4 @@ const vstackConfig = {
 export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
 
 export const vstack = (styles) => css(getVstackStyle(styles))
+vstack.raw = (styles) => styles

package/styled-system/patterns/wrap.d.ts

@@ -15,5 +15,10 @@ export type WrapProperties = {
 
 type WrapOptions = WrapProperties & Omit<SystemStyleObject, keyof WrapProperties >
 
+interface WrapPatternFn {
+  (options?: WrapOptions): string
+  raw: (options: WrapOptions) => WrapOptions
+}
+
 
-export declare function wrap(options?: WrapOptions): string
+export declare const wrap: WrapPatternFn;

package/styled-system/patterns/wrap.mjs

@@ -20,3 +20,4 @@ const wrapConfig = {
 export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
 
 export const wrap = (styles) => css(getWrapStyle(styles))
+wrap.raw = (styles) => styles

package/styled-system/tokens/index.css

@@ -425,17 +425,6 @@
     --colors-bg: #fff;
     --colors-card: #e5e5e5;
     --colors-border: #d4d4d4;
-    --colors-color-palette-50: var(--colors-color-palette-50);
-    --colors-color-palette-100: var(--colors-color-palette-100);
-    --colors-color-palette-200: var(--colors-color-palette-200);
-    --colors-color-palette-300: var(--colors-color-palette-300);
-    --colors-color-palette-400: var(--colors-color-palette-400);
-    --colors-color-palette-500: var(--colors-color-palette-500);
-    --colors-color-palette-600: var(--colors-color-palette-600);
-    --colors-color-palette-700: var(--colors-color-palette-700);
-    --colors-color-palette-800: var(--colors-color-palette-800);
-    --colors-color-palette-900: var(--colors-color-palette-900);
-    --colors-color-palette-950: var(--colors-color-palette-950);
   }
 
   .dark {

package/styled-system/types/jsx.d.ts

@@ -1,10 +1,14 @@
 /* eslint-disable */
-import type { ComponentProps, ElementType } from 'react'
+import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
 import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
+type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+  ref?: Ref<ElementRef<T>>
+}
+
 export type PandaComponent<T extends ElementType, P extends Dict = {}> = {
   (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
   displayName?: string

package/styled-system/types/pattern.d.ts

@@ -40,7 +40,14 @@ export type PatternConfig<T extends PatternProperties = PatternProperties> = {
   /**
    * The jsx element name this pattern will generate.
    */
-  jsx?: string
+  jsxName?: string
+  /**
+   * The jsx elements to track for this pattern. Can be string or Regexp.
+   *
+   * @default capitalize(pattern.name)
+   * @example ['Button', 'Link', /Button$/]
+   */
+  jsx?: Array<string | RegExp>
   /**
    * Whether to only generate types for the specified properties.
    * This will disallow css properties

package/styled-system/types/recipe.d.ts

@@ -63,7 +63,7 @@ export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> =
   /**
    * The name of the recipe.
    */
-  name: string
+  className: string
   /**
    * The description of the recipe. This will be used in the JSDoc comment.
    */