npm - @velkymx/vibeui - Versions diffs - 0.8.2 → 0.9.0 - Mend

@velkymx/vibeui 0.8.2 → 0.9.0

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

Files changed (88) hide show

package/README.md +171 -9
package/dist/components/VibeAlert.vue.d.ts +12 -2
package/dist/components/VibeAutocomplete.vue.d.ts +46 -0
package/dist/components/VibeButton.vue.d.ts +4 -4
package/dist/components/VibeDataTable.vue.d.ts +6 -6
package/dist/components/VibeDatePicker.vue.d.ts +122 -0
package/dist/components/VibeDraggable.vue.d.ts +81 -0
package/dist/components/VibeDroppable.vue.d.ts +74 -0
package/dist/components/VibeFileInput.vue.d.ts +133 -0
package/dist/components/VibeFormCheckbox.vue.d.ts +1 -1
package/dist/components/VibeFormDatepicker.vue.d.ts +1 -1
package/dist/components/VibeFormGroup.vue.d.ts +1 -1
package/dist/components/VibeFormInput.vue.d.ts +1 -1
package/dist/components/VibeFormRadio.vue.d.ts +1 -1
package/dist/components/VibeFormSelect.vue.d.ts +1 -1
package/dist/components/VibeFormSpinbutton.vue.d.ts +1 -1
package/dist/components/VibeFormSwitch.vue.d.ts +1 -1
package/dist/components/VibeFormTextarea.vue.d.ts +1 -1
package/dist/components/VibeFormWysiwyg.vue.d.ts +2 -2
package/dist/components/VibeResizable.vue.d.ts +144 -0
package/dist/components/VibeSkeleton.vue.d.ts +53 -0
package/dist/components/VibeSlider.vue.d.ts +78 -0
package/dist/components/VibeSortable.vue.d.ts +40 -0
package/dist/components/VibeStepper.vue.d.ts +132 -0
package/dist/components/VibeTab.vue.d.ts +45 -0
package/dist/components/VibeTabs.vue.d.ts +82 -0
package/dist/components/VibeToast.vue.d.ts +11 -0
package/dist/components/VibeToastHost.vue.d.ts +15 -0
package/dist/components/dndStore.d.ts +6 -0
package/dist/components/index.d.ts +14 -1
package/dist/composables/useForm.d.ts +22 -0
package/dist/composables/usePosition.d.ts +20 -0
package/dist/composables/useToast.d.ts +52 -0
package/dist/directives/vTooltip.d.ts +25 -0
package/dist/index.d.ts +6 -0
package/dist/types.d.ts +11 -4
package/dist/vibeui.css +1 -1
package/dist/vibeui.es.js +4256 -1827
package/dist/vibeui.umd.js +1 -1
package/package.json +4 -5
package/CLAUDE.md +0 -48
package/docs/README.md +0 -153
package/docs/components/advanced/popover.md +0 -150
package/docs/components/advanced/scrollspy.md +0 -64
package/docs/components/advanced/tooltip.md +0 -111
package/docs/components/card/card.md +0 -215
package/docs/components/core/alert.md +0 -72
package/docs/components/core/badge.md +0 -81
package/docs/components/core/button-group.md +0 -105
package/docs/components/core/button.md +0 -127
package/docs/components/core/close-button.md +0 -82
package/docs/components/core/link.md +0 -36
package/docs/components/core/placeholder.md +0 -135
package/docs/components/core/spinner.md +0 -109
package/docs/components/data/datatable.md +0 -416
package/docs/components/interactive/accordion.md +0 -92
package/docs/components/interactive/carousel.md +0 -97
package/docs/components/interactive/collapse.md +0 -105
package/docs/components/interactive/dropdown.md +0 -93
package/docs/components/interactive/modal.md +0 -148
package/docs/components/interactive/offcanvas.md +0 -89
package/docs/components/interactive/toast.md +0 -114
package/docs/components/layout/col.md +0 -123
package/docs/components/layout/container.md +0 -59
package/docs/components/layout/row.md +0 -113
package/docs/components/list/list-group.md +0 -221
package/docs/components/navigation/breadcrumb.md +0 -116
package/docs/components/navigation/nav.md +0 -88
package/docs/components/navigation/navbar.md +0 -106
package/docs/components/navigation/pagination.md +0 -146
package/docs/components/progress/progress.md +0 -182
package/docs/composables/back-button.md +0 -28
package/docs/composables/breakpoints.md +0 -54
package/docs/composables/color-mode.md +0 -141
package/docs/forms/README.md +0 -88
package/docs/forms/form-checkbox.md +0 -50
package/docs/forms/form-datepicker.md +0 -50
package/docs/forms/form-group.md +0 -80
package/docs/forms/form-input.md +0 -55
package/docs/forms/form-radio.md +0 -58
package/docs/forms/form-select.md +0 -54
package/docs/forms/form-spinbutton.md +0 -55
package/docs/forms/form-switch.md +0 -47
package/docs/forms/form-textarea.md +0 -51
package/docs/forms/form-wysiwyg.md +0 -64
package/docs/forms/input-group.md +0 -51
package/docs/forms/validation.md +0 -599
package/llms.txt +0 -422

