@alikhalilll/ui 1.2.0 → 1.2.2

package/README.md

@@ -31,25 +31,7 @@ Each README ships inside the npm tarball at `node_modules/@alikhalilll/ui/entrie
 pnpm add @alikhalilll/ui
 ```
 
-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`.
-
-### Subpath imports (recommended)
-
-```ts
-// Only the tell-input chunk ships into the bundle.
-import { ATellInput } from '@alikhalilll/ui/tell-input';
-
-// 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
-
-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 tokens
+Then import the stylesheet **once** in your app entry. That's it — no Tailwind config, no `@theme` block, no `@source` directives. The shipped CSS is fully self-contained: design tokens + every utility class the components use are pre-compiled into a single ~21 KB vanilla CSS file.
 
 **Nuxt 3 / 4:**
 
@@ -71,41 +53,82 @@ import '@alikhalilll/ui/styles.css';
 createApp(App).mount('#app');
 ```
 
-Every variable is prefixed `--ak-ui-` — guaranteed not to collide with your own CSS.
+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`. **No CSS framework required** at the consumer end: the lib's stylesheet only declares its own classes (no preflight reset), so it coexists with Tailwind v4, UnoCSS, vanilla CSS, or nothing at all.
+
+### UnoCSS
+
+Same import — no preset to install, no `--ak-ui-*` mapping to wire up. The components' classes are baked into the shipped stylesheet; UnoCSS keeps handling whatever utilities _your_ templates use.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@unocss/nuxt'],
+  css: ['@alikhalilll/ui/styles.css'],
+});
+```
 
-### 2. Map to Tailwind v4
+**If you write `bg-popover` / `text-muted-foreground` / etc. yourself**, UnoCSS will try to generate those too — point them at the same tokens so the two outputs match:
+
+```ts
+// uno.config.ts
+import { defineConfig, presetWind4 } from 'unocss';
+
+export default defineConfig({
+  presets: [presetWind4()],
+  theme: {
+    colors: {
+      background: 'hsl(var(--ak-ui-background))',
+      foreground: 'hsl(var(--ak-ui-foreground))',
+      popover: 'hsl(var(--ak-ui-popover))',
+      'popover-foreground': 'hsl(var(--ak-ui-popover-foreground))',
+      muted: 'hsl(var(--ak-ui-muted))',
+      'muted-foreground': 'hsl(var(--ak-ui-muted-foreground))',
+      accent: 'hsl(var(--ak-ui-accent))',
+      'accent-foreground': 'hsl(var(--ak-ui-accent-foreground))',
+      destructive: 'hsl(var(--ak-ui-destructive))',
+      border: 'hsl(var(--ak-ui-border))',
+      input: 'hsl(var(--ak-ui-input))',
+      ring: 'hsl(var(--ak-ui-ring))',
+    },
+  },
+});
+```
+
+Whatever reset UnoCSS injects (`@unocss/reset/tailwind.css`, etc.) wins on root elements — the lib ships no preflight, so the two don't fight.
+
+### Workspaces / monorepos
+
+If you consume this in a pnpm/yarn workspace **and** use Tailwind v4 in the app, Vite can double-emit the symlinked CSS file (once via `@alikhalilll/ui/styles.css`, once via the resolved filesystem path). The second copy lands after your app CSS in the cascade and the lib's `.hidden { display: none }` ends up clobbering your `md:flex` / `md:block` responsive rules — desktop navs and sidebars silently disappear. The dedupe-friendly form is to `@import` the lib stylesheet from inside your own app CSS, instead of listing it in `nuxt.config.css`:
 
 ```css
-@import 'tailwindcss';
+/* assets/app.css */
 @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));
-}
+@import 'tailwindcss';
+/* …your own rules… */
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: ['~/assets/app.css'], // <-- only your CSS; no separate lib import
+});
 ```
 
-`@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:
+Vite inlines a single copy; the cascade stays sane. Outside a workspace setup this is unnecessary.
 
