ketekny-ui-kit 1.0.73 → 1.0.75

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.73",
+  "version": "1.0.75",
   "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,21 +48,5 @@
     "tailwindcss": "^3.4.17",
     "vite": "^6.3.5"
   },
-  "dependencies": {
-    "@primeuix/themes": "^1.1.1",
-    "@vuepic/vue-datepicker": "^11.0.2",
-    "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",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.3.4",
-    "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/style/style.css

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

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/kSpinner.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="flex items-center justify-center w-16 space-x-1" v-if="type == 'line'">
-    <i class="ml-1 text-primary dark:text-sky-200 pi pi-wave-pulse" />
+    <span class="spinner-ring spinner-ring--sm ml-1 text-primary dark:text-sky-200" aria-hidden="true" />
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.15s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.3s' }"></div>
     <div class="w-2 h-2 rounded-full bg-primary dark:bg-sky-200 animate-fade" :style="{ animationDelay: '0.45s' }"></div>
   </div>
 
-  <Loader class="w-6 h-6 mr-2 animate-spin text-primary dark:text-sky-200" style="animation-duration: 1.5s" v-else-if="type == 'circle'" />
+  <span class="spinner-ring mr-2 text-primary dark:text-sky-200" aria-hidden="true" v-else-if="type == 'circle'" />
 </template>
 
-<script setup>
-import { Loader } from "lucide-vue-next";
-</script>
-
 <script>
 export default {
   name: "FourDotSpinner",
@@ -35,4 +31,25 @@ export default {
 .animate-fade {
   animation: fade 1s ease-in-out infinite;
 }
+
+.spinner-ring {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+  display: inline-block;
+}
+
+.spinner-ring--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>

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: {