refactor(styled input): improve handling of name/id props

Author: maiieul

packages/kit-styled/src/components/input/input.tsx

@@ -12,23 +12,25 @@ export const Input = component$<InputProps>(
     'bind:value': valueSig,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     'bind:checked': checkedSig,
+    id,
     ...props
   }) => {
+    const inputId = id || name;
     return (
       <>
         <input
           {...props}
-          aria-errormessage={`${name}-error`}
+          aria-errormessage={`${inputId}-error`}
           aria-invalid={!!error}
           bind:value={valueSig}
           class={cn(
             'flex h-12 w-full rounded-base border border-input bg-background px-3 py-1 text-sm text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             props.class,
           )}
-          id={name}
+          id={inputId}
         />
         {error && (
-          <div id={`${name}-error`} class="text-destructive mt-1 text-sm">
+          <div id={`${inputId}-error`} class="text-destructive mt-1 text-sm">
             {error}
           </div>
         )}