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, '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, ) => (
)); ColorPicker.displayName = 'ColorPicker'; ColorPicker.defaultProps = { square: false as const, size: 'medium' as const, };