refactor: forms (#697)

Updates our older forms to use the appropriate components bringing them in-line with the rest of our codebase.

packages/ui/primitives/button.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { Loader } from 'lucide-react';
 
 import { cn } from '../lib/utils';
@@ -63,8 +64,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       );
     }
 
-    const showLoader = loading === true;
-    const isDisabled = props.disabled || showLoader;
+    const isLoading = loading === true;
+    const isDisabled = props.disabled || isLoading;
 
     return (
       <button
@@ -73,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
         disabled={isDisabled}
       >
-        {showLoader && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
+        {isLoading && <Loader className={cn('mr-2 animate-spin', loaderVariants({ size }))} />}
         {props.children}
       </button>
     );

packages/ui/primitives/input.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 
-import { Eye, EyeOff } from 'lucide-react';
-
 import { cn } from '../lib/utils';
-import { Button } from './button';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
@@ -28,38 +25,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
 Input.displayName = 'Input';
 
-const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
-    const [showPassword, setShowPassword] = React.useState(false);
-
-    return (
-      <div className="relative">
-        <Input
-          id="password"
-          type={showPassword ? 'text' : 'password'}
-          className={cn('pr-10', className)}
-          ref={ref}
-          {...props}
-        />
-
-        <Button
-          variant="link"
-          type="button"
-          className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
-          aria-label={showPassword ? 'Mask password' : 'Reveal password'}
-          onClick={() => setShowPassword((show) => !show)}
-        >
-          {showPassword ? (
-            <EyeOff aria-hidden className="text-muted-foreground h-5 w-5" />
-          ) : (
-            <Eye aria-hidden className="text-muted-foreground h-5 w-5" />
-          )}
-        </Button>
-      </div>
-    );
-  },
-);
-
-PasswordInput.displayName = 'Input';
-
-export { Input, PasswordInput };
+export { Input };

packages/ui/primitives/password-input.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { Eye, EyeOff } from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Input, InputProps } from './input';
+
+const PasswordInput = React.forwardRef<HTMLInputElement, Omit<InputProps, 'type'>>(
+  ({ className, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false);
+
+    return (
+      <div className="relative">
+        <Input
+          type={showPassword ? 'text' : 'password'}
+          className={cn('pr-10', className)}
+          ref={ref}
+          {...props}
+        />
+
+        <Button
+          variant="link"
+          type="button"
+          className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
+          aria-label={showPassword ? 'Mask password' : 'Reveal password'}
+          onClick={() => setShowPassword((show) => !show)}
+        >
+          {showPassword ? (
+            <EyeOff aria-hidden className="text-muted-foreground h-5 w-5" />
+          ) : (
+            <Eye aria-hidden className="text-muted-foreground h-5 w-5" />
+          )}
+        </Button>
+      </div>
+    );
+  },
+);
+
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput };