@pandacss/types 0.0.0-dev-20230109100037 → 0.0.0-dev-20230110150257

package/dist/composition.d.ts

@@ -1,7 +1,5 @@
+import type { Recursive } from './shared'
 import type { CompositionStyleObject } from './system-types'
-import type { LiteralUnion, Recursive } from './shared'
-
-type Cond = Record<string, string>
 
 export type Token<Value = any> = {
   value: Value
@@ -12,7 +10,7 @@ export type Token<Value = any> = {
  * Text styles
  * -----------------------------------------------------------------------------*/
 
-type TextStyleProperty = LiteralUnion<
+type TextStyleProperty =
   | 'fontSize'
   | 'fontSizeAdjust'
   | 'fontVariationSettings'
@@ -41,11 +39,10 @@ type TextStyleProperty = LiteralUnion<
   | 'textOrientation'
   | 'textOverflow'
   | 'textRendering'
->
 
-export type TextStyle<Conditions extends Cond = {}> = CompositionStyleObject<Conditions, TextStyleProperty>
+export type TextStyle = CompositionStyleObject<TextStyleProperty>
 
-export type TextStyles<T extends Cond = {}> = Recursive<Token<TextStyle<T>>>
+export type TextStyles = Recursive<Token<TextStyle>>
 
 /* -----------------------------------------------------------------------------
  * Layer styles
@@ -69,7 +66,7 @@ type Radius =
   | `Start${'Start' | 'End'}`
   | `End${'Start' | 'End'}`
 
-type LayerStyleProperty = LiteralUnion<
+type LayerStyleProperty =
   | 'background'
   | 'backgroundColor'
   | 'backgroundImage'
@@ -98,7 +95,12 @@ type LayerStyleProperty = LiteralUnion<
   | `border${Placement}Style`
   | 'padding'
   | `padding${Placement}`
->
 
-export type LayerStyle<Conditions extends Cond = {}> = CompositionStyleObject<Conditions, LayerStyleProperty>
-export type LayerStyles<Conditions extends Cond = {}> = Recursive<Token<LayerStyle<Conditions>>>
+export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
+
+export type LayerStyles = Recursive<Token<LayerStyle>>
+
+export type CompositionStyles = {
+  textStyles: TextStyles
+  layerStyles: LayerStyles
+}

package/dist/conditions.d.ts

@@ -1,3 +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'
@@ -11,15 +12,36 @@ 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
+ * -----------------------------------------------------------------------------*/
+
 export type Conditions = {
   [condition: string]: string
 }
 
-export type RecursiveCondition<T extends string, C extends string> =
-  | T
-  | { [K in C]?: RecursiveCondition<T, Exclude<C, K>> }
+export type Condition = string
 
-export type ExtractConditions<Conditions extends Dict, Breakpoints extends Dict> =
-  | StringKeyOf<Breakpoints>
-  | StringKeyOf<Conditions>
-  | 'base'
+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/index.d.ts

@@ -1,10 +1,10 @@
-export type { ConditionDetails, ConditionType, Conditions, RawCondition, RecursiveCondition } from './conditions'
+export type { ConditionDetails, ConditionType, Conditions, RawCondition } from './conditions'
 export type { Config, UserConfig } from './config'
 export type { PropertyConfig, PropertyTransform, PropertyValues, UtilityConfig } from './utility'
-export type { StyleObject, CssKeyframes } from './system-types'
+export type { SystemStyleObject, CssKeyframes } from './system-types'
 export type { PatternConfig, PatternProperty, PatternHelpers } from './pattern'
 export type { RecipeConfig, RecipeVariant } from './recipe'
-export type { TextStyles, LayerStyles } from './composition'
+export type { TextStyles, LayerStyles, CompositionStyles } from './composition'
 export type { Token, TokenCategory, TokenDataTypes, Tokens, SemanticToken, SemanticTokens } from './tokens'
 export type { Dict, RequiredBy, AnyFunction } from './shared'
 export type { Parts, Part } from './parts'

package/dist/pattern.d.ts

@@ -1,4 +1,4 @@
-import type { NativeCssProperty, StyleObject } from './system-types'
+import type { NativeCssProperty, SystemStyleObject } from './system-types'
 import type { TokenCategory } from './tokens'
 
 export type PatternProperty =
@@ -23,7 +23,7 @@ export type PatternConfig = {
   /**
    * The css object this pattern will generate.
    */
-  transform?: (props: Record<string, any>, helpers: PatternHelpers) => StyleObject
+  transform?: (props: Record<string, any>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */
@@ -33,4 +33,9 @@ export type PatternConfig = {
    * This will disallow css properties
    */
   strict?: boolean
+  /**
+   * @experimental
+   * Disallow certain css properties for this pattern
+   */
+  blocklist?: NativeCssProperty[]
 }

package/dist/prop-type.d.ts

@@ -0,0 +1,14 @@
+import type { ConditionalValue } from './conditions'
+import type { Properties as CSSProperties } from './csstype'
+
+/* -----------------------------------------------------------------------------
+ * Shadowed export (in CLI): DO NOT REMOVE
+ * -----------------------------------------------------------------------------*/
+
+export type PropertyTypes = {}
+
+export type PropertyValue<K extends string> = K extends keyof PropertyTypes
+  ? ConditionalValue<PropertyTypes[K]>
+  : K extends keyof CSSProperties
+  ? ConditionalValue<CSSProperties[K]>
+  : never

package/dist/recipe.d.ts

@@ -1,7 +1,7 @@
-import type { StyleObject } from './system-types'
+import type { SystemStyleObject } from './system-types'
 
 export type RecipeVariant = {
-  [variant: string]: StyleObject
+  [variant: string]: SystemStyleObject
 }
 
 type TVariants = Record<string, RecipeVariant>
@@ -18,7 +18,7 @@ export type RecipeConfig<Variants extends TVariants = TVariants> = {
   /**
    * The base styles of the recipe.
    */
-  base?: StyleObject
+  base?: SystemStyleObject
   /**
    * The multi-variant styles of the recipe.
    */

package/dist/selectors.d.ts

@@ -0,0 +1,56 @@
+import type { Pseudos } from './csstype'
+
+type AriaAttributes =
+  | '[aria-disabled]'
+  | '[aria-hidden]'
+  | '[aria-invalid]'
+  | '[aria-readonly]'
+  | '[aria-required]'
+  | '[aria-selected]'
+  | '[aria-checked]'
+  | '[aria-expanded]'
+  | '[aria-pressed]'
+  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`
+  | '[aria-invalid]'
+  | `[aria-sort=${'ascending' | 'descending'}]`
+
+type DataAttributes =
+  | '[data-selected]'
+  | '[data-highlighted]'
+  | '[data-hover]'
+  | '[data-active]'
+  | '[data-checked]'
+  | '[data-disabled]'
+  | '[data-readonly]'
+  | '[data-focus]'
+  | '[data-focus-visible]'
+  | '[data-focus-visible-added]'
+  | '[data-invalid]'
+  | '[data-pressed]'
+  | '[data-expanded]'
+  | '[data-grabbed]'
+  | '[data-dragged]'
+  | '[data-orientation=horizontal]'
+  | '[data-orientation=vertical]'
+  | '[data-in-range]'
+  | '[data-out-of-range]'
+  | '[data-placeholder-shown]'
+  | `[data-part=${string}]`
+  | `[data-attr=${string}]`
+  | `[data-placement=${string}]`
+  | `[data-theme=${string}]`
+  | `[data-size=${string}]`
+  | `[data-state=${string}]`
+  | '[data-empty]'
+  | '[data-loading]'
+  | '[data-loaded]'
+  | '[data-enter]'
+  | '[data-entering]'
+  | '[data-exited]'
+  | '[data-exiting]'
+
+type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`
+type ParentSelector = `${DataAttributes | AriaAttributes} &`
+
+export type AnySelector = `${string}&` | `&${string}`
+export type Selectors = AttributeSelector | ParentSelector

package/dist/style-props.d.ts

@@ -0,0 +1,15 @@
+import type { PropertiesFallback } from './csstype'
+import type { PropertyValue } from './prop-type'
+
+type String = string & {}
+type Number = number & {}
+
+/* -----------------------------------------------------------------------------
+ * Shadowed export (in CLI): DO NOT REMOVE
+ * -----------------------------------------------------------------------------*/
+
+type CssProperties = PropertiesFallback<String | Number>
+
+export type SystemProperties = {
+  [K in keyof CssProperties]?: PropertyValue<K>
+}

package/dist/system-types.d.ts

@@ -1,64 +1,10 @@
-import type * as CSS from './csstype'
+import type { Conditional, ConditionalValue, Conditions, Nested } from './conditions'
+import type { PropertiesFallback } from './csstype'
+import type { SystemProperties } from './style-props'
 
-type Dict = Record<string, unknown>
 type String = string & {}
 type Number = number & {}
 
-type AriaAttributes =
-  | '[aria-disabled]'
-  | '[aria-hidden]'
-  | '[aria-invalid]'
-  | '[aria-readonly]'
-  | '[aria-required]'
-  | '[aria-selected]'
-  | '[aria-checked]'
-  | '[aria-expanded]'
-  | '[aria-pressed]'
-  | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]`
-  | '[aria-invalid]'
-  | `[aria-sort=${'ascending' | 'descending'}]`
-
-type DataAttributes =
-  | '[data-selected]'
-  | '[data-highlighted]'
-  | '[data-hover]'
-  | '[data-active]'
-  | '[data-checked]'
-  | '[data-disabled]'
-  | '[data-readonly]'
-  | '[data-focus]'
-  | '[data-focus-visible]'
-  | '[data-focus-visible-added]'
-  | '[data-invalid]'
-  | '[data-pressed]'
-  | '[data-expanded]'
-  | '[data-grabbed]'
-  | '[data-dragged]'
-  | '[data-orientation=horizontal]'
-  | '[data-orientation=vertical]'
-  | '[data-in-range]'
-  | '[data-out-of-range]'
-  | '[data-placeholder-shown]'
-  | `[data-part=${string}]`
-  | `[data-attr=${string}]`
-  | `[data-placement=${string}]`
-  | `[data-theme=${string}]`
-  | `[data-size=${string}]`
-  | `[data-state=${string}]`
-  | '[data-empty]'
-  | '[data-loading]'
-  | '[data-loaded]'
-  | '[data-enter]'
-  | '[data-entering]'
-  | '[data-exited]'
-  | '[data-exiting]'
-
-type AttributeSelector = `&${CSS.Pseudos | DataAttributes | AriaAttributes}`
-type ParentSelector = `${DataAttributes | AriaAttributes} &`
-type AnySelector = `${string}&` | `&${string}`
-
-type Selectors = AttributeSelector | ParentSelector
-
 type ContainerProperties = {
   container?: string
   containerType?: 'size' | 'inline-size' | String
@@ -73,7 +19,7 @@ type CssVarProperties = {
   [key in `--${string}`]?: string | number
 }
 
-export type NativeCssProperties = CSS.PropertiesFallback<String | Number> & ContainerProperties & CssVarProperties
+export type NativeCssProperties = PropertiesFallback<String | Number> & ContainerProperties
 
 export type NativeCssProperty = keyof NativeCssProperties
 
@@ -89,102 +35,36 @@ export type CssKeyframes = {
  * Conditional css properties
  * -----------------------------------------------------------------------------*/
 
-type Cond = Record<string, string>
-
-export type Conditional<C extends Cond, V> =
-  | V
-  | Array<V | null>
-  | {
-      [K in keyof C]?: Conditional<C, V>
-    }
-
-type Nested<C extends Cond, P> = P & {
-  [K in Selectors | keyof C]?: Nested<C, P>
-} & {
-  [K in AnySelector]?: Nested<C, P>
+type MinimalNested<P> = {
+  [K in keyof Conditions]?: Nested<P>
 }
 
-type MinimalNested<C extends Cond, P> = P & {
-  [K in keyof C]?: Nested<C, P>
+type GenericProperties = {
+  [key: string]: ConditionalValue<String | Number | boolean>
 }
 
 /* -----------------------------------------------------------------------------
- * Mixed css properties (native + conditional + custom properties)
-
-   C - condition record
-   P - custom properties or utilities
-   S - strict mode? true or false
+ * Native css props
  * -----------------------------------------------------------------------------*/
 
-type NativeCssValue<T> = T extends NativeCssProperty ? NativeCssProperties[T] : never
-
-type NativeProperties<Conditions extends Cond, PropTypes extends Dict, Overrides extends Dict> = {
-  [K in Exclude<NativeCssProperty, keyof PropTypes | keyof Overrides>]?: Conditional<Conditions, NativeCssProperties[K]>
-}
+export type NestedCssProperties = Nested<CssProperties>
 
-type CustomProperties<
-  Conditions extends Cond,
-  PropTypes extends Dict,
-  StrictMode extends boolean,
-  Overrides extends Dict,
-> = {
-  [K in Exclude<keyof PropTypes, keyof Overrides>]?: Conditional<
-    Conditions,
-    true extends StrictMode ? PropTypes[K] : PropTypes[K] | NativeCssValue<K>
-  >
-}
+export type SystemStyleObject = Nested<SystemProperties | GenericProperties>
 
-type GenericProperties<Conditions extends Cond> = {
-  [key: string]: Conditional<Conditions, boolean | String | Number | undefined>
+export type GlobalStyleObject = {
+  [selector: string]: SystemStyleObject
 }
 
-type MinimalCss<Conditions extends Cond, PropTypes extends Dict, StrictMode extends boolean, Overrides extends Dict> =
-  | Partial<Overrides> &
-      NativeProperties<Conditions, PropTypes, Overrides> &
-      CustomProperties<Conditions, PropTypes, StrictMode, Overrides>
-
-type Css<Conditions extends Cond, PropTypes extends Dict, StrictMode extends boolean, Overrides extends Dict> =
-  | MinimalCss<Conditions, PropTypes, StrictMode, Overrides>
-  | GenericProperties<Conditions>
+export type CompositionStyleObject<Property extends string> = Nested<{
+  [K in Property]?: Conditional<K extends NativeCssProperty ? NativeCssProperties[K] : unknown>
+}>
 
 /* -----------------------------------------------------------------------------
- * Exported types
+ * Jsx style props
  * -----------------------------------------------------------------------------*/
 
-export type NestedCssProperties = Nested<{}, CssProperties>
-
-export type StyleObject<
-  Conditions extends Cond = {},
-  PropTypes extends Dict = {},
-  StrictMode extends boolean = false,
-  Overrides extends Dict = {},
-> = Nested<Conditions, Css<Conditions, PropTypes, StrictMode, Overrides>>
-
-export type JsxStyleProps<
-  Conditions extends Cond = {},
-  PropTypes extends Dict = {},
-  StrictMode extends boolean = false,
-  Overrides extends Dict = {},
-> = MinimalNested<Conditions, MinimalCss<Conditions, PropTypes, StrictMode, Overrides>> & {
-  css?: StyleObject<Conditions, PropTypes, StrictMode, Overrides>
-  sx?: StyleObject<Conditions, PropTypes, StrictMode, Overrides>
-}
-
-export type GlobalStyleObject<
-  Conditions extends Cond = {},
-  PropTypes extends Dict = {},
-  StrictMode extends boolean = false,
-  Overrides extends Dict = {},
-> = {
-  [selector: string]: StyleObject<Conditions, PropTypes, StrictMode, Overrides>
-}
-
-export type CompositionStyleObject<Conditions extends Cond, PropTypes> = Nested<
-  Conditions,
-  {
-    [K in Extract<PropTypes, string>]?: Conditional<
-      Conditions,
-      K extends NativeCssProperty ? NativeCssProperties[K] : unknown
-    >
+export type JsxStyleProps = SystemProperties &
+  MinimalNested<SystemStyleObject> & {
+    css?: SystemStyleObject
+    sx?: SystemStyleObject
   }
->

package/dist/tokens.d.ts

@@ -24,10 +24,22 @@ export type SemanticToken<Value = string, Condition extends string = string> = T
  * Token data types
  * -----------------------------------------------------------------------------*/
 
+type BorderStyle =
+  | 'dashed'
+  | 'dotted'
+  | 'double'
+  | 'groove'
+  | 'hidden'
+  | 'inset'
+  | 'none'
+  | 'outset'
+  | 'ridge'
+  | 'solid'
+
 type Border = {
   color: string
   width: string | number
-  style: string
+  style: BorderStyle
 }
 
 type Shadow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/types",
-  "version": "0.0.0-dev-20230109100037",
+  "version": "0.0.0-dev-20230110150257",
   "description": "The types for css panda",
   "main": "dist/index.d.ts",
   "author": "Segun Adebayo <joseshegs@gmail.com>",