ketekny-ui-kit 1.0.59 → 1.0.61

package/README.md

@@ -155,7 +155,7 @@ Components:
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
 - `kProgressBar`, `kTree`, `kButton`, `kSelect`, `kUploader`
-- `kToggle`, `kInput`, `kDateSelector`, `kDateSelectorV2`, `kEditor`
+- `kToggle`, `kInput`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`

package/index.js

@@ -7,7 +7,6 @@ import kDialog from './src/ui/kDialog.vue'
 import kDrawer from './src/ui/kDrawer.vue'
 import kInput from './src/ui/kInput.vue'
 import kDateSelector from './src/ui/kDateSelector.vue'
-import kDateSelectorV2 from './src/ui/kDateSelector_v2.vue'
 import kToolbar from './src/ui/kToolbar.vue'
 import kSelect from './src/ui/kSelect.vue'
 import kTable from './src/ui/kTable.vue'
@@ -51,7 +50,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
+  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kDateSelector.vue

@@ -1,326 +1,152 @@
 <template>
-  <div class="relative w-full">
-    <label :for="id" class="inputLabel" :class="hasError || inputInvalid ? 'text-red-500' : 'text-primary/90'">
-      {{ label }}
-    </label>
-
-    <!-- Date Mode (text input + calendar icon opens Vue Datepicker popup) -->
-    <div v-if="type === 'date'">
-      <div class="relative">
-        <input
-          :id="id"
-          type="text"
-          v-model="textDate"
-          :placeholder="placeholder || 'dd/mm/yyyy'"
-          :disabled="disabled"
-          :class="[defaultStyle, hasError || inputInvalid ? errorStyle : '', disabled ? disabledStyle : '']"
-          @input="onTextInput"
-          @blur="commitTextDate"
-          @keydown.enter.prevent="commitTextDate"
-        />
-
-        <!-- Right-side calendar icon (opens popup) -->
-        <button
-          type="button"
-          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
-          :disabled="disabled"
-          @click="openCalendar"
-          aria-label="Open calendar"
-        >
-          <Calendar class="w-5 h-5" />
-        </button>
-      </div>
-
-      <!-- Hidden input; only used to render the popup -->
-      <Datepicker ref="dp" v-model="calendarDate" :format="dateFormat" :enable-time-picker="false" auto-apply :disabled="disabled" :hide-input-icon="true" teleport="body" class="sr-only" />
-    </div>
-
-    <!-- Year-Month Mode -->
-    <div v-else class="relative">
-      <div class="relative">
-        <div ref="trigger" :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']" @click="togglePopup">
-          {{ displayValue || placeholder }}
-        </div>
-
-        <!-- Right-side calendar icon (opens month grid) -->
-        <button
-          type="button"
-          class="absolute p-1 text-primary/70 -translate-y-1/2 right-2 top-1/2 hover:text-primary disabled:opacity-50"
-          :disabled="disabled"
-          @click.stop="togglePopup"
-          aria-label="Open month selector"
-        >
-          <Calendar class="w-5 h-5" />
-        </button>
-
-        <!-- Clear Button (sits just left of the calendar icon) -->
-        <button
-          v-if="displayValue && !disabled"
-          @click.stop="clearSelection"
-          type="button"
-          class="absolute text-sm font-bold text-gray-400 -translate-y-1/2 right-9 top-1/2 hover:text-red-500"
-          aria-label="Clear"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
-
-      <!-- Month Grid Popover (Teleported) -->
-      <teleport to="body">
-        <div v-if="showPopup" class="p-4 bg-white dark:bg-slate-800 border border-primary/20 dark:border-slate-600 rounded-lg shadow-lg" :style="popupStyles">
-          <!-- Year Nav -->
-          <div class="flex items-center justify-between pb-3 mb-4 border-b border-slate-200 dark:border-slate-600">
-            <button @click.stop="currentYear--" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Previous year">
-              <ChevronLeft />
-            </button>
-            <span class="font-medium text-primary dark:text-sky-300">{{ currentYear }}</span>
-            <button @click.stop="currentYear++" class="text-primary/80 dark:text-sky-300 hover:text-primary dark:hover:text-sky-200" aria-label="Next year">
-              <ChevronRight />
-            </button>
-          </div>
-
-          <!-- Month Grid -->
-          <div class="grid grid-cols-3 gap-2">
-            <div
-              v-for="(month, index) in months"
-              :key="index"
-              @click="selectMonth(index + 1)"
-              class="px-3 py-2 text-center transition rounded-lg cursor-pointer"
-              :class="[isSelected(index + 1) ? 'bg-primary text-white' : 'text-gray-700 dark:text-slate-200 hover:bg-primary/15 dark:hover:bg-sky-500/30 dark:hover:text-sky-100']"
-            >
-              {{ month }}
-            </div>
-          </div>
-        </div>
-      </teleport>
-    </div>
-
-    <!-- API-provided error -->
-    <div class="text-sm text-red-500" v-if="hasError && error !== true && error !== ''">
-      {{ error }}
-    </div>
-
-    <!-- Local parse error -->
-    <div class="text-sm text-red-500" v-if="inputInvalid && !hasError">Μη έγκυρη ημερομηνία. Χρησιμοποιήστε μορφή dd/mm/yyyy.</div>
-
-    <!-- Info message -->
-    <div class="text-sm text-primary/80" v-if="info != null">
-      {{ info }}
-    </div>
+  <div>
+    <label v-if="label" class="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{{ label }}</label>
+    <el-date-picker
+      :id="computedId"
+      :model-value="normalizedModelValue"
+      :type="pickerType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :clearable="clearable"
+      :editable="editable"
+      :size="size"
+      :format="resolvedFormat"
+      :value-format="resolvedValueFormat"
+      :disabled-date="disabledDate"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :range-separator="rangeSeparator"
+      class="k-date"
+      style="width: 100%"
+      @update:model-value="$emit('update:modelValue', $event)"
+      @change="$emit('change', $event)"
+    />
+    <p v-if="hasError" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ typeof error === 'string' ? error : '' }}</p>
+    <p v-else-if="info" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ info }}</p>
   </div>
 </template>
 
-<script>
-import Datepicker from "@vuepic/vue-datepicker";
-import "@vuepic/vue-datepicker/dist/main.css";
-import moment from "moment";
-import { ChevronLeft, ChevronRight, X, Calendar } from "lucide-vue-next";
-
-export default {
-  name: "kDatePicker",
-  components: { Datepicker, ChevronLeft, ChevronRight, X, Calendar },
-  props: {
-    modelValue: [String, Date],
-    type: {
-      type: String,
-      default: "date",
-      validator: (val) => ["date", "yearMonth"].includes(val),
-    },
-    info: { type: String, default: null },
-    error: { type: [String, Boolean], default: null },
-    label: { type: String, default: "Ημερομηνία" },
-    placeholder: { type: String, default: "Επιλέξτε ημερομηνία" },
-    disabled: { type: Boolean, default: false },
-    valueFormat: { type: String, default: null },
-    id: {
-      type: String,
-      default: () => `datepicker-${Math.random().toString(36).substr(2, 9)}`,
-    },
-  },
-  data() {
-    const parsed = moment(this.modelValue, "YYYY-MM", true);
-    const current = moment();
-
-    const initText = (() => {
-      if (!this.modelValue) return "";
-      const m = moment(this.modelValue);
-      return m.isValid() ? m.format("DD/MM/YYYY") : "";
-    })();
+<script setup>
+import { computed } from 'vue'
+import { ElDatePicker } from 'element-plus'
 
-    return {
-      defaultStyle: "w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg transition shadow-sm focus:outline-none text-gray-700 dark:text-slate-200 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white dark:bg-slate-800 placeholder-gray-400 dark:placeholder-slate-500",
-      errorStyle: "border-red-500 focus:ring focus:ring-red-300",
-      disabledStyle: "!bg-gray-100 dark:!bg-slate-700 !text-gray-400 dark:!text-slate-500 !cursor-not-allowed",
-
-      // Year-Month UI state
-      showPopup: false,
-      currentYear: parsed.isValid() ? parsed.year() : current.year(),
-      selectedMonth: parsed.isValid() ? parsed.month() + 1 : null,
-      months: ["Ιαν", "Φεβ", "Μάρ", "Απρ", "Μάι", "Ιούν", "Ιούλ", "Αυγ", "Σεπ", "Οκτ", "Νοέ", "Δεκ"],
-      popupStyles: {
-        position: "absolute",
-        top: "0px",
-        left: "0px",
-        width: "100%",
-      },
-
-      textDate: initText,
-      inputInvalid: false,
-    };
-  },
-  computed: {
-    hasError() {
-      return this.error != null && this.error !== false;
-    },
-    displayValue() {
-      if (!this.selectedMonth || !this.currentYear) return "";
-      return moment(`${this.currentYear}-${String(this.selectedMonth).padStart(2, "0")}`).format("MM/YYYY");
-    },
-    calendarDate: {
-      get() {
-        if (!this.modelValue) return null;
-        const m = moment(this.modelValue);
-        return m.isValid() ? m.toDate() : null;
-      },
-      set(val) {
-        const m = moment(val);
-        if (!m.isValid()) {
-          this.$emit("update:modelValue", null);
-          return;
-        }
-        const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-        this.$emit("update:modelValue", emitValue);
-      },
-    },
-    dateFormat() {
-      return "dd/MM/yyyy";
-    },
-  },
-  watch: {
-    modelValue(newVal) {
-      if (!newVal) {
-        this.textDate = "";
-        return;
-      }
-      const m = moment(newVal);
-      this.textDate = m.isValid() ? m.format("DD/MM/YYYY") : "";
-    },
+const props = defineProps({
+  modelValue: { type: [String, Date, Array], default: null },
+  id: {
+    type: [String, Array],
+    default: () => `datepicker-${Math.random().toString(36).slice(2, 11)}`,
   },
-  mounted() {
-    this.clickOutsideHandler = (e) => {
-      if (this.showPopup && !this.$el.contains(e.target)) {
-        this.showPopup = false;
-      }
-    };
-    document.addEventListener("click", this.clickOutsideHandler);
+  label: { type: String, default: '' },
+  type: {
+    type: String,
+    default: 'date',
+    validator: (val) => ['year', 'month', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange', 'yearMonth'].includes(val),
   },
-  beforeUnmount() {
-    document.removeEventListener("click", this.clickOutsideHandler);
-  },
-  methods: {
-    /**
-     * Live input handler:
-     * - Keeps digits and slashes
-     * - Allows user to type `/` manually
-     * - Auto-inserts missing slashes when needed
-     * - Emits update when full valid date entered
-     */
-    onTextInput(e) {
-      if (this.disabled) return;
-
-      let value = e.target.value || "";
-
-      // Allow digits and slashes only
-      value = value.replace(/[^0-9/]/g, "");
-
-      // Auto-add slashes if user omits them
-      const digits = value.replace(/\D/g, "");
-      if (digits.length > 2 && !value.includes("/")) {
-        // add first slash after 2 digits
-        value = `${digits.slice(0, 2)}/${digits.slice(2)}`;
-      }
-      if (digits.length > 4 && (value.match(/\//g) || []).length < 2) {
-        // ensure second slash exists after month
-        value = `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
-      }
-
-      // Prevent double slashes like "12//03"
-      value = value.replace(/\/{2,}/g, "/");
-
-      this.textDate = value;
-
-      // When 8 digits exist, try to parse automatically
-      if (digits.length === 8) {
-        const m = moment(value, "DD/MM/YYYY", true);
-        if (m.isValid()) {
-          this.inputInvalid = false;
-          const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-          this.$emit("update:modelValue", emitValue);
-        } else {
-          this.inputInvalid = true;
-        }
-      } else {
-        this.inputInvalid = false;
-      }
-    },
-
-    commitTextDate() {
-      const raw = (this.textDate || "").trim();
-      if (!raw) {
-        this.inputInvalid = false;
-        this.$emit("update:modelValue", null);
-        return;
-      }
-      const formats = ["DD/MM/YYYY", "D/M/YYYY", "YYYY-MM-DD", moment.ISO_8601];
-      const m = moment(raw, formats, true);
-      if (!m.isValid()) {
-        this.inputInvalid = true;
-        return;
-      }
-      this.inputInvalid = false;
-      const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-      this.$emit("update:modelValue", emitValue);
-    },
-
-    openCalendar() {
-      if (this.disabled) return;
-      this.$refs.dp && this.$refs.dp.openMenu && this.$refs.dp.openMenu();
-    },
-    togglePopup() {
-      if (this.disabled) return;
-      this.showPopup = !this.showPopup;
-      if (this.showPopup) {
-        this.$nextTick(() => {
-          const trigger = this.$refs.trigger;
-          if (trigger) {
-            const rect = trigger.getBoundingClientRect();
-            this.popupStyles = {
-              position: "absolute",
-              top: `${rect.bottom + window.scrollY}px`,
-              left: `${rect.left + window.scrollX}px`,
-              width: `${rect.width}px`,
-              zIndex: 9999,
-            };
-          }
-        });
-      }
-    },
-    clearSelection() {
-      this.selectedMonth = null;
-      this.$emit("update:modelValue", null);
-      this.showPopup = false;
-    },
-    selectMonth(month) {
-      this.selectedMonth = month;
-      const m = moment(`${this.currentYear}-${String(month).padStart(2, "0")}`, "YYYY-MM");
-      const emitValue = this.valueFormat ? m.format(this.valueFormat) : m.toDate();
-      this.$emit("update:modelValue", emitValue);
-      this.showPopup = false;
-    },
-    isSelected(month) {
-      const m = moment(this.modelValue, "YYYY-MM", true);
-      return this.selectedMonth === month && m.isValid() && m.year() === this.currentYear;
-    },
+  placeholder: { type: String, default: 'Select date' },
+  startPlaceholder: { type: String, default: 'Start date' },
+  endPlaceholder: { type: String, default: 'End date' },
+  rangeSeparator: { type: String, default: 'To' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  editable: { type: Boolean, default: true },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['large', 'default', 'small'].includes(val),
   },
