ketekny-ui-kit 1.0.22 → 1.0.24

package/package.json

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

package/src/ui/kSelect.vue

@@ -57,7 +57,7 @@
           <SelectViewport
             ref="viewportRef"
             class="select-viewport p-1 overflow-y-scroll"
-            :style="{ maxHeight: dropdownHeight }"
+            :style="{ maxHeight: resolvedDropdownHeight }"
             @keydown="handleViewportKeydown"
           >
             <SelectItem
@@ -138,9 +138,44 @@ const defaultStyle = "w-full px-3 py-2 border rounded-lg transition shadow-sm fo
 const errorStyle = "border-red-500 focus:ring focus:ring-red-300";
 const disabledStyle = "!bg-gray-100 !text-gray-400 !cursor-not-allowed";
 
+function normalizeDropdownHeight(value) {
+  const raw = String(value ?? "").trim();
+  if (!raw) return "min(400px, 40vh)";
+
+  // Accept Tailwind arbitrary values like max-h-[400px] / min-h-[20rem].
+  const arbitraryMatch = raw.match(/^(?:max-h|min-h)-\[(.+)\]$/);
+  if (arbitraryMatch) return arbitraryMatch[1].trim();
+
+  // Accept Tailwind scale values like max-h-80 -> 20rem.
+  const scaleMatch = raw.match(/^(?:max-h|min-h)-(\d+(?:\.\d+)?)$/);
+  if (scaleMatch) {
+    const scale = Number(scaleMatch[1]);
+    if (Number.isFinite(scale)) return `${scale * 0.25}rem`;
+  }
+
+  // Accept common Tailwind keywords.
+  const keywordMap = {
+    "max-h-full": "100%",
+    "min-h-full": "100%",
+    "max-h-screen": "100vh",
+    "min-h-screen": "100vh",
+    "max-h-fit": "fit-content",
+    "min-h-fit": "fit-content",
+    "max-h-min": "min-content",
+    "min-h-min": "min-content",
+    "max-h-max": "max-content",
+    "min-h-max": "max-content",
+  };
+  if (keywordMap[raw]) return keywordMap[raw];
+
+  // Already valid CSS values (e.g. 20rem, 400px, min(400px, 40vh)).
+  return raw;
+}
+
 const computedId = computed(() => (props.id != null && props.id !== "" ? props.id : generatedId));
 const hasError = computed(() => props.error != null && props.error !== false);
 const isSelectionSet = computed(() => props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== "");
+const resolvedDropdownHeight = computed(() => normalizeDropdownHeight(props.dropdownHeight));
 
 const internalValue = computed({
   get() {

package/src/ui/kToggle.vue

@@ -1,7 +1,14 @@
 <template>
   <div :class="labelStyle === 'inline' ? 'flex items-center' : ''">
     <!-- Block-style label -->
-    <div v-if="showLabel && labelStyle !== 'inline'" :class="['block mb-1 text-sm font-bold', disabled ? 'text-slate-500' : 'text-primary/90']" for="toggle">
+    <div
+      v-if="showLabel && labelStyle !== 'inline'"
+      :class="[
+        'block mb-1 text-sm font-bold',
+        disabled ? 'text-slate-500' : 'text-primary/90',
+      ]"
+      for="toggle"
+    >
       {{ label }}
     </div>
 
@@ -13,27 +20,38 @@
       :aria-disabled="disabled.toString()"
       :disabled="disabled"
       :class="[
-        'w-16 h-8 flex items-center rounded-full p-1 transition duration-300 border',
+        'k-toggle-track',
         disabled
-          ? 'bg-slate-200 border-slate-300 cursor-not-allowed'
+          ? 'k-toggle-track--disabled cursor-not-allowed'
           : modelValue
-            ? 'bg-primary border-primary shadow-sm shadow-primary/30'
-            : 'bg-gray-400 border-gray-400',
-      ]">
+            ? 'k-toggle-track--on'
+            : 'k-toggle-track--off',
+      ]"
+    >
       <div
         :class="[
-          'w-6 h-6 rounded-full shadow-md transform transition duration-300',
-          disabled ? 'bg-slate-100' : modelValue ? 'bg-white ring-2 ring-primary/20' : 'bg-white',
-          modelValue ? 'translate-x-8' : 'translate-x-0',
-        ]"></div>
+          'k-toggle-thumb',
+          disabled
+            ? 'k-toggle-thumb--disabled'
+            : modelValue
+              ? 'k-toggle-thumb--on'
+              : 'k-toggle-thumb--off',
+        ]"
+      ></div>
     </button>
 
     <!-- Inline-style label -->
     <div
       v-if="showLabel && labelStyle === 'inline'"
-      :class="['ml-2 text-sm font-bold', disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90 cursor-pointer']"
+      :class="[
+        'ml-2 text-sm font-bold',
+        disabled
+          ? 'text-slate-500 cursor-not-allowed'
+          : 'text-primary/90 cursor-pointer',
+      ]"
       :for="computedId"
-      @click="toggle">
+      @click="toggle"
+    >
       {{ label }}
     </div>
   </div>
@@ -66,5 +84,93 @@ export default {
 </script>
 
 <style scoped>
-/* Additional styles if needed */
+.k-toggle-track {
+  width: 4rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  padding: 0.25rem;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.k-toggle-track:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(37 99 235 / 0.35);
+}
+
+.k-toggle-track--on {
+  background: #1d4ed8;
+  border-color: #1d4ed8;
+  box-shadow: 0 2px 8px rgb(2 6 23 / 0.25);
+}
+
+.k-toggle-track--off {
+  background: #64748b;
+  border-color: #64748b;
+}
+
+.k-toggle-track--disabled {
+  background: #cbd5e1;
+  border-color: #cbd5e1;
+}
+
+.k-toggle-thumb {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  transition:
+    transform 0.22s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.k-toggle-thumb--on {
+  transform: translateX(2rem);
+  background: #f8fafc;
+  border: 1px solid rgb(203 213 225 / 0.7);
+}
+
+.k-toggle-thumb--off {
+  transform: translateX(0);
+  background: #f8fafc;
+  border: 1px solid rgb(203 213 225 / 0.7);
+}
+
+.k-toggle-thumb--disabled {
+  transform: translateX(0);
+  background: #e2e8f0;
+  border: 1px solid #cbd5e1;
+}
+
+:global(html.dark) .k-toggle-track--on {
+  background: #1d4ed8;
+  border-color: #1d4ed8;
+  box-shadow: 0 2px 8px rgb(2 6 23 / 0.45);
+}
+
+:global(html.dark) .k-toggle-track--off {
+  background: #475569;
+  border-color: #475569;
+}
+
+:global(html.dark) .k-toggle-track--disabled {
+  background: #334155;
+  border-color: #334155;
+}
+
+:global(html.dark) .k-toggle-thumb--on,
+:global(html.dark) .k-toggle-thumb--off {
+  background: #f8fafc;
+  border-color: #cbd5e1;
+}
+
+:global(html.dark) .k-toggle-thumb--disabled {
+  background: #94a3b8;
+  border-color: #64748b;
+}
 </style>

package/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: "class",
   content: [
     "./index.html",
     "./src/**/*.{vue,js,ts,jsx,tsx}",