@snack-uikit/color-picker 0.0.1-preview-364c0f5c.0

package/dist/helperComponents/FieldPrivate/styles.module.css

@@ -0,0 +1,186 @@
+.container{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  box-sizing:border-box;
+  min-width:52px;
+  border-style:solid;
+}
+.container:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-decor-hovered, #decdfb);
+}
+.container:not([data-readonly]):focus-within:not([data-disabled]), .container:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #794ed3);
+  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
+}
+.container[data-validation=error]{
+  background-color:var(--sys-red-background1-level, #fef6f3);
+  border-color:var(--sys-red-decor-default, #fdd6cd);
+}
+.container[data-validation=error]:hover{
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-decor-hovered, #fac1b3);
+}
+.container[data-validation=error]:not([data-readonly]):focus-within:not([data-disabled]), .container[data-validation=error]:not([data-readonly])[data-focused]:not([data-disabled]){
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-red-accent-default, #cb3f3e);
+  outline-color:var(--sys-red-decor-activated, #fbab99);
+}
+.container[data-selectable],
+.container[data-selectable] input,
+.container[data-selectable] select,
+.container[data-selectable] textarea,
+.container[data-selectable] span{
+  cursor:pointer;
+}
+.container[data-readonly],
+.container[data-readonly] input,
+.container[data-readonly] select,
+.container[data-readonly] textarea,
+.container[data-readonly] span{
+  cursor:default;
+}
+.container[data-readonly], .container[data-readonly]:hover{
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+}
+.container[data-readonly]:focus-within, .container[data-readonly][data-focused]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+.container[data-disabled],
+.container[data-disabled] input,
+.container[data-disabled] select,
+.container[data-disabled] textarea,
+.container[data-disabled] span{
+  cursor:not-allowed;
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.container[data-disabled], .container[data-disabled]:focus-within, .container[data-disabled][data-focused], .container[data-disabled]:hover{
+  background-color:var(--sys-neutral-background, #eeeff3);
+  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  outline:none;
+}
+.container[data-size=s]{
+  border-radius:var(--radius-fields-s, 12px);
+  border-width:var(--border-width-fields-single, 2px);
+}
+.container[data-size=s],
+.container[data-size=s] input,
+.container[data-size=s] select,
+.container[data-size=s] textarea,
+.container[data-size=s] span{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+}
+.container[data-size=s][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-s, 12px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-s-left, 6px);
+  gap:var(--space-fields-single-line-container-s-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-s-right, 6px);
+  height:var(--size-fields-s, 32px);
+}
+.container[data-size=s][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-s, 12px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-top:var(--space-fields-multi-line-container-s-top, 6px);
+  padding-bottom:var(--space-fields-multi-line-container-s-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-s-left, 6px);
+  padding-right:var(--space-fields-multi-line-container-s-right, 2px);
+}
+.container[data-size=m]{
+  border-radius:var(--radius-fields-m, 14px);
+  border-width:var(--border-width-fields-single, 2px);
+}
+.container[data-size=m],
+.container[data-size=m] input,
+.container[data-size=m] select,
+.container[data-size=m] textarea,
+.container[data-size=m] span{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+.container[data-size=m][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-m, 14px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-m-left, 8px);
+  gap:var(--space-fields-single-line-container-m-gap, 4px);
+  padding-right:var(--space-fields-single-line-container-m-right, 8px);
+  height:var(--size-fields-m, 40px);
+}
+.container[data-size=m][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-m, 14px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-top:var(--space-fields-multi-line-container-m-top, 8px);
+  padding-bottom:var(--space-fields-multi-line-container-m-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-m-left, 8px);
+  padding-right:var(--space-fields-multi-line-container-m-right, 2px);
+}
+.container[data-size=l]{
+  border-radius:var(--radius-fields-l, 16px);
+  border-width:var(--border-width-fields-single, 2px);
+}
+.container[data-size=l],
+.container[data-size=l] input,
+.container[data-size=l] select,
+.container[data-size=l] textarea,
+.container[data-size=l] span{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+}
+.container[data-size=l][data-variant=single-line-container]{
+  border-radius:var(--radius-fields-l, 16px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-left:var(--space-fields-single-line-container-l-left, 10px);
+  gap:var(--space-fields-single-line-container-l-gap, 8px);
+  padding-right:var(--space-fields-single-line-container-l-right, 10px);
+  height:var(--size-fields-l, 48px);
+}
+.container[data-size=l][data-variant=multi-line-container]{
+  border-radius:var(--radius-fields-l, 16px);
+  border-width:var(--border-width-fields-single, 2px);
+  padding-top:var(--space-fields-multi-line-container-l-top, 10px);
+  padding-bottom:var(--space-fields-multi-line-container-l-bottom, 2px);
+  padding-left:var(--space-fields-multi-line-container-l-left, 10px);
+  padding-right:var(--space-fields-multi-line-container-l-right, 2px);
+}
+
+.prefix{
+  display:inline-flex;
+  flex-shrink:0;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldPrivate';
+export * from './FieldAlphaColor';

package/dist/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './FieldPrivate';
+export * from './FieldAlphaColor';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from 'react-colorful';
+export type { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor };
+export type Color = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor | string;
+export type RawColor = {
+    hex: string;
+    rgb: RgbColor;
+    hsl: HslColor;
+    hsv: HsvColor;
+    rgba: RgbaColor;
+    hsla: HslaColor;
+    hsva: HsvaColor;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/convert.d.ts

@@ -0,0 +1,12 @@
+import { HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from 'react-colorful';
+import { Color, RawColor } from '../types';
+export declare const hexToRgba: (hex: string) => RgbaColor;
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const rgbaToHex: ({ r, g, b, a }: RgbaColor) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;
+export declare function colorToHex(value: Color): string;
+export declare function colorToRawValue(value: Color): RawColor;

package/dist/utils/convert.js

@@ -0,0 +1,172 @@
+import { HSVA_REGEX, RGBA_REGEX } from '../constants';
+import { round } from './round';
+import { isHslaColor, isHslaString, isHslColor, isHsvaColor, isHsvaString, isHsvColor, isRbgaString, isRbgColor, isRgbaColor, } from './typeGuards';
+/**
+ * Valid CSS <angle> units.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ */
+const angleUnits = {
+    grad: 360 / 400,
+    turn: 360,
+    rad: 360 / (Math.PI * 2),
+};
+const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+export const hexToRgba = (hex) => {
+    if (hex[0] === '#')
+        hex = hex.substring(1);
+    if (hex.length < 6) {
+        return {
+            r: parseInt(hex[0] + hex[0], 16),
+            g: parseInt(hex[1] + hex[1], 16),
+            b: parseInt(hex[2] + hex[2], 16),
+            a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1,
+        };
+    }
+    return {
+        r: parseInt(hex.substring(0, 2), 16),
+        g: parseInt(hex.substring(2, 4), 16),
+        b: parseInt(hex.substring(4, 6), 16),
+        a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1,
+    };
+};
+const parseHue = (value, unit = 'deg') => Number(value) * (angleUnits[unit] || 1);
+const hslaStringToHsva = (hslString) => {
+    const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(hslString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return hslaToHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        l: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+const hslaToHsva = ({ h, s, l, a }) => {
+    s *= (l < 50 ? l : 100 - l) / 100;
+    return {
+        h: h,
+        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
+        v: l + s,
+        a,
+    };
+};
+const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
+export const hsvaToHsla = ({ h, s, v, a }) => {
+    const hh = ((200 - s) * v) / 100;
+    return {
+        h: round(h),
+        s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
+        l: round(hh / 2),
+        a: round(a, 2),
+    };
+};
+const hsvaToRgba = ({ h, s, v, a }) => {
+    h = (h / 360) * 6;
+    s = s / 100;
+    v = v / 100;
+    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
+    return {
+        r: round([v, c, b, b, d, v][module] * 255),
+        g: round([d, v, v, c, b, b][module] * 255),
+        b: round([b, b, d, v, v, c][module] * 255),
+        a: round(a, 2),
+    };
+};
+const hsvaStringToHsva = (hsvString) => {
+    const matcher = HSVA_REGEX;
+    const match = matcher.exec(hsvString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return roundHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        v: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+const rgbaStringToHsva = (rgbaString) => {
+    const matcher = RGBA_REGEX;
+    const match = matcher.exec(rgbaString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return rgbaToHsva({
+        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
+    });
+};
+const format = (number) => {
+    const hex = number.toString(16);
+    return hex.length < 2 ? '0' + hex : hex;
+};
+export const rgbaToHex = ({ r, g, b, a }) => {
+    const alphaHex = a < 1 ? format(round(a * 255)) : '';
+    return '#' + format(r) + format(g) + format(b) + alphaHex;
+};
+export const rgbaToHsva = ({ r, g, b, a }) => {
+    const max = Math.max(r, g, b);
+    const delta = max - Math.min(r, g, b);
+    // prettier-ignore
+    // eslint-disable-next-line no-nested-ternary
+    const hh = delta
+        // eslint-disable-next-line no-nested-ternary
+        ? max === r
+            ? (g - b) / delta
+            : max === g
+                ? 2 + (b - r) / delta
+                : 4 + (r - g) / delta
+        : 0;
+    return {
+        h: round(60 * (hh < 0 ? hh + 6 : hh)),
+        s: round(max ? (delta / max) * 100 : 0),
+        v: round((max / 255) * 100),
+        a,
+    };
+};
+export const roundHsva = (hsva) => ({
+    h: round(hsva.h),
+    s: round(hsva.s),
+    v: round(hsva.v),
+    a: round(hsva.a, 2),
+});
+export const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });
+export const hslaToHsl = ({ h, s, l }) => ({ h, s, l });
+export const hsvaToHsv = (hsva) => {
+    const { h, s, v } = roundHsva(hsva);
+    return { h, s, v };
+};
+export function colorToHex(value) {
+    if (isHslColor(value) || isHslaColor(value)) {
+        return hsvaToHex(hslaToHsva(Object.assign({ a: 1 }, value)));
+    }
+    if (isRbgColor(value) || isRgbaColor(value)) {
+        return rgbaToHex(Object.assign({ a: 1 }, value));
+    }
+    if (isHsvColor(value) || isHsvaColor(value)) {
+        return hsvaToHex(Object.assign({ a: 1 }, value));
+    }
+    if (isHslaString(value)) {
+        return hsvaToHex(hslaStringToHsva(value));
+    }
+    if (isRbgaString(value)) {
+        return hsvaToHex(rgbaStringToHsva(value));
+    }
+    if (isHsvaString(value)) {
+        return hsvaToHex(hsvaStringToHsva(value));
+    }
+    return value;
+}
+export function colorToRawValue(value) {
+    const hexColor = colorToHex(value);
+    return {
+        hex: hexColor,
+        rgb: rgbaToRgb(hexToRgba(hexColor)),
+        rgba: hexToRgba(hexColor),
+        hsv: hsvaToHsv(hexToHsva(hexColor)),
+        hsva: hexToHsva(hexColor),
+        hsl: hslaToHsl(hsvaToHsla(hexToHsva(hexColor))),
+        hsla: hsvaToHsla(hexToHsva(hexColor)),
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './convert';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from './convert';

package/dist/utils/round.d.ts

@@ -0,0 +1 @@
+export declare const round: (number: number, digits?: number, base?: number) => number;

package/dist/utils/round.js

@@ -0,0 +1 @@
+export const round = (number, digits = 0, base = Math.pow(10, digits)) => Math.round(base * number) / base;

package/dist/utils/typeGuards.d.ts

@@ -0,0 +1,10 @@
+import { Color, HslaColor, HslColor, HsvaColor, HsvColor, RgbaColor, RgbColor } from '../types';
+export declare function isRbgColor(value: Color): value is RgbColor;
+export declare function isRgbaColor(value: Color): value is RgbaColor;
+export declare function isHslColor(value: Color): value is HslColor;
+export declare function isHslaColor(value: Color): value is HslaColor;
+export declare function isHsvColor(value: Color): value is HsvColor;
+export declare function isHsvaColor(value: Color): value is HsvaColor;
+export declare function isHslaString(value: string): boolean;
+export declare function isHsvaString(value: string): boolean;
+export declare function isRbgaString(value: string): boolean;

package/dist/utils/typeGuards.js

@@ -0,0 +1,34 @@
+import { HSLA_REGEX, HSVA_REGEX, RGBA_REGEX } from '../constants';
+export function isRbgColor(value) {
+    return typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value;
+}
+export function isRgbaColor(value) {
+    return typeof value === 'object' && isRbgColor(value) && 'a' in value;
+}
+export function isHslColor(value) {
+    return typeof value === 'object' && 'h' in value && 's' in value && 'l' in value;
+}
+export function isHslaColor(value) {
+    return typeof value === 'object' && isHslColor(value) && 'a' in value;
+}
+export function isHsvColor(value) {
+    return typeof value === 'object' && 'h' in value && 's' in value && 'v' in value;
+}
+export function isHsvaColor(value) {
+    return typeof value === 'object' && isHsvColor(value) && 'a' in value;
+}
+export function isHslaString(value) {
+    const matcher = HSLA_REGEX;
+    const match = matcher.exec(value);
+    return Boolean(match);
+}
+export function isHsvaString(value) {
+    const matcher = HSVA_REGEX;
+    const match = matcher.exec(value);
+    return Boolean(match);
+}
+export function isRbgaString(value) {
+    const matcher = RGBA_REGEX;
+    const match = matcher.exec(value);
+    return Boolean(match);
+}

package/dist/utils/validate.d.ts

@@ -0,0 +1 @@
+export declare const validHex: (value: string, alpha?: boolean) => boolean;

package/dist/utils/validate.js

@@ -0,0 +1,10 @@
+const matcher = /^#?([0-9A-F]{3,8})$/i;
+export const validHex = (value, alpha) => {
+    const match = matcher.exec(value);
+    const length = match ? match[1].length : 0;
+    return (length === 3 || // '#rgb' format
+        length === 6 || // '#rrggbb' format
+        (Boolean(alpha) && length === 4) || // '#rgba' format
+        (Boolean(alpha) && length === 8) // '#rrggbbaa' format
+    );
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@snack-uikit/color-picker",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Color Picker",
+  "version": "0.0.1-preview-364c0f5c.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://cloud-ru-tech.github.io/snack-uikit/packages/color-picker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit/tree/master",
+    "directory": "packages/color-picker"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.17.5",
+    "@snack-uikit/icons": "0.22.1",
+    "@snack-uikit/input-private": "3.2.1",
+    "@snack-uikit/segmented-control": "0.2.2",
+    "@snack-uikit/utils": "3.4.0",
+    "react-colorful": "5.6.1"
+  },
+  "devDependencies": {
+    "classnames": "2.5.1"
+  },
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
+  "gitHead": "ef1b9ca42284983d83cc6bca7c191f041401e031"
+}