### Clone and Run Cornet Starter App

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/CONTRIBUTING.md

Clone the repository, install dependencies, and start the development server for the Cornet starter app.

```bash
git clone --recurse-submodules git@gitlab.limos.fr:hub-isima/daisyui-vue-kit.git
cd daisyui-vue-kit
npm install
npm run dev
```

--------------------------------

### DuAccordion Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Demonstrates how to use the DuAccordion component with a list of items. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuAccordion } from 'cornet-ui'

const items = [
  { id: '1', title: 'How does it work?', content: 'It works by...' },
  { id: '2', title: 'What is the cost?', content: '$9.99/month' },
  { id: '3', title: 'Can I cancel?', content: 'Yes, anytime' }
]
</script>

<template>
  <DuAccordion :items="items" modifier="['collapse-arrow']" />
</template>
```

--------------------------------

### Example: Expand Internal Dependencies

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Illustrates how `expandWithInternalDependencies` works by starting with a set containing only 'DuFab' and expanding it to include its dependencies like 'DuButton'.

```typescript
// If DuFab internally uses DuButton, and user only imports DuFab:
const used = new Set(['DuFab'])
const expanded = expandWithInternalDependencies(used, exports, './node_modules/cornet-ui')
// expanded now includes both 'DuFab' and 'DuButton'
```

--------------------------------

### Source File Path Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/INDEX.md

Example of how source file paths are formatted within the documentation.

```bash
components/Actions/du-button/du-button.vue
```

--------------------------------

### DuNavbar Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-layout-navigation.md

Demonstrates how to use the DuNavbar component with sticky and bordered props, and slots for start, center, and end content.

```vue
<script setup lang="ts">
import { DuNavbar, DuButton } from 'cornet-ui'
</script>

<template>
  <DuNavbar sticky bordered>
    <template #start>
      <a href="/" class="btn btn-ghost text-lg">My App</a>
    </template>
    
    <template #center>
      <a href="/" class="link link-hover">Home</a>
      <a href="/about" class="link link-hover">About</a>
      <a href="/docs" class="link link-hover">Docs</a>
    </template>
    
    <template #end>
      <DuButton variant="primary">Login</DuButton>
    </template>
  </DuNavbar>
</template>
```

--------------------------------

### DuButton Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-actions.md

Demonstrates various ways to use the DuButton component, including basic usage, different variants, sizes, styles, shapes, rendering as a link, and disabled states. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuButton } from 'cornet-ui'

function handleClick() {
  console.log('Clicked')
}
</script>

<template>
  <!-- Basic button -->
  <DuButton @click="handleClick">Click me</DuButton>

  <!-- Primary variant -->
  <DuButton variant="primary">Save</DuButton>

  <!-- Sizes -->
  <DuButton size="sm">Small</DuButton>
  <DuButton size="lg">Large</DuButton>

  <!-- Styles -->
  <DuButton outline>Outlined</DuButton>
  <DuButton soft>Soft</DuButton>
  <DuButton ghost>Ghost</DuButton>

  <!-- Shapes -->
  <DuButton square>S</DuButton>
  <DuButton circle>C</DuButton>

  <!-- As link -->
  <DuButton as="a" href="/dashboard" variant="primary">
    Go to Dashboard
  </DuButton>

  <!-- Disabled -->
  <DuButton disabled>Disabled</DuButton>
</template>
```

--------------------------------

### Troubleshooting: Component Import Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Ensure that components are correctly imported in your source files. This example shows a typical import statement for a component from the 'cornet-ui' package.

```javascript
import { DuButton } from 'cornet-ui'
```

--------------------------------

### DuSelect Component Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-input.md

Demonstrates various ways to use the DuSelect component, including simple string options, object options with single and multi-select, and returning full objects. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuSelect } from 'cornet-ui'
import { ref } from 'vue'

const selectedId = ref(null)
const selectedIds = ref([])
const users = ref([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
])
</script>

<template>
  <!-- Simple string options -->
  <DuSelect 
    v-model="selected"
    :options="['Red', 'Green', 'Blue']"
    placeholder="Choose color..."
  />

  <!-- Object options with single select -->
  <DuSelect
    v-model="selectedId"
    :options="users"
    trackBy="id"
    labelBy="name"
    placeholder="Select user..."
    searchable
  />

  <!-- Multi-select with checkboxes -->
  <DuSelect
    v-model="selectedIds"
    :options="users"
    multiple
    checkboxes
    searchable
    searchableInside
    trackBy="id"
    labelBy="name"
    placeholder="Select users..."
  />

  <!-- Return full objects -->
  <DuSelect
    v-model="selectedUser"
    :options="users"
    trackBy="id"
    labelBy="name"
    returnObject
    searchable
  />
</template>
```

--------------------------------

### Component File Structure Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/overview.md

Illustrates the typical file organization for a DaisyUI Vue component, including the implementation, types, and Storybook stories.

```tree
components/Actions/du-button/
├── du-button.vue           # Implementation
├── du-button.types.ts      # Types: BUTTONSize, BUTTONColor
└── du-button.stories.ts    # Storybook stories
```

--------------------------------

### Example: Parse Library Exports

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Demonstrates how to use `parseLibraryExports` by reading an `index.ts` file and logging a specific component's export path.

```typescript
import { parseLibraryExports } from 'cornet-ui/plugin-vite'
import { readFileSync } from 'fs'

