[pull] main from chakra-ui:main

integrations/mcp/package.json

@@ -44,6 +44,6 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "1.17.4",
     "express": "^5.1.0",
-    "zod": "^3.24.4"
+    "zod": "^4.0.0"
   }
 }

packages/react/CHANGELOG.md

@@ -1,18 +1,22 @@
 ## [Unreleased]
 
+## [5.24.0] - 2025-09-11
+
 ### Added
 
-- **Anatomy**: Export all component anatomies from `@ark-ui/react/anatomy` to prevent resolution issues with other Node
-  programs like Panda CSS. You can now import anatomies directly:
-
-  ```tsx
-  import { accordionAnatomy, dialogAnatomy } from '@ark-ui/react/anatomy'
-  ```
+- **Dismissable**: Add support for layer types in dismissable layer stack. Layers can now be categorized as `dialog`,
+  `popover`, `menu`, or `listbox`. This enables:
+  - `data-nested` attribute on nested layers of the same type
+  - `data-has-nested` attribute on parent layers with nested children of the same type
+  - `--nested-layer-count` CSS variable indicating the number of nested layers of the same type
 
-### Changed
+### Fixed
+
+- **Menu**: Fix issue where hovering a partially visible item with pointer causes it to scroll into view
+
+- **Tabs**: Fix issue where `ids` for `item` and `content` could not be customized
 
-- **Fieldset**: Reverted `Fieldset.Legend` to render as a `legend` element instead of a `div` element (reverting changes
-  from v5.21.0) for better semantic HTML
+- **Toast**: Allow creating a toast store without any arguments
 
 ## [5.23.0] - 2025-09-08
 

packages/react/README.md

