cornet-ui 0.1.0-beta.1

package/components/DataInput/du-select/du-select.types.ts

@@ -0,0 +1,31 @@
+import { type Size } from "../../../composables/useSizeProps"
+import { type Variant } from "../../../composables/useVariantProps"
+
+export const SELECT_VARIANTS = ['default', 'select-primary', 'select-secondary', 'select-accent', 'select-info', 'select-success', 'select-warning', 'select-error'] as const
+export const SELECT_SIZES = ['default', 'select-xs', 'select-sm', 'select-md', 'select-lg', 'select-xl'] as const
+
+export type SELECTVariant = (typeof SELECT_VARIANTS)[number]
+export type SELECTSize = (typeof SELECT_SIZES)[number]
+
+export interface SELECTProps {
+  ghost?: boolean
+  variant?: Variant
+  size?: Size
+  disabled?: boolean
+  multiple?: boolean
+  modelValue?: any
+  placeholder?: string
+  search?: boolean
+  searchPlaceholder?: string
+  searchNoResultsText?: string
+  options?: any[]
+  searchable?: boolean
+  searchableInside?: boolean
+  checkboxes?: boolean
+  closeOnSelect?: boolean
+  trackBy?: string
+  labelBy?: string
+  returnObject?: boolean
+  clearable?: boolean
+  removeItemLabel?: string
+}

package/components/DataInput/du-select/du-select.vue

