* docs(components): add examples for various component props
Add usage examples demonstrating:
- collapsible: activity hide mode
- dialog/drawer: autofocus data attributes
- listbox: keyboard priority
- number-input: keyboard steps
- pagination: custom page text
- pin-input: auto submit and sanitize value
- select: virtualized list
- slider: large step and custom marker labels
- steps: skippable step
- tags-input: allow duplicates and sanitize value
* docs(components): tighten the new prop examples
Keeps the examples that teach something the prop name does not, and adds
Storybook coverage for them.
Removed:
- steps-with-skippable-step. `isStepSkippable` only overrides failed
validation, and `isStepValid` returned true for the step marked skippable,
so the prop changed nothing. It was also close to a copy of
steps-with-validation.
- number-input-with-keyboard-steps and slider-with-large-step, both a numeric
prop whose effect the surrounding sentence already states.
- tags-input-with-duplicates. A boolean that does what its name says, on a
page that already carries twenty-two examples.
Reverted:
- dialog and drawer keep `initialFocusEl`. `data-autofocus` is worth
documenting but not by rewriting a working example, and the
`data-no-autofocus` in that version was inert: it is only read when nothing
matches `[data-autofocus]`. The docs now describe the real precedence.
- pagination-with-custom-format, which had switched the sample string to
Persian for reasons unrelated to demonstrating `format`.
Fixed:
- tags-input-with-sanitized-value put its helper text 825px to the right of
the field, because `ms="auto"` acts as a flex spacer inside the root.
- listbox copy claimed arrow keys respond to `keyboardPriority`. They are
gated behind `isGridCollection`, so for this collection only Home and End
do. Verified in a browser: Home and End move the highlight and leave the
caret alone, ArrowLeft moves the caret.
- collapsible-with-hide-mode showed `display-none` beside `activity`, but
`display-none` is the default. One panel is enough, and the docs now note
that `activity` needs React 19.2 and silently falls back below that.
---------
Co-authored-by: Saleh Ghotbani <saleh313ghotbani@gmail.com>
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
State the intent directly: an absent list matches every breakpoint. The
`?? true` form was correct but read as though the default were being applied
to the result of `includes` rather than to the missing option.
Also trims the changeset from #10976 to the symptom, since the reasoning
behind the fix belongs in the PR rather than the changelog.
The three existing bench files all measure functions in isolation, which is
misleading here: `cssFn` and `transform` memoize the layer above style
resolution, so work that looks hot on its own barely runs during a render.
Measured on `renderToString`, three separate function-level wins of 34x, 9x
and 2.9x each came out to no change at all.
Adds `pnpm bench` and four benches over real trees, shaped after the cases
that actually regressed: a data table of recipe components (#10878) and a
dialog form (#9698), plus a varied page that misses the style caches.
Validated against the regression it exists to catch: reintroducing
04a1a07f1e, which stripped memo from `cssFn`, `mergeFn` and `transform`,
registers as 0.39x-0.52x here, far outside the +-5% noise floor.
Server rendering only. Mounting into jsdom measured at +-9% to +-13%, wide
enough to hide a 1.5x regression, and it adds coverage of effects and
reconciliation rather than style resolution.
* fix(react): preserve cva variant keys that collide with CSS shorthands
* refactor(react): resolve variant selections without a second normalizer
Keeps the fix, simplifies how it is wired.
`createNormalizePropsFn` was `createNormalizeFn` minus its `getKey` option,
so the two would drift apart the next time normalization changes. What cva
needs for selections is just `normalizeValue`, which `system.ts` already has
in scope, so `normalize.ts` goes back untouched.
`resolve` no longer normalizes selections at all: `getVariantCss` normalizes
its input internally and compound matching compares raw values, so that pass
only ever fed a function that redid the work. Compound variant match rules
are now built per recipe instead of on every resolve.
Verified byte-identical output against main across 1648 recipe resolutions
(every built-in recipe and slot recipe over its variant matrix, plus
responsive array and object selections). Cold render of a 40-field form
measures 23.5ms against 24.7ms for the previous approach and 26.1ms on main.
---------
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
Keeps the pinned Ark version current. 5.39.2 restores the ./hotkeys and
./interaction entrypoints that were dropped from the published package in
5.39.0/5.39.1, and carries a NavigationMenu SSR fix (a component Chakra does
not ship), so consumers see no behavior change.
Checkbox Card, Radio Card, and Slider never read their cursor tokens, so
theme overrides did nothing. Disabled styles hardcoded not-allowed instead
of tokens.cursor.disabled.
* fix(react): preserve css property order in memo keys
* test(memo): cover cache key order in memo and cva
Add a direct memo unit test for object key order, a cva test for the
variant values it affected, and drop the sentinel assertion message.
Sync memo.bench.ts with the implementation and expand the changeset.
* chore: shorten memo order changeset
* chore: note ssr hydration mismatch in changeset
---------
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>
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
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).
* 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.
Segun Adebayo