@pandacss/types 0.0.2 → 0.3.0

package/dist/analyze-report.d.ts

@@ -114,20 +114,6 @@ type ReportMapsJSON = {
   colorsUsed: Record<string, Array<ReportItem['id']>>
 }
 
-type NodeRange = {
-  startPosition: number
-  startLineNumber: number
-  startColumn: number
-  endPosition: number
-  endLineNumber: number
-  endColumn: number
-}
-
-type MorphNodeJSON = {
-  kind: string
-  range: NodeRange
-}
-
 export type ReportItemJSON = {
   id: number
   from: string
@@ -143,8 +129,10 @@ export type ReportItemJSON = {
   box: {
     type: 'literal' | 'empty-initializer'
     value: string | number | boolean | undefined | null
-    node: MorphNodeJSON
-    stack: MorphNodeJSON[]
+    node: string
+    stack: string[]
+    line: number
+    column: number
   }
 }
 
@@ -152,7 +140,7 @@ export type ReportInstanceItemJSON = Pick<ReportItem, 'from' | 'type' | 'kind' |
   instanceId: number
   contains: Array<ReportItem['id']>
   value: Record<string, any>
-  box: { type: 'map'; value: Record<string, any>; node: MorphNodeJSON; stack: MorphNodeJSON[] }
+  box: { type: 'map'; value: Record<string, any>; node: string; stack: string[]; line: number; column: number }
 }
 
 export type AnalysisReportJSON = {

package/dist/composition.d.ts

@@ -64,8 +64,8 @@ type Placement =
   | 'BlockEnd'
 
 type Radius =
-  | `Top${'Right' | 'Left' | 'Start' | 'End'}`
-  | `Bottom${'Right' | 'Left' | 'Start' | 'End'}`
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
   | `Start${'Start' | 'End'}`
   | `End${'Start' | 'End'}`
 
@@ -93,6 +93,7 @@ type LayerStyleProperty =
   | 'backgroundSize'
   | `border${Placement}`
   | `border${Placement}Width`
+  | 'borderRadius'
   | `border${Radius}Radius`
   | `border${Placement}Color`
   | `border${Placement}Style`

package/dist/conditions.d.ts

@@ -1,5 +1,4 @@
 import type { AnySelector, Selectors } from './selectors'
-import type { Dict, StringKeyOf } from './shared'
 
 export type ConditionType = 'at-rule' | 'parent-nesting' | 'self-nesting' | 'combinator-nesting'
 
@@ -12,11 +11,6 @@ export type ConditionDetails = {
 
 export type RawCondition = ConditionDetails & { raw: string }
 
-export type ExtractConditions<Conditions extends Dict, Breakpoints extends Dict> =
-  | StringKeyOf<Breakpoints>
-  | StringKeyOf<Conditions>
-  | 'base'
-
 /* -----------------------------------------------------------------------------
  * Shadowed export (in CLI): DO NOT REMOVE
  * -----------------------------------------------------------------------------*/

package/dist/config.d.ts

@@ -1,209 +1,218 @@
-import type { LayerStyles, TextStyles } from './composition'
-import type { Conditions as TConditions } from './conditions'
-import type { AnyPatternConfig, PatternConfig } from './pattern'
-import type { AnyRecipeConfig, RecipeConfig } from './recipe'
+import type { Conditions } from './conditions'
+import type { PandaHooks } from './hooks'
+import type { PatternConfig } from './pattern'
 import type { Extendable, RequiredBy, UnwrapExtend } from './shared'
 import type { StaticCssOptions } from './static-css'
-import type { CssKeyframes, GlobalStyleObject } from './system-types'
-import type { SemanticTokens, Tokens } from './tokens'
+import type { GlobalStyleObject } from './system-types'
+import type { Theme } from './theme'
 import type { UtilityConfig } from './utility'
 
-export type Preset = Pick<Config, 'utilities' | 'theme' | 'patterns' | 'presets' | 'conditions' | 'globalCss'>
-
-type Studio = {
-  title: string
-  logo: string
-}
-
-type Theme<RecipeVariants> = {
+type StudioOptions = {
   /**
-   * The breakpoints for your project.
-   */
-  breakpoints?: Record<string, string>
-  /**
-   * The css animation keyframes definitions.
+   * Used to customize the design system studio
+   * @default { title: 'Panda', logo: '🐼' }
    */
-  keyframes?: CssKeyframes
+  studio?: {
+    /**
+     * The output directory for the design system studio when the build command is run.
+     */
+    outdir?: string
+    /**
+     * The logo url for the design system studio.
+     */
+    logo?: string
+    /**
+     * Used to inject custom html into the head or body of the studio
+     */
+    inject?: {
+      head?: string
+      body?: string
+    }
+  }
+}
+
+type PresetCore = {
   /**
-   * The design tokens for your project.
+   * The css selectors or media queries shortcuts.
+   * @example `{ hover: "&:hover" }`
    */
-  tokens?: Tokens
+  conditions: Conditions
   /**
-   * The semantic design tokens for your project.
+   * The global styles for your project.
    */
-  semanticTokens?: SemanticTokens
+  globalCss: GlobalStyleObject
   /**
-   * The typography styles for your project.
+   * The theme configuration for your project.
    */
-  textStyles?: TextStyles
+  theme: Theme
   /**
-   * The layer styles for your project.
+   * The css utility definitions.
    */
-  layerStyles?: LayerStyles
+  utilities: UtilityConfig
   /**
-   * Multi-variant style definitions for your project.
-   * Useful for defining component styles.
+   * Common styling or layout patterns for your project.
    */
-  recipes?: Record<string, RecipeConfig<RecipeVariants>>
+  patterns: Record<string, PatternConfig>
 }
-type AnyTheme = Theme<Record<string, AnyRecipeConfig>>
 
-export type GenericConfig<RecipeVariants, PatternProps> = Omit<Config, 'theme' | 'patterns'> & {
-  theme?: Extendable<Theme<RecipeVariants>>
-  patterns?: Extendable<Record<string, PatternConfig<PatternProps>>>
+type ExtendableOptions = {
+  [K in keyof PresetCore]?: Extendable<PresetCore[K]>
 }
 
-export type Config = {
+type FileSystemOptions = {
   /**
-   * Whether to emit the artifacts to `node_modules` as a package.
+   * Whether to clean the output directory before generating the css.
    * @default false
    */
-  emitPackage?: boolean
+  clean?: boolean
   /**
-   * Whether to only emit the `tokens` directory
-   * @default false
+   * The output directory.
+   * @default 'styled-system'
    */
-  emitTokensOnly?: boolean
+  outdir?: string
   /**
-   * The namespace prefix for the generated css classes and css variables.
-   * @default ''
+   * List of files glob to watch for changes.
+   * @default []
    */
-  prefix?: string
+  include?: string[]
   /**
-   * Whether to update the .gitignore file.
-   * @default 'true'
+   * List of files glob to ignore.
+   * @default []
    */
-  gitignore?: boolean
+  exclude?: string[]
   /**
-   * The value separator used in the generated class names.
-   * @default '_'
+   * Whether to watch for changes and regenerate the css.
+   * @default false
    */
-  separator?: '_' | '=' | '-'
+  watch?: boolean
   /**
-   * Used to customize the design system studio
-   * @default { title: 'Panda', logo: '🐼' }
+   * Whether to use polling instead of filesystem events when watching.
+   * @default false
    */
-  studio?: Partial<Studio>
+  poll?: boolean
+  /**
+   * The current working directory.
+   * @default 'process.cwd()'
+   */
+  cwd?: string
+  /**
+   * File extension for generated javascript files.
+   */
+  outExtension?: 'mjs' | 'js'
   /**
    * The log level for the built-in logger.
    * @default 'info'
    */
   logLevel?: 'debug' | 'info' | 'warn' | 'error' | 'silent'
+}
+
+type JsxFramework = 'react' | 'solid' | 'preact' | 'vue' | 'qwik'
+
+type JsxOptions = {
   /**
-   * Used to create reusable config presets for your project or team.
+   * The framework to use for generating supercharged elements.
    */
-  presets?: (string | Preset | Promise<Preset>)[]
+  jsxFramework?: JsxFramework
   /**
-   * Whether to include css reset styles in the generated css.
-   * @default true
+   * The factory name of the element
+   * @default 'styled'
+   *
+   * @example
+   * ```jsx
+   * <styled.button marginTop="40px">Click me</styled.button>
+   * ```
    */
-  preflight?: boolean
+  jsxFactory?: string
+}
+
+type CssgenOptions = {
   /**
-   * Whether to optimize the generated css.
+   * Whether to include css reset styles in the generated css.
    * @default true
    */
-  optimize?: boolean
+  preflight?: boolean | { scope: string }
   /**
-   * Whether to minify the generated css.
-   * @default false
+   * The namespace prefix for the generated css classes and css variables.
+   * @default ''
    */
-  minify?: boolean
+  prefix?: string | { cssVar: string; className: string }
   /**
-   * The current working directory.
-   * @default 'process.cwd()'
+   * The value separator used in the generated class names.
+   * @default '_'
    */
-  cwd?: string
+  separator?: '_' | '=' | '-'
   /**
-   * Whether to hash the generated class names.
-   * This is useful if want to shorten the class names.
-   * @default false
+   * Whether to optimize the generated css.
+   * @default true
    */
-  hash?: boolean
+  optimize?: boolean
   /**
-   * Whether to clean the output directory before generating the css.
+   * Whether to minify the generated css.
    * @default false
    */
-  clean?: boolean
-  /**
-   * The output directory.
-   * @default 'styled-system'
-   */
-  outdir?: string
+  minify?: boolean
   /**
    * The root selector for the css variables.
    * @default ':where(:host, :root)'
    */
   cssVarRoot?: string
   /**
-   * List of files glob to watch for changes.
-   * @default []
-   */
-  include?: string[]
-  /**
-   * List of files glob to ignore.
-   * @default []
+   * @experimental
+   * Used to generate css utility classes for your project.
    */
-  exclude?: string[]
+  staticCss?: StaticCssOptions
+}
+
+type CodegenOptions = {
   /**
-   * Whether to watch for changes and regenerate the css.
+   * Whether to emit the artifacts to `node_modules` as a package.
    * @default false
    */
-  watch?: boolean
+  emitPackage?: boolean
   /**
-   * Whether to use polling instead of filesystem events when watching.
+   * Whether to only emit the `tokens` directory
    * @default false
    */
-  poll?: boolean
-  /**
-   * The css selectors or media queries shortcuts.
-   * @example `{ hover: "&:hover" }`
-   */
-  conditions?: Extendable<TConditions>
-  /**
-   * The global styles for your project.
-   */
-  globalCss?: Extendable<GlobalStyleObject>
-  /**
-   * The theme configuration for your project.
-   */
-  theme?: Extendable<AnyTheme>
-  /**
-   * The css utility definitions.
-   */
-  utilities?: Extendable<UtilityConfig>
-  /**
-   * Common styling or layout patterns for your project.
-   */
-  patterns?: Extendable<Record<string, AnyPatternConfig>>
-  /**
-   * The framework to use for generating supercharged elements.
-   */
-  jsxFramework?: 'react' | 'solid' | 'preact' | 'vue'
+  emitTokensOnly?: boolean
   /**
-   * The factory name of the element
-   * @default 'panda'
-   *
-   * @example
-   * ```jsx
-   * <panda.button marginTop="40px">Click me</panda.button>
-   * ```
+   * Whether to hash the generated class names.
+   * This is useful if want to shorten the class names.
+   * @default false
    */
-  jsxFactory?: string
+  hash?: boolean | { cssVar: boolean; className: boolean }
   /**
    * Options for the generated typescript definitions.
    */
   strictTokens?: boolean
   /**
-   * @experimental
-   * Used to generate css utility classes for your project.
+   * Whether to update the .gitignore file.
+   * @default 'true'
    */
-  staticCss?: StaticCssOptions
+  gitignore?: boolean
+}
+
+type PresetOptions = {
   /**
-   * File extension for generated javascript files.
+   * Used to create reusable config presets for your project or team.
    */
-  outExtension?: 'mjs' | 'js'
+  presets?: (string | Preset | Promise<Preset>)[]
+}
+
+type HooksOptions = {
+  hooks?: Partial<PandaHooks>
 }
 
+export type Config = StudioOptions &
+  ExtendableOptions &
+  CssgenOptions &
+  CodegenOptions &
+  FileSystemOptions &
+  JsxOptions &
+  PresetOptions &
+  HooksOptions
+
+export type Preset = ExtendableOptions & PresetOptions
+
 export type UserConfig = UnwrapExtend<RequiredBy<Config, 'outdir' | 'cwd' | 'include'>>
 
 export type LoadConfigResult = {

package/dist/hooks.d.ts

@@ -0,0 +1,45 @@
+import type { TokenDictionary } from '@pandacss/token-dictionary'
+import type { HookKeys, Hookable } from 'hookable'
+import type { LoadConfigResult, UserConfig } from './config'
+import type { ParserResultType } from './parser'
+
+type MaybeAsyncReturn = Promise<void> | void
+
+export interface PandaHooks {
+  /**
+   * Called when the config is resolved, after all the presets are loaded and merged.
+   */
+  'config:resolved': (conf: LoadConfigResult) => MaybeAsyncReturn
+  /**
+   * Called when the config file or one of its dependencies (imports) has changed.
+   */
+  'config:change': (ctx: UserConfig) => MaybeAsyncReturn
+  /**
+   * Called after creating the TokenDictionary from the resolved config.
+   */
+  'generator:tokens': (tokenDictionary: TokenDictionary) => void
+  /**
+   * Called after reading the file content but before parsing it.
+   */
+  'parser:before': (file: string, content: string) => void
+  /**
+   * Called after the file styles are extracted and processed into the resulting ParserResult object.
+   */
+  'parser:after': (file: string, result: ParserResultType | undefined) => void
+  /**
+   * Called after the extracted ParserResult has been transformed to a CSS string
+   */
+  'parser:css': (file: string, css: string | undefined) => void
+  /**
+   * Called before generating the design-system CSS files (global, static, preflight, tokens, keyframes)
+   */
+  'generator:css': (
+    file: 'global.css' | 'static.css' | 'reset.css' | 'tokens.css' | 'keyframes.css',
+    css: string,
+  ) => void
+}
+
+export type PandaHookable = Hookable<PandaHooks, HookKeys<PandaHooks>>
+export interface ConfigResultWithHooks extends LoadConfigResult {
+  hooks: PandaHookable
+}

package/dist/index.d.ts

@@ -1,22 +1,24 @@
 export type {
-  ReportInstanceItem,
-  ReportItem,
-  ReportItemType,
   AnalysisReport,
   AnalysisReportJSON,
+  ReportInstanceItem,
   ReportInstanceItemJSON,
+  ReportItem,
   ReportItemJSON,
+  ReportItemType,
 } from './analyze-report'
 export type { CompositionStyles, LayerStyles, TextStyles } from './composition'
-export type { ConditionDetails, Conditions, ConditionType, RawCondition } from './conditions'
-export type { Config, GenericConfig, LoadConfigResult, Preset, UserConfig } from './config'
-export type { ParserResult, ResultItem } from './parser'
+export type { ConditionDetails, ConditionType, Conditions, RawCondition } from './conditions'
+export type { Config, LoadConfigResult, Preset, UserConfig } from './config'
+export type { ConfigResultWithHooks, PandaHooks, PandaHookable } from './hooks'
+export type { ParserResultType, ResultItem } from './parser'
 export type { Part, Parts } from './parts'
-export type { AnyPatternConfig, PatternConfig, PatternHelpers, PatternProperty } from './pattern'
-export type { AnyRecipeConfig, RecipeConfig, RecipeVariantRecord } from './recipe'
+export type { PatternConfig, PatternHelpers, PatternProperty } from './pattern'
+export type { RecipeConfig, RecipeVariantRecord } from './recipe'
 export type { Runtime } from './runtime'
 export type { AnyFunction, Artifact, Dict, RequiredBy } from './shared'
 export type { StaticCssOptions } from './static-css'
 export type { CssKeyframes, GlobalStyleObject, SystemStyleObject } from './system-types'
+export type { Theme } from './theme'
 export type { SemanticToken, SemanticTokens, Token, TokenCategory, TokenDataTypes, Tokens } from './tokens'
 export type { PropertyConfig, PropertyTransform, PropertyValues, UtilityConfig } from './utility'

package/dist/parser.d.ts

@@ -7,17 +7,27 @@ export type ResultItem = {
   box: BoxNodeMap
 }
 
-export type ParserResult = {
+export type ParserResultType = {
   jsx: Set<ResultItem>
   css: Set<ResultItem>
   cva: Set<ResultItem>
   recipe: Map<string, Set<ResultItem>>
   pattern: Map<string, Set<ResultItem>>
+  filePath: string | undefined
   set: (name: 'cva' | 'css', result: ResultItem) => void
   setCva: (result: ResultItem) => void
   setJsx: (result: ResultItem) => void
   setRecipe: (name: string, result: ResultItem) => void
   setPattern: (name: string, result: ResultItem) => void
   isEmpty: () => boolean
-  getAll: () => Array<ResultItem>
+  setFilePath: (filePath: string) => ParserResultType
+  toArray: () => Array<ResultItem>
+  toJSON: () => {
+    css: Array<ResultItem>
+    cva: Array<ResultItem>
+    recipe: Record<string, ResultItem[]>
+    pattern: Record<string, ResultItem[]>
+    jsx: Array<ResultItem>
+  }
+  merge: (result: ParserResultType) => ParserResultType
 }

package/dist/pattern.d.ts

@@ -14,7 +14,11 @@ export type PatternHelpers = {
   map: (value: any, fn: (value: string) => string | undefined) => any
 }
 
-export type PatternConfig<T> = {
+type PatternProperties = Record<string, PatternProperty>
+
+type Props<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternConfig<T extends PatternProperties = PatternProperties> = {
   /**
    * The description of the pattern. This will be used in the JSDoc comment.
    */
@@ -27,14 +31,11 @@ export type PatternConfig<T> = {
   /**
    * The properties of the pattern.
    */
-  properties: T extends Record<string, PatternProperty> ? T : Record<string, PatternProperty>
+  properties: T
   /**
    * The css object this pattern will generate.
    */
-  transform?: (
-    props: T extends Record<infer Keys, PatternProperty> ? Record<Keys, any> : Record<string, PatternProperty>,
-    helpers: PatternHelpers,
-  ) => SystemStyleObject
+  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */
@@ -50,5 +51,3 @@ export type PatternConfig<T> = {
    */
   blocklist?: LiteralUnion<CssProperty>[]
 }
-
-export type AnyPatternConfig = PatternConfig<PatternProperty>

package/dist/recipe.d.ts

@@ -4,18 +4,26 @@ type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
 
-export type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>
+export type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>
 
-export type RecipeSelection<T extends RecipeVariantRecord> = {
-  [K in keyof T]?: StringToBoolean<keyof T[K]>
-}
+export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T
+  ? {}
+  : {
+      [K in keyof T]?: StringToBoolean<keyof T[K]>
+    }
 
 export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
 
 export type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>
 
+type RecipeVariantMap<T extends RecipeVariantRecord> = {
+  [K in keyof T]: Array<keyof T[K]>
+}
+
 export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {
-  variants: (keyof T)[]
+  __type: RecipeSelection<T>
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
   resolve: (props: RecipeSelection<T>) => SystemStyleObject
   config: RecipeConfig<T>
   splitVariantProps<Props extends RecipeSelection<T>>(
@@ -23,11 +31,8 @@ export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T>
   ): [RecipeSelection<T>, Pretty<Omit<Props, keyof RecipeVariantRecord>>]
 }
 
-export type RecipeCompoundSelection<
-  T extends RecipeVariantRecord,
-  Key extends Exclude<keyof T, 'css'> = Exclude<keyof T, 'css'>,
-> = {
-  [K in Key]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>
+export type RecipeCompoundSelection<T extends RecipeVariantRecord> = {
+  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>
 }
 
 export type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {
@@ -55,7 +60,7 @@ export type RecipeDefinition<T extends RecipeVariantRecord> = {
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
-export type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T : RecipeVariantRecord> & {
+export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {
   /**
    * The name of the recipe.
    */
@@ -72,4 +77,3 @@ export type RecipeConfig<T> = RecipeDefinition<T extends RecipeVariantRecord ? T
    */
   jsx?: Array<string | RegExp>
 }
-export type AnyRecipeConfig = RecipeConfig<RecipeVariantRecord>

package/dist/shared.d.ts

@@ -1,28 +1,24 @@
-export type Primitive = string | number | boolean | null | undefined
+type Primitive = string | number | boolean | null | undefined
 
 export type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
 
 export type Recursive<T> = { [key: string]: T | Recursive<T> }
 
-export type Entry<T> = [keyof T, T[keyof T]]
-
 export type Dict<T = any> = Record<string, T>
 
 export type RequiredBy<T, K extends keyof T> = Partial<Omit<T, K>> & Required<Pick<T, K>>
 
 export type AnyFunction<T = any> = (...args: T[]) => any
 
-export type StringKeyOf<T> = Extract<keyof T, string>
-
 type DeepPartial<T> = {
   [P in keyof T]+?: DeepPartial<T[P]>
 }
 
-export type Extendable<T> = T | { extend?: T | DeepPartial<T> }
+export type Extendable<T extends Record<any, any>> = T | { extend?: DeepPartial<T> }
 
 type Nullable<T> = T | null | undefined
 
-export type UnwrapExtend<T extends Record<string, unknown>> = {
+export type UnwrapExtend<T> = {
   [K in keyof T]: T[K] extends Nullable<Extendable<infer U>> ? U : T[K]
 }
 

package/dist/system-types.d.ts

@@ -58,7 +58,7 @@ export type JsxStyleProps = SystemProperties &
 
 type Assign<T, U> = Omit<T, keyof U> & U
 
-type HTMLProps = {
+export type PatchedHTMLProps = {
   htmlSize?: string | number
   htmlWidth?: string | number
   htmlHeight?: string | number
@@ -66,8 +66,9 @@ type HTMLProps = {
   htmlContent?: string
 }
 
-type WithHTMLProps<T> = Omit<T, 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'> &
-  HTMLProps
+export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'
+
+type WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps
 
 export type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<
   WithHTMLProps<T>,

package/dist/theme.d.ts

@@ -0,0 +1,36 @@
+import type { LayerStyles, TextStyles } from './composition'
+import type { RecipeConfig } from './recipe'
+import type { CssKeyframes } from './system-types'
+import type { SemanticTokens, Tokens } from './tokens'
+
+export type Theme = {
+  /**
+   * The breakpoints for your project.
+   */
+  breakpoints?: Record<string, string>
+  /**
+   * The css animation keyframes definitions.
+   */
+  keyframes?: CssKeyframes
+  /**
+   * The design tokens for your project.
+   */
+  tokens?: Tokens
+  /**
+   * The semantic design tokens for your project.
+   */
+  semanticTokens?: SemanticTokens
+  /**
+   * The typography styles for your project.
+   */
+  textStyles?: TextStyles
+  /**
+   * The layer styles for your project.
+   */
+  layerStyles?: LayerStyles
+  /**
+   * Multi-variant style definitions for your project.
+   * Useful for defining component styles.
+   */
+  recipes?: Record<string, RecipeConfig>
+}

package/dist/utility.d.ts

@@ -13,7 +13,12 @@ export type PropertyValues =
   | Record<string, string>
   | ThemeFn
 
-export type PropertyTransform = (value: any, token: Getter) => NestedCssProperties | undefined
+type TransformArgs = {
+  token: Getter
+  raw: any
+}
+
+export type PropertyTransform = (value: any, args: TransformArgs) => NestedCssProperties | undefined
 
 export type PropertyConfig = {
   /**
@@ -40,7 +45,7 @@ export type PropertyConfig = {
   /**
    * The shorthand of the property.
    */
-  shorthand?: string
+  shorthand?: string | string[]
 }
 
 export type UtilityConfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/types",
-  "version": "0.0.2",
+  "version": "0.3.0",
   "description": "The types for css panda",
   "main": "dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
@@ -13,10 +13,10 @@
   ],
   "devDependencies": {
     "chokidar-cli": "^3.0.0",
-    "csstype": "3.1.2"
-  },
-  "dependencies": {
-    "@pandacss/extractor": "0.0.2"
+    "csstype": "3.1.2",
+    "hookable": "5.5.3",
+    "@pandacss/extractor": "0.3.0",
+    "@pandacss/token-dictionary": "0.3.0"
   },
   "scripts": {
     "build": "tsx scripts/build.ts",