Add dynamic bit to password generator

src/components/Form/FormPasswordGenerator.tsx

@@ -9,6 +9,7 @@ import { Controller, type FieldValues } from "react-hook-form";
 export interface PasswordGeneratorProps<T> extends BaseFormBuilderProps<T> {
   type: "passwordGenerator";
   hide?: boolean;
+  bits?: { text: string; value: string; key: string }[];
   devicePSKBitCount: number;
   inputChange: ChangeEventHandler;
   selectChange: (event: string) => void;
@@ -28,6 +29,7 @@ export function PasswordGenerator<T extends FieldValues>({
         <Generator
           hide={field.hide}
           devicePSKBitCount={field.devicePSKBitCount}
+          bits={field.bits}
           inputChange={field.inputChange}
           selectChange={field.selectChange}
           buttonClick={field.buttonClick}

src/components/UI/Generator.tsx

@@ -17,6 +17,7 @@ export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   value: string;
   variant: "default" | "invalid";
   buttonText?: string;
+  bits?: { text: string; value: string; key: string }[];
   selectChange: (event: string) => void;
   inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   buttonClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -35,6 +36,11 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
       variant,
       value,
       buttonText,
+      bits = [
+        { text: "256 bit", value: "32", key: "bit256" },
+        { text: "128 bit", value: "16", key: "bit128" },
+        { text: "8 bit", value: "1", key: "bit8" },
+      ],
       selectChange,
       inputChange,
       buttonClick,
@@ -63,15 +69,11 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem key="bit256" value="32">
-              256 bit
-            </SelectItem>
-            <SelectItem key="bit128" value="16">
-              128 bit
-            </SelectItem>
-            <SelectItem key="bit8" value="1">
-              8 bit
-            </SelectItem>
+            {bits.map(({ text, value, key }) => (
+              <SelectItem key={key} value={value}>
+                {text}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
         <Button