@alikhalilll/a-responsive-popover 1.0.1

package/dist/index.js

@@ -0,0 +1,276 @@
+import { computed, createBlock, defineComponent, inject, mergeModels, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, useModel, withCtx } from "vue";
+import { useMediaQuery } from "@vueuse/core";
+import { APopover, APopoverContent, APopoverTrigger, useEventScrollLock } from "@alikhalilll/a-popover";
+import { ADrawer, ADrawerContent, ADrawerTrigger } from "@alikhalilll/a-drawer";
+//#region src/composables/useResponsivePopoverContext.ts
+const RESPONSIVE_POPOVER_CONTEXT = Symbol("AResponsivePopoverContext");
+function provideResponsivePopoverContext(ctx) {
+	provide(RESPONSIVE_POPOVER_CONTEXT, ctx);
+}
+function useResponsivePopoverContext() {
+	return 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__ */ defineComponent({
+	__name: "AResponsivePopover",
+	props: /* @__PURE__ */ 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 = useModel(__props, "open");
+		const isDesktop = 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 = computed(() => isDesktop.value ? APopover : 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 = computed(() => {
+			if (props.modal === false) return false;
+			return props.scrollLock === "body";
+		});
+		const drawerModal = computed(() => props.modal !== false);
+		const rootModal = computed(() => isDesktop.value ? rekaModal.value : drawerModal.value);
+		provideResponsivePopoverContext({
+			open: computed(() => open.value ?? false),
+			isDesktop: computed(() => isDesktop.value),
+			scrollLock: 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 openBlock(), createBlock(resolveDynamicComponent($setup.Root), {
+		open: $setup.open,
+		"onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.open = $event),
+		modal: $setup.rootModal,
+		"data-slot": "responsive-popover"
+	}, {
+		default: withCtx(() => [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__ */ 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 = useMediaQuery(() => props.breakpoint);
+		const __returned__ = {
+			props,
+			isDesktop,
+			Trigger: computed(() => isDesktop.value ? APopoverTrigger : ADrawerTrigger)
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createBlock(resolveDynamicComponent($setup.Trigger), {
+		"as-child": $setup.props.asChild,
+		"data-slot": "responsive-popover-trigger"
+	}, {
+		default: withCtx(() => [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__ */ 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 = useMediaQuery(() => props.breakpoint);
+		const isDesktop = computed(() => ctx?.isDesktop.value ?? fallbackIsDesktop.value);
+		const scrollLockMode = computed(() => ctx?.scrollLock.value ?? "events");
+		const overlayLockScroll = computed(() => scrollLockMode.value === "body");
+		const mergedClass = computed(() => [props.class, isDesktop.value ? props.popoverClass : props.drawerClass]);
+		useEventScrollLock({
+			allowedScrollContainer: () => {
+				if (typeof document === "undefined") return [];
+				return Array.from(document.querySelectorAll("[data-responsive-popover-scroll-container=\"true\"]"));
+			},
+			active: computed(() => !!ctx?.open.value && isDesktop.value && scrollLockMode.value === "events")
+		});
+		const __returned__ = {
+			props,
+			ctx,
+			fallbackIsDesktop,
+			isDesktop,
+			scrollLockMode,
+			overlayLockScroll,
+			mergedClass,
+			get APopoverContent() {
+				return APopoverContent;
+			},
+			get ADrawerContent() {
+				return ADrawerContent;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return $setup.isDesktop ? (openBlock(), createBlock($setup["APopoverContent"], {
+		key: 0,
+		overlay: $setup.props.overlay,
+		"overlay-lock-scroll": $setup.overlayLockScroll,
+		align: $setup.props.align,
+		"side-offset": $setup.props.sideOffset,
+		class: normalizeClass($setup.mergedClass),
+		"data-slot": "responsive-popover-content",
+		"data-responsive-popover-scroll-container": "true"
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, [
+		"overlay",
+		"overlay-lock-scroll",
+		"align",
+		"side-offset",
+		"class"
+	])) : (openBlock(), createBlock($setup["ADrawerContent"], {
+		key: 1,
+		class: normalizeClass($setup.mergedClass),
+		"data-slot": "responsive-popover-content"
+	}, {
+		default: withCtx(() => [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
+export { AResponsivePopover_default as AResponsivePopover, AResponsivePopoverContent_default as AResponsivePopoverContent, AResponsivePopoverTrigger_default as AResponsivePopoverTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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":";;;;;AASA,MAAM,6BAAqE,OACzE,2BACF;AAEA,SAAgB,gCAAgC,KAA+B;CAC7E,QAAQ,4BAA4B,GAAG;AACzC;AAEA,SAAgB,8BAA+D;CAC7E,OAAO,OAAO,4BAA4B,IAAI;AAChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECXA,MAAM,QAAQ;EAQd,MAAM,OAAO,SAAoB,SAAC,MAAM;EAExC,MAAM,YAAY,oBAAoB,MAAM,UAAU;;;;;EAMtD,MAAM,OAAO,eAAgB,UAAU,QAAQ,WAAW,OAAQ;;;;;;;;;;;;;EAclE,MAAM,YAAY,eAAe;GAC/B,IAAI,MAAM,UAAU,OAAO,OAAO;GAClC,OAAO,MAAM,eAAe;EAC9B,CAAC;EACD,MAAM,cAAc,eAAe,MAAM,UAAU,KAAK;EACxD,MAAM,YAAY,eAAgB,UAAU,QAAQ,UAAU,QAAQ,YAAY,KAAM;EAExF,gCAAgC;GAC9B,MAAM,eAAe,KAAK,SAAS,KAAK;GACxC,WAAW,eAAe,UAAU,KAAK;GACzC,YAAY,eAAe,MAAM,UAAU;EAC7C,CAAC;;;;;;;;;;;;;;;;;;qBAIC,YAEY,wBAFI,OAAA,IAAI,GAAA;EAAU,MAAM,OAAA;yDAAA,OAAA,OAAI;EAAG,OAAO,OAAA;EAAW,aAAU;;yBACrC,CAAhC,WAAgC,KAAA,QAAA,WAAA,EAAzB,WAAY,OAAA,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;EChDhC,MAAM,QAAQ;EAQd,MAAM,YAAY,oBAAoB,MAAM,UAAU;;;;YACtC,eAAgB,UAAU,QAAQ,kBAAkB,cAAA;;;;;;;;;;qBAIlE,YAEY,wBAFI,OAAA,OAAO,GAAA;EAAG,YAAU,OAAA,MAAM;EAAS,aAAU;;yBACnD,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECZZ,MAAM,QAAQ;EA0Bd,MAAM,MAAM,4BAA4B;EAIxC,MAAM,oBAAoB,oBAAoB,MAAM,UAAU;EAC9D,MAAM,YAAY,eAAe,KAAK,UAAU,SAAS,kBAAkB,KAAK;EAEhF,MAAM,iBAAiB,eAAe,KAAK,WAAW,SAAS,QAAQ;EACvE,MAAM,oBAAoB,eAAe,eAAe,UAAU,MAAM;EAExE,MAAM,cAAc,eAAe,CACjC,MAAM,OACN,UAAU,QAAQ,MAAM,eAAe,MAAM,WAC/C,CAAC;EAKD,mBAAmB;GACjB,8BAA8B;IAC5B,IAAI,OAAO,aAAa,aAAa,OAAO,CAAC;IAC7C,OAAO,MAAM,KACX,SAAS,iBAA8B,qDAAmD,CAC5F;GACF;GACA,QAAQ,eAAe,CAAC,CAAC,KAAK,KAAK,SAAS,UAAU,SAAS,eAAe,UAAU,QAAQ;EAClG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;QAKS,OAAA,aAAA,UAAA,GADR,YAWkB,OAAA,oBAAA;;EATf,SAAS,OAAA,MAAM;EACf,uBAAqB,OAAA;EACrB,OAAO,OAAA,MAAM;EACb,eAAa,OAAA,MAAM;EACnB,OAAK,eAAE,OAAA,WAAW;EACnB,aAAU;EACV,4CAAyC;;yBAEjC,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;;;;qBAEV,YAEiB,OAAA,mBAAA;;EAFO,OAAK,eAAE,OAAA,WAAW;EAAE,aAAU;;yBAC5C,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/nuxt/index.cjs

@@ -0,0 +1,30 @@
+let _nuxt_kit = require("@nuxt/kit");
+//#region src/nuxt/index.ts
+const COMPONENTS = {
+	AResponsivePopover: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverContent: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverTrigger: "@alikhalilll/a-responsive-popover"
+};
+const module$1 = (0, _nuxt_kit.defineNuxtModule)({
+	meta: {
+		name: "@alikhalilll/a-responsive-popover",
+		configKey: "aResponsivePopover",
+		compatibility: { nuxt: ">=3.0.0" }
+	},
+	defaults: { prefix: "" },
+	setup(opts) {
+		const prefix = opts.prefix ?? "";
+		for (const [exportName, from] of Object.entries(COMPONENTS)) {
+			const baseName = exportName.startsWith("A") ? exportName.slice(1) : exportName;
+			(0, _nuxt_kit.addComponent)({
+				name: `${prefix}${prefix ? baseName : exportName}`,
+				export: exportName,
+				filePath: from
+			});
+		}
+	}
+});
+//#endregion
+module.exports = module$1;
+
+//# sourceMappingURL=index.cjs.map

package/dist/nuxt/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["module"],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-responsive-popover/nuxt` — registers the responsive-popover\n * components for Nuxt auto-import. Also import the a-popover and a-drawer\n * stylesheets (this component renders them), plus a-ui-base tokens.\n */\n\nexport interface ModuleOptions {\n  prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n  AResponsivePopover: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@alikhalilll/a-responsive-popover',\n    configKey: 'aResponsivePopover',\n    compatibility: { nuxt: '>=3.0.0' },\n  },\n  defaults: { prefix: '' },\n  setup(opts) {\n    const prefix = opts.prefix ?? '';\n    for (const [exportName, from] of Object.entries(COMPONENTS)) {\n      const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n      const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n      addComponent({ name: registeredName, export: exportName, filePath: from });\n    }\n  },\n});\n\nexport default module;\n"],"mappings":";;AAaA,MAAM,aAAqC;CACzC,oBAAoB;CACpB,2BAA2B;CAC3B,2BAA2B;AAC7B;AAEA,MAAMA,YAAAA,GAAAA,UAAAA,kBAAoE;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,CAAA,GAAA,UAAA,cAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}

package/dist/nuxt/index.d.cts

@@ -0,0 +1,15 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-responsive-popover/nuxt` — registers the responsive-popover
+ * components for Nuxt auto-import. Also import the a-popover and a-drawer
+ * stylesheets (this component renders them), plus a-ui-base tokens.
+ */
+interface ModuleOptions {
+  prefix?: string;
+}
+declare const module: NuxtModule<ModuleOptions>;
+//#endregion
+export { ModuleOptions, module as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/nuxt/index.d.ts

@@ -0,0 +1,15 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-responsive-popover/nuxt` — registers the responsive-popover
+ * components for Nuxt auto-import. Also import the a-popover and a-drawer
+ * stylesheets (this component renders them), plus a-ui-base tokens.
+ */
+interface ModuleOptions {
+  prefix?: string;
+}
+declare const module: NuxtModule<ModuleOptions>;
+//#endregion
+export { ModuleOptions, module as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/nuxt/index.js

@@ -0,0 +1,30 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+//#region src/nuxt/index.ts
+const COMPONENTS = {
+	AResponsivePopover: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverContent: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverTrigger: "@alikhalilll/a-responsive-popover"
+};
+const module = defineNuxtModule({
+	meta: {
+		name: "@alikhalilll/a-responsive-popover",
+		configKey: "aResponsivePopover",
+		compatibility: { nuxt: ">=3.0.0" }
+	},
+	defaults: { prefix: "" },
+	setup(opts) {
+		const prefix = opts.prefix ?? "";
+		for (const [exportName, from] of Object.entries(COMPONENTS)) {
+			const baseName = exportName.startsWith("A") ? exportName.slice(1) : exportName;
+			addComponent({
+				name: `${prefix}${prefix ? baseName : exportName}`,
+				export: exportName,
+				filePath: from
+			});
+		}
+	}
+});
+//#endregion
+export { module as default };
+
+//# sourceMappingURL=index.js.map

package/dist/nuxt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-responsive-popover/nuxt` — registers the responsive-popover\n * components for Nuxt auto-import. Also import the a-popover and a-drawer\n * stylesheets (this component renders them), plus a-ui-base tokens.\n */\n\nexport interface ModuleOptions {\n  prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n  AResponsivePopover: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@alikhalilll/a-responsive-popover',\n    configKey: 'aResponsivePopover',\n    compatibility: { nuxt: '>=3.0.0' },\n  },\n  defaults: { prefix: '' },\n  setup(opts) {\n    const prefix = opts.prefix ?? '';\n    for (const [exportName, from] of Object.entries(COMPONENTS)) {\n      const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n      const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n      addComponent({ name: registeredName, export: exportName, filePath: from });\n    }\n  },\n});\n\nexport default module;\n"],"mappings":";;AAaA,MAAM,aAAqC;CACzC,oBAAoB;CACpB,2BAA2B;CAC3B,2BAA2B;AAC7B;AAEA,MAAM,SAAoC,iBAAgC;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,aAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}

package/dist/resolver/index.cjs

@@ -0,0 +1,25 @@
+//#region src/resolver/index.ts
+const COMPONENT_TO_ENTRY = {
+	AResponsivePopover: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverContent: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverTrigger: "@alikhalilll/a-responsive-popover"
+};
+function AResponsivePopoverResolver(opts = {}) {
+	const prefix = opts.prefix ?? "";
+	return {
+		type: "component",
+		resolve(name) {
+			const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+			const from = COMPONENT_TO_ENTRY[bare];
+			if (!from) return;
+			return {
+				name: bare,
+				from
+			};
+		}
+	};
+}
+//#endregion
+module.exports = AResponsivePopoverResolver;
+
+//# sourceMappingURL=index.cjs.map

package/dist/resolver/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-responsive-popover/resolver` — auto-import resolver for\n * non-Nuxt Vite/Webpack consumers via `unplugin-vue-components`.\n */\n\nexport interface ResolverOptions {\n  prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n  AResponsivePopover: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',\n};\n\nexport default function AResponsivePopoverResolver(opts: ResolverOptions = {}): ComponentResolver {\n  const prefix = opts.prefix ?? '';\n  return {\n    type: 'component',\n    resolve(name) {\n      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n      const from = COMPONENT_TO_ENTRY[bare];\n      if (!from) return;\n      return { name: bare, from };\n    },\n  };\n}\n"],"mappings":";AAWA,MAAM,qBAA6C;CACjD,oBAAoB;CACpB,2BAA2B;CAC3B,2BAA2B;AAC7B;AAEA,SAAwB,2BAA2B,OAAwB,CAAC,GAAsB;CAChG,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}

package/dist/resolver/index.d.cts

@@ -0,0 +1,14 @@
+import { ComponentResolver } from "unplugin-vue-components";
+
+//#region src/resolver/index.d.ts
+/**
+ * `@alikhalilll/a-responsive-popover/resolver` — auto-import resolver for
+ * non-Nuxt Vite/Webpack consumers via `unplugin-vue-components`.
+ */
+interface ResolverOptions {
+  prefix?: string;
+}
+declare function AResponsivePopoverResolver(opts?: ResolverOptions): ComponentResolver;
+//#endregion
+export { ResolverOptions, AResponsivePopoverResolver as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/resolver/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentResolver } from "unplugin-vue-components";
+
+//#region src/resolver/index.d.ts
+/**
+ * `@alikhalilll/a-responsive-popover/resolver` — auto-import resolver for
+ * non-Nuxt Vite/Webpack consumers via `unplugin-vue-components`.
+ */
+interface ResolverOptions {
+  prefix?: string;
+}
+declare function AResponsivePopoverResolver(opts?: ResolverOptions): ComponentResolver;
+//#endregion
+export { ResolverOptions, AResponsivePopoverResolver as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/resolver/index.js

@@ -0,0 +1,25 @@
+//#region src/resolver/index.ts
+const COMPONENT_TO_ENTRY = {
+	AResponsivePopover: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverContent: "@alikhalilll/a-responsive-popover",
+	AResponsivePopoverTrigger: "@alikhalilll/a-responsive-popover"
+};
+function AResponsivePopoverResolver(opts = {}) {
+	const prefix = opts.prefix ?? "";
+	return {
+		type: "component",
+		resolve(name) {
+			const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+			const from = COMPONENT_TO_ENTRY[bare];
+			if (!from) return;
+			return {
+				name: bare,
+				from
+			};
+		}
+	};
+}
+//#endregion
+export { AResponsivePopoverResolver as default };
+
+//# sourceMappingURL=index.js.map

package/dist/resolver/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-responsive-popover/resolver` — auto-import resolver for\n * non-Nuxt Vite/Webpack consumers via `unplugin-vue-components`.\n */\n\nexport interface ResolverOptions {\n  prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n  AResponsivePopover: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverContent: '@alikhalilll/a-responsive-popover',\n  AResponsivePopoverTrigger: '@alikhalilll/a-responsive-popover',\n};\n\nexport default function AResponsivePopoverResolver(opts: ResolverOptions = {}): ComponentResolver {\n  const prefix = opts.prefix ?? '';\n  return {\n    type: 'component',\n    resolve(name) {\n      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n      const from = COMPONENT_TO_ENTRY[bare];\n      if (!from) return;\n      return { name: bare, from };\n    },\n  };\n}\n"],"mappings":";AAWA,MAAM,qBAA6C;CACjD,oBAAoB;CACpB,2BAA2B;CAC3B,2BAA2B;AAC7B;AAEA,SAAwB,2BAA2B,OAAwB,CAAC,GAAsB;CAChG,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}.sticky{position:sticky}.hidden{display:none}

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@alikhalilll/a-responsive-popover",
+  "version": "1.0.1",
+  "description": "Vue 3 responsive popover: a reka-ui popover on desktop that becomes a vaul drawer on mobile. Part of the @alikhalilll/a-* toolkit.",
+  "license": "MIT",
+  "author": "alikhalilll",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alikhalilll/ali-nuxt-toolkit.git",
+    "directory": "packages/ui-components/AResponsivePopover"
+  },
+  "homepage": "https://alikhalilll.github.io/ali-nuxt-toolkit/ui",
+  "bugs": {
+    "url": "https://github.com/alikhalilll/ali-nuxt-toolkit/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "popover",
+    "drawer",
+    "responsive",
+    "headless",
+    "shadcn"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./dist/nuxt/index.d.ts",
+        "default": "./dist/nuxt/index.js"
+      },
+      "require": {
+        "types": "./dist/nuxt/index.d.cts",
+        "default": "./dist/nuxt/index.cjs"
+      }
+    },
+    "./resolver": {
+      "import": {
+        "types": "./dist/resolver/index.d.ts",
+        "default": "./dist/resolver/index.js"
+      },
+      "require": {
+        "types": "./dist/resolver/index.d.cts",
+        "default": "./dist/resolver/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "web-types": "./web-types.json",
+  "files": [
+    "dist",
+    "src",
+    "web-types.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@vueuse/core": "^14.0.0",
+    "unplugin-vue-components": "^28.0.0 || ^29.0.0 || ^30.0.0 || ^31.0.0 || ^32.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "unplugin-vue-components": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@alikhalilll/a-popover": "1.0.1",
+    "@alikhalilll/a-drawer": "1.0.1"
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tsdown/css": "0.22.0",
+    "@types/node": "^22.13.0",
+    "@vueuse/core": "^14.0.0",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.0.0",
+    "tsdown": "0.22.0",
+    "typescript": "^5.9.2",
+    "unplugin-vue": "7.2.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.4",
+    "@alikhalilll/a-ui-base": "1.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist web-types.json",
+    "build": "tsx ../../../scripts/build/run-component-build.ts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "validate-dist": "tsx ../../../scripts/validate/dist-validate.ts --pkg a-responsive-popover",
+    "validate-consumer": "tsx ../../../scripts/validate/consumer-validate.ts --pkg a-responsive-popover",
+    "validate": "pnpm build && pnpm validate-dist && pnpm validate-consumer"
+  }
+}