chore(deps): update all non-major dev dependencies (minor) #6385

renovate · 2025-01-01T02:29:27Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@pandacss/dev (source)	`^0.45.2` -> `^0.51.0`
@swc/cli	`^0.4.0` -> `^0.6.0`

Release Notes

chakra-ui/panda (@pandacss/dev)

`v0.51.1`

Compare Source

Patch Changes

9c1327e: Redesigned the recipe report to be more readable and easier to understand. We simplified the JSX and
Function columns to be more concise.

BEFORE

╔════════════════════════╤══════════════════════╤═════════╤═══════╤════════════╤═══════════════════╤══════════╗
║ Recipe                 │ Variant Combinations │ Usage % │ JSX % │ Function % │ Most Used         │ Found in ║
╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
║ someRecipe (1 variant) │ 1 / 1                │ 100%    │ 100%  │ 0%         │ size.small        │ 1 file   ║
╟────────────────────────┼──────────────────────┼─────────┼───────┼────────────┼───────────────────┼──────────╢
║ button (4 variants)    │ 7 / 9                │ 77.78%  │ 63%   │ 38%        │ size.md, size.sm, │ 2 files  ║
║                        │                      │         │       │            │ state.focused,    │          ║
║                        │                      │         │       │            │ variant.danger,   │          ║
║                        │                      │         │       │            │ variant.primary   │          ║
╚════════════════════════╧══════════════════════╧═════════╧═══════╧════════════╧═══════════════════╧══════════╝

AFTER

╔════════════════════════╤════════════════╤═══════════════════╤═══════════════════╤══════════╤═══════════╗
║ Recipe                 │ Variant values │ Usage %           │ Most used         │ Found in │ Used as   ║
╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
║ someRecipe (1 variant) │ 1 value        │ 100% (1 value)    │ size.small        │ 1 file   │ jsx: 100% ║
║                        │                │                   │                   │          │ fn: 0%    ║
╟────────────────────────┼────────────────┼───────────────────┼───────────────────┼──────────┼───────────╢
║ button (4 variants)    │ 9 values       │ 77.78% (7 values) │ size.md, size.sm, │ 2 files  │ jsx: 63%  ║
║                        │                │                   │ state.focused,    │          │ fn: 38%   ║
║                        │                │                   │ variant.danger,   │          │           ║
║                        │                │                   │ variant.primary   │          │           ║
╚════════════════════════╧════════════════╧═══════════════════╧═══════════════════╧══════════╧═══════════╝

Minor Changes

fea78c7: Adds support for static analysis of used tokens and recipe variants. It helps to get a birds-eye view of how
your design system is used and answers the following questions:
- What tokens are most used?
- What recipe variants are most used?
- How many hardcoded values vs tokens do we have?
```
panda analyze --scope=<token|recipe>
```
Still work in progress but we're excited to get your feedback!

Patch Changes

Updated dependencies [fea78c7]
Updated dependencies [ad89b90]
- @pandacss/types @0.50.0
- @pandacss/node @0.50.0
- @pandacss/token-dictionary @0.50.0
- @pandacss/config @0.50.0
- @pandacss/logger @0.50.0
- @pandacss/preset-panda @0.50.0
- @pandacss/postcss @0.50.0
- @pandacss/shared @0.50.0

`v0.49.0`

Compare Source

Minor Changes

97a0e4d: Add support for animation styles. Animation styles focus solely on animations, allowing you to orchestrate
animation properties.

Pairing animation styles with text styles and layer styles can make your styles a lot cleaner.

Here's an example of this:

import { defineAnimationStyles } from '@&#8203;pandacss/dev'

export const animationStyles = defineAnimationStyles({
  'slide-fade-in': {
    value: {
      transformOrigin: 'var(--transform-origin)',
      animationDuration: 'fast',
      '&[data-placement^=top]': {
        animationName: 'slide-from-top, fade-in',
      },
      '&[data-placement^=bottom]': {
        animationName: 'slide-from-bottom, fade-in',
      },
      '&[data-placement^=left]': {
        animationName: 'slide-from-left, fade-in',
      },
      '&[data-placement^=right]': {
        animationName: 'slide-from-right, fade-in',
      },
    },
  },
})

With that defined, I can use it in my recipe or css like so:

export const popoverSlotRecipe = defineSlotRecipe({
  slots: anatomy.keys(),
  base: {
    content: {
      _open: {
        animationStyle: 'scale-fade-in',
      },
      _closed: {
        animationStyle: 'scale-fade-out',
      },
    },
  },
})

This feature will drive consumers to lean in towards CSS for animations rather than JS. Composing animation names is a
powerful feature we should encourage consumers to use.