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

[renovate]

Note: This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
@chakra-ui/react (source)	2.10.9 -> 3.30.0

---

Release Notes

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

v3.30.0

Compare Source

Minor Changes

• #​10425
  0168a04
  Thanks @​Adebesin-Cell! - - Splitter
  [NEW]: Introduce new resizable splitter component

  <Splitter.Root panels={[{ id: "a" }, { id: "b" }]}>
    <Splitter.Panel id="a">Panel A</Splitter.Panel>
    <Splitter.ResizeTrigger id="a:b" />
    <Splitter.Panel id="b">Panel B</Splitter.Panel>
  </Splitter.Root>

• 7b9aa97
  Thanks @​segunadebayo! - ### Added

  • Carousel: Added autoSize prop for variable width/height slides

Changed

• useListCollection: initialItems now accepts readonly arrays
• Types: Exported InteractOutsideEvent, FocusOutsideEvent,
  PointerDownOutsideEvent types

Fixed

• Carousel: Fixed dragging after tab switch/scroll and mouse wheel scroll
  with allowMouseDrag

• Combobox:

  • Fixed onHighlightChange not firing when filtered to empty;
  • Fixed focus stealing in controlled mode
  • Removed problematic aria-hidden behavior

• File Upload: Fixed non-interactive children in dropzone not opening file
  picker

• Radio Group: Fixed inconsistent data-focus-visible/data-focus
  attributes; fixed indicator showing before rect resolved (with Tabs)

• Tabs: Fixed indicator showing before rect resolved (with Radio Group);
  fixed position not updating when inactive tabs resize

• 503e11a
  Thanks @​segunadebayo! - ### Added

  • Semantic Tokens: Add new border semantic token to all color palettes
    (gray.300/gray.700 for gray, color.500/color.400 for colored
    palettes) to improve outline component appearance

Changed

• Button, Badge, Tag, Checkbox: Update outline variants to use
  colorPalette.border instead of colorPalette.muted or global border
  token for better appearance, especially for non-gray color palettes.

  NOTE: All changes include CSS variable fallbacks to
  colorPalette.muted for backward compatibility.

Patch Changes

• fd15569
  Thanks @​segunadebayo! - - HoverCard,
  Tooltip, Popover: Fix arrow direction in RTL layouts

• 81ec4e7
  Thanks @​segunadebayo! - - TagsInput:
  Fix overflow issue where very long tags would overflow the container instead
  of truncating with ellipsis.

  • CheckboxGroup: Fix type issue where CheckboxGroupProps could not be
    passed to the CheckboxGroup component.

v3.29.0

Compare Source

Minor Changes

• #​10391
  1580aeb
  Thanks @​Adebesin-Cell! - feat: add
  carousel component

Patch Changes

• 69aabbf
  Thanks @​segunadebayo! - - Combobox:
  Refactor recipe for smarter padding management to prevent input text from
  overflowing unto triggers
  • CodeBlock: Add missing use client directive

v3.28.1

Compare Source

Patch Changes

• fad9a2e
  Thanks @​segunadebayo! - Fix CodeBlock right
  padding when scrolling long code lines horizontally

• 37d166a
  Thanks @​segunadebayo! - - Tabs:
  Refactor to use css variables for styling indicator (--tabs-indicator-bg )
  for better customization.

  • SegmentedControl: Refactor to use css variables for styling indicator
    (--segment-indicator-bg and --segment-indicator-shadow) for better
    customization.

• 7067c95
  Thanks @​segunadebayo! - Fix Shadow DOM and
  Web Component selector handling in globalCss. The :host,
  :host-context(), and ::slotted() pseudo-classes now correctly transform to
  top-level selectors with case-insensitive matching.

• c7060de
  Thanks @​segunadebayo! - Improve
  styled-system performance with multiple optimizations

  • Token cloning: Replace structuredClone() with efficient shallow clone
    (75x faster)
  • Memoization: Improve cache key generation with efficient hashing and LRU
    cache (1.4x faster baseline, up to 585x faster for cached operations)
  • Object allocation: Use singleton empty objects instead of creating new
    ones in hot paths
  • Array operations: Optimize responsive value normalization with for loops
    instead of reduce
  • Performance impact: Significant improvement in style computation speed
    with the memoization layer providing 100-500x gains for repeated operations

