adapt new Input

components/InputBase.js

@@ -0,0 +1,58 @@
+import { h, $ } from 'sigpro.js';
+import { ui, cls, get } from './_core.js';
+
+export const InputBase = ({
+  loading = false,
+  ui: uiOptions = '',
+  class: className = '',
+  type = 'text',
+  value,
+  onInput,
+  ...inputProps
+}) => {
+  const isPassword = type === 'password';
+  const showPassword = $(false);
+  
+  const inputClasses = cls(
+    ui('input', uiOptions),
+    className,
+    isPassword && 'pr-10',
+    loading && 'loading loading-spinner loading-xs absolute right-2 top-1/2 -translate-y-1/2'
+  );
+
+  let inputEl = h('input', {
+    class: inputClasses + (isPassword ? ' pr-10' : ''),
+    type: isPassword ? 'text' : 'password',
+    value,
+    oninput: onInput,
+    ...inputProps
+  });
+
+  if (isPassword) {
+    const toggle = h('label', {
+      class: 'swap swap-rotate absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer'
+    }, [
+      h('input', {
+        type: 'checkbox',
+        checked: showPassword(),
+        onchange: (e) => showPassword(e.target.checked)
+      }),
+      h('span', { class: 'swap-on icon-[lucide--eye]' }),
+      h('span', { class: 'swap-off icon-[lucide--eye-off]' })
+    ]);
+    inputEl = h('div', { class: 'relative w-full' }, [inputEl, toggle]);
+  }
+
+  if (icon) {
+    const isIconClass = icon.includes('-') || icon.includes('icon-');
+    const iconElement = isIconClass
+      ? h('span', { class: icon })
+      : h('span', { class: 'opacity-50' }, icon);
+    content = h('label', { class: ui('input', uiOptions).replace('input-', '') }, [
+      iconElement,
+      h('span', { class: 'opacity-70' })
+    ]);
+  }
+
+  return inputEl;
+};