feat: switch form fields to base-ui

app/routes/users/dialogs/create-user.tsx

@@ -1,8 +1,8 @@
 import Button from "~/components/button";
-import Dialog, { DialogPanel } from "~/components/Dialog";
-import Input from "~/components/Input";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Dialog, { DialogPanel } from "~/components/dialog";
+import Input from "~/components/input";
+import Text from "~/components/text";
+import Title from "~/components/title";
 
 interface CreateUserProps {
   isOidc?: boolean;
@@ -23,39 +23,9 @@ export default function CreateUser({ isOidc, isDisabled }: CreateUserProps) {
         </Text>
         <input name="action_id" type="hidden" value="create_user" />
         <div className="flex flex-col gap-4">
-          <Input
-            isRequired
-            label="Username"
-            name="username"
-            placeholder="my-new-user"
-            type="text"
-            validate={(value) => {
-              if (value.trim().length === 0) {
-                return "Username is required";
-              }
-
-              if (value.includes(" ")) {
-                return "Usernames cannot contain spaces";
-              }
-
-              return true;
-            }}
-            validationBehavior="native"
-          />
-          <Input
-            label="Display Name"
-            name="display_name"
-            placeholder="John Doe"
-            type="text"
-            validationBehavior="native"
-          />
-          <Input
-            label="Email"
-            name="email"
-            placeholder="name@example.com"
-            type="email"
-            validationBehavior="native"
-          />
+          <Input required label="Username" name="username" placeholder="my-new-user" type="text" />
+          <Input label="Display Name" name="display_name" placeholder="John Doe" type="text" />
+          <Input label="Email" name="email" placeholder="name@example.com" type="email" />
         </div>
       </DialogPanel>
     </Dialog>

app/routes/users/dialogs/delete-user.tsx

@@ -1,6 +1,6 @@
-import Dialog, { DialogPanel } from "~/components/Dialog";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Dialog, { DialogPanel } from "~/components/dialog";
+import Text from "~/components/text";
+import Title from "~/components/title";
 import type { Machine, User } from "~/types";
 
 interface DeleteProps {

app/routes/users/dialogs/link-user.tsx

@@ -1,7 +1,7 @@
-import Dialog, { DialogPanel } from "~/components/Dialog";
-import Notice from "~/components/Notice";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Dialog, { DialogPanel } from "~/components/dialog";
+import Notice from "~/components/notice";
+import Text from "~/components/text";
+import Title from "~/components/title";
 import cn from "~/utils/cn";
 
 interface LinkUserProps {

app/routes/users/dialogs/reassign-user.tsx

@@ -1,9 +1,9 @@
-import Dialog, { DialogPanel } from "~/components/Dialog";
+import Dialog, { DialogPanel } from "~/components/dialog";
 import Link from "~/components/link";
-import Notice from "~/components/Notice";
-import RadioGroup from "~/components/RadioGroup";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Notice from "~/components/notice";
+import RadioGroup from "~/components/radio-group";
+import Text from "~/components/text";
+import Title from "~/components/title";
 import { Roles } from "~/server/web/roles";
 import type { Role } from "~/server/web/roles";
 
@@ -39,13 +39,7 @@ export default function ReassignUser({
           <>
             <input name="action_id" type="hidden" value="reassign_user" />
             <input name="user_id" type="hidden" value={userId} />
-            <RadioGroup
-              className="gap-4"
-              defaultValue={role}
-              isRequired
-              label="Role"
-              name="new_role"
-            >
+            <RadioGroup className="gap-4" defaultValue={role} label="Role" name="new_role">
               {Object.keys(Roles)
                 .filter((r) => r !== "owner")
                 .map((r) => {

app/routes/users/dialogs/rename-user.tsx

@@ -1,7 +1,7 @@
-import Dialog, { DialogPanel } from "~/components/Dialog";
-import Input from "~/components/Input";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Dialog, { DialogPanel } from "~/components/dialog";
+import Input from "~/components/input";
+import Text from "~/components/text";
+import Title from "~/components/title";
 import { User } from "~/types";
 
 interface RenameProps {
@@ -24,7 +24,7 @@ export default function RenameUser({ user, isOpen, setIsOpen }: RenameProps) {
         <input name="user_id" type="hidden" value={user.id} />
         <Input
           defaultValue={user.name}
-          isRequired
+          required
           label="Username"
           name="new_name"
           placeholder="my-new-name"

app/routes/users/dialogs/transfer-ownership.tsx

@@ -1,7 +1,7 @@
-import Dialog, { DialogPanel } from "~/components/Dialog";
-import Notice from "~/components/Notice";
-import Text from "~/components/Text";
-import Title from "~/components/Title";
+import Dialog, { DialogPanel } from "~/components/dialog";
+import Notice from "~/components/notice";
+import Text from "~/components/text";
+import Title from "~/components/title";
 
 interface TransferOwnershipProps {
   targetUserId: string;