v3.28.0

Compare Source

Minor Changes

• #​10374
  e62bae7
  Thanks @​Adebesin-Cell! - Add new
  TagsInput component for entering multiple values as tags with features like
  tag creation, deletion, and keyboard navigation.

  import { Span, TagsInput } from "@​chakra-ui/react"
  
  export const TagsInputBasic = () => {
    return (
      <TagsInput.Root defaultValue={["React", "Chakra", "TypeScript"]}>
        <TagsInput.Label>Tags</TagsInput.Label>
        <TagsInput.Control>
          <TagsInput.Items />
          <TagsInput.Input placeholder="Add tag..." />
        </TagsInput.Control>
      </TagsInput.Root>
    )
  }

• bf31e2a
  Thanks @​segunadebayo! - - Checkbox

  • Fix issue where setting initial checked state to indeterminate doesn't
    work
  • Ensure api.checkedState returns the correct checked state
  • Collapsible
    • Add support for collapsedHeight and collapsedWidth props to control
      the dimensions of the collapsible content when in its collapsed state
    • Fix issue where dir prop value doesn't get applied correctly
    • Update the recipe styling as needed (when data-has-collapsed-size is
      set)
  • Combobox: Fix issue where controlled single-select combobox does not
    propagate its initial value to inputValue
  • Dialog, Popover: In modal mode, allow elements referenced by
    aria-controls to be included in the focus trap scope
  • Listbox: Fix issue where pressing Enter key when no highlighted item
    still calls event.preventDefault()
  • Number Input: Fix cursor jumping to end when typing in the middle with
    formatOptions like style: "currency"
  • Pagination: Add getPageUrl prop for generating href attributes when
    using pagination as links
  • Pin Input: Fix issue where keyboard shortcuts Cmd+Backspace and
    Cmd+Delete would insert "undefined" instead of clearing the field
  • Scroll Area
    • Fix horizontal scrollbar positioning on Safari in RTL mode
    • Fix issue where resize tracking was not observing the root element
  • Select: Fix accessibility violation where the required state was not set
    correctly on the trigger
  • Slider: Fix issue where slider continues dragging when disabled during
    drag operation
  • Switch: Fix issue where data-active is inconsistently applied when
    disabled state changes at runtime
  • Tabs: Refactor to use getBoundingClientRect() for precise indicator
    positioning

v3.27.1

Compare Source

Patch Changes

• e1774c8
  Thanks @​segunadebayo! - Expose
  Collapsible.Indicator component to provide visual indicator for collapsible
  state

• f9d66f4
  Thanks @​segunadebayo! - - CodeBlock

  • Fix issue in diff mode where the wrong lines were being highlighted
  • Fix highlight.js adapter to properly handle diff attributes for
    added/removed lines

• f26e863
  Thanks @​segunadebayo! - - Styled
  System:

  • Fix issue where bracket syntax for responsive styles didn't work in recipe
    variants

  // This now works correctly
  const recipe = defineRecipe({
    variants: {
      variant: {
        primary: {
          color: ["red", "green"], // ✅ Now converts to breakpoints
        },
      },
    },
  })

  • Improve style resolution performance

• #​10325
  3e6d1f7
  Thanks @​wo-o29! - Fix issue where refs don't
  support cleanup function (React 19 compatibility)

• #​10328
  451209e
  Thanks @​megos! - fix(table): ensure stickyHeader
  works with outline variant

• 56a4501
  Thanks @​segunadebayo! - Timeline: Add
  showLastSeparator variant to control visibility of the last separator

v3.27.0

Compare Source

Minor Changes

