@chayns-components/color-picker 5.0.0-beta.1000

package/lib/esm/utils/color.js

@@ -0,0 +1,229 @@
+import { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';
+export const getColorFromCoordinates = _ref => {
+  let {
+    coordinates,
+    canvas,
+    opacity,
+    scale
+  } = _ref;
+  if (!canvas.current) {
+    return undefined;
+  }
+  const xCords = coordinates.x;
+  const yCords = coordinates.y;
+  const x = (xCords - 0.5) * scale.scaleX;
+  const y = (yCords - 0.5) * scale.scaleY;
+  const ctx = canvas.current?.getContext('2d', {
+    willReadFrequently: true
+  });
+  const pixels = ctx?.getImageData(x, y, 1, 1).data;
+  if (!pixels) {
+    return undefined;
+  }
+
+  // If transparency
+  if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {
+    return 'transparent';
+  }
+  return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;
+};
+export const getCoordinatesFromColor = _ref2 => {
+  let {
+    canvas,
+    color,
+    tolerance = 0
+  } = _ref2;
+  const ctx = canvas.current?.getContext('2d', {
+    willReadFrequently: true
+  });
+  if (!ctx) {
+    return null;
+  }
+  const height = canvas.current?.height ?? 150;
+  const width = canvas.current?.width ?? 300;
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const pixels = imageData.data;
+  const rgb = splitRgb(color);
+  if (!rgb) {
+    return null;
+  }
+  const {
+    r: targetR,
+    g: targetG,
+    b: targetB
+  } = rgb;
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const index = (y * width + x) * 4;
+      const r = pixels[index] ?? 0;
+      const g = pixels[index + 1] ?? 0;
+      const b = pixels[index + 2] ?? 0;
+      if (Math.abs(targetR - r) <= tolerance && Math.abs(targetG - g) <= tolerance && Math.abs(targetB - b) <= tolerance) {
+        return {
+          x,
+          y
+        };
+      }
+    }
+  }
+  return null;
+};
+export const isValidRGBA = rgbaString => {
+  if (rgbaString === '') {
+    return false;
+  }
+  const rgbaRegex = /^rgba\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*((0?\.\d+)|(1|0))\s*\)$/;
+  if (!rgbaRegex.test(rgbaString)) {
+    return false;
+  }
+  const matches = rgbaString.match(rgbaRegex);
+  if (!matches) {
+    return false;
+  }
+  const red = parseInt(matches[1] ?? '', 10);
+  const green = parseInt(matches[2] ?? '', 10);
+  const blue = parseInt(matches[3] ?? '', 10);
+  const alpha = parseFloat(matches[4] ?? '');
+  return !(red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255 || alpha < 0 || alpha > 1);
+};
+export const isValidRGB = rgbString => {
+  if (rgbString === '') {
+    return false;
+  }
+  const rgbRegex = /^rgb\(\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\s*\)$/;
+  if (!rgbRegex.test(rgbString)) {
+    return false;
+  }
+  const matches = rgbString.match(rgbRegex);
+  if (!matches) {
+    return false;
+  }
+  const red = parseInt(matches[1] ?? '', 10);
+  const green = parseInt(matches[2] ?? '', 10);
+  const blue = parseInt(matches[3] ?? '', 10);
+  return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;
+};
+export const convertColorToHsl = color => {
+  const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  const rgbRegex = /^rgb(a)?\(\s*((25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*,\s*){2}(25[0-5]|2[0-4]\d|1\d{2}|\d{1,2})\s*(,\s*\d+(\.\d+)?)?\)$/i;
+  const hslRegex = /^hsla?\(\s*((360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*,\s*){2}(360|3[0-5]\d|[12]\d{2}|[1-9]\d|\d)\s*(,\s*\d+(\.\d+)?)?\)$/i;
+  let rgba;
+  let hsl;
+  const newColor = color.replaceAll('%', '');
+  switch (true) {
+    case hexRegex.test(newColor):
+      hsl = hexToHsl(color);
+      if (!hsl) {
+        return undefined;
+      }
+      return `hsl(${Math.floor(hsl.h)},100%,100%)`;
+    case rgbRegex.test(newColor):
+      rgba = color.match(/[\d.]+/g);
+      if (!rgba) {
+        return undefined;
+      }
+      hsl = rgb255ToHsl({
+        r: Number(rgba[0]),
+        g: Number(rgba[1]),
+        b: Number(rgba[2])
+      });
+      if (!hsl) {
+        return undefined;
+      }
+      return `hsl(${Math.floor(hsl.h)},100%,100%)`;
+    case hslRegex.test(newColor):
+      return color;
+    default:
+      return undefined;
+  }
+};
+export const rgbToHsv = color => rgb255ToHsv(extractRgbValues(color ?? ''));
+export const extractHsl = hsl => {
+  const match = hsl.match(/hsl\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*\)/i);
+  if (!match) {
+    return null;
+  }
+  const h = parseFloat(match[1] ?? '');
+  const s = parseFloat(match[2] ?? '') / 100;
+  const l = parseFloat(match[3] ?? '') / 100;
+  return {
+    h,
+    s,
+    l
+  };
+};
+export const splitRgb = color => {
+  const rgba = color?.match(/[\d.]+/g);
+  if (!rgba) {
+    return null;
+  }
+  return {
+    r: Number(rgba[0]),
+    g: Number(rgba[1]),
+    b: Number(rgba[2]),
+    a: Number(rgba[3])
+  };
+};
+export const extractRgbValues = rgbString => {
+  const rgbaRegex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)/;
+  const match = rgbString.match(rgbaRegex);
+  if (match) {
+    const r = parseInt(match[1] ?? '', 10);
+    const g = parseInt(match[2] ?? '', 10);
+    const b = parseInt(match[3] ?? '', 10);
+    const a = parseFloat(match[4] ?? '');
+    return {
+      r,
+      g,
+      b,
+      a
+    };
+  }
+  return {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  };
+};
+export const hexToRgb = hex => {
+  let r;
+  let g;
+  let b;
+  let a;
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
+  if (result) {
+    r = parseInt(result[1] ?? '0', 16);
+    g = parseInt(result[2] ?? '0', 16);
+    b = parseInt(result[3] ?? '0', 16);
+    a = result[4] ? parseInt(result[4], 16) / 100 : 1;
+    return {
+      r,
+      g,
+      b,
+      a
+    };
+  }
+  return {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 1
+  };
+};
+export const rgbToHex = _ref3 => {
+  let {
+    r,
+    g,
+    b,
+    a = 1
+  } = _ref3;
+  const clamp = value => Math.max(0, Math.min(255, Math.round(value)));
+  const alpha = Math.max(0, Math.min(1, a));
+  const hex = x => {
+    const hexValue = clamp(x).toString(16);
+    return hexValue.length === 1 ? `0${hexValue}` : hexValue;
+  };
+  return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;
+};
+//# sourceMappingURL=color.js.map

