chakra-ui/panda @pandacss/generator@0.37.1

on GitHub

Patch Changes

• 885963c: - Fix an issue where the compoundVariants classes would not be present at runtime when using config recipes

  // panda.config.ts
  import { defineConfig } from '@pandacss/dev'
  
  export default defineConfig({
    theme: {
      extend: {
        recipes: {
          button: {
            // ...
            variants: {
              size: {
                sm: {
                  fontSize: 'sm',
                },
                // ...
              },
            },
            compoundVariants: [
              {
                size: 'sm',
                css: { color: 'blue.100'},
              },
            ],
          },
        },
      },
    },
  })
  
  // app.tsx
  const Button = styled('button', button)
  
  const App = () => {
    return (
      // ❌ this would only have the classes `button button--size_sm`
      // the `text_blue` was missing
      // ✅ it's now fixed -> `button button--size_sm text_blue`
      <Button size="sm">Click me</Button>
    )
  }

  • Add a getVariantProps helper to the recipes API (cva and config recipes)

  import { cva } from '../styled-system/css'
  import { getVariantProps } from '../styled-system/recipes'
  
  const button = cva({
      // ...
    variants: {
      size: {
        sm: {
          fontSize: 'sm',
        },
        md: {
          fontSize: 'md',
        },
      },
      variant: {
        primary: {
          backgroundColor: 'blue.500',
        },
        danger: {
          backgroundColor: 'red.500',
        }
      }
    }
    defaultVariants: {
      size: 'md',
      variant: 'primary',
    }
  })
  
  // ✅ this will return the computed variants based on the defaultVariants + props passed
  const buttonProps = button.getVariantProps({ size: "sm" })
  //    ^? { size: "sm", variant: "primary" }

• 99870bb: Fix issue where setting the pattern jsx option with dot notation didn't work.

  import { defineConfig } from "@pandacss/dev";
  
  export default defineConfig({
    // ...
    patterns: {
      extend: {
        grid: {
          jsx: ["Form.Group", "Grid"],
        },
        stack: {
          jsx: ["Form.Action", "Stack"],
        },
      },
    },
  });

• Updated dependencies [93dc9f5]

• Updated dependencies [885963c]

• Updated dependencies [99870bb]

  • @pandacss/token-dictionary@0.37.1
  • @pandacss/types@0.37.1
  • @pandacss/shared@0.37.1
  • @pandacss/core@0.37.1
  • @pandacss/logger@0.37.1
  • @pandacss/is-valid-prop@0.37.1