• 16fb3cc
  Thanks @​segunadebayo! - Enhanced
  composition types with comprehensive CSS property support

  Text Style Properties: Added these properties to theme.textStyles:

  • Basic properties (color, direction, font, fontFamily,
    fontFeatureSettings, fontKerning, fontLanguageOverride,
    fontOpticalSizing, fontPalette)
  • Typography properties (hangingPunctuation, hyphens,
    hyphenateCharacter, hyphenateLimitChars, lineBreak, quotes,
    overflowWrap, tabSize)
  • Text alignment (textAlign, textAlignLast, textCombineUpright,
    textJustify)
  • Text decoration (textDecorationSkip, textDecorationSkipBox,
    textDecorationSkipInk, textDecorationSkipInset,
    textDecorationThickness, textEmphasis)
  • Text formatting (textShadow, textStroke, textStrokeColor,
    textStrokeWidth, textUnderlineOffset, textUnderlinePosition,
    textWrap, textWrapMode, textWrapStyle)
  • Text layout (unicodeBidi, verticalAlign, whiteSpace, wordBreak,
    wordSpacing, writingMode)

  Layer Style Properties: Added these properties to theme.layerStyles:

  • Layout properties (aspectRatio, display, contain, contentVisibility,
    isolation)
  • Visual effects (clipPath, mixBlendMode, maskClip, maskComposite,
    maskImage, maskMode, maskOrigin, maskPosition, maskRepeat,
    maskSize)
  • Modern properties (objectFit, objectPosition, pointerEvents, resize,
    visibility, willChange)
  • Border properties (borderImage, borderImageOutset, borderImageRepeat,
    borderImageSlice, borderImageSource, borderImageWidth)
  • Overflow properties (overflow, overflowX, overflowY)

Patch Changes

• c741fe9
  Thanks @​segunadebayo! - - CodeBlock:
  Fix issue where Line numbers display incorrectly when meta.wordWrap is true
  in code blocks

  • Hover Card: Change default delay values for hover card to improve
    accessibility.
    • openDelay: from 700ms to 600ms
  • Tooltip: Change default delay values for tooltip to improve
    accessibility.
    Learn more
    • openDelay: from 1000ms to 400ms
    • closeDelay: from 500ms to 150ms
  • Menu
    • Fix issue where keyboard activation of menu items with target="_blank"
      would open two tabs
    • Fix issue where hovering a partially visible item with pointer causes it
      to scroll into view
  • Combobox: Add alwaysSubmitOnEnter prop to allow forcing the form to be
    submitted immediately on Enter press.

• #​10312
  6189068
  Thanks @​itushh! - - CodeBlock: Allow
  horizontal scrolling when code block overflows

v3.26.0

Compare Source

Minor Changes

• b9eede5
  Thanks @​segunadebayo! - - Listbox
  [New]: Add new component with support for single/multi-select, grouping,
  virtualization, controlled state, icons, descriptions, and accessibility
  features.

  This component can be used to build command palettes, dropdowns with search,
  and much more.

  <Listbox.Root collection={frameworks} width="320px">
    <Listbox.Label>Select framework</Listbox.Label>
    <Listbox.Content>
      {frameworks.items.map((framework) => (
        <Listbox.Item item={framework} key={framework.value}>
          <Listbox.ItemText>{framework.label}</Listbox.ItemText>
          <Listbox.ItemIndicator />
        </Listbox.Item>
      ))}
    </Listbox.Content>
  </Listbox.Root>

  • Hover Card: Add support for disabled prop
  • Select, Menu: Fix issue where disabled items could be reached via
    typeahead
  • Color Picker: Fix issue where color picker was not working correctly in
    RTL mode
  • Number Input
    • Omit the input pattern when formatOptions is provided. This prevents
      native pattern validation from conflicting with formatted values (e.g.,
      currency or percent).
    • Handle empty values consistently across all format options.
    • Add data-scrubbing attribute to the number input parts.

Patch Changes

• b9eede5
  Thanks @​segunadebayo! - CodeBlock: Add
  configurable theme support and sync loading for Shiki adapter

  • Theme configuration is now required - The theme property must be
    explicitly provided to createShikiAdapter
  • Removed hard-coded theme fallbacks - Missing themes now throw
    descriptive errors
  • Optional sync loading with loadSync method for better performance

  // Before
  const adapter = createShikiAdapter({
    async load() { /* ... */ },
  })
  
  // After
  const adapter = createShikiAdapter({
    async load() { /* ... */ },
    theme: {
      light: "github-light",
      dark: "github-dark",
    },
  })

v3.25.0

Compare Source

Minor Changes

• #​10254
  3fb9d7c
  Thanks @​segunadebayo! - Add new scroll area
  component

  <ScrollArea.Root>
    <ScrollArea.Viewport>
      <ScrollArea.Content>{/* Scrolling content */}</ScrollArea.Content>
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar>
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>

