@quen-ui/components 0.0.14 → 1.0.0

package/dist/Checkbox/styles.es.js

@@ -27,7 +27,7 @@ const CheckboxInputStyled = styled.input.withConfig({
 })`
   width: ${({ size }) => getSizing(size)};
   height: ${({ size }) => getSizing(size)};
-  border: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+  border: 1px solid ${({ theme }) => theme.components.Checkbox.borderColor};
   transition:
     border-color 0.15s,
     background-color 0.15s;
@@ -36,6 +36,7 @@ const CheckboxInputStyled = styled.input.withConfig({
   cursor: pointer;
   position: relative;
   -webkit-appearance: none;
+  border-radius: ${({ theme }) => theme.components.Checkbox.radius};
 
   &::before {
     content: "";
@@ -45,9 +46,9 @@ const CheckboxInputStyled = styled.input.withConfig({
     box-sizing: border-box;
     width: calc(${({ size }) => getSizing(size)} * 0.6);
     height: calc(${({ size }) => getSizing(size)} * 0.35);
-    background-color: ${({ theme }) => theme.colors.violet[9]};
-    border-left: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.grayViolet[9]};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    border-left: 1px solid ${({ theme }) => theme.components.Checkbox.checkColor};
+    border-bottom: 1px solid ${({ theme }) => theme.components.Checkbox.checkColor};
     opacity: 0;
     transition:
       opacity 0.15s,
@@ -58,25 +59,25 @@ const CheckboxInputStyled = styled.input.withConfig({
   }
 
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.borderDisabledColor};
     cursor: not-allowed;
   }
 
   &:disabled:checked {
-    background-color: ${({ theme }) => theme.colors.gray[2]};
-    border: 1px solid ${({ theme }) => theme.colors.violet[3]};
+    background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.borderDisabledColor};
     cursor: not-allowed;
 
     &:before {
-      background-color: ${({ theme }) => theme.colors.gray[2]};
-      border-left: 1px solid ${({ theme }) => theme.colors.gray[4]};
-      border-bottom: 1px solid ${({ theme }) => theme.colors.gray[4]};
+      background-color: ${({ theme }) => theme.components.Checkbox.disabledBackground};
+      border-left: 1px solid ${({ theme }) => theme.components.Checkbox.disabledCheckColor};
+      border-bottom: 1px solid ${({ theme }) => theme.components.Checkbox.disabledCheckColor};
     }
   }
   &:checked {
-    background-color: ${({ theme }) => theme.colors.violet[9]};
-    border-color: ${({ theme }) => theme.colors.violet[5]};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    border-color: ${({ theme }) => theme.components.Checkbox.borderColor};
 
     &::before {
       opacity: 1;
@@ -85,15 +86,15 @@ const CheckboxInputStyled = styled.input.withConfig({
   }
 
   &:hover:not(:disabled) {
-    border: 1px solid ${({ theme }) => theme.colors.violet[9]};
+    border: 1px solid ${({ theme }) => theme.components.Checkbox.backgroundFilled};
   }
 
   &:hover:checked:not(:disabled) {
-    border-color: ${({ theme }) => theme.colors.violet[9]};
-    background-color: ${({ theme }) => theme.colors.violet[9]};
+    border-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
+    background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
 
     &:before {
-      background-color: ${({ theme }) => theme.colors.violet[9]};
+      background-color: ${({ theme }) => theme.components.Checkbox.backgroundFilled};
     }
   }
 
@@ -101,14 +102,14 @@ const CheckboxInputStyled = styled.input.withConfig({
       &,
       &:hover,
       &:checked {
-        background-color: ${({ theme: theme2 }) => theme2.colors.violet[9]};
-        border-color: ${({ theme: theme2 }) => theme2.colors.grayViolet[9]};
+        background-color: ${({ theme: theme2 }) => theme2.components.Checkbox.backgroundFilled};
+        border-color: ${({ theme: theme2 }) => theme2.components.Checkbox.borderColor};
         &::before {
           top: calc(calc(${getSizing(size)} - 0.125rem) / 2);
           left: 0.125rem;
           width: calc(${getSizing(size)} - 0.125rem * 2 - 0.125rem);
           height: 0.125rem;
-          background-color: ${theme.colors.grayViolet[7]};
+          background-color: ${theme.components.Checkbox.checkColor};
           border: none;
           opacity: 1;
           transition:
@@ -128,15 +129,15 @@ const CheckboxGroupWrapper = styled.div.withConfig({
   flex-direction: ${({ direction }) => direction === "horizontal" ? "row" : "column"};
 
   .checkbox-group__required {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.Checkbox.errorColor};
   }
 
   .checkbox-group__error-message {
-    color: ${({ theme }) => theme.colors.red[7]};
+    color: ${({ theme }) => theme.components.Checkbox.errorColor};
   }
 
   ${({ isError, theme }) => isError && css`
