ketekny-ui-kit 1.0.133 → 1.0.135

package/package.json

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

package/src/ui/kCard.vue

@@ -1,12 +1,21 @@
 <template>
-  <article class="self-start overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
+  <article
+    class="self-start overflow-hidden rounded-xl border shadow-sm"
+    :class="[cardClasses, { dark: isDark }]"
+    :data-theme="resolvedTheme"
+  >
     <header
       v-if="hasHeader"
-      class="flex items-start justify-between gap-3 border-slate-200 px-5 py-4"
-      :class="{
-        'border-b': !isCollapsed,
-        'group cursor-pointer select-none transition-colors hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/30': collapsible,
-      }"
+      class="flex justify-between gap-3 px-5 py-4"
+      :class="[
+        headerClasses,
+        {
+          'border-b': !isCollapsed,
+          'group cursor-pointer select-none transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/30': collapsible,
+          'items-start': subtitle,
+          'items-center': !subtitle,
+        },
+      ]"
       :role="collapsible ? 'button' : undefined"
       :tabindex="collapsible ? 0 : undefined"
       :aria-label="collapsible ? (isCollapsed ? 'Expand card body' : 'Collapse card body') : undefined"
@@ -17,18 +26,30 @@
     >
       <div class="min-w-0 flex-1">
         <slot name="header">
-          <p v-if="title" class="text-sm font-semibold text-slate-900">
-            {{ title }}
-          </p>
-          <p v-if="subtitle" :class="title ? 'mt-1 text-sm text-slate-500' : 'text-sm text-slate-500'">
-            {{ subtitle }}
-          </p>
+          <div class="flex items-center gap-3">
+            <span
+              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>
+            <div class="min-w-0">
+              <p v-if="title" class="text-sm font-semibold" :class="titleClasses">
+                {{ title }}
+              </p>
+              <p v-if="subtitle" class="text-sm" :class="[subtitleClasses, { 'mt-1': title }]">
+                {{ subtitle }}
+              </p>
+            </div>
+          </div>
         </slot>
       </div>
 
       <span
         v-if="collapsible"
-        class="-mr-1 inline-flex size-8 shrink-0 items-center justify-center text-slate-500 transition-colors group-hover:text-slate-700"
+        class="-mr-1 inline-flex size-8 shrink-0 items-center justify-center transition-colors"
+        :class="collapseIconClasses"
       >
         <ChevronDown
           class="size-5 transition-transform duration-200"
@@ -38,13 +59,17 @@
       </span>
     </header>
 
-    <div v-show="!isCollapsed" class="px-5 py-4">
+    <div
+      v-show="!isCollapsed"
+      :class="[bodyClasses, dense ? 'p-0' : 'px-5 py-4']"
+    >
       <slot />
     </div>
 
     <footer
       v-if="$slots.footer"
-      class="border-t border-slate-200 px-5 py-4"
+      class="border-t px-5 py-4"
+      :class="footerClasses"
     >
       <slot name="footer" />
     </footer>
@@ -53,10 +78,11 @@
 
 <script>
 import { ChevronDown } from '@lucide/vue'
