cornet-ui 0.1.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Theo Lecoublet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,95 @@
+# Cornet
+
+> Vue 3 component library built on [DaisyUI 5](https://daisyui.com/) and [Tailwind CSS 4](https://tailwindcss.com/).
+
+**Cornet** (formerly `daisyui-vue-kit`) provides 55+ typed components (`DuButton`, `DuSelect`, `DuModal`, …), composables, and a Vite plugin. It is designed to work both as a **regular package** and as **embedded source** copied directly into your project — readable, modifiable, no build step required.
+
+📖 Documentation & live previews: **[cornet-ui.com](https://cornet-ui.com)**
+
+## Installation
+
+Cornet is distributed in several ways — pick the one that fits your workflow:
+
+| Mode | How | Best for |
+|------|-----|----------|
+| **Git submodule (embedded)** | `git submodule add -b lib git@gitlab.limos.fr:hub-isima/daisyui-vue-kit.git lib` | Full control, local modifications |
+| **Full clone** | `git clone --recurse-submodules git@gitlab.limos.fr:hub-isima/daisyui-vue-kit.git` | Contributing, exploring |
+| **GitHub mirror** | [t-lecoublet/Cornet](https://github.com/t-lecoublet/Cornet) | GitHub-based workflows |
+| **npm registry** | _coming soon_ (`cornet-ui`) | Classic dependency management |
+
+> **Note:** the source distribution ships raw `.ts`/`.vue` files (ESM only). Your project needs Vite (or another bundler) with `@vitejs/plugin-vue` and TypeScript.
+
+After adding the submodule, declare the local dependency:
+
+```json
+{
+  "dependencies": {
+    "cornet-ui": "file:lib"
+  }
+}
+```
+
+## Quick start
+
+```ts
+// vite.config.ts
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+})
+```
+
+```css
+/* main.css */
+@import "tailwindcss";
+@plugin "daisyui";
+@import "cornet-ui/css";
+```
+
+```vue
+<script setup lang="ts">
+import { DuButton } from 'cornet-ui'
+</script>
+
+<template>
+  <DuButton variant="primary">Hello Cornet</DuButton>
+</template>
+```
+
+Types are available from the main entry or from `cornet-ui/types`:
+
+```ts
+import type { MenuItem, SELECTProps } from 'cornet-ui/types'
+```
+
+## Peer dependencies
+
+- `vue` >= 3.5
+- `daisyui` >= 5.5
+- `tailwindcss` >= 4.0
+- `vite` >= 6.0 (optional — required for the Vite plugin and source mode)
+
+## Project structure
+
+```
+lib/
+├── index.ts          # All components & composables
+├── index.css         # CSS entry
+├── plugin-vite.ts    # Optional Vite plugin (unused-component CSS exclusion)
+├── types/index.ts    # All TypeScript types (generated)
+├── composables/      # useSizeMapping, useVariantMapping
+└── components/       # Actions, DataDisplay, DataInput, Feedback, Layout, Navigation
+```
+
+Every component follows the same triplet: `du-{name}.vue` + `du-{name}.types.ts` + `du-{name}.stories.ts`.
+
+## Repositories
+
+- **Source of truth:** [GitLab LIMOS](https://gitlab.limos.fr/hub-isima/daisyui-vue-kit) (CNRS/LIMOS)
+- **Mirror:** [GitHub — t-lecoublet/Cornet](https://github.com/t-lecoublet/Cornet)
+
+## License
+
+[MIT](./LICENSE)

package/components/Actions/du-button/du-button.types.ts

@@ -0,0 +1,14 @@
+export const BUTTON_SIZES = ['btn-xs', 'btn-sm', 'btn-md', 'btn-lg', 'btn-xl'] as const
+export const BUTTON_COLORS = [
+  'btn-primary',
+  'btn-secondary',
+  'btn-accent',
+  'btn-neutral',
+  'btn-info',
+  'btn-success',
+  'btn-warning',
+  'btn-error',
+] as const
+
+export type BUTTONSize = (typeof BUTTON_SIZES)[number]
+export type BUTTONColor = (typeof BUTTON_COLORS)[number]

package/components/Actions/du-button/du-button.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+import { useVariantMapping, type Variant } from '../../../composables/useVariantProps'
+import { computed, inject } from 'vue'
+
+type ElementType = 'button' | 'a' | 'input' | 'div' | 'RouterLink' | 'NuxtLink' | string
+
+const props = withDefaults(
+  defineProps<{
+    customClass?: string
+    size?: Size
+    variant?: Variant
+    outline?: boolean
+    soft?: boolean
+    dash?: boolean
+    active?: boolean
+    ghost?: boolean
+    link?: boolean
+    wide?: boolean
+    disabled?: boolean
+    square?: boolean
+    circle?: boolean
+    block?: boolean
+    as?: ElementType
+    type?: string
+    href?: string
+    value?: string
+    inputType?: 'button' | 'submit' | 'reset' | 'radio' | 'checkbox'
+    label?: string
+  }>(),
+  {
+    customClass: undefined,
+    size: 'default',
+    variant: 'default',
+    outline: false,
+    soft: false,
+    dash: false,
+    active: false,
+    ghost: false,
+    link: false,
+    wide: false,
+    disabled: undefined,
+    square: false,
+    circle: false,
+    block: false,
+    type: undefined,
+    href: undefined,
+    value: undefined,
+    inputType: undefined,
+    label: undefined,
+  },
+)
+
+const isInDropdownTrigger = inject('isDropdownTrigger', false)
+const inJoin = inject("isInJoin", false)
+const filterName = inject('filterName', undefined)
+
+const { sizeClass } = useSizeMapping(props, 'btn')
+const { colorClass } = useVariantMapping(props, 'btn')
+const softClass = computed(() => {
+  return props.soft ? 'btn-soft' : ''
+})
+const outlineClass = computed(() => {
+  return props.outline ? 'btn-outline' : ''
+})
+const dashClass = computed(() => {
+  return props.dash ? 'btn-dash' : ''
+})
+const activeClass = computed(() => {
+  return props.active ? 'btn-active' : ''
+})
+const ghostClass = computed(() => {
+  return props.ghost ? 'btn-ghost' : ''
+})
+const linkClass = computed(() => {
+  return props.link ? 'btn-link' : ''
+})
+const wideClass = computed(() => {
+  return props.wide ? 'btn-wide' : ''
+})
+const squareClass = computed(() => {
+  return props.square ? 'btn-square' : ''
+})
+const circleClass = computed(() => {
+  return props.circle ? 'btn-circle' : ''
+})
+const blockClass = computed(() => {
+  return props.block ? 'btn-block' : ''
+})
+
+const elementTag = computed((): ElementType => {
+  if (props.as) return props.as
+  if (isInDropdownTrigger) return 'div'
+  if (filterName) return 'input'
+
+  return 'button'
+})
+
+const isInputElement = computed(() => elementTag.value === 'input')
+const isAnchorElement = computed(() => elementTag.value === 'a')
+
+const buttonAttributes = computed(() => {
+  const attrs: Record<string, any> = {}
+
+  if (filterName) {
+    attrs.name = filterName
+    attrs.type = 'radio'
+  } else if (isInputElement.value) {
+    attrs.type = props.inputType || 'button'
+    attrs.value = props.value || ''
+  } else if (isAnchorElement.value) {
+    attrs.href = props.href || '#'
+    attrs.role = 'button'
+  } else if (isInDropdownTrigger) {
+    attrs.tabindex = '0'
+    attrs.role = 'button'
+  } else {
+    attrs.type = props.type || 'button'
+  }
+  return attrs
+})
+</script>
+<template>
+  <component
+    :is="elementTag"
+    v-bind="buttonAttributes"
+    :class="[
+      'btn',
+      customClass,
+      sizeClass,
+      colorClass,
+      softClass,
+      outlineClass,
+      dashClass,
+      activeClass,
+      ghostClass,
+      linkClass,
+      wideClass,
+      squareClass,
+      circleClass,
+      blockClass,
+      inJoin && 'join-item',
+    ]"
+    :aria-label="props.label"
+    :disabled="props.disabled"
+  >
+    <slot v-if="!isInputElement"></slot>
+  </component>
+</template>

package/components/Actions/du-dropdown/du-dropdown.types.ts

@@ -0,0 +1,15 @@
+export const DROPDOWN_PLACEMENTS = [
+  'dropdown-start',
+  'dropdown-center',
+  'dropdown-end',
+  'dropdown-top',
+  'dropdown-bottom',
+  'dropdown-left',
+  'dropdown-right',
+] as const
+
+export type DROPDOWNPlacement = (typeof DROPDOWN_PLACEMENTS)[number] 
+
+
+export type PlacementValue = 'start' | 'center' | 'end' | 'top' | 'bottom' | 'left' | 'right'
+export type PlacementInput = PlacementValue | string | PlacementValue[] | Partial<Record<PlacementValue, boolean>>

package/components/Actions/du-dropdown/du-dropdown.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { type PlacementInput, type PlacementValue } from './du-dropdown.types'
+
+const props = withDefaults(
+  defineProps<{
+    hover?: boolean
+    open?: boolean
+    placement?: PlacementInput
+  }>(),
+  {
+    hover: false,
+    open: false,
+    placement: 'bottom',
+  },
+)
+
+provide('isDropdownTrigger', true)
+
+const placementToClass = (value: PlacementValue): string => {
+  return `dropdown-${value}`
+}
+
+const getPlacementClasses = (input: PlacementInput): string[] => {
+  if (!input) return []
+
+  if (typeof input === 'string') {
+    if (input.includes(',')) {
+      return input.split(',').map(s => s.trim()).filter(Boolean).map(s => placementToClass(s as PlacementValue))
+    }
+    return [placementToClass(input as PlacementValue)]
+  }
+
+  if (Array.isArray(input)) {
+    return input.map(placementToClass)
+  }
+
+  if (typeof input === 'object') {
+    const keys = Object.keys(input)
+    if (keys.every(key => key in { start: 1, center: 1, end: 1, top: 1, bottom: 1, left: 1, right: 1 })) {
+      return keys.map(key => placementToClass(key as PlacementValue))
+    }
+    return Object.entries(input)
+      .filter(([, enabled]) => enabled)
+      .map(([key]) => placementToClass(key as PlacementValue))
+  }
+
+  return []
+}
+
+const placementClass = computed(() => {
+  const classes = getPlacementClasses(props.placement)
+  return classes.join(' ')
+})
+
+const hoverClass = computed(() => {
+  return props.hover ? 'dropdown-hover' : ''
+})
+
+const openClass = computed(() => {
+  return props.open ? 'dropdown-open' : ''
+})
+</script>
+
+<template>
+  <div :class="['dropdown', placementClass, hoverClass, openClass]">
+    <!-- Bind triggerProps on your trigger element (v-bind="triggerProps")
+         to get the expected role/tabindex/aria attributes for free. -->
+    <slot name="trigger" :trigger-props="{ role: 'button', tabindex: 0, 'aria-haspopup': 'true' }"></slot>
+    <div class="dropdown-content" tabindex="0">
+      <slot name="content"></slot>
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/components/Actions/du-fab/du-fab.types.ts

@@ -0,0 +1,28 @@
+export const FAB_MODIFIERS = ['fab-flower'] as const
+
+export type FABModifier = (typeof FAB_MODIFIERS)[number]
+
+export interface FABItem {
+  label?: string
+  icon?: any
+  customClass?: string
+  onClick?: () => void
+  tooltip?: string
+  tooltipPosition?: 'left' | 'top' | 'right' | 'bottom'
+  [key: string]: any
+}
+
+export interface FABMainAction {
+  label?: string
+  icon?: any
+  customClass?: string
+  variant?: string
+  onClick?: () => void
+}
+
+export interface FABCloseButton {
+  label?: string
+  icon?: string
+  customClass?: string
+  variant?: string
+}

package/components/Actions/du-fab/du-fab.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type Size, useSizeMapping } from '../../../composables/useSizeProps'
+import { type Variant, useVariantMapping } from '../../../composables/useVariantProps'
+import { type FABItem, type FABMainAction, type FABCloseButton } from './du-fab.types'
+import DuButton from '../du-button/du-button.vue'
+import DuTooltip from '../../Feedback/du-tooltip/du-tooltip.vue'
+
+const props = withDefaults(
+  defineProps<{
+    items?: FABItem[]
+    modifier?: 'fab-flower'
+    customClass?: string
+    size?: Size
+    variant?: Variant
+    circle?: boolean
+    mainAction?: FABMainAction
+    closeButton?: FABCloseButton
+    absolute?: boolean
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  }>(),
+  {
+    items: undefined,
+    modifier: undefined,
+    customClass: '',
+    size: 'lg',
+    variant: 'primary',
+    circle: true,
+    mainAction: undefined,
+    closeButton: undefined,
+    absolute: true,
+    position: 'bottom-right',
+  },
+)
+
+const { sizeClass } = useSizeMapping(props, 'btn')
+const { colorClass } = useVariantMapping(props, 'btn')
+
+const modifierClass = computed(() => {
+  return props.modifier ? props.modifier : ''
+})
+
+const positionClass = computed(() => {
+  if (!props.absolute) return ''
+  
+  switch (props.position) {
+    case 'bottom-right':
+      return 'absolute bottom-4 right-4'
+    case 'bottom-left':
+      return 'absolute bottom-4 left-4'
+    case 'top-right':
+      return 'absolute top-4 right-4'
+    case 'top-left':
+      return 'absolute top-4 left-4'
+    default:
+      return 'absolute bottom-4 right-4'
+  }
+})
+
+const fabClasses = computed(() => {
+  return [
+    'fab',
+    modifierClass.value,
+    positionClass.value,
+    'z-50',
+    props.customClass,
+  ]
+})
+
+const getTooltipPosition = (position?: 'left' | 'top' | 'right' | 'bottom') => {
+  return position || 'left'
+}
+</script>
+
+<template>
+  <!-- Dynamic items mode -->
+  <template v-if="items || mainAction">
+    <div :class="fabClasses">
+      <!-- Main trigger button -->
+      <div
+        tabindex="0"
+        role="button"
+        :class="[
+          'btn',
+          sizeClass,
+          colorClass,
+          props.circle ? 'btn-circle' : '',
+        ]"
+      >
+        <slot name="trigger">
+          <slot name="trigger-icon">F</slot>
+        </slot>
+      </div>
+
+      <!-- Close button (optional) -->
+      <div
+        v-if="closeButton"
+        class="fab-close"
+      >
+        <slot name="close-button" :closeButton="closeButton">
+          {{ closeButton.label || 'Close' }}
+          <span
+            :class="[
+              'btn',
+              sizeClass,
+              'btn-circle',
+              closeButton.variant ? `btn-${closeButton.variant}` : 'btn-error',
+              closeButton.customClass,
+            ]"
+          >
+            <slot name="close-icon">{{ closeButton.icon || '✕' }}</slot>
+          </span>
+        </slot>
+      </div>
+
+      <!-- Main action button (optional) -->
+      <DuButton
+        v-if="mainAction"
+        as="button"
+        customClass="fab-main-action"
+        :size="props.size"
+        :variant="(mainAction.variant as Variant) || 'default'"
+        circle
+        @click="mainAction.onClick"
+      >
+        <slot name="main-action" :mainAction="mainAction">
+          <slot name="main-action-icon" :mainAction="mainAction">
+            <component
+              class="w-6 h-6"
+              :is="mainAction.icon"
+              v-if="typeof mainAction.icon === 'object' || typeof mainAction.icon === 'function'"
+            />
+            <img
+              v-else-if="typeof mainAction.icon === 'string' && mainAction.icon.startsWith('http')"
+              :src="mainAction.icon"
+              :alt="mainAction.label"
+              class="w-6 h-6"
+            />
+            <div
+              v-else-if="typeof mainAction.icon === 'string'"
+              v-html="mainAction.icon"
+            ></div>
+            <template v-else>
+              {{ mainAction.label || 'M' }}
+            </template>
+          </slot>
+        </slot>
+      </DuButton>
+
+      <!-- Speed dial buttons -->
+      <template v-for="(item, index) in items" :key="index">
+        <!-- With tooltip wrapper -->
+        <DuTooltip
+          v-if="item.tooltip"
+          :dataTip="item.tooltip"
+          :position="getTooltipPosition(item.tooltipPosition)"
+        >
+          <DuButton
+            as="button"
+            :size="props.size"
+            :circle="props.circle"
+            :customClass="item.customClass"
+            @click="item.onClick"
+          >
+            <slot name="item" :item="item" :index="index">
+              <slot :name="`item-${index}`" :item="item" :index="index">
+                <component
+                  class="w-6 h-6"
+                  :is="item.icon"
+                  v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                />
+                <img
+                  v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                  :src="item.icon"
+                  :alt="item.label"
+                  class="w-6 h-6"
+                />
+                <div
+                  v-else-if="typeof item.icon === 'string'"
+                  v-html="item.icon"
+                ></div>
+                <template v-else>
+                  {{ item.label || index + 1 }}
+                </template>
+              </slot>
+            </slot>
+          </DuButton>
+        </DuTooltip>
+
+        <!-- Without tooltip wrapper -->
+        <template v-else>
+          <!-- With label wrapper -->
+          <div v-if="item.label && !props.modifier">
+            {{ item.label }}
+            <DuButton
+              as="button"
+              :size="props.size"
+              :circle="props.circle"
+              :customClass="item.customClass"
+              @click="item.onClick"
+            >
+              <slot name="item" :item="item" :index="index">
+                <slot :name="`item-${index}`" :item="item" :index="index">
+                  <component
+                    class="w-6 h-6"
+                    :is="item.icon"
+                    v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                  />
+                  <img
+                    v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                    :src="item.icon"
+                    :alt="item.label"
+                    class="w-6 h-6"
+                  />
+                  <div
+                    v-else-if="typeof item.icon === 'string'"
+                    v-html="item.icon"
+                  ></div>
+                  <template v-else>
+                    {{ index + 1 }}
+                  </template>
+                </slot>
+              </slot>
+            </DuButton>
+          </div>
+
+          <!-- Without label wrapper -->
+          <DuButton
+            v-else
+            as="button"
+            :size="props.size"
+            :circle="props.circle"
+            :customClass="item.customClass"
+            @click="item.onClick"
+          >
+            <slot name="item" :item="item" :index="index">
+              <slot :name="`item-${index}`" :item="item" :index="index">
+                <component
+                  class="w-6 h-6"
+                  :is="item.icon"
+                  v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                />
+                <img
+                  v-else-if="typeof item.icon === 'string' && item.icon.startsWith('http')"
+                  :src="item.icon"
+                  :alt="item.label"
+                  class="w-6 h-6"
+                />
+                <div
+                  v-else-if="typeof item.icon === 'string'"
+                  v-html="item.icon"
+                ></div>
+                <template v-else>
+                  {{ item.label || index + 1 }}
+                </template>
+              </slot>
+            </slot>
+          </DuButton>
+        </template>
+      </template>
+    </div>
+  </template>
+
+  <!-- Manual mode -->
+  <template v-else>
+    <div :class="fabClasses">
+      <slot></slot>
+    </div>
+  </template>
+</template>

package/components/Actions/du-modal/du-modal.types.ts

@@ -0,0 +1,10 @@
+export const MODAL_PLACEMENTS = [
+  'modal-top',
+  'modal-middle',
+  'modal-bottom',
+  'modal-start',
+  'modal-end',
+  'modal-bottom sm:modal-middle'
+] as const
+
+export type MODALPlacement = (typeof MODAL_PLACEMENTS)[number]