adapt new Input

dist/sigpro-ui.css

@@ -3101,6 +3101,9 @@
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1 / 2 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -3122,6 +3125,9 @@
   .right-1\/4 {
     right: calc(1 / 4 * 100%);
   }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -4153,6 +4159,19 @@
     mask-size: 100% 100%;
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11l3 3L22 4'/%3E%3C/g%3E%3C/svg%3E");
   }
+  .icon-\[lucide--check\] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
+  }
   .icon-\[lucide--chevron-left\] {
     display: inline-block;
     width: 1em;
@@ -4831,6 +4850,11 @@
       width: 100%;
     }
   }
+  .loading-xs {
+    @layer daisyui.l1.l2 {
+      width: calc(var(--size-selector, 0.25rem) * 4);
+    }
+  }
   .w-3\.5 {
     width: calc(var(--spacing) * 3.5);
   }
@@ -4941,6 +4965,10 @@
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-2 {
     --tw-translate-y: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -5395,12 +5423,6 @@
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-primary\/20 {
-    border-color: var(--color-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -6992,13 +7014,6 @@
       }
     }
   }
-  .hover\:bg-base-100 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-base-100);
-      }
-    }
-  }
   .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
@@ -7128,48 +7143,15 @@
 :root {
   font-size: 14px;
 }
-.input, .select, .textarea {
+.input, .label, .select, .textarea {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   &:focus, &:focus-within {
-    outline: 1px solid transparent !important;
-    outline-offset: 1px !important;
+    outline: none !important;
+    box-shadow: 0 0 4px 0px;
   }
   &:hover:not(:focus) {
     background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
   }
-  &:focus {
-    --focus-color: var(--color-primary);
-    &[class*="-secondary"] {
-      --focus-color: var(--color-secondary);
-    }
-    &[class*="-accent"] {
-      --focus-color: var(--color-accent);
-    }
-    &[class*="-neutral"] {
-      --focus-color: var(--color-neutral);
-    }
-    &[class*="-ghost"] {
-      --focus-color: var(--color-base-content);
-    }
-    &[class*="-info"] {
-      --focus-color: var(--color-info);
-    }
-    &[class*="-success"] {
-      --focus-color: var(--color-success);
-    }
-    &[class*="-warning"] {
-      --focus-color: var(--color-warning);
-    }
-    &[class*="-error"] {
-      --focus-color: var(--color-error);
-    }
-    background-color: oklch(from var(--focus-color) l c h / 0.05);
-    border-color: var(--focus-color);
-    box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
-    &[class*="-ghost"] {
-      border-width: 1px;
-    }
-  }
 }
 .floating-label span {
   color: oklch(30% 0.01 260);
@@ -7188,6 +7170,15 @@
   animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: top;
 }
+.input-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  background: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 @keyframes tabFadeIn {
   from {
     opacity: 0;
@@ -7198,6 +7189,31 @@
     transform: scaleY(1);
   }
 }
+@layer utilities {
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+  }
+  .animate-fade-in {
+    animation: fade-in 0.15s ease-out forwards;
+  }
+}
 @layer base {
   :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
     color-scheme: light;