react-headless-color-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Orlando Cana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# react-headless-color-picker

package/dist/index.d.mts

@@ -0,0 +1,163 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface RgbaColor extends RgbColor {
+    a: number;
+}
+interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+interface HslaColor extends HslColor {
+    a: number;
+}
+interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+interface HsvaColor extends HsvColor {
+    a: number;
+}
+type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+type AnyColor = string | ObjectColor;
+interface ColorModel<T extends AnyColor> {
+    defaultColor: T;
+    toHsva: (defaultColor: T) => HsvaColor;
+    fromHsva: (hsva: HsvaColor) => T;
+    equal: (first: T, second: T) => boolean;
+}
+interface PointerPosition {
+    left: number;
+    top: number;
+}
+interface RenderPointerArgs extends PointerPosition {
+    hsva?: HsvaColor;
+    hue?: number;
+}
+
+interface HueProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hue: number;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Hue: react.MemoExoticComponent<({ hue, onChange, renderPointer, style, ...rest }: HueProps) => react_jsx_runtime.JSX.Element>;
+
+interface SaturationProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hsva: HsvaColor;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Saturation: react.MemoExoticComponent<({ hsva, onChange, style, renderPointer, ...rest }: SaturationProps) => react_jsx_runtime.JSX.Element>;
+
+interface AlphaProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hsva: HsvaColor;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Alpha: react.MemoExoticComponent<({ hsva, onChange, renderPointer, style, ...rest }: AlphaProps) => react_jsx_runtime.JSX.Element>;
+
+type PointerProps = HTMLAttributes<HTMLDivElement> & {
+    left: number;
+    top?: number;
+    children?: ReactNode;
+};
+declare const Pointer: ({ left, top, children, style, ...rest }: PointerProps) => react_jsx_runtime.JSX.Element;
+
+interface ColorPickerRenderProps {
+    hsva: HsvaColor;
+    updateHsva: (params: Partial<HsvaColor>) => void;
+    Saturation: typeof Saturation;
+    Hue: typeof Hue;
+    Alpha: typeof Alpha;
+    Pointer: typeof Pointer;
+}
+interface ColorPickerProps<T extends AnyColor> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "children" | "color"> {
+    colorModel: ColorModel<T>;
+    color: T;
+    onChange?: (color: T) => void;
+    children?: (renderProps: ColorPickerRenderProps) => ReactNode;
+    renderSaturationPointer?: (args: RenderPointerArgs) => ReactNode;
+    renderHuePointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare function ColorPicker<T extends AnyColor>({ colorModel, color, onChange, children, renderSaturationPointer, renderHuePointer, ...rest }: ColorPickerProps<T>): react_jsx_runtime.JSX.Element;
+
+interface HexColorPickerProps extends Omit<ColorPickerProps<string>, "colorModel"> {
+}
+declare const hexColorModel: ColorModel<string>;
+declare function HexColorPicker({ color, ...rest }: HexColorPickerProps): react_jsx_runtime.JSX.Element;
+
+type Position = {
+    left: number;
+    top: number;
+};
+type InteractiveProps = HTMLAttributes<HTMLDivElement> & {
+    onMove: (pos: Position) => void;
+    onKey: (delta: Position) => void;
+    children?: React.ReactNode;
+};
+declare const Interactive: react.MemoExoticComponent<({ onMove, onKey, children, style, ...rest }: InteractiveProps) => react_jsx_runtime.JSX.Element>;
+
+declare function useColorManipulation<T extends AnyColor>(colorModel: ColorModel<T>, color: T, onChange?: (color: T) => void): [HsvaColor, (color: Partial<HsvaColor>) => void];
+
+declare function useEventCallback<T>(handler?: (value: T) => void): (value: T) => void;
+
+declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
+declare const equalColorString: (first: string, second: string) => boolean;
+declare const equalHex: (first: string, second: string) => boolean;
+
+declare const clamp: (number: number, min?: number, max?: number) => number;
+
+declare const hexToHsva: (hex: string) => HsvaColor;
+declare const hexToRgba: (hex: string) => RgbaColor;
+declare const parseHue: (value: string, unit?: string) => number;
+declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+declare const hslStringToHsva: (hslString: string) => HsvaColor;
+declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+declare const hsvaToHex: (hsva: HsvaColor) => string;
+declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+declare const hsvaToHslString: (hsva: HsvaColor) => string;
+declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;
+declare const hsvaToHueHsl: (h: number) => string;
+
+declare const round: (number: number, digits?: number, base?: number) => number;
+
+declare const validHex: (value: string, alpha?: boolean) => boolean;
+
+/**
+ * Returns a nonce hash included by Webpack or the one defined manually by developer.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+ * https://webpack.js.org/guides/csp/
+ */
+declare const getNonce: () => string | undefined;
+/**
+ * Signs the style tag with a base64-encoded string (nonce) to conforms to Content Security Policies.
+ * This function has to be invoked before any picker is rendered if you aren't using Webpack for CSP.
+ */
+declare const setNonce: (hash: string) => void;
+
+declare const formatClassName: (names: unknown[]) => string;
+
+export { Alpha, type AlphaProps, type AnyColor, type ColorModel, ColorPicker, type ColorPickerProps, type ColorPickerRenderProps, HexColorPicker, type HexColorPickerProps, type HslColor, type HslaColor, type HsvColor, type HsvaColor, Hue, type HueProps, Interactive, type ObjectColor, Pointer, type PointerPosition, type RenderPointerArgs, type RgbColor, type RgbaColor, Saturation, type SaturationProps, clamp, equalColorObjects, equalColorString, equalHex, formatClassName, getNonce, hexColorModel, hexToHsva, hexToRgba, hslStringToHsva, hslaStringToHsva, hslaToHsl, hslaToHsva, hsvStringToHsva, hsvaStringToHsva, hsvaToHex, hsvaToHslString, hsvaToHsla, hsvaToHslaString, hsvaToHsv, hsvaToHsvString, hsvaToHsvaString, hsvaToHueHsl, hsvaToRgbString, hsvaToRgba, hsvaToRgbaString, parseHue, rgbStringToHsva, rgbaStringToHsva, rgbaToHex, rgbaToHsva, rgbaToRgb, round, roundHsva, setNonce, useColorManipulation, useEventCallback, validHex };

package/dist/index.d.ts

@@ -0,0 +1,163 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+interface RgbaColor extends RgbColor {
+    a: number;
+}
+interface HslColor {
+    h: number;
+    s: number;
+    l: number;
+}
+interface HslaColor extends HslColor {
+    a: number;
+}
+interface HsvColor {
+    h: number;
+    s: number;
+    v: number;
+}
+interface HsvaColor extends HsvColor {
+    a: number;
+}
+type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
+type AnyColor = string | ObjectColor;
+interface ColorModel<T extends AnyColor> {
+    defaultColor: T;
+    toHsva: (defaultColor: T) => HsvaColor;
+    fromHsva: (hsva: HsvaColor) => T;
+    equal: (first: T, second: T) => boolean;
+}
+interface PointerPosition {
+    left: number;
+    top: number;
+}
+interface RenderPointerArgs extends PointerPosition {
+    hsva?: HsvaColor;
+    hue?: number;
+}
+
+interface HueProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hue: number;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Hue: react.MemoExoticComponent<({ hue, onChange, renderPointer, style, ...rest }: HueProps) => react_jsx_runtime.JSX.Element>;
+
+interface SaturationProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hsva: HsvaColor;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Saturation: react.MemoExoticComponent<({ hsva, onChange, style, renderPointer, ...rest }: SaturationProps) => react_jsx_runtime.JSX.Element>;
+
+interface AlphaProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    hsva: HsvaColor;
+    onChange: (params: Partial<HsvaColor>) => void;
+    renderPointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare const Alpha: react.MemoExoticComponent<({ hsva, onChange, renderPointer, style, ...rest }: AlphaProps) => react_jsx_runtime.JSX.Element>;
+
+type PointerProps = HTMLAttributes<HTMLDivElement> & {
+    left: number;
+    top?: number;
+    children?: ReactNode;
+};
+declare const Pointer: ({ left, top, children, style, ...rest }: PointerProps) => react_jsx_runtime.JSX.Element;
+
+interface ColorPickerRenderProps {
+    hsva: HsvaColor;
+    updateHsva: (params: Partial<HsvaColor>) => void;
+    Saturation: typeof Saturation;
+    Hue: typeof Hue;
+    Alpha: typeof Alpha;
+    Pointer: typeof Pointer;
+}
+interface ColorPickerProps<T extends AnyColor> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "children" | "color"> {
+    colorModel: ColorModel<T>;
+    color: T;
+    onChange?: (color: T) => void;
+    children?: (renderProps: ColorPickerRenderProps) => ReactNode;
+    renderSaturationPointer?: (args: RenderPointerArgs) => ReactNode;
+    renderHuePointer?: (args: RenderPointerArgs) => ReactNode;
+}
+declare function ColorPicker<T extends AnyColor>({ colorModel, color, onChange, children, renderSaturationPointer, renderHuePointer, ...rest }: ColorPickerProps<T>): react_jsx_runtime.JSX.Element;
+
+interface HexColorPickerProps extends Omit<ColorPickerProps<string>, "colorModel"> {
+}
+declare const hexColorModel: ColorModel<string>;
+declare function HexColorPicker({ color, ...rest }: HexColorPickerProps): react_jsx_runtime.JSX.Element;
+
+type Position = {
+    left: number;
+    top: number;
+};
+type InteractiveProps = HTMLAttributes<HTMLDivElement> & {
+    onMove: (pos: Position) => void;
+    onKey: (delta: Position) => void;
+    children?: React.ReactNode;
+};
+declare const Interactive: react.MemoExoticComponent<({ onMove, onKey, children, style, ...rest }: InteractiveProps) => react_jsx_runtime.JSX.Element>;
+
+declare function useColorManipulation<T extends AnyColor>(colorModel: ColorModel<T>, color: T, onChange?: (color: T) => void): [HsvaColor, (color: Partial<HsvaColor>) => void];
+
+declare function useEventCallback<T>(handler?: (value: T) => void): (value: T) => void;
+
+declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
+declare const equalColorString: (first: string, second: string) => boolean;
+declare const equalHex: (first: string, second: string) => boolean;
+
+declare const clamp: (number: number, min?: number, max?: number) => number;
+
+declare const hexToHsva: (hex: string) => HsvaColor;
+declare const hexToRgba: (hex: string) => RgbaColor;
+declare const parseHue: (value: string, unit?: string) => number;
+declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+declare const hslStringToHsva: (hslString: string) => HsvaColor;
+declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+declare const hsvaToHex: (hsva: HsvaColor) => string;
+declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+declare const hsvaToHslString: (hsva: HsvaColor) => string;
+declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;
+declare const hsvaToHueHsl: (h: number) => string;
+
+declare const round: (number: number, digits?: number, base?: number) => number;
+
+declare const validHex: (value: string, alpha?: boolean) => boolean;
+
+/**
+ * Returns a nonce hash included by Webpack or the one defined manually by developer.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+ * https://webpack.js.org/guides/csp/
+ */
+declare const getNonce: () => string | undefined;
+/**
+ * Signs the style tag with a base64-encoded string (nonce) to conforms to Content Security Policies.
+ * This function has to be invoked before any picker is rendered if you aren't using Webpack for CSP.
+ */
+declare const setNonce: (hash: string) => void;
+
+declare const formatClassName: (names: unknown[]) => string;
+
+export { Alpha, type AlphaProps, type AnyColor, type ColorModel, ColorPicker, type ColorPickerProps, type ColorPickerRenderProps, HexColorPicker, type HexColorPickerProps, type HslColor, type HslaColor, type HsvColor, type HsvaColor, Hue, type HueProps, Interactive, type ObjectColor, Pointer, type PointerPosition, type RenderPointerArgs, type RgbColor, type RgbaColor, Saturation, type SaturationProps, clamp, equalColorObjects, equalColorString, equalHex, formatClassName, getNonce, hexColorModel, hexToHsva, hexToRgba, hslStringToHsva, hslaStringToHsva, hslaToHsl, hslaToHsva, hsvStringToHsva, hsvaStringToHsva, hsvaToHex, hsvaToHslString, hsvaToHsla, hsvaToHslaString, hsvaToHsv, hsvaToHsvString, hsvaToHsvaString, hsvaToHueHsl, hsvaToRgbString, hsvaToRgba, hsvaToRgbaString, parseHue, rgbStringToHsva, rgbaStringToHsva, rgbaToHex, rgbaToHsva, rgbaToRgb, round, roundHsva, setNonce, useColorManipulation, useEventCallback, validHex };