ketekny-ui-kit 1.0.74 → 1.0.76

package/README.md

@@ -8,24 +8,28 @@ Vue 3 UI component library with Tailwind CSS styling and utility plugins.
 - Tailwind CSS 3 build pipeline in your app (`tailwindcss`, `postcss`, `autoprefixer`)
 - This package is built and tested against Tailwind CSS 3.x; Tailwind CSS 4 is not supported by the current setup
 
-## Installation
+## Consumer Dependencies
 
-Needed packages (install what is missing)
+Install these in the consuming app:
 
 ```bash
-# Required peer dependency:
-npm install vue
+npm install vue @lucide/vue class-variance-authority clsx dayjs element-plus moment reka-ui simple-code-editor tailwind-merge vue-router vue3-easy-data-table
+```
 
-# If your app does not already use Tailwind CSS 3:
+If the app does not already include Tailwind CSS 3:
+
+```bash
 npm install -D tailwindcss@^3 postcss autoprefixer
 ```
 
+## Installation
+
+Needed packages (install what is missing)
+
 ```bash
 npm install ketekny-ui-kit
 ```
 
-
-
 ## Quick Start
 
 In your app entry (`main.js` / `main.ts`):

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -20,7 +20,18 @@
     "library"
   ],
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "@lucide/vue": "^1.17.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "1.11.19",
+    "element-plus": "^2.13.5",
+    "moment": "^2.30.1",
+    "reka-ui": "^2.8.2",
+    "simple-code-editor": "^2.0.9",
+    "tailwind-merge": "^3.5.0",
+    "vue-router": "^4.6.4",
+    "vue3-easy-data-table": "^1.5.47"
   },
   "scripts": {
     "dev": "vite",
@@ -37,17 +48,5 @@
     "tailwindcss": "^3.4.17",
     "vite": "^6.3.5"
   },
-  "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "dayjs": "1.11.19",
-    "element-plus": "^2.13.5",
-    "lucide-vue-next": "^0.511.0",
-    "moment": "^2.30.1",
-    "reka-ui": "^2.8.2",
-    "simple-code-editor": "^2.0.9",
-    "tailwind-merge": "^3.5.0",
-    "vue-router": "^4.6.4",
-    "vue3-easy-data-table": "^1.5.47"
-  }
+  "dependencies": {}
 }

package/src/layout/kAppHeader.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { Menu, X } from "lucide-vue-next";
+import { Menu, X } from "@lucide/vue";
 </script>
 
 <script>

package/src/layout/twoColLayout.vue

@@ -77,10 +77,9 @@
           />
         </div>
         <div v-else-if="mainMenu.length" class="mx-2 mt-3 space-y-3">
-          <component
+          <RouterLink
             v-for="item in normalizedMainMenu"
             :key="item.key"
-            :is="menuItemTag(item)"
             v-bind="item.bindings"
             class="flex w-full items-start gap-3 rounded-2xl border px-4 py-4 text-left transition-all duration-200"
             :class="item.classes"
@@ -103,7 +102,7 @@
                 {{ item.description }}
               </span>
             </span>
-          </component>
+          </RouterLink>
         </div>
       </div>
 

package/src/ui/kAlert.vue

@@ -49,7 +49,7 @@
 <script setup>
 import { ref, computed } from "vue";
 import kButton from "./kButton.vue";
-import { Check, XCircleIcon, AlertTriangleIcon, Info } from "lucide-vue-next";
+import { Check, XCircleIcon, AlertTriangleIcon, Info } from "@lucide/vue";
 
 const visible = ref(false);
 const title = ref("");

package/src/ui/kButton.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script setup>
-import { Loader } from "lucide-vue-next";
-import * as icons from "lucide-vue-next";
+import { Loader } from "@lucide/vue";
+import * as icons from "@lucide/vue";
 </script>
 
 <script>

package/src/ui/kDialog.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { X } from 'lucide-vue-next'
+import { X } from '@lucide/vue'
 
 // 🔥 Global z-index tracker
 let dialogZIndexCounter = 1000

package/src/ui/kDrawer.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { X } from 'lucide-vue-next'
+import { X } from '@lucide/vue'
 
 export default {
   name: 'KDrawer',

package/src/ui/kEditor.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script setup>
-import { Bold, Italic, Underline, List } from "lucide-vue-next";
+import { Bold, Italic, Underline, List } from "@lucide/vue";
 </script>
 
 <script>

package/src/ui/kIcon.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import * as icons from 'lucide-vue-next';
+import * as icons from '@lucide/vue';
 
 export default {
   props: {

package/src/ui/kInput.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import * as icons from "lucide-vue-next";
+import * as icons from "@lucide/vue";
 import { K_INPUT_THEME } from "./themes/kInput.theme";
 
 export default {

package/src/ui/kMessage.vue

@@ -116,7 +116,7 @@
 
 <script setup>
 import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
-import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX, Clock3 } from 'lucide-vue-next'
+import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX, Clock3 } from '@lucide/vue'
 
 // ─── Color config ────────────────────────────────────────────────────────────
 

package/src/ui/kSearch.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { Search } from "lucide-vue-next";
+import { Search } from "@lucide/vue";
 </script>
 
 <script>

package/src/ui/kSelect.vue

@@ -112,7 +112,7 @@ import {
   SelectValue,
   SelectViewport,
 } from "reka-ui";
-import { X, ChevronDown, Check, Search, SearchX } from "lucide-vue-next";
+import { X, ChevronDown, Check, Search, SearchX } from "@lucide/vue";
 
 const props = defineProps({
   options: { type: Array, required: true },

package/src/ui/kToast.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { CheckCircleIcon, XCircleIcon, AlertCircleIcon, InfoIcon, X } from "lucide-vue-next";
+import { CheckCircleIcon, XCircleIcon, AlertCircleIcon, InfoIcon, X } from "@lucide/vue";
 
 export default {
   name: "kToast",

package/src/ui/kTreeBranch.vue

@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { ChevronRight } from 'lucide-vue-next'
+import { ChevronRight } from '@lucide/vue'
 
 export default {
   name: 'kTreeBranch',

package/src/ui/kUploader.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script>
-import { UploadCloudIcon, FileIcon, CheckCircleIcon, XIcon } from 'lucide-vue-next'
+import { UploadCloudIcon, FileIcon, CheckCircleIcon, XIcon } from '@lucide/vue'
 
 export default {
   name: 'FileUpload',

package/tailwind.config.js

@@ -11,10 +11,10 @@ export default {
     { pattern: /(bg|text|border)-semantic-(success|warning|error|info)-(bg|border|text|disabled|button)/ },
 
     // Intent-driven classes may not always be statically discoverable in downstream builds.
-    { pattern: /(bg|text|border|ring)-(sky|slate|emerald|amber|rose)-(50|100|200|300|400|500|600|700|800|900)/ },
-    { pattern: /hover:(bg|text|border|ring)-(sky|slate|emerald|amber|rose)-(50|100|200|300|400|500|600|700|800|900)/ },
-    { pattern: /focus:(bg|text|border|ring)-(sky|slate|emerald|amber|rose)-(50|100|200|300|400|500|600|700|800|900)/ },
-    { pattern: /focus-visible:(bg|text|border|ring)-(sky|slate|emerald|amber|rose)-(50|100|200|300|400|500|600|700|800|900)/ },
+    {
+      pattern: /(bg|text|border|ring)-(sky|slate|emerald|amber|rose)-(50|100|200|300|400|500|600|700|800|900)/,
+      variants: ["hover", "focus", "focus-visible"],
+    },
   ],
   theme: {
     extend: {