From 7f63c3bd9f9a80deaeb5cff5c6934885a76d6646 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Thu, 12 Mar 2026 17:37:15 +0200 Subject: [PATCH 1/3] chore: bump zag-js --- bun.lock | 674 +++++++++--------- packages/react/CHANGELOG.md | 26 + packages/react/package.json | 128 ++-- .../components/clipboard/clipboard-root.tsx | 1 + .../react/src/components/field/field.test.tsx | 9 +- .../src/components/listbox/listbox-input.tsx | 2 +- .../navigation-menu/navigation-menu-root.tsx | 1 + .../src/components/select/select-root.tsx | 1 + .../tags-input/examples/allow-duplicates.tsx | 35 + .../components/tags-input/tags-input-root.tsx | 1 + .../tags-input/tags-input.stories.tsx | 1 + .../react/src/components/timer/timer-root.tsx | 1 + .../components/tree-view/tree-view-root.tsx | 1 + packages/solid/CHANGELOG.md | 25 + packages/solid/package.json | 128 ++-- .../components/clipboard/clipboard-root.tsx | 1 + .../src/components/listbox/listbox-input.tsx | 2 +- .../navigation-menu/navigation-menu-root.tsx | 1 + .../src/components/popover/popover-root.tsx | 1 + .../src/components/select/select-root.tsx | 1 + .../tags-input/examples/allow-duplicates.tsx | 38 + .../components/tags-input/tags-input-root.tsx | 1 + .../tags-input/tags-input.stories.tsx | 1 + .../solid/src/components/timer/timer-root.tsx | 1 + .../components/tree-view/tree-view-root.tsx | 1 + packages/svelte/CHANGELOG.md | 26 + packages/svelte/package.json | 128 ++-- .../clipboard/clipboard-split-props.svelte.ts | 2 +- .../components/listbox/listbox-input.svelte | 2 +- .../navigation-menu-root.svelte | 1 + .../lib/components/select/select-root.svelte | 1 + .../examples/allow-duplicates.svelte | 31 + .../tags-input/tags-input-root.svelte | 1 + .../tags-input/tags-input.stories.ts | 7 + .../lib/components/timer/timer-root.svelte | 1 + .../tree-view/tree-view-split-props.ts | 1 + packages/vue/CHANGELOG.md | 26 + packages/vue/package.json | 128 ++-- .../components/clipboard/clipboard.types.ts | 4 + .../src/components/listbox/listbox-input.vue | 10 +- .../navigation-menu/navigation-menu.types.ts | 4 + .../src/components/popover/popover.types.ts | 4 + .../vue/src/components/select/select.types.ts | 4 + .../tags-input/examples/allow-duplicates.vue | 35 + .../components/tags-input/tags-input-root.vue | 1 + .../tags-input/tags-input.stories.ts | 8 + .../components/tags-input/tags-input.types.ts | 5 + .../vue/src/components/timer/timer.types.ts | 4 + .../components/tree-view/tree-view.types.ts | 4 + website/package.json | 4 +- 50 files changed, 919 insertions(+), 605 deletions(-) create mode 100644 packages/react/src/components/tags-input/examples/allow-duplicates.tsx create mode 100644 packages/solid/src/components/tags-input/examples/allow-duplicates.tsx create mode 100644 packages/svelte/src/lib/components/tags-input/examples/allow-duplicates.svelte create mode 100644 packages/vue/src/components/tags-input/examples/allow-duplicates.vue diff --git a/bun.lock b/bun.lock index 3be4c234d9..b65e088a32 100644 --- a/bun.lock +++ b/bun.lock @@ -45,70 +45,70 @@ "version": "5.34.1", "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/react": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3", + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/react": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0", }, "devDependencies": { "@biomejs/biome": "2.4.4", @@ -154,70 +154,70 @@ "version": "5.34.1", "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/solid": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3", + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/solid": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0", }, "devDependencies": { "@biomejs/biome": "2.4.4", @@ -259,70 +259,70 @@ "version": "5.19.1", "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/svelte": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3", + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/svelte": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0", }, "devDependencies": { "@storybook/addon-a11y": "10.2.10", @@ -362,70 +362,70 @@ "version": "5.34.1", "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3", - "@zag-js/vue": "1.35.3", + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0", + "@zag-js/vue": "1.36.0", }, "devDependencies": { "@biomejs/biome": "2.4.4", @@ -560,8 +560,8 @@ "@types/react": "19.2.14", "@types/react-dom": "19.2.3", "@uidotdev/usehooks": "2.4.1", - "@zag-js/anatomy-icons": "1.35.3", - "@zag-js/docs": "1.35.3", + "@zag-js/anatomy-icons": "1.36.0", + "@zag-js/docs": "1.36.0", "better-auth": "1.4.18", "effect": "3.19.19", "lucide-react": "0.575.0", @@ -1754,179 +1754,179 @@ "@xobotyi/scrollbar-width": ["@xobotyi/scrollbar-width@1.9.5", "", {}, "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="], - "@zag-js/accordion": ["@zag-js/accordion@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-wmw6yo5Zr6ShiKGTc5ICEOJCurWAOSGubIpGISiHi3cZ4tlxKF/vpATIUT3eq8xzdB56YK57yKCujs/WmwqqoA=="], + "@zag-js/accordion": ["@zag-js/accordion@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-xYVhr9W5atnum5ra+BEWNveB1YMDxC2L0gaWbBOOPivRybbUyJt2HnyBoLgJZ6e98jXiVzeEroo61OGED/KP/A=="], - "@zag-js/anatomy": ["@zag-js/anatomy@1.35.3", "", {}, "sha512-oqU9iLNNylrtJMBX5Xu4DsxnPNvtZLiobryv2oNtsDI1mi1Fca/XHghQC9K5aYT0qNsmHj1M3W5WAWTaOtPLkQ=="], + "@zag-js/anatomy": ["@zag-js/anatomy@1.36.0", "", {}, "sha512-/ZclaJs8AVb4MJlW3j/PJtCbPHd/qMY9pmbhR1tLuDuwboo/sM7Gg8QyDw6lHQBbQ+ESu5wwu4NhWaLSMtNfxg=="], - "@zag-js/anatomy-icons": ["@zag-js/anatomy-icons@1.35.3", "", { "dependencies": { "@svgr/core": "8.1.0", "@svgr/plugin-jsx": "8.1.0", "color2k": "2.0.3" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-lHJv7MbvAQs/QznRv2Olht1dQVDdsrer+5GemT6zyRO/0RK2Cu8/XI0Lo+XHe3Co9jfAn7DHKUd/RRyD9RMccQ=="], + "@zag-js/anatomy-icons": ["@zag-js/anatomy-icons@1.36.0", "", { "dependencies": { "@svgr/core": "8.1.0", "@svgr/plugin-jsx": "8.1.0", "color2k": "2.0.3" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-uKi5vpToAreBB1cNmEhvgy5S2lDIYpUV/c8mvUjvU1ns/28V9E8XTn0MmfsbXwX9sKQka5uNHcfRq8mDTfSQAw=="], - "@zag-js/angle-slider": ["@zag-js/angle-slider@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/rect-utils": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-HXRlmsbNEJSBT53fq9XQKL/vwZWwJC3nprskI7s4f/jy8a4uXPTlv7N7zuBYjew+ScTMzZah6fLWzUztBehmSg=="], + "@zag-js/angle-slider": ["@zag-js/angle-slider@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/rect-utils": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-WudAhBD/RKNhEnwbRi3PRpnfjCMnx73spf+iX4YitBWjg4xBgi1HrFjUNOoUZuDgq8N6H4qo1c2QT3MGZeK4nQ=="], - "@zag-js/aria-hidden": ["@zag-js/aria-hidden@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-dk5POebn10WneQfLrEgbTzwolaXWpCSHL6F3jCTinW9IbOx7BXghzJD21iU5Iun+y9CorqJPW3p7LplYNUMO5Q=="], + "@zag-js/aria-hidden": ["@zag-js/aria-hidden@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-nsJFyR16IrzCNeLWzSHUupNY6atET42IybCYJvXVDsSsuiCeb3Pl7qLgnYlYD52QSiOT62ziL228Lle16YYAdA=="], - "@zag-js/async-list": ["@zag-js/async-list@1.35.3", "", { "dependencies": { "@zag-js/core": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-SXX3wGzLK/maKS1PJ3XfLIGWbu0022f/OhcFsT1PbiHnoFZTH7h2fBhirrCBfy2TYFQ6r5uxgjkhPUNkuaeYnA=="], + "@zag-js/async-list": ["@zag-js/async-list@1.36.0", "", { "dependencies": { "@zag-js/core": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-pQvhNQl2+je0kByQ2MzKob59JKY/SG756Hl6BodnvC3lDaHo6IghAQ78WnyqkYrknPuBBBu6g+FwFRGfLxr1OA=="], - "@zag-js/auto-resize": ["@zag-js/auto-resize@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-ufG8HSqzLd9h5rnos8aumj8iORlRskeR/gbpJu1NHrnHBWIrpuXm6KJJR2oZhTFY1BUMMk8eYIBA2QkVuiJzWA=="], + "@zag-js/auto-resize": ["@zag-js/auto-resize@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-OapX3gQHblJgVPoiyU0KTKzzSXgnQKesEeL8ap12IY5FLpFRpXDzeg+uEvfmFHoN5WyGl4UXjPH2cRausb5exQ=="], - "@zag-js/avatar": ["@zag-js/avatar@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-lbQ2Q4Va8AAScKULOHw2tCQez+0JRYGHSMFq6i+dJmeT3dlSgRanm69ra6K2po6hM9E4v6pRe+xOVE+9QMDnuA=="], + "@zag-js/avatar": ["@zag-js/avatar@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-WAlypsrY2WvxMKXAITrAn7w0/NqnpIYIGJ/26aINV7UPtYjXMHfDw4OrBnFxO9aKDTVIyuk+6REdJKLH/az+xA=="], - "@zag-js/carousel": ["@zag-js/carousel@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/scroll-snap": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-F+b8HzUeZfB+xUkAkLG4r0Ubui8pj7pSgZhi26ZiWgsM7tsd7cD+xRMXkvPEITN5Fd5QCe3KlVBuE00w5byjmg=="], + "@zag-js/carousel": ["@zag-js/carousel@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/scroll-snap": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-927dNa75ZrXwPBe9OKo4pzZCjR28uHfzgpbwX1R1b+TajAYUGFLnHhILjR1WajApv/amFRuNB8qZOmdsdFjiyA=="], - "@zag-js/cascade-select": ["@zag-js/cascade-select@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/collection": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/rect-utils": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-Nifdx77hEuAdXqr1wpZSPjLXqygRhq/WvnPjGhCeSqFPpy62uT4JZ3avyjUZ4I0UhvIpkleUcXtFwQ3cSMh4ww=="], + "@zag-js/cascade-select": ["@zag-js/cascade-select@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/collection": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/rect-utils": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-q6VxZKt54TFUyeBzLQitIu4x5yC404BUTqrobTeDvDuTbqqEeRX0ucRNYxz5S9MOzIbKwJM+4DjNyjKlGuNf1Q=="], - "@zag-js/checkbox": ["@zag-js/checkbox@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-8XBt/Wg2zSQWqV2ZFqZBQUjYRkOYHA2O3IEi0VVYtds3S1n7Pu/HqkZT5qDw+E/SY2+X9Uyx4hO7h2XrlsiZQQ=="], + "@zag-js/checkbox": ["@zag-js/checkbox@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-SYA8AoquTM0PXG4TbDDo1dIS6jeadegGJxmDYqFYKxFvjTRsBTpL4S0piis5T8G5++RcYhTwZSerTc0dp70cxA=="], - "@zag-js/clipboard": ["@zag-js/clipboard@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-obTwynBpp6c17fLHe5tg//FQ497QsyCEry+K3bTdlrivWW200wvfHxZ6RKVbKwDAwhH+ye0bI1xkYAId8j7sdA=="], + "@zag-js/clipboard": ["@zag-js/clipboard@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-L4Oe/VFN7YtmNUOvSeV8dIyOv5VKx8+vaGLTcjBS2Cm5pzhTPi1o46Pr1qnmMtvbpuB6AP5H0s++i6SoLeB1jQ=="], - "@zag-js/collapsible": ["@zag-js/collapsible@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-IweG8JOBCerJwLO6QzTZGEMlsYUmQfQSeD0jniFguMM8vcunvGVSrM+AaL8pDbmXd+snXokaGyJpGO3vzMW6Fw=="], + "@zag-js/collapsible": ["@zag-js/collapsible@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-MfD/2zCvc0g/njWC7fjHnilh/O5c99iku+BAgi0HA9Q7sBjuOJs84dewU30dwi9wJGLzlGG0Uy0+ZVYJ3G2t7w=="], - "@zag-js/collection": ["@zag-js/collection@1.35.3", "", { "dependencies": { "@zag-js/utils": "1.35.3" } }, "sha512-BYoWJ4b7ma2PgiuQbRSnP603f2DlK6se5JtViUHTamZScLLLWnWHuQ6zFa1KS5kiIkbb7CFM6/bJ3WNYLch8Ig=="], + "@zag-js/collection": ["@zag-js/collection@1.36.0", "", { "dependencies": { "@zag-js/utils": "1.36.0" } }, "sha512-hRcsLD5zCGujJN+A8cNV3+nQ0bYOLGGkdU+3SCack7cgonIl0g9lt9U580bnp+/5PsW2iXf3JiPzSyJCiJy1Cw=="], - "@zag-js/color-picker": ["@zag-js/color-picker@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/color-utils": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-i9roSgtqeA1b4Q+jWqnxjXB//BQXMP5m1FQ4YcZVq/0yT14A53JIknchuqrh3wC3yPsJMXFqCoKg+NET2+OVig=="], + "@zag-js/color-picker": ["@zag-js/color-picker@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/color-utils": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-8zOXfNMCod4mDCawpLI7BChQLixqYNqxMnG1BAI1y3Ad+TWLPMYtIFlE/VRYfQhGcu6VAcWl2M59KWtRpwE1dA=="], - "@zag-js/color-utils": ["@zag-js/color-utils@1.35.3", "", { "dependencies": { "@zag-js/utils": "1.35.3" } }, "sha512-vxkEVgz4YdSbdaPvjiRI1VsJAdwzu/dUNvzqOaiVcPDrHr/FFgmUbv0SOFjnfSb2QWGI8EDEMn02RW9ym+BzGw=="], + "@zag-js/color-utils": ["@zag-js/color-utils@1.36.0", "", { "dependencies": { "@zag-js/utils": "1.36.0" } }, "sha512-P14tUA/klNZozxGx84lGtMR62yFMQpeNads+mhbD66X5h1B9GL0eQoEkMVUvTmtcs19F1AkdeUiWF4sJmugESQ=="], - "@zag-js/combobox": ["@zag-js/combobox@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/aria-hidden": "1.35.3", "@zag-js/collection": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-s1qmttTGJTMjlDakL+uvWSEggpafKr1vhOeZCh8j+N4eFt9bLAwaffjuh/1JzWBvzovw7WoMVkizdTXPlN8oYg=="], + "@zag-js/combobox": ["@zag-js/combobox@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/aria-hidden": "1.36.0", "@zag-js/collection": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-KyN5YG6NTt/ikggozQ2CdjSKnUB9t2LCBOI/yAuHT0CyNbaZFkeyGlyjvsHkWnr41k0rJ/YAxmU/Mb4MjcxvjQ=="], - "@zag-js/core": ["@zag-js/core@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-fGAHyqOYSEFmo52t7wI4dvbFfLyJmUlyf7wknsiUlzUHlrn3yv5PAZYZ2TibpOD1hwXIp4AoCjbiIPPZBxirZw=="], + "@zag-js/core": ["@zag-js/core@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-2v/FOOrlbxfT+vdR9r2x9zRbywqLIT5sMnpxZ0w4xBPaNUiJOWzjuLHhKazs4ozJPUdJ5VWU6ZXN17GlNOydJQ=="], - "@zag-js/date-picker": ["@zag-js/date-picker@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/date-utils": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/live-region": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-4G10h6pzzLbd84SE2CKtqi6Z9wEBhSyx4GRSxxy3tsf5wAxnz4anRFat9CGwn2YVUYcUJpD+umYgBMPt6zGDnA=="], + "@zag-js/date-picker": ["@zag-js/date-picker@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/date-utils": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/live-region": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" }, "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-ceJW8zgCxS/nu2GGS0KiFvzTUT7DU3XPQEe0awYw5LRO8I2U3k8Pr8IfrA/HiFjJPuVGRCjZksMPQoySuu32Rg=="], - "@zag-js/date-utils": ["@zag-js/date-utils@1.35.3", "", { "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-1co0FPpZ6nO5dN8sZtECkMYaf+3E5zu0KSIJZpZiXb4TgsZMDyHu7K7IsiKFHk9qmhuF6AdPpNxBju91pSXMFg=="], + "@zag-js/date-utils": ["@zag-js/date-utils@1.36.0", "", { "peerDependencies": { "@internationalized/date": ">=3.0.0" } }, "sha512-dAC2fpS475M69ixGL1zYC2GPE4abIzjrgGm4VBOq4DzF5YdTNUPCLkbOkHY1I8raFyNfWv7fTcTNgU0Cn2MoCw=="], - "@zag-js/dialog": ["@zag-js/dialog@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/aria-hidden": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-trap": "1.35.3", "@zag-js/remove-scroll": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-byosV+aBHH5LoFKnjEgC7WdqJid7bP9UhgWLSC7+IXbxrif9Czg1YVp6ZlQM6Nx6uD1vnty4touI3P7D7CTKcw=="], + "@zag-js/dialog": ["@zag-js/dialog@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/aria-hidden": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/remove-scroll": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-KctAnCVp6UqNaa6YbG6738RfadOsIpl+iD5nUJ/xQ2noadVEvfw+4F9McXY5W8o3R+LueUYu1IYeiyeKUq0eJA=="], - "@zag-js/dismissable": ["@zag-js/dismissable@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3", "@zag-js/interact-outside": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-XPk+lqmsZp2Z1yMb5K1yj/e7Sobv4D7zK66B1GS97lk9Xzz8vuSgsimcLy0p7RXQl3KL6H5L69inSuQa2exybQ=="], + "@zag-js/dismissable": ["@zag-js/dismissable@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0", "@zag-js/interact-outside": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-4jewheDFj/Iq+XfEEz/P6lZRV017LuS8/M/WvKsZh/nNlE5Mhc1CynoKSmEBPlIqS+6n5broUbfInM8ahc3jLw=="], - "@zag-js/docs": ["@zag-js/docs@1.35.3", "", {}, "sha512-ktEPT7TTwwi4EIxUMRB/vI+Vx23vAetATVAr20yVOQiDJASGxNOYwmWfLX5bfNf8b9xSXoFiLt26p02l4J7l1w=="], + "@zag-js/docs": ["@zag-js/docs@1.36.0", "", {}, "sha512-r/UCaibuwepVV1aukiStPHXzRTHMcIf8xuxBwOhJF8ka7eQLroqGotRYo+valq6RAR+s2JKJVmmxU2Li9ADyZg=="], "@zag-js/dom-event": ["@zag-js/dom-event@0.62.1", "", { "dependencies": { "@zag-js/dom-query": "0.62.1", "@zag-js/text-selection": "0.62.1", "@zag-js/types": "0.62.1" } }, "sha512-/+okVW69Xdoot7dutJVMz0iciwWM6DvAeLWr7LB5DZsUQMu93oqV/8BE2JArDxEcg5C208HNThGStcWlTaddgA=="], - "@zag-js/dom-query": ["@zag-js/dom-query@1.35.3", "", { "dependencies": { "@zag-js/types": "1.35.3" } }, "sha512-1RbFZoT4CjlHN9TUNse1++ZVOyKo45ktucTIT349o6HMsoWWKmTJDPvFkMBbmu/qY6XXn4dT+LJEp4bL3DR+Qw=="], + "@zag-js/dom-query": ["@zag-js/dom-query@1.36.0", "", { "dependencies": { "@zag-js/types": "1.36.0" } }, "sha512-GlodCpZSQ+LKsyZ6DmgXN5dAF5CNat+4EwJ91pX4Fd7YHayXHCRca/ztpcdt+jeIWguW59BF4TiJgAilnhwf0Q=="], - "@zag-js/drawer": ["@zag-js/drawer@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/aria-hidden": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-trap": "1.35.3", "@zag-js/remove-scroll": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-DN5bwa7bDCDaUSbNzFxMc2U/WmbLcXvPSQjyOpKI6CC3VbW2kKaOnjJ5qQG+W5YBO0FpmJBtaxRV7lke4sZH2w=="], + "@zag-js/drawer": ["@zag-js/drawer@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/aria-hidden": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/remove-scroll": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-BNIG5iUyaH3GIChTJFqYbUzqWSpQUo73l9sv+XHUb82oWwWKViaIXtftx9HNfavcgyIBGPP7s7P/1T/CRrUAcA=="], - "@zag-js/editable": ["@zag-js/editable@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/interact-outside": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-HcjeacS61vQXfNT9IalZj/+oS45yW5bIDO2NjJWV7zNe5AG29NCceUnvBhy+hrUKPnKcjfDocdW5rCL+Lvs/CQ=="], + "@zag-js/editable": ["@zag-js/editable@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/interact-outside": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-77g7yZsqxAt4gAAFpJFi/ika7VyVptEPe5u3PsvhIbjxt3Zz1tJ3M7oGT8/jlrfozgGbZAKsfQJ1iVp9jA4/6Q=="], "@zag-js/element-rect": ["@zag-js/element-rect@0.62.1", "", {}, "sha512-SefRp1IeiENoUkl7yxGzUIdxtQqgKlI+G1qlgx9MZgchH2VZCpqi+EuZgLEKzz7REMabOYqbgs6EEIxGIyNueg=="], "@zag-js/element-size": ["@zag-js/element-size@0.62.1", "", {}, "sha512-QCtVeIJ611hJPorKEkdfrWWcMohadplZoW8xQW/2PLSmKUhTNLfHsZLyeoYKyj5Jk4X8OAN4onnMVETFw232EA=="], - "@zag-js/file-upload": ["@zag-js/file-upload@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/file-utils": "1.35.3", "@zag-js/i18n-utils": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-oIYwnDct4ERo2mfmcxsBIJnlmpzjrzYx82SQsXWD3NGKx3cgdh2lwBX+ebItaLH1jkgzBa3z0TWxc6rfvcUXbw=="], + "@zag-js/file-upload": ["@zag-js/file-upload@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/file-utils": "1.36.0", "@zag-js/i18n-utils": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-/d/Fm63SozUNs3pyy78pmr/umqS7gl+Qi8ka8Kbjr/TyYcOWS4l4e2wUp74HaHWz6LDSVl3z7dCSRBDKYi+MlQ=="], - "@zag-js/file-utils": ["@zag-js/file-utils@1.35.3", "", { "dependencies": { "@zag-js/i18n-utils": "1.35.3" } }, "sha512-Tb05RCzx4swc156hd4jLiO7z+Gxg/HQ+JCds03jgTbrFJAz2D56YaMeI7gSDc1m4Xre3nyqQpSo9AeX5nzbE/w=="], + "@zag-js/file-utils": ["@zag-js/file-utils@1.36.0", "", { "dependencies": { "@zag-js/i18n-utils": "1.36.0" } }, "sha512-oGO3DO72YaiaJU575Z4pbOXQRRFK0yDAVhcFd4zx6c8uwVGRD5rFUUvH/421a0T09kpStj5SxMWff615zDjtGg=="], - "@zag-js/floating-panel": ["@zag-js/floating-panel@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/rect-utils": "1.35.3", "@zag-js/store": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-nTZypcS0X46Oo1kpCQTnP5UlzjhypOAj3B4dq2z/3bAOC0TntYTnFkj8PbEJtExk7364xfMyxfgZOiv7Aqq01w=="], + "@zag-js/floating-panel": ["@zag-js/floating-panel@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/rect-utils": "1.36.0", "@zag-js/store": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-cfdbgWa5mlmUOHY4nQ3SP7H2DffVOqm4J6Vk4fvr6Nkm5W3VQRVPvH+5Zzi0RmE0evnJuSb56RKUQHKzf4effg=="], - "@zag-js/focus-trap": ["@zag-js/focus-trap@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-evErLlGFdDVCI8xipNS5k0rAvO+KFRA9g273bbfWAL1+mT54mcB/XHa85nC3QpPgMNrSh+6LUNq9fapyOGoyYg=="], + "@zag-js/focus-trap": ["@zag-js/focus-trap@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-btiEuBxX30nQIJp2NQJRZ0nSfbtINCRMgbzHdc4cwgTD+dP+NIbo9RIXRQe+Pvb2vZ0wYwchiojrjsIKR6AmgA=="], - "@zag-js/focus-visible": ["@zag-js/focus-visible@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-g4F8PRGIoFoKBrHiQ1HQh5AjCS7brFRXHvpbDNb9+T11FGlF5Turb+6OVRoNV8MmiuqMltO2I28l36YsGc//uQ=="], + "@zag-js/focus-visible": ["@zag-js/focus-visible@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-VPeCgn3sPQIyEYdznkaRxzlEuS+I95b0bsnWI4n3Kh0GXJR8xzyKU97U3eY24MSuZUqBxb/huEPFMPN0jEc9zQ=="], "@zag-js/form-utils": ["@zag-js/form-utils@0.62.1", "", {}, "sha512-GJWRRtEpro8TNEUuEWMhIOWmVFXqiHNTTrrRLxijxUIWbsPrPdPiKL7qwBAESYoZQCmN0hU99S0w2Xmm7Q05Zg=="], - "@zag-js/highlight-word": ["@zag-js/highlight-word@1.35.3", "", {}, "sha512-K+mvEBbf3SUFjQeMeJQYb3cjri3x6sPaPhcKWayalelSLB/StWEGqcpmz+a6uUYrCUAK5kEi3Hn0YLGfn0GOig=="], + "@zag-js/highlight-word": ["@zag-js/highlight-word@1.36.0", "", {}, "sha512-ZG8mw6xMsMCpoK9nJ0p6S3U3dXD4pXnG3d1eSpTKu8TQ3oPoWxkL2x4wQxr9LA6EeCPW7eB5uF84ChrLy05jPA=="], - "@zag-js/hover-card": ["@zag-js/hover-card@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-xVoKOtvrnzhYzciZ1csgiV76IQ4DRtx1lsJeFSrfg5MH0kYWeC/pcmm3yCd2+Qh/45J7DbSXeZneqxpyiF5Vvw=="], + "@zag-js/hover-card": ["@zag-js/hover-card@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-/3LvZtaaocoXoqjP8tiVbVr1KCP3jZu9V+506WemLQ1VHPu2rq/bicu3YczKAy3119pZPtILhYvY4PKiHo79ng=="], - "@zag-js/i18n-utils": ["@zag-js/i18n-utils@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-k7UcNxbnC2jvGwCoHYAkFD3ZaRSMQNVHfuy8TujZQ+ci3IJovwgWLveZoRfFbXHkTLfhmbpE2tFXBdpwOVZutg=="], + "@zag-js/i18n-utils": ["@zag-js/i18n-utils@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-gwVR/GuBJrWNbtVgi2HQtuRcuaY4cNsyMNoOulrNrpAQ3QDP4fzfX9GllBNgkpyBZhOlBf0FFxaQ07DZSDvXCw=="], - "@zag-js/image-cropper": ["@zag-js/image-cropper@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-1PH6bg8JAQESHzNqjka2TJ0QGNBGBAO6rb7AZ+9CaCCLw0pIzbUJhqPMkwd9GhdWGKGP+e7wFitnjcT4W5Js8g=="], + "@zag-js/image-cropper": ["@zag-js/image-cropper@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-90tGfFeA3SGWNkdqIRWR+xWCMBf6W3Yn5bJrEqOSxv/R8KbWloqDuqWSQAsw5OTMx1+bzHFRcOQzTn0W0hJU+A=="], - "@zag-js/interact-outside": ["@zag-js/interact-outside@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-tOcuo/IztzpU7UKXtjVrLZtXzzcbhP4n2WynKwDRkTkq3mRCp61xXJp1csIBycI3JHm/CMeAEcPdRIioxIT/Zw=="], + "@zag-js/interact-outside": ["@zag-js/interact-outside@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-8DUbjaXvdyY/V8fXbqsgC3zSRAF4I7qeARRA2IrVaVLyFrjp1V5R6FfxqOzzHzVjgcWOe6i6g6bTH11rqfqBag=="], - "@zag-js/json-tree-utils": ["@zag-js/json-tree-utils@1.35.3", "", {}, "sha512-nOv2dPJf+1mxsobYiSlYt96hR1MK7iHKG1iDLoO5wLggS6GQA3ix1BerHJK0zdehoEZ71R45el5ghCG1HB9VzQ=="], + "@zag-js/json-tree-utils": ["@zag-js/json-tree-utils@1.36.0", "", {}, "sha512-cMtJkmKZztT3H8yrZKEPUDr7Y3cz6hauM4GYkz73NZTtgQizGmYN+UhFe3730kp49DJlH9VyayupWg9zXOT1hw=="], - "@zag-js/listbox": ["@zag-js/listbox@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/collection": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-FE6FOuBr6aWtOb8U8oDvAvcUzD6JKLXAe8WngiLFG+b2yyW4nlaz2AcKRG1bjjB066UMxMo9/+2p4D0Kf5Id1Q=="], + "@zag-js/listbox": ["@zag-js/listbox@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/collection": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-n6hJdRsgFY9fRtXH1t6WIKCYx1topK8avoAxEuzenU0G5NIPDD4H7hTQ/r1li43rrEF+y7Pr+qs8YjeYYvSmGQ=="], - "@zag-js/live-region": ["@zag-js/live-region@1.35.3", "", {}, "sha512-64rWcfggYpyr2Fn4pdrB/lljMgm3quwn9is+vdDN85Vv3WShKWoz08T4njidm0hwcIbzas0bRqQYWDLLsAoSJQ=="], + "@zag-js/live-region": ["@zag-js/live-region@1.36.0", "", {}, "sha512-BMcSa3fhLM8JHylOSZW3+T0fjMHr7HfrpFmymAx/6K6Jw7+69eHL6VEtSzKq2o0fmfQUfkhxGKG61046QLrszA=="], - "@zag-js/marquee": ["@zag-js/marquee@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-bKZVpmAJWPDORP7WOWnS+65W5ZQBQmRs8zvV33ZfCpFbkXjhRiqKSzIj223/VOc2NEDjyWagz2vioAxrFYVzww=="], + "@zag-js/marquee": ["@zag-js/marquee@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-qGb+rPGgQ7bmpROMbMYwA/upSrt4nLDwt6p0mjrnvA74GAAtQdOS+hfsVnOwowjwTtJ1j2Z7rMesLfPs2ebQOQ=="], - "@zag-js/menu": ["@zag-js/menu@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/rect-utils": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-KyY0EZXkIU57Mjt+Lg+pupiePk3LcnQcB3Gl05Vva61bNjBjdKV71qwCQru/OxPZEwYgPo46L7TDIb56kfK/VQ=="], + "@zag-js/menu": ["@zag-js/menu@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/rect-utils": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-hjih5tAO87qKj+gUjzlF9wzjvKWVSTYc/UNLFdWGkzXD0hPAjPhHBWkmoOUriDrol2LatRrHh1JCKTHK6xLJlw=="], - "@zag-js/navigation-menu": ["@zag-js/navigation-menu@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-8cCHx0X/KjEpr2BaMOxJS5LiA6fs/CNqVTF/sTTgZAv7Dm+MH0yNuKm4kpPvcLaVeBpVE09bnyCHrNKzZes+Fw=="], + "@zag-js/navigation-menu": ["@zag-js/navigation-menu@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-PzSNZSYBGysHk27YErcS4lAB1Rb9f+7jV2lqhO3kPR+GMs6ZWuZhD296klQux6qcIJ3a5fM+FulzxYTBd3zitw=="], - "@zag-js/number-input": ["@zag-js/number-input@1.35.3", "", { "dependencies": { "@internationalized/number": "3.6.5", "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-uqawVybAcLcefVEHMVONuAA5kDSDPP5TsROr5PnAyFlhM1iD85+r3KAfCueoDX5w2X4ibbu9o2tdV6zTFKD/nQ=="], + "@zag-js/number-input": ["@zag-js/number-input@1.36.0", "", { "dependencies": { "@internationalized/number": "3.6.5", "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-2aSGE53nqEzzEeP/Vn7CyUe0YJLxjC4VfR1tZ5x13tLewPib9pr3PwrOg3cp51rskHq8Ea16ggRwjChyKwdtmg=="], "@zag-js/number-utils": ["@zag-js/number-utils@0.62.1", "", {}, "sha512-ktnGSYKKLG9No14ivlboEzq4+jiOIWU+8yeoRrZmfdCG58g4s9JF0lBDRf3ts9vhUdofJ+vUFMPqkk2eCWyQlA=="], "@zag-js/numeric-range": ["@zag-js/numeric-range@0.62.1", "", {}, "sha512-R4/II5MvS+eJ880srPuIlexqRH7kVsGomcsDlB5yyhHsradm7OJfC5L6osvKj1DNAitfFh8901BZFaWmQe8O1w=="], - "@zag-js/pagination": ["@zag-js/pagination@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-fKm4s5KAd12RiCI/EDmmGKjPQ+i2qS/UsJPdMe65yb/4mY5OibwV2zyHcVeFsOD4gBZpnU6kYlDAGSttmLWLlQ=="], + "@zag-js/pagination": ["@zag-js/pagination@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-SYAdCvlSIOx4XDxI0BVboyNZRoWI5I1uHDxrTCQ5zbA1CIRQGs5ZcNButFUDM9anUlCoQIatirZUzZ3O0RI3Mg=="], - "@zag-js/password-input": ["@zag-js/password-input@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-etd0gm6ELAm3y+cFhPU+TYm8khm9cL5Mg5m2DcZxu1Mqpj7JY0LsXZ8SFOdCZgTIHuMEhKBiYfnuyMAd4CJztA=="], + "@zag-js/password-input": ["@zag-js/password-input@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-tP0/2ds6L6Q95kSw2O/UYM6IJ32Cyk6DlOShepDUNTP2LW1NSB/xXIq4AzB3YQ0ZCxRZrTTqnGaQ8rT/cJflyA=="], - "@zag-js/pin-input": ["@zag-js/pin-input@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-ZFt+WIHMdVlSg29BrQLFq5ijabiUO3tXMhoKhjjzTSe/tLqfNeu3UxFB6y/FYpn8+Cvn6xwvhu3lgnORYmI0zQ=="], + "@zag-js/pin-input": ["@zag-js/pin-input@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-8GdS7MmN1saA+dxJky8Q+YIFSQHCzzO/19inufd/IFyZfhlTadbmVT6dXRhoOanIzHmpbSjUESo3PectVmB6Ow=="], - "@zag-js/popover": ["@zag-js/popover@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/aria-hidden": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-trap": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/remove-scroll": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-+MIEENPsbKPxzoNuDI/C5d5ZN9uxnfZ+MBDc5C5XSgjjg9FcvMXClNq7IFM1aZi24peRXg9cMNf//lApVRT37w=="], + "@zag-js/popover": ["@zag-js/popover@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/aria-hidden": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/remove-scroll": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-bLT+aDJqXHfU7wjGGQ7T6dJzAkI6gqaLtmxpJqyxU+Miq+TWinmQYCMpnuRPVfHGAycpoCxPhN7Iw03rMj5DhA=="], - "@zag-js/popper": ["@zag-js/popper@1.35.3", "", { "dependencies": { "@floating-ui/dom": "^1.7.5", "@zag-js/dom-query": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-gpB7Xn9WtlfrUsIVbSgNQGDwgNOL/cSGt0Id3wEQKArmqVC704EWtPvXzOMMybBEdm8YW2hQrXuo+o66abI1Sg=="], + "@zag-js/popper": ["@zag-js/popper@1.36.0", "", { "dependencies": { "@floating-ui/dom": "^1.7.5", "@zag-js/dom-query": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-Tiq1Vjd+E8qx69Pb+ToxKJUBNWTyJ68sHZupfJ9e9SiZtvV1IqEAFswXBgwsjiQ9SqKIcG9DaJPmlFj5myr9ug=="], - "@zag-js/presence": ["@zag-js/presence@1.35.3", "", { "dependencies": { "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3" } }, "sha512-ev5E7+U9IZAGvEaflpdVLHaZl8ZaQMhGB3ypd0yKhPwXeM51obV8w3+5HjzTqHPl8TKuoHWL31YaiUBd5EuS6w=="], + "@zag-js/presence": ["@zag-js/presence@1.36.0", "", { "dependencies": { "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0" } }, "sha512-V6rrF6lN25Y21FkVThQCL9zL9mtxqgT60nCmXX9dgvBWDyJ4qyWdlw3zVJbQnlncdRQEm+3LpWetsnqKKgkV+g=="], - "@zag-js/progress": ["@zag-js/progress@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-u0GxQN1AfXMAgzYOUMxKQA12DyuAP0svh2S//KvOorTSv7d5hAa8nZXi2cEv5abYsyfKJ6/bc1Z56byzW1jVZw=="], + "@zag-js/progress": ["@zag-js/progress@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-mXtUlvA0KYSNLbh9VOf4hlepZvosxtdxBBO8nujjItY922iS7JIEeAW3FBc9Sv9sLX58aXpkeelKZqkuyqJmVw=="], - "@zag-js/qr-code": ["@zag-js/qr-code@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3", "proxy-memoize": "3.0.1", "uqr": "0.1.2" } }, "sha512-t0Ehwogr49vTNtWyNdQU2tYex7uJyfAn7N/5LgD7FXw8aa+RBMWZWlqjCUvHqJ929tVMrn+LIrQnZCcwNunalA=="], + "@zag-js/qr-code": ["@zag-js/qr-code@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0", "proxy-memoize": "3.0.1", "uqr": "0.1.2" } }, "sha512-Ria3pErrcXSQH/mJ0UEEUSCNAc+fwsW/DvVadcPnn3JzQp082Brykew+DnC/dbCU83TyTVnBXanvKoFADPPkfA=="], - "@zag-js/radio-group": ["@zag-js/radio-group@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-kOzocjqWk3dXuRfyfsHwfw63Z99NHbc7rvVUutSsfXANXi+DFYZHuqdPUwMt+29LfaL15XTOfuGV+yUXDCgQHQ=="], + "@zag-js/radio-group": ["@zag-js/radio-group@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-DJRLCkr7uR2Jqo+PtkaLdORHPhykFSUGk6THuK67HZRPwiUhbnxmbJqABrOlLhoGBjmc1pwI+Lqluj3xU+B1qA=="], - "@zag-js/rating-group": ["@zag-js/rating-group@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-BmhJZdbaTnd3nFWMY+nR+HF952UhWXfaXXxiBWptSLMBfAYImQTWBMrLgTHCSnVfmFATj4Gb7xQe79FQU8T5fA=="], + "@zag-js/rating-group": ["@zag-js/rating-group@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-rFAHnz2fmNHgfvsll/zqNii/UJY/rmrfXS6NQYHUGFcB6xKfCdOw6eIiqIbupprqgfVu3klDNyrhLk1RwwAYWA=="], - "@zag-js/react": ["@zag-js/react@1.35.3", "", { "dependencies": { "@zag-js/core": "1.35.3", "@zag-js/store": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-x2PxYUCQ6OgOpUdmSkG5tbL9JWVqYRh42r4V2UeAdMh0MRwjAJtxjvAy50DZ8Sfia5o4UGdZMXJyDY2O7Pdhyw=="], + "@zag-js/react": ["@zag-js/react@1.36.0", "", { "dependencies": { "@zag-js/core": "1.36.0", "@zag-js/store": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-JeGXIUJAWAwvqWfK6Qr8Ig3ihhGA+josG/VntYTVPu8q3YKh+iE0CA0bFCSn/Brw5kEcVu+CQZSruBTEi2CZbw=="], - "@zag-js/rect-utils": ["@zag-js/rect-utils@1.35.3", "", {}, "sha512-mt/oD3RXdyaX6ZPSd8BO13vvPBJ7QpVWieubE3O0WM3OPhU7ykDMRp/tR7cYMQrzUm04GlY9pbkmSSw2uABxlA=="], + "@zag-js/rect-utils": ["@zag-js/rect-utils@1.36.0", "", {}, "sha512-ckRE9tVISEthxkqVZKWBj5p33DS+xYmx3mFfG+cpavMrBtm1MPryPdTx3QXuh1AYjRfE1T+LiWtmvnW1T67b7w=="], - "@zag-js/remove-scroll": ["@zag-js/remove-scroll@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-e59z9SbEpPiw0qwNQa2cB5/h30ZCLREaHsCw1TKTANFhwg7v85k9Lq1H/G/49li1CAjmiaOU9BNGlDvbzpNETQ=="], + "@zag-js/remove-scroll": ["@zag-js/remove-scroll@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-1oIb2K+WAs3frtJB70mx1p5FXz3m45eX7kzfu9/ijGF5T+XdRBCS3LyY+hU0bc6JM/UE/pX8jpCAKrKxzf5Lsg=="], - "@zag-js/scroll-area": ["@zag-js/scroll-area@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-IQwdUws/AckRIHK1z/wHdHurnOeGd8h8Dmspfh3VT7NkwTnxeJ4SW9di9smuD+d25eXkJRuX5zGEDHAyx2IaPQ=="], + "@zag-js/scroll-area": ["@zag-js/scroll-area@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-QspbevnrPn94ScPcMigv3zROCz/4oIgtrYRFqAPDIatbwgEXNFSSCzZBSvSRIbF6jzYc+dEZBYBHHgFOeJN3yA=="], - "@zag-js/scroll-snap": ["@zag-js/scroll-snap@1.35.3", "", { "dependencies": { "@zag-js/dom-query": "1.35.3" } }, "sha512-NVa2yRm2DQnF6hTV9k7Xz7l8YCZBagZTiqSwNvWKUulKD1csjt2fpBxvUt2cK+1iQnLOey2ydhs7MMsAnXPbJA=="], + "@zag-js/scroll-snap": ["@zag-js/scroll-snap@1.36.0", "", { "dependencies": { "@zag-js/dom-query": "1.36.0" } }, "sha512-MB1Vxu3YEEUSsY3JxgA9/lyHFjZfbiDF7A0pAXSkPUrWck7Nl7ReSNFS5NI7bxyBiuGdW3YcaH60aPpFwgOWRA=="], - "@zag-js/select": ["@zag-js/select@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/collection": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-ztszGHWvlbBDE0YT5LYPH+sMd6VH1ct5pH/M9VSzIUO6C5PARkW0NwSVQ1rCQJMj4sfvSE1gC1/r7urRzqEcUQ=="], + "@zag-js/select": ["@zag-js/select@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/collection": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-75XpjSXrdQRZwxstwnO52JDmz7A7GoqRrkJiNgz0ugGViLCPKex31nlPFfbSxkTvMS/yly2x5LRfx1Xt19ra1Q=="], - "@zag-js/signature-pad": ["@zag-js/signature-pad@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3", "perfect-freehand": "^1.2.3" } }, "sha512-jvtxxzAQ8fre11zWUh6HflG4Ycr5z83Wba4pONRJbUE/vNgkJQ7yJgfyUl1QTlkn8Arfg2Zwoxu9GIq80HLZWg=="], + "@zag-js/signature-pad": ["@zag-js/signature-pad@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0", "perfect-freehand": "^1.2.3" } }, "sha512-xXLCcdryIzjToRNnk4FQeKz88MNys/0OyQ27PwrTXIeivIE64Xged20fsWuVaC+8qLMPf2JjkcfwLSZmaB3cTw=="], - "@zag-js/slider": ["@zag-js/slider@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-Th142JO4Fqla5AWhGrTW6CQicwvTw87PdVpur/WotQ7brlZIww5HipzEMh5eQJSWfwpKD4PI2bYK9V/ZE/mpXA=="], + "@zag-js/slider": ["@zag-js/slider@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-/oaDhlAg4PX/kAFn48UP2gId3lBO/qacf9jjG8YPRDGRs39MU+pNC6Q7aiblA6/YHCNxq6F53ODwanC0lR9Uvw=="], - "@zag-js/solid": ["@zag-js/solid@1.35.3", "", { "dependencies": { "@solid-primitives/keyed": "^1.5.3", "@zag-js/core": "1.35.3", "@zag-js/store": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" }, "peerDependencies": { "solid-js": ">=1.1.3" } }, "sha512-Gp6jFWwLeToD+Y0lcEwi15XIHSmJbyPhl/klxKQWWpr7+p3OAoNWwOQbxkhRU7M9hhJrYYsENfSETwG9QhMfBQ=="], + "@zag-js/solid": ["@zag-js/solid@1.36.0", "", { "dependencies": { "@solid-primitives/keyed": "^1.5.3", "@zag-js/core": "1.36.0", "@zag-js/store": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" }, "peerDependencies": { "solid-js": ">=1.1.3" } }, "sha512-4V2hTNlnTiBcQmNNtlHIp4WtOMEsRz/fkd0YDwFDXZXezxg0HtFv3dm4FANau6+wOPgx9Zb4TvCdWjSlA6mFpw=="], - "@zag-js/splitter": ["@zag-js/splitter@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-IsIbRwzjr5amGANEDsZDSToaSn8wHUWvS2l0XHmf3BiiguVApaZgQTlfqthVQC9hBHMOaGIXIW1CFUOrQYkvUQ=="], + "@zag-js/splitter": ["@zag-js/splitter@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-iIDSW7FGeEHhLgaLPQlk+gpTQ3WX4pP5Nr+UyDVej3kTquxGxIYoV6/NDxMrTQx5jR8woOUS2l9BgU56ZYbjpg=="], - "@zag-js/steps": ["@zag-js/steps@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-TYIrqV+v9/ULhvrTRBtQFFvJQPPTWOmjFXxlIxDwozek5R4dCIyeUYt1/ChJEc2mNETocbfDVSTxRO1dwCFpwQ=="], + "@zag-js/steps": ["@zag-js/steps@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-dStANkt9BFaKxkbzPU87WQySI9GY9Gki5HEyq898/R4Ngu4YsDGGejVPF5rbGbXfGQSNnAZjNOQEmNqMO8OeyA=="], - "@zag-js/store": ["@zag-js/store@1.35.3", "", { "dependencies": { "proxy-compare": "3.0.1" } }, "sha512-7kEV4T/20DU36UIfVMzuDlLhWSSEy/vabmpiB700tcdD9BBBODTiSg3ZeljW17dQbvE545vZOFEjVf/cQ5LVGA=="], + "@zag-js/store": ["@zag-js/store@1.36.0", "", { "dependencies": { "proxy-compare": "3.0.1" } }, "sha512-IR6OWeXp/QZMb9flhawen5Vu74s8m4pSVAmVSmXd688hUHY1bqOxyyBwdua/rC1rCIkFzxVRrIgzFCha0O+lLA=="], - "@zag-js/svelte": ["@zag-js/svelte@1.35.3", "", { "dependencies": { "@zag-js/core": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-QgP6oPZMJMPONY7iqnYoHya9ZksGppm+x4DkiFe5CsL/D7SDICICnVX0iPA1seYV/WEUelvVAURHEy9/e2asjw=="], + "@zag-js/svelte": ["@zag-js/svelte@1.36.0", "", { "dependencies": { "@zag-js/core": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" }, "peerDependencies": { "svelte": ">=5" } }, "sha512-RTxapDFaKkcmFwXFKJrhIsku2TdeymQJbhBNdNf7B8No/YRbs/lqzk/DCX4XJZUfXcnXy+2Ojfa6ncvzg043NA=="], - "@zag-js/switch": ["@zag-js/switch@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-EP/2cJ46sd+6C5x5+89jn/9NOpM05CRESYB4RMhOnTe/WFtcS4IpiYtVHFhikdXkvJoibm67O2EHep2Pm/Xj4w=="], + "@zag-js/switch": ["@zag-js/switch@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-fSie2RIHnppo9de41pcKDNBmke+WuO0Y0g43Gh4bxCQfOFjd6M8HwLT5M3lr2Ao+/EBWcip+b75ImKt1ed5CaA=="], - "@zag-js/tabs": ["@zag-js/tabs@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-lZKlDmxE25miCikj9QZCCnL02SVV2K14KZy5bn7+XDgrWlfSNTpNTj8r5E3zGlSgio5pkTGou57ASqS7WaPDWg=="], + "@zag-js/tabs": ["@zag-js/tabs@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-m3wbKAgpdVuAos7tx5tC4pMx6DxBKryuqgSxRf2Us2fvTWy4smbmauSPQU4bONhG5niSq1xWKk0PRU9qMrur1g=="], - "@zag-js/tags-input": ["@zag-js/tags-input@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/auto-resize": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/interact-outside": "1.35.3", "@zag-js/live-region": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-HqyoQ3DZFhByOGnDShFfxi6u0bIf7aSVTlwmAvcL+b2ZhyU6/wIMGc4WJE7BMx1NYWM/jNLHedvGExAI8R0kXQ=="], + "@zag-js/tags-input": ["@zag-js/tags-input@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/auto-resize": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/interact-outside": "1.36.0", "@zag-js/live-region": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-CEjHQIYz7so6TYzC6IYzi1UzXx+iS89urbUQBeSKBHmCvxkvo0AmfB/XD9OqmZAaFKN95OTX4Vwy0b/MYOf5lg=="], "@zag-js/text-selection": ["@zag-js/text-selection@0.62.1", "", { "dependencies": { "@zag-js/dom-query": "0.62.1" } }, "sha512-0b049CnWN/Nyp/F/nbeU6G8BI/fzwlSQTTDWK81yRFADDFTZ2mWpVAWJF/fY0rKjsn4ucDykCS7GXMIo5rYILQ=="], "@zag-js/time-picker": ["@zag-js/time-picker@0.62.1", "", { "dependencies": { "@internationalized/date": "3.5.5", "@zag-js/anatomy": "0.62.1", "@zag-js/core": "0.62.1", "@zag-js/dismissable": "0.62.1", "@zag-js/dom-event": "^0.62.1", "@zag-js/dom-query": "0.62.1", "@zag-js/popper": "0.62.1", "@zag-js/types": "0.62.1", "@zag-js/utils": "0.62.1" } }, "sha512-THNASHp9Fu5f4/LC3t3qJfsYD6FqjhbP7HrjIDDFOcdNGRzOTfbEpKF3JtJgmM6F+/fuQKhe6FUbcluMd9zo8Q=="], - "@zag-js/timer": ["@zag-js/timer@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-edmgitbRgsq+msxvVB4wc17Q5d5k63zMWaLJnWjUdDGAgEtM6/HNxwGb3riv46S2U3RgYxaaHTNZ/M7EE5mvYw=="], + "@zag-js/timer": ["@zag-js/timer@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-J/9dc7FiPwZ1zQUobpQIoDwPrI6P4UPJdsSRLLiWb37+a2l2HXWGy28RdjQ2N9TVPCPtx8ilvJuSpQNrpnHVyw=="], - "@zag-js/toast": ["@zag-js/toast@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-whlR791GHdnMD21nNPsl2Dbql8+qu1wBZl75QzwYrjR8FlKjp8bhr3gXKzQEddcBXe9GPEFGvUs4iCyXsuTbpg=="], + "@zag-js/toast": ["@zag-js/toast@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-2zmN14DfFxjIyg53TKwNrehmN1usppcm36zBJdWEk7F4szI/LPqdAL4pUR3jIAsgNkMR5p0qqMFdUr5hoeeJXw=="], - "@zag-js/toggle": ["@zag-js/toggle@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-aFfHKuR4sKzglhkmWLA+0RTNPs9dfeqwtc96qljawGYfAYWJXkEPYK9dFfVa+arZ7L84xBi24QSLiTg7LGSFLw=="], + "@zag-js/toggle": ["@zag-js/toggle@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-UtVID7K4TIqzRMfJttERvicRoxiycjQi/wQYvKHxnq4FtR40tnYuRZbPQjmFnKFHe3+iQFWDq8RSBsjZv4aSCA=="], - "@zag-js/toggle-group": ["@zag-js/toggle-group@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-Gn6JHzkQ4tlttjZcE0ZjIdxYkFeVp9VHrcMVizjJTkGZRmQ+kPZ5G/wOsZhIrvLX3Dw6Y0NkuBcP+jDHz/o3TA=="], + "@zag-js/toggle-group": ["@zag-js/toggle-group@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-UbBrXiu4FFGuKTaXm4ELeo0/Ecs8lPlaPCe2kzRy0n+db7s//QHNPvtfEjskWPd/Tw33IwzHOsBK+WEfNK+53g=="], - "@zag-js/tooltip": ["@zag-js/tooltip@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-visible": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-/pImDGYl79MfLdvEphj3rSvNdj2tLW4GwGEncgdLM/GKwQiEUjfi/9EJOfLYP23M4lOOnoW7orehJ9xeaXOAkA=="], + "@zag-js/tooltip": ["@zag-js/tooltip@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-visible": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-LzON1FatPEJ1y0kvvrJRvZvOjsEdy36pnHwvAliVRryadZobtMNpKXUlYfj0p+adrGE7t97vKM7TcuefTXD9SA=="], - "@zag-js/tour": ["@zag-js/tour@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dismissable": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/focus-trap": "1.35.3", "@zag-js/interact-outside": "1.35.3", "@zag-js/popper": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-DI2aCXmZaE9KcPZDs9itc2BO7ixLApJ/yVRfM69pXwVOrucdSeDDNPFkfbhj5XwB+9VjjZEkqWFHKntRIyPl5g=="], + "@zag-js/tour": ["@zag-js/tour@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dismissable": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/interact-outside": "1.36.0", "@zag-js/popper": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-3qHzp+ZgrxsMLSLj/dizIFOZ1tZ0Vz4khmVEHArTydxB1AX9/HovjMwOtEZyierfGC82gPwC4HognF6y5jMaLg=="], - "@zag-js/tree-view": ["@zag-js/tree-view@1.35.3", "", { "dependencies": { "@zag-js/anatomy": "1.35.3", "@zag-js/collection": "1.35.3", "@zag-js/core": "1.35.3", "@zag-js/dom-query": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" } }, "sha512-DbHaLxSNa1goE3o3IsXxEdzp8P5dvmkk1rVWgNUUIhpA+44idEjSSNXJkHPl18Mk5blqSMVjK1EX91oqai01Vw=="], + "@zag-js/tree-view": ["@zag-js/tree-view@1.36.0", "", { "dependencies": { "@zag-js/anatomy": "1.36.0", "@zag-js/collection": "1.36.0", "@zag-js/core": "1.36.0", "@zag-js/dom-query": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" } }, "sha512-hg1/hIP5IMzT/J/JVEPDWqhqrP3LSTcuEtJdYMRjRXjuXXxFzsZBuYUgHilEOuoGAYbKloImT5yOB46lDGBeMA=="], - "@zag-js/types": ["@zag-js/types@1.35.3", "", { "dependencies": { "csstype": "3.2.3" } }, "sha512-Fnm3AMs1lfb55hlkip/eJeWHOjFB3gSi1JkZlkkdltG2l7y/zsHkumPSe6jIKy+DRRIFKRCyXVTatbPN27bO3w=="], + "@zag-js/types": ["@zag-js/types@1.36.0", "", { "dependencies": { "csstype": "3.2.3" } }, "sha512-7qLMvaIfRwVLzxCi3MZ2rImkNZGJ1avtrhhQ8G9AIk19P765O9IqvfDlCXTqHGUZPUL/+fJOWcgQDkWaFM8RBw=="], - "@zag-js/utils": ["@zag-js/utils@1.35.3", "", {}, "sha512-LHcC+9y6TFhDsIz9I3koYxONl2JFfx5yQDzc6ZEQO2cqzXedRcN0R9IPqNGCX7JuhGt14ctDkVCm1JWGP2J6Wg=="], + "@zag-js/utils": ["@zag-js/utils@1.36.0", "", {}, "sha512-YVOFUEoz6jAto+/pvWi52gAn27i2Kcdf1oMA0sI+wI0gTyjK8LybrKYMM6C2W72PRina6/z4BuRvypY3R6TzFw=="], - "@zag-js/vue": ["@zag-js/vue@1.35.3", "", { "dependencies": { "@zag-js/core": "1.35.3", "@zag-js/store": "1.35.3", "@zag-js/types": "1.35.3", "@zag-js/utils": "1.35.3" }, "peerDependencies": { "vue": ">=3.0.0" } }, "sha512-k9cAeFLSvU7iVlOy1ZyUsKZSEIh/erp830eYRg9Z3v1y8XEXuDtlIkIKj/yeiM4m9qAV2O1EX5LDq+aYe7bbRQ=="], + "@zag-js/vue": ["@zag-js/vue@1.36.0", "", { "dependencies": { "@zag-js/core": "1.36.0", "@zag-js/store": "1.36.0", "@zag-js/types": "1.36.0", "@zag-js/utils": "1.36.0" }, "peerDependencies": { "vue": ">=3.0.0" } }, "sha512-oMogGAky2oDEbnmb1JbWOb3JwRWBZi3kuZ0N7/HjWU3k8e7UZ0MAIiSZHoj8nL5/vbif55y0RWpDk0Qly4BQ9A=="], "abbrev": ["abbrev@2.0.0", "", {}, "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ=="], diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 60163be1e8..d6e09972c2 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -5,6 +5,32 @@ - **Field**: Added `Field.Item` component and `target` prop on `Field.Root` for multi-control fields (e.g., currency select + amount input). Use `Field.Item` with a `value` to scope controls, and `target` to specify which item the label should focus when clicked. +- **Listbox**: + - Added `keyboardPriority` to input props to control whether key handling prioritizes text editing or list navigation + for `Home`/`End` and horizontal arrows in grid collections + - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic + highlight navigation +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing + hardcoded accessibility labels +- **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags + +### Fixed + +- **Carousel**: + - Fixed controlled carousel inside dialog jumping or skipping pages + - Fixed navigation inside CSS-transformed containers (e.g., dialogs with open/close animations) + - Fixed scroll position drifting when container layout shifts (e.g., scrollbar removal) +- **Color Picker**: Fixed vertical slider orientation not preserved on pointer updates +- **Date Input**: Improved focus management +- **Floating Panel**: + - Fixed `open` taking precedence over `defaultOpen` during initialization + - Fixed `setPosition` and `setSize` to work independently of drag/resize state + - Fixed `Maximum update depth exceeded` when content uses `ResizeObserver` + - Fixed maximize/minimize restore reverting to `(0, 0)` in controlled mode + - Fixed Escape during drag/resize to cancel and revert to original position/size +- **Menu**: Fixed trigger to keep `aria-expanded="false"` when closed +- **Pin Input**: Fixed crash when typing the same character in a completed pin input +- **Radio Group, Tabs**: Fixed indicator only animating on value change, not on initial render or resize ## [5.34.1] - 2026-03-03 diff --git a/packages/react/package.json b/packages/react/package.json index 5825d596ca..5331b7eae3 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -85,70 +85,70 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/react": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3" + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/react": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0" }, "devDependencies": { "@biomejs/biome": "2.4.4", diff --git a/packages/react/src/components/clipboard/clipboard-root.tsx b/packages/react/src/components/clipboard/clipboard-root.tsx index f0efb094fa..1ad24cc524 100644 --- a/packages/react/src/components/clipboard/clipboard-root.tsx +++ b/packages/react/src/components/clipboard/clipboard-root.tsx @@ -19,6 +19,7 @@ export const ClipboardRoot = forwardRef((pro 'onStatusChange', 'onValueChange', 'timeout', + 'translations', 'value', ]) const clipboard = useClipboard(useClipboardProps) diff --git a/packages/react/src/components/field/field.test.tsx b/packages/react/src/components/field/field.test.tsx index 3047f16f23..556c36604c 100644 --- a/packages/react/src/components/field/field.test.tsx +++ b/packages/react/src/components/field/field.test.tsx @@ -103,7 +103,8 @@ describe('Field / Item', () => { it('should render the correct html structure', async () => { const { container } = render() await waitFor(() => { - const root = container.firstElementChild! + 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]') }, @@ -157,7 +158,8 @@ describe('Field / Item', () => { const { container } = render() await waitFor(() => { - const root = container.firstElementChild! + 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]') }, @@ -192,7 +194,8 @@ describe('Field / Item', () => { const { container } = render() await waitFor(() => { - const root = container.firstElementChild! + 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]') }, diff --git a/packages/react/src/components/listbox/listbox-input.tsx b/packages/react/src/components/listbox/listbox-input.tsx index 420b427088..e9880e2323 100644 --- a/packages/react/src/components/listbox/listbox-input.tsx +++ b/packages/react/src/components/listbox/listbox-input.tsx @@ -11,7 +11,7 @@ export interface ListboxInputProps extends HTMLProps<'input'>, ListboxInputBaseP const splitInputProps = createSplitProps() export const ListboxInput = forwardRef((props, ref) => { - const [inputProps, localProps] = splitInputProps(props, ['autoHighlight']) + const [inputProps, localProps] = splitInputProps(props, ['autoHighlight', 'keyboardPriority']) const listbox = useListboxContext() const mergedProps = mergeProps(listbox.getInputProps(inputProps), localProps) diff --git a/packages/react/src/components/navigation-menu/navigation-menu-root.tsx b/packages/react/src/components/navigation-menu/navigation-menu-root.tsx index 78bed37e6a..bdf13412a4 100644 --- a/packages/react/src/components/navigation-menu/navigation-menu-root.tsx +++ b/packages/react/src/components/navigation-menu/navigation-menu-root.tsx @@ -29,6 +29,7 @@ export const NavigationMenuRoot = forwardRef(props: SelectRootProps, ref: Re 'readOnly', 'required', 'scrollToIndexFn', + 'translations', 'autoComplete', 'value', ]) diff --git a/packages/react/src/components/tags-input/examples/allow-duplicates.tsx b/packages/react/src/components/tags-input/examples/allow-duplicates.tsx new file mode 100644 index 0000000000..350fcd0efe --- /dev/null +++ b/packages/react/src/components/tags-input/examples/allow-duplicates.tsx @@ -0,0 +1,35 @@ +import { TagsInput } from '@ark-ui/react/tags-input' +import { XIcon } from 'lucide-react' +import styles from 'styles/tags-input.module.css' + +export const AllowDuplicates = () => { + return ( + + + {(tagsInput) => ( + <> + Frameworks + + {tagsInput.value.map((value, index) => ( + + + {value} + + + + + + + ))} + + + + + + + )} + + + + ) +} diff --git a/packages/react/src/components/tags-input/tags-input-root.tsx b/packages/react/src/components/tags-input/tags-input-root.tsx index fb216d607a..a9ede9216a 100644 --- a/packages/react/src/components/tags-input/tags-input-root.tsx +++ b/packages/react/src/components/tags-input/tags-input-root.tsx @@ -14,6 +14,7 @@ const splitTagsInputProps = createSplitProps() export const TagsInputRoot = forwardRef((props, ref) => { const [useTagsInputProps, localProps] = splitTagsInputProps(props, [ 'addOnPaste', + 'allowDuplicates', 'allowOverflow', 'autoFocus', 'blurBehavior', diff --git a/packages/react/src/components/tags-input/tags-input.stories.tsx b/packages/react/src/components/tags-input/tags-input.stories.tsx index af7d5e177b..09adb17f1c 100644 --- a/packages/react/src/components/tags-input/tags-input.stories.tsx +++ b/packages/react/src/components/tags-input/tags-input.stories.tsx @@ -6,6 +6,7 @@ const meta: Meta = { export default meta +export { AllowDuplicates } from './examples/allow-duplicates' export { Basic } from './examples/basic' export { BlurBehavior } from './examples/blur-behavior' export { Controlled } from './examples/controlled' diff --git a/packages/react/src/components/timer/timer-root.tsx b/packages/react/src/components/timer/timer-root.tsx index df4cd43c6d..3df3eb68ea 100644 --- a/packages/react/src/components/timer/timer-root.tsx +++ b/packages/react/src/components/timer/timer-root.tsx @@ -20,6 +20,7 @@ export const TimerRoot = forwardRef((props, ref) 'countdown', 'startMs', 'targetMs', + 'translations', 'onComplete', 'onTick', ]) diff --git a/packages/react/src/components/tree-view/tree-view-root.tsx b/packages/react/src/components/tree-view/tree-view-root.tsx index fb0f15c704..5f498d0770 100644 --- a/packages/react/src/components/tree-view/tree-view-root.tsx +++ b/packages/react/src/components/tree-view/tree-view-root.tsx @@ -44,6 +44,7 @@ const TreeViewImpl = (props: TreeViewRootProps, ref: Reac 'scrollToIndexFn', 'selectedValue', 'selectionMode', + 'translations', 'typeahead', ]) diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md index 15b2b7918d..56278935c3 100644 --- a/packages/solid/CHANGELOG.md +++ b/packages/solid/CHANGELOG.md @@ -5,6 +5,31 @@ - **Field**: Added `Field.Item` component and `target` prop on `Field.Root` for multi-control fields (e.g., currency select + amount input). Use `Field.Item` with a `value` to scope controls, and `target` to specify which item the label should focus when clicked. +- **Listbox**: + - Added `keyboardPriority` to input props to control whether key handling prioritizes text editing or list navigation + for `Home`/`End` and horizontal arrows in grid collections + - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic + highlight navigation +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing + hardcoded accessibility labels +- **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags + +### Fixed + +- **Carousel**: + - Fixed controlled carousel inside dialog jumping or skipping pages + - Fixed navigation inside CSS-transformed containers (e.g., dialogs with open/close animations) + - Fixed scroll position drifting when container layout shifts (e.g., scrollbar removal) +- **Color Picker**: Fixed vertical slider orientation not preserved on pointer updates +- **Date Input**: Improved focus management +- **Floating Panel**: + - Fixed `open` taking precedence over `defaultOpen` during initialization + - Fixed `setPosition` and `setSize` to work independently of drag/resize state + - Fixed maximize/minimize restore reverting to `(0, 0)` in controlled mode + - Fixed Escape during drag/resize to cancel and revert to original position/size +- **Menu**: Fixed trigger to keep `aria-expanded="false"` when closed +- **Pin Input**: Fixed crash when typing the same character in a completed pin input +- **Radio Group, Tabs**: Fixed indicator only animating on value change, not on initial render or resize ## [5.34.1] - 2026-03-03 diff --git a/packages/solid/package.json b/packages/solid/package.json index 3c3ee9c546..61c1fa7726 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -84,70 +84,70 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/solid": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3" + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/solid": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0" }, "devDependencies": { "@biomejs/biome": "2.4.4", diff --git a/packages/solid/src/components/clipboard/clipboard-root.tsx b/packages/solid/src/components/clipboard/clipboard-root.tsx index cf5a2cfd03..9d6670ccf5 100644 --- a/packages/solid/src/components/clipboard/clipboard-root.tsx +++ b/packages/solid/src/components/clipboard/clipboard-root.tsx @@ -15,6 +15,7 @@ export const ClipboardRoot = (props: ClipboardRootProps) => { 'onStatusChange', 'onValueChange', 'timeout', + 'translations', 'value', ]) const api = useClipboard(useClipboardProps) diff --git a/packages/solid/src/components/listbox/listbox-input.tsx b/packages/solid/src/components/listbox/listbox-input.tsx index b9f62b2cc2..486f399d3e 100644 --- a/packages/solid/src/components/listbox/listbox-input.tsx +++ b/packages/solid/src/components/listbox/listbox-input.tsx @@ -8,7 +8,7 @@ export interface ListboxInputBaseProps extends InputProps, PolymorphicProps<'inp export interface ListboxInputProps extends HTMLProps<'input'>, ListboxInputBaseProps {} export const ListboxInput = (props: ListboxInputProps) => { - const [inputProps, localProps] = createSplitProps()(props, ['autoHighlight']) + const [inputProps, localProps] = createSplitProps()(props, ['autoHighlight', 'keyboardPriority']) const listbox = useListboxContext() const mergedProps = mergeProps(() => listbox().getInputProps(inputProps), localProps) diff --git a/packages/solid/src/components/navigation-menu/navigation-menu-root.tsx b/packages/solid/src/components/navigation-menu/navigation-menu-root.tsx index 5a980f29cc..e47de35b8f 100644 --- a/packages/solid/src/components/navigation-menu/navigation-menu-root.tsx +++ b/packages/solid/src/components/navigation-menu/navigation-menu-root.tsx @@ -22,6 +22,7 @@ export const NavigationMenuRoot = (props: NavigationMenuRootProps) => { 'onValueChange', 'openDelay', 'orientation', + 'translations', 'value', ]) diff --git a/packages/solid/src/components/popover/popover-root.tsx b/packages/solid/src/components/popover/popover-root.tsx index ece15988cf..94d16dffff 100644 --- a/packages/solid/src/components/popover/popover-root.tsx +++ b/packages/solid/src/components/popover/popover-root.tsx @@ -31,6 +31,7 @@ export const PopoverRoot = (props: PopoverRootProps) => { 'persistentElements', 'portalled', 'positioning', + 'translations', ]) const api = usePopover(usePopoverProps) const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open }))) diff --git a/packages/solid/src/components/select/select-root.tsx b/packages/solid/src/components/select/select-root.tsx index 53c27dabad..b3596d610d 100644 --- a/packages/solid/src/components/select/select-root.tsx +++ b/packages/solid/src/components/select/select-root.tsx @@ -44,6 +44,7 @@ export const SelectRoot = (props: SelectRootProps) 'readOnly', 'required', 'scrollToIndexFn', + 'translations', 'value', ]) diff --git a/packages/solid/src/components/tags-input/examples/allow-duplicates.tsx b/packages/solid/src/components/tags-input/examples/allow-duplicates.tsx new file mode 100644 index 0000000000..4af412a50f --- /dev/null +++ b/packages/solid/src/components/tags-input/examples/allow-duplicates.tsx @@ -0,0 +1,38 @@ +import { TagsInput } from '@ark-ui/solid/tags-input' +import { XIcon } from 'lucide-solid' +import { Index } from 'solid-js' +import styles from 'styles/tags-input.module.css' + +export const AllowDuplicates = () => { + return ( + + + {(api) => ( + <> + Frameworks + + + {(value, index) => ( + + + {value()} + + + + + + + )} + + + + + + + + )} + + + + ) +} diff --git a/packages/solid/src/components/tags-input/tags-input-root.tsx b/packages/solid/src/components/tags-input/tags-input-root.tsx index d7bfb9939e..5c66f5f27a 100644 --- a/packages/solid/src/components/tags-input/tags-input-root.tsx +++ b/packages/solid/src/components/tags-input/tags-input-root.tsx @@ -10,6 +10,7 @@ export interface TagsInputRootProps extends HTMLProps<'div'>, TagsInputRootBaseP export const TagsInputRoot = (props: TagsInputRootProps) => { const [useTagsInputProps, localProps] = createSplitProps()(props, [ 'addOnPaste', + 'allowDuplicates', 'allowOverflow', 'autoFocus', 'blurBehavior', diff --git a/packages/solid/src/components/tags-input/tags-input.stories.tsx b/packages/solid/src/components/tags-input/tags-input.stories.tsx index 9c8915b602..aa9468436c 100644 --- a/packages/solid/src/components/tags-input/tags-input.stories.tsx +++ b/packages/solid/src/components/tags-input/tags-input.stories.tsx @@ -6,6 +6,7 @@ const meta: Meta = { export default meta +export { AllowDuplicates } from './examples/allow-duplicates' export { Basic } from './examples/basic' export { BlurBehavior } from './examples/blur-behavior' export { Controlled } from './examples/controlled' diff --git a/packages/solid/src/components/timer/timer-root.tsx b/packages/solid/src/components/timer/timer-root.tsx index f4cc4d91cb..795dcd80d2 100644 --- a/packages/solid/src/components/timer/timer-root.tsx +++ b/packages/solid/src/components/timer/timer-root.tsx @@ -16,6 +16,7 @@ export const TimerRoot = (props: TimerRootProps) => { 'countdown', 'startMs', 'targetMs', + 'translations', 'onComplete', 'onTick', ]) diff --git a/packages/solid/src/components/tree-view/tree-view-root.tsx b/packages/solid/src/components/tree-view/tree-view-root.tsx index 8a253b68c8..8948050460 100644 --- a/packages/solid/src/components/tree-view/tree-view-root.tsx +++ b/packages/solid/src/components/tree-view/tree-view-root.tsx @@ -39,6 +39,7 @@ export const TreeViewRoot = (props: TreeViewRootProps) => 'onSelectionChange', 'selectedValue', 'selectionMode', + 'translations', 'typeahead', 'scrollToIndexFn', ]) diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 7d6b03bf33..f6f0aedcf6 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -11,6 +11,32 @@ description: All notable changes will be documented in this file. - **Field**: Added `Field.Item` component and `target` prop on `Field.Root` for multi-control fields (e.g., currency select + amount input). Use `Field.Item` with a `value` to scope controls, and `target` to specify which item the label should focus when clicked. +- **Listbox**: + - Added `keyboardPriority` to input props to control whether key handling prioritizes text editing or list navigation + for `Home`/`End` and horizontal arrows in grid collections + - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic + highlight navigation +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing + hardcoded accessibility labels +- **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags + +### Fixed + +- **Carousel**: + - Fixed controlled carousel inside dialog jumping or skipping pages + - Fixed navigation inside CSS-transformed containers (e.g., dialogs with open/close animations) + - Fixed scroll position drifting when container layout shifts (e.g., scrollbar removal) +- **Color Picker**: Fixed vertical slider orientation not preserved on pointer updates +- **Date Input**: Improved focus management +- **Floating Panel**: + - Fixed `open` taking precedence over `defaultOpen` during initialization + - Fixed `setPosition` and `setSize` to work independently of drag/resize state + - Fixed maximize/minimize restore reverting to `(0, 0)` in controlled mode + - Fixed Escape during drag/resize to cancel and revert to original position/size +- **Menu**: Fixed trigger to keep `aria-expanded="false"` when closed +- **Pin Input**: Fixed crash when typing the same character in a completed pin input on frameworks that use native + `input` event +- **Radio Group, Tabs**: Fixed indicator only animating on value change, not on initial render or resize ## [5.19.1] - 2026-03-03 diff --git a/packages/svelte/package.json b/packages/svelte/package.json index d29f43e3c4..e0a920d047 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -137,70 +137,70 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/svelte": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3" + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/svelte": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0" }, "devDependencies": { "@storybook/addon-a11y": "10.2.10", diff --git a/packages/svelte/src/lib/components/clipboard/clipboard-split-props.svelte.ts b/packages/svelte/src/lib/components/clipboard/clipboard-split-props.svelte.ts index abea6022a9..35eca00910 100644 --- a/packages/svelte/src/lib/components/clipboard/clipboard-split-props.svelte.ts +++ b/packages/svelte/src/lib/components/clipboard/clipboard-split-props.svelte.ts @@ -4,4 +4,4 @@ import type { UseClipboardProps } from './use-clipboard.svelte' const splitFn = createSplitProps() export const splitClipboardProps = (props: T) => - splitFn(props, ['defaultValue', 'id', 'ids', 'onStatusChange', 'onValueChange', 'timeout', 'value']) + splitFn(props, ['defaultValue', 'id', 'ids', 'onStatusChange', 'onValueChange', 'timeout', 'translations', 'value']) diff --git a/packages/svelte/src/lib/components/listbox/listbox-input.svelte b/packages/svelte/src/lib/components/listbox/listbox-input.svelte index 9fec665bfe..5c9aabdb97 100644 --- a/packages/svelte/src/lib/components/listbox/listbox-input.svelte +++ b/packages/svelte/src/lib/components/listbox/listbox-input.svelte @@ -14,7 +14,7 @@ let { ref = $bindable(null), ...props }: ListboxInputProps = $props() - const [inputProps, localProps] = $derived(createSplitProps()(props, ['autoHighlight'])) + const [inputProps, localProps] = $derived(createSplitProps()(props, ['autoHighlight', 'keyboardPriority'])) const listbox = useListboxContext() const mergedProps = $derived(mergeProps(listbox().getInputProps(inputProps), localProps)) diff --git a/packages/svelte/src/lib/components/navigation-menu/navigation-menu-root.svelte b/packages/svelte/src/lib/components/navigation-menu/navigation-menu-root.svelte index b12512c2af..cc9989d37d 100644 --- a/packages/svelte/src/lib/components/navigation-menu/navigation-menu-root.svelte +++ b/packages/svelte/src/lib/components/navigation-menu/navigation-menu-root.svelte @@ -34,6 +34,7 @@ 'onValueChange', 'openDelay', 'orientation', + 'translations', 'value', ]), ) diff --git a/packages/svelte/src/lib/components/select/select-root.svelte b/packages/svelte/src/lib/components/select/select-root.svelte index 3976831e54..ba42d0fc68 100644 --- a/packages/svelte/src/lib/components/select/select-root.svelte +++ b/packages/svelte/src/lib/components/select/select-root.svelte @@ -62,6 +62,7 @@ 'readOnly', 'required', 'scrollToIndexFn', + 'translations', 'value', ]), ) diff --git a/packages/svelte/src/lib/components/tags-input/examples/allow-duplicates.svelte b/packages/svelte/src/lib/components/tags-input/examples/allow-duplicates.svelte new file mode 100644 index 0000000000..3168cb0b2f --- /dev/null +++ b/packages/svelte/src/lib/components/tags-input/examples/allow-duplicates.svelte @@ -0,0 +1,31 @@ + + + + + {#snippet render(tagsInput)} + Frameworks + + {#each tagsInput().value as value, index (index)} + + + {value} + + + + + + + {/each} + + + + + + {/snippet} + + + diff --git a/packages/svelte/src/lib/components/tags-input/tags-input-root.svelte b/packages/svelte/src/lib/components/tags-input/tags-input-root.svelte index fe01a384d7..2390f43f51 100644 --- a/packages/svelte/src/lib/components/tags-input/tags-input-root.svelte +++ b/packages/svelte/src/lib/components/tags-input/tags-input-root.svelte @@ -23,6 +23,7 @@ const [useTagsInputProps, localProps] = $derived( createSplitProps()(props, [ 'addOnPaste', + 'allowDuplicates', 'allowOverflow', 'autoFocus', 'blurBehavior', diff --git a/packages/svelte/src/lib/components/tags-input/tags-input.stories.ts b/packages/svelte/src/lib/components/tags-input/tags-input.stories.ts index 9b06c77405..ee3896da9b 100644 --- a/packages/svelte/src/lib/components/tags-input/tags-input.stories.ts +++ b/packages/svelte/src/lib/components/tags-input/tags-input.stories.ts @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/svelte' +import AllowDuplicatesExample from './examples/allow-duplicates.svelte' import BasicExample from './examples/basic.svelte' import BlurBehaviorExample from './examples/blur-behavior.svelte' import ControlledExample from './examples/controlled.svelte' @@ -24,6 +25,12 @@ const meta: Meta = { export default meta +export const AllowDuplicates = { + render: () => ({ + Component: AllowDuplicatesExample, + }), +} + export const Basic = { render: () => ({ Component: BasicExample, diff --git a/packages/svelte/src/lib/components/timer/timer-root.svelte b/packages/svelte/src/lib/components/timer/timer-root.svelte index fd8001e1e9..7c553bbcdc 100644 --- a/packages/svelte/src/lib/components/timer/timer-root.svelte +++ b/packages/svelte/src/lib/components/timer/timer-root.svelte @@ -22,6 +22,7 @@ 'countdown', 'startMs', 'targetMs', + 'translations', 'onComplete', 'onTick', ]), diff --git a/packages/svelte/src/lib/components/tree-view/tree-view-split-props.ts b/packages/svelte/src/lib/components/tree-view/tree-view-split-props.ts index 030c7ec446..85670dd145 100644 --- a/packages/svelte/src/lib/components/tree-view/tree-view-split-props.ts +++ b/packages/svelte/src/lib/components/tree-view/tree-view-split-props.ts @@ -30,6 +30,7 @@ export function splitTreeViewProps>(props: 'onSelectionChange', 'selectedValue', 'selectionMode', + 'translations', 'typeahead', 'scrollToIndexFn', ]) diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index b8ba84d204..8e87c1c2e2 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -5,6 +5,32 @@ - **Field**: Added `Field.Item` component and `target` prop on `Field.Root` for multi-control fields (e.g., currency select + amount input). Use `Field.Item` with a `value` to scope controls, and `target` to specify which item the label should focus when clicked. +- **Listbox**: + - Added `keyboardPriority` to input props to control whether key handling prioritizes text editing or list navigation + for `Home`/`End` and horizontal arrows in grid collections + - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic + highlight navigation +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing + hardcoded accessibility labels +- **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags + +### Fixed + +- **Carousel**: + - Fixed controlled carousel inside dialog jumping or skipping pages + - Fixed navigation inside CSS-transformed containers (e.g., dialogs with open/close animations) + - Fixed scroll position drifting when container layout shifts (e.g., scrollbar removal) +- **Color Picker**: Fixed vertical slider orientation not preserved on pointer updates +- **Date Input**: Improved focus management +- **Floating Panel**: + - Fixed `open` taking precedence over `defaultOpen` during initialization + - Fixed `setPosition` and `setSize` to work independently of drag/resize state + - Fixed maximize/minimize restore reverting to `(0, 0)` in controlled mode + - Fixed Escape during drag/resize to cancel and revert to original position/size +- **Menu**: Fixed trigger to keep `aria-expanded="false"` when closed +- **Pin Input**: Fixed crash when typing the same character in a completed pin input on frameworks that use native + `input` event +- **Radio Group, Tabs**: Fixed indicator only animating on value change, not on initial render or resize ## [5.34.1] - 2026-03-03 diff --git a/packages/vue/package.json b/packages/vue/package.json index 9c263b0222..b7526b8de9 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -84,70 +84,70 @@ "sideEffects": false, "dependencies": { "@internationalized/date": "3.11.0", - "@zag-js/accordion": "1.35.3", - "@zag-js/anatomy": "1.35.3", - "@zag-js/angle-slider": "1.35.3", - "@zag-js/async-list": "1.35.3", - "@zag-js/auto-resize": "1.35.3", - "@zag-js/avatar": "1.35.3", - "@zag-js/carousel": "1.35.3", - "@zag-js/cascade-select": "1.35.3", - "@zag-js/checkbox": "1.35.3", - "@zag-js/clipboard": "1.35.3", - "@zag-js/collapsible": "1.35.3", - "@zag-js/collection": "1.35.3", - "@zag-js/color-picker": "1.35.3", - "@zag-js/color-utils": "1.35.3", - "@zag-js/combobox": "1.35.3", - "@zag-js/core": "1.35.3", - "@zag-js/date-picker": "1.35.3", - "@zag-js/date-utils": "1.35.3", - "@zag-js/dialog": "1.35.3", - "@zag-js/dom-query": "1.35.3", - "@zag-js/drawer": "1.35.3", - "@zag-js/editable": "1.35.3", - "@zag-js/file-upload": "1.35.3", - "@zag-js/file-utils": "1.35.3", - "@zag-js/floating-panel": "1.35.3", - "@zag-js/focus-trap": "1.35.3", - "@zag-js/highlight-word": "1.35.3", - "@zag-js/hover-card": "1.35.3", - "@zag-js/i18n-utils": "1.35.3", - "@zag-js/image-cropper": "1.35.3", - "@zag-js/json-tree-utils": "1.35.3", - "@zag-js/listbox": "1.35.3", - "@zag-js/marquee": "1.35.3", - "@zag-js/menu": "1.35.3", - "@zag-js/navigation-menu": "1.35.3", - "@zag-js/number-input": "1.35.3", - "@zag-js/pagination": "1.35.3", - "@zag-js/password-input": "1.35.3", - "@zag-js/pin-input": "1.35.3", - "@zag-js/popover": "1.35.3", - "@zag-js/presence": "1.35.3", - "@zag-js/progress": "1.35.3", - "@zag-js/qr-code": "1.35.3", - "@zag-js/radio-group": "1.35.3", - "@zag-js/rating-group": "1.35.3", - "@zag-js/scroll-area": "1.35.3", - "@zag-js/select": "1.35.3", - "@zag-js/signature-pad": "1.35.3", - "@zag-js/slider": "1.35.3", - "@zag-js/splitter": "1.35.3", - "@zag-js/steps": "1.35.3", - "@zag-js/switch": "1.35.3", - "@zag-js/tabs": "1.35.3", - "@zag-js/tags-input": "1.35.3", - "@zag-js/timer": "1.35.3", - "@zag-js/toast": "1.35.3", - "@zag-js/toggle": "1.35.3", - "@zag-js/toggle-group": "1.35.3", - "@zag-js/tooltip": "1.35.3", - "@zag-js/tour": "1.35.3", - "@zag-js/tree-view": "1.35.3", - "@zag-js/types": "1.35.3", - "@zag-js/utils": "1.35.3", - "@zag-js/vue": "1.35.3" + "@zag-js/accordion": "1.36.0", + "@zag-js/anatomy": "1.36.0", + "@zag-js/angle-slider": "1.36.0", + "@zag-js/async-list": "1.36.0", + "@zag-js/auto-resize": "1.36.0", + "@zag-js/avatar": "1.36.0", + "@zag-js/carousel": "1.36.0", + "@zag-js/cascade-select": "1.36.0", + "@zag-js/checkbox": "1.36.0", + "@zag-js/clipboard": "1.36.0", + "@zag-js/collapsible": "1.36.0", + "@zag-js/collection": "1.36.0", + "@zag-js/color-picker": "1.36.0", + "@zag-js/color-utils": "1.36.0", + "@zag-js/combobox": "1.36.0", + "@zag-js/core": "1.36.0", + "@zag-js/date-picker": "1.36.0", + "@zag-js/date-utils": "1.36.0", + "@zag-js/dialog": "1.36.0", + "@zag-js/dom-query": "1.36.0", + "@zag-js/drawer": "1.36.0", + "@zag-js/editable": "1.36.0", + "@zag-js/file-upload": "1.36.0", + "@zag-js/file-utils": "1.36.0", + "@zag-js/floating-panel": "1.36.0", + "@zag-js/focus-trap": "1.36.0", + "@zag-js/highlight-word": "1.36.0", + "@zag-js/hover-card": "1.36.0", + "@zag-js/i18n-utils": "1.36.0", + "@zag-js/image-cropper": "1.36.0", + "@zag-js/json-tree-utils": "1.36.0", + "@zag-js/listbox": "1.36.0", + "@zag-js/marquee": "1.36.0", + "@zag-js/menu": "1.36.0", + "@zag-js/navigation-menu": "1.36.0", + "@zag-js/number-input": "1.36.0", + "@zag-js/pagination": "1.36.0", + "@zag-js/password-input": "1.36.0", + "@zag-js/pin-input": "1.36.0", + "@zag-js/popover": "1.36.0", + "@zag-js/presence": "1.36.0", + "@zag-js/progress": "1.36.0", + "@zag-js/qr-code": "1.36.0", + "@zag-js/radio-group": "1.36.0", + "@zag-js/rating-group": "1.36.0", + "@zag-js/scroll-area": "1.36.0", + "@zag-js/select": "1.36.0", + "@zag-js/signature-pad": "1.36.0", + "@zag-js/slider": "1.36.0", + "@zag-js/splitter": "1.36.0", + "@zag-js/steps": "1.36.0", + "@zag-js/switch": "1.36.0", + "@zag-js/tabs": "1.36.0", + "@zag-js/tags-input": "1.36.0", + "@zag-js/timer": "1.36.0", + "@zag-js/toast": "1.36.0", + "@zag-js/toggle": "1.36.0", + "@zag-js/toggle-group": "1.36.0", + "@zag-js/tooltip": "1.36.0", + "@zag-js/tour": "1.36.0", + "@zag-js/tree-view": "1.36.0", + "@zag-js/types": "1.36.0", + "@zag-js/utils": "1.36.0", + "@zag-js/vue": "1.36.0" }, "devDependencies": { "@biomejs/biome": "2.4.4", diff --git a/packages/vue/src/components/clipboard/clipboard.types.ts b/packages/vue/src/components/clipboard/clipboard.types.ts index 4003f8e8d6..7baed94ed6 100644 --- a/packages/vue/src/components/clipboard/clipboard.types.ts +++ b/packages/vue/src/components/clipboard/clipboard.types.ts @@ -1,6 +1,10 @@ import type * as clipboard from '@zag-js/clipboard' export interface RootProps { + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: clipboard.IntlTranslations /** * The initial value to be copied to the clipboard when rendered. * Use when you don't need to control the value of the clipboard. diff --git a/packages/vue/src/components/listbox/listbox-input.vue b/packages/vue/src/components/listbox/listbox-input.vue index 8f62a0526a..0db9a03b8c 100644 --- a/packages/vue/src/components/listbox/listbox-input.vue +++ b/packages/vue/src/components/listbox/listbox-input.vue @@ -1,8 +1,9 @@ diff --git a/packages/vue/src/components/navigation-menu/navigation-menu.types.ts b/packages/vue/src/components/navigation-menu/navigation-menu.types.ts index a2b0ad249f..7da6f07ddf 100644 --- a/packages/vue/src/components/navigation-menu/navigation-menu.types.ts +++ b/packages/vue/src/components/navigation-menu/navigation-menu.types.ts @@ -48,6 +48,10 @@ export interface RootProps { * @default "horizontal" */ orientation?: 'horizontal' | 'vertical' + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: navigationMenu.IntlTranslations /** * The controlled value of the navigation menu */ diff --git a/packages/vue/src/components/popover/popover.types.ts b/packages/vue/src/components/popover/popover.types.ts index 2d1103b617..579ff5e017 100644 --- a/packages/vue/src/components/popover/popover.types.ts +++ b/packages/vue/src/components/popover/popover.types.ts @@ -75,6 +75,10 @@ export interface RootProps { * The user provided options used to position the popover content */ positioning?: popover.PositioningOptions + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: popover.IntlTranslations } export type RootEmits = { diff --git a/packages/vue/src/components/select/select.types.ts b/packages/vue/src/components/select/select.types.ts index da29374fc0..d59787a48b 100644 --- a/packages/vue/src/components/select/select.types.ts +++ b/packages/vue/src/components/select/select.types.ts @@ -113,6 +113,10 @@ export interface RootProps { * Function to scroll to a specific index */ scrollToIndexFn?: (details: select.ScrollToIndexDetails) => void + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: select.IntlTranslations } export type RootEmits = { diff --git a/packages/vue/src/components/tags-input/examples/allow-duplicates.vue b/packages/vue/src/components/tags-input/examples/allow-duplicates.vue new file mode 100644 index 0000000000..eb7f71dcec --- /dev/null +++ b/packages/vue/src/components/tags-input/examples/allow-duplicates.vue @@ -0,0 +1,35 @@ + + + diff --git a/packages/vue/src/components/tags-input/tags-input-root.vue b/packages/vue/src/components/tags-input/tags-input-root.vue index 4ab86694d8..beac03c105 100644 --- a/packages/vue/src/components/tags-input/tags-input-root.vue +++ b/packages/vue/src/components/tags-input/tags-input-root.vue @@ -23,6 +23,7 @@ import { useForwardExpose } from '../../utils/use-forward-expose' const props = withDefaults(defineProps(), { addOnPaste: undefined, + allowDuplicates: undefined, allowOverflow: undefined, autoFocus: undefined, disabled: undefined, diff --git a/packages/vue/src/components/tags-input/tags-input.stories.ts b/packages/vue/src/components/tags-input/tags-input.stories.ts index 2680e18a4c..c494ea1ad1 100644 --- a/packages/vue/src/components/tags-input/tags-input.stories.ts +++ b/packages/vue/src/components/tags-input/tags-input.stories.ts @@ -1,5 +1,6 @@ import type { Meta } from '@storybook/vue3-vite' +import AllowDuplicatesExample from './examples/allow-duplicates.vue' import BasicExample from './examples/basic.vue' import BlurBehaviorExample from './examples/blur-behavior.vue' import ControlledExample from './examples/controlled.vue' @@ -24,6 +25,13 @@ const meta: Meta = { export default meta +export const AllowDuplicates = { + render: () => ({ + components: { Component: AllowDuplicatesExample }, + template: '', + }), +} + export const Basic = { render: () => ({ components: { Component: BasicExample }, diff --git a/packages/vue/src/components/tags-input/tags-input.types.ts b/packages/vue/src/components/tags-input/tags-input.types.ts index e5bcbfcc2c..7da5058ed6 100644 --- a/packages/vue/src/components/tags-input/tags-input.types.ts +++ b/packages/vue/src/components/tags-input/tags-input.types.ts @@ -6,6 +6,11 @@ export interface RootProps { * @default false */ addOnPaste?: boolean + /** + * Whether to allow duplicate tags + * @default false + */ + allowDuplicates?: boolean /** * Whether to allow tags to exceed max. In this case, * we'll attach `data-invalid` to the root diff --git a/packages/vue/src/components/timer/timer.types.ts b/packages/vue/src/components/timer/timer.types.ts index 7b420f3fc2..13e4f9fe03 100644 --- a/packages/vue/src/components/timer/timer.types.ts +++ b/packages/vue/src/components/timer/timer.types.ts @@ -26,6 +26,10 @@ export interface RootProps { * The total duration of the timer in milliseconds. */ startMs?: number + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: timer.IntlTranslations /** * The minimum count of the timer in milliseconds. */ diff --git a/packages/vue/src/components/tree-view/tree-view.types.ts b/packages/vue/src/components/tree-view/tree-view.types.ts index 2f6231b82e..061345bf9e 100644 --- a/packages/vue/src/components/tree-view/tree-view.types.ts +++ b/packages/vue/src/components/tree-view/tree-view.types.ts @@ -63,6 +63,10 @@ export interface RootProps { * @default "single" */ selectionMode?: 'single' | 'multiple' + /** + * Specifies the localized strings that identifies the accessibility elements and their states + */ + translations?: treeView.IntlTranslations /** * Whether the tree supports typeahead search * @default true diff --git a/website/package.json b/website/package.json index 500712ddef..d603aab0b0 100644 --- a/website/package.json +++ b/website/package.json @@ -32,8 +32,8 @@ "@types/react": "19.2.14", "@types/react-dom": "19.2.3", "@uidotdev/usehooks": "2.4.1", - "@zag-js/anatomy-icons": "1.35.3", - "@zag-js/docs": "1.35.3", + "@zag-js/anatomy-icons": "1.36.0", + "@zag-js/docs": "1.36.0", "better-auth": "1.4.18", "effect": "3.19.19", "lucide-react": "0.575.0", From d76e085e0d0c0b0dc454d5a07b1ba8b3b2f3e855 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Thu, 12 Mar 2026 18:45:54 +0200 Subject: [PATCH 2/3] feat: add interaction hooks --- .storybook/modules/interaction.module.css | 85 +++++++++++++++++++ bun.lock | 4 + packages/react/.storybook/main.ts | 2 +- packages/react/CHANGELOG.md | 6 +- packages/react/package.json | 2 + packages/react/src/providers/index.ts | 1 + .../examples/focus-visible-text-input.tsx | 40 +++++++++ .../interaction/examples/focus-visible.tsx | 23 +++++ .../interaction/examples/interaction.tsx | 18 ++++ .../react/src/providers/interaction/index.ts | 2 + .../interaction/interaction.stories.tsx | 11 +++ .../interaction/use-focus-visible.ts | 28 ++++++ .../interaction/use-interaction-modality.ts | 20 +++++ packages/solid/CHANGELOG.md | 6 +- packages/solid/package.json | 2 + packages/solid/src/providers/index.tsx | 1 + .../examples/focus-visible-text-input.tsx | 40 +++++++++ .../interaction/examples/focus-visible.tsx | 23 +++++ .../interaction/examples/interaction.tsx | 18 ++++ .../solid/src/providers/interaction/index.ts | 2 + .../interaction/interaction.stories.tsx | 11 +++ .../interaction/use-focus-visible.ts | 26 ++++++ .../interaction/use-interaction-modality.ts | 20 +++++ packages/svelte/CHANGELOG.md | 6 +- packages/svelte/package.json | 6 ++ .../components/listbox/listbox-input.svelte | 4 +- packages/svelte/src/lib/providers/index.ts | 3 +- .../examples/focus-visible-text-input.svelte | 71 ++++++++++++++++ .../interaction/examples/focus-visible.svelte | 54 ++++++++++++ .../interaction/examples/interaction.svelte | 69 +++++++++++++++ .../src/lib/providers/interaction/index.ts | 2 + .../interaction/interaction.stories.ts | 28 ++++++ .../interaction/use-focus-visible.svelte.ts | 28 ++++++ .../use-interaction-modality.svelte.ts | 22 +++++ packages/vue/.storybook/main.ts | 2 +- packages/vue/CHANGELOG.md | 6 +- packages/vue/package.json | 2 + packages/vue/src/providers/index.ts | 1 + .../examples/focus-visible-text-input.vue | 36 ++++++++ .../interaction/examples/focus-visible.vue | 23 +++++ .../interaction/examples/interaction.vue | 16 ++++ .../vue/src/providers/interaction/index.ts | 2 + .../interaction/interaction.stories.vue | 19 +++++ .../interaction/use-focus-visible.ts | 26 ++++++ .../interaction/use-interaction-modality.ts | 20 +++++ 45 files changed, 825 insertions(+), 12 deletions(-) create mode 100644 .storybook/modules/interaction.module.css create mode 100644 packages/react/src/providers/interaction/examples/focus-visible-text-input.tsx create mode 100644 packages/react/src/providers/interaction/examples/focus-visible.tsx create mode 100644 packages/react/src/providers/interaction/examples/interaction.tsx create mode 100644 packages/react/src/providers/interaction/index.ts create mode 100644 packages/react/src/providers/interaction/interaction.stories.tsx create mode 100644 packages/react/src/providers/interaction/use-focus-visible.ts create mode 100644 packages/react/src/providers/interaction/use-interaction-modality.ts create mode 100644 packages/solid/src/providers/interaction/examples/focus-visible-text-input.tsx create mode 100644 packages/solid/src/providers/interaction/examples/focus-visible.tsx create mode 100644 packages/solid/src/providers/interaction/examples/interaction.tsx create mode 100644 packages/solid/src/providers/interaction/index.ts create mode 100644 packages/solid/src/providers/interaction/interaction.stories.tsx create mode 100644 packages/solid/src/providers/interaction/use-focus-visible.ts create mode 100644 packages/solid/src/providers/interaction/use-interaction-modality.ts create mode 100644 packages/svelte/src/lib/providers/interaction/examples/focus-visible-text-input.svelte create mode 100644 packages/svelte/src/lib/providers/interaction/examples/focus-visible.svelte create mode 100644 packages/svelte/src/lib/providers/interaction/examples/interaction.svelte create mode 100644 packages/svelte/src/lib/providers/interaction/index.ts create mode 100644 packages/svelte/src/lib/providers/interaction/interaction.stories.ts create mode 100644 packages/svelte/src/lib/providers/interaction/use-focus-visible.svelte.ts create mode 100644 packages/svelte/src/lib/providers/interaction/use-interaction-modality.svelte.ts create mode 100644 packages/vue/src/providers/interaction/examples/focus-visible-text-input.vue create mode 100644 packages/vue/src/providers/interaction/examples/focus-visible.vue create mode 100644 packages/vue/src/providers/interaction/examples/interaction.vue create mode 100644 packages/vue/src/providers/interaction/index.ts create mode 100644 packages/vue/src/providers/interaction/interaction.stories.vue create mode 100644 packages/vue/src/providers/interaction/use-focus-visible.ts create mode 100644 packages/vue/src/providers/interaction/use-interaction-modality.ts diff --git a/.storybook/modules/interaction.module.css b/.storybook/modules/interaction.module.css new file mode 100644 index 0000000000..7e8b85085a --- /dev/null +++ b/.storybook/modules/interaction.module.css @@ -0,0 +1,85 @@ +.Container { + display: flex; + flex-direction: column; + gap: 12px; + padding: 16px; + font-family: system-ui, sans-serif; +} + +.Badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 12px; + border-radius: 9999px; + font-size: 14px; + font-weight: 500; + background: #f0f0f0; + color: #333; + width: fit-content; + + &[data-modality='keyboard'] { + background: #dbeafe; + color: #1d4ed8; + } + + &[data-modality='pointer'] { + background: #dcfce7; + color: #15803d; + } + + &[data-modality='virtual'] { + background: #fef3c7; + color: #b45309; + } +} + +.Hint, +.Status { + font-size: 14px; + color: #666; +} + +.Button { + padding: 8px 16px; + border: 1px solid #d1d5db; + border-radius: 6px; + background: white; + cursor: pointer; + font-size: 14px; + width: fit-content; + outline: none; + + &:hover { + background: #f9fafb; + } + + &[data-focus-visible] { + outline: 2px solid #3b82f6; + outline-offset: 2px; + } +} + +.Field { + display: flex; + flex-direction: column; + gap: 4px; +} + +.Label { + font-size: 14px; + font-weight: 500; +} + +.Input { + padding: 6px 10px; + border: 1px solid #d1d5db; + border-radius: 6px; + font-size: 14px; + outline: none; + + &[data-focus-visible] { + outline: 2px solid #3b82f6; + outline-offset: 2px; + } +} diff --git a/bun.lock b/bun.lock index b65e088a32..63b36b84b9 100644 --- a/bun.lock +++ b/bun.lock @@ -71,6 +71,7 @@ "@zag-js/file-utils": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/highlight-word": "1.36.0", "@zag-js/hover-card": "1.36.0", "@zag-js/i18n-utils": "1.36.0", @@ -180,6 +181,7 @@ "@zag-js/file-utils": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/highlight-word": "1.36.0", "@zag-js/hover-card": "1.36.0", "@zag-js/i18n-utils": "1.36.0", @@ -285,6 +287,7 @@ "@zag-js/file-utils": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/highlight-word": "1.36.0", "@zag-js/hover-card": "1.36.0", "@zag-js/i18n-utils": "1.36.0", @@ -388,6 +391,7 @@ "@zag-js/file-utils": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/highlight-word": "1.36.0", "@zag-js/hover-card": "1.36.0", "@zag-js/i18n-utils": "1.36.0", diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts index 4f64d4e363..df10728435 100644 --- a/packages/react/.storybook/main.ts +++ b/packages/react/.storybook/main.ts @@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/react-vite' const __dirname = dirname(fileURLToPath(import.meta.url)) const config: StorybookConfig = { - stories: ['../src/components/**/*.stories.tsx'], + stories: ['../src/components/**/*.stories.tsx', '../src/providers/**/*.stories.tsx'], addons: ['@storybook/addon-a11y'], framework: { name: '@storybook/react-vite', diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d6e09972c2..b7a17eaeb0 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -10,9 +10,11 @@ for `Home`/`End` and horizontal arrows in grid collections - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic highlight navigation -- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing - hardcoded accessibility labels +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing hardcoded + accessibility labels - **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags +- **Interaction**: Added `useInteractionModality` and `useFocusVisible` hooks for tracking user input method (keyboard, + pointer, virtual) and conditionally showing focus rings. Import from `@ark-ui/react/interaction`. ### Fixed diff --git a/packages/react/package.json b/packages/react/package.json index 5331b7eae3..5399daf295 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -63,6 +63,7 @@ "./anatomy": "./src/components/anatomy.ts", "./environment": "./src/providers/environment/index.ts", "./factory": "./src/components/factory.ts", + "./interaction": "./src/providers/interaction/index.ts", "./locale": "./src/providers/locale/index.ts", "./*": "./src/components/*/index.ts" }, @@ -108,6 +109,7 @@ "@zag-js/drawer": "1.36.0", "@zag-js/editable": "1.36.0", "@zag-js/file-upload": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/file-utils": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", diff --git a/packages/react/src/providers/index.ts b/packages/react/src/providers/index.ts index 3410ef26cc..731ade1980 100644 --- a/packages/react/src/providers/index.ts +++ b/packages/react/src/providers/index.ts @@ -1,2 +1,3 @@ export * from './environment' +export * from './interaction' export * from './locale' diff --git a/packages/react/src/providers/interaction/examples/focus-visible-text-input.tsx b/packages/react/src/providers/interaction/examples/focus-visible-text-input.tsx new file mode 100644 index 0000000000..da3056cb66 --- /dev/null +++ b/packages/react/src/providers/interaction/examples/focus-visible-text-input.tsx @@ -0,0 +1,40 @@ +import { useFocusVisible } from '@ark-ui/react/interaction' +import { useState } from 'react' +import styles from 'styles/interaction.module.css' + +export const FocusVisibleTextInput = () => { + const isFocusVisible = useFocusVisible({ isTextInput: true }) + const [focusedField, setFocusedField] = useState(null) + + return ( +
+

Focus visible: {String(isFocusVisible)}

+
+ + setFocusedField('first')} + onBlur={() => setFocusedField(null)} + /> +
+
+ + setFocusedField('last')} + onBlur={() => setFocusedField(null)} + /> +
+
+ ) +} diff --git a/packages/react/src/providers/interaction/examples/focus-visible.tsx b/packages/react/src/providers/interaction/examples/focus-visible.tsx new file mode 100644 index 0000000000..9077a1a513 --- /dev/null +++ b/packages/react/src/providers/interaction/examples/focus-visible.tsx @@ -0,0 +1,23 @@ +import { useFocusVisible } from '@ark-ui/react/interaction' +import { useState } from 'react' +import styles from 'styles/interaction.module.css' + +export const FocusVisible = () => { + const isFocusVisible = useFocusVisible() + const [focused, setFocused] = useState(false) + + return ( +
+

Focus visible: {String(isFocusVisible)}

+ +
+ ) +} diff --git a/packages/react/src/providers/interaction/examples/interaction.tsx b/packages/react/src/providers/interaction/examples/interaction.tsx new file mode 100644 index 0000000000..0c0cb0c9cc --- /dev/null +++ b/packages/react/src/providers/interaction/examples/interaction.tsx @@ -0,0 +1,18 @@ +import { useInteractionModality } from '@ark-ui/react/interaction' +import styles from 'styles/interaction.module.css' + +export const InteractionModality = () => { + const modality = useInteractionModality() + + return ( +
+ + {modality ?? 'none'} + +

Try clicking, pressing a key, or using a screen reader.

+ +
+ ) +} diff --git a/packages/react/src/providers/interaction/index.ts b/packages/react/src/providers/interaction/index.ts new file mode 100644 index 0000000000..f973d14957 --- /dev/null +++ b/packages/react/src/providers/interaction/index.ts @@ -0,0 +1,2 @@ +export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible' +export { useInteractionModality, type Modality } from './use-interaction-modality' diff --git a/packages/react/src/providers/interaction/interaction.stories.tsx b/packages/react/src/providers/interaction/interaction.stories.tsx new file mode 100644 index 0000000000..6d63cd2af0 --- /dev/null +++ b/packages/react/src/providers/interaction/interaction.stories.tsx @@ -0,0 +1,11 @@ +import type { Meta } from '@storybook/react-vite' + +const meta: Meta = { + title: 'Utilities / Interaction', +} + +export default meta + +export { InteractionModality } from './examples/interaction' +export { FocusVisible } from './examples/focus-visible' +export { FocusVisibleTextInput } from './examples/focus-visible-text-input' diff --git a/packages/react/src/providers/interaction/use-focus-visible.ts b/packages/react/src/providers/interaction/use-focus-visible.ts new file mode 100644 index 0000000000..1df0ef8c21 --- /dev/null +++ b/packages/react/src/providers/interaction/use-focus-visible.ts @@ -0,0 +1,28 @@ +import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible' +import { useCallback, useSyncExternalStore } from 'react' +import { useEnvironmentContext } from '../environment' + +export interface UseFocusVisibleProps { + isTextInput?: boolean + autoFocus?: boolean +} + +export function useFocusVisible(props: UseFocusVisibleProps = {}): boolean { + const { isTextInput, autoFocus } = props + const { getRootNode } = useEnvironmentContext() + + const subscribe = useCallback( + (onStoreChange: () => void) => + trackFocusVisible({ + root: getRootNode(), + isTextInput, + autoFocus, + onChange: onStoreChange, + }), + [getRootNode, isTextInput, autoFocus], + ) + + const getSnapshot = useCallback(() => autoFocus || isFocusVisible(), [autoFocus]) + + return useSyncExternalStore(subscribe, getSnapshot, () => false) +} diff --git a/packages/react/src/providers/interaction/use-interaction-modality.ts b/packages/react/src/providers/interaction/use-interaction-modality.ts new file mode 100644 index 0000000000..2de2dd7c1d --- /dev/null +++ b/packages/react/src/providers/interaction/use-interaction-modality.ts @@ -0,0 +1,20 @@ +import { getInteractionModality, trackInteractionModality, type Modality } from '@zag-js/focus-visible' +import { useCallback, useSyncExternalStore } from 'react' +import { useEnvironmentContext } from '../environment' + +export type { Modality } + +export function useInteractionModality(): Modality | null { + const { getRootNode } = useEnvironmentContext() + + const subscribe = useCallback( + (onStoreChange: () => void) => + trackInteractionModality({ + root: getRootNode(), + onChange: onStoreChange, + }), + [getRootNode], + ) + + return useSyncExternalStore(subscribe, getInteractionModality, () => null) +} diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md index 56278935c3..d186593c95 100644 --- a/packages/solid/CHANGELOG.md +++ b/packages/solid/CHANGELOG.md @@ -10,9 +10,11 @@ for `Home`/`End` and horizontal arrows in grid collections - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic highlight navigation -- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing - hardcoded accessibility labels +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing hardcoded + accessibility labels - **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags +- **Interaction**: Added `useInteractionModality` and `useFocusVisible` hooks for tracking user input method (keyboard, + pointer, virtual) and conditionally showing focus rings. Import from `@ark-ui/solid/interaction`. ### Fixed diff --git a/packages/solid/package.json b/packages/solid/package.json index 61c1fa7726..38bde4ccd2 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -62,6 +62,7 @@ "./anatomy": "./src/components/anatomy.ts", "./environment": "./src/providers/environment/index.tsx", "./factory": "./src/components/factory.tsx", + "./interaction": "./src/providers/interaction/index.ts", "./locale": "./src/providers/locale/index.tsx", "./*": "./src/components/*/index.tsx" }, @@ -108,6 +109,7 @@ "@zag-js/editable": "1.36.0", "@zag-js/file-upload": "1.36.0", "@zag-js/file-utils": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/highlight-word": "1.36.0", diff --git a/packages/solid/src/providers/index.tsx b/packages/solid/src/providers/index.tsx index 3410ef26cc..731ade1980 100644 --- a/packages/solid/src/providers/index.tsx +++ b/packages/solid/src/providers/index.tsx @@ -1,2 +1,3 @@ export * from './environment' +export * from './interaction' export * from './locale' diff --git a/packages/solid/src/providers/interaction/examples/focus-visible-text-input.tsx b/packages/solid/src/providers/interaction/examples/focus-visible-text-input.tsx new file mode 100644 index 0000000000..5734ad4bfc --- /dev/null +++ b/packages/solid/src/providers/interaction/examples/focus-visible-text-input.tsx @@ -0,0 +1,40 @@ +import { useFocusVisible } from '@ark-ui/solid/interaction' +import { createSignal } from 'solid-js' +import styles from 'styles/interaction.module.css' + +export const FocusVisibleTextInput = () => { + const isFocusVisible = useFocusVisible({ isTextInput: true }) + const [focusedField, setFocusedField] = createSignal(null) + + return ( +
+

Focus visible: {String(isFocusVisible())}

+
+ + setFocusedField('first')} + onBlur={() => setFocusedField(null)} + /> +
+
+ + setFocusedField('last')} + onBlur={() => setFocusedField(null)} + /> +
+
+ ) +} diff --git a/packages/solid/src/providers/interaction/examples/focus-visible.tsx b/packages/solid/src/providers/interaction/examples/focus-visible.tsx new file mode 100644 index 0000000000..cbf23ef21c --- /dev/null +++ b/packages/solid/src/providers/interaction/examples/focus-visible.tsx @@ -0,0 +1,23 @@ +import { useFocusVisible } from '@ark-ui/solid/interaction' +import { createSignal } from 'solid-js' +import styles from 'styles/interaction.module.css' + +export const FocusVisible = () => { + const isFocusVisible = useFocusVisible() + const [focused, setFocused] = createSignal(false) + + return ( +
+

Focus visible: {String(isFocusVisible())}

+ +
+ ) +} diff --git a/packages/solid/src/providers/interaction/examples/interaction.tsx b/packages/solid/src/providers/interaction/examples/interaction.tsx new file mode 100644 index 0000000000..8823503205 --- /dev/null +++ b/packages/solid/src/providers/interaction/examples/interaction.tsx @@ -0,0 +1,18 @@ +import { useInteractionModality } from '@ark-ui/solid/interaction' +import styles from 'styles/interaction.module.css' + +export const InteractionModality = () => { + const modality = useInteractionModality() + + return ( +
+ + {modality() ?? 'none'} + +

Try clicking, pressing a key, or using a screen reader.

+ +
+ ) +} diff --git a/packages/solid/src/providers/interaction/index.ts b/packages/solid/src/providers/interaction/index.ts new file mode 100644 index 0000000000..f973d14957 --- /dev/null +++ b/packages/solid/src/providers/interaction/index.ts @@ -0,0 +1,2 @@ +export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible' +export { useInteractionModality, type Modality } from './use-interaction-modality' diff --git a/packages/solid/src/providers/interaction/interaction.stories.tsx b/packages/solid/src/providers/interaction/interaction.stories.tsx new file mode 100644 index 0000000000..0a59fe4c7a --- /dev/null +++ b/packages/solid/src/providers/interaction/interaction.stories.tsx @@ -0,0 +1,11 @@ +import type { Meta } from 'storybook-solidjs-vite' + +const meta: Meta = { + title: 'Utilities / Interaction', +} + +export default meta + +export { InteractionModality } from './examples/interaction' +export { FocusVisible } from './examples/focus-visible' +export { FocusVisibleTextInput } from './examples/focus-visible-text-input' diff --git a/packages/solid/src/providers/interaction/use-focus-visible.ts b/packages/solid/src/providers/interaction/use-focus-visible.ts new file mode 100644 index 0000000000..647d926dbd --- /dev/null +++ b/packages/solid/src/providers/interaction/use-focus-visible.ts @@ -0,0 +1,26 @@ +import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible' +import { useSyncExternalStore } from '@zag-js/solid' +import type { Accessor } from 'solid-js' +import { useEnvironmentContext } from '../environment' + +export interface UseFocusVisibleProps { + isTextInput?: boolean + autoFocus?: boolean +} + +export function useFocusVisible(props: UseFocusVisibleProps = {}): Accessor { + const { isTextInput, autoFocus } = props + const environment = useEnvironmentContext() + + return useSyncExternalStore( + (listener) => + trackFocusVisible({ + root: environment().getRootNode(), + isTextInput, + autoFocus, + onChange: listener, + }), + () => autoFocus || isFocusVisible(), + () => false, + ) +} diff --git a/packages/solid/src/providers/interaction/use-interaction-modality.ts b/packages/solid/src/providers/interaction/use-interaction-modality.ts new file mode 100644 index 0000000000..3f5d429f47 --- /dev/null +++ b/packages/solid/src/providers/interaction/use-interaction-modality.ts @@ -0,0 +1,20 @@ +import { getInteractionModality, trackInteractionModality, type Modality } from '@zag-js/focus-visible' +import { useSyncExternalStore } from '@zag-js/solid' +import type { Accessor } from 'solid-js' +import { useEnvironmentContext } from '../environment' + +export type { Modality } + +export function useInteractionModality(): Accessor { + const environment = useEnvironmentContext() + + return useSyncExternalStore( + (listener) => + trackInteractionModality({ + root: environment().getRootNode(), + onChange: listener, + }), + getInteractionModality, + () => null, + ) +} diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index f6f0aedcf6..527333602f 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -16,9 +16,11 @@ description: All notable changes will be documented in this file. for `Home`/`End` and horizontal arrows in grid collections - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic highlight navigation -- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing - hardcoded accessibility labels +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing hardcoded + accessibility labels - **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags +- **Interaction**: Added `useInteractionModality` and `useFocusVisible` hooks for tracking user input method (keyboard, + pointer, virtual) and conditionally showing focus rings. Import from `@ark-ui/svelte/interaction`. ### Fixed diff --git a/packages/svelte/package.json b/packages/svelte/package.json index e0a920d047..7b45d8b168 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -79,6 +79,11 @@ "svelte": "./src/lib/providers/environment/index.ts", "default": "./src/lib/providers/environment/index.ts" }, + "./interaction": { + "types": "./src/lib/providers/interaction/index.ts", + "svelte": "./src/lib/providers/interaction/index.ts", + "default": "./src/lib/providers/interaction/index.ts" + }, "./locale": { "types": "./src/lib/providers/locale/index.ts", "svelte": "./src/lib/providers/locale/index.ts", @@ -161,6 +166,7 @@ "@zag-js/editable": "1.36.0", "@zag-js/file-upload": "1.36.0", "@zag-js/file-utils": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/highlight-word": "1.36.0", diff --git a/packages/svelte/src/lib/components/listbox/listbox-input.svelte b/packages/svelte/src/lib/components/listbox/listbox-input.svelte index 5c9aabdb97..e5cd1b4615 100644 --- a/packages/svelte/src/lib/components/listbox/listbox-input.svelte +++ b/packages/svelte/src/lib/components/listbox/listbox-input.svelte @@ -14,7 +14,9 @@ let { ref = $bindable(null), ...props }: ListboxInputProps = $props() - const [inputProps, localProps] = $derived(createSplitProps()(props, ['autoHighlight', 'keyboardPriority'])) + const [inputProps, localProps] = $derived( + createSplitProps()(props, ['autoHighlight', 'keyboardPriority']), + ) const listbox = useListboxContext() const mergedProps = $derived(mergeProps(listbox().getInputProps(inputProps), localProps)) diff --git a/packages/svelte/src/lib/providers/index.ts b/packages/svelte/src/lib/providers/index.ts index f412323ced..731ade1980 100644 --- a/packages/svelte/src/lib/providers/index.ts +++ b/packages/svelte/src/lib/providers/index.ts @@ -1,2 +1,3 @@ -export * from './locale' export * from './environment' +export * from './interaction' +export * from './locale' diff --git a/packages/svelte/src/lib/providers/interaction/examples/focus-visible-text-input.svelte b/packages/svelte/src/lib/providers/interaction/examples/focus-visible-text-input.svelte new file mode 100644 index 0000000000..8da9d768fc --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/examples/focus-visible-text-input.svelte @@ -0,0 +1,71 @@ + + +
+

