@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
107 lines • 2.66 kB
TypeScript
/**
* Check if EyeDropper API is supported
*/
export declare function isEyeDropperSupported(): boolean;
/**
* Create a reactive eye dropper color picker
*
* The EyeDropper API allows users to pick colors from anywhere on their
* screen, not just within the browser window. Great for design tools,
* color pickers, and accessibility features.
*
* @example
* ```ts
* const eyeDropper = useEyeDropper({
* onPick: (color) => {
* console.log('Picked color:', color) // e.g., "#ff6188"
* }
* })
*
* // Subscribe to state changes
* eyeDropper.subscribe((state) => {
* if (state.sRGBHex) {
* document.body.style.backgroundColor = state.sRGBHex
* }
* })
*
* // Open the color picker
* const color = await eyeDropper.open()
* ```
*/
export declare function useEyeDropper(options?: EyeDropperOptions): EyeDropperRef;
/**
* Simple color picker that returns the color
*
* @example
* ```ts
* const color = await pickColor()
* if (color) {
* console.log('Picked:', color)
* }
* ```
*/
export declare function pickColor(): Promise<string | null>;
/**
* Convert hex color to RGB values
*/
export declare function hexToRgb(hex: string): { r: number, g: number, b: number } | null;
/**
* Convert hex color to HSL values
*/
export declare function hexToHsl(hex: string): { h: number, s: number, l: number } | null;
/**
* Pick a color with history tracking
*
* @example
* ```ts
* const colorPicker = useColorHistory({
* maxHistory: 10
* })
*
* await colorPicker.pick()
*
* colorPicker.subscribe((state) => {
* console.log('History:', state.history)
* console.log('Current:', state.current)
* })
* ```
*/
export declare function useColorHistory(options?: {
maxHistory?: number
onPick?: (color: string) => void
}): void;
/**
* EyeDropper Composables
*
* Reactive utilities for the EyeDropper API to pick colors from the screen.
*/
export declare interface EyeDropperState {
isSupported: boolean
isOpen: boolean
sRGBHex: string | null
error: Error | null
}
export declare interface EyeDropperResult {
sRGBHex: string
}
export declare interface EyeDropperOptions {
onPick?: (color: string) => void
onAbort?: () => void
onError?: (error: Error) => void
}
export declare interface EyeDropperRef {
get: () => EyeDropperState
subscribe: (fn: (state: EyeDropperState) => void) => () => void
open: () => Promise<string | null>
isSupported: () => boolean
}
declare interface EyeDropperConstructor {
new (): {
open: (options?: { signal?: AbortSignal }) => Promise<EyeDropperResult>
}
}
declare namespace global {
interface Window {
EyeDropper?: EyeDropperConstructor
}
}