@ryanhelsing/ry-ui
Version:
Framework-agnostic, Light DOM web components. CSS is the source of truth.
52 lines • 1.58 kB
TypeScript
/**
* <ry-color-picker>
*
* Color picker component with HSV grid, hue slider, and optional alpha slider.
* Shows as a dropdown trigger by default; add `inline` for always-visible picker.
*
* Usage:
* <ry-color-picker value="#ff0000"></ry-color-picker>
* <ry-color-picker value="#ff0000" inline></ry-color-picker>
* <ry-color-picker value="hsl(200, 100%, 50%)" format="hsl" opacity></ry-color-picker>
*/
import { RyElement } from '../core/ry-element.js';
export interface HSV {
h: number;
s: number;
v: number;
}
export interface RGB {
r: number;
g: number;
b: number;
}
export interface HSL {
h: number;
s: number;
l: number;
}
export type ColorFormat = 'hex' | 'rgb' | 'hsl';
export declare class RyColorPicker extends RyElement {
#private;
static observedAttributes: readonly ["value", "format", "opacity", "disabled", "swatches", "inline"];
setup(): void;
open(): void;
close(): void;
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
get value(): string;
set value(val: string);
get format(): ColorFormat;
set format(val: ColorFormat);
get disabled(): boolean;
set disabled(val: boolean);
get hsv(): HSV;
get rgb(): RGB;
get hsl(): HSL;
get alpha(): number;
set alpha(val: number);
/** Set color from any valid color string */
setColor(colorString: string): boolean;
/** Get color in specific format */
getFormattedValue(format: ColorFormat): string;
}
//# sourceMappingURL=ry-color-picker.d.ts.map