@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
331 lines (330 loc) • 14.9 kB
JavaScript
"use client";
import { jsx as m, jsxs as pe } from "react/jsx-runtime";
import { d as vt } from "./index.cKLI89Eg.js";
import { c as h } from "./index.DQOqod3i.js";
import { forwardRef as xt, useState as nt, useRef as gt } from "react";
import { DSInput as Nt } from "../input.Dh0ws-9j.js";
import { D as yt } from "./Popover.CxZZ_y1Z.js";
import { g as ct } from "./helpers.CexwVao7.js";
import { u as St } from "./useBreakpoint.1txsny17.js";
import '../assets/Slider.B4kzL60S.css';const It = "ds-slider_root_1iths_1", Lt = "ds-slider_hint_1iths_4", Mt = "ds-slider_label-wrapper_1iths_4", Wt = "ds-slider_label-hint-input-wrapper_1iths_7", wt = "ds-slider_number-input_1iths_10", Vt = "ds-slider_label-wrapper--hidden_1iths_20", Ct = "ds-slider_label_1iths_4", $t = "ds-slider_label--dark_1iths_54", Pt = "ds-slider_label--disabled_1iths_58", At = "ds-slider_hint--dark_1iths_78", Et = "ds-slider_number-input--small_1iths_90", Rt = "ds-slider_min-max-label-wrapper_1iths_95", Bt = "ds-slider_min-max-label-wrapper--dark_1iths_108", Ft = "ds-slider_min-max-label-wrapper--disabled_1iths_112", Ht = "ds-slider_min-label_1iths_117", qt = "ds-slider_max-label_1iths_121", Ot = "ds-slider_slider-wrapper_1iths_125", zt = "ds-slider_slider_1iths_125", Kt = "ds-slider_value-tooltip_1iths_144", jt = "ds-slider_proxy-thumb_1iths_148", Ut = "ds-slider_slider--dark_1iths_153", Gt = "ds-slider_proxy-thumb--disabled_1iths_242", Xt = "ds-slider_proxy-thumb--dark_1iths_270", Jt = "ds-slider_custom-track_1iths_299", Qt = "ds-slider_custom-track--progress_1iths_304", Yt = "ds-slider_custom-track--runnable_1iths_316", Zt = "ds-slider_custom-track--disabled_1iths_330", es = "ds-slider_custom-track--dark_1iths_349", ts = "ds-slider_tick-wrapper_1iths_374", ss = "ds-slider_tick_1iths_374", ls = "ds-slider_value-tooltip--visible_1iths_433", as = "ds-slider_value-tooltip--disabled_1iths_436", is = "ds-slider_value-tooltip--dark_1iths_448", t = {
root: It,
hint: Lt,
labelWrapper: Mt,
labelHintInputWrapper: Wt,
numberInput: wt,
labelWrapperHidden: Vt,
label: Ct,
labelDark: $t,
labelDisabled: Pt,
hintDark: At,
numberInputSmall: Et,
minMaxLabelWrapper: Rt,
minMaxLabelWrapperDark: Bt,
minMaxLabelWrapperDisabled: Ft,
minLabel: Ht,
maxLabel: qt,
sliderWrapper: Ot,
slider: zt,
valueTooltip: Kt,
proxyThumb: jt,
sliderDark: Ut,
proxyThumbDisabled: Gt,
proxyThumbDark: Xt,
customTrack: Jt,
customTrackProgress: Qt,
customTrackRunnable: Yt,
customTrackDisabled: Zt,
customTrackDark: es,
tickWrapper: ts,
tick: ss,
valueTooltipVisible: ls,
valueTooltipDisabled: as,
valueTooltipDark: is
}, rs = 11, dt = 4, pt = (_) => _.toString().length, os = (_, n, e) => {
if (n === 0)
return !0;
const D = 1e-10, c = (_ - e) / n;
return Math.abs(Math.round(c) - c) < D;
}, ns = (_, n, e, D) => {
const c = parseFloat(n), f = e, p = Math.round((_ - f) / c);
let o = f + p * c;
o = Math.min(Math.max(o, e), D);
const b = c.toString().split(".")[1]?.length || 0;
return parseFloat(o.toFixed(b));
}, cs = (_, n, e) => {
const D = (_ - n) / (e - n) * 100, c = `calc(-0.24 * ${D}px + 10px)`;
return `calc(${D}% + ${c})`;
}, ds = ({
id: _,
label: n
}) => {
if (!_)
throw new Error(ct("DSSlider", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSlider component.'));
if (!n)
throw new Error(ct("DSSlider", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSlider component. If you don't want to display a label, set hideLabel={true}.`));
}, ps = xt((_, n) => {
const e = vt.c(180), D = _;
let c, f, p, o, b, L, u, x, M, W, te, se, le, ae, ie, re, oe, ne, g;
e[0] !== D ? ({
id: o,
label: b,
className: c,
defaultValue: f,
disabled: te,
hideLabel: se,
hideNumberInput: le,
hint: p,
isTooltipAlwaysVisible: ae,
max: ie,
min: re,
numberInputProps: L,
popoverContent: x,
popoverInfoButtonProps: M,
step: oe,
theme: ne,
value: g,
onChange: u,
...W
} = D, e[0] = D, e[1] = c, e[2] = f, e[3] = p, e[4] = o, e[5] = b, e[6] = L, e[7] = u, e[8] = x, e[9] = M, e[10] = W, e[11] = te, e[12] = se, e[13] = le, e[14] = ae, e[15] = ie, e[16] = re, e[17] = oe, e[18] = ne, e[19] = g) : (c = e[1], f = e[2], p = e[3], o = e[4], b = e[5], L = e[6], u = e[7], x = e[8], M = e[9], W = e[10], te = e[11], se = e[12], le = e[13], ae = e[14], ie = e[15], re = e[16], oe = e[17], ne = e[18], g = e[19]);
const a = te === void 0 ? !1 : te, ut = se === void 0 ? !1 : se, w = le === void 0 ? !1 : le, Ee = ae === void 0 ? !1 : ae, mt = ie === void 0 ? 100 : ie, bt = re === void 0 ? 0 : re, ce = oe === void 0 ? 1 : oe, N = ne === void 0 ? "light" : ne;
process.env.NODE_ENV !== "production" && ds({
id: o,
label: b
});
const i = Number(mt), s = Number(bt), d = Number(ce), r = N === "dark", V = St(ut), ue = `${o}-label`, Re = `${o}-number-input`, y = `${o}-hint`, ht = p ? ` ${y}` : "";
let me;
e[20] !== f || e[21] !== s || e[22] !== g ? (me = g || f || s.toString() || "0", e[20] = f, e[21] = s, e[22] = g, e[23] = me) : me = e[23];
const [C, be] = nt(me), [v, he] = nt(g || f || s || 0), _t = gt(null);
let _e;
e[24] !== n ? (_e = (l) => {
_t.current = l, typeof n == "function" ? n(l) : n && (n.current = l);
}, e[24] = n, e[25] = _e) : _e = e[25];
const Be = _e;
let fe;
e[26] !== L ? (fe = L || {}, e[26] = L, e[27] = fe) : fe = e[27];
const {
size: ot,
suffix: Fe
} = fe, ke = ot === void 0 ? "medium" : ot;
let Te;
e[28] !== u ? (Te = (l) => {
const k = parseFloat(l.target.value);
he(k), be(l.target.value), u && u(l);
}, e[28] = u, e[29] = Te) : Te = e[29];
const He = Te;
let De;
e[30] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (De = (l) => {
const k = l.target.value;
if (be(k), /^-?\d+(\.\d+)?$/.test(k)) {
const T = parseFloat(k);
Number.isNaN(T) || he(T);
}
}, e[30] = De) : De = e[30];
const ft = De;
let S;
if (e[31] !== C || e[32] !== u || e[33] !== i || e[34] !== s || e[35] !== ce) {
S = (k) => {
const de = parseFloat(C);
if (Number.isNaN(de)) {
l(k);
return;
}
let T = Math.min(Math.max(de, s), i);
os(T, parseFloat(ce), s) || (T = ns(T, ce, s, i)), be(T.toString()), he(T), u && u(k);
};
const l = (k) => {
be(s.toString()), he(s), u && u(k);
};
e[31] = C, e[32] = u, e[33] = i, e[34] = s, e[35] = ce, e[36] = S;
} else
S = e[36];
const $ = (d === 0 ? !1 : (i - s) / d <= rs) && (i - s) / d || 0;
let ve;
if (e[37] !== i || e[38] !== s || e[39] !== d || e[40] !== $) {
let l;
e[42] !== i || e[43] !== s || e[44] !== d ? (l = (k, de) => {
const T = s + de * d, Dt = cs(T, s, i);
return /* @__PURE__ */ m("span", { className: t.tick, style: {
left: Dt
} }, T);
}, e[42] = i, e[43] = s, e[44] = d, e[45] = l) : l = e[45], ve = Array.from({
length: $ + 1
}, l), e[37] = i, e[38] = s, e[39] = d, e[40] = $, e[41] = ve;
} else
ve = e[41];
const qe = ve;
let xe;
e[46] !== i || e[47] !== s || e[48] !== v ? (xe = () => {
if (s === i)
throw new Error("Min and max values cannot be the same.");
const l = (v - s) / (i - s) * 100;
return Math.max(0, Math.min(l, 100));
}, e[46] = i, e[47] = s, e[48] = v, e[49] = xe) : xe = e[49];
const I = xe;
let ge;
e[50] !== I ? (ge = () => {
const l = I();
return l < 50 ? `calc(${l}% + 4px)` : `calc(${l}% - 4px)`;
}, e[50] = I, e[51] = ge) : ge = e[51];
const kt = ge;
let Ne;
e[52] !== I ? (Ne = () => {
const l = 100 - I();
return l < 50 ? `calc(${l}% + 4px)` : `calc(${l}% - 4px)`;
}, e[52] = I, e[53] = Ne) : Ne = e[53];
const Tt = Ne;
let ye;
e[54] !== c || e[55] !== r ? (ye = h(t.slider, c, {
[t.sliderDark]: r
}), e[54] = c, e[55] = r, e[56] = ye) : ye = e[56];
const Oe = ye;
let Se;
e[57] !== a || e[58] !== r ? (Se = h(t.label, {
[t.labelDark]: r,
[t.labelDisabled]: a
}), e[57] = a, e[58] = r, e[59] = Se) : Se = e[59];
const ze = Se;
let Ie;
e[60] !== V ? (Ie = h(t.labelWrapper, {
[t.labelWrapperHidden]: V
}), e[60] = V, e[61] = Ie) : Ie = e[61];
const Ke = Ie, je = ke === "small";
let Le;
e[62] !== je ? (Le = h(t.numberInput, {
[t.numberInputSmall]: je
}), e[62] = je, e[63] = Le) : Le = e[63];
const Ue = Le;
let Me;
e[64] !== a || e[65] !== r ? (Me = h(t.minMaxLabelWrapper, {
[t.minMaxLabelWrapperDark]: r,
[t.minMaxLabelWrapperDisabled]: a
}), e[64] = a, e[65] = r, e[66] = Me) : Me = e[66];
const Ge = Me;
let We;
e[67] !== a || e[68] !== r ? (We = h(t.customTrack, t.customTrackProgress, {
[t.customTrackDark]: r,
[t.customTrackDisabled]: a
}), e[67] = a, e[68] = r, e[69] = We) : We = e[69];
const Xe = We;
let we;
e[70] !== a || e[71] !== r ? (we = h(t.customTrack, t.customTrackRunnable, {
[t.customTrackDark]: r,
[t.customTrackDisabled]: a
}), e[70] = a, e[71] = r, e[72] = we) : we = e[72];
const Je = we;
let Ve;
e[73] !== a || e[74] !== r ? (Ve = h(t.proxyThumb, {
[t.proxyThumbDark]: r,
[t.proxyThumbDisabled]: a
}), e[73] = a, e[74] = r, e[75] = Ve) : Ve = e[75];
const Qe = Ve;
let Ce;
e[76] !== a || e[77] !== r || e[78] !== Ee ? (Ce = h(t.valueTooltip, {
[t.valueTooltipDark]: r,
[t.valueTooltipVisible]: Ee,
[t.valueTooltipDisabled]: a
}), e[76] = a, e[77] = r, e[78] = Ee, e[79] = Ce) : Ce = e[79];
const Ye = Ce;
let $e;
e[80] !== r ? ($e = h(t.hint, {
[t.hintDark]: r
}), e[80] = r, e[81] = $e) : $e = e[81];
const Ze = $e;
let P;
e[82] !== o || e[83] !== b || e[84] !== ze || e[85] !== ue ? (P = /* @__PURE__ */ m("label", { className: ze, htmlFor: o, id: ue, children: b }), e[82] = o, e[83] = b, e[84] = ze, e[85] = ue, e[86] = P) : P = e[86];
let A;
e[87] !== V || e[88] !== x || e[89] !== M || e[90] !== N ? (A = x && !V && /* @__PURE__ */ m(yt, { placement: "top", theme: N, defaultAnchorButtonProps: M, children: x }), e[87] = V, e[88] = x, e[89] = M, e[90] = N, e[91] = A) : A = e[91];
let E;
e[92] !== Ke || e[93] !== P || e[94] !== A ? (E = /* @__PURE__ */ pe("div", { className: Ke, children: [
P,
A
] }), e[92] = Ke, e[93] = P, e[94] = A, e[95] = E) : E = e[95];
let R;
e[96] !== p || e[97] !== Ze || e[98] !== y ? (R = p && /* @__PURE__ */ m("div", { className: Ze, id: y, children: p }), e[96] = p, e[97] = Ze, e[98] = y, e[99] = R) : R = e[99];
let B;
e[100] !== a || e[101] !== S || e[102] !== w || e[103] !== p || e[104] !== y || e[105] !== Re || e[106] !== C || e[107] !== b || e[108] !== Ue || e[109] !== ke || e[110] !== Fe || e[111] !== i || e[112] !== s || e[113] !== d || e[114] !== N ? (B = !w && /* @__PURE__ */ m(Nt, { id: Re, aria: {
"aria-labelledby": p ? y : void 0
}, className: Ue, type: "number", min: s, max: i, step: d, inputMode: "decimal", autoComplete: "off", disabled: a, hideLabel: !0, value: C, onChange: ft, onBlur: S, onKeyDown: (l) => {
l.key === "Enter" && (l.preventDefault(), S(l));
}, label: b, size: ke, suffix: Fe, theme: N }), e[100] = a, e[101] = S, e[102] = w, e[103] = p, e[104] = y, e[105] = Re, e[106] = C, e[107] = b, e[108] = Ue, e[109] = ke, e[110] = Fe, e[111] = i, e[112] = s, e[113] = d, e[114] = N, e[115] = B) : B = e[115];
let F;
e[116] !== E || e[117] !== R || e[118] !== B ? (F = /* @__PURE__ */ pe("div", { className: t.labelHintInputWrapper, children: [
E,
R,
B
] }), e[116] = E, e[117] = R, e[118] = B, e[119] = F) : F = e[119];
const et = pt(s) < dt;
let H;
e[120] !== et ? (H = h({
[t.minLabel]: et
}), e[120] = et, e[121] = H) : H = e[121];
let q;
e[122] !== s || e[123] !== H ? (q = /* @__PURE__ */ m("div", { className: H, children: s }), e[122] = s, e[123] = H, e[124] = q) : q = e[124];
const tt = pt(i) < dt;
let O;
e[125] !== tt ? (O = h({
[t.maxLabel]: tt
}), e[125] = tt, e[126] = O) : O = e[126];
let z;
e[127] !== i || e[128] !== O ? (z = /* @__PURE__ */ m("div", { className: O, children: i }), e[127] = i, e[128] = O, e[129] = z) : z = e[129];
let K;
e[130] !== Ge || e[131] !== q || e[132] !== z ? (K = /* @__PURE__ */ pe("div", { className: Ge, children: [
q,
z
] }), e[130] = Ge, e[131] = q, e[132] = z, e[133] = K) : K = e[133];
const st = `${I()}`;
let Pe;
e[134] !== st ? (Pe = {
"--ds-input-slider-thumb-position": st
}, e[134] = st, e[135] = Pe) : Pe = e[135];
const lt = Pe, at = kt();
let j;
e[136] !== at ? (j = {
width: at
}, e[136] = at, e[137] = j) : j = e[137];
let U;
e[138] !== Xe || e[139] !== j ? (U = /* @__PURE__ */ m("div", { className: Xe, style: j }), e[138] = Xe, e[139] = j, e[140] = U) : U = e[140];
const it = Tt();
let G;
e[141] !== it ? (G = {
width: it
}, e[141] = it, e[142] = G) : G = e[142];
let X;
e[143] !== Je || e[144] !== G ? (X = /* @__PURE__ */ m("div", { className: Je, style: G }), e[143] = Je, e[144] = G, e[145] = X) : X = e[145];
const rt = `${ue}${ht}`;
let J;
e[146] !== a || e[147] !== Be || e[148] !== He || e[149] !== o || e[150] !== i || e[151] !== s || e[152] !== d || e[153] !== W || e[154] !== Oe || e[155] !== v || e[156] !== rt ? (J = /* @__PURE__ */ m("input", { ...W, id: o, type: "range", ref: Be, className: Oe, min: s, max: i, step: d, value: v, disabled: a, "aria-labelledby": rt, onChange: He }), e[146] = a, e[147] = Be, e[148] = He, e[149] = o, e[150] = i, e[151] = s, e[152] = d, e[153] = W, e[154] = Oe, e[155] = v, e[156] = rt, e[157] = J) : J = e[157];
let Q;
e[158] !== $ || e[159] !== qe ? (Q = $ > 0 && /* @__PURE__ */ m("div", { className: t.tickWrapper, children: qe }), e[158] = $, e[159] = qe, e[160] = Q) : Q = e[160];
let Y;
e[161] !== Qe ? (Y = /* @__PURE__ */ m("div", { className: Qe }), e[161] = Qe, e[162] = Y) : Y = e[162];
let Z;
e[163] !== a || e[164] !== w || e[165] !== v || e[166] !== Ye ? (Z = w && /* @__PURE__ */ m("div", { className: Ye, "aria-disabled": a, children: v }), e[163] = a, e[164] = w, e[165] = v, e[166] = Ye, e[167] = Z) : Z = e[167];
let ee;
e[168] !== lt || e[169] !== U || e[170] !== X || e[171] !== J || e[172] !== Q || e[173] !== Y || e[174] !== Z ? (ee = /* @__PURE__ */ pe("div", { className: t.sliderWrapper, style: lt, children: [
U,
X,
J,
Q,
Y,
Z
] }), e[168] = lt, e[169] = U, e[170] = X, e[171] = J, e[172] = Q, e[173] = Y, e[174] = Z, e[175] = ee) : ee = e[175];
let Ae;
return e[176] !== F || e[177] !== K || e[178] !== ee ? (Ae = /* @__PURE__ */ pe("div", { className: t.root, children: [
F,
K,
ee
] }), e[176] = F, e[177] = K, e[178] = ee, e[179] = Ae) : Ae = e[179], Ae;
});
ps.displayName = "DSSlider";
export {
ps as D,
dt as L,
rs as M,
cs as a,
pt as g,
os as i,
ns as s,
ds as v
};