@alikhalilll/ui 1.0.0 → 1.1.1

package/entries/drawer/README.md

@@ -0,0 +1,39 @@
+# `@alikhalilll/ui/drawer`
+
+A themed bottom-sheet drawer built on `vaul-vue` + `reka-ui` — pre-styled with the shared `@alikhalilll/ui` tokens, portal + overlay handled.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/ui
+```
+
+```ts
+import { ADrawer, ADrawerTrigger, ADrawerContent, ADrawerOverlay } from '@alikhalilll/ui/drawer';
+import '@alikhalilll/ui/styles.css';
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ADrawer, ADrawerTrigger, ADrawerContent } from '@alikhalilll/ui/drawer';
+</script>
+
+<template>
+  <ADrawer>
+    <ADrawerTrigger as-child>
+      <button type="button">Open drawer</button>
+    </ADrawerTrigger>
+    <ADrawerContent class="p-6">
+      <p class="text-sm">Drawer body — drag the handle or press Escape to dismiss.</p>
+    </ADrawerContent>
+  </ADrawer>
+</template>
+```
+
+Every prop on `vaul-vue`'s `DrawerRoot`, `DrawerTrigger`, `DrawerContent`, and `DrawerOverlay` is forwarded — see the [vaul-vue docs](https://github.com/unovue/vaul-vue) for snap points, dismissible, modal, etc.
+
+Pairs with [`@alikhalilll/ui/popover`](../popover) under [`@alikhalilll/ui/responsive-popover`](../responsive-popover), which swaps between the two based on viewport size.
+
+Full docs: [@alikhalilll/ui — Drawer](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/drawer).

package/entries/input/README.md

@@ -0,0 +1,42 @@
+# `@alikhalilll/ui/input`
+
+A sized, themed text input primitive that respects the shared `@alikhalilll/ui` size scale (xs / sm / md / lg / xl) and design tokens.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/ui
+```
+
+```ts
+import { AInput } from '@alikhalilll/ui/input';
+import '@alikhalilll/ui/styles.css';
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AInput } from '@alikhalilll/ui/input';
+
+const value = ref('');
+</script>
+
+<template>
+  <AInput v-model="value" placeholder="Enter text" size="md" />
+</template>
+```
+
+## Props
+
+| Prop          | Type                                   | Default | Description                         |
+| ------------- | -------------------------------------- | ------- | ----------------------------------- |
+| `v-model`     | `string`                               | `''`    | Two-way bound value.                |
+| `size`        | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'`  | Height + padding + text-size scale. |
+| `placeholder` | `string`                               | —       | Standard HTML placeholder.          |
+| `disabled`    | `boolean`                              | `false` |                                     |
+
+All other `<input>` attributes are forwarded.
+
+Full docs: [@alikhalilll/ui — Input](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/input).

package/entries/popover/README.md

@@ -0,0 +1,37 @@
+# `@alikhalilll/ui/popover`
+
+A themed wrapper around `reka-ui`'s Popover primitive — pre-styled with the shared `@alikhalilll/ui` tokens (radius, shadow, border, animation), with anchor/portal behaviour handled for you.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/ui
+```
+
+```ts
+import { APopover, APopoverTrigger, APopoverContent } from '@alikhalilll/ui/popover';
+import '@alikhalilll/ui/styles.css';
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { APopover, APopoverTrigger, APopoverContent } from '@alikhalilll/ui/popover';
+</script>
+
+<template>
+  <APopover>
+    <APopoverTrigger as-child>
+      <button type="button">Open</button>
+    </APopoverTrigger>
+    <APopoverContent class="w-64 p-4">
+      <p class="text-sm">Content lives inside a portal — escape key + outside clicks close it.</p>
+    </APopoverContent>
+  </APopover>
+</template>
+```
+
+Every prop on `reka-ui`'s `PopoverRoot`, `PopoverTrigger`, and `PopoverContent` is forwarded — see the [reka-ui Popover docs](https://reka-ui.com/docs/components/popover) for the full API.
+
+Full docs: [@alikhalilll/ui — Popover](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/popover).

package/entries/responsive-popover/README.md

@@ -0,0 +1,47 @@
+# `@alikhalilll/ui/responsive-popover`
+
+A drop-in popover that **swaps to a bottom-sheet drawer on mobile** (`useMediaQuery` watches `(min-width: 768px)`). Above the breakpoint it composes `@alikhalilll/ui/popover`; below it composes `@alikhalilll/ui/drawer`. Single API, two presentations.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/ui
+```
+
+```ts
+import {
+  AResponsivePopover,
+  AResponsivePopoverTrigger,
+  AResponsivePopoverContent,
+} from '@alikhalilll/ui/responsive-popover';
+import '@alikhalilll/ui/styles.css';
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  AResponsivePopover,
+  AResponsivePopoverTrigger,
+  AResponsivePopoverContent,
+} from '@alikhalilll/ui/responsive-popover';
+</script>
+
+<template>
+  <AResponsivePopover>
+    <AResponsivePopoverTrigger as-child>
+      <button type="button">Open</button>
+    </AResponsivePopoverTrigger>
+    <AResponsivePopoverContent popover-class="w-64 p-4" drawer-class="max-h-[60vh] p-6">
+      <p class="text-sm">Renders as a popover on desktop, a drawer on phones.</p>
+    </AResponsivePopoverContent>
+  </AResponsivePopover>
+</template>
+```
+
+`popover-class` and `drawer-class` let you apply variant-specific styling — only the active surface is mounted at any given time.
+
+This component is what powers the country picker inside [`@alikhalilll/ui/tell-input`](../tell-input).
+
+Full docs: [@alikhalilll/ui — Responsive Popover](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/responsive-popover).