Focus visible: {String(isFocusVisible())}

+
+ + (focusedField = 'first')} + onblur={() => (focusedField = null)} + /> +
+
+ + (focusedField = 'last')} + onblur={() => (focusedField = null)} + /> +
+
+ + diff --git a/packages/svelte/src/lib/providers/interaction/examples/focus-visible.svelte b/packages/svelte/src/lib/providers/interaction/examples/focus-visible.svelte new file mode 100644 index 0000000000..16b587fa79 --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/examples/focus-visible.svelte @@ -0,0 +1,54 @@ + + +
+

Focus visible: {String(isFocusVisible())}

+ +
+ + diff --git a/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte b/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte new file mode 100644 index 0000000000..e4b3e396be --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte @@ -0,0 +1,69 @@ + + +
+ + {modality() ?? 'none'} + +

Try clicking, pressing a key, or using a screen reader.

+ +
+ + diff --git a/packages/svelte/src/lib/providers/interaction/index.ts b/packages/svelte/src/lib/providers/interaction/index.ts new file mode 100644 index 0000000000..e6ac39d0a8 --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/index.ts @@ -0,0 +1,2 @@ +export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible.svelte' +export { useInteractionModality, type Modality } from './use-interaction-modality.svelte' diff --git a/packages/svelte/src/lib/providers/interaction/interaction.stories.ts b/packages/svelte/src/lib/providers/interaction/interaction.stories.ts new file mode 100644 index 0000000000..63e3bd0c0f --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/interaction.stories.ts @@ -0,0 +1,28 @@ +import type { Meta } from '@storybook/svelte' +import InteractionModalityExample from './examples/interaction.svelte' +import FocusVisibleExample from './examples/focus-visible.svelte' +import FocusVisibleTextInputExample from './examples/focus-visible-text-input.svelte' + +const meta = { + title: 'Utilities / Interaction', +} as Meta + +export default meta + +export const InteractionModality = { + render: () => ({ + Component: InteractionModalityExample, + }), +} + +export const FocusVisible = { + render: () => ({ + Component: FocusVisibleExample, + }), +} + +export const FocusVisibleTextInput = { + render: () => ({ + Component: FocusVisibleTextInputExample, + }), +} diff --git a/packages/svelte/src/lib/providers/interaction/use-focus-visible.svelte.ts b/packages/svelte/src/lib/providers/interaction/use-focus-visible.svelte.ts new file mode 100644 index 0000000000..9a5177c910 --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/use-focus-visible.svelte.ts @@ -0,0 +1,28 @@ +import type { Accessor } from '$lib/types' +import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible' +import { useEnvironmentContext } from '../environment' + +export interface UseFocusVisibleProps { + isTextInput?: boolean + autoFocus?: boolean +} + +export function useFocusVisible(props: UseFocusVisibleProps = {}): Accessor { + const { isTextInput, autoFocus } = props + const env = useEnvironmentContext() + + let focusVisible = $state(autoFocus || isFocusVisible()) + + $effect(() => { + return trackFocusVisible({ + root: env().getRootNode(), + isTextInput, + autoFocus, + onChange(details) { + focusVisible = details.isFocusVisible + }, + }) + }) + + return () => focusVisible +} diff --git a/packages/svelte/src/lib/providers/interaction/use-interaction-modality.svelte.ts b/packages/svelte/src/lib/providers/interaction/use-interaction-modality.svelte.ts new file mode 100644 index 0000000000..15deada86f --- /dev/null +++ b/packages/svelte/src/lib/providers/interaction/use-interaction-modality.svelte.ts @@ -0,0 +1,22 @@ +import type { Accessor } from '$lib/types' +import { getInteractionModality, trackInteractionModality, type Modality } from '@zag-js/focus-visible' +import { useEnvironmentContext } from '../environment' + +export type { Modality } + +export function useInteractionModality(): Accessor { + const env = useEnvironmentContext() + + let modality = $state(getInteractionModality()) + + $effect(() => { + return trackInteractionModality({ + root: env().getRootNode(), + onChange(details) { + modality = details.modality + }, + }) + }) + + return () => modality +} diff --git a/packages/vue/.storybook/main.ts b/packages/vue/.storybook/main.ts index 53452b3991..dff5f7509e 100644 --- a/packages/vue/.storybook/main.ts +++ b/packages/vue/.storybook/main.ts @@ -11,7 +11,7 @@ const config: StorybookConfig = { docgen: false, }, }, - stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx|vue)'], addons: ['@storybook/addon-a11y'], viteFinal(config) { config.resolve ??= {} diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 8e87c1c2e2..70f18189ef 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -10,9 +10,11 @@ for `Home`/`End` and horizontal arrows in grid collections - Added `highlightFirst`, `highlightLast`, `highlightNext`, and `highlightPrevious` to the API for programmatic highlight navigation -- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing - hardcoded accessibility labels +- **Clipboard, Navigation Menu, Popover, Select, Timer, Tree View**: Added `translations` prop for localizing hardcoded + accessibility labels - **Tags Input**: Added `allowDuplicates` prop to allow duplicate tags +- **Interaction**: Added `useInteractionModality` and `useFocusVisible` hooks for tracking user input method (keyboard, + pointer, virtual) and conditionally showing focus rings. Import from `@ark-ui/vue/interaction`. ### Fixed diff --git a/packages/vue/package.json b/packages/vue/package.json index b7526b8de9..6e7f75cfca 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -62,6 +62,7 @@ "./anatomy": "./src/components/anatomy.ts", "./environment": "./src/providers/environment/index.ts", "./factory": "./src/components/factory.ts", + "./interaction": "./src/providers/interaction/index.ts", "./locale": "./src/providers/locale/index.ts", "./*": "./src/components/*/index.ts" }, @@ -108,6 +109,7 @@ "@zag-js/editable": "1.36.0", "@zag-js/file-upload": "1.36.0", "@zag-js/file-utils": "1.36.0", + "@zag-js/focus-visible": "1.36.0", "@zag-js/floating-panel": "1.36.0", "@zag-js/focus-trap": "1.36.0", "@zag-js/highlight-word": "1.36.0", diff --git a/packages/vue/src/providers/index.ts b/packages/vue/src/providers/index.ts index 3410ef26cc..731ade1980 100644 --- a/packages/vue/src/providers/index.ts +++ b/packages/vue/src/providers/index.ts @@ -1,2 +1,3 @@ export * from './environment' +export * from './interaction' export * from './locale' diff --git a/packages/vue/src/providers/interaction/examples/focus-visible-text-input.vue b/packages/vue/src/providers/interaction/examples/focus-visible-text-input.vue new file mode 100644 index 0000000000..1248077fad --- /dev/null +++ b/packages/vue/src/providers/interaction/examples/focus-visible-text-input.vue @@ -0,0 +1,36 @@ + + + diff --git a/packages/vue/src/providers/interaction/examples/focus-visible.vue b/packages/vue/src/providers/interaction/examples/focus-visible.vue new file mode 100644 index 0000000000..8129cd9888 --- /dev/null +++ b/packages/vue/src/providers/interaction/examples/focus-visible.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/vue/src/providers/interaction/examples/interaction.vue b/packages/vue/src/providers/interaction/examples/interaction.vue new file mode 100644 index 0000000000..a598e2af34 --- /dev/null +++ b/packages/vue/src/providers/interaction/examples/interaction.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/vue/src/providers/interaction/index.ts b/packages/vue/src/providers/interaction/index.ts new file mode 100644 index 0000000000..f973d14957 --- /dev/null +++ b/packages/vue/src/providers/interaction/index.ts @@ -0,0 +1,2 @@ +export { useFocusVisible, type UseFocusVisibleProps } from './use-focus-visible' +export { useInteractionModality, type Modality } from './use-interaction-modality' diff --git a/packages/vue/src/providers/interaction/interaction.stories.vue b/packages/vue/src/providers/interaction/interaction.stories.vue new file mode 100644 index 0000000000..c1f7e0f70b --- /dev/null +++ b/packages/vue/src/providers/interaction/interaction.stories.vue @@ -0,0 +1,19 @@ + + + diff --git a/packages/vue/src/providers/interaction/use-focus-visible.ts b/packages/vue/src/providers/interaction/use-focus-visible.ts new file mode 100644 index 0000000000..6c2163d366 --- /dev/null +++ b/packages/vue/src/providers/interaction/use-focus-visible.ts @@ -0,0 +1,26 @@ +import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible' +import { useSyncExternalStore } from '@zag-js/vue' +import type { ShallowRef } from 'vue' +import { DEFAULT_ENVIRONMENT, useEnvironmentContext } from '../environment' + +export interface UseFocusVisibleProps { + isTextInput?: boolean + autoFocus?: boolean +} + +export function useFocusVisible(props: UseFocusVisibleProps = {}): Readonly> { + const { isTextInput, autoFocus } = props + const env = useEnvironmentContext(DEFAULT_ENVIRONMENT) + + return useSyncExternalStore( + (listener) => + trackFocusVisible({ + root: env.value.getRootNode(), + isTextInput, + autoFocus, + onChange: listener, + }), + () => autoFocus || isFocusVisible(), + () => false, + ) +} diff --git a/packages/vue/src/providers/interaction/use-interaction-modality.ts b/packages/vue/src/providers/interaction/use-interaction-modality.ts new file mode 100644 index 0000000000..a36587f94b --- /dev/null +++ b/packages/vue/src/providers/interaction/use-interaction-modality.ts @@ -0,0 +1,20 @@ +import { getInteractionModality, trackInteractionModality, type Modality } from '@zag-js/focus-visible' +import { useSyncExternalStore } from '@zag-js/vue' +import type { DeepReadonly, ShallowRef } from 'vue' +import { DEFAULT_ENVIRONMENT, useEnvironmentContext } from '../environment' + +export type { Modality } + +export function useInteractionModality(): DeepReadonly> { + const env = useEnvironmentContext(DEFAULT_ENVIRONMENT) + + return useSyncExternalStore( + (listener) => + trackInteractionModality({ + root: env.value.getRootNode(), + onChange: listener, + }), + getInteractionModality, + () => null, + ) +} From b6ed82366baeab8b656790b59debbc5286545a05 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Thu, 12 Mar 2026 18:50:58 +0200 Subject: [PATCH 3/3] refactor: interaction --- .../providers/interaction/examples/interaction.tsx | 2 +- .../interaction/use-interaction-modality.ts | 14 ++++---------- .../providers/interaction/examples/interaction.tsx | 2 +- .../interaction/examples/interaction.svelte | 4 +++- .../providers/interaction/examples/interaction.vue | 4 +++- 5 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/react/src/providers/interaction/examples/interaction.tsx b/packages/react/src/providers/interaction/examples/interaction.tsx index 0c0cb0c9cc..b74f761d35 100644 --- a/packages/react/src/providers/interaction/examples/interaction.tsx +++ b/packages/react/src/providers/interaction/examples/interaction.tsx @@ -10,7 +10,7 @@ export const InteractionModality = () => { {modality ?? 'none'}

Try clicking, pressing a key, or using a screen reader.

- diff --git a/packages/react/src/providers/interaction/use-interaction-modality.ts b/packages/react/src/providers/interaction/use-interaction-modality.ts index 2de2dd7c1d..b1ff11d2ac 100644 --- a/packages/react/src/providers/interaction/use-interaction-modality.ts +++ b/packages/react/src/providers/interaction/use-interaction-modality.ts @@ -6,15 +6,9 @@ export type { Modality } export function useInteractionModality(): Modality | null { const { getRootNode } = useEnvironmentContext() - - const subscribe = useCallback( - (onStoreChange: () => void) => - trackInteractionModality({ - root: getRootNode(), - onChange: onStoreChange, - }), - [getRootNode], + return useSyncExternalStore( + useCallback((onChange) => trackInteractionModality({ root: getRootNode(), onChange }), [getRootNode]), + getInteractionModality, + () => null, ) - - return useSyncExternalStore(subscribe, getInteractionModality, () => null) } diff --git a/packages/solid/src/providers/interaction/examples/interaction.tsx b/packages/solid/src/providers/interaction/examples/interaction.tsx index 8823503205..251d40bd63 100644 --- a/packages/solid/src/providers/interaction/examples/interaction.tsx +++ b/packages/solid/src/providers/interaction/examples/interaction.tsx @@ -10,7 +10,7 @@ export const InteractionModality = () => { {modality() ?? 'none'}

Try clicking, pressing a key, or using a screen reader.

- diff --git a/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte b/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte index e4b3e396be..e4d8081ccc 100644 --- a/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte +++ b/packages/svelte/src/lib/providers/interaction/examples/interaction.svelte @@ -9,7 +9,9 @@ {modality() ?? 'none'}

Try clicking, pressing a key, or using a screen reader.

- +