* 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>
* fix(radio-card): prevent bg.muted from covering outline variant's inset box-shadow when disabled
The outline variant uses `boxShadow: "inset 0 0 0 1px var(--shadow-color)"` on the
checked item to simulate a border. When the RadioCard is disabled, the base
`itemControl._disabled: { bg: "bg.muted" }` background covers this inset shadow,
making the border appear to lose its width.
Fix: override `itemControl._disabled: { bg: "unset" }` in the outline variant,
matching the existing pattern in the solid variant.
Ref: chakra-ui/chakra-ui#10930
* chore(changeset): add changeset for radio-card outline disabled fix
Text adapted from #10931, which had the changeset but patched only the
generated panda-preset file.
* chore(changeset): tighten radio-card entry
---------
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: quote argument-hint YAML values so Copilot CLI ≥1.0.65 loads all skills
`argument-hint: [foo]` YAML-parses as a flow sequence (array), not a
string. Downstream slash-command loaders that validate `argument-hint`
as a string — notably GitHub Copilot CLI ≥ 1.0.65 — silently reject
the skill on load, and the command disappears from the CLI menu.
Wrap the value in double quotes so it parses as a string. No behaviour
change on Claude Code.
* 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>
Recipe components (Button, Badge, Skeleton, etc.) previously recompiled
their recipe and re-resolved variant styles per instance/render, which
dominated render time in large lists and tables.
- Cache compiled recipes per system instance, keyed by recipe key
- Memoize cva/sva variant resolution so results are referentially stable
- Drop the per-instance structuredClone of recipe configs
- Fix recipe merging so it no longer throws or mutates source configs
- Use tsgo (@typescript/native-preview) for faster typecheck
* 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
github-actions[bot]