const indexContent = readFileSync('./lib/index.ts', 'utf-8')
const exports = parseLibraryExports(indexContent)
console.log(exports.get('DuButton')) 
// → "./components/Actions/du-button/du-button.vue"
```

--------------------------------

### DuCountdown Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Shows how to implement the DuCountdown component to display a countdown to a target date. Requires 'cornet-ui' to be installed.

```vue
<script setup lang="ts">
import { DuCountdown } from 'cornet-ui'

const targetDate = new Date('2024-12-31T23:59:59')
</script>

<template>
  <DuCountdown :targetDate="targetDate" format="simple" />
</template>
```

--------------------------------

### DuTooltip Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

Demonstrates how to use the DuTooltip component with different text and positions. Ensure the component is imported from 'cornet-ui'.

```vue
<script setup lang="ts">
import { DuTooltip, DuButton } from 'cornet-ui'
</script>

<template>
  <!-- Tooltip on button -->
  <DuTooltip text="Save your work" position="tooltip-bottom">
    <DuButton variant="primary">Save</DuButton>
  </DuTooltip>

  <!-- Tooltip with long text -->
  <DuTooltip text="Click here to upload a new profile picture" position="tooltip-left">
    <button class="avatar placeholder">
      <div class="bg-primary rounded-full w-10 text-white">
        <span>U</span>
      </div>
    </button>
  </DuTooltip>

  <!-- Right-positioned tooltip -->
  <DuTooltip text="Delete permanently" position="tooltip-right">
    <button class="btn btn-ghost btn-sm">
      <svg class="w-4 h-4" fill="currentColor"><!-- trash icon --></svg>
    </button>
  </DuTooltip>
</template>
```

--------------------------------

### DuCollapse Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Demonstrates how to use the DuCollapse component for a single collapsible section. Ensure 'cornet-ui' is installed.

```vue
<script setup lang="ts">
import { DuCollapse } from 'cornet-ui'
</script>

<template>
  <DuCollapse title="More Details" modifier="['collapse-arrow']">
    This is hidden content that expands when clicked.
  </DuCollapse>
</template>
```

--------------------------------

### Install Cornet UI via NPM

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/00-START-HERE.md

Install the Cornet UI package using NPM. This is the recommended method for adding the library to your project.

```bash
npm install cornet-ui
```

--------------------------------

### DuMenu Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-layout-navigation.md

Shows how to implement the DuMenu component with nested submenus, dynamic active item tracking, and event handling for item selection.

```vue
<script setup lang="ts">
import { DuMenu } from 'cornet-ui'
import { ref } from 'vue'

const activeItem = ref('home')
const menuItems = ref([
  { label: 'Home', value: 'home', href: '/' },
  { label: 'Products', value: 'products', subItems: [
    { label: 'Electronics', href: '/products/electronics' },
    { label: 'Clothing', href: '/products/clothing' }
  ]},
  { label: 'About', value: 'about', href: '/about' }
])

function handleSelect(item) {
  activeItem.value = item.value
}
</script>

<template>
  <DuMenu
    :items="menuItems"
    :activeItem="activeItem"
    direction="vertical"
    @select="handleSelect"
  />
</template>
```

--------------------------------

### DuModal Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-actions.md

A practical example demonstrating how to use the DuModal component in a Vue.js application, including v-model binding and common props.

```APIDOC
## DuModal Usage Example

```vue
<script setup lang="ts">
import { DuModal, DuButton } from 'cornet-ui'
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <DuButton @click="showModal = true" variant="primary">Open Modal</DuButton>

  <DuModal 
    v-model:open="showModal"
    placement="middle"
    closeButton
    closeOnEscape
  >
    <div class="modal-box">
      <h3 class="font-bold text-lg">Confirm Action</h3>
      <p class="py-4">Are you sure you want to continue?</p>
      <div class="modal-action">
        <DuButton @click="showModal = false">Cancel</DuButton>
        <DuButton variant="primary" @click="showModal = false">Confirm</DuButton>
      </div>
    </div>
  </DuModal>
</template>
```
```

--------------------------------

### DuTimeline Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Shows how to implement the DuTimeline component to display a sequence of events. The 'cornet-ui' library must be imported.

```vue
<script setup lang="ts">
import { DuTimeline } from 'cornet-ui'

const events = [
  { title: 'Order Placed', timestamp: '2024-01-15', icon: '📦' },
  { title: 'Processing', timestamp: '2024-01-16', icon: '⚙️' },
  { title: 'Shipped', timestamp: '2024-01-17', icon: '🚚' },
  { title: 'Delivered', timestamp: '2024-01-19', icon: '✓' }
]
</script>

<template>
  <DuTimeline :items="events" direction="vertical" />
</template>
```

--------------------------------

### Example: Scan Source Content

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Shows how to use `scanSourceContent` to find components used in a code string and check for namespace imports.

```typescript
import { scanSourceContent } from 'cornet-ui/plugin-vite'

