ketekny-ui-kit 1.0.135 → 1.0.137

package/package.json

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

package/src/ui/kCard.vue

@@ -26,19 +26,19 @@
     >
       <div class="min-w-0 flex-1">
         <slot name="header">
-          <div class="flex items-center gap-3">
-            <span
+          <div class="flex flex-row items-center gap-3">
+            <kIcon
               v-if="icon"
-              class="inline-flex size-8 shrink-0 items-center justify-center rounded-lg"
-              :class="iconClasses"
-            >
-              <kIcon :name="icon" :size="18" :color="iconColor" />
-            </span>
+              :name="icon"
+              class="h-8 w-8 shrink-0"
+              :color="iconColor"
+              aria-hidden="true"
+            />
             <div class="min-w-0">
-              <p v-if="title" class="text-sm font-semibold" :class="titleClasses">
+              <h4 v-if="title" class="font-semibold leading-tight" :class="titleClasses">
                 {{ title }}
-              </p>
-              <p v-if="subtitle" class="text-sm" :class="[subtitleClasses, { 'mt-1': title }]">
+              </h4>
+              <p v-if="subtitle" class="text-sm leading-tight" :class="[subtitleClasses, { 'mt-0.5': title }]">
                 {{ subtitle }}
               </p>
             </div>
@@ -153,11 +153,6 @@ export default {
     subtitleClasses() {
       return this.isDark ? 'text-slate-400' : 'text-slate-500'
     },
-    iconClasses() {
-      return this.isDark
-        ? 'bg-white/10 text-slate-100'
-        : 'bg-primary/10 text-primary'
-    },
     iconColor() {
       return this.isDark ? '#f1f5f9' : 'currentColor'
     },

package/src/ui/kTabs.vue

@@ -1,17 +1,30 @@
 <template>
-  <div class="w-full overflow-hidden bg-white border border-slate-200 rounded-md dark:bg-slate-800 dark:border-slate-700">
-    <div class="k-tabs-scroll flex overflow-x-auto">
+  <div class="w-full">
+    <div
+      class="k-tabs-scroll flex overflow-x-auto overflow-y-hidden border-b border-slate-200 dark:border-slate-700"
+      role="tablist"
+    >
       <button
         v-for="tab in tabs"
         :key="tab.id"
+        type="button"
+        role="tab"
+        :aria-selected="modelValue === tab.id"
+        :tabindex="modelValue === tab.id ? 0 : -1"
         @click="selectTab(tab.id)"
         :class="[
-          'shrink-0 whitespace-nowrap px-4 py-3 text-sm font-medium sm:px-8 sm:py-4 sm:text-lg',
+          '-mb-px inline-flex h-11 shrink-0 items-center gap-2 whitespace-nowrap border-b-2 px-4 text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/30',
           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',
+            ? 'border-primary text-primary'
+            : 'border-transparent text-slate-600 hover:border-slate-300 hover:text-slate-900 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:text-slate-100',
         ]"
       >
+        <component
+          :is="iconComponent(tab.icon)"
+          v-if="tab.icon && iconComponent(tab.icon)"
+          class="size-4 shrink-0"
+          aria-hidden="true"
+        />
         {{ tab.title }}
       </button>
     </div>
@@ -19,8 +32,10 @@
 </template>
 
 <script>
+import * as icons from "@lucide/vue";
+
 export default {
-  name: "TabList",
+  name: "kTabs",
   props: {
     modelValue: { type: [String, Number], required: true },
     tabs: {
@@ -33,6 +48,14 @@ export default {
   },
   emits: ["update:modelValue"],
   methods: {
+    iconComponent(name) {
+      if (!name) return null;
+      const normalizedName = name
+        .split("-")
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join("");
+      return icons[normalizedName] || null;
+    },
     selectTab(id) {
       this.$emit("update:modelValue", id);
     },
@@ -43,6 +66,10 @@ export default {
 <style scoped>
 .k-tabs-scroll {
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: thin;
+  scrollbar-width: none;
+}
+
+.k-tabs-scroll::-webkit-scrollbar {
+  display: none;
 }
 </style>

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

@@ -5,8 +5,8 @@ export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center f
 
 export const K_BUTTON_SIZE_STYLES = {
   normal: {
-    regular: "h-9 px-4 text-sm",
-    iconOnly: "h-9 w-9 p-0",
+    regular: "h-10 px-4 text-sm",
+    iconOnly: "h-10 w-10 p-0",
     icon: "w-4 h-4",
     loader: "w-4 h-4",
     gap: "mr-1.5",
@@ -27,8 +27,8 @@ export const K_BUTTON_SIZE_STYLES = {
   },
   // Backward compatibility aliases
   default: {
-    regular: "h-9 px-4 text-sm",
-    iconOnly: "h-9 w-9 p-0",
+    regular: "h-10 px-4 text-sm",
+    iconOnly: "h-10 w-10 p-0",
     icon: "w-4 h-4",
     loader: "w-4 h-4",
     gap: "mr-1.5",