package/lib/esm/utils/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","rgb255ToHsv","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","xCords","x","yCords","y","scaleX","scaleY","ctx","getContext","willReadFrequently","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","tolerance","height","width","imageData","rgb","splitRgb","r","targetR","g","targetG","b","targetB","index","Math","abs","isValidRGBA","rgbaString","rgbaRegex","test","matches","match","red","parseInt","green","blue","alpha","parseFloat","isValidRGB","rgbString","rgbRegex","convertColorToHsl","hexRegex","hslRegex","rgba","hsl","newColor","replaceAll","floor","h","Number","rgbToHsv","extractRgbValues","extractHsl","s","l","a","hexToRgb","hex","result","exec","rgbToHex","_ref3","clamp","value","max","min","round","hexValue","toString","length"],"sources":["../../../src/utils/color.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from 'react';\n\nimport { hexToHsl, rgb255ToHsl, rgb255ToHsv } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { Coordinates, RGBA, Scale } from '../types/colorPicker';\n\ninterface GetColorFromCoordinatesOptions {\n    coordinates: Coordinates;\n    canvas: RefObject<HTMLCanvasElement>;\n    opacity: number;\n    scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n    coordinates,\n    canvas,\n    opacity,\n    scale,\n}: GetColorFromCoordinatesOptions) => {\n    if (!canvas.current) {\n        return undefined;\n    }\n\n    const xCords = coordinates.x;\n    const yCords = coordinates.y;\n\n    const x = (xCords - 0.5) * scale.scaleX;\n    const y = (yCords - 0.5) * scale.scaleY;\n\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n    const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n    if (!pixels) {\n        return undefined;\n    }\n\n    // If transparency\n    if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n        return 'transparent';\n    }\n\n    return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n    color: CSSProperties['color'];\n    canvas: RefObject<HTMLCanvasElement>;\n    tolerance?: number;\n}\n\nexport const getCoordinatesFromColor = ({\n    canvas,\n    color,\n    tolerance = 0,\n}: GetCoordinatesFromColorOptions) => {\n    const ctx = canvas.current?.getContext('2d', { willReadFrequently: true });\n\n    if (!ctx) {\n        return null;\n    }\n\n    const height = canvas.current?.height ?? 150;\n    const width = canvas.current?.width ?? 300;\n\n    const imageData = ctx.getImageData(0, 0, width, height);\n    const pixels = imageData.data;\n\n    const rgb = splitRgb(color);\n\n    if (!rgb) {\n        return null;\n    }\n\n    const { r: targetR, g: targetG, b: targetB } = rgb;\n\n    for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n            const index = (y * width + x) * 4;\n            const r = pixels[index] ?? 0;\n            const g = pixels[index + 1] ?? 0;\n            const b = pixels[index + 2] ?? 0;\n\n            if (\n                Math.abs(targetR - r) <= tolerance &&\n                Math.abs(targetG - g) <= tolerance &&\n                Math.abs(targetB - b) <= tolerance\n            ) {\n                return { x, y };\n            }\n        }\n    }\n\n    return null;\n};\n\nexport const isValidRGBA = (rgbaString: string): boolean => {\n    if (rgbaString === '') {\n        return false;\n    }\n\n    const rgbaRegex = /^rgba\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*((0?\\.\\d+)|(1|0))\\s*\\)$/;\n    if (!rgbaRegex.test(rgbaString)) {\n        return false;\n    }\n\n    const matches = rgbaString.match(rgbaRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n    const alpha = parseFloat(matches[4] ?? '');\n\n    return !(\n        red < 0 ||\n        red > 255 ||\n        green < 0 ||\n        green > 255 ||\n        blue < 0 ||\n        blue > 255 ||\n        alpha < 0 ||\n        alpha > 1\n    );\n};\n\nexport const isValidRGB = (rgbString: string): boolean => {\n    if (rgbString === '') {\n        return false;\n    }\n\n    const rgbRegex = /^rgb\\(\\s*(\\d{1,3}),\\s*(\\d{1,3}),\\s*(\\d{1,3})\\s*\\)$/;\n    if (!rgbRegex.test(rgbString)) {\n        return false;\n    }\n\n    const matches = rgbString.match(rgbRegex);\n    if (!matches) {\n        return false;\n    }\n\n    const red = parseInt(matches[1] ?? '', 10);\n    const green = parseInt(matches[2] ?? '', 10);\n    const blue = parseInt(matches[3] ?? '', 10);\n\n    return red >= 0 && red <= 255 && green >= 0 && green <= 255 && blue >= 0 && blue <= 255;\n};\n\nexport const convertColorToHsl = (color: string) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    const rgbRegex =\n        /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n    const hslRegex =\n        /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n    let rgba: string[] | null;\n    let hsl: HSL | HSLA | null;\n\n    const newColor = color.replaceAll('%', '');\n\n    switch (true) {\n        case hexRegex.test(newColor):\n            hsl = hexToHsl(color);\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case rgbRegex.test(newColor):\n            rgba = color.match(/[\\d.]+/g);\n\n            if (!rgba) {\n                return undefined;\n            }\n\n            hsl = rgb255ToHsl({\n                r: Number(rgba[0]),\n                g: Number(rgba[1]),\n                b: Number(rgba[2]),\n            });\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,100%)`;\n        case hslRegex.test(newColor):\n            return color;\n        default:\n            return undefined;\n    }\n};\n\nexport const rgbToHsv = (color: CSSProperties['color']) =>\n    rgb255ToHsv(extractRgbValues(color ?? ''));\n\nexport const extractHsl = (hsl: string) => {\n    const match = hsl.match(\n        /hsl\\(\\s*(\\d+(?:\\.\\d+)?)\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*,\\s*(\\d+(?:\\.\\d+)?)%\\s*\\)/i,\n    );\n\n    if (!match) {\n        return null;\n    }\n\n    const h = parseFloat(match[1] ?? '');\n    const s = parseFloat(match[2] ?? '') / 100;\n    const l = parseFloat(match[3] ?? '') / 100;\n\n    return { h, s, l };\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGBA => {\n    const rgba = color?.match(/[\\d.]+/g);\n\n    if (!rgba) {\n        return null;\n    }\n\n    return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n\nexport const extractRgbValues = (rgbString: string): RGBA => {\n    const rgbaRegex = /rgba\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*([\\d.]+)\\s*\\)/;\n    const match = rgbString.match(rgbaRegex);\n\n    if (match) {\n        const r = parseInt(match[1] ?? '', 10);\n        const g = parseInt(match[2] ?? '', 10);\n        const b = parseInt(match[3] ?? '', 10);\n        const a = parseFloat(match[4] ?? '');\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const hexToRgb = (hex: string): RGBA => {\n    let r: number;\n    let g: number;\n    let b: number;\n    let a: number;\n\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})?$/i.exec(hex);\n\n    if (result) {\n        r = parseInt(result[1] ?? '0', 16);\n        g = parseInt(result[2] ?? '0', 16);\n        b = parseInt(result[3] ?? '0', 16);\n        a = result[4] ? parseInt(result[4], 16) / 100 : 1;\n\n        return { r, g, b, a };\n    }\n\n    return {\n        r: 255,\n        g: 255,\n        b: 255,\n        a: 1,\n    };\n};\n\nexport const rgbToHex = ({ r, g, b, a = 1 }: RGBA): string => {\n    const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n    const alpha = Math.max(0, Math.min(1, a));\n    const hex = (x: number) => {\n        const hexValue = clamp(x).toString(16);\n        return hexValue.length === 1 ? `0${hexValue}` : hexValue;\n    };\n    return `#${hex(r)}${hex(g)}${hex(b)}${alpha <= 1 ? hex(alpha * 100) : ''}`;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/api/color/get.d.ts

@@ -0,0 +1 @@
+export declare const putSiteColors: (colorsArray: string[]) => Promise<boolean>;

package/lib/types/api/color/put.d.ts

@@ -0,0 +1,2 @@
+import { ItemStorageResult } from '../../types/colorPicker';
+export declare const getSiteColors: () => Promise<ItemStorageResult>;

package/lib/types/components/ColorPickerProvider.d.ts

@@ -0,0 +1,35 @@
+import React, { type ReactNode } from 'react';
+interface IColorPickerContext {
+    selectedColor?: string;
+    updateSelectedColor?: (color: string | undefined) => void;
+    hueColor?: string;
+    updateHueColor?: (color: string | undefined) => void;
+    isPresetColor?: boolean;
+    updateIsPresetColor?: (isPresetColor: boolean) => void;
+    shouldGetCoordinates?: boolean;
+    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;
+    shouldCallOnSelect?: boolean;
+    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;
+    canGetColorFromArea?: boolean;
+    updateCanGetColorFromArea?: (canGetColorFromArea: boolean) => void;
+}
+export declare const ColorPickerContext: React.Context<IColorPickerContext>;
+interface ColorPickerProviderProps {
+    /**
+     * The children of the provider.
+     */
+    children: ReactNode;
+    /**
+     * Function to be executed when a color is selected.
+     */
+    onSelect?: (color: string) => void;
+    /**
+     * The color that should be preselected.
+     */
+    selectedColor?: string;
+}
+declare const ColorPickerProvider: {
+    ({ children, selectedColor, onSelect }: ColorPickerProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerProvider;

package/lib/types/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,61 @@
+import React, { ReactNode } from 'react';
+import type { IPresetColor } from '../../types/colorPicker';
+interface ColorPickerProps {
+    /**
+     * The element that should be rendered to trigger the ColorPicker popup on click.
+     */
+    children?: ReactNode;
+    /**
+     * Function to be executed when a preset color is added.
+     */
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    /**
+     * Function to be executed when a preset color is removed.
+     */
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    /**
+     * Function to be executed when a color is selected.
+     */
+    onSelect?: (color: string) => void;
+    /**
+     * Colors the user can select from.
+     */
+    presetColors?: IPresetColor[];
+    /**
+     * The color that should be preselected.
+     */
+    selectedColor?: string;
+    /**
+     * Whether the ColorPicker should be displayed inside a popup.
+     */
+    shouldShowAsPopup?: boolean;
+    /**
+     * Whether the more options accordion should be displayed.
+     */
+    shouldShowMoreOptions?: boolean;
+    /**
+     * Whether the preset colors should be displayed.
+     */
+    shouldShowPresetColors?: boolean;
+    /**
+     * Whether the preview color should be displayed as text.
+     */
+    shouldShowPreviewColorString?: boolean;
+    /**
+     * Whether the preview color should be displayed round.
+     */
+    shouldShowRoundPreviewColor?: boolean;
+    /**
+     * Whether the transparency slider should be displayed.
+     */
+    shouldShowTransparencySlider?: boolean;
+    /**
+     * Whether presetColors should be got and uploaded to the site storage.
+     */
+    shouldUseSiteColors?: boolean;
+}
+declare const ColorPicker: {
+    ({ children, onPresetColorAdd, onPresetColorRemove, onSelect, presetColors, selectedColor, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, }: ColorPickerProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPicker;

package/lib/types/components/color-picker/ColorPicker.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledColorPicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import type { IPresetColor } from '../../../types/colorPicker';
+interface ColorPickerWrapperProps {
+    children?: ReactNode;
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    presetColors?: IPresetColor[];
+    shouldShowAsPopup: boolean;
+    shouldShowMoreOptions: boolean;
+    shouldShowPresetColors: boolean;
+    shouldShowPreviewColorString: boolean;
+    shouldShowRoundPreviewColor: boolean;
+    shouldShowTransparencySlider: boolean;
+    shouldUseSiteColors: boolean;
+}
+declare const ColorPickerWrapper: {
+    ({ children, onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, }: ColorPickerWrapperProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerWrapper;

package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts

@@ -0,0 +1,18 @@
+import type { WithTheme } from '@chayns-components/core';
+export declare const StyledColorPickerWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledColorPickerWrapperInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledColorPickerWrapperInfoColorProps = WithTheme<{
+    $color?: string;
+}>;
+type StyledColorPickerWrapperInfoColorWrapperProps = WithTheme<{
+    $shouldShowRoundPreviewColor: boolean;
+}>;
+export declare const StyledColorPickerWrapperInfoColorWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledColorPickerWrapperInfoColorWrapperProps>> & string;
+export declare const StyledColorPickerWrapperInfoColorBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledColorPickerWrapperInfoColor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, StyledColorPickerWrapperInfoColorProps>, never>> & string;
+export declare const StyledColorPickerWrapperInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("@chayns-components/core/lib/types/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}>> & string;
+export {};

package/lib/types/components/color-picker-popup/ColorPickerPopup.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { IPresetColor } from '../../types/colorPicker';
+interface ColorPickerPopupProps {
+    presetColors?: IPresetColor[];
+    shouldShowPresetColors: boolean;
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+    shouldShowTransparencySlider: boolean;
+    shouldShowMoreOptions: boolean;
+    shouldUseSiteColors: boolean;
+}
+declare const ColorPickerPopup: {
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldUseSiteColors, shouldShowMoreOptions, }: ColorPickerPopupProps): React.JSX.Element;
+    displayName: string;
+};
+export default ColorPickerPopup;

package/lib/types/components/color-picker-popup/ColorPickerPopup.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledColorPickerPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/color-picker-popup/color-area/ColorArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const ColorArea: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+export default ColorArea;