const code = `
import { DuButton, DuSelect } from 'cornet-ui'
export const MyComponent = {
  components: { DuButton }
}
`

const result = scanSourceContent(code, ['cornet-ui'])
console.log(result.used) // → Set { 'DuButton', 'DuSelect' }
console.log(result.namespaceImport) // → false
```

--------------------------------

### DuCard Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Demonstrates how to use the DuCard component with a title, border, and action buttons. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuCard, DuButton } from 'cornet-ui'
</script>

<template>
  <DuCard title="Product Info" bordered size="md">
    <p>Product description goes here.</p>
    
    <template #actions>
      <DuButton variant="primary" size="sm">View</DuButton>
      <DuButton variant="secondary" size="sm">Edit</DuButton>
    </template>
  </DuCard>
</template>
```

--------------------------------

### Example: Generate Exclusion CSS

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Demonstrates the output of `generateExclusionCss`, showing the count of excluded components and a preview of the generated CSS.

```typescript
const { css, excludedCount } = generateExclusionCss(exports, used)
console.log(excludedCount) // → 22
console.log(css.slice(0, 50)) 
// → "@source not "./components/Actions/du-dropdown..."
```

--------------------------------

### Basic Cornet UI Component Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/INDEX.md

Example of using Cornet UI components like DuButton and DuSelect within a Vue 3 application. Ensure components are imported in the script setup.

```vue
<script setup lang="ts">
import { DuButton, DuSelect } from 'cornet-ui'
</script>

<template>
  <DuButton variant="primary">Click me</DuButton>
  <DuSelect :options="['A', 'B', 'C']" />
</template>
```

--------------------------------

### DuTabs Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-layout-navigation.md

Illustrates the use of DuTabs with different types and variants, including custom content for each tab using slots.

```vue
<script setup lang="ts">
import { DuTabs } from 'cornet-ui'
import { ref } from 'vue'

const activeTab = ref(0)
const tabs = ref([
  { label: 'Overview', value: 'overview' },
  { label: 'Details', value: 'details' },
  { label: 'Reviews', value: 'reviews' }
])
</script>

<template>
  <DuTabs :items="tabs" type="tabs-lifted" variant="primary">
    <template #content-0>
      <div class="p-4">Overview content here</div>
    </template>
    
    <template #content-1>
      <div class="p-4">Details content here</div>
    </template>
    
    <template #content-2>
      <div class="p-4">Reviews content here</div>
    </template>
  </DuTabs>
</template>
```

--------------------------------

### Contribute to Cornet Library

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/CONTRIBUTING.md

Navigate to the library directory, install dependencies, and run linting, type checking, testing, and build commands for the Cornet library.

```bash
cd lib
npm install
npm run lint
npm run type-check
npm test
npm run build
```

--------------------------------

### DuDropdown Component Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-actions.md

Demonstrates basic and controlled DuDropdown configurations. The basic example uses default click behavior, while the controlled example utilizes v-model and hover to manage the open state.

```vue
<script setup lang="ts">
import { DuDropdown, DuButton } from 'cornet-ui'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <!-- Basic dropdown -->
  <DuDropdown placement="end">
    <template #trigger>
      <DuButton variant="primary">Menu</DuButton>
    </template>
    <ul class="dropdown-content menu p-2 shadow bg-base-100 rounded-box">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </DuDropdown>

  <!-- Controlled dropdown with hover -->
  <DuDropdown v-model:open="isOpen" hover placement="start">
    <template #trigger>
      <DuButton>Actions</DuButton>
    </template>
    <ul class="dropdown-content menu">
      <li><a href="/edit">Edit</a></li>
      <li><a href="/delete">Delete</a></li>
    </ul>
  </DuDropdown>
</template>
```

--------------------------------

### DuAvatar Image and Initials Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Demonstrates how to use DuAvatar with an image source or with initials for fallback display. Includes examples for different sizes and colors.

```vue
<script setup lang="ts">
import { DuAvatar } from 'cornet-ui'
</script>

<template>
  <!-- Image avatar -->
  <DuAvatar src="/john.jpg" alt="John Doe" size="lg" />

  <!-- Initials avatar -->
  <DuAvatar initials="JD" color="primary" />

  <!-- Placeholder avatar -->
  <div class="avatar placeholder">
    <DuAvatar size="md" color="accent">
      <span>U</span>
    </DuAvatar>
  </div>
</template>
```

--------------------------------

### DuCheckbox Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-input.md

Demonstrates how to use the DuCheckbox component in a Vue template, including basic usage, colored variants, and the indeterminate state.

```vue
<script setup lang="ts">
import { DuCheckbox } from 'cornet-ui'
import { ref } from 'vue'

const agreed = ref(false)
const newsletter = ref(true)
const selectAll = ref(null) // indeterminate state
</script>

<template>
  <!-- Basic checkbox -->
  <label class="flex items-center gap-2">
    <DuCheckbox v-model="agreed" />
    I agree to terms
  </label>

  <!-- Colored variant -->
  <label class="flex items-center gap-2">
    <DuCheckbox v-model="newsletter" variant="primary" />
    Subscribe to newsletter
  </label>

  <!-- Indeterminate (tri-state) -->
  <label class="flex items-center gap-2">
    <DuCheckbox v-model="selectAll" indeterminate />
    Select all items
  </label>
</template>
```

