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

Author: maiieul

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

@@ -5,7 +5,8 @@ type TextareaProps = PropsOf<'textarea'> & {
   error?: string;
 };
 
-export const Textarea = component$<TextareaProps>(({ name, error, ...props }) => {
+export const Textarea = component$<TextareaProps>(({ id, name, error, ...props }) => {
+  const textareaId = id || name;
   return (
     <>
       <textarea
@@ -14,8 +15,9 @@ export const Textarea = component$<TextareaProps>(({ name, error, ...props }) =>
           '[&::-webkit-scrollbar-track]:bg-blue flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm 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={textareaId}
       />
-      {error && <div id={`${name}-error`}>{error}</div>}
+      {error && <div id={`${textareaId}-error`}>{error}</div>}
     </>
   );
 });