fix(tailwind): resolve custom classNames recognition

Author: heydoyouknowme0

app/[locale]/institute/sections/library/collection-and-resources/page.tsx

@@ -125,7 +125,7 @@ export default async function CollectionAndResources({
       </section>
 
       <section className="container my-10">
-        <Table scrollAreaClassName="h-96">
+        <Table classNames={{ scrollArea: 'h-96' }}>
           <TableHeader>
             <TableRow>
               <TableHead>{text.eResourcesTable.heading.srno}</TableHead>

app/[locale]/login/login.tsx

@@ -26,7 +26,7 @@ const Login = async ({ locale }: { locale: string }) => {
       </header>
       <section className="w-full space-y-4 md:space-y-6">
         <Input
-          inputClassName="sm:px-4 sm:py-3 md:px-5 md:py-4"
+          classNames={{ input: 'sm:px-4 sm:py-3 md:px-5 md:py-4' }}
           id="email"
           label={text.enterEmail}
           placeholder="[email protected]"

app/[locale]/search/search.tsx

@@ -44,7 +44,9 @@ export default async function Search({
       <Input
         debounceTo="query"
         id="search"
-        inputClassName="border-primary-700 focus-visible:ring-primary-700"
+        classNames={{
+          input: 'border-primary-700 focus-visible:ring-primary-700',
+        }}
         placeholder={text.placeholder}
         type="search"
       />
@@ -269,7 +271,7 @@ const ResultsView = async ({
               <h4>{categories[category]}</h4>
               {currentCategory === 'all' && (
                 <BouncyArrowButton
-                  arrowClassName="md:size-2 lg:size-3"
+                  classNames={{ arrow: 'md:size-2 lg:size-3' }}
                   buttonProps={{
                     className: cn(
                       'inline-flex h-fit gap-1 md:gap-2',

components/buttons/bouncy-arrow.tsx

@@ -5,12 +5,12 @@ import { Button, type ButtonProps } from '~/components/buttons';
 import { cn } from '~/lib/utils';
 
 export const BouncyArrowButton = ({
-  arrowClassName,
+  classNames,
   buttonProps,
   linkProps,
   text,
 }: {
-  arrowClassName?: string;
+  classNames?: { arrow?: string };
   buttonProps?: ButtonProps;
   linkProps: LinkProps;
   text: string;
@@ -23,7 +23,7 @@ export const BouncyArrowButton = ({
           className={cn(
             'mx-auto animate-bounce',
             'size-2 md:size-3 lg:size-4',
-            arrowClassName
+            classNames?.arrow
           )}
         />
       </span>

components/carousels/gallery.tsx

@@ -12,12 +12,12 @@ const GalleryCarousel = ({
   carouselProps,
   children,
   className,
-  itemClassName,
+  classNames,
 }: {
   carouselProps?: CarouselProps;
   children: React.ReactNode[];
   className?: string;
-  itemClassName?: string;
+  classNames?: { item?: string };
 }) => {
   return (
     <article className={cn('container relative px-10 lg:px-14', className)}>
@@ -35,7 +35,7 @@ const GalleryCarousel = ({
               key={index}
               className={cn(
                 'sm:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5',
-                itemClassName
+                classNames?.item
               )}
             >
               {child}

components/inputs/input.tsx

@@ -19,7 +19,7 @@ export interface InputProps
   debounceTo?: string;
   description?: string;
   id: string;
-  inputClassName?: string;
+  classNames?: { input?: string };
   label?: string;
   reserveSpaceForError?: boolean;
   showError?: boolean;
@@ -54,7 +54,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       debounceEvery,
       debounceTo,
       description,
-      inputClassName,
+      classNames,
       label,
       onBlur,
       onChange,
@@ -124,7 +124,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               focusedOnce &&
                 'invalid:border-primary-500 invalid:focus-visible:ring-primary-500',
               (type === 'checkbox' || type === 'radio') && 'h-5 w-5 ', //incomplete
-              inputClassName
+              classNames?.input
             )}
             onBlur={(event) => {
               if (!focusedOnce) setFocusedOnce(true);

components/inputs/multi-select.tsx

@@ -56,7 +56,7 @@ export interface MultipleSelectorProps {
   /** Group the options base on provided key. */
   groupBy?: string;
   className?: string;
-  badgeClassName?: string;
+  classNames?: { badge?: string };
   /**
    * First item selected is a default behavior by cmdk. That is why the default is true.
    * This is a workaround solution by add a dummy item.
@@ -172,7 +172,7 @@ const MultipleSelector = React.forwardRef<
       disabled,
       groupBy,
       className,
-      badgeClassName,
+      classNames,
       selectFirstItem = true,
       creatable = false,
       triggerSearchOnFocus = false,
@@ -375,7 +375,7 @@ const MultipleSelector = React.forwardRef<
                   className={cn(
                     'data-[disabled]:cursor-not-allowed data-[disabled]:border-0 data-[disabled]:bg-neutral-200/30 data-[disabled]:ring-0',
                     'bg-primary-300 data-[fixed]:bg-neutral-400 data-[fixed]:text-neutral-700 data-[fixed]:hover:bg-neutral-400',
-                    badgeClassName
+                    classNames?.badge
                   )}
                 >
                   {option}

components/ui/scroll-area.tsx

@@ -8,9 +8,11 @@ import { cn } from '~/lib/utils';
 const ScrollArea = forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    scrollBarClassName?: string;
+    classNames?: {
+      scrollBar?: string;
+    };
   }
->(({ className, children, scrollBarClassName, ...props }, ref) => (
+>(({ children, className, classNames, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn('relative overflow-hidden', className)}
@@ -20,7 +22,7 @@ const ScrollArea = forwardRef<
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar className={scrollBarClassName} />
+    <ScrollBar className={classNames?.scrollBar} />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));

components/ui/table.tsx

@@ -7,16 +7,19 @@ import { ScrollArea } from '.';
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement> & {
-    scrollAreaClassName?: string;
+    classNames?: {
+      scrollArea?: string;
+      scrollBar?: string;
+    };
   }
->(({ className, scrollAreaClassName, ...props }, ref) => (
+>(({ className, classNames, ...props }, ref) => (
   <ScrollArea
     className={cn(
       'relative w-full rounded-md border border-primary-700 shadow-2xl',
       'px-2 py-3',
-      scrollAreaClassName
+      classNames?.scrollArea
     )}
-    scrollBarClassName="mt-[60px] pb-[60px]"
+    classNames={{ scrollBar: classNames?.scrollBar ?? 'mt-[60px] pb-[60px]' }}
   >
     <table
       ref={ref}