Patch Changes

• d3a1064
  Thanks @​segunadebayo! - Fix nested token
  override issue during theme merging

  const defaultConfig = {
    theme: {
      tokens: {
        colors: {
          black: { value: "#​000000" },
        },
      },
    },
  }
  
  const userConfig = {
    theme: {
      tokens: {
        colors: {
          black: {
            100: { value: "#EE0F0F" },
            200: { value: "#CC0C0C" },
          },
        },
      },
    },
  }
  
  // Before: This would return undefined
  const system = createSystem(defaultConfig, userConfig)
  system.token("colors.black.100") // undefined
  
  // After: This will return merged correctly, preserving the default value
  system.token("colors.black.100") // "#EE0F0F"
  system.token("colors.black.200") // "#CC0C0C"
  system.token("colors.black") // "#​000000"

• #​10244
  9501179
  Thanks @​isBatak! - - System: Implement
  preset for table border-spacing property and improve documentation

  • Menu
    • Fix issue where onCheckedChange could be called twice on checkbox or
      radio item
    • Add data-state attribute for context menu trigger
    • Fix context menu positioning bug where reopening at the same coordinates
      fails to reposition
  • Radio Group: Fixed issue where arrow key navigation doesn't apply
    data-focus-visible on the newly focused item.
  • Highlight: Add exactMatch prop that enables whole-word matching using
    regex word boundaries.

v3.24.2

Compare Source

Patch Changes

• 333b063
  Thanks @​segunadebayo! - Fix issue where
  using asChild with invalid child elements or React.lazy components would
  throw an error.

  This issue more commonly occurs when composing with Next.js Link
  component.

  import { Breadcrumb } from "@​chakra-ui/react"
  import Link from "next/link"
  
  export default function Page() {
    return (
      <Breadcrumb.Root>
        {/* 🧨 Throws an error */}
        <Breadcrumb.Link asChild>
          <Link href="#">aaaa</Link>
        </Breadcrumb.Link>
      </Breadcrumb.Root>
    )
  }

v3.24.1

Compare Source

Patch Changes

• e81a6ae
  Thanks @​segunadebayo! - Provide a way to
  exclude components from prose styling by using not-prose

• 9b7bf1d
  Thanks @​segunadebayo! - Fix issue where
  _fullscreen returns the wrong css selector

v3.24.0

Compare Source

Minor Changes

• #​10164
  79971c0
  Thanks @​segunadebayo! - Add new codeblock
  component with support for highlight.js and shiki.

  <CodeBlock.AdapterProvider value={shikiAdapter}>
    <CodeBlock.Root code="console.log('Hello, world!')" language="tsx">
      <CodeBlock.Content>
        <CodeBlock.Code>
          <CodeBlock.CodeText />
        </CodeBlock.Code>
      </CodeBlock.Content>
    </CodeBlock.Root>
  </CodeBlock.AdapterProvider>

Patch Changes

• #​10199
  5e7831f
  Thanks @​ponharu! - fix: check if separator is
  a valid React element

v3.23.0

Compare Source

Minor Changes

• 86ca96a
  Thanks @​segunadebayo! - - System: Add
  unstyled prop support to compound component children to opt-out of recipe
  styles per component.

  <Accordion.Root defaultValue={["a"]}>
    <Accordion.Item value="a">
      {/* Opt-out of recipe styles */}
      <Accordion.ItemTrigger unstyled bg="red.500" />
      <Accordion.ItemContent>
        <Accordion.ItemBody />
      </Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.Root>

  • Group: Add support changing group gap globally via --group-gap CSS
    variable

Patch Changes

• dd3af62
  Thanks @​segunadebayo! - - Tree View

  • Fixed issue where tree view doesn't scroll into view when content overflows
  • Fix issue where the filter method completely deletes the children key from
    the node when there are no matching children
  • File Upload
    • Add support for programmatically controlling the accepted files via
      acceptedFiles and defaultAcceptedFiles
    • Export FileError, FileMimeType, and FileRejection types and fix
      validation issues

