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

@velkymx/vibeui 0.9.0 → 1.1.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 (184) hide show

package/AGENTS.md +44 -0
package/CLAUDE.md +48 -0
package/README.md +222 -197
package/dist/App.vue.d.ts +2 -1
package/dist/components/HelloWorld.vue.d.ts +2 -1
package/dist/components/VibeAccordion.vue.d.ts +39 -40
package/dist/components/VibeAlert.vue.d.ts +21 -37
package/dist/components/VibeAutocomplete.vue.d.ts +59 -31
package/dist/components/VibeBadge.vue.d.ts +10 -18
package/dist/components/VibeBreadcrumb.vue.d.ts +25 -21
package/dist/components/VibeButton.vue.d.ts +13 -17
package/dist/components/VibeButtonGroup.vue.d.ts +11 -19
package/dist/components/VibeCard.vue.d.ts +51 -24
package/dist/components/VibeCarousel.vue.d.ts +27 -49
package/dist/components/VibeChartBar.vue.d.ts +61 -0
package/dist/components/VibeChartLine.vue.d.ts +70 -0
package/dist/components/VibeChartPie.vue.d.ts +34 -0
package/dist/components/VibeCloseButton.vue.d.ts +9 -7
package/dist/components/VibeCol.vue.d.ts +9 -17
package/dist/components/VibeCollapse.vue.d.ts +24 -32
package/dist/components/VibeContainer.vue.d.ts +9 -17
package/dist/components/VibeDataTable.vue.d.ts +122 -63
package/dist/components/VibeDatePicker.vue.d.ts +4 -6
package/dist/components/VibeDraggable.vue.d.ts +9 -13
package/dist/components/VibeDropdown.vue.d.ts +46 -43
package/dist/components/VibeDroppable.vue.d.ts +9 -13
package/dist/components/VibeFileInput.vue.d.ts +14 -20
package/dist/components/VibeFormCheckbox.vue.d.ts +30 -22
package/dist/components/VibeFormDatepicker.vue.d.ts +27 -30
package/dist/components/VibeFormErrorSummary.vue.d.ts +17 -0
package/dist/components/VibeFormGroup.vue.d.ts +10 -13
package/dist/components/VibeFormInput.vue.d.ts +60 -25
package/dist/components/VibeFormRadio.vue.d.ts +23 -24
package/dist/components/VibeFormSelect.vue.d.ts +28 -34
package/dist/components/VibeFormSpinbutton.vue.d.ts +31 -34
package/dist/components/VibeFormSwitch.vue.d.ts +22 -23
package/dist/components/VibeFormTextarea.vue.d.ts +24 -25
package/dist/components/VibeFormWysiwyg.vue.d.ts +23 -22
package/dist/components/VibeHero.vue.d.ts +117 -0
package/dist/components/VibeIcon.vue.d.ts +27 -7
package/dist/components/VibeInputGroup.vue.d.ts +12 -14
package/dist/components/VibeLink.vue.d.ts +14 -18
package/dist/components/VibeListGroup.vue.d.ts +26 -22
package/dist/components/VibeModal.vue.d.ts +47 -45
package/dist/components/VibeNav.vue.d.ts +40 -20
package/dist/components/VibeNavbar.vue.d.ts +12 -19
package/dist/components/VibeNavbarBrand.vue.d.ts +9 -17
package/dist/components/VibeNavbarNav.vue.d.ts +52 -33
package/dist/components/VibeNavbarToggle.vue.d.ts +7 -5
package/dist/components/VibeOffcanvas.vue.d.ts +28 -43
package/dist/components/VibePagination.vue.d.ts +38 -29
package/dist/components/VibePlaceholder.vue.d.ts +9 -17
package/dist/components/VibePopover.vue.d.ts +17 -40
package/dist/components/VibeProgress.vue.d.ts +13 -21
package/dist/components/VibeResizable.vue.d.ts +10 -14
package/dist/components/VibeRow.vue.d.ts +9 -17
package/dist/components/VibeScrollspy.vue.d.ts +37 -25
package/dist/components/VibeSkeleton.vue.d.ts +2 -1
package/dist/components/VibeSlider.vue.d.ts +4 -5
package/dist/components/VibeSortable.vue.d.ts +37 -18
package/dist/components/VibeSpinner.vue.d.ts +4 -7
package/dist/components/VibeStepper.vue.d.ts +32 -31
package/dist/components/VibeTab.vue.d.ts +7 -11
package/dist/components/VibeTabContent.vue.d.ts +13 -31
package/dist/components/VibeTabs.vue.d.ts +9 -13
package/dist/components/VibeToast.vue.d.ts +31 -44
package/dist/components/VibeToastHost.vue.d.ts +2 -1
package/dist/components/VibeTooltip.vue.d.ts +16 -39
package/dist/components/chart/chartColors.d.ts +3 -0
package/dist/components/chart/chartResize.d.ts +2 -0
package/dist/components/chart/chartTooltip.d.ts +2 -0
package/dist/components/chart/chartTypes.d.ts +6 -0
package/dist/components/chart/drawBar.d.ts +5 -0
package/dist/components/chart/drawLine.d.ts +18 -0
package/dist/components/chart/drawPie.d.ts +4 -0
package/dist/components/dndStore.d.ts +1 -0
package/dist/components/index.d.ts +6 -1
package/dist/composables/useBreakpoints.d.ts +1 -0
package/dist/composables/useColorMode.d.ts +1 -1
package/dist/composables/useId.d.ts +1 -4
package/dist/directives/vTooltip.d.ts +2 -3
package/dist/injectionKeys.d.ts +34 -0
package/dist/purify.es-eYghtX9j.mjs +735 -0
package/dist/types.d.ts +23 -2
package/dist/utils/routeKey.d.ts +11 -0
package/dist/utils/safeCss.d.ts +16 -0
package/dist/utils/safeHref.d.ts +7 -0
package/dist/utils/sanitizeHtml.d.ts +13 -0
package/dist/vibeui.css +2 -1
package/dist/vibeui.es.js +8527 -5855
package/dist/vibeui.umd.js +3 -1
package/docs/README.md +225 -0
package/docs/components/advanced/popover.md +125 -0
package/docs/components/advanced/scrollspy.md +106 -0
package/docs/components/advanced/tooltip.md +90 -0
package/docs/components/card/card.md +223 -0
package/docs/components/charts/chart-bar.md +129 -0
package/docs/components/charts/chart-line.md +136 -0
package/docs/components/charts/chart-pie.md +102 -0
package/docs/components/core/alert.md +94 -0
package/docs/components/core/badge.md +75 -0
package/docs/components/core/button-group.md +99 -0
package/docs/components/core/button.md +145 -0
package/docs/components/core/close-button.md +82 -0
package/docs/components/core/link.md +79 -0
package/docs/components/core/placeholder.md +129 -0
package/docs/components/core/skeleton.md +40 -0
package/docs/components/core/spinner.md +103 -0
package/docs/components/data/datatable.md +437 -0
package/docs/components/hero/hero.md +65 -0
package/docs/components/interactive/accordion.md +121 -0
package/docs/components/interactive/carousel.md +112 -0
package/docs/components/interactive/collapse.md +106 -0
package/docs/components/interactive/date-picker.md +78 -0
package/docs/components/interactive/draggable.md +91 -0
package/docs/components/interactive/dropdown.md +129 -0
package/docs/components/interactive/modal.md +151 -0
package/docs/components/interactive/offcanvas.md +92 -0
package/docs/components/interactive/resizable.md +73 -0
package/docs/components/interactive/slider.md +57 -0
package/docs/components/interactive/sortable.md +52 -0
package/docs/components/interactive/stepper.md +83 -0
package/docs/components/interactive/tabs.md +66 -0
package/docs/components/interactive/toast.md +177 -0
package/docs/components/layout/col.md +117 -0
package/docs/components/layout/container.md +53 -0
package/docs/components/layout/row.md +107 -0
package/docs/components/list/list-group.md +225 -0
package/docs/components/navigation/breadcrumb.md +120 -0
package/docs/components/navigation/nav.md +151 -0
package/docs/components/navigation/navbar.md +114 -0
package/docs/components/navigation/pagination.md +163 -0
package/docs/components/progress/progress.md +188 -0
package/docs/composables/back-button.md +28 -0
package/docs/composables/breakpoints.md +54 -0
package/docs/composables/color-mode.md +179 -0
package/docs/composables/use-form.md +78 -0
package/docs/composables/use-position.md +68 -0
package/docs/composables/use-toast.md +91 -0
package/docs/directives/v-tooltip.md +58 -0
package/docs/forms/README.md +87 -0
package/docs/forms/autocomplete.md +96 -0
package/docs/forms/file-input.md +97 -0
package/docs/forms/form-checkbox.md +100 -0
package/docs/forms/form-datepicker.md +80 -0
package/docs/forms/form-error-summary.md +96 -0
package/docs/forms/form-group.md +118 -0
package/docs/forms/form-input.md +140 -0
package/docs/forms/form-radio.md +82 -0
package/docs/forms/form-select.md +98 -0
package/docs/forms/form-spinbutton.md +94 -0
package/docs/forms/form-switch.md +75 -0
package/docs/forms/form-textarea.md +82 -0
package/docs/forms/form-wysiwyg.md +99 -0
package/docs/forms/input-group.md +70 -0
package/docs/forms/validation.md +213 -0
package/docs/getting-started/starter-template.md +136 -0
package/docs/superpowers/plans/2026-05-12-vibe-charts.md +1999 -0
package/docs/superpowers/plans/2026-05-29-e2e-browser-testing.md +615 -0
package/docs/superpowers/specs/2026-05-12-charting-design.md +185 -0
package/docs/superpowers/specs/2026-05-29-e2e-browser-testing-design.md +168 -0
package/docs/utilities/position.md +82 -0
package/docs/versioning.md +57 -0
package/examples/README.md +201 -0
package/examples/album.html +262 -0
package/examples/blog.html +166 -0
package/examples/carousel.html +114 -0
package/examples/checkout.html +275 -0
package/examples/cover.html +89 -0
package/examples/dashboard.html +156 -0
package/examples/index.html +129 -0
package/examples/jumbotron.html +56 -0
package/examples/mobile-dashboard.html +138 -0
package/examples/pricing.html +172 -0
package/examples/product.html +145 -0
package/examples/sidebars.html +166 -0
package/examples/sign-in.html +119 -0
package/examples/starter.html +314 -0
package/examples/sticky-footer-navbar.html +70 -0
package/examples/sticky-footer.html +60 -0
package/examples/test-simple.html +91 -0
package/llms.txt +801 -0
package/package.json +44 -14
package/dist/types/index.d.ts +0 -6

