@pandacss/types 0.17.2 → 0.17.4

package/dist/analyze-report.d.ts

@@ -0,0 +1,179 @@
+import type { BoxNodeEmptyInitializer, BoxNodeLiteral, BoxNodeMap } from '@pandacss/extractor'
+import type { Config } from './config'
+
+export type ReportItemType = 'object' | 'cva' | 'pattern' | 'recipe' | 'jsx' | 'jsx-factory'
+export interface ReportItem {
+  id: number
+  from: string
+  type: ReportItemType
+  filepath: string
+  kind: 'function' | 'component'
+  path: string[]
+  propName: string
+  conditionName?: string | undefined
+  value: string | number | true
+  category: string
+  isKnown: boolean
+  box: BoxNodeLiteral | BoxNodeEmptyInitializer
+}
+
+/**
+ * An instance is either a component usage or a function usage
+ * @example an instance name could be 'Button', 'css', 'panda.div', 'vstack', ...
+ */
+export interface ReportInstanceItem extends Pick<ReportItem, 'from' | 'type' | 'kind' | 'filepath'> {
+  instanceId: number
+  contains: Array<ReportItem['id']>
+  value: Record<string, any>
+  box: BoxNodeMap
+}
+
+export interface ReportMaps {
+  byInstanceOfKind: Map<'function' | 'component', Set<ReportInstanceItem['instanceId']>>
+  byPropertyName: Map<string, Set<ReportItem['id']>>
+  byCategory: Map<string, Set<ReportItem['id']>>
+  byConditionName: Map<string, Set<ReportItem['id']>>
+  byShorthand: Map<string, Set<ReportItem['id']>>
+  byTokenName: Map<string, Set<ReportItem['id']>>
+  byPropertyPath: Map<string, Set<ReportItem['id']>>
+  fromKind: Map<'function' | 'component', Set<ReportItem['id']>>
+  byType: Map<string, Set<ReportItem['id']>>
+  byInstanceName: Map<string, Set<ReportItem['id']>>
+  colorsUsed: Map<string, Set<ReportItem['id']>>
+}
+
+export interface ReportCounts {
+  filesWithTokens: number
+  propNameUsed: number
+  tokenUsed: number
+  shorthandUsed: number
+  propertyPathUsed: number
+  typeUsed: number
+  instanceNameUsed: number
+  kindUsed: number
+  instanceOfKindUsed: number
+  colorsUsed: number
+}
+
+export interface MostUsedItem {
+  key: string
+  count: number
+}
+export interface ReportStats {
+  filesWithMostInstance: Record<string, number>
+  filesWithMostPropValueCombinations: Record<string, number>
+  mostUseds: {
+    propNames: Array<MostUsedItem>
+    tokens: Array<MostUsedItem>
+    shorthands: Array<MostUsedItem>
+    categories: Array<MostUsedItem>
+    conditions: Array<MostUsedItem>
+    propertyPaths: Array<MostUsedItem>
+    types: Array<MostUsedItem>
+    instanceNames: Array<MostUsedItem>
+    fromKinds: Array<MostUsedItem>
+    instanceOfKinds: Array<MostUsedItem>
+    colors: Array<MostUsedItem>
+  }
+}
+
+export interface ReportDetails {
+  counts: ReportCounts
+  stats: ReportStats
+  details: {
+    byId: Map<ReportItem['id'], ReportItem>
+    byInstanceId: Map<ReportInstanceItem['instanceId'], ReportInstanceItem>
+    byFilepath: Map<string, Set<ReportItem['id']>>
+    byInstanceInFilepath: Map<string, Set<ReportInstanceItem['instanceId']>>
+    globalMaps: ReportMaps
+    byFilePathMaps: Map<string, ReportMaps>
+  }
+}
+
+interface FileSizes {
+  normal: string
+  minified: string
+  gzip: {
+    normal: string
+    minified: string
+  }
+}
+
+export interface AnalysisReport extends ReportDetails {
+  fileSizes: FileSizes
+}
+
+interface ReportMapsJSON {
+  byInstanceOfKind: Record<'function' | 'component', Array<ReportInstanceItem['instanceId']>>
+  byPropertyName: Record<string, Array<ReportItem['id']>>
+  byCategory: Record<string, Array<ReportItem['id']>>
+  byConditionName: Record<string, Array<ReportItem['id']>>
+  byShorthand: Record<string, Array<ReportItem['id']>>
+  byTokenName: Record<string, Array<ReportItem['id']>>
+  byPropertyPath: Record<string, Array<ReportItem['id']>>
+  fromKind: Record<'function' | 'component', Array<ReportItem['id']>>
+  byType: Record<string, Array<ReportItem['id']>>
+  byInstanceName: Record<string, Array<ReportItem['id']>>
+  colorsUsed: Record<string, Array<ReportItem['id']>>
+}
+
+export interface ReportItemJSON {
+  id: number
+  from: string
+  type: ReportItemType
+  filepath: string
+  kind: 'function' | 'component'
+  path: string[]
+  propName: string
+  conditionName?: string | undefined
+  value: string | number | true
+  category: string
+  isKnown: boolean
+  box: {
+    type: 'literal' | 'empty-initializer'
+    value: string | number | boolean | undefined | null
+    node: string
+    stack: string[]
+    line: number
+    column: number
+  }
+}
+
+export interface ReportInstanceItemJSON extends Pick<ReportItem, 'from' | 'type' | 'kind' | 'filepath'> {
+  instanceId: number
+  contains: Array<ReportItem['id']>
+  value: Record<string, any>
+  box: { type: 'map'; value: Record<string, any>; node: string; stack: string[]; line: number; column: number }
+}
+
+export interface AnalysisReportJSON {
+  counts: ReportCounts
+  stats: ReportStats
+  details: {
+    byId: Record<ReportItemJSON['id'], ReportItemJSON>
+    byInstanceId: Record<ReportInstanceItemJSON['instanceId'], ReportInstanceItemJSON>
+    byFilepath: Record<string, Array<ReportItemJSON['id']>>
+    byInstanceInFilepath: Record<string, Array<ReportInstanceItemJSON['instanceId']>>
+    globalMaps: ReportMapsJSON
+    byFilePathMaps: Record<string, ReportMapsJSON>
+  }
+  fileSizes: FileSizes
+  cwd: Config['cwd']
+  theme: Config['theme']
+  utilities: Config['utilities']
+  conditions: Config['conditions']
+  shorthands: Record<string, string>
+  // Generator["parserOptions""]
+  parserOptions: {
+    importMap: {
+      css: string
+      recipe: string
+      pattern: string
+      jsx: string
+    }
+    jsx: {
+      factory: string
+      nodes: Array<{ type: 'string'; name: string; props: string[]; baseName: string }>
+    }
+  }
+}

