@appsbd/vue3-appsbd-ui 1.0.13 → 1.0.14

package/.ai/ai_ref_AbChatInput.md

@@ -0,0 +1,211 @@
+# AbChatInput — AI Reference
+
+A ChatGPT-style auto-growing chat/message composer. Use for AI chat interfaces, comment boxes that need to grow with content, or any message input needing configurable Enter/Shift+Enter/Ctrl+Enter submit behavior. Pair with `AbChatInputMenuItem` for the built-in add/more dropdown.
+
+## Installation
+
+Not globally registered — import it explicitly:
+
+```js
+import { AbChatInput, AbChatInputMenuItem } from 'vue3-appsbd-ui';
+```
+
+No extra peer deps beyond the library's own (`@lucide/vue` for the default "+" icon).
+
+## Usage
+
+```vue
+<template>
+  <AbChatInput v-model="message" placeholder="Ask anything" @submit="onSubmit">
+    <template #right>
+      <button type="button" class="btn btn-primary btn-sm rounded-circle">
+        <ArrowUp :size="16" />
+      </button>
+    </template>
+  </AbChatInput>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { AbChatInput } from 'vue3-appsbd-ui';
+import { ArrowUp } from '@lucide/vue';
+
+const message = ref('');
+function onSubmit({ message, files }) {
+  console.log(message, files);
+}
+</script>
+```
+
+Add/more dropdown (0 items = no trigger, 1 item = direct action with no popover, 2+ items = a real dropdown):
+
+```vue
+<template>
+  <AbChatInput v-model="message">
+    <template #multiple-input>
+      <AbChatInputMenuItem v-for="item in menuItems" :key="item.name" v-bind="item" />
+    </template>
+  </AbChatInput>
+</template>
+```
+
+File attachments — selection stays the consumer's job, validation/storage/preview are internal. Every content
+slot (`left`/`right`/`menu-trigger`/`single-input`/`multiple-input`) is scoped, handing back `addToAttach` (opens
+a native file picker and routes the selection through `addFiles`) among other methods — no template
+`<input type="file">` and no ref needed:
+
+```vue
+<template>
+  <AbChatInput
+    v-model="message"
+    v-model:files="attachedFiles"
+    :max-file-size="2"
+    :allowed-extensions="['jpg', 'jpeg', 'png', 'pdf']"
+  >
+    <template #single-input="{ addToAttach }">
+      <AbChatInputMenuItem
+        :icon="Paperclip"
+        name="Upload file"
+        :action="() => addToAttach({ accept: '.jpg,.jpeg,.png,.pdf' })"
+      />
+    </template>
+  </AbChatInput>
+</template>
+```
+
+## Voice input
+
+Uses the browser's native Web Speech API (`SpeechRecognition`) — no extra dependency, no API key. A built-in mic
+button renders in the `right` area (next to the `right` slot) whenever `showVoiceButton` is `true` (default).
+Clicking it (or calling `startRecording()`) swaps the whole composer row for a full-width recording bar — a live
+audio-reactive waveform (via `getUserMedia` + `AnalyserNode`) plus three controls:
+
+- **✕ cancel** — discards everything spoken this session, reverting `modelValue` to what it was before recording started.
+- **■ stop** — stops recording and keeps the transcribed text in the textarea (no submit).
+- **↑ submit** — stops recording, keeps the text, then fires `submit` immediately.
+
+Recognized speech is appended to the existing `modelValue` (not replaced), one final phrase at a time — interim
+(still-speaking) text is not shown live.
+
+A small language-code badge (e.g. `EN`, `BN`) sits on the mic button's corner. Clicking it opens an `AbPopover`
+with a searchable list of ~130 BCP-47 locales; picking one sets that recognition session's `SpeechRecognition.lang`
+and persists the choice to `localStorage` (key `apbd-chat-input-voice-lang`) so it's remembered next visit. This
+never touches the browser's own language/locale settings — only this component's own recognizer instance.
+
+Not supported in Firefox/Safari — the mic button still renders there but is `disabled`, with a tooltip explaining
+why. Requires the browser's mic permission prompt to be accepted.
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `modelValue` | `String` | `""` | Two-way-bound message text. |
+| `files` | `Array` | `[]` | v-model:files — see "Attached file shape" below. |
+| `placeholder` | `String` | `""` | Textarea placeholder (translated). |
+| `disabled` | `Boolean` | `false` | Disables the textarea and the menu trigger. |
+| `readonly` | `Boolean` | `false` | Makes the textarea read-only. |
+| `loading` | `Boolean` | `false` | Visual loading state (CSS hook only — does not itself disable input). |
+| `minHeight` | `Number` | `52` | Minimum textarea height in px. Also the threshold: past this, the composer switches to the "grown" stacked layout (see below). |
+| `maxHeight` | `Number` | `200` | Maximum textarea height in px; internal scroll kicks in beyond this. |
+| `submitOnEnter` | `Boolean` | `true` | `true`: Enter submits, Shift+Enter inserts a newline. `false`: Enter inserts a newline, Ctrl+Enter/Cmd+Enter submits. |
+| `allowNewLine` | `Boolean` | `true` | If `false`, Enter never inserts a newline regardless of `submitOnEnter`. |
+| `autoFocus` | `Boolean` | `false` | Focus the textarea on mount. |
+| `autoPreview` | `Boolean` | `true` | When `true`, clicking a file chip opens the built-in preview lightbox. When `false`, only the `file-click` event fires. |
+| `maxFileSize` | `Number` | `null` | Max size in MB per file. `null` = no limit. Enforced by `addFiles()`. |
+| `allowedExtensions` | `Array` | `[]` | Case-insensitive allowed extensions (e.g. `['jpg','png','pdf']`). Empty = all types allowed. Enforced by `addFiles()`. |
+| `containerClass` | `String` | `undefined` | Wrapper class; falls back to `globalConfig.inputContainerClass`. |
+| `borderRadius` | `String` | `"1.5rem"` | Composer roundness — any CSS length (e.g. `"0.5rem"`, `"8px"`, `"1.5rem"`). |
+| `filePreviewWidth` | `Number` | `24` | Width (px) of each attached file's thumbnail/icon in the chip. |
+| `filePreviewHeight` | `Number` | `24` | Height (px) of each attached file's thumbnail/icon in the chip. |
+| `showFileName` | `Boolean` | `true` | Show/hide the filename text next to the chip thumbnail. |
+| `showVoiceButton` | `Boolean` | `true` | Show/hide the built-in mic button (see "Voice input" below). Set `false` to build custom voice UI via slots instead. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `update:modelValue` | `string` | v-model sync. |
+| `update:files` | `FileEntry[]` | v-model:files sync — fired after `addFiles`/`removeFile`/`clearFiles`. |
+| `submit` | `{ message: string, files: FileEntry[] }` | Fired on Enter/Ctrl+Enter/Cmd+Enter per `submitOnEnter`. Not fired when `disabled`/`readonly`. |
+| `focus` / `blur` | `FocusEvent` | Forwarded native events. |
+| `keydown` | `KeyboardEvent` | Forwarded native event; fires before any submit/newline logic runs. |
+| `file-click` | `FileEntry` | A file chip was clicked (fires regardless of `autoPreview`). |
+| `file-remove` | `FileEntry` | A file chip's remove button was clicked. |
+| `file-reject` | `{ file: File, reason: string }` | A file failed `maxFileSize`/`allowedExtensions` validation. A `useToast` error is also shown. |
+| `voice-start` | — | Voice recording started (mic button clicked or `startRecording()` called). |
+| `voice-stop` | — | Recording stopped normally (■ button, ↑ submit button, `stopRecording()`, or the browser ending it on its own) — transcribed text is kept in `modelValue`. |
+| `voice-cancel` | — | Recording was cancelled (✕ button or `cancelRecording()`) — `modelValue` is reverted to what it was before recording started. |
+| `voice-error` | `Error \| SpeechRecognitionErrorEvent` | Mic permission was denied, or the recognition engine errored. A `useToast` error is also shown (except benign `no-speech`/`aborted` errors). |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `left` | Left action area (e.g. an attachment button). Scoped — see below. |
+| `right` | Right action area (e.g. send/mic button). Scoped — see below. |
+| `menu-trigger` | Overrides the default "+" icon on the add/more trigger. Only rendered when the trigger itself renders (see below). Scoped — see below. |
+| `single-input` | One static `AbChatInputMenuItem` for the add/more dropdown. Scoped — see below. |
+| `multiple-input` | A `v-for`'d set of `AbChatInputMenuItem`s for the add/more dropdown. Scoped — see below. |
+
+**All five slots are scoped**, receiving the same props so slot content can drive the composer directly:
+
+| Scoped prop | Description |
+| --- | --- |
+| `addToAttach(options?)` | Opens a native file picker and routes the selection through `addFiles`. `options`: `{ accept, multiple }` (`multiple` defaults to `true`). |
+| `addFiles(files)` | Same as the exposed method — validates and appends an already-obtained `File[]`/`FileList` (drag-drop, paste, etc.). |
+| `removeFile(id)` | Same as the exposed method. |
+| `clearFiles()` | Same as the exposed method. |
+| `updateText(text)` | Replaces the message text (fires `update:modelValue`). |
+| `focus()` | Focuses the textarea. |
+
+A single-item `#single-input`/`#multiple-input` action can use these directly — `onMenuTriggerClick`'s no-dropdown
+fast path reads the item's `action` prop with these same bindings applied, so `:action="addToAttach"` works there too.
+
+**Layout — single line vs. "grown"**: below `minHeight` worth of content (one line), `left`/textarea/`right` share a single row, centered. Past that, the composer switches to a ChatGPT-style stacked layout: the textarea becomes its own full-width row on top, and `left`/`right` wrap onto a second full-width row below it (`right` stays pinned to that row's end even when `left` isn't rendered at all). This is purely CSS-driven off the same measured content height — no extra prop.
+
+**Add/more trigger behavior** is driven by the total count of valid items across `single-input` + `multiple-input` combined, not by which slot they came from:
+- 0 items → no trigger renders at all (fully backward-compatible with plain `left`-slot-only usage).
+- 1 item → the trigger stays the default "+" icon; clicking it calls that item's `action` directly, no dropdown opens.
+- 2+ items → clicking the trigger opens a dropdown (custom-positioned, teleported to `<body>`, matching the composer's full width — not `AbPopover`, which sizes/anchors to the trigger button instead) listing every item (with a divider between the two slot groups if both are non-empty). Opens below by default and flips above (capped to the available space, scrolling internally if needed) when there isn't room below — never clipped by the viewport or a scrolling ancestor.
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue` (string). Also a second v-model: `files` + `update:files` (`FileEntry[]`).
+
+### Attached file shape (`FileEntry`)
+
+```js
+{
+  id,           // stable string key, generated internally
+  file,         // the raw File object
+  name,
+  size,
+  type,
+  extension,    // lowercased, no dot
+  isImage,      // boolean — drives chip thumbnail vs icon
+  previewKind,  // 'image' | 'video' | 'audio' | 'pdf' | 'none' — drives lightbox rendering
+  url,          // objectURL — revoked automatically on removeFile()/clearFiles()/unmount
+  fileIcon,     // icon component for non-image chip display
+}
+```
+
+## Exposed methods
+
+Same methods as the scoped slot props above (see "Slots"), also available via a template ref for use outside
+any slot — e.g. a toolbar button elsewhere on the page.
+
+| Method | Description |
+| --- | --- |
+| `addFiles(files)` | Accepts a `File[]` or `FileList`. Validates each against `maxFileSize`/`allowedExtensions`; rejected files fire `file-reject` + a toast and are never added. Accepted files are appended and `update:files` fires once with the full list. |
+| `removeFile(id)` | Removes one attached file by `id`, revoking its object URL. |
+| `clearFiles()` | Removes all attached files, revoking every object URL. |
+| `addToAttach(options?)` | Opens a native file picker and routes the selection through `addFiles`. `options`: `{ accept, multiple }`. |
+| `updateText(text)` | Replaces the message text (fires `update:modelValue`). |
+| `focus()` | Focuses the textarea. |
+| `startRecording()` | Starts voice input (same as clicking the mic button). No-op if unsupported/disabled/readonly/already recording. |
+| `stopRecording()` | Stops recording, keeping the transcribed text (same as the ■ button). |
+| `cancelRecording()` | Stops recording and discards the transcribed text (same as the ✕ button). |
+
+## Provides
+
+`abChatInputCloseMenu` (no-arg function) — consumed by `AbChatInputMenuItem` to auto-close the dropdown after its `action` fires. Not meant to be consumed by anything else.

package/.ai/ai_ref_AbChatInputMenuItem.md

@@ -0,0 +1,55 @@
+# AbChatInputMenuItem — AI Reference
+
+A single row (icon + name + optional description) for `AbChatInput`'s add/more dropdown. Not useful outside `AbChatInput` — see [.ai/ai_ref_AbChatInput.md](./ai_ref_AbChatInput.md).
+
+## Installation
+
+Not globally registered — import it explicitly. Requires `@lucide/vue` (or any icon component) for the `icon` prop.
+
+## Usage
+
+```vue
+<template>
+  <AbChatInput v-model="message">
+    <template #single-input>
+      <AbChatInputMenuItem :icon="Paperclip" name="Attach a file" description="jpg, png, pdf" :action="onAttach" />
+    </template>
+  </AbChatInput>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { AbChatInput, AbChatInputMenuItem } from 'vue3-appsbd-ui';
+import { Paperclip } from '@lucide/vue';
+
+const message = ref('');
+function onAttach() { /* open a file picker, etc. */ }
+</script>
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `icon` | `Object \| Function` | `null` | Icon component (e.g. a `@lucide/vue` icon). |
+| `name` | `String` | `""` | Item title (passed through `translateGetMsg`). |
+| `description` | `String` | `""` | Optional secondary line (passed through `translateGetMsg`). |
+| `action` | `Function` | `null` | Called on click. **Important:** when this item is the only one registered across `#single-input`/`#multiple-input`, `AbChatInput` reads this prop directly off the item's VNode and calls it without mounting the item — always pass a plain function, not something that depends on the component being mounted first. |
+
+## Events
+
+| Event | Payload | Description |
+| --- | --- | --- |
+| `click` | — | Fired on click, after `action()`. |
+
+## Slots
+
+None.
+
+## v-model
+
+Not applicable — stateless presentational item.
+
+## Injects
+
+`abChatInputCloseMenu` (optional, no-arg function) — provided by the parent `AbChatInput`; called after `action()`/`click` to close the dropdown. No consumer wiring needed.

package/.ai/ai_ref_AbFileUploader.md

@@ -1,6 +1,8 @@
 # AbFileUploader — AI Reference
 
-File upload input with drag-and-drop, size validation, and preview. Can render a default uploader UI or accept a custom one via slots.
+File upload input with drag-and-drop, size/type validation, and preview. Supports an image-only
+mode (default) or a generic file mode with extension-icon previews. Can render a default uploader
+UI or accept a custom one via slots.
 
 > Also available inside `AbCustomField` via the `FU` field type — see [.ai/ai_ref_AbCustomField.md](./ai_ref_AbCustomField.md).
 
@@ -8,9 +10,17 @@ File upload input with drag-and-drop, size validation, and preview. Can render a
 
 ```vue
 <template>
-  <ab-file-uploader v-model="file" label="Upload avatar" :max-size="1.5" @on-select-files="handleFiles" />
+  <ab-file-uploader v-model="avatar" label="Upload avatar" :max-size="1.5" @on-select-files="handleFiles" />
 
-  <ab-file-uploader v-model="file" :max-size="5">
+  <!-- File mode: allowedTypes is required, non-image files show an extension icon -->
+  <ab-file-uploader
+    v-model="doc"
+    type="file"
+    :allowed-types="['pdf', 'doc', 'docx', 'xlsx']"
+    :max-size="5"
+  />
+
+  <ab-file-uploader v-model="avatar" :max-size="5">
     <template #dial>
       <div class="my-drop-zone">Drop files here</div>
     </template>
@@ -19,7 +29,8 @@ File upload input with drag-and-drop, size validation, and preview. Can render a
 
 <script setup>
 import { ref } from 'vue';
-const file = ref(null);
+const avatar = ref(null);
+const doc = ref(null);
 function handleFiles(files) { console.log('Selected files:', files); }
 </script>
 ```
@@ -32,13 +43,18 @@ function handleFiles(files) { console.log('Selected files:', files); }
 | `maxSize` | `Number` | `2.0` | Max file size in MB. |
 | `label` | `String` | `""` | Field label. |
 | `containerClass` | `String` | `undefined` | Wrapper class (falls back to globalConfig.inputContainerClass). |
+| `type` | `'image' \| 'file'` | `'image'` | Upload mode. `image` only accepts images and always shows a thumbnail preview. `file` accepts any file listed in `allowedTypes`; non-image files render an extension icon instead of a preview. |
+| `allowedTypes` | `Array<String>` | `[]` | Allowed extensions, no dot (e.g. `['pdf', 'docx']`). **Required when `type="file"`** — logs a console error and rejects every selected file when empty. Also drives the input's `accept` attribute. Ignored in `image` mode. |
+| `showFileName` | `Boolean` | `null` | Whether to render the filename below the container. `null` auto-picks by `type` (off for `image`, on for `file`); pass `true`/`false` to override either mode. |
+| `width` | `String \| Number` | `undefined` | Container width. Number is treated as px. Falls back to the default `100px`. |
+| `height` | `String \| Number` | `undefined` | Container height. Number is treated as px. Falls back to the default `73px`. |
 
 ## Events
 
 | Event | Payload | Description |
 | --- | --- | --- |
-| `update:modelValue` | `file` | v-model sync. |
-| `onSelectFiles` | `files` | All selected files after size validation. |
+| `update:modelValue` | `file \| null` | v-model sync. |
+| `onSelectFiles` | `files` | All selected files after validation. |
 
 ## Slots
 
@@ -47,3 +63,15 @@ function handleFiles(files) { console.log('Selected files:', files); }
 | `label` | Custom label. |
 | `dial` | Custom uploader UI (replaces the default design). |
 | `default` | Alternative custom UI slot. |
+
+## v-model
+
+Yes — `modelValue` + `update:modelValue`. Holds a `File` object (or a URL string for pre-existing
+previews), or `null`.
+
+## Notes
+
+- Icon mapping for non-image files (pdf, zip, doc/docx, xls/xlsx, ppt/pptx, video) comes from the
+  shared `useFileValidator()` composable's `getFileIconByExt`, the same mapping `AbChatInput` uses.
+- In `image` mode, validation is unchanged from before: only jpg/jpeg/png/gif/webp are accepted and
+  checked against the file's actual MIME type.

package/.ai/ai_ref_AbFormCheck.md

@@ -1,6 +1,6 @@
 # AbFormCheck / AbRadioInput — AI Reference
 
-Checkbox or radio group with card, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
+Checkbox or radio group with card, icon-card, card-flat-check, image-radio, segmented, and pill visual variants. `AbRadioInput` is an alias export of `AbFormCheck`.
 
 ## Usage
 
@@ -17,6 +17,41 @@ Checkbox or radio group with card, segmented, and pill visual variants. `AbRadio
   />
 
   <ab-form-check v-model="plan" type="radio" name="plan" variant="card" :options="plans" />
+
+  <!-- Custom check icon (card-family variants only) -->
+  <ab-form-check v-model="plan" type="radio" name="plan2" variant="card" :options="plans" :check-icon-component="Check" />
+
+  <!-- Flat, shadow-free card with the indicator on the right (card-family variants only) -->
+  <ab-form-check v-model="plan" type="radio" name="plan3" variant="card" :options="plans" flat-check check-right />
+
+  <!-- icon-card: icon centered on top by default (no containerClass needed) -->
+  <ab-form-check v-model="plan" type="radio" name="plan4" variant="icon-card" :options="plans" />
+
+  <!-- card-flat-check: flatCheck styling on by default -->
+  <ab-form-check v-model="plan" type="radio" name="plan5" variant="card-flat-check" :options="plans" />
+
+  <!-- isInline false on a card-family variant: full-width stacked column with a gap between cards -->
+  <ab-form-check v-model="plan" type="radio" name="plan6" variant="card" :options="plans" :is-inline="false" />
+
+  <!-- image-radio: big image tile, native input hidden, check badge overlays a corner -->
+  <ab-form-check
+    v-model="theme"
+    type="radio"
+    name="theme"
+    variant="image-radio"
+    card-width="140px"
+    selector-position="top-right"
+    :options="[
+      { val: 'light', title: 'Light', img_src: '/light.png' },
+      { val: 'dark', title: 'Dark', img_src: '/dark.png' },
+    ]"
+  />
+
+  <!-- image-radio chip mode: isInline=true swaps the big tile for a compact icon+text chip -->
+  <ab-form-check v-model="theme" type="radio" name="theme2" variant="image-radio" :options="themes" is-inline />
+
+  <!-- isBoxShadow: checked state as a colored box-shadow glow instead of a border-color change -->
+  <ab-form-check v-model="plan" type="radio" name="plan7" variant="card" :options="plans" is-box-shadow />
 </template>
 ```
 
@@ -29,16 +64,26 @@ Checkbox or radio group with card, segmented, and pill visual variants. `AbRadio
 | `rules` | `String` | `""` | VeeValidate rules. |
 | `val` | `any` | `null` | Initial value. |
 | `type` | `String` | `"checkbox"` | `"checkbox"` or `"radio"`. |
-| `isInline` | `Boolean` | `false` | Render options inline. |
-| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable? }`. |
+| `isInline` | `Boolean` | `false` | Render options inline. On `variant="image-radio"` this means something different: options always flow in a wrapping tile grid regardless of this prop; `isInline` instead toggles a compact icon+text chip look (`true`, check badge leads on the left like a normal radio/checkbox and only takes up space once checked) vs. the default big image tile (`false`, check badge overlays the image corner). |
+| `options` | `Array` | `[]` | Each: `{ val, title, description?, icon?, img_src?, iconComponent?, disable?, class? }`. `description` is always rendered via `v-html` — only pass trusted/sanitized HTML. |
 | `name` | `String` | **required** | Field name. |
 | `limit` | `Number` | `0` | Max selections (0 = unlimited). |
-| `containerClass` | `String` | `"mb-3"` | Wrapper class. |
+| `containerClass` | `String` | `"mb-3"` | Wrapper class. `variant="card"`/`"icon-card"`/`"card-flat-check"`/`"image-radio"` layout keywords: `left-top`, `middle-top` (icon position). `icon-card` and `image-radio` default to `middle-top` if neither keyword is passed. |
 | `size` | `String` | `"md"` | Control size. |
 | `iconSize` | `String` | `"24px"` | Icon size (when option has an icon). |
 | `iconGap` | `String` | `"10px"` | Gap between icon and label. |
-| `variant` | `String` | `"default"` | `default`, `card`, `segmented`, `pill`. |
-| `cardWidth` | `String` | `"auto"` | Width of card options (e.g. `"160px"`, `"50%"`, `"12rem"`). |
+| `variant` | `String` | `"default"` | `default`, `card`, `icon-card` (card with the icon centered on top by default), `card-flat-check` (card with `flatCheck` styling on by default), `image-radio` (image-first card; native input hidden, check badge overlays the image's top-left corner), `segmented`, `pill`. |
+| `cardWidth` | `String` | `"auto"` | Width of the card itself for card-family variants (e.g. `"160px"`, `"50%"`, `"12rem"`). Applies in both inline and stacked (`isInline` set to `false`) layouts. |
+| `checkIcon` | `String` | `undefined` | CSS icon class rendered inside the checked input, replacing the native checkmark/dot. Card-family variants only. |
+| `checkIconComponent` | `Component` | `undefined` | A Vue component (e.g. a Lucide icon) rendered inside the checked input, replacing the native checkmark/dot. Card-family variants only. On `variant="image-radio"`, a built-in circle-check icon is used automatically when neither this nor `checkIcon` is set. |
+| `flatCheck` | `Boolean` | `false` | Shadow-free checked style for card-family variants: border-color change + accent-colored title instead of box-shadow, indicator vertically centered. Always on for `variant="card-flat-check"`. |
+| `checkRight` | `Boolean` | `false` | Moves the checkbox/radio indicator to the right side of the card (card-family variants only). Typically combined with `flatCheck`. |
+| `selectorPosition` | `String` | `"top-left"` | Corner the check badge overlays on the image: `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`. `variant="image-radio"` only. |
+| `isBoxShadow` | `Boolean` | `false` | Card-family variants only (`card`, `icon-card`, `card-flat-check`, `image-radio`). Shows checked state as a colored box-shadow glow instead of a border-color change — the border stays transparent throughout, matching the classic `AbImageRadioInput` look. |
+
+Card-family variants `card`, `icon-card`, `card-flat-check` with `isInline` set to `false` (the default) stack in a full-width column with a gap between cards, instead of the content-sized cards used when `isInline` set to `true`.
+
+`variant="image-radio"` behaves differently from the rest of the card family: options always flow in a wrapping tile grid (never full-width stacked), the native checkbox/radio dot is always hidden, and `isInline` instead switches between two looks — `false` (default): a big image fills the tile with the title below and a check badge overlaying the corner set by `selectorPosition`; `true`: a compact icon+text chip where the check badge leads on the left (like a normal radio/checkbox) instead of overlaying a corner, and only takes up space once an option is checked.
 
 ## Events
 
@@ -48,12 +93,26 @@ Checkbox or radio group with card, segmented, and pill visual variants. `AbRadio
 
 ## Slots
 
+Per-option slots are **not** dynamically named per option (no `-{title}`/`-{val}` suffix) — each is a single
+scoped slot rendered once per option, scoped with `{ check, index }` (`check` is the current `options[index]`
+item). If different options need different content, branch inside the template on `check.val`/`index`:
+
+```vue
+<ab-form-check variant="card" :options="plans" v-model="plan" type="radio" name="plan">
+  <template #option-label="{ check }">
+    <template v-if="check.val === 'pro'">
+      <ab-badge variant="danger">Popular</ab-badge> {{ check.title }}
+    </template>
+    <template v-else>{{ check.title }}</template>
+  </template>
+</ab-form-check>
+```
+
 | Name | Description |
 | --- | --- |
-| `label` | Group label. |
-| `description` | Group description. |
+| `label` | Group label (the whole component's `label` prop/heading — not per-option). |
+| `description` | Per-option description, scoped `{ check, index }`. Overrides the option's `description` key (the default content renders it via `v-html`). |
 | `help-text` | Helper text. |
-| `input-img-{option.title}` | Per-option image slot. |
-| `input-icon-{option.title}` | Per-option icon component slot. |
-| `label-{option.title}` | Per-option label slot. |
-| `description-{option.title}` | Per-option description slot. |
+| `input-icon` | Per-option image/icon area, scoped `{ check, index }` (card-family/segmented/pill variants). Overrides `img_src`/`icon`/`iconComponent`. |
+| `option-label` | Per-option title, scoped `{ check, index }` (card-family/segmented/pill variants). Overrides the option's `title`. Deliberately not named `label` — that name is already the group-level heading slot above. |
+| `check-icon` | Per-option checked-state icon, scoped `{ check, index }` (card-family variants only). Default content falls back to `checkIcon`/`checkIconComponent`; overrides both when provided. |

package/.ai/ai_ref_AbInputField.md

@@ -43,6 +43,8 @@ const form = reactive({ email: '' });
 | `maxlength` | `any` | `null` | Native `maxlength`. |
 | `isLeftIconBorder` | `Boolean` | `false` | Renders border between the prefix icon and the input. |
 | `isRightIconBorder` | `Boolean` | `false` | Renders border between the postfix icon and the input. |
+
+> Set both `isLeftIconBorder` and `isRightIconBorder` to `true` to show a border on both sides at once — the whole input group (icons + field) is treated as one unified box on focus.
 | `passIconPosition` | `String` | `"right"` | Position of the show password icon (`"left"`, `"right"`). |
 | `isHideLabel` | `Boolean` | `false` | Hide the label visually. |
 | `iconPosition` | `String` | `undefined` | Position of the custom `#icon` slot (`"left"`, `"right"`). |

package/.ai/ai_ref_AbNumberField.md

@@ -38,6 +38,7 @@ const qty = ref(1);
 | `isBorder` | `Boolean` | `false` | Show inner borders between minus/input/plus. Default is a seamless pill. |
 | `isLeftIconBorder` | `Boolean` | `false` | Render border between the prefix icon and the input. |
 | `isRightIconBorder` | `Boolean` | `false` | Render border between the postfix icon and the input. |
+| `size` | `String` | `undefined` | Input size: `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Falls back to `globalConfig.size`, then `"md"`. |
 
 ## Events
 

package/.ai/ai_ref_abDate.md

@@ -0,0 +1,58 @@
+# abDate (Library)
+
+Chhoto, dependency-free date/datetime/time formatting library (dayjs-er moto). Kono timezone conversion kore na — je value deya hoy sheta as-is (wall-clock) format hoy.
+
+## Usage
+
+```javascript
+import { formatDate, formatDateTime, formatTime, formatCustom } from "@vue3-appsbd-ui/libraries/abDate";
+
+formatDate("2026-08-17");                 // globalConfig.dateDisplayFormat na thakle -> "2026-08-17"
+formatDateTime("2026-08-17 14:05:09");    // globalConfig.datetimeDisplayFormat na thakle -> "2026-08-17 14:05:09"
+formatTime(new Date());                   // globalConfig.timeDisplayFormat na thakle -> "14:05:09"
+formatCustom("2026-08-17", "DD/MM/YYYY"); // -> "17/08/2026"
+```
+
+## Default Format Resolution
+
+`formatDate` / `formatDateTime` / `formatTime` resolve their format in this order:
+
+1. Explicit `format` argument.
+2. `AppsbdUIConfigure`'s `dateDisplayFormat` / `datetimeDisplayFormat` / `timeDisplayFormat` (see [ai_ref_global_config.md](./ai_ref_global_config.md)).
+3. Built-in MySQL default: `'YYYY-MM-DD'` / `'YYYY-MM-DD HH:mm:ss'` / `'HH:mm:ss'`.
+
+## API Reference
+
+### Functions
+
+| Function | Signature | Description |
+|---|---|---|
+| `formatDate` | `(value, format?) => string` | Formats `value` as a date. Falls back to `globalConfig.dateDisplayFormat`, then `'YYYY-MM-DD'`. |
+| `formatDateTime` | `(value, format?) => string` | Formats `value` as a date+time. Falls back to `globalConfig.datetimeDisplayFormat`, then `'YYYY-MM-DD HH:mm:ss'`. |
+| `formatTime` | `(value, format?) => string` | Formats `value` as a time. Falls back to `globalConfig.timeDisplayFormat`, then `'HH:mm:ss'`. |
+| `formatCustom` | `(value, format) => string` | Generic formatter — `format` is required, no default resolution. |
+
+### `value` Input Types
+
+- `Date` — used as-is.
+- `number` — treated as an epoch timestamp (`new Date(value)`).
+- `string` — parsed manually (no native `Date` parsing quirks): `YYYY-MM-DD`, `YYYY-MM-DD HH:mm[:ss]`, `YYYY-MM-DDTHH:mm:ss(.sss)(Z|±HH:mm)`, or time-only `HH:mm[:ss]` (attached to today's date). Any trailing `Z`/offset is **ignored**, not applied as a shift. Unrecognized strings fall back to native `new Date(string)`.
+- Falsy or unparseable input → all functions return `''`.
+
+### Format Tokens
+
+Same token set as `AbDateTimePicker.vue`, plus real second support (`ss`/`s`):
+
+| Token | Meaning | Example |
+|---|---|---|
+| `YYYY` / `YY` | 4/2-digit year | `2026` / `26` |
+| `MMMM` / `MMM` | Full/short month name (uses `globalConfig.monthNames`/`monthNamesShort`, English default) | `August` / `Aug` |
+| `MM` / `M` | 2/1-digit month | `08` / `8` |
+| `DD` / `D` | 2/1-digit day | `17` / `17` |
+| `HH` / `H` | 2/1-digit hour (24h) | `14` / `14` |
+| `hh` / `h` | 2/1-digit hour (12h) | `02` / `2` |
+| `mm` / `m` | 2/1-digit minute | `05` / `5` |
+| `ss` / `s` | 2/1-digit second | `09` / `9` |
+| `A` / `a` | Upper/lowercase AM-PM | `PM` / `pm` |
+
+No timezone conversion is performed anywhere in this library.

package/.ai/ai_ref_useFileValidator.md

@@ -14,10 +14,15 @@ function handleFileUpload(event) {
   const file = event.target.files[0];
   if (!file) return;
 
-  const validatedFile = getFileInfo(file, 2.0);
-  if (validatedFile) {
-    // validatedFile.isImage
-    // validatedFile.fileIcon
+  // Legacy / default: image-only, validated against a static jpg/png/gif/webp mime map.
+  const validatedImage = getFileInfo(file, 2.0);
+
+  // Custom extension list: any extension in the list is allowed (no mime map needed).
+  const validatedDoc = getFileInfo(file, 5.0, ["pdf", "doc", "docx", "xlsx"]);
+
+  if (validatedDoc) {
+    // validatedDoc.isImage
+    // validatedDoc.fileIcon
   }
 }
 </script>
@@ -27,5 +32,5 @@ function handleFileUpload(event) {
 
 | Method | Signature | Description |
 |---|---|---|
-| `getFileInfo(file, sizeLimitMb)` | `Function` | Validates a `File` object against allowed MIME types and max size (`sizeLimitMb`, default `1.0`). If invalid, spawns a toast error and returns `null`. If valid, returns the `file` augmented with `isImage` and `fileIcon` properties. |
+| `getFileInfo(file, sizeLimitMb, allowedExtensions?)` | `Function` | Validates a `File` object and max size (`sizeLimitMb`, default `1.0`). Without `allowedExtensions`, only jpg/jpeg/png/gif/webp are allowed and cross-checked against the file's actual MIME type (legacy, image-only behavior). With `allowedExtensions` (array of extensions, no dot, e.g. `['pdf', 'docx']`), any extension in that list is allowed instead — no MIME cross-check. If invalid, spawns a toast error and returns `null`. If valid, returns the `file` augmented with `isImage` and `fileIcon` properties. |
 | `getFileIconByExt(ext, type)` | `Function` | Returns `{ isImage: boolean, fileIcon: Component\|String }` based on file extension and MIME type. Uses `@lucide/vue` icons for known formats (pdf, zip, doc, xls, ppt, mp4). |

package/AI_REFERENCE.md

@@ -21,7 +21,7 @@
 | `AbField`                      | ✅  | Polymorphic field wrapper - renders any input type via a `type` prop.                                                  | [.ai/ai_ref_AbField.md](./.ai/ai_ref_AbField.md)                       |
 | `AbCustomField`                | ✅  | Dynamic form scaffold driven by a `fieldInputs` array.                                                                 | [.ai/ai_ref_AbCustomField.md](./.ai/ai_ref_AbCustomField.md)           |
 | `AbDateTimePicker`             | ✅  | Date / time / range picker. Also import `v-calendar/style.css` in consuming app.                                       | [.ai/ai_ref_AbDateTimePicker.md](./.ai/ai_ref_AbDateTimePicker.md)     |
-| `AbFormCheck` / `AbRadioInput` | ✅  | Checkbox / radio group (default, card, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`.         | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md)               |
+| `AbFormCheck` / `AbRadioInput` | ✅  | Checkbox / radio group (default, card, icon-card, card-flat-check, image-radio, segmented, pill variants). `AbRadioInput` is an alias of `AbFormCheck`. | [.ai/ai_ref_AbFormCheck.md](./.ai/ai_ref_AbFormCheck.md)               |
 | `AbToggle`                     | ✅  | Accessible switch/toggle with title & description slots.                                                               | [.ai/ai_ref_AbToggle.md](./.ai/ai_ref_AbToggle.md)                     |
 | `AbInputTag`                   | ✅  | Multi-tag input with optional option list.                                                                             | [.ai/ai_ref_AbInputTag.md](./.ai/ai_ref_AbInputTag.md)                 |
 | `AbMultiSelect`                | ✅  | Searchable single/multi/tag select (custom built-in — replaces `@vueform/multiselect`).                                | [.ai/ai_ref_AbMultiSelect.md](./.ai/ai_ref_AbMultiSelect.md)           |
@@ -39,7 +39,7 @@
 | `AbMainLayout`                 |  —  | Full-page application shell with left/right sidebar drawers, header, body, and footer slots. Mobile-responsive.        | [.ai/ai_ref_AbMainLayout.md](./.ai/ai_ref_AbMainLayout.md)             |
 | `AbSlider`                     |  —  | Single or range numeric slider.                                                                                        | [.ai/ai_ref_AbSlider.md](./.ai/ai_ref_AbSlider.md)                     |
 | `AbColorPicker`                |  —  | Radio-style color swatch picker.                                                                                       | [.ai/ai_ref_AbColorPicker.md](./.ai/ai_ref_AbColorPicker.md)           |
-| `AbFileUploader`               |  —  | File upload field with drag-and-drop and size validation.                                                              | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md)         |
+| `AbFileUploader`               |  —  | File upload field with size validation; image mode (default, preview) or file mode (`allowedTypes` + extension icons). | [.ai/ai_ref_AbFileUploader.md](./.ai/ai_ref_AbFileUploader.md)         |
 | `AbFilterPanel`                |  —  | Advanced filter panel with search and scan modes.                                                                      | [.ai/ai_ref_AbFilterPanel.md](./.ai/ai_ref_AbFilterPanel.md)           |
 | `AbSettingsForm`               |  —  | Settings-style form that auto-registers as a wizard step validator.                                                    | [.ai/ai_ref_AbSettingsForm.md](./.ai/ai_ref_AbSettingsForm.md)         |
 | `AbScrollbar`                  |  —  | Styled custom scrollbar wrapper with scroll events.                                                                    | [.ai/ai_ref_AbScrollbar.md](./.ai/ai_ref_AbScrollbar.md)               |
