chakra-ui/chakra-ui @chakra-ui/react@3.0.0-next.0

on GitHub

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]

Patch Changes

• Updated dependencies []:
  • @chakra-ui/hooks@3.0.0-next.0
  • @chakra-ui/utils@3.0.0-next.0