--------------------------------

### DuToast Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

Shows how to implement a DuToast container to display multiple toast notifications. Requires importing DuToast and DuAlert from 'cornet-ui' and managing toast state with Vue's ref.

```vue
<script setup lang="ts">
import { DuToast, DuAlert } from 'cornet-ui'
import { ref } from 'vue'

const toasts = ref([
  { id: 1, type: 'success', message: 'Saved successfully' },
  { id: 2, type: 'info', message: 'Processing...' }
])

function removeToast(id) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}
</script>

<template>
  <DuToast horizontalPosition="end" verticalPosition="top">
    <DuAlert
      v-for="toast in toasts"
      :key="toast.id"
      :variant="toast.type"
      dismissible
      @dismiss="removeToast(toast.id)"
    >
      {{ toast.message }}
    </DuAlert>
  </DuToast>
</template>
```

--------------------------------

### DuDrawer Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-layout-navigation.md

Demonstrates how to use DuDrawer for a responsive slide-out navigation panel. It includes a navbar with a toggle button and a main content area.

```vue
<script setup lang="ts">
import { DuDrawer, DuButton, DuNavbar } from 'cornet-ui'
import { ref } from 'vue'

const drawerOpen = ref(false)
const menuItems = ref([
  { label: 'Dashboard', href: '/', icon: 'home' },
  { label: 'Settings', href: '/settings', icon: 'gear' },
  { label: 'Profile', href: '/profile', icon: 'user' }
])
</script>

<template>
  <DuDrawer v-model="drawerOpen" position="start" responsive :items="menuItems">
    <div class="flex flex-col h-screen">
      <DuNavbar>
        <template #start>
          <DuButton 
            @click="drawerOpen = !drawerOpen"
            ghost 
            square
          >
            ☰
          </DuButton>
        </template>
        <template #end>
          <span class="font-bold">My App</span>
        </template>
      </DuNavbar>
      
      <main class="flex-1 p-4">
        <!-- Page content -->
      </main>
    </div>
  </DuDrawer>
</template>
```

--------------------------------

### Use DuButton Component

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/00-START-HERE.md

Import and use the DuButton component in your Vue.js application. This example demonstrates a basic primary button.

```vue
<script setup>
import { DuButton } from 'cornet-ui'
</script>
<template>
  <DuButton variant="primary">Hello World</DuButton>
</template>
```

--------------------------------

### Configure NPM for Local Cornet UI Installation

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Specify Cornet UI as a dependency using the file protocol for local development or embedded source mode.

```json
{
  "dependencies": {
    "cornet-ui": "file:lib"
  }
}
```

```json
{
  "dependencies": {
    "cornet-ui": "file:../path/to/daisyui-vue-kit/lib"
  }
}
```

--------------------------------

### Install Cornet UI with Git Submodule

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/INDEX.md

Add Cornet UI as a Git submodule for source mode installation. This method is useful for managing dependencies directly within your repository.

```bash
git submodule add -b lib git@gitlab.limos.fr:hub-isima/daisyui-vue-kit.git lib
```

--------------------------------

### DuFab Component Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-actions.md

Demonstrates how to use the DuFab component with a list of items, a primary variant, and absolute positioning. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuFab } from 'cornet-ui'
</script>

<template>
  <DuFab
    :items="[
      {
        label: 'Edit',
        icon: 'pencil',
        onClick: () => console.log('Edit')
      },
      {
        label: 'Delete',
        icon: 'trash',
        onClick: () => console.log('Delete')
      }
    ]"
    modifier="fab-flower"
    variant="primary"
    absolute
  >
    <span>+
  </DuFab>
</template>
```

--------------------------------

### DuInputField Component Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-input.md

Demonstrates various ways to use the DuInputField component, including basic text input, email input with validation, date picker, password input with size modification, and input with suggestions.

```vue
<script setup lang="ts">
import { DuInputField } from 'cornet-ui'
import { ref } from 'vue'

const email = ref('')
const birthDate = ref('')
</script>

<template>
  <!-- Basic text input -->
  <DuInputField v-model="name" placeholder="Enter name..." />

  <!-- Email with validation -->
  <DuInputField
    v-model="email"
    type="email"
    placeholder="user@example.com"
    required
  />

  <!-- Date picker -->
  <DuInputField v-model="birthDate" type="date" />

  <!-- Password with size -->
  <DuInputField
    v-model="password"
    type="password"
    placeholder="Password"
    size="lg"
  />

  <!-- With suggestions -->
  <DuInputField
    v-model="country"
    placeholder="Country..."
    suggestionName="countries"
    :suggestionList="['USA', 'Canada', 'Mexico']"
  />
</template>
```

--------------------------------

### Configure Vite for Cornet UI

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/README.md

Add the Vue plugin and Tailwind CSS to your Vite configuration. This is the minimal setup required.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})
```

--------------------------------

