[pull] main from chakra-ui:main

package.json

@@ -36,16 +36,16 @@
     "entities": "4.5.0",
     "@biomejs/biome": "1.9.4",
     "@release-it/keep-a-changelog": "7.0.0",
-    "@types/bun": "1.2.18",
+    "@types/bun": "1.2.19",
     "lefthook": "1.12.2",
     "release-it": "19.0.4",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
     "turbo": "2.5.5",
     "typescript": "5.8.3",
-    "vercel": "44.4.3"
+    "vercel": "44.5.1"
   },
-  "packageManager": "bun@1.2.18",
+  "packageManager": "bun@1.2.19",
   "trustedDependencies": [
     "@ark-ui/website"
   ],

packages/react/CHANGELOG.md

@@ -1,12 +1,42 @@
 ## [Unreleased]
 
+## [5.18.0] - 2025-07-22
+
 ### Added
 
+- **Collection**: Add `useListSelection` hook for managing collection item selection with support for single/multiple
+  selection modes
+
+  ```jsx
+  const collection = createListCollection({ items: ['React', 'Vue', 'Angular'] })
+  const selection = useListSelection({ collection })
+
+  // Check if item is selected
+  const isSelected = selection.isSelected('React')
+
+  // Select/deselect items
+  selection.select('React')
+  selection.toggle('Vue')
+  ```
+
 - **File Upload**: Add support for programmatically controlling the accepted files via `acceptedFiles` and
   `defaultAcceptedFiles`
 
 - **Signature Pad**: Add support for programmatically controlling the paths via `paths` and `defaultPaths` props.
 
+- **Date Picker**: Added hover range preview support for date picker range selection. Added `inHoveredRange`,
+  `firstInHoveredRange`, and `lastInHoveredRange` properties to `DayTableCellState` with corresponding data attributes
+  `data-in-hover-range`, `data-hover-range-start`, and `data-hover-range-end`.
+
+  Hover range states are only active when not overlapping with actual selected range, enabling distinct styling for
+  hover preview vs actual selection in range mode.
+
+### Fixed
+
+- **Date Picker**: Fix date comparison issues when time components are involved. This resolves critical issues with date
+  comparison operations when different date types (`CalendarDate`, `CalendarDateTime`, `ZonedDateTime`) are mixed,
+  particularly in scenarios involving time components.
+
 ## [5.17.0] - 2025-07-18
 
 ### Added

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -86,77 +86,77 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.19.0",
-    "@zag-js/angle-slider": "1.19.0",
-    "@zag-js/anatomy": "1.19.0",
-    "@zag-js/auto-resize": "1.19.0",
-    "@zag-js/avatar": "1.19.0",
-    "@zag-js/carousel": "1.19.0",
-    "@zag-js/checkbox": "1.19.0",
-    "@zag-js/clipboard": "1.19.0",
-    "@zag-js/collapsible": "1.19.0",
-    "@zag-js/collection": "1.19.0",
-    "@zag-js/color-picker": "1.19.0",
-    "@zag-js/color-utils": "1.19.0",
-    "@zag-js/combobox": "1.19.0",
-    "@zag-js/core": "1.19.0",
-    "@zag-js/date-picker": "1.19.0",
-    "@zag-js/date-utils": "1.19.0",
-    "@zag-js/dialog": "1.19.0",
-    "@zag-js/dom-query": "1.19.0",
-    "@zag-js/editable": "1.19.0",
-    "@zag-js/file-upload": "1.19.0",
-    "@zag-js/file-utils": "1.19.0",
-    "@zag-js/focus-trap": "1.19.0",
-    "@zag-js/floating-panel": "1.19.0",
-    "@zag-js/highlight-word": "1.19.0",
-    "@zag-js/hover-card": "1.19.0",
-    "@zag-js/i18n-utils": "1.19.0",
-    "@zag-js/json-tree-utils": "1.19.0",
-    "@zag-js/listbox": "1.19.0",
-    "@zag-js/menu": "1.19.0",
-    "@zag-js/number-input": "1.19.0",
-    "@zag-js/pagination": "1.19.0",
-    "@zag-js/password-input": "1.19.0",
-    "@zag-js/pin-input": "1.19.0",
-    "@zag-js/popover": "1.19.0",
-    "@zag-js/presence": "1.19.0",
-    "@zag-js/progress": "1.19.0",
-    "@zag-js/qr-code": "1.19.0",
-    "@zag-js/radio-group": "1.19.0",
-    "@zag-js/rating-group": "1.19.0",
-    "@zag-js/react": "1.19.0",
-    "@zag-js/select": "1.19.0",
-    "@zag-js/signature-pad": "1.19.0",
-    "@zag-js/slider": "1.19.0",
-    "@zag-js/splitter": "1.19.0",
-    "@zag-js/steps": "1.19.0",
-    "@zag-js/switch": "1.19.0",
-    "@zag-js/tabs": "1.19.0",
-    "@zag-js/tags-input": "1.19.0",
-    "@zag-js/time-picker": "1.19.0",
-    "@zag-js/timer": "1.19.0",
-    "@zag-js/toast": "1.19.0",
-    "@zag-js/toggle": "1.19.0",
-    "@zag-js/toggle-group": "1.19.0",
-    "@zag-js/tooltip": "1.19.0",
-    "@zag-js/tour": "1.19.0",
-    "@zag-js/tree-view": "1.19.0",
-    "@zag-js/types": "1.19.0",
-    "@zag-js/utils": "1.19.0"
+    "@zag-js/accordion": "1.20.0",
+    "@zag-js/angle-slider": "1.20.0",
+    "@zag-js/anatomy": "1.20.0",
+    "@zag-js/auto-resize": "1.20.0",
+    "@zag-js/avatar": "1.20.0",
+    "@zag-js/carousel": "1.20.0",
+    "@zag-js/checkbox": "1.20.0",
+    "@zag-js/clipboard": "1.20.0",
+    "@zag-js/collapsible": "1.20.0",
+    "@zag-js/collection": "1.20.0",
+    "@zag-js/color-picker": "1.20.0",
+    "@zag-js/color-utils": "1.20.0",
+    "@zag-js/combobox": "1.20.0",
+    "@zag-js/core": "1.20.0",
+    "@zag-js/date-picker": "1.20.0",
+    "@zag-js/date-utils": "1.20.0",
+    "@zag-js/dialog": "1.20.0",
+    "@zag-js/dom-query": "1.20.0",
+    "@zag-js/editable": "1.20.0",
+    "@zag-js/file-upload": "1.20.0",
+    "@zag-js/file-utils": "1.20.0",
+    "@zag-js/focus-trap": "1.20.0",
+    "@zag-js/floating-panel": "1.20.0",
+    "@zag-js/highlight-word": "1.20.0",
+    "@zag-js/hover-card": "1.20.0",
+    "@zag-js/i18n-utils": "1.20.0",
+    "@zag-js/json-tree-utils": "1.20.0",
+    "@zag-js/listbox": "1.20.0",
+    "@zag-js/menu": "1.20.0",
+    "@zag-js/number-input": "1.20.0",
+    "@zag-js/pagination": "1.20.0",
+    "@zag-js/password-input": "1.20.0",
+    "@zag-js/pin-input": "1.20.0",
+    "@zag-js/popover": "1.20.0",
+    "@zag-js/presence": "1.20.0",
+    "@zag-js/progress": "1.20.0",
+    "@zag-js/qr-code": "1.20.0",
+    "@zag-js/radio-group": "1.20.0",
+    "@zag-js/rating-group": "1.20.0",
+    "@zag-js/react": "1.20.0",
+    "@zag-js/select": "1.20.0",
+    "@zag-js/signature-pad": "1.20.0",
+    "@zag-js/slider": "1.20.0",
+    "@zag-js/splitter": "1.20.0",
+    "@zag-js/steps": "1.20.0",
+    "@zag-js/switch": "1.20.0",
+    "@zag-js/tabs": "1.20.0",
+    "@zag-js/tags-input": "1.20.0",
+    "@zag-js/time-picker": "1.20.0",
+    "@zag-js/timer": "1.20.0",
+    "@zag-js/toast": "1.20.0",
+    "@zag-js/toggle": "1.20.0",
+    "@zag-js/toggle-group": "1.20.0",
+    "@zag-js/tooltip": "1.20.0",
+    "@zag-js/tour": "1.20.0",
+    "@zag-js/tree-view": "1.20.0",
+    "@zag-js/types": "1.20.0",
+    "@zag-js/utils": "1.20.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
-    "@storybook/addon-a11y": "9.0.17",
-    "@storybook/react-vite": "9.0.17",
+    "@storybook/addon-a11y": "9.0.18",
+    "@storybook/react-vite": "9.0.18",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jsdom": "21.1.7",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
-    "@vitejs/plugin-react": "4.6.0",
+    "@vitejs/plugin-react": "4.7.0",
     "clean-package": "2.2.0",
     "globby": "14.1.0",
     "happy-dom": "18.0.1",