package/docs/composables/breakpoints.md DELETED Viewed

@@ -1,54 +0,0 @@
-# useBreakpoints
-A composable for programmatic breakpoint detection using standard Bootstrap grid sizes.
-## Basic Usage
-```javascript
-import { useBreakpoints } from '@velkymx/vibeui'
-const { isMobile, isTablet, isLg, isXxl } = useBreakpoints()
-```
-## API
-| Property | Type | Description |
-|---|---|---|
-| `isXs` | `ComputedRef<boolean>` | `true` if width < 576px |
-| `isSm` | `Ref<boolean>` | `true` if width >= 576px |
-| `isMd` | `Ref<boolean>` | `true` if width >= 768px |
-| `isLg` | `Ref<boolean>` | `true` if width >= 992px |
-| `isXl` | `Ref<boolean>` | `true` if width >= 1200px |
-| `isXxl` | `Ref<boolean>` | `true` if width >= 1400px |
-| `isMobile` | `ComputedRef<boolean>` | `true` if screen is `xs` or `sm` (width < 768px) |
-| `isTablet` | `ComputedRef<boolean>` | `true` if screen is exactly `md` (768px - 991px) |
-## Performance
-This composable uses `window.matchMedia` listeners instead of `resize` events, making it highly performant and efficient. It automatically cleans up listeners when the component is unmounted.
-## Example: Adaptive Layout
-```vue
-<template>
-  <div>
-    <!-- Show offcanvas navigation on mobile, standard nav on desktop -->
-    <VibeOffcanvas v-if="isMobile" v-model="showSidebar">
-      <MySidebarContent />
-    </VibeOffcanvas>
-    <VibeRow v-else>
-      <VibeCol cols="3">
-        <MySidebarContent />
-      </VibeCol>
-      <VibeCol cols="9">
-        <slot />
-      </VibeCol>
-    </VibeRow>
-  </div>
-</template>
-<script setup>
-import { useBreakpoints } from '@velkymx/vibeui'
-const { isMobile } = useBreakpoints()
-</script>
-```

package/docs/composables/color-mode.md DELETED Viewed