-};
+  format: { type: String, default: '' },
+  valueFormat: { type: String, default: '' },
+  disabledDate: { type: Function, default: undefined },
+  error: { type: [String, Boolean], default: null },
+  info: { type: String, default: '' },
+})
+
+defineEmits(['update:modelValue', 'change'])
+
+const pickerType = computed(() => props.type === 'yearMonth' ? 'month' : props.type)
+const isRange = computed(() => ['daterange', 'datetimerange', 'monthrange'].includes(pickerType.value))
+const computedId = computed(() => {
+  if (Array.isArray(props.id)) return props.id
+  return isRange.value ? [`${props.id}-start`, `${props.id}-end`] : props.id
+})
+const hasError = computed(() => props.error != null && props.error !== false)
+
+const defaultFormatByType = {
+  date: 'YYYY-MM-DD',
+  dates: 'YYYY-MM-DD',
+  week: 'gggg[w]ww',
+  year: 'YYYY',
+  month: 'YYYY-MM',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  monthrange: 'YYYY-MM',
+  daterange: 'YYYY-MM-DD',
+  datetimerange: 'YYYY-MM-DD HH:mm:ss',
+}
+
+const resolvedFormat = computed(() => {
+  const custom = String(props.format || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+const resolvedValueFormat = computed(() => {
+  const custom = String(props.valueFormat || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+function normalizeIsoString(value, type) {
+  if (typeof value !== 'string' || !value.includes('T')) return value
+
+  if (type === 'year') return value.slice(0, 4)
+  if (type === 'month' || type === 'monthrange') return value.slice(0, 7)
+
+  if (type === 'datetime' || type === 'datetimerange') {
+    const normalized = value.replace('T', ' ').replace(/Z$/, '')
+    const fullMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}:\d{2})/)
+    if (fullMatch) return `${fullMatch[1]} ${fullMatch[2]}`
+    const shortMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2})/)
+    if (shortMatch) return `${shortMatch[1]} ${shortMatch[2]}:00`
+    return normalized
+  }
+
+  const dateMatch = value.match(/^(\d{4}-\d{2}-\d{2})/)
+  return dateMatch ? dateMatch[1] : value
+}
+
+const normalizedModelValue = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map((item) => normalizeIsoString(item, pickerType.value))
+  }
+  return normalizeIsoString(props.modelValue, pickerType.value)
+})
 </script>
