template-ecommerce-webapp-nextjs fix: update chakra-ui monorepo to v3 (main) (major)

fix: update chakra-ui monorepo to v3 (main) (major)

Open renovate[bot] opened this issue 3 months ago • 1 comments

This PR contains the following updates:

Package	Change	Age	Confidence
@chakra-ui/cli	`2.1.8` -> `3.29.0`
@chakra-ui/react (source)	`2.4.1` -> `3.29.0`

Release Notes

chakra-ui/chakra-ui (@chakra-ui/cli)

`v3.27.1`

Compare Source

Patch Changes

#10368 62260a5 Thanks @tioluwani94! - Pro Blocks: Allow CLI to read new documentation blocks filtering

`v3.27.0`

Compare Source

Minor Changes

#10299 27b920a Thanks @segunadebayo! - Add new blocks command to add chakra pro blocks to your project.

This command requires valid Chakra Pro license and API key in the CHAKRA_UI_PRO_API_KEY environment variable.

Interactive block selection

npx @&#8203;chakra-ui/cli blocks add

Add all variants of a specific block

npx @&#8203;chakra-ui/cli blocks add hero

Add a specific variant of a block

npx @&#8203;chakra-ui/cli blocks add hero --variant "simple"

List available blocks

npx @&#8203;chakra-ui/cli blocks list

List blocks in a specific category