### Modal Dialog Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Implements a modal dialog using DuModal, with options for placement, close buttons, and closing on escape. Use 'v-model:open' to control visibility.

```vue
<script setup lang="ts">
import { DuModal, DuButton, DuAlert } from 'cornet-ui'
import { ref } from 'vue'

const isOpen = ref(false)
const message = ref('')

function handleConfirm() {
  message.value = 'Action confirmed!'
  isOpen.value = false
}
</script>

<template>
  <div>
    <DuButton @click="isOpen = true" variant="primary">
      Open Dialog
    </DuButton>

    <DuModal 
      v-model:open="isOpen"
      placement="middle"
      closeButton
      closeOnEscape
    >
      <div class="modal-box">
        <h3 class="font-bold text-lg">Confirm Action</h3>
        <p class="py-4">Are you sure you want to continue?</p>
        <div class="modal-action">
          <DuButton @click="isOpen = false">Cancel</DuButton>
          <DuButton @click="handleConfirm" variant="primary">Confirm</DuButton>
        </div>
      </div>
    </DuModal>

    <DuAlert v-if="message" variant="success">
      {{ message }}
    </DuAlert>
  </div>
</template>
```

--------------------------------

### Use Cornet UI Button Component

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/README.md

Import and use the DuButton component from 'cornet-ui'. This example shows a primary button.

```vue
<script setup lang="ts">
import { DuButton } from 'cornet-ui'
</script>

<template>
  <DuButton variant="primary">Hello Cornet</DuButton>
</template>
```

--------------------------------

### DuAlert Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

Demonstrates various configurations of DuAlert, including success alerts with dismiss functionality, error alerts with titles, auto-dismissible info alerts, and warning alerts with centered text. Ensure DuAlert is imported from 'cornet-ui'.

```vue
<script setup lang="ts">
import { DuAlert } from 'cornet-ui'
import { ref } from 'vue'

const showAlert = ref(true)
</script>

<template>
  <!-- Success alert with dismiss -->
  <DuAlert
    v-if="showAlert"
    variant="success"
    dismissible
    icon
    @dismiss="showAlert = false"
  >
    Operation completed successfully!
  </DuAlert>

  <!-- Error alert with title -->
  <DuAlert variant="error" :title="`Error`">
    Something went wrong. Please try again.
  </DuAlert>

  <!-- Info alert with auto-dismiss -->
  <DuAlert variant="info" autoDismissible>
    This message will disappear automatically.
  </DuAlert>

  <!-- Warning with centered text -->
  <DuAlert variant="warning" direction="center" icon>
    Please review before continuing.
  </DuAlert>
</template>
```

--------------------------------

### Install Cornet UI via Git Submodule

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Embed Cornet UI source directly into your project for local customization. Add as a submodule on the 'lib' branch.

```bash
# Add as submodule on the 'lib' branch
git submodule add -b lib git@gitlab.limos.fr:hub-isima/daisyui-vue-kit.git lib

# Or from GitHub mirror
git submodule add -b lib https://github.com/t-lecoublet/Cornet-UI.git lib
```

--------------------------------

### Basic Vite Plugin Setup

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Integrate the Cornet UI Vite plugin into your vite.config.ts. Ensure it is listed before the Vue and Tailwind CSS plugins for correct functionality.

```typescript
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import cornetPlugin from 'cornet-ui/plugin-vite'

export default defineConfig({
  plugins: [
    cornetPlugin(),
    vue(),
    tailwindcss()
  ]
})
```

--------------------------------

### Modal Dialog

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/00-START-HERE.md

Example of a modal dialog component. It can be controlled using a v-model for its open state and includes a close button and customizable content.

```vue
<DuModal v-model:open="isOpen" placement="middle" closeButton>
  <h3>Confirm Action</h3>
  <p>Are you sure?</p>
  <DuButton @click="isOpen = false">Cancel</DuButton>
</DuModal>
```

--------------------------------

### DuModal Component Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-actions.md

Demonstrates how to use the DuModal component in a Vue.js application. It shows how to control the modal's visibility using v-model and configure its behavior with props like closeButton and closeOnEscape.

```vue
<script setup lang="ts">
import { DuModal, DuButton } from 'cornet-ui'
import { ref } from 'vue'

const showModal = ref(false)
</script>

<template>
  <DuButton @click="showModal = true" variant="primary">Open Modal</DuButton>

  <DuModal 
    v-model:open="showModal"
    placement="middle"
    closeButton
    closeOnEscape
  >
    <div class="modal-box">
      <h3 class="font-bold text-lg">Confirm Action</h3>
      <p class="py-4">Are you sure you want to continue?</p>
      <div class="modal-action">
        <DuButton @click="showModal = false">Cancel</DuButton>
        <DuButton variant="primary" @click="showModal = false">Confirm</DuButton>
      </div>
    </div>
  </DuModal>
</template>
```

--------------------------------

### DuBadge Usage Examples

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Shows various ways to use the DuBadge component for displaying counts or status indicators. Supports different sizes and color variants. Ensure 'cornet-ui' is installed and imported.

