welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
424 lines (423 loc) • 14.3 kB
JavaScript
"use client";
import { jsxs as R, jsx as l, Fragment as ie } from "react/jsx-runtime";
import { forwardRef as Y, useState as D, useRef as A, 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-PAaZGbyz.js";
const oe = "_hint_4d202_20", se = "_output_4d202_149", ce = "_tooltip_4d202_162", ue = "_thick_4d202_171", de = "_range_4d202_8", te = {
"slider-root": "_slider-root_4d202_2",
"range-root": "_range-root_4d202_8",
"input-wrapper": "_input-wrapper_4d202_14",
hint: oe,
"slider-wrapper": "_slider-wrapper_4d202_23",
"range-wrapper": "_range-wrapper_4d202_30",
"tick-markers": "_tick-markers_4d202_34",
"input-range-wrapper": "_input-range-wrapper_4d202_41",
"input-range": "_input-range_4d202_41",
"border-selector-secondary-blue": "_border-selector-secondary-blue_4d202_110",
"border-selector-secondary-green": "_border-selector-secondary-green_4d202_113",
"border-selector-secondary-orange": "_border-selector-secondary-orange_4d202_116",
"border-selector-secondary-pink": "_border-selector-secondary-pink_4d202_119",
"border-selector-secondary-teal": "_border-selector-secondary-teal_4d202_122",
"border-selector-secondary-violet": "_border-selector-secondary-violet_4d202_125",
"slider-input-range": "_slider-input-range_4d202_128",
"range-input-range": "_range-input-range_4d202_135",
output: se,
"output-visible": "_output-visible_4d202_157",
tooltip: ce,
thick: ue,
"thick-label": "_thick-label_4d202_182",
"range-track": "_range-track_4d202_188",
range: de,
"range-disabled": "_range-disabled_4d202_200"
}, X = 20, g = ne(te), P = ({
min: d,
step: _,
toCompare: p,
value: k
}) => {
let h = Math.min(k, p - 1 * _);
return h = Math.max(h, d), q(h, _);
}, T = ({
max: d,
step: _,
toCompare: p,
value: k
}) => {
let h = Math.max(k, p + 1 * _);
return h = Math.min(h, d), q(h, _);
}, fe = Y(
({
borderSelectorColor: d,
className: _,
disabled: p,
hint: k,
label: h,
max: a,
min: t,
onChange: v,
step: i = 1,
tooltip: M,
type: m,
value: f,
values: B,
...W
}, G) => {
const [o, V] = D(t), [s, x] = D(a), [K, N] = D(t), [y, b] = D(a), z = A(null), E = A(null), $ = A(null), C = A(null), L = A(null), [S, j] = D(!1), [n, c] = D(!1), ae = (e) => {
const r = P({
min: t,
step: i,
toCompare: s,
value: parseInt(e.target.value, 10)
});
N(r), V(r), e.target.value = r.toString();
}, le = (e) => {
const r = T({
max: a,
step: i,
toCompare: o,
value: parseInt(e.target.value, 10)
});
b(r), x(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 })), N(u), V(u), v({ 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 })), b(u), x(u), v({ max: u, min: o });
}
}, I = 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 = I(o), r = I(parseInt(E.current.value, 10));
$.current && ($.current.style.left = `${e}%`, $.current.style.width = `${r - e}%`);
}
}, [o, I]), U(() => {
if (z.current) {
const e = I(parseInt(z.current.value, 10)), r = I(s);
if ($.current && ($.current.style.width = `${r - e}%`), C.current) {
const u = I(o) / 100;
C.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
}
if (L.current) {
const u = I(s) / 100;
L.current.style.left = `calc(${u * 100}% + ${(0.5 - u) * X}px)`;
}
}
}, [o, s, I]), U(() => {
if (f) {
if (!isNaN(f.min) && f.min !== o) {
const e = P({ min: t, step: i, toCompare: s, value: f.min || t });
V(e), N(e);
}
if (!isNaN(f.max) && f.max !== s) {
const e = T({ max: a, step: i, toCompare: o, value: f.max || a });
x(e), b(e);
}
}
}, [f]);
const J = ee();
return /* @__PURE__ */ R("div", { className: g("range-root", _), ref: G, children: [
h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: `${J}-min`, variant: "sm", children: h }) : null,
/* @__PURE__ */ R("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: K
});
N(e), V(e), v({ max: s, min: e });
},
onChange: (e) => {
let r = parseInt(e.target.value, 10);
isNaN(r) && (r = 0), N(r);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
const r = P({
min: t,
step: i,
toCompare: s,
value: K
});
N(r), V(r), v({ max: s, min: r });
}
},
size: "sm",
type: "number",
value: K.toString()
}
) : /* @__PURE__ */ l("div", { children: t })),
/* @__PURE__ */ R("div", { className: g("range-wrapper"), children: [
M ? /* @__PURE__ */ R(ie, { children: [
/* @__PURE__ */ l(
"output",
{
className: g("output", S && "output-visible"),
ref: C,
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__ */ R("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: ae,
onKeyDown: (e) => Q(e, "min"),
onMouseDown: () => {
M && S === !1 && j(!0);
},
onMouseUp: () => {
v({ max: s, min: o }), M && j(!1);
},
ref: z,
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: le,
onKeyDown: (e) => Q(e, "max"),
onMouseDown: () => {
M && n === !1 && c(!0);
},
onMouseUp: () => {
v({ max: s, min: o }), M && 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: $ })
] }),
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: `${I(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: y
});
b(e), x(e), v({ max: e, min: o });
},
onChange: (e) => {
let r = parseInt(e.target.value, 10);
isNaN(r) && (r = 0), b(r);
},
onKeyDown: (e) => {
if (e.key === "Enter") {
const r = T({
max: a,
step: i,
toCompare: o,
value: y
});
b(r), x(r), v({ max: r, min: o });
}
},
size: "sm",
type: "number",
value: y.toString()
}
) : /* @__PURE__ */ l("div", { children: a }))
] }),
k ? /* @__PURE__ */ l(H, { className: g("hint"), children: k }) : null
] });
}
), pe = 20, q = (d, _) => Math.round(d / _) * _, F = (d, _, p, k) => (d = q(d, k), d < _ ? _ : d > p ? p : d), w = ne(te), _e = Y(
({
borderSelectorColor: d,
className: _,
disabled: p,
hint: k,
label: h,
max: a,
min: t,
onChange: v,
step: i = 1,
tooltip: M,
type: m,
value: f,
values: B,
...W
}, G) => {
const o = A(null), V = A(null), [s, x] = D(!1), [K, N] = D(F(f, t, a, i)), [y, b] = D(F(f, t, a, i)), z = (n) => {
n = q(n, i), b(n);
}, E = (n) => {
n.preventDefault();
let c = y;
n.key === "ArrowRight" && (c = F(c + i, t, a, i)), n.key === "ArrowLeft" && (c = F(c - i, t, a, i)), b(c), N(c), v(c);
}, $ = (n) => {
let c = parseInt(n.target.value, 10);
isNaN(c) && (c = 0), N(c);
}, C = () => {
const n = F(K, t, a, i);
N(n), b(n), v(n);
}, L = (n) => {
n.key === "Enter" && C();
}, S = Z(
(n) => Math.round((n - t) / (a - t) * 100),
[t, a]
);
U(() => {
if (o.current && (o.current.style.backgroundSize = `${S(y)}% 100%`), V.current) {
const n = S(y) / 100;
V.current.style.left = `calc(${n * 100}% + ${(0.5 - n) * pe}px)`;
}
}, [y, S]), U(() => {
!isNaN(f) && f !== y && f && (z(f), N(f));
}, [f]);
const j = ee();
return /* @__PURE__ */ R("div", { className: w("slider-root", _), ref: G, children: [
h ? /* @__PURE__ */ l(re, { as: "label", htmlFor: j, variant: "sm", children: h }) : null,
/* @__PURE__ */ R("div", { className: w("input-wrapper"), children: [
(m === "inline" || m === "left-field") && (m === "left-field" ? /* @__PURE__ */ l(
O,
{
disabled: p,
max: a,
min: t,
onBlur: C,
onChange: $,
onKeyDown: L,
size: "sm",
type: "number",
value: K.toString()
}
) : /* @__PURE__ */ l("div", { children: t })),
/* @__PURE__ */ R("div", { className: w("slider-wrapper"), children: [
/* @__PURE__ */ l(
"input",
{
className: w(
"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);
z(c), N(c);
},
onKeyDown: E,
onMouseDown: () => {
M && s === !1 && x(!0);
},
onMouseUp: () => {
v(y), M && x(!1);
},
ref: o,
step: i,
type: "range",
value: y,
...W
}
),
M ? /* @__PURE__ */ l("output", { className: w("output", s && "output-visible"), ref: V, children: /* @__PURE__ */ l("div", { className: w("tooltip"), children: y }) }) : null,
B ? /* @__PURE__ */ l("div", { className: w("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: w("thick"),
style: { left: `${S(n)}%` },
children: /* @__PURE__ */ l(H, { className: w("thick-label"), children: n })
},
`${n}-${c}`
)) }) : null
] }),
(m === "inline" || m === "right-field") && (m === "right-field" ? /* @__PURE__ */ l(
O,
{
className: w("input-text"),
disabled: p,
max: a,
min: t,
onBlur: C,
onChange: $,
onKeyDown: L,
size: "sm",
type: "number",
value: K.toString()
}
) : /* @__PURE__ */ l("div", { children: a }))
] }),
k ? /* @__PURE__ */ l(H, { className: w("hint"), children: k }) : null
] });
}
), ke = Object.assign(_e, { Range: fe });
export {
ke as Slider,
_e as SliderComponent,
F as ensureMinMax,
q as round,
pe as thumbWidth
};