+import kIcon from './kIcon.vue'
 
 export default {
   name: 'kCard',
-  components: { ChevronDown },
+  components: { ChevronDown, kIcon },
   emits: ['update:collapsed', 'toggle'],
   props: {
     title: {
@@ -67,6 +93,10 @@ export default {
       type: String,
       default: '',
     },
+    icon: {
+      type: String,
+      default: '',
+    },
     collapsible: {
       type: Boolean,
       default: false,
@@ -75,26 +105,97 @@ export default {
       type: Boolean,
       default: false,
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
+    theme: {
+      type: String,
+      default: 'auto',
+      validator: (value) => ['light', 'dark', 'auto', 'invert'].includes(value),
+    },
   },
   data() {
     return {
       internalCollapsed: this.collapsed,
+      appTheme: 'light',
     }
   },
   computed: {
     hasHeader() {
-      return Boolean(this.$slots.header || this.title || this.subtitle || this.collapsible)
+      return Boolean(this.$slots.header || this.title || this.subtitle || this.icon || this.collapsible)
     },
     isCollapsed() {
       return this.collapsible && this.internalCollapsed
     },
+    resolvedTheme() {
+      if (this.theme === 'auto') return this.appTheme
+      if (this.theme === 'invert') return this.appTheme === 'dark' ? 'light' : 'dark'
+      return this.theme
+    },
+    isDark() {
+      return this.resolvedTheme === 'dark'
+    },
+    cardClasses() {
+      return this.isDark
+        ? 'border-slate-700 bg-slate-900 text-slate-100'
+        : 'border-slate-200 bg-white text-slate-900'
+    },
+    headerClasses() {
+      if (this.isDark) {
+        return `border-slate-700 bg-slate-800/70${this.collapsible ? ' hover:bg-slate-800' : ''}`
+      }
+      return `border-slate-200 bg-slate-50/70${this.collapsible ? ' hover:bg-slate-100' : ''}`
+    },
+    titleClasses() {
+      return this.isDark ? 'text-slate-100' : 'text-slate-900'
+    },
+    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'
+    },
+    collapseIconClasses() {
+      return this.isDark
+        ? 'text-slate-400 group-hover:text-slate-200'
+        : 'text-slate-500 group-hover:text-slate-700'
+    },
+    bodyClasses() {
+      return this.isDark ? 'bg-slate-900' : 'bg-white'
+    },
+    footerClasses() {
+      return this.isDark
+        ? 'border-slate-700 bg-slate-800'
+        : 'border-slate-200 bg-slate-50'
+    },
   },
   watch: {
     collapsed(value) {
       this.internalCollapsed = value
     },
   },
+  mounted() {
+    this.syncAppTheme()
+    this.themeObserver = new MutationObserver(this.syncAppTheme)
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class', 'data-theme'],
+    })
+  },
+  beforeUnmount() {
+    this.themeObserver?.disconnect()
+  },
   methods: {
+    syncAppTheme() {
+      const root = document.documentElement
+      this.appTheme = root.dataset.theme === 'dark' || root.classList.contains('dark') ? 'dark' : 'light'
+    },
     toggleCollapsed() {
       this.internalCollapsed = !this.internalCollapsed
       this.$emit('update:collapsed', this.internalCollapsed)

package/src/ui/kList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full">
+  <div class="w-full" :class="{ 'k-list--dense': dense }">
     <dl
       v-if="!isRowFormat"
       class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
@@ -7,8 +7,11 @@
       <div
         v-for="(stat, index) in normalizedStats"
         :key="resolveKey(stat, index)"
-        class="flex items-center gap-3 border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800"
-        :class="entryClass(stat)"
+        class="flex items-center gap-3"
+        :class="[
+          dense ? '' : 'border border-gray-200 rounded-xl bg-white p-3 dark:border-slate-700 dark:bg-slate-800',
+          entryClass(stat),
+        ]"
         :role="stat.action ? 'button' : undefined"
         :tabindex="stat.action ? 0 : undefined"
         @click="handleAction(stat, index)"
@@ -38,7 +41,11 @@
       </div>
     </dl>
 
-    <div v-else class="overflow-hidden bg-white border border-gray-200 rounded-xl dark:bg-slate-800 dark:border-slate-700">
+    <div
+      v-else
+      class="overflow-hidden bg-white dark:bg-slate-800"
+      :class="{ 'border border-gray-200 rounded-xl dark:border-slate-700': !dense }"
+    >
       <table class="w-full">
         <tbody>
           <tr
@@ -52,7 +59,10 @@
             @keydown.enter.prevent="handleAction(stat, index)"
             @keydown.space.prevent="handleAction(stat, index)"
           >
-            <td class="px-4 py-3 text-sm text-gray-600 dark:text-slate-400">
+            <td
+              class="py-3 text-sm text-gray-600 dark:text-slate-400"
+              :class="dense ? 'px-5' : 'px-4'"
+            >
               <div class="flex items-center gap-2">
                 <div
                   v-if="stat.icon"
@@ -72,7 +82,10 @@
                 <span>{{ stat.label }}</span>
               </div>
             </td>
-            <td class="px-4 py-3 text-base font-semibold text-right text-gray-900 dark:text-slate-100">
+            <td
+              class="py-3 text-base font-semibold text-right text-gray-900 dark:text-slate-100"
+              :class="dense ? 'px-5' : 'px-4'"
+            >
               {{ stat.value }}
             </td>
           </tr>
@@ -100,6 +113,10 @@ export default {
       default: 'col',
       validator: (value) => ['col', 'row'].includes(value),
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['action'],
   computed: {