@quen-ui/components 0.0.14 → 1.0.0

package/dist/ColorPicker/ColorPicker.es.js

@@ -0,0 +1,405 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useCallback, useRef } from "react";
+import { hslToColorString, parseToRgb, parseToHsl, rgbToColorString } from "polished";
+import { useControllableState } from "@quen-ui/hooks";
+import { ColorPickerWrapper, ColorPickerPanel, ColorPickerSaturationWrapStyled, ColorPickerSaturationGradientStyled, ColorPickerThumbStyled, ColorPickerSliderStyled, ColorPickerSliderHueTrackStyled, ColorPickerSliderThumbStyled, ColorPickerSliderTrackStyled, ColorPickerPreviewSwatchStyled, ColorPickerPresetStyled } from "./styles.es.js";
+import { parseColor, clamp, formatColor } from "./helpers.es.js";
+import InputsColor from "./InputsColor.es.js";
+import Flex from "../Flex/Flex.es.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] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const initialHsl = useMemo(
+    () => parseColor(internal ?? defaultValue),
+    [defaultValue]
+  );
+  const isAlpha = useMemo(() => {
+    return ["hexa", "rgba", "hsla"].includes(format);
+  }, [format]);
+  const [hsl, setHsl] = useState(initialHsl);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  useEffect(() => {
+    if (["hex", "hsl", "rgb"].includes(format)) {
+      pushChange({ ...hsl, alpha: 1 }, true);
+    }
+  }, [format]);
+  const pushChange = useCallback(
+    (next, isComplete = false) => {
+      if (!disabled) {
+        const out = {
+          hue: next.hue,
+          saturation: next.saturation,
+          lightness: next.lightness,
+          alpha: "alpha" in next ? clamp(next.alpha, 0, 1) : 1
+        };
+        setHsl(out);
+        const formatted = formatColor(out, format);
+        setInternal(formatted);
+        if (isComplete && onChangeComplete) {
+          onChangeComplete(formatted);
+        }
+      }
+    },
+    [setInternal, onChangeComplete, format, disabled]
+  );
+  const satRef = useRef(null);
+  const isDraggingRef = 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)
+    };
+  };
+  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 = 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 = 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] = useState(() => formatColor(hsl, format));
+  useEffect(() => {
+    setInputValue(formatColor(hsl, format));
+  }, [hsl, format]);
+  const onChangeHexInput = (v) => {
+    setInputValue(v);
+    try {
+      const parsed = parseColor(v);
+      pushChange(parsed, false);
+    } catch (err) {
+      window.console.error(err);
+    }
+  };
+  const applyInput = () => {
+    try {
+      const parsed = parseColor(inputValue);
+      pushChange(parsed, true);
+    } catch (err) {
+      window.console.error(err);
+    }
+  };
+  const onPresetClick = (p) => {
+    const parsed = 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(parseToHsl(rgbToColorString(value2)), true);
+  };
+  const hex = hslToColorString(hsl);
+  const rgb = parseToRgb(hex);
+  return /* @__PURE__ */ jsx(ColorPickerWrapper, { size, className, style, children: /* @__PURE__ */ jsxs(
+    ColorPickerPanel,
+    {
+      role: "group",
+      "aria-label": "Color picker panel",
+      size,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", children: [
+          /* @__PURE__ */ jsxs(
+            ColorPickerSaturationWrapStyled,
+            {
+              ref: satRef,
+              onPointerDown: onSatPointerDown,
+              "aria-label": "Saturation and lightness",
+              role: "application",
+              children: [
+                /* @__PURE__ */ jsx(
+                  ColorPickerSaturationGradientStyled,
+                  {
+                    color: `hsl(${hsl.hue}, 100%, 50%)`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ColorPickerThumbStyled,
+                  {
+                    size,
+                    left: position.x * 100,
+                    top: position.y * 100
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { gap: "s", children: [
+            /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", style: { width: "100%" }, children: [
+              /* @__PURE__ */ jsxs(
+                ColorPickerSliderStyled,
+                {
+                  size,
+                  ref: hueRef,
+                  onPointerDown: onHuePointerDown,
+                  role: "slider",
+                  tabIndex: 0,
+                  onKeyDown: onHueKeyDown,
+                  "aria-valuenow": Math.round(hsl.hue),
+                  "aria-label": "Hue",
+                  children: [
+                    /* @__PURE__ */ jsx(ColorPickerSliderHueTrackStyled, {}),
+                    /* @__PURE__ */ jsx(
+                      ColorPickerSliderThumbStyled,
+                      {
+                        size,
+                        left: hsl.hue / 360 * 100
+                      }
+                    )
+                  ]
+                }
+              ),
+              isAlpha && /* @__PURE__ */ jsxs(
+                ColorPickerSliderStyled,
+                {
+                  size,
+                  ref: alphaRef,
+                  onPointerDown: onAlphaPointerDown,
+                  role: "slider",
+                  tabIndex: 0,
+                  onKeyDown: onHueKeyDown,
+                  "aria-valuenow": Math.round(hsl.hue),
+                  "aria-label": "Alpha",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      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__ */ jsx(
+                      ColorPickerSliderThumbStyled,
+                      {
+                        size,
+                        left: "alpha" in hsl ? (hsl.alpha ?? 1) * 100 : 100
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isAlpha && !hideInputs && /* @__PURE__ */ jsx(
+                InputsColor,
+                {
+                  disabled,
+                  format,
+                  onChangeHex: onChangeHexInput,
+                  onBlur: applyInput,
+                  size,
+                  onChangeRGB: onChangeRGBInput,
+                  hsl,
+                  onChangeHSL: (value2) => pushChange(value2, true)
+                }
+              )
+            ] }),
+            size !== "xs" && /* @__PURE__ */ jsx(
+              ColorPickerPreviewSwatchStyled,
+              {
+                hiddenInputs: hideInputs,
+                isAlpha,
+                size,
+                color: formatColor(hsl, "rgba"),
+                children: /* @__PURE__ */ jsx("div", { className: "quen-ui__color-picker__preview-swatch__inner" })
+              }
+            )
+          ] }),
+          size === "xs" && /* @__PURE__ */ jsx(
+            ColorPickerPreviewSwatchStyled,
+            {
+              size,
+              color: formatColor(hsl, "rgba"),
+              children: /* @__PURE__ */ jsx("div", { className: "quen-ui__color-picker__preview-swatch__inner" })
+            }
+          )
+        ] }),
+        (isAlpha && !hideInputs || !hidePresets && presets?.length) && /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "s", children: [
+          isAlpha && !hideInputs && /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "s", children: /* @__PURE__ */ jsx(
+            InputsColor,
+            {
+              disabled,
+              format,
+              onChangeHex: onChangeHexInput,
+              onBlur: applyInput,
+              size,
+              onChangeRGB: onChangeRGBInput,
+              hsl,
+              onChangeHSL: (value2) => pushChange(value2, true)
+            }
+          ) }),
+          !hidePresets && presets?.length && /* @__PURE__ */ jsx(Flex, { gap: "s", wrap: "wrap", children: presets.map((p, i) => {
+            const active = formatColor(parseColor(p), "hex") === formatColor(hsl, "hex");
+            return /* @__PURE__ */ jsx(
+              ColorPickerPresetStyled,
+              {
+                size,
+                color: typeof p === "string" ? p : formatColor(parseColor(p), "rgba"),
+                active,
+                onClick: () => !disabled && onPresetClick(p),
+                "aria-pressed": active
+              },
+              i
+            );
+          }) })
+        ] })
+      ]
+    }
+  ) });
+};
+export {
+  ColorPicker as default
+};

