From db1c9f501995454cd5520f2ef50e22a80ede5694 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Thu, 4 Jun 2026 17:24:14 +0200 Subject: [PATCH 01/19] chore: update zag to v2 --- bun.lock | 694 +++++++++++++++++------------------ packages/react/package.json | 132 +++---- packages/solid/package.json | 132 +++---- packages/svelte/package.json | 132 +++---- packages/vue/package.json | 132 +++---- website/package.json | 6 +- 6 files changed, 614 insertions(+), 614 deletions(-) diff --git a/bun.lock b/bun.lock index cc4ee0eb4f..d6b23863b7 100644 --- a/bun.lock +++ b/bun.lock @@ -42,72 +42,72 @@ "version": "5.37.0", "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/react": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1", + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/react": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0", }, "devDependencies": { "@biomejs/biome": "2.4.16", @@ -153,72 +153,72 @@ "version": "5.37.0", "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/solid": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1", + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/solid": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0", }, "devDependencies": { "@biomejs/biome": "2.4.16", @@ -260,72 +260,72 @@ "version": "5.22.0", "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/svelte": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1", + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/svelte": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0", }, "devDependencies": { "@storybook/addon-a11y": "10.4.2", @@ -365,72 +365,72 @@ "version": "5.37.0", "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1", - "@zag-js/vue": "1.41.1", + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0", + "@zag-js/vue": "2.0.0-next.0", }, "devDependencies": { "@biomejs/biome": "2.4.16", @@ -564,9 +564,9 @@ "@types/react": "19.2.16", "@types/react-dom": "19.2.3", "@uidotdev/usehooks": "2.4.1", - "@zag-js/anatomy-icons": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/docs": "1.41.1", + "@zag-js/anatomy-icons": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/docs": "2.0.0-next.0", "better-auth": "1.4.18", "effect": "3.21.2", "lucide-react": "1.17.0", @@ -1808,165 +1808,165 @@ "@yarnpkg/parsers": ["@yarnpkg/parsers@3.0.3", "", { "dependencies": { "js-yaml": "^3.10.0", "tslib": "^2.4.0" } }, "sha512-mQZgUSgFurUtA07ceMjxrWkYz8QtDuYkvPlu0ZqncgjopQ0t6CNEo/OSealkmnagSUx8ZD5ewvezUwUuMqutQg=="], - "@zag-js/accordion": ["@zag-js/accordion@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-SuxmdJm9YnG72MGE+5xbJ7TYt+EWhHU93apelB2mUv3sjGwJYzEaTBG0WuHLk0ZkE95nAjbCz9YPvO7KstbXPw=="], + "@zag-js/accordion": ["@zag-js/accordion@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-64IQN4s4gQBTIPQvkvrME42CHzVAh5AkSMgX5bJ5qi22/8NRhNoqnQ65UPMTquOeb0ZGb6xM/fMCXroWB2l9Dg=="], - "@zag-js/anatomy": ["@zag-js/anatomy@1.41.1", "", {}, "sha512-wBQVpl8TC9O5AjeJrnmNdJWEUYorTi7iklOcySeXIeaz6D7Y0YY0YbEOSFNsRTpn/NQHwkPejf3i5qkKavNHXw=="], + "@zag-js/anatomy": ["@zag-js/anatomy@2.0.0-next.0", "", {}, "sha512-yW7wRVQjkxxDl1qmE8o05qV4sLGk1BCizaK9QoWRT4sCrECFMfXJs+EdqngepTPyGoIBwpJ6Pn5cWwhZ3GhFaQ=="], - "@zag-js/anatomy-icons": ["@zag-js/anatomy-icons@1.41.1", "", { "dependencies": { "@svgr/core": "8.1.0", "@svgr/plugin-jsx": "8.1.0", "color2k": "2.0.3" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-19khJNV5tkXfjJ6ilx60XXbIt0vcrwfI6Fyq5h8XTbzi7I76rlqDVO3OEn9Um6wRQQ+xCIF83pxvIR9q0apE3w=="], + "@zag-js/anatomy-icons": ["@zag-js/anatomy-icons@2.0.0-next.0", "", { "dependencies": { "@svgr/core": "8.1.0", "@svgr/plugin-jsx": "8.1.0", "color2k": "2.0.3" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-ibI+EgUuj40fjrqd/ArJ9T2SC1WeU4SJ2Wr/SVbuRNPO/WUhyyIsk2kqst0Ba76Puayzs/j5WJ0d52NsI6tpcw=="], - "@zag-js/angle-slider": ["@zag-js/angle-slider@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/rect-utils": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-w8oHiKsSxm2QST21t2hqsiNlvftnWELjQB1Dy/lu1NLSXoJHspAzdc0zdlkvATKz5XqAoKmm2tVXY2Btw9w/Ug=="], + "@zag-js/angle-slider": ["@zag-js/angle-slider@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/rect-utils": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-i3W4FWOYSpcS3PruWTjlLje1OFamdvvqjkgsMmSmkk12lG1GyVmR8aGM2I08gqMHrMzmL85JliZFiNYck8R0+A=="], - "@zag-js/aria-hidden": ["@zag-js/aria-hidden@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-+iZ2gG/EygWQRfafcIL9MMgKIP9QCnW8SfxlO71FYEMrexvJyzxyPUxzBn2NfpH+gOogzLrr3lvPTYZu+0kCVQ=="], + "@zag-js/aria-hidden": ["@zag-js/aria-hidden@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-irU/eexNINi8lI1IwjoWuTbJYlUGIFeENI+YvHKrn5MwcwlWUpt8ec/b94W5YF9bwX38YufQpJgMjXqXVuwO7A=="], - "@zag-js/async-list": ["@zag-js/async-list@1.41.1", "", { "dependencies": { "@zag-js/core": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-cCdVTzndpYJDfuiK0KARRjEX4lSMFGXUdLLaV9Xh1528z+FTaYR+k2/9NKNRIFnTPtqW8zWrXwfKOzHZtydHdQ=="], + "@zag-js/async-list": ["@zag-js/async-list@2.0.0-next.0", "", { "dependencies": { "@zag-js/core": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-CjuZ8bocmqemmcEdQH2R7Ul/3zp9IuffSMlN799gHRAT07V0O4kA1P9xKUAe/qqHOn81QRv4f5gPaNPi3V9cKQ=="], - "@zag-js/auto-resize": ["@zag-js/auto-resize@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-As3BL0yxk0dB2+FI8E6bHULjRTeJVUSxv5bfxbQWSjl0aZzE4j7t4DTHNgVmoWQKCSlsGHf0AzymikckCIWhig=="], + "@zag-js/auto-resize": ["@zag-js/auto-resize@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-YOXjAyrhDrqfTMM0o833icJkJPDFKlFhPLF+CEU7zWAoPGG4ysAfuNn0y9J1sibRuCAPCvDycNq3T+sQprAC1w=="], - "@zag-js/avatar": ["@zag-js/avatar@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-ZMQM5aHunfofDQp7zlhGDB7RzAns7PnWo43FBy3jol9odux2bp4k89dhKrxU/FdUW57nBcxfujIpAfqImyWfVg=="], + "@zag-js/avatar": ["@zag-js/avatar@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-gNbZ4mBCNbBMlo2qmGe76uEz0NITbV34H28e3EtzeyvXq8DMsmpq1Y3kw25yWCrbipFvUr2fJoxgWd5LmAGgQg=="], - "@zag-js/carousel": ["@zag-js/carousel@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/scroll-snap": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-ZX9vV5lxcIYVjax0neVySJetl593mJF1zIFLkgtB/COOsk4MJ8aQMrspSr40Z4pidx7TwpkVcdcIVGYzalkFSg=="], + "@zag-js/carousel": ["@zag-js/carousel@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/scroll-snap": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-K7k6uOaq8nuvryZpHOvr5IHl25CGwnKganbLbPzjpLDtAGfPiFKjG2sFbnqyooyQY4kIp/upKTeh2yGZwkdsRg=="], - "@zag-js/cascade-select": ["@zag-js/cascade-select@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/collection": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/rect-utils": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-ymxNUl21IuypC0IRZ3G+QZn1J0LvQVDFhF5LaEOddMxAbAbRAgMscwAecTFPggscOP4eFcOKrZwLS8wQWrXNaA=="], + "@zag-js/cascade-select": ["@zag-js/cascade-select@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/collection": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/rect-utils": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-i2VtA+44j/KWz426h8usq5PBgXM2yLiR6bC+sSsvahHnssoUvWkNjBv+mdRHPPlqNeBO/IohGLMFdpF+E22wlg=="], - "@zag-js/checkbox": ["@zag-js/checkbox@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-0Qv1WhgH/JS2VGoAriV388q6wYEaAxqXrp7MZ0h3bc9bE0KPpCVxUwqpHuM7ZoiIh+pJAV3kxXtEHrAJ6fzCVA=="], + "@zag-js/checkbox": ["@zag-js/checkbox@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-0Pj7yfyDJU9FxKaSkpv7cuaziIUxw87ZVLxxh6M1uKM3wImeW4MV7kWC5WzezpnsWSTBRXZaIGPbk1xmX2C0dg=="], - "@zag-js/clipboard": ["@zag-js/clipboard@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-m1xbIG7I5UBM9M0y8Ph+YKlZyd/UBppJo1V/tHfr7qMUdhIzLjI5xCQkhKFdxtMbrHDre+DjBfK0kKv8+UhvDQ=="], + "@zag-js/clipboard": ["@zag-js/clipboard@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-Cy8gCyvYhFm5Xn0IEtotL5wTD6K3OJIhRE9pC+EKW9ETzQhZTBz+WT5e4etCaU4/C7bWj7ln4GBbEYhK0uK2sA=="], - "@zag-js/collapsible": ["@zag-js/collapsible@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-czUcTqWf4tFBDyZbf97djrHc5+A/eSL1rGLeFscRkUIUKZI0npLdrm2ku8iijU4GdEUnXIre/jXInD9NrSNpCA=="], + "@zag-js/collapsible": ["@zag-js/collapsible@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-CWxMrwoer9dUZnUojMCkYQAGR7lPJgiUQPQgOg06wKfFFISCzHQrHjoYeDKne+AKsoAaOIe/B3KF/TCbdOl38w=="], - "@zag-js/collection": ["@zag-js/collection@1.41.1", "", { "dependencies": { "@zag-js/utils": "1.41.1" } }, "sha512-6Kun1lmkp3k+JHkcwCscrKNmPLAZNIeswpGvbbd3T5Qj7WX7b5A2Z926ZHUMicrXQinAtT90B9zrTurDdJZ4EQ=="], + "@zag-js/collection": ["@zag-js/collection@2.0.0-next.0", "", { "dependencies": { "@zag-js/utils": "2.0.0-next.0" } }, "sha512-TbCQK/tmGaHG9rww1RJypGDgiiCz9Omi1qUIkVDie/nF6UljcqCMUnyXTPMo476p/Nu5C4c/ozScQ/YaQwl1wA=="], - "@zag-js/color-picker": ["@zag-js/color-picker@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/color-utils": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-Em5BmWJETzKePWPa11uAU/ypeqKfYqIdxpaCz2aoQliAHal5oEJSJHLh47oxr3aAl1/raTvzcDiPhJTag6eW0A=="], + "@zag-js/color-picker": ["@zag-js/color-picker@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/color-utils": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-trZpxEmckatvy3xIki7wuPghLvnW8WRqTyc6+UjmDjorLCe1YEy4kfwnNT1A/2OfJS0mu9FpBYd9w25nP4zAnQ=="], - "@zag-js/color-utils": ["@zag-js/color-utils@1.41.1", "", { "dependencies": { "@zag-js/utils": "1.41.1" } }, "sha512-GKY1CwjWxl2wrX/giNnA638CpgyPzQeGvKS2LPFt5BIn3RDK/Lu2Yz1cWAq+WUpGPA5P9gJWV1TQtY0fyGZJDw=="], + "@zag-js/color-utils": ["@zag-js/color-utils@2.0.0-next.0", "", { "dependencies": { "@zag-js/utils": "2.0.0-next.0" } }, "sha512-iAX9xDsPXiTTCsaLzPimJC3Ki1c47R/0JP0Yscxc0ncCD0b5bsYFBjxo+zngreMaEdJ9HlqKmvCHeDlMNQcSlQ=="], - "@zag-js/combobox": ["@zag-js/combobox@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/collection": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/live-region": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-3IbG4VzCDDlZZD1t0puDQq1fC9OKRHtkeUG9Aq9e2+1OPhaSpzwkVI6GqIm0h52koB7plvgcvf4xkbBSC7tkBw=="], + "@zag-js/combobox": ["@zag-js/combobox@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/collection": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/live-region": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-0q+he1BPkT0I9+mdtxfqswpWNoGQbELbbB4hdsE7nszHC5Xhp5hjiKul5oLXcSTPKO5W7s0or8vDbNk/iLBdTA=="], - "@zag-js/core": ["@zag-js/core@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-np7Tlf1EUK2ITojiX3aQy79LWIZhu4xxrS6pE8V/wD0h9JeQmhyNtyC147jqIE/AYjSunhMShsWp/+W1b5skjQ=="], + "@zag-js/core": ["@zag-js/core@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-NQgwNKMFx6ivu8oP0crsG5QqCXgPl+9fklj5cS27cu9K90Z6q4Wu4IYl4A0+AR9VuJqkwWYn9WU+gd4eECGPcg=="], - "@zag-js/date-input": ["@zag-js/date-input@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/date-utils": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/live-region": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-dsFpoAt4IAKR3kKVozhn3MbUECO7yEDvGgmpRtgvpcepTpLw0SbQNlu/ADfNNxjPnUYT/O2Iwb+q2M6XiozpMw=="], + "@zag-js/date-input": ["@zag-js/date-input@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/date-utils": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/live-region": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-RBhDsP7pE4igaQhnh/BzkS5H60LgP6ryUz3PHrn5jiSsdiOPr8NhEDTfkWjxqodYbkNOF8PQsqbiYsWyzk1Imw=="], - "@zag-js/date-picker": ["@zag-js/date-picker@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/date-utils": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/live-region": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-z8Q+rn0fq4UbyLM4LBO1blmWW62azw0/rSycBE+94IPEq0t0XDdMp6BGTDvyakVYPSHtqqQggyVLi36tyz8ntA=="], + "@zag-js/date-picker": ["@zag-js/date-picker@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/date-utils": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/live-region": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-r6nJr/5jP5kGLAvESxAhMFXMutghpZFLjG/0XteLCQLfgSn3+d2lbFQjyBsQrLtOYLm9tdxPnNq3K/mShVCfJw=="], - "@zag-js/date-utils": ["@zag-js/date-utils@1.41.1", "", { "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-35b2DRntJilfYRy/mYgsXYnl8irqTuWfyODlw2oHrRzoT52fJYOTxGGJRMZEAGq0a9CX5GrjMUfJVSw031nYSQ=="], + "@zag-js/date-utils": ["@zag-js/date-utils@2.0.0-next.0", "", { "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-tt3ebBucpokm31x0rBpbIqWCu7Z16FYps0D1h/1KTkjku2pFHel0DAxbLimEdkzwEZ5P+trKuSMDUo1LySuMmQ=="], - "@zag-js/dialog": ["@zag-js/dialog@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/aria-hidden": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-trap": "1.41.1", "@zag-js/remove-scroll": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-+++Ct5Kj2NtAHk1EYHasYPHXm1GfunwE0QKnrtEjUo1yIgKe2NH230JkXKndpiGztxcDpLfkblMuDwot1lNtFw=="], + "@zag-js/dialog": ["@zag-js/dialog@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/aria-hidden": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-trap": "2.0.0-next.0", "@zag-js/remove-scroll": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-SCZLYxf988r4kE74QLCpGAYFvmCf0RZZge1CVSP9CGrTDEISubsrn0cZbnnrnjRvg5MlN3XZv7Rdz4lWxFgBCw=="], - "@zag-js/dismissable": ["@zag-js/dismissable@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1", "@zag-js/interact-outside": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-nM3j3lz8XaYfW755N+Itp08BVFYhKhjlQ3EiBlc3LYwse4h2K5O3FwK87Ckqd/rBKrAb4eYFCkGNFSvjk0U/8g=="], + "@zag-js/dismissable": ["@zag-js/dismissable@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/interact-outside": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-wW7eIq+S9nw2FW6IB/PH1x2HeinR2xvqgBb3FOeTJJ3KupILtWvbO3Aru/6eNRtvY4oA84/LMjqThxbLi55M7A=="], - "@zag-js/docs": ["@zag-js/docs@1.41.1", "", {}, "sha512-6qHKxOtLM5fLvondCrNW2rLJFeYLV2VU1giob6KqyNNv8BSv2+hq3g8zRs+3UFXh08U5KQyTG/1WS1xTCiGTDg=="], + "@zag-js/docs": ["@zag-js/docs@2.0.0-next.0", "", {}, "sha512-olmXlW6Q9s+ctw3s13fmMhrrOnXiBwgvn5JDKPujjdaFLBCrllmBxZKldAny3gce/UjnuoXoCsEGcmHa/+EvMw=="], - "@zag-js/dom-query": ["@zag-js/dom-query@1.41.1", "", { "dependencies": { "@zag-js/types": "1.41.1" } }, "sha512-f6hBV6fPc9Ok/Re/tsxqJ8NcgQzsASQ6YoulUKSQnZMGb7tr0Ks1IH3Hjy3+ARXvCaSjgDhPPXt5+bkieur4eg=="], + "@zag-js/dom-query": ["@zag-js/dom-query@2.0.0-next.0", "", { "dependencies": { "@zag-js/types": "2.0.0-next.0" } }, "sha512-GnWaIsDHzkVvV9yH1DADfJoSiUAboHzUS6fvhPFotMzLVtbvJ/PgunF43yKsPg1KPkDdLTA+Y0AToQqkyaBw0Q=="], - "@zag-js/drawer": ["@zag-js/drawer@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/aria-hidden": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-trap": "1.41.1", "@zag-js/remove-scroll": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-lRdXe+5gkgnmhHCyfwBmken5IJJH4yEH55H5cp7+VZuPfVGF7werTTtrTOcRY+ck+h6X3WQiPhpVIdKdsUuDjw=="], + "@zag-js/drawer": ["@zag-js/drawer@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/aria-hidden": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-trap": "2.0.0-next.0", "@zag-js/remove-scroll": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-aRzisgInpGKqugv9gXHzEPPFN7lsY3e5Y98qTk5hJXSqHjfyOo69e4PMe6a+UJ/XplAMzG1GEoaKS4pFQc8hnw=="], - "@zag-js/editable": ["@zag-js/editable@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/interact-outside": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-UBYnCu2+/1CMomerp5b9OUWkYNTAjghdzv4uPd8bU9d1nZ/u4ewj1Jed8u/Kw3bn+TCCcaCZPIEd7Cluxn+YSw=="], + "@zag-js/editable": ["@zag-js/editable@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/interact-outside": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-K1a+tP8WDvEeZkeZ78yvNs3RKI1sd01aan9NNbm6cutl7vYA7Z6h+fm6D3Ktq8WeUyOSESph7b8OCEp9fTfLUA=="], - "@zag-js/file-upload": ["@zag-js/file-upload@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/file-utils": "1.41.1", "@zag-js/i18n-utils": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-c3Gl6azWFHQmAx20Jtinf4s64lq93rTlETnttic8rPDC6MA3jUj0WXCcZtbch2I6rT03tW6utDEeNG+uqQXPBA=="], + "@zag-js/file-upload": ["@zag-js/file-upload@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/file-utils": "2.0.0-next.0", "@zag-js/i18n-utils": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-Ns5DfjUVK+ypGHii2ySM9iwd93XiFHktwZDparU+O9Onc1QxrSuQeASzG3DLuZ2ERl3a6jjHdQCbpWZDpye0Lg=="], - "@zag-js/file-utils": ["@zag-js/file-utils@1.41.1", "", { "dependencies": { "@zag-js/i18n-utils": "1.41.1" } }, "sha512-BTRqhSiu+bg7pmKA7suRl/VGveYTmli17xAwpbkHO/3zCSfMMwYbfwLIlwXAairgoTkL4j5bqNt6yOTpSf23hA=="], + "@zag-js/file-utils": ["@zag-js/file-utils@2.0.0-next.0", "", { "dependencies": { "@zag-js/i18n-utils": "2.0.0-next.0" } }, "sha512-+CkIx5a2ut3CWoKRi7EpNeZCmZU6pxGvacxVhS8Q3QTBnR1pNM1ac54qUE+KxXEQ6MOL+DdBo+o6OSSivmzBUg=="], - "@zag-js/floating-panel": ["@zag-js/floating-panel@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/rect-utils": "1.41.1", "@zag-js/store": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-HQUAtr6hlCecMn8h+B0wA4n5ZuFj4YRHFXD1FDna51DpduPAugS4e3rayvkCUwHE11scFXOTwaJaENdP+VUc8g=="], + "@zag-js/floating-panel": ["@zag-js/floating-panel@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/rect-utils": "2.0.0-next.0", "@zag-js/store": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-BL9oS3x4ATvATeC8PikrcghHG/qp4Hnffz0QepHTUvzzFZzeliI3J43ZqLV7rvnDFvLIQoTOEO460P6+iC8UzA=="], - "@zag-js/focus-trap": ["@zag-js/focus-trap@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-+KZpzvo4PQJI2M4GYRVgSEyD+X6Pu+paBS1zGlex0FLK+gzUVU0UnEtA1cSNS2oVMyHuu58mBZyYSCmeuMt5XA=="], + "@zag-js/focus-trap": ["@zag-js/focus-trap@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-uo/a4bMPTtJGMb6jEjais+McUZ0Rzl/Lg/acxdQOK/tZ4Iti+TwmVcexWgjC4TaXd27QSpBtEUl4ViF1PGMtLw=="], - "@zag-js/focus-visible": ["@zag-js/focus-visible@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-uIPkVk7gTVFCEGuDTI/2f3tWEcbsX88SrjgIA31F/m3e5/ieDaeiTfq7pxn+naHwZKEhRNScAgwOpu2AQgc6ag=="], + "@zag-js/focus-visible": ["@zag-js/focus-visible@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-Z/nXMus1V+bX9CHeQZx0ggKNEtRyFvjrgxBrR7bwxk05UojPQVk+4w+p72iJEu9yYUCdamKP6TAFIGPiiXN55Q=="], - "@zag-js/highlight-word": ["@zag-js/highlight-word@1.41.1", "", {}, "sha512-oUn9Tpo7pp0CacWujoKTVijyUokbcmtH+QNEznrSRgBeSr/aYlhYJrHEHRvY1PNLCi1RHna5aaBCmZZiI3no9Q=="], + "@zag-js/highlight-word": ["@zag-js/highlight-word@2.0.0-next.0", "", {}, "sha512-SqseE6UMvDS7Rez9ChoTiRAF7VLFv+hw1rAyWPSVawBghyMkzEMKFPk3ogmiDqhJHeeDEJ131wdL+hmnsiFbIw=="], - "@zag-js/hover-card": ["@zag-js/hover-card@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-tb5hFuKz63NKo8SlZ6S8fyOT+cpEOe7oYY/puFu7nCYblyp0XTCLEb+41WO8TNalKSOHZMIsGE7LmtmwAi/1Jg=="], + "@zag-js/hover-card": ["@zag-js/hover-card@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-o3ibTJTlugWSicjnVZmllGI59U8M9iHyw7MmeByuUqYOqZ6oX+lOKb31OicWyj5YGSx7SnG0My//Vu+avYlf7A=="], - "@zag-js/i18n-utils": ["@zag-js/i18n-utils@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-YfKEzNZGun6P0T0BYQ6Xg2VnVrUOkWwDeeqUNhAfQ9mD+ysoZq2ms2/W65glf/je5bdLoXIaePH89ZQJGT4HXQ=="], + "@zag-js/i18n-utils": ["@zag-js/i18n-utils@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-zIC/s6xBS4Id0gnCIFh0HcOZPfqmfVsguKH/m7skk8shyYUa8NCOKn6K9pKv3bDQnCTccgGfh77G8piC1ywnYw=="], - "@zag-js/image-cropper": ["@zag-js/image-cropper@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-j0NPzdt3XKPaT45Vua/2X54DB5WlzyR81cM7l/mSjODOlQa6vsCiLYv/gepw/NfH9dHpu+FBl2zE1NljkCKhnQ=="], + "@zag-js/image-cropper": ["@zag-js/image-cropper@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/rect-utils": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-Rkz4PN2Oplu2UMyYvawV76IL2zLWg8lCIXWwzx7ZI+AYrjFyd34ouHAYds4B1PnnOH4qXRu4pNskN28QcKBWuQ=="], - "@zag-js/interact-outside": ["@zag-js/interact-outside@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-N31jT0bBzCLBtAn31wVFxuxiOnXemNT+lKjK9j5HBZgrqgA/L3RdeV59aZ4Ar02Bb6F6DxU+MImzVvfgra1e6A=="], + "@zag-js/interact-outside": ["@zag-js/interact-outside@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-WHlOdawO7N1W8gxx2Lxy3WMyxix1MBTqYWvbPrYJPkr4GgweEFzrau3dZWe/qf8e/VsE6gNezGoyxP6fs9NvLg=="], - "@zag-js/json-tree-utils": ["@zag-js/json-tree-utils@1.41.1", "", {}, "sha512-klEakeMi+LaQpgnifZB2K1ssCkzTb/PHPsMwGKLfqwRTaaNEafn2PaAcoLGxSR+DpRYvohqlWpYvBd9egiuxNQ=="], + "@zag-js/json-tree-utils": ["@zag-js/json-tree-utils@2.0.0-next.0", "", {}, "sha512-04N04kB59T8F74VK59F2DZ7YHWNledDYw4HN7cMoVichOp5/EVugeflsXNtduhdDckmBtuEZwGPTYCa3rAAhrw=="], - "@zag-js/listbox": ["@zag-js/listbox@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/collection": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-mRUlWslNp/IJz6VkiqMtmUCrCbrkFdGk7M6r3rgshNUlv/xCNNU/FPZQPzHlVRqHeCMHbSAEMJ2VLsyVO6igIg=="], + "@zag-js/listbox": ["@zag-js/listbox@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/collection": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-kwJYlluiEaTYPLfYVZVzz3D7lmTTXpTvB2ScyNhns5xtFRKMnP47arSKrpJwD1vnbE2vclnHU9bgG/Koj2jelw=="], - "@zag-js/live-region": ["@zag-js/live-region@1.41.1", "", {}, "sha512-kWrE/bXvscn37n02wnFyANO+0tkV6Wgzd04D0oxTkwMpTrkpb9lnPi0yUeHksDRWjzayOd4rFzUCMruQBd4r0Q=="], + "@zag-js/live-region": ["@zag-js/live-region@2.0.0-next.0", "", {}, "sha512-ER31vV5WE6iyxLxzCviFMvejr/qK9Z7nZZrailw2zQcZjB9Sg+bbPLtcimpN0atH+Vf+fDPUslVBzjMpSbw2Xw=="], - "@zag-js/marquee": ["@zag-js/marquee@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-aNhLIJuqiP5dReeTUm79YxIODnYHFORyCmtVVtjNP0FQq4gES1u3sI/9K179euE5icRWxMHLRp9FGpbBYsJXvA=="], + "@zag-js/marquee": ["@zag-js/marquee@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-a+KMAPv0D5gLdUUjyd3PlZPORwKNtLscQgvROxwNauCkP4RPXSvb1Of6AwYC73EdOHt42ASxvekEG2gU6/VPxA=="], - "@zag-js/menu": ["@zag-js/menu@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/rect-utils": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-UsrK4rtaUrAqYKWKw+z58ZDySxGRG6eYcTnKU7USHW2xDpCVBjrkoxwwv9OwabXUMqIx7bnmz6PK4cMii7LVrQ=="], + "@zag-js/menu": ["@zag-js/menu@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/rect-utils": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-j3S9FmJ2TrST+5/vHV+sN6OF884LZfhwGWJosysWFsOzaMKQ/TU0CIXgsA7jZvYL9DD54EIGXy3qSUPaqsXARA=="], - "@zag-js/navigation-menu": ["@zag-js/navigation-menu@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-12oDZmNBafxrp1+TgxhFtGslXMgsuu2Zs9vYbwHS+O/MkA4GD7kTIPA+gCco+pmTNeH121+g2XbseJFuuH9+Ig=="], + "@zag-js/navigation-menu": ["@zag-js/navigation-menu@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-3RTvD9/izk43vxFk99ZTeU4/yb526QqOSElVvf5lCInFbPPqkskFskwjnF6WyRDSzopv/Qs04nzb1gNvylsRaw=="], - "@zag-js/number-input": ["@zag-js/number-input@1.41.1", "", { "dependencies": { "@internationalized/number": "3.6.6", "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-qlcwbrLuGLaK1wpGd7PrqrLy9uavNhi+tqQ8AS1f5ELNKWCt1Q0hRTxCVK2Lv2dodbpYLUVp/TaiyirtqRc+uQ=="], + "@zag-js/number-input": ["@zag-js/number-input@2.0.0-next.0", "", { "dependencies": { "@internationalized/number": "3.6.6", "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-y+fAU4yOTK0JNaECiNaUCAzcp1QpFAgEeU10vAoXUyM2sK2uonecNWTwntAnM1NHa2V07K4NFUIUL+b2wVMyjw=="], - "@zag-js/pagination": ["@zag-js/pagination@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-6Aeho/FQvZ6kcJe6PL8TH3I7vzHpQKRnBoNQWYXTXjSWGTt7517QWN4fPwL2l1tXnqPZxScZlOTRJYbXtyRerA=="], + "@zag-js/pagination": ["@zag-js/pagination@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-6551H6+ml+32mKAp8jCkLhwJ3R9/RDaz8HqFmgtBQc3O7ffF3jmYTfxMVFAiENGIeD5/Mlqu6I06IKWqAX3RjQ=="], - "@zag-js/password-input": ["@zag-js/password-input@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-52lyMx+8oxLcgN69AsrfZMrSg6LkzXwqMfgLm7GzSRckJV/DqFTkilUbEv28t1v7c12dCJuL97K4F5NcWulUTA=="], + "@zag-js/password-input": ["@zag-js/password-input@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-rxtdamCkDuRoHrogBFOjWOkLT93XNEdyUHBFnd7ykakFm43CG2zIxwbcp3muWb00odUEg9zq6i8bklPzG3afRg=="], - "@zag-js/pin-input": ["@zag-js/pin-input@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-cZKn2c0epHD9+PZ2SrEuLDREEjtVMK2x80h3tpQF4aC3Fz7su/1dB9XuoWqV8pGaEP4cMr+4dTDZNxBn+ff/6g=="], + "@zag-js/pin-input": ["@zag-js/pin-input@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-6xbHI+xD8pnckKQaWNakdpPY73xapjS6HS6y1zCs6jVF7O6ZDPI3k+M/26iUT/dvH5Rt/M2LBPCZityYmiBbJg=="], - "@zag-js/popover": ["@zag-js/popover@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/aria-hidden": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-trap": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/remove-scroll": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-qCr6Iqkom9gp+3dPYR//1D8LnhzoGn/y8q3s7ZEM2K707KfQ8hbihJgfqoXaxsGtlQj15iYgr7m2I0LWLpE78g=="], + "@zag-js/popover": ["@zag-js/popover@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/aria-hidden": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-trap": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/remove-scroll": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-HcjxtVCw5OdVp7H1Z8oA+18qVlaVvhWvFz0W5OdJAfFU2EDHrzEEiGKBr2TLiQ1VGa59RKLrtWTbXBcpdD3Fgw=="], - "@zag-js/popper": ["@zag-js/popper@1.41.1", "", { "dependencies": { "@floating-ui/dom": "^1.7.6", "@zag-js/dom-query": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-y4WURt3LvOYYch1qVLC+iVP1fzFnkvLv57k6zXb33fYTtCuQvDFQQcAsbqXUe5J3dSNXKZzjXyzRqOid4rDacA=="], + "@zag-js/popper": ["@zag-js/popper@2.0.0-next.0", "", { "dependencies": { "@floating-ui/dom": "^1.7.6", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-xGmsZKPKFkJ6hOTY4pigBV03W1RzJbmqBArgB3cM5AmJqtx/gaOTcKiEkMr7oql2mkQkTiPYFqJbqyvWqIRrGQ=="], - "@zag-js/presence": ["@zag-js/presence@1.41.1", "", { "dependencies": { "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1" } }, "sha512-MNC0iQEByXJ4BcjVM+A8hyWXXr0XeWi7VQRi9It7q46NOu0oguIIlRkNcZtQqzjxMHMWkn5FVRIwzj3eI3F+8A=="], + "@zag-js/presence": ["@zag-js/presence@2.0.0-next.0", "", { "dependencies": { "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0" } }, "sha512-hv8Ua4+IM3aqie0+GcWX3ortJSUb6mrVdLU8mpSPNe+I+eO0w0KOQcl7GWc84Th9UjgngeS4mKXe9HUBD/M6Ig=="], - "@zag-js/progress": ["@zag-js/progress@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-4kGUkv4ZVnQM/D9VDsDylrAWf0z6eoiBwFItfJ7eGz/O9ZSGbNiLBD4hwdovZTPyFT9asNgCpTOG4Lqxx8ql8Q=="], + "@zag-js/progress": ["@zag-js/progress@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-kP9TKIeGj9fQLhTiAyDHMaNC3hRNMCFmkJ2hDk9QdB6Ct6sB38qWf4JtMthY48yh7SiAeI9KoASIn8RUPDLSLA=="], - "@zag-js/qr-code": ["@zag-js/qr-code@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1", "proxy-memoize": "3.0.1", "uqr": "0.1.3" } }, "sha512-mXL1AbDVXbIl5TlcVfBACZMZxhmGdJvdb60zhJACwKjCMGODPV/BgKvCKzuHnJiPMUsCI5fxaxOS62le9QSQIQ=="], + "@zag-js/qr-code": ["@zag-js/qr-code@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0", "proxy-memoize": "3.0.1", "uqr": "0.1.3" } }, "sha512-s2zIV1P/sVh7TWsE8xscf+VTs8kUABfrEdArSGN+Mtj48DN1zjYIo4U/1nUEVhDeM7I9zZ061IsbiqLc3FDeNg=="], - "@zag-js/radio-group": ["@zag-js/radio-group@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-L8mdTIFAf4eMh3sFcdOyLdXbCSFtBtUJY7/hrcWrjIxLFa39/M+n15Dj8dVjLr1dttwQPLkNhDclJBb2+gxrbw=="], + "@zag-js/radio-group": ["@zag-js/radio-group@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-zNUEiRc0jGJH2Ztt1j1/V1l3ChusQYMAaoJ3AKXJXJujPi/PENTwXsX1Cs8q5aUI+hzq5KZqXBsXb/QXw503MA=="], - "@zag-js/rating-group": ["@zag-js/rating-group@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-nH7VvRltPv+kMILR+1B5tmwnfAx3YEP3/7Aa9JIjV3GUOdeMpOqtUAkmCdAmfaGiboBLPkxyPanNcCd2sOYjYQ=="], + "@zag-js/rating-group": ["@zag-js/rating-group@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-YQmUinakn1d+NbiawZYMxyk+lYQiCGpu9jwXnWg4BOZIOH1HYrwLGeKhxNYwZ/f3Awp+ZbLZr1RzkL2TOJQEJQ=="], - "@zag-js/react": ["@zag-js/react@1.41.1", "", { "dependencies": { "@zag-js/core": "1.41.1", "@zag-js/store": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-lphduGB974XvtYUVXhX53C+TzKmcvGjK5H/h9+Q4M+1AwQOq37wKjH3Kt8gV0g5SQ6nW+3RM54mhWdcQvsFQiw=="], + "@zag-js/react": ["@zag-js/react@2.0.0-next.0", "", { "dependencies": { "@zag-js/core": "2.0.0-next.0", "@zag-js/store": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-K49y5ngPsgTdIkBgXxkaPzXxxKN03OgmJ0qlc3fDJZcruzd15ptkQQV9t47C2zX1alutIoXozn0RDMkBas4HfQ=="], - "@zag-js/rect-utils": ["@zag-js/rect-utils@1.41.1", "", {}, "sha512-5hedwkal49xNs3LFOfp7d5slM1Lg6Q32R8jcDGO2f3LjqQB/a/KTM3AAK8LtDaUZBuzFbAfuLHOsdgW+y4anFA=="], + "@zag-js/rect-utils": ["@zag-js/rect-utils@2.0.0-next.0", "", {}, "sha512-XPijVnWYlCs1uSOymgzRK0ZQhv2Qxm8b3E9HexXNz+54vOia1dxMVxjuaYqU4S4WLrIYNqHqI0tECIMK7YpqnQ=="], - "@zag-js/remove-scroll": ["@zag-js/remove-scroll@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-OihOx/EDghH4haEnwTsESMa9hUAOyau7hSgJBwu1cio/zozGJ5/umKRGGMe1v6Eh1len3B+iVEpMf65Rp2bSGg=="], + "@zag-js/remove-scroll": ["@zag-js/remove-scroll@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-LcLRcf8jxT7sIaPfboVwGZGcpBqnR9vLBKPzI7dJCrT0jScMjYxBIf03iIjr0TB1BtH7uWZHzm+IYxBa3XYIuw=="], - "@zag-js/scroll-area": ["@zag-js/scroll-area@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-fefmHQdIK80z2TEjaXLc18RMZjMkY/sjSXBUu0cd+TWlijan+9nrRUqViDLRj5Xmgo2+tf9cfJnfaQ/uf/08VQ=="], + "@zag-js/scroll-area": ["@zag-js/scroll-area@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-h7r8asB5cSeJE1XwNqcAQaZPuZRNA4XPnP16GuCDTLXZDsYw3RinbayeFnI7v4czkPASxxYG4sEU8Uf7OZsEIQ=="], - "@zag-js/scroll-snap": ["@zag-js/scroll-snap@1.41.1", "", { "dependencies": { "@zag-js/dom-query": "1.41.1" } }, "sha512-J+3IuotO/b1b1szx4sZq2Sk4opUL7ZqJzfQKsBz7ybVnRSB02UkeWIO+HD4D2bj1mPRfiEjhRGVjDstAXUqe/A=="], + "@zag-js/scroll-snap": ["@zag-js/scroll-snap@2.0.0-next.0", "", { "dependencies": { "@zag-js/dom-query": "2.0.0-next.0" } }, "sha512-4IOaYY7+AMRfzh33zbWHANmIQWdlNJHrSF6dHJE/B0TKMc04sva3MU7rB+bxMjFOFri0PhPOpqEaQk8LnUTZjQ=="], - "@zag-js/select": ["@zag-js/select@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/collection": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-F3i8WwT0ctR4763UhcnoC8kYCxibOzwDa8vqGfIgLOalP8IatCeCSoX8CPgktMOHxIu4lz9OPgl84Gn+OZV+Bg=="], + "@zag-js/select": ["@zag-js/select@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/collection": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/live-region": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-gZJ+oQQHks9oDdzWgvzP3ZoK7+gu1AyTGhMQ1T4xBtrGCLe5Tes5np7TfK+S4to46toTtu3X5QbKcMqxO0tlxA=="], - "@zag-js/signature-pad": ["@zag-js/signature-pad@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1", "perfect-freehand": "^1.2.3" } }, "sha512-yYQ5sFGOAPbdlVrv9vBFJNHp9pv6DRo75ogPgp3Hpc8QMvFuSkiallBoXXYk2gmon7/l5mDx1LYoo1z6Y8HaKg=="], + "@zag-js/signature-pad": ["@zag-js/signature-pad@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0", "perfect-freehand": "^1.2.3" } }, "sha512-k/T5YmJ4Sm/VWLQWJ5+U3hQpTVDPtWKhBfAzf8FIwT1OTUfTe1YGCXIGhUuTXvWdiHImdxwEuVUesiUWSobTYA=="], - "@zag-js/slider": ["@zag-js/slider@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-JzLrV0N/JsnBIEG9wq1eo8F8ul78Rn2DKhLgOIi+nvP/RlK0lCDDtbRvf1NjG4AyMNM5rXz9Is4yEn3xVZI+Wg=="], + "@zag-js/slider": ["@zag-js/slider@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-p4Wtted9jL8/KfWuHBjFoIjaHZnRe6c442aW75WdW/lDFLRSTxrRKulmQlUno8gnaK0N/NMG601RIZ5tjmw7UA=="], - "@zag-js/solid": ["@zag-js/solid@1.41.1", "", { "dependencies": { "@solid-primitives/keyed": "^1.5.3", "@zag-js/core": "1.41.1", "@zag-js/store": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "solid-js": ">=1.1.3" } }, "sha512-tYGMglYdVU2UM+3xt/cJQXwRx1vpmq7CRp3bq6ZqDzlz3kSkc5MOOAMgacbBtTjSg50lufG8RLyM6eMeYKu0vg=="], + "@zag-js/solid": ["@zag-js/solid@2.0.0-next.0", "", { "dependencies": { "@solid-primitives/keyed": "^1.5.3", "@zag-js/core": "2.0.0-next.0", "@zag-js/store": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "solid-js": ">=1.1.3" } }, "sha512-ZT+uuICt7dusjuxPHesXnx9DRGCfbap/rAtEvnWJXLBxw8JaR9V0ybs+BvCWOoi6YyfWHx6ThETbfOorv9oYuQ=="], - "@zag-js/splitter": ["@zag-js/splitter@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-yH6YRnBj16LZ2U5WjGc5jMtxXjUzfecAj4w+o8kAE98zdTb0/dUV6YcKkm6R0KL25TRqCw7GV7eDm3plB/yyDA=="], + "@zag-js/splitter": ["@zag-js/splitter@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-ix6aThc7MOOMK1lRNnZ6velCuZVJW4cz9Tp2H+eh2RppSBBNGOeoIAuBtek5uIRk+KdBR2TFujNZ+Z0WUiMBfw=="], - "@zag-js/steps": ["@zag-js/steps@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-y24NQlWi8t2Yhg4ef13nwyuiDp//yGEiIugVCK6P5LHyly/dwyatnoWLjtKKAON829DpZGL7Yky6Jt8s3hksUw=="], + "@zag-js/steps": ["@zag-js/steps@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-hXLPy9RWZcW2Omqah47wbw4LkOC7DAQMj+007v72Ii11budg+GfDjaS7HDG0Y6tmNlM8i+UbctZyy5fbK12+oA=="], - "@zag-js/store": ["@zag-js/store@1.41.1", "", { "dependencies": { "proxy-compare": "3.0.1" } }, "sha512-1b6Kv/wvDwRLGjUI7cXvsW5KAB3TPux7FZ5W1264Qf2vaudd9HFoyMAftpI8VnKpcDF+z1t7skzr+4b0ZmFBsQ=="], + "@zag-js/store": ["@zag-js/store@2.0.0-next.0", "", { "dependencies": { "proxy-compare": "3.0.1" } }, "sha512-euLD16YEu13g+ahZX+B8OK4FVnCWikfiwZ7IHVYoBvJ3vE2yFC6vkXzCIK5BO+zm1gqaDrKJfMIqvxh3qk7DIA=="], - "@zag-js/svelte": ["@zag-js/svelte@1.41.1", "", { "dependencies": { "@zag-js/core": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-nZu56rgE6q10/9bLhRkqAxoA6srhOvDlGX5dwbImkp0aTmfLk10KigKVrfwXofBgRWjYLtiePP0Xqx4F1DHpVw=="], + "@zag-js/svelte": ["@zag-js/svelte@2.0.0-next.0", "", { "dependencies": { "@zag-js/core": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-+VJBAzAhOuYpOfwI1PbuVcLoRWXhm37uQgEwoiSby+Euzlfv583vuDy7Rm2BtvAFMWu99mO+Jg4+kNQH6mu/4A=="], - "@zag-js/switch": ["@zag-js/switch@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-69F4F/rGD8swQSPJY01J8To6qDVIWp87nfgNpsrUZ2CRcWxRCAjHqC3LwmVARg3pn8sa82jJPhw6VLJ81biXWQ=="], + "@zag-js/switch": ["@zag-js/switch@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-qMKel59EyRHzt2sO8XrDrXPqcAU03gMlBDAA8dwE/nTs+I1ZtDVp140gNZggWkbGr49AxBiLCDZjBnySKqIfzQ=="], - "@zag-js/tabs": ["@zag-js/tabs@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-2rVX6TuT3bpdhfVYGY97ftRs5sDrp7oum4XlCYoFxQ/LpRTbiAfswsL1x97vrezCUBw0l5gmD6ePEn39BlGP+Q=="], + "@zag-js/tabs": ["@zag-js/tabs@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-LLBk2DviUH1lqpNuxvjK1K9M/tv5svpeyfairSIRqE52kROZrGaHBdS4KocsBs+bPINZUw7KY/+v74DblXBZFw=="], - "@zag-js/tags-input": ["@zag-js/tags-input@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/auto-resize": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/interact-outside": "1.41.1", "@zag-js/live-region": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-OUPPLajvYAAhFCzdn8rHM1uqc6L+M5iMO9l1xjSm31+4xVTa4d21F5DtCJi63cD20i5j3x7SZlLDNVYGufs3fA=="], + "@zag-js/tags-input": ["@zag-js/tags-input@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/auto-resize": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/interact-outside": "2.0.0-next.0", "@zag-js/live-region": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-Gq8uwmkD/u89ZPAW83vTiRMlEdQfRv89R4HarJqhOo7iCJYbhiLLTeJwU/bOgC12/yFYa8pwAWOfR+D5KFlYJA=="], - "@zag-js/timer": ["@zag-js/timer@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-iBQO8WmSVQBrQe13v14IKC7S06aaLYVhQ9pkA9p/E1IEXb92eQcJ9GfaBngHsu5AmDZqwgYRpm2fjBS2tASKrQ=="], + "@zag-js/timer": ["@zag-js/timer@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-ulQnXfmZQmN7cMHljmF62jTvm1LRJWCtkI7vRcbOjTIBinp8IjuK7uQkw6Q4VAxaR9SkcIONpQOg59Q7BIx4Kw=="], - "@zag-js/toast": ["@zag-js/toast@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-vENmUyWtQVhw9TLWYZAlag11aUW+AxuzplMDecMAP4a+engEwReHMPzjtRKjZhRg7II4xF2QxB6px4xY+skhdQ=="], + "@zag-js/toast": ["@zag-js/toast@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-9Y3Z0dTxDgdrLvj7RY6WHMRNgFDW/o++I2bmrWPIgBapGY5zSm51Q09ltQzmXbP6VUGJ3xvtCPiBdCHI869ESA=="], - "@zag-js/toggle": ["@zag-js/toggle@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-iSIkKHJQ2z0/TpC0Hk1mi3iC0B2+bvxlnHphnHydg/KTubWJPXX2Cj9Badf6j7pyEze4CvN7p6Yu92roK8anvg=="], + "@zag-js/toggle": ["@zag-js/toggle@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-8v9iyaDo2s2j/YcLpJdA7Mr5gUpmjqMy1rjw/nDdaiTYd5Haxe5yaJe4YKQKunhIrpQPef5kDrtO9OX+sOHChQ=="], - "@zag-js/toggle-group": ["@zag-js/toggle-group@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-87LfeCB2nk5ZqOTPPjFLLNxneWUSnsC3W10i1satRqLKLdE+BLBJfPkhM+RK43jdrrneWIuRbaCFsARvJByY2g=="], + "@zag-js/toggle-group": ["@zag-js/toggle-group@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-ShwMsSb3v6JY7hkG/xcTqI25/X9uyW2GM+bhC74JYRprsjSDG+P+hyArwfWDoF5lPIogvwX/ANswNis7yE3iIA=="], - "@zag-js/tooltip": ["@zag-js/tooltip@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-visible": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-vQPxQCVRPGUargc2xMeLaVisSTKynnZCDVEavvZlUm7otcXCGRyLyhI889OuGLcsZAWuv10rQhJD5jsYqLnl2Q=="], + "@zag-js/tooltip": ["@zag-js/tooltip@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-visible": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-hmHqdZAiftglZ0pQ6VxV9UVod2iVs4KPEQDoeR77r9P9az9KTRD/sUzIvHOryJQ8RgCvTl366DYSK+c2udFuYA=="], - "@zag-js/tour": ["@zag-js/tour@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dismissable": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/focus-trap": "1.41.1", "@zag-js/interact-outside": "1.41.1", "@zag-js/popper": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-WaqLKMCRKiH+adXfL75LwHRIWBhWfyb8bU4Eug8JkX6CPJxqeQbAnb9LQjnCtCneMVM07WZpl55AM30+ZsGkgg=="], + "@zag-js/tour": ["@zag-js/tour@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dismissable": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/focus-trap": "2.0.0-next.0", "@zag-js/interact-outside": "2.0.0-next.0", "@zag-js/popper": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-+KX3eQhbgGa+gDGb+RGU5ygNe10Jbly6rS4oCM4tNM9YRsMsoAC5x5PufoQSRNn8oKudxgriSrCMCNx34WQ7iQ=="], - "@zag-js/tree-view": ["@zag-js/tree-view@1.41.1", "", { "dependencies": { "@zag-js/anatomy": "1.41.1", "@zag-js/collection": "1.41.1", "@zag-js/core": "1.41.1", "@zag-js/dom-query": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" } }, "sha512-QIgK2w1dS8LWXxofxCILumAZfBFfh6a5SrpH31a1SzHgNjgocQS1cfyMhjPoiDSbdCD9jACKSWauLMN7Q9hFUw=="], + "@zag-js/tree-view": ["@zag-js/tree-view@2.0.0-next.0", "", { "dependencies": { "@zag-js/anatomy": "2.0.0-next.0", "@zag-js/collection": "2.0.0-next.0", "@zag-js/core": "2.0.0-next.0", "@zag-js/dom-query": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" } }, "sha512-qJx+EHrxI5NW5dx4zyZ0jUVgS+xiqr8NPGJqjB+VCb6bW+Mvt1i17aRe9hScwsXsPHfgnuN16sL2fbw08t1hJg=="], - "@zag-js/types": ["@zag-js/types@1.41.1", "", { "dependencies": { "csstype": "3.2.3" } }, "sha512-xhKEX61yvNa/6yofkNe7IihKyt3JLe4/k5JxaH0hj46V4S2Kac2cNAXPgnWHbl1gXGBcfLr+qLFzo4oLl+VdwA=="], + "@zag-js/types": ["@zag-js/types@2.0.0-next.0", "", { "dependencies": { "csstype": "3.2.3" } }, "sha512-gBZogGSsRK84AMeFpzKdh+toJKd5KNEd0IhXk52/U0vAYW8JYYvedsNFGjZo6mWe8h54WklosA7XIPOq5bq9zw=="], - "@zag-js/utils": ["@zag-js/utils@1.41.1", "", {}, "sha512-IZGqDpQYvgCQlGcLTVCzWG5DEz318ZLVJhp8TtT9HPDNd+RJTcVHRja7z+vqQ0Su+wKZkuLlIh5gtraxQ+YX9Q=="], + "@zag-js/utils": ["@zag-js/utils@2.0.0-next.0", "", {}, "sha512-Kz85oQeVoa2JP4KTLBvLs+m1fDDcu7V+r+aZxTLVK5o4X1yuf+pNKWNwyrR/eBtnHvbR3slPXH+JJbiMIR2GIw=="], - "@zag-js/vue": ["@zag-js/vue@1.41.1", "", { "dependencies": { "@zag-js/core": "1.41.1", "@zag-js/store": "1.41.1", "@zag-js/types": "1.41.1", "@zag-js/utils": "1.41.1" }, "peerDependencies": { "vue": ">=3.0.0" } }, "sha512-tszpAxP9+bgNA2eJ9k9fn9jwuvpf4+sEmlkvl7WsayOf8Yi1vW3GVsbAZjI4v40Cl3CuBMHyiFljGsnAXW6MHg=="], + "@zag-js/vue": ["@zag-js/vue@2.0.0-next.0", "", { "dependencies": { "@zag-js/core": "2.0.0-next.0", "@zag-js/store": "2.0.0-next.0", "@zag-js/types": "2.0.0-next.0", "@zag-js/utils": "2.0.0-next.0" }, "peerDependencies": { "vue": ">=3.0.0" } }, "sha512-IH37VzZQAEwODSbGrvUmNEzmnjZBVwP3ZgcFQ53P23rP9EKVUPg5gy17hd8si3ATnuU0P61x0egjSHkoY4rs7w=="], "abbrev": ["abbrev@2.0.0", "", {}, "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ=="], diff --git a/packages/react/package.json b/packages/react/package.json index 4fc8e0a149..614a471b39 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -86,72 +86,72 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/react": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1" + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/react": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0" }, "devDependencies": { "@biomejs/biome": "2.4.16", diff --git a/packages/solid/package.json b/packages/solid/package.json index f52ac03f1b..b1c99cd104 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -85,72 +85,72 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/solid": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1" + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/solid": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0" }, "devDependencies": { "@biomejs/biome": "2.4.16", diff --git a/packages/svelte/package.json b/packages/svelte/package.json index c71d9e984a..5dd01ae6b1 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -142,72 +142,72 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/svelte": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1" + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/svelte": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0" }, "devDependencies": { "@storybook/addon-a11y": "10.4.2", diff --git a/packages/vue/package.json b/packages/vue/package.json index a7ef7a023a..ba013be6df 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -85,72 +85,72 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.12.2", - "@zag-js/accordion": "1.41.1", - "@zag-js/anatomy": "1.41.1", - "@zag-js/angle-slider": "1.41.1", - "@zag-js/async-list": "1.41.1", - "@zag-js/auto-resize": "1.41.1", - "@zag-js/avatar": "1.41.1", - "@zag-js/carousel": "1.41.1", - "@zag-js/cascade-select": "1.41.1", - "@zag-js/checkbox": "1.41.1", - "@zag-js/clipboard": "1.41.1", - "@zag-js/collapsible": "1.41.1", - "@zag-js/collection": "1.41.1", - "@zag-js/color-picker": "1.41.1", - "@zag-js/color-utils": "1.41.1", - "@zag-js/combobox": "1.41.1", - "@zag-js/core": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/date-picker": "1.41.1", - "@zag-js/date-utils": "1.41.1", - "@zag-js/dialog": "1.41.1", - "@zag-js/dom-query": "1.41.1", - "@zag-js/drawer": "1.41.1", - "@zag-js/editable": "1.41.1", - "@zag-js/file-upload": "1.41.1", - "@zag-js/file-utils": "1.41.1", - "@zag-js/focus-visible": "1.41.1", - "@zag-js/floating-panel": "1.41.1", - "@zag-js/focus-trap": "1.41.1", - "@zag-js/highlight-word": "1.41.1", - "@zag-js/hover-card": "1.41.1", - "@zag-js/i18n-utils": "1.41.1", - "@zag-js/image-cropper": "1.41.1", - "@zag-js/json-tree-utils": "1.41.1", - "@zag-js/listbox": "1.41.1", - "@zag-js/marquee": "1.41.1", - "@zag-js/menu": "1.41.1", - "@zag-js/navigation-menu": "1.41.1", - "@zag-js/number-input": "1.41.1", - "@zag-js/pagination": "1.41.1", - "@zag-js/password-input": "1.41.1", - "@zag-js/pin-input": "1.41.1", - "@zag-js/popover": "1.41.1", - "@zag-js/presence": "1.41.1", - "@zag-js/progress": "1.41.1", - "@zag-js/qr-code": "1.41.1", - "@zag-js/radio-group": "1.41.1", - "@zag-js/rating-group": "1.41.1", - "@zag-js/scroll-area": "1.41.1", - "@zag-js/select": "1.41.1", - "@zag-js/signature-pad": "1.41.1", - "@zag-js/slider": "1.41.1", - "@zag-js/splitter": "1.41.1", - "@zag-js/steps": "1.41.1", - "@zag-js/switch": "1.41.1", - "@zag-js/tabs": "1.41.1", - "@zag-js/tags-input": "1.41.1", - "@zag-js/timer": "1.41.1", - "@zag-js/toast": "1.41.1", - "@zag-js/toggle": "1.41.1", - "@zag-js/toggle-group": "1.41.1", - "@zag-js/tooltip": "1.41.1", - "@zag-js/tour": "1.41.1", - "@zag-js/tree-view": "1.41.1", - "@zag-js/types": "1.41.1", - "@zag-js/utils": "1.41.1", - "@zag-js/vue": "1.41.1" + "@zag-js/accordion": "2.0.0-next.0", + "@zag-js/anatomy": "2.0.0-next.0", + "@zag-js/angle-slider": "2.0.0-next.0", + "@zag-js/async-list": "2.0.0-next.0", + "@zag-js/auto-resize": "2.0.0-next.0", + "@zag-js/avatar": "2.0.0-next.0", + "@zag-js/carousel": "2.0.0-next.0", + "@zag-js/cascade-select": "2.0.0-next.0", + "@zag-js/checkbox": "2.0.0-next.0", + "@zag-js/clipboard": "2.0.0-next.0", + "@zag-js/collapsible": "2.0.0-next.0", + "@zag-js/collection": "2.0.0-next.0", + "@zag-js/color-picker": "2.0.0-next.0", + "@zag-js/color-utils": "2.0.0-next.0", + "@zag-js/combobox": "2.0.0-next.0", + "@zag-js/core": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/date-picker": "2.0.0-next.0", + "@zag-js/date-utils": "2.0.0-next.0", + "@zag-js/dialog": "2.0.0-next.0", + "@zag-js/dom-query": "2.0.0-next.0", + "@zag-js/drawer": "2.0.0-next.0", + "@zag-js/editable": "2.0.0-next.0", + "@zag-js/file-upload": "2.0.0-next.0", + "@zag-js/file-utils": "2.0.0-next.0", + "@zag-js/focus-visible": "2.0.0-next.0", + "@zag-js/floating-panel": "2.0.0-next.0", + "@zag-js/focus-trap": "2.0.0-next.0", + "@zag-js/highlight-word": "2.0.0-next.0", + "@zag-js/hover-card": "2.0.0-next.0", + "@zag-js/i18n-utils": "2.0.0-next.0", + "@zag-js/image-cropper": "2.0.0-next.0", + "@zag-js/json-tree-utils": "2.0.0-next.0", + "@zag-js/listbox": "2.0.0-next.0", + "@zag-js/marquee": "2.0.0-next.0", + "@zag-js/menu": "2.0.0-next.0", + "@zag-js/navigation-menu": "2.0.0-next.0", + "@zag-js/number-input": "2.0.0-next.0", + "@zag-js/pagination": "2.0.0-next.0", + "@zag-js/password-input": "2.0.0-next.0", + "@zag-js/pin-input": "2.0.0-next.0", + "@zag-js/popover": "2.0.0-next.0", + "@zag-js/presence": "2.0.0-next.0", + "@zag-js/progress": "2.0.0-next.0", + "@zag-js/qr-code": "2.0.0-next.0", + "@zag-js/radio-group": "2.0.0-next.0", + "@zag-js/rating-group": "2.0.0-next.0", + "@zag-js/scroll-area": "2.0.0-next.0", + "@zag-js/select": "2.0.0-next.0", + "@zag-js/signature-pad": "2.0.0-next.0", + "@zag-js/slider": "2.0.0-next.0", + "@zag-js/splitter": "2.0.0-next.0", + "@zag-js/steps": "2.0.0-next.0", + "@zag-js/switch": "2.0.0-next.0", + "@zag-js/tabs": "2.0.0-next.0", + "@zag-js/tags-input": "2.0.0-next.0", + "@zag-js/timer": "2.0.0-next.0", + "@zag-js/toast": "2.0.0-next.0", + "@zag-js/toggle": "2.0.0-next.0", + "@zag-js/toggle-group": "2.0.0-next.0", + "@zag-js/tooltip": "2.0.0-next.0", + "@zag-js/tour": "2.0.0-next.0", + "@zag-js/tree-view": "2.0.0-next.0", + "@zag-js/types": "2.0.0-next.0", + "@zag-js/utils": "2.0.0-next.0", + "@zag-js/vue": "2.0.0-next.0" }, "devDependencies": { "@biomejs/biome": "2.4.16", diff --git a/website/package.json b/website/package.json index 1f294097f6..51af39243b 100644 --- a/website/package.json +++ b/website/package.json @@ -31,9 +31,9 @@ "@types/react": "19.2.16", "@types/react-dom": "19.2.3", "@uidotdev/usehooks": "2.4.1", - "@zag-js/anatomy-icons": "1.41.1", - "@zag-js/date-input": "1.41.1", - "@zag-js/docs": "1.41.1", + "@zag-js/anatomy-icons": "2.0.0-next.0", + "@zag-js/date-input": "2.0.0-next.0", + "@zag-js/docs": "2.0.0-next.0", "better-auth": "1.4.18", "effect": "3.21.2", "lucide-react": "1.17.0", From 5feed909bfe166b84e1ab447efcf2e2fccade99b Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Thu, 4 Jun 2026 19:29:24 +0200 Subject: [PATCH 02/19] chore: react fix part 1 --- packages/react/src/components/accordion/accordion-root.tsx | 3 ++- packages/react/src/components/carousel/carousel-root.tsx | 6 +++--- .../react/src/components/carousel/examples/autoplay.tsx | 2 +- packages/react/src/components/carousel/examples/basic.tsx | 2 +- .../react/src/components/carousel/examples/controlled.tsx | 2 +- .../src/components/carousel/examples/dynamic-slides.tsx | 2 +- .../src/components/carousel/examples/pause-on-hover.tsx | 2 +- .../src/components/carousel/examples/root-provider.tsx | 2 +- .../react/src/components/carousel/examples/scroll-to.tsx | 2 +- .../src/components/carousel/examples/slides-per-page.tsx | 2 +- packages/react/src/components/carousel/examples/spacing.tsx | 2 +- .../components/carousel/examples/thumbnail-indicator.tsx | 2 +- .../src/components/carousel/examples/variable-size.tsx | 2 +- .../react/src/components/carousel/examples/vertical.tsx | 2 +- packages/react/src/components/select/select-root.tsx | 4 +++- packages/react/src/components/tabs/tabs-root.tsx | 2 +- 16 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/react/src/components/accordion/accordion-root.tsx b/packages/react/src/components/accordion/accordion-root.tsx index ad0bcea5ac..be28ba7aab 100644 --- a/packages/react/src/components/accordion/accordion-root.tsx +++ b/packages/react/src/components/accordion/accordion-root.tsx @@ -10,8 +10,8 @@ import { splitRenderStrategyProps, } from '../../utils/render-strategy.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { type UseAccordionProps, useAccordion } from './use-accordion.ts' import { AccordionProvider } from './use-accordion-context.ts' +import { type UseAccordionProps, useAccordion } from './use-accordion.ts' export interface AccordionRootBaseProps extends UseAccordionProps, RenderStrategyProps, PolymorphicProps {} export interface AccordionRootProps extends Assign, AccordionRootBaseProps> {} @@ -26,6 +26,7 @@ export const AccordionRoot = forwardRef((pro 'disabled', 'id', 'ids', + 'loopFocus', 'multiple', 'onFocusChange', 'onValueChange', diff --git a/packages/react/src/components/carousel/carousel-root.tsx b/packages/react/src/components/carousel/carousel-root.tsx index 00b8fe42bc..3753fdace0 100644 --- a/packages/react/src/components/carousel/carousel-root.tsx +++ b/packages/react/src/components/carousel/carousel-root.tsx @@ -15,20 +15,20 @@ const splitRootProps = createSplitProps() export const CarouselRoot = forwardRef((props, ref) => { const [useCarouselProps, localProps] = splitRootProps(props, [ 'allowMouseDrag', - 'autoplay', + 'autoPlay', 'autoSize', + 'count', 'defaultPage', 'id', 'ids', 'inViewThreshold', + 'itemSpacing', 'loop', 'onAutoplayStatusChange', 'onDragStatusChange', 'onPageChange', 'orientation', - 'padding', 'page', - 'slideCount', 'slidesPerMove', 'slidesPerPage', 'snapType', diff --git a/packages/react/src/components/carousel/examples/autoplay.tsx b/packages/react/src/components/carousel/examples/autoplay.tsx index eb34ef8399..6bdf396025 100644 --- a/packages/react/src/components/carousel/examples/autoplay.tsx +++ b/packages/react/src/components/carousel/examples/autoplay.tsx @@ -12,7 +12,7 @@ const images = [ export const Autoplay = () => { return ( - + {images.map((image, index) => ( diff --git a/packages/react/src/components/carousel/examples/basic.tsx b/packages/react/src/components/carousel/examples/basic.tsx index d1fd8a764f..6a9b5d04b1 100644 --- a/packages/react/src/components/carousel/examples/basic.tsx +++ b/packages/react/src/components/carousel/examples/basic.tsx @@ -12,7 +12,7 @@ const images = [ export const Basic = () => { return ( - + diff --git a/packages/react/src/components/carousel/examples/controlled.tsx b/packages/react/src/components/carousel/examples/controlled.tsx index 3b63158395..45dfb590aa 100644 --- a/packages/react/src/components/carousel/examples/controlled.tsx +++ b/packages/react/src/components/carousel/examples/controlled.tsx @@ -15,7 +15,7 @@ export const Controlled = () => { const [page, setPage] = useState(0) return ( - setPage(e.page)}> + setPage(e.page)}> diff --git a/packages/react/src/components/carousel/examples/dynamic-slides.tsx b/packages/react/src/components/carousel/examples/dynamic-slides.tsx index 8205350a8c..295a85585d 100644 --- a/packages/react/src/components/carousel/examples/dynamic-slides.tsx +++ b/packages/react/src/components/carousel/examples/dynamic-slides.tsx @@ -19,7 +19,7 @@ export const DynamicSlides = () => {
setPage(details.page)} > diff --git a/packages/react/src/components/carousel/examples/pause-on-hover.tsx b/packages/react/src/components/carousel/examples/pause-on-hover.tsx index 4b210a1f30..baf4048dab 100644 --- a/packages/react/src/components/carousel/examples/pause-on-hover.tsx +++ b/packages/react/src/components/carousel/examples/pause-on-hover.tsx @@ -11,7 +11,7 @@ const images = [ export const PauseOnHover = () => { return ( - + {({ isPlaying }) => ( diff --git a/packages/react/src/components/carousel/examples/root-provider.tsx b/packages/react/src/components/carousel/examples/root-provider.tsx index 2e3ac5ad95..872f3d68cb 100644 --- a/packages/react/src/components/carousel/examples/root-provider.tsx +++ b/packages/react/src/components/carousel/examples/root-provider.tsx @@ -11,7 +11,7 @@ const images = [ ] export const RootProvider = () => { - const carousel = useCarousel({ slideCount: images.length }) + const carousel = useCarousel({ count: images.length }) return (
diff --git a/packages/react/src/components/carousel/examples/scroll-to.tsx b/packages/react/src/components/carousel/examples/scroll-to.tsx index c5b083c4be..4a43ade0dc 100644 --- a/packages/react/src/components/carousel/examples/scroll-to.tsx +++ b/packages/react/src/components/carousel/examples/scroll-to.tsx @@ -5,7 +5,7 @@ import styles from 'styles/carousel.module.css' export const ScrollTo = () => { return ( - + {(api) => (
- {list.items.length === 0 && !list.loading && ( + {list.items.length === 0 && !list.isLoading && (
No users found with current filters
)}
diff --git a/packages/react/src/components/collection/examples/async-list/filter.tsx b/packages/react/src/components/collection/examples/async-list/filter.tsx index eead8eaef6..a28a512cff 100644 --- a/packages/react/src/components/collection/examples/async-list/filter.tsx +++ b/packages/react/src/components/collection/examples/async-list/filter.tsx @@ -16,17 +16,17 @@ interface User { export const Filter = () => { const list = useAsyncList({ initialItems: mockUsers.slice(0, LIMIT), - async load({ filterText }) { + async load({ filter }) { await delay(500) - if (!filterText) { + if (!filter) { return { items: mockUsers.slice(0, LIMIT) } } const filtered = mockUsers.filter( (user) => - user.name.toLowerCase().includes(filterText.toLowerCase()) || - user.email.toLowerCase().includes(filterText.toLowerCase()), + user.name.toLowerCase().includes(filter.toLowerCase()) || + user.email.toLowerCase().includes(filter.toLowerCase()), ) return { items: filtered.slice(0, LIMIT) } @@ -40,10 +40,10 @@ export const Filter = () => { className={field.Input} type="text" placeholder="Search users..." - value={list.filterText} - onChange={(e) => list.setFilterText(e.target.value)} + value={list.filter} + onChange={(e) => list.setFilter(e.target.value)} /> - {list.loading && ( + {list.isLoading && ( Searching @@ -66,7 +66,7 @@ export const Filter = () => { ))} - {list.items.length === 0 && !list.loading &&
No results found
} + {list.items.length === 0 && !list.isLoading &&
No results found
} ) } diff --git a/packages/react/src/components/collection/examples/async-list/infinite-loading.tsx b/packages/react/src/components/collection/examples/async-list/infinite-loading.tsx index fb9b13882d..42493bcd18 100644 --- a/packages/react/src/components/collection/examples/async-list/infinite-loading.tsx +++ b/packages/react/src/components/collection/examples/async-list/infinite-loading.tsx @@ -16,7 +16,7 @@ export const InfiniteLoading = () => { const list = useAsyncList({ autoReload: true, async load({ cursor }) { - const page = cursor || 1 + const page = Number(cursor) || 1 const start = (page - 1) * LIMIT const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_start=${start}&_limit=${LIMIT}`) @@ -30,7 +30,7 @@ export const InfiniteLoading = () => { return { items: posts, - cursor: hasNextPage ? page + 1 : undefined, + cursor: hasNextPage ? String(page + 1) : undefined, } }, }) @@ -43,8 +43,8 @@ export const InfiniteLoading = () => { {list.cursor && ` (more available)`} {list.cursor && ( - - {list.loading && ( + {list.isLoading && ( Loading diff --git a/packages/react/src/components/combobox/combobox-root.tsx b/packages/react/src/components/combobox/combobox-root.tsx index 51233a0f84..11fcbfb1d6 100644 --- a/packages/react/src/components/combobox/combobox-root.tsx +++ b/packages/react/src/components/combobox/combobox-root.tsx @@ -25,7 +25,6 @@ const ComboboxImpl = (props: ComboboxRootProps, ref 'autoFocus', 'closeOnSelect', 'collection', - 'composite', 'defaultHighlightedValue', 'defaultInputValue', 'defaultOpen', @@ -56,6 +55,7 @@ const ComboboxImpl = (props: ComboboxRootProps, ref 'openOnClick', 'openOnKeyPress', 'placeholder', + 'popupType', 'positioning', 'readOnly', 'required', diff --git a/packages/react/src/components/combobox/examples/async-search.tsx b/packages/react/src/components/combobox/examples/async-search.tsx index ea83bdb4b9..457284c589 100644 --- a/packages/react/src/components/combobox/examples/async-search.tsx +++ b/packages/react/src/components/combobox/examples/async-search.tsx @@ -15,8 +15,8 @@ interface Movie { export const AsyncSearch = () => { const list = useAsyncList({ - async load({ filterText, signal }) { - if (!filterText) return { items: [] } + async load({ filter, signal }) { + if (!filter) return { items: [] } await new Promise((resolve) => setTimeout(resolve, 300)) @@ -24,9 +24,9 @@ export const AsyncSearch = () => { const items = allMovies.filter( (movie) => - movie.title.toLowerCase().includes(filterText.toLowerCase()) || - movie.director.toLowerCase().includes(filterText.toLowerCase()) || - movie.genre.toLowerCase().includes(filterText.toLowerCase()), + movie.title.toLowerCase().includes(filter.toLowerCase()) || + movie.director.toLowerCase().includes(filter.toLowerCase()) || + movie.genre.toLowerCase().includes(filter.toLowerCase()), ) return { items } @@ -42,7 +42,7 @@ export const AsyncSearch = () => { const handleInputChange = (details: Combobox.InputValueChangeDetails) => { if (details.reason === 'input-change') { startTransition(() => { - list.setFilterText(details.inputValue) + list.setFilter(details.inputValue) }) } } @@ -64,7 +64,7 @@ export const AsyncSearch = () => { - {list.loading ? ( + {list.isLoading ? (
Searching... @@ -73,7 +73,7 @@ export const AsyncSearch = () => {
{list.error.message}
) : list.items.length === 0 ? (
- {list.filterText ? 'No results found' : 'Start typing to search movies...'} + {list.filter ? 'No results found' : 'Start typing to search movies...'}
) : ( collection.items.map((movie) => ( diff --git a/packages/react/src/components/floating-panel/examples/anchor-position.tsx b/packages/react/src/components/floating-panel/examples/anchor-position.tsx index 5f7791b257..fb4325d728 100644 --- a/packages/react/src/components/floating-panel/examples/anchor-position.tsx +++ b/packages/react/src/components/floating-panel/examples/anchor-position.tsx @@ -43,14 +43,14 @@ export const AnchorPosition = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/basic.tsx b/packages/react/src/components/floating-panel/examples/basic.tsx index a55e9c37a9..8736665b57 100644 --- a/packages/react/src/components/floating-panel/examples/basic.tsx +++ b/packages/react/src/components/floating-panel/examples/basic.tsx @@ -35,14 +35,14 @@ export const Basic = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/context.tsx b/packages/react/src/components/floating-panel/examples/context.tsx index f45133c259..ebdbd2369f 100644 --- a/packages/react/src/components/floating-panel/examples/context.tsx +++ b/packages/react/src/components/floating-panel/examples/context.tsx @@ -38,14 +38,14 @@ export const Context = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/controlled-open.tsx b/packages/react/src/components/floating-panel/examples/controlled-open.tsx index 4a3cfeb192..3f2e5edc80 100644 --- a/packages/react/src/components/floating-panel/examples/controlled-open.tsx +++ b/packages/react/src/components/floating-panel/examples/controlled-open.tsx @@ -39,14 +39,14 @@ export const ControlledOpen = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/controlled-position.tsx b/packages/react/src/components/floating-panel/examples/controlled-position.tsx index 6e2800d0e9..1daa02e5d3 100644 --- a/packages/react/src/components/floating-panel/examples/controlled-position.tsx +++ b/packages/react/src/components/floating-panel/examples/controlled-position.tsx @@ -39,14 +39,14 @@ export const ControlledPosition = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/controlled-size.tsx b/packages/react/src/components/floating-panel/examples/controlled-size.tsx index 53bf187ea9..ecf85577d2 100644 --- a/packages/react/src/components/floating-panel/examples/controlled-size.tsx +++ b/packages/react/src/components/floating-panel/examples/controlled-size.tsx @@ -39,14 +39,14 @@ export const ControlledSize = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/examples/lazy-mount.tsx b/packages/react/src/components/floating-panel/examples/lazy-mount.tsx index c58d85fcfc..f7f5013b84 100644 --- a/packages/react/src/components/floating-panel/examples/lazy-mount.tsx +++ b/packages/react/src/components/floating-panel/examples/lazy-mount.tsx @@ -35,14 +35,14 @@ export const LazyMount = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/react/src/components/floating-panel/floating-panel-resize-trigger.tsx b/packages/react/src/components/floating-panel/floating-panel-resize-trigger.tsx index bf9b14f8e7..eae0cd3b98 100644 --- a/packages/react/src/components/floating-panel/floating-panel-resize-trigger.tsx +++ b/packages/react/src/components/floating-panel/floating-panel-resize-trigger.tsx @@ -13,7 +13,7 @@ export interface FloatingPanelResizeTriggerProps extends HTMLProps<'div'>, Float const splitResizeTriggerProps = createSplitProps() export const FloatingPanelResizeTrigger = forwardRef((props, ref) => { - const [resizeProps, localProps] = splitResizeTriggerProps(props, ['axis']) + const [resizeProps, localProps] = splitResizeTriggerProps(props, ['placement']) const floatingPanel = useFloatingPanelContext() const mergedProps = mergeProps(floatingPanel.getResizeTriggerProps(resizeProps), localProps) diff --git a/packages/react/src/components/floating-panel/floating-panel.ts b/packages/react/src/components/floating-panel/floating-panel.ts index 47bbc886f6..8628f50ad8 100644 --- a/packages/react/src/components/floating-panel/floating-panel.ts +++ b/packages/react/src/components/floating-panel/floating-panel.ts @@ -1,12 +1,12 @@ -export { resizeTriggerAxes } from '@zag-js/floating-panel' +export { resizeTriggerPlacements } from '@zag-js/floating-panel' export type { AnchorPositionDetails, ElementIds, + HandlePosition, IntlTranslations, OpenChangeDetails, Point, PositionChangeDetails, - ResizeTriggerAxis, Size, SizeChangeDetails, Stage, diff --git a/packages/react/src/components/floating-panel/index.ts b/packages/react/src/components/floating-panel/index.ts index f6543a8b99..2cce4eab69 100644 --- a/packages/react/src/components/floating-panel/index.ts +++ b/packages/react/src/components/floating-panel/index.ts @@ -5,7 +5,7 @@ export type { OpenChangeDetails as FloatingPanelOpenChangeDetails, Point as FloatingPanelPoint, PositionChangeDetails as FloatingPanelPositionChangeDetails, - ResizeTriggerAxis as FloatingPanelResizeTriggerAxis, + HandlePosition as FloatingPanelHandlePosition, Size as FloatingPanelSize, SizeChangeDetails as FloatingPanelSizeChangeDetails, Stage as FloatingPanelStage, diff --git a/packages/react/src/components/image-cropper/examples/aspect-ratio.tsx b/packages/react/src/components/image-cropper/examples/aspect-ratio.tsx index feca0335cb..afe7df73fd 100644 --- a/packages/react/src/components/image-cropper/examples/aspect-ratio.tsx +++ b/packages/react/src/components/image-cropper/examples/aspect-ratio.tsx @@ -37,8 +37,8 @@ export const AspectRatio = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/basic.tsx b/packages/react/src/components/image-cropper/examples/basic.tsx index 1052867498..09b2883d0e 100644 --- a/packages/react/src/components/image-cropper/examples/basic.tsx +++ b/packages/react/src/components/image-cropper/examples/basic.tsx @@ -12,8 +12,8 @@ export const Basic = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/circle.tsx b/packages/react/src/components/image-cropper/examples/circle.tsx index a8bae2fb18..853960f32d 100644 --- a/packages/react/src/components/image-cropper/examples/circle.tsx +++ b/packages/react/src/components/image-cropper/examples/circle.tsx @@ -12,8 +12,8 @@ export const Circle = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/context.tsx b/packages/react/src/components/image-cropper/examples/context.tsx index 8f1cd506ef..780468ebac 100644 --- a/packages/react/src/components/image-cropper/examples/context.tsx +++ b/packages/react/src/components/image-cropper/examples/context.tsx @@ -30,8 +30,8 @@ export const Context = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/controlled-zoom.tsx b/packages/react/src/components/image-cropper/examples/controlled-zoom.tsx index fdb18b6a6b..25fb9b0bac 100644 --- a/packages/react/src/components/image-cropper/examples/controlled-zoom.tsx +++ b/packages/react/src/components/image-cropper/examples/controlled-zoom.tsx @@ -27,8 +27,8 @@ export const ControlledZoom = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/crop-preview.tsx b/packages/react/src/components/image-cropper/examples/crop-preview.tsx index 800fecdee0..00e1018d07 100644 --- a/packages/react/src/components/image-cropper/examples/crop-preview.tsx +++ b/packages/react/src/components/image-cropper/examples/crop-preview.tsx @@ -33,8 +33,8 @@ export const CropPreview = () => { crossOrigin="anonymous" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/events.tsx b/packages/react/src/components/image-cropper/examples/events.tsx index 9e376df2b6..0c9bea4e41 100644 --- a/packages/react/src/components/image-cropper/examples/events.tsx +++ b/packages/react/src/components/image-cropper/examples/events.tsx @@ -20,8 +20,8 @@ export const Events = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/flip.tsx b/packages/react/src/components/image-cropper/examples/flip.tsx index 3c76a2c6fd..85aac92677 100644 --- a/packages/react/src/components/image-cropper/examples/flip.tsx +++ b/packages/react/src/components/image-cropper/examples/flip.tsx @@ -36,8 +36,8 @@ export const Flip = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/initial-crop.tsx b/packages/react/src/components/image-cropper/examples/initial-crop.tsx index b546570b04..95b5934841 100644 --- a/packages/react/src/components/image-cropper/examples/initial-crop.tsx +++ b/packages/react/src/components/image-cropper/examples/initial-crop.tsx @@ -14,8 +14,8 @@ export const InitialCrop = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/min-max-size.tsx b/packages/react/src/components/image-cropper/examples/min-max-size.tsx index 872eea628c..c119dbe6ad 100644 --- a/packages/react/src/components/image-cropper/examples/min-max-size.tsx +++ b/packages/react/src/components/image-cropper/examples/min-max-size.tsx @@ -14,8 +14,8 @@ export const MinMaxSize = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/reset.tsx b/packages/react/src/components/image-cropper/examples/reset.tsx index d04829725c..590b90d032 100644 --- a/packages/react/src/components/image-cropper/examples/reset.tsx +++ b/packages/react/src/components/image-cropper/examples/reset.tsx @@ -38,8 +38,8 @@ export const Reset = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/root-provider.tsx b/packages/react/src/components/image-cropper/examples/root-provider.tsx index a5d3778339..7aad864e64 100644 --- a/packages/react/src/components/image-cropper/examples/root-provider.tsx +++ b/packages/react/src/components/image-cropper/examples/root-provider.tsx @@ -28,8 +28,8 @@ export const RootProvider = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/rotation.tsx b/packages/react/src/components/image-cropper/examples/rotation.tsx index a06db82d02..84437bd4a3 100644 --- a/packages/react/src/components/image-cropper/examples/rotation.tsx +++ b/packages/react/src/components/image-cropper/examples/rotation.tsx @@ -27,8 +27,8 @@ export const Rotation = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/examples/zoom-limits.tsx b/packages/react/src/components/image-cropper/examples/zoom-limits.tsx index 2ab647db9e..33f5e23539 100644 --- a/packages/react/src/components/image-cropper/examples/zoom-limits.tsx +++ b/packages/react/src/components/image-cropper/examples/zoom-limits.tsx @@ -41,8 +41,8 @@ export const ZoomLimits = () => { alt="Sample" /> - {ImageCropper.handles.map((position) => ( - + {ImageCropper.placements.map((placement) => ( +
))} diff --git a/packages/react/src/components/image-cropper/image-cropper-handle.tsx b/packages/react/src/components/image-cropper/image-cropper-handle.tsx index f2e3ed3a9d..db3a5a75f8 100644 --- a/packages/react/src/components/image-cropper/image-cropper-handle.tsx +++ b/packages/react/src/components/image-cropper/image-cropper-handle.tsx @@ -10,9 +10,9 @@ export interface ImageCropperHandleBaseProps extends PolymorphicProps, HandlePro export interface ImageCropperHandleProps extends HTMLProps<'div'>, ImageCropperHandleBaseProps {} export const ImageCropperHandle = forwardRef((props, ref) => { - const { position, ...localProps } = props + const { placement, ...localProps } = props const imageCropper = useImageCropperContext() - const mergedProps = mergeProps(imageCropper.getHandleProps({ position }), localProps) + const mergedProps = mergeProps(imageCropper.getHandleProps({ placement }), localProps) return }) diff --git a/packages/react/src/components/image-cropper/image-cropper.ts b/packages/react/src/components/image-cropper/image-cropper.ts index 3393d9f369..1147a553ef 100644 --- a/packages/react/src/components/image-cropper/image-cropper.ts +++ b/packages/react/src/components/image-cropper/image-cropper.ts @@ -9,7 +9,7 @@ export type { PreviewDescriptionDetails, SelectionValueTextDetails, } from '@zag-js/image-cropper' -export { handles } from '@zag-js/image-cropper' +export { placements } from '@zag-js/image-cropper' export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps, diff --git a/packages/react/src/components/number-input/number-input-root.tsx b/packages/react/src/components/number-input/number-input-root.tsx index 9f3b33c085..7032cc9223 100644 --- a/packages/react/src/components/number-input/number-input-root.tsx +++ b/packages/react/src/components/number-input/number-input-root.tsx @@ -27,6 +27,7 @@ export const NumberInputRoot = forwardRef( 'ids', 'inputMode', 'invalid', + 'largeStep', 'locale', 'max', 'min', @@ -38,6 +39,11 @@ export const NumberInputRoot = forwardRef( 'pattern', 'readOnly', 'required', + 'scrubberDirection', + 'scrubberPixelSensitivity', + 'scrubberTeleportDistance', + 'smallStep', + 'snapOnStep', 'spinOnPress', 'step', 'translations', diff --git a/packages/react/src/components/pin-input/examples/basic.tsx b/packages/react/src/components/pin-input/examples/basic.tsx index ee969363fd..22c5f0cb31 100644 --- a/packages/react/src/components/pin-input/examples/basic.tsx +++ b/packages/react/src/components/pin-input/examples/basic.tsx @@ -2,7 +2,7 @@ import { PinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const Basic = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/examples/blur-on-complete.tsx b/packages/react/src/components/pin-input/examples/blur-on-complete.tsx index 3c2314d365..538510b456 100644 --- a/packages/react/src/components/pin-input/examples/blur-on-complete.tsx +++ b/packages/react/src/components/pin-input/examples/blur-on-complete.tsx @@ -2,7 +2,7 @@ import { PinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const BlurOnComplete = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/examples/custom-placeholder.tsx b/packages/react/src/components/pin-input/examples/custom-placeholder.tsx index 4be4c8b475..8e6b25845d 100644 --- a/packages/react/src/components/pin-input/examples/custom-placeholder.tsx +++ b/packages/react/src/components/pin-input/examples/custom-placeholder.tsx @@ -2,7 +2,7 @@ import { PinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const CustomPlaceholder = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/examples/mask.tsx b/packages/react/src/components/pin-input/examples/mask.tsx index 35b56853c6..057a3ff219 100644 --- a/packages/react/src/components/pin-input/examples/mask.tsx +++ b/packages/react/src/components/pin-input/examples/mask.tsx @@ -2,7 +2,7 @@ import { PinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const Mask = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/examples/otp-mode.tsx b/packages/react/src/components/pin-input/examples/otp-mode.tsx index 37077542c7..c31c85de0d 100644 --- a/packages/react/src/components/pin-input/examples/otp-mode.tsx +++ b/packages/react/src/components/pin-input/examples/otp-mode.tsx @@ -2,7 +2,7 @@ import { PinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const OTPMode = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/examples/root-provider.tsx b/packages/react/src/components/pin-input/examples/root-provider.tsx index 7708169af6..55decd6247 100644 --- a/packages/react/src/components/pin-input/examples/root-provider.tsx +++ b/packages/react/src/components/pin-input/examples/root-provider.tsx @@ -2,7 +2,7 @@ import { PinInput, usePinInput } from '@ark-ui/react/pin-input' import styles from 'styles/pin-input.module.css' export const RootProvider = () => { - const pinInput = usePinInput({ onValueComplete: (e) => alert(e.valueAsString) }) + const pinInput = usePinInput({ count: 3, onValueComplete: (e) => alert(e.valueAsString) }) return (
diff --git a/packages/react/src/components/pin-input/examples/with-field.tsx b/packages/react/src/components/pin-input/examples/with-field.tsx index 877e8ae38d..27bf2c3d2a 100644 --- a/packages/react/src/components/pin-input/examples/with-field.tsx +++ b/packages/react/src/components/pin-input/examples/with-field.tsx @@ -5,7 +5,7 @@ import styles from 'styles/pin-input.module.css' export const WithField = () => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/tests/basic.tsx b/packages/react/src/components/pin-input/tests/basic.tsx index 4fb8afbe6f..78f797d9d2 100644 --- a/packages/react/src/components/pin-input/tests/basic.tsx +++ b/packages/react/src/components/pin-input/tests/basic.tsx @@ -1,8 +1,8 @@ import { Field } from '@ark-ui/react/field' import { PinInput } from '../index.ts' -export const ComponentUnderTest = (props: PinInput.RootProps) => ( - +export const ComponentUnderTest = (props: Partial) => ( + Label {[0, 1, 2].map((id, index) => ( @@ -15,7 +15,7 @@ export const ComponentUnderTest = (props: PinInput.RootProps) => ( export const PinInputWithField = (props: Field.RootProps) => ( - + Label {[0, 1, 2].map((id, index) => ( diff --git a/packages/react/src/components/pin-input/use-pin-input.ts b/packages/react/src/components/pin-input/use-pin-input.ts index 7802413c9e..87ac8d3ffb 100644 --- a/packages/react/src/components/pin-input/use-pin-input.ts +++ b/packages/react/src/components/pin-input/use-pin-input.ts @@ -10,7 +10,7 @@ import { useFieldContext } from '../field/index.ts' export interface UsePinInputProps extends Optional, 'id'> {} export interface UsePinInputReturn extends pinInput.Api {} -export const usePinInput = (props?: UsePinInputProps): UsePinInputReturn => { +export const usePinInput = (props: UsePinInputProps): UsePinInputReturn => { const id = useId() const { getRootNode } = useEnvironmentContext() const { dir } = useLocaleContext() diff --git a/packages/react/src/components/segment-group/segment-group-indicator.tsx b/packages/react/src/components/segment-group/segment-group-indicator.tsx index d4c5b0014c..98e562740a 100644 --- a/packages/react/src/components/segment-group/segment-group-indicator.tsx +++ b/packages/react/src/components/segment-group/segment-group-indicator.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' export interface SegmentGroupIndicatorBaseProps extends PolymorphicProps {} @@ -11,11 +10,7 @@ export interface SegmentGroupIndicatorProps extends HTMLProps<'div'>, SegmentGro export const SegmentGroupIndicator = forwardRef((props, ref) => { const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps( - segmentGroup.getIndicatorProps(), - parts.indicator.attrs as Record, - props, - ) + const mergedProps = mergeProps(segmentGroup.getIndicatorProps(), props) return }) diff --git a/packages/react/src/components/segment-group/segment-group-item-control.tsx b/packages/react/src/components/segment-group/segment-group-item-control.tsx index 78657e4cf5..165de6c4d2 100644 --- a/packages/react/src/components/segment-group/segment-group-item-control.tsx +++ b/packages/react/src/components/segment-group/segment-group-item-control.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.ts' @@ -13,11 +12,7 @@ export interface SegmentGroupItemControlProps extends HTMLProps<'div'>, SegmentG export const SegmentGroupItemControl = forwardRef((props, ref) => { const segmentGroup = useSegmentGroupContext() const itemProps = useSegmentGroupItemPropsContext() - const mergedProps = mergeProps( - segmentGroup.getItemControlProps(itemProps), - parts.itemControl.attrs as Record, - props, - ) + const mergedProps = mergeProps(segmentGroup.getItemControlProps(itemProps), props) return }) diff --git a/packages/react/src/components/segment-group/segment-group-item-text.tsx b/packages/react/src/components/segment-group/segment-group-item-text.tsx index 27ead284ab..12c08c3065 100644 --- a/packages/react/src/components/segment-group/segment-group-item-text.tsx +++ b/packages/react/src/components/segment-group/segment-group-item-text.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.ts' @@ -13,11 +12,7 @@ export interface SegmentGroupItemTextProps extends HTMLProps<'span'>, SegmentGro export const SegmentGroupItemText = forwardRef((props, ref) => { const segmentGroup = useSegmentGroupContext() const itemProps = useSegmentGroupItemPropsContext() - const mergedProps = mergeProps( - segmentGroup.getItemTextProps(itemProps), - parts.itemText.attrs as Record, - props, - ) + const mergedProps = mergeProps(segmentGroup.getItemTextProps(itemProps), props) return }) diff --git a/packages/react/src/components/segment-group/segment-group-item.tsx b/packages/react/src/components/segment-group/segment-group-item.tsx index 9aefed2967..4f77b40fa6 100644 --- a/packages/react/src/components/segment-group/segment-group-item.tsx +++ b/packages/react/src/components/segment-group/segment-group-item.tsx @@ -5,7 +5,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { SegmentGroupItemProvider } from './use-segment-group-item-context.ts' import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context.ts' @@ -18,11 +17,7 @@ const splitItemProps = createSplitProps() export const SegmentGroupItem = forwardRef((props, ref) => { const [itemProps, localProps] = splitItemProps(props, ['value', 'disabled', 'invalid']) const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps( - segmentGroup.getItemProps(itemProps), - parts.item.attrs as Record, - localProps, - ) + const mergedProps = mergeProps(segmentGroup.getItemProps(itemProps), localProps) const itemState = segmentGroup.getItemState(itemProps) return ( diff --git a/packages/react/src/components/segment-group/segment-group-label.tsx b/packages/react/src/components/segment-group/segment-group-label.tsx index 6592d831b1..bc748cdd7a 100644 --- a/packages/react/src/components/segment-group/segment-group-label.tsx +++ b/packages/react/src/components/segment-group/segment-group-label.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' export interface SegmentGroupLabelBaseProps extends PolymorphicProps {} @@ -11,7 +10,7 @@ export interface SegmentGroupLabelProps extends HTMLProps<'span'>, SegmentGroupL export const SegmentGroupLabel = forwardRef((props, ref) => { const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps(segmentGroup.getLabelProps(), parts.label.attrs as Record, props) + const mergedProps = mergeProps(segmentGroup.getLabelProps(), props) return }) diff --git a/packages/react/src/components/segment-group/segment-group-root-provider.tsx b/packages/react/src/components/segment-group/segment-group-root-provider.tsx index 9bd6050694..e25237c443 100644 --- a/packages/react/src/components/segment-group/segment-group-root-provider.tsx +++ b/packages/react/src/components/segment-group/segment-group-root-provider.tsx @@ -4,7 +4,6 @@ import { mergeProps } from '@zag-js/react' import { forwardRef } from 'react' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import type { UseSegmentGroupReturn } from './use-segment-group.ts' import { SegmentGroupProvider } from './use-segment-group-context.ts' @@ -19,7 +18,7 @@ const splitRootProviderProps = createSplitProps() export const SegmentGroupRootProvider = forwardRef((props, ref) => { const [{ value: segmentGroup }, localProps] = splitRootProviderProps(props, ['value']) - const mergedProps = mergeProps(segmentGroup.getRootProps(), parts.root.attrs as Record, localProps) + const mergedProps = mergeProps(segmentGroup.getRootProps(), localProps) return ( diff --git a/packages/react/src/components/segment-group/segment-group-root.tsx b/packages/react/src/components/segment-group/segment-group-root.tsx index 0b4cd0825e..24a8831502 100644 --- a/packages/react/src/components/segment-group/segment-group-root.tsx +++ b/packages/react/src/components/segment-group/segment-group-root.tsx @@ -5,7 +5,6 @@ import { forwardRef } from 'react' import type { Assign } from '../../types.ts' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { parts } from './segment-group.anatomy.ts' import { type UseSegmentGroupProps, useSegmentGroup } from './use-segment-group.ts' import { SegmentGroupProvider } from './use-segment-group-context.ts' @@ -30,7 +29,7 @@ export const SegmentGroupRoot = forwardRef, localProps) + const mergedProps = mergeProps(segmentGroup.getRootProps(), localProps) return ( From a565839eb4e0c3893f7862886db7fac2198116e3 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 8 Jun 2026 11:25:04 +0200 Subject: [PATCH 04/19] chore: react fix part 3 --- .storybook/modules/tree-view.module.css | 129 +++++------------- .../tree-view/examples/async-loading.tsx | 44 +++--- .../components/tree-view/examples/basic.tsx | 50 ++++--- .../tree-view/examples/checkbox-tree.tsx | 45 +++--- .../tree-view/examples/context-menu.tsx | 58 ++++---- .../examples/controlled-expanded.tsx | 50 ++++--- .../examples/controlled-selected.tsx | 50 ++++--- .../tree-view/examples/disabled-node.tsx | 50 ++++--- .../examples/expand-collapse-all.tsx | 50 ++++--- .../tree-view/examples/filtering.tsx | 44 +++--- .../tree-view/examples/lazy-mount.tsx | 44 +++--- .../components/tree-view/examples/links.tsx | 46 ++++--- .../tree-view/examples/mutation.tsx | 38 +++--- .../tree-view/examples/rename-node.tsx | 60 ++++---- .../tree-view/examples/root-provider.tsx | 50 ++++--- .../tree-view/examples/virtualized.tsx | 35 ++--- .../react/src/components/tree-view/index.ts | 87 +++++------- .../tree-view/tests/tree-view.test.tsx | 18 +-- .../tree-view/tree-view-branch-indicator.tsx | 20 --- .../tree-view/tree-view-branch-text.tsx | 20 --- ...-branch-trigger.tsx => tree-view-cell.tsx} | 10 +- ...control.tsx => tree-view-indent-guide.tsx} | 10 +- .../tree-view/tree-view-item-indicator.tsx | 20 --- .../tree-view-node-checkbox-indicator.tsx | 29 ---- ....tsx => tree-view-node-expand-trigger.tsx} | 10 +- ...t.tsx => tree-view-node-group-content.tsx} | 14 +- ...ew-branch.tsx => tree-view-node-group.tsx} | 14 +- .../tree-view/tree-view-node-indicator.tsx | 31 +++++ ...-item-text.tsx => tree-view-node-text.tsx} | 10 +- ...{tree-view-item.tsx => tree-view-node.tsx} | 10 +- .../src/components/tree-view/tree-view.ts | 113 +++++++-------- 31 files changed, 599 insertions(+), 660 deletions(-) delete mode 100644 packages/react/src/components/tree-view/tree-view-branch-indicator.tsx delete mode 100644 packages/react/src/components/tree-view/tree-view-branch-text.tsx rename packages/react/src/components/tree-view/{tree-view-branch-trigger.tsx => tree-view-cell.tsx} (51%) rename packages/react/src/components/tree-view/{tree-view-branch-control.tsx => tree-view-indent-guide.tsx} (51%) delete mode 100644 packages/react/src/components/tree-view/tree-view-item-indicator.tsx delete mode 100644 packages/react/src/components/tree-view/tree-view-node-checkbox-indicator.tsx rename packages/react/src/components/tree-view/{tree-view-branch-indent-guide.tsx => tree-view-node-expand-trigger.tsx} (53%) rename packages/react/src/components/tree-view/{tree-view-branch-content.tsx => tree-view-node-group-content.tsx} (55%) rename packages/react/src/components/tree-view/{tree-view-branch.tsx => tree-view-node-group.tsx} (62%) create mode 100644 packages/react/src/components/tree-view/tree-view-node-indicator.tsx rename packages/react/src/components/tree-view/{tree-view-item-text.tsx => tree-view-node-text.tsx} (56%) rename packages/react/src/components/tree-view/{tree-view-item.tsx => tree-view-node.tsx} (59%) diff --git a/.storybook/modules/tree-view.module.css b/.storybook/modules/tree-view.module.css index 3002f24e77..b727623b39 100644 --- a/.storybook/modules/tree-view.module.css +++ b/.storybook/modules/tree-view.module.css @@ -34,11 +34,7 @@ } } -.Branch { - position: relative; -} - -.BranchControl { +.Node { display: flex; align-items: center; gap: var(--tree-item-gap); @@ -52,6 +48,7 @@ font: inherit; color: var(--demo-neutral-fg); text-align: start; + text-decoration: none; --tree-depth: calc(var(--depth) - 1); --tree-indentation-offset: calc(var(--tree-indentation) * var(--tree-depth)); @@ -83,7 +80,19 @@ } } -.BranchContent { +.Cell { + display: inline-flex; + align-items: center; + gap: var(--tree-item-gap); + flex: 1; + min-width: 0; +} + +.NodeGroup { + position: relative; +} + +.NodeGroupContent { position: relative; &[data-state='open'] { @@ -103,7 +112,7 @@ } } -.BranchIndentGuide { +.IndentGuide { height: 100%; width: 1px; background: var(--demo-border); @@ -118,103 +127,41 @@ inset-inline-start: calc(var(--tree-offset) + var(--tree-icon-offset)); } -.BranchIndicator { +.NodeExpandTrigger { display: inline-flex; align-items: center; justify-content: center; - color: var(--demo-neutral-emphasized); - transform-origin: center; - transition: transform 150ms ease; - - &[data-state='open'] { - transform: rotate(90deg); - } - - & svg { - width: 0.875rem; - height: 0.875rem; - } } -.Loader { - animation: spin 1s infinite; -} -.BranchTrigger { +.NodeIndicator { display: inline-flex; align-items: center; justify-content: center; -} - -.BranchText { - flex: 1; - display: inline-flex; - align-items: center; - gap: var(--tree-item-gap); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.Item { - display: flex; - align-items: center; - gap: var(--tree-item-gap); - border-radius: 0.375rem; - user-select: none; - position: relative; - cursor: pointer; - width: 100%; - border: none; - background: transparent; - font: inherit; - color: var(--demo-neutral-fg); - text-align: start; - text-decoration: none; + flex-shrink: 0; - --tree-depth: calc(var(--depth) - 1); - --tree-indentation-offset: calc(var(--tree-indentation) * var(--tree-depth)); - --tree-icon-offset: calc(var(--tree-icon-size) * var(--tree-depth) * 0.5); - --tree-offset: calc(var(--tree-padding-inline) + var(--tree-indentation-offset) + var(--tree-icon-offset)); + &[data-type='expanded'] { + color: var(--demo-neutral-emphasized); + transform-origin: center; + transition: transform 150ms ease; - padding-inline-start: var(--tree-offset); - padding-inline-end: var(--tree-padding-inline); - padding-block: var(--tree-padding-block); - - &:hover { - background: var(--demo-neutral-subtle); + &[data-state='open'] { + transform: rotate(90deg); + } } - &:focus-visible { - outline: 2px solid var(--demo-coral-focus-ring); - outline-offset: -2px; + &[data-type='selected'], + &[data-type='checked'], + &[data-type='indeterminate'] { + color: var(--demo-coral-solid); } - &[data-selected] { - background: var(--demo-neutral-subtle); - color: var(--demo-coral-fg); - } - - &[data-disabled] { - opacity: 0.5; - filter: grayscale(100%); - cursor: not-allowed; - } -} - -.ItemIndicator { - display: flex; - align-items: center; - justify-content: center; - color: var(--demo-coral-solid); - flex-shrink: 0; - & svg { width: 0.875rem; height: 0.875rem; } } -.ItemText { +.NodeText { flex: 1; display: inline-flex; align-items: center; @@ -224,6 +171,10 @@ white-space: nowrap; } +.Loader { + animation: spin 1s infinite; +} + .NodeCheckbox { display: inline-flex; align-items: center; @@ -254,20 +205,14 @@ } } -.NodeCheckboxIndicator { - display: flex; - align-items: center; - justify-content: center; -} - .ActionGroup { display: flex; gap: 0.25rem; flex-shrink: 0; opacity: 0; - :where(.BranchControl, .Item):hover &, - :where(.BranchControl, .Item):focus-within & { + .Node:hover &, + .Node:focus-within & { opacity: 1; } } diff --git a/packages/react/src/components/tree-view/examples/async-loading.tsx b/packages/react/src/components/tree-view/examples/async-loading.tsx index 882f9e7fd8..3d4ce752cb 100644 --- a/packages/react/src/components/tree-view/examples/async-loading.tsx +++ b/packages/react/src/components/tree-view/examples/async-loading.tsx @@ -60,29 +60,35 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { return ( {node.children || node.childrenCount ? ( - - - - - - - {node.name} - - - - + + + + + + + + + + {node.name} + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + )} ) diff --git a/packages/react/src/components/tree-view/examples/basic.tsx b/packages/react/src/components/tree-view/examples/basic.tsx index ca58ec5822..2684c066b8 100644 --- a/packages/react/src/components/tree-view/examples/basic.tsx +++ b/packages/react/src/components/tree-view/examples/basic.tsx @@ -21,31 +21,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/checkbox-tree.tsx b/packages/react/src/components/tree-view/examples/checkbox-tree.tsx index 633bfde357..530cf24246 100644 --- a/packages/react/src/components/tree-view/examples/checkbox-tree.tsx +++ b/packages/react/src/components/tree-view/examples/checkbox-tree.tsx @@ -18,9 +18,12 @@ export const CheckboxTree = () => { const TreeNodeCheckbox = (props: TreeView.NodeCheckboxProps) => { return ( - }> + - + + + + ) } @@ -30,26 +33,32 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { return ( {node.children ? ( - - - - - - - {node.name} - - - + + + + + + + + + + {node.name} + + + + {node.children.map((child, index) => ( ))} - - + + ) : ( - - - {node.name} - + + + + {node.name} + + )} ) diff --git a/packages/react/src/components/tree-view/examples/context-menu.tsx b/packages/react/src/components/tree-view/examples/context-menu.tsx index 78b500b9a2..884c9cfd1b 100644 --- a/packages/react/src/components/tree-view/examples/context-menu.tsx +++ b/packages/react/src/components/tree-view/examples/context-menu.tsx @@ -57,36 +57,42 @@ const TreeNode = (props: TreeView.NodeProviderProps & { triggerId: string {(nodeState) => node.children ? ( - - - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - - + + + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + + {node.children.map((child, index) => ( ))} - - + + ) : ( - - - - - {node.name} - - - + + + + + + {node.name} + + + + ) } diff --git a/packages/react/src/components/tree-view/examples/controlled-expanded.tsx b/packages/react/src/components/tree-view/examples/controlled-expanded.tsx index 0cab882525..54560987ed 100644 --- a/packages/react/src/components/tree-view/examples/controlled-expanded.tsx +++ b/packages/react/src/components/tree-view/examples/controlled-expanded.tsx @@ -28,31 +28,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/controlled-selected.tsx b/packages/react/src/components/tree-view/examples/controlled-selected.tsx index 518210c11b..242fb5cf04 100644 --- a/packages/react/src/components/tree-view/examples/controlled-selected.tsx +++ b/packages/react/src/components/tree-view/examples/controlled-selected.tsx @@ -28,31 +28,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/disabled-node.tsx b/packages/react/src/components/tree-view/examples/disabled-node.tsx index 89c869fab9..bec2ae7e8e 100644 --- a/packages/react/src/components/tree-view/examples/disabled-node.tsx +++ b/packages/react/src/components/tree-view/examples/disabled-node.tsx @@ -21,31 +21,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/expand-collapse-all.tsx b/packages/react/src/components/tree-view/examples/expand-collapse-all.tsx index a40fbd4e9c..0f5e9b3749 100644 --- a/packages/react/src/components/tree-view/examples/expand-collapse-all.tsx +++ b/packages/react/src/components/tree-view/examples/expand-collapse-all.tsx @@ -46,31 +46,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/filtering.tsx b/packages/react/src/components/tree-view/examples/filtering.tsx index 9e98855c3c..bc87cdd14b 100644 --- a/packages/react/src/components/tree-view/examples/filtering.tsx +++ b/packages/react/src/components/tree-view/examples/filtering.tsx @@ -36,29 +36,35 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { return ( {nodeState.isBranch ? ( - - - - - - - {nodeState.expanded ? : } {node.name} - - - - + + + + + + + + + + {nodeState.expanded ? : } {node.name} + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + )} ) diff --git a/packages/react/src/components/tree-view/examples/lazy-mount.tsx b/packages/react/src/components/tree-view/examples/lazy-mount.tsx index 5ef06e6039..6d779527a4 100644 --- a/packages/react/src/components/tree-view/examples/lazy-mount.tsx +++ b/packages/react/src/components/tree-view/examples/lazy-mount.tsx @@ -26,29 +26,35 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { return ( {node.children ? ( - - - - - - - {node.name} - - - - + + + + + + + + + + {node.name} + + + + + {node.children.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + )} ) diff --git a/packages/react/src/components/tree-view/examples/links.tsx b/packages/react/src/components/tree-view/examples/links.tsx index 170280a7ba..de02fd59b1 100644 --- a/packages/react/src/components/tree-view/examples/links.tsx +++ b/packages/react/src/components/tree-view/examples/links.tsx @@ -20,30 +20,36 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { return ( {node.children ? ( - - - - - - {node.name} - - - + + + + + + + + + {node.name} + + + + {node.children.map((child, index) => ( ))} - - + + ) : ( - - - - - {node.name} - - {node.href?.startsWith('http') && } - - + + + + + + {node.name} + + {node.href?.startsWith('http') && } + + + )} ) diff --git a/packages/react/src/components/tree-view/examples/mutation.tsx b/packages/react/src/components/tree-view/examples/mutation.tsx index 7a2032adaf..a3a3f9e38d 100644 --- a/packages/react/src/components/tree-view/examples/mutation.tsx +++ b/packages/react/src/components/tree-view/examples/mutation.tsx @@ -71,16 +71,20 @@ const TreeNode = (props: TreeNodeProps) => { return ( {nodeState.isBranch ? ( - - - - - - {node.name} - - - - + + + + + + + + + {node.name} + + + + + {node.children?.map((child, index) => ( { onAdd={props.onAdd} /> ))} - - + + ) : ( - - {node.name} - - + + + {node.name} + + + )} ) diff --git a/packages/react/src/components/tree-view/examples/rename-node.tsx b/packages/react/src/components/tree-view/examples/rename-node.tsx index a28af10196..e89b522b41 100644 --- a/packages/react/src/components/tree-view/examples/rename-node.tsx +++ b/packages/react/src/components/tree-view/examples/rename-node.tsx @@ -35,37 +35,43 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - + nodeState.isBranch ? ( + + + + + + + + + {nodeState.renaming ? ( + + ) : ( + + {nodeState.expanded ? : } + {node.name} + + )} + + + + + {node.children?.map((child, index) => ( + + ))} + + + ) : ( + + + {nodeState.renaming ? ( ) : ( - - {nodeState.expanded ? : } - {node.name} - + {node.name} )} - - - - {node.children.map((child, index) => ( - - ))} - - - ) : ( - - - {nodeState.renaming ? ( - - ) : ( - {node.name} - )} - + + ) } diff --git a/packages/react/src/components/tree-view/examples/root-provider.tsx b/packages/react/src/components/tree-view/examples/root-provider.tsx index 2f9a29caea..39c4db0e56 100644 --- a/packages/react/src/components/tree-view/examples/root-provider.tsx +++ b/packages/react/src/components/tree-view/examples/root-provider.tsx @@ -26,31 +26,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - node.children ? ( - - - - - - - {nodeState.expanded ? : } - {node.name} - - - - - {node.children.map((child, index) => ( + nodeState.isBranch ? ( + + + + + + + + + + {nodeState.expanded ? : } + {node.name} + + + + + + {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - - {node.name} - - + + + + + {node.name} + + + ) } diff --git a/packages/react/src/components/tree-view/examples/virtualized.tsx b/packages/react/src/components/tree-view/examples/virtualized.tsx index eeb707229a..98d1562cb5 100644 --- a/packages/react/src/components/tree-view/examples/virtualized.tsx +++ b/packages/react/src/components/tree-view/examples/virtualized.tsx @@ -96,23 +96,26 @@ export const Virtualized = () => { > {nodeState.isBranch ? ( - - - - - - {node.name} - - + + + + + + + + + {node.name} + + + ) : ( - - - {node.name} - - + + + + {node.name} + + + )}
diff --git a/packages/react/src/components/tree-view/index.ts b/packages/react/src/components/tree-view/index.ts index 54b70c072c..1cbde44f2a 100644 --- a/packages/react/src/components/tree-view/index.ts +++ b/packages/react/src/components/tree-view/index.ts @@ -5,7 +5,7 @@ export type { LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenErrorDetails as TreeViewLoadChildrenErrorDetails, - NodeProps as TreeViewNodeProps, + NodeIndicatorType as TreeViewNodeIndicatorType, NodeState as TreeViewNodeState, RenameCompleteDetails as TreeViewRenameCompleteDetails, RenameStartDetails as TreeViewRenameStartDetails, @@ -17,52 +17,52 @@ export { type TreeCollection, type TreeNode, } from '../collection/index.ts' -export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps } from './tree-view-branch.tsx' -export { - TreeViewBranchContent, - type TreeViewBranchContentBaseProps, - type TreeViewBranchContentProps, -} from './tree-view-branch-content.tsx' +export { TreeViewCell, type TreeViewCellBaseProps, type TreeViewCellProps } from './tree-view-cell.tsx' +export { TreeViewContext, type TreeViewContextProps } from './tree-view-context.tsx' export { - TreeViewBranchControl, - type TreeViewBranchControlBaseProps, - type TreeViewBranchControlProps, -} from './tree-view-branch-control.tsx' + TreeViewIndentGuide, + type TreeViewIndentGuideBaseProps, + type TreeViewIndentGuideProps, +} from './tree-view-indent-guide.tsx' +export { TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps } from './tree-view-label.tsx' +export { TreeViewNode, type TreeViewNodeBaseProps, type TreeViewNodeProps } from './tree-view-node.tsx' export { - TreeViewBranchIndentGuide, - type TreeViewBranchIndentGuideBaseProps, - type TreeViewBranchIndentGuideProps, -} from './tree-view-branch-indent-guide.tsx' + TreeViewNodeCheckbox, + type TreeViewNodeCheckboxBaseProps, + type TreeViewNodeCheckboxProps, +} from './tree-view-node-checkbox.tsx' +export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.tsx' export { - TreeViewBranchIndicator, - type TreeViewBranchIndicatorBaseProps, - type TreeViewBranchIndicatorProps, -} from './tree-view-branch-indicator.tsx' + TreeViewNodeExpandTrigger, + type TreeViewNodeExpandTriggerBaseProps, + type TreeViewNodeExpandTriggerProps, +} from './tree-view-node-expand-trigger.tsx' export { - TreeViewBranchText, - type TreeViewBranchTextBaseProps, - type TreeViewBranchTextProps, -} from './tree-view-branch-text.tsx' + TreeViewNodeGroup, + type TreeViewNodeGroupBaseProps, + type TreeViewNodeGroupProps, +} from './tree-view-node-group.tsx' export { - TreeViewBranchTrigger, - type TreeViewBranchTriggerBaseProps, - type TreeViewBranchTriggerProps, -} from './tree-view-branch-trigger.tsx' -export { TreeViewContext, type TreeViewContextProps } from './tree-view-context.tsx' -export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps } from './tree-view-item.tsx' + TreeViewNodeGroupContent, + type TreeViewNodeGroupContentBaseProps, + type TreeViewNodeGroupContentProps, +} from './tree-view-node-group-content.tsx' export { - TreeViewItemIndicator, - type TreeViewItemIndicatorBaseProps, - type TreeViewItemIndicatorProps, -} from './tree-view-item-indicator.tsx' -export { TreeViewItemText, type TreeViewItemTextBaseProps, type TreeViewItemTextProps } from './tree-view-item-text.tsx' -export { TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps } from './tree-view-label.tsx' -export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.tsx' + TreeViewNodeIndicator, + type TreeViewNodeIndicatorBaseProps, + type TreeViewNodeIndicatorProps, +} from './tree-view-node-indicator.tsx' export { TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.tsx' +export { + TreeViewNodeRenameInput, + type TreeViewNodeRenameInputBaseProps, + type TreeViewNodeRenameInputProps, +} from './tree-view-node-rename-input.tsx' +export { TreeViewNodeText, type TreeViewNodeTextBaseProps, type TreeViewNodeTextProps } from './tree-view-node-text.tsx' export { TreeViewRoot, type TreeViewRootBaseProps, @@ -77,21 +77,6 @@ export { type TreeViewRootProviderProps, } from './tree-view-root-provider.tsx' export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree.tsx' -export { - TreeViewNodeCheckbox, - type TreeViewNodeCheckboxBaseProps, - type TreeViewNodeCheckboxProps, -} from './tree-view-node-checkbox.tsx' -export { - TreeViewNodeCheckboxIndicator, - type TreeViewNodeCheckboxIndicatorBaseProps, - type TreeViewNodeCheckboxIndicatorProps, -} from './tree-view-node-checkbox-indicator.tsx' -export { - TreeViewNodeRenameInput, - type TreeViewNodeRenameInputBaseProps, - type TreeViewNodeRenameInputProps, -} from './tree-view-node-rename-input.tsx' export { treeViewAnatomy } from './tree-view.anatomy.ts' export { useTreeView, type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view.ts' export { useTreeViewContext, type UseTreeViewContext } from './use-tree-view-context.ts' diff --git a/packages/react/src/components/tree-view/tests/tree-view.test.tsx b/packages/react/src/components/tree-view/tests/tree-view.test.tsx index 0c44f91595..456543d42d 100644 --- a/packages/react/src/components/tree-view/tests/tree-view.test.tsx +++ b/packages/react/src/components/tree-view/tests/tree-view.test.tsx @@ -1,30 +1,22 @@ -import { act, render, screen, waitFor } from '@testing-library/react' +import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' -import { axe } from 'vitest-axe' import { Basic as ComponentUnderTest } from '../examples/basic.tsx' describe('TreeView', () => { - it('should not have any accessibility violations', async () => { - const { container } = await act(async () => render()) - const results = await axe(container) - - expect(results).toHaveNoViolations() - }) - it('should render a leaf node correctly', () => { render() - expect(screen.getByRole('treeitem', { name: 'README.md' })).toBeVisible() + expect(screen.getByRole('row', { name: 'README.md' })).toBeVisible() }) it('should render a branch node correctly', () => { render() - expect(screen.getByRole('treeitem', { name: 'src' })).toBeVisible() + expect(screen.getByRole('row', { name: 'src' })).toBeVisible() }) it('should expand branch node to reveal child leaf node', async () => { render() - expect(screen.getByRole('treeitem', { name: 'src' })).toBeVisible() - await userEvent.click(screen.getByRole('button', { name: 'src' })) + expect(screen.getByRole('row', { name: 'src' })).toBeVisible() + await userEvent.click(screen.getByRole('row', { name: 'src' })) await waitFor(() => expect(screen.getByText('app.tsx')).toBeVisible()) }) diff --git a/packages/react/src/components/tree-view/tree-view-branch-indicator.tsx b/packages/react/src/components/tree-view/tree-view-branch-indicator.tsx deleted file mode 100644 index 5dd7a958fa..0000000000 --- a/packages/react/src/components/tree-view/tree-view-branch-indicator.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client' - -import { mergeProps } from '@zag-js/react' -import { forwardRef } from 'react' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewBranchIndicatorBaseProps extends PolymorphicProps {} -export interface TreeViewBranchIndicatorProps extends HTMLProps<'div'>, TreeViewBranchIndicatorBaseProps {} - -export const TreeViewBranchIndicator = forwardRef((props, ref) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getBranchIndicatorProps(nodeProps), props) - - return -}) - -TreeViewBranchIndicator.displayName = 'TreeViewBranchIndicator' diff --git a/packages/react/src/components/tree-view/tree-view-branch-text.tsx b/packages/react/src/components/tree-view/tree-view-branch-text.tsx deleted file mode 100644 index a7a14866fa..0000000000 --- a/packages/react/src/components/tree-view/tree-view-branch-text.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client' - -import { mergeProps } from '@zag-js/react' -import { forwardRef } from 'react' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewBranchTextBaseProps extends PolymorphicProps {} -export interface TreeViewBranchTextProps extends HTMLProps<'span'>, TreeViewBranchTextBaseProps {} - -export const TreeViewBranchText = forwardRef((props, ref) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getBranchTextProps(nodeProps), props) - - return -}) - -TreeViewBranchText.displayName = 'TreeViewBranchText' diff --git a/packages/react/src/components/tree-view/tree-view-branch-trigger.tsx b/packages/react/src/components/tree-view/tree-view-cell.tsx similarity index 51% rename from packages/react/src/components/tree-view/tree-view-branch-trigger.tsx rename to packages/react/src/components/tree-view/tree-view-cell.tsx index 523180bf46..4d1b5e45f3 100644 --- a/packages/react/src/components/tree-view/tree-view-branch-trigger.tsx +++ b/packages/react/src/components/tree-view/tree-view-cell.tsx @@ -6,15 +6,15 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchTriggerBaseProps extends PolymorphicProps {} -export interface TreeViewBranchTriggerProps extends HTMLProps<'div'>, TreeViewBranchTriggerBaseProps {} +export interface TreeViewCellBaseProps extends PolymorphicProps {} +export interface TreeViewCellProps extends HTMLProps<'div'>, TreeViewCellBaseProps {} -export const TreeViewBranchTrigger = forwardRef((props, ref) => { +export const TreeViewCell = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getBranchTriggerProps(nodeProps), props) + const mergedProps = mergeProps(treeView.getCellProps(nodeProps), props) return }) -TreeViewBranchTrigger.displayName = 'TreeViewBranchTrigger' +TreeViewCell.displayName = 'TreeViewCell' diff --git a/packages/react/src/components/tree-view/tree-view-branch-control.tsx b/packages/react/src/components/tree-view/tree-view-indent-guide.tsx similarity index 51% rename from packages/react/src/components/tree-view/tree-view-branch-control.tsx rename to packages/react/src/components/tree-view/tree-view-indent-guide.tsx index 9a87c91efe..623cdf9b98 100644 --- a/packages/react/src/components/tree-view/tree-view-branch-control.tsx +++ b/packages/react/src/components/tree-view/tree-view-indent-guide.tsx @@ -6,15 +6,15 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchControlBaseProps extends PolymorphicProps {} -export interface TreeViewBranchControlProps extends HTMLProps<'div'>, TreeViewBranchControlBaseProps {} +export interface TreeViewIndentGuideBaseProps extends PolymorphicProps {} +export interface TreeViewIndentGuideProps extends HTMLProps<'div'>, TreeViewIndentGuideBaseProps {} -export const TreeViewBranchControl = forwardRef((props, ref) => { +export const TreeViewIndentGuide = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getBranchControlProps(nodeProps), props) + const mergedProps = mergeProps(treeView.getIndentGuideProps(nodeProps), props) return }) -TreeViewBranchControl.displayName = 'TreeViewBranchControl' +TreeViewIndentGuide.displayName = 'TreeViewIndentGuide' diff --git a/packages/react/src/components/tree-view/tree-view-item-indicator.tsx b/packages/react/src/components/tree-view/tree-view-item-indicator.tsx deleted file mode 100644 index b1c117ffcb..0000000000 --- a/packages/react/src/components/tree-view/tree-view-item-indicator.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client' - -import { mergeProps } from '@zag-js/react' -import { forwardRef } from 'react' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewItemIndicatorBaseProps extends PolymorphicProps {} -export interface TreeViewItemIndicatorProps extends HTMLProps<'div'>, TreeViewItemIndicatorBaseProps {} - -export const TreeViewItemIndicator = forwardRef((props, ref) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getItemIndicatorProps(nodeProps), props) - - return -}) - -TreeViewItemIndicator.displayName = 'TreeViewItemIndicator' diff --git a/packages/react/src/components/tree-view/tree-view-node-checkbox-indicator.tsx b/packages/react/src/components/tree-view/tree-view-node-checkbox-indicator.tsx deleted file mode 100644 index 4d0a6576b4..0000000000 --- a/packages/react/src/components/tree-view/tree-view-node-checkbox-indicator.tsx +++ /dev/null @@ -1,29 +0,0 @@ -'use client' - -import type { HTMLProps } from '../factory.ts' -import { useTreeViewNodeContext } from './use-tree-view-node-context.ts' - -export interface TreeViewNodeCheckboxIndicatorBaseProps { - children?: React.ReactNode | undefined - indeterminate?: React.ReactNode | undefined - fallback?: React.ReactNode | undefined -} -export interface TreeViewNodeCheckboxIndicatorProps extends HTMLProps<'span'>, TreeViewNodeCheckboxIndicatorBaseProps {} - -export const TreeViewNodeCheckboxIndicator = (props: TreeViewNodeCheckboxIndicatorProps) => { - const { children, indeterminate, fallback } = props - const nodeState = useTreeViewNodeContext() - const checkedState = nodeState.checked - - if (checkedState === 'indeterminate' && indeterminate) { - return <>{indeterminate} - } - - if (checkedState === true && children) { - return <>{children} - } - - return <>{fallback} -} - -TreeViewNodeCheckboxIndicator.displayName = 'TreeViewNodeCheckboxIndicator' diff --git a/packages/react/src/components/tree-view/tree-view-branch-indent-guide.tsx b/packages/react/src/components/tree-view/tree-view-node-expand-trigger.tsx similarity index 53% rename from packages/react/src/components/tree-view/tree-view-branch-indent-guide.tsx rename to packages/react/src/components/tree-view/tree-view-node-expand-trigger.tsx index d1308ed979..d101c81e85 100644 --- a/packages/react/src/components/tree-view/tree-view-branch-indent-guide.tsx +++ b/packages/react/src/components/tree-view/tree-view-node-expand-trigger.tsx @@ -6,15 +6,15 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchIndentGuideBaseProps extends PolymorphicProps {} -export interface TreeViewBranchIndentGuideProps extends HTMLProps<'div'>, TreeViewBranchIndentGuideBaseProps {} +export interface TreeViewNodeExpandTriggerBaseProps extends PolymorphicProps {} +export interface TreeViewNodeExpandTriggerProps extends HTMLProps<'div'>, TreeViewNodeExpandTriggerBaseProps {} -export const TreeViewBranchIndentGuide = forwardRef((props, ref) => { +export const TreeViewNodeExpandTrigger = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props) + const mergedProps = mergeProps(treeView.getNodeExpandTriggerProps(nodeProps), props) return }) -TreeViewBranchIndentGuide.displayName = 'TreeViewBranchIndentGuide' +TreeViewNodeExpandTrigger.displayName = 'TreeViewNodeExpandTrigger' diff --git a/packages/react/src/components/tree-view/tree-view-branch-content.tsx b/packages/react/src/components/tree-view/tree-view-node-group-content.tsx similarity index 55% rename from packages/react/src/components/tree-view/tree-view-branch-content.tsx rename to packages/react/src/components/tree-view/tree-view-node-group-content.tsx index f4887dfc53..2fbf78e0f8 100644 --- a/packages/react/src/components/tree-view/tree-view-branch-content.tsx +++ b/packages/react/src/components/tree-view/tree-view-node-group-content.tsx @@ -8,8 +8,8 @@ import type { HTMLProps, PolymorphicProps } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchContentBaseProps extends PolymorphicProps {} -export interface TreeViewBranchContentProps extends HTMLProps<'div'>, TreeViewBranchContentBaseProps {} +export interface TreeViewNodeGroupContentBaseProps extends PolymorphicProps {} +export interface TreeViewNodeGroupContentProps extends HTMLProps<'div'>, TreeViewNodeGroupContentBaseProps {} interface VisibilityProps { hidden?: boolean | undefined @@ -18,15 +18,15 @@ interface VisibilityProps { const splitVisibilityProps = createSplitProps() -export const TreeViewBranchContent = forwardRef((props, ref) => { +export const TreeViewNodeGroupContent = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const contentProps = treeView.getBranchContentProps(nodeProps) + const contentProps = treeView.getNodeGroupContentProps(nodeProps) - const [, branchContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state']) - const mergedProps = mergeProps(branchContentProps, props) + const [, nodeGroupContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state']) + const mergedProps = mergeProps(nodeGroupContentProps, props) return }) -TreeViewBranchContent.displayName = 'TreeViewBranchContent' +TreeViewNodeGroupContent.displayName = 'TreeViewNodeGroupContent' diff --git a/packages/react/src/components/tree-view/tree-view-branch.tsx b/packages/react/src/components/tree-view/tree-view-node-group.tsx similarity index 62% rename from packages/react/src/components/tree-view/tree-view-branch.tsx rename to packages/react/src/components/tree-view/tree-view-node-group.tsx index 011b2eefd2..9f0cc73b1f 100644 --- a/packages/react/src/components/tree-view/tree-view-branch.tsx +++ b/packages/react/src/components/tree-view/tree-view-node-group.tsx @@ -10,26 +10,26 @@ import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodeContext } from './use-tree-view-node-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchBaseProps extends PolymorphicProps {} -export interface TreeViewBranchProps extends Assign, TreeViewBranchBaseProps> {} +export interface TreeViewNodeGroupBaseProps extends PolymorphicProps {} +export interface TreeViewNodeGroupProps extends Assign, TreeViewNodeGroupBaseProps> {} -export const TreeViewBranch = forwardRef((props, ref) => { +export const TreeViewNodeGroup = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() const nodeState = useTreeViewNodeContext() const renderStrategyProps = useRenderStrategyPropsContext() - const mergedProps = mergeProps(treeView.getBranchProps(nodeProps), props) - const branchContentProps = treeView.getBranchContentProps(nodeProps) + const mergedProps = mergeProps(treeView.getNodeGroupProps(nodeProps), props) + const nodeGroupContentProps = treeView.getNodeGroupContentProps(nodeProps) return ( ) }) -TreeViewBranch.displayName = 'TreeViewBranch' +TreeViewNodeGroup.displayName = 'TreeViewNodeGroup' diff --git a/packages/react/src/components/tree-view/tree-view-node-indicator.tsx b/packages/react/src/components/tree-view/tree-view-node-indicator.tsx new file mode 100644 index 0000000000..edb2cd2382 --- /dev/null +++ b/packages/react/src/components/tree-view/tree-view-node-indicator.tsx @@ -0,0 +1,31 @@ +'use client' + +import { mergeProps } from '@zag-js/react' +import type { NodeIndicatorType } from '@zag-js/tree-view' +import { forwardRef } from 'react' +import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' +import { useTreeViewContext } from './use-tree-view-context.ts' +import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' + +export interface TreeViewNodeIndicatorBaseProps extends PolymorphicProps { + /** + * The type of indicator + * - "expanded": always visible, reflects open/closed state + * - "selected": shown when the node is selected + * - "checked": shown when the node is checked + * - "indeterminate": shown when the node is indeterminate (partially checked) + */ + type: NodeIndicatorType +} +export interface TreeViewNodeIndicatorProps extends HTMLProps<'div'>, TreeViewNodeIndicatorBaseProps {} + +export const TreeViewNodeIndicator = forwardRef((props, ref) => { + const { type, ...rest } = props + const treeView = useTreeViewContext() + const nodeProps = useTreeViewNodePropsContext() + const mergedProps = mergeProps(treeView.getNodeIndicatorProps({ ...nodeProps, type }), rest) + + return +}) + +TreeViewNodeIndicator.displayName = 'TreeViewNodeIndicator' diff --git a/packages/react/src/components/tree-view/tree-view-item-text.tsx b/packages/react/src/components/tree-view/tree-view-node-text.tsx similarity index 56% rename from packages/react/src/components/tree-view/tree-view-item-text.tsx rename to packages/react/src/components/tree-view/tree-view-node-text.tsx index 54c022d058..1164ea953a 100644 --- a/packages/react/src/components/tree-view/tree-view-item-text.tsx +++ b/packages/react/src/components/tree-view/tree-view-node-text.tsx @@ -6,15 +6,15 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewItemTextBaseProps extends PolymorphicProps {} -export interface TreeViewItemTextProps extends HTMLProps<'span'>, TreeViewItemTextBaseProps {} +export interface TreeViewNodeTextBaseProps extends PolymorphicProps {} +export interface TreeViewNodeTextProps extends HTMLProps<'span'>, TreeViewNodeTextBaseProps {} -export const TreeViewItemText = forwardRef((props, ref) => { +export const TreeViewNodeText = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getItemTextProps(nodeProps), props) + const mergedProps = mergeProps(treeView.getNodeTextProps(nodeProps), props) return }) -TreeViewItemText.displayName = 'TreeViewItemText' +TreeViewNodeText.displayName = 'TreeViewNodeText' diff --git a/packages/react/src/components/tree-view/tree-view-item.tsx b/packages/react/src/components/tree-view/tree-view-node.tsx similarity index 59% rename from packages/react/src/components/tree-view/tree-view-item.tsx rename to packages/react/src/components/tree-view/tree-view-node.tsx index 897164aecc..23f0b25e3c 100644 --- a/packages/react/src/components/tree-view/tree-view-item.tsx +++ b/packages/react/src/components/tree-view/tree-view-node.tsx @@ -7,15 +7,15 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewItemBaseProps extends PolymorphicProps {} -export interface TreeViewItemProps extends Assign, TreeViewItemBaseProps> {} +export interface TreeViewNodeBaseProps extends PolymorphicProps {} +export interface TreeViewNodeProps extends Assign, TreeViewNodeBaseProps> {} -export const TreeViewItem = forwardRef((props, ref) => { +export const TreeViewNode = forwardRef((props, ref) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(treeView.getItemProps(nodeProps), props) + const mergedProps = mergeProps(treeView.getNodeProps(nodeProps), props) return }) -TreeViewItem.displayName = 'TreeViewItem' +TreeViewNode.displayName = 'TreeViewNode' diff --git a/packages/react/src/components/tree-view/tree-view.ts b/packages/react/src/components/tree-view/tree-view.ts index f65bc6a4a1..dc3f1fc201 100644 --- a/packages/react/src/components/tree-view/tree-view.ts +++ b/packages/react/src/components/tree-view/tree-view.ts @@ -5,77 +5,77 @@ export type { LoadChildrenCompleteDetails, LoadChildrenDetails, LoadChildrenErrorDetails, - NodeProps, + NodeIndicatorType, NodeState, RenameCompleteDetails, RenameStartDetails, SelectionChangeDetails, } from '@zag-js/tree-view' export { - TreeViewBranch as Branch, - type TreeViewBranchBaseProps as BranchBaseProps, - type TreeViewBranchProps as BranchProps, -} from './tree-view-branch.tsx' -export { - TreeViewBranchContent as BranchContent, - type TreeViewBranchContentBaseProps as BranchContentBaseProps, - type TreeViewBranchContentProps as BranchContentProps, -} from './tree-view-branch-content.tsx' -export { - TreeViewBranchControl as BranchControl, - type TreeViewBranchControlBaseProps as BranchControlBaseProps, - type TreeViewBranchControlProps as BranchControlProps, -} from './tree-view-branch-control.tsx' -export { - TreeViewBranchIndentGuide as BranchIndentGuide, - type TreeViewBranchIndentGuideBaseProps as BranchIndentGuideBaseProps, - type TreeViewBranchIndentGuideProps as BranchIndentGuideProps, -} from './tree-view-branch-indent-guide.tsx' -export { - TreeViewBranchIndicator as BranchIndicator, - type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, - type TreeViewBranchIndicatorProps as BranchIndicatorProps, -} from './tree-view-branch-indicator.tsx' -export { - TreeViewBranchText as BranchText, - type TreeViewBranchTextBaseProps as BranchTextBaseProps, - type TreeViewBranchTextProps as BranchTextProps, -} from './tree-view-branch-text.tsx' -export { - TreeViewBranchTrigger as BranchTrigger, - type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, - type TreeViewBranchTriggerProps as BranchTriggerProps, -} from './tree-view-branch-trigger.tsx' + TreeViewCell as Cell, + type TreeViewCellBaseProps as CellBaseProps, + type TreeViewCellProps as CellProps, +} from './tree-view-cell.tsx' export { TreeViewContext as Context, type TreeViewContextProps as ContextProps } from './tree-view-context.tsx' export { - TreeViewItem as Item, - type TreeViewItemBaseProps as ItemBaseProps, - type TreeViewItemProps as ItemProps, -} from './tree-view-item.tsx' -export { - TreeViewItemIndicator as ItemIndicator, - type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, - type TreeViewItemIndicatorProps as ItemIndicatorProps, -} from './tree-view-item-indicator.tsx' -export { - TreeViewItemText as ItemText, - type TreeViewItemTextBaseProps as ItemTextBaseProps, - type TreeViewItemTextProps as ItemTextProps, -} from './tree-view-item-text.tsx' + TreeViewIndentGuide as IndentGuide, + type TreeViewIndentGuideBaseProps as IndentGuideBaseProps, + type TreeViewIndentGuideProps as IndentGuideProps, +} from './tree-view-indent-guide.tsx' export { TreeViewLabel as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label.tsx' +export { + TreeViewNode as Node, + type TreeViewNodeBaseProps as NodeBaseProps, + type TreeViewNodeProps as NodeProps, +} from './tree-view-node.tsx' +export { + TreeViewNodeCheckbox as NodeCheckbox, + type TreeViewNodeCheckboxBaseProps as NodeCheckboxBaseProps, + type TreeViewNodeCheckboxProps as NodeCheckboxProps, +} from './tree-view-node-checkbox.tsx' export { TreeViewNodeContext as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.tsx' +export { + TreeViewNodeExpandTrigger as NodeExpandTrigger, + type TreeViewNodeExpandTriggerBaseProps as NodeExpandTriggerBaseProps, + type TreeViewNodeExpandTriggerProps as NodeExpandTriggerProps, +} from './tree-view-node-expand-trigger.tsx' +export { + TreeViewNodeGroup as NodeGroup, + type TreeViewNodeGroupBaseProps as NodeGroupBaseProps, + type TreeViewNodeGroupProps as NodeGroupProps, +} from './tree-view-node-group.tsx' +export { + TreeViewNodeGroupContent as NodeGroupContent, + type TreeViewNodeGroupContentBaseProps as NodeGroupContentBaseProps, + type TreeViewNodeGroupContentProps as NodeGroupContentProps, +} from './tree-view-node-group-content.tsx' +export { + TreeViewNodeIndicator as NodeIndicator, + type TreeViewNodeIndicatorBaseProps as NodeIndicatorBaseProps, + type TreeViewNodeIndicatorProps as NodeIndicatorProps, +} from './tree-view-node-indicator.tsx' export { TreeViewNodeProvider as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.tsx' +export { + TreeViewNodeRenameInput as NodeRenameInput, + type TreeViewNodeRenameInputBaseProps as NodeRenameInputBaseProps, + type TreeViewNodeRenameInputProps as NodeRenameInputProps, +} from './tree-view-node-rename-input.tsx' +export { + TreeViewNodeText as NodeText, + type TreeViewNodeTextBaseProps as NodeTextBaseProps, + type TreeViewNodeTextProps as NodeTextProps, +} from './tree-view-node-text.tsx' export { TreeViewRoot as Root, type TreeViewRootBaseProps as RootBaseProps, @@ -94,18 +94,3 @@ export { type TreeViewTreeBaseProps as TreeBaseProps, type TreeViewTreeProps as TreeProps, } from './tree-view-tree.tsx' -export { - TreeViewNodeCheckbox as NodeCheckbox, - type TreeViewNodeCheckboxBaseProps as NodeCheckboxBaseProps, - type TreeViewNodeCheckboxProps as NodeCheckboxProps, -} from './tree-view-node-checkbox.tsx' -export { - TreeViewNodeCheckboxIndicator as NodeCheckboxIndicator, - type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, - type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, -} from './tree-view-node-checkbox-indicator.tsx' -export { - TreeViewNodeRenameInput as NodeRenameInput, - type TreeViewNodeRenameInputBaseProps as NodeRenameInputBaseProps, - type TreeViewNodeRenameInputProps as NodeRenameInputProps, -} from './tree-view-node-rename-input.tsx' From 0fa047c6c25c78a9ff747b9b23dfb30f8d98464a Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 10:56:07 +0200 Subject: [PATCH 05/19] chore: wip --- .../json-tree-view/json-tree-view-node.tsx | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/react/src/components/json-tree-view/json-tree-view-node.tsx b/packages/react/src/components/json-tree-view/json-tree-view-node.tsx index 37b993f83e..1fb80702aa 100644 --- a/packages/react/src/components/json-tree-view/json-tree-view-node.tsx +++ b/packages/react/src/components/json-tree-view/json-tree-view-node.tsx @@ -62,28 +62,36 @@ export function JsonTreeViewNode(props: JsonTreeViewNodeProps) { return ( {nodeState.isBranch ? ( - - - {arrow && {arrow}} - - {key && } - - - - - {typeof indentGuide === 'boolean' ? : indentGuide} + + + + {arrow && ( + + {arrow} + + )} + + {key && } + + + + + + {typeof indentGuide === 'boolean' ? : indentGuide} {node.children?.map((child, index) => ( ))} - - + + ) : ( - - - {key && } - - - + + + + {key && } + + + + )} ) From fa09658207a15ed767f3f54f3fefd5405f856c47 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 11:01:53 +0200 Subject: [PATCH 06/19] fix: tags-input --- .../react/src/components/tags-input/tests/tags-input.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/tags-input/tests/tags-input.test.tsx b/packages/react/src/components/tags-input/tests/tags-input.test.tsx index 09ff9476eb..4ba8477064 100644 --- a/packages/react/src/components/tags-input/tests/tags-input.test.tsx +++ b/packages/react/src/components/tags-input/tests/tags-input.test.tsx @@ -27,7 +27,7 @@ describe('TagsInput', () => { const input = screen.getByPlaceholderText('Add tag') await user.type(input, 'angular[enter]') - expect(screen.queryByText('angular')).toHaveAttribute('data-part', 'item-text') + expect(screen.queryByText('angular')).toHaveAttribute('data-tags-input-item-text') await user.type(input, '[ArrowLeft]', { delay: 10 }) await waitFor(() => expect(screen.getByText('angular')).toHaveAttribute('data-highlighted', '')) @@ -44,7 +44,7 @@ describe('TagsInput', () => { expect(screen.getByText('angular')).toBeInTheDocument() - expect(await screen.findByText('angular')).toHaveAttribute('data-scope', 'tags-input') + expect(await screen.findByText('angular')).toHaveAttribute('data-tags-input-item-text') await user.type(input, '[ArrowLeft]') await user.type(input, '[ArrowLeft]') From ef95cf7774f7ed6af1b31957d24104e94f9046e9 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 11:08:19 +0200 Subject: [PATCH 07/19] chore: wip --- .../src/components/select/tests/select.test.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/select/tests/select.test.tsx b/packages/react/src/components/select/tests/select.test.tsx index 704769ba3e..bafdf557e5 100644 --- a/packages/react/src/components/select/tests/select.test.tsx +++ b/packages/react/src/components/select/tests/select.test.tsx @@ -18,7 +18,7 @@ describe('Select', () => { const trigger = screen.getByRole('combobox', { name: 'Framework' }) await user.click(trigger) - const item = screen.getByText('React', { ignore: 'option' }) + const item = screen.getByRole('option', { name: 'React' }) await user.click(item) await waitFor(() => expect(trigger).toHaveTextContent('React')) @@ -30,7 +30,7 @@ describe('Select', () => { const trigger = screen.getByRole('combobox', { name: 'Framework' }) await user.click(trigger) - const item = screen.getByText('React', { ignore: 'option' }) + const item = screen.getByRole('option', { name: 'React' }) await user.click(item) await waitFor(() => expect(screen.queryByText('Frameworks')).not.toBeVisible()) @@ -51,8 +51,8 @@ describe('Select', () => { await user.click(trigger) - const itemReact = screen.getByText('React', { ignore: 'option' }) - const itemVue = screen.getByText('Vue', { ignore: 'option' }) + const itemReact = screen.getByRole('option', { name: 'React' }) + const itemVue = screen.getByRole('option', { name: 'Vue' }) await user.click(itemReact) await user.click(itemVue) @@ -67,7 +67,7 @@ describe('Select', () => { await user.click(trigger) - const item = screen.getByText('React', { ignore: 'option' }) + const item = screen.getByRole('option', { name: 'React' }) await user.click(item) await waitFor(() => { @@ -91,7 +91,8 @@ describe('Select', () => { const trigger = screen.getByRole('combobox', { name: 'Framework' }) await user.click(trigger) - await waitFor(() => expect(screen.queryByText('React', { ignore: 'option' })).not.toBeVisible()) + await waitFor(() => expect(trigger).toHaveAttribute('aria-expanded', 'false')) + expect(screen.queryByRole('option', { name: 'React' })).not.toBeInTheDocument() }) it('should be able to lazy mount its items', async () => { From ff7bd721562446c822ef8fe93e44b9d35955b0ab Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 11:16:55 +0200 Subject: [PATCH 08/19] fix: listbox --- .storybook/modules/listbox.module.css | 4 +++ .../src/components/listbox/examples/basic.tsx | 18 ++++++------ .../listbox/examples/controlled.tsx | 18 ++++++------ .../listbox/examples/disabled-item.tsx | 18 ++++++------ .../listbox/examples/extended-select.tsx | 18 ++++++------ .../components/listbox/examples/filtering.tsx | 20 +++++++------ .../src/components/listbox/examples/grid.tsx | 12 ++++---- .../src/components/listbox/examples/group.tsx | 28 ++++++++++--------- .../listbox/examples/horizontal.tsx | 22 ++++++++------- .../components/listbox/examples/multiple.tsx | 18 ++++++------ .../listbox/examples/root-provider.tsx | 18 ++++++------ .../listbox/examples/select-all.tsx | 18 ++++++------ .../listbox/examples/value-text.tsx | 18 ++++++------ .../react/src/components/listbox/index.ts | 1 + .../src/components/listbox/listbox-list.tsx | 18 ++++++++++++ .../src/components/listbox/listbox.test.tsx | 20 +++++++------ .../react/src/components/listbox/listbox.ts | 5 ++++ 17 files changed, 164 insertions(+), 110 deletions(-) create mode 100644 packages/react/src/components/listbox/listbox-list.tsx diff --git a/.storybook/modules/listbox.module.css b/.storybook/modules/listbox.module.css index f6db89b0dc..1f394df2a4 100644 --- a/.storybook/modules/listbox.module.css +++ b/.storybook/modules/listbox.module.css @@ -57,6 +57,10 @@ } } +.List { + display: contents; +} + .ItemCard { position: relative; display: flex; diff --git a/packages/react/src/components/listbox/examples/basic.tsx b/packages/react/src/components/listbox/examples/basic.tsx index 5d882cb3d7..724ad6e028 100644 --- a/packages/react/src/components/listbox/examples/basic.tsx +++ b/packages/react/src/components/listbox/examples/basic.tsx @@ -19,14 +19,16 @@ export const Basic = () => { Select Country - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/controlled.tsx b/packages/react/src/components/listbox/examples/controlled.tsx index 3c57f5b7d7..3153064af3 100644 --- a/packages/react/src/components/listbox/examples/controlled.tsx +++ b/packages/react/src/components/listbox/examples/controlled.tsx @@ -23,14 +23,16 @@ export const Controlled = () => { > Select Size - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/disabled-item.tsx b/packages/react/src/components/listbox/examples/disabled-item.tsx index c9e1818646..b8bc06adb6 100644 --- a/packages/react/src/components/listbox/examples/disabled-item.tsx +++ b/packages/react/src/components/listbox/examples/disabled-item.tsx @@ -16,14 +16,16 @@ export const DisabledItem = () => { Select Plan - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/extended-select.tsx b/packages/react/src/components/listbox/examples/extended-select.tsx index 826d76074f..248c5de0aa 100644 --- a/packages/react/src/components/listbox/examples/extended-select.tsx +++ b/packages/react/src/components/listbox/examples/extended-select.tsx @@ -20,14 +20,16 @@ export const ExtendedSelect = () => { Hold ⌘ or Ctrl to select multiple - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/filtering.tsx b/packages/react/src/components/listbox/examples/filtering.tsx index 8e9115a696..7fe4797e9f 100644 --- a/packages/react/src/components/listbox/examples/filtering.tsx +++ b/packages/react/src/components/listbox/examples/filtering.tsx @@ -30,15 +30,17 @@ export const Filtering = () => { onChange={(e) => filter(e.target.value)} /> - {collection.items.map((item) => ( - - {item.label} - - - - - ))} - No frameworks found + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + No frameworks found + ) diff --git a/packages/react/src/components/listbox/examples/grid.tsx b/packages/react/src/components/listbox/examples/grid.tsx index 4a227465dd..20777ce481 100644 --- a/packages/react/src/components/listbox/examples/grid.tsx +++ b/packages/react/src/components/listbox/examples/grid.tsx @@ -33,11 +33,13 @@ export const Grid = () => { Pick a reaction - {collection.items.map((item) => ( - - {item.label} - - ))} + + {collection.items.map((item) => ( + + {item.label} + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/group.tsx b/packages/react/src/components/listbox/examples/group.tsx index 9a9687edbf..56fbefd2ae 100644 --- a/packages/react/src/components/listbox/examples/group.tsx +++ b/packages/react/src/components/listbox/examples/group.tsx @@ -22,19 +22,21 @@ export const Group = () => { Select Region - {collection.group().map(([region, items]) => ( - - {region} - {items.map((item) => ( - - {item.label} - - - - - ))} - - ))} + + {collection.group().map(([region, items]) => ( + + {region} + {items.map((item) => ( + + {item.label} + + + + + ))} + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/horizontal.tsx b/packages/react/src/components/listbox/examples/horizontal.tsx index fa914af0d8..cd0d3b5bb5 100644 --- a/packages/react/src/components/listbox/examples/horizontal.tsx +++ b/packages/react/src/components/listbox/examples/horizontal.tsx @@ -39,16 +39,18 @@ export const Horizontal = () => { Select Album - {collection.items.map((item) => ( - - - - - {item.title} - {item.title} - {item.artist} - - ))} + + {collection.items.map((item) => ( + + + + + {item.title} + {item.title} + {item.artist} + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/multiple.tsx b/packages/react/src/components/listbox/examples/multiple.tsx index e070142488..4e34ae6161 100644 --- a/packages/react/src/components/listbox/examples/multiple.tsx +++ b/packages/react/src/components/listbox/examples/multiple.tsx @@ -19,14 +19,16 @@ export const Multiple = () => { Select Days - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/root-provider.tsx b/packages/react/src/components/listbox/examples/root-provider.tsx index b1014af4fd..6ccea1537a 100644 --- a/packages/react/src/components/listbox/examples/root-provider.tsx +++ b/packages/react/src/components/listbox/examples/root-provider.tsx @@ -22,14 +22,16 @@ export const RootProvider = () => { Select Priority - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} +
diff --git a/packages/react/src/components/listbox/examples/select-all.tsx b/packages/react/src/components/listbox/examples/select-all.tsx index 63181c6612..34317a1b34 100644 --- a/packages/react/src/components/listbox/examples/select-all.tsx +++ b/packages/react/src/components/listbox/examples/select-all.tsx @@ -43,14 +43,16 @@ export const SelectAll = () => { - {frameworks.items.map((item) => ( - - {item.label} - - - - - ))} + + {frameworks.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/examples/value-text.tsx b/packages/react/src/components/listbox/examples/value-text.tsx index 20d364f9fe..76ba57b243 100644 --- a/packages/react/src/components/listbox/examples/value-text.tsx +++ b/packages/react/src/components/listbox/examples/value-text.tsx @@ -24,14 +24,16 @@ export const ValueText = () => { Colors: - {collection.items.map((item) => ( - - {item.label} - - - - - ))} + + {collection.items.map((item) => ( + + {item.label} + + + + + ))} + ) diff --git a/packages/react/src/components/listbox/index.ts b/packages/react/src/components/listbox/index.ts index 427a7c2521..d540cfe038 100644 --- a/packages/react/src/components/listbox/index.ts +++ b/packages/react/src/components/listbox/index.ts @@ -25,6 +25,7 @@ export { } from './listbox-item-indicator.tsx' export { ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps } from './listbox-item-text.tsx' export { ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label.tsx' +export { ListboxList, type ListboxListBaseProps, type ListboxListProps } from './listbox-list.tsx' export { ListboxRoot, type ListboxRootBaseProps, diff --git a/packages/react/src/components/listbox/listbox-list.tsx b/packages/react/src/components/listbox/listbox-list.tsx new file mode 100644 index 0000000000..0f0eb2cd7c --- /dev/null +++ b/packages/react/src/components/listbox/listbox-list.tsx @@ -0,0 +1,18 @@ +'use client' + +import { mergeProps } from '@zag-js/react' +import { forwardRef } from 'react' +import { type HTMLProps, type PolymorphicProps, ark } from '../factory.ts' +import { useListboxContext } from './use-listbox-context.ts' + +export interface ListboxListBaseProps extends PolymorphicProps {} +export interface ListboxListProps extends HTMLProps<'div'>, ListboxListBaseProps {} + +export const ListboxList = forwardRef((props, ref) => { + const listbox = useListboxContext() + const mergedProps = mergeProps(listbox.getListProps(), props) + + return +}) + +ListboxList.displayName = 'ListboxList' diff --git a/packages/react/src/components/listbox/listbox.test.tsx b/packages/react/src/components/listbox/listbox.test.tsx index 98422b2fa2..fdaa0ba5fa 100644 --- a/packages/react/src/components/listbox/listbox.test.tsx +++ b/packages/react/src/components/listbox/listbox.test.tsx @@ -19,15 +19,17 @@ const ComponentUnderTest = (props: Omit, 'coll Select your Framework: - - JS Frameworks - {collection.items.map((item) => ( - - {item.label} - - - ))} - + + + JS Frameworks + {collection.items.map((item) => ( + + {item.label} + + + ))} + + ) diff --git a/packages/react/src/components/listbox/listbox.ts b/packages/react/src/components/listbox/listbox.ts index 1b4b4f86f6..515155e627 100644 --- a/packages/react/src/components/listbox/listbox.ts +++ b/packages/react/src/components/listbox/listbox.ts @@ -55,6 +55,11 @@ export { type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label.tsx' +export { + ListboxList as List, + type ListboxListBaseProps as ListBaseProps, + type ListboxListProps as ListProps, +} from './listbox-list.tsx' export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, From 3c3c91d4e91438fe11a81142797368d367802a54 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 11:17:11 +0200 Subject: [PATCH 09/19] fix: date-input --- .../react/src/components/date-input/tests/date-input.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/date-input/tests/date-input.test.tsx b/packages/react/src/components/date-input/tests/date-input.test.tsx index b365baf885..ac2cbf4e03 100644 --- a/packages/react/src/components/date-input/tests/date-input.test.tsx +++ b/packages/react/src/components/date-input/tests/date-input.test.tsx @@ -66,7 +66,7 @@ describe('Date Input', () => { it('should mark segments invalid when invalid prop is passed', () => { render() - const root = document.querySelector('[data-part="root"]') + const root = document.querySelector('[data-date-input-root]') expect(root).toHaveAttribute('data-invalid') }) From 6bd17591c8e169f1c41e5d29cfebe925f6d79500 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 11:25:14 +0200 Subject: [PATCH 10/19] fix: color picker --- packages/react/src/components/color-picker/tests/basic.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/color-picker/tests/basic.tsx b/packages/react/src/components/color-picker/tests/basic.tsx index 283cdde9dd..6f57f531fb 100644 --- a/packages/react/src/components/color-picker/tests/basic.tsx +++ b/packages/react/src/components/color-picker/tests/basic.tsx @@ -1,7 +1,7 @@ import { ColorPicker, parseColor } from '../index.ts' export const ComponentUnderTest = (props: ColorPicker.RootProps) => ( - + {(colorPicker) => ( <> From b9e0b9180e3f444d2b08707e0588eae79c0392e7 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 13:11:08 +0200 Subject: [PATCH 11/19] fix: field --- .../react/src/components/field/field-item.tsx | 16 +++++----- .../react/src/components/field/field.test.tsx | 20 ++++++------- .../react/src/components/field/use-field.ts | 30 +++++++++---------- 3 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/react/src/components/field/field-item.tsx b/packages/react/src/components/field/field-item.tsx index ad5167c8fd..ac4e72a7bd 100644 --- a/packages/react/src/components/field/field-item.tsx +++ b/packages/react/src/components/field/field-item.tsx @@ -23,9 +23,9 @@ export const FieldItem = (props: FieldItemProps) => { const controlId = `field::${parentField.ids.control}::item::${value}` const labelId = `${controlId}::label` - const getControlProps = () => + const getControlProps = (getParentProps: () => Record) => ({ - ...parentField.getInputProps(), + ...getParentProps(), id: controlId, }) as HTMLProps<'input'> @@ -44,18 +44,18 @@ export const FieldItem = (props: FieldItemProps) => { }) as HTMLProps<'label'>, getInputProps: () => ({ - ...getControlProps(), - ...parts.input.attrs, + ...getControlProps(parentField.getInputProps), + ...parts.input.attrs(controlId), }) as HTMLProps<'input'>, getSelectProps: () => ({ - ...getControlProps(), - ...parts.select.attrs, + ...getControlProps(parentField.getSelectProps), + ...parts.select.attrs(controlId), }) as HTMLProps<'select'>, getTextareaProps: () => ({ - ...getControlProps(), - ...parts.textarea.attrs, + ...getControlProps(parentField.getTextareaProps), + ...parts.textarea.attrs(controlId), }) as HTMLProps<'textarea'>, } }, [parentField, value]) diff --git a/packages/react/src/components/field/field.test.tsx b/packages/react/src/components/field/field.test.tsx index c578c007bb..a8610f60e4 100644 --- a/packages/react/src/components/field/field.test.tsx +++ b/packages/react/src/components/field/field.test.tsx @@ -32,7 +32,7 @@ describe('Field / Input', () => { it('should set textbox as disabled', async () => { render() expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled() - expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled') + expect(document.querySelector('[data-field-root]')).toHaveAttribute('data-disabled') expect(screen.getByText('Label')).toHaveAttribute('data-disabled') expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled') }) @@ -106,9 +106,9 @@ describe('Field / Item', () => { const root = container.firstElementChild if (!root) throw new Error('Expected root element') const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::_r_9_::label, for=field::_r_9_::item::amount) @@ -161,9 +161,9 @@ describe('Field / Item', () => { const root = container.firstElementChild if (!root) throw new Error('Expected root element') const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::_r_c_::label, for=_r_c_) @@ -197,9 +197,9 @@ describe('Field / Item', () => { const root = container.firstElementChild if (!root) throw new Error('Expected root element') const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::_r_d_::label, for=field::_r_d_::item::currency) diff --git a/packages/react/src/components/field/use-field.ts b/packages/react/src/components/field/use-field.ts index c85bcd313a..43af8829e8 100644 --- a/packages/react/src/components/field/use-field.ts +++ b/packages/react/src/components/field/use-field.ts @@ -103,7 +103,7 @@ export const useField = (props: UseFieldProps = {}) => { const getRootProps = useMemo( () => () => ({ - ...parts.root.attrs, + ...parts.root.attrs(id), id: rootId, ref: rootRef, role: 'group', @@ -111,7 +111,7 @@ export const useField = (props: UseFieldProps = {}) => { 'data-invalid': dataAttr(invalid), 'data-readonly': dataAttr(readOnly), }) as HTMLProps<'div'>, - [disabled, invalid, readOnly, rootId], + [disabled, invalid, readOnly, rootId, id], ) const targetControlId = target ? `field::${id}::item::${target}` : undefined @@ -119,7 +119,7 @@ export const useField = (props: UseFieldProps = {}) => { const getLabelProps = useMemo( () => () => ({ - ...parts.label.attrs, + ...parts.label.attrs(id), id: labelId, 'data-disabled': dataAttr(disabled), 'data-invalid': dataAttr(invalid), @@ -150,56 +150,56 @@ export const useField = (props: UseFieldProps = {}) => { () => () => ({ ...getControlProps(), - ...parts.input.attrs, + ...parts.input.attrs(id), }) as HTMLProps<'input'>, - [getControlProps], + [getControlProps, id], ) const getTextareaProps = useMemo( () => () => ({ ...getControlProps(), - ...parts.textarea.attrs, + ...parts.textarea.attrs(id), }) as HTMLProps<'textarea'>, - [getControlProps], + [getControlProps, id], ) const getSelectProps = useMemo( () => () => ({ ...getControlProps(), - ...parts.select.attrs, + ...parts.select.attrs(id), }) as HTMLProps<'select'>, - [getControlProps], + [getControlProps, id], ) const getHelperTextProps = useMemo( () => () => ({ id: helperTextId, - ...parts.helperText.attrs, + ...parts.helperText.attrs(id), 'data-disabled': dataAttr(disabled), }) as HTMLProps<'span'>, - [disabled, helperTextId], + [disabled, helperTextId, id], ) const getErrorTextProps = useMemo( () => () => ({ id: errorTextId, - ...parts.errorText.attrs, + ...parts.errorText.attrs(id), 'aria-live': 'polite', }) as HTMLProps<'span'>, - [errorTextId], + [errorTextId, id], ) const getRequiredIndicatorProps = useMemo( () => () => ({ 'aria-hidden': true, - ...parts.requiredIndicator.attrs, + ...parts.requiredIndicator.attrs(id), }) as HTMLProps<'span'>, - [], + [id], ) return { From 946dfa10fba16aa14501f373f7bed96bc6414e30 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 13:11:33 +0200 Subject: [PATCH 12/19] fix: fieldset --- packages/react/src/components/fieldset/fieldset.test.tsx | 8 ++++++++ packages/react/src/components/fieldset/use-fieldset.ts | 8 ++++---- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/fieldset/fieldset.test.tsx b/packages/react/src/components/fieldset/fieldset.test.tsx index 0350d0c780..ad7a5625bb 100644 --- a/packages/react/src/components/fieldset/fieldset.test.tsx +++ b/packages/react/src/components/fieldset/fieldset.test.tsx @@ -74,4 +74,12 @@ describe('Fieldset', () => { expect(describedBy).toContain('helper-text') }) }) + + it('should render anatomy part attributes', async () => { + const { container } = render() + expect(container.querySelector('[data-fieldset-root]')).toBeInTheDocument() + expect(container.querySelector('[data-fieldset-legend]')).toBeInTheDocument() + expect(container.querySelector('[data-fieldset-helper-text]')).toBeInTheDocument() + expect(container.querySelector('[data-fieldset-error-text]')).toBeInTheDocument() + }) }) diff --git a/packages/react/src/components/fieldset/use-fieldset.ts b/packages/react/src/components/fieldset/use-fieldset.ts index 647cae4694..09e1090018 100644 --- a/packages/react/src/components/fieldset/use-fieldset.ts +++ b/packages/react/src/components/fieldset/use-fieldset.ts @@ -66,7 +66,7 @@ export const useFieldset = (props: UseFieldsetProps = {}) => { const getRootProps = () => ({ - ...parts.root.attrs, + ...parts.root.attrs(id), ref: rootRef, disabled, 'data-disabled': dataAttr(disabled), @@ -78,7 +78,7 @@ export const useFieldset = (props: UseFieldsetProps = {}) => { const getLegendProps = () => ({ id: legendId, - ...parts.legend.attrs, + ...parts.legend.attrs(id), 'data-disabled': dataAttr(disabled), 'data-invalid': dataAttr(invalid), }) as HTMLProps<'legend'> @@ -86,13 +86,13 @@ export const useFieldset = (props: UseFieldsetProps = {}) => { const getHelperTextProps = () => ({ id: helperTextId, - ...parts.helperText.attrs, + ...parts.helperText.attrs(id), }) as HTMLProps<'span'> const getErrorTextProps = () => ({ id: errorTextId, - ...parts.errorText.attrs, + ...parts.errorText.attrs(id), 'aria-live': 'polite', }) as HTMLProps<'span'> From cc0c77c4e6c9d147acfb2c78d748ff8dcd8a36bc Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 13:12:32 +0200 Subject: [PATCH 13/19] fix: test warnings --- .../components/accordion/tests/accordion.test.tsx | 4 ++-- .../angle-slider/tests/angle-slider.test.tsx | 4 ++-- .../src/components/avatar/tests/avatar.test.tsx | 4 ++-- .../components/checkbox/tests/checkbox.test.tsx | 4 ++-- .../components/clipboard/tests/clipboard.test.tsx | 4 ++-- .../color-picker/tests/color-picker.test.tsx | 4 ++-- .../components/combobox/tests/combobox.test.tsx | 4 ++-- .../date-input/tests/date-input.test.tsx | 4 ++-- .../date-picker/tests/date-picker.test.tsx | 4 ++-- .../src/components/dialog/tests/dialog.test.tsx | 4 ++-- .../components/editable/tests/editable.test.tsx | 4 ++-- .../hover-card/tests/hover-card.test.tsx | 4 ++-- .../react/src/components/menu/tests/menu.test.tsx | 10 +++++----- .../number-input/tests/number-input.test.tsx | 14 ++++++++------ .../pagination/tests/pagination.test.tsx | 4 ++-- .../components/progress/tests/progress.test.tsx | 4 ++-- .../src/components/qr-code/tests/qr-code.test.tsx | 4 ++-- .../rating-group/tests/rating-group.test.tsx | 4 ++-- .../src/components/select/tests/select.test.tsx | 4 ++-- .../signature-pad/tests/signature-pad.test.tsx | 4 ++-- .../src/components/switch/tests/switch.test.tsx | 4 ++-- .../react/src/components/tabs/tests/tabs.test.tsx | 2 +- .../tags-input/tests/tags-input.test.tsx | 4 ++-- .../src/components/timer/tests/timer.test.tsx | 4 ++-- .../src/components/toast/tests/toast.test.tsx | 4 ++-- .../toggle-group/tests/toggle-group.test.tsx | 4 ++-- 26 files changed, 60 insertions(+), 58 deletions(-) diff --git a/packages/react/src/components/accordion/tests/accordion.test.tsx b/packages/react/src/components/accordion/tests/accordion.test.tsx index a54a3089f3..343df6b778 100644 --- a/packages/react/src/components/accordion/tests/accordion.test.tsx +++ b/packages/react/src/components/accordion/tests/accordion.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { LocaleProvider } from '../../../providers/index.ts' @@ -6,7 +6,7 @@ import { ComponentUnderTest } from './basic.tsx' describe('Accordion', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx b/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx index 01397aef2b..aa439326d7 100644 --- a/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx +++ b/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('AngleSlider', () => { it.skip('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/avatar/tests/avatar.test.tsx b/packages/react/src/components/avatar/tests/avatar.test.tsx index 95893a52c6..d3635a6b16 100644 --- a/packages/react/src/components/avatar/tests/avatar.test.tsx +++ b/packages/react/src/components/avatar/tests/avatar.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Avatar', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/checkbox/tests/checkbox.test.tsx b/packages/react/src/components/checkbox/tests/checkbox.test.tsx index 0e81d238ae..7cd3556776 100644 --- a/packages/react/src/components/checkbox/tests/checkbox.test.tsx +++ b/packages/react/src/components/checkbox/tests/checkbox.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' @@ -6,7 +6,7 @@ import { ControlledComponentUnderTest } from './controlled.tsx' describe('Checkbox', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/clipboard/tests/clipboard.test.tsx b/packages/react/src/components/clipboard/tests/clipboard.test.tsx index ea8ba1fcdf..d9d293339b 100644 --- a/packages/react/src/components/clipboard/tests/clipboard.test.tsx +++ b/packages/react/src/components/clipboard/tests/clipboard.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import user from '@testing-library/user-event' import { CheckIcon, ClipboardCopyIcon } from 'lucide-react' import { axe } from 'vitest-axe' @@ -24,7 +24,7 @@ describe('Clipboard', () => { }) it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/color-picker/tests/color-picker.test.tsx b/packages/react/src/components/color-picker/tests/color-picker.test.tsx index 1b7e2da621..172754f157 100644 --- a/packages/react/src/components/color-picker/tests/color-picker.test.tsx +++ b/packages/react/src/components/color-picker/tests/color-picker.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ColorPicker, parseColor } from '../index.ts' @@ -7,7 +7,7 @@ import { ComponentUnderTest } from './basic.tsx' describe('ColorPicker', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/combobox/tests/combobox.test.tsx b/packages/react/src/components/combobox/tests/combobox.test.tsx index 320183fcad..db07eca33e 100644 --- a/packages/react/src/components/combobox/tests/combobox.test.tsx +++ b/packages/react/src/components/combobox/tests/combobox.test.tsx @@ -1,11 +1,11 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComboboxWithField, ComponentUnderTest } from './basic.tsx' describe('Combobox', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/date-input/tests/date-input.test.tsx b/packages/react/src/components/date-input/tests/date-input.test.tsx index ac2cbf4e03..cb9ab4fb21 100644 --- a/packages/react/src/components/date-input/tests/date-input.test.tsx +++ b/packages/react/src/components/date-input/tests/date-input.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { parseDate, parseZonedDateTime } from '@internationalized/date' @@ -7,7 +7,7 @@ import { DateInput } from '..' describe('Date Input', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() }) diff --git a/packages/react/src/components/date-picker/tests/date-picker.test.tsx b/packages/react/src/components/date-picker/tests/date-picker.test.tsx index e7d1bd52e5..795b1c8fa3 100644 --- a/packages/react/src/components/date-picker/tests/date-picker.test.tsx +++ b/packages/react/src/components/date-picker/tests/date-picker.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Date Picker', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/dialog/tests/dialog.test.tsx b/packages/react/src/components/dialog/tests/dialog.test.tsx index 94e6096398..294143798f 100644 --- a/packages/react/src/components/dialog/tests/dialog.test.tsx +++ b/packages/react/src/components/dialog/tests/dialog.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Dialog', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/editable/tests/editable.test.tsx b/packages/react/src/components/editable/tests/editable.test.tsx index 52b05b8ebd..f9eb0a26cf 100644 --- a/packages/react/src/components/editable/tests/editable.test.tsx +++ b/packages/react/src/components/editable/tests/editable.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest, EditableWithField } from './basic.tsx' @@ -6,7 +6,7 @@ import { ControlledComponentUnderTest } from './controlled.tsx' describe('Editable', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/hover-card/tests/hover-card.test.tsx b/packages/react/src/components/hover-card/tests/hover-card.test.tsx index 1c81e2811d..df61798c2e 100644 --- a/packages/react/src/components/hover-card/tests/hover-card.test.tsx +++ b/packages/react/src/components/hover-card/tests/hover-card.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('HoverCard', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/menu/tests/menu.test.tsx b/packages/react/src/components/menu/tests/menu.test.tsx index ce8ec69db7..5a325f78e6 100644 --- a/packages/react/src/components/menu/tests/menu.test.tsx +++ b/packages/react/src/components/menu/tests/menu.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { Menu } from '..' @@ -60,16 +60,16 @@ const ComponentUnderTest = (props: ComponentUnderTestProps) => { describe('Menu', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() }) - it('should set correct aria attributes on disabled MenuItems', () => { + it('should set correct aria attributes on disabled MenuItems', async () => { render() - expect(screen.getByText('Dialog')).toHaveAttribute('aria-disabled', 'true') + expect(await screen.findByText('Dialog')).toHaveAttribute('aria-disabled', 'true') }) it('should not fire onValueChange on disabled MenuItems', async () => { @@ -77,7 +77,7 @@ describe('Menu', () => { render() - fireEvent.click(screen.getByText(/svelte/i)) + fireEvent.click(await screen.findByText(/svelte/i)) expect(onValueChange).not.toHaveBeenCalled() }) diff --git a/packages/react/src/components/number-input/tests/number-input.test.tsx b/packages/react/src/components/number-input/tests/number-input.test.tsx index d3f8ba8379..0ccf2bf25d 100644 --- a/packages/react/src/components/number-input/tests/number-input.test.tsx +++ b/packages/react/src/components/number-input/tests/number-input.test.tsx @@ -6,6 +6,7 @@ import { ComponentUnderTest, NumberInputWithField } from './basic.tsx' describe('NumberInput', () => { it('should have no a11y violations', async () => { const { container } = render() + await screen.findByRole('spinbutton') const results = await axe(container) expect(results).toHaveNoViolations() @@ -42,7 +43,7 @@ describe('NumberInput', () => { it('should allow value to exceed max when allowOverflow is true', async () => { render() - const input = screen.getByRole('spinbutton') + const input = await screen.findByRole('spinbutton') expect(input).toHaveValue('15') }) @@ -99,27 +100,27 @@ describe('NumberInput', () => { describe('NumberInput / Field', () => { it('should set input as required', async () => { render() - expect(screen.getByRole('spinbutton', { name: /label/i })).toBeRequired() + expect(await screen.findByRole('spinbutton', { name: /label/i })).toBeRequired() }) it('should set input as disabled', async () => { render() - expect(screen.getByRole('spinbutton', { name: /label/i })).toBeDisabled() + expect(await screen.findByRole('spinbutton', { name: /label/i })).toBeDisabled() }) it('should set input as readonly', async () => { render() - expect(screen.getByRole('spinbutton', { name: /label/i })).toHaveAttribute('readonly') + expect(await screen.findByRole('spinbutton', { name: /label/i })).toHaveAttribute('readonly') }) it('should display helper text', async () => { render() - expect(screen.getByText('Additional Info')).toBeInTheDocument() + expect(await screen.findByText('Additional Info')).toBeInTheDocument() }) it('should display error text when error is present', async () => { render() - expect(screen.getByText('Error Info')).toBeInTheDocument() + expect(await screen.findByText('Error Info')).toBeInTheDocument() }) it('should focus on input when label is clicked', async () => { @@ -130,6 +131,7 @@ describe('NumberInput / Field', () => { it('should not display error text when no error is present', async () => { render() + await screen.findByRole('spinbutton', { name: /label/i }) expect(screen.queryByText('Error Info')).not.toBeInTheDocument() }) }) diff --git a/packages/react/src/components/pagination/tests/pagination.test.tsx b/packages/react/src/components/pagination/tests/pagination.test.tsx index cb33e17c80..76724f2eb7 100644 --- a/packages/react/src/components/pagination/tests/pagination.test.tsx +++ b/packages/react/src/components/pagination/tests/pagination.test.tsx @@ -1,11 +1,11 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Pagination', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/progress/tests/progress.test.tsx b/packages/react/src/components/progress/tests/progress.test.tsx index 22e9b10afe..5450c44475 100644 --- a/packages/react/src/components/progress/tests/progress.test.tsx +++ b/packages/react/src/components/progress/tests/progress.test.tsx @@ -1,10 +1,10 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Progress', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/qr-code/tests/qr-code.test.tsx b/packages/react/src/components/qr-code/tests/qr-code.test.tsx index 9321a9868f..039f29827d 100644 --- a/packages/react/src/components/qr-code/tests/qr-code.test.tsx +++ b/packages/react/src/components/qr-code/tests/qr-code.test.tsx @@ -1,10 +1,10 @@ -import { render } from '@testing-library/react' +import { act, render } from '@testing-library/react' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('QR-Code', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/rating-group/tests/rating-group.test.tsx b/packages/react/src/components/rating-group/tests/rating-group.test.tsx index 4c87620e0a..7f3f97b7a5 100644 --- a/packages/react/src/components/rating-group/tests/rating-group.test.tsx +++ b/packages/react/src/components/rating-group/tests/rating-group.test.tsx @@ -1,11 +1,11 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest, RatingGroupWithField } from './basic.tsx' describe('Rating Group', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/select/tests/select.test.tsx b/packages/react/src/components/select/tests/select.test.tsx index bafdf557e5..cffd44c56d 100644 --- a/packages/react/src/components/select/tests/select.test.tsx +++ b/packages/react/src/components/select/tests/select.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { SelectWithField } from './field.tsx' @@ -6,7 +6,7 @@ import { ComponentUnderTest } from './basic.tsx' describe('Select', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/signature-pad/tests/signature-pad.test.tsx b/packages/react/src/components/signature-pad/tests/signature-pad.test.tsx index 8722e7dcfb..c7aa192b72 100644 --- a/packages/react/src/components/signature-pad/tests/signature-pad.test.tsx +++ b/packages/react/src/components/signature-pad/tests/signature-pad.test.tsx @@ -1,11 +1,11 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest, SignaturePadWithField } from './basic.tsx' describe('SignaturePad ', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/switch/tests/switch.test.tsx b/packages/react/src/components/switch/tests/switch.test.tsx index ce70bf22c4..3ff30ee9c4 100644 --- a/packages/react/src/components/switch/tests/switch.test.tsx +++ b/packages/react/src/components/switch/tests/switch.test.tsx @@ -1,11 +1,11 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest, SwitchWithField } from './basic.tsx' describe('Switch', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/tabs/tests/tabs.test.tsx b/packages/react/src/components/tabs/tests/tabs.test.tsx index b457ebb226..51f664e20b 100644 --- a/packages/react/src/components/tabs/tests/tabs.test.tsx +++ b/packages/react/src/components/tabs/tests/tabs.test.tsx @@ -7,7 +7,7 @@ import { ComponentUnderTest } from './basic.tsx' describe('Tabs', () => { it('should have no a11y violations', async () => { await act(async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() }) diff --git a/packages/react/src/components/tags-input/tests/tags-input.test.tsx b/packages/react/src/components/tags-input/tests/tags-input.test.tsx index 4ba8477064..6be714bb72 100644 --- a/packages/react/src/components/tags-input/tests/tags-input.test.tsx +++ b/packages/react/src/components/tags-input/tests/tags-input.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest, TagsInputWithField } from './basic.tsx' describe('TagsInput', () => { it.skip('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/timer/tests/timer.test.tsx b/packages/react/src/components/timer/tests/timer.test.tsx index b54ac6ef78..f1fc138169 100644 --- a/packages/react/src/components/timer/tests/timer.test.tsx +++ b/packages/react/src/components/timer/tests/timer.test.tsx @@ -1,10 +1,10 @@ -import { render } from '@testing-library/react' +import { act, render } from '@testing-library/react' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Timer / Parts & Exports', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/toast/tests/toast.test.tsx b/packages/react/src/components/toast/tests/toast.test.tsx index 01be8ae19d..2d781961f0 100644 --- a/packages/react/src/components/toast/tests/toast.test.tsx +++ b/packages/react/src/components/toast/tests/toast.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('Toast', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/toggle-group/tests/toggle-group.test.tsx b/packages/react/src/components/toggle-group/tests/toggle-group.test.tsx index afb8d0dd56..74c0394a0d 100644 --- a/packages/react/src/components/toggle-group/tests/toggle-group.test.tsx +++ b/packages/react/src/components/toggle-group/tests/toggle-group.test.tsx @@ -1,11 +1,11 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { act, render, screen, waitFor } from '@testing-library/react' import user from '@testing-library/user-event' import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('ToggleGroup', () => { it('should have no a11y violations', async () => { - const { container } = render() + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() From 92a229d64728d035dfbf2aaa745b6a635f9762c0 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 15 Jun 2026 13:23:20 +0200 Subject: [PATCH 14/19] fix: tests --- .../angle-slider/tests/angle-slider.test.tsx | 2 +- .../color-picker/tests/color-picker.test.tsx | 6 ++--- .../components/slider/tests/slider.test.tsx | 4 +-- .../src/components/splitter/splitter.test.tsx | 26 +++++++++++++++---- .../tags-input/tests/tags-input.test.tsx | 2 +- packages/react/src/setup-test.ts | 8 ++++++ 6 files changed, 36 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx b/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx index aa439326d7..affb7ee442 100644 --- a/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx +++ b/packages/react/src/components/angle-slider/tests/angle-slider.test.tsx @@ -3,7 +3,7 @@ import { axe } from 'vitest-axe' import { ComponentUnderTest } from './basic.tsx' describe('AngleSlider', () => { - it.skip('should have no a11y violations', async () => { + it('should have no a11y violations', async () => { const { container } = await act(async () => render()) const results = await axe(container) diff --git a/packages/react/src/components/color-picker/tests/color-picker.test.tsx b/packages/react/src/components/color-picker/tests/color-picker.test.tsx index 172754f157..bb2aa9055f 100644 --- a/packages/react/src/components/color-picker/tests/color-picker.test.tsx +++ b/packages/react/src/components/color-picker/tests/color-picker.test.tsx @@ -37,11 +37,11 @@ describe('ColorPicker', () => { await waitFor(() => expect(screen.queryByTestId('positioner')).not.toBeInTheDocument()) }) - it.skip('should render with default value', async () => { - render() + it('should render with default value', async () => { + render() expect(screen.getByTestId('swatch-trigger')).toHaveStyle({ - backgroundColor: 'rgb(255, 0, 255)', + background: 'hsla(300, 100%, 50%, 1)', }) }) }) diff --git a/packages/react/src/components/slider/tests/slider.test.tsx b/packages/react/src/components/slider/tests/slider.test.tsx index dca8b678c4..eb364629f4 100644 --- a/packages/react/src/components/slider/tests/slider.test.tsx +++ b/packages/react/src/components/slider/tests/slider.test.tsx @@ -5,8 +5,8 @@ import { LocaleProvider } from '../../../providers/index.ts' import { ComponentUnderTest } from './basic.tsx' describe('Slider', () => { - it.skip('should have no a11y violations', async () => { - const { container } = await act(() => render()) + it('should have no a11y violations', async () => { + const { container } = await act(async () => render()) const results = await axe(container) expect(results).toHaveNoViolations() diff --git a/packages/react/src/components/splitter/splitter.test.tsx b/packages/react/src/components/splitter/splitter.test.tsx index 314aa77ae3..6c6ba2833e 100644 --- a/packages/react/src/components/splitter/splitter.test.tsx +++ b/packages/react/src/components/splitter/splitter.test.tsx @@ -19,15 +19,31 @@ describe('Splitter', () => { expect(screen.getByRole('separator')).toBeInTheDocument() }) - it.skip('should call onResizeStart callback', () => { - const onResizeStart = vi.fn() - render() + it('should call onResizeEnd callback', async () => { + // happy-dom reports a zero-sized layout, so the splitter machine cannot + // resolve panel sizes. Mock the measured rect so keyboard resizing works. + const rectSpy = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue({ + width: 300, + height: 300, + top: 0, + left: 0, + right: 300, + bottom: 300, + x: 0, + y: 0, + toJSON: () => ({}), + } as DOMRect) + + const onResizeEnd = vi.fn() + render() const trigger = screen.getByRole('separator') trigger.focus() - user.keyboard('{ArrowRight}') + await user.keyboard('{ArrowRight}') - expect(onResizeStart).toHaveBeenCalled() + expect(onResizeEnd).toHaveBeenCalled() + + rectSpy.mockRestore() }) }) diff --git a/packages/react/src/components/tags-input/tests/tags-input.test.tsx b/packages/react/src/components/tags-input/tests/tags-input.test.tsx index 6be714bb72..bb5f6cf288 100644 --- a/packages/react/src/components/tags-input/tests/tags-input.test.tsx +++ b/packages/react/src/components/tags-input/tests/tags-input.test.tsx @@ -4,7 +4,7 @@ import { axe } from 'vitest-axe' import { ComponentUnderTest, TagsInputWithField } from './basic.tsx' describe('TagsInput', () => { - it.skip('should have no a11y violations', async () => { + it('should have no a11y violations', async () => { const { container } = await act(async () => render()) const results = await axe(container) diff --git a/packages/react/src/setup-test.ts b/packages/react/src/setup-test.ts index 0830bc662e..f01470344a 100644 --- a/packages/react/src/setup-test.ts +++ b/packages/react/src/setup-test.ts @@ -1,3 +1,11 @@ /// import '@testing-library/jest-dom/vitest' import 'vitest-axe/extend-expect' + +// happy-dom does not ship the UA stylesheet, so the `hidden` attribute is not +// reflected to `display: none`. Without this, axe treats visually-hidden form +// controls (e.g. Slider/TagsInput hidden inputs) as visible and reports false +// nested-interactive / label violations. +const uaStyle = document.createElement('style') +uaStyle.textContent = '[hidden]{display:none !important}' +document.head.appendChild(uaStyle) From b2509f5d61457cbf195f8c0b7b63dcf57e3f47f7 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Tue, 16 Jun 2026 12:54:29 +0200 Subject: [PATCH 15/19] chore: wip --- packages/react/src/components/field/examples/item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/field/examples/item.tsx b/packages/react/src/components/field/examples/item.tsx index 748772158d..befa8e30cb 100644 --- a/packages/react/src/components/field/examples/item.tsx +++ b/packages/react/src/components/field/examples/item.tsx @@ -5,7 +5,7 @@ export const Item = () => ( Amount - + From bf319139ab84e5b9e84d028756f23c28c20c4f4d Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Tue, 16 Jun 2026 13:15:57 +0200 Subject: [PATCH 16/19] chore: wip --- .../react/src/components/field/field.test.tsx | 1 + packages/react/src/components/field/use-field.ts | 16 ++++++---------- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/field/field.test.tsx b/packages/react/src/components/field/field.test.tsx index 270bd8f48f..6ad4130584 100644 --- a/packages/react/src/components/field/field.test.tsx +++ b/packages/react/src/components/field/field.test.tsx @@ -51,6 +51,7 @@ describe('Field / Input', () => { it('should display error text when error is present', async () => { render() expect(screen.getByText('Error Info')).toBeInTheDocument() + expect(screen.getByRole('textbox')).toHaveAccessibleErrorMessage('Error Info') }) it('should focus on input when label is clicked', async () => { diff --git a/packages/react/src/components/field/use-field.ts b/packages/react/src/components/field/use-field.ts index 43af8829e8..4c47cc864b 100644 --- a/packages/react/src/components/field/use-field.ts +++ b/packages/react/src/components/field/use-field.ts @@ -93,13 +93,6 @@ export const useField = (props: UseFieldProps = {}) => { return () => observer.disconnect() }, [env, errorTextId, helperTextId]) - const labelIds = useMemo(() => { - const ids: string[] = [] - if (hasErrorText && invalid) ids.push(errorTextId) - if (hasHelperText) ids.push(helperTextId) - return ids.join(' ') || undefined - }, [invalid, errorTextId, helperTextId, hasErrorText, hasHelperText]) - const getRootProps = useMemo( () => () => ({ @@ -130,10 +123,13 @@ export const useField = (props: UseFieldProps = {}) => { [disabled, invalid, readOnly, required, id, labelId, targetControlId], ) + const errorMessageId = hasErrorText && invalid ? errorTextId : undefined + const getControlProps = useMemo( () => () => ({ - 'aria-describedby': labelIds, + 'aria-describedby': hasHelperText ? helperTextId : undefined, + 'aria-errormessage': errorMessageId, 'aria-invalid': ariaAttr(invalid), 'data-invalid': dataAttr(invalid), 'data-required': dataAttr(required), @@ -143,7 +139,7 @@ export const useField = (props: UseFieldProps = {}) => { disabled, readOnly, }) as HTMLProps<'input'>, - [labelIds, invalid, required, readOnly, id, disabled], + [invalid, hasHelperText, helperTextId, required, readOnly, id, errorMessageId, disabled], ) const getInputProps = useMemo( @@ -203,7 +199,7 @@ export const useField = (props: UseFieldProps = {}) => { ) return { - ariaDescribedby: labelIds, + ariaDescribedby: hasHelperText ? helperTextId : undefined, ids: { root: rootId, control: id, From 50919ff7938baa395e673a2d372b7bcec8344fc5 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 22 Jun 2026 10:03:54 +0200 Subject: [PATCH 17/19] chore: wip --- .../components/combobox/tests/combobox.test.tsx | 11 ++++++----- .../rating-group/tests/rating-group.test.tsx | 15 ++++++++------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/react/src/components/combobox/tests/combobox.test.tsx b/packages/react/src/components/combobox/tests/combobox.test.tsx index db07eca33e..bc9054f746 100644 --- a/packages/react/src/components/combobox/tests/combobox.test.tsx +++ b/packages/react/src/components/combobox/tests/combobox.test.tsx @@ -82,27 +82,27 @@ describe('Combobox', () => { describe('Combobox / Field', () => { it('should set combobox as required', async () => { render() - expect(screen.getByRole('combobox', { name: /label/i })).toBeRequired() + expect(await screen.findByRole('combobox', { name: /label/i })).toBeRequired() }) it('should set combobox as disabled', async () => { render() - expect(screen.getByRole('combobox', { name: /label/i })).toBeDisabled() + expect(await screen.findByRole('combobox', { name: /label/i })).toBeDisabled() }) it('should set combobox as readonly', async () => { render() - expect(screen.getByRole('combobox', { name: /label/i })).toHaveAttribute('readonly') + expect(await screen.findByRole('combobox', { name: /label/i })).toHaveAttribute('readonly') }) it('should display helper text', async () => { render() - expect(screen.getByText('Additional Info')).toBeInTheDocument() + expect(await screen.findByText('Additional Info')).toBeInTheDocument() }) it('should display error text when error is present', async () => { render() - expect(screen.getByText('Error Info')).toBeInTheDocument() + expect(await screen.findByText('Error Info')).toBeInTheDocument() }) it('should focus on combobox when label is clicked', async () => { @@ -113,6 +113,7 @@ describe('Combobox / Field', () => { it('should not display error text when no error is present', async () => { render() + await screen.findByRole('combobox', { name: /label/i }) expect(screen.queryByText('Error Info')).not.toBeInTheDocument() }) }) diff --git a/packages/react/src/components/rating-group/tests/rating-group.test.tsx b/packages/react/src/components/rating-group/tests/rating-group.test.tsx index 7f3f97b7a5..632f8c661d 100644 --- a/packages/react/src/components/rating-group/tests/rating-group.test.tsx +++ b/packages/react/src/components/rating-group/tests/rating-group.test.tsx @@ -14,7 +14,7 @@ describe('Rating Group', () => { it('should apply default value', async () => { render() - const input = screen.getByRole('textbox', { hidden: true }) + const input = await screen.findByRole('textbox', { hidden: true }) expect(input).toHaveValue('2') }) @@ -22,7 +22,7 @@ describe('Rating Group', () => { it('should apply value', async () => { render() - const input = screen.getByRole('textbox', { hidden: true }) + const input = await screen.findByRole('textbox', { hidden: true }) expect(input).toHaveValue('1') }) @@ -51,27 +51,27 @@ describe('Rating Group', () => { describe('Rating Group / Field', () => { it('should set rating group as required', async () => { render() - expect(screen.getByRole('textbox', { hidden: true })).toBeRequired() + expect(await screen.findByRole('textbox', { hidden: true })).toBeRequired() }) it('should set rating group as disabled', async () => { render() - expect(screen.getByRole('textbox', { hidden: true })).toBeDisabled() + expect(await screen.findByRole('textbox', { hidden: true })).toBeDisabled() }) it('should set rating group as readonly', async () => { render() - expect(screen.getByRole('textbox', { hidden: true })).toHaveAttribute('readonly') + expect(await screen.findByRole('textbox', { hidden: true })).toHaveAttribute('readonly') }) it('should display helper text', async () => { render() - expect(screen.getByText('Additional Info')).toBeInTheDocument() + expect(await screen.findByText('Additional Info')).toBeInTheDocument() }) it('should display error text when error is present', async () => { render() - expect(screen.getByText('Error Info')).toBeInTheDocument() + expect(await screen.findByText('Error Info')).toBeInTheDocument() }) it('should focus on rating group when label is clicked', async () => { @@ -82,6 +82,7 @@ describe('Rating Group / Field', () => { it('should not display error text when no error is present', async () => { render() + await screen.findByRole('textbox', { hidden: true }) expect(screen.queryByText('Error Info')).not.toBeInTheDocument() }) }) From dfee27ed6168a434b93255dc8d9cda1d434ff13a Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 22 Jun 2026 13:02:16 +0200 Subject: [PATCH 18/19] feat: solid --- .../components/accordion/accordion-root.tsx | 1 + .../src/components/carousel/carousel-root.tsx | 6 +- .../components/carousel/examples/autoplay.tsx | 2 +- .../components/carousel/examples/basic.tsx | 2 +- .../carousel/examples/controlled.tsx | 2 +- .../carousel/examples/dynamic-slides.tsx | 2 +- .../carousel/examples/pause-on-hover.tsx | 2 +- .../carousel/examples/root-provider.tsx | 2 +- .../carousel/examples/scroll-to.tsx | 2 +- .../carousel/examples/slides-per-page.tsx | 2 +- .../components/carousel/examples/spacing.tsx | 2 +- .../carousel/examples/thumbnail-indicator.tsx | 2 +- .../carousel/examples/variable-size.tsx | 2 +- .../components/carousel/examples/vertical.tsx | 2 +- .../examples/async-list/dependencies.tsx | 18 +-- .../collection/examples/async-list/filter.tsx | 18 +-- .../examples/async-list/infinite-loading.tsx | 10 +- .../collection/examples/async-list/reload.tsx | 6 +- .../examples/async-list/sort-client-side.tsx | 16 +-- .../examples/async-list/sort-server-side.tsx | 16 +-- .../components/color-picker/tests/basic.tsx | 4 +- .../color-picker/tests/color-picker.test.tsx | 16 ++- .../src/components/combobox/combobox-root.tsx | 2 +- .../combobox/examples/async-search.tsx | 20 ++-- .../date-input/tests/date-input.test.tsx | 2 +- .../solid/src/components/field/field-item.tsx | 16 +-- .../solid/src/components/field/field.test.tsx | 21 ++-- .../solid/src/components/field/use-field.ts | 28 ++--- .../src/components/fieldset/use-fieldset.ts | 8 +- .../examples/anchor-position.tsx | 16 +-- .../floating-panel/examples/basic.tsx | 16 +-- .../floating-panel/examples/context.tsx | 16 +-- .../examples/controlled-open.tsx | 16 +-- .../examples/controlled-position.tsx | 16 +-- .../examples/controlled-size.tsx | 16 +-- .../floating-panel/examples/lazy-mount.tsx | 16 +-- .../floating-panel-resize-trigger.tsx | 2 +- .../floating-panel/floating-panel.ts | 4 +- .../src/components/floating-panel/index.tsx | 2 +- .../image-cropper/examples/aspect-ratio.tsx | 6 +- .../image-cropper/examples/basic.tsx | 6 +- .../image-cropper/examples/circle.tsx | 6 +- .../image-cropper/examples/context.tsx | 6 +- .../examples/controlled-zoom.tsx | 6 +- .../image-cropper/examples/crop-preview.tsx | 6 +- .../image-cropper/examples/events.tsx | 6 +- .../image-cropper/examples/flip.tsx | 6 +- .../image-cropper/examples/initial-crop.tsx | 6 +- .../image-cropper/examples/min-max-size.tsx | 6 +- .../image-cropper/examples/reset.tsx | 6 +- .../image-cropper/examples/root-provider.tsx | 6 +- .../image-cropper/examples/rotation.tsx | 6 +- .../image-cropper/examples/zoom-limits.tsx | 6 +- .../image-cropper/image-cropper-handle.tsx | 2 +- .../components/image-cropper/image-cropper.ts | 2 +- .../json-tree-view/json-tree-view-node.tsx | 52 +++++---- .../src/components/listbox/examples/basic.tsx | 22 ++-- .../listbox/examples/controlled.tsx | 22 ++-- .../listbox/examples/disabled-item.tsx | 22 ++-- .../listbox/examples/extended-select.tsx | 22 ++-- .../components/listbox/examples/filtering.tsx | 24 ++-- .../src/components/listbox/examples/grid.tsx | 16 +-- .../src/components/listbox/examples/group.tsx | 36 +++--- .../listbox/examples/horizontal.tsx | 26 +++-- .../components/listbox/examples/multiple.tsx | 22 ++-- .../listbox/examples/root-provider.tsx | 22 ++-- .../listbox/examples/select-all.tsx | 22 ++-- .../listbox/examples/value-text.tsx | 22 ++-- .../solid/src/components/listbox/index.tsx | 1 + .../src/components/listbox/listbox-list.tsx | 13 +++ .../src/components/listbox/listbox.test.tsx | 26 +++-- .../solid/src/components/listbox/listbox.ts | 5 + .../src/components/menu/tests/menu.test.tsx | 8 +- .../number-input/number-input-root.tsx | 6 + .../components/pin-input/examples/basic.tsx | 2 +- .../pin-input/examples/blur-on-complete.tsx | 2 +- .../pin-input/examples/custom-placeholder.tsx | 2 +- .../components/pin-input/examples/mask.tsx | 2 +- .../pin-input/examples/otp-mode.tsx | 2 +- .../pin-input/examples/root-provider.tsx | 2 +- .../pin-input/examples/with-field.tsx | 2 +- .../src/components/pin-input/tests/basic.tsx | 6 +- .../src/components/pin-input/use-pin-input.ts | 2 +- .../segment-group/segment-group-indicator.tsx | 3 +- .../segment-group-item-control.tsx | 3 +- .../segment-group/segment-group-item-text.tsx | 3 +- .../segment-group/segment-group-item.tsx | 3 +- .../segment-group/segment-group-label.tsx | 3 +- .../segment-group-root-provider.tsx | 3 +- .../segment-group/segment-group-root.tsx | 3 +- .../src/components/select/select-root.tsx | 4 +- .../solid/src/components/tabs/tabs-root.tsx | 2 +- .../tags-input/tests/tags-input.test.tsx | 4 +- .../tree-view/examples/async-loading.tsx | 79 ++++++++------ .../tree-view/examples/async-tree-node.tsx | 66 ++++++----- .../components/tree-view/examples/basic.tsx | 48 ++++---- .../tree-view/examples/checkbox-tree.tsx | 69 +++++++----- .../tree-view/examples/context-menu.tsx | 74 +++++++------ .../examples/controlled-expanded.tsx | 48 ++++---- .../examples/controlled-selected.tsx | 48 ++++---- .../tree-view/examples/disabled-node.tsx | 52 +++++---- .../examples/expand-collapse-all.tsx | 52 +++++---- .../tree-view/examples/filtering.tsx | 87 ++++++++------- .../tree-view/examples/lazy-mount.tsx | 77 +++++++------ .../components/tree-view/examples/links.tsx | 67 +++++++----- .../tree-view/examples/mutation.tsx | 38 ++++--- .../tree-view/examples/rename-node.tsx | 72 ++++++------ .../tree-view/examples/root-provider.tsx | 48 ++++---- .../examples/tree-node-with-checkbox.tsx | 62 ++++++----- .../examples/tree-node-with-links.tsx | 46 ++++---- .../tree-view/examples/tree-node.tsx | 52 +++++---- .../tree-view/examples/virtualized.tsx | 35 +++--- .../solid/src/components/tree-view/index.tsx | 79 ++++++-------- .../src/components/tree-view/tests/basic.tsx | 48 ++++---- .../tree-view/tests/tree-view.test.tsx | 8 +- .../tree-view/tree-view-branch-indicator.tsx | 15 --- .../tree-view/tree-view-branch-text.tsx | 15 --- ...-branch-trigger.tsx => tree-view-cell.tsx} | 8 +- ...control.tsx => tree-view-indent-guide.tsx} | 8 +- .../tree-view/tree-view-item-indicator.tsx | 15 --- .../tree-view-node-checkbox-indicator.tsx | 25 ----- ....tsx => tree-view-node-expand-trigger.tsx} | 8 +- ...t.tsx => tree-view-node-group-content.tsx} | 12 +- ...ew-branch.tsx => tree-view-node-group.tsx} | 12 +- .../tree-view/tree-view-node-indicator.tsx | 30 +++++ ...-item-text.tsx => tree-view-node-text.tsx} | 8 +- ...{tree-view-item.tsx => tree-view-node.tsx} | 8 +- .../src/components/tree-view/tree-view.ts | 103 ++++++++---------- 128 files changed, 1268 insertions(+), 1136 deletions(-) create mode 100644 packages/solid/src/components/listbox/listbox-list.tsx delete mode 100644 packages/solid/src/components/tree-view/tree-view-branch-indicator.tsx delete mode 100644 packages/solid/src/components/tree-view/tree-view-branch-text.tsx rename packages/solid/src/components/tree-view/{tree-view-branch-trigger.tsx => tree-view-cell.tsx} (52%) rename packages/solid/src/components/tree-view/{tree-view-branch-control.tsx => tree-view-indent-guide.tsx} (52%) delete mode 100644 packages/solid/src/components/tree-view/tree-view-item-indicator.tsx delete mode 100644 packages/solid/src/components/tree-view/tree-view-node-checkbox-indicator.tsx rename packages/solid/src/components/tree-view/{tree-view-branch-indent-guide.tsx => tree-view-node-expand-trigger.tsx} (54%) rename packages/solid/src/components/tree-view/{tree-view-branch-content.tsx => tree-view-node-group-content.tsx} (63%) rename packages/solid/src/components/tree-view/{tree-view-branch.tsx => tree-view-node-group.tsx} (64%) create mode 100644 packages/solid/src/components/tree-view/tree-view-node-indicator.tsx rename packages/solid/src/components/tree-view/{tree-view-item-text.tsx => tree-view-node-text.tsx} (60%) rename packages/solid/src/components/tree-view/{tree-view-item.tsx => tree-view-node.tsx} (62%) diff --git a/packages/solid/src/components/accordion/accordion-root.tsx b/packages/solid/src/components/accordion/accordion-root.tsx index 1ef3af2f91..966fe2506b 100644 --- a/packages/solid/src/components/accordion/accordion-root.tsx +++ b/packages/solid/src/components/accordion/accordion-root.tsx @@ -20,6 +20,7 @@ export const AccordionRoot = (props: AccordionRootProps) => { 'disabled', 'id', 'ids', + 'loopFocus', 'multiple', 'onFocusChange', 'onValueChange', diff --git a/packages/solid/src/components/carousel/carousel-root.tsx b/packages/solid/src/components/carousel/carousel-root.tsx index db413c1a6f..913c7e1335 100644 --- a/packages/solid/src/components/carousel/carousel-root.tsx +++ b/packages/solid/src/components/carousel/carousel-root.tsx @@ -10,20 +10,20 @@ export interface CarouselRootProps extends HTMLProps<'div'>, CarouselRootBasePro export const CarouselRoot = (props: CarouselRootProps) => { const [useCarouselProps, localProps] = createSplitProps()(props, [ 'allowMouseDrag', - 'autoplay', + 'autoPlay', 'autoSize', + 'count', 'defaultPage', 'id', 'ids', 'inViewThreshold', + 'itemSpacing', 'loop', 'onAutoplayStatusChange', 'onDragStatusChange', 'onPageChange', 'orientation', - 'padding', 'page', - 'slideCount', 'slidesPerMove', 'slidesPerPage', 'snapType', diff --git a/packages/solid/src/components/carousel/examples/autoplay.tsx b/packages/solid/src/components/carousel/examples/autoplay.tsx index 8ff480c664..3354553d6a 100644 --- a/packages/solid/src/components/carousel/examples/autoplay.tsx +++ b/packages/solid/src/components/carousel/examples/autoplay.tsx @@ -13,7 +13,7 @@ const images = [ export const Autoplay = () => { return ( - + {(image, index) => ( diff --git a/packages/solid/src/components/carousel/examples/basic.tsx b/packages/solid/src/components/carousel/examples/basic.tsx index 55e3c58309..f262c1ef4e 100644 --- a/packages/solid/src/components/carousel/examples/basic.tsx +++ b/packages/solid/src/components/carousel/examples/basic.tsx @@ -13,7 +13,7 @@ const images = [ export const Basic = () => { return ( - + diff --git a/packages/solid/src/components/carousel/examples/controlled.tsx b/packages/solid/src/components/carousel/examples/controlled.tsx index c95c6a10c1..4f7e1cc901 100644 --- a/packages/solid/src/components/carousel/examples/controlled.tsx +++ b/packages/solid/src/components/carousel/examples/controlled.tsx @@ -17,7 +17,7 @@ export const Controlled = () => { return ( setPage(details.page)} > diff --git a/packages/solid/src/components/carousel/examples/dynamic-slides.tsx b/packages/solid/src/components/carousel/examples/dynamic-slides.tsx index fd76cc00d9..a1bc0c8b84 100644 --- a/packages/solid/src/components/carousel/examples/dynamic-slides.tsx +++ b/packages/solid/src/components/carousel/examples/dynamic-slides.tsx @@ -19,7 +19,7 @@ export const DynamicSlides = () => {
setPage(details.page)} > diff --git a/packages/solid/src/components/carousel/examples/pause-on-hover.tsx b/packages/solid/src/components/carousel/examples/pause-on-hover.tsx index efaa85756b..36d57d7b8e 100644 --- a/packages/solid/src/components/carousel/examples/pause-on-hover.tsx +++ b/packages/solid/src/components/carousel/examples/pause-on-hover.tsx @@ -12,7 +12,7 @@ const images = [ export const PauseOnHover = () => { return ( - + {(carousel) => ( diff --git a/packages/solid/src/components/carousel/examples/root-provider.tsx b/packages/solid/src/components/carousel/examples/root-provider.tsx index d976dadba1..683cc658d7 100644 --- a/packages/solid/src/components/carousel/examples/root-provider.tsx +++ b/packages/solid/src/components/carousel/examples/root-provider.tsx @@ -12,7 +12,7 @@ const images = [ ] export const RootProvider = () => { - const carousel = useCarousel({ slideCount: images.length }) + const carousel = useCarousel({ count: images.length }) return (
diff --git a/packages/solid/src/components/carousel/examples/scroll-to.tsx b/packages/solid/src/components/carousel/examples/scroll-to.tsx index ea6f6fa014..47a6832e0d 100644 --- a/packages/solid/src/components/carousel/examples/scroll-to.tsx +++ b/packages/solid/src/components/carousel/examples/scroll-to.tsx @@ -8,7 +8,7 @@ const slides = Array.from({ length: 6 }) export const ScrollTo = () => { return ( - + {(api) => (
- {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
Found {list().items.length} users
@@ -100,7 +100,7 @@ export const Dependencies = () => {
- {list().items.length === 0 && !list().loading && ( + {list().items.length === 0 && !list().isLoading && (
No users found with current filters
)}
diff --git a/packages/solid/src/components/collection/examples/async-list/filter.tsx b/packages/solid/src/components/collection/examples/async-list/filter.tsx index 651eee05c7..9e7ecdcc94 100644 --- a/packages/solid/src/components/collection/examples/async-list/filter.tsx +++ b/packages/solid/src/components/collection/examples/async-list/filter.tsx @@ -17,17 +17,17 @@ interface User { export const Filter = () => { const list = useAsyncList({ initialItems: mockUsers.slice(0, LIMIT), - async load({ filterText }: { filterText?: string }) { + async load({ filter }) { await delay(500) - if (!filterText) { + if (!filter) { return { items: mockUsers.slice(0, LIMIT) } } const filtered = mockUsers.filter( (user) => - user.name.toLowerCase().includes(filterText.toLowerCase()) || - user.email.toLowerCase().includes(filterText.toLowerCase()), + user.name.toLowerCase().includes(filter.toLowerCase()) || + user.email.toLowerCase().includes(filter.toLowerCase()), ) return { items: filtered.slice(0, LIMIT) } @@ -41,17 +41,17 @@ export const Filter = () => { class={field.Input} type="text" placeholder="Search users..." - value={list().filterText} - onInput={(e) => list().setFilterText(e.target.value)} + value={list().filter} + onInput={(e) => list().setFilter(e.target.value)} /> - {list().loading && ( + {list().isLoading && ( Searching )}
- {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
@@ -69,7 +69,7 @@ export const Filter = () => {
- {list().items.length === 0 && !list().loading &&
No results found
} + {list().items.length === 0 && !list().isLoading &&
No results found
}
) } diff --git a/packages/solid/src/components/collection/examples/async-list/infinite-loading.tsx b/packages/solid/src/components/collection/examples/async-list/infinite-loading.tsx index 3d49c3f844..d5c9d7cfd1 100644 --- a/packages/solid/src/components/collection/examples/async-list/infinite-loading.tsx +++ b/packages/solid/src/components/collection/examples/async-list/infinite-loading.tsx @@ -17,7 +17,7 @@ export const InfiniteLoading = () => { const list = useAsyncList({ autoReload: true, async load({ cursor }) { - const page = cursor || 1 + const page = Number(cursor) || 1 const start = (page - 1) * LIMIT const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_start=${start}&_limit=${LIMIT}`) @@ -31,7 +31,7 @@ export const InfiniteLoading = () => { return { items: posts, - cursor: hasNextPage ? page + 1 : undefined, + cursor: hasNextPage ? String(page + 1) : undefined, } }, }) @@ -44,8 +44,8 @@ export const InfiniteLoading = () => { {list().cursor && ` (more available)`} {list().cursor && ( -
- {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
diff --git a/packages/solid/src/components/collection/examples/async-list/reload.tsx b/packages/solid/src/components/collection/examples/async-list/reload.tsx index e78914c451..5e7d7fc255 100644 --- a/packages/solid/src/components/collection/examples/async-list/reload.tsx +++ b/packages/solid/src/components/collection/examples/async-list/reload.tsx @@ -28,8 +28,8 @@ export const Reload = () => { return (
-
- {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
diff --git a/packages/solid/src/components/collection/examples/async-list/sort-client-side.tsx b/packages/solid/src/components/collection/examples/async-list/sort-client-side.tsx index a7e2e335aa..2024e8fbab 100644 --- a/packages/solid/src/components/collection/examples/async-list/sort-client-side.tsx +++ b/packages/solid/src/components/collection/examples/async-list/sort-client-side.tsx @@ -23,10 +23,10 @@ export const SortClientSide = () => { const data = await response.json() return { items: data } }, - sort({ items, descriptor }) { + sort({ items, sorting }) { return { items: items.sort((a, b) => { - const { column, direction } = descriptor + const { column, direction } = sorting let cmp = collator().compare(String(a[column]), String(b[column])) if (direction === 'descending') { cmp *= -1 @@ -38,32 +38,32 @@ export const SortClientSide = () => { }) const handleSort = (column: keyof User) => { - const currentSort = list().sortDescriptor + const currentSort = list().sorting let direction: 'ascending' | 'descending' = 'ascending' if (currentSort?.column === column && currentSort.direction === 'ascending') { direction = 'descending' } - list().sort({ column, direction }) + list().setSorting({ column, direction }) } const getSortIcon = (column: keyof User) => { - const current = list().sortDescriptor + const current = list().sorting if (current?.column !== column) return return current.direction === 'ascending' ? : } - const descriptor = () => list().sortDescriptor + const descriptor = () => list().sorting return (
- {list().loading && ( + {list().isLoading && (
Loading
)} - {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
Sorted by: {descriptor() ? `${descriptor()?.column} (${descriptor()?.direction})` : 'none'}
diff --git a/packages/solid/src/components/collection/examples/async-list/sort-server-side.tsx b/packages/solid/src/components/collection/examples/async-list/sort-server-side.tsx index bf2bbd9858..a32815a915 100644 --- a/packages/solid/src/components/collection/examples/async-list/sort-server-side.tsx +++ b/packages/solid/src/components/collection/examples/async-list/sort-server-side.tsx @@ -20,11 +20,11 @@ interface Product { export const SortServerSide = () => { const list = useAsyncList({ autoReload: true, - async load({ sortDescriptor }) { + async load({ sorting }) { const url = new URL('https://fakestoreapi.com/products') url.searchParams.set('limit', '5') - if (sortDescriptor) { - const { direction } = sortDescriptor + if (sorting) { + const { direction } = sorting url.searchParams.set('sort', direction === 'ascending' ? 'asc' : 'desc') } const response = await fetch(url) @@ -34,16 +34,16 @@ export const SortServerSide = () => { }) const handleSort = (column: keyof Product) => { - const currentSort = list().sortDescriptor + const currentSort = list().sorting let direction: 'ascending' | 'descending' = 'ascending' if (currentSort?.column === column && currentSort.direction === 'ascending') { direction = 'descending' } - list().sort({ column, direction }) + list().setSorting({ column, direction }) } const getSortIcon = (column: keyof Product) => { - const desc = list().sortDescriptor + const desc = list().sorting if (desc?.column !== column) return return desc.direction === 'ascending' ? : } @@ -54,14 +54,14 @@ export const SortServerSide = () => { - {list().loading && ( + {list().isLoading && ( Loading )}
- {list().error &&
Error: {list().error.message}
} + {list().error &&
Error: {list().error?.message}
}
diff --git a/packages/solid/src/components/color-picker/tests/basic.tsx b/packages/solid/src/components/color-picker/tests/basic.tsx index 42498eeecf..0e9dc249bb 100644 --- a/packages/solid/src/components/color-picker/tests/basic.tsx +++ b/packages/solid/src/components/color-picker/tests/basic.tsx @@ -1,7 +1,7 @@ import { ColorPicker, parseColor } from '../index.tsx' export const ComponentUnderTest = (props: ColorPicker.RootProps) => ( - + {(api) => ( <> @@ -12,7 +12,7 @@ export const ComponentUnderTest = (props: ColorPicker.RootProps) => ( - + diff --git a/packages/solid/src/components/color-picker/tests/color-picker.test.tsx b/packages/solid/src/components/color-picker/tests/color-picker.test.tsx index 42eed638ff..8874d98629 100644 --- a/packages/solid/src/components/color-picker/tests/color-picker.test.tsx +++ b/packages/solid/src/components/color-picker/tests/color-picker.test.tsx @@ -11,12 +11,10 @@ describe('ColorPicker', () => { expect(screen.queryByTestId('positioner')).not.toBeInTheDocument() await user.click(screen.getByTestId('trigger')) - expect(screen.getByTestId('positioner')).toBeInTheDocument() + await waitFor(() => expect(screen.getByTestId('positioner')).toBeInTheDocument()) await user.click(screen.getByTestId('trigger')) - await waitFor(() => { - expect(screen.queryByTestId('positioner')).toBeInTheDocument() - }) + expect(screen.getByTestId('positioner')).toBeInTheDocument() }) it('should lazy mount and unmount on exit', async () => { @@ -25,13 +23,21 @@ describe('ColorPicker', () => { expect(screen.queryByTestId('positioner')).not.toBeInTheDocument() await user.click(screen.getByTestId('trigger')) - expect(screen.getByTestId('positioner')).toBeInTheDocument() + await waitFor(() => expect(screen.getByTestId('positioner')).toBeVisible()) await user.click(screen.getByTestId('trigger')) await waitFor(() => { expect(screen.queryByTestId('positioner')).not.toBeInTheDocument() }) }) + + it('should render with default value', async () => { + render(() => ) + + expect(screen.getByTestId('swatch-trigger')).toHaveStyle({ + background: 'hsla(300, 100%, 50%, 1)', + }) + }) }) const WithField = (props: Field.RootProps) => ( diff --git a/packages/solid/src/components/combobox/combobox-root.tsx b/packages/solid/src/components/combobox/combobox-root.tsx index 9d19b486c4..88dd325fe1 100644 --- a/packages/solid/src/components/combobox/combobox-root.tsx +++ b/packages/solid/src/components/combobox/combobox-root.tsx @@ -22,7 +22,6 @@ export const ComboboxRoot = (props: ComboboxRootProps< 'autoFocus', 'closeOnSelect', 'collection', - 'composite', 'defaultHighlightedValue', 'defaultInputValue', 'defaultOpen', @@ -53,6 +52,7 @@ export const ComboboxRoot = (props: ComboboxRootProps< 'openOnClick', 'openOnKeyPress', 'placeholder', + 'popupType', 'positioning', 'readOnly', 'required', diff --git a/packages/solid/src/components/combobox/examples/async-search.tsx b/packages/solid/src/components/combobox/examples/async-search.tsx index f0abc24e9a..63f7821395 100644 --- a/packages/solid/src/components/combobox/examples/async-search.tsx +++ b/packages/solid/src/components/combobox/examples/async-search.tsx @@ -15,8 +15,8 @@ interface Movie { export const AsyncSearch = () => { const list = useAsyncList({ - async load({ filterText, signal }) { - if (!filterText) return { items: [] } + async load({ filter, signal }) { + if (!filter) return { items: [] } await new Promise((resolve) => setTimeout(resolve, 300)) @@ -24,9 +24,9 @@ export const AsyncSearch = () => { const items = allMovies.filter( (movie) => - movie.title.toLowerCase().includes(filterText.toLowerCase()) || - movie.director.toLowerCase().includes(filterText.toLowerCase()) || - movie.genre.toLowerCase().includes(filterText.toLowerCase()), + movie.title.toLowerCase().includes(filter.toLowerCase()) || + movie.director.toLowerCase().includes(filter.toLowerCase()) || + movie.genre.toLowerCase().includes(filter.toLowerCase()), ) return { items } @@ -43,7 +43,7 @@ export const AsyncSearch = () => { const handleInputChange = (details: Combobox.InputValueChangeDetails) => { if (details.reason === 'input-change') { - list().setFilterText(details.inputValue) + list().setFilter(details.inputValue) } } @@ -64,17 +64,15 @@ export const AsyncSearch = () => { - {list().loading ? ( + {list().isLoading ? (
Searching...
) : list().error ? ( -
{list().error.message}
+
{list().error?.message}
) : list().items.length === 0 ? ( -
- {list().filterText ? 'No results found' : 'Start typing to search movies...'} -
+
{list().filter ? 'No results found' : 'Start typing to search movies...'}
) : ( {(movie) => ( diff --git a/packages/solid/src/components/date-input/tests/date-input.test.tsx b/packages/solid/src/components/date-input/tests/date-input.test.tsx index edb0516912..53c6baf339 100644 --- a/packages/solid/src/components/date-input/tests/date-input.test.tsx +++ b/packages/solid/src/components/date-input/tests/date-input.test.tsx @@ -50,7 +50,7 @@ describe('Date Input', () => { it('should mark segments invalid when invalid prop is passed', () => { render(() => ) - const root = document.querySelector('[data-part="root"]') + const root = document.querySelector('[data-date-input-root]') expect(root).toHaveAttribute('data-invalid') }) diff --git a/packages/solid/src/components/field/field-item.tsx b/packages/solid/src/components/field/field-item.tsx index e93a55be37..cbd48159e3 100644 --- a/packages/solid/src/components/field/field-item.tsx +++ b/packages/solid/src/components/field/field-item.tsx @@ -22,8 +22,8 @@ export const FieldItem = (props: FieldItemProps) => { const controlId = `field::${parent.ids.control}::item::${props.value}` const labelId = `${controlId}::label` - const getControlProps = () => ({ - ...parent.getInputProps(), + const getControlProps = (getParentProps: () => Record) => ({ + ...getParentProps(), id: controlId, }) @@ -40,16 +40,16 @@ export const FieldItem = (props: FieldItemProps) => { htmlFor: controlId, }), getInputProps: () => ({ - ...getControlProps(), - ...parts.input.attrs, + ...getControlProps(parent.getInputProps), + ...parts.input.attrs(controlId), }), getSelectProps: () => ({ - ...getControlProps(), - ...parts.select.attrs, + ...getControlProps(parent.getSelectProps), + ...parts.select.attrs(controlId), }), getTextareaProps: () => ({ - ...getControlProps(), - ...parts.textarea.attrs, + ...getControlProps(parent.getTextareaProps), + ...parts.textarea.attrs(controlId), }), })) as UseFieldContext }) diff --git a/packages/solid/src/components/field/field.test.tsx b/packages/solid/src/components/field/field.test.tsx index cfa61dd078..5dacafcd04 100644 --- a/packages/solid/src/components/field/field.test.tsx +++ b/packages/solid/src/components/field/field.test.tsx @@ -24,7 +24,7 @@ describe('Field / Input', () => { it('should set textbox as disabled', async () => { render(() => ) expect(screen.getByRole('textbox', { name: /label/i })).toBeDisabled() - expect(document.querySelector('[data-part="root"]')).toHaveAttribute('data-disabled') + expect(document.querySelector('[data-field-root]')).toHaveAttribute('data-disabled') expect(screen.getByText('Label')).toHaveAttribute('data-disabled') expect(screen.getByText('Some additional Info')).toHaveAttribute('data-disabled') }) @@ -42,6 +42,7 @@ describe('Field / Input', () => { it('should display error text when error is present', async () => { render(() => ) expect(screen.getByText('Error Info')).toBeInTheDocument() + expect(screen.getByRole('textbox')).toHaveAccessibleErrorMessage('Error Info') }) it('should focus on input when label is clicked', async () => { @@ -95,9 +96,9 @@ describe('Field / Item', () => { await waitFor(() => { const root = container.firstElementChild! const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::cl-8::label, for=field::cl-8::item::amount) @@ -143,9 +144,9 @@ describe('Field / Item', () => { await waitFor(() => { const root = container.firstElementChild! const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::cl-10::label, for=cl-10) @@ -175,9 +176,9 @@ describe('Field / Item', () => { await waitFor(() => { const root = container.firstElementChild! const structure = formatFieldParts([ - { name: 'label', element: root.querySelector('[data-part=label]'), attrs: ['id', 'for'] }, - { name: 'Field.Select', element: root.querySelector('[data-part=select]') }, - { name: 'Field.Input', element: root.querySelector('[data-part=input]') }, + { name: 'label', element: root.querySelector('[data-field-label]'), attrs: ['id', 'for'] }, + { name: 'Field.Select', element: root.querySelector('[data-field-select]') }, + { name: 'Field.Input', element: root.querySelector('[data-field-input]') }, ]) expect(structure).toMatchInlineSnapshot(` "label (id=field::cl-11::label, for=field::cl-11::item::currency) diff --git a/packages/solid/src/components/field/use-field.ts b/packages/solid/src/components/field/use-field.ts index cf1a4575f9..2e644101b3 100644 --- a/packages/solid/src/components/field/use-field.ts +++ b/packages/solid/src/components/field/use-field.ts @@ -87,7 +87,7 @@ export const useField = (props?: MaybeAccessor) => { }) const getRootProps = () => ({ - ...parts.root.attrs, + ...parts.root.attrs(id), id: rootId, role: 'group', 'data-disabled': dataAttr(fieldProps.disabled), @@ -98,7 +98,7 @@ export const useField = (props?: MaybeAccessor) => { const targetControlId = fieldProps.target ? `field::${id}::item::${fieldProps.target}` : undefined const getLabelProps = () => ({ - ...parts.label.attrs, + ...parts.label.attrs(id), id: labelId, 'data-disabled': dataAttr(fieldProps.disabled), 'data-invalid': dataAttr(fieldProps.invalid), @@ -107,15 +107,11 @@ export const useField = (props?: MaybeAccessor) => { htmlFor: targetControlId ?? id, }) - const labelIds = createMemo(() => { - const ids: string[] = [] - if (hasErrorText() && fieldProps.invalid) ids.push(errorTextId) - if (hasHelperText()) ids.push(helperTextId) - return ids - }) + const errorMessageId = () => (hasErrorText() && fieldProps.invalid ? errorTextId : undefined) const getControlProps = () => ({ - 'aria-describedby': labelIds().join(' ') || undefined, + 'aria-describedby': hasHelperText() ? helperTextId : undefined, + 'aria-errormessage': errorMessageId(), 'aria-invalid': ariaAttr(fieldProps.invalid), 'data-invalid': dataAttr(fieldProps.invalid), 'data-required': dataAttr(fieldProps.required), @@ -128,38 +124,38 @@ export const useField = (props?: MaybeAccessor) => { const getInputProps = () => ({ ...getControlProps(), - ...parts.input.attrs, + ...parts.input.attrs(id), }) const getTextareaProps = () => ({ ...getControlProps(), - ...parts.textarea.attrs, + ...parts.textarea.attrs(id), }) const getSelectProps = () => ({ ...getControlProps(), - ...parts.select.attrs, + ...parts.select.attrs(id), }) const getHelperTextProps = () => ({ id: helperTextId, - ...parts.helperText.attrs, + ...parts.helperText.attrs(id), 'data-disabled': dataAttr(fieldProps.disabled), }) const getErrorTextProps = () => ({ id: errorTextId, - ...parts.errorText.attrs, + ...parts.errorText.attrs(id), 'aria-live': 'polite', }) const getRequiredIndicatorProps = () => ({ 'aria-hidden': true, - ...parts.requiredIndicator.attrs, + ...parts.requiredIndicator.attrs(id), }) return createMemo(() => ({ - ariaDescribedby: labelIds().join(' '), + ariaDescribedby: hasHelperText() ? helperTextId : undefined, ids: { control: id, label: labelId, diff --git a/packages/solid/src/components/fieldset/use-fieldset.ts b/packages/solid/src/components/fieldset/use-fieldset.ts index 44eeda5399..c5ae5d479d 100644 --- a/packages/solid/src/components/fieldset/use-fieldset.ts +++ b/packages/solid/src/components/fieldset/use-fieldset.ts @@ -64,7 +64,7 @@ export const useFieldset = (props?: MaybeAccessor) => { }) const getRootProps = () => ({ - ...parts.root.attrs, + ...parts.root.attrs(id), disabled: mergedProps.disabled, 'data-disabled': dataAttr(mergedProps.disabled), 'data-invalid': dataAttr(mergedProps.invalid), @@ -74,19 +74,19 @@ export const useFieldset = (props?: MaybeAccessor) => { const getLegendProps = () => ({ id: legendId, - ...parts.legend.attrs, + ...parts.legend.attrs(id), 'data-disabled': dataAttr(mergedProps.disabled), 'data-invalid': dataAttr(mergedProps.invalid), }) const getHelperTextProps = () => ({ id: helperTextId, - ...parts.helperText.attrs, + ...parts.helperText.attrs(id), }) const getErrorTextProps = () => ({ id: errorTextId, - ...parts.errorText.attrs, + ...parts.errorText.attrs(id), 'aria-live': 'polite', }) diff --git a/packages/solid/src/components/floating-panel/examples/anchor-position.tsx b/packages/solid/src/components/floating-panel/examples/anchor-position.tsx index f5722077b0..231c012778 100644 --- a/packages/solid/src/components/floating-panel/examples/anchor-position.tsx +++ b/packages/solid/src/components/floating-panel/examples/anchor-position.tsx @@ -43,14 +43,14 @@ export const AnchorPosition = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/basic.tsx b/packages/solid/src/components/floating-panel/examples/basic.tsx index c945ca3a45..5627f46cb2 100644 --- a/packages/solid/src/components/floating-panel/examples/basic.tsx +++ b/packages/solid/src/components/floating-panel/examples/basic.tsx @@ -35,14 +35,14 @@ export const Basic = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/context.tsx b/packages/solid/src/components/floating-panel/examples/context.tsx index bcdd74e955..cb126b998b 100644 --- a/packages/solid/src/components/floating-panel/examples/context.tsx +++ b/packages/solid/src/components/floating-panel/examples/context.tsx @@ -38,14 +38,14 @@ export const Context = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/controlled-open.tsx b/packages/solid/src/components/floating-panel/examples/controlled-open.tsx index 37522fb727..2ce2ed673f 100644 --- a/packages/solid/src/components/floating-panel/examples/controlled-open.tsx +++ b/packages/solid/src/components/floating-panel/examples/controlled-open.tsx @@ -39,14 +39,14 @@ export const ControlledOpen = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/controlled-position.tsx b/packages/solid/src/components/floating-panel/examples/controlled-position.tsx index d04407cad6..5f0ddf1814 100644 --- a/packages/solid/src/components/floating-panel/examples/controlled-position.tsx +++ b/packages/solid/src/components/floating-panel/examples/controlled-position.tsx @@ -39,14 +39,14 @@ export const ControlledPosition = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/controlled-size.tsx b/packages/solid/src/components/floating-panel/examples/controlled-size.tsx index 8402bf3089..b3400daf90 100644 --- a/packages/solid/src/components/floating-panel/examples/controlled-size.tsx +++ b/packages/solid/src/components/floating-panel/examples/controlled-size.tsx @@ -39,14 +39,14 @@ export const ControlledSize = () => {

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/examples/lazy-mount.tsx b/packages/solid/src/components/floating-panel/examples/lazy-mount.tsx index 01bc90ceed..4b2032fd86 100644 --- a/packages/solid/src/components/floating-panel/examples/lazy-mount.tsx +++ b/packages/solid/src/components/floating-panel/examples/lazy-mount.tsx @@ -35,14 +35,14 @@ export const LazyMount = () => (

Some content

- - - - - - - - + + + + + + + + diff --git a/packages/solid/src/components/floating-panel/floating-panel-resize-trigger.tsx b/packages/solid/src/components/floating-panel/floating-panel-resize-trigger.tsx index 2ba85186b7..4fa7c16d9a 100644 --- a/packages/solid/src/components/floating-panel/floating-panel-resize-trigger.tsx +++ b/packages/solid/src/components/floating-panel/floating-panel-resize-trigger.tsx @@ -8,7 +8,7 @@ export interface FloatingPanelResizeTriggerBaseProps extends ResizeTriggerProps, export interface FloatingPanelResizeTriggerProps extends HTMLProps<'div'>, FloatingPanelResizeTriggerBaseProps {} export const FloatingPanelResizeTrigger = (props: FloatingPanelResizeTriggerProps) => { - const [resizeProps, localProps] = createSplitProps()(props, ['axis']) + const [resizeProps, localProps] = createSplitProps()(props, ['placement']) const floatingPanel = useFloatingPanelContext() const mergedProps = mergeProps(() => floatingPanel().getResizeTriggerProps(resizeProps), localProps) diff --git a/packages/solid/src/components/floating-panel/floating-panel.ts b/packages/solid/src/components/floating-panel/floating-panel.ts index 47bbc886f6..8628f50ad8 100644 --- a/packages/solid/src/components/floating-panel/floating-panel.ts +++ b/packages/solid/src/components/floating-panel/floating-panel.ts @@ -1,12 +1,12 @@ -export { resizeTriggerAxes } from '@zag-js/floating-panel' +export { resizeTriggerPlacements } from '@zag-js/floating-panel' export type { AnchorPositionDetails, ElementIds, + HandlePosition, IntlTranslations, OpenChangeDetails, Point, PositionChangeDetails, - ResizeTriggerAxis, Size, SizeChangeDetails, Stage, diff --git a/packages/solid/src/components/floating-panel/index.tsx b/packages/solid/src/components/floating-panel/index.tsx index f6543a8b99..2cce4eab69 100644 --- a/packages/solid/src/components/floating-panel/index.tsx +++ b/packages/solid/src/components/floating-panel/index.tsx @@ -5,7 +5,7 @@ export type { OpenChangeDetails as FloatingPanelOpenChangeDetails, Point as FloatingPanelPoint, PositionChangeDetails as FloatingPanelPositionChangeDetails, - ResizeTriggerAxis as FloatingPanelResizeTriggerAxis, + HandlePosition as FloatingPanelHandlePosition, Size as FloatingPanelSize, SizeChangeDetails as FloatingPanelSizeChangeDetails, Stage as FloatingPanelStage, diff --git a/packages/solid/src/components/image-cropper/examples/aspect-ratio.tsx b/packages/solid/src/components/image-cropper/examples/aspect-ratio.tsx index 78d6f1010a..e3a1a8f354 100644 --- a/packages/solid/src/components/image-cropper/examples/aspect-ratio.tsx +++ b/packages/solid/src/components/image-cropper/examples/aspect-ratio.tsx @@ -38,9 +38,9 @@ export const AspectRatio = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/basic.tsx b/packages/solid/src/components/image-cropper/examples/basic.tsx index 39628890a7..30b41b599f 100644 --- a/packages/solid/src/components/image-cropper/examples/basic.tsx +++ b/packages/solid/src/components/image-cropper/examples/basic.tsx @@ -13,9 +13,9 @@ export const Basic = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/circle.tsx b/packages/solid/src/components/image-cropper/examples/circle.tsx index 979c62dd5f..87cc9a58e7 100644 --- a/packages/solid/src/components/image-cropper/examples/circle.tsx +++ b/packages/solid/src/components/image-cropper/examples/circle.tsx @@ -13,9 +13,9 @@ export const Circle = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/context.tsx b/packages/solid/src/components/image-cropper/examples/context.tsx index 779f1ec84d..db76a6e85e 100644 --- a/packages/solid/src/components/image-cropper/examples/context.tsx +++ b/packages/solid/src/components/image-cropper/examples/context.tsx @@ -33,9 +33,9 @@ export const Context = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/controlled-zoom.tsx b/packages/solid/src/components/image-cropper/examples/controlled-zoom.tsx index 2251d083d1..c8b32d1b54 100644 --- a/packages/solid/src/components/image-cropper/examples/controlled-zoom.tsx +++ b/packages/solid/src/components/image-cropper/examples/controlled-zoom.tsx @@ -29,9 +29,9 @@ export const ControlledZoom = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/crop-preview.tsx b/packages/solid/src/components/image-cropper/examples/crop-preview.tsx index c6da8b1350..ed5b43af1b 100644 --- a/packages/solid/src/components/image-cropper/examples/crop-preview.tsx +++ b/packages/solid/src/components/image-cropper/examples/crop-preview.tsx @@ -33,9 +33,9 @@ export const CropPreview = () => { crossOrigin="anonymous" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/events.tsx b/packages/solid/src/components/image-cropper/examples/events.tsx index 5234d8cdf5..5782a1a2e6 100644 --- a/packages/solid/src/components/image-cropper/examples/events.tsx +++ b/packages/solid/src/components/image-cropper/examples/events.tsx @@ -20,9 +20,9 @@ export const Events = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/flip.tsx b/packages/solid/src/components/image-cropper/examples/flip.tsx index 306279c88e..0da3db7842 100644 --- a/packages/solid/src/components/image-cropper/examples/flip.tsx +++ b/packages/solid/src/components/image-cropper/examples/flip.tsx @@ -36,9 +36,9 @@ export const Flip = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/initial-crop.tsx b/packages/solid/src/components/image-cropper/examples/initial-crop.tsx index 0a613b715c..424e7f63e1 100644 --- a/packages/solid/src/components/image-cropper/examples/initial-crop.tsx +++ b/packages/solid/src/components/image-cropper/examples/initial-crop.tsx @@ -15,9 +15,9 @@ export const InitialCrop = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/min-max-size.tsx b/packages/solid/src/components/image-cropper/examples/min-max-size.tsx index 0b78abf377..0e2a218052 100644 --- a/packages/solid/src/components/image-cropper/examples/min-max-size.tsx +++ b/packages/solid/src/components/image-cropper/examples/min-max-size.tsx @@ -15,9 +15,9 @@ export const MinMaxSize = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/reset.tsx b/packages/solid/src/components/image-cropper/examples/reset.tsx index 13910301c7..35241314d3 100644 --- a/packages/solid/src/components/image-cropper/examples/reset.tsx +++ b/packages/solid/src/components/image-cropper/examples/reset.tsx @@ -39,9 +39,9 @@ export const Reset = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/root-provider.tsx b/packages/solid/src/components/image-cropper/examples/root-provider.tsx index bd79afa7e4..30484498d0 100644 --- a/packages/solid/src/components/image-cropper/examples/root-provider.tsx +++ b/packages/solid/src/components/image-cropper/examples/root-provider.tsx @@ -29,9 +29,9 @@ export const RootProvider = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/rotation.tsx b/packages/solid/src/components/image-cropper/examples/rotation.tsx index 2f61aae4f5..2e0c37a47b 100644 --- a/packages/solid/src/components/image-cropper/examples/rotation.tsx +++ b/packages/solid/src/components/image-cropper/examples/rotation.tsx @@ -27,9 +27,9 @@ export const Rotation = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/examples/zoom-limits.tsx b/packages/solid/src/components/image-cropper/examples/zoom-limits.tsx index c58b662303..5d6552f73e 100644 --- a/packages/solid/src/components/image-cropper/examples/zoom-limits.tsx +++ b/packages/solid/src/components/image-cropper/examples/zoom-limits.tsx @@ -41,9 +41,9 @@ export const ZoomLimits = () => { alt="Sample" /> - - {(position) => ( - + + {(placement) => ( +
)} diff --git a/packages/solid/src/components/image-cropper/image-cropper-handle.tsx b/packages/solid/src/components/image-cropper/image-cropper-handle.tsx index cdedf97d0d..57ccbbe7e5 100644 --- a/packages/solid/src/components/image-cropper/image-cropper-handle.tsx +++ b/packages/solid/src/components/image-cropper/image-cropper-handle.tsx @@ -8,7 +8,7 @@ export interface ImageCropperHandleProps extends HTMLProps<'div'>, ImageCropperH export const ImageCropperHandle = (props: ImageCropperHandleProps) => { const api = useImageCropperContext() - const mergedProps = mergeProps(() => api().getHandleProps({ position: props.position }), props) + const mergedProps = mergeProps(() => api().getHandleProps({ placement: props.placement }), props) return } diff --git a/packages/solid/src/components/image-cropper/image-cropper.ts b/packages/solid/src/components/image-cropper/image-cropper.ts index 96df763fea..2b0f838dcb 100644 --- a/packages/solid/src/components/image-cropper/image-cropper.ts +++ b/packages/solid/src/components/image-cropper/image-cropper.ts @@ -6,7 +6,7 @@ export type { RotationChangeDetails, ZoomChangeDetails, } from '@zag-js/image-cropper' -export { handles } from '@zag-js/image-cropper' +export { placements } from '@zag-js/image-cropper' export { ImageCropperContext as Context, type ImageCropperContextProps as ContextProps, diff --git a/packages/solid/src/components/json-tree-view/json-tree-view-node.tsx b/packages/solid/src/components/json-tree-view/json-tree-view-node.tsx index 4c9f6aad12..ddd074c68f 100644 --- a/packages/solid/src/components/json-tree-view/json-tree-view-node.tsx +++ b/packages/solid/src/components/json-tree-view/json-tree-view-node.tsx @@ -64,37 +64,43 @@ export function JsonTreeViewNode(props: JsonTreeViewNodeProps): JSX.Element { - - - - - - - + + + + + + + + + + } > - - - - {props.arrow} - - - - + + + + + + {props.arrow} + - - - - + + + + + + + + + - + {(child, index) => } - - + + ) diff --git a/packages/solid/src/components/listbox/examples/basic.tsx b/packages/solid/src/components/listbox/examples/basic.tsx index 7afcf22da5..157a24864c 100644 --- a/packages/solid/src/components/listbox/examples/basic.tsx +++ b/packages/solid/src/components/listbox/examples/basic.tsx @@ -20,16 +20,18 @@ export const Basic = () => { Select Country - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/controlled.tsx b/packages/solid/src/components/listbox/examples/controlled.tsx index 8d94cfefa6..023c49fbb4 100644 --- a/packages/solid/src/components/listbox/examples/controlled.tsx +++ b/packages/solid/src/components/listbox/examples/controlled.tsx @@ -18,16 +18,18 @@ export const Controlled = () => { setValue(e.value)}> Select Size - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/disabled-item.tsx b/packages/solid/src/components/listbox/examples/disabled-item.tsx index a5568c80cf..5fdbb7bf41 100644 --- a/packages/solid/src/components/listbox/examples/disabled-item.tsx +++ b/packages/solid/src/components/listbox/examples/disabled-item.tsx @@ -17,16 +17,18 @@ export const DisabledItem = () => { Select Plan - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/extended-select.tsx b/packages/solid/src/components/listbox/examples/extended-select.tsx index d352de3657..97755804c9 100644 --- a/packages/solid/src/components/listbox/examples/extended-select.tsx +++ b/packages/solid/src/components/listbox/examples/extended-select.tsx @@ -21,16 +21,18 @@ export const ExtendedSelect = () => { Hold ⌘ or Ctrl to select multiple - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/filtering.tsx b/packages/solid/src/components/listbox/examples/filtering.tsx index 98754f9904..79011c3786 100644 --- a/packages/solid/src/components/listbox/examples/filtering.tsx +++ b/packages/solid/src/components/listbox/examples/filtering.tsx @@ -27,17 +27,19 @@ export const Filtering = () => { Select Framework filter(e.target.value)} /> - - {(item) => ( - - {item().label} - - - - - )} - - No frameworks found + + + {(item) => ( + + {item().label} + + + + + )} + + No frameworks found + ) diff --git a/packages/solid/src/components/listbox/examples/grid.tsx b/packages/solid/src/components/listbox/examples/grid.tsx index b9de142c26..3ca7ca048a 100644 --- a/packages/solid/src/components/listbox/examples/grid.tsx +++ b/packages/solid/src/components/listbox/examples/grid.tsx @@ -34,13 +34,15 @@ export const Grid = () => { Pick a reaction - - {(item) => ( - - {item().label} - - )} - + + + {(item) => ( + + {item().label} + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/group.tsx b/packages/solid/src/components/listbox/examples/group.tsx index b5d17c9b13..601235e164 100644 --- a/packages/solid/src/components/listbox/examples/group.tsx +++ b/packages/solid/src/components/listbox/examples/group.tsx @@ -23,23 +23,25 @@ export const Group = () => { Select Region - - {([region, items]) => ( - - {region} - - {(item) => ( - - {item.label} - - - - - )} - - - )} - + + + {([region, items]) => ( + + {region} + + {(item) => ( + + {item.label} + + + + + )} + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/horizontal.tsx b/packages/solid/src/components/listbox/examples/horizontal.tsx index 1d9631420d..f98517d69b 100644 --- a/packages/solid/src/components/listbox/examples/horizontal.tsx +++ b/packages/solid/src/components/listbox/examples/horizontal.tsx @@ -40,18 +40,20 @@ export const Horizontal = () => { Select Album - - {(item) => ( - - - - - {item().title} - {item().title} - {item().artist} - - )} - + + + {(item) => ( + + + + + {item().title} + {item().title} + {item().artist} + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/multiple.tsx b/packages/solid/src/components/listbox/examples/multiple.tsx index 98664b7154..4311fe0b2c 100644 --- a/packages/solid/src/components/listbox/examples/multiple.tsx +++ b/packages/solid/src/components/listbox/examples/multiple.tsx @@ -20,16 +20,18 @@ export const Multiple = () => { Select Days - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/root-provider.tsx b/packages/solid/src/components/listbox/examples/root-provider.tsx index 3aa9fccb3d..265faa7bd1 100644 --- a/packages/solid/src/components/listbox/examples/root-provider.tsx +++ b/packages/solid/src/components/listbox/examples/root-provider.tsx @@ -23,16 +23,18 @@ export const RootProvider = () => { Select Priority - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + +
diff --git a/packages/solid/src/components/listbox/examples/select-all.tsx b/packages/solid/src/components/listbox/examples/select-all.tsx index 4594b7aee5..68c9b17cfa 100644 --- a/packages/solid/src/components/listbox/examples/select-all.tsx +++ b/packages/solid/src/components/listbox/examples/select-all.tsx @@ -49,16 +49,18 @@ export const SelectAll = () => { - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/examples/value-text.tsx b/packages/solid/src/components/listbox/examples/value-text.tsx index 46c3117437..9d213960e3 100644 --- a/packages/solid/src/components/listbox/examples/value-text.tsx +++ b/packages/solid/src/components/listbox/examples/value-text.tsx @@ -20,16 +20,18 @@ export const ValueText = () => { Colors: - - {(item) => ( - - {item().label} - - - - - )} - + + + {(item) => ( + + {item().label} + + + + + )} + + ) diff --git a/packages/solid/src/components/listbox/index.tsx b/packages/solid/src/components/listbox/index.tsx index b69e3ee3d5..d79658cb2e 100644 --- a/packages/solid/src/components/listbox/index.tsx +++ b/packages/solid/src/components/listbox/index.tsx @@ -25,6 +25,7 @@ export { } from './listbox-item-indicator.tsx' export { ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps } from './listbox-item-text.tsx' export { ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label.tsx' +export { ListboxList, type ListboxListBaseProps, type ListboxListProps } from './listbox-list.tsx' export { ListboxRoot, type ListboxRootBaseProps, diff --git a/packages/solid/src/components/listbox/listbox-list.tsx b/packages/solid/src/components/listbox/listbox-list.tsx new file mode 100644 index 0000000000..c621c4cbc9 --- /dev/null +++ b/packages/solid/src/components/listbox/listbox-list.tsx @@ -0,0 +1,13 @@ +import { mergeProps } from '@zag-js/solid' +import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' +import { useListboxContext } from './use-listbox-context.ts' + +export interface ListboxListBaseProps extends PolymorphicProps<'div'> {} +export interface ListboxListProps extends HTMLProps<'div'>, ListboxListBaseProps {} + +export const ListboxList = (props: ListboxListProps) => { + const listbox = useListboxContext() + const mergedProps = mergeProps(() => listbox().getListProps(), props) + + return +} diff --git a/packages/solid/src/components/listbox/listbox.test.tsx b/packages/solid/src/components/listbox/listbox.test.tsx index c877f9930b..28df448827 100644 --- a/packages/solid/src/components/listbox/listbox.test.tsx +++ b/packages/solid/src/components/listbox/listbox.test.tsx @@ -9,7 +9,7 @@ const ComponentUnderTest = (props: Omit, 'coll items: [ { label: 'React', value: 'react' }, { label: 'Solid', value: 'solid' }, - { label: 'Svelte', value: 'solid', disabled: true }, + { label: 'Svelte', value: 'svelte', disabled: true }, { label: 'Vue', value: 'vue' }, ], }) @@ -20,17 +20,19 @@ const ComponentUnderTest = (props: Omit, 'coll Select your Framework: - - JS Frameworks - - {(item) => ( - - {item().label} - - - )} - - + + + JS Frameworks + + {(item) => ( + + {item().label} + + + )} + + + ) diff --git a/packages/solid/src/components/listbox/listbox.ts b/packages/solid/src/components/listbox/listbox.ts index 03ac0a2151..8e3a66452b 100644 --- a/packages/solid/src/components/listbox/listbox.ts +++ b/packages/solid/src/components/listbox/listbox.ts @@ -55,6 +55,11 @@ export { type ListboxLabelBaseProps as LabelBaseProps, type ListboxLabelProps as LabelProps, } from './listbox-label.tsx' +export { + ListboxList as List, + type ListboxListBaseProps as ListBaseProps, + type ListboxListProps as ListProps, +} from './listbox-list.tsx' export { ListboxRoot as Root, type ListboxRootBaseProps as RootBaseProps, diff --git a/packages/solid/src/components/menu/tests/menu.test.tsx b/packages/solid/src/components/menu/tests/menu.test.tsx index f9a88826b6..6294ba6941 100644 --- a/packages/solid/src/components/menu/tests/menu.test.tsx +++ b/packages/solid/src/components/menu/tests/menu.test.tsx @@ -60,15 +60,15 @@ const ComponentUnderTest = (props: ComponentUnderTestProps) => { } describe('Menu', () => { - it('should set correct aria attributes on disabled MenuItems', () => { + it('should set correct aria attributes on disabled MenuItems', async () => { render(() => ) - expect(screen.getByText('Dialog')).toHaveAttribute('aria-disabled', 'true') + expect(await screen.findByText('Dialog')).toHaveAttribute('aria-disabled', 'true') }) it('should not fire onValueChange on disabled MenuItems', async () => { const onValueChange = vi.fn() render(() => ) - fireEvent.click(screen.getByText(/svelte/i)) + fireEvent.click(await screen.findByText(/svelte/i)) expect(onValueChange).not.toHaveBeenCalled() }) @@ -100,7 +100,7 @@ describe('Menu', () => { fireEvent.click(trigger) await waitFor(() => expect(screen.getByTestId('positioner')).toBeInTheDocument()) fireEvent.click(trigger) - expect(screen.getByTestId('positioner')).toBeInTheDocument() + await waitFor(() => expect(screen.getByTestId('positioner')).toBeInTheDocument()) }) it('should not have aria-controls if lazy mounted', async () => { diff --git a/packages/solid/src/components/number-input/number-input-root.tsx b/packages/solid/src/components/number-input/number-input-root.tsx index e6a36c932b..247cf7a3dc 100644 --- a/packages/solid/src/components/number-input/number-input-root.tsx +++ b/packages/solid/src/components/number-input/number-input-root.tsx @@ -22,6 +22,7 @@ export const NumberInputRoot = (props: NumberInputRootProps) => { 'ids', 'inputMode', 'invalid', + 'largeStep', 'locale', 'max', 'min', @@ -33,6 +34,11 @@ export const NumberInputRoot = (props: NumberInputRootProps) => { 'pattern', 'readOnly', 'required', + 'scrubberDirection', + 'scrubberPixelSensitivity', + 'scrubberTeleportDistance', + 'smallStep', + 'snapOnStep', 'spinOnPress', 'step', 'translations', diff --git a/packages/solid/src/components/pin-input/examples/basic.tsx b/packages/solid/src/components/pin-input/examples/basic.tsx index b707c770f5..a0641a5582 100644 --- a/packages/solid/src/components/pin-input/examples/basic.tsx +++ b/packages/solid/src/components/pin-input/examples/basic.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const Basic = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/examples/blur-on-complete.tsx b/packages/solid/src/components/pin-input/examples/blur-on-complete.tsx index 4a4c84b5da..39fdcb9b82 100644 --- a/packages/solid/src/components/pin-input/examples/blur-on-complete.tsx +++ b/packages/solid/src/components/pin-input/examples/blur-on-complete.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const BlurOnComplete = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/examples/custom-placeholder.tsx b/packages/solid/src/components/pin-input/examples/custom-placeholder.tsx index d79f505426..a84a0a79af 100644 --- a/packages/solid/src/components/pin-input/examples/custom-placeholder.tsx +++ b/packages/solid/src/components/pin-input/examples/custom-placeholder.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const CustomPlaceholder = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/examples/mask.tsx b/packages/solid/src/components/pin-input/examples/mask.tsx index 1cf003240c..0e509fe78a 100644 --- a/packages/solid/src/components/pin-input/examples/mask.tsx +++ b/packages/solid/src/components/pin-input/examples/mask.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const Mask = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/examples/otp-mode.tsx b/packages/solid/src/components/pin-input/examples/otp-mode.tsx index fe8b780c4a..db5c4ed218 100644 --- a/packages/solid/src/components/pin-input/examples/otp-mode.tsx +++ b/packages/solid/src/components/pin-input/examples/otp-mode.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const OTPMode = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/examples/root-provider.tsx b/packages/solid/src/components/pin-input/examples/root-provider.tsx index 1e47aae850..2763dd784b 100644 --- a/packages/solid/src/components/pin-input/examples/root-provider.tsx +++ b/packages/solid/src/components/pin-input/examples/root-provider.tsx @@ -3,7 +3,7 @@ import { Index } from 'solid-js' import styles from 'styles/pin-input.module.css' export const RootProvider = () => { - const pinInput = usePinInput({ onValueComplete: (e) => alert(e.valueAsString) }) + const pinInput = usePinInput({ count: 3, onValueComplete: (e) => alert(e.valueAsString) }) return (
diff --git a/packages/solid/src/components/pin-input/examples/with-field.tsx b/packages/solid/src/components/pin-input/examples/with-field.tsx index 4228bbb5f1..ae1b4d04e0 100644 --- a/packages/solid/src/components/pin-input/examples/with-field.tsx +++ b/packages/solid/src/components/pin-input/examples/with-field.tsx @@ -6,7 +6,7 @@ import styles from 'styles/pin-input.module.css' export const WithField = () => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/tests/basic.tsx b/packages/solid/src/components/pin-input/tests/basic.tsx index 2401304ccc..6a335fb081 100644 --- a/packages/solid/src/components/pin-input/tests/basic.tsx +++ b/packages/solid/src/components/pin-input/tests/basic.tsx @@ -2,8 +2,8 @@ import { Field } from '@ark-ui/solid/field' import { Index } from 'solid-js' import { PinInput } from '../index.tsx' -export const ComponentUnderTest = (props: PinInput.RootProps) => ( - +export const ComponentUnderTest = (props: Partial) => ( + Label {(id) => } @@ -14,7 +14,7 @@ export const ComponentUnderTest = (props: PinInput.RootProps) => ( export const PinInputWithField = (props: Field.RootProps) => ( - + Label {(id) => } diff --git a/packages/solid/src/components/pin-input/use-pin-input.ts b/packages/solid/src/components/pin-input/use-pin-input.ts index d9a99b1f87..1df8ac2db9 100644 --- a/packages/solid/src/components/pin-input/use-pin-input.ts +++ b/packages/solid/src/components/pin-input/use-pin-input.ts @@ -9,7 +9,7 @@ import { useFieldContext } from '../field/index.tsx' export interface UsePinInputProps extends Optional, 'id'> {} export interface UsePinInputReturn extends Accessor> {} -export const usePinInput = (props?: MaybeAccessor): UsePinInputReturn => { +export const usePinInput = (props: MaybeAccessor): UsePinInputReturn => { const id = createUniqueId() const locale = useLocaleContext() const environment = useEnvironmentContext() diff --git a/packages/solid/src/components/segment-group/segment-group-indicator.tsx b/packages/solid/src/components/segment-group/segment-group-indicator.tsx index 180756ba7a..63e2356935 100644 --- a/packages/solid/src/components/segment-group/segment-group-indicator.tsx +++ b/packages/solid/src/components/segment-group/segment-group-indicator.tsx @@ -1,6 +1,5 @@ import { mergeProps } from '@zag-js/solid' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' export interface SegmentGroupIndicatorBaseProps extends PolymorphicProps<'div'> {} @@ -8,7 +7,7 @@ export interface SegmentGroupIndicatorProps extends HTMLProps<'div'>, SegmentGro export const SegmentGroupIndicator = (props: SegmentGroupIndicatorProps) => { const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps(() => segmentGroup().getIndicatorProps(), parts.indicator.attrs, props) + const mergedProps = mergeProps(() => segmentGroup().getIndicatorProps(), props) return } diff --git a/packages/solid/src/components/segment-group/segment-group-item-control.tsx b/packages/solid/src/components/segment-group/segment-group-item-control.tsx index 08dea75053..4187052018 100644 --- a/packages/solid/src/components/segment-group/segment-group-item-control.tsx +++ b/packages/solid/src/components/segment-group/segment-group-item-control.tsx @@ -1,6 +1,5 @@ import { mergeProps } from '@zag-js/solid' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.ts' @@ -10,7 +9,7 @@ export interface SegmentGroupItemControlProps extends HTMLProps<'div'>, SegmentG export const SegmentGroupItemControl = (props: SegmentGroupItemControlProps) => { const segmentGroup = useSegmentGroupContext() const itemProps = useSegmentGroupItemPropsContext() - const mergedProps = mergeProps(() => segmentGroup().getItemControlProps(itemProps), parts.itemControl.attrs, props) + const mergedProps = mergeProps(() => segmentGroup().getItemControlProps(itemProps), props) return } diff --git a/packages/solid/src/components/segment-group/segment-group-item-text.tsx b/packages/solid/src/components/segment-group/segment-group-item-text.tsx index d8441a2564..29e1cd7d74 100644 --- a/packages/solid/src/components/segment-group/segment-group-item-text.tsx +++ b/packages/solid/src/components/segment-group/segment-group-item-text.tsx @@ -1,6 +1,5 @@ import { mergeProps } from '@zag-js/solid' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.ts' @@ -10,7 +9,7 @@ export interface SegmentGroupItemTextProps extends HTMLProps<'span'>, SegmentGro export const SegmentGroupItemText = (props: SegmentGroupItemTextProps) => { const segmentGroup = useSegmentGroupContext() const itemProps = useSegmentGroupItemPropsContext() - const mergedProps = mergeProps(() => segmentGroup().getItemTextProps(itemProps), parts.itemText.attrs, props) + const mergedProps = mergeProps(() => segmentGroup().getItemTextProps(itemProps), props) return } diff --git a/packages/solid/src/components/segment-group/segment-group-item.tsx b/packages/solid/src/components/segment-group/segment-group-item.tsx index 07fc05f354..01f203112d 100644 --- a/packages/solid/src/components/segment-group/segment-group-item.tsx +++ b/packages/solid/src/components/segment-group/segment-group-item.tsx @@ -3,7 +3,6 @@ import { mergeProps } from '@zag-js/solid' import { createMemo } from 'solid-js' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' import { SegmentGroupItemProvider } from './use-segment-group-item-context.ts' import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context.ts' @@ -15,7 +14,7 @@ export const SegmentGroupItem = (props: SegmentGroupItemProps) => { const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']) const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps(() => segmentGroup().getItemProps(itemProps), parts.item.attrs, localProps) + const mergedProps = mergeProps(() => segmentGroup().getItemProps(itemProps), localProps) const itemState = createMemo(() => segmentGroup().getItemState(itemProps)) diff --git a/packages/solid/src/components/segment-group/segment-group-label.tsx b/packages/solid/src/components/segment-group/segment-group-label.tsx index 2154cd3c8c..c7a8ababf2 100644 --- a/packages/solid/src/components/segment-group/segment-group-label.tsx +++ b/packages/solid/src/components/segment-group/segment-group-label.tsx @@ -1,6 +1,5 @@ import { mergeProps } from '@zag-js/solid' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { useSegmentGroupContext } from './use-segment-group-context.ts' export interface SegmentGroupLabelBaseProps extends PolymorphicProps<'span'> {} @@ -8,7 +7,7 @@ export interface SegmentGroupLabelProps extends HTMLProps<'span'>, SegmentGroupL export const SegmentGroupLabel = (props: SegmentGroupLabelProps) => { const segmentGroup = useSegmentGroupContext() - const mergedProps = mergeProps(() => segmentGroup().getLabelProps(), parts.label.attrs, props) + const mergedProps = mergeProps(() => segmentGroup().getLabelProps(), props) return } diff --git a/packages/solid/src/components/segment-group/segment-group-root-provider.tsx b/packages/solid/src/components/segment-group/segment-group-root-provider.tsx index 39607741f7..4b8782111e 100644 --- a/packages/solid/src/components/segment-group/segment-group-root-provider.tsx +++ b/packages/solid/src/components/segment-group/segment-group-root-provider.tsx @@ -1,7 +1,6 @@ import { mergeProps } from '@zag-js/solid' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import type { UseSegmentGroupReturn } from './use-segment-group.ts' import { SegmentGroupProvider } from './use-segment-group-context.ts' @@ -15,7 +14,7 @@ export interface SegmentGroupRootProviderProps export const SegmentGroupRootProvider = (props: SegmentGroupRootProviderProps) => { const [{ value: segmentGroup }, localProps] = createSplitProps()(props, ['value']) - const mergedProps = mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps) + const mergedProps = mergeProps(() => segmentGroup().getRootProps(), localProps) return ( diff --git a/packages/solid/src/components/segment-group/segment-group-root.tsx b/packages/solid/src/components/segment-group/segment-group-root.tsx index c1cbbab45e..a6175a90f8 100644 --- a/packages/solid/src/components/segment-group/segment-group-root.tsx +++ b/packages/solid/src/components/segment-group/segment-group-root.tsx @@ -1,7 +1,6 @@ import { mergeProps } from '@zag-js/solid' import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { parts } from './segment-group.anatomy.ts' import { type UseSegmentGroupProps, useSegmentGroup } from './use-segment-group.ts' import { SegmentGroupProvider } from './use-segment-group-context.ts' @@ -24,7 +23,7 @@ export const SegmentGroupRoot = (props: SegmentGroupRootProps) => { 'value', ]) const segmentGroup = useSegmentGroup(useSegmentGroupProps) - const mergedProps = mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps) + const mergedProps = mergeProps(() => segmentGroup().getRootProps(), localProps) return ( diff --git a/packages/solid/src/components/select/select-root.tsx b/packages/solid/src/components/select/select-root.tsx index 177a59b9bb..6dabe9f6fd 100644 --- a/packages/solid/src/components/select/select-root.tsx +++ b/packages/solid/src/components/select/select-root.tsx @@ -15,10 +15,10 @@ export interface SelectRootProps extends Assign(props: SelectRootProps) => { const [presenceProps, selectProps] = splitPresenceProps(props) const [useSelectProps, localProps] = createSplitProps>()(selectProps, [ + 'alignItemWithTrigger', 'autoComplete', 'closeOnSelect', 'collection', - 'composite', 'defaultHighlightedValue', 'defaultOpen', 'defaultValue', @@ -28,6 +28,7 @@ export const SelectRoot = (props: SelectRootProps) 'highlightedValue', 'id', 'ids', + 'initialFocusEl', 'invalid', 'loopFocus', 'multiple', @@ -40,6 +41,7 @@ export const SelectRoot = (props: SelectRootProps) 'onSelect', 'onValueChange', 'open', + 'popupType', 'positioning', 'readOnly', 'required', diff --git a/packages/solid/src/components/tabs/tabs-root.tsx b/packages/solid/src/components/tabs/tabs-root.tsx index 9ac68a6f92..b2a5e74038 100644 --- a/packages/solid/src/components/tabs/tabs-root.tsx +++ b/packages/solid/src/components/tabs/tabs-root.tsx @@ -16,7 +16,6 @@ export const TabsRoot = (props: TabsRootProps) => { const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props) const [useTabsProps, restProps] = createSplitProps()(tabsProps, [ 'activationMode', - 'composite', 'defaultValue', 'deselectable', 'id', @@ -28,6 +27,7 @@ export const TabsRoot = (props: TabsRootProps) => { 'orientation', 'translations', 'value', + 'virtualFocus', ]) const api = useTabs(useTabsProps) diff --git a/packages/solid/src/components/tags-input/tests/tags-input.test.tsx b/packages/solid/src/components/tags-input/tests/tags-input.test.tsx index 6d3de798e2..baa780a9c6 100644 --- a/packages/solid/src/components/tags-input/tests/tags-input.test.tsx +++ b/packages/solid/src/components/tags-input/tests/tags-input.test.tsx @@ -17,7 +17,7 @@ describe('TagsInput', () => { const input = screen.getByPlaceholderText('Add tag') await user.type(input, 'angular[enter]') - expect(screen.queryByText('angular')).toHaveAttribute('data-part', 'item-text') + expect(screen.queryByText('angular')).toHaveAttribute('data-tags-input-item-text') await user.type(input, '[ArrowLeft]', { delay: 10 }) await waitFor(() => expect(screen.getByText('angular')).toHaveAttribute('data-highlighted', '')) @@ -34,7 +34,7 @@ describe('TagsInput', () => { expect(screen.getByText('angular')).toBeInTheDocument() - expect(await screen.findByText('angular')).toHaveAttribute('data-scope', 'tags-input') + expect(await screen.findByText('angular')).toHaveAttribute('data-tags-input-item-text') await user.type(input, '[ArrowLeft]') await user.type(input, '[ArrowLeft]') diff --git a/packages/solid/src/components/tree-view/examples/async-loading.tsx b/packages/solid/src/components/tree-view/examples/async-loading.tsx index 548ffde43f..ecfb43dbf7 100644 --- a/packages/solid/src/components/tree-view/examples/async-loading.tsx +++ b/packages/solid/src/components/tree-view/examples/async-loading.tsx @@ -1,7 +1,7 @@ -import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRightIcon, FileIcon, FolderIcon, LoaderCircleIcon } from 'lucide-solid' +import { TreeView, createTreeCollection, useTreeViewNodeContext } from '@ark-ui/solid/tree-view' +import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon, LoaderIcon } from 'lucide-solid' import { For, createSignal } from 'solid-js' -import { useTreeViewNodeContext } from '../use-tree-view-node-context.ts' +import styles from 'styles/tree-view.module.css' // mock api result const response: Record = { @@ -26,7 +26,7 @@ function loadChildren(details: TreeView.LoadChildrenDetails): Promise { setTimeout(() => { resolve(response[value] ?? []) - }, 1200) + }, 500) }) } @@ -34,12 +34,13 @@ export const AsyncLoading = () => { const [collection, setCollection] = createSignal(initialCollection) return ( setCollection(e.collection)} > - Tree - + Tree + {(node, index) => } @@ -48,42 +49,50 @@ export const AsyncLoading = () => { ) } -function TreeNodeIndicator() { +function TreeBranchIcon() { const nodeState = useTreeViewNodeContext() - return nodeState().loading ? : + return nodeState().loading ? ( + + ) : nodeState().expanded ? ( + + ) : ( + + ) } const TreeNode = (props: TreeView.NodeProviderProps) => { - const { node, indexPath } = props return ( - - {node.children || node.childrenCount ? ( - - - - {node.name} - - - - - - - - - {(child, index) => } + + {props.node.children || props.node.childrenCount ? ( + + + + + + + + + + {props.node.name} + + + + + + + {(child, index) => } - - + + ) : ( - - - - - - - {node.name} - - + + + + + {props.node.name} + + + )} ) diff --git a/packages/solid/src/components/tree-view/examples/async-tree-node.tsx b/packages/solid/src/components/tree-view/examples/async-tree-node.tsx index 307706495d..8bf5f6dc65 100644 --- a/packages/solid/src/components/tree-view/examples/async-tree-node.tsx +++ b/packages/solid/src/components/tree-view/examples/async-tree-node.tsx @@ -1,5 +1,5 @@ import { TreeView } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRight, File, Folder, LoaderCircleIcon } from 'lucide-solid' +import { ChevronRight, File, Folder, LoaderCircleIcon, SquareCheckBigIcon } from 'lucide-solid' import { type Component, For, Show } from 'solid-js' interface Node { @@ -19,35 +19,41 @@ export const AsyncTreeNode: Component = (props) => ( - - - - - - {props.node.name} - - + + + + + + + + {props.node.name} + + + } > - - - - - {(context) => ( - }> - - - )} - - {props.node.name} - - - - - - - + + + + + + {(context) => ( + }> + + + )} + + {props.node.name} + + + + + + + + + + {(children) => ( @@ -55,8 +61,8 @@ export const AsyncTreeNode: Component = (props) => ( )} - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/basic.tsx b/packages/solid/src/components/tree-view/examples/basic.tsx index fd09f87d3e..c628b018e2 100644 --- a/packages/solid/src/components/tree-view/examples/basic.tsx +++ b/packages/solid/src/components/tree-view/examples/basic.tsx @@ -19,31 +19,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - props.node.children ? ( - - - - - - - {nodeState().expanded ? : } - {props.node.name} - - - - + nodeState().isBranch ? ( + + + + + + + + + + {nodeState().expanded ? : } + {props.node.name} + + + + + {(child, index) => } - - + + ) : ( - - - - {props.node.name} - - + + + + + {props.node.name} + + + ) } diff --git a/packages/solid/src/components/tree-view/examples/checkbox-tree.tsx b/packages/solid/src/components/tree-view/examples/checkbox-tree.tsx index 79d6efece9..3b5a684a50 100644 --- a/packages/solid/src/components/tree-view/examples/checkbox-tree.tsx +++ b/packages/solid/src/components/tree-view/examples/checkbox-tree.tsx @@ -1,53 +1,62 @@ import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRightIcon, SquareMinusIcon, SquareIcon } from 'lucide-solid' +import { CheckIcon, ChevronRightIcon, MinusIcon } from 'lucide-solid' import { For } from 'solid-js' +import styles from 'styles/tree-view.module.css' export const CheckboxTree = () => { return ( - - Tree - + + Tree + {(node, index) => } ) } -const TreeNodeCheckbox = () => { +const TreeNodeCheckbox = (props: TreeView.NodeCheckboxProps) => { return ( - - } fallback={}> - - + + + + + + + ) } const TreeNode = (props: TreeView.NodeProviderProps) => { - const { node, indexPath } = props return ( - - {node.children ? ( - - - - {node.name} - - - - - - - - {(child, index) => } + + {props.node.children ? ( + + + + + + + + + + {props.node.name} + + + + + + {(child, index) => } - - + + ) : ( - - - {node.name} - + + + + {props.node.name} + + )} ) diff --git a/packages/solid/src/components/tree-view/examples/context-menu.tsx b/packages/solid/src/components/tree-view/examples/context-menu.tsx index 9fe9f9efd6..bcc21f880d 100644 --- a/packages/solid/src/components/tree-view/examples/context-menu.tsx +++ b/packages/solid/src/components/tree-view/examples/context-menu.tsx @@ -54,47 +54,53 @@ const TreeNode = (props: TreeView.NodeProviderProps & { triggerId: string - ( - - - {props.node.name} - - )} - /> - + + + ( + + + {props.node.name} + + )} + /> + + } > - - - ( - - - - - - }> - - - {props.node.name} - - - )} - /> - - - + + + + ( + + + + + + + + }> + + + {props.node.name} + + + )} + /> + + + + {(child, index) => ( )} - - + + )} diff --git a/packages/solid/src/components/tree-view/examples/controlled-expanded.tsx b/packages/solid/src/components/tree-view/examples/controlled-expanded.tsx index e202474534..dfbfb07f49 100644 --- a/packages/solid/src/components/tree-view/examples/controlled-expanded.tsx +++ b/packages/solid/src/components/tree-view/examples/controlled-expanded.tsx @@ -26,31 +26,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - props.node.children ? ( - - - - - - - {nodeState().expanded ? : } - {props.node.name} - - - - + nodeState().isBranch ? ( + + + + + + + + + + {nodeState().expanded ? : } + {props.node.name} + + + + + {(child, index) => } - - + + ) : ( - - - - {props.node.name} - - + + + + + {props.node.name} + + + ) } diff --git a/packages/solid/src/components/tree-view/examples/controlled-selected.tsx b/packages/solid/src/components/tree-view/examples/controlled-selected.tsx index cd8ace281a..5fc3a21a6e 100644 --- a/packages/solid/src/components/tree-view/examples/controlled-selected.tsx +++ b/packages/solid/src/components/tree-view/examples/controlled-selected.tsx @@ -26,31 +26,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - props.node.children ? ( - - - - - - - {nodeState().expanded ? : } - {props.node.name} - - - - + nodeState().isBranch ? ( + + + + + + + + + + {nodeState().expanded ? : } + {props.node.name} + + + + + {(child, index) => } - - + + ) : ( - - - - {props.node.name} - - + + + + + {props.node.name} + + + ) } diff --git a/packages/solid/src/components/tree-view/examples/disabled-node.tsx b/packages/solid/src/components/tree-view/examples/disabled-node.tsx index 5d7194c833..b825d1c2c0 100644 --- a/packages/solid/src/components/tree-view/examples/disabled-node.tsx +++ b/packages/solid/src/components/tree-view/examples/disabled-node.tsx @@ -20,35 +20,41 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => ( - - - {props.node.name} - - + + + + + {props.node.name} + + + } > - - - - - - - }> - - - {props.node.name} - - - - + + + + + + + + + + }> + + + {props.node.name} + + + + + {(child, index) => } - - + + )} diff --git a/packages/solid/src/components/tree-view/examples/expand-collapse-all.tsx b/packages/solid/src/components/tree-view/examples/expand-collapse-all.tsx index a9064d785f..df3f2d7277 100644 --- a/packages/solid/src/components/tree-view/examples/expand-collapse-all.tsx +++ b/packages/solid/src/components/tree-view/examples/expand-collapse-all.tsx @@ -44,35 +44,41 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => ( - - - {props.node.name} - - + + + + + {props.node.name} + + + } > - - - - - - - }> - - - {props.node.name} - - - - + + + + + + + + + + }> + + + {props.node.name} + + + + + {(child, index) => } - - + + )} diff --git a/packages/solid/src/components/tree-view/examples/filtering.tsx b/packages/solid/src/components/tree-view/examples/filtering.tsx index 24314b1467..5ac7b5d088 100644 --- a/packages/solid/src/components/tree-view/examples/filtering.tsx +++ b/packages/solid/src/components/tree-view/examples/filtering.tsx @@ -1,7 +1,9 @@ import { useFilter } from '@ark-ui/solid/locale' import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid' +import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-solid' import { For, Show, createSignal } from 'solid-js' +import styles from 'styles/tree-view.module.css' +import fieldStyles from 'styles/field.module.css' export const Filtering = () => { const filterFn = useFilter({ sensitivity: 'base' }) @@ -14,10 +16,10 @@ export const Filtering = () => { } return ( -
- filter(e.currentTarget.value)} /> - - +
+ filter(e.currentTarget.value)} /> + + {(node, index) => } @@ -28,40 +30,49 @@ export const Filtering = () => { } const TreeNode = (props: TreeView.NodeProviderProps) => { - const { node, indexPath } = props return ( - - - - - - - - {node.name} - - - } - > - - - - {node.name} - - - - - - - - - {(child, index) => } - - - - + + + {(nodeState) => ( + + + + + {props.node.name} + + + + } + > + + + + + + + + + + }> + + {' '} + {props.node.name} + + + + + + + {(child, index) => } + + + + + )} + ) } diff --git a/packages/solid/src/components/tree-view/examples/lazy-mount.tsx b/packages/solid/src/components/tree-view/examples/lazy-mount.tsx index 969c8e42f2..cef2e9866c 100644 --- a/packages/solid/src/components/tree-view/examples/lazy-mount.tsx +++ b/packages/solid/src/components/tree-view/examples/lazy-mount.tsx @@ -1,6 +1,7 @@ import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid' +import { ChevronRightIcon, FileIcon, FolderIcon, FolderOpenIcon } from 'lucide-solid' import { For, Show } from 'solid-js' +import styles from 'styles/tree-view.module.css' interface Node { id: string @@ -49,49 +50,63 @@ const collection = createTreeCollection({ export const LazyMount = () => { return ( - - Tree - + + Tree + {(node, index) => } ) } +const TreeBranchIcon = () => { + return ( + + {(nodeState) => ( + }> + + + )} + + ) +} + const TreeNode = (props: TreeView.NodeProviderProps) => { - const { node, indexPath } = props return ( - + - - - - - - {node.name} - - + + + + + {props.node.name} + + + } > - - - - {node.name} - - - - - - - - - {(child, index) => } + + + + + + + + + + {props.node.name} + + + + + + + {(child, index) => } - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/links.tsx b/packages/solid/src/components/tree-view/examples/links.tsx index a7763403b8..7ca0876db3 100644 --- a/packages/solid/src/components/tree-view/examples/links.tsx +++ b/packages/solid/src/components/tree-view/examples/links.tsx @@ -1,12 +1,13 @@ import { TreeView, createTreeCollection } from '@ark-ui/solid/tree-view' import { ChevronRightIcon, ExternalLinkIcon, FileIcon } from 'lucide-solid' import { For, Show } from 'solid-js' +import styles from 'styles/tree-view.module.css' export const Links = () => { return ( - - Docs - + + Docs + {(node, index) => } @@ -14,37 +15,47 @@ export const Links = () => { } const TreeNode = (props: TreeView.NodeProviderProps) => { - const { node, indexPath } = props return ( - + }> - - - {node.name} - - - - - + + ( + + + + {props.node.name} + + + + + + )} + /> + } > - - - {node.name} - - - - - - - - {(child, index) => } + + + + + + + + + {props.node.name} + + + + + + {(child, index) => } - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/mutation.tsx b/packages/solid/src/components/tree-view/examples/mutation.tsx index 7b61e24bbe..aba562f3dd 100644 --- a/packages/solid/src/components/tree-view/examples/mutation.tsx +++ b/packages/solid/src/components/tree-view/examples/mutation.tsx @@ -72,22 +72,28 @@ const TreeNode = (props: TreeNodeProps) => { - {props.node.name} - - + + + {props.node.name} + + + } > - - - - - - {props.node.name} - - - - + + + + + + + + + {props.node.name} + + + + + {(child, index) => ( { /> )} - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/rename-node.tsx b/packages/solid/src/components/tree-view/examples/rename-node.tsx index 3871bc7688..58b6e69bd2 100644 --- a/packages/solid/src/components/tree-view/examples/rename-node.tsx +++ b/packages/solid/src/components/tree-view/examples/rename-node.tsx @@ -34,45 +34,51 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => ( - - {props.node.name}} - > - - - + + + + {props.node.name}} + > + + + + } > - - - - - - - }> - - - {props.node.name} - - } - > - - - - - + + + + + + + + + + }> + + + {props.node.name} + + } + > + + + + + + {(child, index) => } - - + + )} diff --git a/packages/solid/src/components/tree-view/examples/root-provider.tsx b/packages/solid/src/components/tree-view/examples/root-provider.tsx index ab1728ad5c..fb00bedba0 100644 --- a/packages/solid/src/components/tree-view/examples/root-provider.tsx +++ b/packages/solid/src/components/tree-view/examples/root-provider.tsx @@ -21,31 +21,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - props.node.children ? ( - - - - - - - {nodeState().expanded ? : } - {props.node.name} - - - - + nodeState().isBranch ? ( + + + + + + + + + + {nodeState().expanded ? : } + {props.node.name} + + + + + {(child, index) => } - - + + ) : ( - - - - {props.node.name} - - + + + + + {props.node.name} + + + ) } diff --git a/packages/solid/src/components/tree-view/examples/tree-node-with-checkbox.tsx b/packages/solid/src/components/tree-view/examples/tree-node-with-checkbox.tsx index 634eac757f..f54b41a137 100644 --- a/packages/solid/src/components/tree-view/examples/tree-node-with-checkbox.tsx +++ b/packages/solid/src/components/tree-view/examples/tree-node-with-checkbox.tsx @@ -1,5 +1,5 @@ import { TreeView } from '@ark-ui/solid/tree-view' -import { SquareCheckBigIcon, ChevronRightIcon, SquareMinusIcon, SquareIcon } from 'lucide-solid' +import { ChevronRightIcon, SquareCheckBigIcon, SquareMinusIcon } from 'lucide-solid' import { type Component, For, Show } from 'solid-js' interface Node { @@ -18,37 +18,49 @@ export const TreeNodeWithCheckbox: Component = (props) => ( - - } indeterminate={}> - - - - {props.node.name} - + + + + + + + + + + + {props.node.name} + + } > - - - - } indeterminate={}> - - - - {props.node.name} - - - - - - + + + + + + + + + + + + {props.node.name} + + + + + + + + + {(child, childIndex) => ( )} - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/tree-node-with-links.tsx b/packages/solid/src/components/tree-view/examples/tree-node-with-links.tsx index ce8284c8fa..bac8dc00f5 100644 --- a/packages/solid/src/components/tree-view/examples/tree-node-with-links.tsx +++ b/packages/solid/src/components/tree-view/examples/tree-node-with-links.tsx @@ -19,31 +19,37 @@ export const TreeNodeWithLinks: Component = (props) => ( }> - - - {props.node.name} - - - - - + + }> + + + {props.node.name} + + + + + + } > - - - {props.node.name} - - - - - - + + + + {props.node.name} + + + + + + + + + {(child, index) => } - - + + ) diff --git a/packages/solid/src/components/tree-view/examples/tree-node.tsx b/packages/solid/src/components/tree-view/examples/tree-node.tsx index 91f318fe71..d7ea72a0b8 100644 --- a/packages/solid/src/components/tree-view/examples/tree-node.tsx +++ b/packages/solid/src/components/tree-view/examples/tree-node.tsx @@ -16,33 +16,39 @@ interface Props { export const TreeNode: Component = (props) => ( {props.node.children ? ( - - - - - {props.node.name} - - - - - - - + + + + + + {props.node.name} + + + + + + + + + + {(child, index) => } - - + + ) : ( - - - - - - - {props.node.name} - - + + + + + + + + {props.node.name} + + + )} ) diff --git a/packages/solid/src/components/tree-view/examples/virtualized.tsx b/packages/solid/src/components/tree-view/examples/virtualized.tsx index e03a69a7af..1c0624b170 100644 --- a/packages/solid/src/components/tree-view/examples/virtualized.tsx +++ b/packages/solid/src/components/tree-view/examples/virtualized.tsx @@ -102,23 +102,26 @@ export const Virtualized = () => { > {nodeState().isBranch ? ( - - - - - - {visibleNode().node.name} - - + + + + + + + + + {visibleNode().node.name} + + + ) : ( - - - {visibleNode().node.name} - - + + + + {visibleNode().node.name} + + + )}
diff --git a/packages/solid/src/components/tree-view/index.tsx b/packages/solid/src/components/tree-view/index.tsx index 34bf62cb44..91ea613eb4 100644 --- a/packages/solid/src/components/tree-view/index.tsx +++ b/packages/solid/src/components/tree-view/index.tsx @@ -5,7 +5,7 @@ export type { LoadChildrenCompleteDetails as TreeViewLoadChildrenCompleteDetails, LoadChildrenDetails as TreeViewLoadChildrenDetails, LoadChildrenErrorDetails as TreeViewLoadChildrenErrorDetails, - NodeProps as TreeViewNodeProps, + NodeIndicatorType as TreeViewNodeIndicatorType, NodeState as TreeViewNodeState, RenameCompleteDetails as TreeViewRenameCompleteDetails, RenameStartDetails as TreeViewRenameStartDetails, @@ -17,67 +17,52 @@ export { type TreeCollection, type TreeNode, } from '../collection/index.tsx' -export { TreeViewBranch, type TreeViewBranchBaseProps, type TreeViewBranchProps } from './tree-view-branch.tsx' -export { - TreeViewBranchContent, - type TreeViewBranchContentBaseProps, - type TreeViewBranchContentProps, -} from './tree-view-branch-content.tsx' -export { - TreeViewBranchControl, - type TreeViewBranchControlBaseProps, - type TreeViewBranchControlProps, -} from './tree-view-branch-control.tsx' -export { - TreeViewBranchIndentGuide, - type TreeViewBranchIndentGuideBaseProps, - type TreeViewBranchIndentGuideProps, -} from './tree-view-branch-indent-guide.tsx' -export { - TreeViewBranchIndicator, - type TreeViewBranchIndicatorBaseProps, - type TreeViewBranchIndicatorProps, -} from './tree-view-branch-indicator.tsx' -export { - TreeViewBranchText, - type TreeViewBranchTextBaseProps, - type TreeViewBranchTextProps, -} from './tree-view-branch-text.tsx' -export { - TreeViewBranchTrigger, - type TreeViewBranchTriggerBaseProps, - type TreeViewBranchTriggerProps, -} from './tree-view-branch-trigger.tsx' +export { TreeViewCell, type TreeViewCellBaseProps, type TreeViewCellProps } from './tree-view-cell.tsx' export { TreeViewContext, type TreeViewContextProps } from './tree-view-context.tsx' -export { TreeViewItem, type TreeViewItemBaseProps, type TreeViewItemProps } from './tree-view-item.tsx' export { - TreeViewItemIndicator, - type TreeViewItemIndicatorBaseProps, - type TreeViewItemIndicatorProps, -} from './tree-view-item-indicator.tsx' -export { TreeViewItemText, type TreeViewItemTextBaseProps, type TreeViewItemTextProps } from './tree-view-item-text.tsx' + TreeViewIndentGuide, + type TreeViewIndentGuideBaseProps, + type TreeViewIndentGuideProps, +} from './tree-view-indent-guide.tsx' export { TreeViewLabel, type TreeViewLabelBaseProps, type TreeViewLabelProps } from './tree-view-label.tsx' +export { TreeViewNode, type TreeViewNodeBaseProps, type TreeViewNodeProps } from './tree-view-node.tsx' export { TreeViewNodeCheckbox, type TreeViewNodeCheckboxBaseProps, type TreeViewNodeCheckboxProps, } from './tree-view-node-checkbox.tsx' +export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.ts' export { - TreeViewNodeCheckboxIndicator, - type TreeViewNodeCheckboxIndicatorBaseProps, - type TreeViewNodeCheckboxIndicatorProps, -} from './tree-view-node-checkbox-indicator.tsx' + TreeViewNodeExpandTrigger, + type TreeViewNodeExpandTriggerBaseProps, + type TreeViewNodeExpandTriggerProps, +} from './tree-view-node-expand-trigger.tsx' export { - TreeViewNodeRenameInput, - type TreeViewNodeRenameInputBaseProps, - type TreeViewNodeRenameInputProps, -} from './tree-view-node-rename-input.tsx' -export { TreeViewNodeContext, type TreeViewNodeContextProps } from './tree-view-node-context.ts' + TreeViewNodeGroup, + type TreeViewNodeGroupBaseProps, + type TreeViewNodeGroupProps, +} from './tree-view-node-group.tsx' +export { + TreeViewNodeGroupContent, + type TreeViewNodeGroupContentBaseProps, + type TreeViewNodeGroupContentProps, +} from './tree-view-node-group-content.tsx' +export { + TreeViewNodeIndicator, + type TreeViewNodeIndicatorBaseProps, + type TreeViewNodeIndicatorProps, +} from './tree-view-node-indicator.tsx' export { TreeViewNodeProvider, type TreeViewNodeProviderBaseProps, type TreeViewNodeProviderProps, } from './tree-view-node-provider.tsx' +export { + TreeViewNodeRenameInput, + type TreeViewNodeRenameInputBaseProps, + type TreeViewNodeRenameInputProps, +} from './tree-view-node-rename-input.tsx' +export { TreeViewNodeText, type TreeViewNodeTextBaseProps, type TreeViewNodeTextProps } from './tree-view-node-text.tsx' export { TreeViewRoot, type TreeViewRootBaseProps, diff --git a/packages/solid/src/components/tree-view/tests/basic.tsx b/packages/solid/src/components/tree-view/tests/basic.tsx index 5f5f8affdf..1d4152e3cb 100644 --- a/packages/solid/src/components/tree-view/tests/basic.tsx +++ b/packages/solid/src/components/tree-view/tests/basic.tsx @@ -52,31 +52,37 @@ const TreeNode = (props: TreeView.NodeProviderProps) => { {(nodeState) => - props.node.children ? ( - - - - - - - {nodeState().expanded ? : } - {props.node.name} - - - - + nodeState().isBranch ? ( + + + + + + + + + + {nodeState().expanded ? : } + {props.node.name} + + + + + {(child, index) => } - - + + ) : ( - - - - {props.node.name} - - + + + + + {props.node.name} + + + ) } diff --git a/packages/solid/src/components/tree-view/tests/tree-view.test.tsx b/packages/solid/src/components/tree-view/tests/tree-view.test.tsx index b4168bafb7..cc5f4c6019 100644 --- a/packages/solid/src/components/tree-view/tests/tree-view.test.tsx +++ b/packages/solid/src/components/tree-view/tests/tree-view.test.tsx @@ -4,19 +4,19 @@ import { ComponentUnderTest } from './basic.tsx' describe('TreeView', () => { it('should render a leaf node correctly', () => { render(() => ) - expect(screen.getByRole('treeitem', { name: 'README.md' })).toBeInTheDocument() + expect(screen.getByRole('row', { name: 'README.md' })).toBeInTheDocument() }) it('should render a branch node correctly', () => { render(() => ) - expect(screen.getByRole('treeitem', { name: 'src' })).toBeInTheDocument() + expect(screen.getByRole('row', { name: 'src' })).toBeInTheDocument() }) it('should expand branch node to reveal child leaf node', async () => { render(() => ) - expect(screen.getByRole('treeitem', { name: 'src' })).toBeInTheDocument() + expect(screen.getByRole('row', { name: 'src' })).toBeInTheDocument() - const trigger = screen.getByRole('button', { name: 'src' }) + const trigger = screen.getByRole('row', { name: 'src' }) trigger.click() expect(await screen.findByText('app.tsx')).toBeInTheDocument() diff --git a/packages/solid/src/components/tree-view/tree-view-branch-indicator.tsx b/packages/solid/src/components/tree-view/tree-view-branch-indicator.tsx deleted file mode 100644 index 34f3a46d6e..0000000000 --- a/packages/solid/src/components/tree-view/tree-view-branch-indicator.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { mergeProps } from '@zag-js/solid' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewBranchIndicatorBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchIndicatorProps extends HTMLProps<'div'>, TreeViewBranchIndicatorBaseProps {} - -export const TreeViewBranchIndicator = (props: TreeViewBranchIndicatorProps) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getBranchIndicatorProps(nodeProps), props) - - return -} diff --git a/packages/solid/src/components/tree-view/tree-view-branch-text.tsx b/packages/solid/src/components/tree-view/tree-view-branch-text.tsx deleted file mode 100644 index 5fdc502acd..0000000000 --- a/packages/solid/src/components/tree-view/tree-view-branch-text.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { mergeProps } from '@zag-js/solid' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewBranchTextBaseProps extends PolymorphicProps<'span'> {} -export interface TreeViewBranchTextProps extends HTMLProps<'span'>, TreeViewBranchTextBaseProps {} - -export const TreeViewBranchText = (props: TreeViewBranchTextProps) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getBranchTextProps(nodeProps), props) - - return -} diff --git a/packages/solid/src/components/tree-view/tree-view-branch-trigger.tsx b/packages/solid/src/components/tree-view/tree-view-cell.tsx similarity index 52% rename from packages/solid/src/components/tree-view/tree-view-branch-trigger.tsx rename to packages/solid/src/components/tree-view/tree-view-cell.tsx index afa8ee0d69..ab6caf7e1c 100644 --- a/packages/solid/src/components/tree-view/tree-view-branch-trigger.tsx +++ b/packages/solid/src/components/tree-view/tree-view-cell.tsx @@ -3,13 +3,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchTriggerBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchTriggerProps extends HTMLProps<'div'>, TreeViewBranchTriggerBaseProps {} +export interface TreeViewCellBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewCellProps extends HTMLProps<'div'>, TreeViewCellBaseProps {} -export const TreeViewBranchTrigger = (props: TreeViewBranchTriggerProps) => { +export const TreeViewCell = (props: TreeViewCellProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getBranchTriggerProps(nodeProps), props) + const mergedProps = mergeProps(() => treeView().getCellProps(nodeProps), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view-branch-control.tsx b/packages/solid/src/components/tree-view/tree-view-indent-guide.tsx similarity index 52% rename from packages/solid/src/components/tree-view/tree-view-branch-control.tsx rename to packages/solid/src/components/tree-view/tree-view-indent-guide.tsx index 3a1b4f65aa..4db8071e94 100644 --- a/packages/solid/src/components/tree-view/tree-view-branch-control.tsx +++ b/packages/solid/src/components/tree-view/tree-view-indent-guide.tsx @@ -3,13 +3,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchControlBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchControlProps extends HTMLProps<'div'>, TreeViewBranchControlBaseProps {} +export interface TreeViewIndentGuideBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewIndentGuideProps extends HTMLProps<'div'>, TreeViewIndentGuideBaseProps {} -export const TreeViewBranchControl = (props: TreeViewBranchControlProps) => { +export const TreeViewIndentGuide = (props: TreeViewIndentGuideProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getBranchControlProps(nodeProps), props) + const mergedProps = mergeProps(() => treeView().getIndentGuideProps(nodeProps), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view-item-indicator.tsx b/packages/solid/src/components/tree-view/tree-view-item-indicator.tsx deleted file mode 100644 index feeffb058d..0000000000 --- a/packages/solid/src/components/tree-view/tree-view-item-indicator.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { mergeProps } from '@zag-js/solid' -import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { useTreeViewContext } from './use-tree-view-context.ts' -import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' - -export interface TreeViewItemIndicatorBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewItemIndicatorProps extends HTMLProps<'div'>, TreeViewItemIndicatorBaseProps {} - -export const TreeViewItemIndicator = (props: TreeViewItemIndicatorProps) => { - const treeView = useTreeViewContext() - const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getItemIndicatorProps(nodeProps), props) - - return -} diff --git a/packages/solid/src/components/tree-view/tree-view-node-checkbox-indicator.tsx b/packages/solid/src/components/tree-view/tree-view-node-checkbox-indicator.tsx deleted file mode 100644 index 11fa1e9ce9..0000000000 --- a/packages/solid/src/components/tree-view/tree-view-node-checkbox-indicator.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { type JSX, createMemo } from 'solid-js' -import { useTreeViewNodeContext } from './use-tree-view-node-context.ts' - -export interface TreeViewNodeCheckboxIndicatorBaseProps { - children?: JSX.Element - indeterminate?: JSX.Element - fallback?: JSX.Element -} -export interface TreeViewNodeCheckboxIndicatorProps extends TreeViewNodeCheckboxIndicatorBaseProps {} - -export const TreeViewNodeCheckboxIndicator = (props: TreeViewNodeCheckboxIndicatorProps) => { - const nodeState = useTreeViewNodeContext() - - const checkedState = createMemo(() => nodeState().checked) - - if (checkedState() === 'indeterminate' && props.indeterminate) { - return props.indeterminate - } - - if (checkedState() === true && props.children) { - return props.children - } - - return props.fallback -} diff --git a/packages/solid/src/components/tree-view/tree-view-branch-indent-guide.tsx b/packages/solid/src/components/tree-view/tree-view-node-expand-trigger.tsx similarity index 54% rename from packages/solid/src/components/tree-view/tree-view-branch-indent-guide.tsx rename to packages/solid/src/components/tree-view/tree-view-node-expand-trigger.tsx index 69affc497c..863038f1ad 100644 --- a/packages/solid/src/components/tree-view/tree-view-branch-indent-guide.tsx +++ b/packages/solid/src/components/tree-view/tree-view-node-expand-trigger.tsx @@ -3,13 +3,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchIndentGuideBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchIndentGuideProps extends HTMLProps<'div'>, TreeViewBranchIndentGuideBaseProps {} +export interface TreeViewNodeExpandTriggerBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewNodeExpandTriggerProps extends HTMLProps<'div'>, TreeViewNodeExpandTriggerBaseProps {} -export const TreeViewBranchIndentGuide = (props: TreeViewBranchIndentGuideProps) => { +export const TreeViewNodeExpandTrigger = (props: TreeViewNodeExpandTriggerProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getBranchIndentGuideProps(nodeProps), props) + const mergedProps = mergeProps(() => treeView().getNodeExpandTriggerProps(nodeProps), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view-branch-content.tsx b/packages/solid/src/components/tree-view/tree-view-node-group-content.tsx similarity index 63% rename from packages/solid/src/components/tree-view/tree-view-branch-content.tsx rename to packages/solid/src/components/tree-view/tree-view-node-group-content.tsx index cb9e41667c..00a77eaeca 100644 --- a/packages/solid/src/components/tree-view/tree-view-branch-content.tsx +++ b/packages/solid/src/components/tree-view/tree-view-node-group-content.tsx @@ -6,8 +6,8 @@ import type { HTMLProps, PolymorphicProps } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchContentBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchContentProps extends HTMLProps<'div'>, TreeViewBranchContentBaseProps {} +export interface TreeViewNodeGroupContentBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewNodeGroupContentProps extends HTMLProps<'div'>, TreeViewNodeGroupContentBaseProps {} interface VisibilityProps { hidden?: boolean @@ -16,16 +16,16 @@ interface VisibilityProps { const splitVisibilityProps = createSplitProps() -export const TreeViewBranchContent = (props: TreeViewBranchContentProps) => { +export const TreeViewNodeGroupContent = (props: TreeViewNodeGroupContentProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const branchContentProps = createMemo(() => { - const contentProps = treeView().getBranchContentProps(nodeProps) + const nodeGroupContentProps = createMemo(() => { + const contentProps = treeView().getNodeGroupContentProps(nodeProps) const [, ownProps] = splitVisibilityProps(contentProps as VisibilityProps, ['hidden', 'data-state']) return ownProps }) - const mergedProps = mergeProps(() => branchContentProps(), props) + const mergedProps = mergeProps(() => nodeGroupContentProps(), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view-branch.tsx b/packages/solid/src/components/tree-view/tree-view-node-group.tsx similarity index 64% rename from packages/solid/src/components/tree-view/tree-view-branch.tsx rename to packages/solid/src/components/tree-view/tree-view-node-group.tsx index bae698ef76..72d9925589 100644 --- a/packages/solid/src/components/tree-view/tree-view-branch.tsx +++ b/packages/solid/src/components/tree-view/tree-view-node-group.tsx @@ -8,23 +8,23 @@ import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodeContext } from './use-tree-view-node-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewBranchBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewBranchProps extends Assign, TreeViewBranchBaseProps> {} +export interface TreeViewNodeGroupBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewNodeGroupProps extends Assign, TreeViewNodeGroupBaseProps> {} -export const TreeViewBranch = (props: TreeViewBranchProps) => { +export const TreeViewNodeGroup = (props: TreeViewNodeGroupProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() const nodeState = useTreeViewNodeContext() const renderStrategyProps = useRenderStrategyContext() - const branchContentProps = createMemo(() => treeView().getBranchContentProps(nodeProps)) - const mergedProps = mergeProps(() => treeView().getBranchProps(nodeProps), props) + const nodeGroupContentProps = createMemo(() => treeView().getNodeGroupContentProps(nodeProps)) + const mergedProps = mergeProps(() => treeView().getNodeGroupProps(nodeProps), props) return ( diff --git a/packages/solid/src/components/tree-view/tree-view-node-indicator.tsx b/packages/solid/src/components/tree-view/tree-view-node-indicator.tsx new file mode 100644 index 0000000000..6f08bdc65f --- /dev/null +++ b/packages/solid/src/components/tree-view/tree-view-node-indicator.tsx @@ -0,0 +1,30 @@ +import type { NodeIndicatorType } from '@zag-js/tree-view' +import { mergeProps } from '@zag-js/solid' +import { createSplitProps } from '../../utils/create-split-props.ts' +import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' +import { useTreeViewContext } from './use-tree-view-context.ts' +import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' + +export interface TreeViewNodeIndicatorBaseProps extends PolymorphicProps<'div'> { + /** + * The type of indicator + * - "expanded": always visible, reflects open/closed state + * - "selected": shown when the node is selected + * - "checked": shown when the node is checked + * - "indeterminate": shown when the node is indeterminate (partially checked) + */ + type: NodeIndicatorType +} +export interface TreeViewNodeIndicatorProps extends HTMLProps<'div'>, TreeViewNodeIndicatorBaseProps {} + +export const TreeViewNodeIndicator = (props: TreeViewNodeIndicatorProps) => { + const [typeProps, localProps] = createSplitProps<{ type: NodeIndicatorType }>()(props, ['type']) + const treeView = useTreeViewContext() + const nodeProps = useTreeViewNodePropsContext() + const mergedProps = mergeProps( + () => treeView().getNodeIndicatorProps({ ...nodeProps, type: typeProps.type }), + localProps, + ) + + return +} diff --git a/packages/solid/src/components/tree-view/tree-view-item-text.tsx b/packages/solid/src/components/tree-view/tree-view-node-text.tsx similarity index 60% rename from packages/solid/src/components/tree-view/tree-view-item-text.tsx rename to packages/solid/src/components/tree-view/tree-view-node-text.tsx index ccc2ce33ab..aa4a6e5aab 100644 --- a/packages/solid/src/components/tree-view/tree-view-item-text.tsx +++ b/packages/solid/src/components/tree-view/tree-view-node-text.tsx @@ -3,13 +3,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewItemTextBaseProps extends PolymorphicProps<'span'> {} -export interface TreeViewItemTextProps extends HTMLProps<'span'>, TreeViewItemTextBaseProps {} +export interface TreeViewNodeTextBaseProps extends PolymorphicProps<'span'> {} +export interface TreeViewNodeTextProps extends HTMLProps<'span'>, TreeViewNodeTextBaseProps {} -export const TreeViewItemText = (props: TreeViewItemTextProps) => { +export const TreeViewNodeText = (props: TreeViewNodeTextProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getItemTextProps(nodeProps), props) + const mergedProps = mergeProps(() => treeView().getNodeTextProps(nodeProps), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view-item.tsx b/packages/solid/src/components/tree-view/tree-view-node.tsx similarity index 62% rename from packages/solid/src/components/tree-view/tree-view-item.tsx rename to packages/solid/src/components/tree-view/tree-view-node.tsx index dcfe26f216..54f43f2804 100644 --- a/packages/solid/src/components/tree-view/tree-view-item.tsx +++ b/packages/solid/src/components/tree-view/tree-view-node.tsx @@ -4,13 +4,13 @@ import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useTreeViewContext } from './use-tree-view-context.ts' import { useTreeViewNodePropsContext } from './use-tree-view-node-props-context.ts' -export interface TreeViewItemBaseProps extends PolymorphicProps<'div'> {} -export interface TreeViewItemProps extends Assign, TreeViewItemBaseProps> {} +export interface TreeViewNodeBaseProps extends PolymorphicProps<'div'> {} +export interface TreeViewNodeProps extends Assign, TreeViewNodeBaseProps> {} -export const TreeViewItem = (props: TreeViewItemProps) => { +export const TreeViewNode = (props: TreeViewNodeProps) => { const treeView = useTreeViewContext() const nodeProps = useTreeViewNodePropsContext() - const mergedProps = mergeProps(() => treeView().getItemProps(nodeProps), props) + const mergedProps = mergeProps(() => treeView().getNodeProps(nodeProps), props) return } diff --git a/packages/solid/src/components/tree-view/tree-view.ts b/packages/solid/src/components/tree-view/tree-view.ts index 5856f2e93f..87306b97cd 100644 --- a/packages/solid/src/components/tree-view/tree-view.ts +++ b/packages/solid/src/components/tree-view/tree-view.ts @@ -5,92 +5,77 @@ export type { LoadChildrenCompleteDetails, LoadChildrenDetails, LoadChildrenErrorDetails, - NodeProps, + NodeIndicatorType, NodeState, RenameCompleteDetails, RenameStartDetails, SelectionChangeDetails, } from '@zag-js/tree-view' export { - TreeViewBranch as Branch, - type TreeViewBranchBaseProps as BranchBaseProps, - type TreeViewBranchProps as BranchProps, -} from './tree-view-branch.tsx' -export { - TreeViewBranchContent as BranchContent, - type TreeViewBranchContentBaseProps as BranchContentBaseProps, - type TreeViewBranchContentProps as BranchContentProps, -} from './tree-view-branch-content.tsx' -export { - TreeViewBranchControl as BranchControl, - type TreeViewBranchControlBaseProps as BranchControlBaseProps, - type TreeViewBranchControlProps as BranchControlProps, -} from './tree-view-branch-control.tsx' -export { - TreeViewBranchIndentGuide as BranchIndentGuide, - type TreeViewBranchIndentGuideBaseProps as BranchIndentGuideBaseProps, - type TreeViewBranchIndentGuideProps as BranchIndentGuideProps, -} from './tree-view-branch-indent-guide.tsx' -export { - TreeViewBranchIndicator as BranchIndicator, - type TreeViewBranchIndicatorBaseProps as BranchIndicatorBaseProps, - type TreeViewBranchIndicatorProps as BranchIndicatorProps, -} from './tree-view-branch-indicator.tsx' -export { - TreeViewBranchText as BranchText, - type TreeViewBranchTextBaseProps as BranchTextBaseProps, - type TreeViewBranchTextProps as BranchTextProps, -} from './tree-view-branch-text.tsx' -export { - TreeViewBranchTrigger as BranchTrigger, - type TreeViewBranchTriggerBaseProps as BranchTriggerBaseProps, - type TreeViewBranchTriggerProps as BranchTriggerProps, -} from './tree-view-branch-trigger.tsx' + TreeViewCell as Cell, + type TreeViewCellBaseProps as CellBaseProps, + type TreeViewCellProps as CellProps, +} from './tree-view-cell.tsx' export { TreeViewContext as Context, type TreeViewContextProps as ContextProps } from './tree-view-context.tsx' export { - TreeViewItem as Item, - type TreeViewItemBaseProps as ItemBaseProps, - type TreeViewItemProps as ItemProps, -} from './tree-view-item.tsx' -export { - TreeViewItemIndicator as ItemIndicator, - type TreeViewItemIndicatorBaseProps as ItemIndicatorBaseProps, - type TreeViewItemIndicatorProps as ItemIndicatorProps, -} from './tree-view-item-indicator.tsx' -export { - TreeViewItemText as ItemText, - type TreeViewItemTextBaseProps as ItemTextBaseProps, - type TreeViewItemTextProps as ItemTextProps, -} from './tree-view-item-text.tsx' + TreeViewIndentGuide as IndentGuide, + type TreeViewIndentGuideBaseProps as IndentGuideBaseProps, + type TreeViewIndentGuideProps as IndentGuideProps, +} from './tree-view-indent-guide.tsx' export { TreeViewLabel as Label, type TreeViewLabelBaseProps as LabelBaseProps, type TreeViewLabelProps as LabelProps, } from './tree-view-label.tsx' +export { + TreeViewNode as Node, + type TreeViewNodeBaseProps as NodeBaseProps, + type TreeViewNodeProps as NodeProps, +} from './tree-view-node.tsx' export { TreeViewNodeCheckbox as NodeCheckbox, type TreeViewNodeCheckboxBaseProps as NodeCheckboxBaseProps, type TreeViewNodeCheckboxProps as NodeCheckboxProps, } from './tree-view-node-checkbox.tsx' -export { - TreeViewNodeCheckboxIndicator as NodeCheckboxIndicator, - type TreeViewNodeCheckboxIndicatorBaseProps as NodeCheckboxIndicatorBaseProps, - type TreeViewNodeCheckboxIndicatorProps as NodeCheckboxIndicatorProps, -} from './tree-view-node-checkbox-indicator.tsx' -export { - TreeViewNodeRenameInput as NodeRenameInput, - type TreeViewNodeRenameInputBaseProps as NodeRenameInputBaseProps, - type TreeViewNodeRenameInputProps as NodeRenameInputProps, -} from './tree-view-node-rename-input.tsx' export { TreeViewNodeContext as NodeContext, type TreeViewNodeContextProps as NodeContextProps, } from './tree-view-node-context.ts' +export { + TreeViewNodeExpandTrigger as NodeExpandTrigger, + type TreeViewNodeExpandTriggerBaseProps as NodeExpandTriggerBaseProps, + type TreeViewNodeExpandTriggerProps as NodeExpandTriggerProps, +} from './tree-view-node-expand-trigger.tsx' +export { + TreeViewNodeGroup as NodeGroup, + type TreeViewNodeGroupBaseProps as NodeGroupBaseProps, + type TreeViewNodeGroupProps as NodeGroupProps, +} from './tree-view-node-group.tsx' +export { + TreeViewNodeGroupContent as NodeGroupContent, + type TreeViewNodeGroupContentBaseProps as NodeGroupContentBaseProps, + type TreeViewNodeGroupContentProps as NodeGroupContentProps, +} from './tree-view-node-group-content.tsx' +export { + TreeViewNodeIndicator as NodeIndicator, + type TreeViewNodeIndicatorBaseProps as NodeIndicatorBaseProps, + type TreeViewNodeIndicatorProps as NodeIndicatorProps, +} from './tree-view-node-indicator.tsx' export { TreeViewNodeProvider as NodeProvider, type TreeViewNodeProviderBaseProps as NodeProviderBaseProps, type TreeViewNodeProviderProps as NodeProviderProps, } from './tree-view-node-provider.tsx' +export { + TreeViewNodeRenameInput as NodeRenameInput, + type TreeViewNodeRenameInputBaseProps as NodeRenameInputBaseProps, + type TreeViewNodeRenameInputProps as NodeRenameInputProps, +} from './tree-view-node-rename-input.tsx' +export { + TreeViewNodeText as NodeText, + type TreeViewNodeTextBaseProps as NodeTextBaseProps, + type TreeViewNodeTextProps as NodeTextProps, +} from './tree-view-node-text.tsx' export { TreeViewRoot as Root, type TreeViewRootBaseProps as RootBaseProps, From f1830aaf9aa74e9a56059e59914fc5965d29cf97 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Mon, 22 Jun 2026 14:35:41 +0200 Subject: [PATCH 19/19] feat: vue --- .../components/accordion/accordion-root.vue | 1 + .../components/accordion/accordion.types.ts | 6 + .../src/components/carousel/carousel-root.vue | 2 +- .../src/components/carousel/carousel.types.ts | 16 +-- .../components/carousel/examples/autoplay.vue | 2 +- .../components/carousel/examples/basic.vue | 2 +- .../carousel/examples/controlled.vue | 2 +- .../carousel/examples/dynamic-slides.vue | 2 +- .../carousel/examples/pause-on-hover.vue | 2 +- .../carousel/examples/root-provider.vue | 2 +- .../carousel/examples/scroll-to.vue | 2 +- .../carousel/examples/slides-per-page.vue | 2 +- .../components/carousel/examples/spacing.vue | 2 +- .../carousel/examples/thumbnail-indicator.vue | 2 +- .../carousel/examples/variable-size.vue | 2 +- .../components/carousel/examples/vertical.vue | 2 +- .../examples/async-list/dependencies.vue | 20 ++-- .../collection/examples/async-list/filter.vue | 18 +-- .../examples/async-list/infinite-loading.vue | 10 +- .../collection/examples/async-list/reload.vue | 6 +- .../examples/async-list/sort-client-side.vue | 18 +-- .../examples/async-list/sort-server-side.vue | 18 +-- .../color-picker/tests/color-picker.test.ts | 4 +- .../color-picker/tests/color-picker.test.vue | 2 +- .../src/components/combobox/combobox-root.vue | 1 - .../src/components/combobox/combobox.types.ts | 16 ++- .../combobox/examples/async-search.vue | 16 +-- .../date-input/tests/date-input.test.ts | 2 +- .../vue/src/components/field/field-item.vue | 16 +-- .../field/tests/field-item.test.tsx | 18 +-- .../src/components/field/tests/field.test.tsx | 2 +- .../vue/src/components/field/use-field.ts | 16 +-- .../src/components/fieldset/use-fieldset.ts | 11 +- .../examples/anchor-position.vue | 16 +-- .../floating-panel/examples/basic.vue | 16 +-- .../floating-panel/examples/context.vue | 16 +-- .../examples/controlled-open.vue | 16 +-- .../examples/controlled-position.vue | 16 +-- .../examples/controlled-size.vue | 16 +-- .../floating-panel/examples/lazy-mount.vue | 16 +-- .../floating-panel/floating-panel.ts | 4 +- .../src/components/floating-panel/index.ts | 2 +- .../image-cropper/examples/aspect-ratio.vue | 6 +- .../image-cropper/examples/basic.vue | 6 +- .../image-cropper/examples/circle.vue | 6 +- .../image-cropper/examples/context.vue | 6 +- .../examples/controlled-zoom.vue | 6 +- .../image-cropper/examples/crop-preview.vue | 6 +- .../image-cropper/examples/events.vue | 6 +- .../image-cropper/examples/flip.vue | 6 +- .../image-cropper/examples/initial-crop.vue | 6 +- .../image-cropper/examples/min-max-size.vue | 6 +- .../image-cropper/examples/reset.vue | 6 +- .../image-cropper/examples/root-provider.vue | 6 +- .../image-cropper/examples/rotation.vue | 6 +- .../image-cropper/examples/zoom-limits.vue | 6 +- .../image-cropper/image-cropper-handle.vue | 2 +- .../components/image-cropper/image-cropper.ts | 2 +- .../json-tree-view/json-tree-view-node.vue | 75 ++++++------ .../src/components/listbox/examples/basic.vue | 14 ++- .../listbox/examples/controlled.vue | 14 ++- .../listbox/examples/disabled-item.vue | 14 ++- .../listbox/examples/extended-select.vue | 14 ++- .../components/listbox/examples/filtering.vue | 16 +-- .../src/components/listbox/examples/grid.vue | 8 +- .../src/components/listbox/examples/group.vue | 20 ++-- .../listbox/examples/horizontal.vue | 18 +-- .../components/listbox/examples/multiple.vue | 14 ++- .../listbox/examples/root-provider.vue | 14 ++- .../listbox/examples/select-all.vue | 14 ++- .../listbox/examples/value-text.vue | 14 ++- packages/vue/src/components/listbox/index.ts | 1 + .../src/components/listbox/listbox-list.vue | 30 +++++ .../vue/src/components/listbox/listbox.ts | 5 + .../components/listbox/tests/listbox.test.vue | 16 +-- .../src/components/menu/tests/menu.test.ts | 5 +- .../number-input/number-input-root.vue | 1 + .../number-input/number-input.types.ts | 31 +++++ .../components/pin-input/examples/basic.vue | 2 +- .../pin-input/examples/blur-on-complete.vue | 2 +- .../pin-input/examples/custom-placeholder.vue | 2 +- .../components/pin-input/examples/mask.vue | 2 +- .../pin-input/examples/otp-mode.vue | 2 +- .../pin-input/examples/root-provider.vue | 2 +- .../pin-input/examples/with-field.vue | 2 +- .../components/pin-input/pin-input.types.ts | 3 +- .../pin-input/tests/pin-input.test.vue | 2 +- .../src/components/pin-input/use-pin-input.ts | 2 +- .../segment-group/segment-group-indicator.vue | 8 +- .../segment-group-item-control.vue | 8 +- .../segment-group/segment-group-item-text.vue | 8 +- .../segment-group/segment-group-item.vue | 8 +- .../segment-group/segment-group-label.vue | 8 +- .../segment-group-root-provider.vue | 8 +- .../segment-group/segment-group-root.vue | 8 +- .../vue/src/components/select/select-root.vue | 2 +- .../vue/src/components/select/select.types.ts | 26 +++- .../vue/src/components/tabs/tabs-root.vue | 2 +- .../vue/src/components/tabs/tabs.types.ts | 14 ++- .../tags-input/tests/tags-input.test.ts | 6 +- .../tree-view/examples/async-tree-node.vue | 66 ++++++----- .../examples/context-menu-tree-node.vue | 56 ++++----- .../tree-view/examples/disabled-tree-node.vue | 56 ++++----- .../examples/expand-collapse-tree-node.vue | 56 ++++----- .../tree-view/examples/mutation-tree-node.vue | 56 ++++----- .../tree-view/examples/rename-tree-node.vue | 72 ++++++------ .../examples/tree-node-with-checkbox.vue | 76 ++++++------ .../examples/tree-node-with-links.vue | 54 +++++---- .../tree-view/examples/tree-node.vue | 70 +++++------ .../tree-view/examples/virtualized.vue | 39 +++--- .../vue/src/components/tree-view/index.ts | 101 +++++++--------- .../tree-view/tests/tree-view.test.ts | 8 +- .../tree-view/tree-view-branch-control.vue | 32 ----- .../tree-view/tree-view-branch-indicator.vue | 33 ------ ...-branch-trigger.vue => tree-view-cell.vue} | 10 +- ...ch-text.vue => tree-view-indent-guide.vue} | 12 +- .../tree-view/tree-view-item-indicator.vue | 33 ------ .../tree-view-node-checkbox-indicator.vue | 32 ----- ....vue => tree-view-node-expand-trigger.vue} | 10 +- ...t.vue => tree-view-node-group-content.vue} | 16 +-- ...ew-branch.vue => tree-view-node-group.vue} | 16 +-- .../tree-view/tree-view-node-indicator.vue | 46 ++++++++ ...-item-text.vue => tree-view-node-text.vue} | 10 +- ...{tree-view-item.vue => tree-view-node.vue} | 10 +- .../vue/src/components/tree-view/tree-view.ts | 111 ++++++++---------- 125 files changed, 989 insertions(+), 1006 deletions(-) create mode 100644 packages/vue/src/components/listbox/listbox-list.vue delete mode 100644 packages/vue/src/components/tree-view/tree-view-branch-control.vue delete mode 100644 packages/vue/src/components/tree-view/tree-view-branch-indicator.vue rename packages/vue/src/components/tree-view/{tree-view-branch-trigger.vue => tree-view-cell.vue} (69%) rename packages/vue/src/components/tree-view/{tree-view-branch-text.vue => tree-view-indent-guide.vue} (70%) delete mode 100644 packages/vue/src/components/tree-view/tree-view-item-indicator.vue delete mode 100644 packages/vue/src/components/tree-view/tree-view-node-checkbox-indicator.vue rename packages/vue/src/components/tree-view/{tree-view-branch-indent-guide.vue => tree-view-node-expand-trigger.vue} (72%) rename packages/vue/src/components/tree-view/{tree-view-branch-content.vue => tree-view-node-group-content.vue} (67%) rename packages/vue/src/components/tree-view/{tree-view-branch.vue => tree-view-node-group.vue} (73%) create mode 100644 packages/vue/src/components/tree-view/tree-view-node-indicator.vue rename packages/vue/src/components/tree-view/{tree-view-item-text.vue => tree-view-node-text.vue} (73%) rename packages/vue/src/components/tree-view/{tree-view-item.vue => tree-view-node.vue} (74%) diff --git a/packages/vue/src/components/accordion/accordion-root.vue b/packages/vue/src/components/accordion/accordion-root.vue index e5510a825c..5395c51541 100644 --- a/packages/vue/src/components/accordion/accordion-root.vue +++ b/packages/vue/src/components/accordion/accordion-root.vue @@ -27,6 +27,7 @@ import { AccordionProvider } from './use-accordion-context.ts' const props = withDefaults(defineProps(), { collapsible: undefined, disabled: undefined, + loopFocus: undefined, multiple: undefined, } satisfies BooleanDefaults) diff --git a/packages/vue/src/components/accordion/accordion.types.ts b/packages/vue/src/components/accordion/accordion.types.ts index 3998a41771..37ef2ddab8 100644 --- a/packages/vue/src/components/accordion/accordion.types.ts +++ b/packages/vue/src/components/accordion/accordion.types.ts @@ -28,6 +28,12 @@ export interface RootProps { itemContent(value: string): string itemTrigger(value: string): string }> + /** + * Whether to loop focus back to the first/last trigger when navigating + * past the end/start with the arrow keys. + * @default true + */ + loopFocus?: boolean /** * The v-model value of the accordion */ diff --git a/packages/vue/src/components/carousel/carousel-root.vue b/packages/vue/src/components/carousel/carousel-root.vue index 8624173ab2..f85d74bed5 100644 --- a/packages/vue/src/components/carousel/carousel-root.vue +++ b/packages/vue/src/components/carousel/carousel-root.vue @@ -24,7 +24,7 @@ import { useForwardExpose } from '../../utils/use-forward-expose.ts' const props = withDefaults(defineProps(), { allowMouseDrag: undefined, loop: undefined, - autoplay: undefined, + autoPlay: undefined, autoSize: undefined, } satisfies BooleanDefaults) diff --git a/packages/vue/src/components/carousel/carousel.types.ts b/packages/vue/src/components/carousel/carousel.types.ts index 1e501d94c8..2da5dd6828 100644 --- a/packages/vue/src/components/carousel/carousel.types.ts +++ b/packages/vue/src/components/carousel/carousel.types.ts @@ -10,7 +10,7 @@ export interface RootProps { * Whether to scroll automatically. The default delay is 4000ms. * @default false */ - autoplay?: boolean | { delay: number } + autoPlay?: boolean | { delay: number } /** * Whether to enable variable width slides. * @default false @@ -53,20 +53,15 @@ export interface RootProps { * @default "horizontal" */ orientation?: 'horizontal' | 'vertical' - /** - * Defines the extra space added around the scrollable area, - * enabling nearby items to remain partially in view. - */ - padding?: string /** * The controlled page of the carousel. */ page?: number /** * The total number of slides. - * Useful for SSR to render the initial ating the snap points. + * Useful for SSR to render the initial snap points. */ - slideCount: number + count: number /** * The number of slides to scroll at a time. * @@ -91,6 +86,11 @@ export interface RootProps { * @default "0px" */ spacing?: string + /** + * Defines the extra space added around the scrollable area, + * enabling nearby items to remain partially in view. + */ + itemSpacing?: string /** * The localized messages to use. */ diff --git a/packages/vue/src/components/carousel/examples/autoplay.vue b/packages/vue/src/components/carousel/examples/autoplay.vue index e91993bcfe..b389e123c0 100644 --- a/packages/vue/src/components/carousel/examples/autoplay.vue +++ b/packages/vue/src/components/carousel/examples/autoplay.vue @@ -13,7 +13,7 @@ const images = [