@highlight-ui/color-picker - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/cjs/index.d.ts

 export { default } from './src/ColorPicker';
-export type { ColorPickerProps, PaletteTypes } from './src/ColorPicker';
+export type { ColorPickerProps } from './src/ColorPicker';
+export { getHexByColorName } from './src/palettes';
+export type { PaletteTypes } from './src/palettes';

dist/cjs/index.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
@@ -42,6 +44,7 @@ var utilsCommons = require('@highlight-ui/utils-commons');
 
-var styles = {"supportBlue":"#0db5df","supportBrown":"#795548","supportDarkBlue":"#0d34a2","supportDarkPurple":"#7d5cb8","supportGreen":"#3c968d","supportGreyDark":"#5a7886","supportLightGreen":"#8bc34a","supportOrange":"#ffa319","supportPastelBlue":"#bbe5f8","supportPastelBrown":"#d9d0cd","supportPastelDarkBlue":"#cfd6ec","supportPastelDarkPurple":"#d5cae9","supportPastelGreen":"#bbe1dd","supportPastelGrey":"#d3dade","supportPastelLightGreen":"#deecce","supportPastelOrange":"#fbe1bb","supportPastelPink":"#f5c3d4","supportPastelPurple":"#e1c5e7","supportPastelRed":"#f8ccc9","supportPastelYellow":"#fbf6ca","supportPink":"#e8467c","supportPurple":"#9f3eb0","supportRed":"#f55549","supportYellow":"#f4e453","colorPicker":"ColorPicker-module__3H6ypMLc__v1-1-0","button":"ColorPicker-module__XBQM5x8U__v1-1-0","focus":"ColorPicker-module__1iX9akK___v1-1-0","active":"ColorPicker-module__3K79GJJ5__v1-1-0","disabled":"ColorPicker-module__2PSNxo4E__v1-1-0","chevron":"ColorPicker-module__2cO2fFV9__v1-1-0","colorDot":"ColorPicker-module___ZbovZGW__v1-1-0","panel":"ColorPicker-module__3aVapG4Z__v1-1-0","title":"ColorPicker-module__1dP4IMl5__v1-1-0","titleRow":"ColorPicker-module__3-oGnvjB__v1-1-0","colorPreviewWrapper":"ColorPicker-module__3pfOd4k3__v1-1-0","colorPreview":"ColorPicker-module__2VFdKwYM__v1-1-0","colorHex":"ColorPicker-module__1wpQiLhG__v1-1-0","optionRow":"ColorPicker-module__27eY5eb7__v1-1-0","colorOption":"ColorPicker-module__19MT-I77__v1-1-0"};
+var styles = {"supportBlue":"#0db5df","supportBrown":"#795548","supportDarkBlue":"#0d34a2","supportDarkPurple":"#7d5cb8","supportGreen":"#3c968d","supportGreyDark":"#5a7886","supportLightGreen":"#8bc34a","supportOrange":"#ffa319","supportPastelBlue":"#bbe5f8","supportPastelBrown":"#d9d0cd","supportPastelDarkBlue":"#cfd6ec","supportPastelDarkPurple":"#d5cae9","supportPastelGreen":"#bbe1dd","supportPastelGrey":"#d3dade","supportPastelLightGreen":"#deecce","supportPastelOrange":"#fbe1bb","supportPastelPink":"#f5c3d4","supportPastelPurple":"#e1c5e7","supportPastelRed":"#f8ccc9","supportPastelYellow":"#fbf6ca","supportPink":"#e8467c","supportPurple":"#9f3eb0","supportRed":"#f55549","supportYellow":"#f4e453","colorPicker":"ColorPicker-module__3H6ypMLc__v1-2-0","button":"ColorPicker-module__XBQM5x8U__v1-2-0","focus":"ColorPicker-module__1iX9akK___v1-2-0","active":"ColorPicker-module__3K79GJJ5__v1-2-0","disabled":"ColorPicker-module__2PSNxo4E__v1-2-0","chevron":"ColorPicker-module__2cO2fFV9__v1-2-0","colorDot":"ColorPicker-module___ZbovZGW__v1-2-0","panel":"ColorPicker-module__3aVapG4Z__v1-2-0","title":"ColorPicker-module__1dP4IMl5__v1-2-0","titleRow":"ColorPicker-module__3-oGnvjB__v1-2-0","colorPreviewWrapper":"ColorPicker-module__3pfOd4k3__v1-2-0","colorPreview":"ColorPicker-module__2VFdKwYM__v1-2-0","colorHex":"ColorPicker-module__1wpQiLhG__v1-2-0","optionRow":"ColorPicker-module__27eY5eb7__v1-2-0","colorOption":"ColorPicker-module__19MT-I77__v1-2-0"};
 
