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

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

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

export type TUseCheckboxClassesProps = Omit<TCheckboxProps, 'onChange'>;

export const getCheckboxTheme = (theme: string = 'light') => {
  switch (theme) {
    case 'light':
      return (
        'border-gray-ui peer-checked:bg-gray-ui peer-hover:bg-gray-ui/5 peer-hover:peer-checked:bg-gray-ui-900 ' +
        'peer-focus:peer-checked:bg-gray-ui-900 peer-focus:bg-gray-ui/10 peer-focus:ring-gray-ui/35 ' +
        'peer-disabled:bg-gray-ui/10 peer-disabled:border-gray-ui-300 peer-hover:peer-disabled:peer-checked:bg-gray-ui/10 peer-hover:peer-disabled:border-gray-ui-300'
      );
    case 'dark':
      return (
        'border-gray-ui-700 peer-checked:bg-yellow-ui-500 peer-hover:bg-gray-ui-100/5 peer-hover:peer-checked:bg-yellow-ui-400 ' +
        'peer-focus:peer-checked:bg-yellow-ui-400 peer-focus:bg-gray-ui-100/10 peer-focus:ring-yellow-ui-500/40 ' +
        'peer-disabled:bg-gray-ui-100/10 peer-hover:peer-disabled:peer-checked:bg-gray-ui-100/10'
      );
    default:
      return '';
  }
};

export const getCheckboxSize = (size: string) => {
  switch (size) {
    case 'sm':
      return 'h-4 w-4';
    case 'md':
      return 'h-6 w-6';
    default:
      return '';
  }
};

export const getTickIconThemes = (theme: string = 'light') => {
  switch (theme) {
    case 'light':
      return 'peer-checked:peer-disabled:[&>path]:stroke-gray-ui/60';
    case 'dark':
      return '[&>path]:stroke-gray-ui peer-checked:peer-disabled:[&>path]:stroke-gray-ui-100/60';
    default:
      return '';
  }
};

export function useCheckboxClasses({ className }: TUseCheckboxClassesProps) {
  const inputClasses = 'h-full w-full absolute opacity-0 peer z-10 disabled:pointer-events-none cursor-pointer';

  return classNames(inputClasses, className ?? '');
}