package/examples/checkout.html ADDED Viewed

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout - VibeUI Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="../dist/vibeui.css">
+    <style>
+        body { background-color: #f8f9fa; }
+    </style>
+    <!-- VibeToast loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
+         keeps that bare specifier, so the page maps it here so toasts display. -->
+    <script type="importmap">
+      {
+        "imports": {
+          "bootstrap": "https://esm.sh/bootstrap@5.3.0"
+        }
+      }
+    </script>
+</head>
+<body>
+    <div id="app">
+        <vibe-container class="py-5">
+            <div class="text-center mb-4">
+                <vibe-icon icon="bag-check-fill" class="text-primary" font-size="2.5rem"></vibe-icon>
+                <h1 class="h3 mt-2">Checkout</h1>
+                <p class="text-muted">Review your order and enter your details.</p>
+            </div>
+            <vibe-row :gutters="5">
+                <!-- Order summary -->
+                <vibe-col :md="5" :lg="4" order="2" order-md="2">
+                    <h4 class="d-flex justify-content-between align-items-center mb-3">
+                        <span class="text-muted">Your cart</span>
+                        <vibe-badge variant="primary" pill>{{ cart.length }}</vibe-badge>
+                    </h4>
+                    <vibe-list-group class="mb-3" :items="summaryItems">
+                        <template #item="{ item }">
+                            <div class="d-flex justify-content-between lh-sm w-100">
+                                <div>
+                                    <h6 class="my-0" :class="{ 'fw-bold': item.total }">{{ item.name }}</h6>
+                                    <small v-if="item.desc" class="text-muted">{{ item.desc }}</small>
+                                </div>
+                                <span :class="item.total ? 'fw-bold' : 'text-muted'">{{ item.price }}</span>
+                            </div>
+                        </template>
+                    </vibe-list-group>
+                    <vibe-form-group label="Promo code">
+                        <vibe-input-group>
+                            <vibe-form-input v-model="promo" no-wrapper placeholder="Enter code" />
+                            <template #append>
+                                <vibe-button variant="secondary" @click="onRedeem">Redeem</vibe-button>
+                            </template>
+                        </vibe-input-group>
+                    </vibe-form-group>
+                </vibe-col>
+                <!-- Billing form -->
+                <vibe-col :md="7" :lg="8" order="1" order-md="1">
+                    <vibe-card class="shadow-sm">
+                        <h4 class="mb-3">Billing address</h4>
+                        <form novalidate @submit.prevent="onSubmit">
+                            <vibe-row :gutters="3">
+                                <vibe-col :md="6">
+                                    <vibe-form-group label="First name">
+                                        <vibe-form-input
+                                            v-model="form.fields.firstName"
+                                            :validation-state="stateFor('firstName')"
+                                            :validation-message="form.errors.firstName"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                                <vibe-col :md="6">
+                                    <vibe-form-group label="Last name">
+                                        <vibe-form-input
+                                            v-model="form.fields.lastName"
+                                            :validation-state="stateFor('lastName')"
+                                            :validation-message="form.errors.lastName"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                            </vibe-row>
+                            <vibe-form-group label="Email">
+                                <vibe-form-input
+                                    v-model="form.fields.email"
+                                    type="email"
+                                    placeholder="you@example.com"
+                                    :validation-state="stateFor('email')"
+                                    :validation-message="form.errors.email"
+                                />
+                            </vibe-form-group>
+                            <vibe-form-group label="Address">
+                                <vibe-form-input
+                                    v-model="form.fields.address"
+                                    placeholder="1234 Main St"
+                                    :validation-state="stateFor('address')"
+                                    :validation-message="form.errors.address"
+                                />
+                            </vibe-form-group>
+                            <vibe-form-group label="Address 2 (optional)">
+                                <vibe-form-input v-model="form.fields.address2" placeholder="Apartment or suite" />
+                            </vibe-form-group>
+                            <vibe-row :gutters="3">
+                                <vibe-col :md="5">
+                                    <vibe-form-group label="Country">
+                                        <vibe-form-select
+                                            v-model="form.fields.country"
+                                            :options="countries"
+                                            placeholder="Choose..."
+                                            :validation-state="stateFor('country')"
+                                            :validation-message="form.errors.country"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                                <vibe-col :md="4">
+                                    <vibe-form-group label="State">
+                                        <vibe-form-select
+                                            v-model="form.fields.state"
+                                            :options="states"
+                                            placeholder="Choose..."
+                                            :validation-state="stateFor('state')"
+                                            :validation-message="form.errors.state"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                                <vibe-col :md="3">
+                                    <vibe-form-group label="Zip">
+                                        <vibe-form-input
+                                            v-model="form.fields.zip"
+                                            :validation-state="stateFor('zip')"
+                                            :validation-message="form.errors.zip"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                            </vibe-row>
+                            <hr class="my-4">
+                            <h4 class="mb-3">Payment</h4>
+                            <vibe-form-radio
+                                v-for="opt in paymentOptions"
+                                :key="opt.value"
+                                v-model="form.fields.payment"
+                                name="payment"
+                                :value="opt.value"
+                                :label="opt.label"
+                            />
+                            <vibe-row :gutters="3" class="mt-3">
+                                <vibe-col :md="6">
+                                    <vibe-form-group label="Name on card">
+                                        <vibe-form-input
+                                            v-model="form.fields.cardName"
+                                            :validation-state="stateFor('cardName')"
+                                            :validation-message="form.errors.cardName"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                                <vibe-col :md="6">
+                                    <vibe-form-group label="Card number">
+                                        <vibe-form-input
+                                            v-model="form.fields.cardNumber"
+                                            placeholder="•••• •••• •••• ••••"
+                                            :validation-state="stateFor('cardNumber')"
+                                            :validation-message="form.errors.cardNumber"
+                                        />
+                                    </vibe-form-group>
+                                </vibe-col>
+                            </vibe-row>
+                            <vibe-form-checkbox v-model="form.fields.saveInfo" class="mt-3">
+                                Save this information for next time
+                            </vibe-form-checkbox>
+                            <hr class="my-4">
+                            <vibe-button type="submit" variant="primary" size="lg" class="w-100">
+                                <vibe-icon icon="lock-fill" class="me-2"></vibe-icon>
+                                Continue to payment
+                            </vibe-button>
+                        </form>
+                    </vibe-card>
+                </vibe-col>
+            </vibe-row>
+        </vibe-container>
+        <vibe-toast-host></vibe-toast-host>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../dist/vibeui.umd.js"></script>
+    <script>
+        const { createApp, ref, computed } = Vue;
+        const { useForm, useToast, validators } = VibeUI;
+        createApp({
+            setup() {
+                const toast = useToast();
+                const promo = ref('');
+                const cart = [
+                    { name: 'Product name', desc: 'Brief description', price: 12 },
+                    { name: 'Second product', desc: 'Brief description', price: 8 },
+                    { name: 'Third item', desc: 'Brief description', price: 5 }
+                ];
+                const summaryItems = computed(() => {
+                    const total = cart.reduce((s, i) => s + i.price, 0);
+                    return [
+                        ...cart.map(i => ({ name: i.name, desc: i.desc, price: `$${i.price}` })),
+                        { name: 'Total (USD)', price: `$${total}`, total: true }
+                    ];
+                });
+                const countries = [
+                    { text: 'United States', value: 'us' },
+                    { text: 'Canada', value: 'ca' },
+                    { text: 'United Kingdom', value: 'gb' }
+                ];
+                const states = [
+                    { text: 'California', value: 'ca' },
+                    { text: 'New York', value: 'ny' },
+                    { text: 'Texas', value: 'tx' }
+                ];
+                const paymentOptions = [
+                    { label: 'Credit card', value: 'credit' },
+                    { label: 'Debit card', value: 'debit' },
+                    { label: 'PayPal', value: 'paypal' }
+                ];
+                const form = useForm({
+                    firstName: '', lastName: '', email: '', address: '', address2: '',
+                    country: '', state: '', zip: '', payment: 'credit',
+                    cardName: '', cardNumber: '', saveInfo: false
+                });
+                const submitted = ref(false);
+                const stateFor = (key) => !submitted.value ? null : (form.errors[key] ? 'invalid' : 'valid');
+                const onRedeem = () => {
+                    if (promo.value.trim()) toast.success(`Promo "${promo.value}" applied`);
+                    else toast.warn('Enter a promo code first');
+                };
+                const onSubmit = async () => {
+                    submitted.value = true;
+                    const result = await form.validate({
+                        firstName: [validators.required('Required')],
+                        lastName: [validators.required('Required')],
+                        email: [validators.required('Required'), validators.email('Enter a valid email')],
+                        address: [validators.required('Required')],
+                        country: [validators.required('Please select a country')],
+                        state: [validators.required('Please select a state')],
+                        zip: [validators.required('Required')],
+                        cardName: [validators.required('Required')],
+                        cardNumber: [validators.required('Required'), validators.minLength(12, 'Card number looks too short')]
+                    });
+                    if (result.valid) toast.success('Order placed — thank you!');
+                    else toast.error('Please fix the highlighted fields');
+                };
+                return { cart, summaryItems, promo, countries, states, paymentOptions, form, stateFor, onRedeem, onSubmit };
+            }
+        }).use(VibeUI.default).mount('#app');
+    </script>
+</body>
+</html>

package/examples/cover.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cover - VibeUI Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="../dist/vibeui.css">
+    <style>
+        .cover {
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #6a82fb 100%);
+        }
+    </style>
+    <!-- VibeToast loads Bootstrap JS internally via `import('bootstrap')`; the UMD bundle
+         keeps that bare specifier, so the page maps it here so toasts display. -->
+    <script type="importmap">
+      {
+        "imports": {
+          "bootstrap": "https://esm.sh/bootstrap@5.3.0"
+        }
+      }
+    </script>
+</head>
+<body>
+    <div id="app">
+        <div class="cover d-flex flex-column text-white" data-bs-theme="dark">
+            <!-- Masthead -->
+            <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4">
+                <a href="#" class="d-flex align-items-center text-white text-decoration-none me-md-auto mb-2 mb-md-0">
+                    <vibe-icon icon="compass-fill" class="me-2 fs-4"></vibe-icon>
+                    <span class="fs-5 fw-bold">Cover</span>
+                </a>
+                <vibe-nav :items="navItems" class="justify-content-center"></vibe-nav>
+            </header>
+            <!-- Centered cover content (VibeHero fills the remaining space) -->
+            <vibe-hero align="center" class="flex-grow-1 d-flex align-items-center">
+                <vibe-col :lg="7" class="mx-auto">
+                    <h1 class="display-3 fw-bold mb-3">Cover your page beautifully.</h1>
+                    <p class="lead mb-4">
+                        A one-page template built entirely with VibeUI components — a hero,
+                        navigation, and footer, ready to drop your message into.
+                    </p>
+                    <div class="d-flex gap-3 justify-content-center">
+                        <vibe-button variant="light" size="lg" @click="onLearnMore">
+                            <vibe-icon icon="rocket-takeoff-fill" class="me-2"></vibe-icon>
+                            Learn more
+                        </vibe-button>
+                        <vibe-button variant="light" outline size="lg" href="#features">
+                            Features
+                        </vibe-button>
+                    </div>
+                </vibe-col>
+            </vibe-hero>
+            <!-- Mastfoot -->
+            <footer class="p-3 text-center text-white-50">
+                <small>Built with VibeUI by <a href="https://technosorcery.com" class="text-white">TechnoSorcery.com</a></small>
+            </footer>
+        </div>
+        <vibe-toast-host></vibe-toast-host>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../dist/vibeui.umd.js"></script>
+    <script>
+        const { createApp } = Vue;
+        const { useToast } = VibeUI;
+        createApp({
+            setup() {
+                const toast = useToast();
+                const navItems = [
+                    { text: 'Home', href: '#', active: true },
+                    { text: 'Features', href: '#' },
+                    { text: 'Contact', href: '#' }
+                ];
+                const onLearnMore = () => toast.info('Thanks for your interest!');
+                return { navItems, onLearnMore };
+            }
+        }).use(VibeUI.default).mount('#app');
+    </script>
+</body>
+</html>

package/examples/dashboard.html ADDED Viewed

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - VibeUI Example</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="../dist/vibeui.css">
+    <style>
+        body { font-size: .875rem; }
+        .sidebar {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 100;
+            padding: 48px 0 0;
+            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+        }
+        @media (max-width: 767.98px) {
+            .sidebar { top: 5rem; }
+        }
+        .sidebar-sticky {
+            height: calc(100vh - 48px);
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <!-- Dashboard header: VibeNavbar with container disabled so the brand can use
+             column classes and the search input can span full width (custom layout). -->
+        <vibe-navbar variant="dark" :container="false" position="sticky-top" tag="header" class="flex-md-nowrap p-0 shadow">
+            <vibe-navbar-brand href="./" class="col-md-3 col-lg-2 me-0 px-3 fs-6">
+                <vibe-icon icon="speedometer2" class="me-2"></vibe-icon>
+                Dashboard
+            </vibe-navbar-brand>
+            <!-- Raw toggler: driven by Bootstrap's data API against the raw sidebar collapse below. -->
+            <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" v-model="searchQuery">
+            <div class="navbar-nav">
+                <div class="nav-item text-nowrap">
+                    <a class="nav-link px-3" href="#">Sign out</a>
+                </div>
+            </div>
+        </vibe-navbar>
+        <vibe-container fluid>
+            <vibe-row>
+                <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
+                    <div class="position-sticky pt-3 sidebar-sticky">
+                        <vibe-list-group flush :items="menuItems">
+                            <template #item="{ item }">
+                                <vibe-icon :icon="item.icon" class="me-2"></vibe-icon>
+                                {{ item.text }}
+                            </template>
+                        </vibe-list-group>
+                        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
+                            <span>Saved reports</span>
+                        </h6>
+                        <vibe-list-group flush :items="savedReportItems">
+                            <template #item="{ item }">
+                                <vibe-icon icon="file-earmark-text" class="me-2"></vibe-icon>
+                                {{ item.text }}
+                            </template>
+                        </vibe-list-group>
+                    </div>
+                </nav>
+                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
+                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+                        <h1 class="h2">Dashboard</h1>
+                        <vibe-button-group size="sm" class="me-2">
+                            <vibe-button variant="secondary" outline>Share</vibe-button>
+                            <vibe-button variant="secondary" outline>Export</vibe-button>
+                        </vibe-button-group>
+                    </div>
+                    <vibe-row :gutters="4" class="mb-4">
+                        <vibe-col :md="3" v-for="stat in stats" :key="stat.label">
+                            <vibe-card :class="`border-${stat.variant}`">
+                                <h6 class="text-muted">{{ stat.label }}</h6>
+                                <h3 class="mb-0">{{ stat.value }}</h3>
+                                <small :class="`text-${stat.changeClass}`">
+                                    <vibe-icon :icon="stat.changeIcon"></vibe-icon>
+                                    {{ stat.change }}
+                                </small>
+                            </vibe-card>
+                        </vibe-col>
+                    </vibe-row>
+                    <h2>Recent Orders</h2>
+                    <vibe-data-table :items="orders" :columns="orderColumns" row-key="id" striped hover small>
+                        <template #cell(status)="{ item }">
+                            <vibe-badge :variant="item.statusVariant">{{ item.status }}</vibe-badge>
+                        </template>
+                    </vibe-data-table>
+                </main>
+            </vibe-row>
+        </vibe-container>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../dist/vibeui.umd.js"></script>
+    <script>
+        const { createApp } = Vue;
+        createApp({
+            data() {
+                return {
+                    searchQuery: '',
+                    orderColumns: [
+                        { key: 'id', label: 'Order ID', sortable: true },
+                        { key: 'customer', label: 'Customer', sortable: true, searchable: true },
+                        { key: 'product', label: 'Product', searchable: true },
+                        { key: 'amount', label: 'Amount', sortable: true },
+                        { key: 'status', label: 'Status' }
+                    ],
+                    menuItems: [
+                        { text: 'Dashboard', icon: 'house-fill', href: '#', active: true },
+                        { text: 'Orders', icon: 'file-earmark', href: '#', active: false },
+                        { text: 'Products', icon: 'cart', href: '#', active: false },
+                        { text: 'Customers', icon: 'people', href: '#', active: false },
+                        { text: 'Reports', icon: 'graph-up', href: '#', active: false }
+                    ],
+                    savedReports: ['Current month', 'Last quarter', 'Year-end sale'],
+                    stats: [
+                        { label: 'Total Revenue', value: '$45,231', change: '12.5%', changeIcon: 'arrow-up', changeClass: 'success', variant: 'primary' },
+                        { label: 'Orders', value: '1,234', change: '8.2%', changeIcon: 'arrow-up', changeClass: 'success', variant: 'success' },
+                        { label: 'Customers', value: '567', change: '3.1%', changeIcon: 'arrow-down', changeClass: 'danger', variant: 'warning' },
+                        { label: 'Bounce Rate', value: '42%', change: 'No change', changeIcon: 'dash', changeClass: 'muted', variant: 'info' }
+                    ],
+                    orders: [
+                        { id: '#1001', customer: 'John Doe', product: 'Widget', amount: '$129.99', status: 'Completed', statusVariant: 'success' },
+                        { id: '#1002', customer: 'Jane Smith', product: 'Gadget', amount: '$79.99', status: 'Pending', statusVariant: 'warning' },
+                        { id: '#1003', customer: 'Bob Johnson', product: 'Tool', amount: '$199.99', status: 'Processing', statusVariant: 'info' },
+                        { id: '#1004', customer: 'Alice Brown', product: 'Device', amount: '$299.99', status: 'Completed', statusVariant: 'success' },
+                        { id: '#1005', customer: 'Charlie Wilson', product: 'Accessory', amount: '$49.99', status: 'Shipped', statusVariant: 'primary' }
+                    ]
+                }
+            },
+            computed: {
+                savedReportItems() {
+                    return this.savedReports.map(r => ({ text: r, href: '#' }));
+                }
+            }
+        }).use(VibeUI.default).mount('#app');
+    </script>
+</body>
+</html>

package/examples/index.html ADDED Viewed

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VibeUI Examples</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="../dist/vibeui.css">
+    <style>
+        .example-card {
+            transition: transform 0.2s, box-shadow 0.2s;
+            text-decoration: none;
+            color: inherit;
+            display: block;
+        }
+        .example-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <vibe-navbar variant="primary" theme="dark" expand="lg" class="mb-4">
+            <vibe-navbar-brand href="#" class="fw-bold">
+                <vibe-icon icon="lightning-charge-fill"></vibe-icon>
+                VibeUI Examples
+            </vibe-navbar-brand>
+            <span class="navbar-text text-white-50">
+                Powered by Bootstrap 5.3 &amp; Vue 3
+            </span>
+        </vibe-navbar>
+        <vibe-container>
+            <vibe-row class="mb-5">
+                <vibe-col :lg="8" class="mx-auto text-center">
+                    <h1 class="display-4 fw-bold mb-3">VibeUI Examples</h1>
+                    <p class="lead text-muted">
+                        Get started with VibeUI using these pre-built examples. Each example demonstrates
+                        different components and patterns you can use in your Vue 3 applications.
+                    </p>
+                </vibe-col>
+            </vibe-row>
+            <!-- Starters -->
+            <section class="mb-5">
+                <h2 class="mb-3">
+                    <vibe-icon icon="play-circle" class="text-primary"></vibe-icon>
+                    Starters
+                </h2>
+                <p class="text-muted mb-4">Quick start templates to begin building with VibeUI</p>
+                <vibe-row :gutters="4">
+                    <vibe-col :md="6" :lg="4" v-for="ex in starters" :key="ex.href">
+                        <a :href="ex.href" class="example-card">
+                            <vibe-card class="h-100">
+                                <h5 class="card-title">
+                                    <vibe-icon :icon="ex.icon" :class="ex.iconClass"></vibe-icon>
+                                    {{ ex.title }}
+                                </h5>
+                                <p class="card-text text-muted">{{ ex.text }}</p>
+                            </vibe-card>
+                        </a>
+                    </vibe-col>
+                </vibe-row>
+            </section>
+            <!-- Custom Components -->
+            <section class="mb-5">
+                <h2 class="mb-3">
+                    <vibe-icon icon="grid-3x3-gap" class="text-primary"></vibe-icon>
+                    Custom Components
+                </h2>
+                <p class="text-muted mb-4">Full-page examples built with VibeUI components</p>
+                <vibe-row :gutters="4">
+                    <vibe-col :md="6" :lg="4" v-for="ex in examples" :key="ex.href">
+                        <a :href="ex.href" class="example-card">
+                            <vibe-card class="h-100">
+                                <h5 class="card-title">
+                                    <vibe-icon :icon="ex.icon" :class="ex.iconClass"></vibe-icon>
+                                    {{ ex.title }}
+                                </h5>
+                                <p class="card-text text-muted">{{ ex.text }}</p>
+                            </vibe-card>
+                        </a>
+                    </vibe-col>
+                </vibe-row>
+            </section>
+            <footer class="border-top pt-4 pb-4 mt-5 text-center text-muted">
+                <p class="mb-0">Built with ✨ by <a href="https://technosorcery.com" class="text-decoration-none">TechnoSorcery.com</a></p>
+                <p class="small mb-0 mt-2">VibeUI - A Vue 3 UI library for Bootstrap 5.3</p>
+            </footer>
+        </vibe-container>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../dist/vibeui.umd.js"></script>
+    <script>
+        const { createApp } = Vue;
+        createApp({
+            data() {
+                return {
+                    starters: [
+                        { href: 'starter.html', icon: 'file-earmark-code', iconClass: 'text-primary', title: 'Starter Template', text: 'Basic Vue app with VibeUI components' }
+                    ],
+                    examples: [
+                        { href: 'album.html', icon: 'images', iconClass: 'text-info', title: 'Album', text: 'Photo gallery with cards and grid layout' },
+                        { href: 'pricing.html', icon: 'cash-stack', iconClass: 'text-success', title: 'Pricing', text: 'Pricing tables with cards and badges' },
+                        { href: 'dashboard.html', icon: 'speedometer2', iconClass: 'text-primary', title: 'Dashboard', text: 'Admin dashboard with sidebar navigation' },
+                        { href: 'sign-in.html', icon: 'box-arrow-in-right', iconClass: 'text-primary', title: 'Sign in', text: 'Centered sign-in form with validation' },
+                        { href: 'checkout.html', icon: 'bag-check', iconClass: 'text-success', title: 'Checkout', text: 'Billing form, order summary, and validation' },
+                        { href: 'sidebars.html', icon: 'layout-sidebar', iconClass: 'text-info', title: 'Sidebars', text: 'Sidebar nav + mobile offcanvas with reactive sections' },
+                        { href: 'cover.html', icon: 'fullscreen', iconClass: 'text-primary', title: 'Cover', text: 'Full-viewport one-page hero with VibeHero' },
+                        { href: 'product.html', icon: 'box-seam', iconClass: 'text-primary', title: 'Product', text: 'Marketing page with hero, feature grid, and product cards' },
+                        { href: 'carousel.html', icon: 'images', iconClass: 'text-info', title: 'Carousel', text: 'Full-width carousel with marketing columns and featurettes' },
+                        { href: 'blog.html', icon: 'newspaper', iconClass: 'text-secondary', title: 'Blog', text: 'Magazine layout with posts, pagination, and sidebar' },
+                        { href: 'jumbotron.html', icon: 'card-heading', iconClass: 'text-primary', title: 'Jumbotron', text: 'Modern jumbotron built with the bordered VibeHero' },
+                        { href: 'sticky-footer.html', icon: 'layout-text-window-reverse', iconClass: 'text-secondary', title: 'Sticky footer', text: 'Footer pinned to the bottom of the viewport' },
+                        { href: 'sticky-footer-navbar.html', icon: 'window-stack', iconClass: 'text-secondary', title: 'Sticky footer + navbar', text: 'Fixed top navbar plus a sticky footer' }
+                    ]
+                }
+            }
+        }).use(VibeUI.default).mount('#app');
+    </script>
+</body>
+</html>