@@ -56,16 +56,19 @@
 | `AbPricingContainer`           |  —  | Layout wrapper for pricing tables.                                                                                     | [.ai/ai_ref_AbPricingContainer.md](./.ai/ai_ref_AbPricingContainer.md) |
 | `AbPricingTable`               |  —  | Stylized, responsive pricing table component with feature list and package columns.                                    | [.ai/ai_ref_AbPricingTable.md](./.ai/ai_ref_AbPricingTable.md)         |
 | `AbChart`                      |  —  | Flexible chart component powered by Apache ECharts.                                                                    | [.ai/ai_ref_AbChart.md](./.ai/ai_ref_AbChart.md)                       |
+| `AbChatInput`                  |  —  | ChatGPT-style auto-growing composer with an item-count-driven add/more dropdown, internal file attachment preview, and built-in Web Speech API voice input.  | [.ai/ai_ref_AbChatInput.md](./.ai/ai_ref_AbChatInput.md)               |
+| `AbChatInputMenuItem`          |  —  | Presentational row (icon/name/description/action) for `AbChatInput`'s add/more dropdown.                               | [.ai/ai_ref_AbChatInputMenuItem.md](./.ai/ai_ref_AbChatInputMenuItem.md) |
 | `AbDarkModeToggler`            |  —  | Light / dark theme toggle (pairs with `useTheme`).                                                                     | [.ai/ai_ref_AbDarkModeToggler.md](./.ai/ai_ref_AbDarkModeToggler.md)   |
 | `useAlert`                     |  —  | Procedural API to trigger SweetAlert-based modal alerts, notifications, and confirmations.                             | [.ai/ai_ref_useAlert.md](./.ai/ai_ref_useAlert.md)                     |
 | `abEventBus` / `emitterObj`    |  —  | Lightweight global event bus using `tiny-emitter`.                                                                     | [.ai/ai_ref_abEventBus.md](./.ai/ai_ref_abEventBus.md)                 |
 | `useTheme`                     |  —  | Composable for light/dark theme toggling with localStorage and system preference sync.                                 | [.ai/ai_ref_useTheme.md](./.ai/ai_ref_useTheme.md)                     |
 | `useToast`                     |  —  | Procedural API to spawn toast notifications (success, error, warning, info).                                           | [.ai/ai_ref_useToast.md](./.ai/ai_ref_useToast.md)                     |
