@velkymx/vibeui 0.8.2 → 0.9.0

package/docs/components/card/card.md

@@ -1,215 +0,0 @@
-# VibeCard
-
-Flexible content container component for displaying headers, bodies, footers, and images.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `Variant` | `undefined` | Background color variant |
-| `border` | `Variant` | `undefined` | Border color variant |
-| `textVariant` | `Variant` | `undefined` | Text color variant |
-| `tag` | `String` | `'div'` | HTML tag to render |
-| `title` | `String` | `undefined` | Card title |
-| `body` | `String` | `undefined` | Card body text |
-| `header` | `String` | `undefined` | Card header text |
-| `footer` | `String` | `undefined` | Card footer text |
-| `imgSrc` | `String` | `undefined` | Image URL |
-| `imgAlt` | `String` | `''` | Image alt text |
-| `imgTop` | `Boolean` | `true` | Display image at top |
-| `imgBottom` | `Boolean` | `false` | Display image at bottom |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Additional body content |
-| `header` | Custom header content |
-| `title` | Custom title content |
-| `body` | Custom body content |
-| `footer` | Custom footer content |
-
-## Usage
-
-### Basic Card
-
-```vue
-<template>
-  <VibeCard
-    title="Card Title"
-    body="This is the card body text. Quick and easy!"
-  />
-</template>
-```
-
-### Card with Header and Footer
-
-```vue
-<template>
-  <VibeCard
-    header="Featured"
-    title="Special title treatment"
-    body="With supporting text below as a natural lead-in."
-    footer="2 days ago"
-  />
-</template>
-```
-
-### Card with Image
-
-```vue
-<template>
-  <VibeCard
-    img-src="/path/to/image.jpg"
-    img-alt="Card image"
-    title="Card with Image"
-    body="This card has an image at the top."
-  />
-</template>
-```
-
-### Colored Cards
-
-```vue
-<template>
-  <div>
-    <VibeCard
-      variant="primary"
-      text-variant="white"
-      title="Primary Card"
-      body="Card with primary background."
-    />
-
-    <VibeCard
-      variant="success"
-      text-variant="white"
-      title="Success Card"
-      body="Card with success background."
-    />
-  </div>
-</template>
-```
-
-### Border Variants
-
-```vue
-<template>
-  <div>
-    <VibeCard
-      border="primary"
-      title="Primary Border"
-      body="Card with primary border."
-    />
-
-    <VibeCard
-      border="danger"
-      title="Danger Border"
-      body="Card with danger border."
-    />
-  </div>
-</template>
-```
-
-### Custom Content with Slots
-
-Use named slots for complex content:
-
-```vue
-<template>
-  <VibeCard>
-    <template #header>
-      <strong>Featured</strong>
-    </template>
-
-    <template #title>
-      Special Title Treatment
-    </template>
-
-    <template #body>
-      <p>With supporting text below as a natural lead-in.</p>
-    </template>
-
-    <!-- Additional body content via default slot -->
-    <VibeButton variant="primary">Go somewhere</VibeButton>
-
-    <template #footer>
-      <small class="text-muted">Last updated 3 mins ago</small>
-    </template>
-  </VibeCard>
-</template>
-```
-
-### Horizontal Card
-
-Use the default slot with Bootstrap grid:
-
-```vue
-<template>
-  <VibeCard>
-    <div class="row g-0">
-      <div class="col-md-4">
-        <img src="/path/to/image.jpg" alt="..." class="card-img">
-      </div>
-      <div class="col-md-8">
-        <div class="card-body">
-          <h5 class="card-title">Horizontal Card</h5>
-          <p class="card-text">
-            This is a wider card with supporting text.
-          </p>
-          <p class="card-text">
-            <small class="text-muted">Last updated 3 mins ago</small>
-          </p>
-        </div>
-      </div>
-    </div>
-  </VibeCard>
-</template>
-```
-
-### Card Grid
-
-```vue
-<template>
-  <div class="row row-cols-1 row-cols-md-3 g-4">
-    <div class="col">
-      <VibeCard
-        img-src="/path/to/image1.jpg"
-        img-alt="Card 1"
-        title="Card 1"
-        body="Card content here."
-      />
-    </div>
-    <div class="col">
-      <VibeCard
-        img-src="/path/to/image2.jpg"
-        img-alt="Card 2"
-        title="Card 2"
-        body="Card content here."
-      />
-    </div>
-    <div class="col">
-      <VibeCard
-        img-src="/path/to/image3.jpg"
-        img-alt="Card 3"
-        title="Card 3"
-        body="Card content here."
-      />
-    </div>
-  </div>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.card`
-- `.card-header`
-- `.card-body`
-- `.card-footer`
-- `.card-img-top`
-- `.card-img-bottom`
-- `.card-img`
-- `.card-title`
-- `.card-text`
-- `.bg-{variant}`
-- `.border-{variant}`
-- `.text-{variant}`

