@keenthemes/ktui 1.0.20 → 1.0.21

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -25,6 +25,7 @@
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
     --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
@@ -48,6 +49,7 @@
     --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-violet-800: oklch(43.2% 0.232 292.759);
     --color-violet-950: oklch(28.3% 0.141 291.089);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -76,6 +78,7 @@
     --spacing: 0.25rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-4xl: 56rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -86,6 +89,10 @@
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
@@ -285,7 +292,7 @@
     padding: 0;
     margin: -1px;
     overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
     white-space: nowrap;
     border-width: 0;
   }
@@ -355,6 +362,9 @@
   .ms-auto {
     margin-inline-start: auto;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
@@ -379,6 +389,9 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
@@ -422,6 +435,10 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -431,6 +448,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
   .max-h-\[250px\] {
     max-height: 250px;
   }
@@ -455,6 +475,9 @@
   .w-full {
     width: 100%;
   }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -543,6 +566,20 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -550,6 +587,13 @@
       margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .overflow-auto {
     overflow: auto;
   }
@@ -635,9 +679,21 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
   .bg-pink-500 {
     background-color: var(--color-pink-500);
   }
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -653,6 +709,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -674,6 +733,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -689,6 +751,9 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
   .ps-5 {
     padding-inline-start: calc(var(--spacing) * 5);
   }
@@ -710,6 +775,17 @@
   .text-start {
     text-align: start;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -772,12 +848,21 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-green-400 {
+    color: var(--color-green-400);
+  }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
   .text-primary {
     color: var(--primary);
   }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -811,6 +896,10 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -834,7 +923,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -889,6 +978,13 @@
       }
     }
   }
