@vimeo/iris
Version:
Vimeo Design System
141 lines (140 loc) • 6.4 kB
TypeScript
import React from 'react';
/**
* An input that enables users to choose a color from a predefined range of colors from a color picker panel.
* This components precedes the eventual deprecation of ColorPicker.tsx to ease migration and ensure backwards compatibility.
*/
export declare const ColorSelect2: React.ForwardRefExoticComponent<Omit<{
accept?: string;
autoComplete?: boolean | "name" | "email" | "password" | "tel" | "url" | "on" | "off" | "bday" | "cc-csc" | "cc-exp" | "cc-name" | "cc-type" | "country-name" | "country" | "current-password" | "language" | "new-password" | "one-time-code" | "organization" | "photo" | "postal-code" | "username";
autoFocus?: boolean;
capture?: boolean | "user" | "environment";
checked?: boolean;
defaultChecked?: boolean;
defaultValue?: string | number | boolean | string[];
label?: React.ReactNode;
forwardRef?: React.Ref<HTMLInputElement>;
max?: string | number;
maxLength?: number;
messages?: import("../../../utils").Messages;
min?: string | number;
minLength?: number;
mirror?: boolean;
multiple?: boolean;
name?: string;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
pattern?: string;
placeholder?: string;
readOnly?: boolean;
required?: boolean;
src?: string;
status?: "positive" | "negative";
step?: string | number;
type?: "number" | "color" | "hidden" | "button" | "time" | "image" | "text" | "search" | "submit" | "reset" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "range" | "tel" | "url" | "week" | "toggle" | "Note";
value?: string | number | boolean | string[];
} & Omit<{
alt?: string;
as?: never;
children?: React.ReactNode;
className?: string;
data?: string;
debug?: boolean;
disabled?: boolean;
forwardRef?: React.Ref<HTMLInputElement>;
hidden?: boolean;
id?: string;
lang?: string;
name?: string;
style?: React.CSSProperties;
tabIndex?: number;
theme?: import("../../../themes").IrisTheme;
title?: string;
} & {
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onClick?: React.MouseEventHandler<HTMLInputElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;
} & {
'aria-activedescendant'?: string;
'aria-atomic'?: boolean | "true" | "false";
'aria-autocomplete'?: "none" | "list" | "inline" | "both";
'aria-busy'?: boolean | "true" | "false";
'aria-checked'?: boolean | "true" | "false" | "mixed";
'aria-colcount'?: number;
'aria-colindex'?: number;
'aria-colspan'?: number;
'aria-controls'?: string;
'aria-current'?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location";
'aria-describedby'?: string;
'aria-details'?: string;
'aria-disabled'?: boolean | "true" | "false";
'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup";
'aria-errormessage'?: string;
'aria-expanded'?: boolean | "true" | "false";
'aria-flowto'?: string;
'aria-grabbed'?: boolean | "true" | "false";
'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
'aria-hidden'?: boolean | "true" | "false";
'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
'aria-keyshortcuts'?: string;
'aria-label'?: string;
'aria-labelledby'?: string;
'aria-level'?: number;
'aria-live'?: "off" | "assertive" | "polite";
'aria-modal'?: boolean | "true" | "false";
'aria-multiline'?: boolean | "true" | "false";
'aria-multiselectable'?: boolean | "true" | "false";
'aria-orientation'?: "horizontal" | "vertical";
'aria-owns'?: string;
'aria-placeholder'?: string;
'aria-posinset'?: number;
'aria-pressed'?: boolean | "true" | "false" | "mixed";
'aria-readonly'?: boolean | "true" | "false";
'aria-relevant'?: "text" | "additions" | "additions text" | "all" | "removals";
'aria-required'?: boolean | "true" | "false";
'aria-roledescription'?: string;
'aria-rowcount'?: number;
'aria-rowindex'?: number;
'aria-rowspan'?: number;
'aria-selected'?: boolean | "true" | "false";
'aria-setsize'?: number;
'aria-sort'?: "none" | "ascending" | "descending" | "other";
'aria-valuemax'?: number;
'aria-valuemin'?: number;
'aria-valuenow'?: number;
'aria-valuetext'?: string;
role?: "article" | "button" | "dialog" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "list" | "search" | "checkbox" | "radio" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "grid" | "gridcell" | "group" | "heading" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "progressbar" | "radiogroup" | "scrollbar" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "textbox" | "timer" | "tooltip" | "tree" | "treegrid" | "treeitem";
}, "as"> & {
as?: never;
}, "disabled" | "label" | "defaultValue" | "onChange" | "initial" | "height" | "width" | "onClose" | "size" | "reset" | "onOpen" | "attach" | "throttleSpeed" | "showHueSlider" | "presets"> & {
defaultValue?: string | string[];
initial?: {
color?: string;
colorSpace?: "HEX" | "HSL" | "RGB";
};
throttleSpeed?: number;
width?: number;
height?: number;
onChange?: (HEX: string) => void;
onOpen?: () => void;
onClose?: () => void;
label?: React.ReactNode;
reset?: {
color?: string;
label?: string;
};
size?: "sm" | "md" | "lg" | "xl";
attach?: import("../../../utils").Attach | import("../../../utils").AttachAlias;
showHueSlider?: boolean;
disabled?: boolean;
presets?: import("./ColorSelect2.types").Presets;
} & React.RefAttributes<HTMLInputElement>> & {
$$iris: true | {
version: string;
component: string;
dev: unknown;
};
};