|
- import * as React from 'react';
- import clsx from 'clsx';
- import plugin from 'tailwindcss/plugin';
-
- /**
- * Derived HTML element of the {@link ColorPicker} component.
- */
- export type ColorPickerDerivedElement = HTMLInputElement;
-
- /**
- * 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 = plugin(({ 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={clsx(
- '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={clsx(
- 'block w-full',
- {
- 'p-[25%]': square,
- 'p-[12.5%]': !square,
- },
- )}
- >
- <input
- {...etcProps}
- className={clsx(
- '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={clsx(
- '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={clsx(
- '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,
- };
|