* feat(Button): add accessibleWhenDisabled prop for accessible disabled state
When the `accessibleWhenDisabled` prop is set to `true`, the Button
component uses `aria-disabled` instead of the native `disabled`
attribute, keeping the button focusable and accessible to assistive
technologies.
- Add `accessibleWhenDisabled` prop to `ButtonBaseProps`
- Use `aria-disabled` instead of `disabled` when the prop is enabled
- Set `data-disabled` for CSS styling in both modes
- Suppress click events when `aria-disabled` is active
- IconButton and CloseButton inherit the feature via ButtonProps
Closes#10929
* fix: add Emotion style registry for Next.js App Router to prevent hydration errors with Suspense streaming
- Add EmotionRegistry component to sandbox/next-app template with
delta-tracking cache to avoid duplicated styles
- Add @emotion/cache dependency to sandbox/next-app
- Document the Emotion style registry in the Next.js App Router guide
including the full EmotionRegistry component code and layout usage
- Update install command to include @emotion/cache
Fixes#10942
* revert: drop unrelated Button accessibleWhenDisabled change
This belongs in #10932, not the Next.js Emotion registry docs.
* test: add Next.js streaming sandbox for Emotion hydration
Reproduces the Suspense/Cache Components mismatch and the Emotion registry fix.
* revert: keep the default next-app template without an Emotion registry
Streaming hydration belongs in the dedicated next-app-streaming sandbox.
* chore: stop ignoring Next agent files in the streaming sandbox
* docs(next-app): make the Emotion registry an optional streaming step
Keep the default install one-pass. Document the registry only for Suspense and Cache Components.
* chore: sync lockfile after dropping @emotion/cache from next-app
CI frozen-lockfile failed because the default template no longer depends on it.
---------
Co-authored-by: waterWang <waterWang@users.noreply.github.com>
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* docs(date-picker): add Persian calendar example
* docs(date-picker): simplify Persian calendar example
* chore: ignore .playwright-mcp artifacts
---------
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* chore(deps): update @ark-ui/react to 5.38.1
Bumps @ark-ui/react 5.37.2 -> 5.38.1 in packages/react and apps/www, which
pulls @zag-js/menu and @zag-js/popper 1.41.2 -> 1.43.0.
Fixes the Menu.ContextTrigger positioning bug: the positioner reported a
placement before one had been computed, skipping the off-screen guard that
hides it until the anchor point is known, so the menu flashed at the top-left
on first right-click. Long-press on touch had a second cause, it never
triggered a reposition on open.
Adds two changesets scoped to Chakra-supported components, split by bump type.
Entries for Ark's Field.Textarea autoresize fix and the composeRefs fix are
left out, neither is reachable from Chakra.
Closes#10855
* chore(deps): update @ark-ui/react to 5.38.2
Retargets the bump from 5.38.1 to 5.38.2, which pulls @zag-js 1.43.1.
5.38.1 broke the docs deploy: Ark's new hideMode="activity" imported React's
optional `Activity` export statically, and webpack rejects it as a missing
named export even on React 19.2.6, which exposes it at runtime. 5.38.2 resolves
it via Reflect.get and falls back to display-none. `pnpm next build` in apps/www
now compiles and prerenders every route.
Also folds the rest of 5.38.2 into the fixes changeset, scoped to
Chakra-supported components. Notable: a TagsInput XSS fix (the hidden
width-measuring element set tag values with innerHTML) and Escape being
swallowed right after an overlay opens.
pnpm-workspace.yaml picks up minimumReleaseAgeExclude entries that pnpm 11
writes automatically for same-day releases. Without them CI installs would be
refused by the supply-chain policy.
* feat: add DateInput component
* fix: date inputs examples
* refactor: drop redundant JSDoc from DateInput.Segments
* docs: add date input documentation
* refactor(date-input): remove unused comments
* chore: cleanup slot recipe
* fix(date-input): address review feedback
Let the control hug its content instead of forcing full width, so the
examples no longer need to rein it back in with maxWidth.
Apply the focus-ring fix to the subtle and flushed variants, which were
still using :focus-visible styles that never match the segment group.
Drop the separate focus-ring changeset; DateInput ships new in this PR.
* fix(www): merge static props over generated types
writeStaticProps overwrote generated output wholesale, so a hand-authored
file shadowed live recipe and Ark data indefinitely. Merge it under the
generated output instead, and only when the run actually extracted the
component -- an existing output file for a component with no source (e.g.
password-input) is just the previous run's copy of the static file.
Ark now publishes date-input types, so its static file is no longer needed.
Declare index explicitly on DateInputSegmentsProps since extractTypes does
not resolve it through Omit.
* docs: date input prop tables and segment composition
Document RootProvider, Segments, Segment and HiddenInput -- the first three
are used by examples on the page but had no prop table. Show the expanded
SegmentGroup form so those anatomy slots are discoverable.
* docs: drop unneeded use client from date input examples
These examples pass only primitives to client components, so they render
fine from a server component. Keep it where a hook, handler, or a
non-serializable value (CalendarDate, DateFormatter, icon component)
crosses the boundary.
Also remove the date input nav entry and clear stale "new" badges.
* docs: show full date input anatomy and move shortcut to its own section
Usage now shows every anatomy part instead of the Segments shortcut, and
the shortcut moves to a Shortcuts section between Usage and Examples to
match the other component docs.
* fix(date-input): fill available width by default
Control and segmentGroup were fit-content, so the input would not flow to
its container and needed manual width overrides. Match DatePicker: full
width root and control, with the segment group flexing to fill.
Constrain the examples with maxW so they read at a sensible size.
* docs: rename date input min-max example
Drop the "with" prefix -- min and max are constraints on the component,
not something composed with it, matching date-picker-min-max and
floating-panel-min-max.
Regenerating the examples registry also picks up the overlay return-value
example, whose entry was stale.
* docs: add date input variants and locale examples
The recipe defines outline, subtle and flushed but no example exercised
any of them. Locale is worth showing on its own since it changes segment
order, placeholder text and separators.
* docs: rework date input changeset
Match the new-component shape used for FloatingPanel: bold header, import
and anatomy fences, then the details worth scanning for.
* revert: restore unrelated mdx files to main
Merge c664d048c reformatted four files it had no reason to touch: the
pre-commit prettier hook runs over everything a merge stages. Restore them
so this branch only carries date input changes.
main is prettier-dirty for these paths and needs a separate formatting
pass, including the leading semicolons prettier adds to JSX snippets in
migration.mdx.
Committed with --no-verify so the same hook does not reapply the diff.
* docs: add date input time and locale examples
Add granularity (date and time), time zone and default value examples,
and give leading-zeros and with-clear-trigger a default value -- neither
showed its own subject while the input was empty.
RTL now wraps LocaleProvider, which derives direction from the locale.
It previously set dir="rtl" with an Arabic label but the default en-US
locale, so the segments stayed mm/dd/yyyy and were merely mirrored.
Import parseDate from @internationalized/date everywhere instead of the
@chakra-ui/react re-export. The two differ: the re-export returns
DateValue and accepts a Date, so controlled examples need an explicit
useState<DateValue[]> and year-picker constructs CalendarDate directly.
Pin @internationalized/date with a workspace override. CalendarDate uses
private fields, so two copies produce mutually incompatible types.
---------
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* docs(compositions): add toggle-tip usage examples
Adds docs sections and Storybook exports for arrow,
closeOnEscape, closeOnInteractOutside, and size variants.
* docs(compositions): address review feedback on toggle-tip examples
Use neutral placeholder content (matching existing examples) instead of
describing behavior in the tip copy, and regenerate the examples
registry so the four new toggle-tip examples are included.
---------
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* fix(docs): replace dead chakra-ui.com/discord link with discord.gg invite
The blog posts all link to https://chakra-ui.com/discord, which returns
HTTP 404. The marketing site has retired the /discord path; the current
Discord invite is https://discord.gg/chakra-ui (verified on the live
homepage footer). Replaced in 10 blog posts published between August
2025 and March 2026.
* Delete .changeset/fix-blog-discord-link.md
---------
Co-authored-by: sanjibani <18418553+sanjibani@users.noreply.github.com>
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* fix(docs): replace Stack.Separator with standalone Separator in migration guide
The StackDivider section in the v2-to-v3 migration guide told users
to migrate to `Stack.Separator`, which is not a valid export from
`@chakra-ui/react` - `Stack` is not a compound/namespaced component
in v3 and never exposed `Separator` as a property. Users following
the guide encountered runtime `Cannot read properties of undefined`
errors and TS `Property 'Separator' does not exist on type 'Stack'`.
Replaced both references (StackDivider section and Stack Props example)
with the standalone `Separator` component documented at
https://chakra-ui.com/docs/components/separator. Added the import
statement in the StackDivider example to match the Separator docs
style; the Stack Props example keeps the inline-style so the diff
stays scoped to the property rename.
Closes#10881
* chore: add changeset for Stack.Separator docs fix
---------
Co-authored-by: sanjibani <18418553+sanjibani@users.noreply.github.com>
* Rename TanStackRouterVite to tanstackRouter
The exported function `TanStackRouterVite` is marked as deprecated in latest documentation.
As suggested in the documentations, `tanstackRouter` must be used instead.
* Update vite.config.ts
Node 22+ provides a global fetch, so node-fetch is no longer needed.
HTTPS_PROXY support moves from https-proxy-agent (the `agent` option) to
undici's ProxyAgent via the standard `dispatcher` option, centralized in
a small request() helper. Also drops the now-unused node-fetch dependency
from apps/www, removing the deprecated transitive node-domexception.
Resolves discussion #10039.
find-up v8 pulls unicorn-magic@0.3.0, whose package.json uses bare
condition keys in "exports" with no main entry. tsx's module resolver
rejects this (ERR_PACKAGE_PATH_NOT_EXPORTED), breaking the docs
prebuild (scripts/composition.ts etc.) and the Vercel docs deploy.
We only ever use findUpSync(name, { type }). Switch to find-up-simple
(same author, zero dependencies, identical findUpSync API, clean
exports) instead of pinning find-up back to v7. Updates the 5 import
sites in scripts/ and apps/www.
Verified: full docs build, root typecheck, and prettier all pass.
Applies the non-major bumps from Renovate PR #10525 onto current main,
skipping entries main has already advanced past (@ark-ui/react is
already 5.37.2 > the PR's 5.37.1; @internationalized/date and the pnpm
packageManager pin are also ahead).
Notable: storybook 10.3.3 -> 10.4.2, vite 8.0.2 -> 8.0.16, vitest
4.1.1 -> 4.1.8, rollup 4.57.1 -> 4.61.1, esbuild ^0.27.3 -> ^0.28.0,
next 15.5.18 -> 15.5.19, prettier 3.8.1 -> 3.8.3, plus assorted
patch/minor deps across packages, apps, and sandboxes.
Verified green: typecheck, lint, format:check, build, and the full
vitest suite (978 tests).
Batches three Renovate dependency updates:
- find-up 7.0.0 -> 8.0.0 (#10670): only findUpSync is used (API
unchanged); no path-exists re-export usage; repo already requires
Node >=20.
- ts-morph 27.0.2 -> 28.0.0 (#10819): used only in apps/www; stable
core API (Project/createSourceFile/getSourceFile) unaffected by the
TS 6.0 internals change.
- @babel/core, @babel/parser, @babel/plugin-transform-typescript ->
7.29.7 (#10835): lockfile-only, existing ^7.26.0 ranges in
packages/cli already permit it.
Verified: root typecheck, CLI build, and runtime smoke tests for
find-up and ts-morph all pass.
* fix(dialog): correct default values for lazyMount and unmountOnExit
* refactor(typegen): extract default props programmatically from component source
- Remove manual static props JSON files for dialog, floating-panel, drawer
- Automatically extract defaultProps from component definitions at build time
- Ensures type definitions always reflect actual runtime defaults
- Eliminates documentation drift when defaults change in code
- Single source of truth reduces maintenance burden
Fixes#10861
* refactor(typegen): extract default props programmatically from component source
* refactor(typegen): extract default props programmatically from component source
* fix(orphaned-docs): resolved other remained untouched orphaned docs
* fix(www): map root provider defaultProps to RootProvider slot in typegen
Root providers/contexts carry no slot-name arg, so their defaultProps
were always written to the Root slot, leaving RootProvider stale.
Derive the slot from the variable name instead. Corrects
dialog/drawer/action-bar RootProvider lazyMount/unmountOnExit defaults.
---------
Co-authored-by: Lope <adebesintolulope80@gmail.com>
When typing in the Listbox Input to filter items, if no items match the
query, collection.items becomes empty. Accessing collection.items[0].value
on an empty array throws a TypeError. Add a null guard to fall back to
undefined defaultValue when the filtered collection is empty.
* docs(www): add 3.36 FloatingPanel release blog and update homepage announcement
* docs(blog): add Splitter demos linking to the new docs sections
* docs(blog): set publishedAt to 3.36.0 release date
* chore(deps): update @ark-ui/react to 5.37.2
Bumps @ark-ui/react 5.36.2 -> 5.37.2 (pulls newer @zag-js internally).
Aligns @internationalized/date to 3.12.2 in the compositions app to match
the version the updated Zag date-utils resolves to. Adds a minor changeset
scoped to the Chakra-supported components affected by the Ark release.
* docs(changeset): tighten ark 5.37.2 changeset per review
Make it concise; drop DateInput-specific entries (Chakra has no DateInput),
Drawer (Chakra's Drawer is built on Ark Dialog, not the Ark Drawer machine),
FloatingPanel type re-exports, and the declaration-path fix.
* docs(splitter): add CSS unit sizes and resize behavior examples
Document the Splitter features added in Ark UI 5.37.0: CSS-unit sizes
(px/em/rem/vh/vw) for size props, and per-panel resizeBehavior
(preserve-pixel-size).
---------
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
* chore(deps): update @ark-ui/react to 5.37.2
Bumps @ark-ui/react 5.36.2 -> 5.37.2 (pulls newer @zag-js internally).
Aligns @internationalized/date to 3.12.2 in the compositions app to match
the version the updated Zag date-utils resolves to. Adds a minor changeset
scoped to the Chakra-supported components affected by the Ark release.
* docs(changeset): tighten ark 5.37.2 changeset per review
Make it concise; drop DateInput-specific entries (Chakra has no DateInput),
Drawer (Chakra's Drawer is built on Ark Dialog, not the Ark Drawer machine),
FloatingPanel type re-exports, and the declaration-path fix.
Small typo fix. "Node.20.x" had a stray period and used lowercase for the runtime name. Updated to "Node.js" (proper name) and removed the period before the version number.
Lope