init

src/components/input/FileInput.tsx

@@ -0,0 +1,88 @@
+import { Ref } from 'react';
+
+import { cn } from '@/lib/helper';
+import { TextInputProps } from '@/components/input/TextInput';
+
+interface FileInputProps
+  extends Omit<
+    TextInputProps,
+    | 'type'
+    | 'value'
+    | 'isValid'
+    | 'startAdornment'
+    | 'endAdornment'
+    | 'isLoading'
+  > {
+  ref?: Ref<HTMLInputElement>;
+  accept?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    input?: string;
+  };
+}
+
+const FileInput = ({
+  ref,
+  label,
+  bottomLabel,
+  name,
+  placeholder,
+  accept = '*',
+  className,
+  isError,
+  errorMessage,
+  disabled = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+}: FileInputProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+        </label>
+      )}
+
+      <input
+        ref={ref}
+        type='file'
+        accept={accept}
+        id={name}
+        name={name}
+        placeholder={placeholder}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        className={cn(
+          'grow file-input w-full h-12 rounded-lg!',
+          className?.input
+        )}
+        readOnly={readOnly}
+      />
+
+      {bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default FileInput;

src/components/input/PasswordInput.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+import Button from '@/components/Button';
+
+interface PasswordInputProps
+  extends Omit<TextInputProps, 'type' | 'startAdornment' | 'endAdornment'> {}
+
+const PasswordInput = (props: PasswordInputProps) => {
+  const [type, setType] = useState('password');
+
+  const showPasswordHandler = () => {
+    setType((prevType) => {
+      if (prevType === 'password') return 'text';
+
+      return 'password';
+    });
+  };
+
+  return (
+    <TextInput
+      {...props}
+      type={type}
+      endAdornment={
+        <Button
+          tabIndex={-1}
+          type='button'
+          variant='ghost'
+          onClick={showPasswordHandler}
+          className='btn btn-ghost w-fit h-fit p-2 rounded-full'
+          disabled={props.disabled}
+        >
+          <Icon
+            icon={type === 'password' ? 'mdi:eye' : 'mdi:eye-off'}
+            width={16}
+            height={16}
+          />
+        </Button>
+      }
+    />
+  );
+};
+
+export default PasswordInput;

src/components/input/SelectInput.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { ComponentType, ReactNode, useMemo } from 'react';
+import Select, { OptionProps, GroupBase } from 'react-select';
+import makeAnimated from 'react-select/animated';
+
+import { cn } from '@/lib/helper';
+
+export interface OptionType {
+  value: string | number;
+  label: string;
+  className?: string; // for multi select
+  labelClassName?: string; // for multi select
+}
+
+export type OptionComponent<T = OptionType> = ComponentType<
+  OptionProps<T, boolean, GroupBase<T>>
+>;
+
+interface SelectInputProps<T = OptionType> {
+  label?: ReactNode;
+  bottomLabel?: ReactNode;
+  value?: T | T[];
+  onChange?: (val: T | T[] | null) => void;
+  options: T[];
+  optionComponent?: OptionComponent<T>;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  isClearable?: boolean;
+  isRtl?: boolean;
+  isSearchable?: boolean;
+  isMulti?: boolean;
+  placeholder?: string;
+  required?: boolean;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    select?: string;
+  };
+  isError?: boolean;
+  errorMessage?: string;
+  isAnimated?: boolean;
+  openMenu?: boolean;
+}
+
+const animatedComponents = makeAnimated();
+
+const SelectInput = <T extends OptionType>({
+  label,
+  bottomLabel,
+  value,
+  onChange,
+  options,
+  optionComponent,
+  isDisabled,
+  isLoading,
+  isClearable,
+  isRtl,
+  isSearchable = true,
+  isMulti,
+  placeholder,
+  required,
+  className,
+  isError,
+  errorMessage,
+  isAnimated = true,
+  openMenu,
+}: SelectInputProps) => {
+  const components = useMemo(() => {
+    const base = isAnimated ? animatedComponents : {};
+
+    return {
+      ...base,
+      IndicatorSeparator: () => null,
+    };
+  }, [isAnimated]);
+
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <span
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </span>
+      )}
+
+      <Select
+        instanceId='select'
+        value={value}
+        onChange={(val) => onChange?.(val as T)}
+        options={options}
+        menuIsOpen={openMenu}
+        isMulti={isMulti}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+        isClearable={isClearable}
+        isRtl={isRtl}
+        isSearchable={isSearchable}
+        placeholder={placeholder}
+        className={cn('w-full', className)}
+        classNames={{
+          control: ({ isFocused, isDisabled }) =>
+            cn(
+              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              {
+                'border-red-500! focus-within:border-red-500 focus-within:ring-2 focus-within:ring-red-200':
+                  isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-gray-300': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+              }
+            ),
+          valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+          placeholder: () =>
+            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+          singleValue: () =>
+            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
+          input: () => cn('text-gray-900'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+          indicatorSeparator: () => cn('mx-1 h-4 w-px bg-gray-200'),
+          clearIndicator: () => cn('p-1 rounded-md hover:bg-gray-100'),
+          dropdownIndicator: ({ isFocused }) =>
+            cn('p-1 rounded-md 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 rounded-lg!'
+            ),
+          menuList: () => cn('p-2! max-h-60 overflow-auto'),
+          groupHeading: () =>
+            cn('ml-2 mt-2 mb-1 text-xs font-medium text-gray-500'),
+          option: ({ isFocused, isSelected, isDisabled }) =>
+            cn('mt-1 px-3 py-2 rounded-md cursor-pointer! select-none', {
+              'text-gray-300': isDisabled,
+              'bg-indigo-600 text-white': isFocused,
+              'text-gray-700': !isDisabled && !isFocused,
+              'active:bg-indigo-50': !isDisabled,
+              'bg-blue-500!': isSelected,
+            }),
+          noOptionsMessage: () => cn('px-3 py-2 text-gray-500'),
+          loadingMessage: () => cn('px-3 py-2 text-gray-500'),
+          multiValue: ({ getValue, index }) => {
+            const selectedValues = getValue();
+
+            return cn(
+              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1 rounded-md!',
+              selectedValues[index]?.className
+            );
+          },
+          multiValueLabel: ({ getValue, index }) => {
+            const selectedValues = getValue();
+
+            return cn('text-indigo-700', selectedValues[index]?.labelClassName);
+          },
+          multiValueRemove: () =>
+            cn('p-1 rounded-sm! hover:bg-indigo-100 hover:text-indigo-800'),
+        }}
+        components={{
+          ...components,
+          ...(optionComponent ? { Option: optionComponent } : {}),
+        }}
+        // make the menu float above modals/etc.
+        menuPortalTarget={
+          typeof document !== 'undefined' ? document.body : undefined
+        }
+        styles={{
+          // Tailwind can't set inline z-index on a portal; use styles here:
+          menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+        }}
+      />
+
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+    </div>
+  );
+};
+
+export default SelectInput;