@@ -168,7 +168,7 @@
     "react-frame-component": "5.2.7",
     "react-hook-form": "7.60.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "9.0.17",
+    "storybook": "9.0.18",
     "typescript": "5.8.3",
     "vite": "7.0.5",
     "vite-plugin-dts": "4.5.4",

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

@@ -0,0 +1,9 @@
+import type { Meta } from '@storybook/react-vite'
+
+const meta: Meta = {
+  title: 'Components / Collection',
+}
+
+export default meta
+
+export { ListSelection } from './examples/list-selection'

packages/react/src/components/collection/examples/list-selection.tsx

@@ -0,0 +1,32 @@
+import { createListCollection, useListSelection } from '@ark-ui/react/collection'
+
+export const ListSelection = () => {
+  const collection = createListCollection({
+    items: ['React', 'Vue', 'Angular'],
+  })
+
+  const selection = useListSelection({
+    collection,
+  })
+
+  return (
+    <div>
+      <pre>{JSON.stringify(selection.selectedValues)}</pre>
+      {collection.items.map((item) => (
+        <label
+          key={item}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            userSelect: 'none',
+            backgroundColor: selection.isSelected(item) ? 'lightblue' : 'white',
+          }}
+        >
+          <input type="checkbox" checked={selection.isSelected(item)} onChange={() => selection.select(item)} />
+          <span>{item}</span>
+        </label>
+      ))}
+    </div>
+  )
+}

packages/react/src/components/collection/index.ts

@@ -15,3 +15,4 @@ export {
   type TreeNode,
 } from './tree-collection'
 export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn } from './use-list-collection'
+export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn } from './use-list-selection'