tesseract/categories/web/color/react/src/components/ColorPicker/index.tsx

import * as React from 'react';
import { tailwind } from '@tesseract-design/web-base';

const { tw } = tailwind;

const ColorPickerDerivedElementComponent = 'input' as const;

/**
 * Derived HTML element of the {@link ColorPicker} component.
 */
export type ColorPickerDerivedElement = HTMLElementTagNameMap[
  typeof ColorPickerDerivedElementComponent
];

/**
 * Props of the {@link ColorPicker} component.
 */
export interface ColorPickerProps extends Omit<React.HTMLProps<ColorPickerDerivedElement>, 'size' | 'type' | 'label'> {
  square?: boolean;
  size?: 'small' | 'medium' | 'large';
}

export const colorPickerPlugin: tailwind.PluginCreator = ({ addComponents }) => {
  addComponents({
    '.color-picker': {
      '&::-webkit-color-swatch-wrapper': {
        'padding': '0',
      },
      '&::-webkit-color-swatch': {
        'border': '0',
      },
      '&::-moz-color-swatch': {
        'border': '0',
      },
    },
  });
};

/**
 * Component for picking a color.
 */
export const ColorPicker = React.forwardRef<
  ColorPickerDerivedElement,
  ColorPickerProps
>((
  {
    className,
    id: idProp,
    style,
    square = false as const,
    size = 'medium' as const,
    ...etcProps
  },
  forwardedRef,
) => (
  <div
    className={tw(
      'inline-block align-center relative ring-secondary/50 rounded overflow-hidden box-border group has-[:disabled]:opacity-50',
      'rounded focus-within:ring-4 active:ring-tertiary/50',
      {
        'w-8': square && size === 'small',
        'w-12': square && size === 'medium',
        'w-16': square && size === 'large',
      },
      {
        'w-16': !square && size === 'small',
        'w-24': !square && size === 'medium',
        'w-32': !square && size === 'large',
      },
      className,
    )}
    style={style}
  >
    <span
      className={tw(
        'block w-full',
        {
          'p-[25%]': square,
          'p-[12.5%]': !square,
        },
      )}
    >
      <ColorPickerDerivedElementComponent
        {...etcProps}
        className={tw(
          'color-picker absolute top-0 left-0 w-full h-full overflow-hidden cursor-pointer disabled:cursor-not-allowed',
          'focus:outline-0',
        )}
        ref={forwardedRef}
        id={idProp}
        type="color"
      />
    </span>
    <span
      className={tw(
        'border-y-4 border-l-4 border-r-2 absolute top-0 left-0 h-full pointer-events-none border-[#000000]',
        {
          'w-1/2': square,
          'w-3/4': !square,
        },
      )}
    />
    <span
      className={tw(
        'absolute flex items-center justify-center top-0 right-0 h-full pointer-events-none bg-negative text-primary group-has-[:disabled]:text-primary group-active:text-tertiary group-focus-within:text-secondary',
        {
          'w-1/2': square,
          'w-1/4': !square,
        },
      )}
    >
      <svg
        className="w-6 h-6 fill-none stroke-current stroke-2 linejoin-round linecap-round"
        viewBox="0 0 24 24"
        role="presentation"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </span>
    <span
      className="border-2 absolute top-0 left-0 w-full h-full pointer-events-none border-primary group-active:border-tertiary group-has-[:disabled]:border-primary group-focus-within:border-secondary"
    />
  </div>
));

ColorPicker.displayName = 'ColorPicker';

ColorPicker.defaultProps = {
  square: false as const,
  size: 'medium' as const,
};