@@ -1,141 +0,0 @@
-# useColorMode
-Manages Bootstrap 5.3 color modes (`light`, `dark`, `auto`) for the entire app. Sets the `data-bs-theme` attribute on `<html>`, persists the user's preference to `localStorage`, and provides a reactive ref that components can watch.
-**Singleton** — every call to `useColorMode()` returns the same shared state. There is one active color mode per app.
-## Import
-```ts
-import { useColorMode } from '@velkymx/vibeui'
-```
-## Return Values
-| Name | Type | Description |
-|---|---|---|
-| `colorMode` | `Ref<ColorMode>` | Reactive current mode. Bind to template or watch for changes. |
-| `setColorMode(mode)` | `(mode: ColorMode) => void` | Set a specific mode. Persists to `localStorage` and updates `<html data-bs-theme>`. |
-| `toggleColorMode()` | `() => void` | Cycle through `light → dark → auto → light`. |
-| `initColorMode()` | `() => void` | Restore the saved preference from `localStorage`. **Call once at app startup.** Subsequent calls are no-ops. |
-| `onColorModeChange(cb)` | `(mode: ColorMode) => void` | Register a callback that fires whenever the mode changes. Useful for hybrid app status bars. |
-## Type
-```ts
-type ColorMode = 'light' | 'dark' | 'auto'
-```
-| Value | Behavior |
-|---|---|
-| `'light'` | Forces light theme regardless of OS setting |
-| `'dark'` | Forces dark theme regardless of OS setting |
-| `'auto'` | Follows the OS `prefers-color-scheme` media query |
-## Setup
-Call `initColorMode()` once in `main.ts` before mounting the app. This restores the user's last saved preference.
-```ts
-// main.ts
-import { createApp } from 'vue'
-import VibeUI, { useColorMode } from '@velkymx/vibeui'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import App from './App.vue'
-const { initColorMode } = useColorMode()
-initColorMode()
-createApp(App).use(VibeUI).mount('#app')
-```
-## Usage
-### Toggle button
-The most common use case — a button that cycles through all three modes.
-```vue
-<script setup lang="ts">
-import { useColorMode } from '@velkymx/vibeui'
-const { colorMode, toggleColorMode } = useColorMode()
-</script>
-<template>
-  <VibeButton variant="secondary" @click="toggleColorMode">
-    Theme: {{ colorMode }}
-  </VibeButton>
-</template>
-```
-### Explicit mode switcher
-A select or set of buttons that lets the user pick a specific mode.
-```vue
-<script setup lang="ts">
-import { useColorMode } from '@velkymx/vibeui'
-import type { ColorMode } from '@velkymx/vibeui'
-const { colorMode, setColorMode } = useColorMode()
-const options: { label: string; value: ColorMode }[] = [
-  { label: 'Light', value: 'light' },
-  { label: 'Dark', value: 'dark' },
-  { label: 'System', value: 'auto' },
-]
-</script>
-<template>
-  <div class="btn-group">
-    <VibeButton
-      v-for="option in options"
-      :key="option.value"
-      :variant="colorMode === option.value ? 'primary' : 'outline-secondary'"
-      @click="setColorMode(option.value)"
-    >
-      {{ option.label }}
-    </VibeButton>
-  </div>
-</template>
-```
-### Watching for changes
-React to color mode changes anywhere in the app — for example, to swap a chart theme.
-```vue
-<script setup lang="ts">
-import { watch } from 'vue'
-import { useColorMode } from '@velkymx/vibeui'
-const { colorMode } = useColorMode()
-watch(colorMode, (mode) => {
-  console.log('Color mode changed to:', mode)
-  // e.g. update a third-party chart library's theme
-})
-</script>
-```
-### Scoping color mode to a single component
-Bootstrap's `data-bs-theme` attribute works on any element, not just `<html>`. For cases where one section of the page should always be dark regardless of the app-level setting, apply it directly in the template instead of using the composable.
-```vue
-<template>
-  <div data-bs-theme="dark">
-    <!-- This section is always dark -->
-    <VibeCard>Always dark card</VibeCard>
-  </div>
-</template>
-```
-## Behavior Notes
-- **Persistence** — the selected mode is stored in `localStorage` under the key `vibe-color-mode`. It survives page reloads.
-- **System Theme Reactivity** — when the mode is set to `'auto'`, VibeUI automatically listens for OS-level theme changes (via `matchMedia`) and updates the DOM immediately without a page reload.
-- **SSR-safe** — all `document` and `localStorage` access is guarded. The composable is safe to import in server-rendered environments; `applyColorMode` simply does nothing when `document` is undefined.
-...
-- **Invalid values** — `setColorMode` silently ignores any value that is not `'light'`, `'dark'`, or `'auto'`. No error is thrown.
-- **`initColorMode` is idempotent** — it is safe to call it multiple times (e.g. from multiple entry points). Only the first call reads `localStorage` and applies the theme. All subsequent calls are no-ops and do not overwrite changes the user made after initialization.

package/docs/forms/README.md DELETED Viewed

