chore(FE-140): adjust border radius

src/components/Button.tsx

@@ -43,7 +43,7 @@ const Button = ({
       'btn-warning': color === 'warning',
       'btn-error': color === 'error',
     },
-    'h-fit justify-center items-center gap-2 rounded-xl p-2 text-base transition-all'
+    'h-fit justify-center items-center gap-2 rounded p-2 text-base transition-all'
   );
 
   return (

src/components/input/SelectInput.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 import Select, {
   OptionProps,
   GroupBase,
@@ -98,10 +92,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
-    val: string,
-    meta: InputActionMeta
-  ) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
@@ -113,9 +104,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const SelectComponent = createables ? CreatableSelect : Select;
 
   /** 🎯 handleChange tanpa any */
-  const handleChange = (
+  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
-    val: MultiValue<T> | SingleValue<T>
-  ): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -145,15 +134,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className="tooltip tooltip-error" data-tip="required">
+            <span className='tooltip tooltip-error' data-tip='required'>
-              <span className="text-error"> *</span>
+              <span className='text-error'> *</span>
             </span>
           )}
         </span>
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId="select"
+        instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
         options={options}
@@ -171,7 +160,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded! border bg-base-100 transition-shadow cursor-pointer!',
               {
                 'border-red-500! ring-2 ring-red-200': isError,
                 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
@@ -187,24 +176,24 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
-              'bg-indigo-600 text-white': isFocused,
+              'bg-indigo-600 text-base-100': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
             }),
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
@@ -225,9 +214,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         }}
       />
 
-      {isError && <p className="w-full text-sm text-error">{errorMessage}</p>}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
       {!isError && bottomLabel && (
-        <p className="w-full text-sm opacity-60">{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
       )}
     </div>
   );

src/components/input/TextArea.tsx

@@ -1,10 +1,6 @@
 'use client';
 
-import {
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-} from 'react';
 
 import { cn } from '@/lib/helper';
 
@@ -52,7 +48,7 @@ const TextArea = ({
   onBlur,
   readOnly = false,
   isLoading = false,
-  rows = 3
+  rows = 3,
 }: TextAreaProps) => {
   return (
     <div
@@ -83,35 +79,35 @@ const TextArea = ({
           )}
         </label>
       )}
-        {startAdornment && startAdornment}
+      {startAdornment && startAdornment}
 
-        <textarea
+      <textarea
-          className={cn(
+        className={cn(
-            'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded! outline-none! transition-all',
-            {
+          {
-              'border-error': isError,
+            'border-error': isError,
-              'border-success!': isValid,
+            'border-success!': isValid,
-            },
+          },
-            className?.inputWrapper
+          className?.inputWrapper
-          )}
-          id={name}
-          name={name}
-          placeholder={placeholder}
-          value={value}
-          rows={rows}
-          onChange={onChange}
-          onBlur={onBlur}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-
-        {(isLoading || endAdornment) && (
-          <div className='flex flex-row gap-2'>
-            {isLoading && <span className='loading loading-spinner' />}
-
-            {endAdornment && endAdornment}
-          </div>
         )}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        value={value}
+        rows={rows}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+
+      {(isLoading || endAdornment) && (
+        <div className='flex flex-row gap-2'>
+          {isLoading && <span className='loading loading-spinner' />}
+
+          {endAdornment && endAdornment}
+        </div>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

src/components/input/TextInput.tsx

@@ -87,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded! outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,