ketekny-ui-kit 1.0.45 → 1.0.46

package/package.json

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

package/src/style/style.css

@@ -1,4 +1,6 @@
 
+@import "primeicons/primeicons.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/ui/kMessageNew.vue

@@ -7,8 +7,8 @@
         colors.container,
         'relative overflow-hidden shadow-sm ring-1 ring-black/5 transition-[box-shadow,transform] duration-200 dark:ring-white/10',
         'border',
-        accent ? 'border-l-4 rounded-r-md' : 'rounded-md',
-        accent ? accentStripes[type] : '',
+        accentEnabled ? 'border-l-4 rounded-r-md' : 'rounded-md',
+        accentEnabled ? accentStripes[type] : '',
         'focus-within:ring-2 focus-within:ring-primary/30 focus-within:ring-offset-1 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-900',
         sizes[size].padding,
         $attrs.class,
@@ -36,13 +36,12 @@
           <span
             v-else-if="iconStyle === 'badge'"
             :class="[
-              'inline-flex shrink-0 items-center justify-center rounded-full border font-semibold',
-              sizes[size].badge,
-              colors.icon,
+              'inline-flex shrink-0 items-center justify-center',
+              sizes[size].badgeWrap,
             ]"
             aria-hidden="true"
           >
-            {{ iconLetters[type] }}
+            <component :is="badgeIcons[type]" :class="[sizes[size].badgeIcon, colors.title]" aria-hidden="true" />
           </span>
           <!-- Lucide icon -->
           <component
@@ -67,7 +66,7 @@
         <!-- Right: action slot | label | close -->
         <div
           v-if="hasActionSlot || label || isClosable"
-          class="flex shrink-0 items-center gap-2 self-end sm:self-start sm:pl-3"
+          class="ml-auto flex shrink-0 items-center gap-2 self-end sm:self-start sm:pl-3"
         >
           <slot name="action" />
           <span
@@ -86,7 +85,7 @@
             ]"
             :aria-label="`Close ${type} message`"
           >
-            <X :class="sizes[size].close" />
+            <CloseIcon :class="sizes[size].close" />
           </button>
         </div>
       </div>
@@ -96,7 +95,7 @@
 
 <script setup>
 import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
-import { X, Info, CircleCheckBig, TriangleAlert, OctagonX } from 'lucide-vue-next'
+import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX } from 'lucide-vue-next'
 
 // ─── Color config ────────────────────────────────────────────────────────────
 
@@ -109,6 +108,13 @@ const colorConfig = {
       body: 'text-slate-700 dark:text-sky-50',
       label: 'text-slate-500 dark:text-slate-300',
     },
+    standard: {
+      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      icon: 'bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400/40 dark:text-sky-300',
+      title: 'text-sky-700 dark:text-sky-300',
+      body: 'text-slate-700 dark:text-slate-200',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
     outlined: {
       container: 'border-sky-400 bg-white dark:border-sky-500/70 dark:bg-slate-900',
       icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
@@ -132,6 +138,13 @@ const colorConfig = {
       body: 'text-slate-700 dark:text-emerald-50',
       label: 'text-slate-500 dark:text-slate-300',
     },
+    standard: {
+      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      icon: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-500/15 dark:border-emerald-400/40 dark:text-emerald-300',
+      title: 'text-emerald-700 dark:text-emerald-300',
+      body: 'text-slate-700 dark:text-slate-200',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
     outlined: {
       container: 'border-emerald-400 bg-white dark:border-emerald-500/70 dark:bg-slate-900',
       icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
@@ -155,6 +168,13 @@ const colorConfig = {
       body: 'text-slate-700 dark:text-amber-50',
       label: 'text-slate-500 dark:text-slate-300',
     },
+    standard: {
+      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      icon: 'bg-amber-100 border-amber-300 text-amber-700 dark:bg-amber-500/15 dark:border-amber-400/40 dark:text-amber-300',
+      title: 'text-amber-700 dark:text-amber-300',
+      body: 'text-slate-700 dark:text-slate-200',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
     outlined: {
       container: 'border-amber-400 bg-white dark:border-amber-500/70 dark:bg-slate-900',
       icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
@@ -178,6 +198,13 @@ const colorConfig = {
       body: 'text-slate-700 dark:text-rose-50',
       label: 'text-slate-500 dark:text-slate-300',
     },
+    standard: {
+      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      icon: 'bg-rose-100 border-rose-300 text-rose-700 dark:bg-rose-500/15 dark:border-rose-400/40 dark:text-rose-300',
+      title: 'text-rose-700 dark:text-rose-300',
+      body: 'text-slate-700 dark:text-slate-200',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
     outlined: {
       container: 'border-rose-400 bg-white dark:border-rose-500/70 dark:bg-slate-900',
       icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
@@ -206,22 +233,24 @@ const sizes = {
   sm: {
     padding: 'px-3 py-2',
     text: 'text-xs sm:text-sm',
-    badge: 'h-4 w-4 text-[10px]',
-    customIcon: 'text-sm leading-none',
-    lucide: 'h-3.5 w-3.5',
+    badgeWrap: 'h-5 w-5 mt-0.5',
+    badgeIcon: 'h-5 w-5',
+    customIcon: 'text-base leading-none',
+    lucide: 'h-4 w-4',
     close: 'h-3 w-3',
   },
   md: {
     padding: 'px-4 py-3',
     text: 'text-sm sm:text-base',
-    badge: 'h-5 w-5 text-xs',
-    customIcon: 'text-base leading-none',
-    lucide: 'h-4 w-4',
+    badgeWrap: 'h-6 w-6 mt-0.5',
+    badgeIcon: 'h-6 w-6',
+    customIcon: 'text-lg leading-none',
+    lucide: 'h-5 w-5',
     close: 'h-3.5 w-3.5',
   },
 }
 
-const iconLetters = { info: 'i', success: '✓', warning: '!', error: '✕' }
+const badgeIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
 const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
 
 // ─── Props / emits ────────────────────────────────────────────────────────────
@@ -229,13 +258,14 @@ const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAler
 const props = defineProps({
   type: {
     type: String,
-    default: 'info',
+    // Keep legacy default for drop-in compatibility with kMessage.
+    default: 'warning',
     validator: (val) => ['info', 'success', 'warning', 'error'].includes(val),
   },
   variant: {
     type: String,
     default: 'default',
-    validator: (val) => ['default', 'outlined', 'filled'].includes(val),
+    validator: (val) => ['default', 'standard', 'outlined', 'filled'].includes(val),
   },
   iconStyle: {
     type: String,
@@ -277,6 +307,7 @@ const hasActionSlot = computed(() => !!slots.action)
 const hasDefaultSlot = computed(() => !!slots.default)
 const hasIconSlot = computed(() => !!slots.icon)
 const colors = computed(() => colorConfig[props.type][props.variant])
+const accentEnabled = computed(() => props.accent || props.variant === 'standard')
 const dismissAfterMs = computed(() => {
   const value = Number(props.dismissAfter)
   return Number.isFinite(value) && value > 0 ? value : 0