@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
204 lines (203 loc) • 12 kB
JavaScript
"use client";
import { jsx as H, jsxs as vt } from "react/jsx-runtime";
import { d as ne } from "./chunks/index.CgTHIF3K.js";
import { c as R } from "./chunks/index.CEyLAtio.js";
import { forwardRef as ie, useState as Dt, useRef as Vt, useEffect as ae } from "react";
import { u as se } from "./chunks/useBreakpoint.CMOR9ZOB.js";
import { u as zt } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { Asterisk as le } from "./asterisk.CR60hx8S.js";
import { D as Gt } from "./chunks/Button.Cf1CKq8N.js";
import { D as oe } from "./chunks/Icon.NSsVrYeq.js";
import { D as ce } from "./chunks/SystemFeedback.CyGbUCzT.js";
import { v as de, b as fe, M as re, a as ue, s as pe, i as qt, c as me } from "./chunks/Input.utils.Cnnzvuk4.js";
import './assets/input.CUjGh-UM.css';const _e = "ds-input_input_1nmca_1", be = "ds-input_input--small_1nmca_9", he = "ds-input_input--invalid_1nmca_121", Ie = "ds-input_input--has-leading-icon_1nmca_179", xe = "ds-input_input--has-action-button_1nmca_182", ye = "ds-input_input--has-affix_1nmca_197", ge = "ds-input_input--is-ready_1nmca_211", Se = "ds-input_root_1nmca_218", ve = "ds-input_hint_1nmca_227", De = "ds-input_label_1nmca_227", Ne = "ds-input_wrapper_1nmca_231", ke = "ds-input_affix_1nmca_237", Be = "ds-input_affix--small_1nmca_258", Ce = "ds-input_prefix_1nmca_271", Le = "ds-input_suffix_1nmca_277", He = "ds-input_affix--disabled_1nmca_283", Re = "ds-input_affix--readonly_1nmca_294", Ae = "ds-input_leading-icon_1nmca_330", we = "ds-input_leading-icon--small_1nmca_342", Fe = "ds-input_leading-icon--disabled_1nmca_345", Pe = "ds-input_action-button_1nmca_354", Ee = "ds-input_label--hidden_1nmca_372", Te = "ds-input_label--disabled_1nmca_385", $e = "ds-input_feedback_1nmca_405", e = {
input: _e,
inputSmall: be,
inputInvalid: he,
inputHasLeadingIcon: Ie,
inputHasActionButton: xe,
inputHasAffix: ye,
inputIsReady: ge,
root: Se,
hint: ve,
label: De,
wrapper: Ne,
affix: ke,
affixSmall: Be,
prefix: Ce,
suffix: Le,
affixDisabled: He,
affixReadonly: Re,
leadingIcon: Ae,
leadingIconSmall: we,
leadingIconDisabled: Fe,
actionButton: Pe,
labelHidden: Ee,
labelDisabled: Te,
feedback: $e
}, Oe = ie((Nt, w) => {
const t = ne.c(175);
let A, S, m, o, I, u, p, a, x, i, f, G, U, J, K, Q, Y, Z;
t[0] !== Nt ? ({
id: o,
label: I,
actionButtonProps: A,
className: S,
disabled: G,
hint: m,
hideLabel: U,
invalid: J,
leadingIconName: u,
leadingIconSource: p,
prefix: a,
readonly: K,
required: Q,
size: Y,
suffix: i,
systemFeedback: f,
type: Z,
...x
} = Nt, t[0] = Nt, t[1] = A, t[2] = S, t[3] = m, t[4] = o, t[5] = I, t[6] = u, t[7] = p, t[8] = a, t[9] = x, t[10] = i, t[11] = f, t[12] = G, t[13] = U, t[14] = J, t[15] = K, t[16] = Q, t[17] = Y, t[18] = Z) : (A = t[1], S = t[2], m = t[3], o = t[4], I = t[5], u = t[6], p = t[7], a = t[8], x = t[9], i = t[10], f = t[11], G = t[12], U = t[13], J = t[14], K = t[15], Q = t[16], Y = t[17], Z = t[18]);
const n = G === void 0 ? !1 : G, Ut = U === void 0 ? !1 : U, d = J === void 0 ? !1 : J, l = K === void 0 ? !1 : K, v = Q === void 0 ? !1 : Q, s = Y === void 0 ? "medium" : Y, c = Z === void 0 ? "text" : Z;
process.env.NODE_ENV !== "production" && (de({
id: o,
label: I,
prefix: a,
suffix: i,
leadingIconName: u,
leadingIconSource: p,
actionButtonProps: A
}), fe(c, x.autoComplete));
let F;
t[19] !== A ? (F = A || {}, t[19] = A, t[20] = F) : F = t[20];
let P, _, b, E, T;
t[21] !== F ? ({
iconName: _,
iconSource: b,
label: P,
onClick: E,
...T
} = F, t[21] = F, t[22] = P, t[23] = _, t[24] = b, t[25] = E, t[26] = T) : (P = t[22], _ = t[23], b = t[24], E = t[25], T = t[26]);
const [tt, Jt] = Dt(!1), [kt, Kt] = Dt(!1), [y, Qt] = Dt(!1);
let at;
t[27] === Symbol.for("react.memo_cache_sentinel") ? (at = {}, t[27] = at) : at = t[27];
const [et, Yt] = Dt(at), Bt = Vt(null);
let st;
t[28] !== w ? (st = (r) => {
Bt.current = r, typeof w == "function" ? w(r) : w && (w.current = r);
}, t[28] = w, t[29] = st) : st = t[29];
const nt = st;
let lt;
t[30] !== a ? (lt = a == null ? void 0 : a.substring(0, re), t[30] = a, t[31] = lt) : lt = t[31];
const Ct = lt, Lt = Vt(null);
let ot;
t[32] !== i ? (ot = i == null ? void 0 : i.substring(0, ue), t[32] = i, t[33] = ot) : ot = t[33];
const Ht = ot, Rt = Vt(null), it = se(Ut);
let ct;
t[34] !== s ? (ct = () => {
const r = s === "medium" ? 16 : 8, L = {};
if (Lt.current) {
const h = Lt.current.offsetWidth;
L.paddingInlineStart = r + h + "px";
}
if (Rt.current) {
const h = Rt.current.offsetWidth;
L.paddingInlineEnd = r + h + "px";
}
Yt(L), Jt(!0);
}, t[34] = s, t[35] = ct) : ct = t[35];
let dt;
t[36] !== kt || t[37] !== a || t[38] !== s || t[39] !== i ? (dt = [a, i, s, kt], t[36] = kt, t[37] = a, t[38] = s, t[39] = i, t[40] = dt) : dt = t[40], zt(ct, dt);
let ft, rt;
t[41] === Symbol.for("react.memo_cache_sentinel") ? (ft = () => {
(async () => {
"fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), Kt(!0));
})();
}, rt = [], t[41] = ft, t[42] = rt) : (ft = t[41], rt = t[42]), zt(ft, rt);
let ut, pt;
t[43] !== c ? (ut = () => {
const r = pe(qt(c), me(c));
Qt(r);
}, pt = [c], t[43] = c, t[44] = ut, t[45] = pt) : (ut = t[44], pt = t[45]), ae(ut, pt);
const At = s === "small";
let g, $, O, W, D, N, X, j, k, B, C;
if (t[46] !== S || t[47] !== n || t[48] !== Ct || t[49] !== Ht || t[50] !== nt || t[51] !== it || t[52] !== m || t[53] !== _ || t[54] !== b || t[55] !== o || t[56] !== et || t[57] !== d || t[58] !== tt || t[59] !== y || t[60] !== I || t[61] !== u || t[62] !== p || t[63] !== a || t[64] !== l || t[65] !== v || t[66] !== x || t[67] !== s || t[68] !== i || t[69] !== f || t[70] !== At || t[71] !== c) {
const r = R(e.affix, {
[e.affixSmall]: At,
[e.affixDisabled]: n,
[e.affixReadonly]: l
}), L = `${o}-label`, h = `${o}-feedback`, _t = `${o}-hint`, Zt = m ? ` ${_t}` : "";
let bt;
t[83] !== d || t[84] !== f || t[85] !== h ? (bt = [d && f && h].filter(Boolean).join(" ") || void 0, t[83] = d, t[84] = f, t[85] = h, t[86] = bt) : bt = t[86];
const wt = bt;
let ht;
t[87] !== S ? (ht = R(e.root, S), t[87] = S, t[88] = ht) : ht = t[88];
const te = ht, Ft = s === "small", Pt = u || p, Et = a || i, Tt = _ || b || y;
let It;
t[89] !== d || t[90] !== tt || t[91] !== Ft || t[92] !== Pt || t[93] !== Et || t[94] !== Tt ? (It = R(e.input, {
[e.inputSmall]: Ft,
[e.inputInvalid]: d,
[e.inputHasLeadingIcon]: Pt,
[e.inputHasAffix]: Et,
[e.inputHasActionButton]: Tt,
[e.inputIsReady]: tt
}), t[89] = d, t[90] = tt, t[91] = Ft, t[92] = Pt, t[93] = Et, t[94] = Tt, t[95] = It) : It = t[95];
const $t = It;
let xt;
t[96] !== n || t[97] !== it ? (xt = R(e.label, {
[e.labelHidden]: it,
[e.labelDisabled]: n
}), t[96] = n, t[97] = it, t[98] = xt) : xt = t[98];
const Ot = xt, Wt = s === "small";
let yt;
t[99] !== n || t[100] !== Wt ? (yt = R(e.leadingIcon, {
[e.leadingIconSmall]: Wt,
[e.leadingIconDisabled]: n
}), t[99] = n, t[100] = Wt, t[101] = yt) : yt = t[101];
const Xt = yt, jt = s === "small";
let gt;
t[102] !== jt ? (gt = R(e.actionButton, {
[e.actionButtonSmall]: jt
}), t[102] = jt, t[103] = gt) : gt = t[103], g = gt;
let St;
t[104] !== n || t[105] !== l ? (St = (ee) => {
Bt.current && !n && !l && Bt.current.showPicker(), ee.preventDefault();
}, t[104] = n, t[105] = l, t[106] = St) : St = t[106], $ = St, j = te;
let z;
t[107] !== v ? (z = v && /* @__PURE__ */ H(le, {}), t[107] = v, t[108] = z) : z = t[108], t[109] !== o || t[110] !== L || t[111] !== I || t[112] !== Ot || t[113] !== z ? (k = /* @__PURE__ */ vt("label", { className: Ot, id: L, htmlFor: o, children: [
I,
z
] }), t[109] = o, t[110] = L, t[111] = I, t[112] = Ot, t[113] = z, t[114] = k) : k = t[114], t[115] !== m || t[116] !== _t ? (B = m && /* @__PURE__ */ H("div", { className: e.hint, id: _t, children: m }), t[115] = m, t[116] = _t, t[117] = B) : B = t[117], t[118] !== d || t[119] !== f || t[120] !== h ? (C = d && f && /* @__PURE__ */ H(ce, { className: e.feedback, message: f, variant: "error", id: h }), t[118] = d, t[119] = f, t[120] = h, t[121] = C) : C = t[121], O = e.wrapper, W = a && /* @__PURE__ */ H("span", { className: R(r, e.prefix), ref: Lt, "aria-disabled": n, children: Ct }), t[122] !== Xt || t[123] !== u || t[124] !== p || t[125] !== a ? (D = !a && (u || p) && /* @__PURE__ */ H(oe, { name: u, theme: "light", source: p, className: Xt, "aria-hidden": "true" }), t[122] = Xt, t[123] = u, t[124] = p, t[125] = a, t[126] = D) : D = t[126];
const Mt = `${L}${Zt}`;
t[127] !== wt || t[128] !== n || t[129] !== nt || t[130] !== o || t[131] !== $t || t[132] !== et || t[133] !== d || t[134] !== l || t[135] !== v || t[136] !== x || t[137] !== Mt || t[138] !== c ? (N = /* @__PURE__ */ H("input", { type: c, className: $t, id: o, ...x, ref: nt, style: et, "aria-labelledby": Mt, "aria-describedby": wt, "aria-invalid": d, "aria-disabled": l, readOnly: l, required: v, disabled: n }), t[127] = wt, t[128] = n, t[129] = nt, t[130] = o, t[131] = $t, t[132] = et, t[133] = d, t[134] = l, t[135] = v, t[136] = x, t[137] = Mt, t[138] = c, t[139] = N) : N = t[139], X = i && /* @__PURE__ */ H("span", { className: R(r, e.suffix), ref: Rt, "aria-disabled": n, children: Ht }), t[46] = S, t[47] = n, t[48] = Ct, t[49] = Ht, t[50] = nt, t[51] = it, t[52] = m, t[53] = _, t[54] = b, t[55] = o, t[56] = et, t[57] = d, t[58] = tt, t[59] = y, t[60] = I, t[61] = u, t[62] = p, t[63] = a, t[64] = l, t[65] = v, t[66] = x, t[67] = s, t[68] = i, t[69] = f, t[70] = At, t[71] = c, t[72] = g, t[73] = $, t[74] = O, t[75] = W, t[76] = D, t[77] = N, t[78] = X, t[79] = j, t[80] = k, t[81] = B, t[82] = C;
} else
g = t[72], $ = t[73], O = t[74], W = t[75], D = t[76], N = t[77], X = t[78], j = t[79], k = t[80], B = t[81], C = t[82];
let M;
t[140] !== g || t[141] !== P || t[142] !== n || t[143] !== _ || t[144] !== b || t[145] !== y || t[146] !== E || t[147] !== l || t[148] !== T || t[149] !== s || t[150] !== i ? (M = !i && !y && (_ || b) && /* @__PURE__ */ H(Gt, { ...T, hideLabel: !0, theme: "light", iconName: _, iconSource: b, variant: "ghost", className: g, size: s, onClick: E, type: "button", disabled: n || l, children: P }), t[140] = g, t[141] = P, t[142] = n, t[143] = _, t[144] = b, t[145] = y, t[146] = E, t[147] = l, t[148] = T, t[149] = s, t[150] = i, t[151] = M) : M = t[151];
let V;
t[152] !== g || t[153] !== n || t[154] !== $ || t[155] !== y || t[156] !== l || t[157] !== s || t[158] !== i || t[159] !== c ? (V = !i && y && !l && !n && /* @__PURE__ */ vt(Gt, { hideLabel: !0, theme: "light", iconName: qt(c) ? "calendar" : "clock", variant: "ghost", className: g, size: s, onClick: $, type: "button", children: [
"Open ",
qt(c) ? "date" : "time",
" picker"
] }), t[152] = g, t[153] = n, t[154] = $, t[155] = y, t[156] = l, t[157] = s, t[158] = i, t[159] = c, t[160] = V) : V = t[160];
let q;
t[161] !== O || t[162] !== W || t[163] !== D || t[164] !== N || t[165] !== X || t[166] !== M || t[167] !== V ? (q = /* @__PURE__ */ vt("div", { className: O, children: [
W,
D,
N,
X,
M,
V
] }), t[161] = O, t[162] = W, t[163] = D, t[164] = N, t[165] = X, t[166] = M, t[167] = V, t[168] = q) : q = t[168];
let mt;
return t[169] !== j || t[170] !== k || t[171] !== B || t[172] !== C || t[173] !== q ? (mt = /* @__PURE__ */ vt("div", { className: j, children: [
k,
B,
C,
q
] }), t[169] = j, t[170] = k, t[171] = B, t[172] = C, t[173] = q, t[174] = mt) : mt = t[174], mt;
});
Oe.displayName = "DSInput";
export {
Oe as DSInput
};