welcome-ui/dist/Slider.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as r } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useState as D, useRef as S, useCallback as ne, useEffect as F } from "react";
import { Box as p } from "./Box.mjs";
import { Hint as X } from "./Hint.mjs";
import { InputText as O } from "./InputText.mjs";
import { forwardRef as re } from "./System.mjs";
import { Text as se } from "./Text.mjs";
import R, { th as l, css as x } from "@xstyled/styled-components";
const W = x`
  appearance: none;
  cursor: pointer;
  height: 20;
  width: 20;
  transform: scale(1);
  transition:
    background-color ${l.transition("medium")},
    border-color ${l.transition("medium")},
    transform 100ms ease-in-out;
`, H = x`
  ${l("sliders.focused")};
  transform: scale(1.2);
`, ie = x`
  position: absolute;
  width: 100%;
  height: ${l("space.xs")};
`, de = R.input(
  ({ borderSelectorColor: i, disabled: c }) => x`
    ${l("sliders.default")};
    appearance: none;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 0;
    margin: auto 0;
    width: 100%;
    height: ${l("space.xs")};

    &::-webkit-slider-thumb {
      ${l("sliders.selector")};
      ${W};
      border-color: ${i || "transparent"};
    }

    &::-moz-range-thumb {
      ${l("sliders.selector")};
      ${W};
      border-color: ${i || "transparent"};
    }

    &:active,
    &:focus-visible {
      outline: none;

      &::-webkit-slider-thumb {
        ${H};
      }

      &::-moz-range-thumb {
        ${H};
      }
    }

    ${c && x`
      ${l("sliders.disabled")}
      cursor: not-allowed;

      &::-webkit-slider-thumb {
        ${l("sliders.selector.disabled")};
        cursor: not-allowed;
      }

      &::-moz-range-thumb {
        ${l("sliders.selector.disabled")};
        cursor: not-allowed;
      }

      &:active {
        &::-webkit-slider-thumb {
          ${l("sliders.focused.disabled")};
        }

        &::-moz-range-thumb {
          ${l("sliders.focused.disabled")};
        }
      }
    `};
  `
), ee = R.input(
  ({ borderSelectorColor: i, disabled: c }) => x`
    ${l("sliders.rangeInput")}
    appearance: none;
    pointer-events: none;
    position: absolute;
    height: 0;
    width: 100%;
    outline: none;
    z-index: 1;
    top: ${l("space.xxs")};

    &::-webkit-slider-thumb {
      ${l("sliders.selector")};
      ${W};

      border-color: ${i || "transparent"};
      top: ${l("space.sm")};
      pointer-events: all;
      position: relative;
    }

    &::-moz-range-thumb {
      ${l("sliders.selector")};
      ${W};

      border-color: ${i || "transparent"};
      top: ${l("space.sm")};
      pointer-events: all;
      position: relative;
    }

    &:active,
    &:focus-visible {
      &::-webkit-slider-thumb {
        ${H};
      }

      &::-moz-range-thumb {
        ${H};
      }
    }

    ${c && x`
      &::-webkit-slider-thumb {
        ${l("sliders.selector.disabled")};
        cursor: not-allowed;
      }

      &::-moz-range-thumb {
        ${l("sliders.selector.disabled")};
        cursor: not-allowed;
      }

      &:active {
        &::-webkit-slider-thumb {
          ${l("sliders.focused.disabled")};
        }

        &::-moz-range-thumb {
          ${l("sliders.focused.disabled")};
        }
      }
    `};
  `
), fe = R(p)(
  () => x`
    ${ie};
    background-color: beige-40;
  `
), me = R(p)(
  ({ disabled: i }) => x`
    ${ie};
    background-color: primary-40;

    ${i && x`
      ${l("sliders.disabled")}
      cursor: not-allowed;
    `};
  `
), oe = R(p)(
  () => x`
    position: absolute;

    :before {
      content: '';
      position: absolute;
      background-color: neutral-30;
      height: 6;
      width: 1;
      transform: translate(-50%);
    }
  `
), le = R(X)(
  () => x`
    position: absolute;
    color: neutral-50;
    top: 0;
    transform: translate(-50%);
    white-space: nowrap;
  `
), J = R.outputBox(
  ({ isVisible: i }) => x`
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 150ms ease-in-out,
      visibility 150ms ease-in-out,
      transform 150ms ease-in-out;
    position: absolute;
    text-align: center;
    transform: translate(-50%, calc(-100% + -${l("space.xs")}));

    ${i && x`
      opacity: 100;
      visibility: visible;
      transform: translate(-50%, calc(-100% + -${l("space.sm")}));
    `}
  `
), Q = R(p)(
  () => x`
    ${l("sliders.output.tooltip")};
    flex: 1 1 auto;
    margin: auto;
    min-width: ${l("space.xxs")};
    padding: ${l("space.xs")} ${l("space.sm")};
  `
), te = 20, C = ({
  min: i,
  step: c,
  toCompare: b,
  value: j
}) => {
  let n = Math.min(j, b - 1 * c);
  return n = Math.max(n, i), _(n, c);
}, L = ({
  max: i,
  step: c,
  toCompare: b,
  value: j
}) => {
  let n = Math.max(j, b + 1 * c);
  return n = Math.min(n, i), _(n, c);
}, he = re(
  ({
    borderSelectorColor: i = "neutral-10",
    disabled: c,
    hint: b,
    label: j,
    max: n,
    min: o,
    onChange: g,
    step: a = 1,
    tooltip: M,
    type: $,
    value: h,
    values: E,
    ...G
  }, q) => {
    const [u, k] = D(o), [d, z] = D(n), [N, w] = D(n), [v, y] = D(n), A = S(null), P = S(null), V = S(null), K = S(null), B = S(null), [T, s] = D(!1), [f, Y] = D(!1), ce = (e) => {
      const t = C({
        min: o,
        step: a,
        toCompare: d,
        value: parseInt(e.target.value, 10)
      });
      w(t), k(t), e.target.value = t.toString();
    }, ue = (e) => {
      const t = L({
        max: n,
        step: a,
        toCompare: u,
        value: parseInt(e.target.value, 10)
      });
      y(t), z(t), e.target.value = t.toString();
    }, Z = (e, t) => {
      if (e.preventDefault(), t === "min") {
        let m = u;
        e.key === "ArrowRight" && (m = C({ min: o, step: a, toCompare: d, value: m + a })), e.key === "ArrowLeft" && (m = C({ min: o, step: a, toCompare: d, value: m - a })), w(m), k(m), g({ max: d, min: m });
      }
      if (t === "max") {
        let m = d;
        e.key === "ArrowRight" && (m = L({ max: n, step: a, toCompare: u, value: m + a })), e.key === "ArrowLeft" && (m = L({ max: n, step: a, toCompare: u, value: m - a })), y(m), z(m), g({ max: m, min: u });
      }
    }, I = ne(
      (e) => {
        const t = Math.round((e - o) / (n - o) * 100);
        return t < 0 ? 0 : t > 100 ? 100 : t;
      },
      [o, n]
    );
    return F(() => {
      if (P.current) {
        const e = I(u), t = I(parseInt(P.current.value, 10));
        V.current && (V.current.style.left = `${e}%`, V.current.style.width = `${t - e}%`);
      }
    }, [u, I]), F(() => {
      if (A.current) {
        const e = I(parseInt(A.current.value, 10)), t = I(d);
        if (V.current && (V.current.style.width = `${t - e}%`), K.current) {
          const m = I(u) / 100;
          K.current.style.left = `calc(${m * 100}% + ${(0.5 - m) * te}px)`;
        }
        if (B.current) {
          const m = I(d) / 100;
          B.current.style.left = `calc(${m * 100}% + ${(0.5 - m) * te}px)`;
        }
      }
    }, [u, d, I]), F(() => {
      if (h) {
        if (!isNaN(h.min) && h.min !== u) {
          const e = C({ min: o, step: a, toCompare: d, value: h.min || o });
          k(e), w(e);
        }
        if (!isNaN(h.max) && h.max !== d) {
          const e = L({ max: n, step: a, toCompare: u, value: h.max || n });
          z(e), y(e);
        }
      }
    }, [h]), /* @__PURE__ */ r.jsxs(p, { position: "relative", ref: q, w: "100%", children: [
      j ? /* @__PURE__ */ r.jsx(se, { as: "label", variant: "sm", children: j }) : null,
      /* @__PURE__ */ r.jsxs(p, { alignItems: "center", display: "flex", gap: "sm", children: [
        ($ === "inline" || $ === "fields") && ($ === "fields" ? /* @__PURE__ */ r.jsx(
          O,
          {
            disabled: c,
            max: d,
            min: o,
            onBlur: () => {
              const e = C({
                min: o,
                step: a,
                toCompare: d,
                value: N
              });
              w(e), k(e), g({ max: d, min: e });
            },
            onChange: (e) => {
              let t = parseInt(e.target.value, 10);
              isNaN(t) && (t = 0), w(t);
            },
            onKeyDown: (e) => {
              if (e.key === "Enter") {
                const t = C({
                  min: o,
                  step: a,
                  toCompare: d,
                  value: N
                });
                w(t), k(t), g({ max: d, min: t });
              }
            },
            size: "sm",
            type: "number",
            value: N.toString(),
            w: 72
          }
        ) : /* @__PURE__ */ r.jsx(p, { children: o })),
        /* @__PURE__ */ r.jsxs(p, { flexGrow: "1", position: "relative", children: [
          M ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
            /* @__PURE__ */ r.jsx(J, { isVisible: T, ref: K, children: /* @__PURE__ */ r.jsx(Q, { children: u }) }),
            /* @__PURE__ */ r.jsx(J, { isVisible: f, ref: B, children: /* @__PURE__ */ r.jsx(Q, { children: d }) })
          ] }) : null,
          /* @__PURE__ */ r.jsxs(p, { h: 20, pb: "sm", position: "relative", pt: "sm", w: "100%", children: [
            /* @__PURE__ */ r.jsx(
              ee,
              {
                ...G,
                borderSelectorColor: i,
                disabled: c,
                max: n,
                min: o,
                onChange: ce,
                onKeyDown: (e) => Z(e, "min"),
                onMouseDown: () => {
                  M && T === !1 && s(!0);
                },
                onMouseUp: () => {
                  g({ max: d, min: u }), M && s(!1);
                },
                ref: A,
                step: a,
                type: "range",
                value: u
              }
            ),
            /* @__PURE__ */ r.jsx(
              ee,
              {
                ...G,
                borderSelectorColor: i,
                disabled: c,
                max: n,
                min: o,
                onChange: ue,
                onKeyDown: (e) => Z(e, "max"),
                onMouseDown: () => {
                  M && f === !1 && Y(!0);
                },
                onMouseUp: () => {
                  g({ max: d, min: u }), M && Y(!1);
                },
                ref: P,
                step: a,
                type: "range",
                value: d
              }
            ),
            /* @__PURE__ */ r.jsx(fe, {}),
            /* @__PURE__ */ r.jsx(me, { disabled: c, ref: V })
          ] }),
          E ? /* @__PURE__ */ r.jsx(p, { h: 24, ml: 10, mr: 10, position: "relative", children: E.reduce((e, t) => e.includes(t) ? e : [...e, t], []).filter((e) => e >= o && e <= n).map((e, t) => /* @__PURE__ */ r.jsx(oe, { left: `${I(e)}%`, children: /* @__PURE__ */ r.jsx(le, { children: e }) }, `${e}-${t}`)) }) : null
        ] }),
        ($ === "inline" || $ === "fields") && ($ === "fields" ? /* @__PURE__ */ r.jsx(
          O,
          {
            disabled: c,
            max: n,
            min: u + 1,
            onBlur: () => {
              const e = L({
                max: n,
                step: a,
                toCompare: u,
                value: v
              });
              y(e), z(e), g({ max: e, min: u });
            },
            onChange: (e) => {
              let t = parseInt(e.target.value, 10);
              isNaN(t) && (t = 0), y(t);
            },
            onKeyDown: (e) => {
              if (e.key === "Enter") {
                const t = L({
                  max: n,
                  step: a,
                  toCompare: u,
                  value: v
                });
                y(t), z(t), g({ max: t, min: u });
              }
            },
            size: "sm",
            type: "number",
            value: v.toString(),
            w: 72
          }
        ) : /* @__PURE__ */ r.jsx(p, { children: n }))
      ] }),
      b ? /* @__PURE__ */ r.jsx(X, { color: "neutral-50", mt: 0, children: b }) : null
    ] });
  }
), pe = 20, _ = (i, c) => Math.round(i / c) * c, U = (i, c, b, j) => (i = _(i, j), i < c ? c : i > b ? b : i), ae = re(
  ({
    borderSelectorColor: i = "neutral-10",
    disabled: c,
    hint: b,
    label: j,
    max: n,
    min: o,
    onChange: g,
    step: a = 1,
    tooltip: M,
    type: $,
    value: h,
    values: E,
    ...G
  }, q) => {
    const u = S(null), k = S(null), [d, z] = D(!1), [N, w] = D(U(h, o, n, a)), [v, y] = D(U(h, o, n, a)), A = (s) => {
      s = _(s, a), y(s);
    }, P = (s) => {
      s.preventDefault();
      let f = v;
      s.key === "ArrowRight" && (f = U(f + a, o, n, a)), s.key === "ArrowLeft" && (f = U(f - a, o, n, a)), y(f), w(f), g(f);
    }, V = (s) => {
      let f = parseInt(s.target.value, 10);
      isNaN(f) && (f = 0), w(f);
    }, K = () => {
      const s = U(N, o, n, a);
      w(s), y(s), g(s);
    }, B = (s) => {
      s.key === "Enter" && K();
    }, T = ne(
      (s) => Math.round((s - o) / (n - o) * 100),
      [o, n]
    );
    return F(() => {
      if (u.current && (u.current.style.backgroundSize = `${T(v)}% 100%`), k.current) {
        const s = T(v) / 100;
        k.current.style.left = `calc(${s * 100}% + ${(0.5 - s) * pe}px)`;
      }
    }, [v, T]), F(() => {
      !isNaN(h) && h !== v && h && (A(h), w(h));
    }, [h]), /* @__PURE__ */ r.jsxs(p, { display: "flex", flexDirection: "column", position: "relative", ref: q, children: [
      j ? /* @__PURE__ */ r.jsx(se, { as: "label", variant: "sm", children: j }) : null,
      /* @__PURE__ */ r.jsxs(p, { alignItems: "center", display: "flex", gap: "sm", children: [
        ($ === "inline" || $ === "left-field") && ($ === "left-field" ? /* @__PURE__ */ r.jsx(
          O,
          {
            disabled: c,
            max: n,
            min: o,
            onBlur: K,
            onChange: V,
            onKeyDown: B,
            size: "sm",
            type: "number",
            value: N.toString(),
            w: 72
          }
        ) : /* @__PURE__ */ r.jsx(p, { children: o })),
        /* @__PURE__ */ r.jsxs(p, { display: "flex", flexDirection: "column", flexGrow: "1", h: 20, position: "relative", children: [
          /* @__PURE__ */ r.jsx(
            de,
            {
              borderSelectorColor: i,
              disabled: c,
              list: "tickmarks",
              max: n,
              min: o,
              onChange: (s) => {
                const f = parseInt(s.target.value, 10);
                A(f), w(f);
              },
              onKeyDown: P,
              onMouseDown: () => {
                M && d === !1 && z(!0);
              },
              onMouseUp: () => {
                g(v), M && z(!1);
              },
              ref: u,
              step: a,
              type: "range",
              value: v,
              ...G
            }
          ),
          M ? /* @__PURE__ */ r.jsx(J, { isVisible: d, ref: k, children: /* @__PURE__ */ r.jsx(Q, { children: v }) }) : null,
          E ? /* @__PURE__ */ r.jsx(p, { h: 24, ml: 10, mr: 10, mt: 5, position: "relative", children: E.reduce((s, f) => s.includes(f) ? s : [...s, f], []).filter((s) => s >= o && s <= n).map((s, f) => /* @__PURE__ */ r.jsx(oe, { left: `${T(s)}%`, children: /* @__PURE__ */ r.jsx(le, { children: s }) }, `${s}-${f}`)) }) : null
        ] }),
        ($ === "inline" || $ === "right-field") && ($ === "right-field" ? /* @__PURE__ */ r.jsx(
          O,
          {
            disabled: c,
            max: n,
            min: o,
            onBlur: K,
            onChange: V,
            onKeyDown: B,
            size: "sm",
            type: "number",
            value: N.toString(),
            w: 72
          }
        ) : /* @__PURE__ */ r.jsx(p, { children: n }))
      ] }),
      b ? /* @__PURE__ */ r.jsx(X, { color: "neutral-50", mt: 0, children: b }) : null
    ] });
  }
);
ae.displayName = "Slider";
const Me = Object.assign(ae, { Range: he });
export {
  Me as Slider,
  ae as SliderComponent,
  U as ensureMinMax,
  _ as round,
  pe as thumbWidth
};