package/docs/components/core/alert.md

@@ -1,72 +0,0 @@
-# VibeAlert
-
-Alert messages with Bootstrap styling, supporting variants, dismissible functionality, and v-model binding.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `Variant` | `'primary'` | Color variant |
-| `subtle` | `Boolean` | `false` | Renders alert with subtle background and emphasis text |
-| `modelValue` | `Boolean` | `true` | Controls visibility (v-model support) |
-| `dismissable` | `Boolean` | `false` | Shows close button when true |
-| `message` | `String` | Required | Alert message text |
-| `fade` | `Boolean` | `true` | Use fade animation on dismissal |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `update:modelValue` | `Boolean` | Emitted when alert is dismissed |
-| `close` | - | Emitted when dismissal starts |
-| `closed` | - | Emitted when dismissal completes |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Alert content (overrides `message` prop) |
-
-## Usage
-
-### Basic Alert
-
-```vue
-<template>
-  <VibeAlert variant="success" message="Operation completed successfully!" />
-</template>
-```
-
-### Dismissible Alert with v-model
-
-```vue
-<script setup>
-import { ref } from 'vue'
-const showAlert = ref(true)
-</script>
-
-<template>
-  <VibeAlert
-    variant="warning"
-    dismissable
-    v-model="showAlert"
-    message="This alert can be dismissed"
-  />
-</template>
-```
-
-## Important Notes
-
-**Automatic Initialization:** This component automatically initializes Bootstrap's Alert functionality when it is mounted, ensuring smooth dismissal animations.
-
-**Instance Exposure:** You can access the underlying Bootstrap instance via template ref using the `bsInstance` property.
-
-## Bootstrap CSS Classes
-
-- `.alert`
-- `.alert-{variant}`
-- `.bg-{variant}-subtle` (when `subtle` is true)
-- `.text-{variant}-emphasis` (when `subtle` is true)
-- `.border-{variant}-subtle` (when `subtle` is true)
-- `.alert-dismissible`
-- `.fade`, `.show`

package/docs/components/core/badge.md

@@ -1,81 +0,0 @@
-# VibeBadge
-
-Small count and labeling component with Bootstrap 5.3 styling.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `Variant` | `'primary'` | Background color variant |
-| `subtle` | `Boolean` | `false` | Renders badge with subtle background and emphasis text |
-| `pill` | `Boolean` | `false` | Renders badge with rounded pill shape |
-| `tag` | `String` | `'span'` | HTML tag to render: `'span'`, `'a'`, or any valid tag |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `component-error` | `Object` | Emitted when an error occurs |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Badge content |
-
-## Usage
-
-### Basic Badge
-
-```vue
-<template>
-  <VibeButton variant="primary">
-    Notifications <VibeBadge variant="secondary">4</VibeBadge>
-  </VibeButton>
-</template>
-```
-
-### Pill Badges
-
-```vue
-<template>
-  <div>
-    <VibeBadge variant="primary" pill>Primary</VibeBadge>
-    <VibeBadge variant="success" pill>Success</VibeBadge>
-    <VibeBadge variant="danger" pill>Danger</VibeBadge>
-  </div>
-</template>
-```
-
-### Link Badges
-
-```vue
-<template>
-  <VibeBadge tag="a" href="#" variant="primary">Link Badge</VibeBadge>
-</template>
-```
-
-### All Variants
-
-```vue
-<template>
-  <div>
-    <VibeBadge variant="primary">Primary</VibeBadge>
-    <VibeBadge variant="secondary">Secondary</VibeBadge>
-    <VibeBadge variant="success">Success</VibeBadge>
-    <VibeBadge variant="danger">Danger</VibeBadge>
-    <VibeBadge variant="warning">Warning</VibeBadge>
-    <VibeBadge variant="info">Info</VibeBadge>
-    <VibeBadge variant="light">Light</VibeBadge>
-    <VibeBadge variant="dark">Dark</VibeBadge>
-  </div>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.badge`
-- `.bg-{variant}`
-- `.bg-{variant}-subtle` (when `subtle` is true)
-- `.text-{variant}-emphasis` (when `subtle` is true)
-- `.rounded-pill` (when `pill` is true)