package/dist/composition.d.ts

@@ -0,0 +1,106 @@
+import type { CompositionStyleObject } from './system-types'
+import type { Token } from './tokens'
+
+interface Recursive<T> {
+  [key: string]: Recursive<T> | T
+}
+
+/* -----------------------------------------------------------------------------
+ * Text styles
+ * -----------------------------------------------------------------------------*/
+
+type TextStyleProperty =
+  | 'fontSize'
+  | 'fontSizeAdjust'
+  | 'fontVariationSettings'
+  | 'fontVariantPosition'
+  | 'fontVariantCaps'
+  | 'fontVariantNumeric'
+  | 'fontVariantAlternates'
+  | 'fontVariantLigatures'
+  | 'fontFamily'
+  | 'fontWeight'
+  | 'fontSynthesis'
+  | 'fontStyle'
+  | 'fontVariant'
+  | 'lineHeight'
+  | 'letterSpacing'
+  | 'textDecoration'
+  | 'textTransform'
+  | 'textIndent'
+  | 'textDecorationColor'
+  | 'textDecorationLine'
+  | 'textDecorationStyle'
+  | 'textEmphasisColor'
+  | 'textEmphasisPosition'
+  | 'textEmphasisStyle'
+  | 'hyphenateCharacter'
+  | 'textOrientation'
+  | 'textOverflow'
+  | 'textRendering'
+
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
+
+export type TextStyles = Recursive<Token<TextStyle>>
+
+/* -----------------------------------------------------------------------------
+ * Layer styles
+ * -----------------------------------------------------------------------------*/
+
+type Placement =
+  | 'Top'
+  | 'Right'
+  | 'Bottom'
+  | 'Left'
+  | 'Inline'
+  | 'Block'
+  | 'InlineStart'
+  | 'InlineEnd'
+  | 'BlockStart'
+  | 'BlockEnd'
+
+type Radius =
+  | `Top${'Right' | 'Left'}`
+  | `Bottom${'Right' | 'Left'}`
+  | `Start${'Start' | 'End'}`
+  | `End${'Start' | 'End'}`
+
+type LayerStyleProperty =
+  | 'background'
+  | 'backgroundColor'
+  | 'backgroundImage'
+  | 'borderRadius'
+  | 'border'
+  | 'borderWidth'
+  | 'borderColor'
+  | 'borderStyle'
+  | 'boxShadow'
+  | 'filter'
+  | 'backdropFilter'
+  | 'transform'
+  | 'color'
+  | 'opacity'
+  | 'backgroundBlendMode'
+  | 'backgroundAttachment'
+  | 'backgroundClip'
+  | 'backgroundOrigin'
+  | 'backgroundPosition'
+  | 'backgroundRepeat'
+  | 'backgroundSize'
+  | `border${Placement}`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | 'padding'
+  | `padding${Placement}`
+
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+export interface CompositionStyles {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+}

