@ark-ui/vue 5.18.4 → 5.19.0

package/dist/components/scroll-area/use-scroll-area-scrollbar-props-context.d.ts

@@ -0,0 +1,3 @@
+import { ScrollbarProps } from '@zag-js/scroll-area';
+import { ComputedRef } from 'vue';
+export declare const ScrollAreaScrollbarPropsProvider: (opts: ComputedRef<ScrollbarProps>) => void, useScrollAreaScrollbarPropsContext: (fallback?: ComputedRef<ScrollbarProps> | undefined) => ComputedRef<ScrollbarProps>;

package/dist/components/scroll-area/use-scroll-area-scrollbar-props-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../../utils/create-context.js';
+
+const [ScrollAreaScrollbarPropsProvider, useScrollAreaScrollbarPropsContext] = createContext("ScrollAreaScrollbarPropsContext");
+
+export { ScrollAreaScrollbarPropsProvider, useScrollAreaScrollbarPropsContext };

package/dist/components/scroll-area/use-scroll-area.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const scrollArea = require('@zag-js/scroll-area');
+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 cleanProps = require('../../utils/clean-props.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const scrollArea__namespace = /*#__PURE__*/_interopNamespaceDefault(scrollArea);
+
+const useScrollArea = (props = {}) => {
+  const id = vue.useId();
+  const env = useEnvironmentContext.useEnvironmentContext(useEnvironmentContext.DEFAULT_ENVIRONMENT);
+  const locale = useLocaleContext.useLocaleContext(useLocaleContext.DEFAULT_LOCALE);
+  const context = vue.computed(() => {
+    const localProps = vue.toValue(props);
+    return {
+      id,
+      dir: locale.value.dir,
+      getRootNode: env?.value.getRootNode,
+      ...cleanProps.cleanProps(localProps)
+    };
+  });
+  const service = vue$1.useMachine(scrollArea__namespace.machine, context);
+  return vue.computed(() => scrollArea__namespace.connect(service, vue$1.normalizeProps));
+};
+
+exports.useScrollArea = useScrollArea;

package/dist/components/scroll-area/use-scroll-area.d.cts

@@ -0,0 +1,9 @@
+import { PropTypes } from '@zag-js/vue';
+import { ComputedRef, MaybeRef } from 'vue';
+import { Optional } from '../../types';
+import * as scrollArea from '@zag-js/scroll-area';
+export interface UseScrollAreaProps extends Optional<Omit<scrollArea.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseScrollAreaReturn extends ComputedRef<scrollArea.Api<PropTypes>> {
+}
+export declare const useScrollArea: (props?: MaybeRef<UseScrollAreaProps>) => UseScrollAreaReturn;

package/dist/components/scroll-area/use-scroll-area.d.ts

@@ -0,0 +1,9 @@
+import { PropTypes } from '@zag-js/vue';
+import { ComputedRef, MaybeRef } from 'vue';
+import { Optional } from '../../types';
+import * as scrollArea from '@zag-js/scroll-area';
+export interface UseScrollAreaProps extends Optional<Omit<scrollArea.Props, 'dir' | 'getRootNode'>, 'id'> {
+}
+export interface UseScrollAreaReturn extends ComputedRef<scrollArea.Api<PropTypes>> {
+}
+export declare const useScrollArea: (props?: MaybeRef<UseScrollAreaProps>) => UseScrollAreaReturn;

package/dist/components/scroll-area/use-scroll-area.js

@@ -0,0 +1,25 @@
+import * as scrollArea from '@zag-js/scroll-area';
+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 { cleanProps } from '../../utils/clean-props.js';
+
+const useScrollArea = (props = {}) => {
+  const id = useId();
+  const env = useEnvironmentContext(DEFAULT_ENVIRONMENT);
+  const locale = useLocaleContext(DEFAULT_LOCALE);
+  const context = computed(() => {
+    const localProps = toValue(props);
+    return {
+      id,
+      dir: locale.value.dir,
+      getRootNode: env?.value.getRootNode,
+      ...cleanProps(localProps)
+    };
+  });
+  const service = useMachine(scrollArea.machine, context);
+  return computed(() => scrollArea.connect(service, normalizeProps));
+};
+
+export { useScrollArea };

package/dist/index.cjs

@@ -442,6 +442,17 @@ const useRatingGroup = require('./components/rating-group/use-rating-group.cjs')
 const useRatingGroupContext = require('./components/rating-group/use-rating-group-context.cjs');
 const useRatingGroupItemContext = require('./components/rating-group/use-rating-group-item-context.cjs');
 const ratingGroup$1 = require('./components/rating-group/rating-group.cjs');
+const scrollAreaContext_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-context.vue.cjs');
+const scrollAreaContent_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-content.vue.cjs');
+const scrollAreaCorner_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-corner.vue.cjs');
+const scrollAreaRoot_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-root.vue.cjs');
+const scrollAreaRootProvider_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-root-provider.vue.cjs');
+const scrollAreaScrollbar_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-scrollbar.vue.cjs');
+const scrollAreaThumb_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-thumb.vue.cjs');
+const scrollAreaViewport_vue_vue_type_script_setup_true_lang = require('./components/scroll-area/scroll-area-viewport.vue.cjs');
+const useScrollArea = require('./components/scroll-area/use-scroll-area.cjs');
+const useScrollAreaContext = require('./components/scroll-area/use-scroll-area-context.cjs');
+const scrollArea$1 = require('./components/scroll-area/scroll-area.cjs');
 const segmentGroupContext_vue_vue_type_script_setup_true_lang = require('./components/segment-group/segment-group-context.vue.cjs');
 const segmentGroupIndicator_vue_vue_type_script_setup_true_lang = require('./components/segment-group/segment-group-indicator.vue.cjs');
 const segmentGroupItemContext_vue_vue_type_script_setup_true_lang = require('./components/segment-group/segment-group-item-context.vue.cjs');
@@ -709,6 +720,7 @@ const progress = require('@zag-js/progress');
 const qrcode = require('@zag-js/qr-code');
 const radioGroup = require('@zag-js/radio-group');
 const ratingGroup = require('@zag-js/rating-group');
+const scrollArea = require('@zag-js/scroll-area');
 const select = require('@zag-js/select');
 const signaturepad = require('@zag-js/signature-pad');
 const slider = require('@zag-js/slider');
@@ -1175,6 +1187,17 @@ exports.useRatingGroup = useRatingGroup.useRatingGroup;
 exports.useRatingGroupContext = useRatingGroupContext.useRatingGroupContext;
 exports.useRatingGroupItemContext = useRatingGroupItemContext.useRatingGroupItemContext;
 exports.RatingGroup = ratingGroup$1;
+exports.ScrollAreaContext = scrollAreaContext_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaContent = scrollAreaContent_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaCorner = scrollAreaCorner_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaRoot = scrollAreaRoot_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaRootProvider = scrollAreaRootProvider_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaScrollbar = scrollAreaScrollbar_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaThumb = scrollAreaThumb_vue_vue_type_script_setup_true_lang.default;
+exports.ScrollAreaViewport = scrollAreaViewport_vue_vue_type_script_setup_true_lang.default;
+exports.useScrollArea = useScrollArea.useScrollArea;
+exports.useScrollAreaContext = useScrollAreaContext.useScrollAreaContext;
+exports.ScrollArea = scrollArea$1;
 exports.SegmentGroupContext = segmentGroupContext_vue_vue_type_script_setup_true_lang.default;
 exports.SegmentGroupIndicator = segmentGroupIndicator_vue_vue_type_script_setup_true_lang.default;
 exports.SegmentGroupItemContext = segmentGroupItemContext_vue_vue_type_script_setup_true_lang.default;
@@ -1516,6 +1539,10 @@ Object.defineProperty(exports, "ratingGroupAnatomy", {
 	enumerable: true,
 	get: () => ratingGroup.anatomy
 });
+Object.defineProperty(exports, "scrollAreaAnatomy", {
+	enumerable: true,
+	get: () => scrollArea.anatomy
+});
 Object.defineProperty(exports, "selectAnatomy", {
 	enumerable: true,
 	get: () => select.anatomy

package/dist/index.js

@@ -468,6 +468,18 @@ export { useRatingGroupContext } from './components/rating-group/use-rating-grou
 export { useRatingGroupItemContext } from './components/rating-group/use-rating-group-item-context.js';
 import * as ratingGroup from './components/rating-group/rating-group.js';
 export { ratingGroup as RatingGroup };
+export { default as ScrollAreaContext } from './components/scroll-area/scroll-area-context.vue.js';
+export { default as ScrollAreaContent } from './components/scroll-area/scroll-area-content.vue.js';
+export { default as ScrollAreaCorner } from './components/scroll-area/scroll-area-corner.vue.js';
+export { default as ScrollAreaRoot } from './components/scroll-area/scroll-area-root.vue.js';
+export { default as ScrollAreaRootProvider } from './components/scroll-area/scroll-area-root-provider.vue.js';
+export { default as ScrollAreaScrollbar } from './components/scroll-area/scroll-area-scrollbar.vue.js';
+export { default as ScrollAreaThumb } from './components/scroll-area/scroll-area-thumb.vue.js';
+export { default as ScrollAreaViewport } from './components/scroll-area/scroll-area-viewport.vue.js';
+export { useScrollArea } from './components/scroll-area/use-scroll-area.js';
+export { useScrollAreaContext } from './components/scroll-area/use-scroll-area-context.js';
+import * as scrollArea from './components/scroll-area/scroll-area.js';
+export { scrollArea as ScrollArea };
 export { default as SegmentGroupContext } from './components/segment-group/segment-group-context.vue.js';
 export { default as SegmentGroupIndicator } from './components/segment-group/segment-group-indicator.vue.js';
 export { default as SegmentGroupItemContext } from './components/segment-group/segment-group-item-context.vue.js';
@@ -752,6 +764,7 @@ export { anatomy as progressAnatomy } from '@zag-js/progress';
 export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
 export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export { anatomy as scrollAreaAnatomy } from '@zag-js/scroll-area';
 export { anatomy as selectAnatomy } from '@zag-js/select';
 export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
 export { anatomy as sliderAnatomy } from '@zag-js/slider';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/vue",
   "type": "module",
-  "version": "5.18.4",
+  "version": "5.19.0",
   "description": "A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -140,64 +140,65 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.8.2",
-    "@zag-js/accordion": "1.21.3",
-    "@zag-js/angle-slider": "1.21.3",
-    "@zag-js/anatomy": "1.21.3",
-    "@zag-js/auto-resize": "1.21.3",
-    "@zag-js/avatar": "1.21.3",
-    "@zag-js/carousel": "1.21.3",
-    "@zag-js/checkbox": "1.21.3",
-    "@zag-js/clipboard": "1.21.3",
-    "@zag-js/collapsible": "1.21.3",
-    "@zag-js/collection": "1.21.3",
-    "@zag-js/color-picker": "1.21.3",
-    "@zag-js/color-utils": "1.21.3",
-    "@zag-js/combobox": "1.21.3",
-    "@zag-js/core": "1.21.3",
-    "@zag-js/date-picker": "1.21.3",
-    "@zag-js/date-utils": "1.21.3",
-    "@zag-js/dialog": "1.21.3",
-    "@zag-js/dom-query": "1.21.3",
-    "@zag-js/editable": "1.21.3",
-    "@zag-js/file-upload": "1.21.3",
-    "@zag-js/file-utils": "1.21.3",
-    "@zag-js/focus-trap": "1.21.3",
-    "@zag-js/floating-panel": "1.21.3",
-    "@zag-js/highlight-word": "1.21.3",
-    "@zag-js/hover-card": "1.21.3",
-    "@zag-js/i18n-utils": "1.21.3",
-    "@zag-js/json-tree-utils": "1.21.3",
-    "@zag-js/listbox": "1.21.3",
-    "@zag-js/menu": "1.21.3",
-    "@zag-js/number-input": "1.21.3",
-    "@zag-js/pagination": "1.21.3",
-    "@zag-js/password-input": "1.21.3",
-    "@zag-js/pin-input": "1.21.3",
-    "@zag-js/popover": "1.21.3",
-    "@zag-js/presence": "1.21.3",
-    "@zag-js/progress": "1.21.3",
-    "@zag-js/qr-code": "1.21.3",
-    "@zag-js/radio-group": "1.21.3",
-    "@zag-js/rating-group": "1.21.3",
-    "@zag-js/select": "1.21.3",
-    "@zag-js/signature-pad": "1.21.3",
-    "@zag-js/slider": "1.21.3",
-    "@zag-js/splitter": "1.21.3",
-    "@zag-js/switch": "1.21.3",
-    "@zag-js/tabs": "1.21.3",
-    "@zag-js/tags-input": "1.21.3",
-    "@zag-js/time-picker": "1.21.3",
-    "@zag-js/timer": "1.21.3",
-    "@zag-js/toast": "1.21.3",
-    "@zag-js/toggle": "1.21.3",
-    "@zag-js/toggle-group": "1.21.3",
-    "@zag-js/tooltip": "1.21.3",
-    "@zag-js/tour": "1.21.3",
-    "@zag-js/tree-view": "1.21.3",
-    "@zag-js/types": "1.21.3",
-    "@zag-js/utils": "1.21.3",
-    "@zag-js/steps": "1.21.3",
-    "@zag-js/vue": "1.21.3"
+    "@zag-js/accordion": "1.21.6",
+    "@zag-js/anatomy": "1.21.6",
+    "@zag-js/angle-slider": "1.21.6",
+    "@zag-js/auto-resize": "1.21.6",
+    "@zag-js/avatar": "1.21.6",
+    "@zag-js/carousel": "1.21.6",
+    "@zag-js/checkbox": "1.21.6",
+    "@zag-js/clipboard": "1.21.6",
+    "@zag-js/collapsible": "1.21.6",
+    "@zag-js/collection": "1.21.6",
+    "@zag-js/color-picker": "1.21.6",
+    "@zag-js/color-utils": "1.21.6",
+    "@zag-js/combobox": "1.21.6",
+    "@zag-js/core": "1.21.6",
+    "@zag-js/date-picker": "1.21.6",
+    "@zag-js/date-utils": "1.21.6",
+    "@zag-js/dialog": "1.21.6",
+    "@zag-js/dom-query": "1.21.6",
+    "@zag-js/editable": "1.21.6",
+    "@zag-js/file-upload": "1.21.6",
+    "@zag-js/file-utils": "1.21.6",
+    "@zag-js/floating-panel": "1.21.6",
+    "@zag-js/focus-trap": "1.21.6",
+    "@zag-js/highlight-word": "1.21.6",
+    "@zag-js/hover-card": "1.21.6",
+    "@zag-js/i18n-utils": "1.21.6",
+    "@zag-js/json-tree-utils": "1.21.6",
+    "@zag-js/listbox": "1.21.6",
+    "@zag-js/menu": "1.21.6",
+    "@zag-js/number-input": "1.21.6",
+    "@zag-js/pagination": "1.21.6",
+    "@zag-js/password-input": "1.21.6",
+    "@zag-js/pin-input": "1.21.6",
+    "@zag-js/popover": "1.21.6",
+    "@zag-js/presence": "1.21.6",
+    "@zag-js/progress": "1.21.6",
+    "@zag-js/qr-code": "1.21.6",
+    "@zag-js/radio-group": "1.21.6",
+    "@zag-js/rating-group": "1.21.6",
+    "@zag-js/scroll-area": "1.21.6",
+    "@zag-js/select": "1.21.6",
+    "@zag-js/signature-pad": "1.21.6",
+    "@zag-js/slider": "1.21.6",
+    "@zag-js/splitter": "1.21.6",
+    "@zag-js/steps": "1.21.6",
+    "@zag-js/switch": "1.21.6",
+    "@zag-js/tabs": "1.21.6",
+    "@zag-js/tags-input": "1.21.6",
+    "@zag-js/time-picker": "1.21.6",
+    "@zag-js/timer": "1.21.6",
+    "@zag-js/toast": "1.21.6",
+    "@zag-js/toggle": "1.21.6",
+    "@zag-js/toggle-group": "1.21.6",
+    "@zag-js/tooltip": "1.21.6",
+    "@zag-js/tour": "1.21.6",
+    "@zag-js/tree-view": "1.21.6",
+    "@zag-js/types": "1.21.6",
+    "@zag-js/utils": "1.21.6",
+    "@zag-js/vue": "1.21.6"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.0",