-var mainPalette = [
+var mainPalette = (function (p) { return p; })([
     {
+        identifier: 'supportRed',
         backgroundColor: styles.supportRed,
@@ -51,2 +54,3 @@ highlight: styles.supportRed,
     {
+        identifier: 'supportPink',
         backgroundColor: styles.supportPink,
@@ -56,2 +60,3 @@ highlight: styles.supportPink,
     {
+        identifier: 'supportPurple',
         backgroundColor: styles.supportPurple,
@@ -61,2 +66,3 @@ highlight: styles.supportPurple,
     {
+        identifier: 'supportDarkPurple',
         backgroundColor: styles.supportDarkPurple,
@@ -66,2 +72,3 @@ highlight: styles.supportDarkPurple,
     {
+        identifier: 'supportDarkBlue',
         backgroundColor: styles.supportDarkBlue,
@@ -71,2 +78,3 @@ highlight: styles.supportDarkBlue,
     {
+        identifier: 'supportBlue',
         backgroundColor: styles.supportBlue,
@@ -76,2 +84,3 @@ highlight: styles.supportBlue,
     {
+        identifier: 'supportGreen',
         backgroundColor: styles.supportGreen,
@@ -81,2 +90,3 @@ highlight: styles.supportGreen,
     {
+        identifier: 'supportLightGreen',
         backgroundColor: styles.supportLightGreen,
@@ -86,2 +96,3 @@ highlight: styles.supportLightGreen,
     {
+        identifier: 'supportYellow',
         backgroundColor: styles.supportYellow,
@@ -91,2 +102,3 @@ highlight: styles.supportYellow,
     {
+        identifier: 'supportOrange',
         backgroundColor: styles.supportOrange,
@@ -96,2 +108,3 @@ highlight: styles.supportOrange,
     {
+        identifier: 'supportBrown',
         backgroundColor: styles.supportBrown,
@@ -101,8 +114,10 @@ highlight: styles.supportBrown,
     {
+        identifier: 'supportGreyDark',
         backgroundColor: styles.supportGreyDark,
         highlight: styles.supportGreyDark,
     },
-];
-var pastelPalette = [
+]);
+var pastelPalette = (function (p) { return p; })([
     {
+        identifier: 'supportPastelRed',
         backgroundColor: styles.supportPastelRed,
@@ -112,2 +127,3 @@ highlight: styles.supportRed,
     {
+        identifier: 'supportPastelPink',
         backgroundColor: styles.supportPastelPink,
@@ -117,2 +133,3 @@ highlight: styles.supportPink,
     {
+        identifier: 'supportPastelPurple',
         backgroundColor: styles.supportPastelPurple,
@@ -122,2 +139,3 @@ highlight: styles.supportPurple,
     {
+        identifier: 'supportPastelDarkPurple',
         backgroundColor: styles.supportPastelDarkPurple,
@@ -127,2 +145,3 @@ highlight: styles.supportDarkPurple,
     {
+        identifier: 'supportPastelDarkBlue',
         backgroundColor: styles.supportPastelDarkBlue,
@@ -132,2 +151,3 @@ highlight: styles.supportDarkBlue,
     {
+        identifier: 'supportPastelBlue',
         backgroundColor: styles.supportPastelBlue,
@@ -137,2 +157,3 @@ highlight: styles.supportBlue,
     {
+        identifier: 'supportPastelGreen',
         backgroundColor: styles.supportPastelGreen,
@@ -142,2 +163,3 @@ highlight: styles.supportGreen,
     {
+        identifier: 'supportPastelLightGreen',
         backgroundColor: styles.supportPastelLightGreen,
@@ -147,2 +169,3 @@ highlight: styles.supportLightGreen,
     {
+        identifier: 'supportPastelYellow',
         backgroundColor: styles.supportPastelYellow,
@@ -152,2 +175,3 @@ highlight: styles.supportYellow,
     {
+        identifier: 'supportPastelOrange',
         backgroundColor: styles.supportPastelOrange,
@@ -157,2 +181,3 @@ highlight: styles.supportOrange,
     {
+        identifier: 'supportPastelBrown',
         backgroundColor: styles.supportPastelBrown,
@@ -162,6 +187,36 @@ highlight: styles.supportBrown,
     {
+        identifier: 'supportPastelGrey',
         backgroundColor: styles.supportPastelGrey,
         highlight: styles.supportGreyDark,
     },
-];
+]);
+/**
+ * Allows querying HEX value of a color by its name.
+ * These colors are found in palette used by Color Picker component.
+ *
+ * @example
+ * ```
+ * getHexByColorName('main', 'supportRed') === '#f55549'
+ * ```
+ *
+ * @param {PaletteTypes} paletteName Possible values are 'main' | 'pastel'
+ * @param colorName Possible values depend on `paletteName`.
+ * For example, for `main` is can be `supportRed`, while for `pastel` is can be `supportPastelRed`.
+ * TypeScript will provide full autocomplete.
+ * @returns {string} the HEX representation of a color that Color Picker component is using.
+ */
+var getHexByColorName = function (paletteName, colorName) {
+    if (paletteName === 'main') {
+        var candidate_1 = mainPalette.find(function (_a) {
+            var identifier = _a.identifier;
+            return colorName === identifier;
+        });
+        return candidate_1.backgroundColor;
+    }
+    var candidate = pastelPalette.find(function (_a) {
+        var identifier = _a.identifier;
+        return colorName === identifier;
+    });
+    return candidate.backgroundColor;
+};
 
@@ -205,4 +260,4 @@ var ColorPicker = function (_a) {
             React__default['default'].createElement("div", { className: styles.optionRow }, colorPalette.map(function (_a) {
-                var backgroundColor = _a.backgroundColor, highlight = _a.highlight;
-                return (React__default['default'].createElement("div", { className: styles.colorOption, "aria-label": "select-color-" + backgroundColor, key: backgroundColor, onClick: function () { return onColorClick(backgroundColor); }, onKeyDown: function (e) {
+                var identifier = _a.identifier, backgroundColor = _a.backgroundColor, highlight = _a.highlight;
+                return (React__default['default'].createElement("div", { className: styles.colorOption, "aria-label": "select-color-" + identifier, key: identifier, onClick: function () { return onColorClick(backgroundColor); }, onKeyDown: function (e) {
                         return e.key === 'Enter' && onColorClick(backgroundColor);
@@ -213,3 +268,4 @@ }, role: "button", style: { backgroundColor: backgroundColor, color: highlight }, tabIndex: 0 }));
 
-module.exports = ColorPicker;
+exports.default = ColorPicker;
+exports.getHexByColorName = getHexByColorName;
 //# sourceMappingURL=index.js.map

dist/cjs/src/ColorPicker.d.ts

 /// <reference types="react" />
 import { PropsWithMetadata } from '@highlight-ui/utils-commons';
-export declare type PaletteTypes = 'main' | 'pastel';
+import { PaletteTypes } from './palettes';
 export declare type ColorPickerProps = PropsWithMetadata<{
@@ -5,0 +5,0 @@ /** If true, closes picker when a color is selected */

dist/cjs/src/palettes.d.ts

@@ -1,7 +0,26 @@
-declare type TPalette = {
+export declare type PaletteTypes = 'main' | 'pastel';
+export declare type TPalette<ID = string> = {
+    identifier: ID;
     backgroundColor: string;
     highlight: string;
 };
-export declare const mainPalette: TPalette[];
-export declare const pastelPalette: TPalette[];
-export {};
+export declare type MainPaletteColors = typeof mainPalette[number]['identifier'];
+export declare type PastelPaletteColors = typeof pastelPalette[number]['identifier'];
+export declare const mainPalette: readonly TPalette<"supportRed" | "supportPink" | "supportPurple" | "supportDarkPurple" | "supportDarkBlue" | "supportBlue" | "supportGreen" | "supportLightGreen" | "supportYellow" | "supportOrange" | "supportBrown" | "supportGreyDark">[];
+export declare const pastelPalette: readonly TPalette<"supportPastelRed" | "supportPastelPink" | "supportPastelPurple" | "supportPastelDarkPurple" | "supportPastelDarkBlue" | "supportPastelBlue" | "supportPastelGreen" | "supportPastelLightGreen" | "supportPastelYellow" | "supportPastelOrange" | "supportPastelBrown" | "supportPastelGrey">[];
+/**
+ * Allows querying HEX value of a color by its name.
+ * These colors are found in palette used by Color Picker component.
+ *
+ * @example
+ * ```
+ * getHexByColorName('main', 'supportRed') === '#f55549'
+ * ```
+ *
+ * @param {PaletteTypes} paletteName Possible values are 'main' | 'pastel'
+ * @param colorName Possible values depend on `paletteName`.
+ * For example, for `main` is can be `supportRed`, while for `pastel` is can be `supportPastelRed`.
+ * TypeScript will provide full autocomplete.
+ * @returns {string} the HEX representation of a color that Color Picker component is using.
+ */
+export declare const getHexByColorName: <T extends PaletteTypes>(paletteName: T, colorName: T extends "main" ? "supportRed" | "supportPink" | "supportPurple" | "supportDarkPurple" | "supportDarkBlue" | "supportBlue" | "supportGreen" | "supportLightGreen" | "supportYellow" | "supportOrange" | "supportBrown" | "supportGreyDark" : "supportPastelRed" | "supportPastelPink" | "supportPastelPurple" | "supportPastelDarkPurple" | "supportPastelDarkBlue" | "supportPastelBlue" | "supportPastelGreen" | "supportPastelLightGreen" | "supportPastelYellow" | "supportPastelOrange" | "supportPastelBrown" | "supportPastelGrey") => string;

dist/esm/index.d.ts

 export { default } from './src/ColorPicker';
-export type { ColorPickerProps, PaletteTypes } from './src/ColorPicker';
+export type { ColorPickerProps } from './src/ColorPicker';
+export { getHexByColorName } from './src/palettes';
+export type { PaletteTypes } from './src/palettes';

dist/esm/index.js

@@ -33,6 +33,7 @@ import React, { useRef, useState, useEffect } from 'react';
 
-var styles = {"supportBlue":"#0db5df","supportBrown":"#795548","supportDarkBlue":"#0d34a2","supportDarkPurple":"#7d5cb8","supportGreen":"#3c968d","supportGreyDark":"#5a7886","supportLightGreen":"#8bc34a","supportOrange":"#ffa319","supportPastelBlue":"#bbe5f8","supportPastelBrown":"#d9d0cd","supportPastelDarkBlue":"#cfd6ec","supportPastelDarkPurple":"#d5cae9","supportPastelGreen":"#bbe1dd","supportPastelGrey":"#d3dade","supportPastelLightGreen":"#deecce","supportPastelOrange":"#fbe1bb","supportPastelPink":"#f5c3d4","supportPastelPurple":"#e1c5e7","supportPastelRed":"#f8ccc9","supportPastelYellow":"#fbf6ca","supportPink":"#e8467c","supportPurple":"#9f3eb0","supportRed":"#f55549","supportYellow":"#f4e453","colorPicker":"ColorPicker-module__3H6ypMLc__v1-1-0","button":"ColorPicker-module__XBQM5x8U__v1-1-0","focus":"ColorPicker-module__1iX9akK___v1-1-0","active":"ColorPicker-module__3K79GJJ5__v1-1-0","disabled":"ColorPicker-module__2PSNxo4E__v1-1-0","chevron":"ColorPicker-module__2cO2fFV9__v1-1-0","colorDot":"ColorPicker-module___ZbovZGW__v1-1-0","panel":"ColorPicker-module__3aVapG4Z__v1-1-0","title":"ColorPicker-module__1dP4IMl5__v1-1-0","titleRow":"ColorPicker-module__3-oGnvjB__v1-1-0","colorPreviewWrapper":"ColorPicker-module__3pfOd4k3__v1-1-0","colorPreview":"ColorPicker-module__2VFdKwYM__v1-1-0","colorHex":"ColorPicker-module__1wpQiLhG__v1-1-0","optionRow":"ColorPicker-module__27eY5eb7__v1-1-0","colorOption":"ColorPicker-module__19MT-I77__v1-1-0"};
+var styles = {"supportBlue":"#0db5df","supportBrown":"#795548","supportDarkBlue":"#0d34a2","supportDarkPurple":"#7d5cb8","supportGreen":"#3c968d","supportGreyDark":"#5a7886","supportLightGreen":"#8bc34a","supportOrange":"#ffa319","supportPastelBlue":"#bbe5f8","supportPastelBrown":"#d9d0cd","supportPastelDarkBlue":"#cfd6ec","supportPastelDarkPurple":"#d5cae9","supportPastelGreen":"#bbe1dd","supportPastelGrey":"#d3dade","supportPastelLightGreen":"#deecce","supportPastelOrange":"#fbe1bb","supportPastelPink":"#f5c3d4","supportPastelPurple":"#e1c5e7","supportPastelRed":"#f8ccc9","supportPastelYellow":"#fbf6ca","supportPink":"#e8467c","supportPurple":"#9f3eb0","supportRed":"#f55549","supportYellow":"#f4e453","colorPicker":"ColorPicker-module__3H6ypMLc__v1-2-0","button":"ColorPicker-module__XBQM5x8U__v1-2-0","focus":"ColorPicker-module__1iX9akK___v1-2-0","active":"ColorPicker-module__3K79GJJ5__v1-2-0","disabled":"ColorPicker-module__2PSNxo4E__v1-2-0","chevron":"ColorPicker-module__2cO2fFV9__v1-2-0","colorDot":"ColorPicker-module___ZbovZGW__v1-2-0","panel":"ColorPicker-module__3aVapG4Z__v1-2-0","title":"ColorPicker-module__1dP4IMl5__v1-2-0","titleRow":"ColorPicker-module__3-oGnvjB__v1-2-0","colorPreviewWrapper":"ColorPicker-module__3pfOd4k3__v1-2-0","colorPreview":"ColorPicker-module__2VFdKwYM__v1-2-0","colorHex":"ColorPicker-module__1wpQiLhG__v1-2-0","optionRow":"ColorPicker-module__27eY5eb7__v1-2-0","colorOption":"ColorPicker-module__19MT-I77__v1-2-0"};
 
-var mainPalette = [
+var mainPalette = (function (p) { return p; })([
     {
+        identifier: 'supportRed',
         backgroundColor: styles.supportRed,
@@ -42,2 +43,3 @@ highlight: styles.supportRed,
     {
+        identifier: 'supportPink',
         backgroundColor: styles.supportPink,
@@ -47,2 +49,3 @@ highlight: styles.supportPink,
     {
+        identifier: 'supportPurple',
         backgroundColor: styles.supportPurple,
@@ -52,2 +55,3 @@ highlight: styles.supportPurple,
     {
+        identifier: 'supportDarkPurple',
         backgroundColor: styles.supportDarkPurple,
@@ -57,2 +61,3 @@ highlight: styles.supportDarkPurple,
     {
+        identifier: 'supportDarkBlue',
         backgroundColor: styles.supportDarkBlue,
@@ -62,2 +67,3 @@ highlight: styles.supportDarkBlue,
     {
+        identifier: 'supportBlue',
         backgroundColor: styles.supportBlue,
@@ -67,2 +73,3 @@ highlight: styles.supportBlue,
     {
+        identifier: 'supportGreen',
         backgroundColor: styles.supportGreen,
@@ -72,2 +79,3 @@ highlight: styles.supportGreen,
     {
+        identifier: 'supportLightGreen',
         backgroundColor: styles.supportLightGreen,
@@ -77,2 +85,3 @@ highlight: styles.supportLightGreen,
     {
+        identifier: 'supportYellow',
         backgroundColor: styles.supportYellow,
@@ -82,2 +91,3 @@ highlight: styles.supportYellow,
     {
+        identifier: 'supportOrange',
         backgroundColor: styles.supportOrange,
@@ -87,2 +97,3 @@ highlight: styles.supportOrange,
     {
+        identifier: 'supportBrown',
         backgroundColor: styles.supportBrown,
@@ -92,8 +103,10 @@ highlight: styles.supportBrown,
     {
+        identifier: 'supportGreyDark',
         backgroundColor: styles.supportGreyDark,
         highlight: styles.supportGreyDark,
     },
-];
-var pastelPalette = [
+]);
+var pastelPalette = (function (p) { return p; })([
     {
+        identifier: 'supportPastelRed',
         backgroundColor: styles.supportPastelRed,
@@ -103,2 +116,3 @@ highlight: styles.supportRed,
     {
+        identifier: 'supportPastelPink',
         backgroundColor: styles.supportPastelPink,
@@ -108,2 +122,3 @@ highlight: styles.supportPink,
     {
+        identifier: 'supportPastelPurple',
         backgroundColor: styles.supportPastelPurple,
@@ -113,2 +128,3 @@ highlight: styles.supportPurple,
     {
+        identifier: 'supportPastelDarkPurple',
         backgroundColor: styles.supportPastelDarkPurple,
@@ -118,2 +134,3 @@ highlight: styles.supportDarkPurple,
     {
+        identifier: 'supportPastelDarkBlue',
         backgroundColor: styles.supportPastelDarkBlue,
@@ -123,2 +140,3 @@ highlight: styles.supportDarkBlue,
     {
+        identifier: 'supportPastelBlue',
         backgroundColor: styles.supportPastelBlue,
@@ -128,2 +146,3 @@ highlight: styles.supportBlue,
     {
+        identifier: 'supportPastelGreen',
         backgroundColor: styles.supportPastelGreen,
@@ -133,2 +152,3 @@ highlight: styles.supportGreen,
     {
+        identifier: 'supportPastelLightGreen',
         backgroundColor: styles.supportPastelLightGreen,
@@ -138,2 +158,3 @@ highlight: styles.supportLightGreen,
     {
+        identifier: 'supportPastelYellow',
         backgroundColor: styles.supportPastelYellow,
@@ -143,2 +164,3 @@ highlight: styles.supportYellow,
     {
+        identifier: 'supportPastelOrange',
         backgroundColor: styles.supportPastelOrange,
@@ -148,2 +170,3 @@ highlight: styles.supportOrange,
     {
+        identifier: 'supportPastelBrown',
         backgroundColor: styles.supportPastelBrown,
@@ -153,6 +176,36 @@ highlight: styles.supportBrown,
     {
+        identifier: 'supportPastelGrey',
         backgroundColor: styles.supportPastelGrey,
         highlight: styles.supportGreyDark,
     },
-];
+]);
+/**
+ * Allows querying HEX value of a color by its name.
+ * These colors are found in palette used by Color Picker component.
+ *
+ * @example
+ * ```
+ * getHexByColorName('main', 'supportRed') === '#f55549'
+ * ```
+ *
+ * @param {PaletteTypes} paletteName Possible values are 'main' | 'pastel'
+ * @param colorName Possible values depend on `paletteName`.
+ * For example, for `main` is can be `supportRed`, while for `pastel` is can be `supportPastelRed`.
+ * TypeScript will provide full autocomplete.
+ * @returns {string} the HEX representation of a color that Color Picker component is using.
+ */
+var getHexByColorName = function (paletteName, colorName) {
+    if (paletteName === 'main') {
+        var candidate_1 = mainPalette.find(function (_a) {
+            var identifier = _a.identifier;
+            return colorName === identifier;
+        });
+        return candidate_1.backgroundColor;
+    }
+    var candidate = pastelPalette.find(function (_a) {
+        var identifier = _a.identifier;
+        return colorName === identifier;
+    });
+    return candidate.backgroundColor;
+};
 
@@ -196,4 +249,4 @@ var ColorPicker = function (_a) {
             React.createElement("div", { className: styles.optionRow }, colorPalette.map(function (_a) {
-                var backgroundColor = _a.backgroundColor, highlight = _a.highlight;
-                return (React.createElement("div", { className: styles.colorOption, "aria-label": "select-color-" + backgroundColor, key: backgroundColor, onClick: function () { return onColorClick(backgroundColor); }, onKeyDown: function (e) {
+                var identifier = _a.identifier, backgroundColor = _a.backgroundColor, highlight = _a.highlight;
+                return (React.createElement("div", { className: styles.colorOption, "aria-label": "select-color-" + identifier, key: identifier, onClick: function () { return onColorClick(backgroundColor); }, onKeyDown: function (e) {
                         return e.key === 'Enter' && onColorClick(backgroundColor);
@@ -205,2 +258,3 @@ }, role: "button", style: { backgroundColor: backgroundColor, color: highlight }, tabIndex: 0 }));
 export default ColorPicker;
+export { getHexByColorName };
 //# sourceMappingURL=index.js.map

dist/esm/src/ColorPicker.d.ts

 /// <reference types="react" />
 import { PropsWithMetadata } from '@highlight-ui/utils-commons';
-export declare type PaletteTypes = 'main' | 'pastel';
+import { PaletteTypes } from './palettes';
 export declare type ColorPickerProps = PropsWithMetadata<{
@@ -5,0 +5,0 @@ /** If true, closes picker when a color is selected */

dist/esm/src/palettes.d.ts

@@ -1,7 +0,26 @@
-declare type TPalette = {
+export declare type PaletteTypes = 'main' | 'pastel';
+export declare type TPalette<ID = string> = {
+    identifier: ID;
     backgroundColor: string;
     highlight: string;
 };
-export declare const mainPalette: TPalette[];
-export declare const pastelPalette: TPalette[];
-export {};
+export declare type MainPaletteColors = typeof mainPalette[number]['identifier'];
+export declare type PastelPaletteColors = typeof pastelPalette[number]['identifier'];
+export declare const mainPalette: readonly TPalette<"supportRed" | "supportPink" | "supportPurple" | "supportDarkPurple" | "supportDarkBlue" | "supportBlue" | "supportGreen" | "supportLightGreen" | "supportYellow" | "supportOrange" | "supportBrown" | "supportGreyDark">[];
+export declare const pastelPalette: readonly TPalette<"supportPastelRed" | "supportPastelPink" | "supportPastelPurple" | "supportPastelDarkPurple" | "supportPastelDarkBlue" | "supportPastelBlue" | "supportPastelGreen" | "supportPastelLightGreen" | "supportPastelYellow" | "supportPastelOrange" | "supportPastelBrown" | "supportPastelGrey">[];
+/**
+ * Allows querying HEX value of a color by its name.
+ * These colors are found in palette used by Color Picker component.
+ *
+ * @example
+ * ```
+ * getHexByColorName('main', 'supportRed') === '#f55549'
+ * ```
+ *
+ * @param {PaletteTypes} paletteName Possible values are 'main' | 'pastel'
+ * @param colorName Possible values depend on `paletteName`.
+ * For example, for `main` is can be `supportRed`, while for `pastel` is can be `supportPastelRed`.
+ * TypeScript will provide full autocomplete.
+ * @returns {string} the HEX representation of a color that Color Picker component is using.
+ */
+export declare const getHexByColorName: <T extends PaletteTypes>(paletteName: T, colorName: T extends "main" ? "supportRed" | "supportPink" | "supportPurple" | "supportDarkPurple" | "supportDarkBlue" | "supportBlue" | "supportGreen" | "supportLightGreen" | "supportYellow" | "supportOrange" | "supportBrown" | "supportGreyDark" : "supportPastelRed" | "supportPastelPink" | "supportPastelPurple" | "supportPastelDarkPurple" | "supportPastelDarkBlue" | "supportPastelBlue" | "supportPastelGreen" | "supportPastelLightGreen" | "supportPastelYellow" | "supportPastelOrange" | "supportPastelBrown" | "supportPastelGrey") => string;

package.json

 {
   "name": "@highlight-ui/color-picker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "PPU",
@@ -61,3 +61,3 @@ "main": "dist/cjs/index.js",
   },
-  "gitHead": "301b3df214407db3d6a2f0835702cdff535a1b0c"
+  "gitHead": "bec16847a86821773071560875ca2fd5c9c3e070"
 }

README.md

@@ -28,1 +28,6 @@ # `@highlight-ui/color-picker`
 - [Confluence](https://personio.atlassian.net/l/c/aFQHj96R)
+
+### Appendix
+
+- `getHexByColorName` - this function allows querying hex value of a color by
+  its name

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93705

increased by19.95%

Lines of code

785

increased by25%

Number of lines in readme file

33

increased by17.86%

No dependency changes