• dc02076
  Thanks @​segunadebayo! - Fix HTML semantic
  structure for Breadcrumb.Ellipsis component by changing the underlying
  element from <span> to <li>.

  // Before: <span> inside <ol> (invalid HTML)
  <Breadcrumb.List>
    <Breadcrumb.Ellipsis /> {/* rendered as <span> */}
  </Breadcrumb.List>
  
  // After: <li> inside <ol> (valid HTML)
  <Breadcrumb.List>
    <Breadcrumb.Ellipsis /> {/* now renders as <li> */}
  </Breadcrumb.List>

• 4da48e3
  Thanks @​segunadebayo! - - Tabs: Export
  missing types

  • Hooks: Export entrypoint for better tree-shaking
    @chakra-ui/react/hooks
  • Theme: Expose smaller bits of the theme in the entrypoint for better
    tree-shaking @chakra-ui/react/theme. We now expose recipes,
    slotRecipes, breakpoints, keyframes, textStyles, layerStyles,
    animationStyles, globalCss, cssVarsPrefix, cssVarsRoot,
    semanticTokens, tokens as dedicated modules.
  • Dialog: Use dvh and dvw units instead of vh and vw to
    dynamically adjust to viewport size changes.
  • Native Select: Ensure height is consistent with input and select across
    sizes.

v3.22.0

Compare Source

Minor Changes

• #​10111
  32967aa
  Thanks @​segunadebayo! - Add new TreeView
  component that is used to represent hierarchical data in a tree structure.

Patch Changes

• #​10126
  ca40993
  Thanks @​isBatak! - - Clipboard: Fix issue
  where clipboardAnatomy was not exported from @chakra-ui/react/anatomy
  • Combobox
    • Expose reason to onOpenChange and onInputValueChange callbacks
    • Expose api.clearHighlightedValue function to clear highlighted value
  • Toast: Fix issue where toast title or description could not accept
    React element
  • Progress: Improve valueAsString formatting
  • Select
    • Select highlighted item only if it exists in the collection
    • Expose api.clearHighlightedValue function to clear highlighted value
  • ClientOnly: Support children as a function

v3.21.1

Compare Source

Patch Changes

• 8ddeb0b
  Thanks @​segunadebayo! - - Popover:
  Fixed issue where onOpenChange could be called twice when controlled

  • Combobox
    • Fixed issue where onInputValueChange could be called twice when
      selecting an item
    • Fixed issue where combobox with allowCustomValue: true used within in a
      form requires two enter keypress to submit
  • Progress
    • Fix issue where setting orientation to vertical don't work
    • Fix issue where setting defaultValue to null doesn't show
      indeterminate state
  • Toast: Fix issue where app crashes when toaster.promise is called
    without loading option. The loading option is now required. A warning will
    be logged if it is not provided
  • Combobox, Select, Listbox: Fix issue where rehydrating defaultValue or
    value after fetching items doesn't update the valueAsString

• #​10119
  6cf8cc6
  Thanks @​isBatak! - - improve Drawer recipe to
  better support conditional variants.

  • add Drawer conditional variants example to the docs and storybook.

• #​10101
  2b4fa6d
  Thanks @​isBatak! - - Select: Export missing
  SelectRootComponent type export

• d7914ad
  Thanks @​segunadebayo! - Fix inconsistent
  handling of null and undefined for skipping breakpoints using array syntax

v3.21.0

Compare Source

Minor Changes

• 3df43ba
  Thanks @​segunadebayo! - Add support new
  entrypoint for /theme which allows for incremental loading of component
  recipes to avoid bloating the theme with unused components.

  This is mostly for bundle size optimization.

  For example, if you want just the button recipe to be included in your
  bundle, you can cherry-pick the recipe you need like this:

  import { createSystem, defaultBaseConfig } from "@​chakra-ui/react"
  import { buttonRecipe } from "@​chakra-ui/react/theme"
  
  export const system = createSystem(defaultBaseConfig, {
    theme: {
      recipes: {
        button: buttonRecipe,
      },
    },
  })

Patch Changes

• 010f256
  Thanks @​segunadebayo! - - File Upload:
  Prevented undefined in acceptedFiles when no files accepted
  • Select: Fixed issue where highlighted item could be cleared when
    navigating up/down the list with keyboard
  • Tabs: Fixed issue where tabs with links should not trigger tab change
    upon cmd/middle click
  • Menu: Fixed issue where Menu.ItemText could not be used with
    Menu.Item

