wip(desktop): progress

1 files changed, 36 insertions, 6 deletions

diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 82f704e8c..8e2a115c6 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -4,31 +4,61 @@ import type { ComponentProps } from "solid-js"
 
 export interface InputProps
   extends ComponentProps<typeof Kobalte.Input>,
-    Partial<Pick<ComponentProps<typeof Kobalte>, "value" | "onChange" | "onKeyDown">> {
+    Partial<
+      Pick<
+        ComponentProps<typeof Kobalte>,
+        | "name"
+        | "defaultValue"
+        | "value"
+        | "onChange"
+        | "onKeyDown"
+        | "validationState"
+        | "required"
+        | "disabled"
+        | "readOnly"
+      >
+    > {
   label?: string
   hideLabel?: boolean
   hidden?: boolean
   description?: string
+  error?: string
+  variant?: "normal" | "ghost"
 }
 
 export function Input(props: InputProps) {
   const [local, others] = splitProps(props, [
+    "name",
+    "defaultValue",
+    "value",
+    "onChange",
+    "onKeyDown",
+    "validationState",
+    "required",
+    "disabled",
+    "readOnly",
     "class",
     "label",
     "hidden",
     "hideLabel",
     "description",
-    "value",
-    "onChange",
-    "onKeyDown",
+    "error",
+    "variant",
   ])
   return (
     <Kobalte
       data-component="input"
-      style={{ height: local.hidden ? 0 : undefined }}
+      data-variant={local.variant || "normal"}
+      name={local.name}
+      defaultValue={local.defaultValue}
       value={local.value}
       onChange={local.onChange}
       onKeyDown={local.onKeyDown}
+      required={local.required}
+      disabled={local.disabled}
+      readOnly={local.readOnly}
+      style={{ height: local.hidden ? 0 : undefined }}
+      validationState={local.validationState}
     >
       <Show when={local.label}>
         <Kobalte.Label data-slot="input-label" classList={{ "sr-only": local.hideLabel }}>
@@ -39,7 +69,7 @@ export function Input(props: InputProps) {
       <Show when={local.description}>
         <Kobalte.Description data-slot="input-description">{local.description}</Kobalte.Description>
       </Show>
-      <Kobalte.ErrorMessage data-slot="input-error" />
+      <Kobalte.ErrorMessage data-slot="input-error">{local.error}</Kobalte.ErrorMessage>
     </Kobalte>
   )
 }