+  .hover\:bg-gray-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-600);
+      }
+    }
+  }
   .hover\:text-blue-600 {
     &:hover {
       @media (hover: hover) {
@@ -2184,7 +2280,7 @@
     border-radius: calc(var(--radius) - 2px);
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     &:focus {
@@ -3185,7 +3281,7 @@
     color: var(--popover-foreground);
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 300ms;
@@ -4059,7 +4155,6 @@
     top: calc(1/2 * 100%);
     display: none;
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
     overflow: auto;
@@ -4127,7 +4222,6 @@
       inset-inline-start: calc(1/2 * 100%);
       top: calc(1/2 * 100%);
       --tw-translate-x: calc(calc(1/2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
       --tw-translate-y: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -4494,7 +4588,7 @@
         color: var(--accent-foreground);
       }
     }
-    &[aria-disabled=true],	&.disabled {
+    &[aria-disabled='true'],	&.disabled {
       pointer-events: none;
       opacity: 60%;
     }
@@ -4505,7 +4599,6 @@
   }
   .kt-select-option-text {
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
@@ -4524,15 +4617,13 @@
   }
   .kt-select-placeholder {
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
     text-overflow: ellipsis;
     color: var(--muted-foreground);
   }
-  .kt-select-display:not([data-multiple=true]) {
+  .kt-select-display:not([data-multiple='true']) {
     width: 100%;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
@@ -4548,7 +4639,7 @@
     --tw-leading: var(--text-sm--line-height);
     line-height: var(--text-sm--line-height);
     background-position: right 0.5rem center;
-    &[data-multiple=true] {
+    &[data-multiple='true'] {
       height: auto;
       min-height: calc(var(--spacing) * 8.5);
       flex-wrap: wrap;
@@ -4565,7 +4656,7 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     background-position: right 0.5rem center;
-    &[data-multiple=true] {
+    &[data-multiple='true'] {
       height: auto;
       min-height: calc(var(--spacing) * 7);
       background-position: right 0.5rem top 0.575rem;
@@ -4581,7 +4672,7 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     background-position: right 0.6rem center;
-    &[data-multiple=true] {
+    &[data-multiple='true'] {
       height: auto;
       min-height: calc(var(--spacing) * 10);
       padding-block: calc(var(--spacing) * 2);
@@ -4593,19 +4684,19 @@
   [dir='rtl'] {
     .kt-select {
       background-position: left 0.5rem center;
-      &[data-multiple=true] {
+      &[data-multiple='true'] {
         background-position: left 0.5rem top 0.675rem;
       }
     }
     .kt-select-sm {
       background-position: left 0.5rem center;
-      &[data-multiple=true] {
+      &[data-multiple='true'] {
         background-position: left 0.5rem top 0.575rem;
       }
     }
     .kt-select-lg {
       background-position: left 0.75rem center;
-      &[data-multiple=true] {
+      &[data-multiple='true'] {
         background-position: left 0.75rem top 0.85rem;
       }
     }
@@ -4683,13 +4774,11 @@
       top: calc(1/2 * 100%);
       display: block;
       --tw-translate-x: calc(var(--spacing) * 1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
       --tw-translate-y: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
       border-radius: calc(infinity * 1px);
       background-color: var(--color-white);
       --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition-property: transform, translate, scale, rotate;
@@ -5125,7 +5214,7 @@
       }
     }
     td,	th {
-      input[type=checkbox] {
+      input[type='checkbox'] {
         vertical-align: inherit;
       }
     }
@@ -5516,17 +5605,17 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     opacity: 0;
-    animation: kt-toast-in 0.28s cubic-bezier(.4,0,.2,1) forwards;
-    transition: top 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s cubic-bezier(.4,0,.2,1);
+    animation: kt-toast-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),	opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     &.kt-toast-top-end {
       inset-inline-end: calc(var(--spacing) * 0);
       top: calc(var(--spacing) * 0);
       bottom: auto;
     }
     &.kt-toast-top-center {
-      inset-inline-start: calc(1/2 * 100%);
       top: calc(var(--spacing) * 0);
       bottom: auto;
+      left: calc(1/2 * 100%);
       --tw-translate-x: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -5535,15 +5624,34 @@
       top: calc(var(--spacing) * 0);
       bottom: auto;
     }
+    &.kt-toast-middle-end {
+      inset-inline-end: calc(var(--spacing) * 0);
+      top: calc(1/2 * 100%);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    &.kt-toast-middle-center {
+      top: calc(1/2 * 100%);
+      left: calc(1/2 * 100%);
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    &.kt-toast-middle-start {
+      inset-inline-start: calc(var(--spacing) * 0);
+      top: calc(1/2 * 100%);
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     &.kt-toast-bottom-end {
       inset-inline-end: calc(var(--spacing) * 0);
       top: auto;
       bottom: calc(var(--spacing) * 0);
     }
     &.kt-toast-bottom-center {
-      inset-inline-start: calc(1/2 * 100%);
       top: auto;
       bottom: calc(var(--spacing) * 0);
+      left: calc(1/2 * 100%);
       --tw-translate-x: calc(calc(1/2 * 100%) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
@@ -5632,6 +5740,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
@@ -5777,11 +5890,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-tracking {
   syntax: "*";
   inherits: false;
@@ -5816,6 +5924,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
@@ -5849,7 +5958,6 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-space-y-reverse: 0;
       --tw-tracking: initial;
       --tw-ease: initial;
       --tw-content: "";

package/examples/image-input/file-upload-example.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KTUI Image Input - File Upload Example</title>
+    <link rel="stylesheet" href="../../dist/styles.css">
+    <style>
+        body { padding: 2rem; font-family: Arial, sans-serif; }
+        .example-section { margin: 2rem 0; padding: 1rem; border: 1px solid #ddd; }
+        .test-result { margin: 0.5rem 0; padding: 0.5rem; background: #f5f5f5; }
+        .success { background: #d4edda; color: #155724; }
+        .error { background: #f8d7da; color: #721c24; }
+        .info { background: #d1ecf1; color: #0c5460; }
+        .code-block { background: #f8f9fa; padding: 1rem; border-radius: 4px; margin: 1rem 0; }
+    </style>
+</head>
+<body>
+    <h1>KTUI Image Input - File Upload Example</h1>
+    <p>This example demonstrates how to use the KTUI Image Input component with proper file upload functionality.</p>
+
+    <div class="example-section">
+        <h2>Image Input Component</h2>
+        <div class="kt-image-input size-16" data-kt-image-input="true">
+            <input accept=".png, .jpg, .jpeg" name="avatar" type="file">
+            <input name="avatar_remove" type="hidden"/>
+            <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
+                <i class="ki-filled ki-cross"></i>
+            </button>
+            <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
+                <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="example-section">
+        <h2>Testing Controls</h2>
+        <button onclick="testFileAccess()">Test File Access</button>
+        <button onclick="testPublicMethods()">Test Public Methods</button>
+        <button onclick="testFormSubmission()">Test Form Submission</button>
+        <button onclick="clearResults()">Clear Results</button>
+    </div>
+
+    <div class="example-section">
+        <h2>Test Results</h2>
+        <div id="test-results"></div>
+    </div>
+
+    <div class="example-section">
+        <h2>Form Submission Example</h2>
+        <p>This form demonstrates how to properly handle file uploads with KTUI Image Input:</p>
+        <form id="test-form" onsubmit="handleFormSubmit(event)">
+            <div class="kt-image-input size-16" data-kt-image-input="true">
+                <input accept=".png, .jpg, .jpeg" name="test_image" type="file">
+                <input name="test_image_remove" type="hidden"/>
+                <button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button">
+                    <i class="ki-filled ki-cross"></i>
+                </button>
+                <div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true">
+                    <div class="kt-image-input-preview" data-kt-image-input-preview="true"></div>
+                </div>
+            </div>
+            <button type="submit">Submit Form</button>
+        </form>
+    </div>
+
+    <div class="example-section">
+        <h2>Usage Code Example</h2>
+        <div class="code-block">
+            <h3>HTML Structure</h3>
+            <pre><code>&lt;div class="kt-image-input size-16" data-kt-image-input="true"&gt;
+    &lt;input accept=".png, .jpg, .jpeg" name="avatar" type="file"&gt;
+    &lt;input name="avatar_remove" type="hidden"/&gt;
+    &lt;button class="kt-image-input-remove" data-kt-image-input-remove="true" type="button"&gt;
+        &lt;i class="ki-filled ki-cross"&gt;&lt;/i&gt;
+    &lt;/button&gt;
+    &lt;div class="kt-image-input-placeholder" data-kt-image-input-placeholder="true"&gt;
+        &lt;div class="kt-image-input-preview" data-kt-image-input-preview="true"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+            <h3>JavaScript - File Upload</h3>
+            <pre><code>// Get the KTUI Image Input instance
+const imageInput = KTImageInput.getInstance(element);
+
+// Access the selected file for form submission
+const selectedFile = imageInput.getSelectedFile();
+if (selectedFile) {
+    const formData = new FormData();
+    formData.append('image', selectedFile);
+    // Submit formData to server
+}
+
+// Check component state
+if (imageInput.isEmpty()) {
+    console.log('No file selected');
+}
+
+if (imageInput.isChanged()) {
+    console.log('File has been selected');
+}</code></pre>
+        </div>
+    </div>
+
+    <script src="../../dist/ktui.min.js"></script>
+    <script>
+        let imageInputInstance = null;
+
+        // Initialize when DOM is ready
+        document.addEventListener('DOMContentLoaded', function() {
+            const element = document.querySelector('[data-kt-image-input]');
+            if (element) {
+                imageInputInstance = KTImageInput.getInstance(element);
+                addResult('Component initialized successfully', 'success');
+            }
+        });
+
+        function addResult(message, type = 'info') {
+            const results = document.getElementById('test-results');
+            const div = document.createElement('div');
+            div.className = `test-result ${type}`;
+            div.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+            results.appendChild(div);
+        }
+
+        function testFileAccess() {
+            if (!imageInputInstance) {
+                addResult('Image input instance not found', 'error');
+                return;
+            }
+
+            const file = imageInputInstance.getSelectedFile();
+            if (file) {
+                addResult(`File access successful: ${file.name} (${file.size} bytes)`, 'success');
+            } else {
+                addResult('No file selected', 'info');
+            }
+        }
+
+        function testPublicMethods() {
+            if (!imageInputInstance) {
+                addResult('Image input instance not found', 'error');
+                return;
+            }
+
+            const isEmpty = imageInputInstance.isEmpty();
+            const isChanged = imageInputInstance.isChanged();
+
+            addResult(`isEmpty(): ${isEmpty}`, isEmpty ? 'info' : 'success');
+            addResult(`isChanged(): ${isChanged}`, isChanged ? 'success' : 'info');
+        }
+
+        function testFormSubmission() {
+            const form = document.getElementById('test-form');
+            const fileInput = form.querySelector('input[type="file"]');
+            const formData = new FormData(form);
+
+            addResult('Form data created', 'info');
+
+            if (fileInput.files.length > 0) {
+                addResult(`File in form: ${fileInput.files[0].name}`, 'success');
+            } else {
+                addResult('No file in form data (expected - input is cleared for UI)', 'info');
+            }
+
+            // Test with KTUI instance
+            const formImageInput = KTImageInput.getInstance(form.querySelector('[data-kt-image-input]'));
+            if (formImageInput) {
+                const selectedFile = formImageInput.getSelectedFile();
+                if (selectedFile) {
+                    addResult(`KTUI file access: ${selectedFile.name}`, 'success');
+                } else {
+                    addResult('No file in KTUI instance', 'error');
+                }
+            }
+        }
+
+        function handleFormSubmit(event) {
+            event.preventDefault();
+            addResult('Form submission intercepted for testing', 'info');
+            testFormSubmission();
+        }
+
+        function clearResults() {
+            document.getElementById('test-results').innerHTML = '';
+        }
+    </script>
+</body>
+</html>

package/examples/select/remote-data_.html

@@ -21,6 +21,11 @@
       data-kt-select-data-field-value="id"
       data-kt-select-data-field-text="name"
       data-kt-select-enable-search="true"
+      data-kt-select-search-param="q"
+      data-kt-select-search-min-length="2"
+      data-kt-select-search-debounce="300"
+      data-kt-select-debug="true"
+      placeholder="Search users..."
     ></select>
 
 			</div>