package/dist/conditions.d.ts

@@ -0,0 +1,47 @@
+import type { AnySelector, Selectors } from './selectors'
+
+export type ConditionType = 'at-rule' | 'parent-nesting' | 'self-nesting' | 'combinator-nesting'
+
+export interface ConditionDetails {
+  type: ConditionType
+  value: string
+  name?: string
+  rawValue?: string
+}
+
+export interface RawCondition extends ConditionDetails {
+  raw: string
+}
+
+/* -----------------------------------------------------------------------------
+ * Shadowed export (in CLI): DO NOT REMOVE
+ * -----------------------------------------------------------------------------*/
+
+export interface Conditions {
+  [condition: string]: string
+}
+export interface ExtendableConditions {
+  [condition: string]: string | Conditions | undefined
+  extend?: Conditions | undefined
+}
+
+export type Condition = string
+
+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 Condition]?: Nested<P>
+    }

package/dist/config.d.ts

@@ -0,0 +1,355 @@
+import type { TSConfig } from 'pkg-types'
+import type { Conditions, ExtendableConditions } from './conditions'
+import type { PandaHooks } from './hooks'
+import type { PatternConfig } from './pattern'
+import type { RequiredBy } from './shared'
+import type { StaticCssOptions } from './static-css'
+import type { ExtendableGlobalStyleObject, GlobalStyleObject } from './system-types'
+import type { ExtendableTheme, Theme } from './theme'
+import type { ExtendableUtilityConfig, UtilityConfig } from './utility'
+
+export type { TSConfig }
+
+export type CascadeLayer = 'reset' | 'base' | 'tokens' | 'recipes' | 'utilities'
+
+export type CascadeLayers = Record<CascadeLayer, string>
+
+interface StudioOptions {
+  /**
+   * Used to customize the design system studio
+   * @default { title: 'Panda', logo: '🐼' }
+   */
+  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
+    }
+  }
+}
+
+interface Patterns {
+  [pattern: string]: PatternConfig
+}
+
+interface PresetCore {
+  /**
+   * The css selectors or media queries shortcuts.
+   * @example `{ hover: "&:hover" }`
+   */
+  conditions: Conditions
+  /**
+   * The global styles for your project.
+   */
+  globalCss: GlobalStyleObject
+  /**
+   * The theme configuration for your project.
+   */
+  theme: Theme
+  /**
+   * The css utility definitions.
+   */
+  utilities: UtilityConfig
+  /**
+   * Common styling or layout patterns for your project.
+   */
+  patterns: Record<string, PatternConfig>
+}
+
+interface ExtendablePatterns {
+  [pattern: string]: PatternConfig | Patterns | undefined
+  extend?: Patterns | undefined
+}
+
+export interface ExtendableOptions {
+  /**
+   * The css selectors or media queries shortcuts.
+   * @example `{ hover: "&:hover" }`
+   */
+  conditions?: ExtendableConditions
+  /**
+   * The global styles for your project.
+   */
+  globalCss?: ExtendableGlobalStyleObject
+  /**
+   * The theme configuration for your project.
+   */
+  theme?: ExtendableTheme
+  /**
+   * The css utility definitions.
+   */
+  utilities?: ExtendableUtilityConfig
+  /**
+   * Common styling or layout patterns for your project.
+   */
+  patterns?: ExtendablePatterns
+}
+
+export interface OutdirImportMap {
+  css: string
+  recipes: string
+  patterns: string
+  jsx?: string
+}
+
+interface FileSystemOptions {
+  /**
+   * Whether to clean the output directory before generating the css.
+   * @default false
+   */
+  clean?: boolean
+  /**
+   * The output directory.
+   * @default 'styled-system'
+   */
+  outdir?: string
+  /**
+   * Allows you to customize the import paths for the generated outdir.
+   * @default
+   * ```js
+   * {
+   *    css: 'styled-system/css',
+   *    recipes: 'styled-system/recipes',
+   *    patterns: 'styled-system/patterns',
+   *    jsx: 'styled-system/jsx',
+   * }
+   * ```
+   */
+  importMap?: OutdirImportMap
+  /**
+   * List of files glob to watch for changes.
+   * @default []
+   */
+  include?: string[]
+  /**
+   * List of files glob to ignore.
+   * @default []
+   */
+  exclude?: string[]
+  /**
+   * Whether to watch for changes and regenerate the css.
+   * @default false
+   */
+  watch?: boolean
+  /**
+   * Whether to use polling instead of filesystem events when watching.
+   * @default false
+   */
+  poll?: boolean
+  /**
+   * The current working directory.
+   * @default 'process.cwd()'
+   */
+  cwd?: string
+  /**
+   * The log level for the built-in logger.
+   * @default 'info'
+   */
+  logLevel?: 'debug' | 'info' | 'warn' | 'error' | 'silent'
+}
+
+type JsxFramework = 'react' | 'solid' | 'preact' | 'vue' | 'qwik'
+
+interface JsxOptions {
+  /**
+   * The framework to use for generating supercharged elements.
+   */
+  jsxFramework?: JsxFramework
+  /**
+   * The factory name of the element
+   * @default 'styled'
+   *
+   * @example
+   * ```jsx
+   * <styled.button marginTop="40px">Click me</styled.button>
+   * ```
+   */
+  jsxFactory?: string
+  /**
+   * The style props allowed on generated JSX components
+   * - When set to 'all', all style props are allowed.
+   * - When set to 'minimal', only the `css` prop is allowed.
+   * - When set to 'none', no style props are allowed and therefore the jsxFactory will not be importable.
+   *
+   * @default 'all'
+   *
+   * @example with 'all':
+   * ```jsx
+   * <styled.button marginTop="40px">Click me</styled.button>
+   * ```
+   *
+   * @example with 'minimal':
+   * ```jsx
+   * <styled.button css={{ marginTop: "40px" }}>Click me</styled.button>
+   * ```
+   *
+   * @example with 'none':
+   * ```jsx
+   * <button className={css({ marginTop: "40px" })}>Click me</button>
+   * ```
+   */
+  jsxStyleProps?: 'all' | 'minimal' | 'none'
+}
+
+interface CssgenOptions {
+  /**
+   * Whether to include css reset styles in the generated css.
+   * @default true
+   */
+  preflight?: boolean | { scope: string }
+  /**
+   * The namespace prefix for the generated css classes and css variables.
+   * @default ''
+   */
+  prefix?: string | { cssVar?: string; className?: string }
+  /**
+   * The value separator used in the generated class names.
+   * @default '_'
+   */
+  separator?: '_' | '=' | '-'
+  /**
+   * Whether to optimize the generated css.
+   * @default true
+   */
+  optimize?: boolean
+  /**
+   * Whether to minify the generated css.
+   * @default false
+   */
+  minify?: boolean
+  /**
+   * The root selector for the css variables.
+   * @default ':where(:host, :root)'
+   */
+  cssVarRoot?: string
+  /**
+   * @experimental
+   * Used to generate css utility classes for your project.
+   */
+  staticCss?: StaticCssOptions
+  /**
+   * The css syntax kind to use
+   * @default 'object-literal'
+   */
+  syntax?: 'template-literal' | 'object-literal'
+}
+
+interface CodegenOptions {
+  /**
+   * Whether to emit the artifacts to `node_modules` as a package.
+   * @default false
+   */
+  emitPackage?: boolean
+  /**
+   * Whether to only emit the `tokens` directory
+   * @default false
+   */
+  emitTokensOnly?: boolean
+  /**
+   * Whether to hash the generated class names / css variables.
+   * This is useful if want to shorten the class names or css variables.
+   * @default false
+   */
+  hash?: boolean | { cssVar: boolean; className: boolean }
+  /**
+   * Options for the generated typescript definitions.
+   */
+  strictTokens?: boolean
+  /**
+   * Whether to update the .gitignore file.
+   * @default 'true'
+   */
+  gitignore?: boolean
+  /**
+   * Whether to allow shorthand properties
+   * @default 'true'
+   */
+  shorthands?: boolean
+  /**
+   * Layer mappings used in the generated css.
+   * @default 'true'
+   */
+  layers?: Partial<CascadeLayers>
+  /**
+   * File extension for generated javascript files.
+   * @default 'mjs'
+   */
+  outExtension?: 'mjs' | 'js'
+  /**
+   * Whether to force consistent type extensions for generated typescript .d.ts files.
+   * If set to `true` and `outExtension` is set to `mjs`, the generated typescript .d.ts files will have the extension `.d.mts`.
+   * @default false
+   */
+  forceConsistentTypeExtension?: boolean
+}
+
+interface PresetOptions {
+  /**
+   * Used to create reusable config presets for your project or team.
+   */
+  presets?: (string | Preset | Promise<Preset>)[]
+  /**
+   * Whether to opt-out of the defaults config presets: [`@pandacss/preset-base`, `@pandacss/preset-panda`]
+   * @default 'false'
+   */
+  eject?: boolean
+}
+
+interface HooksOptions {
+  hooks?: Partial<PandaHooks>
+}
+
+export interface Config
+  extends StudioOptions,
+    ExtendableOptions,
+    CssgenOptions,
+    CodegenOptions,
+    FileSystemOptions,
+    JsxOptions,
+    PresetOptions,
+    HooksOptions {}
+
+export interface Preset extends ExtendableOptions, PresetOptions {}
+
+export interface UserConfig
+  extends Partial<PresetCore>,
+    RequiredBy<Omit<Config, keyof PresetCore>, 'outdir' | 'cwd' | 'include'> {}
+
+export interface PathMapping {
+  pattern: RegExp
+  paths: string[]
+}
+
+export interface ConfigTsOptions {
+  baseUrl?: string | undefined
+  pathMappings: PathMapping[]
+}
+
+export interface LoadConfigResult {
+  path: string
+  config: UserConfig
+  tsconfig?: TSConfig
+  tsOptions?: ConfigTsOptions
+  tsconfigFile?: string
+  dependencies: string[]
+}
+
+export interface HashOptions {
+  tokens: boolean | undefined
+  className: boolean | undefined
+}
+
+export interface PrefixOptions {
+  tokens: string | undefined
+  className: string | undefined
+}