fix(deps): update dependency @chakra-ui/react to v3

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@chakra-ui/react (source)	2.8.2 -> 3.2.0

---

Release Notes

chakra-ui/chakra-ui (@​chakra-ui/react)

v3.2.0

Compare Source

Minor Changes

• #​9130
  e5880fb
  Thanks @​segunadebayo! - - [Preview] Add new
  ColorPicker component to allow users pick a color in hsl, rgb, hsb formats.

  • Add new ColorSwatch component to preview a color.
  • Fix issue where mergeConfigs mutates the underlying configs passed to it.

v3.1.2

Compare Source

Patch Changes

• 65952d7
  Thanks @​segunadebayo! - - General: Fix
  issue where value change types were not re-exported from Ark UI

  • Layer Style: Fix issue where fill.surface layer style doesn't render
    the correct styles
  • Pagination: Fix issue where PaginationPageText did not render the
    correct page range

v3.1.1

Compare Source

Patch Changes

• #​9128
  0715e2c
  Thanks @​coverlv! - Fix issue where
  useBreakpointValue throws error if ssr is false

• #​9103
  1254769
  Thanks @​Newbie012! - - Checkbox: Fix issue
  where checkmark doesn't show on Safari

  • Alert: Fix issue where indicator icon is not visible on Safari
  • ClientOnly: Fix issue where returned the incorrect type leading to TS
    error like ClientOnly cannot be used as a JSX component.
  • Fieldset: Fix issue where anatomy is not exported
  • Timeline: Refactor variants such that it responds to colorPalette

v3.1.0

Compare Source

Minor Changes

• 9a27c2c
  Thanks @​segunadebayo! - - System: Fix
  issue where using as prop with logic based components doesn't work as
  expected.

  • DataList: Add support for bold variant.

  • Button: Tweak the horizontal padding when size is sm.

  • Snippets

    • Slider: Add showValue prop to render the text value of the slider.
    • Select
      • Add HiddenSelect to ensure it works in form submissions.
      • Fix type inference is lost when using SelectRoot component from
        snippet
      • Fix issue where form data is not populated when using native form
        element
    • ColorMode: Fix type error when using the latest next-themes.
    • Provider: Forward props to ColorModeProvider powered by next-themes
      for better customization.

  • Toggle: Add Toggle component for toggling between two states. It
    composes the Button component.

v3.0.2

Compare Source

Patch Changes

• 20b91bd
  Thanks @​segunadebayo! - - InputAddon:
  Fix issue with input addon not stretched correctly.
  • Snippets / Toaster: Improve toaster styling by adding
    width={{ md: "sm" }} to the toast root.

v3.0.1

Compare Source

Patch Changes

• c0020c9
  Thanks @​segunadebayo! - Fix issue where
  using keyframe interpolation in animation prop doesn't work

• 7d4f898
  Thanks @​segunadebayo! - Fix issue where
  scrollBehavior=outside doesn't allow scrolling outside the dialog content

v3.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

• #​8815
  806be96
  Thanks @​isBatak! - Remove the @chakra-ui/hooks
  package in favour of using dedicated, robust libraries like react-use and
  usehooks-ts

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

• 192c6b1
  Thanks @​segunadebayo! - Add new fieldset
  component

• 07b04b1
  Thanks @​segunadebayo! - - [NEW]: Add
  RatingGroup, SegmentControl

  • [NEW]: Add EmptyState component for empty states
  • [NEW]: Add RadioCard and CheckboxCard components for card-based
    selection

• #​8568
  5fd993b
  Thanks @​isBatak! - Add Collapsible recipe with
  default open/close animation

• 3fc49ca
  Thanks @​segunadebayo! - Add support for
  FormatNumber and FormatByte components

• 3ccbbdf
  Thanks @​segunadebayo! - ### Motion Styles

  Add support for motionStyle props.

  The idea is to pair them with text styles and layer styles to create this
  three-part mixin that can make your styles a lot cleaner.

  Motion styles focus solely on animations, allowing you to orchestrate
  animation properties.

  import { defineMotionStyles } from "@​chakra-ui/react"
  
  export const motionStyles = defineMotionStyles({
    "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",
        },
      },
    },
  })

