diff --git a/.changeset/compose-refs-cleanup.md b/.changeset/compose-refs-cleanup.md deleted file mode 100644 index 0cf8a2329d..0000000000 --- a/.changeset/compose-refs-cleanup.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@ark-ui/react": patch ---- - -Fix `composeRefs`/`useComposedRefs` not resetting plain callback refs and object refs to `null` on detach when composed alongside a React 19 ref that returns a cleanup function. diff --git a/.changeset/date-input-segment-lookup.md b/.changeset/date-input-segment-lookup.md deleted file mode 100644 index dca30179e0..0000000000 --- a/.changeset/date-input-segment-lookup.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -"@ark-ui/solid": patch -"@ark-ui/vue": patch ---- - -Fixed `DateInput.Segment` resolving segments by `type`, so segments sharing a type all rendered the first match's text. -Literal separators like `:` and `,` rendered as `/`. diff --git a/.changeset/vue-aschild-duplicate-class.md b/.changeset/vue-aschild-duplicate-class.md deleted file mode 100644 index c386fef2f0..0000000000 --- a/.changeset/vue-aschild-duplicate-class.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -"@ark-ui/vue": patch ---- - -- Fixed `asChild` duplicating the child element's `class`, so `` - rendered `class="child parent child"` instead of `class="parent child"`. -- Fixed `asChild` applying props to a leading comment node, which silently dropped them when a comment or a false `v-if` - preceded the child element. diff --git a/.changeset/vue-restore-vue-dts.md b/.changeset/vue-restore-vue-dts.md deleted file mode 100644 index 9cd78165a4..0000000000 --- a/.changeset/vue-restore-vue-dts.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@ark-ui/vue": patch ---- - -Fixed missing `*.vue.d.ts` declaration files in the published package so `defineProps<*Props>` type imports resolve again. diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 4036cea1d0..91c121baa3 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,12 @@ # @ark-ui/react +## [5.38.1] - 2026-08-07 + +### Fixed + +- Fix `composeRefs`/`useComposedRefs` not resetting plain callback refs and object refs to `null` on detach when + composed alongside a React 19 ref that returns a cleanup function. + ## [5.38.0] - 2026-08-01 ### Added diff --git a/packages/react/package.json b/packages/react/package.json index 47f953e01d..3f63da46a5 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@ark-ui/react", "type": "module", - "version": "5.38.0", + "version": "5.38.1", "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.", "keywords": [ "accordion", diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md index b627200bda..68142b102b 100644 --- a/packages/solid/CHANGELOG.md +++ b/packages/solid/CHANGELOG.md @@ -1,5 +1,12 @@ # @ark-ui/solid +## [5.38.1] - 2026-08-07 + +### Fixed + +- Fixed `DateInput.Segment` resolving segments by `type`, so segments sharing a type all rendered the first match's + text. Literal separators like `:` and `,` rendered as `/`. + ## [5.38.0] - 2026-08-01 ### Added diff --git a/packages/solid/package.json b/packages/solid/package.json index e3444ffb78..2a57d47019 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -1,7 +1,7 @@ { "name": "@ark-ui/solid", "type": "module", - "version": "5.38.0", + "version": "5.38.1", "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.", "keywords": [ "accordion", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 7f5c1cf905..3b8dcb02a8 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -1,5 +1,20 @@ # @ark-ui/vue +## [5.38.1] - 2026-08-07 + +### Fixed + +- Fixed `DateInput.Segment` resolving segments by `type`, so segments sharing a type all rendered the first match's + text. Literal separators like `:` and `,` rendered as `/`. + +- - Fixed `asChild` duplicating the child element's `class`, so `` + rendered `class="child parent child"` instead of `class="parent child"`. + - Fixed `asChild` applying props to a leading comment node, which silently dropped them when a comment or a false + `v-if` preceded the child element. + +- Fixed missing `*.vue.d.ts` declaration files in the published package so `defineProps<*Props>` type imports resolve + again. + ## [5.38.0] - 2026-08-01 ### Added diff --git a/packages/vue/package.json b/packages/vue/package.json index a744d1d406..172b6c9535 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,7 +1,7 @@ { "name": "@ark-ui/vue", "type": "module", - "version": "5.38.0", + "version": "5.38.1", "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.", "keywords": [ "accordion", diff --git a/website/src/content/pages/guides/forms.mdx b/website/src/content/pages/guides/forms.mdx index fc54476cfc..ece89d0932 100644 --- a/website/src/content/pages/guides/forms.mdx +++ b/website/src/content/pages/guides/forms.mdx @@ -5,8 +5,8 @@ description: A guide to building forms with Ark UI components. --- Ark UI provides the `Field` and `Fieldset` components for integrating with native `form` element or popular form -libraries like [React Hook Form](https://react-hook-form.com/), [TanStack Form](https://tanstack.com/form/latest), and -[Vee Validate](https://vee-validate.logaretm.com). +libraries like [React Hook Form](https://react-hook-form.com/), [TanStack Form](https://tanstack.com/form/latest), +[Formisch](https://formisch.dev/), and [Vee Validate](https://vee-validate.logaretm.com). ## Field Context @@ -448,3 +448,111 @@ const Demo = () => { ) } ``` + +## Formisch + +Formisch is a schema-based, headless form library that, like Ark UI, supports React, Solid, Vue, and Svelte. It +validates with [Valibot](https://valibot.dev/) and infers all input and output types from the schema. + +### Native Controls + +Since Formisch also exports a `Field` component, import it under an alias to avoid a name clash with Ark UI's `Field`. + +```tsx +import { Field } from '@ark-ui/react/field' +import { Field as FormischField, Form, useForm } from '@formisch/react' +import * as v from 'valibot' + +const FormSchema = v.object({ + firstName: v.pipe(v.string(), v.nonEmpty('First name is required')), + email: v.pipe(v.string(), v.email('Invalid email address')), +}) + +const Demo = () => { + const form = useForm({ schema: FormSchema }) + + return ( +
console.log(output)}> + + {(field) => ( + + First Name + + {field.errors?.[0]} + + )} + + + + {(field) => ( + + Email + + {field.errors?.[0]} + + )} + + + +
+ ) +} +``` + +### Custom Components + +Use the `onChange` function of the field store to integrate custom form components like select or combobox. + +```tsx +import { Field } from '@ark-ui/react/field' +import { Select, createListCollection } from '@ark-ui/react/select' +import { Field as FormischField, Form, useForm } from '@formisch/react' +import * as v from 'valibot' + +const FormSchema = v.object({ + framework: v.pipe(v.string(), v.nonEmpty('Please select a framework')), +}) + +const Demo = () => { + const form = useForm({ schema: FormSchema }) + + const collection = createListCollection({ + items: ['React', 'Solid', 'Vue', 'Svelte'], + }) + + return ( +
console.log(output)}> + + {(field) => ( + + field.onChange(e.value[0])} + > + Framework + + + + + + + + {collection.items.map((item) => ( + + {item} + + ))} + + + + + {field.errors?.[0]} + + )} + + +
+ ) +} +```