package/docs/components/core/button-group.md

@@ -1,105 +0,0 @@
-# VibeButtonGroup
-
-Group buttons together in a single line or vertically.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `Size` | `undefined` | Size for all buttons in group: `'sm'` or `'lg'` |
-| `vertical` | `Boolean` | `false` | Stack buttons vertically |
-| `role` | `String` | `'group'` | ARIA role attribute |
-| `ariaLabel` | `String` | `undefined` | ARIA label for accessibility |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `component-error` | `Object` | Emitted when an error occurs |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Button group content (typically VibeButton components) |
-
-## Usage
-
-### Basic Button Group
-
-```vue
-<template>
-  <VibeButtonGroup>
-    <VibeButton variant="primary">Left</VibeButton>
-    <VibeButton variant="primary">Middle</VibeButton>
-    <VibeButton variant="primary">Right</VibeButton>
-  </VibeButtonGroup>
-</template>
-```
-
-### Button Toolbar
-
-```vue
-<template>
-  <div>
-    <VibeButtonGroup aria-label="First group">
-      <VibeButton variant="secondary">1</VibeButton>
-      <VibeButton variant="secondary">2</VibeButton>
-      <VibeButton variant="secondary">3</VibeButton>
-    </VibeButtonGroup>
-
-    <VibeButtonGroup aria-label="Second group">
-      <VibeButton variant="secondary">4</VibeButton>
-      <VibeButton variant="secondary">5</VibeButton>
-    </VibeButtonGroup>
-  </div>
-</template>
-```
-
-### Vertical Button Group
-
-```vue
-<template>
-  <VibeButtonGroup vertical>
-    <VibeButton variant="primary">Button 1</VibeButton>
-    <VibeButton variant="primary">Button 2</VibeButton>
-    <VibeButton variant="primary">Button 3</VibeButton>
-  </VibeButtonGroup>
-</template>
-```
-
-### Sized Button Groups
-
-```vue
-<template>
-  <div>
-    <VibeButtonGroup size="sm">
-      <VibeButton variant="primary">Small</VibeButton>
-      <VibeButton variant="primary">Group</VibeButton>
-    </VibeButtonGroup>
-
-    <VibeButtonGroup size="lg">
-      <VibeButton variant="primary">Large</VibeButton>
-      <VibeButton variant="primary">Group</VibeButton>
-    </VibeButtonGroup>
-  </div>
-</template>
-```
-
-### Mixed Button Types
-
-```vue
-<template>
-  <VibeButtonGroup>
-    <VibeButton variant="danger">Delete</VibeButton>
-    <VibeButton variant="warning" outline>Archive</VibeButton>
-    <VibeButton variant="success">Save</VibeButton>
-  </VibeButtonGroup>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.btn-group`
-- `.btn-group-vertical`
-- `.btn-group-{size}`

package/docs/components/core/button.md

