ketekny-ui-kit 1.0.24 → 1.0.26

package/package.json

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

package/src/ui/kAlert.vue

@@ -6,7 +6,7 @@
 
       <!-- Alert card -->
       <div
-        class="relative w-full max-w-sm p-6 space-y-4 text-center bg-white border shadow-2xl z-5010 rounded-2xl border-primary/20 ring-1 ring-primary/10"
+        class="relative w-full max-w-sm p-6 space-y-4 text-center bg-white dark:bg-slate-900 border shadow-2xl z-5010 rounded-2xl border-primary/20 dark:border-slate-700 ring-1 ring-primary/10 dark:ring-slate-700/50"
         :class="['border-semantic-' + type + '-border']"
         style="z-index: 5010"
       >
@@ -29,7 +29,7 @@
         </div>
 
         <!-- Optional message -->
-        <p v-if="message" class="leading-relaxed text-gray-600 text">
+        <p v-if="message" class="leading-relaxed text-gray-600 dark:text-slate-300 text">
           <span v-html="message" />
         </p>
 

package/src/ui/kChip.vue

@@ -14,7 +14,7 @@
       <slot></slot>
     </template>
 
-    <div v-if="value !== null" :class="['flex items-center justify-center ml-2 text-gray-800 rounded-sm bg-white/90', valueClass]">
+    <div v-if="value !== null" :class="['flex items-center justify-center ml-2 text-gray-800 rounded-sm bg-white/90 dark:bg-white/15 dark:text-gray-100', valueClass]">
       {{ value }}
     </div>
   </div>

package/src/ui/kDateSelector.vue

@@ -67,14 +67,14 @@
 
       <!-- Month Grid Popover (Teleported) -->
       <teleport to="body">
-        <div v-if="showPopup" class="p-4 bg-white border rounded-lg shadow-lg border-primary/20" :style="popupStyles">
+        <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">
-            <button @click.stop="currentYear--" class="text-primary/80 hover:text-primary" aria-label="Previous year">
+          <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">{{ currentYear }}</span>
-            <button @click.stop="currentYear++" class="text-primary/80 hover:text-primary" aria-label="Next year">
+            <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>
@@ -86,7 +86,7 @@
               :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' : 'hover:bg-primary/10 text-gray-700']"
