@omnitend/dashboard-for-laravel 0.4.7

package/docs/public/docs-map.md

@@ -0,0 +1,85 @@
+# Documentation Map
+
+> Auto-generated hierarchical overview of all documentation
+> Last updated: 2025-11-26T12:28:39.369Z
+
+This file provides a complete map of all available documentation for AI agents and developers.
+
+
+### Components
+
+
+### Base
+
+- [DAccordion](/components/base/DAccordion): Type-safe wrapper around Bootstrap Vue Next's BAccordion component
+- [DAlert](/components/base/DAlert): Type-safe wrapper around Bootstrap Vue Next's BAlert component
+- [DAvatar](/components/base/DAvatar): Type-safe wrapper around Bootstrap Vue Next's BAvatar component
+- [DBadge](/components/base/DBadge): Type-safe wrapper around Bootstrap Vue Next's BBadge component
+- [DBreadcrumb](/components/base/DBreadcrumb): Type-safe wrapper around Bootstrap Vue Next's BBreadcrumb component
+- [DButton](/components/base/DButton): Type-safe wrapper around Bootstrap Vue Next's BButton component
+- [DButtonGroup](/components/base/DButtonGroup): Type-safe wrapper around Bootstrap Vue Next's BButtonGroup component
+- [DButtonToolbar](/components/base/DButtonToolbar): Type-safe wrapper around Bootstrap Vue Next's BButtonToolbar component
+- [DCard](/components/base/DCard): Type-safe wrapper around Bootstrap Vue Next's BCard component
+- [DCarousel](/components/base/DCarousel): Type-safe wrapper around Bootstrap Vue Next's BCarousel component
+- [DCol](/components/base/DCol): Type-safe wrapper around Bootstrap Vue Next's BCol component
+- [DCollapse](/components/base/DCollapse): Type-safe wrapper around Bootstrap Vue Next's BCollapse component
+- [DContainer](/components/base/DContainer): Type-safe wrapper around Bootstrap Vue Next's BContainer component
+- [DDropdown](/components/base/DDropdown): Type-safe wrapper around Bootstrap Vue Next's BDropdown component
+- [DDropdownDivider](/components/base/DDropdownDivider): Type-safe wrapper around Bootstrap Vue Next's BDropdownDivider component
+- [DDropdownItem](/components/base/DDropdownItem): Type-safe wrapper around Bootstrap Vue Next's BDropdownItem component
+- [DForm](/components/base/DForm): Type-safe wrapper around Bootstrap Vue Next's BForm component
+- [DFormCheckbox](/components/base/DFormCheckbox): Type-safe wrapper around Bootstrap Vue Next's BFormCheckbox component
+- [DFormGroup](/components/base/DFormGroup): Type-safe wrapper around Bootstrap Vue Next's BFormGroup component
+- [DFormInput](/components/base/DFormInput): Type-safe wrapper around Bootstrap Vue Next's BFormInput component
+- [DFormRadio](/components/base/DFormRadio): Type-safe wrapper around Bootstrap Vue Next's BFormRadio component
+- [DFormSelect](/components/base/DFormSelect): Type-safe wrapper around Bootstrap Vue Next's BFormSelect component
+- [DFormSpinbutton](/components/base/DFormSpinbutton): Type-safe wrapper around Bootstrap Vue Next's BFormSpinbutton component
+- [DFormTags](/components/base/DFormTags): Type-safe wrapper around Bootstrap Vue Next's BFormTags component
+- [DFormTextarea](/components/base/DFormTextarea): Type-safe wrapper around Bootstrap Vue Next's BFormTextarea component
+- [DImage](/components/base/DImage): Type-safe wrapper around Bootstrap Vue Next's BImage component
+- [DInputGroup](/components/base/DInputGroup): Type-safe wrapper around Bootstrap Vue Next's BInputGroup component
+- [DLink](/components/base/DLink): Type-safe wrapper around Bootstrap Vue Next's BLink component
+- [DListGroup](/components/base/DListGroup): Type-safe wrapper around Bootstrap Vue Next's BListGroup component
+- [DModal](/components/base/DModal): Type-safe wrapper around Bootstrap Vue Next's BModal component
+- [DNav](/components/base/DNav): Type-safe wrapper around Bootstrap Vue Next's BNav component
+- [DNavItem](/components/base/DNavItem): DNavItem - A type-safe wrapper around Bootstrap Vue Next's BNavItem component. Individual navigation
+- [DNavbar](/components/base/DNavbar): Type-safe wrapper around Bootstrap Vue Next BNavbar component. Responsive navigation header with sup
+- [DOffcanvas](/components/base/DOffcanvas): DOffcanvas - A type-safe wrapper around Bootstrap Vue Next's BOffcanvas component. Hidden sidebar co
+- [DOverlay](/components/base/DOverlay): Type-safe wrapper around Bootstrap Vue Next BOverlay component. Overlay component for indicating loa
+- [DPagination](/components/base/DPagination): DPagination - A type-safe wrapper around Bootstrap Vue Next's BPagination component. Provides naviga
+- [DPlaceholder](/components/base/DPlaceholder): Type-safe wrapper around Bootstrap Vue Next BPlaceholder component. Loading placeholder component to
+- [DPopover](/components/base/DPopover): Type-safe wrapper around Bootstrap Vue Next BPopover component. Overlay component for displaying ric
+- [DProgress](/components/base/DProgress): Type-safe wrapper around Bootstrap Vue Next BProgress component. Progress bar for displaying simple 
+- [DRow](/components/base/DRow): DRow - A type-safe wrapper around Bootstrap Vue Next's BRow component. Container for columns within 
+- [DSpinner](/components/base/DSpinner): DSpinner - A type-safe wrapper around Bootstrap Vue Next's BSpinner component. Loading indicator to 
+- [DTable](/components/base/DTable): DTable - A type-safe wrapper around Bootstrap Vue Next's BTable component. Feature-rich data table w
+- [DTabs](/components/base/DTabs): Type-safe wrapper around Bootstrap Vue Next BTabs component. Create tabbed panes of local content wi
+- [DToast](/components/base/DToast): DToast - A type-safe wrapper around Bootstrap Vue Next's BToast component. Lightweight notification 
+- [DToaster](/components/base/DToaster): DToaster - A type-safe wrapper around Bootstrap Vue Next's BToaster component. Container for managin
+- [DTooltip](/components/base/DTooltip): Type-safe wrapper around Bootstrap Vue Next BTooltip component. Display helpful tooltips when hoveri
+
+### Extended
+
+- [DXBasicForm](/components/extended/DXBasicForm): Form instance from useForm composable
+- [DXDashboard](/components/extended/DXDashboard): Complete dashboard layout component that combines sidebar navigation, top navbar, and content area. 
+- [DXDashboardNavbar](/components/extended/DXDashboardNavbar): A responsive top navigation bar component for Laravel dashboards with user menu, search functionalit
+- [DXDashboardSidebar](/components/extended/DXDashboardSidebar): A collapsible sidebar navigation component for Laravel dashboards with support for navigation groups
+- [DXForm](/components/extended/DXForm): Form object from defineForm
+- [DXTable](/components/extended/DXTable): A comprehensive data table component with built-in pagination, loading states, and error handling fo
+
+### Examples
+
+- [Common Patterns](/examples/common-patterns): Real-world examples showing how to use the library components together.
+
+### Guide
+
+- [Forms](/guide/forms): The library includes a powerful type-safe form system with validation, auto-generated forms, and com
+- [Getting Started](/guide/getting-started): @omnitend/dashboard-for-laravel is a reusable full-stack component library for building Laravel dash
+- [Installation](/guide/installation): Install via npm:
+- [Theming](/guide/theming): The library includes a custom Bootstrap 5 theme that can be easily customised using CSS variables an
+- [TypeScript](/guide/typescript): The library is written in TypeScript and includes full type definitions for all components, composab
+
+
+---
+
+**Total Pages**: 58

