Before repair nav components

components/discarted/Input.js

@@ -0,0 +1,46 @@
+import { h, $, when, fx } from 'sigpro';
+import { get, cls, isFn } from '../All.js';
+
+export const Input = (props) => {
+  const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = props;
+
+  const showPassword = $(false);
+  const isFocused = $(false);
+  const isPassword = props.type === 'password';
+  const pattern = rule ?? null;
+
+  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", { pattern: pattern, class: () => cls('input validator', props.class) },
+        [
+          label && !float ? h('span', { class: 'label' }, label) : null,
+          left ?? null,
+          h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, 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
+        ]),
+        hint ? h('div', { class: "validator-hint" }, hint) : null,
+      
+      when(isFocused, () => fx({ duration: 300, slide: true },
+        h('div', { class: 'input-content', onmousedown: e => e.preventDefault() },
+          [
+            isFn(content) ? content(isFocused) : content
+          ])
+      ))
+    ]),
+  ]);
+};