@@ -0,0 +1,384 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject } from 'vue'
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import type { SELECTProps } from './du-select.types'
+
+const props = withDefaults(defineProps<SELECTProps>(), {
+    options: () => [],
+    multiple: false,
+    placeholder: 'Select...',
+    searchable: false,
+    searchableInside: false,
+    searchPlaceholder: 'Search...',
+    searchNoResultsText: 'No options found',
+    checkboxes: false,
+    closeOnSelect: true,
+    trackBy: 'id',
+    labelBy: 'name',
+    returnObject: false,
+    clearable: false,
+    ghost: false,
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    search: false,
+    removeItemLabel: 'Remove',
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: any]
+    select: [option: any]
+    remove: [option: any]
+    open: []
+    close: []
+}>()
+
+const { colorClass } = useVariantMapping(props, "select")
+const { sizeClass: inputSizeClass } = useSizeMapping(props, "input")
+const { sizeClass: subMenuSizeClass } = useSizeMapping(props, "menu")
+const ghostClass = computed(() => (props.ghost ? "select-ghost" : ""))
+
+const isInLabel = inject("isInLabel", false);
+
+const root = ref<HTMLElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null)
+const searchInputInside = ref<HTMLInputElement | null>(null)
+const open = ref(false)
+const query = ref('')
+const highlightedIndex = ref(-1)
+const listId = `du-select-list-${Math.random().toString(36).slice(2, 9)}`
+
+function optionValue(opt: any): any {
+    if (opt && typeof opt === 'object') return opt[props.trackBy] ?? opt.value ?? opt.id ?? opt
+    return opt
+}
+function optionLabel(opt: any): string {
+    if (opt && typeof opt === 'object') return opt[props.labelBy] ?? opt.label ?? opt.name ?? String(opt)
+    return String(opt)
+}
+function labelFromOption(opt: any): string { return optionLabel(opt) }
+function labelFromValue(val: any): string {
+    const o = props.options.find(o => optionValue(o) === val)
+    return o ? optionLabel(o) : String(val)
+}
+function keyForOption(opt: any, i: number): string {
+    const v = optionValue(opt)
+    return `${String(v)}__${i}`
+}
+function valKey(val: any, idx: number): string { return `${String(val)}__${idx}` }
+
+const selectedValues = ref<any[]>([])
+const selectedSingle = ref<any>(null)
+
+function syncFromModel() {
+    if (props.multiple) {
+        if (Array.isArray(props.modelValue)) {
+            selectedValues.value = props.modelValue.map(v => (v && typeof v === 'object' ? optionValue(v) : v))
+        } else {
+            selectedValues.value = []
+        }
+    } else {
+        if (props.modelValue && typeof props.modelValue === 'object') {
+            selectedSingle.value = optionValue(props.modelValue)
+        } else {
+            selectedSingle.value = props.modelValue
+        }
+    }
+}
+
+watch(() => props.modelValue, () => syncFromModel(), { immediate: true })
+
+const filteredOptions = computed(() => {
+    const q = query.value?.toString().trim().toLowerCase()
+    if (!q) return props.options
+    return props.options.filter(o => optionLabel(o).toString().toLowerCase().includes(q))
+})
+
+function isSelected(opt: any): boolean {
+    const v = optionValue(opt)
+    if (props.multiple) return selectedValues.value.includes(v)
+    return selectedSingle.value === v
+}
+
+function optionFromValue(v: any): any {
+    return props.options.find(o => optionValue(o) === v) ?? v
+}
+
+function emitModelForMultiple() {
+    const out = props.returnObject ? selectedValues.value.map(v => optionFromValue(v)) : [...selectedValues.value]
+    emit('update:modelValue', out)
+}
+function emitModelForSingle(val: any) {
+    const out = props.returnObject ? optionFromValue(val) : val
+    emit('update:modelValue', out)
+}
+
+function toggleOption(opt: any) {
+    const v = optionValue(opt)
+    if (props.multiple) {
+        const idx = selectedValues.value.indexOf(v)
+        if (idx === -1) {
+            selectedValues.value.push(v)
+            emit('select', optionFromValue(v))
+        } else {
+            selectedValues.value.splice(idx, 1)
+            emit('remove', optionFromValue(v))
+        }
+        emitModelForMultiple()
+    } else {
+        if (props.clearable && selectedSingle.value === v) {
+            selectedSingle.value = null
+            emit('update:modelValue', null)
+            close()
+        } else {
+            selectedSingle.value = v
+            emit('select', optionFromValue(v))
+            emitModelForSingle(v)
+            if (props.closeOnSelect) close()
+        }
+    }
+}
+
+function handleOptionClick(opt: any) {
+    toggleOption(opt)
+}
+
+function removeValue(val: any) {
+    if (!props.multiple) return
+    const idx = selectedValues.value.indexOf(val)
+    if (idx > -1) {
+        selectedValues.value.splice(idx, 1)
+        emit('remove', optionFromValue(val))
+        emitModelForMultiple()
+    }
+}
+
+function openDropdown() {
+    open.value = true
+    emit('open')
+    highlightedIndex.value = 0
+    nextTick(() => {
+        if (props.searchable && (props.searchableInside || props.multiple)) {
+            // focus internal search if present
+            if (searchInput.value) searchInput.value.focus()
+            if (searchInputInside.value) searchInputInside.value.focus()
+        }
+    })
+}
+function close() {
+    open.value = false
+    query.value = ''
+    highlightedIndex.value = -1
+    emit('close')
+}
+function toggle() {
+    if (open.value) close()
+    else openDropdown()
+}
+function focusToggle() {
+    if (!open.value) openDropdown()
+    else {
+        // focus search input if there
+        nextTick(() => {
+            if (searchInput.value) searchInput.value.focus()
+            if (searchInputInside.value) searchInputInside.value.focus()
+        })
+    }
+}
+
+function onQuery() {
+    highlightedIndex.value = 0
+}
+
+function onKeydown(e: KeyboardEvent) {
+    if (!open.value && ['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+        openDropdown()
+        e.preventDefault()
+        return
+    }
+    const len = filteredOptions.value.length
+    if (e.key === 'ArrowDown') {
+        highlightedIndex.value = (highlightedIndex.value + 1 + len) % len
+        scrollHighlightedIntoView()
+        e.preventDefault()
+    } else if (e.key === 'ArrowUp') {
+        highlightedIndex.value = (highlightedIndex.value - 1 + len) % len
+        scrollHighlightedIntoView()
+        e.preventDefault()
+    } else if (e.key === 'Enter') {
+        if (highlightedIndex.value >= 0 && highlightedIndex.value < len) {
+            toggleOption(filteredOptions.value[highlightedIndex.value])
+        }
+        e.preventDefault()
+    } else if (e.key === 'Escape') {
+        close()
+        e.preventDefault()
+    } else if (e.key === 'Backspace' && props.multiple && query.value === '') {
+        // remove last tag
+        const last = selectedValues.value[selectedValues.value.length - 1]
+        if (last !== undefined) removeValue(last)
+    }
+}
+
+function scrollHighlightedIntoView() {
+    nextTick(() => {
+        const list = root.value?.querySelector(`#${listId}`)
+        const active = list?.querySelectorAll('li')[highlightedIndex.value]
+        if (active && active.scrollIntoView) active.scrollIntoView({ block: 'nearest' })
+    })
+}
+
+function onClickOutside(e: Event) {
+    if (!root.value) return
+    if (!root.value.contains(e.target as Node)) close()
+}
+
+function onFocusOut(_e: FocusEvent) {
+    setTimeout(() => {
+        if (!root.value) return
+
+        // Check if the new focus target is outside our component
+        const activeElement = document.activeElement
+        if (!activeElement || !root.value.contains(activeElement)) {
+            close()
+        }
+    }, 0)
+}
+
+function onFocus(_e: FocusEvent) {
+    if (!open.value) {
+        openDropdown()
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('click', onClickOutside)
+    root.value?.addEventListener('focusout', onFocusOut)
+})
+onBeforeUnmount(() => {
+    document.removeEventListener('click', onClickOutside)
+    root.value?.removeEventListener('focusout', onFocusOut)
+})
+
+const selectedOption = computed(() => optionFromValue(selectedSingle.value))
+
+</script>
+
+<template>
+    <div class="relative" :class="[isInLabel && 'w-full']" ref="root" @keydown="onKeydown">
+        <div class="input input-bordered flex items-center gap-2 cursor-text w-full overflow-x-clip"
+            :class="[colorClass, inputSizeClass, ghostClass, { 'input-disabled': disabled }, { 'outline-none rounded-l-none border-x-0': isInLabel }]" tabindex="0" role="combobox"
+            :aria-expanded="open" :aria-controls="listId" @click="focusToggle" @focus="onFocus">
+            <template v-if="multiple">
+                <template v-for="(val, idx) in selectedValues" :key="valKey(val, idx)">
+                    <slot name="tag" :value="optionFromValue(val)" :index="idx">
+                        <label class="badge badge-sm badge-neutral mr-1 flex items-center gap-2 cursor-pointer">
+                            {{ labelFromValue(val) }}
+                            <button class="btn btn-ghost btn-circle btn-xs p-0" @click.stop="removeValue(val)"
+                                :aria-label="removeItemLabel">✕</button>
+                        </label>
+                    </slot>
+                </template>
+
+                <input v-if="searchable" ref="searchInput" v-model="query" @focus="open = true" @input="onQuery"
+                    class="input input-ghost flex-1 w-full !outline-none pl-0"
+                    :class="{ ' placeholder:!text-base-content': selectedValues.length }"
+                    :placeholder="selectedValues.length ? '' : placeholder" aria-autocomplete="list" />
+
+                <span v-else class="flex-1" :class="{ 'text-gray-400': !selectedValues.length }">
+                    {{ !selectedValues.length ? placeholder : '' }}
+                </span>
+            </template>
+
+            <template v-else>
+                <template v-if="searchable">
+                    <input ref="searchInput" v-model="query" @focus="open = true" @input="onQuery"
+                        class="input input-ghost flex-1 min-w-[6rem] !outline-none pl-0"
+                        :class="{ ' placeholder:!text-base-content': selectedOption }"
+                        :placeholder="selectedOption ? labelFromOption(selectedOption) : placeholder"
+                        aria-autocomplete="list" />
+                </template>
+                <template v-else>
+                    <slot name="selected" :selected="selectedOption">
+                        <span class="flex-1">{{ selectedOption ? labelFromOption(selectedOption) : placeholder }}</span>
+                    </slot>
+                </template>
+            </template>
+
+            <div class="btn btn-ghost btn-sm outline-none! h-4/5" type="button" @click.stop="toggle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </div>
+        </div>
+
+        <transition enter-active-class="transition ease-out duration-100" enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
+            leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+            <div v-if="open"
+                class="absolute dropdown-content menu flex-nowrap bg-base-100 rounded-box shadow mt-1 w-full z-50 p-0"
+                role="listbox" :id="listId" :class="[subMenuSizeClass]">
+                <!-- optional internal search at top of dropdown -->
+                <div v-if="searchable && searchableInside" class="p-2">
+                    <input v-model="query" ref="searchInputInside" class="input input-bordered w-full"
+                        :placeholder="searchPlaceholder" @input="onQuery" />
+                </div>
+
+                <div class="block max-h-72 overflow-auto">
+                    <ul class="block m-0 p-2">
+                        <li v-for="(opt, i) in filteredOptions" :key="keyForOption(opt, i)"
+                            class="block w-full rounded-box"
+                            :class="[{ 'bg-primary text-primary-content': isSelected(opt), 'bg-base-300': i === highlightedIndex, 'bg-primary/75': isSelected(opt) && i === highlightedIndex }, 'cursor-pointer']"
+                            role="option" :aria-selected="isSelected(opt)" @mousedown.prevent="handleOptionClick(opt)"
+                            @mouseover.prevent="highlightedIndex = i">
+                            <a class="flex items-center gap-3 py-2 px-3 text-balance! bg-transparent">
+                                <input v-if="checkboxes" type="checkbox" class="checkbox checkbox-sm"
+                                    :checked="isSelected(opt)" @change.stop.prevent="toggleOption(opt)" tabindex="-1" />
+                                <slot name="option" :option="opt" :index="i">
+                                    {{ labelFromOption(opt) }}
+                                </slot>
+                                <span v-if="clearable && isSelected(opt)" class="ml-auto opacity-60 hover:opacity-100" aria-hidden="true">✕</span>
+                            </a>
+                        </li>
+
+                        <li v-if="filteredOptions.length === 0" class="p-2 text-sm text-gray-500">
+                            <slot name="no-options">{{ searchNoResultsText }}</slot>
+                        </li>
+                    </ul>
+                </div>
+
+
+            </div>
+        </transition>
+    </div>
+</template>
+
+<style scoped>
+.dropdown-content.menu {
+    @supports (scrollbar-color: auto) {
+
+        *,
+        *:hover {
+            scrollbar-width: thin;
+        }
+    }
+
+    @supports (scrollbar-width: none) {
+
+        *,
+        *:hover {
+            scrollbar-width: thin;
+        }
+    }
+
+    & ul {
+        display: block;
+    }
+
+    & li a {
+        white-space: nowrap;
+    }
+}
+</style>

package/components/DataInput/du-text-area/du-text-area.types.ts

@@ -0,0 +1,11 @@
+import { type Variant } from "../../../composables/useVariantProps"
+import { type Size } from "../../../composables/useSizeProps"
+
+export interface TEXTAREAProps {
+  modelValue?: string
+  placeholder?: string
+  disabled?: boolean
+  variant?: Variant
+  size?: Size
+  ghost?: boolean
+} 

package/components/DataInput/du-text-area/du-text-area.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { type TEXTAREAProps } from './du-text-area.types'
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<TEXTAREAProps>(),
+  {
+    modelValue: "",
+    placeholder: "",
+    disabled: false,
+    variant: "default",
+    size: "default",
+    ghost: false,
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+}>()
+
+const ghostClass = computed(() => (props.ghost ? "textarea-ghost" : ""))
+const { colorClass } = useVariantMapping(props, "textarea")
+const { sizeClass } = useSizeMapping(props, "textarea")
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).value
+  emit("update:modelValue", value)
+}
+</script>
+
+<template>
+  <textarea
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    @input="handleInput"
+    :class="['textarea', ghostClass, colorClass, sizeClass]"
+  />
+</template> 