package/dist/ColorPicker/InputColor.cjs.js

@@ -0,0 +1,94 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const hooks = require("@quen-ui/hooks");
+const ColorPicker = require("./ColorPicker.cjs.js");
+const TextField = require("../TextField/TextField.cjs.js");
+const Dropdown = require("../Dropdown/Dropdown.cjs.js");
+const styles = require("./styles.cjs.js");
+const InputColor = ({
+  open: openProp,
+  defaultOpen,
+  defaultValue,
+  value,
+  onChange,
+  onOpenChange,
+  placeholder,
+  format,
+  label,
+  required,
+  rightContent,
+  onClear,
+  onFocus,
+  onBlur,
+  className,
+  clearable,
+  classNameInput,
+  size,
+  style,
+  error,
+  presets,
+  hidePresets
+}) => {
+  const [open, setOpen] = hooks.useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: (o) => onOpenChange?.(!!o)
+  });
+  const [color, setColor] = hooks.useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const inputRef = React.useRef(null);
+  const handleClear = (event) => {
+    setColor("");
+    onClear?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TextField,
+      {
+        error,
+        size,
+        style,
+        clearable,
+        classNameInput,
+        onChange,
+        className,
+        ref: inputRef,
+        onClick: () => setOpen(true),
+        value: color,
+        placeholder,
+        label,
+        rightContent,
+        onClear: handleClear,
+        required,
+        onFocus,
+        onBlur,
+        leftContent: /* @__PURE__ */ jsxRuntime.jsx(styles.ColorPickerSwatchInputStyled, { color, size, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "quen-ui__color-picker__swatch-input__inner " }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Dropdown,
+      {
+        anchorRef: inputRef,
+        open,
+        content: /* @__PURE__ */ jsxRuntime.jsx(
+          ColorPicker,
+          {
+            size: "s",
+            onChangeComplete: setColor,
+            format,
+            value: color,
+            hideInputs: true,
+            presets,
+            hidePresets
+          }
+        ),
+        onClickOutside: () => setOpen(false)
+      }
+    )
+  ] });
+};
+module.exports = InputColor;

