welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
430 lines (429 loc) • 14.4 kB
JavaScript
"use client";
import './Slider.css';
import { jsxs as D, jsx as l, Fragment as se } from "react/jsx-runtime";
import { forwardRef as Y, useState as $, useRef as K, useCallback as Z, useEffect as U, useId as ee } from "react";
import { Hint as H } from "./Hint.js";
import { InputText as O } from "./InputText.js";
import { Text as re } from "./Text.js";
import { c as ne } from "./index-B6iGEm-i.js";
const ce = "_hint_6xzwz_20", ue = "_output_6xzwz_149", de = "_tooltip_6xzwz_162", fe = "_thick_6xzwz_171", pe = "_range_6xzwz_8", te = {
"slider-root": "_slider-root_6xzwz_2",
"range-root": "_range-root_6xzwz_8",
"input-wrapper": "_input-wrapper_6xzwz_14",
hint: ce,
"slider-wrapper": "_slider-wrapper_6xzwz_23",
"range-wrapper": "_range-wrapper_6xzwz_30",
"tick-markers": "_tick-markers_6xzwz_34",
"input-range-wrapper": "_input-range-wrapper_6xzwz_41",
"input-range": "_input-range_6xzwz_41",
"border-selector-secondary-blue": "_border-selector-secondary-blue_6xzwz_110",
"border-selector-secondary-green": "_border-selector-secondary-green_6xzwz_113",
"border-selector-secondary-orange": "_border-selector-secondary-orange_6xzwz_116",
"border-selector-secondary-pink": "_border-selector-secondary-pink_6xzwz_119",
"border-selector-secondary-teal": "_border-selector-secondary-teal_6xzwz_122",
"border-selector-secondary-violet": "_border-selector-secondary-violet_6xzwz_125",
"slider-input-range": "_slider-input-range_6xzwz_128",
"range-input-range": "_range-input-range_6xzwz_135",
output: ue,
"output-visible": "_output-visible_6xzwz_157",
tooltip: de,
thick: fe,
"thick-label": "_thick-label_6xzwz_182",
"range-track": "_range-track_6xzwz_188",
range: pe,
"range-disabled": "_range-disabled_6xzwz_200"
}, X = 20, g = ne(te), P = ({
min: d,
step: _,
toCompare: p,
value: y
}) => {
let h = Math.min(y, p - 1 * _);
return h = Math.max(h, d), q(h, _);
}, T = ({
max: d,
step: _,
toCompare: p,
value: y
}) => {
let h = Math.max(y, p + 1 * _);
return h = Math.min(h, d), q(h, _);
}, ae = Y(
({
borderSelectorColor: d,
className: _,
disabled: p,
hint: y,
label: h,
max: a,
min: t,
onChange: w,
step: i = 1,
tooltip: b,
type: m,
value: f,
values: B,
...W
}, G) => {
const [o, k] = $(t), [s, I] = $(a), [R, z] = $(t), [v, x] = $(a), A = K(null), E = K(null), M = K(null), S = K(null), L = K(null), [C, j] = $(!1), [n, c] = $(!1), ie = (e) => {
const r = P({
min: t,
step: i,
toCompare: s,
value: parseInt(e.target.value, 10)
});
z(r), k(r), e.target.value = r.toString();
}, oe = (e) => {
const r = T({
max: a,
step: i,
toCompare: o,
value: parseInt(e.target.value, 10)
});
x(r), I(r), e.target.value = r.toString();
}, Q = (e, r) => {
if (e.preventDefault(), r === "min") {
let u = o;
e.key === "ArrowRight" && (u = P({ min: t, step: i, toCompare: s, value: u + i })), e.key === "ArrowLeft" && (u = P({ min: t, step: i, toCompare: s, value: u - i })), z(u), k(u), w({ max: s, min: u });
}
if (r === "max") {
let u = s;
e.key === "ArrowRight" && (u = T({ max: a, step: i, toCompare: o, value: u + i })), e.key === "ArrowLeft" && (u = T({ max: a, step: i, toCompare: o, value: u - i })), x(u), I(u), w({ max: u, min: o });
}
}, V = Z(
(e) => {
const r = Math.round((e - t) / (a - t) * 100);
return r < 0 ? 0 : r > 100 ? 100 : r;
},
[t, a]
);
U(() => {
if (E.current) {
const e = V(o), r = V(parseInt(E.current.value, 10));
M.current && (M.current.style.left = `${e}%`, M.current.style.width = `${r - e}%`);
}
}, [o, V]), U(() => {
if (A.current) {
const e = V(parseInt(A.current.value, 10)), r = V(s);
if (M.current && (M.current.style.width = `${r - e}%`), S.current) {
const u = V(o) / 100;
S.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
}
if (L.current) {
const u = V(s) / 100;
L.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
}
}
}, [o, s, V]), U(() => {
if (f) {
if (!isNaN(f.min) && f.min !== o) {
const e = P({ min: t, step: i, toCompare: s, value: f.min || t });
k(e), z(e);
}
if (!isNaN(f.max) && f.max !== s) {
const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
I(e), x(e);
}
}
}, [f]);
const J = ee();
return /* @__PURE__ */ D("div", { className: g("range-root", _), ref: G, children: [
h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: `${J}-min`, variant: "body-md", children: h }) : null,
/* @__PURE__ */ D("div", { className: g("input-wrapper"), children: [
(m === "inline" || m === "fields") && (m === "fields" ? /* @__PURE__ */ l(
O,
{
disabled: p,
max: s,
min: t,
onBlur: () => {
const e = P({
min: t,
step: i,
toCompare: s,
value: R
});
z(e), k(e), w({ max: s, min: e });
},
onChange: (e) => {
let r = parseInt(e.target.value, 10);
isNaN(r) && (r = 0), z(r);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
const r = P({
min: t,
step: i,
toCompare: s,
value: R
});
z(r), k(r), w({ max: s, min: r });
}
},
size: "md",
type: "number",
value: R.toString()
}
) : /* @__PURE__ */ l("div", { children: t })),
/* @__PURE__ */ D("div", { className: g("range-wrapper"), children: [
b ? /* @__PURE__ */ D(se, { children: [
/* @__PURE__ */ l(
"output",
{
className: g("output", C && "output-visible"),
ref: S,
children: /* @__PURE__ */ l("div", { children: o })
}
),
/* @__PURE__ */ l(
"output",
{
className: g("output", n && "output-visible"),
ref: L,
children: /* @__PURE__ */ l("div", { children: s })
}
)
] }) : null,
/* @__PURE__ */ D("div", { className: g("input-range-wrapper"), children: [
/* @__PURE__ */ l(
"input",
{
...W,
className: g(
"input-range",
"range-input-range",
d && `border-selector-${d}`
),
disabled: p,
id: `${J}-min`,
max: a,
min: t,
onChange: ie,
onKeyDown: (e) => Q(e, "min"),
onMouseDown: () => {
b && C === !1 && j(!0);
},
onMouseUp: () => {
w({ max: s, min: o }), b && j(!1);
},
ref: A,
step: i,
type: "range",
value: o
}
),
/* @__PURE__ */ l(
"input",
{
...W,
className: g(
"input-range",
"range-input-range",
d && `border-selector-${d}`
),
disabled: p,
id: `${J}-max`,
max: a,
min: t,
onChange: oe,
onKeyDown: (e) => Q(e, "max"),
onMouseDown: () => {
b && n === !1 && c(!0);
},
onMouseUp: () => {
w({ max: s, min: o }), b && c(!1);
},
ref: E,
step: i,
type: "range",
value: s
}
),
/* @__PURE__ */ l("div", { className: g("range-track") }),
/* @__PURE__ */ l("div", { className: g("range", p && "range-disabled"), ref: M })
] }),
B ? /* @__PURE__ */ l("div", { className: g("thicks-markers"), children: B.reduce((e, r) => e.includes(r) ? e : [...e, r], []).filter((e) => e >= t && e <= a).map((e, r) => /* @__PURE__ */ l(
"div",
{
className: g("thick"),
style: { left: `${V(e)}%` },
children: /* @__PURE__ */ l(H, { className: g("thick-label"), children: e })
},
`${e}-${r}`
)) }) : null
] }),
(m === "inline" || m === "fields") && (m === "fields" ? /* @__PURE__ */ l(
O,
{
disabled: p,
max: a,
min: o + 1,
onBlur: () => {
const e = T({
max: a,
step: i,
toCompare: o,
value: v
});
x(e), I(e), w({ max: e, min: o });
},
onChange: (e) => {
let r = parseInt(e.target.value, 10);
isNaN(r) && (r = 0), x(r);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
const r = T({
max: a,
step: i,
toCompare: o,
value: v
});
x(r), I(r), w({ max: r, min: o });
}
},
size: "md",
type: "number",
value: v.toString()
}
) : /* @__PURE__ */ l("div", { children: a }))
] }),
y ? /* @__PURE__ */ l(H, { className: g("hint"), children: y }) : null
] });
}
);
ae.displayName = "Slider.Range";
const _e = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, y) => (d = q(d, y), d < _ ? _ : d > p ? p : d), N = ne(te), le = Y(
({
borderSelectorColor: d,
className: _,
disabled: p,
hint: y,
label: h,
max: a,
min: t,
onChange: w,
step: i = 1,
tooltip: b,
type: m,
value: f,
values: B,
...W
}, G) => {
const o = K(null), k = K(null), [s, I] = $(!1), [R, z] = $(F(f, t, a, i)), [v, x] = $(F(f, t, a, i)), A = (n) => {
n = q(n, i), x(n);
}, E = (n) => {
n.preventDefault();
let c = v;
n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), x(c), z(c), w(c);
}, M = (n) => {
let c = parseInt(n.target.value, 10);
isNaN(c) && (c = 0), z(c);
}, S = () => {
const n = F(R, t, a, i);
z(n), x(n), w(n);
}, L = (n) => {
n.key === "Enter" && S();
}, C = Z(
(n) => Math.round((n - t) / (a - t) * 100),
[t, a]
);
U(() => {
if (o.current && (o.current.style.backgroundSize = `${C(v)}% 100%`), k.current) {
const n = C(v) / 100;
k.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * _e}px)`;
}
}, [v, C]), U(() => {
!isNaN(f) && f !== v && f && (A(f), z(f));
}, [f]);
const j = ee();
return /* @__PURE__ */ D("div", { className: N("slider-root", "field-input", _), ref: G, children: [
h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "body-md", children: h }) : null,
/* @__PURE__ */ D("div", { className: N("input-wrapper"), children: [
(m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
O,
{
disabled: p,
max: a,
min: t,
onBlur: S,
onChange: M,
onKeyDown: L,
size: "md",
type: "number",
value: R.toString()
}
) : /* @__PURE__ */ l("div", { children: t })),
/* @__PURE__ */ D("div", { className: N("slider-wrapper"), children: [
/* @__PURE__ */ l(
"input",
{
className: N(
"input-range",
"slider-input-range",
d && `border-selector-${d}`
),
disabled: p,
id: j,
list: "tickmarks",
max: a,
min: t,
onChange: (n) => {
const c = parseInt(n.target.value, 10);
A(c), z(c);
},
onKeyDown: E,
onMouseDown: () => {
b && s === !1 && I(!0);
},
onMouseUp: () => {
w(v), b && I(!1);
},
ref: o,
step: i,
type: "range",
value: v,
...W
}
),
b ? /* @__PURE__ */ l("output", { className: N("output", s && "output-visible"), ref: k, children: /* @__PURE__ */ l("div", { className: N("tooltip"), children: v }) }) : null,
B ? /* @__PURE__ */ l("div", { className: N("thick-markers"), children: B.reduce((n, c) => n.includes(c) ? n : [...n, c], []).filter((n) => n >= t && n <= a).map((n, c) => /* @__PURE__ */ l(
"div",
{
className: N("thick"),
style: { left: `${C(n)}%` },
children: /* @__PURE__ */ l(H, { className: N("thick-label"), children: n })
},
`${n}-${c}`
)) }) : null
] }),
(m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
O,
{
className: N("input-text"),
disabled: p,
max: a,
min: t,
onBlur: S,
onChange: M,
onKeyDown: L,
size: "md",
type: "number",
value: R.toString()
}
) : /* @__PURE__ */ l("div", { children: a }))
] }),
y ? /* @__PURE__ */ l(H, { className: N("hint"), children: y }) : null
] });
}
);
le.displayName = "Slider";
const ye = Object.assign(le, { Range: ae });
export {
ye as Slider,
le as SliderComponent,
F as ensureMinMax,
q as round,
te as sliderClasses,
_e as thumbWidth
};