@@ -1,88 +0,0 @@
-# VibeUI Form Components
-Comprehensive form components with built-in validation support for both front-end and API-based validation.
-## Overview
-VibeUI provides a complete set of form components that seamlessly integrate with Bootstrap styling and include powerful validation capabilities out of the box.
-### Features
-- ✅ **Full Bootstrap Integration** - Uses native Bootstrap classes and styling
-- ✅ **Zero-Boilerplate IDs** - `id` props are now optional and automatically generated
-- ✅ **Form Automation** - `VibeFormGroup` automatically links its label to child inputs via ID injection
-- ✅ **Two-Way Data Binding** - v-model support on all components
-- ✅ **Built-in Validation** - Comprehensive validation system with custom validators
-- ✅ **Accessible** - Automatic ARIA attribute management and label linking
-- ✅ **TypeScript** - Fully typed components and APIs
-## Components
-### Input Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| **VibeFormInput** | Text, email, password, number, and other input types | [Docs](./form-input.md) |
-| **VibeInputGroup** | Input group for prepending/appending text or buttons | [Docs](./input-group.md) |
-| **VibeFormTextarea** | Multi-line text input | [Docs](./form-textarea.md) |
-| **VibeFormSelect** | Single and multiple selection dropdowns | [Docs](./form-select.md) |
-| **VibeFormSpinbutton** | Number input with increment/decrement buttons | [Docs](./form-spinbutton.md) |
-| **VibeFormDatepicker** | Date, time, and datetime inputs | [Docs](./form-datepicker.md) |
-### Choice Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| **VibeFormCheckbox** | Single checkboxes and checkbox groups | [Docs](./form-checkbox.md) |
-| **VibeFormRadio** | Radio button groups for exclusive selection | [Docs](./form-radio.md) |
-| **VibeFormSwitch** | Toggle switches for boolean settings | [Docs](./form-switch.md) |
-### Advanced Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| **VibeFormWysiwyg** | WYSIWYG editor powered by QuillJS | [Docs](./form-wysiwyg.md) |
-| **VibeFormGroup** | Form group container for layout and automated label linking | [Docs](./form-group.md) |
-## Quick Start
-### Basic Example (Automated)
-VibeUI automatically handles ID generation and label linking. No `id` or `label-for` is required when using `VibeFormGroup`.
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const email = ref('')
-</script>
-<template>
-  <VibeFormGroup label="Email Address">
-    <VibeFormInput
-      v-model="email"
-      type="email"
-      placeholder="Enter email"
-    />
-  </VibeFormGroup>
-</template>
-```
-## Documentation
-### Component Documentation
-- [VibeFormInput](./form-input.md) - Text inputs with validation
-- [VibeInputGroup](./input-group.md) - Prepend/append groups
-- [VibeFormSelect](./form-select.md) - Select dropdowns
-- [VibeFormTextarea](./form-textarea.md) - Multi-line text input
-- [VibeFormSpinbutton](./form-spinbutton.md) - Number input with buttons
-- [VibeFormDatepicker](./form-datepicker.md) - Date and time inputs
-- [VibeFormCheckbox](./form-checkbox.md) - Checkboxes and groups
-- [VibeFormRadio](./form-radio.md) - Radio button groups
-- [VibeFormSwitch](./form-switch.md) - Toggle switches
-- [VibeFormGroup](./form-group.md) - Form group container
-- [VibeFormWysiwyg](./form-wysiwyg.md) - WYSIWYG editor
-### Guides
-- [Validation Guide](./validation.md) - Comprehensive validation documentation

package/docs/forms/form-checkbox.md DELETED Viewed

@@ -1,50 +0,0 @@
-# VibeFormCheckbox
-Checkbox component for single boolean values or multiple selections.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const agreed = ref(false)
-</script>
-<template>
-  <VibeFormCheckbox
-    v-model="agreed"
-    label="I agree to the terms"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `any` | `false` | The checked state (v-model) |
-| `value` | `any` | `true` | Value when checked |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `disabled` | `Boolean` | `false` | Disable the checkbox |
-| `required` | `Boolean` | `false` | Mark as required |
-| `inline` | `Boolean` | `false` | Display inline |
-| `indeterminate` | `Boolean` | `false` | Set indeterminate state |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'change' \| 'blur'` | `'change'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-| `reverse` | `Boolean` | `false` | Reverse label and input |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-check`
-- `.form-check-input`
-- `.form-check-label`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-datepicker.md DELETED Viewed

