npm - @alikhalilll/ui - Versions diffs - 1.1.0 → 1.2.0 - Mend

@alikhalilll/ui 1.1.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md CHANGED Viewed

@@ -1,13 +1,29 @@
 # @alikhalilll/ui
-Headless, [shadcn-vue](https://www.shadcn-vue.com/) style component library for Vue 3 (and Nuxt). Built on [reka-ui](https://reka-ui.com) and [vaul-vue](https://github.com/unovue/vaul-vue), fully typed, scalable, with sensible defaults you can override on every level.
+[![npm](https://img.shields.io/npm/v/@alikhalilll/ui.svg?color=444)](https://www.npmjs.com/package/@alikhalilll/ui)
+[![downloads](https://img.shields.io/npm/dm/@alikhalilll/ui.svg?color=444)](https://www.npmjs.com/package/@alikhalilll/ui)
+[![size](https://img.shields.io/bundlephobia/minzip/@alikhalilll/ui?label=minzip&color=444)](https://bundlephobia.com/package/@alikhalilll/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-444.svg)](./LICENSE)
-The first component shipped is **`ATellInput`** — a phone-number input that:
+Headless, shadcn-vue style Vue 3 component library — every component lives behind its own subpath import so consumers only ship the components they actually use. Built on [reka-ui](https://reka-ui.com) and [vaul-vue](https://github.com/unovue/vaul-vue), themed via prefixed CSS variables, fully typed.
-- Detects the user's country automatically (IP geolocation → timezone → `navigator.language` → fallback).
-- Validates and formats input via [`libphonenumber-js`](https://www.npmjs.com/package/libphonenumber-js).
-- Renders a **popover on desktop, vaul-vue drawer on mobile** for the country picker.
-- Exposes every sub-primitive so you can compose your own variant if the default doesn't fit.
+📚 **Live docs:** <https://alikhalilll.github.io/ali-nuxt-toolkit/ui>
+📦 **npm:** <https://www.npmjs.com/package/@alikhalilll/ui>
+🐙 **Source:** <https://github.com/alikhalilll/ali-nuxt-toolkit/tree/master/packages/ui>
+---
+## Components
+| Component            | Subpath                              | Per-component README                                                             | Live docs                                                                                      |
+| -------------------- | ------------------------------------ | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `ATellInput`         | `@alikhalilll/ui/tell-input`         | [./entries/tell-input/README.md](./entries/tell-input/README.md)                 | [/ui/tell-input](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/tell-input)                 |
+| `AInput`             | `@alikhalilll/ui/input`              | [./entries/input/README.md](./entries/input/README.md)                           | [/ui/input](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/input)                           |
+| `APopover`           | `@alikhalilll/ui/popover`            | [./entries/popover/README.md](./entries/popover/README.md)                       | [/ui/popover](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/popover)                       |
+| `ADrawer`            | `@alikhalilll/ui/drawer`             | [./entries/drawer/README.md](./entries/drawer/README.md)                         | [/ui/drawer](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/drawer)                         |
+| `AResponsivePopover` | `@alikhalilll/ui/responsive-popover` | [./entries/responsive-popover/README.md](./entries/responsive-popover/README.md) | [/ui/responsive-popover](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/responsive-popover) |
+Each README ships inside the npm tarball at `node_modules/@alikhalilll/ui/entries/<name>/README.md` and is rendered on the file browser at <https://www.npmjs.com/package/@alikhalilll/ui?activeTab=code>.
 ## Install
@@ -15,129 +31,164 @@ The first component shipped is **`ATellInput`** — a phone-number input that:
 pnpm add @alikhalilll/ui
 ```
-Peer dependency: `vue ^3.5.0`. The library bundles `reka-ui`, `vaul-vue`, `libphonenumber-js`, `lucide-vue-next`, `@vueuse/core`, `class-variance-authority`, `clsx`, and `tailwind-merge`.
-### Per-component subpath imports
+Peer dependency: `vue ^3.5.0`. Bundled deps: `reka-ui`, `vaul-vue`, `libphonenumber-js`, `lucide-vue-next`, `@vueuse/core`, `class-variance-authority`, `clsx`, `tailwind-merge`.
-Each component lives behind its own subpath so consumers can pull a single component without dragging the rest of the library into their bundle:
+### Subpath imports (recommended)
 ```ts
-// Minimal — only the tell-input chunk gets included.
+// Only the tell-input chunk ships into the bundle.
 import { ATellInput } from '@alikhalilll/ui/tell-input';
-// Or the main entry (modern bundlers tree-shake unused exports via `sideEffects`).
-import { ATellInput } from '@alikhalilll/ui';
+// Main entry — bundlers still tree-shake unused exports via `sideEffects`.
+import { ATellInput, APopover } from '@alikhalilll/ui';
 ```
 Available subpaths: `/tell-input`, `/input`, `/popover`, `/drawer`, `/responsive-popover`, `/utils`.
 ## Setup
-The components are styled with Tailwind utility classes (`bg-popover`, `text-destructive`, etc.) that resolve to CSS variables shipped in `@alikhalilll/ui/styles.css`. You need to:
+Components style themselves with Tailwind utility classes (`bg-popover`, `text-muted-foreground`, …) resolving to CSS variables shipped at `@alikhalilll/ui/styles.css`. Three steps:
-1. **Import the variables** somewhere global:
+### 1. Import the tokens
-   ```ts
-   // In a Nuxt config or your main entry
-   import '@alikhalilll/ui/styles.css';
-   ```
+**Nuxt 3 / 4:**
-2. **Expose the variables to Tailwind**. For Tailwind v4 add an `@theme inline` block to your global stylesheet:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['@alikhalilll/ui/styles.css'],
+});
+```
-   ```css
-   @import 'tailwindcss';
-   @import '@alikhalilll/ui/styles.css';
+**Vue + Vite (no Nuxt):**
-   @theme inline {
-     --color-background: hsl(var(--ak-ui-background));
-     --color-foreground: hsl(var(--ak-ui-foreground));
-     --color-popover: hsl(var(--ak-ui-popover));
-     --color-popover-foreground: hsl(var(--ak-ui-popover-foreground));
-     --color-primary: hsl(var(--ak-ui-primary));
-     --color-primary-foreground: hsl(var(--ak-ui-primary-foreground));
-     --color-muted: hsl(var(--ak-ui-muted));
-     --color-muted-foreground: hsl(var(--ak-ui-muted-foreground));
-     --color-accent: hsl(var(--ak-ui-accent));
-     --color-accent-foreground: hsl(var(--ak-ui-accent-foreground));
-     --color-destructive: hsl(var(--ak-ui-destructive));
-     --color-destructive-foreground: hsl(var(--ak-ui-destructive-foreground));
-     --color-border: hsl(var(--ak-ui-border));
-     --color-input: hsl(var(--ak-ui-input));
-     --color-ring: hsl(var(--ak-ui-ring));
-   }
-   ```
+```ts
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import '@alikhalilll/ui/styles.css';
-   For Tailwind v3, add the same colors to `theme.extend.colors` in `tailwind.config.ts`.
+createApp(App).mount('#app');
+```
-3. **Toggle dark mode** by adding `.dark` to a parent element (typically `<html>`).
+Every variable is prefixed `--ak-ui-` — guaranteed not to collide with your own CSS.
+### 2. Map to Tailwind v4
+```css
+@import 'tailwindcss';
+@import '@alikhalilll/ui/styles.css';
+@source '../node_modules/@alikhalilll/ui/dist/index.mjs';
+@theme inline {
+  --color-background: hsl(var(--ak-ui-background));
+  --color-foreground: hsl(var(--ak-ui-foreground));
+  --color-popover: hsl(var(--ak-ui-popover));
+  --color-popover-foreground: hsl(var(--ak-ui-popover-foreground));
+  --color-muted: hsl(var(--ak-ui-muted));
+  --color-muted-foreground: hsl(var(--ak-ui-muted-foreground));
+  --color-accent: hsl(var(--ak-ui-accent));
+  --color-accent-foreground: hsl(var(--ak-ui-accent-foreground));
+  --color-destructive: hsl(var(--ak-ui-destructive));
+  --color-destructive-foreground: hsl(var(--ak-ui-destructive-foreground));
+  --color-border: hsl(var(--ak-ui-border));
+  --color-input: hsl(var(--ak-ui-input));
+  --color-ring: hsl(var(--ak-ui-ring));
+}
+```
+`@source` tells Tailwind v4 to scan the lib's compiled templates — it skips `node_modules` by default. Inside a pnpm workspace, point at the source so HMR works:
-   The lib ships **both** `:root, .light { … }` and `.dark { … }` blocks. You can lock the theme:
+```css
+@source '../../packages/ui/index.ts';
+@source '../../packages/ui/entries/**/*.{vue,ts}';
+@source '../../packages/ui/utils/**/*.ts';
+```
-   ```ts
-   // Locked dark
-   export default defineNuxtConfig({
-     app: { head: { htmlAttrs: { class: 'dark' } } },
-   });
-   ```
+### 3. Dark mode
-   Or run a tri-state Light / Dark / System switcher that follows `prefers-color-scheme`. The docs site under [`apps/docs/composables/useColorMode.ts`](https://github.com/alikhalilll/ali-nuxt-toolkit/blob/master/apps/docs/composables/useColorMode.ts) ships a complete working pattern (persisted preference, OS-change listener, pre-paint inline script to avoid flash of wrong theme) that you can copy as-is.
+The lib ships both `.light` and `.dark` blocks. Toggle the class on `<html>` — portaled popovers and drawers inherit via the cascade.
-## Usage
+**Nuxt 3 / 4 — locked dark:**
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  app: { head: { htmlAttrs: { class: 'dark' } } },
+});
+```
+**Vue + Vite — locked dark:**
+```html
+<!-- index.html -->
+<html class="dark">
+  ...
+</html>
+```
+For Light / Dark / System (persisted, OS-aware, no flash of wrong theme), see [`apps/docs/composables/useColorMode.ts`](https://github.com/alikhalilll/ali-nuxt-toolkit/blob/master/apps/docs/composables/useColorMode.ts) — the pattern is framework-agnostic.
+## Quick start
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ATellInput } from '@alikhalilll/ui';
+import { ATellInput } from '@alikhalilll/ui/tell-input';
 const phone = ref('');
-const country = ref<number | null>(null);
+const country = ref<number | null>(null); // dial number, e.g. 20 for Egypt
 </script>
 <template>
-  <ATellInput
-    v-model:phone="phone"
-    v-model:country="country"
-    default-country="20"
-    show-validation
-  />
+  <ATellInput v-model:phone="phone" v-model:country="country" show-validation />
 </template>
 ```
-### Props
-| Prop                | Type                                             | Default                        | Description                                                                                |
-| ------------------- | ------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------ |
-| `v-model:phone`     | `string`                                         | `''`                           | Digits-only national number (no leading `+` or dial code).                                 |
-| `v-model:country`   | `string`                                         | `''`                           | ISO 3166-1 alpha-2 code, e.g. `"EG"`.                                                      |
-| `placeholder`       | `string`                                         | `'Phone number'`               | Falls back to the country's example number when empty.                                     |
-| `disabled`          | `boolean`                                        | `false`                        |                                                                                            |
-| `loading`           | `boolean`                                        | `false`                        | Disables interaction.                                                                      |
-| `size`              | `'sm' \| 'default' \| 'lg'`                      | `'default'`                    | Controls input height (32 / 36 / 40 px).                                                   |
-| `allowedDialCodes`  | `string[]`                                       | _all_                          | Whitelist of dial-digit codes (no `+`). Countries outside the list are shown but disabled. |
-| `showValidation`    | `boolean`                                        | `false`                        | Renders an error message below the input when invalid.                                     |
-| `detectCountry`     | `'auto' \| 'locale' \| 'none'`                   | `'auto'`                       | Strategy for the silent environment lookup (hint source for input detection).              |
-| `defaultCountry`    | `string`                                         | `''`                           | Explicit initial country. When set, the picker is visible at mount.                        |
-| `detectFromInput`   | `boolean`                                        | `true`                         | Default mode: picker hidden until input matches a dial code. Set `false` for legacy.       |
-| `detectDebounceMs`  | `number`                                         | `150`                          | Debounce window (ms) for input-driven detection.                                           |
-| `ipEndpoint`        | `string`                                         | `'https://ipapi.co/json/'`     | Override the geolocation endpoint. Must return JSON with `country_code` or `country`.      |
-| `searchPlaceholder` | `string`                                         | `'Search by country or code…'` | Country picker search input placeholder.                                                   |
-| `emptyText`         | `string`                                         | `'No countries found.'`        | Shown when the search yields no results.                                                   |
-| `loadingText`       | `string`                                         | `'Loading…'`                   | Shown while the country list is loading.                                                   |
-| `errorMessages`     | `Partial<Record<PhoneValidationReason, string>>` | English defaults               | Override the validation error labels.                                                      |
-| `class`             | `string \| any[] \| Record<string, boolean>`     | —                              | Merged into the outer wrapper via `tailwind-merge`.                                        |
-### Exposed (via template ref)
+The picker stays hidden until the user types or pastes something that matches a known dial code, then a flag-only trigger reveals at the end of the field with the dial code as an inline prefix, and `phone` is normalised to the national significant number (`01066105963` → `1066105963`, `+447911123456` → `7911123456`). RTL-aware, localisable via `locale` / `messages`, and accepts alternative numerals.
+Full props, slots, theming recipes, and live demos → [tell-input docs](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/tell-input) or [./entries/tell-input/README.md](./entries/tell-input/README.md).
+## Nuxt integration
+`@alikhalilll/ui` is a plain Vue 3 library — works in Nuxt 3 / 4 without a module wrapper. Full guide (auto-imports, SSR behaviour, source globs) on the [docs site](https://alikhalilll.github.io/ali-nuxt-toolkit/ui#nuxt-integration).
 ```ts
-const ref = ref<InstanceType<typeof ATellInput>>();
-ref.value.validation; // PhoneValidationResult — computed, reactive
-ref.value.required; // PhoneRequiredInfo | null — example, length range, format hint
-ref.value.selectedDialCode; // '+20' | null
+// nuxt.config.ts — optional auto-import
+export default defineNuxtConfig({
+  components: [{ path: '@alikhalilll/ui', pathPrefix: false, global: true }],
+});
+```
+## Theming
+Override any `--ak-ui-*` variable globally, per wrapper, or inline:
+```css
+.tenant-acme {
+  --ak-ui-popover: 220 70% 8%;
+  --ak-ui-accent: 220 50% 30%;
+  --ak-ui-ring: 220 100% 65%;
+}
 ```
-## Compose your own component
+Values are HSL **triplets** — no `hsl(…)` wrapper. Full token list + recipes (brand-only, day/night, multi-tenant, server-driven, state-specific) → [theming guide](https://alikhalilll.github.io/ali-nuxt-toolkit/ui#theming).
+## Size scale
+| Token | Height              | Tailwind   |
+| ----- | ------------------- | ---------- |
+| `xs`  | 28 px               | `h-7`      |
+| `sm`  | 36 px               | `h-9`      |
+| `md`  | **43 px (default)** | `h-[43px]` |
+| `lg`  | 52 px               | `h-[52px]` |
+| `xl`  | 60 px               | `h-[60px]` |
+`controlHeight`, `controlPaddingX`, `controlTextSize`, `controlHeightPx`, `SIZES`, `DEFAULT_SIZE`, and the `Size` type are exported so you can build size-aware components in lockstep with the library.
-Every primitive, composable, and CVA helper is re-exported from the package root, so you can build a custom variant without forking the library.
+## Compose your own variant
+Every primitive, composable, and helper is re-exported — fork-free composition:
 ```ts
 import {
@@ -165,102 +216,13 @@ import {
   ACountryFlag,
   aTellInputVariants,
   DEFAULT_ERROR_MESSAGES,
+  defaultFlagUrl,
-  // Utilities
+  // Helpers
   cn,
 } from '@alikhalilll/ui';
-// Build your own tel input from the same composables
-const { validate, getCountries, searchCountries } = usePhoneValidation();
-const detected = await detectCountry({ strategy: 'auto' });
 ```
-Or pull the country select on its own (any list-of-countries UI):
-```vue
-<ACountrySelect v-model:selected="iso2" />
-```
-Or build any responsive popover (popover-on-desktop, drawer-on-mobile):
-```vue
-<AResponsivePopover v-model:open="open">
-  <AResponsivePopoverTrigger as-child>
-    <button>Open</button>
-  </AResponsivePopoverTrigger>
-  <AResponsivePopoverContent>
-    <p>Content</p>
-  </AResponsivePopoverContent>
-</AResponsivePopover>
-```
-## Full customization
-`ATellInput` exposes a deep customization surface across three vectors. Every override is opt-in — defaults are sensible, so a vanilla `<ATellInput />` works out of the box.
-**Slots (replace any rendered region):**
-```
-prefix · suffix · trigger · chevron · flag · search · search-icon ·
-loading · empty · group-header · item · item-check · valid-icon ·
-error-icon · hint · error
-```
-**Data-override props:**
-```ts
-flagUrl?:   (iso2, width) => string                                   // swap flagcdn.com for any source
-countries?: CountryOption[]                                          // bypass REST Countries; ship your own list
-searcher?:  (query, country) => boolean                              // custom search (fuzzy/starts-with/locale-aware)
-detector?:  (opts) => Promise<string | null>                         // custom country detection (e.g. server-driven)
-errorMessages?: Partial<Record<PhoneValidationReason, string>>       // i18n
-kbdOpen?: string | null      // override the '⌘K' hint
-kbdClose?: string | null     // override the 'Esc' hint
-```
-**Class-override props (every region):** `class`, `fieldClass`, `inputClass`, `contentClass`, `popoverClass`, `drawerClass`, `hintClass`, `errorClass`. All merged via `tailwind-merge`, so you only specify the bits you want to change.
-**Example — fully bespoke trigger, custom country list, custom searcher, custom detector:**
-```vue
-<script setup lang="ts">
-import { ATellInput, defaultFlagUrl, type CountryOption } from '@alikhalilll/ui';
-const countries: CountryOption[] = [
-  /* … your curated list … */
-];
-const flagUrl = (iso: string) => `/flags/${iso.toLowerCase()}.svg`;
-const searcher = (q: string, c: CountryOption) =>
-  c.raw_data.name.toLowerCase().startsWith(q.toLowerCase());
-async function detector() {
-  // Pretend your backend tells you the user's country from the request
-  const { country } = await $fetch('/api/locale');
-  return country;
-}
-</script>
-<template>
-  <ATellInput
-    v-model:phone="phone"
-    v-model:country="country"
-    :countries="countries"
-    :flag-url="flagUrl"
-    :searcher="searcher"
-    :detector="detector"
-  >
-    <template #trigger="{ selectedCountry, open }">
-      <button :data-open="open">
-        {{ selectedCountry?.raw_data.iso2 ?? '??' }}
-      </button>
-    </template>
-  </ATellInput>
-</template>
-```
-`AInput` also exposes `#prefix` and `#suffix` slots — when either is filled the component switches to a wrapped layout so the bordered field carries the focus ring while the slot content sits inside the border. See the [docs site](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/input) for the full prop tables and a live demo gallery.
 ## Exported types
 ```ts
@@ -281,21 +243,11 @@ import type {
 } from '@alikhalilll/ui';
 ```
-The `defaultFlagUrl(iso2, width)` builder is also exported — handy for composing a custom builder on top of the default:
-```ts
-import { defaultFlagUrl } from '@alikhalilll/ui';
-const hiRes = (iso: string) => defaultFlagUrl(iso, 80);
-```
-## Country detection chain
-1. **IP geolocation** — fetch `ipEndpoint` (default `https://ipapi.co/json/`), aborted after `timeoutMs` (default 2 s). Result cached in `sessionStorage` so re-mounts skip the network call.
-2. **Timezone** — `Intl.DateTimeFormat().resolvedOptions().timeZone` against a built-in IANA-zone-to-ISO2 map (~70 zones, covers most populated cities).
-3. **`navigator.language`** — extracts the region from tags like `en-US`, `ar-EG`, `pt-BR`.
-4. **`defaultCountry`** — final fallback (`'US'` if you don't set one).
+## Notes
-Pass `detect-country="locale"` to skip the IP step (no network), or `detect-country="none"` to use `defaultCountry` immediately.
+- **Country detection** runs only in `onMounted` — the input renders immediately with `defaultCountry` (or empty); the detected ISO2 patches in on hydration.
+- The default tel-input behaviour is **picker hidden until detected** (`detect-from-input`). Pass `:detect-from-input="false"` to opt out, or `default-country="20"` / `default-country="EG"` to pre-fill the picker at mount.
+- Import `@alikhalilll/ui/styles.css` **before** your overrides so your overrides win the cascade.
 ## License

package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs ADDED Viewed

@@ -0,0 +1,132 @@
+import { defineComponent as u, openBlock as i, createBlock as p, unref as o, mergeProps as f, withCtx as c, renderSlot as m, normalizeProps as h, guardReactiveProps as B, onMounted as _, onBeforeUnmount as w, createElementBlock as b, normalizeClass as y, createCommentVNode as P, createVNode as A } from "vue";
+import { useForwardPropsEmits as v, PopoverRoot as O, useForwardProps as C, PopoverTrigger as S, PopoverPortal as $, PopoverContent as k } from "reka-ui";
+import { reactiveOmit as z } from "@vueuse/core";
+import { c as g } from "./cn-B6yFEsav.mjs";
+const j = /* @__PURE__ */ u({
+  __name: "APopover",
+  props: {
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    modal: { type: Boolean, default: !0 }
+  },
+  emits: ["update:open"],
+  setup(a, { emit: r }) {
+    const s = v(a, r);
+    return (d, e) => (i(), p(o(O), f({ "data-slot": "popover" }, o(s)), {
+      default: c((l) => [
+        m(d.$slots, "default", h(B(l)))
+      ]),
+      _: 3
+    }, 16));
+  }
+}), D = /* @__PURE__ */ u({
+  __name: "APopoverTrigger",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(a) {
+    const t = C(a);
+    return (n, s) => (i(), p(o(S), f({ "data-slot": "popover-trigger" }, o(t)), {
+      default: c(() => [
+        m(n.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), F = /* @__PURE__ */ u({
+  inheritAttrs: !1,
+  __name: "APopoverOverlay",
+  props: {
+    class: { type: [Boolean, null, String, Object, Array] }
+  },
+  setup(a) {
+    const r = a;
+    let t = "", n = "", s = "";
+    function d() {
+      return typeof window > "u" ? 0 : window.innerWidth - document.documentElement.clientWidth;
+    }
+    return _(() => {
+      if (typeof document > "u") return;
+      const e = document.body, l = d();
+      t = e.style.overflow, n = e.style.touchAction, s = e.style.paddingRight, e.style.overflow = "hidden", e.style.touchAction = "none", l > 0 && (e.style.paddingRight = `${l}px`);
+    }), w(() => {
+      if (typeof document > "u") return;
+      const e = document.body;
+      e.style.overflow = t, e.style.touchAction = n, e.style.paddingRight = s;
+    }), (e, l) => (i(), b("div", {
+      "data-slot": "popover-overlay",
+      "aria-hidden": "true",
+      class: y(
+        o(g)(
+          // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every
+          // click so it can never reach the page underneath. `z-50` keeps us above any normal
+          // page chrome; the popover content sits at `z-[60]`.
+          "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          r.class
+        )
+      )
+    }, null, 2));
+  }
+}), T = /* @__PURE__ */ u({
+  inheritAttrs: !1,
+  __name: "APopoverContent",
+  props: {
+    forceMount: { type: Boolean },
+    side: {},
+    sideOffset: { default: 4 },
+    sideFlip: { type: Boolean },
+    align: { default: "center" },
+    alignOffset: {},
+    alignFlip: { type: Boolean },
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    hideShiftedArrow: { type: Boolean },
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    positionStrategy: {},
+    updatePositionStrategy: {},
+    disableUpdateOnLayoutShift: { type: Boolean },
+    prioritizePosition: { type: Boolean },
+    reference: {},
+    asChild: { type: Boolean },
+    as: {},
+    disableOutsidePointerEvents: { type: Boolean },
+    class: { type: [Boolean, null, String, Object, Array] },
+    overlay: { type: Boolean, default: !1 },
+    overlayClass: { type: [Boolean, null, String, Object, Array] }
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
+  setup(a, { emit: r }) {
+    const t = a, n = r, s = z(t, "class", "overlay", "overlayClass"), d = v(s, n);
+    return (e, l) => (i(), p(o($), null, {
+      default: c(() => [
+        t.overlay ? (i(), p(F, {
+          key: 0,
+          class: y(t.overlayClass)
+        }, null, 8, ["class"])) : P("", !0),
+        A(o(k), f({ "data-slot": "popover-content" }, { ...e.$attrs, ...o(d) }, {
+          class: o(g)(
+            "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[60] w-72 rounded-md border p-4 shadow-md outline-none",
+            t.class
+          )
+        }), {
+          default: c(() => [
+            m(e.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["class"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  j as _,
+  T as a,
+  F as b,
+  D as c
+};
+//# sourceMappingURL=APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map

package/dist/chunks/APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs","sources":["../../entries/popover/components/APopover.vue","../../entries/popover/components/APopoverTrigger.vue","../../entries/popover/components/APopoverOverlay.vue","../../entries/popover/components/APopoverContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';\nimport { PopoverRoot, useForwardPropsEmits } from 'reka-ui';\n\n/**\n * Defaults `modal` to `true` so the popover locks page scroll, traps focus, and an overlay\n * (rendered by APopoverContent when `overlay` is set) actually dims the page.\n * Pass `:modal=\"false\"` for tooltip-style non-modal popovers.\n */\nconst props = withDefaults(defineProps<PopoverRootProps>(), { modal: true });\nconst emits = defineEmits<PopoverRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n <PopoverRoot v-slot=\"slotProps\" data-slot=\"popover\" v-bind=\"forwarded\">\n <slot v-bind=\"slotProps\" />\n </PopoverRoot>\n</template>\n","<script setup lang=\"ts\">\nimport type { PopoverTriggerProps } from 'reka-ui';\nimport { PopoverTrigger, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PopoverTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n <PopoverTrigger data-slot=\"popover-trigger\" v-bind=\"forwarded\">\n <slot />\n </PopoverTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport { cn } from '@/utils';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{ class?: HTMLAttributes['class'] }>();\n\n// Body-scroll-lock for the lifetime of the overlay. Mounted = lock; unmounted = restore.\n// Because this component is only rendered when `<APopoverContent :overlay=\"true\">` is\n// inside the open popover portal, mount/unmount tracks visibility 1:1.\nlet prevBodyOverflow = '';\nlet prevBodyTouchAction = '';\nlet prevPaddingRight = '';\n\nfunction getScrollbarWidth() {\n if (typeof window === 'undefined') return 0;\n return window.innerWidth - document.documentElement.clientWidth;\n}\n\nonMounted(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n const sbw = getScrollbarWidth();\n prevBodyOverflow = body.style.overflow;\n prevBodyTouchAction = body.style.touchAction;\n prevPaddingRight = body.style.paddingRight;\n body.style.overflow = 'hidden';\n body.style.touchAction = 'none';\n // Compensate for the missing scrollbar so the layout doesn't jump.\n if (sbw > 0) body.style.paddingRight = `${sbw}px`;\n});\n\nonBeforeUnmount(() => {\n if (typeof document === 'undefined') return;\n const body = document.body;\n body.style.overflow = prevBodyOverflow;\n body.style.touchAction = prevBodyTouchAction;\n body.style.paddingRight = prevPaddingRight;\n});\n</script>\n\n<template>\n <div\n data-slot=\"popover-overlay\"\n aria-hidden=\"true\"\n :class=\"\n cn(\n // `fixed inset-0` covers the entire viewport; `pointer-events-auto` captures every\n // click so it can never reach the page underneath. `z-50` keeps us above any normal\n // page chrome; the popover content sits at `z-[60]`.\n 'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm pointer-events-auto data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n props.class\n )\n \"\n />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { reactiveOmit } from '@vueuse/core';\nimport {\n PopoverContent,\n type PopoverContentEmits,\n type PopoverContentProps,\n PopoverPortal,\n useForwardPropsEmits,\n} from 'reka-ui';\nimport { cn } from '@/utils';\nimport APopoverOverlay from './APopoverOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n defineProps<\n PopoverContentProps & {\n class?: HTMLAttributes['class'];\n /** Dim the entire viewport behind the popover and block all interaction with the\n * page (clicks are captured by the overlay; body scroll is locked while open).\n * Pair with `<APopover :modal=\"true\">` (the default) for the full modal behaviour. */\n overlay?: boolean;\n overlayClass?: HTMLAttributes['class'];\n }\n >(),\n { align: 'center', sideOffset: 4, overlay: false }\n);\nconst emits = defineEmits<PopoverContentEmits>();\nconst delegated = reactiveOmit(props, 'class', 'overlay', 'overlayClass');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n <PopoverPortal>\n \n <APopoverOverlay v-if=\"props.overlay\" :class=\"props.overlayClass\" />\n <PopoverContent\n data-slot=\"popover-content\"\n v-bind=\"{ ...$attrs, ...forwarded }\"\n :class=\"\n cn(\n 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[60] w-72 rounded-md border p-4 shadow-md outline-none',\n props.class\n )\n \"\n >\n <slot />\n </PopoverContent>\n </PopoverPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_withCtx","slotProps","_renderSlot","_ctx","useForwardProps","props","prevBodyOverflow","prevBodyTouchAction","prevPaddingRight","getScrollbarWidth","onMounted","body","sbw","onBeforeUnmount","_createElementBlock","_normalizeClass","cn","emits","delegated","reactiveOmit","PopoverPortal","APopoverOverlay","_createVNode","PopoverContent","$attrs"],"mappings":";;;;;;;;;;;;;AAWA,UAAMA,IAAYC,EAFJC,GACAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEcC,MAFdC,EAEc,EAFkB,aAAU,UAAA,GAAkBD,EAAAN,CAAA,CAAS,GAAA;AAAA,MACnE,SAAAQ,EAAA,CADmBC,MAAS;AAAA,QAC5BC,EAA2BC,yBAAbF,CAAS,CAAA,CAAA;AAAA,MAAA;;;;;;;;;;;ACX3B,UAAMT,IAAYY,EADJV,CACyB;sBAIrCE,EAAA,GAAAC,EAEiBC,MAFjBC,EAEiB,EAFD,aAAU,kBAAA,GAA0BD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC3D,MAAQ;AAAA,QAARU,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACHZ,UAAME,IAAQX;AAKd,QAAIY,IAAmB,IACnBC,IAAsB,IACtBC,IAAmB;AAEvB,aAASC,IAAoB;AAC3B,aAAI,OAAO,SAAW,MAAoB,IACnC,OAAO,aAAa,SAAS,gBAAgB;AAAA,IACtD;AAEA,WAAAC,EAAU,MAAM;AACd,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMC,IAAO,SAAS,MAChBC,IAAMH,EAAA;AACZ,MAAAH,IAAmBK,EAAK,MAAM,UAC9BJ,IAAsBI,EAAK,MAAM,aACjCH,IAAmBG,EAAK,MAAM,cAC9BA,EAAK,MAAM,WAAW,UACtBA,EAAK,MAAM,cAAc,QAErBC,IAAM,MAAGD,EAAK,MAAM,eAAe,GAAGC,CAAG;AAAA,IAC/C,CAAC,GAEDC,EAAgB,MAAM;AACpB,UAAI,OAAO,WAAa,IAAa;AACrC,YAAMF,IAAO,SAAS;AACtB,MAAAA,EAAK,MAAM,WAAWL,GACtBK,EAAK,MAAM,cAAcJ,GACzBI,EAAK,MAAM,eAAeH;AAAA,IAC5B,CAAC,mBAICM,EAYE,OAAA;AAAA,MAXA,aAAU;AAAA,MACV,eAAY;AAAA,MACX,OAAKC;AAAAA,QAASjB,EAAAkB,CAAA;AAAA;AAAA;AAAA;AAAA;UAA0cX,EAAM;AAAA,QAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChCne,UAAMA,IAAQX,GAaRuB,IAAQtB,GACRuB,IAAYC,EAAad,GAAO,SAAS,WAAW,cAAc,GAClEb,IAAYC,EAAqByB,GAAWD,CAAK;2BAIrDpB,EAoBgBC,EAAAsB,CAAA,GAAA,MAAA;AAAA,iBAbd,MAAoE;AAAA,QAA7Cf,EAAM,gBAA7BR,EAAoEwB,GAAA;AAAA;UAA7B,OAAKN,EAAEV,EAAM,YAAY;AAAA,QAAA;QAChEiB,EAWiBxB,EAAAyB,CAAA,GAXjBxB,EAWiB,EAVf,aAAU,kBAAA,GAAiB,EAAA,GACdyB,EAAAA,QAAM,GAAK1B,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAkB,CAAA;AAAA;YAAwcX,EAAM;AAAA,UAAA;AAAA;qBAO/d,MAAQ;AAAA,YAARH,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/{AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs → AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { defineComponent as u, useModel as g, computed as c, openBlock as l, createBlock as r, resolveDynamicComponent as _, withCtx as p, renderSlot as i, unref as n, mergeModels as k, normalizeClass as v } from "vue";
+import { defineComponent as c, useModel as g, computed as u, openBlock as l, createBlock as r, resolveDynamicComponent as _, withCtx as p, renderSlot as i, unref as n, mergeModels as k, normalizeClass as v } from "vue";
 import { useMediaQuery as f } from "@vueuse/core";
-import { _ as C, b as $, a as b } from "./APopoverContent.vue_vue_type_script_setup_true_lang-BRqULKIg.mjs";
+import { _ as C, c as $, a as b } from "./APopoverContent.vue_vue_type_script_setup_true_lang-o1XhV9DM.mjs";
 import { _ as h, c as B, a as w } from "./ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs";
-const M = /* @__PURE__ */ u({
+const M = /* @__PURE__ */ c({
   __name: "AResponsivePopover",
   props: /* @__PURE__ */ k({
     breakpoint: { default: "(min-width: 768px)" },
@@ -13,7 +13,7 @@ const M = /* @__PURE__ */ u({
   }),
   emits: ["update:open"],
   setup(a) {
-    const e = a, o = g(a, "open"), s = f(() => e.breakpoint), t = c(() => s.value ? C : h);
+    const e = a, o = g(a, "open"), s = f(() => e.breakpoint), t = u(() => s.value ? C : h);
     return (d, m) => (l(), r(_(t.value), {
       open: o.value,
       "onUpdate:open": m[0] || (m[0] = (y) => o.value = y),
@@ -26,14 +26,14 @@ const M = /* @__PURE__ */ u({
       _: 3
     }, 40, ["open", "modal"]));
   }
-}), R = /* @__PURE__ */ u({
+}), R = /* @__PURE__ */ c({
   __name: "AResponsivePopoverTrigger",
   props: {
     breakpoint: { default: "(min-width: 768px)" },
     asChild: { type: Boolean }
   },
   setup(a) {
-    const e = a, o = f(() => e.breakpoint), s = c(() => o.value ? $ : B);
+    const e = a, o = f(() => e.breakpoint), s = u(() => o.value ? $ : B);
     return (t, d) => (l(), r(_(s.value), {
       "as-child": e.asChild,
       "data-slot": "responsive-popover-trigger"
@@ -44,7 +44,7 @@ const M = /* @__PURE__ */ u({
       _: 3
     }, 8, ["as-child"]));
   }
-}), S = /* @__PURE__ */ u({
+}), S = /* @__PURE__ */ c({
   __name: "AResponsivePopoverContent",
   props: {
     breakpoint: { default: "(min-width: 768px)" },
@@ -56,7 +56,7 @@ const M = /* @__PURE__ */ u({
     sideOffset: { default: 4 }
   },
   setup(a) {
-    const e = a, o = f(() => e.breakpoint), s = c(() => [
+    const e = a, o = f(() => e.breakpoint), s = u(() => [
       e.class,
       o.value ? e.popoverClass : e.drawerClass
     ]);
@@ -89,4 +89,4 @@ export {
   S as a,
   R as b
 };
-//# sourceMappingURL=AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-CCGyy9Lp.mjs.map
+//# sourceMappingURL=AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BYEb5UBL.mjs.map