Merge branch 'main' into feat/playwright-tests-components

Author: carwack

bun.lock

@@ -36,12 +36,12 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@types/bun": "1.2.4",
-    "lefthook": "1.11.2",
+    "lefthook": "1.11.3",
     "prettier": "3.5.3",
     "prettier-plugin-svelte": "3.3.3",
     "turbo": "2.4.4",
     "typescript": "5.8.2",
-    "vercel": "41.3.0"
+    "vercel": "41.3.2"
   },
   "packageManager": "[email protected]",
   "trustedDependencies": [

package.json

@@ -6,6 +6,20 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+## [5.0.1] - 2025-03-11
+
+### Fixed
+
+- **General**: Effects now flush synchronously instead of using a microtask.
+- **Checkbox**: `data-invalid` is no longer set when `invalid` is `false`.
+- **Combobox**: Fixed unexpected cursor movement when editing input.
+- **PinInput**: OTP SMS autofill now works as expected.
+- **RatingGroup**: Fixed incorrect focus placement on the label.
+- **TagsInput**: Improved caret detection to prevent unintended tag removal.
+- **Timer**
+  - Fixed slowdown when switching tabs/windows.
+  - Changed default `interval` from `250` to `1000`.
+
 ## [5.0.0] - 2025-03-06
 
 Ark UI just got a major performance boost! 🚀

packages/react/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -84,58 +84,58 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.7.0",
-    "@zag-js/accordion": "1.3.1",
-    "@zag-js/anatomy": "1.3.1",
-    "@zag-js/auto-resize": "1.3.1",
-    "@zag-js/avatar": "1.3.1",
-    "@zag-js/carousel": "1.3.1",
-    "@zag-js/checkbox": "1.3.1",
-    "@zag-js/clipboard": "1.3.1",
-    "@zag-js/collapsible": "1.3.1",
-    "@zag-js/collection": "1.3.1",
-    "@zag-js/color-picker": "1.3.1",
-    "@zag-js/color-utils": "1.3.1",
-    "@zag-js/combobox": "1.3.1",
-    "@zag-js/core": "1.3.1",
-    "@zag-js/date-picker": "1.3.1",
-    "@zag-js/date-utils": "1.3.1",
-    "@zag-js/dialog": "1.3.1",
-    "@zag-js/dom-query": "1.3.1",
-    "@zag-js/editable": "1.3.1",
-    "@zag-js/file-upload": "1.3.1",
-    "@zag-js/file-utils": "1.3.1",
-    "@zag-js/focus-trap": "1.3.1",
-    "@zag-js/highlight-word": "1.3.1",
-    "@zag-js/hover-card": "1.3.1",
-    "@zag-js/i18n-utils": "1.3.1",
-    "@zag-js/menu": "1.3.1",
-    "@zag-js/number-input": "1.3.1",
-    "@zag-js/pagination": "1.3.1",
-    "@zag-js/pin-input": "1.3.1",
-    "@zag-js/popover": "1.3.1",
-    "@zag-js/presence": "1.3.1",
-    "@zag-js/progress": "1.3.1",
-    "@zag-js/qr-code": "1.3.1",
-    "@zag-js/radio-group": "1.3.1",
-    "@zag-js/rating-group": "1.3.1",
-    "@zag-js/react": "1.3.1",
-    "@zag-js/select": "1.3.1",
-    "@zag-js/signature-pad": "1.3.1",
-    "@zag-js/slider": "1.3.1",
-    "@zag-js/splitter": "1.3.1",
-    "@zag-js/steps": "1.3.1",
-    "@zag-js/switch": "1.3.1",
-    "@zag-js/tabs": "1.3.1",
-    "@zag-js/tags-input": "1.3.1",
-    "@zag-js/time-picker": "1.3.1",
-    "@zag-js/timer": "1.3.1",
-    "@zag-js/toast": "1.3.1",
-    "@zag-js/toggle": "1.3.1",
-    "@zag-js/toggle-group": "1.3.1",
-    "@zag-js/tooltip": "1.3.1",
-    "@zag-js/tour": "1.3.1",
-    "@zag-js/tree-view": "1.3.1",
-    "@zag-js/types": "1.3.1"
+    "@zag-js/accordion": "1.3.3",
+    "@zag-js/anatomy": "1.3.3",
+    "@zag-js/auto-resize": "1.3.3",
+    "@zag-js/avatar": "1.3.3",
+    "@zag-js/carousel": "1.3.3",
+    "@zag-js/checkbox": "1.3.3",
+    "@zag-js/clipboard": "1.3.3",
+    "@zag-js/collapsible": "1.3.3",
+    "@zag-js/collection": "1.3.3",
+    "@zag-js/color-picker": "1.3.3",
+    "@zag-js/color-utils": "1.3.3",
+    "@zag-js/combobox": "1.3.3",
+    "@zag-js/core": "1.3.3",
+    "@zag-js/date-picker": "1.3.3",
+    "@zag-js/date-utils": "1.3.3",
+    "@zag-js/dialog": "1.3.3",
+    "@zag-js/dom-query": "1.3.3",
+    "@zag-js/editable": "1.3.3",
+    "@zag-js/file-upload": "1.3.3",
+    "@zag-js/file-utils": "1.3.3",
+    "@zag-js/focus-trap": "1.3.3",
+    "@zag-js/highlight-word": "1.3.3",
+    "@zag-js/hover-card": "1.3.3",
+    "@zag-js/i18n-utils": "1.3.3",
+    "@zag-js/menu": "1.3.3",
+    "@zag-js/number-input": "1.3.3",
+    "@zag-js/pagination": "1.3.3",
+    "@zag-js/pin-input": "1.3.3",
+    "@zag-js/popover": "1.3.3",
+    "@zag-js/presence": "1.3.3",
+    "@zag-js/progress": "1.3.3",
+    "@zag-js/qr-code": "1.3.3",
+    "@zag-js/radio-group": "1.3.3",
+    "@zag-js/rating-group": "1.3.3",
+    "@zag-js/react": "1.3.3",
+    "@zag-js/select": "1.3.3",
+    "@zag-js/signature-pad": "1.3.3",
+    "@zag-js/slider": "1.3.3",
+    "@zag-js/splitter": "1.3.3",
+    "@zag-js/steps": "1.3.3",
+    "@zag-js/switch": "1.3.3",
+    "@zag-js/tabs": "1.3.3",
+    "@zag-js/tags-input": "1.3.3",
+    "@zag-js/time-picker": "1.3.3",
+    "@zag-js/timer": "1.3.3",
+    "@zag-js/toast": "1.3.3",
+    "@zag-js/toggle": "1.3.3",
+    "@zag-js/toggle-group": "1.3.3",
+    "@zag-js/tooltip": "1.3.3",
+    "@zag-js/tour": "1.3.3",
+    "@zag-js/tree-view": "1.3.3",
+    "@zag-js/types": "1.3.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
@@ -152,11 +152,11 @@
     "@types/react": "19.0.10",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "4.3.4",
-    "@zag-js/stringify-state": "1.3.1",
+    "@zag-js/stringify-state": "1.3.3",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
-    "happy-dom": "17.1.8",
-    "lucide-react": "0.477.0",
+    "happy-dom": "17.4.3",
+    "lucide-react": "0.479.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-frame-component": "5.2.7",
@@ -167,7 +167,7 @@
     "typescript": "5.8.2",
     "vite": "6.2.0",
     "vite-plugin-dts": "4.5.3",
-    "vitest": "3.0.7",
+    "vitest": "3.0.8",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {

packages/react/package.json

@@ -17,7 +17,6 @@ export { Disabled } from './examples/disabled'
 export { Horizontal } from './examples/horizontal'
 export { LazyMount } from './examples/lazy-mount'
 export { Multiple } from './examples/multiple'
-export { Provider } from './examples/provider'
 export { RenderProp } from './examples/render-prop'
 export { RootProvider } from './examples/root-provider'
 export { Vertical } from './examples/vertical'

packages/react/src/components/accordion/accordion.stories.tsx

@@ -1,8 +1,14 @@
 import { Accordion, useAccordion } from '@ark-ui/react/accordion'
 import { ChevronDownIcon } from 'lucide-react'
+import { useState } from 'react'
 
 export const RootProvider = () => {
-  const accordion = useAccordion({ defaultValue: ['React'] })
+  const [value, setValue] = useState(['React'])
+  const accordion = useAccordion({
+    multiple: true,
+    value,
+    onValueChange: (e) => setValue(e.value),
+  })
 
   return (
     <>

packages/react/src/components/accordion/examples/provider.tsx

@@ -7,7 +7,7 @@ import type { Optional } from '../../types'
 export interface UseAccordionProps extends Optional<Omit<accordion.Props, 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseAccordionReturn extends accordion.Api<PropTypes> {}
 
-export const useAccordion = (props: UseAccordionProps = {}): UseAccordionReturn => {
+export const useAccordion = (props?: UseAccordionProps): UseAccordionReturn => {
   const id = useId()
   const { getRootNode } = useEnvironmentContext()
   const { dir } = useLocaleContext()

packages/react/src/components/accordion/examples/root-provider.tsx

@@ -7,7 +7,7 @@ import type { Optional } from '../../types'
 export interface UseAvatarProps extends Optional<Omit<avatar.Props, 'dir' | 'getRootNode'>, 'id'> {}
 export interface UseAvatarReturn extends avatar.Api<PropTypes> {}
 
-export const useAvatar = (props: UseAvatarProps = {}): UseAvatarReturn => {
+export const useAvatar = (props?: UseAvatarProps): UseAvatarReturn => {
   const id = useId()
   const { getRootNode } = useEnvironmentContext()
   const { dir } = useLocaleContext()

packages/react/src/components/accordion/use-accordion.ts

@@ -7,7 +7,7 @@ import type { Optional } from '../../types'
 export interface UseClipboardProps extends Optional<Omit<clipboard.Props, 'getRootNode'>, 'id'> {}
 export interface UseClipboardReturn extends clipboard.Api<PropTypes> {}
 
-export const useClipboard = (props: UseClipboardProps = {}): UseClipboardReturn => {
+export const useClipboard = (props?: UseClipboardProps): UseClipboardReturn => {
   const id = useId()
   const { getRootNode } = useEnvironmentContext()