Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@chakra-ui/react@3.0.0

Major Changes

• #8153 7b6e66a Thanks @segunadebayo! - Prepares the ground for the next version Chakra that leverages Ark UI.

  User Facing

  • Consolidate all component packages into a single package
  • Remove all deprecated components and APIs
  • Simplify the Changelogs for all v2 releases

  Infrastructure

  • Simplify the repo infrastructure and release process
  • Migrate from jest to vitest
  • Migrate from tsup to custom rollup setup for better bundling strategy

Minor Changes

• #8121 170198f Thanks @kkieninger! - ### Fixed

  • Fix hard-coded z-index for Menu in favor of one defined from the theme
  • Fix problem with leading and trailing spaces when getting initials for the
    Avatar component
  • Suppress unnecessary re-renders of Checkbox and Radio component

  Added

  • Add CSS accentColor property to style props
  • Add support for asChild in chakra factory
  • Export toastStore from toast component
  • Upgrade framer-motion to allow for skipAnimations
  • Add component namespace to reduce imports and provide better composition
  • Modal, Drawer: Add default preserveScrollBarGap

  Changed

  Redesign the component themes and anatomy

• #8393 623e558 Thanks @segunadebayo! - - Integrate Ark UI components to reduce maintenance surface.

  • Add FileUpload component
  • Remove trigger=hover in favor of HoverCard
  • Replace Tooltip, Popover and HoverCard with those from Ark UI

• #8218 a89c598 Thanks @segunadebayo! - Add support for custom theme conditions or pseudo props via theme.conditions

  // theme.ts
  
  const theme = extendTheme({
    conditions: {
      _closed: "[data-state='closed']", // pseudo prop
    },
  });

  This allows you to use the pseudo prop in your components

  <Box data-state="closed" _closed={{ bg: "red.200" }}>
    This box is closed
  </Box>

  For TypeScript users, you need to use the Chakra CLI to generate the types
  for your custom conditions.

  pnpm chakra-cli tokens src/theme/index.ts

• #8218 a89c598 Thanks @segunadebayo! - Add support for _open and _closed pseudo props for styling their respective
  selectors.

  • _open: &[data-state=open], &[open]
  • _closed: &[data-state=closed]
  • _groupOpen: [data-group][data-state=open] &
  • _groupClosed: [data-group][data-state=closed] &

  Extend the existing pseudo props to support new selectors`

  • _placeholder now supports &[data-placeholder]
  • _placeholderShow now supports &[data-placeholder-shown]
  • _fullscreen now supports &[data-fullscreen]
  • _empty now supports &[data-empty]
  • _expanded now supports &[data-state=expanded]
  • _checked now supports &[data-state-checked]

@chakra-ui/docs@2.1.7

Patch Changes

• Updated dependencies [170198f, 7b6e66a, 623e558, a89c598, a89c598]:
  • @chakra-ui/react@3.0.0
  • @chakra-ui/cli@2.4.1

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
chakra-ui-storybook	✅ Ready (Inspect)	Visit Preview	May 10, 2024 8:34pm
chakra-ui-website	✅ Ready (Inspect)	Visit Preview	May 10, 2024 8:34pm