@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
137 lines (136 loc) • 6.7 kB
JavaScript
"use client";
import { jsx as q, jsxs as rt } from "react/jsx-runtime";
import { d as ht } from "./index.CgTHIF3K.js";
import { c as J } from "./index.CEyLAtio.js";
import { forwardRef as vt, useState as yt, useRef as Pt } from "react";
import { u as St } from "./useBreakpoint.CMOR9ZOB.js";
import { Asterisk as Dt } from "../asterisk.CR60hx8S.js";
import { D as Bt } from "./Button.Cf1CKq8N.js";
import { D as It } from "./SystemFeedback.CyGbUCzT.js";
import { g as ct } from "./helpers.BbWkXTr3.js";
import '../assets/InputPassword.124xVOiO.css';const gt = "ds-input-password_input_15c4p_1", kt = "ds-input-password_input--small_15c4p_9", Nt = "ds-input-password_input--invalid_15c4p_121", xt = "ds-input-password_input--has-action-button_15c4p_182", Ct = "ds-input-password_root_15c4p_218", Ht = "ds-input-password_hint_15c4p_227", Lt = "ds-input-password_label_15c4p_227", $t = "ds-input-password_wrapper_15c4p_231", qt = "ds-input-password_action-button_15c4p_237", At = "ds-input-password_label--hidden_15c4p_255", Tt = "ds-input-password_label--disabled_15c4p_268", Et = "ds-input-password_feedback_15c4p_288", s = {
input: gt,
inputSmall: kt,
inputInvalid: Nt,
inputHasActionButton: xt,
root: Ct,
hint: Ht,
label: Lt,
wrapper: $t,
actionButton: qt,
labelHidden: At,
labelDisabled: Tt,
feedback: Et
}, Vt = ({
id: d,
label: l
}) => {
if (!d)
throw new Error(ct("DSInputPassword", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputPassword component.'));
if (!l)
throw new Error(ct("DSInputPassword", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`));
}, Ft = vt((d, l) => {
const t = ht.c(82);
let c, n, e, r, p, a, B, I, g, k, N, x, C, u;
t[0] !== d ? ({
id: e,
label: r,
autoComplete: B,
className: c,
disabled: I,
hint: n,
hideLabel: g,
invalid: k,
readonly: N,
required: x,
togglePasswordVisibilityButtonProps: u,
size: C,
systemFeedback: a,
...p
} = d, t[0] = d, t[1] = c, t[2] = n, t[3] = e, t[4] = r, t[5] = p, t[6] = a, t[7] = B, t[8] = I, t[9] = g, t[10] = k, t[11] = N, t[12] = x, t[13] = C, t[14] = u) : (c = t[1], n = t[2], e = t[3], r = t[4], p = t[5], a = t[6], B = t[7], I = t[8], g = t[9], k = t[10], N = t[11], x = t[12], C = t[13], u = t[14]);
const K = B === void 0 ? "new-password" : B, i = I === void 0 ? !1 : I, pt = g === void 0 ? !1 : g, o = k === void 0 ? !1 : k, A = N === void 0 ? !1 : N, b = x === void 0 ? !1 : x, H = C === void 0 ? "medium" : C;
process.env.NODE_ENV !== "production" && Vt({
id: e,
label: r
});
let f;
t[15] !== u ? (f = u || {}, t[15] = u, t[16] = f) : f = t[16];
let m, L, $;
t[17] !== f ? ({
hidePasswordText: $,
showPasswordText: L,
...m
} = f, t[17] = f, t[18] = m, t[19] = L, t[20] = $) : (m = t[18], L = t[19], $ = t[20]);
const ut = $ === void 0 ? "Hide password" : $, bt = L === void 0 ? "Show password" : L, [Q, ft] = yt(!1), T = `${e}-label`, w = `${e}-feedback`, E = `${e}-hint`, mt = n ? ` ${E}` : "";
let V;
t[21] !== o || t[22] !== a || t[23] !== w ? (V = [o && a && w].filter(Boolean).join(" ") || void 0, t[21] = o, t[22] = a, t[23] = w, t[24] = V) : V = t[24];
const U = V, W = St(pt);
let F;
t[25] !== c ? (F = J(s.root, c), t[25] = c, t[26] = F) : F = t[26];
const X = F, Y = H === "small";
let R;
t[27] !== o || t[28] !== Y ? (R = J(s.input, {
[s.inputSmall]: Y,
[s.inputInvalid]: o,
[s.inputHasActionButton]: !0
}), t[27] = o, t[28] = Y, t[29] = R) : R = t[29];
const Z = R;
let j;
t[30] !== i || t[31] !== W ? (j = J(s.label, {
[s.labelHidden]: W,
[s.labelDisabled]: i
}), t[30] = i, t[31] = W, t[32] = j) : j = t[32];
const tt = j, et = H === "small";
let z;
t[33] !== et ? (z = J(s.actionButton, {
[s.actionButtonSmall]: et
}), t[33] = et, t[34] = z) : z = t[34];
const st = z, wt = Pt(null);
let O;
t[35] !== l ? (O = (dt) => {
wt.current = dt, typeof l == "function" ? l(dt) : l && (l.current = dt);
}, t[35] = l, t[36] = O) : O = t[36];
const ot = O;
let M;
t[37] === Symbol.for("react.memo_cache_sentinel") ? (M = () => {
ft(Rt);
}, t[37] = M) : M = t[37];
const _t = M;
let _;
t[38] !== b ? (_ = b && /* @__PURE__ */ q(Dt, {}), t[38] = b, t[39] = _) : _ = t[39];
let h;
t[40] !== e || t[41] !== T || t[42] !== r || t[43] !== tt || t[44] !== _ ? (h = /* @__PURE__ */ rt("label", { className: tt, id: T, htmlFor: e, children: [
r,
_
] }), t[40] = e, t[41] = T, t[42] = r, t[43] = tt, t[44] = _, t[45] = h) : h = t[45];
let v;
t[46] !== n || t[47] !== E ? (v = n && /* @__PURE__ */ q("div", { className: s.hint, id: E, children: n }), t[46] = n, t[47] = E, t[48] = v) : v = t[48];
let y;
t[49] !== o || t[50] !== a || t[51] !== w ? (y = o && a && /* @__PURE__ */ q(It, { className: s.feedback, message: a, variant: "error", id: w }), t[49] = o, t[50] = a, t[51] = w, t[52] = y) : y = t[52];
const at = `${T}${mt}`, it = Q ? "text" : "password";
let P;
t[53] !== U || t[54] !== K || t[55] !== i || t[56] !== ot || t[57] !== e || t[58] !== Z || t[59] !== o || t[60] !== A || t[61] !== b || t[62] !== p || t[63] !== at || t[64] !== it ? (P = /* @__PURE__ */ q("input", { className: Z, id: e, ...p, ref: ot, "aria-labelledby": at, "aria-describedby": U, "aria-invalid": o, "aria-disabled": A, readOnly: A, required: b, disabled: i, autoComplete: K, type: it }), t[53] = U, t[54] = K, t[55] = i, t[56] = ot, t[57] = e, t[58] = Z, t[59] = o, t[60] = A, t[61] = b, t[62] = p, t[63] = at, t[64] = it, t[65] = P) : P = t[65];
const lt = Q ? "eye-closed" : "eye", nt = Q ? ut : bt;
let S;
t[66] !== st || t[67] !== i || t[68] !== m || t[69] !== H || t[70] !== lt || t[71] !== nt ? (S = /* @__PURE__ */ q(Bt, { ...m, hideLabel: !0, theme: "light", iconName: lt, variant: "ghost", className: st, size: H, onClick: _t, type: "button", disabled: i, children: nt }), t[66] = st, t[67] = i, t[68] = m, t[69] = H, t[70] = lt, t[71] = nt, t[72] = S) : S = t[72];
let D;
t[73] !== P || t[74] !== S ? (D = /* @__PURE__ */ rt("div", { className: s.wrapper, children: [
P,
S
] }), t[73] = P, t[74] = S, t[75] = D) : D = t[75];
let G;
return t[76] !== X || t[77] !== h || t[78] !== v || t[79] !== y || t[80] !== D ? (G = /* @__PURE__ */ rt("div", { className: X, children: [
h,
v,
y,
D
] }), t[76] = X, t[77] = h, t[78] = v, t[79] = y, t[80] = D, t[81] = G) : G = t[81], G;
});
Ft.displayName = "DSInputPassword";
function Rt(d) {
return !d;
}
export {
Ft as D,
Vt as v
};