@@ -1,50 +0,0 @@
-# VibeFormDatepicker
-Date and time input component using native browser pickers.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const date = ref('')
-</script>
-<template>
-  <VibeFormDatepicker
-    v-model="date"
-    label="Choose a date"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `String` | `''` | The date string (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `disabled` | `Boolean` | `false` | Disable the picker |
-| `readonly` | `Boolean` | `false` | Make readonly |
-| `required` | `Boolean` | `false` | Mark as required |
-| `min` | `String` | `undefined` | Minimum date |
-| `max` | `String` | `undefined` | Maximum date |
-| `size` | `'sm' \| 'lg'` | `undefined` | Picker size |
-| `type` | `String` | `'date'` | Type: `'date'`, `'time'`, `'datetime-local'`, etc. |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'input' \| 'blur' \| 'change'` | `'blur'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-control`
-- `.form-control-{size}`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-group.md DELETED Viewed

@@ -1,80 +0,0 @@
-# VibeFormGroup
-Form group container component for organizing form fields with labels, help text, and validation feedback.
-## Basic Usage
-VibeFormGroup automatically links its label to the child VibeUI form component using automatic ID injection.
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const email = ref('')
-</script>
-<template>
-  <VibeFormGroup
-    label="Email Address"
-    help-text="We'll never share your email with anyone else."
-  >
-    <VibeFormInput
-      v-model="email"
-      type="email"
-      placeholder="Enter email"
-    />
-  </VibeFormGroup>
-</template>
-```
-## Floating Labels
-```vue
-<template>
-  <VibeFormGroup
-    label="Email Address"
-    floating
-  >
-    <VibeFormInput
-      v-model="email"
-      type="email"
-      placeholder="name@example.com"
-    />
-  </VibeFormGroup>
-</template>
-```
-## Horizontal Layout
-```vue
-<template>
-  <VibeFormGroup
-    label="Email"
-    row
-    :label-cols="3"
-    label-align="end"
-  >
-    <VibeFormInput v-model="email" type="email" />
-  </VibeFormGroup>
-</template>
-```
-## Important Notes
-**Automatic ID Injection:** VibeFormGroup uses Vue's provide/inject to share a unique ID with its child VibeUI components (like `VibeFormInput`, `VibeFormSelect`, etc.). This ensures that labels and ARIA attributes are correctly linked without requiring manual `id` or `label-for` props.
-**Manual Linking:** If you are using native HTML elements instead of VibeUI components inside the group, you must still provide a `label-for` on the group and a matching `id` on your element.
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `label` | `String` | `undefined` | Label text |
-| `labelFor` | `String` | `Auto-generated` | ID of the form control |
-| `required` | `Boolean` | `false` | Show required asterisk |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `helpText` | `String` | `undefined` | Help text |
-| `floating` | `Boolean` | `false` | Use floating label layout |
-| `row` | `Boolean` | `false` | Use horizontal row layout |
-| `labelCols` | `Number \| String` | `undefined` | Number of columns for label (1-12) |
-| `labelAlign` | `'start' \| 'center' \| 'end'` | `undefined` | Label text alignment |

package/docs/forms/form-input.md DELETED Viewed

@@ -1,55 +0,0 @@
-# VibeFormInput
-Text input component with built-in validation support for various input types.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const name = ref('')
-</script>
-<template>
-  <VibeFormInput
-    v-model="name"
-    label="Full Name"
-    placeholder="Enter your name"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `String \| Number` | `''` | The input value (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `type` | `InputType` | `'text'` | HTML input type |
-| `placeholder` | `String` | `undefined` | Placeholder text |
-| `disabled` | `Boolean` | `false` | Disable the input |
-| `readonly` | `Boolean` | `false` | Make the input readonly |
-| `required` | `Boolean` | `false` | Mark as required |
-| `size` | `'sm' \| 'lg'` | `undefined` | Input size |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'input' \| 'blur' \| 'change'` | `'blur'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-| `plaintext` | `Boolean` | `false` | Display as plain text |
-| `noWrapper` | `Boolean` | `false` | Removes the wrapping div, label, and feedback. Useful inside `VibeInputGroup`. |
-| `focusRing` | `Boolean` | `false` | Enable the Bootstrap 5.3 focus-ring helper |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-control`
-- `.form-control-{size}`
-- `.is-valid`, `.is-invalid`
-- `.form-control-plaintext`
-- `.focus-ring`

package/docs/forms/form-radio.md DELETED Viewed

@@ -1,58 +0,0 @@
-# VibeFormRadio
-Radio button component for exclusive selection within a group.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const picked = ref('one')
-</script>
-<template>
-  <VibeFormRadio
-    v-model="picked"
-    name="myGroup"
-    value="one"
-    label="Option One"
-  />
-  <VibeFormRadio
-    v-model="picked"
-    name="myGroup"
-    value="two"
-    label="Option Two"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `any` | `''` | The picked value (v-model) |
-| `value` | `any` | Required | Value of this radio |
-| `name` | `String` | Required | Shared name for the radio group |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `disabled` | `Boolean` | `false` | Disable the radio |
-| `required` | `Boolean` | `false` | Mark as required |
-| `inline` | `Boolean` | `false` | Display inline |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'change' \| 'blur'` | `'change'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-| `reverse` | `Boolean` | `false` | Reverse label and input |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-check`
-- `.form-check-input`
-- `.form-check-label`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-select.md DELETED Viewed

@@ -1,54 +0,0 @@
-# VibeFormSelect
-Custom select component with support for single and multiple selection.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const selected = ref('')
-const options = [
-  { value: '1', text: 'Option 1' },
-  { value: '2', text: 'Option 2' }
-]
-</script>
-<template>
-  <VibeFormSelect
-    v-model="selected"
-    label="Choose an option"
-    :options="options"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `any` | `''` | Selected value (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `options` | `FormSelectOption[]` | `[]` | Array of options |
-| `multiple` | `Boolean` | `false` | Enable multiple selection |
-| `selectSize` | `Number` | `undefined` | Visible rows |
-| `disabled` | `Boolean` | `false` | Disable the select |
-| `required` | `Boolean` | `false` | Mark as required |
-| `size` | `'sm' \| 'lg'` | `undefined` | Select size |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'change' \| 'blur'` | `'change'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-select`
-- `.form-select-{size}`
-- `.is-valid`, `.is-invalid`

package/docs/forms/form-spinbutton.md DELETED Viewed

@@ -1,55 +0,0 @@
-# VibeFormSpinbutton
-Numeric input component with increment and decrement buttons.
-## Basic Usage
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-const count = ref(0)
-</script>
-<template>
-  <VibeFormSpinbutton
-    v-model="count"
-    label="Quantity"
-    :min="0"
-    :max="10"
-  />
-</template>
-```
-## Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `modelValue` | `Number` | `0` | The numeric value (v-model) |
-| `id` | `String` | `Auto-generated` | Unique identifier |
-| `label` | `String` | `undefined` | Label text |
-| `disabled` | `Boolean` | `false` | Disable the spinbutton |
-| `readonly` | `Boolean` | `false` | Make readonly |
-| `required` | `Boolean` | `false` | Mark as required |
-| `min` | `Number` | `undefined` | Minimum value |
-| `max` | `Number` | `undefined` | Maximum value |
-| `step` | `Number` | `1` | Increment/decrement step |
-| `size` | `'sm' \| 'lg'` | `undefined` | Button and input size |
-| `wrap` | `Boolean` | `false` | Wrap around when min/max reached |
-| `vertical` | `Boolean` | `false` | Stack buttons vertically |
-| `validationState` | `'valid' \| 'invalid' \| null` | `null` | Validation state |
-| `validationMessage` | `String` | `undefined` | Validation message |
-| `validateOn` | `'input' \| 'blur' \| 'change'` | `'blur'` | When to validate |
-| `helpText` | `String` | `undefined` | Help text |
-## Important Notes
-**Automatic ID Generation:** This component automatically generates a unique ID if one is not provided.
-**Automatic ID Injection:** When used inside a `VibeFormGroup`, this component will automatically inherit the group's ID to ensure proper label association and accessibility.
-## Bootstrap CSS Classes
-- `.form-control`
-- `.input-group`
-- `.btn`
-- `.is-valid`, `.is-invalid`