@itgold/grandbazar-ui-kit/src/components/inputs/hooks/useInputClasses.ts

Grandbazar.io UI component library: React, Typescript, Tailwind, Rollup, Storybook, Jest.

import { TInputThemes } from '@/components/inputs/types';
import { classNames } from '@/utils/classNames';

export type TUseInputClasses = {
  theme: TInputThemes;
  error: boolean;
  disabled?: boolean;
  isFocusedWrapper: boolean;
};

export function useInputClasses({ theme, error, isFocusedWrapper, disabled }: TUseInputClasses) {
  const commonInputClasses = classNames(
    'transition-all duration-std border rounded-lg text-sm [&>input]:transition-all [&>input]:duration-std [&>input]:autofill:shadow-[0_0_0_1000px_rgba(255,255,0,0)]',
    isFocusedWrapper ? 'ring-3 ring-inset' : 'focus:ring-3 focus:ring-inset',
  );

  const getInputThemeClasses = () => {
    switch (theme) {
      case 'light':
        return classNames(
          'ring-gray-ui/20 hover:bg-gray-ui/5 focus:ring-gray-ui/20 placeholder-gray-ui-700 disabled:border-gray-ui-300 disabled:bg-gray-ui/5 ',
          disabled ? 'border-gray-ui-300 !bg-gray-ui/5' : 'border-gray-ui/ba',
          error
            ? '[&>input]:placeholder-red-ui bg-red-ui/10 border-red-ui'
            : '[&>input]:placeholder-gray-ui-700 bg-transparent',
        );
      case 'dark':
        return classNames(
          'ring-gray-ui-100/25 text-gray-ui-100 disabled:bg-gray-ui-100/5 disabled:placeholder-gray-ui-700/50 placeholder-gray-ui-50' +
            'focus:placeholder-gray-ui-100 hover:bg-gray-ui-100/5 focus:ring-gray-ui-100/25 focus:bg-gray-ui-100/10',
          isFocusedWrapper ? 'bg-gray-ui-100/10 border-gray-ui-100/25' : 'border-gray-ui-700',
          disabled ? 'bg-gray-ui-100/5 placeholder-gray-ui-700/50' : 'placeholder-gray-ui-100/50',
          error
            ? '[&>input]:placeholder-red-ui bg-red-ui/10'
            : isFocusedWrapper
            ? '[&>input]:placeholder-gray-ui-100 '
            : '[&>input]:placeholder-gray-ui-100/50',
        );
    }
  };

  const errorClasses = error
    ? 'text-red-ui bg-red-ui/10 [&>input]:text-red-ui placeholder-red-ui border-red-ui ring-0 focus:ring-0 bg-red-ui/10 hover:bg-red-ui/10'
    : '';

  return classNames(commonInputClasses, getInputThemeClasses(), errorClasses);
}