adapt new Input

components/Input.js

@@ -0,0 +1,60 @@
+import { h, $, when, fx } from 'sigpro';
+import { get, cls, isFunc } from './_core.js';
+
+export const Input = (props) => {
+  const { label, icon, float, placeholder, value, left, right, content, ...rest } = props;
+
+  const showPassword = $(false);
+  const isFocused = $(false);
+  const isPassword = props.type === 'password';
+
+  const inputType = () => isPassword
+    ? (get(showPassword) ? 'text' : 'password')
+    : (props.type || 'text');
+
+  return h("div", {
+    class: "input-container",
+    onfocusin: () => isFocused(true),
+    onfocusout: (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        isFocused(false);
+      }
+    }
+  }, [
+    h('label', { class: "floating-label" }, [
+      float ? h("span", {}, label) : null,
+      h("label", {
+        class: () => cls('input', props.class)
+      }, [
+        label && !float ? h('span', { class: 'label' }, label) : null,
+        left ?? null,
+        h('input', {
+          ...rest,
+          type: inputType,
+          class: 'grow',
+          placeholder: placeholder || label || ' ',
+          value: value
+        }),
+        right ?? null,
+
+        isPassword ? h('label', { class: 'swap swap-rotate ml-2' }, [
+          h('input', {
+            type: 'checkbox',
+            onchange: (e) => showPassword(e.target.checked)
+          }),
+          h('span', { class: 'swap-on icon-[lucide--eye]' }),
+          h('span', { class: 'swap-off icon-[lucide--eye-off]' })
+        ]) : null
+      ]),
+
+      when(isFocused, () => fx({ duration: 300, slide: true },
+        h('div', {
+          class: 'input-content',
+          onmousedown: e => e.preventDefault()
+        }, [
+          isFunc(content) ? content(isFocused) : content
+        ])
+      ))
+    ])
+  ]);
+};