Built-in Keyframe Animations

Chakra new provides built-in keyframe animations that you can use to create
your own motion styles.

Slide: slide-from-top, slide-from-bottom, slide-from-left,
slide-from-right, slide-to-top, slide-to-bottom, slide-to-left,
slide-to-right

Slide Full: slide-from-top-full, slide-from-bottom-full,
slide-from-left-full, slide-from-right-full, slide-to-top-full,
slide-to-bottom-full, slide-to-left-full, slide-to-right-full

Fade: fade-in, fade-out

Scale: scale-in, scale-out

You can compose these animations using the animationName property in your
motion styles to create really cool animations. No JS required.

<Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>

• 3ccbbdf
  Thanks @​segunadebayo! - Add support for
  built-in layer styles to help prototype faster with automatic dark mode.
  Paired with colorPalette, you can create beautiful designs with little code
  that adapts to dark mode automatically.

  Fill Layer Styles: fill.muted, fill.solid, fill.surface

  <Box layerStyle="fill.muted" colorPalette="red">
    This is a subtle fill layer
  </Box>

  Border Layer Styles: outline.muted, outline.solid

  <Box layerStyle="outline.muted" colorPalette="red">
    This is a subtle outline layer
  </Box>

  Indicator Styles: indicator.top, indicator.end, indicator.bottom,
  indicator.start

  <Box layerStyle="indicator.top" colorPalette="red">
    This is a top indicator layer
  </Box>

  Disabled Styles: disabled

  <Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>

  You can combine these layer styles to create very complex designs with little
  code.

  <Box
    layerStyle="fill.muted"
    _hover={{ layerStyle: "outline.solid" }}
    colorPalette="red"
  >
    This is a complex layer
  </Box>

• de9c0a0
  Thanks @​segunadebayo! - Add DataList
  component

• e77a9b8
  Thanks @​segunadebayo! - - Add new Timeline
  component to presenting chronological information or activities.

  • Trim generated className in the DOM.
  • Add neutral status to Alert component

• 763329e
  Thanks @​segunadebayo! - Add preset and
  preset-base entrypoints.

  • The preset entrypoint exposes the default theme and recipes for Chakra.
  • The preset-base entrypoint exposes the base utilities and conditions used
    internally.

• 925cfd9
  Thanks @​segunadebayo! - Add ActionBar,
  Status, Rating, Pagination components

• e9a1537
  Thanks @​segunadebayo! - BREAKING: Change
  signature of useRecipe, useSlotRecipe, createSlotRecipeContext

createSlotRecipeContext

Before:

const { withProvider, withContext } = createSlotRecipeContext("accordion")

After:

const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})

useSlotRecipe

Before:

const recipe = useSlotRecipe("accordion")

After:

const recipe = useSlotRecipe({ key: "accordion" })

• 3908155
  Thanks @​segunadebayo! - Rename
  createStyleContext to createSlotRecipeContext

• c654ee3
  Thanks @​segunadebayo! - Improve performance
  of styled components to avoid unneeded re-renders.

• edec8f7
  Thanks @​segunadebayo! - Add clipboard
  composition

• 5093e18
  Thanks @​segunadebayo! - Add cursor pointer
  to button

• 4c6838c
  Thanks @​segunadebayo! - - Rename onLabel
  and offLabel to trackLabel

  • Add support for thumbLabel prop for rendering an icon within thumb

• #​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

• 945a777
  Thanks @​segunadebayo! - BREAKING: Integrate
  Ark v4. This mostly affects the custom select component that requires the use
  of createListCollection now.

• c26acf0
  Thanks @​segunadebayo! - Add support for
  cursor token type

• 55c0839
  Thanks @​segunadebayo! - Move the Prose
  component to snippets so it can be customized by the user.

• 952647a
  Thanks @​segunadebayo! - Add CardTitle and
  CardDescription components

• f4762bf
  Thanks @​segunadebayo! - Add support for
  merging multiple system configs into one within createSystem

  Before:

  const config = mergeConfigs(defaultConfig, customConfig)
  export const system = createSystem(config)

  After:

  const system = createSystem(defaultConfig, customConfig)