v3.20.0

Compare Source

Minor Changes

• 65020dd
  Thanks @​segunadebayo! - - System: Allow
  undefined for optional properties in CSS and recipe types

  • Color Picker: Fixed issue where value change end event is invoked when
    committing via an input.

  • Toast: Fixed issue where calling toast.remove() without an id shows a
    TypeScript error.

  • Field: Fixed issue where helper text and error text could not be
    detected in shadow DOM environments.

  • Slider

    • Fixed issue where minStepsBetweenThumbs isn't computed correctly when
      interacting with pointer or keyboard.
    • Fixed issue where Shift + ArrowRight set value to 0 instead of max
      when step is too large (e.g. 20).
    • Fixed issue where onValueChangeEnd doesn't return the latest value when
      dragging very fast.
    • Fixed issue where slider could throw a error when rendered in an popover
      or dialog.

  • File Upload: Added support for transforming uploaded files via
    transformFiles context property.

  • Combobox: Fixed issue where onInputValueChange doesn't get called when
    autoFocus is set to true

  • Pin Input: Fixed issue where input padding could cause clipping of the
    text when fontSize is increased.

Patch Changes

• #​10081
  c2f650b
  Thanks @​isBatak! - - export
  CheckboxRootProviderProps type

• #​10075
  63c267f
  Thanks @​isBatak! - - export Quote typography
  component and its types

v3.19.2

Compare Source

Patch Changes

• #​10059
  a289c3c
  Thanks @​isBatak! - - System: add explicit
  undefined to generated types to support TS exactOptionalPropertyTypes

• #​10064
  10d0a8e
  Thanks @​mhsattarian! - - Drawer: Fix
  drawer close animation in RTL

  • Button
    • Fix layout issue when in loading state with icons by using
      display: contents and visibility: hidden
    • Add data-loading attribute when loading is true so allow styling
      loading state with _loading pseudo prop

v3.19.1

Compare Source

Patch Changes

• aa9c2b0
  Thanks @​segunadebayo! - - System: Fix
  issue where some svg element props tend to be treated as style props
  • Checkbox: Use consistent cursor for checkbox and radio group

v3.19.0

Compare Source

Minor Changes

• #​9464
  d860d48
  Thanks @​segunadebayo! - - [New]
  Combobox Add combobox component for autocomplete text entry.
  • Progress Circle: Make progress circle transition smoother.

v3.18.0

Compare Source

Minor Changes

• e91ec7e
  Thanks @​segunadebayo! - - DownloadTrigger
  [New] Add DownloadTrigger component to help download file contents.

  • System

    • Fix issue where passing d prop to chakra.path adds it to styles not as
      a direct attribute.
    • Fix issue where responsive semantic tokens did not get applied.

  • Select: Fix issue where indicator group doesn't align correctly in RTL
    layouts.

v3.17.0

Compare Source

Minor Changes

• #​9977
  ad8cc44
  Thanks @​seongminn! - - Breadcrumb: Prevent
  screen reader from reading the separator

  • Toast: Added toast queuing when the max limit is reached:

    • New toasts were queued instead of dropped
    • Queued toasts were shown when space became available
    • Queue cleared when all toasts were removed

  • SegmentGroup: Fix issue where disabled prop was not being applied to
    SegmentGroup.Items

  • RatingGroup: Fix issue where half-filled icons were not being displayed
    correctly in RTL

  • Collapsible: Fixed issue in React.js <= v18.x where collapse animation
    might not work as expected

v3.16.1

Compare Source

Patch Changes

• 46075ba
  Thanks @​segunadebayo! - - Dialog,
  Drawer: Use correct z-index for dialog and drawer backdrop
  • SegmentGroup: Fix issue where orientation prop to SegmentGroup.Root
    doesn't work as expected

v3.16.0

Compare Source

Minor Changes

• 529244d
  Thanks @​segunadebayo! - - Global CSS:
  Improve text selection contrast

  • System

    • Fix issue where borderEnd shorthand was not working despite
      borderStart being present
    • Fix issue where system.cva return type was incorrect
    • Soften the focus ring for all color palettes

  • Dialog, Drawer: Fix issue where z-index was not being applied
    correctly

  • [Beta] createOverlay: Add createOverlay utility for programmatically
    controlling overlay components (Dialog, Drawer, etc.)

