chakra-ui/panda @pandacss/parser@0.10.0

on GitHub

Minor Changes

• a669f4d: Introduce new slot recipe features.

  Slot recipes are useful for styling composite or multi-part components easily.

  • sva: the slot recipe version of cva
  • defineSlotRecipe: the slot recipe version of defineRecipe

  Definition

  import { sva } from 'styled-system/css'
  
  const button = sva({
    slots: ['label', 'icon'],
    base: {
      label: { color: 'red', textDecoration: 'underline' },
    },
    variants: {
      rounded: {
        true: {},
      },
      size: {
        sm: {
          label: { fontSize: 'sm' },
          icon: { fontSize: 'sm' },
        },
        lg: {
          label: { fontSize: 'lg' },
          icon: { fontSize: 'lg', color: 'pink' },
        },
      },
    },
    defaultVariants: {
      size: 'sm',
    },
  })

  Usage

  export function App() {
    const btnClass = button({ size: 'lg', rounded: true })
  
    return (
      <button>
        <p class={btnClass.label}> Label</p>
        <p class={btnClass.icon}> Icon</p>
      </button>
    )
  }

Patch Changes

• Updated dependencies [24e783b]
• Updated dependencies [386e509]
• Updated dependencies [6d4eaa6]
• Updated dependencies [a669f4d]
  • @pandacss/is-valid-prop@0.10.0
  • @pandacss/shared@0.10.0
  • @pandacss/types@0.10.0
  • @pandacss/config@0.10.0
  • @pandacss/extractor@0.10.0
  • @pandacss/logger@0.10.0