@@ -53,7 +53,6 @@ Ark UI is available for the following JavaScript frameworks:
 - [Switch](https://ark-ui.com/react/docs/components/switch)
 - [Tabs](https://ark-ui.com/react/docs/components/tabs)
 - [Tags Input](https://ark-ui.com/react/docs/components/tags-input)
-- [Time Picker](https://ark-ui.com/react/docs/components/time-picker)
 - [Timer](https://ark-ui.com/react/docs/components/timer)
 - [Toast](https://ark-ui.com/react/docs/components/toast)
 - [Toggle Group](https://ark-ui.com/react/docs/components/toggle-group)

packages/react/package.json

@@ -86,66 +86,65 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.22.1",
-    "@zag-js/anatomy": "1.22.1",
-    "@zag-js/angle-slider": "1.22.1",
-    "@zag-js/async-list": "1.22.1",
-    "@zag-js/auto-resize": "1.22.1",
-    "@zag-js/avatar": "1.22.1",
-    "@zag-js/carousel": "1.22.1",
-    "@zag-js/checkbox": "1.22.1",
-    "@zag-js/clipboard": "1.22.1",
-    "@zag-js/collapsible": "1.22.1",
-    "@zag-js/collection": "1.22.1",
-    "@zag-js/color-picker": "1.22.1",
-    "@zag-js/color-utils": "1.22.1",
-    "@zag-js/combobox": "1.22.1",
-    "@zag-js/core": "1.22.1",
-    "@zag-js/date-picker": "1.22.1",
-    "@zag-js/date-utils": "1.22.1",
-    "@zag-js/dialog": "1.22.1",
-    "@zag-js/dom-query": "1.22.1",
-    "@zag-js/editable": "1.22.1",
-    "@zag-js/file-upload": "1.22.1",
-    "@zag-js/file-utils": "1.22.1",
-    "@zag-js/floating-panel": "1.22.1",
-    "@zag-js/focus-trap": "1.22.1",
-    "@zag-js/highlight-word": "1.22.1",
-    "@zag-js/hover-card": "1.22.1",
-    "@zag-js/i18n-utils": "1.22.1",
-    "@zag-js/json-tree-utils": "1.22.1",
-    "@zag-js/listbox": "1.22.1",
-    "@zag-js/menu": "1.22.1",
-    "@zag-js/number-input": "1.22.1",
-    "@zag-js/pagination": "1.22.1",
-    "@zag-js/password-input": "1.22.1",
-    "@zag-js/pin-input": "1.22.1",
-    "@zag-js/popover": "1.22.1",
-    "@zag-js/presence": "1.22.1",
-    "@zag-js/progress": "1.22.1",
-    "@zag-js/qr-code": "1.22.1",
-    "@zag-js/radio-group": "1.22.1",
-    "@zag-js/rating-group": "1.22.1",
-    "@zag-js/react": "1.22.1",
-    "@zag-js/scroll-area": "1.22.1",
-    "@zag-js/select": "1.22.1",
-    "@zag-js/signature-pad": "1.22.1",
-    "@zag-js/slider": "1.22.1",
-    "@zag-js/splitter": "1.22.1",
-    "@zag-js/steps": "1.22.1",
-    "@zag-js/switch": "1.22.1",
-    "@zag-js/tabs": "1.22.1",
-    "@zag-js/tags-input": "1.22.1",
-    "@zag-js/time-picker": "1.22.1",
-    "@zag-js/timer": "1.22.1",
-    "@zag-js/toast": "1.22.1",
-    "@zag-js/toggle": "1.22.1",
-    "@zag-js/toggle-group": "1.22.1",
-    "@zag-js/tooltip": "1.22.1",
-    "@zag-js/tour": "1.22.1",
-    "@zag-js/tree-view": "1.22.1",
-    "@zag-js/types": "1.22.1",
-    "@zag-js/utils": "1.22.1"
+    "@zag-js/accordion": "1.23.0",
+    "@zag-js/anatomy": "1.23.0",
+    "@zag-js/angle-slider": "1.23.0",
+    "@zag-js/async-list": "1.23.0",
+    "@zag-js/auto-resize": "1.23.0",
+    "@zag-js/avatar": "1.23.0",
+    "@zag-js/carousel": "1.23.0",
+    "@zag-js/checkbox": "1.23.0",
+    "@zag-js/clipboard": "1.23.0",
+    "@zag-js/collapsible": "1.23.0",
+    "@zag-js/collection": "1.23.0",
+    "@zag-js/color-picker": "1.23.0",
+    "@zag-js/color-utils": "1.23.0",
+    "@zag-js/combobox": "1.23.0",
+    "@zag-js/core": "1.23.0",
+    "@zag-js/date-picker": "1.23.0",
+    "@zag-js/date-utils": "1.23.0",
+    "@zag-js/dialog": "1.23.0",
+    "@zag-js/dom-query": "1.23.0",
+    "@zag-js/editable": "1.23.0",
+    "@zag-js/file-upload": "1.23.0",
+    "@zag-js/file-utils": "1.23.0",
+    "@zag-js/floating-panel": "1.23.0",
+    "@zag-js/focus-trap": "1.23.0",
+    "@zag-js/highlight-word": "1.23.0",
+    "@zag-js/hover-card": "1.23.0",
+    "@zag-js/i18n-utils": "1.23.0",
+    "@zag-js/json-tree-utils": "1.23.0",
+    "@zag-js/listbox": "1.23.0",
+    "@zag-js/menu": "1.23.0",
+    "@zag-js/number-input": "1.23.0",
+    "@zag-js/pagination": "1.23.0",
+    "@zag-js/password-input": "1.23.0",
+    "@zag-js/pin-input": "1.23.0",
+    "@zag-js/popover": "1.23.0",
+    "@zag-js/presence": "1.23.0",
+    "@zag-js/progress": "1.23.0",
+    "@zag-js/qr-code": "1.23.0",
+    "@zag-js/radio-group": "1.23.0",
+    "@zag-js/rating-group": "1.23.0",
+    "@zag-js/react": "1.23.0",
+    "@zag-js/scroll-area": "1.23.0",
+    "@zag-js/select": "1.23.0",
+    "@zag-js/signature-pad": "1.23.0",
+    "@zag-js/slider": "1.23.0",
+    "@zag-js/splitter": "1.23.0",
+    "@zag-js/steps": "1.23.0",
+    "@zag-js/switch": "1.23.0",
+    "@zag-js/tabs": "1.23.0",
+    "@zag-js/tags-input": "1.23.0",
+    "@zag-js/timer": "1.23.0",
+    "@zag-js/toast": "1.23.0",
+    "@zag-js/toggle": "1.23.0",
+    "@zag-js/toggle-group": "1.23.0",
+    "@zag-js/tooltip": "1.23.0",
+    "@zag-js/tour": "1.23.0",
+    "@zag-js/tree-view": "1.23.0",
+    "@zag-js/types": "1.23.0",
+    "@zag-js/utils": "1.23.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.2",

packages/react/src/components/anatomy.ts

@@ -36,7 +36,6 @@ export { stepsAnatomy } from './steps/steps.anatomy'
 export { switchAnatomy } from './switch/switch.anatomy'
 export { tabsAnatomy } from './tabs/tabs.anatomy'
 export { tagsInputAnatomy } from './tags-input/tags-input.anatomy'
-export { timePickerAnatomy } from './time-picker/time-picker.anatomy'
 export { timerAnatomy } from './timer/timer.anatomy'
 export { toastAnatomy } from './toast/toast.anatomy'
 export { toggleAnatomy } from './toggle/toggle.anatomy'

packages/react/src/components/file-upload/examples/rejected-files.tsx

@@ -0,0 +1,55 @@
+import { FileUpload } from '@ark-ui/react'
+import { XIcon } from 'lucide-react'
+
+export const RejectedFiles = () => {
+  return (
+    <FileUpload.Root
+      maxFiles={2}
+      onFileReject={(fileRejection) => {
+        console.log(fileRejection)
+      }}
+    >
+      <FileUpload.Dropzone>Drag and drop your images here</FileUpload.Dropzone>
+
+      {/* Accepted Files */}
+      <FileUpload.ItemGroup type="accepted">
+        <h3>Accepted Files</h3>
+        <FileUpload.Context>
+          {({ acceptedFiles }) =>
+            acceptedFiles.map((file) => (
+              <FileUpload.Item key={file.name} file={file}>
+                <FileUpload.ItemPreview type="image/*">
+                  <FileUpload.ItemPreviewImage />
+                </FileUpload.ItemPreview>
+                <FileUpload.ItemName />
+                <FileUpload.ItemDeleteTrigger>
+                  <XIcon />
+                </FileUpload.ItemDeleteTrigger>
+              </FileUpload.Item>
+            ))
+          }
+        </FileUpload.Context>
+      </FileUpload.ItemGroup>
+
+      {/* Rejected Files */}
+      <FileUpload.ItemGroup type="rejected">
+        <h3>Rejected Files</h3>
+        <FileUpload.Context>
+          {({ rejectedFiles }) =>
+            rejectedFiles.map(({ file, errors }) => (
+              <FileUpload.Item key={file.name} file={file}>
+                <FileUpload.ItemName /> {errors.join(', ')}
+                <FileUpload.ItemSizeText />
+                <FileUpload.ItemDeleteTrigger>
+                  <XIcon />
+                </FileUpload.ItemDeleteTrigger>
+              </FileUpload.Item>
+            ))
+          }
+        </FileUpload.Context>
+      </FileUpload.ItemGroup>
+
+      <FileUpload.HiddenInput />
+    </FileUpload.Root>
+  )
+}

packages/react/src/components/file-upload/file-upload-item-group.tsx

@@ -1,16 +1,24 @@
 import { mergeProps } from '@zag-js/react'
+import type { ItemGroupProps } from '@zag-js/file-upload'
 import { forwardRef } from 'react'
+import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useFileUploadContext } from './use-file-upload-context'
+import { FileUploadItemGroupPropsProvider } from './use-file-upload-item-group-props-context'
 
-export interface FileUploadItemGroupBaseProps extends PolymorphicProps {}
+export interface FileUploadItemGroupBaseProps extends PolymorphicProps, ItemGroupProps {}
 export interface FileUploadItemGroupProps extends HTMLProps<'ul'>, FileUploadItemGroupBaseProps {}
 
 export const FileUploadItemGroup = forwardRef<HTMLUListElement, FileUploadItemGroupProps>((props, ref) => {
+  const [itemGroupProps, localProps] = createSplitProps<ItemGroupProps>()(props, ['type'])
   const fileUpload = useFileUploadContext()
-  const mergedProps = mergeProps(fileUpload.getItemGroupProps(), props)
+  const mergedProps = mergeProps(fileUpload.getItemGroupProps(itemGroupProps), localProps)
 
-  return <ark.ul {...mergedProps} ref={ref} />
+  return (
+    <FileUploadItemGroupPropsProvider value={itemGroupProps}>
+      <ark.ul {...mergedProps} ref={ref} />
+    </FileUploadItemGroupPropsProvider>
+  )
 })
 
 FileUploadItemGroup.displayName = 'FileUploadItemGroup'

packages/react/src/components/file-upload/file-upload-item.tsx

@@ -4,18 +4,25 @@ import { forwardRef } from 'react'
 import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { useFileUploadContext } from './use-file-upload-context'
+import { useFileUploadItemGroupPropsContext } from './use-file-upload-item-group-props-context'
 import { FileUploadItemPropsProvider } from './use-file-upload-item-props-context'
 
-export interface FileUploadItemBaseProps extends ItemProps, PolymorphicProps {}
+type ItemBaseProps = Omit<ItemProps, 'type'>
+
+export interface FileUploadItemBaseProps extends ItemBaseProps, PolymorphicProps {}
 export interface FileUploadItemProps extends HTMLProps<'li'>, FileUploadItemBaseProps {}
 
 export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>((props, ref) => {
-  const [itemProps, localProps] = createSplitProps<ItemProps>()(props, ['file'])
+  const [itemProps, localProps] = createSplitProps<ItemBaseProps>()(props, ['file'])
   const fileUpload = useFileUploadContext()
-  const mergedProps = mergeProps(fileUpload.getItemProps(itemProps), localProps)
+
+  const itemGroupProps = useFileUploadItemGroupPropsContext()
+  const itemPropsWithType = { ...itemProps, type: itemGroupProps.type }
+
+  const mergedProps = mergeProps(fileUpload.getItemProps(itemPropsWithType), localProps)
 
   return (
-    <FileUploadItemPropsProvider value={itemProps}>
+    <FileUploadItemPropsProvider value={itemPropsWithType}>
       <ark.li {...mergedProps} ref={ref} />
     </FileUploadItemPropsProvider>
   )

packages/react/src/components/file-upload/file-upload.stories.tsx

@@ -9,14 +9,15 @@ export default meta
 export { AcceptedFileTypes } from './examples/accepted-file-types'
 export { Basic } from './examples/basic'
 export { ClearTrigger } from './examples/clear-trigger'
+export { DirectoryUpload } from './examples/directory-upload'
 export { DragAndDrop } from './examples/drag-and-drop'
 export { ErrorHandling } from './examples/error-handling'
 export { FileTransformations } from './examples/file-transformations'
-export { DirectoryUpload } from './examples/directory-upload'
 export { WithFormRegister } from './examples/form-register'
 export { WithFormSetValue } from './examples/form-set-value'
+export { InitialFiles } from './examples/initial-files'
 export { WithMediaCapture } from './examples/media-capture'
+export { RejectedFiles } from './examples/rejected-files'
 export { RootProvider } from './examples/root-provider'
 export { WithField } from './examples/with-field'
-export { InitialFiles } from './examples/initial-files'
 export { WithPaste } from './examples/with-paste'

packages/react/src/components/file-upload/use-file-upload-item-group-props-context.ts

@@ -0,0 +1,11 @@
+import type { ItemGroupProps } from '@zag-js/file-upload'
+import { createContext } from '../../utils/create-context'
+
+export interface UseFileUploadItemGroupContext extends ItemGroupProps {}
+
+export const [FileUploadItemGroupPropsProvider, useFileUploadItemGroupPropsContext] =
+  createContext<UseFileUploadItemGroupContext>({
+    name: 'FileUploadItemGroupPropsContext',
+    hookName: 'useFileUploadItemGroupPropsContext',
+    providerName: '<FileUploadItemGroupPropsProvider />',
+  })

packages/react/src/components/index.ts

@@ -46,7 +46,6 @@ export * from './steps'
 export * from './switch'
 export * from './tabs'
 export * from './tags-input'
-export * from './time-picker'
 export * from './timer'
 export * from './toast'
 export * from './toggle'