npx @&#8203;chakra-ui/cli blocks list --category "marketing"
```

`v3.21.1`

Compare Source

Patch Changes

517ba37 Thanks @segunadebayo! - Fix issue where typegen command fails silently with misleading console output when prettier exits with a formatting error

`v3.19.2`

Compare Source

Patch Changes

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

`v3.15.1`

Compare Source

Patch Changes

dc4915a Thanks @segunadebayo! - Improve CLI response when passing an unknown snippet id

`v3.6.0`

Compare Source

Patch Changes

07f2c56 Thanks @segunadebayo! - Fix issue where CLI doesn't properly check for existing files when adding snippets.

`v3.3.0`

Compare Source

Minor Changes

e5ecd91 Thanks @segunadebayo! - Add support for --tsx flag in the snippet add command to allow explicitly specifying tsx/jsx file generation.

`v3.2.2`

Compare Source

Patch Changes

#9254 6d4e7b6 Thanks @TinsFox! - Output the real version from package.json

`v3.2.1`

Compare Source

Patch Changes

c79b7bf Thanks @segunadebayo! - - Fix issue where npmDependencies for snippets were not auto-installed
- Support React Router 7 framework detection

`v3.2.0`

Compare Source

Minor Changes

069e39d Thanks @segunadebayo! - Add support for --all flag to add all snippets. By default, we only install a minimal/recommended set of snippets.

Recommended snippets: provider, avatar, button, checkbox, radio, input-group, slider, popover, dialog, drawer, tooltip, field

If you want to add all snippets, you can use the --all flag.

Patch Changes

a3ba8e6 Thanks @segunadebayo! - Fix issue where typegen doesn't work when CLI installed globally or run using npx

`v3.1.0`

Compare Source

Patch Changes

baa3cb1 Thanks @segunadebayo! - Fix issue where adding a snippet with --outdir still creates snippets a src/components/ui directory.

`v3.0.2`

Compare Source

Patch Changes

bfd9cac Thanks @segunadebayo! - Fix issue with vite setup where .mjs and mts files were not considered.
#9022 b40eb6b Thanks @Newbie012! - Fix issue where style props types show as any when using strictTokens

`v3.0.0`

Compare Source

Minor Changes

758f226 Thanks @segunadebayo! - Add support for composition command in CLI to import ready-made compositions for faster development experience.

Usage: chakra-ui composition [options] [command]

Add compositions to your project for better DX

Options:
  -h, --help                     display help for command

Commands:
  add [options] [components...]  Add a new composition for better DX
  list                           List all compositions
  help [command]                 display help for command

bfb68dc Thanks @segunadebayo! - Add eject command to import default theme into project
085cacd Thanks @segunadebayo! - Add support for installing required NPM dependencies for compositions
77fe01d Thanks @segunadebayo! - Change CLI name and command structure.
- Change the CLI name from chakra-cli to chakra.
- Change tokens command to typegen to better reflect its purpose since its generates types for more than just the tokens.
- Scaffold new composition command to help users scaffold new compositions easily. Compositions are snippets of Chakra UI component composition them easier to reuse across projects.
8fc7b49 Thanks @segunadebayo! - - Add support for conditional value in variant props.
- Add @default JSDoc comment for defaultVariants in generated types.
4ff153f Thanks @segunadebayo! - Speed up intellisence for style props, and add support for strictTokens in the CLI.
d50d72c Thanks @segunadebayo! - Rename compositions command to snippet for better intuitiveness
#8569 eb26857 Thanks @isBatak! - Fix the boxSize type to allow number values.
14b6a45 Thanks @segunadebayo! - Show the number of skipped snippets that already exists in outdir

Patch Changes

0eda15c Thanks @segunadebayo! - Set process setMaxListeners to improve watch mode
c074b58 Thanks @segunadebayo! - Fix issue where vite project throws due to config search
0f0ed76 Thanks @segunadebayo! - Fix regression where files were always converted to .jsx
#8740 d5a225f Thanks @Pagebakers! - Use correct extension for ESM exports

`v2.4.1`

Compare Source

Patch Changes

#7621 02968c565 Thanks @segunadebayo! - Refactor theme typings process and fix ESM issues

`v2.4.0`

Minor Changes

#7494 27dcf2f56 Thanks @kuroppe1819! - Add support for nested semantic tokens in theme. It is now possible to declare semantic tokens by nesting objects.

BEFORE:

const theme = {
  semanticTokens: {
    colors: {
      "background.pressed.base": { default: "blue.800", _dark: "blue.300" },
      "background.pressed.subtle": { default: "blue.300", _dark: "blue.700" },
    },
  },
}

AFTER:

const theme = {
  semanticTokens: {
    colors: {
      background: {
        pressed: {
          base: { default: "blue.800", _dark: "blue.300" },
          subtle: { default: "blue.300", _dark: "blue.700" },
        },
      },
    },
  },
}

This allows for cleaner grouping and organization of tokens.

`v2.3.0`

Compare Source

Minor Changes

#7127 ffc73f393 Thanks @lexanth! - - Added support for generating theme typings to use via module augmentation of the @chakra-ui/styled-system package.

To use this feature, run the following command:
```
chakra-cli tokens --template augmentation --out ./types/chakra-ui__styled-system.d.ts
```

`v2.2.1`

Compare Source

Patch Changes

#7099 322a9f424 Thanks @deecewan! - Support TS Config paths more completely

`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 "@&#8203;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: "#&#8203;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") // "#&#8203;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 "@&#8203;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

Configuration

📅 Schedule: Branch creation - At 12:00 AM through 04:59 AM and 10:00 PM through 11:59 PM, Monday through Friday ( * 0-4,22-23 * * 1-5 ), Only on Sunday and Saturday ( * * * * 0,6 ) in timezone UTC, 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 these updates again.

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

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

Aug 02 '25 16:08 renovate[bot]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
template-ecommerce-webapp-nextjs	Error		Nov 26, 2025 10:13am

Aug 02 '25 16:08 vercel[bot]

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 3.x releases. But if you manually upgrade to 3.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

Nov 26 '25 14:11 renovate[bot]

template-ecommerce-webapp-nextjs template-ecommerce-webapp-nextjs copied to clipboard

fix: update chakra-ui monorepo to v3 (main) (major)

Release Notes

Patch Changes

Minor Changes

Interactive block selection

Add all variants of a specific block

Add a specific variant of a block

List available blocks

List blocks in a specific category

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Minor Changes

Patch Changes

Minor Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Configuration

Renovate Ignore Notification

template-ecommerce-webapp-nextjs
template-ecommerce-webapp-nextjs copied to clipboard