v3.15.1

Compare Source

Patch Changes

• e3d7db7
  Thanks @​segunadebayo! - - Fix issue where
  backdrop could overlap positioner when reopened quickly
  • Ensure types are consistent with React 19

v3.15.0

Compare Source

Minor Changes

• 2f4ea3b
  Thanks @​segunadebayo! - -
  useMediaQuery: Fix type signature to allow skipping the second argument

  • RadioCard: Fix accessibility issue due to html structure

  • Slider

    • Add support for origin: end to align the thumb to the end of the track.
    • Expose thumbSize as CSS variables in the root element. Can be useful for
      styling the slider.

  • Menu

    • Added onSelect event to the Menu.Item component.
    • Ensure menu items have unique IDs to improve accessibility and HTML
      validation.

v3.14.2

Compare Source

Patch Changes

• 87a072b
  Thanks @​segunadebayo! - - Fix potential
  import error from @zag-js/utils in @ark-ui/react

v3.14.1

Compare Source

Patch Changes

• 0eb769e
  Thanks @​segunadebayo! - - System: Fix
  issue where output of <system>.css(...) from Chakra UI can't be assigned to
  Interpolation<Theme> from @emotion/react.
  • General: Bump @ark-ui/react to latest version.

v3.14.0

Compare Source

Minor Changes

• 354eaa6
  Thanks @​segunadebayo! - Improve render
  performance by upgrading to the latest Ark UI v5.

  This brings a 1.5x–4x performance improvements across components. Learn
  more from the
  Ark UI v5 changelog.

v3.13.0

Compare Source

Minor Changes

• #​9797
  eba44a3
  Thanks @​segunadebayo! - - ColorPicker

  • Add support for ColorPicker.ChannelText component

  • Add ColorPicker.EyeDropper component that wraps IconButton

  • Add ColorPicker.Slider and ColorPicker.Input shortcut components to
    reduce LOC.

  • InputGroup

    • Export directly from the @chakra-ui/react package

  • Pagination

    • Add Pagination.Items shortcut component to render the number of pages
      based on the count and pageSize props.
    • Add Pagination.PageText component to render the current page and total
      pages.

v3.12.0

Compare Source

Minor Changes

• 7abe7e3
  Thanks @​segunadebayo! - - FileUpload:
  • Add FileUpload.FileText to render the list of uploaded file names.
  • Add FileUpload.Items shorcut component to render the list of uploaded
    files.
  • Add FileUpload.List shortcut component that combines FileUpload.Items
    and FileUpload.ItemGroup.

v3.11.0

Compare Source

Minor Changes

• 8789401
  Thanks @​segunadebayo! - - Accordion
  • Fix issue where Accordion.ItemTrigger doesn't apply textAlign: start
  • SegmentGroup
    • Add new SegmentGroup.Items shortcut component to render multiple
      SegmentGroup.Item components based on the items prop

v3.10.0

Compare Source

Minor Changes

• 11bdf77
  Thanks @​segunadebayo! - - Menu

  • Set the default children of Menu.Arrow to Menu.ArrowTip

  • HoverCard

    • Set the default children of HoverCard.Arrow to HoverCard.ArrowTip

  • Dialog, Drawer

    • Update recipe to include absolute positioning styles for close trigger,
      instead of relying on snippet styles.

v3.9.0

Compare Source

Minor Changes

• 52a97d0
  Thanks @​segunadebayo! - - Skeleton
  Bring back SkeletonCircle and SkeletonText components.

  • Switch

    • Transition background color when checked
    • Set the default children for Switch.Control to Switch.Thumb to
      reduce LOC for common use cases.

  • Checkbox

    • Set the default children for Checkbox.Control to Checkbox.Indicator
      to reduce LOC for common use cases.

  • NumberInput

    • Set the default children for NumberInput.Control to
      NumberInput.IncrementTrigger and NumberInput.DecrementTrigger to
      reduce LOC for common use cases.

  • QrCode

    • Set the QrCode.Frame component to QrCode.Pattern to reduce LOC for
      common use cases.

  • RatingGroup

    • Set the default children for RatingGroup.Control to the array of
      RatingGroup.Item components to reduce LOC for common use cases.

  • Slider

    • Add Slider.Marks component to render marks on the slider track. This is
      a closed composition of Slider.MarkerGroup and Slider.Marker to reduce
      LOC for common use cases.
    • Add Slider.Thumbs component to render thumbs on the slider track. This
      is a closed composition of Slider.Thumb to reduce LOC for common use
      cases.

  • PinInput

    • Add support for attached variant prop to render a pin input with
      attached inputs. This removes the need for the Group component to wrap
      the inputs.

