ketekny-ui-kit 1.0.25 → 1.0.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.25",
+  "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/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/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,6 +1,6 @@
 export const INTENT_VARIANT_STYLES = {
   primary: {
-    solid: { enabled: "bg-sky-700 hover:bg-sky-600 text-white dark:bg-sky-500 dark:hover:bg-sky-400", disabled: "bg-sky-200 text-sky-900 dark:bg-sky-900/40 dark:text-sky-500" },
+    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" },