chakra-ui/panda @pandacss/types@2.0.0-beta.10

on GitHub

Minor Changes

• 52e84e6: Add native cascade-layer polyfill via polyfill / --polyfill (no PostCSS plugin required).

• a79c917: Opt into optimize.treeshakeDesignSystem to hydrate only the design-system modules your app imports, instead
  of the whole build-info artifact.

• 2714583: Add viewTransition() for the View Transitions API. Pass slot styles, get a stable vt_* bag class, and
  Panda emits the matching ::view-transition-* rules. Import from styled-system/css. You still set unique
  view-transition-name values at runtime — Panda only owns the shared CSS. Design-system build info carries the bags
  so apps hydrate them without re-extracting.

  import { viewTransition } from 'styled-system/css'
  
  const slide = viewTransition({
    group: { animationDuration: '0.4s' },
    old: { opacity: 0 },
    new: { opacity: 1 },
  })

  // React / Next
  import { ViewTransition } from 'react'
  
  ;<ViewTransition name="hero" share={slide}>
    <img src="…" alt="…" />
  </ViewTransition>

  <!-- Astro -->
  <img class="{slide}" transition:name="hero" src="…" alt="…" />

  // Solid / Nuxt — framework starts the transition; you attach name + bag class
  <img class={slide} style={{ viewTransitionName: 'hero' }} src="…" alt="…" />