v3.8.2

Compare Source

Patch Changes

• 91945b7
  Thanks @​segunadebayo! - Fix issue where
  mt alias to marginBlockStart instead of marginTop

• #​9712
  f733a87
  Thanks @​CerealeZ! - AspectRatio: Fix issue
  where css prop was not respected

v3.8.1

Compare Source

Patch Changes

• cdb9459
  Thanks @​segunadebayo! - - Fix performance
  regression from v3.5.x by reverting memoization logic
  • Add useMemo to provider components and styling hooks to avoid unnecessary
    recomputations

v3.8.0

Compare Source

Minor Changes

• fa5e966
  Thanks @​segunadebayo! - - Add new hooks
  useElementRect, useForceUpdate, useLiveRef,usePrevious and
  useSafeLayoutEffect
  • Add new FocusTrap component for trapping focus within a container

Patch Changes

• #​9616
  54a73a7
  Thanks @​mhsattarian! - - Breadcrumb: Fix
  issue where breadcrumb arrow don't flip in RTL
  • Snippets / Color Mode: Add LightMode and DarkMode components to
    force light and dark color mode in a subtree
  • Docs / Testing: Add testing guideline for Vitest
  • Group: Fix issue where Group component doesn't skip invalid children

v3.7.0

Compare Source

Minor Changes

• cb0ffc9
  Thanks @​segunadebayo! - - Avatar: Add
  support for passing name to the AvatarFallback to render the initials. If
  no name or children is passed, it'll render either the initials or a
  fallback icon.
  • Hooks: Add useConst and useUpdateEffect hooks from v2.
  • Wrap: Bring back the Wrap component from v2.

v3.6.0

Compare Source

Minor Changes

• 04a1a07
  Thanks @​segunadebayo! - - Styled
  System:
  • Boost performance of style resolution by removing JSON.stringify in memo
    function and avoid memoizing non-primitive arguments.
  • Connect assets token to backgroundImage and listStyleImage css
    properties.
  • Menu, Tooltip: Set lazyMount and unmountOnExit to true in the
    Root component to improve initial rendering performance.
  • AbsoluteCenter: Fix issue where axis doesn't work in RTL mode.
  • Snippets / QRCode: Remove snippet in favor of compound component
    pattern.
  • List: Fix issue where list items don't wrap correctly.
  • Stat: Bring back StatGroup component from v2.
  • Close Button: Add CloseButton component.

v3.5.1

Compare Source

Patch Changes

• 34d46e3
  Thanks @​segunadebayo! - - Button: Fix
  issue where button is not disabled when loading props is passed
  • ColorPicker, HoverCard, Tooltip: Fixed intermittent placement shifts
    caused by updates to the data-placement attribute
  • Snippets / Alert: Deprecate the Alert snippet in favor of using the
    Alert component directly from @chakra-ui/react.

v3.5.0

Compare Source

Minor Changes

• 30a12d0
  Thanks @​segunadebayo! - - Native Select
  • Fix issue where disabled and invalid props were not being passed to the
    NativeSelectField component.
  • Persist error focus ring when invalid prop is set.
  • Fix issue where native select isn't readable in dark mode for Windows/Linux
    devices.
  • [New] Loader: Add new Loader and LoaderOverlay components.
  • [New] Button Group: Add new ButtonGroup component similar to v2 for
    grouping similar buttons.
  • Button: Add loading and loadingText props to the Button component.
  • Snippets / Menu: Refactor checkbox item to fix rendering
  • Snippets / Button: Removed the button snippet in favor of built-in
    component.

v3.4.0

Compare Source

Minor Changes

• 375e05f
  Thanks @​segunadebayo! - - [New]
  Presence: Add component to ani

---

Configuration

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

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, 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 GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
website	Error			Dec 4, 2025 0:03am