-```css
-@source '../../packages/ui/index.ts';
-@source '../../packages/ui/entries/**/*.{vue,ts}';
-@source '../../packages/ui/utils/**/*.ts';
+### Subpath imports
+
+```ts
+// Only the tell-input chunk ships into the bundle.
+import { ATellInput } from '@alikhalilll/ui/tell-input';
+
+// Main entry — bundlers still tree-shake unused exports via `sideEffects`.
+import { ATellInput, APopover } from '@alikhalilll/ui';
 ```
 
-### 3. Dark mode
+Available subpaths: `/tell-input`, `/input`, `/popover`, `/drawer`, `/responsive-popover`, `/utils`.
+
+### Dark mode
 
 The lib ships both `.light` and `.dark` blocks. Toggle the class on `<html>` — portaled popovers and drawers inherit via the cascade.
 

package/dist/assets/styles.css

@@ -1,74 +1,2 @@
-/*
- * @alikhalilll/ui — design tokens
- *
- * Every variable is prefixed `--ak-ui-` to avoid collisions with consumer CSS or other
- * libraries. The components themselves use Tailwind utility classes (`bg-popover`,
- * `text-destructive`, etc.) which the consumer wires to these variables via an
- * `@theme inline` block — see README.
- *
- * Override any variable in your own CSS to customize the theme — globally on `:root`,
- * or scoped to a wrapper class for per-tenant theming.
- */
-
-: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: 0.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%;
-}
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-emerald-500:oklch(69.6% .17 162.48);--color-black:#000;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-sm:.25rem;--radius-md:.375rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}.pointer-events-auto{pointer-events:auto}.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.start-2\.5{inset-inline-start:calc(var(--spacing) * 2.5)}.end-2{inset-inline-end:calc(var(--spacing) * 2)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.bottom-0{bottom:calc(var(--spacing) * 0)}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.mx-auto{margin-inline:auto}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-24{margin-top:calc(var(--spacing) * 24)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-7{height:calc(var(--spacing) * 7)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-\[43px\]{height:43px}.h-\[52px\]{height:52px}.h-\[60px\]{height:60px}.h-auto{height:auto}.h-full{height:100%}.max-h-\[60vh\]{max-height:60vh}.max-h-\[80vh\]{max-height:80vh}.max-h-\[min\(22rem\,var\(--reka-popover-content-available-height\)\)\]{max-height:min(22rem, var(--reka-popover-content-available-height))}.w-6{width:calc(var(--spacing) * 6)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-\[100px\]{width:100px}.w-\[min\(20rem\,calc\(100vw-2rem\)\)\]{width:min(20rem,100vw - 2rem)}.w-full{width:100%}.max-w-0{max-width:calc(var(--spacing) * 0)}.max-w-\[2\.5rem\]{max-width:2.5rem}.max-w-\[12rem\]{max-width:12rem}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-\[10px\]{border-top-left-radius:10px;border-top-right-radius:10px}.border{border-style:var(--tw-border-style);border-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-border,.border-border\/70{border-color:hsl(var(--ak-ui-border))}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, hsl(var(--ak-ui-border)) 70%, transparent)}}.border-destructive\/80{border-color:hsl(var(--ak-ui-destructive))}@supports (color:color-mix(in lab, red, red)){.border-destructive\/80{border-color:color-mix(in oklab, hsl(var(--ak-ui-destructive)) 80%, transparent)}}.border-emerald-500\/60{border-color:#00bb7f99}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/60{border-color:color-mix(in oklab, var(--color-emerald-500) 60%, transparent)}}.border-input{border-color:hsl(var(--ak-ui-input))}.bg-background{background-color:hsl(var(--ak-ui-background))}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.bg-muted,.bg-muted\/40{background-color:hsl(var(--ak-ui-muted))}@supports (color:color-mix(in lab, red, red)){.bg-muted\/40{background-color:color-mix(in oklab, hsl(var(--ak-ui-muted)) 40%, transparent)}}.bg-popover{background-color:hsl(var(--ak-ui-popover))}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.ps-1{padding-inline-start:calc(var(--spacing) * 1)}.ps-8{padding-inline-start:calc(var(--spacing) * 8)}.pe-14{padding-inline-end:calc(var(--spacing) * 14)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-2{padding-left:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-destructive{color:hsl(var(--ak-ui-destructive))}.text-emerald-500{color:var(--color-emerald-500)}.text-foreground{color:hsl(var(--ak-ui-foreground))}.text-muted-foreground{color:hsl(var(--ak-ui-muted-foreground))}.text-popover-foreground{color:hsl(var(--ak-ui-popover-foreground))}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.accent-foreground{accent-color:hsl(var(--ak-ui-foreground))}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black\/15{--tw-shadow-color:#00000026}@supports (color:color-mix(in lab, red, red)){.shadow-black\/15{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 15%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-black\/30{--tw-shadow-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.shadow-black\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-black) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-border\/40{--tw-ring-color:hsl(var(--ak-ui-border))}@supports (color:color-mix(in lab, red, red)){.ring-border\/40{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-border)) 40%, transparent)}}.ring-border\/70{--tw-ring-color:hsl(var(--ak-ui-border))}@supports (color:color-mix(in lab, red, red)){.ring-border\/70{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-border)) 70%, transparent)}}.ring-destructive\/20{--tw-ring-color:hsl(var(--ak-ui-destructive))}@supports (color:color-mix(in lab, red, red)){.ring-destructive\/20{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-destructive)) 20%, transparent)}}.ring-emerald-500\/20{--tw-ring-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.ring-emerald-500\/20{--tw-ring-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.ring-offset-background{--tw-ring-offset-color:hsl(var(--ak-ui-background))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--ak-ui-muted-foreground))}.focus-within\:ring-1:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-destructive\/40:focus-within{--tw-ring-color:hsl(var(--ak-ui-destructive))}@supports (color:color-mix(in lab, red, red)){.focus-within\:ring-destructive\/40:focus-within{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-destructive)) 40%, transparent)}}.focus-within\:ring-emerald-500\/40:focus-within{--tw-ring-color:#00bb7f66}@supports (color:color-mix(in lab, red, red)){.focus-within\:ring-emerald-500\/40:focus-within{--tw-ring-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)}}.focus-within\:ring-ring:focus-within,.focus-within\:ring-ring\/40:focus-within{--tw-ring-color:hsl(var(--ak-ui-ring))}@supports (color:color-mix(in lab, red, red)){.focus-within\:ring-ring\/40:focus-within{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-ring)) 40%, transparent)}}.focus-within\:ring-ring\/50:focus-within{--tw-ring-color:hsl(var(--ak-ui-ring))}@supports (color:color-mix(in lab, red, red)){.focus-within\:ring-ring\/50:focus-within{--tw-ring-color:color-mix(in oklab, hsl(var(--ak-ui-ring)) 50%, transparent)}}.focus-within\:ring-offset-0:focus-within{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}@media (hover:hover){.hover\:bg-muted:hover,.hover\:bg-muted\/60:hover{background-color:hsl(var(--ak-ui-muted))}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/60:hover{background-color:color-mix(in oklab, hsl(var(--ak-ui-muted)) 60%, transparent)}}}.focus-visible\:bg-muted:focus-visible,.focus-visible\:bg-muted\/60:focus-visible{background-color:hsl(var(--ak-ui-muted))}@supports (color:color-mix(in lab, red, red)){.focus-visible\:bg-muted\/60:focus-visible{background-color:color-mix(in oklab, hsl(var(--ak-ui-muted)) 60%, transparent)}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:hsl(var(--ak-ui-ring))}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}}.has-\[input\:disabled\]\:cursor-not-allowed:has(:is(input:disabled)){cursor:not-allowed}.has-\[input\:disabled\]\:opacity-50:has(:is(input:disabled)){opacity:.5}.data-\[selected\]\:bg-muted[data-selected],.data-\[state\=open\]\:bg-muted[data-state=open]{background-color:hsl(var(--ak-ui-muted))}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:inline-block{display:inline-block}.md\:inline-flex{display:inline-flex}}: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%}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

package/dist/chunks/{ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs → ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs}

@@ -1,6 +1,6 @@
-import { defineComponent as d, openBlock as c, createBlock as p, unref as e, mergeProps as i, withCtx as l, renderSlot as m, createVNode as y, createElementVNode as b } from "vue";
-import { DrawerRoot as h, DrawerTrigger as x, DrawerOverlay as O, DrawerPortal as D, DrawerContent as v } from "vaul-vue";
-import { useForwardPropsEmits as B, useForwardProps as w } from "reka-ui";
+import { defineComponent as d, openBlock as c, createBlock as p, unref as e, mergeProps as i, withCtx as l, renderSlot as m, createVNode as y, createElementVNode as h } from "vue";
+import { DrawerRoot as x, DrawerTrigger as b, DrawerOverlay as O, DrawerPortal as D, DrawerContent as v } from "vaul-vue";
+import { useForwardPropsEmits as w, useForwardProps as B } from "reka-ui";
 import { reactiveOmit as _ } from "@vueuse/core";
 import { c as g } from "./cn-B6yFEsav.mjs";
 const F = /* @__PURE__ */ d({
@@ -26,8 +26,8 @@ const F = /* @__PURE__ */ d({
   },
   emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"],
   setup(t, { emit: o }) {
-    const s = B(t, o);
-    return (n, u) => (c(), p(e(h), i({ "data-slot": "drawer" }, e(s)), {
+    const r = w(t, o);
+    return (n, u) => (c(), p(e(x), i({ "data-slot": "drawer" }, e(r)), {
       default: l(() => [
         m(n.$slots, "default")
       ]),
@@ -41,10 +41,10 @@ const F = /* @__PURE__ */ d({
     as: {}
   },
   setup(t) {
-    const a = w(t);
-    return (r, s) => (c(), p(e(x), i({ "data-slot": "drawer-trigger" }, e(a)), {
+    const a = B(t);
+    return (s, r) => (c(), p(e(b), i({ "data-slot": "drawer-trigger" }, e(a)), {
       default: l(() => [
-        m(r.$slots, "default")
+        m(s.$slots, "default")
       ]),
       _: 3
     }, 16));
@@ -58,10 +58,10 @@ const F = /* @__PURE__ */ d({
     class: { type: [Boolean, null, String, Object, Array] }
   },
   setup(t) {
-    const o = t, a = _(o, "class"), r = w(a);
-    return (s, n) => (c(), p(e(O), i({ "data-slot": "drawer-overlay" }, e(r), {
+    const o = t, a = _(o, "class"), s = B(a);
+    return (r, n) => (c(), p(e(O), i({ "data-slot": "drawer-overlay" }, e(s), {
       class: e(g)(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/60 backdrop-blur-sm",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/70",
         o.class
       )
     }), null, 16, ["class"]));
@@ -78,18 +78,18 @@ const F = /* @__PURE__ */ d({
   },
   emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
   setup(t, { emit: o }) {
-    const a = t, r = o, s = _(a, "class"), n = B(s, r);
+    const a = t, s = o, r = _(a, "class"), n = w(r, s);
     return (u, f) => (c(), p(e(D), null, {
       default: l(() => [
         y(A),
         y(e(v), i({ "data-slot": "drawer-content" }, { ...u.$attrs, ...e(n) }, {
           class: e(g)(
-            "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border outline-none",
+            "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] shadow-2xl shadow-black/30 outline-none",
             a.class
           )
         }), {
           default: l(() => [
-            f[0] || (f[0] = b("div", { class: "bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" }, null, -1)),
+            f[0] || (f[0] = h("div", { class: "bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" }, null, -1)),
             m(u.$slots, "default")
           ]),
           _: 3
@@ -105,4 +105,4 @@ export {
   A as b,
   E as c
 };
-//# sourceMappingURL=ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map
+//# sourceMappingURL=ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs.map

package/dist/chunks/ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs","sources":["../../entries/drawer/components/ADrawer.vue","../../entries/drawer/components/ADrawerTrigger.vue","../../entries/drawer/components/ADrawerOverlay.vue","../../entries/drawer/components/ADrawerContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DrawerRoot, type DrawerRootEmits, type DrawerRootProps } from 'vaul-vue';\nimport { useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<DrawerRootProps>(), {\n  shouldScaleBackground: true,\n});\nconst emits = defineEmits<DrawerRootEmits>();\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DrawerRoot data-slot=\"drawer\" v-bind=\"forwarded\">\n    <slot />\n  </DrawerRoot>\n</template>\n","<script setup lang=\"ts\">\nimport { DrawerTrigger, type DrawerTriggerProps } from 'vaul-vue';\nimport { useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DrawerTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <DrawerTrigger data-slot=\"drawer-trigger\" v-bind=\"forwarded\">\n    <slot />\n  </DrawerTrigger>\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerOverlay } from 'vaul-vue';\nimport type { DialogOverlayProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardProps } from 'reka-ui';\nimport { cn } from '@/utils';\n\nconst props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardProps(delegated);\n</script>\n\n<template>\n  <DrawerOverlay\n    data-slot=\"drawer-overlay\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/70',\n        props.class\n      )\n    \"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { DrawerContent, DrawerPortal } from 'vaul-vue';\nimport type { DialogContentEmits, DialogContentProps } from 'reka-ui';\nimport { reactiveOmit } from '@vueuse/core';\nimport { useForwardPropsEmits } from 'reka-ui';\nimport { cn } from '@/utils';\nimport ADrawerOverlay from './ADrawerOverlay.vue';\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();\nconst emits = defineEmits<DialogContentEmits>();\nconst delegated = reactiveOmit(props, 'class');\nconst forwarded = useForwardPropsEmits(delegated, emits);\n</script>\n\n<template>\n  <DrawerPortal>\n    <ADrawerOverlay />\n    <DrawerContent\n      data-slot=\"drawer-content\"\n      v-bind=\"{ ...$attrs, ...forwarded }\"\n      :class=\"\n        cn(\n          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] shadow-2xl shadow-black/30 outline-none',\n          props.class\n        )\n      \"\n    >\n      <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n      <slot />\n    </DrawerContent>\n  </DrawerPortal>\n</template>\n"],"names":["forwarded","useForwardPropsEmits","__props","__emit","_openBlock","_createBlock","_unref","_mergeProps","_renderSlot","_ctx","useForwardProps","props","delegated","reactiveOmit","cn","emits","DrawerPortal","_createVNode","ADrawerOverlay","DrawerContent","$attrs","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAYC,EAJJC,GAGAC,CACqC;sBAIjDC,EAAA,GAAAC,EAEaC,MAFbC,EAEa,EAFD,aAAU,SAAA,GAAiBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBAC9C,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;ACRZ,UAAMT,IAAYU,EADJR,CACyB;sBAIrCE,EAAA,GAAAC,EAEgBC,MAFhBC,EAEgB,EAFD,aAAU,iBAAA,GAAyBD,EAAAN,CAAA,CAAS,GAAA;AAAA,iBACzD,MAAQ;AAAA,QAARQ,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;ACFZ,UAAME,IAAQT,GACRU,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYU,EAAgBE,CAAS;sBAIzCR,EAAA,GAAAC,EASEC,MATFC,EASE,EARA,aAAU,iBAAA,GACFD,EAAAN,CAAA,GAAS;AAAA,MAChB,OAAcM,EAAAQ,CAAA;AAAA;QAA8KH,EAAM;AAAA,MAAA;AAAA;;;;;;;;;;;;;;ACNvM,UAAMA,IAAQT,GACRa,IAAQZ,GACRS,IAAYC,EAAaF,GAAO,OAAO,GACvCX,IAAYC,EAAqBW,GAAWG,CAAK;2BAIrDV,EAeeC,EAAAU,CAAA,GAAA,MAAA;AAAA,iBAdb,MAAkB;AAAA,QAAlBC,EAAkBC,CAAA;AAAA,QAClBD,EAYgBX,EAAAa,CAAA,GAZhBZ,EAYgB,EAXd,aAAU,iBAAA,GAAgB,EAAA,GACba,EAAAA,QAAM,GAAKd,EAAAN,CAAA,KAAS;AAAA,UAChC,OAAgBM,EAAAQ,CAAA;AAAA;YAA2JH,EAAM;AAAA,UAAA;AAAA;qBAOlL,MAAgE;AAAA,4BAAhEU,EAAgE,OAAA,EAA3D,OAAM,mDAAA,GAAkD,MAAA,EAAA;AAAA,YAC7Db,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs

@@ -0,0 +1,113 @@
+import { provide as g, inject as b, defineComponent as m, useModel as $, computed as o, openBlock as c, createBlock as i, resolveDynamicComponent as y, withCtx as u, renderSlot as v, unref as f, mergeModels as S, normalizeClass as k } from "vue";
+import { useMediaQuery as _ } from "@vueuse/core";
+import { _ as h, c as A, u as B, a as O } from "./useEventScrollLock-BcP8fg-L.mjs";
+import { _ as P, c as R, a as x } from "./ADrawerContent.vue_vue_type_script_setup_true_lang-W28CSzER.mjs";
+const C = Symbol(
+  "AResponsivePopoverContext"
+);
+function D(a) {
+  g(C, a);
+}
+function L() {
+  return b(C, null);
+}
+const I = /* @__PURE__ */ m({
+  __name: "AResponsivePopover",
+  props: /* @__PURE__ */ S({
+    breakpoint: { default: "(min-width: 768px)" },
+    modal: { type: Boolean, default: !0 },
+    scrollLock: { default: "events" }
+  }, {
+    open: { type: Boolean },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(a) {
+    const e = a, s = $(a, "open"), t = _(() => e.breakpoint), l = o(() => t.value ? h : P), n = o(() => e.modal === !1 ? !1 : e.scrollLock === "body");
+    return D({
+      open: o(() => s.value ?? !1),
+      isDesktop: o(() => t.value),
+      scrollLock: o(() => e.scrollLock)
+    }), (d, r) => (c(), i(y(l.value), {
+      open: s.value,
+      "onUpdate:open": r[0] || (r[0] = (p) => s.value = p),
+      modal: n.value,
+      "data-slot": "responsive-popover"
+    }, {
+      default: u(() => [
+        v(d.$slots, "default", { isDesktop: f(t) })
+      ]),
+      _: 3
+    }, 40, ["open", "modal"]));
+  }
+}), N = /* @__PURE__ */ m({
+  __name: "AResponsivePopoverTrigger",
+  props: {
+    breakpoint: { default: "(min-width: 768px)" },
+    asChild: { type: Boolean }
+  },
+  setup(a) {
+    const e = a, s = _(() => e.breakpoint), t = o(() => s.value ? A : R);
+    return (l, n) => (c(), i(y(t.value), {
+      "as-child": e.asChild,
+      "data-slot": "responsive-popover-trigger"
+    }, {
+      default: u(() => [
+        v(l.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child"]));
+  }
+}), V = /* @__PURE__ */ m({
+  __name: "AResponsivePopoverContent",
+  props: {
+    breakpoint: { default: "(min-width: 768px)" },
+    class: { type: [Boolean, null, String, Object, Array] },
+    popoverClass: { type: [Boolean, null, String, Object, Array] },
+    drawerClass: { type: [Boolean, null, String, Object, Array] },
+    overlay: { type: Boolean, default: !1 },
+    align: { default: "start" },
+    sideOffset: { default: 4 }
+  },
+  setup(a) {
+    const e = a, s = L(), t = _(() => e.breakpoint), l = o(() => s?.isDesktop.value ?? t.value), n = o(() => s?.scrollLock.value ?? "events"), d = o(() => n.value === "body"), r = o(() => [
+      e.class,
+      l.value ? e.popoverClass : e.drawerClass
+    ]);
+    return B({
+      allowedScrollContainer: () => typeof document > "u" ? [] : Array.from(
+        document.querySelectorAll('[data-responsive-popover-scroll-container="true"]')
+      ),
+      active: o(() => !!s?.open.value && l.value && n.value === "events")
+    }), (p, w) => l.value ? (c(), i(f(O), {
+      key: 0,
+      overlay: e.overlay,
+      "overlay-lock-scroll": d.value,
+      align: e.align,
+      "side-offset": e.sideOffset,
+      class: k(r.value),
+      "data-slot": "responsive-popover-content",
+      "data-responsive-popover-scroll-container": "true"
+    }, {
+      default: u(() => [
+        v(p.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["overlay", "overlay-lock-scroll", "align", "side-offset", "class"])) : (c(), i(f(x), {
+      key: 1,
+      class: k(r.value),
+      "data-slot": "responsive-popover-content"
+    }, {
+      default: u(() => [
+        v(p.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  I as _,
+  V as a,
+  N as b
+};
+//# sourceMappingURL=AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map

package/dist/chunks/AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AResponsivePopoverContent.vue_vue_type_script_setup_true_lang-BrBsDiHc.mjs","sources":["../../entries/responsive-popover/composables/useResponsivePopoverContext.ts","../../entries/responsive-popover/components/AResponsivePopover.vue","../../entries/responsive-popover/components/AResponsivePopoverTrigger.vue","../../entries/responsive-popover/components/AResponsivePopoverContent.vue"],"sourcesContent":["import { inject, provide, type ComputedRef, type InjectionKey } from 'vue';\nimport type { ScrollLockMode } from '../components/AResponsivePopover.vue';\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 '@/entries/popover';\nimport { ADrawer } from '@/entries/drawer';\nimport { provideResponsivePopoverContext } from '../composables/useResponsivePopoverContext';\n\nexport type ScrollLockMode = 'events' | 'body' | 'none';\n\nconst props = withDefaults(\n  defineProps<{\n    /** CSS media query for the desktop break. Below this width we render a vaul drawer. */\n    breakpoint?: string;\n    /**\n     * @deprecated prefer `scrollLock`. Kept for back-compat: `modal=false` is a shorthand\n     * for `scrollLock=\"none\"` (tooltip-style popover). `modal=true` (default) defers to\n     * `scrollLock`, which controls how page scroll is blocked.\n     */\n    modal?: boolean;\n    /**\n     * How desktop page scroll is blocked while the popover is open:\n     * - `'events'` (default) — wheel/touch/keyboard intercepted at document level.\n     *   Page scrollbar stays visible; `position: sticky` keeps working.\n     * - `'body'` — legacy `document.body.style.overflow='hidden'` lock. Use when the\n     *   page must reflow as the scrollbar goes away.\n     * - `'none'` — no page-scroll lock at all.\n     *\n     * Drawer (mobile) branch is unaffected — vaul-vue owns its own lock.\n     */\n    scrollLock?: ScrollLockMode;\n  }>(),\n  { breakpoint: '(min-width: 768px)', modal: true, scrollLock: 'events' }\n);\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 * Only `scrollLock='body'` triggers reka-ui's `PopoverContentModal` (and its\n * `useBodyScrollLock`). For `'events'` we install our own document-level event lock in\n * `AResponsivePopoverContent`. For `'none'` nothing locks. Legacy `modal=false` still\n * forces non-modal regardless of `scrollLock`.\n */\nconst rekaModal = computed(() => {\n  if (props.modal === false) return false;\n  return props.scrollLock === 'body';\n});\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=\"rekaModal\" 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 '@/entries/popover';\nimport { ADrawerTrigger } from '@/entries/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 '@/entries/popover';\nimport { ADrawerContent } from '@/entries/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"],"names":["RESPONSIVE_POPOVER_CONTEXT","provideResponsivePopoverContext","ctx","provide","useResponsivePopoverContext","inject","props","__props","open","_useModel","isDesktop","useMediaQuery","Root","computed","APopover","ADrawer","rekaModal","_openBlock","_createBlock","_resolveDynamicComponent","$event","_renderSlot","_ctx","_unref","Trigger","APopoverTrigger","ADrawerTrigger","fallbackIsDesktop","scrollLockMode","overlayLockScroll","mergedClass","useEventScrollLock","APopoverContent","ADrawerContent"],"mappings":";;;;AASA,MAAMA,IAAqE;AAAA,EACzE;AACF;AAEO,SAASC,EAAgCC,GAA+B;AAC7E,EAAAC,EAAQH,GAA4BE,CAAG;AACzC;AAEO,SAASE,IAA+D;AAC7E,SAAOC,EAAOL,GAA4B,IAAI;AAChD;;;;;;;;;;;;;ACVA,UAAMM,IAAQC,GAyBRC,IAAOC,EAAoBF,GAAC,MAAM,GAElCG,IAAYC,EAAc,MAAML,EAAM,UAAU,GAMhDM,IAAOC,EAAS,MAAOH,EAAU,QAAQI,IAAWC,CAAQ,GAQ5DC,IAAYH,EAAS,MACrBP,EAAM,UAAU,KAAc,KAC3BA,EAAM,eAAe,MAC7B;AAED,WAAAL,EAAgC;AAAA,MAC9B,MAAMY,EAAS,MAAML,EAAK,SAAS,EAAK;AAAA,MACxC,WAAWK,EAAS,MAAMH,EAAU,KAAK;AAAA,MACzC,YAAYG,EAAS,MAAMP,EAAM,UAAU;AAAA,IAAA,CAC5C,cAICW,KAAAC,EAEYC,EAFIP,EAAA,KAAI,GAAA;AAAA,MAAU,MAAMJ,EAAA;AAAA,8CAAAA,EAAI,QAAAY;AAAA,MAAG,OAAOJ,EAAA;AAAA,MAAW,aAAU;AAAA,IAAA;iBACrE,MAAgC;AAAA,QAAhCK,EAAgCC,EAAA,QAAA,WAAA,EAAzB,WAAYC,EAAAb,CAAA,EAAA,CAAS;AAAA,MAAA;;;;;;;;;;;AC1DhC,UAAMJ,IAAQC,GAQRG,IAAYC,EAAc,MAAML,EAAM,UAAU,GAChDkB,IAAUX,EAAS,MAAOH,EAAU,QAAQe,IAAkBC,CAAe;sBAIjFT,KAAAC,EAEYC,EAFIK,EAAA,KAAO,GAAA;AAAA,MAAG,YAAUlB,EAAM;AAAA,MAAS,aAAU;AAAA,IAAA;iBAC3D,MAAQ;AAAA,QAARe,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;;;;ACZZ,UAAMhB,IAAQC,GA0BRL,IAAME,EAAA,GAINuB,IAAoBhB,EAAc,MAAML,EAAM,UAAU,GACxDI,IAAYG,EAAS,MAAMX,GAAK,UAAU,SAASyB,EAAkB,KAAK,GAE1EC,IAAiBf,EAAS,MAAMX,GAAK,WAAW,SAAS,QAAQ,GACjE2B,IAAoBhB,EAAS,MAAMe,EAAe,UAAU,MAAM,GAElEE,IAAcjB,EAAS,MAAM;AAAA,MACjCP,EAAM;AAAA,MACNI,EAAU,QAAQJ,EAAM,eAAeA,EAAM;AAAA,IAAA,CAC9C;AAKD,WAAAyB,EAAmB;AAAA,MACjB,wBAAwB,MAClB,OAAO,WAAa,MAAoB,CAAA,IACrC,MAAM;AAAA,QACX,SAAS,iBAA8B,mDAAmD;AAAA,MAAA;AAAA,MAG9F,QAAQlB,EAAS,MAAM,CAAC,CAACX,GAAK,KAAK,SAASQ,EAAU,SAASkB,EAAe,UAAU,QAAQ;AAAA,IAAA,CACjG,aAKSlB,EAAA,cADRQ,EAWkBK,EAAAS,CAAA,GAAA;AAAA;MATf,SAAS1B,EAAM;AAAA,MACf,uBAAqBuB,EAAA;AAAA,MACrB,OAAOvB,EAAM;AAAA,MACb,eAAaA,EAAM;AAAA,MACnB,SAAOwB,EAAA,KAAW;AAAA,MACnB,aAAU;AAAA,MACV,4CAAyC;AAAA,IAAA;iBAEzC,MAAQ;AAAA,QAART,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;wFAEVJ,EAEiBK,EAAAU,CAAA,GAAA;AAAA;MAFO,SAAOH,EAAA,KAAW;AAAA,MAAE,aAAU;AAAA,IAAA;iBACpD,MAAQ;AAAA,QAART,EAAQC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;;"}