@@ -1,127 +0,0 @@
-# VibeButton
-
-Button component with variants, sizes, and support for links and router-links.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `Variant` | `'primary'` | Button color variant |
-| `size` | `Size` | `undefined` | Button size: `'sm'` or `'lg'` |
-| `outline` | `Boolean` | `false` | Use outline style instead of solid |
-| `disabled` | `Boolean` | `false` | Disable the button |
-| `type` | `ButtonType` | `'button'` | Button type: `'button'`, `'submit'`, or `'reset'` |
-| `href` | `String` | `undefined` | Renders as anchor tag with href |
-| `to` | `String\|Object` | `undefined` | Renders as router-link with to prop |
-| `active` | `Boolean` | `false` | Apply active state styling |
-| `focusRing` | `Boolean` | `false` | Enable the Bootstrap 5.3 focus-ring helper |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | `Event` | Emitted when button is clicked (unless disabled) |
-| `component-error` | `Object` | Emitted when an error occurs |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `default` | Button content |
-
-## Usage
-
-### Basic Buttons
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary">Primary</VibeButton>
-    <VibeButton variant="secondary">Secondary</VibeButton>
-    <VibeButton variant="success">Success</VibeButton>
-  </div>
-</template>
-```
-
-### Outline Buttons
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" outline>Outline Primary</VibeButton>
-    <VibeButton variant="danger" outline>Outline Danger</VibeButton>
-  </div>
-</template>
-```
-
-### Button Sizes
-
-```vue
-<template>
-  <div>
-    <VibeButton variant="primary" size="sm">Small</VibeButton>
-    <VibeButton variant="primary">Normal</VibeButton>
-    <VibeButton variant="primary" size="lg">Large</VibeButton>
-  </div>
-</template>
-```
-
-### Disabled State
-
-```vue
-<template>
-  <VibeButton variant="primary" disabled>Disabled Button</VibeButton>
-</template>
-```
-
-### Link Buttons
-
-```vue
-<template>
-  <div>
-    <!-- Anchor link -->
-    <VibeButton variant="primary" href="https://example.com">
-      External Link
-    </VibeButton>
-
-    <!-- Router link (requires Vue Router) -->
-    <VibeButton variant="secondary" :to="{ name: 'home' }">
-      Home
-    </VibeButton>
-  </div>
-</template>
-```
-
-### Form Submit
-
-```vue
-<template>
-  <form @submit.prevent="handleSubmit">
-    <VibeButton type="submit" variant="success">Submit Form</VibeButton>
-  </form>
-</template>
-```
-
-### With Click Handler
-
-```vue
-<script setup>
-const handleClick = () => {
-  console.log('Button clicked!')
-}
-</script>
-
-<template>
-  <VibeButton variant="primary" @click="handleClick">
-    Click Me
-  </VibeButton>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.btn`
-- `.btn-{variant}` or `.btn-outline-{variant}`
-- `.btn-{size}`
-- `.active`
-- `.focus-ring`

package/docs/components/core/close-button.md

@@ -1,82 +0,0 @@
-# VibeCloseButton
-
-Generic close button for dismissing content like modals and alerts.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `disabled` | `Boolean` | `false` | Disable the close button |
-| `white` | `Boolean` | `false` | Use white variant for dark backgrounds |
-| `ariaLabel` | `String` | `'Close'` | Accessible label for screen readers |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `click` | `Event` | Emitted when button is clicked (unless disabled) |
-| `component-error` | `Object` | Emitted when an error occurs |
-
-## Usage
-
-### Basic Close Button
-
-```vue
-<template>
-  <VibeCloseButton @click="handleClose" />
-</template>
-
-<script setup>
-const handleClose = () => {
-  console.log('Closed!')
-}
-</script>
-```
-
-### White Variant
-
-```vue
-<template>
-  <div class="bg-dark p-3">
-    <VibeCloseButton white />
-  </div>
-</template>
-```
-
-### Custom Aria Label
-
-```vue
-<template>
-  <VibeCloseButton aria-label="Dismiss notification" />
-</template>
-```
-
-### Disabled State
-
-```vue
-<template>
-  <VibeCloseButton disabled />
-</template>
-```
-
-### In Alert Context
-
-```vue
-<script setup>
-import { ref } from 'vue'
-
-const showAlert = ref(true)
-</script>
-
-<template>
-  <div v-if="showAlert" class="alert alert-warning d-flex justify-content-between">
-    <span>Warning message</span>
-    <VibeCloseButton @click="showAlert = false" />
-  </div>
-</template>
-```
-
-## Bootstrap CSS Classes
-
-- `.btn-close`
-- `.btn-close-white`