```vue
<script setup lang="ts">
import { DuBadge } from 'cornet-ui'
</script>

<template>
  <div class="space-y-2">
    <!-- Count badge -->
    <span>
      Messages
      <DuBadge variant="primary">5</DuBadge>
    </span>

    <!-- Status badge -->
    <DuBadge variant="success">Active</DuBadge>
    <DuBadge variant="error">Inactive</DuBadge>

    <!-- Large badge -->
    <DuBadge size="lg" variant="warning">Pending</DuBadge>
  </div>
</template>
```

--------------------------------

### Basic Button Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Demonstrates how to use the basic DuButton component with a click handler.

```vue
<script setup lang="ts">
import { DuButton } from 'cornet-ui'

function handleClick() {
  console.log('Clicked')
}
</script>

<template>
  <DuButton @click="handleClick" variant="primary">
    Click Me
  </DuButton>
</template>
```

--------------------------------

### Run Build Command

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Execute the build command to trigger the Vite plugin. The output indicates the number of components used and excluded from the CSS.

```bash
npm run build
```

--------------------------------

### CSS Entry Point (index.css)

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/overview.md

Defines the CSS entry point for DaisyUI Vue Kit, using Tailwind's @source directive in embedded mode.

```css
@source "./components";
```

--------------------------------

### ToastHorizontalPosition Type

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Specifies the horizontal positioning for a toast notification. Options are 'start', 'center', or 'end'.

```typescript
export type ToastHorizontalPosition = 'start' | 'center' | 'end'
```

--------------------------------

### Core Types: Size

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Represents component sizing options. Maps to DaisyUI size prefixes.

```APIDOC
## Type: Size

### Description
Represents component sizing options. Maps to DaisyUI size prefixes.

### Type Definition
```typescript
type Size = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
export const AvailableSizes: Size[] = ['default', 'xs', 'sm', 'md', 'lg', 'xl']
```

### Usage
- `'default'` — No size modifier applied
- `'xs'` — Extra small
- `'sm'` — Small
- `'md'` — Medium
- `'lg'` — Large
- `'xl'` — Extra large
```

--------------------------------

### CSS Entry Point: NPM Mode

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/composables-and-utilities.md

In NPM mode, the CSS entry point uses a pre-generated class list from the build output. This is typically used in production or when distributing the library.

```css
@source "./dist/cornet-classes.txt";
```

--------------------------------

### Import Cornet UI CSS

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/README.md

Import Tailwind CSS, DaisyUI, and Cornet UI's CSS in your main CSS file. Ensure the order is correct.

```css
/* src/main.css */
@import "tailwindcss";
@plugin "daisyui";
@import "cornet-ui/css";
```

--------------------------------

### ChatPlacement Type

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Defines the alignment options for chat bubbles, specifying whether they appear on the start (left) or end (right) of the chat interface.

```typescript
export type ChatPlacement = 'chat-start' | 'chat-end'
```

--------------------------------

### DuNavbar

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-layout-navigation.md

A flexible top navigation bar component that can be customized with start, center, and end content areas. It supports sticky positioning and borders.

```APIDOC
## DuNavbar

### Description
Top navigation bar with flexible content areas.

### Props
- `sticky` (boolean, optional, default: `false`) - Stick navbar to top on scroll
- `bordered` (boolean, optional, default: `false`) - Show bottom border

### Slots
- `start` — Left-side content
- `center` — Center content
- `end` — Right-side content

### Usage Example
```vue
<script setup lang="ts">
import { DuNavbar, DuButton } from 'cornet-ui'
</script>

<template>
  <DuNavbar sticky bordered>
    <template #start>
      <a href="/" class="btn btn-ghost text-lg">My App</a>
    </template>
    
    <template #center>
      <a href="/" class="link link-hover">Home</a>
      <a href="/about" class="link link-hover">About</a>
      <a href="/docs" class="link link-hover">Docs</a>
    </template>
    
    <template #end>
      <DuButton variant="primary">Login</DuButton>
    </template>
  </DuNavbar>
</template>
```
```

--------------------------------

### Component File Structure

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/INDEX.md

Standard directory structure for DaisyUI Vue components. Includes the main Vue component, TypeScript types, and Storybook stories.

```bash
components/{Category}/du-{name}/
├── du-{name}.vue           # Vue component (SFC)
├── du-{name}.types.ts      # TypeScript types
└── du-{name}.stories.ts    # Storybook stories (reference only)
```

--------------------------------

### Action Components Types: FABMainAction

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Main FAB button configuration.

```APIDOC
## Interface: FABMainAction

### Description
Main FAB button configuration.

### Interface Definition
```typescript
export interface FABMainAction {
  label?: string
  icon?: any
  customClass?: string
  variant?: string
  onClick?: () => void
}
```
```

--------------------------------

### Define FAB Main Action Configuration

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Defines the configuration for the main action button of a Floating Action Button (FAB). Includes properties for labels, icons, custom styling, and click handlers.

```typescript
export interface FABMainAction {
  label?: string
  icon?: any
  customClass?: string
  variant?: string
  onClick?: () => void
}
```

--------------------------------

### Configure srcDirs Option

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Define the application source directories to scan for component usage. The plugin recursively searches for component files within these directories.