package/docs/public/llms.txt

@@ -0,0 +1,110 @@
+# @omnitend/dashboard-for-laravel
+
+> Vue 3 dashboard components for Laravel with Bootstrap Vue Next
+>
+> A dual-package library (NPM + Composer) providing 61 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+
+## Installation
+
+- [NPM Installation](https://github.com/omnitend/dashboard-for-laravel#npm-package): Install via npm/yarn
+- [Composer Installation](https://github.com/omnitend/dashboard-for-laravel#composer-package): Install via Composer for Laravel integration
+
+## Getting Started
+
+- [Forms](/guide/forms): Type-safe form handling and validation
+- [Getting Started](/guide/getting-started): Quick start guide and core concepts
+- [Installation](/guide/installation): Install and configure the package
+- [Theming](/guide/theming): Customize appearance with CSS variables
+- [TypeScript](/guide/typescript): TypeScript types and best practices
+
+## Base Components (55 components)
+
+Lightweight type-safe wrappers around Bootstrap Vue Next components providing API stability and consistent theming.
+
+- [DAccordion](/components/base/daccordion): Bootstrap Vue Next Accordion wrapper
+- [DAccordionItem](/components/base/daccordionitem): Bootstrap Vue Next AccordionItem wrapper
+- [DAlert](/components/base/dalert): Bootstrap Vue Next Alert wrapper
+- [DAvatar](/components/base/davatar): Bootstrap Vue Next Avatar wrapper
+- [DBadge](/components/base/dbadge): Bootstrap Vue Next Badge wrapper
+- [DBreadcrumb](/components/base/dbreadcrumb): Bootstrap Vue Next Breadcrumb wrapper
+- [DButton](/components/base/dbutton): Bootstrap Vue Next Button wrapper
+- [DButtonGroup](/components/base/dbuttongroup): Bootstrap Vue Next ButtonGroup wrapper
+- [DButtonToolbar](/components/base/dbuttontoolbar): Bootstrap Vue Next ButtonToolbar wrapper
+- [DCard](/components/base/dcard): Bootstrap Vue Next Card wrapper
+- [DCarousel](/components/base/dcarousel): Bootstrap Vue Next Carousel wrapper
+- [DCarouselSlide](/components/base/dcarouselslide): Bootstrap Vue Next CarouselSlide wrapper
+- [DCol](/components/base/dcol): Bootstrap Vue Next Col wrapper
+- [DCollapse](/components/base/dcollapse): Bootstrap Vue Next Collapse wrapper
+- [DContainer](/components/base/dcontainer): Bootstrap Vue Next Container wrapper
+- [DDropdown](/components/base/ddropdown): Bootstrap Vue Next Dropdown wrapper
+- [DDropdownDivider](/components/base/ddropdowndivider): Bootstrap Vue Next DropdownDivider wrapper
+- [DDropdownItem](/components/base/ddropdownitem): Bootstrap Vue Next DropdownItem wrapper
+- [DForm](/components/base/dform): Bootstrap Vue Next Form wrapper
+- [DFormCheckbox](/components/base/dformcheckbox): Bootstrap Vue Next FormCheckbox wrapper
+- [DFormGroup](/components/base/dformgroup): Bootstrap Vue Next FormGroup wrapper
+- [DFormInput](/components/base/dforminput): Bootstrap Vue Next FormInput wrapper
+- [DFormInvalidFeedback](/components/base/dforminvalidfeedback): Bootstrap Vue Next FormInvalidFeedback wrapper
+- [DFormRadio](/components/base/dformradio): Bootstrap Vue Next FormRadio wrapper
+- [DFormSelect](/components/base/dformselect): Bootstrap Vue Next FormSelect wrapper
+- [DFormSpinbutton](/components/base/dformspinbutton): Bootstrap Vue Next FormSpinbutton wrapper
+- [DFormTags](/components/base/dformtags): Bootstrap Vue Next FormTags wrapper
+- [DFormText](/components/base/dformtext): Bootstrap Vue Next FormText wrapper
+- [DFormTextarea](/components/base/dformtextarea): Bootstrap Vue Next FormTextarea wrapper
+- [DImage](/components/base/dimage): Bootstrap Vue Next Image wrapper
+- [DInputGroup](/components/base/dinputgroup): Bootstrap Vue Next InputGroup wrapper
+- [DLink](/components/base/dlink): Bootstrap Vue Next Link wrapper
+- [DListGroup](/components/base/dlistgroup): Bootstrap Vue Next ListGroup wrapper
+- [DListGroupItem](/components/base/dlistgroupitem): Bootstrap Vue Next ListGroupItem wrapper
+- [DModal](/components/base/dmodal): Bootstrap Vue Next Modal wrapper
+- [DNav](/components/base/dnav): Bootstrap Vue Next Nav wrapper
+- [DNavItem](/components/base/dnavitem): Bootstrap Vue Next NavItem wrapper
+- [DNavbar](/components/base/dnavbar): Bootstrap Vue Next Navbar wrapper
+- [DNavbarBrand](/components/base/dnavbarbrand): Bootstrap Vue Next NavbarBrand wrapper
+- [DNavbarNav](/components/base/dnavbarnav): Bootstrap Vue Next NavbarNav wrapper
+- [DNavbarToggle](/components/base/dnavbartoggle): Bootstrap Vue Next NavbarToggle wrapper
+- [DOffcanvas](/components/base/doffcanvas): Bootstrap Vue Next Offcanvas wrapper
+- [DOverlay](/components/base/doverlay): Bootstrap Vue Next Overlay wrapper
+- [DPagination](/components/base/dpagination): Bootstrap Vue Next Pagination wrapper
+- [DPlaceholder](/components/base/dplaceholder): Bootstrap Vue Next Placeholder wrapper
+- [DPopover](/components/base/dpopover): Bootstrap Vue Next Popover wrapper
+- [DProgress](/components/base/dprogress): Bootstrap Vue Next Progress wrapper
+- [DRow](/components/base/drow): Bootstrap Vue Next Row wrapper
+- [DSpinner](/components/base/dspinner): Bootstrap Vue Next Spinner wrapper
+- [DTab](/components/base/dtab): Bootstrap Vue Next Tab wrapper
+- [DTable](/components/base/dtable): Bootstrap Vue Next Table wrapper
+- [DTabs](/components/base/dtabs): Bootstrap Vue Next Tabs wrapper
+- [DToast](/components/base/dtoast): Bootstrap Vue Next Toast wrapper
+- [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
+- [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
+
+## Extended Components (6 components)
+
+Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
+
+- [DXBasicForm](/components/extended/dxbasicform): Auto-generated forms from field definitions
+- [DXDashboard](/components/extended/dxdashboard): Complete dashboard layout with sidebar and navbar
+- [DXDashboardNavbar](/components/extended/dxdashboardnavbar): Top navbar with user dropdown
+- [DXDashboardSidebar](/components/extended/dxdashboardsidebar): Collapsible sidebar with navigation
+- [DXForm](/components/extended/dxform): Advanced form wrapper with defineForm integration
+- [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
+
+## Composables
+
+- [useForm](/guide/forms#useform-composable): Type-safe form state management with validation
+- [defineForm](/guide/forms#defineform): Define forms from field definitions with type inference
+- [useToast](/components/base/dtoaster): Toast notification system
+
+## PHP Integration
+
+- [BaseFormRequest](/guide/installation#laravel-integration): Laravel form request base class with validation
+- [HasApiResponses](/guide/installation#laravel-integration): Trait for consistent API responses
+- [PaginatedResource](/guide/installation#laravel-integration): Resource for paginated API responses
+
+## Optional
+
+Additional resources for advanced usage:
+
+- [TypeScript Guide](/guide/typescript): Full type safety and IDE support
+- [Theming Guide](/guide/theming): Customize Bootstrap theme with CSS variables
+- [Common Patterns](/examples/common-patterns): Real-world usage examples
+- [GitHub Repository](https://github.com/omnitend/dashboard-for-laravel): Source code and issue tracker

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@omnitend/dashboard-for-laravel",
+  "version": "0.4.7",
+  "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
+  "type": "module",
+  "main": "./dist/dashboard-for-laravel.umd.cjs",
+  "module": "./dist/dashboard-for-laravel.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "dashboard-docs-mcp": "scripts/mcp-server.mjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/dashboard-for-laravel.js",
+      "require": "./dist/dashboard-for-laravel.umd.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./theme.css": "./dist/style.css",
+    "./theme.scss": "./resources/css/theme.scss"
+  },
+  "files": [
+    "dist",
+    "resources",
+    "scripts/mcp-server.mjs",
+    "docs/public/llms.txt",
+    "docs/public/api-reference.json",
+    "docs/public/docs-map.md"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:headless": "vitest --run --browser.headless",
+    "docs:dev": "astro dev",
+    "docs:build": "npm run docs:generate:ai && astro build",
+    "docs:preview": "astro preview",
+    "docs:generate": "node scripts/generate-component-docs.mjs",
+    "docs:generate:ai": "node scripts/generate-llms-txt.mjs && node scripts/generate-api-manifest.mjs && node scripts/generate-docs-map.mjs",
+    "docs:enhance": "node scripts/enhance-frontmatter.mjs",
+    "docs:all": "npm run docs:generate && npm run docs:generate:ai && npm run docs:build",
+    "mcp": "node scripts/mcp-server.mjs",
+    "release": "bash scripts/release.sh"
+  },
+  "peerDependencies": {
+    "@inertiajs/vue3": "^2.0.0",
+    "axios": "^1.6.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    },
+    "bootstrap-vue-next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.22.0",
+    "bootstrap-vue-next": "^0.40.8",
+    "highlight.js": "^11.11.1",
+    "pluralize": "^8.0.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "vue-docgen-api": "^4.79.2"
+  },
+  "devDependencies": {
+    "@astrojs/mdx": "^4.3.8",
+    "@astrojs/sitemap": "^3.6.0",
+    "@astrojs/vue": "^5.1.1",
+    "@iconify-json/lucide": "^1.2.71",
+    "@iconify/json": "^2.2.397",
+    "@inertiajs/vue3": "^2.2.15",
+    "@types/pluralize": "^0.0.33",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/browser": "^4.0.3",
+    "@vitest/browser-playwright": "^4.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "astro": "^5.15.1",
+    "bootstrap": "^5.3.8",
+    "happy-dom": "^20.0.8",
+    "pagefind": "^1.4.0",
+    "playwright": "^1.56.1",
+    "sass-embedded": "^1.93.2",
+    "typescript": "^5.9.3",
+    "unplugin-icons": "^22.5.0",
+    "unplugin-vue-components": "^30.0.0",
+    "vite": "^6.4.1",
+    "vitest": "^4.0.3",
+    "vitest-browser-vue": "^2.0.0",
+    "vue-tsc": "^2.2.12"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "laravel",
+    "bootstrap",
+    "dashboard",
+    "components",
+    "forms",
+    "inertia",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": "Omni Tend",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/omnitend/dashboard-for-laravel.git"
+  },
+  "bugs": {
+    "url": "https://github.com/omnitend/dashboard-for-laravel/issues"
+  },
+  "homepage": "https://omnitend.github.io/dashboard-for-laravel/"
+}

package/resources/css/theme.scss

@@ -0,0 +1,219 @@
+// ============================================================================
+// Laravel Dashboard Theme
+// ============================================================================
+// Custom Bootstrap theme for the Laravel Dashboard library
+// Override Bootstrap variables BEFORE importing Bootstrap
+
+// ----------------------------------------------------------------------------
+// Colors
+// ----------------------------------------------------------------------------
+
+$primary: #4f46e5; // Indigo-600 (8.6:1 with white)
+$secondary: #475569; // Slate-600 (7.0:1 with white) - darkened for better contrast
+$success: #10b981; // Emerald-500 (6.7:1 with white)
+$danger: #dc2626; // Red-600 (7.2:1 with white) - darkened for better contrast
+$warning: #f59e0b; // Amber-500 (7.7:1 with white)
+$info: #2563eb; // Blue-600 (7.3:1 with white)
+$light: #f8fafc; // Slate-50 (uses dark text)
+$dark: #0f172a; // Slate-900 (uses white text)
+
+// ----------------------------------------------------------------------------
+// Contrast Settings
+// ----------------------------------------------------------------------------
+// Bootstrap uses these to calculate whether to use light or dark text on colored backgrounds
+
+$min-contrast-ratio: 4.5; // WCAG AA standard
+$color-contrast-dark: $dark; // Dark text color (for light backgrounds)
+$color-contrast-light: #fff; // Light text color (for dark backgrounds)
+
+// ----------------------------------------------------------------------------
+// Typography
+// ----------------------------------------------------------------------------
+
+$font-family-base: "Poppins", sans-serif;
+$font-size-base: 0.875rem; // 14px
+$font-weight-base: 400;
+$line-height-base: 1.5;
+
+$h1-font-size: 2rem; // 32px
+$h2-font-size: 1.75rem; // 28px
+$h3-font-size: 1.5rem; // 24px
+$h4-font-size: 1.25rem; // 20px
+$h5-font-size: 1.125rem; // 18px
+$h6-font-size: 1rem; // 16px
+
+$headings-font-weight: 600;
+
+// ----------------------------------------------------------------------------
+// Spacing
+// ----------------------------------------------------------------------------
+
+$spacer: 1rem;
+
+// ----------------------------------------------------------------------------
+// Borders
+// ----------------------------------------------------------------------------
+
+$border-radius: 0.5rem; // 8px
+$border-radius-sm: 0.375rem; // 6px
+$border-radius-lg: 0.75rem; // 12px
+$border-color: #e5e7eb; // Gray-200
+
+// ----------------------------------------------------------------------------
+// Buttons
+// ----------------------------------------------------------------------------
+
+$btn-padding-y: 0.625rem; // 10px
+$btn-padding-x: 1.25rem; // 20px
+$btn-font-weight: 500;
+$btn-border-radius: $border-radius;
+$btn-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+$btn-padding-y-sm: 0.5rem; // 8px
+$btn-padding-x-sm: 1rem; // 16px
+
+$btn-padding-y-lg: 0.75rem; // 12px
+$btn-padding-x-lg: 1.5rem; // 24px
+
+// ----------------------------------------------------------------------------
+// Forms
+// ----------------------------------------------------------------------------
+
+$input-padding-y: 0.625rem;
+$input-padding-x: 1rem;
+$input-border-radius: $border-radius;
+$input-border-color: #d1d5db; // Gray-300
+$input-focus-border-color: $primary;
+$input-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+
+// ----------------------------------------------------------------------------
+// Cards
+// ----------------------------------------------------------------------------
+
+$card-border-radius: $border-radius;
+$card-border-color: $border-color;
+$card-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$card-cap-bg: transparent;
+$card-spacer-y: 1.5rem; // 24px vertical padding
+$card-spacer-x: 1.5rem; // 24px horizontal padding
+
+// ----------------------------------------------------------------------------
+// Tables
+// ----------------------------------------------------------------------------
+
+$table-cell-padding-y: 0.75rem;
+$table-cell-padding-x: 1rem;
+$table-striped-bg: #f9fafb; // Gray-50
+$table-hover-bg: #f3f4f6; // Gray-100
+
+// ----------------------------------------------------------------------------
+// Modals
+// ----------------------------------------------------------------------------
+
+$modal-content-border-radius: $border-radius-lg;
+$modal-content-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+  0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+// ----------------------------------------------------------------------------
+// Alerts
+// ----------------------------------------------------------------------------
+
+$alert-border-radius: $border-radius;
+$alert-padding-y: 1rem;
+$alert-padding-x: 1rem;
+
+// ----------------------------------------------------------------------------
+// Badges
+// ----------------------------------------------------------------------------
+
+$badge-border-radius: $border-radius-sm;
+$badge-padding-y: 0.25rem;
+$badge-padding-x: 0.625rem;
+$badge-font-weight: 500;
+
+// ----------------------------------------------------------------------------
+// Dashboard
+// ----------------------------------------------------------------------------
+
+$dashboard-sidebar-width: 280px;
+$dashboard-sidebar-collapsed-width: 80px;
+$dashboard-navbar-height: 64px;
+
+// ----------------------------------------------------------------------------
+// Import Bootstrap
+// ----------------------------------------------------------------------------
+
+@import "bootstrap/scss/bootstrap";
+
+// ----------------------------------------------------------------------------
+// Import Bootstrap Vue Next
+// ----------------------------------------------------------------------------
+
+@import "bootstrap-vue-next/dist/bootstrap-vue-next.css";
+
+// ----------------------------------------------------------------------------
+// Dashboard Custom Styles
+// ----------------------------------------------------------------------------
+
+.dashboard-sidebar {
+  background-color: $dark;
+  width: $dashboard-sidebar-width;
+
+  &.sidebar-collapsed {
+    width: $dashboard-sidebar-collapsed-width;
+  }
+
+  .sidebar-header {
+    height: $dashboard-navbar-height;
+    border-bottom-color: $navbar-dark-toggler-border-color;
+  }
+
+  .nav-group-label {
+    color: $navbar-dark-color;
+  }
+
+  .nav-group-divider {
+    border-color: $navbar-dark-toggler-border-color;
+  }
+
+  .nav-link {
+    color: $navbar-dark-hover-color;
+
+    &:hover {
+      color: $navbar-dark-active-color;
+      background-color: rgba($white, 0.1);
+    }
+
+    &.active {
+      color: $navbar-dark-active-color;
+      background-color: rgba($white, 0.15);
+      font-weight: 500;
+    }
+  }
+}
+
+.dashboard-navbar {
+  height: $dashboard-navbar-height;
+}
+
+// ----------------------------------------------------------------------------
+// Custom Utilities
+// ----------------------------------------------------------------------------
+
+// Add any custom utility classes here
+.shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+}
+
+.shadow {
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+}
+
+.shadow-lg {
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+}

package/resources/js/components/base/DAccordion.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BAccordion component.
+ * Easily toggle content visibility with collapsible accordions.
+ */
+<script setup lang="ts">
+import { BAccordion } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BAccordion v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BAccordion>
+</template>

package/resources/js/components/base/DAccordionItem.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BAccordionItem } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BAccordionItem v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BAccordionItem>
+</template>

package/resources/js/components/base/DAlert.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BAlert v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </BAlert>
+</template>

package/resources/js/components/base/DAvatar.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BAvatar component.
+ * Display user profiles as pictures, icons, or short text.
+ */
+<script setup lang="ts">
+import { BAvatar } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BAvatar v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BAvatar>
+</template>

package/resources/js/components/base/DBadge.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { BBadge } from "bootstrap-vue-next";
+import { useSlots } from "vue";
+
+const slots = useSlots();
+</script>
+
+<template>
+  <BBadge v-bind="$attrs">
+    <template v-for="(_, name) in slots" :key="name" #[name]>
+      <slot :name="name" />
+    </template>
+  </BBadge>
+</template>

package/resources/js/components/base/DBreadcrumb.vue

@@ -0,0 +1,21 @@
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BBreadcrumb component.
+ * Indicate the current page's location within a navigational hierarchy.
+ */
+<script setup lang="ts">
+import { BBreadcrumb } from "bootstrap-vue-next";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <BBreadcrumb v-bind="$attrs">
+    <!-- Dynamically pass through all named slots with their props -->
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </BBreadcrumb>
+</template>