• #​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

• c2f45ca
  Thanks @​segunadebayo! - Rename
  Fieldset.Control to Fieldset.Content

• 1738b90
  Thanks @​segunadebayo! - - Icon: Set
  asChild to true by default to reduce repetition

  • All components

    • Ensure consistent sizing convention (units of 4px). Smaller elements start
      at 20px, larger elements start at 40px
    • Ensure focus ring matches the colorPalette

  • Input, Textarea: Rename filled variant to subtle

  • Tags: Add new Tag.StartElement and Tag.EndElement components to allow
    for easier styling of the start and end elements

• 3ccbbdf
  Thanks @​segunadebayo! - Redesign Stepper
  component. It's now called Steps and manages the state internally, no need
  to use useSteps anymore.

  We've also improved the accessibility of the component by leveraging the tabs
  pattern and adding the required ARIA attributes.

  <Steps.Root defaultIndex={0} count={2}>
    <Steps.List>
      <Steps.Item index={0}>
        <Steps.Trigger>
          <Steps.Title>Step 1</Steps.Title>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
  
      <Steps.Item index={1}>
        <Steps.Trigger>
          <Steps.Title>Step 2</Steps.Title>
        </Steps.Trigger>
        <Steps.Separator />
      </Steps.Item>
    </Steps.List>
  
    <Steps.Content index={0}>Step 1</Steps.Content>
    <Steps.Content index={1}>Step 2</Steps.Content>
    <Steps.CompleteContent>Complete</Steps.CompleteContent>
  </Steps.Root>

  Using the CLI, you can also scaffold an already composed stepper component

  chakra composition add steps

• 548470d
  Thanks @​segunadebayo! - Add custom select
  from Ark UI and design recipe

• 8b110da
  Thanks @​segunadebayo! - Support inlining
  recipe in createRecipeContext and createSlotRecipeContext for better DX
  when shipping libraries based on Chakra.

  This reduces the need for using the Chakra CLI to generate types for custom
  components.

• 05793a2
  Thanks @​segunadebayo! - - Make gray the
  default color palette.

  • Change avatar sm size to 36px for consistency.
  • Move bg for outline component variants.

• 43f2c7d
  Thanks @​segunadebayo! - - CheckboxCard
  [New]

  Add support for a new CheckboxCard component that can be used to render a
  card with a checkbox.

  <CheckboxCard.Root>
    <CheckboxCard.Control>
      <Stack gap="0" flex="1">
        <CheckboxCard.Label>Checkbox</CheckboxCard.Label>
        <Text>Some description</Text>
      </Stack>
  
      <CheckboxCard.HiddenInput />
      <CheckboxCard.Indicator />
    </CheckboxCard.Control>
  </CheckboxCard.Root>

  • Checkmark [New]

    Add new checkmark component for rendering a static checkmark icon with the
    checked, disabled, and indeterminate state baked in.

  <Stack>
    <Checkmark />
    <Checkmark checked />
    <Checkmark indeterminate />
    <Checkmark disabled />
    <Checkmark checked disabled />
    <Checkmark indeterminate disabled />
  </Stack>

  • EmptyState [New]

    Add new EmptyState component for rendering an empty state message with a
    title, description, and optional action button.

  <EmptyState.Root>
    <EmptyState.Content>
      <EmptyState.Indicator>
        <HiTemplate />
      </EmptyState.Indicator>
  
      <VStack textAlign="center">
        <Text fontWeight="medium">No template found</Text>
        <Text fontSize="sm" color="fg.muted">
          Try creating a new template with the button below
        </Text>
      </VStack>
  
      <Button variant="outline">
        <HiPlus /> Create Template
      </Button>
    </EmptyState.Content>
  </EmptyState.Root>

• e119ae9
  Thanks @​segunadebayo! - Rename
  motionStyle to animationStyle for better intuitiveness

• #​8575
  d4522d9
  Thanks @​isBatak! - Align theme recipe name with
  panda

• 3ccbbdf
  Thanks @​segunadebayo! - Add support for
  focusRing and focusRingColor style props that allow to quickly style focus
  visible state of form controls.

  The focus ring values can be either extend or contain

  <Box asChild focusRing="extend" focusRingColor="pink.500">
    <input type="text" />
  </Box>

