@alikhalilll/a-responsive-popover 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 alikhalilll
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+# @alikhalilll/a-responsive-popover
+
+One breakpoint-aware component that renders a [reka-ui](https://reka-ui.com) **popover on desktop**
+and a [vaul-vue](https://github.com/unovue/vaul-vue) **drawer on mobile**, with a single API. Built
+on `@alikhalilll/a-popover` + `@alikhalilll/a-drawer` (both pulled in automatically).
+
+Components: **`AResponsivePopover`** (root) · **`AResponsivePopoverTrigger`** · **`AResponsivePopoverContent`**.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/a-responsive-popover
+```
+
+## Styles
+
+It renders the popover (desktop) and drawer (mobile), so import all three stylesheets plus the
+shared tokens:
+
+```ts
+import '@alikhalilll/a-popover/styles.css';
+import '@alikhalilll/a-drawer/styles.css';
+import '@alikhalilll/a-responsive-popover/styles.css';
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  AResponsivePopover,
+  AResponsivePopoverTrigger,
+  AResponsivePopoverContent,
+} from '@alikhalilll/a-responsive-popover';
+
+const open = ref(false);
+</script>
+
+<template>
+  <AResponsivePopover v-model:open="open">
+    <AResponsivePopoverTrigger>Open</AResponsivePopoverTrigger>
+    <AResponsivePopoverContent>
+      <template #default="{ isDesktop }">
+        <p>{{ isDesktop ? 'Popover (desktop)' : 'Drawer (mobile)' }}</p>
+      </template>
+    </AResponsivePopoverContent>
+  </AResponsivePopover>
+</template>
+```
+
+## API
+
+### `AResponsivePopover` (root)
+
+| Prop         | Type                           | Default              | Description                                                                                                |
+| ------------ | ------------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `open`       | `boolean`                      | —                    | `v-model:open`.                                                                                            |
+| `breakpoint` | `string`                       | `(min-width: 768px)` | Media query for the desktop break; below it, the drawer renders.                                           |
+| `scrollLock` | `'events' \| 'body' \| 'none'` | `events`             | How desktop page-scroll is blocked while open (`events` keeps the scrollbar + `position: sticky` working). |
+| `modal`      | `boolean`                      | `true`               | **Deprecated** — prefer `scrollLock`. `false` ≈ `scrollLock="none"`.                                       |
+
+Emits `update:open`. The default slot receives `{ isDesktop }` so you can branch content without a
+separate `useMediaQuery`.
+
+### SSR
+
+`useMediaQuery` returns `false` on the server, so the first server paint is the drawer branch; the
+client may swap to popover on hydration. Both branches are pre-imported (no lazy chunks), and the
+closed drawer is collapsed, so the swap is invisible.
+
+## Auto-import
+
+**Nuxt:**
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@alikhalilll/a-responsive-popover/nuxt'],
+  css: [
+    '@alikhalilll/a-popover/styles.css',
+    '@alikhalilll/a-drawer/styles.css',
+    '@alikhalilll/a-responsive-popover/styles.css',
+  ],
+});
+```
+
+**Vite:** register `@alikhalilll/a-responsive-popover/resolver` in `unplugin-vue-components`.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,279 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+let _alikhalilll_a_popover = require("@alikhalilll/a-popover");
+let _alikhalilll_a_drawer = require("@alikhalilll/a-drawer");
+//#region src/composables/useResponsivePopoverContext.ts
+const RESPONSIVE_POPOVER_CONTEXT = Symbol("AResponsivePopoverContext");
+function provideResponsivePopoverContext(ctx) {
+	(0, vue.provide)(RESPONSIVE_POPOVER_CONTEXT, ctx);
+}
+function useResponsivePopoverContext() {
+	return (0, vue.inject)(RESPONSIVE_POPOVER_CONTEXT, null);
+}
+//#endregion
+//#region \0/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/AResponsivePopover.vue
+const _sfc_main$2 = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AResponsivePopover",
+	props: /* @__PURE__ */ (0, vue.mergeModels)({
+		breakpoint: {
+			type: String,
+			required: false,
+			default: "(min-width: 768px)"
+		},
+		modal: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		scrollLock: {
+			type: String,
+			required: false,
+			default: "events"
+		}
+	}, {
+		"open": { type: Boolean },
+		"openModifiers": {}
+	}),
+	emits: ["update:open"],
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const open = (0, vue.useModel)(__props, "open");
+		const isDesktop = (0, _vueuse_core.useMediaQuery)(() => props.breakpoint);
+		/**
+		* Pre-imported on both branches — do NOT lazy-load. Switching the component identity at runtime
+		* means we still hydrate the right tree client-side.
+		*/
+		const Root = (0, vue.computed)(() => isDesktop.value ? _alikhalilll_a_popover.APopover : _alikhalilll_a_drawer.ADrawer);
+		/**
+		* Per-branch `modal` resolution — the two roots interpret the prop differently:
+		*
+		*   APopover (desktop, reka-ui): `modal=true` triggers `PopoverContentModal` + its
+		*   `useBodyScrollLock`. We only want that when the caller explicitly opted into the
+		*   body-level scroll lock; for `'events'`/`'none'` we install our own lock in
+		*   `AResponsivePopoverContent`. Legacy `modal=false` still forces non-modal.
+		*
+		*   ADrawer (mobile, vaul-vue): `modal=false` SUPPRESSES THE OVERLAY entirely. Drawers
+		*   are modal by convention (a dimmed backdrop is the affordance), so default to modal
+		*   unless the caller explicitly turned the whole thing off.
+		*/
+		const rekaModal = (0, vue.computed)(() => {
+			if (props.modal === false) return false;
+			return props.scrollLock === "body";
+		});
+		const drawerModal = (0, vue.computed)(() => props.modal !== false);
+		const rootModal = (0, vue.computed)(() => isDesktop.value ? rekaModal.value : drawerModal.value);
+		provideResponsivePopoverContext({
+			open: (0, vue.computed)(() => open.value ?? false),
+			isDesktop: (0, vue.computed)(() => isDesktop.value),
+			scrollLock: (0, vue.computed)(() => props.scrollLock)
+		});
+		const __returned__ = {
+			props,
+			open,
+			isDesktop,
+			Root,
+			rekaModal,
+			drawerModal,
+			rootModal
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+	return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.Root), {
+		open: $setup.open,
+		"onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.open = $event),
+		modal: $setup.rootModal,
+		"data-slot": "responsive-popover"
+	}, {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { isDesktop: $setup.isDesktop })]),
+		_: 3
+	}, 40, ["open", "modal"]);
+}
+var AResponsivePopover_default = /* @__PURE__ */ export_helper_default(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/AResponsivePopover/src/components/AResponsivePopover.vue"]]);
+//#endregion
+//#region src/components/AResponsivePopoverTrigger.vue
+const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AResponsivePopoverTrigger",
+	props: {
+		breakpoint: {
+			type: String,
+			required: false,
+			default: "(min-width: 768px)"
+		},
+		asChild: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const isDesktop = (0, _vueuse_core.useMediaQuery)(() => props.breakpoint);
+		const __returned__ = {
+			props,
+			isDesktop,
+			Trigger: (0, vue.computed)(() => isDesktop.value ? _alikhalilll_a_popover.APopoverTrigger : _alikhalilll_a_drawer.ADrawerTrigger)
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.Trigger), {
+		"as-child": $setup.props.asChild,
+		"data-slot": "responsive-popover-trigger"
+	}, {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["as-child"]);
+}
+var AResponsivePopoverTrigger_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/AResponsivePopover/src/components/AResponsivePopoverTrigger.vue"]]);
+//#endregion
+//#region src/components/AResponsivePopoverContent.vue
+const _sfc_main = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AResponsivePopoverContent",
+	props: {
+		breakpoint: {
+			type: String,
+			required: false,
+			default: "(min-width: 768px)"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		popoverClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		drawerClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		},
+		overlay: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "start"
+		},
+		sideOffset: {
+			type: Number,
+			required: false,
+			default: 4
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const ctx = useResponsivePopoverContext();
+		const fallbackIsDesktop = (0, _vueuse_core.useMediaQuery)(() => props.breakpoint);
+		const isDesktop = (0, vue.computed)(() => ctx?.isDesktop.value ?? fallbackIsDesktop.value);
+		const scrollLockMode = (0, vue.computed)(() => ctx?.scrollLock.value ?? "events");
+		const overlayLockScroll = (0, vue.computed)(() => scrollLockMode.value === "body");
+		const mergedClass = (0, vue.computed)(() => [props.class, isDesktop.value ? props.popoverClass : props.drawerClass]);
+		(0, _alikhalilll_a_popover.useEventScrollLock)({
+			allowedScrollContainer: () => {
+				if (typeof document === "undefined") return [];
+				return Array.from(document.querySelectorAll("[data-responsive-popover-scroll-container=\"true\"]"));
+			},
+			active: (0, vue.computed)(() => !!ctx?.open.value && isDesktop.value && scrollLockMode.value === "events")
+		});
+		const __returned__ = {
+			props,
+			ctx,
+			fallbackIsDesktop,
+			isDesktop,
+			scrollLockMode,
+			overlayLockScroll,
+			mergedClass,
+			get APopoverContent() {
+				return _alikhalilll_a_popover.APopoverContent;
+			},
+			get ADrawerContent() {
+				return _alikhalilll_a_drawer.ADrawerContent;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return $setup.isDesktop ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["APopoverContent"], {
+		key: 0,
+		overlay: $setup.props.overlay,
+		"overlay-lock-scroll": $setup.overlayLockScroll,
+		align: $setup.props.align,
+		"side-offset": $setup.props.sideOffset,
+		class: (0, vue.normalizeClass)($setup.mergedClass),
+		"data-slot": "responsive-popover-content",
+		"data-responsive-popover-scroll-container": "true"
+	}, {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, [
+		"overlay",
+		"overlay-lock-scroll",
+		"align",
+		"side-offset",
+		"class"
+	])) : ((0, vue.openBlock)(), (0, vue.createBlock)($setup["ADrawerContent"], {
+		key: 1,
+		class: (0, vue.normalizeClass)($setup.mergedClass),
+		"data-slot": "responsive-popover-content"
+	}, {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["class"]));
+}
+var AResponsivePopoverContent_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/AResponsivePopover/src/components/AResponsivePopoverContent.vue"]]);
+//#endregion
+exports.AResponsivePopover = AResponsivePopover_default;
+exports.AResponsivePopoverContent = AResponsivePopoverContent_default;
+exports.AResponsivePopoverTrigger = AResponsivePopoverTrigger_default;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/composables/useResponsivePopoverContext.ts","../src/components/AResponsivePopover.vue","../src/components/AResponsivePopoverTrigger.vue","../src/components/AResponsivePopoverContent.vue"],"sourcesContent":["import { inject, provide, type ComputedRef, type InjectionKey } from 'vue';\nimport type { ScrollLockMode } from '../types';\n\nexport interface ResponsivePopoverContext {\n  open: ComputedRef<boolean>;\n  isDesktop: ComputedRef<boolean>;\n  scrollLock: ComputedRef<ScrollLockMode>;\n}\n\nconst RESPONSIVE_POPOVER_CONTEXT: InjectionKey<ResponsivePopoverContext> = Symbol(\n  'AResponsivePopoverContext'\n);\n\nexport function provideResponsivePopoverContext(ctx: ResponsivePopoverContext) {\n  provide(RESPONSIVE_POPOVER_CONTEXT, ctx);\n}\n\nexport function useResponsivePopoverContext(): ResponsivePopoverContext | null {\n  return inject(RESPONSIVE_POPOVER_CONTEXT, null);\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopover } from '@alikhalilll/a-popover';\nimport { ADrawer } from '@alikhalilll/a-drawer';\nimport { provideResponsivePopoverContext } from '../composables/useResponsivePopoverContext';\nimport type { AResponsivePopoverProps, AResponsivePopoverSlots } from '../types';\n\nconst props = withDefaults(defineProps<AResponsivePopoverProps>(), {\n  breakpoint: '(min-width: 768px)',\n  modal: true,\n  scrollLock: 'events',\n});\n\ndefineSlots<AResponsivePopoverSlots>();\n\nconst open = defineModel<boolean>('open');\n\nconst isDesktop = useMediaQuery(() => props.breakpoint);\n\n/**\n * Pre-imported on both branches — do NOT lazy-load. Switching the component identity at runtime\n * means we still hydrate the right tree client-side.\n */\nconst Root = computed(() => (isDesktop.value ? APopover : ADrawer));\n\n/**\n * Per-branch `modal` resolution — the two roots interpret the prop differently:\n *\n *   APopover (desktop, reka-ui): `modal=true` triggers `PopoverContentModal` + its\n *   `useBodyScrollLock`. We only want that when the caller explicitly opted into the\n *   body-level scroll lock; for `'events'`/`'none'` we install our own lock in\n *   `AResponsivePopoverContent`. Legacy `modal=false` still forces non-modal.\n *\n *   ADrawer (mobile, vaul-vue): `modal=false` SUPPRESSES THE OVERLAY entirely. Drawers\n *   are modal by convention (a dimmed backdrop is the affordance), so default to modal\n *   unless the caller explicitly turned the whole thing off.\n */\nconst rekaModal = computed(() => {\n  if (props.modal === false) return false;\n  return props.scrollLock === 'body';\n});\nconst drawerModal = computed(() => props.modal !== false);\nconst rootModal = computed(() => (isDesktop.value ? rekaModal.value : drawerModal.value));\n\nprovideResponsivePopoverContext({\n  open: computed(() => open.value ?? false),\n  isDesktop: computed(() => isDesktop.value),\n  scrollLock: computed(() => props.scrollLock),\n});\n</script>\n\n<template>\n  <component :is=\"Root\" v-model:open=\"open\" :modal=\"rootModal\" data-slot=\"responsive-popover\">\n    <slot :is-desktop=\"isDesktop\" />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopoverTrigger } from '@alikhalilll/a-popover';\nimport { ADrawerTrigger } from '@alikhalilll/a-drawer';\n\nconst props = withDefaults(\n  defineProps<{\n    breakpoint?: string;\n    asChild?: boolean;\n  }>(),\n  { breakpoint: '(min-width: 768px)' }\n);\n\nconst isDesktop = useMediaQuery(() => props.breakpoint);\nconst Trigger = computed(() => (isDesktop.value ? APopoverTrigger : ADrawerTrigger));\n</script>\n\n<template>\n  <component :is=\"Trigger\" :as-child=\"props.asChild\" data-slot=\"responsive-popover-trigger\">\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { computed } from 'vue';\nimport { useMediaQuery } from '@vueuse/core';\nimport { APopoverContent, useEventScrollLock } from '@alikhalilll/a-popover';\nimport { ADrawerContent } from '@alikhalilll/a-drawer';\nimport { useResponsivePopoverContext } from '../composables/useResponsivePopoverContext';\n\nconst props = withDefaults(\n  defineProps<{\n    breakpoint?: string;\n    /** Classes applied on both branches. Avoid width / inset classes here. */\n    class?: HTMLAttributes['class'];\n    /** Classes applied only when the popover (desktop) branch is rendered. */\n    popoverClass?: HTMLAttributes['class'];\n    /** Classes applied only when the drawer (mobile) branch is rendered. */\n    drawerClass?: HTMLAttributes['class'];\n    /**\n     * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers\n     * on desktop are non-modal-looking by convention. The mobile drawer always has its own\n     * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.\n     */\n    overlay?: boolean;\n    align?: 'start' | 'center' | 'end';\n    sideOffset?: number;\n  }>(),\n  {\n    breakpoint: '(min-width: 768px)',\n    align: 'start',\n    sideOffset: 4,\n    overlay: false,\n  }\n);\n\nconst ctx = useResponsivePopoverContext();\n\n// Prefer the root's media query (so both layers agree). Fall back to a local one when this\n// component is used outside `AResponsivePopover` (unusual but supported).\nconst fallbackIsDesktop = useMediaQuery(() => props.breakpoint);\nconst isDesktop = computed(() => ctx?.isDesktop.value ?? fallbackIsDesktop.value);\n\nconst scrollLockMode = computed(() => ctx?.scrollLock.value ?? 'events');\nconst overlayLockScroll = computed(() => scrollLockMode.value === 'body');\n\nconst mergedClass = computed(() => [\n  props.class,\n  isDesktop.value ? props.popoverClass : props.drawerClass,\n]);\n\n// Sticky-safe scroll lock — only active while the popover is open on desktop and the root\n// asked for the event-based strategy. The getter resolves every responsive popover content\n// element currently in the DOM, which lets stacked popovers share the lock cleanly.\nuseEventScrollLock({\n  allowedScrollContainer: () => {\n    if (typeof document === 'undefined') return [];\n    return Array.from(\n      document.querySelectorAll<HTMLElement>('[data-responsive-popover-scroll-container=\"true\"]')\n    );\n  },\n  active: computed(() => !!ctx?.open.value && isDesktop.value && scrollLockMode.value === 'events'),\n});\n</script>\n\n<template>\n  <APopoverContent\n    v-if=\"isDesktop\"\n    :overlay=\"props.overlay\"\n    :overlay-lock-scroll=\"overlayLockScroll\"\n    :align=\"props.align\"\n    :side-offset=\"props.sideOffset\"\n    :class=\"mergedClass\"\n    data-slot=\"responsive-popover-content\"\n    data-responsive-popover-scroll-container=\"true\"\n  >\n    <slot />\n  </APopoverContent>\n  <ADrawerContent v-else :class=\"mergedClass\" data-slot=\"responsive-popover-content\">\n    <slot />\n  </ADrawerContent>\n</template>\n"],"mappings":"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"}

package/dist/index.d.cts

@@ -0,0 +1,108 @@
+import { HTMLAttributes } from "vue";
+
+//#region src/types.d.ts
+type ScrollLockMode = 'events' | 'body' | 'none';
+interface AResponsivePopoverProps {
+  /** CSS media query for the desktop break. Below this width we render a vaul drawer. */
+  breakpoint?: string;
+  /**
+   * @deprecated prefer `scrollLock`. Kept for back-compat: `modal=false` is a shorthand
+   * for `scrollLock="none"` (tooltip-style popover). `modal=true` (default) defers to
+   * `scrollLock`, which controls how page scroll is blocked.
+   */
+  modal?: boolean;
+  /**
+   * How desktop page scroll is blocked while the popover is open:
+   * - `'events'` (default) — wheel/touch/keyboard intercepted at document level.
+   *   Page scrollbar stays visible; `position: sticky` keeps working.
+   * - `'body'` — legacy `document.body.style.overflow='hidden'` lock. Use when the
+   *   page must reflow as the scrollbar goes away.
+   * - `'none'` — no page-scroll lock at all.
+   *
+   * Drawer (mobile) branch is unaffected — vaul-vue owns its own lock.
+   */
+  scrollLock?: ScrollLockMode;
+}
+/**
+ * Emit map for {@link AResponsivePopover}. `update:open` is the `v-model:open`.
+ */
+type AResponsivePopoverEmits = {
+  'update:open': [value: boolean | undefined];
+};
+/**
+ * Slot prop shape for {@link AResponsivePopover}. The default slot receives
+ * `isDesktop` so consumers can branch content on the active breakpoint without
+ * a separate `useMediaQuery` call.
+ */
+interface AResponsivePopoverSlots {
+  default?: (props: {
+    isDesktop: boolean;
+  }) => unknown;
+}
+//#endregion
+//#region src/components/AResponsivePopover.vue.d.ts
+type __VLS_Props$2 = AResponsivePopoverProps;
+type __VLS_Slots$2 = AResponsivePopoverSlots;
+type __VLS_ModelProps = {
+  'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props$2 & __VLS_ModelProps;
+declare const __VLS_base$2: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+  breakpoint: string;
+  modal: boolean;
+  scrollLock: ScrollLockMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: typeof __VLS_base$2;
+declare const _default: typeof __VLS_export$2;
+//#endregion
+//#region src/components/AResponsivePopoverTrigger.vue.d.ts
+type __VLS_Props$1 = {
+  breakpoint?: string;
+  asChild?: boolean;
+};
+declare var __VLS_8$1: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_8$1) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
+  breakpoint: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: typeof __VLS_base$1;
+declare const _default$2: typeof __VLS_export$1;
+//#endregion
+//#region src/components/AResponsivePopoverContent.vue.d.ts
+type __VLS_Props = {
+  breakpoint?: string; /** Classes applied on both branches. Avoid width / inset classes here. */
+  class?: HTMLAttributes['class']; /** Classes applied only when the popover (desktop) branch is rendered. */
+  popoverClass?: HTMLAttributes['class']; /** Classes applied only when the drawer (mobile) branch is rendered. */
+  drawerClass?: HTMLAttributes['class'];
+  /**
+   * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers
+   * on desktop are non-modal-looking by convention. The mobile drawer always has its own
+   * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.
+   */
+  overlay?: boolean;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+};
+declare var __VLS_8: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+} & {
+  default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+  breakpoint: string;
+  overlay: boolean;
+  align: "start" | "center" | "end";
+  sideOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: typeof __VLS_base;
+declare const _default$1: typeof __VLS_export;
+//#endregion
+export { _default as AResponsivePopover, _default$1 as AResponsivePopoverContent, type AResponsivePopoverEmits, type AResponsivePopoverProps, type AResponsivePopoverSlots, _default$2 as AResponsivePopoverTrigger, type ScrollLockMode };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.ts

@@ -0,0 +1,108 @@
+import { HTMLAttributes } from "vue";
+
+//#region src/types.d.ts
+type ScrollLockMode = 'events' | 'body' | 'none';
+interface AResponsivePopoverProps {
+  /** CSS media query for the desktop break. Below this width we render a vaul drawer. */
+  breakpoint?: string;
+  /**
+   * @deprecated prefer `scrollLock`. Kept for back-compat: `modal=false` is a shorthand
+   * for `scrollLock="none"` (tooltip-style popover). `modal=true` (default) defers to
+   * `scrollLock`, which controls how page scroll is blocked.
+   */
+  modal?: boolean;
+  /**
+   * How desktop page scroll is blocked while the popover is open:
+   * - `'events'` (default) — wheel/touch/keyboard intercepted at document level.
+   *   Page scrollbar stays visible; `position: sticky` keeps working.
+   * - `'body'` — legacy `document.body.style.overflow='hidden'` lock. Use when the
+   *   page must reflow as the scrollbar goes away.
+   * - `'none'` — no page-scroll lock at all.
+   *
+   * Drawer (mobile) branch is unaffected — vaul-vue owns its own lock.
+   */
+  scrollLock?: ScrollLockMode;
+}
+/**
+ * Emit map for {@link AResponsivePopover}. `update:open` is the `v-model:open`.
+ */
+type AResponsivePopoverEmits = {
+  'update:open': [value: boolean | undefined];
+};
+/**
+ * Slot prop shape for {@link AResponsivePopover}. The default slot receives
+ * `isDesktop` so consumers can branch content on the active breakpoint without
+ * a separate `useMediaQuery` call.
+ */
+interface AResponsivePopoverSlots {
+  default?: (props: {
+    isDesktop: boolean;
+  }) => unknown;
+}
+//#endregion
+//#region src/components/AResponsivePopover.vue.d.ts
+type __VLS_Props$2 = AResponsivePopoverProps;
+type __VLS_Slots$2 = AResponsivePopoverSlots;
+type __VLS_ModelProps = {
+  'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props$2 & __VLS_ModelProps;
+declare const __VLS_base$2: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "update:open": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+  "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+  breakpoint: string;
+  modal: boolean;
+  scrollLock: ScrollLockMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$2: typeof __VLS_base$2;
+declare const _default: typeof __VLS_export$2;
+//#endregion
+//#region src/components/AResponsivePopoverTrigger.vue.d.ts
+type __VLS_Props$1 = {
+  breakpoint?: string;
+  asChild?: boolean;
+};
+declare var __VLS_8$1: {};
+type __VLS_Slots$1 = {} & {
+  default?: (props: typeof __VLS_8$1) => any;
+};
+declare const __VLS_base$1: import("vue").DefineComponent<__VLS_Props$1, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
+  breakpoint: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: typeof __VLS_base$1;
+declare const _default$2: typeof __VLS_export$1;
+//#endregion
+//#region src/components/AResponsivePopoverContent.vue.d.ts
+type __VLS_Props = {
+  breakpoint?: string; /** Classes applied on both branches. Avoid width / inset classes here. */
+  class?: HTMLAttributes['class']; /** Classes applied only when the popover (desktop) branch is rendered. */
+  popoverClass?: HTMLAttributes['class']; /** Classes applied only when the drawer (mobile) branch is rendered. */
+  drawerClass?: HTMLAttributes['class'];
+  /**
+   * Render the dimmed overlay on the desktop popover branch. Defaults to `false` — popovers
+   * on desktop are non-modal-looking by convention. The mobile drawer always has its own
+   * overlay (vaul-vue's `DrawerOverlay`) regardless of this prop.
+   */
+  overlay?: boolean;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+};
+declare var __VLS_8: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+} & {
+  default?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+  breakpoint: string;
+  overlay: boolean;
+  align: "start" | "center" | "end";
+  sideOffset: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: typeof __VLS_base;
+declare const _default$1: typeof __VLS_export;
+//#endregion
+export { _default as AResponsivePopover, _default$1 as AResponsivePopoverContent, type AResponsivePopoverEmits, type AResponsivePopoverProps, type AResponsivePopoverSlots, _default$2 as AResponsivePopoverTrigger, type ScrollLockMode };
+//# sourceMappingURL=index.d.ts.map