@ark-ui/vue 5.29.1 → 5.30.0

package/dist/components/radio-group/radio-group-root.vue.d.ts

@@ -19,7 +19,9 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<RadioGroupRootP
     onValueChange?: ((details: ValueChangeDetails) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
+    invalid: boolean;
     disabled: boolean;
+    required: boolean;
     readOnly: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;

package/dist/components/radio-group/radio-group-root.vue.js

@@ -12,14 +12,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     form: {},
     id: {},
     ids: {},
+    invalid: { type: Boolean },
     modelValue: {},
     name: {},
     orientation: {},
     readOnly: { type: Boolean },
+    required: { type: Boolean },
     asChild: { type: Boolean }
   }, {
     disabled: void 0,
-    readOnly: void 0
+    invalid: void 0,
+    readOnly: void 0,
+    required: void 0
   }),
   emits: ["valueChange", "update:modelValue"],
   setup(__props, { emit: __emit }) {

package/dist/components/radio-group/radio-group.types.d.cts

@@ -29,6 +29,10 @@ export interface RootProps {
         itemControl(value: string): string;
         itemHiddenInput(value: string): string;
     }>;
+    /**
+     * Whether the radio group is invalid
+     */
+    invalid?: boolean;
     /**
      * The v-model value of the radio group
      */
@@ -46,6 +50,10 @@ export interface RootProps {
      * Whether the checkbox is read-only
      */
     readOnly?: boolean;
+    /**
+     * Whether the radio group is required
+     */
+    required?: boolean;
 }
 export type RootEmits = {
     /**

package/dist/components/radio-group/radio-group.types.d.ts

@@ -29,6 +29,10 @@ export interface RootProps {
         itemControl(value: string): string;
         itemHiddenInput(value: string): string;
     }>;
+    /**
+     * Whether the radio group is invalid
+     */
+    invalid?: boolean;
     /**
      * The v-model value of the radio group
      */
@@ -46,6 +50,10 @@ export interface RootProps {
      * Whether the checkbox is read-only
      */
     readOnly?: boolean;
+    /**
+     * Whether the radio group is required
+     */
+    required?: boolean;
 }
 export type RootEmits = {
     /**

package/dist/components/radio-group/use-radio-group.cjs

@@ -7,7 +7,9 @@ const vue$1 = require('@zag-js/vue');
 const vue = require('vue');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const boolean = require('../../utils/boolean.cjs');
 const cleanProps = require('../../utils/clean-props.cjs');
+const useFieldsetContext = require('../fieldset/use-fieldset-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,10 +34,17 @@ const useRadioGroup = (props = {}, emit) => {
   const id = vue.useId();
   const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
   const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE);
+  const fieldset = useFieldsetContext.useFieldsetContext();
   const context = vue.computed(() => {
     const localProps = vue.toValue(props);
+    const fieldsetContext = fieldset?.value;
     return {
       id,
+      ids: {
+        label: fieldsetContext?.ids?.legend
+      },
+      disabled: boolean.toBooleanValue(fieldsetContext?.disabled),
+      invalid: fieldsetContext?.invalid,
       dir: locale.value.dir,
       value: localProps.modelValue,
       getRootNode: env?.value.getRootNode,

package/dist/components/radio-group/use-radio-group.js

@@ -3,16 +3,25 @@ import { useMachine, normalizeProps } from '@zag-js/vue';
 import { useId, computed, toValue } from 'vue';
 import { useEnvironmentContext, DEFAULT_ENVIRONMENT } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext, DEFAULT_LOCALE } from '../../providers/locale/use-locale-context.js';
+import { toBooleanValue } from '../../utils/boolean.js';
 import { cleanProps } from '../../utils/clean-props.js';
+import { useFieldsetContext } from '../fieldset/use-fieldset-context.js';
 
 const useRadioGroup = (props = {}, emit) => {
   const id = useId();
   const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
   const locale = useLocaleContext(DEFAULT_LOCALE);
+  const fieldset = useFieldsetContext();
   const context = computed(() => {
     const localProps = toValue(props);
+    const fieldsetContext = fieldset?.value;
     return {
       id,
+      ids: {
+        label: fieldsetContext?.ids?.legend
+      },
+      disabled: toBooleanValue(fieldsetContext?.disabled),
+      invalid: fieldsetContext?.invalid,
       dir: locale.value.dir,
       value: localProps.modelValue,
       getRootNode: env?.value.getRootNode,

package/dist/components/select/select-root.vue.d.cts

@@ -5,7 +5,7 @@ import { CollectionItem } from '../collection';
 import { PolymorphicProps } from '../factory';
 import { RootProps } from './select.types';
 import { SelectionDetails, ValueChangeDetails, OpenChangeDetails, HighlightChangeDetails } from '@zag-js/select';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface SelectRootBaseProps<T extends CollectionItem> extends RootProps<T>, RenderStrategyProps, PolymorphicProps {
 }
 export interface SelectRootProps<T extends CollectionItem> extends SelectRootBaseProps<T>, 

package/dist/components/select/select-root.vue.d.ts

@@ -5,7 +5,7 @@ import { CollectionItem } from '../collection';
 import { PolymorphicProps } from '../factory';
 import { RootProps } from './select.types';
 import { SelectionDetails, ValueChangeDetails, OpenChangeDetails, HighlightChangeDetails } from '@zag-js/select';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface SelectRootBaseProps<T extends CollectionItem> extends RootProps<T>, RenderStrategyProps, PolymorphicProps {
 }
 export interface SelectRootProps<T extends CollectionItem> extends SelectRootBaseProps<T>, 

package/dist/components/tags-input/tags-input-root.vue.d.cts

@@ -2,7 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './tags-input.types';
 import { ValueChangeDetails, HighlightChangeDetails, InputValueChangeDetails, ValidityChangeDetails } from '@zag-js/tags-input';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface TagsInputRootBaseProps extends RootProps, PolymorphicProps {
 }
 export interface TagsInputRootProps extends TagsInputRootBaseProps, 

package/dist/components/tags-input/tags-input-root.vue.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, DefineComponent, ComponentOptionsMixin, PublicProps, Co
 import { PolymorphicProps } from '../factory';
 import { RootEmits, RootProps } from './tags-input.types';
 import { ValueChangeDetails, HighlightChangeDetails, InputValueChangeDetails, ValidityChangeDetails } from '@zag-js/tags-input';
-import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/interact-outside';
+import { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/bottom-sheet';
 export interface TagsInputRootBaseProps extends RootProps, PolymorphicProps {
 }
 export interface TagsInputRootProps extends TagsInputRootBaseProps, 

package/dist/index.cjs

@@ -389,7 +389,9 @@ const useNumberInputContext = require('./components/number-input/use-number-inpu
 const numberInput$1 = require('./components/number-input/number-input.cjs');
 const paginationContext_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-context.vue.cjs');
 const paginationEllipsis_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-ellipsis.vue.cjs');
+const paginationFirstTrigger_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-first-trigger.vue.cjs');
 const paginationItem_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-item.vue.cjs');
+const paginationLastTrigger_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-last-trigger.vue.cjs');
 const paginationNextTrigger_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-next-trigger.vue.cjs');
 const paginationPrevTrigger_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-prev-trigger.vue.cjs');
 const paginationRootProvider_vue_vue_type_script_setup_true_lang = require('./components/pagination/pagination-root-provider.vue.cjs');
@@ -1164,7 +1166,9 @@ exports.useNumberInputContext = useNumberInputContext.useNumberInputContext;
 exports.NumberInput = numberInput$1;
 exports.PaginationContext = paginationContext_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationEllipsis = paginationEllipsis_vue_vue_type_script_setup_true_lang.default;
+exports.PaginationFirstTrigger = paginationFirstTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationItem = paginationItem_vue_vue_type_script_setup_true_lang.default;
+exports.PaginationLastTrigger = paginationLastTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationNextTrigger = paginationNextTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationPrevTrigger = paginationPrevTrigger_vue_vue_type_script_setup_true_lang.default;
 exports.PaginationRootProvider = paginationRootProvider_vue_vue_type_script_setup_true_lang.default;

package/dist/index.js

@@ -410,7 +410,9 @@ import * as numberInput from './components/number-input/number-input.js';
 export { numberInput as NumberInput };
 export { default as PaginationContext } from './components/pagination/pagination-context.vue.js';
 export { default as PaginationEllipsis } from './components/pagination/pagination-ellipsis.vue.js';
+export { default as PaginationFirstTrigger } from './components/pagination/pagination-first-trigger.vue.js';
 export { default as PaginationItem } from './components/pagination/pagination-item.vue.js';
+export { default as PaginationLastTrigger } from './components/pagination/pagination-last-trigger.vue.js';
 export { default as PaginationNextTrigger } from './components/pagination/pagination-next-trigger.vue.js';
 export { default as PaginationPrevTrigger } from './components/pagination/pagination-prev-trigger.vue.js';
 export { default as PaginationRootProvider } from './components/pagination/pagination-root-provider.vue.js';

package/dist/utils/boolean.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toBooleanValue = (value) => {
+  return typeof value === "boolean" ? value : value === "true";
+};
+
+exports.toBooleanValue = toBooleanValue;

package/dist/utils/boolean.d.cts

@@ -0,0 +1,2 @@
+export type Booleanish = boolean | 'true' | 'false';
+export declare const toBooleanValue: (value: Booleanish | undefined) => boolean;

package/dist/utils/boolean.d.ts

@@ -0,0 +1,2 @@
+export type Booleanish = boolean | 'true' | 'false';
+export declare const toBooleanValue: (value: Booleanish | undefined) => boolean;

package/dist/utils/boolean.js

@@ -0,0 +1,5 @@
+const toBooleanValue = (value) => {
+  return typeof value === "boolean" ? value : value === "true";
+};
+
+export { toBooleanValue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/vue",
   "type": "module",
-  "version": "5.29.1",
+  "version": "5.30.0",
   "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -149,71 +149,72 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.10.0",
-    "@zag-js/accordion": "1.29.1",
-    "@zag-js/anatomy": "1.29.1",
-    "@zag-js/angle-slider": "1.29.1",
-    "@zag-js/async-list": "1.29.1",
-    "@zag-js/auto-resize": "1.29.1",
-    "@zag-js/avatar": "1.29.1",
-    "@zag-js/bottom-sheet": "1.29.1",
-    "@zag-js/carousel": "1.29.1",
-    "@zag-js/checkbox": "1.29.1",
-    "@zag-js/clipboard": "1.29.1",
-    "@zag-js/collapsible": "1.29.1",
-    "@zag-js/collection": "1.29.1",
-    "@zag-js/color-picker": "1.29.1",
-    "@zag-js/color-utils": "1.29.1",
-    "@zag-js/combobox": "1.29.1",
-    "@zag-js/core": "1.29.1",
-    "@zag-js/date-picker": "1.29.1",
-    "@zag-js/date-utils": "1.29.1",
-    "@zag-js/dialog": "1.29.1",
-    "@zag-js/dom-query": "1.29.1",
-    "@zag-js/editable": "1.29.1",
-    "@zag-js/file-upload": "1.29.1",
-    "@zag-js/file-utils": "1.29.1",
-    "@zag-js/floating-panel": "1.29.1",
-    "@zag-js/focus-trap": "1.29.1",
-    "@zag-js/highlight-word": "1.29.1",
-    "@zag-js/hover-card": "1.29.1",
-    "@zag-js/image-cropper": "1.29.1",
-    "@zag-js/i18n-utils": "1.29.1",
-    "@zag-js/json-tree-utils": "1.29.1",
-    "@zag-js/listbox": "1.29.1",
-    "@zag-js/marquee": "1.29.1",
-    "@zag-js/menu": "1.29.1",
-    "@zag-js/number-input": "1.29.1",
-    "@zag-js/pagination": "1.29.1",
-    "@zag-js/password-input": "1.29.1",
-    "@zag-js/pin-input": "1.29.1",
-    "@zag-js/popover": "1.29.1",
-    "@zag-js/presence": "1.29.1",
-    "@zag-js/progress": "1.29.1",
-    "@zag-js/qr-code": "1.29.1",
-    "@zag-js/radio-group": "1.29.1",
-    "@zag-js/rating-group": "1.29.1",
-    "@zag-js/scroll-area": "1.29.1",
-    "@zag-js/select": "1.29.1",
-    "@zag-js/signature-pad": "1.29.1",
-    "@zag-js/slider": "1.29.1",
-    "@zag-js/splitter": "1.29.1",
-    "@zag-js/steps": "1.29.1",
-    "@zag-js/switch": "1.29.1",
-    "@zag-js/tabs": "1.29.1",
-    "@zag-js/tags-input": "1.29.1",
-    "@zag-js/timer": "1.29.1",
-    "@zag-js/toast": "1.29.1",
-    "@zag-js/toggle": "1.29.1",
-    "@zag-js/toggle-group": "1.29.1",
-    "@zag-js/tooltip": "1.29.1",
-    "@zag-js/tour": "1.29.1",
-    "@zag-js/tree-view": "1.29.1",
-    "@zag-js/types": "1.29.1",
-    "@zag-js/utils": "1.29.1",
-    "@zag-js/vue": "1.29.1"
+    "@zag-js/accordion": "1.31.1",
+    "@zag-js/anatomy": "1.31.1",
+    "@zag-js/angle-slider": "1.31.1",
+    "@zag-js/async-list": "1.31.1",
+    "@zag-js/auto-resize": "1.31.1",
+    "@zag-js/avatar": "1.31.1",
+    "@zag-js/bottom-sheet": "1.31.1",
+    "@zag-js/carousel": "1.31.1",
+    "@zag-js/checkbox": "1.31.1",
+    "@zag-js/clipboard": "1.31.1",
+    "@zag-js/collapsible": "1.31.1",
+    "@zag-js/collection": "1.31.1",
+    "@zag-js/color-picker": "1.31.1",
+    "@zag-js/color-utils": "1.31.1",
+    "@zag-js/combobox": "1.31.1",
+    "@zag-js/core": "1.31.1",
+    "@zag-js/date-picker": "1.31.1",
+    "@zag-js/date-utils": "1.31.1",
+    "@zag-js/dialog": "1.31.1",
+    "@zag-js/dom-query": "1.31.1",
+    "@zag-js/editable": "1.31.1",
+    "@zag-js/file-upload": "1.31.1",
+    "@zag-js/file-utils": "1.31.1",
+    "@zag-js/floating-panel": "1.31.1",
+    "@zag-js/focus-trap": "1.31.1",
+    "@zag-js/highlight-word": "1.31.1",
+    "@zag-js/hover-card": "1.31.1",
+    "@zag-js/image-cropper": "1.31.1",
+    "@zag-js/i18n-utils": "1.31.1",
+    "@zag-js/json-tree-utils": "1.31.1",
+    "@zag-js/listbox": "1.31.1",
+    "@zag-js/marquee": "1.31.1",
+    "@zag-js/menu": "1.31.1",
+    "@zag-js/navigation-menu": "1.31.1",
+    "@zag-js/number-input": "1.31.1",
+    "@zag-js/pagination": "1.31.1",
+    "@zag-js/password-input": "1.31.1",
+    "@zag-js/pin-input": "1.31.1",
+    "@zag-js/popover": "1.31.1",
+    "@zag-js/presence": "1.31.1",
+    "@zag-js/progress": "1.31.1",
+    "@zag-js/qr-code": "1.31.1",
+    "@zag-js/radio-group": "1.31.1",
+    "@zag-js/rating-group": "1.31.1",
+    "@zag-js/scroll-area": "1.31.1",
+    "@zag-js/select": "1.31.1",
+    "@zag-js/signature-pad": "1.31.1",
+    "@zag-js/slider": "1.31.1",
+    "@zag-js/splitter": "1.31.1",
+    "@zag-js/steps": "1.31.1",
+    "@zag-js/switch": "1.31.1",
+    "@zag-js/tabs": "1.31.1",
+    "@zag-js/tags-input": "1.31.1",
+    "@zag-js/timer": "1.31.1",
+    "@zag-js/toast": "1.31.1",
+    "@zag-js/toggle": "1.31.1",
+    "@zag-js/toggle-group": "1.31.1",
+    "@zag-js/tooltip": "1.31.1",
+    "@zag-js/tour": "1.31.1",
+    "@zag-js/tree-view": "1.31.1",
+    "@zag-js/types": "1.31.1",
+    "@zag-js/utils": "1.31.1",
+    "@zag-js/vue": "1.31.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.6",
+    "@biomejs/biome": "2.3.8",
     "@storybook/addon-a11y": "9.1.16",
     "@storybook/vue3-vite": "9.1.16",
     "@testing-library/dom": "10.4.1",
@@ -221,26 +222,26 @@
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.1.0",
     "@types/jsdom": "21.1.7",
-    "@vitejs/plugin-vue": "6.0.1",
-    "@vitejs/plugin-vue-jsx": "5.1.1",
+    "@vitejs/plugin-vue": "6.0.2",
+    "@vitejs/plugin-vue-jsx": "5.1.2",
     "@vitest/coverage-v8": "^4.0.0",
-    "@vue/compiler-sfc": "3.5.24",
+    "@vue/compiler-sfc": "3.5.25",
     "ajv": "8.17.1",
     "check-password-strength": "3.0.0",
     "clean-package": "2.2.0",
     "globby": "15.0.0",
     "image-conversion": "2.1.1",
     "jsdom": "26.1.0",
-    "lucide-vue-next": "0.554.0",
+    "lucide-vue-next": "0.555.0",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "9.1.16",
     "typescript": "5.9.3",
     "vee-validate": "4.15.1",
-    "vite": "7.2.2",
+    "vite": "7.2.4",
     "vite-plugin-dts": "4.5.4",
     "vitest": "^4.0.0",
-    "vue": "3.5.24",
-    "vue-tsc": "3.1.4"
+    "vue": "3.5.25",
+    "vue-tsc": "3.1.5"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"