@alikhalilll/a-tel-input 1.1.0 → 1.1.1

package/.media/README.md

@@ -0,0 +1,3 @@
+# Media
+
+Drop `hero.png` here (≈1200 × 720, ~150–250 KB) — a screenshot of `<ATelInput>` with the country picker open on the light theme. Referenced from the package README via `raw.githubusercontent.com`.

package/README.md

@@ -1,12 +1,24 @@
 # `@alikhalilll/a-tel-input`
 
+<p align="center">
+  <img
+    src="https://raw.githubusercontent.com/alikhalilll/ali-nuxt-toolkit/master/packages/ui-components/ATelInput/.media/hero.png"
+    alt="ATelInput — input on the left with the country picker open next to it, showing flags, country names, and dial codes"
+    width="820"
+  />
+</p>
+
+<p align="center">
+  <sub>Headless picker — popover on desktop, bottom-sheet on mobile.</sub>
+</p>
+
 > A headless, shadcn-vue style **international telephone input** for Vue 3 / Nuxt 3+.
 > Country auto-detect · libphonenumber-js validation · responsive picker (popover ⇆ drawer) ·
 > RTL & i18n ready · first-class VeeValidate + Zod integration · server-side validation hook.
 
-[![npm version](https://img.shields.io/npm/v/%40alikhalilll%2Fa-tel-input.svg?label=npm)](https://www.npmjs.com/package/@alikhalilll/a-tel-input)
-[![license](https://img.shields.io/npm/l/%40alikhalilll%2Fa-tel-input.svg)](./LICENSE)
-[![types](https://img.shields.io/npm/types/%40alikhalilll%2Fa-tel-input.svg)](https://www.npmjs.com/package/@alikhalilll/a-tel-input)
+[![npm version](https://img.shields.io/npm/v/%40alikhalilll%2Fa-tel-input.svg?style=for-the-badge&label=npm&labelColor=0a0a0a&color=635bff)](https://www.npmjs.com/package/@alikhalilll/a-tel-input)
+[![license](https://img.shields.io/npm/l/%40alikhalilll%2Fa-tel-input.svg?style=for-the-badge&labelColor=0a0a0a&color=635bff)](./LICENSE)
+[![types](https://img.shields.io/npm/types/%40alikhalilll%2Fa-tel-input.svg?style=for-the-badge&labelColor=0a0a0a&color=635bff)](https://www.npmjs.com/package/@alikhalilll/a-tel-input)
 
 ```bash
 # pnpm

package/dist/index.cjs

@@ -16604,11 +16604,6 @@ const _sfc_main$2$2 = /* @__PURE__ */ (0, vue.defineComponent)({
 		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 ? APopover_default : ADrawer_default);
-		/**
 		* Per-branch `modal` resolution — the two roots interpret the prop differently:
 		*
 		*   APopover (desktop, reka-ui): `modal=true` triggers `PopoverContentModal` + its
@@ -16625,7 +16620,7 @@ const _sfc_main$2$2 = /* @__PURE__ */ (0, vue.defineComponent)({
 			return props.scrollLock === "body";
 		});
 		const drawerModal = (0, vue.computed)(() => props.modal !== false);
-		const rootModal = (0, vue.computed)(() => isDesktop.value ? rekaModal.value : drawerModal.value);
+		const drawerNoBodyStyles = (0, vue.computed)(() => props.scrollLock !== "body");
 		provideResponsivePopoverContext({
 			open: (0, vue.computed)(() => open.value ?? false),
 			isDesktop: (0, vue.computed)(() => isDesktop.value),
@@ -16635,10 +16630,15 @@ const _sfc_main$2$2 = /* @__PURE__ */ (0, vue.defineComponent)({
 			props,
 			open,
 			isDesktop,
-			Root,
 			rekaModal,
 			drawerModal,
-			rootModal
+			drawerNoBodyStyles,
+			get APopover() {
+				return APopover_default;
+			},
+			get ADrawer() {
+				return ADrawer_default;
+			}
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -16648,15 +16648,30 @@ const _sfc_main$2$2 = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 function _sfc_render$2$2(_ctx, _cache, $props, $setup, $data, $options) {
-	return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)($setup.Root), {
+	return $setup.isDesktop ? ((0, vue.openBlock)(), (0, vue.createBlock)($setup["APopover"], {
+		key: 0,
 		open: $setup.open,
 		"onUpdate:open": _cache[0] || (_cache[0] = ($event) => $setup.open = $event),
-		modal: $setup.rootModal,
+		modal: $setup.rekaModal,
+		"data-slot": "responsive-popover"
+	}, {
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { isDesktop: true })]),
+		_: 3
+	}, 8, ["open", "modal"])) : ((0, vue.openBlock)(), (0, vue.createBlock)($setup["ADrawer"], {
+		key: 1,
+		open: $setup.open,
+		"onUpdate:open": _cache[1] || (_cache[1] = ($event) => $setup.open = $event),
+		modal: $setup.drawerModal,
+		"no-body-styles": $setup.drawerNoBodyStyles,
 		"data-slot": "responsive-popover"
 	}, {
-		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { isDesktop: $setup.isDesktop })]),
+		default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { isDesktop: false })]),
 		_: 3
-	}, 40, ["open", "modal"]);
+	}, 8, [
+		"open",
+		"modal",
+		"no-body-styles"
+	]));
 }
 var AResponsivePopover_default = /* @__PURE__ */ export_helper_default$3(_sfc_main$2$2, [["render", _sfc_render$2$2], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/AResponsivePopover/src/components/AResponsivePopover.vue"]]);
 const _sfc_main$1$2 = /* @__PURE__ */ (0, vue.defineComponent)({