fui-fancyui/dist/src/components/molecules/FancyHueSlider/FancyHueSlider.js

FancyUI Libary

"use client";
import { jsx as o } from "react/jsx-runtime";
import h from "../../../utils/hooks/useSlider/useSilder.js";
import p from "../../atoms/SliderMarker/SliderMarker.js";
import f from "../../atoms/ColorIndicator/ColorIndicator.js";
import { SliderWrapper as S, SliderContainer as g } from "./FancyHueSlider.style.js";
import { positionToColorHue as C, colorToPositionHue as F } from "./utils/calcPosition.js";
import { sizeSettings as l } from "../FancyOpacitySlider/sizeSettings.js";
import { globalElementSizes as T } from "../../../design/theme/globalSizes.js";
function k(s) {
  const { handler: r, hue: e = 0, sizeC: i = "sm", borderRadius: t = "lg" } = s, d = (u) => r && r(parseFloat(u.toFixed(1))), { sliderRef: a, markerPosition: c, handleInteractionStart: n, isInteracting: m } = h({
    hue: e,
    sliderPositionToColorFunc: C,
    colorToPositionFunc: F,
    type: "hue",
    handlerSlider: d
  });
  return /* @__PURE__ */ o(S, { $height: T[l[i].height], children: /* @__PURE__ */ o(
    g,
    {
      ref: a,
      onMouseDown: n,
      onTouchStart: n,
      $borderRadius: t || l[i].borderRadius,
      children: /* @__PURE__ */ o(p, { position: c.x + "%", children: /* @__PURE__ */ o(f, { color: `hsl(${e}, 100%, 50% )`, isActive: m }) })
    }
  ) });
}
export {
  k as default
};