package/dist/ColorPicker/InputColor.d.ts

@@ -0,0 +1,3 @@
+import { TInputColorProps } from './types';
+declare const InputColor: ({ open: openProp, defaultOpen, defaultValue, value, onChange, onOpenChange, placeholder, format, label, required, rightContent, onClear, onFocus, onBlur, className, clearable, classNameInput, size, style, error, presets, hidePresets }: TInputColorProps) => import("react/jsx-runtime").JSX.Element;
+export default InputColor;

package/dist/ColorPicker/InputColor.es.js

@@ -0,0 +1,95 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useControllableState } from "@quen-ui/hooks";
+import ColorPicker from "./ColorPicker.es.js";
+import TextField from "../TextField/TextField.es.js";
+import Dropdown from "../Dropdown/Dropdown.es.js";
+import { ColorPickerSwatchInputStyled } from "./styles.es.js";
+const InputColor = ({
+  open: openProp,
+  defaultOpen,
+  defaultValue,
+  value,
+  onChange,
+  onOpenChange,
+  placeholder,
+  format,
+  label,
+  required,
+  rightContent,
+  onClear,
+  onFocus,
+  onBlur,
+  className,
+  clearable,
+  classNameInput,
+  size,
+  style,
+  error,
+  presets,
+  hidePresets
+}) => {
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: (o) => onOpenChange?.(!!o)
+  });
+  const [color, setColor] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const inputRef = useRef(null);
+  const handleClear = (event) => {
+    setColor("");
+    onClear?.(event);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        error,
+        size,
+        style,
+        clearable,
+        classNameInput,
+        onChange,
+        className,
+        ref: inputRef,
+        onClick: () => setOpen(true),
+        value: color,
+        placeholder,
+        label,
+        rightContent,
+        onClear: handleClear,
+        required,
+        onFocus,
+        onBlur,
+        leftContent: /* @__PURE__ */ jsx(ColorPickerSwatchInputStyled, { color, size, children: /* @__PURE__ */ jsx("span", { className: "quen-ui__color-picker__swatch-input__inner " }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        anchorRef: inputRef,
+        open,
+        content: /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            size: "s",
+            onChangeComplete: setColor,
+            format,
+            value: color,
+            hideInputs: true,
+            presets,
+            hidePresets
+          }
+        ),
+        onClickOutside: () => setOpen(false)
+      }
+    )
+  ] });
+};
+export {
+  InputColor as default
+};