src/components/input/TextInput.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  HTMLInputTypeAttribute,
+  ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextInputProps {
+  type?: HTMLInputTypeAttribute;
+  label?: string;
+  bottomLabel?: string;
+  name: string;
+  value?: string | number;
+  placeholder?: string;
+  className?: {
+    wrapper?: string;
+    label?: string;
+    inputWrapper?: string;
+    input?: string;
+  };
+  isError?: boolean;
+  isValid?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  isLoading?: boolean;
+  errorMessage?: string;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+}
+
+const TextInput = ({
+  type = 'text',
+  label,
+  bottomLabel,
+  name,
+  value,
+  placeholder,
+  className,
+  isError,
+  isValid,
+  errorMessage,
+  startAdornment,
+  endAdornment,
+  disabled = false,
+  required = false,
+  onChange,
+  onBlur,
+  readOnly = false,
+  isLoading = false,
+}: TextInputProps) => {
+  return (
+    <div
+      className={cn(
+        'w-full flex flex-col gap-2 text-start',
+        className?.wrapper
+      )}
+    >
+      {label && (
+        <label
+          htmlFor={name}
+          className={cn(
+            'w-full text-sm font-normal leading-5',
+            {
+              'text-error': isError,
+            },
+            className?.label
+          )}
+        >
+          {label}
+          {required && (
+            <>
+              {' '}
+              <span className='tooltip tooltip-error' data-tip='required'>
+                <span className='text-error'> *</span>
+              </span>
+            </>
+          )}
+        </label>
+      )}
+
+      <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',
+          {
+            'border-error': isError,
+            'border-success!': isValid,
+          },
+          className?.inputWrapper
+        )}
+      >
+        {startAdornment && startAdornment}
+
+        <input
+          type={type}
+          id={name}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          className={cn('grow', className?.input)}
+          readOnly={readOnly}
+        />
+
+        {(isLoading || endAdornment) && (
+          <div className='flex flex-row gap-2'>
+            {isLoading && <span className='loading loading-spinner' />}
+
+            {endAdornment && endAdornment}
+          </div>
+        )}
+      </div>
+
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
+    </div>
+  );
+};
+
+export default TextInput;