+              :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>
@@ -148,9 +148,9 @@ export default {
     })();
 
     return {
-      defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400",
+      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 !text-gray-400 !cursor-not-allowed",
+      disabledStyle: "!bg-gray-100 dark:!bg-slate-700 !text-gray-400 dark:!text-slate-500 !cursor-not-allowed",
 
       // Year-Month UI state
       showPopup: false,

package/src/ui/kDialog.vue

@@ -8,7 +8,7 @@
     <transition name="dialog">
       <div
         ref="dialogPanel"
-        class="relative bg-white shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] m-4"
+        class="relative bg-white dark:bg-slate-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[90vh] m-4"
         :class="dialogClasses"
         :role="'dialog'"
         :aria-modal="'true'"
@@ -36,12 +36,12 @@
         </div>
 
         <!-- Scrollable slot content -->
-        <div class="flex-1 p-4 overflow-auto bg-secondary">
+        <div class="flex-1 p-4 overflow-auto bg-secondary dark:bg-slate-800/60">
           <slot></slot>
         </div>
 
         <!-- Footer -->
-        <div v-if="$slots.footer" class="flex flex-row justify-end gap-2 p-4 shrink-0">
+        <div v-if="$slots.footer" class="flex flex-row justify-end gap-2 p-4 shrink-0 border-t border-slate-100 dark:border-slate-700">
           <slot name="footer"></slot>
         </div>
       </div>

package/src/ui/kDrawer.vue

@@ -7,9 +7,9 @@
     <!-- <div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm" @click="close"></div> -->
 
     <!-- Drawer -->
-    <div class="fixed top-0 bottom-0 z-50 flex flex-col bg-white shadow-xl w-[400px] transition-all duration-500 " :class="side === 'right' ? 'right-0' : 'left-0'">
+    <div class="fixed top-0 bottom-0 z-50 flex flex-col bg-white dark:bg-slate-900 shadow-xl w-[400px] transition-all duration-500" :class="side === 'right' ? 'right-0' : 'left-0'">
       <!-- Header -->
-      <div class="flex items-center justify-between p-4 text-white bg-primary">
+      <div class="flex items-center justify-between p-4 text-white bg-primary dark:bg-sky-800">
         <div class="text-lg font-semibold">{{ title }}</div>
         <button @click="close" class="text-white hover:text-gray-200">
           <X class="w-5 h-5" />
@@ -17,12 +17,12 @@
       </div>
 
       <!-- Content -->
-      <div class="flex-1 p-4 overflow-auto bg-secondary">
+      <div class="flex-1 p-4 overflow-auto bg-secondary dark:bg-slate-800/60">
         <slot></slot>
       </div>
 
       <!-- Footer -->
-      <div class="p-4 bg-gray-100">
+      <div class="p-4 bg-gray-100 dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700">
         <slot name="footer"></slot>
       </div>
     </div>

package/src/ui/kProgressBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div
-      class="relative w-full overflow-hidden rounded-full bg-slate-200"
+      class="relative w-full overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700"
       :style="{ height: resolvedHeight }"
       role="progressbar"
       :aria-valuemin="0"
@@ -15,7 +15,7 @@
       />
       <span
         v-if="showValue"
-        class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-slate-700"
+        class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-slate-700 dark:text-slate-200"
       >
         {{ Math.round(percentage) }}%
       </span>

package/src/ui/kSpinner.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
-    <i class="ml-1 text-primary pi pi-wave-pulse" />
-    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0s' }"></div>
-    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.15s' }"></div>
-    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.3s' }"></div>
-    <div class="w-2 h-2 rounded-full bg-primary animate-fade" :style="{ animationDelay: '0.45s' }"></div>
+    <i class="ml-1 text-primary dark:text-sky-200 pi pi-wave-pulse" />
+    <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.15s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.3s' }"></div>
+    <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.45s' }"></div>
   </div>
 
-  <Loader class="w-6 h-6 mr-2 animate-spin" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
+  <Loader class="w-6 h-6 mr-2 animate-spin text-primary dark:text-sky-200" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
 </template>
 
 <script setup>
@@ -25,7 +25,7 @@ export default {
 @keyframes fade {
   0%,
   100% {
-    opacity: 0.2;
+    opacity: 0.35;
   }
   50% {
     opacity: 1;

package/src/ui/kTable.vue

@@ -103,7 +103,7 @@ export default {
 }
 
 .table-custom--card {
-  @apply overflow-hidden bg-white border border-slate-200 rounded-xl shadow-md;
+  @apply overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-md;
 }
 
 .table-custom--plain {
@@ -111,7 +111,7 @@ export default {
 }
 
 .table-custom--flat {
-  @apply bg-white border border-slate-200 rounded-xl shadow-none;
+  @apply bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-none;
 }
 
 .table-custom--card th {
@@ -119,31 +119,31 @@ export default {
 }
 
 .table-custom--plain th {
-  @apply px-4 py-2 text-sm font-semibold tracking-wide text-left text-slate-700 uppercase bg-transparent border-b border-slate-300;
+  @apply px-4 py-2 text-sm font-semibold tracking-wide text-left text-slate-700 dark:text-slate-300 uppercase bg-transparent border-b border-slate-300 dark:border-slate-600;
 }
 
 .table-custom--flat th {
-  @apply px-4 py-2 text-sm font-semibold tracking-wide text-left uppercase text-slate-600 bg-slate-100 border-b border-slate-200 align-middle;
+  @apply px-4 py-2 text-sm font-semibold tracking-wide text-left uppercase text-slate-600 dark:text-slate-300 bg-slate-100 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-600 align-middle;
 }
 
 .table-custom--card td {
-  @apply h-[3.2rem] px-6 py-4 text-base text-slate-800;
+  @apply h-[3.2rem] px-6 py-4 text-base text-slate-800 dark:text-slate-200;
 }
 
 .table-custom--plain td {
-  @apply h-[3.2rem] px-2 py-2 text-base text-slate-800;
+  @apply h-[3.2rem] px-2 py-2 text-base text-slate-800 dark:text-slate-200;
 }
 
 .table-custom--flat td {
-  @apply h-[3.2rem] px-4 py-2 text-base text-slate-900 align-middle;
+  @apply h-[3.2rem] px-4 py-2 text-base text-slate-900 dark:text-slate-200 align-middle;
 }
 
 .table-custom tr {
-  @apply transition duration-200 ease-in-out hover:bg-slate-50;
+  @apply transition duration-200 ease-in-out hover:bg-slate-50 dark:hover:bg-slate-700/40;
 }
 
 .table-custom tr:not(:last-child) {
-  @apply border-b border-slate-200;
+  @apply border-b border-slate-200 dark:border-slate-700;
 }
 
 .table-custom td::before {
@@ -164,7 +164,7 @@ export default {
 }
 
 .k-table-mobile .table-custom tbody tr {
-  @apply mb-3 border border-slate-200 rounded-lg bg-white;
+  @apply mb-3 border border-slate-200 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-800;
 }
 
 .k-table-mobile .table-custom tbody tr:last-child {

package/src/ui/kTabs.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="w-full overflow-hidden bg-white border rounded-md">
+  <div class="w-full overflow-hidden bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md">
     <div class="flex">
       <button
         v-for="tab in tabs"
         :key="tab.id"
         @click="selectTab(tab.id)"
-        :class="['px-8 py-4 text-lg font-medium', modelValue === tab.id ? 'bg-primary text-secondary ' : 'text-gray-500 hover:text-gray-700']"
+        :class="['px-8 py-4 text-lg font-medium', modelValue === tab.id ? 'bg-primary text-secondary' : 'text-gray-500 dark:text-slate-400 hover:text-gray-700 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700/50']"
       >
         {{ tab.title }}
       </button>

package/src/ui/kToast.vue

@@ -38,7 +38,7 @@
           v-if="toast.closable !== false"
           type="button"
           @click="remove(toast.id)"
-          class="absolute text-xl leading-none text-gray-500 rounded-md top-2 right-2 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary"
+          class="absolute text-xl leading-none text-gray-500 dark:text-slate-400 rounded-md top-2 right-2 hover:text-primary dark:hover:text-sky-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary"
           :aria-label="`Close ${toast.type} toast`">
           <X class="w-5 h-5" />
         </button>

package/src/ui/themes/intentColors.js

@@ -1,33 +1,33 @@
 export const INTENT_VARIANT_STYLES = {
   primary: {
-    solid: { enabled: "bg-sky-700 hover:bg-sky-600 text-white", disabled: "bg-sky-200 text-sky-900" },
-    soft: { enabled: "bg-sky-100 hover:bg-sky-200 text-sky-900", disabled: "bg-sky-100 text-sky-500" },
-    outlined: { enabled: "bg-transparent border border-sky-400 text-sky-800 hover:bg-sky-50", disabled: "bg-sky-50 border border-sky-200 text-sky-400" },
-    plain: { enabled: "bg-transparent text-sky-800 hover:bg-sky-50", disabled: "bg-transparent text-sky-400" },
+    solid: { enabled: "bg-sky-700 hover:bg-sky-600 text-white dark:bg-blue-600 dark:hover:bg-blue-500", disabled: "bg-sky-200 text-sky-900 dark:bg-sky-900/40 dark:text-sky-500" },
+    soft: { enabled: "bg-sky-100 hover:bg-sky-200 text-sky-900 dark:bg-sky-500/25 dark:hover:bg-sky-500/35 dark:text-sky-200 dark:border-sky-400/60", disabled: "bg-sky-100 text-sky-500 dark:bg-sky-900/20 dark:text-sky-600" },
+    outlined: { enabled: "bg-transparent border border-sky-400 text-sky-800 hover:bg-sky-50 dark:border-sky-400 dark:text-sky-300 dark:hover:bg-sky-500/20", disabled: "bg-sky-50 border border-sky-200 text-sky-400 dark:bg-transparent dark:border-sky-800 dark:text-sky-700" },
+    plain: { enabled: "bg-transparent text-sky-800 hover:bg-sky-50 dark:text-sky-300 dark:hover:bg-sky-500/20", disabled: "bg-transparent text-sky-400 dark:text-sky-700" },
   },
   secondary: {
-    solid: { enabled: "bg-slate-700 hover:bg-slate-600 text-white", disabled: "bg-slate-200 text-slate-700" },
-    soft: { enabled: "bg-slate-100 hover:bg-slate-200 text-slate-900", disabled: "bg-slate-100 text-slate-500" },
-    outlined: { enabled: "bg-transparent border border-slate-300 text-slate-900 hover:bg-slate-50", disabled: "bg-slate-50 border border-slate-200 text-slate-500" },
-    plain: { enabled: "bg-transparent text-slate-800 hover:bg-slate-100", disabled: "bg-transparent text-slate-400" },
+    solid: { enabled: "bg-slate-700 hover:bg-slate-600 text-white dark:bg-slate-500 dark:hover:bg-slate-400", disabled: "bg-slate-200 text-slate-700 dark:bg-slate-700/40 dark:text-slate-500" },
+    soft: { enabled: "bg-slate-100 hover:bg-slate-200 text-slate-900 dark:bg-slate-500/45 dark:hover:bg-slate-500/60 dark:text-slate-100 dark:border-slate-400/60", disabled: "bg-slate-100 text-slate-500 dark:bg-slate-700/20 dark:text-slate-600" },
+    outlined: { enabled: "bg-transparent border border-slate-300 text-slate-900 hover:bg-slate-50 dark:border-slate-500 dark:text-slate-300 dark:hover:bg-slate-600/30", disabled: "bg-slate-50 border border-slate-200 text-slate-500 dark:bg-transparent dark:border-slate-700 dark:text-slate-600" },
+    plain: { enabled: "bg-transparent text-slate-800 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-600/30", disabled: "bg-transparent text-slate-400 dark:text-slate-600" },
   },
   success: {
-    solid: { enabled: "bg-emerald-700 hover:bg-emerald-600 text-white", disabled: "bg-emerald-200 text-emerald-900" },
-    soft: { enabled: "bg-emerald-100 hover:bg-emerald-200 text-emerald-900", disabled: "bg-emerald-100 text-emerald-500" },
-    outlined: { enabled: "bg-transparent border border-emerald-400 text-emerald-800 hover:bg-emerald-50", disabled: "bg-emerald-50 border border-emerald-200 text-emerald-400" },
-    plain: { enabled: "bg-transparent text-emerald-800 hover:bg-emerald-50", disabled: "bg-transparent text-emerald-400" },
+    solid: { enabled: "bg-emerald-700 hover:bg-emerald-600 text-white dark:bg-emerald-500 dark:hover:bg-emerald-400", disabled: "bg-emerald-200 text-emerald-900 dark:bg-emerald-900/40 dark:text-emerald-500" },
+    soft: { enabled: "bg-emerald-100 hover:bg-emerald-200 text-emerald-900 dark:bg-emerald-500/25 dark:hover:bg-emerald-500/35 dark:text-emerald-200 dark:border-emerald-400/60", disabled: "bg-emerald-100 text-emerald-500 dark:bg-emerald-900/20 dark:text-emerald-600" },
+    outlined: { enabled: "bg-transparent border border-emerald-400 text-emerald-800 hover:bg-emerald-50 dark:border-emerald-400 dark:text-emerald-300 dark:hover:bg-emerald-500/20", disabled: "bg-emerald-50 border border-emerald-200 text-emerald-400 dark:bg-transparent dark:border-emerald-800 dark:text-emerald-700" },
+    plain: { enabled: "bg-transparent text-emerald-800 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-500/20", disabled: "bg-transparent text-emerald-400 dark:text-emerald-700" },
   },
   warning: {
-    solid: { enabled: "bg-amber-700 hover:bg-amber-600 text-white", disabled: "bg-amber-200 text-amber-900" },
-    soft: { enabled: "bg-amber-100 hover:bg-amber-200 text-amber-900", disabled: "bg-amber-100 text-amber-500" },
-    outlined: { enabled: "bg-transparent border border-amber-400 text-amber-800 hover:bg-amber-50", disabled: "bg-amber-50 border border-amber-200 text-amber-400" },
-    plain: { enabled: "bg-transparent text-amber-800 hover:bg-amber-50", disabled: "bg-transparent text-amber-400" },
+    solid: { enabled: "bg-amber-700 hover:bg-amber-600 text-white dark:bg-amber-500 dark:hover:bg-amber-400", disabled: "bg-amber-200 text-amber-900 dark:bg-amber-900/40 dark:text-amber-500" },
+    soft: { enabled: "bg-amber-100 hover:bg-amber-200 text-amber-900 dark:bg-amber-500/25 dark:hover:bg-amber-500/35 dark:text-amber-200 dark:border-amber-400/60", disabled: "bg-amber-100 text-amber-500 dark:bg-amber-900/20 dark:text-amber-600" },
+    outlined: { enabled: "bg-transparent border border-amber-400 text-amber-800 hover:bg-amber-50 dark:border-amber-400 dark:text-amber-300 dark:hover:bg-amber-500/20", disabled: "bg-amber-50 border border-amber-200 text-amber-400 dark:bg-transparent dark:border-amber-800 dark:text-amber-700" },
+    plain: { enabled: "bg-transparent text-amber-800 hover:bg-amber-50 dark:text-amber-300 dark:hover:bg-amber-500/20", disabled: "bg-transparent text-amber-400 dark:text-amber-700" },
   },
   danger: {
-    solid: { enabled: "bg-rose-700 hover:bg-rose-600 text-white", disabled: "bg-rose-200 text-rose-900" },
-    soft: { enabled: "bg-rose-100 hover:bg-rose-200 text-rose-900", disabled: "bg-rose-100 text-rose-500" },
-    outlined: { enabled: "bg-transparent border border-rose-400 text-rose-800 hover:bg-rose-50", disabled: "bg-rose-50 border border-rose-200 text-rose-400" },
-    plain: { enabled: "bg-transparent text-rose-800 hover:bg-rose-50", disabled: "bg-transparent text-rose-400" },
+    solid: { enabled: "bg-rose-700 hover:bg-rose-600 text-white dark:bg-rose-500 dark:hover:bg-rose-400", disabled: "bg-rose-200 text-rose-900 dark:bg-rose-900/40 dark:text-rose-500" },
+    soft: { enabled: "bg-rose-100 hover:bg-rose-200 text-rose-900 dark:bg-rose-500/25 dark:hover:bg-rose-500/35 dark:text-rose-200 dark:border-rose-400/60", disabled: "bg-rose-100 text-rose-500 dark:bg-rose-900/20 dark:text-rose-600" },
+    outlined: { enabled: "bg-transparent border border-rose-400 text-rose-800 hover:bg-rose-50 dark:border-rose-400 dark:text-rose-300 dark:hover:bg-rose-500/20", disabled: "bg-rose-50 border border-rose-200 text-rose-400 dark:bg-transparent dark:border-rose-800 dark:text-rose-700" },
+    plain: { enabled: "bg-transparent text-rose-800 hover:bg-rose-50 dark:text-rose-300 dark:hover:bg-rose-500/20", disabled: "bg-transparent text-rose-400 dark:text-rose-700" },
   },
 };
 

package/src/ui/themes/kButton.theme.js

@@ -1,7 +1,7 @@
 import { INTENT_VARIANT_STYLES } from "./intentColors";
 
 export const K_BUTTON_FOCUS_RING = "focus-visible:ring-slate-900";
-export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center font-medium transition-all rounded-lg";
+export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center font-medium transition-all rounded-lg border border-transparent";
 
 export const K_BUTTON_SIZE_STYLES = {
   normal: {