@alikhalilll/ui 1.0.0 → 1.1.1

package/README.md

@@ -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,113 +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`.
+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
 
-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';
+
+createApp(App).mount('#app');
+```
 
-   For Tailwind v3, add the same colors to `theme.extend.colors` in `tailwind.config.ts`.
+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));
+}
+```
 
-3. **Toggle dark mode** by adding `.dark` to a parent element (typically `<html>`).
+`@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('');
+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="SA"
-    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'`                       | Country auto-detect strategy.                                                              |
-| `defaultCountry`    | `string`                                         | `'US'`                         | Fallback ISO2 when detection fails or is disabled.                                         |
-| `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 slides in pre-filled and `phone` is normalised to the national significant number (`01066105963` → `1066105963`, `+447911123456` → `7911123456`).
+
+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 }],
+});
 ```
 
-## Compose your own component
+## Theming
 
-Every primitive, composable, and CVA helper is re-exported from the package root, so you can build a custom variant without forking the library.
+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%;
+}
+```
+
+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.
+
+## Compose your own variant
+
+Every primitive, composable, and helper is re-exported — fork-free composition:
 
 ```ts
 import {
@@ -149,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
@@ -265,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/ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs

@@ -0,0 +1,108 @@
+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 { reactiveOmit as _ } from "@vueuse/core";
+import { c as g } from "./cn-B6yFEsav.mjs";
+const F = /* @__PURE__ */ d({
+  __name: "ADrawer",
+  props: {
+    activeSnapPoint: {},
+    closeThreshold: {},
+    shouldScaleBackground: { type: Boolean, default: !0 },
+    setBackgroundColorOnScale: { type: Boolean },
+    scrollLockTimeout: {},
+    fixed: { type: Boolean },
+    dismissible: { type: Boolean },
+    modal: { type: Boolean },
+    open: { type: Boolean },
+    defaultOpen: { type: Boolean },
+    nested: { type: Boolean },
+    direction: {},
+    noBodyStyles: { type: Boolean },
+    handleOnly: { type: Boolean },
+    preventScrollRestoration: { type: Boolean },
+    snapPoints: {},
+    fadeFromIndex: {}
+  },
+  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)), {
+      default: l(() => [
+        m(n.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), E = /* @__PURE__ */ d({
+  __name: "ADrawerTrigger",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(t) {
+    const a = w(t);
+    return (r, s) => (c(), p(e(x), i({ "data-slot": "drawer-trigger" }, e(a)), {
+      default: l(() => [
+        m(r.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), A = /* @__PURE__ */ d({
+  __name: "ADrawerOverlay",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    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), {
+      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",
+        o.class
+      )
+    }), null, 16, ["class"]));
+  }
+}), T = /* @__PURE__ */ d({
+  inheritAttrs: !1,
+  __name: "ADrawerContent",
+  props: {
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {},
+    class: { type: [Boolean, null, String, Object, Array] }
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "openAutoFocus", "closeAutoFocus"],
+  setup(t, { emit: o }) {
+    const a = t, r = o, s = _(a, "class"), n = B(s, r);
+    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",
+            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)),
+            m(u.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["class"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  F as _,
+  T as a,
+  A as b,
+  E as c
+};
+//# sourceMappingURL=ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ADrawerContent.vue_vue_type_script_setup_true_lang-BivIZvV1.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/60 backdrop-blur-sm',\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] border 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;QAA+LH,EAAM;AAAA,MAAA;AAAA;;;;;;;;;;;;;;ACNxN,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;YAAuIH,EAAM;AAAA,UAAA;AAAA;qBAO9J,MAAgE;AAAA,4BAAhEU,EAAgE,OAAA,EAA3D,OAAM,mDAAA,GAAkD,MAAA,EAAA;AAAA,YAC7Db,EAAQC,EAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;"}

package/dist/chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs

@@ -0,0 +1,81 @@
+import { defineComponent as S, useSlots as A, computed as l, openBlock as i, createElementBlock as r, normalizeClass as o, unref as t, renderSlot as x, createCommentVNode as v, withDirectives as y, createElementVNode as B, isRef as z, vModelText as h } from "vue";
+import { useVModel as _ } from "@vueuse/core";
+import { c as n } from "./cn-B6yFEsav.mjs";
+import { D as j, c as E, b as O, d as T } from "./sizes-B_9MfLkz.mjs";
+const D = ["data-size"], P = ["data-size"], N = /* @__PURE__ */ S({
+  __name: "AInput",
+  props: {
+    defaultValue: {},
+    modelValue: {},
+    class: { type: [Boolean, null, String, Object, Array] },
+    inputClass: { type: [Boolean, null, String, Object, Array] },
+    prefixClass: { type: [Boolean, null, String, Object, Array] },
+    suffixClass: { type: [Boolean, null, String, Object, Array] },
+    size: { default: j }
+  },
+  emits: ["update:modelValue"],
+  setup(k, { emit: V }) {
+    const e = k, w = V, d = A(), f = l(() => !!d.prefix), c = l(() => !!d.suffix), C = l(() => f.value || c.value), s = _(e, "modelValue", w, {
+      passive: !0,
+      defaultValue: e.defaultValue
+    }), p = l(() => E[e.size]), m = l(() => O[e.size]), g = l(() => T[e.size]);
+    return (b, a) => C.value ? (i(), r("div", {
+      key: 0,
+      "data-size": e.size,
+      class: o(
+        t(n)(
+          "border-input bg-background ring-offset-background focus-within:ring-ring inline-flex w-full items-center rounded-md border shadow-sm transition-colors focus-within:ring-1",
+          p.value,
+          m.value,
+          g.value,
+          e.class
+        )
+      )
+    }, [
+      f.value ? (i(), r("span", {
+        key: 0,
+        class: o(t(n)("text-muted-foreground flex shrink-0 items-center pr-2", e.prefixClass))
+      }, [
+        x(b.$slots, "prefix")
+      ], 2)) : v("", !0),
+      y(B("input", {
+        "onUpdate:modelValue": a[0] || (a[0] = (u) => z(s) ? s.value = u : null),
+        "data-slot": "input",
+        class: o(
+          t(n)(
+            "placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50",
+            e.inputClass
+          )
+        )
+      }, null, 2), [
+        [h, t(s)]
+      ]),
+      c.value ? (i(), r("span", {
+        key: 1,
+        class: o(t(n)("text-muted-foreground flex shrink-0 items-center pl-2", e.suffixClass))
+      }, [
+        x(b.$slots, "suffix")
+      ], 2)) : v("", !0)
+    ], 10, D)) : y((i(), r("input", {
+      key: 1,
+      "onUpdate:modelValue": a[1] || (a[1] = (u) => z(s) ? s.value = u : null),
+      "data-slot": "input",
+      "data-size": e.size,
+      class: o(
+        t(n)(
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          p.value,
+          m.value,
+          g.value,
+          e.class
+        )
+      )
+    }, null, 10, P)), [
+      [h, t(s)]
+    ]);
+  }
+});
+export {
+  N as _
+};
+//# sourceMappingURL=AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs.map

package/dist/chunks/AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AInput.vue_vue_type_script_setup_true_lang-BJUP7ePq.mjs","sources":["../../entries/input/components/AInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { computed, useSlots } from 'vue';\nimport { useVModel } from '@vueuse/core';\nimport { cn } from '@/utils';\nimport { controlHeight, controlPaddingX, controlTextSize, DEFAULT_SIZE, type Size } from '@/utils';\n\nconst props = withDefaults(\n  defineProps<{\n    defaultValue?: string | number;\n    modelValue?: string | number;\n    class?: HTMLAttributes['class'];\n    /** Classes for the inner &lt;input&gt; element (useful when prefix/suffix are present). */\n    inputClass?: HTMLAttributes['class'];\n    /** Classes for the prefix wrapper. */\n    prefixClass?: HTMLAttributes['class'];\n    /** Classes for the suffix wrapper. */\n    suffixClass?: HTMLAttributes['class'];\n    size?: Size;\n  }>(),\n  { size: DEFAULT_SIZE }\n);\n\nconst emits = defineEmits<{\n  (e: 'update:modelValue', payload: string | number): void;\n}>();\n\ndefineSlots<{\n  /** Content rendered inside the input's border, left of the field. */\n  prefix?: () => unknown;\n  /** Content rendered inside the input's border, right of the field. */\n  suffix?: () => unknown;\n}>();\n\nconst slots = useSlots();\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\nconst hasAdornment = computed(() => hasPrefix.value || hasSuffix.value);\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: props.defaultValue,\n});\n\nconst sizeHeight = computed(() => controlHeight[props.size]);\nconst sizePaddingX = computed(() => controlPaddingX[props.size]);\nconst sizeText = computed(() => controlTextSize[props.size]);\n</script>\n\n<template>\n  <!--\n    When prefix or suffix slots are filled we render a wrapper that owns the border,\n    background and focus ring — so the visible \"input\" is the whole bar, not just the\n    native element. Otherwise we render the plain native input directly so consumers\n    can use AInput as a drop-in for <input>.\n  -->\n  <div\n    v-if=\"hasAdornment\"\n    :data-size=\"props.size\"\n    :class=\"\n      cn(\n        'border-input bg-background ring-offset-background focus-within:ring-ring inline-flex w-full items-center rounded-md border shadow-sm transition-colors focus-within:ring-1',\n        sizeHeight,\n        sizePaddingX,\n        sizeText,\n        props.class\n      )\n    \"\n  >\n    <span\n      v-if=\"hasPrefix\"\n      :class=\"cn('text-muted-foreground flex shrink-0 items-center pr-2', props.prefixClass)\"\n    >\n      <slot name=\"prefix\" />\n    </span>\n\n    <input\n      v-model=\"modelValue\"\n      data-slot=\"input\"\n      :class=\"\n        cn(\n          'placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50',\n          props.inputClass\n        )\n      \"\n    />\n\n    <span\n      v-if=\"hasSuffix\"\n      :class=\"cn('text-muted-foreground flex shrink-0 items-center pl-2', props.suffixClass)\"\n    >\n      <slot name=\"suffix\" />\n    </span>\n  </div>\n\n  <input\n    v-else\n    v-model=\"modelValue\"\n    data-slot=\"input\"\n    :data-size=\"props.size\"\n    :class=\"\n      cn(\n        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n        sizeHeight,\n        sizePaddingX,\n        sizeText,\n        props.class\n      )\n    \"\n  />\n</template>\n"],"names":["props","__props","emits","__emit","slots","useSlots","hasPrefix","computed","hasSuffix","hasAdornment","modelValue","useVModel","sizeHeight","controlHeight","sizePaddingX","controlPaddingX","sizeText","controlTextSize","_createElementBlock","_normalizeClass","_unref","cn","_renderSlot","_ctx","_createElementVNode","$event"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GAgBRC,IAAQC,GAWRC,IAAQC,EAAA,GACRC,IAAYC,EAAS,MAAM,CAAC,CAACH,EAAM,MAAM,GACzCI,IAAYD,EAAS,MAAM,CAAC,CAACH,EAAM,MAAM,GACzCK,IAAeF,EAAS,MAAMD,EAAU,SAASE,EAAU,KAAK,GAEhEE,IAAaC,EAAUX,GAAO,cAAcE,GAAO;AAAA,MACvD,SAAS;AAAA,MACT,cAAcF,EAAM;AAAA,IAAA,CACrB,GAEKY,IAAaL,EAAS,MAAMM,EAAcb,EAAM,IAAI,CAAC,GACrDc,IAAeP,EAAS,MAAMQ,EAAgBf,EAAM,IAAI,CAAC,GACzDgB,IAAWT,EAAS,MAAMU,EAAgBjB,EAAM,IAAI,CAAC;qBAWjDS,EAAA,cADRS,EAqCM,OAAA;AAAA;MAnCH,aAAWlB,EAAM;AAAA,MACjB,OAAKmB;AAAAA,QAASC,EAAAC,CAAA;AAAA;UAAkMT,EAAA;AAAA,UAAoBE,EAAA;AAAA,UAAsBE,EAAA;AAAA,UAAkBhB,EAAM;AAAA,QAAA;AAAA;;MAW3QM,EAAA,cADRY,EAKO,QAAA;AAAA;QAHJ,OAAKC,EAAEC,EAAAC,CAAA,EAAE,yDAA0DrB,EAAM,WAAW,CAAA;AAAA,MAAA;QAErFsB,EAAsBC,EAAA,QAAA,QAAA;AAAA,MAAA;QAGxBC,EASE,SAAA;AAAA,6DARSd,EAAU,QAAAe,IAAA;AAAA,QACnB,aAAU;AAAA,QACT,OAAKN;AAAAA,UAAWC,EAAAC,CAAA;AAAA;YAA+JrB,EAAM;AAAA,UAAA;AAAA;;YAF7KoB,EAAAV,CAAA,CAAU;AAAA,MAAA;MAWbF,EAAA,cADRU,EAKO,QAAA;AAAA;QAHJ,OAAKC,EAAEC,EAAAC,CAAA,EAAE,yDAA0DrB,EAAM,WAAW,CAAA;AAAA,MAAA;QAErFsB,EAAsBC,EAAA,QAAA,QAAA;AAAA,MAAA;yBAI1BL,EAcE,SAAA;AAAA;2DAZSR,EAAU,QAAAe,IAAA;AAAA,MACnB,aAAU;AAAA,MACT,aAAWzB,EAAM;AAAA,MACjB,OAAKmB;AAAAA,QAASC,EAAAC,CAAA;AAAA;UAAkWT,EAAA;AAAA,UAAoBE,EAAA;AAAA,UAAsBE,EAAA;AAAA,UAAkBhB,EAAM;AAAA,QAAA;AAAA;;UAH1aoB,EAAAV,CAAA,CAAU;AAAA,IAAA;;;"}