package/entries/tell-input/README.md

@@ -0,0 +1,52 @@
+# `@alikhalilll/ui/tell-input`
+
+Vue 3 phone-number input with smart country detection (libphonenumber-js + IP/timezone/locale hint), a responsive popover/drawer country picker, and a structured `PhoneValidationResult` exposed via template ref.
+
+## Install
+
+```bash
+pnpm add @alikhalilll/ui
+```
+
+```ts
+import { ATellInput } from '@alikhalilll/ui/tell-input';
+import '@alikhalilll/ui/styles.css';
+```
+
+The subpath import loads only this component's chunk — none of the other `@alikhalilll/ui` components ship into the consumer's bundle.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ATellInput } from '@alikhalilll/ui/tell-input';
+
+const phone = ref('');
+const country = ref<number | null>(null);
+</script>
+
+<template>
+  <ATellInput v-model:phone="phone" v-model:country="country" show-validation />
+</template>
+```
+
+The default shape is a plain phone input with the country picker hidden. As the user types or pastes, detection runs (debounced) against known dial codes; on first match the picker slides in pre-filled and `phone` is normalised to the national significant number — `01066105963` becomes `1066105963`, `+447911123456` becomes `7911123456`.
+
+## Variants
+
+- **Picker pre-filled** — pass `default-country="…"` or seed `v-model:country` so the picker renders visible at mount.
+- **Restricted countries** — pass `allowed-dial-codes` (array of dial-digit strings, no `+`). Whitelisted countries surface in the Suggested group at the top; disallowed countries render below as disabled.
+- **Always-visible picker (legacy)** — `:detect-from-input="false"` reverts to the IP/timezone/locale chain auto-filling the picker on mount.
+
+## Exposed via template ref
+
+```ts
+const ref = ref<InstanceType<typeof ATellInput>>();
+ref.value.validation; // PhoneValidationResult — reactive
+ref.value.required; // PhoneRequiredInfo | null — example, length range, format hint
+ref.value.selectedDialCode; // '+20' | null
+ref.value.validationState; // 'idle' | 'valid' | 'error'
+```
+
+Full prop reference, customization recipes, slot catalogue, and theming guide live in the [main library docs](https://alikhalilll.github.io/ali-nuxt-toolkit/ui/tell-input).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alikhalilll/ui",
-  "version": "1.0.0",
-  "description": "Headless, shadcn-vue style component library. Scalable, fully typed, with sensible defaults and a tel input that detects the user's country automatically.",
+  "version": "1.1.1",
+  "description": "Headless, shadcn-vue style Vue 3 component library — every component is its own importable subpath (`@alikhalilll/ui/tell-input`, `@alikhalilll/ui/popover`, …) so users pay only for what they actually use.",
   "license": "MIT",
   "author": "alikhalilll",
   "repository": {
@@ -38,12 +38,38 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
-    "./styles.css": "./dist/styles.css",
+    "./tell-input": {
+      "types": "./dist/tell-input.d.ts",
+      "import": "./dist/tell-input.mjs"
+    },
+    "./input": {
+      "types": "./dist/input.d.ts",
+      "import": "./dist/input.mjs"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.mjs"
+    },
+    "./drawer": {
+      "types": "./dist/drawer.d.ts",
+      "import": "./dist/drawer.mjs"
+    },
+    "./responsive-popover": {
+      "types": "./dist/responsive-popover.d.ts",
+      "import": "./dist/responsive-popover.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.mjs"
+    },
+    "./assets/styles.css": "./dist/assets/styles.css",
+    "./styles.css": "./dist/assets/styles.css",
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "entries/**/README.md",
     "README.md",
     "LICENSE"
   ],
@@ -75,7 +101,7 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "pnpm clean && vite build && node -e \"require('node:fs').copyFileSync('src/styles.css','dist/styles.css')\"",
+    "build": "pnpm clean && vite build && node -e \"const fs=require('node:fs'); fs.mkdirSync('dist/assets',{recursive:true}); fs.copyFileSync('assets/styles.css','dist/assets/styles.css');\"",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json"
   }
 }