+
+<style>
+/* Global because Element Plus picker panel is teleported to body. */
+html.dark .el-date-picker,
+html.dark .el-date-range-picker {
+  --el-datepicker-inrange-bg-color: rgba(3, 105, 161, 0.22);
+  --el-datepicker-inrange-hover-bg-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell,
+html.dark .el-month-table td.in-range .el-date-table-cell,
+html.dark .el-year-table td.in-range .el-date-table-cell {
+  background-color: rgba(3, 105, 161, 0.22);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell:hover,
+html.dark .el-month-table td.in-range .el-date-table-cell:hover,
+html.dark .el-year-table td.in-range .el-date-table-cell:hover {
+  background-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-month-table td.available:hover .el-date-table-cell,
+html.dark .el-year-table td.available:hover .el-date-table-cell {
+  background-color: rgba(148, 163, 184, 0.16);
+  border-radius: 24px;
+}
+</style>

package/src/ui/kMenu.vue

@@ -36,7 +36,7 @@
               : 'top-[-7px] border-l border-t border-primary/20',
           ]"
           :style="{ left: `${chevronOffset}px` }"></span>
-        <slot name="items">
+        <slot name="items" :close-menu="closeMenu" :close="closeMenu" :select="handleLinkClick">
           <ul class="p-2">
             <li v-for="(link, index) in normalizedLinks" :key="link.key || `${link.label}-${index}`">
               <component
@@ -131,10 +131,20 @@ export default {
         event.preventDefault();
         return;
       }
-      if (typeof link?.action === "function") link.action(link, event);
-      if (typeof link?.onClick === "function") link.onClick(link, event);
-      this.$emit("select", link);
-      if (this.closeOnSelect) this.closeMenu();
+
+      const runSelectionHandlers = () => {
+        if (typeof link?.action === "function") link.action(link, event);
+        if (typeof link?.onClick === "function") link.onClick(link, event);
+        this.$emit("select", link);
+      };
+
+      if (this.closeOnSelect) {
+        this.closeMenu();
+        window.setTimeout(runSelectionHandlers, 0);
+        return;
+      }
+
+      runSelectionHandlers();
     },
     handleClickOutside(event) {
       const clickedTrigger = this.$refs.menuRef?.contains(event.target);

package/src/ui/kSelect.vue

@@ -12,7 +12,10 @@
           :class="[defaultStyle, hasError ? errorStyle : '', disabled ? disabledStyle : '']"
           :aria-label="label || 'Select option'"
         >
-          <SelectValue :placeholder="placeholder" class="block pr-10 truncate" />
+          <SelectValue
+            :placeholder="placeholder"
+            class="block pr-10 truncate text-gray-700 data-[placeholder]:text-gray-400 dark:text-slate-100 dark:data-[placeholder]:text-slate-500"
+          />
 
           <button
             v-if="clearable && isSelectionSet && !disabled"

package/src/ui/kButton_v2.vue

@@ -1,124 +0,0 @@
-<template>
-  <el-button
-    :type="resolvedVisualType"
-    :native-type="resolvedNativeType"
-    :size="resolvedSize"
-    :plain="resolvedPlain"
-    :round="round"
-    :circle="resolvedCircle"
-    :loading="loading"
-    :disabled="disabled"
-    :icon="iconComponent"
-    :autofocus="autofocus"
-    :title="tooltip"
-    :aria-label="resolvedAriaLabel"
-    :class="buttonClass"
-    @click="$emit('click', $event)"
-  >
-    <slot v-if="!resolvedIconOnly">{{ label }}</slot>
-  </el-button>
-</template>
-
-<script setup>
-import { computed, getCurrentInstance } from 'vue'
-import { ElButton } from 'element-plus'
-import * as lucideIcons from 'lucide-vue-next'
-
-const STYLE_TYPES = ['default', 'primary', 'success', 'warning', 'danger', 'info']
-const NATIVE_TYPES = ['button', 'submit', 'reset']
-
-const props = defineProps({
-  label: { type: String, default: '' },
-  type: {
-    type: String,
-    default: 'default',
-    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'button', 'submit', 'reset'].includes(val),
-  },
-  size: {
-    type: String,
-    default: 'default',
-    validator: (val) => ['large', 'default', 'small', 'normal'].includes(val),
-  },
-  plain: { type: Boolean, default: false },
-  round: { type: Boolean, default: false },
-  circle: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  icon: { type: [String, Object, Function], default: null },
-  autofocus: { type: Boolean, default: false },
-  primary: { type: Boolean, default: false },
-  secondary: { type: Boolean, default: false },
-  outlined: { type: Boolean, default: false },
-  danger: { type: Boolean, default: false },
-  warning: { type: Boolean, default: false },
-  success: { type: Boolean, default: false },
-  ariaLabel: { type: String, default: null },
-  tooltip: { type: String, default: null },
-  variant: {
-    type: String,
-    default: null,
-    validator: (val) => val == null || ['solid', 'soft', 'outlined', 'plain'].includes(val),
-  },
-  small: { type: Boolean, default: false },
-  fullWidth: { type: Boolean, default: false },
-  iconOnly: { type: Boolean, default: false },
-  truncate: { type: Boolean, default: false },
-})
-
-defineEmits(['click'])
-
-const instance = getCurrentInstance()
-const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
-const hasProp = (...names) => names.some((name) => passedProps.has(name))
-
-const resolvedVisualType = computed(() => {
-  if (props.danger) return 'danger'
-  if (props.success) return 'success'
-  if (props.warning) return 'warning'
-  if (props.secondary) return 'info'
-  if (props.primary) return 'primary'
-  return STYLE_TYPES.includes(props.type) ? props.type : 'default'
-})
-
-const resolvedNativeType = computed(() => {
-  return NATIVE_TYPES.includes(props.type) ? props.type : 'button'
-})
-
-const resolvedSize = computed(() => {
-  if (props.small) return 'small'
-  if (props.size === 'normal') return 'default'
-  return ['large', 'default', 'small'].includes(props.size) ? props.size : 'default'
-})
-
-const resolvedPlain = computed(() => {
-  if (props.outlined) return true
-  if (hasProp('variant')) return props.variant === 'outlined' || props.variant === 'plain'
-  return props.plain
-})
-
-const resolvedCircle = computed(() => {
-  if (hasProp('iconOnly', 'icon-only')) return props.iconOnly
-  return props.circle
-})
-
-const resolvedIconOnly = computed(() => props.iconOnly)
-
-const iconComponent = computed(() => {
-  if (typeof props.icon === 'string') return lucideIcons[props.icon] || null
-  return props.icon
-})
-
-const resolvedAriaLabel = computed(() => {
-  if (props.ariaLabel) return props.ariaLabel
-  if (props.label && !resolvedIconOnly.value) return props.label
-  if (typeof props.icon === 'string') return props.icon.replace(/([a-z])([A-Z])/g, '$1 $2')
-  return null
-})
-
-const buttonClass = computed(() => {
-  return [
-    props.fullWidth ? '!w-full justify-center' : '',
-    props.truncate ? 'max-w-full [&>span]:max-w-full [&>span]:truncate [&>span]:inline-block' : '',
-  ]
-})
-</script>