```typescript
cornetPlugin({
  srcDirs: ['src', 'app', 'lib']
})
```

--------------------------------

### DuKbd

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Displays keyboard keys with customizable sizes.

```APIDOC
## DuKbd

### Description
Keyboard key display component.

### Props
- `size` (KBDSize) - Optional - Key size. Possible values: 'kbd-xs', 'kbd-sm', 'kbd-md', 'kbd-lg'.

### Usage
```vue
<script setup lang="ts">
import { DuKbd } from 'cornet-ui'
</script>

<template>
  <p>Press <DuKbd size="kbd-sm">Ctrl</DuKbd> + <DuKbd size="kbd-sm">S</DuKbd> to save</p>
</template>
```
```

--------------------------------

### Register Cornet UI Components with Named Imports

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Import specific Cornet UI components using named imports in your Vue script setup for explicit usage.

```vue
<script setup lang="ts">
import { DuButton } from 'cornet-ui'
</script>

<template>
  <DuButton variant="primary">Hello</DuButton>
</template>
```

--------------------------------

### LoadingProps

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Props for configuring the Loading component.

```APIDOC
## LoadingProps

### Description
Props for configuring the Loading component.

### Interface
```typescript
export interface LoadingProps {
  animation?: LoadingAnimation
  size?: Size
  variant?: Variant
}
```
```

--------------------------------

### DuRating Component Usage Example

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-input.md

Demonstrates how to use the DuRating component in a Vue.js application, including v-model binding and common props like count, size, shape, and clearable.

```vue
<script setup lang="ts">
import { DuRating } from 'cornet-ui'
import { ref } from 'vue'

const rating = ref(0)
</script>

<template>
  <label class="flex flex-col gap-2">
    <span>Rate this product: {{ rating }}/5</span>
    <DuRating 
      v-model="rating"
      :count="5"
      size="lg"
      shape="star"
      clearable
    />
  </label>
</template>
```

--------------------------------

### Configure Vite for Auto-importing Cornet UI Components

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/quick-start.md

Enable auto-importing of Cornet UI components by configuring the Vue plugin in `vite.config.ts` to recognize custom element tags starting with 'Du'.

```typescript
// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('Du'),
        },
      },
    }),
  ],
})
```

--------------------------------

### DuLoading Component Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

Demonstrates various animation styles and sizes for the DuLoading component. Ensure 'cornet-ui' is imported.

```vue
<script setup lang="ts">
import { DuLoading } from 'cornet-ui'
</script>

<template>
  <!-- Spinner (default) -->
  <DuLoading size="lg" variant="primary" />

  <!-- Dots animation -->
  <DuLoading animation="dots" size="md" />

  <!-- Ring animation -->
  <DuLoading animation="ring" variant="success" />

  <!-- Ball animation -->
  <DuLoading animation="ball" size="sm" />
</template>
```

--------------------------------

### DuTable with Data and Styling

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-data-display.md

Shows how to implement a DuTable component with defined columns and rows, and apply styling such as striping and hover effects. Ensure 'cornet-ui' is imported.

```vue
<script setup lang="ts">
import { DuTable } from 'cornet-ui'

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  { key: 'status', label: 'Status' }
]

const rows = [
  { name: 'John Doe', email: 'john@example.com', status: 'Active' },
  { name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }
]
</script>

<template>
  <DuTable :columns="columns" :rows="rows" striped hover />
</template>
```

--------------------------------

### ProgressProps

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Props for configuring the Progress Bar component.

```APIDOC
## ProgressProps

### Description
Props for configuring the Progress Bar component.

### Interface
```typescript
export interface ProgressProps {
  value?: number
  max?: number
  variant?: Variant
  size?: Size
}
```
```

--------------------------------

### Vite Plugin Configuration with Custom Alias

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Configure the Vite plugin to recognize a custom alias for importing Cornet UI components. This is useful when Cornet UI is not installed directly via npm but is linked via a relative path.

```typescript
export default defineConfig({
  resolve: {
    alias: {
      '@ui': fileURLToPath(new URL('./lib', import.meta.url))
    }
  },
  plugins: [
    cornetPlugin({
      packageNames: ['@ui']
    }),
    vue(),
    tailwindcss()
  ]
})
```

--------------------------------

### Vite Plugin for CSS Tree-Shaking

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/00-START-HERE.md

Integrate the Cornet UI Vite plugin to automatically detect and include only the CSS for components you use, resulting in smaller CSS bundles. This setup requires importing the plugin and adding it to your Vite configuration.

```typescript
import cornetPlugin from 'cornet-ui/plugin-vite'

export default {
  plugins: [cornetPlugin(), vue(), tailwindcss()]
}
```

--------------------------------

### expandWithInternalDependencies

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/vite-plugin.md

Expands a set of directly used components to include all their internal dependencies. This is useful for ensuring all necessary components are included in the build.

