chakra-ui/panda @pandacss/shared@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

• 24e783b: Reduce the overall outdir size, introduce the new config jsxStyleProps option to disable style props and
  further reduce it.

  config.jsxStyleProps:

  • 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 usable as a component:
    • <styled.div /> and styled("div") aren't valid
    • but the recipe usage is still valid styled("div", { base: { color: "red.300" }, variants: { ...} })