feat(ui): migrate from HeroUI to shadcn/ui (#11532)

ui/components/auth/oss/auth-divider.tsx

@@ -1,11 +1,11 @@
-import { Divider } from "@heroui/divider";
+import { Separator } from "@/components/shadcn";
 
 export const AuthDivider = () => {
   return (
     <div className="flex items-center gap-4 py-2">
-      <Divider className="flex-1" />
-      <p className="text-tiny text-default-500 shrink-0">OR</p>
-      <Divider className="flex-1" />
+      <Separator className="flex-1" />
+      <p className="text-text-neutral-tertiary shrink-0 text-xs">OR</p>
+      <Separator className="flex-1" />
     </div>
   );
 };

ui/components/auth/oss/auth-footer-link.tsx

@@ -1,4 +1,4 @@
-import { CustomLink } from "@/components/ui/custom/custom-link";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
 
 interface AuthFooterLinkProps {
   text: string;
@@ -12,7 +12,7 @@ export const AuthFooterLink = ({
   href,
 }: AuthFooterLinkProps) => {
   return (
-    <p className="text-small text-center">
+    <p className="text-center text-sm">
       {text}&nbsp;
       <CustomLink size="md" href={href} target="_self">
         {linkText}

ui/components/auth/oss/auth-layout.tsx

@@ -27,7 +27,7 @@ export const AuthLayout = ({ title, children }: AuthLayoutProps) => {
         </div>
 
         {/* Auth Form Container */}
-        <div className="rounded-large border-divider shadow-small dark:bg-background/85 relative z-10 flex w-full max-w-sm flex-col gap-4 border bg-white/90 px-8 py-10 md:max-w-md">
+        <div className="border-border-neutral-secondary dark:bg-bg-neutral-primary/85 relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-[14px] border bg-white/90 px-8 py-10 shadow-sm md:max-w-md">
           {/* Header with Title and Theme Toggle */}
           <div className="flex items-center justify-between">
             <p className="pb-2 text-xl font-medium">{title}</p>

ui/components/auth/oss/sign-in-form.tsx

@@ -13,10 +13,11 @@ import { AuthFooterLink } from "@/components/auth/oss/auth-footer-link";
 import { AuthLayout } from "@/components/auth/oss/auth-layout";
 import { SocialButtons } from "@/components/auth/oss/social-buttons";
 import { Button } from "@/components/shadcn";
-import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
-import { Form } from "@/components/ui/form";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { Form } from "@/components/shadcn/form";
 import { getSafeCallbackPath } from "@/lib/auth-callback-url";
+import { stripPasswordManagerHighlight } from "@/lib/password-manager";
 import { SignInFormData, signInSchema } from "@/types";
 
 export const SignInForm = ({
@@ -147,6 +148,7 @@ export const SignInForm = ({
     <AuthLayout title={title}>
       <Form {...form}>
         <form
+          ref={stripPasswordManagerHighlight}
           noValidate
           method="post"
           className="flex flex-col gap-4"
@@ -196,7 +198,7 @@ export const SignInForm = ({
         >
           {!isSamlMode && (
             <Icon
-              className="text-default-500"
+              className="text-text-neutral-tertiary"
               icon="mdi:shield-key"
               width={24}
             />

ui/components/auth/oss/sign-up-form.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Checkbox } from "@heroui/checkbox";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm, useWatch } from "react-hook-form";
@@ -16,16 +15,17 @@ import { AuthFooterLink } from "@/components/auth/oss/auth-footer-link";
 import { AuthLayout } from "@/components/auth/oss/auth-layout";
 import { PasswordRequirementsMessage } from "@/components/auth/oss/password-validator";
 import { SocialButtons } from "@/components/auth/oss/social-buttons";
-import { Button } from "@/components/shadcn";
-import { useToast } from "@/components/ui";
-import { CustomInput } from "@/components/ui/custom";
-import { CustomLink } from "@/components/ui/custom/custom-link";
+import { Button, Checkbox } from "@/components/shadcn";
+import { useToast } from "@/components/shadcn";
+import { CustomInput } from "@/components/shadcn/custom";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
 import {
   Form,
   FormControl,
   FormField,
   FormMessage,
-} from "@/components/ui/form";
+} from "@/components/shadcn/form";
+import { stripPasswordManagerHighlight } from "@/lib/password-manager";
 import { ApiError, SignUpFormData, signUpSchema } from "@/types";
 
 const AUTH_ERROR_PATHS = {
@@ -164,6 +164,7 @@ export const SignUpForm = ({
     <AuthLayout title="Sign up">
       <Form {...form}>
         <form
+          ref={stripPasswordManagerHighlight}
           noValidate
           method="post"
           className="flex flex-col gap-4"
@@ -217,14 +218,18 @@ export const SignUpForm = ({
               name="termsAndConditions"
               render={({ field }) => (
                 <>
-                  <FormControl>
-                    <Checkbox
-                      isRequired
-                      className="py-4"
-                      size="sm"
-                      checked={field.value}
-                      onChange={(e) => field.onChange(e.target.checked)}
-                      color="default"
+                  <div className="flex items-center gap-2 py-4">
+                    <FormControl>
+                      <Checkbox
+                        id="termsAndConditions"
+                        size="sm"
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <label
+                      htmlFor="termsAndConditions"
+                      className="cursor-pointer text-sm"
                     >
                       I agree with the&nbsp;
                       <CustomLink
@@ -234,8 +239,9 @@ export const SignUpForm = ({
                         Terms of Service
                       </CustomLink>
                       &nbsp;of Prowler
-                    </Checkbox>
-                  </FormControl>
+                      <span className="text-text-error-primary">*</span>
+                    </label>
+                  </div>
                   <FormMessage className="text-text-error" />
                 </>
               )}

ui/components/auth/oss/social-buttons.tsx

@@ -7,7 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/shadcn";
-import { CustomLink } from "@/components/ui/custom/custom-link";
+import { CustomLink } from "@/components/shadcn/custom/custom-link";
 import { appendCallbackState } from "@/lib/auth-callback-url";
 
 type SocialProvider = {
@@ -73,7 +73,7 @@ const SocialButton = ({
         {provider.isOAuthEnabled ? (
           disabledTooltipContent
         ) : (
-          <div className="flex-inline text-small">
+          <div className="flex-inline text-sm">
             {provider.disabledDocs.message}{" "}
             <CustomLink href={provider.disabledDocs.href}>
               Read the docs