• 4ff153f
  Thanks @​segunadebayo! - Speed up
  intellisence for style props, and add support for strictTokens in the CLI.

• 47a8a9e
  Thanks @​segunadebayo! - - Add inherit to
  Spinner recipe size

  • Refactor button and link button snippets

• b6d1d0d
  Thanks @​segunadebayo! - Simplify spinner
  component to use less custom props.

  • Removed emptyColor, prefer to use --spinner-track-color
  • Removed speed, prefer to use animationDuration
  • Removed thickness, prefer to use borderWidth

• #​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]

• #​8569
  eb26857
  Thanks @​isBatak! - Fix the boxSize type to
  allow number values.

• 47b3b5a
  Thanks @​segunadebayo! - Support array in
  conditions object. This matches the API in Panda CSS and allow users to define
  complex selectors like media hover queries.

• e4f2df0
  Thanks @​segunadebayo! - Add Prose
  component to help style markdown content.

• c243698
  Thanks @​segunadebayo! - - Add
  referrerPolicy to Avatar component.

  • Add CheckboxDescription, CheckboxCardDescription and RadioCardDescription
  • Swap muted and subtle color tokens

Patch Changes

• be98566
  Thanks @​segunadebayo! - Fix checkbox and
  toast on mobile

• c941971
  Thanks @​segunadebayo! - - Convert Tabs
  component to use Ark UI

  • Convert NumberInput to use Ark UI

• #​8795
  4408573
  Thanks @​TylerAPfledderer! - Adds style
  prop names to LayerStyleProperty union type

• 83366c4
  Thanks @​segunadebayo! - - Fix regression in
  mergeConfigs

  • Decompose Field components into smaller components, which can be
    optionally used with Field

    • Label which is a generic label component
    • ErrorMessage which is a generic error message component
    • HelpText which is a generic help text component

  • Refactor components to use Ark UI: Avatar, Progress, CircularProgress,
    PinInput

• 0ae054d
  Thanks @​segunadebayo! - Fix issue where
  hideFrom and hideBelow doesn't show any autocompletions

• 0a03bcc
  Thanks @​segunadebayo! - - Fix circular
  progress element types

  • Ensure consistent exports in components

• #​8617
  7e9fbf0
  Thanks @​isBatak! - Refactor text-styles to use
  tokens instead of raw values.

• 6d4cbbe
  Thanks @​segunadebayo! - Fix ES module
  interop for @​emotion/is-prop-value that makes Jest throw error.

• #​8857
  fdc2b9b
  Thanks @​stevensecreti! - update mapObject
  util to not call fn provided on nullish values

• 788f493
  Thanks @​segunadebayo! - Fix issue where
  media query css order is inconsistent with v2

• 87cf70c
  Thanks @​segunadebayo! - Revert text recipe
  to prevent color regressions

• #​8740
  d5a225f
  Thanks @​Pagebakers! - Use correct extension
  for ESM exports

• #​8905
  807a581
  Thanks @​stevensecreti! - Added transform
  function to backgroundClip to appropriately handle 'text' value

• #​8739
  651561b
  Thanks @​Pagebakers! - Added /anatomy to
  exports

• #​8792
  4dd77ec
  Thanks @​TylerAPfledderer! - Updates the
  exposed list of slot anatomy to ensure all anatomy is included for use in
  type-checking extend recipe configs.

• bffb68f
  Thanks @​segunadebayo! - - Pagination:
  Fix issue page props were not forwarded correctly.

  • PinInput: Fix issue mask props were not forwarded correctly.

• #​8601
  1867d66
  Thanks @​isBatak! - Fix blur property token
  conversion to CSS variable.

• 32a454d
  Thanks @​segunadebayo! - Add missing
  use client directives to several components

• #​8854
  388716d
  Thanks @​codebutler! - Fix issue where target
  was not passed to link overlay

• #​8475
  9224f4e
  Thanks @​ryo-manba! - Add aria-current
  attribute to stepper

---

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
portfolio	❌ Failed (Inspect)			Nov 23, 2024 8:02am