@xsolla/xui-color-picker 0.64.0-pr56.1768440195

package/native/index.d.mts

@@ -0,0 +1,120 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+type InputColorFormat = "hex" | "rgb" | "hsl" | "hsb";
+type ColorFormat = "hex" | "hexa" | "hsl" | "hsla" | "rgb" | "rgba" | "hsb" | "hsba";
+type ColorPickerChangeEvent = {
+    /**
+     * The value of the color in the initial format (defined by `colorFormat`).
+     */
+    valueInInitialFormat: string;
+    /**
+     * The currently selected color format.
+     */
+    currentColorFormat: InputColorFormat;
+    /**
+     * The value of the color in the currently selected format.
+     */
+    valueInCurrentFormat: string;
+};
+type ColorPickerProps = {
+    /**
+     * The default format for the color value.
+     * Note: Internally, color calculations are always performed in the HSB color space.
+     */
+    colorFormat?: InputColorFormat;
+    /**
+     * Specifies the list of color formats that the user can select from.
+     * By default, all supported formats (`hex`, `rgb`, `hsl`, `hsb`) will be available.
+     * Note: The `colorFormat` prop determines the default format.
+     */
+    selectableFormats?: Array<InputColorFormat>;
+    /**
+     * Whether the alpha channel (opacity) is enabled.
+     */
+    alpha?: boolean;
+    /**
+     * The current value of the color (usually) in the format specified by `colorFormat`.
+     */
+    value?: string;
+    /**
+     * Event handler when the value of a ColorPicker changes.
+     */
+    onChange?: (value: ColorPickerChangeEvent) => void;
+    /**
+     * Property for passing a new icon to replace the default success copied icon.
+     */
+    copiedIcon?: ReactElement;
+    /**
+     * Enables or disables the eyedropper tool within the ColorPicker.
+     */
+    eyedropper?: boolean;
+    /**
+     * Custom content to be displayed at the bottom of the ColorPicker.
+     */
+    bottomContent?: ReactNode;
+    /**
+     * Test ID for testing frameworks
+     */
+    testID?: string;
+};
+interface CustomColorAreaProps {
+    colorSpace?: "hsb" | "hsl" | "rgb";
+    xChannel?: "saturation" | "red";
+    yChannel?: "brightness" | "lightness" | "green";
+    xChannelStep?: number;
+    yChannelStep?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    onChangeEnd?: (color: string) => void;
+    className?: string;
+}
+
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<any>>;
+
+type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+interface ColorValue {
+    getChannelValue(channel: ColorChannel): number;
+    setChannelValue(channel: ColorChannel, value: number): ColorValue;
+    getChannelRange(channel: ColorChannel): {
+        minValue: number;
+        maxValue: number;
+        step: number;
+        pageSize: number;
+    };
+    getColorChannels(): ColorChannel[];
+    toFormat(format: string): string;
+    toString(format?: string): string;
+    toHsb(): {
+        h: number;
+        s: number;
+        b: number;
+        a: number;
+    };
+    toRgb(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    toHsl(): {
+        h: number;
+        s: number;
+        l: number;
+        a: number;
+    };
+}
+declare function parseColor(color: string): ColorValue;
+declare function createColorFromHsb(h: number, s: number, b: number, a?: number): ColorValue;
+
+declare const ColorPickerArea: React.ForwardRefExoticComponent<CustomColorAreaProps & React.RefAttributes<any>>;
+
+type ColorPickerSliderProps = {
+    channel: "hue" | "alpha";
+    value: string;
+    onChange?: (color: string) => void;
+    onChangeEnd?: (color: string) => void;
+};
+declare const ColorPickerSlider: React.FC<ColorPickerSliderProps>;
+
+export { type ColorChannel, type ColorFormat, ColorPicker, ColorPickerArea, type ColorPickerChangeEvent, type ColorPickerProps, ColorPickerSlider, type ColorValue, type CustomColorAreaProps, type InputColorFormat, createColorFromHsb, parseColor };

package/native/index.d.ts

@@ -0,0 +1,120 @@
+import React, { ReactElement, ReactNode } from 'react';
+
+type InputColorFormat = "hex" | "rgb" | "hsl" | "hsb";
+type ColorFormat = "hex" | "hexa" | "hsl" | "hsla" | "rgb" | "rgba" | "hsb" | "hsba";
+type ColorPickerChangeEvent = {
+    /**
+     * The value of the color in the initial format (defined by `colorFormat`).
+     */
+    valueInInitialFormat: string;
+    /**
+     * The currently selected color format.
+     */
+    currentColorFormat: InputColorFormat;
+    /**
+     * The value of the color in the currently selected format.
+     */
+    valueInCurrentFormat: string;
+};
+type ColorPickerProps = {
+    /**
+     * The default format for the color value.
+     * Note: Internally, color calculations are always performed in the HSB color space.
+     */
+    colorFormat?: InputColorFormat;
+    /**
+     * Specifies the list of color formats that the user can select from.
+     * By default, all supported formats (`hex`, `rgb`, `hsl`, `hsb`) will be available.
+     * Note: The `colorFormat` prop determines the default format.
+     */
+    selectableFormats?: Array<InputColorFormat>;
+    /**
+     * Whether the alpha channel (opacity) is enabled.
+     */
+    alpha?: boolean;
+    /**
+     * The current value of the color (usually) in the format specified by `colorFormat`.
+     */
+    value?: string;
+    /**
+     * Event handler when the value of a ColorPicker changes.
+     */
+    onChange?: (value: ColorPickerChangeEvent) => void;
+    /**
+     * Property for passing a new icon to replace the default success copied icon.
+     */
+    copiedIcon?: ReactElement;
+    /**
+     * Enables or disables the eyedropper tool within the ColorPicker.
+     */
+    eyedropper?: boolean;
+    /**
+     * Custom content to be displayed at the bottom of the ColorPicker.
+     */
+    bottomContent?: ReactNode;
+    /**
+     * Test ID for testing frameworks
+     */
+    testID?: string;
+};
+interface CustomColorAreaProps {
+    colorSpace?: "hsb" | "hsl" | "rgb";
+    xChannel?: "saturation" | "red";
+    yChannel?: "brightness" | "lightness" | "green";
+    xChannelStep?: number;
+    yChannelStep?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    onChangeEnd?: (color: string) => void;
+    className?: string;
+}
+
+declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<any>>;
+
+type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+interface ColorValue {
+    getChannelValue(channel: ColorChannel): number;
+    setChannelValue(channel: ColorChannel, value: number): ColorValue;
+    getChannelRange(channel: ColorChannel): {
+        minValue: number;
+        maxValue: number;
+        step: number;
+        pageSize: number;
+    };
+    getColorChannels(): ColorChannel[];
+    toFormat(format: string): string;
+    toString(format?: string): string;
+    toHsb(): {
+        h: number;
+        s: number;
+        b: number;
+        a: number;
+    };
+    toRgb(): {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    toHsl(): {
+        h: number;
+        s: number;
+        l: number;
+        a: number;
+    };
+}
+declare function parseColor(color: string): ColorValue;
+declare function createColorFromHsb(h: number, s: number, b: number, a?: number): ColorValue;
+
+declare const ColorPickerArea: React.ForwardRefExoticComponent<CustomColorAreaProps & React.RefAttributes<any>>;
+
+type ColorPickerSliderProps = {
+    channel: "hue" | "alpha";
+    value: string;
+    onChange?: (color: string) => void;
+    onChangeEnd?: (color: string) => void;
+};
+declare const ColorPickerSlider: React.FC<ColorPickerSliderProps>;
+
+export { type ColorChannel, type ColorFormat, ColorPicker, ColorPickerArea, type ColorPickerChangeEvent, type ColorPickerProps, ColorPickerSlider, type ColorValue, type CustomColorAreaProps, type InputColorFormat, createColorFromHsb, parseColor };