refactor: input icons

Author: thevuong

apps/docs/src/components/ui/input/input.stories.tsx

@@ -165,15 +165,15 @@ export const ReactHookForm: Story = {
 export const StartIcon: Story = {
   args: {
     placeholder: 'Search...',
-    startIcon: SearchIcon,
+    startIcon: <SearchIcon className="w-4.5 h-4.5" />,
     type: 'text',
   },
 };
 
 // End Icon
 export const EndIcon: Story = {
   args: {
-    endIcon: SearchIcon,
+    endIcon: <SearchIcon className="w-4.5 h-4.5" />,
     placeholder: 'Search...',
     type: 'text',
   },
@@ -182,9 +182,9 @@ export const EndIcon: Story = {
 // Start and End Icon
 export const StartAndEndIcon: Story = {
   args: {
-    endIcon: CogIcon,
+    endIcon: <CogIcon className="w-4.5 h-4.5" />,
     placeholder: 'Search...',
-    startIcon: SearchIcon,
+    startIcon: <SearchIcon className="w-4.5 h-4.5" />,
     type: 'text',
   },
 };
@@ -194,15 +194,15 @@ export const InlineWithStartIcon: Story = {
   args: {
     inline: true,
     placeholder: 'Search...',
-    startIcon: SearchIcon,
+    startIcon: <SearchIcon className="w-4.5 h-4.5" />,
     type: 'text',
   },
 };
 
 // Inline with End Icon
 export const InlineWithEndIcon: Story = {
   args: {
-    endIcon: SearchIcon,
+    endIcon: <SearchIcon className="w-4.5 h-4.5" />,
     inline: true,
     placeholder: 'Search...',
     type: 'text',
@@ -212,10 +212,10 @@ export const InlineWithEndIcon: Story = {
 // Inline with Start and End Icon
 export const InlineWithStartAndEndIcon: Story = {
   args: {
-    endIcon: CogIcon,
+    endIcon: <CogIcon className="w-4.5 h-4.5" />,
     inline: true,
     placeholder: 'Search...',
-    startIcon: SearchIcon,
+    startIcon: <SearchIcon className="w-4.5 h-4.5" />,
     type: 'text',
   },
 };

package.json

@@ -11,7 +11,7 @@
     "clean": "turbo run clean && rm -rf node_modules",
     "dev": "turbo run dev",
     "postinstall": "pnpm exec simple-git-hooks",
-    "lint": "turbo run lint -- --fix",
+    "lint": "turbo run lint",
     "pnpm:install": "pnpm install",
     "pnpm:reinstall": "pnpm run clean && pnpm install",
     "pnpm:update": "pnpm update --latest --interactive --recursive",

packages/ui/src/mail/forgot-password-template.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Body,
   Button,

packages/ui/src/mail/magic-link-template.tsx

@@ -10,6 +10,7 @@ import {
   Tailwind,
   Text,
 } from '@react-email/components';
+import * as React from 'react';
 
 export function MagicLinkTemplate({
   magicLink,

packages/ui/src/mail/verify-email-template.tsx

@@ -10,6 +10,7 @@ import {
   Tailwind,
   Text,
 } from '@react-email/components';
+import * as React from 'react';
 
 export function VerifyEmailTemplate({
   verifyEmailLink,

packages/ui/src/react/data-table.tsx

@@ -349,7 +349,7 @@ export function DataTableSearch<TData>({
       className="w-full max-w-sm"
       onChange={onChange}
       placeholder="Search all columns..."
-      startIcon={SearchIcon}
+      startIcon={<SearchIcon className="w-4.5 h-4.5" />}
       type="search"
     />
   );

packages/ui/src/react/input.tsx

@@ -6,7 +6,6 @@ import { EyeIcon, EyeOffIcon } from 'lucide-react';
 import * as React from 'react';
 import { forwardRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { IconType } from '@/react/icons';
 import { Button } from '@/react/button';
 import { inputVariants, primitiveInputVariants } from '@/cva/input';
 
@@ -78,57 +77,56 @@ InputPassword.displayName = 'InputPassword';
 export const Input = forwardRef<
   React.ElementRef<typeof PrimitiveInput>,
   React.ComponentPropsWithoutRef<typeof PrimitiveInput> & {
-    startIcon?: IconType;
-    endIcon?: IconType;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
     classNames?: {
       startIcon?: string;
       endIcon?: string;
       input?: string;
     };
   }
->(
-  (
-    { startIcon: StartIcon, endIcon: EndIcon, classNames, className, ...props },
-    forwardedRef,
-  ) => (
-    <div
+>(({ startIcon, endIcon, classNames, className, ...props }, forwardedRef) => (
+  <div
+    className={twMerge(
+      'relative',
+      props.inline ? 'inline-block' : 'w-full',
+      className,
+    )}
+  >
+    {startIcon ? (
+      <span
+        className={twMerge(
+          'text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2',
+          classNames?.startIcon,
+        )}
+      >
+        {startIcon}
+      </span>
+    ) : null}
+
+    <PrimitiveInput
       className={twMerge(
-        'relative',
-        props.inline ? 'inline-block' : 'w-full',
-        className,
+        inputVariants({
+          className: twMerge('max-h-full', classNames?.input),
+          hasEndIcon: Boolean(endIcon),
+          hasStartIcon: Boolean(startIcon),
+        }),
       )}
-    >
-      {StartIcon ? (
-        <StartIcon
-          className={twMerge(
-            'h-4.5 w-4.5 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2',
-            classNames?.startIcon,
-          )}
-        />
-      ) : null}
+      ref={forwardedRef}
+      {...props}
+    />
 
-      <PrimitiveInput
+    {endIcon ? (
+      <span
         className={twMerge(
-          inputVariants({
-            className: twMerge('max-h-full', classNames?.input),
-            hasEndIcon: Boolean(EndIcon),
-            hasStartIcon: Boolean(StartIcon),
-          }),
+          'text-muted-foreground absolute right-3 top-1/2 -translate-y-1/2',
+          classNames?.endIcon,
         )}
-        ref={forwardedRef}
-        {...props}
-      />
-
-      {EndIcon ? (
-        <EndIcon
-          className={twMerge(
-            'h-4.5 w-4.5 text-muted-foreground absolute right-3 top-1/2 -translate-y-1/2',
-            classNames?.endIcon,
-          )}
-        />
-      ) : null}
-    </div>
-  ),
-);
+      >
+        {endIcon}
+      </span>
+    ) : null}
+  </div>
+));
 
 Input.displayName = PrimitiveInput.displayName;