-| `useFileValidator`             |  —  | File validation utilities (size, MIME type) and file icon/image resolvers.                                             | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md)     |
+| `useFileValidator`             |  —  | File validation utilities (size, MIME type, or a custom allowed-extensions list) and file icon/image resolvers.        | [.ai/ai_ref_useFileValidator.md](./.ai/ai_ref_useFileValidator.md)     |
 | `useResponsive`                |  —  | Real-time viewport width tracker for responsive layout decisions (Bootstrap 5 aligned).                                | [.ai/ai_ref_useResponsive.md](./.ai/ai_ref_useResponsive.md)           |
 | `abTranslate`                  |  —  | Localization utility wrapping `vue3-gettext` with automatic variable interpolation.                                    | [.ai/ai_ref_abTranslate.md](./.ai/ai_ref_abTranslate.md)               |
 | `abVeeRules`                   |  —  | Collection of pre-configured VeeValidate validation rules integrated with localization.                                | [.ai/ai_ref_abVeeRules.md](./.ai/ai_ref_abVeeRules.md)                 |
 | `abRequestParam`               |  —  | Data-transfer classes to build structured API request parameters (pagination, sorting, filtering).                     | [.ai/ai_ref_abRequestParam.md](./.ai/ai_ref_abRequestParam.md)         |
+| `abDate`                       |  —  | Dependency-free date/datetime/time formatter (dayjs-style); no timezone conversion, defaults from global config.       | [.ai/ai_ref_abDate.md](./.ai/ai_ref_abDate.md)                         |
 
 ## Directives & Controller APIs