@pandacss/types 0.27.3 → 0.29.0

package/dist/artifact.d.ts

@@ -1,3 +1,4 @@
+import { type Difference } from 'microdiff'
 import type { Nullable } from './shared'
 
 export interface ArtifactContent {
@@ -25,11 +26,7 @@ export type ArtifactId =
   | 'jsx-patterns'
   | 'jsx-patterns-index'
   | 'css-index'
-  | 'reset.css'
-  | 'global.css'
-  | 'static.css'
   | 'package.json'
-  | 'styles.css'
   | (string & {})
 
 export type CssArtifactType = 'preflight' | 'tokens' | 'static' | 'global' | 'keyframes'
@@ -49,3 +46,9 @@ export interface ArtifactFilters {
   ids?: ArtifactId[]
   affecteds?: AffectedArtifacts
 }
+
+export interface DiffConfigResult {
+  hasConfigChanged: boolean
+  artifacts: Set<ArtifactId>
+  diffs: Difference[]
+}

package/dist/config.d.ts

@@ -38,7 +38,7 @@ export interface StudioOptions {
   }
 }
 
-interface Patterns {
+export interface Patterns {
   [pattern: string]: PatternConfig
 }
 
@@ -155,6 +155,13 @@ interface FileSystemOptions {
    * @default []
    */
   exclude?: string[]
+  /**
+   * List of globs or files that will trigger a config reload when changed.
+   *
+   * We automatically track the config file and (transitive) files imported by the config file as much as possible, but sometimes we might miss some.
+   * Use this option as a workaround.
+   */
+  dependencies?: string[]
   /**
    * Whether to watch for changes and regenerate the css.
    * @default false
@@ -346,6 +353,15 @@ export interface Config
    * @default 'false'
    */
   eject?: boolean
+  /**
+   * The validation strcictnesss to use when validating the config.
+   * - When set to 'none', no validation will be performed.
+   * - When set to 'warn', warnings will be logged when validation fails.
+   * - When set to 'error', errors will be thrown when validation fails.
+   *
+   * @default 'error'
+   */
+  validation?: 'none' | 'warn' | 'error'
 }
 
 export interface Preset extends ExtendableOptions, PresetOptions {}
@@ -377,6 +393,7 @@ export interface LoadConfigResult extends LoadTsConfigResult {
   serialized: string
   deserialize: () => Config
   dependencies: string[]
+  hooks: Partial<PandaHooks>
 }
 
 export interface HashOptions {

package/dist/hooks-api.d.ts

@@ -0,0 +1,56 @@
+import type { UserConfig } from './config'
+import type { RecipeDefinition, RecipeVariantRecord, SlotRecipeDefinition, SlotRecipeVariantRecord } from './recipe'
+import type { AtomicStyleResult, RecipeBaseResult } from './style-rules'
+import type { SystemStyleObject } from './system-types'
+
+export interface BaseRule {
+  getClassNames: () => string[]
+  toCss: () => string
+}
+
+export interface AtomicRule extends BaseRule {
+  styles: SystemStyleObject
+}
+
+export interface AtomicRecipeRule extends BaseRule {
+  config: RecipeDefinition<any> | SlotRecipeDefinition<string, any>
+}
+
+export interface RecipeVariantsRule extends BaseRule {
+  variants: RecipeVariantRecord
+}
+
+export interface ProcessorInterface {
+  css(styles: SystemStyleObject): AtomicRule
+  cva(recipeConfig: RecipeDefinition<RecipeVariantRecord>): AtomicRecipeRule
+  sva(recipeConfig: SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>): AtomicRecipeRule
+  recipe(name: string, variants?: RecipeVariantRecord): RecipeVariantsRule | undefined
+}
+
+export interface HooksApiInterface {
+  /**
+   * The resolved config (after all the presets are loaded and merged)
+   */
+  config: UserConfig
+  /**
+   * The path to the config file
+   */
+  configPath: string
+  /**
+   * The list of all the config dependencies (direct/transitive imports) filepaths
+   */
+  configDependencies: string[]
+  //
+  /**
+   * The processor can be used to generate atomic or recipe classes
+   */
+  processor: ProcessorInterface
+  /**
+   * Map that contains all the utility classNames
+   */
+  classNames: Map<string, string>
+  /**
+   * Map that contains all the classNames found (and therefore generated) in the app code
+   */
+  generatedClassNames: Map<string, AtomicStyleResult | RecipeBaseResult>
+}

package/dist/hooks.d.ts

@@ -1,44 +1,61 @@
-import type { HookKeys, Hookable } from 'hookable'
+import type { ArtifactId, DiffConfigResult } from './artifact'
 import type { LoadConfigResult, UserConfig } from './config'
+import type { HooksApiInterface } from './hooks-api'
 import type { ParserResultInterface } from './parser'
 
-type MaybeAsyncReturn = Promise<void> | void
+type MaybeAsyncReturn<T = void> = Promise<T> | T
 
 export interface PandaHooks {
   /**
    * Called when the config is resolved, after all the presets are loaded and merged.
+   * This is the first hook called, you can use it to tweak the config before the context is created.
    */
-  'config:resolved': (conf: LoadConfigResult) => MaybeAsyncReturn
+  'config:resolved': (args: { conf: LoadConfigResult }) => MaybeAsyncReturn
+  /**
+   * Called when the Panda context has been created and the API is ready to be used.
+   */
+  'context:created': (args: { ctx: HooksApiInterface; logger: LoggerInterface }) => void
   /**
    * Called when the config file or one of its dependencies (imports) has changed.
    */
-  'config:change': (ctx: UserConfig) => MaybeAsyncReturn
+  'config:change': (args: { config: UserConfig; changes: DiffConfigResult }) => MaybeAsyncReturn
   /**
    * Called after reading the file content but before parsing it.
+   * You can use this hook to transform the file content to a tsx-friendly syntax so that Panda's parser can parse it.
+   * You can also use this hook to parse the file's content on your side using a custom parser, in this case you don't have to return anything.
    */
-  'parser:before': (file: string, content: string) => void
+  'parser:before': (args: { filePath: string; content: string }) => string | void
   /**
    * Called after the file styles are extracted and processed into the resulting ParserResult object.
+   * You can also use this hook to add your own extraction results from your custom parser to the ParserResult object.
    */
-  'parser:after': (file: string, result: ParserResultInterface | undefined) => void
-  /**
-   * Called after the extracted ParserResult has been transformed to a CSS string
-   */
-  'parser:css': (file: string, css: string | undefined) => void
+  'parser:after': (args: { filePath: string; result: ParserResultInterface | undefined }) => void
   /**
-   * Called before generating the design-system CSS files (global, static, preflight, tokens, keyframes)
+   * Called after the codegen is completed
    */
-  'generator:css': (
-    file: 'global.css' | 'static.css' | 'reset.css' | 'tokens.css' | 'keyframes.css' | 'styles.css',
-    css: string,
-  ) => void
+  'codegen:done': (args: { changed: ArtifactId[] | undefined }) => MaybeAsyncReturn
   /**
-   * Called after the codegen is completed
+   * Called right before adding the design-system CSS (global, static, preflight, tokens, keyframes) to the final CSS
+   * Called right before writing/injecting the final CSS (styles.css) that contains the design-system CSS and the parser CSS
+   * You can use it to tweak the CSS content before it's written to disk or injected through the postcss plugin.
    */
-  'generator:done': () => void | Promise<void>
+  'cssgen:done': (args: {
+    artifact: 'global' | 'static' | 'reset' | 'tokens' | 'keyframes' | 'styles.css'
+    content: string
+  }) => string | void
 }
 
-export type PandaHookable = Hookable<PandaHooks, HookKeys<PandaHooks>>
-export interface ConfigResultWithHooks extends LoadConfigResult {
-  hooks: PandaHookable
+export interface LoggerInterface {
+  level: 'debug' | 'info' | 'warn' | 'error' | 'silent'
+  print(data: any): void
+  warn: (type: string, data: any) => void
+  info: (type: string, data: any) => void
+  debug: (type: string, data: any) => void
+  error: (type: string, data: any) => void
+  log: (data: string) => void
+  time: {
+    info: (msg: string) => (_msg?: string) => void
+    debug: (msg: string) => (_msg?: string) => void
+  }
+  isDebug: boolean
 }

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export type * from './composition'
 export type * from './conditions'
 export type * from './config'
 export type * from './hooks'
+export type * from './hooks-api'
 export type * from './parser'
 export type * from './parts'
 export type * from './pattern'

package/dist/pattern.d.ts

@@ -12,13 +12,20 @@ export type PatternProperty =
 
 export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
+  isCssUnit: (value: any) => boolean
+  isCssVar: (value: any) => boolean
+  isCssFunction: (value: any) => boolean
 }
 
 export interface PatternProperties {
   [key: string]: PatternProperty
 }
 
-type Props<T> = Record<LiteralUnion<keyof T>, any>
+type InferProps<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternDefaultValue<T> = Partial<InferProps<T>>
+
+export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
 
 export interface PatternConfig<T extends PatternProperties = PatternProperties> {
   /**
@@ -34,10 +41,14 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The properties of the pattern.
    */
   properties?: T
+  /**
+   * The default values of the pattern.
+   */
+  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
   /**
    * The css object this pattern will generate.
    */
-  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
+  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */

package/dist/theme.d.ts

@@ -37,6 +37,14 @@ export interface Theme {
    * Multi-variant style definitions for component slots.
    */
   slotRecipes?: Record<string, SlotRecipeConfig>
+  /**
+   * The predefined container names for your project.
+   */
+  containerNames?: string[]
+  /**
+   * The predefined container sizes for your project.
+   */
+  containerSizes?: Record<string, string>
 }
 
 interface PartialTheme extends Omit<Theme, 'recipes' | 'slotRecipes'> {

package/dist/tokens.d.ts

@@ -90,6 +90,7 @@ export interface TokenDataTypes {
   assets: string | Asset
   borderWidths: string
   aspectRatios: string
+  containerNames: string
 }
 
 export type Tokens = {

package/dist/utility.d.ts

@@ -16,9 +16,20 @@ export type PropertyValues =
   | Record<string, string>
   | ThemeFn
 
-interface TransformArgs {
+export interface ColorMixResult {
+  invalid: boolean
+  value: string
+  color?: string
+}
+
+export interface TransformUtils {
+  colorMix(value: string): ColorMixResult
+}
+
+export interface TransformArgs<T = any> {
   token: TokenFn
-  raw: any
+  raw: T
+  utils: TransformUtils
 }
 
 export type PropertyTransform = (value: any, args: TransformArgs) => NestedCssProperties | undefined

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/types",
-  "version": "0.27.3",
+  "version": "0.29.0",
   "description": "The types for css panda",
   "main": "dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",
@@ -27,10 +27,10 @@
   ],
   "devDependencies": {
     "csstype": "3.1.3",
-    "hookable": "5.5.3",
+    "microdiff": "^1.3.2",
     "ncp": "^2.0.0",
     "pkg-types": "1.0.3",
-    "@pandacss/extractor": "0.27.3"
+    "@pandacss/extractor": "0.29.0"
   },
   "scripts": {
     "dev": "tsx scripts/watch.ts",