biome

src/components/UI/Generator.tsx

@@ -10,8 +10,7 @@ import {
   SelectValue,
 } from "@components/UI/Select.js";
 
-export interface GeneratorProps
-  extends React.BaseHTMLAttributes<HTMLElement> {
+export interface GeneratorProps extends React.BaseHTMLAttributes<HTMLElement> {
   devicePSKBitCount?: number;
   value: string;
   variant: "default" | "invalid";
@@ -21,17 +20,25 @@ export interface GeneratorProps
   buttonClick: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-
 const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
   (
-    { devicePSKBitCount, variant, value, buttonText, selectChange, inputChange, buttonClick, ...props },
+    {
+      devicePSKBitCount,
+      variant,
+      value,
+      buttonText,
+      selectChange,
+      inputChange,
+      buttonClick,
+      ...props
+    },
     ref,
   ) => {
     return (
       <>
-        <Input 
-          type="text" 
-          id="pskInput" 
+        <Input
+          type="text"
+          id="pskInput"
           variant={variant}
           value={value}
           onChange={inputChange}
@@ -55,7 +62,12 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
             </SelectItem>
           </SelectContent>
         </Select>
-        <Button type="button" variant="success" onClick={buttonClick} {...props}>
+        <Button
+          type="button"
+          variant="success"
+          onClick={buttonClick}
+          {...props}
+        >
           {buttonText}
         </Button>
       </>

src/components/UI/Input.tsx

@@ -1,18 +1,16 @@
 import * as React from "react";
 
 import { cn } from "@core/utils/cn.js";
+import { type VariantProps, cva } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
-import { cva, VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   "flex h-10 w-full rounded-md border bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
   {
     variants: {
       variant: {
-        default:
-          "border-slate-300 dark:border-slate-700",
-        invalid:
-          "border-red-500 dark:border-red-500",
+        default: "border-slate-300 dark:border-slate-700",
+        invalid: "border-red-500 dark:border-red-500",
       },
     },
     defaultVariants: {
@@ -42,7 +40,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </span>
         )}
         <input
-          className={cn(action && "pr-8", className, inputVariants({ variant }))}
+          className={cn(
+            action && "pr-8",
+            className,
+            inputVariants({ variant }),
+          )}
           ref={ref}
           {...props}
         />