@ryanhelsing/ry-ui
Version:
Framework-agnostic, Light DOM web components. CSS is the source of truth.
39 lines • 1.44 kB
TypeScript
/**
* <ry-gradient-picker>
*
* Gradient editor with draggable color stops, type toggle, and inline color picker.
* Supports linear and radial gradients with unlimited stops.
*
* Usage:
* <ry-gradient-picker value="linear-gradient(90deg, #ff0000 0%, #0000ff 100%)"></ry-gradient-picker>
* <ry-gradient-picker value="radial-gradient(circle, #ff0000 0%, #00ff00 50%, #0000ff 100%)"></ry-gradient-picker>
*/
import { RyElement } from '../core/ry-element.js';
export interface GradientStop {
id: string;
color: string;
position: number;
}
export type GradientType = 'solid' | 'linear' | 'radial';
export type RadialShape = 'circle' | 'ellipse';
export declare class RyGradientPicker extends RyElement {
#private;
static observedAttributes: readonly ["value", "disabled", "output"];
setup(): void;
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
get value(): string;
set value(val: string);
get type(): GradientType;
set type(val: GradientType);
get angle(): number;
set angle(val: number);
get shape(): RadialShape;
set shape(val: RadialShape);
get stops(): GradientStop[];
get selectedStop(): GradientStop | null;
get disabled(): boolean;
set disabled(val: boolean);
addStop(color: string, position: number): void;
removeStop(id: string): boolean;
}
//# sourceMappingURL=ry-gradient-picker.d.ts.map