package/components/Feedback/du-alert/du-alert.types.ts

@@ -0,0 +1,16 @@
+export const DU_ALERT_VARIANTS = ["default", "success", "error", "warning", "info"] as const;
+export type AlertVariant = (typeof DU_ALERT_VARIANTS)[number];
+
+export const DU_ALERT_DIRECTIONS = ["default", "vertical", "horizontal", "responsive"] as const;
+export type AlertDirection = (typeof DU_ALERT_DIRECTIONS)[number];
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  direction?: AlertDirection;
+  soft?: boolean;
+  outline?: boolean;
+  dash?: boolean;
+  dismissible?: boolean;
+  autoDismissible?: boolean;
+  icon?: boolean;
+} 

package/components/Feedback/du-alert/du-alert.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { type AlertProps } from "./du-alert.types";
+
+
+const props = withDefaults(
+  defineProps<AlertProps>(),
+  {
+    variant: "default",
+    direction: "default",
+    soft: false,
+    outline: false,
+    dash: false,
+    dismissible: false,
+    autoDismissible: false,
+    icon: true,
+  },
+);
+
+// Détermine si l'alerte est visible
+const visible = ref(true);
+
+const onClick = () => {
+  visible.value = false;
+};
+
+onMounted(() => {
+  if (props.autoDismissible) {
+    setTimeout(() => {
+      visible.value = false;
+    }, 5000);
+  }
+});
+
+// Détermine la classe CSS en fonction du type d'alerte
+const alertColorClass = computed(() => {
+  return {
+    default: "",
+    success: "alert-success",
+    error: "alert-error",
+    warning: "alert-warning",
+    info: "alert-info",
+  }[props.variant];
+});
+
+const directionClass = computed(() => {
+  return {
+    default: "",
+    vertical: "alert-vertical",
+    horizontal: "alert-horizontal",
+    responsive: "alert-vertical sm:alert-horizontal",
+  }[props.direction];
+});
+
+const softClass = computed(() => {
+  return props.soft ? "alert-soft" : "";
+});
+
+const outlineClass = computed(() => {
+  return props.outline ? "alert-outline" : "";
+});
+
+const dashClass = computed(() => {
+  return props.dash ? "alert-dash" : "";
+});
+
+// SVG en fonction du type d'alerte
+const svgIcons = {
+  default: `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    </svg>`,
+  success: `
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>`,
+  error: `
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>`,
+  warning: `
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>`,
+  info: `
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+    </svg>`,
+};
+</script>
+
+<template>
+  <div role="alert" v-if="visible" :class="[
+    'alert',
+    alertColorClass,
+    softClass,
+    outlineClass,
+    dashClass,
+    directionClass,
+  ]">
+    <template v-if="icon"><span v-html="svgIcons[variant]"></span></template>
+    <slot>Default alert</slot>
+    <div v-if="$slots.actions || dismissible">
+      <slot name="actions"></slot>
+      <button v-if="dismissible" @click="onClick" class="btn btn-sm btn-square btn-ghost">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+          <path fill="currentColor"
+            d="M3.64 2.27L7.5 6.13l3.84-3.84A.92.92 0 0 1 12 2a1 1 0 0 1 1 1a.9.9 0 0 1-.27.66L8.84 7.5l3.89 3.89A.9.9 0 0 1 13 12a1 1 0 0 1-1 1a.92.92 0 0 1-.69-.27L7.5 8.87l-3.85 3.85A.92.92 0 0 1 3 13a1 1 0 0 1-1-1a.9.9 0 0 1 .27-.66L6.16 7.5L2.27 3.61A.9.9 0 0 1 2 3a1 1 0 0 1 1-1c.24.003.47.1.64.27" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>

