* 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>
* 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>
* 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
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.
* chore(cli): migrate from deprecated tsconfck to get-tsconfig
* refactor(cli): skip unresolvable tsconfig references and expand test coverage
---------
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.
The length regex in `isCssUnit` had an unescaped `.`, which matched any
single character and accepted malformed values like `1a5rem` and `1-5rem`.
Escape it to a literal period and add regression coverage.
Co-Authored-By: Bojun Chai <Bojun-Vvibe@users.noreply.github.com>
github-actions[bot]