feat: Add htmlName to Shadcn theme

Author: nlemoine

packages/shadcn/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -24,6 +24,7 @@ export default function BaseInputTemplate<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   required,
   readonly,
@@ -55,7 +56,7 @@ export default function BaseInputTemplate<
     <div className='p-0.5'>
       <Input
         id={id}
-        name={id}
+        name={htmlName || id}
         type={type}
         placeholder={placeholder}
         autoFocus={autofocus}

packages/shadcn/src/CheckboxWidget/CheckboxWidget.tsx

@@ -24,6 +24,7 @@ export default function CheckboxWidget<
 >(props: WidgetProps<T, S, F>) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -71,7 +72,7 @@ export default function CheckboxWidget<
       <div className='flex items-center gap-2 my-2'>
         <Checkbox
           id={id}
-          name={id}
+          name={htmlName || id}
           checked={typeof value === 'undefined' ? false : Boolean(value)}
           required={required}
           disabled={disabled || readonly}

packages/shadcn/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -27,6 +27,7 @@ export default function CheckboxesWidget<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -58,7 +59,7 @@ export default function CheckboxesWidget<
             <div className='flex items-center gap-2' key={indexOptionId}>
               <Checkbox
                 id={indexOptionId}
-                name={id}
+                name={htmlName || id}
                 required={required}
                 disabled={disabled || itemDisabled || readonly}
                 onCheckedChange={(state) => {

packages/shadcn/src/TextareaWidget/TextareaWidget.tsx

@@ -21,6 +21,7 @@ export default function TextareaWidget<
   F extends FormContextType = any,
 >({
   id,
+  htmlName,
   placeholder,
   value,
   required,
@@ -42,7 +43,7 @@ export default function TextareaWidget<
     <div className='flex p-0.5'>
       <Textarea
         id={id}
-        name={id}
+        name={htmlName || id}
         placeholder={placeholder}
         disabled={disabled}
         readOnly={readonly}