package/components/Feedback/du-loading/du-loading.types.ts

@@ -0,0 +1,11 @@
+import { type Variant } from "../../../composables/useVariantProps";
+import { type Size } from "../../../composables/useSizeProps";
+
+export const DU_LOADING_ANIMATIONS = ["spinner", "dots", "ring", "ball", "bars", "infinity"] as const;
+export type LoadingAnimation = (typeof DU_LOADING_ANIMATIONS)[number];
+
+export interface LoadingProps {
+  animation?: LoadingAnimation;
+  size?: Size;
+  variant?: Variant;
+} 

package/components/Feedback/du-loading/du-loading.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useVariantMapping } from "../../../composables/useVariantProps";
+import { useSizeMapping } from "../../../composables/useSizeProps";
+import { type LoadingProps } from "./du-loading.types";
+
+const props = withDefaults(
+  defineProps<LoadingProps>(),
+  {
+    animation: "spinner",
+    size: "default",
+    variant: "default",
+  },
+);
+
+const animationClass = computed(() => {
+  return {
+    spinner: "loading-spinner",
+    dots: "loading-dots",
+    ring: "loading-ring",
+    ball: "loading-ball",
+    bars: "loading-bars",
+    infinity: "loading-infinity",
+  }[props.animation];
+});
+
+const { sizeClass } = useSizeMapping(props, "loading");
+const { colorClass } = useVariantMapping(props, "text");
+</script>
+
+<template>
+  <span :class="['loading', sizeClass, animationClass, colorClass]"></span>
+</template> 

package/components/Feedback/du-progress/du-progress.types.ts

@@ -0,0 +1,8 @@
+import { type Variant } from "../../../composables/useVariantProps";
+
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  indeterminate?: boolean;
+  variant?: Variant;
+} 

package/components/Feedback/du-progress/du-progress.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useVariantMapping } from "../../../composables/useVariantProps";
+import { type ProgressProps } from "./du-progress.types";
+
+const props = withDefaults(
+  defineProps<ProgressProps>(),
+  {
+    variant: "default",
+    value: 0,
+    max: 100,
+    indeterminate: false,
+  },
+);
+const { colorClass } = useVariantMapping(props, "progress");
+</script>
+
+<template>
+  <progress
+    :class="['progress', 'w-56', colorClass]"
+    :value="!indeterminate ? value : undefined"
+    :max="!indeterminate ? max : undefined"
+  ></progress>
+</template>