```APIDOC
## expandWithInternalDependencies

### Description
Expands a set of used components with their internal dependencies.

### Parameters
- `used` (Set<string>) - Set of directly-used component names
- `componentPaths` (Map<string, string>) - Map of component names to file paths (from `parseLibraryExports`)
- `libRoot` (string) - Root directory of Cornet library

### Returns
Set<string> - Expanded Set including all dependencies

### Example
```typescript
// If DuFab internally uses DuButton, and user only imports DuFab:
const used = new Set(['DuFab'])
const expanded = expandWithInternalDependencies(used, exports, './node_modules/cornet-ui')
// expanded now includes both 'DuFab' and 'DuButton'
```
```

--------------------------------

### Map Size Prop to DaisyUI Class

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/composables-and-utilities.md

Use `useSizeMapping` to convert a size prop into a DaisyUI CSS class modifier. Pass the component's props and a class prefix (e.g., 'btn'). Example shows mapping 'sm' to 'btn-sm'.

```typescript
import { useSizeMapping, type Size } from 'cornet-ui'
import { computed } from 'vue'

const props = defineProps<{ size: Size }>()

// For buttons
const { sizeClass } = useSizeMapping(props, 'btn')
// props.size = 'sm' → sizeClass.value = 'btn-sm'

// For badges
const { sizeClass: badgeSize } = useSizeMapping(props, 'badge')
// props.size = 'lg' → badgeSize.value = 'badge-lg'

// In template
const classes = computed(() => ['btn', sizeClass.value].filter(Boolean).join(' '))
```

--------------------------------

### ToastProps

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/types.md

Props for configuring the Toast container.

```APIDOC
## ToastProps

### Description
Props for configuring the Toast container.

### Interface
```typescript
export interface ToastProps {
  horizontalPosition?: ToastHorizontalPosition
  verticalPosition?: ToastVerticalPosition
}
```
```

--------------------------------

### Add Cornet UI as a Local File Dependency

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/README.md

Use this configuration in your package.json when integrating Cornet UI via embedded/source mode using a local file path. This requires a compatible bundler setup like Vite with the Vue plugin.

```json
{
  "dependencies": {
    "cornet-ui": "file:lib"
  }
}
```

--------------------------------

### DuSkeleton Component Usage

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

Shows how to use the DuSkeleton component for placeholder content, including different styling and animation options. Ensure 'cornet-ui' is imported.

```vue
<script setup lang="ts">
import { DuSkeleton } from 'cornet-ui'
</script>

<template>
  <!-- Skeleton for card content -->
  <div class="space-y-4">
    <DuSkeleton class="h-32 w-full rounded-lg" />
    <DuSkeleton class="h-4 w-3/4" />
    <DuSkeleton class="h-4 w-1/2" />
  </div>

  <!-- Skeleton for avatar -->
  <div class="flex gap-4">
    <DuSkeleton class="w-16 h-16 rounded-full" />
    <div class="space-y-2 flex-1">
      <DuSkeleton class="h-4 w-2/3" />
      <DuSkeleton class="h-3 w-1/2" />
    </div>
  </div>

  <!-- Static skeleton (no animation) -->
  <DuSkeleton class="h-20 w-full" :animate="false" />
</template>
```

--------------------------------

### Map Variant Prop to DaisyUI Class

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/composables-and-utilities.md

Use `useVariantMapping` to convert a variant prop into a DaisyUI semantic color CSS class modifier. Pass the component's props and a class prefix (e.g., 'btn'). Example shows mapping 'primary' to 'btn-primary'.

```typescript
import { useVariantMapping, type Variant } from 'cornet-ui'
import { computed } from 'vue'

const props = defineProps<{ variant: Variant }>()

// For buttons
const { colorClass } = useVariantMapping(props, 'btn')
// props.variant = 'primary' → colorClass.value = 'btn-primary'

// For alerts
const { colorClass: alertColor } = useVariantMapping(props, 'alert')
// props.variant = 'error' → alertColor.value = 'alert-error'

// In template
const classes = computed(() => ['btn', colorClass.value].filter(Boolean).join(' '))
```

--------------------------------

### DuSkeleton

Source: https://github.com/hub-isima/daisyui-vue-kit/blob/master/_autodocs/api-reference/components-feedback.md

A placeholder skeleton component used to indicate loading states, allowing for CSS-based shaping and optional pulse animation.

```APIDOC
## DuSkeleton

### Description
Placeholder skeleton for loading states. Use CSS classes to shape.

### Props
#### `variant` (Variant) - Optional - Default: `'default'`
Background color variant.

#### `animate` (boolean) - Optional - Default: `true`
Enable pulse animation.

### Usage Example
```vue
<script setup lang="ts">
import { DuSkeleton } from 'cornet-ui'
</script>

<template>
  <div class="space-y-4">
    <DuSkeleton class="h-32 w-full rounded-lg" />
    <DuSkeleton class="h-4 w-3/4" />
    <DuSkeleton class="h-4 w-1/2" />
  </div>

  <div class="flex gap-4">
    <DuSkeleton class="w-16 h-16 rounded-full" />
    <div class="space-y-2 flex-1">
      <DuSkeleton class="h-4 w-2/3" />
      <DuSkeleton class="h-3 w-1/2" />
    </div>
  </div>

  <DuSkeleton class="h-20 w-full" :animate="false" />
</template>
```
```