-      border-left: 2px solid ${theme.colors.red[9]};
+      border-left: 2px solid ${theme.components.Checkbox.borderErrorColor};
       padding-left: 0.5rem;
     `};
 `;

package/dist/ColorPicker/ColorPicker.cjs.js

@@ -0,0 +1,404 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const polished = require("polished");
+const hooks = require("@quen-ui/hooks");
+const styles = require("./styles.cjs.js");
+const helpers = require("./helpers.cjs.js");
+const InputsColor = require("./InputsColor.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const getHslValue = (value) => {
+  if (value < 0) {
+    return 0;
+  } else if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const getHslHue = (value) => {
+  if (value < 0) {
+    return 0;
+  } else if (value > 360) {
+    return 360;
+  }
+  return value;
+};
+const ColorPicker = ({
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  format = "hex",
+  onChangeComplete,
+  size = "m",
+  className,
+  style,
+  hideInputs,
+  hidePresets,
+  presets
+}) => {
+  const [internal, setInternal] = hooks.useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const initialHsl = React.useMemo(
+    () => helpers.parseColor(internal ?? defaultValue),
+    [defaultValue]
+  );
+  const isAlpha = React.useMemo(() => {
+    return ["hexa", "rgba", "hsla"].includes(format);
+  }, [format]);
+  const [hsl, setHsl] = React.useState(initialHsl);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  React.useEffect(() => {
+    if (["hex", "hsl", "rgb"].includes(format)) {
+      pushChange({ ...hsl, alpha: 1 }, true);
+    }
+  }, [format]);
+  const pushChange = React.useCallback(
+    (next, isComplete = false) => {
+      if (!disabled) {
+        const out = {
+          hue: next.hue,
+          saturation: next.saturation,
+          lightness: next.lightness,
+          alpha: "alpha" in next ? helpers.clamp(next.alpha, 0, 1) : 1
+        };
+        setHsl(out);
+        const formatted = helpers.formatColor(out, format);
+        setInternal(formatted);
+        if (isComplete && onChangeComplete) {
+          onChangeComplete(formatted);
+        }
+      }
+    },
+    [setInternal, onChangeComplete, format, disabled]
+  );
+  const satRef = React.useRef(null);
+  const isDraggingRef = React.useRef(false);
+  const getRelativePositionFromEvent = (e, el) => {
+    const rect = el.getBoundingClientRect();
+    let clientX = 0, clientY = 0;
+    if (e.touches) {
+      const t = e.touches[0];
+      clientX = t.clientX;
+      clientY = t.clientY;
+    } else {
+      const m = e;
+      clientX = m.clientX;
+      clientY = m.clientY;
+    }
+    const x = Number(((clientX - rect.left) / rect.width).toFixed(2));
+    const y = Number(((clientY - rect.top) / rect.height).toFixed(2));
+    return { x, y };
+  };
+  const getSaturationLightness = (e, el) => {
+    const { x, y } = getRelativePositionFromEvent(e, el);
+    setPosition({ x: getHslValue(x), y: getHslValue(y) });
+    return {
+      saturation: getHslValue(x),
+      lightness: getHslValue(1 - 0.5 * x - y + 0.5 * x * y)
+    };
+  };
+  React.useEffect(() => {
+    function onPointerMove(e) {
+      if (!isDraggingRef.current || !satRef.current) return;
+      const { saturation, lightness } = getSaturationLightness(
+        e,
+        satRef.current
+      );
+      pushChange({
+        ...hsl,
+        saturation,
+        lightness
+      });
+    }
+    function onPointerUp(e) {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      if (satRef.current) {
+        const { saturation, lightness } = getSaturationLightness(
+          e,
+          satRef.current
+        );
+        pushChange(
+          {
+            ...hsl,
+            saturation,
+            lightness
+          },
+          true
+        );
+      }
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("pointermove", onPointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+      }
+    };
+  }, [hsl, pushChange]);
+  const onSatPointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    isDraggingRef.current = true;
+    if (satRef.current) {
+      const { saturation, lightness } = getSaturationLightness(
+        e.nativeEvent,
+        satRef.current
+      );
+      pushChange({
+        ...hsl,
+        saturation,
+        lightness
+      });
+    }
+  };
+  const hueRef = React.useRef(null);
+  const onHuePointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    const onMove = (ev) => {
+      if (!hueRef.current) return;
+      const pos = getRelativePositionFromEvent(ev, hueRef.current);
+      const hue = pos.x * 360;
+      pushChange({ ...hsl, hue: getHslHue(hue) });
+    };
+    const onUp = (ev) => {
+      if (!hueRef.current) return;
+      const pos = getRelativePositionFromEvent(ev, hueRef.current);
+      const hue = pos.x * 360;
+      pushChange({ ...hsl, hue: getHslHue(hue) }, true);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const alphaRef = React.useRef(null);
+  const onAlphaPointerDown = (e) => {
+    if (disabled) return;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    const onMove = (ev) => {
+      if (!alphaRef.current) return;
+      const pos = getRelativePositionFromEvent(ev, alphaRef.current);
+      const alpha = pos.x;
+      pushChange({ ...hsl, alpha }, false);
+    };
+    const onUp = (ev) => {
+      if (!alphaRef.current) return;
+      const pos = getRelativePositionFromEvent(ev, alphaRef.current);
+      const alpha = pos.x;
+      pushChange({ ...hsl, alpha }, true);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const [inputValue, setInputValue] = React.useState(() => helpers.formatColor(hsl, format));
+  React.useEffect(() => {
+    setInputValue(helpers.formatColor(hsl, format));
+  }, [hsl, format]);
+  const onChangeHexInput = (v) => {
+    setInputValue(v);
+    try {
+      const parsed = helpers.parseColor(v);
+      pushChange(parsed, false);
+    } catch (err) {
+      window.console.error(err);
+    }
+  };
+  const applyInput = () => {
+    try {
+      const parsed = helpers.parseColor(inputValue);
+      pushChange(parsed, true);
+    } catch (err) {
+      window.console.error(err);
+    }
+  };
+  const onPresetClick = (p) => {
+    const parsed = helpers.parseColor(p);
+    pushChange(parsed, true);
+  };
+  const onHueKeyDown = (e) => {
+    if (disabled) return;
+    let delta = 0;
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") delta = -1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") delta = 1;
+    if (e.key === "PageUp") delta = 10;
+    if (e.key === "PageDown") delta = -10;
+    if (delta !== 0) {
+      e.preventDefault();
+      pushChange({ ...hsl }, true);
+    }
+  };
+  const onChangeRGBInput = (value2) => {
+    pushChange(polished.parseToHsl(polished.rgbToColorString(value2)), true);
+  };
+  const hex = polished.hslToColorString(hsl);
+  const rgb = polished.parseToRgb(hex);
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.ColorPickerWrapper, { size, className, style, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.ColorPickerPanel,
+    {
+      role: "group",
+      "aria-label": "Color picker panel",
+      size,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "s", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            styles.ColorPickerSaturationWrapStyled,
+            {
+              ref: satRef,
+              onPointerDown: onSatPointerDown,
+              "aria-label": "Saturation and lightness",
+              role: "application",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  styles.ColorPickerSaturationGradientStyled,
+                  {
+                    color: `hsl(${hsl.hue}, 100%, 50%)`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  styles.ColorPickerThumbStyled,
+                  {
+                    size,
+                    left: position.x * 100,
+                    top: position.y * 100
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "s", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "s", style: { width: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                styles.ColorPickerSliderStyled,
+                {
+                  size,
+                  ref: hueRef,
+                  onPointerDown: onHuePointerDown,
+                  role: "slider",
+                  tabIndex: 0,
+                  onKeyDown: onHueKeyDown,
+                  "aria-valuenow": Math.round(hsl.hue),
+                  "aria-label": "Hue",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(styles.ColorPickerSliderHueTrackStyled, {}),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      styles.ColorPickerSliderThumbStyled,
+                      {
+                        size,
+                        left: hsl.hue / 360 * 100
+                      }
+                    )
+                  ]
+                }
+              ),
+              isAlpha && /* @__PURE__ */ jsxRuntime.jsxs(
+                styles.ColorPickerSliderStyled,
+                {
+                  size,
+                  ref: alphaRef,
+                  onPointerDown: onAlphaPointerDown,
+                  role: "slider",
+                  tabIndex: 0,
+                  onKeyDown: onHueKeyDown,
+                  "aria-valuenow": Math.round(hsl.hue),
+                  "aria-label": "Alpha",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      styles.ColorPickerSliderTrackStyled,
+                      {
+                        bg: `linear-gradient(to right, rgba(${rgb.red},${rgb.green},${rgb.blue},0) 0%, rgba(${rgb.red},${rgb.green},${rgb.blue},1) 100%)`
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      styles.ColorPickerSliderThumbStyled,
+                      {
+                        size,
+                        left: "alpha" in hsl ? (hsl.alpha ?? 1) * 100 : 100
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isAlpha && !hideInputs && /* @__PURE__ */ jsxRuntime.jsx(
+                InputsColor,
+                {
+                  disabled,
+                  format,
+                  onChangeHex: onChangeHexInput,
+                  onBlur: applyInput,
+                  size,
+                  onChangeRGB: onChangeRGBInput,
+                  hsl,
+                  onChangeHSL: (value2) => pushChange(value2, true)
+                }
+              )
+            ] }),
+            size !== "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+              styles.ColorPickerPreviewSwatchStyled,
+              {
+                hiddenInputs: hideInputs,
+                isAlpha,
+                size,
+                color: helpers.formatColor(hsl, "rgba"),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "quen-ui__color-picker__preview-swatch__inner" })
+              }
+            )
+          ] }),
+          size === "xs" && /* @__PURE__ */ jsxRuntime.jsx(
+            styles.ColorPickerPreviewSwatchStyled,
+            {
+              size,
+              color: helpers.formatColor(hsl, "rgba"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "quen-ui__color-picker__preview-swatch__inner" })
+            }
+          )
+        ] }),
+        (isAlpha && !hideInputs || !hidePresets && presets?.length) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "s", children: [
+          isAlpha && !hideInputs && /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", gap: "s", children: /* @__PURE__ */ jsxRuntime.jsx(
+            InputsColor,
+            {
+              disabled,
+              format,
+              onChangeHex: onChangeHexInput,
+              onBlur: applyInput,
+              size,
+              onChangeRGB: onChangeRGBInput,
+              hsl,
+              onChangeHSL: (value2) => pushChange(value2, true)
+            }
+          ) }),
+          !hidePresets && presets?.length && /* @__PURE__ */ jsxRuntime.jsx(Flex, { gap: "s", wrap: "wrap", children: presets.map((p, i) => {
+            const active = helpers.formatColor(helpers.parseColor(p), "hex") === helpers.formatColor(hsl, "hex");
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              styles.ColorPickerPresetStyled,
+              {
+                size,
+                color: typeof p === "string" ? p : helpers.formatColor(helpers.parseColor(p), "rgba"),
+                active,
+                onClick: () => !disabled && onPresetClick(p),
+                "aria-pressed": active
+              },
+              i
+            );
+          }) })
+        ] })
+      ]
+    }
+  ) });
+};
+module.exports = ColorPicker;

package/dist/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,3 @@
+import { IColorPickerProps } from './types';
+declare const ColorPicker: ({ value, defaultValue, onChange, disabled, format, onChangeComplete, size, className, style, hideInputs, hidePresets, presets }: IColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;