@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
188 lines (187 loc) • 7.41 kB
JavaScript
"use client";
import { jsxs as f, jsx as e } from "react/jsx-runtime";
import { c as t } from "./chunks/index.DQOqod3i.js";
import { forwardRef as ha, useState as x, useRef as R, useEffect as xa } from "react";
import { u as $ } from "./chunks/useBreakpoint.1txsny17.js";
import { Asterisk as Ia } from "./asterisk.Dwtdwpkq.js";
import { D as G } from "./chunks/Button.CCol--xy.js";
import { D as ka } from "./chunks/Icon.DYtaQgbw.js";
import { D as ya } from "./chunks/Popover.CxZZ_y1Z.js";
import { D as Da } from "./chunks/SystemFeedback.DhWcYjnu.js";
import { v as ga, c as Sa, M as va, a as Na, s as Ba, i as H, b as Ca } from "./chunks/Input.utils.Wycy2SzG.js";
import { u as q } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import './assets/input.Dy8VS73e.css';const La = "ds-input_input_bhamp_1", Ra = "ds-input_input--small_bhamp_9", Ha = "ds-input_input--invalid_bhamp_127", wa = "ds-input_input--dark_bhamp_145", Aa = "ds-input_input--is-ready_bhamp_241", Pa = "ds-input_input--has-leading-icon_bhamp_293", Fa = "ds-input_input--has-action-button_bhamp_296", Wa = "ds-input_input--has-affix_bhamp_311", Ta = "ds-input_root_bhamp_338", Ea = "ds-input_hint_bhamp_338", Oa = "ds-input_label-wrapper_bhamp_338", ja = "ds-input_wrapper_bhamp_342", Xa = "ds-input_affix_bhamp_348", Ma = "ds-input_affix--small_bhamp_369", Va = "ds-input_prefix_bhamp_382", $a = "ds-input_suffix_bhamp_388", Ga = "ds-input_affix--disabled_bhamp_394", qa = "ds-input_affix--readonly_bhamp_410", za = "ds-input_affix--dark_bhamp_445", Ua = "ds-input_leading-icon_bhamp_507", Ja = "ds-input_leading-icon--small_bhamp_519", Ka = "ds-input_leading-icon--disabled_bhamp_522", Qa = "ds-input_leading-icon--dark_bhamp_530", Ya = "ds-input_action-button_bhamp_547", Za = "ds-input_label_bhamp_338", an = "ds-input_label--disabled_bhamp_566", nn = "ds-input_label--dark_bhamp_570", tn = "ds-input_label-wrapper--hidden_bhamp_586", en = "ds-input_hint--dark_bhamp_613", sn = "ds-input_feedback_bhamp_617", a = {
input: La,
inputSmall: Ra,
inputInvalid: Ha,
inputDark: wa,
inputIsReady: Aa,
inputHasLeadingIcon: Pa,
inputHasActionButton: Fa,
inputHasAffix: Wa,
root: Ta,
hint: Ea,
labelWrapper: Oa,
wrapper: ja,
affix: Xa,
affixSmall: Ma,
prefix: Va,
suffix: $a,
affixDisabled: Ga,
affixReadonly: qa,
affixDark: za,
leadingIcon: Ua,
leadingIconSmall: Ja,
leadingIconDisabled: Ka,
leadingIconDark: Qa,
actionButton: Ya,
label: Za,
labelDisabled: an,
labelDark: nn,
labelWrapperHidden: tn,
hintDark: en,
feedback: sn
}, ln = ha((z, m) => {
const {
id: d,
label: w,
aria: A,
actionButtonProps: P,
className: U,
disabled: i = !1,
hint: I,
hideLabel: F = !1,
invalid: b = !1,
leadingIconName: _,
leadingIconSource: h,
prefix: p,
popoverContent: k,
popoverInfoButtonProps: J,
readonly: r = !1,
required: W = !1,
size: s = "medium",
suffix: l,
systemFeedback: y,
theme: c = "light",
type: o = "text",
...T
} = z;
process.env.NODE_ENV !== "production" && (ga({
hideLabel: $(F),
id: d,
label: w,
prefix: p,
popoverContent: k,
suffix: l,
leadingIconName: _,
leadingIconSource: h,
actionButtonProps: P
}), Sa(o, T.autoComplete));
const {
iconName: D,
iconSource: g,
label: K,
onClick: Q,
...Y
} = P || {}, [Z, aa] = x(!1), [na, ta] = x(!1), [S, ia] = x(!1), [ea, sa] = x({}), v = R(null), la = (n) => {
v.current = n, typeof m == "function" ? m(n) : m && (m.current = n);
}, oa = p?.substring(0, va), N = R(null), da = l?.substring(0, Na), B = R(null), E = $(F);
q(() => {
const n = s === "medium" ? 16 : 8, C = {};
if (N.current) {
const L = N.current.offsetWidth;
C.paddingInlineStart = n + L + "px";
}
if (B.current) {
const L = B.current.offsetWidth;
C.paddingInlineEnd = n + L + "px";
}
sa(C), aa(!0);
}, [p, l, s, na]), q(() => {
(async () => "fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), ta(!0)))();
}, []), xa(() => {
const n = Ba(H(o), Ca(o));
ia(n);
}, [o]);
const u = c === "dark", O = t(a.affix, {
[a.affixDark]: u,
[a.affixSmall]: s === "small",
[a.affixDisabled]: i,
[a.affixReadonly]: r
}), j = `${d}-label`, X = `${d}-feedback`, M = `${d}-hint`, pa = () => {
const n = [j];
return I && n.push(M), A?.["aria-labelledby"] && n.push(A["aria-labelledby"]), n.join(" ");
}, ra = [b && y && X].filter(Boolean).join(" ") || void 0, ca = t(a.root, U), ua = t(a.input, {
[a.inputDark]: u,
// small input
[a.inputSmall]: s === "small",
// invalid state
[a.inputInvalid]: b,
// leading icon
[a.inputHasLeadingIcon]: _ || h,
// prefix/suffix
[a.inputHasAffix]: p || l,
// action button
[a.inputHasActionButton]: D || g || S,
[a.inputIsReady]: Z
}), fa = t(a.label, {
[a.labelDark]: u,
[a.labelDisabled]: i
}), ma = t(a.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[a.labelWrapperHidden]: E
}), ba = t(a.leadingIcon, {
[a.leadingIconDark]: u,
[a.leadingIconSmall]: s === "small",
[a.leadingIconDisabled]: i
}), V = t(a.actionButton, {
[a.actionButtonSmall]: s === "small"
}), _a = (n) => {
v.current && !i && !r && v.current.showPicker(), n.preventDefault();
};
return /* @__PURE__ */ f("div", { className: ca, children: [
/* @__PURE__ */ f("div", { className: ma, children: [
/* @__PURE__ */ f("label", { className: fa, id: j, htmlFor: d, children: [
w,
W && /* @__PURE__ */ e(Ia, {})
] }),
k && !E && /* @__PURE__ */ e(ya, { placement: "top", theme: c, defaultAnchorButtonProps: J, children: k })
] }),
I && /* @__PURE__ */ e("div", { className: t(a.hint, {
[a.hintDark]: u
}), id: M, children: I }),
/* @__PURE__ */ f("div", { className: a.wrapper, children: [
p && /* @__PURE__ */ e(
"span",
{
className: t(O, a.prefix),
ref: N,
"aria-disabled": i,
children: oa
}
),
!p && (_ || h) && /* @__PURE__ */ e(ka, { name: _, theme: c, source: h, className: ba, "aria-hidden": "true" }),
/* @__PURE__ */ e("input", { type: o, className: ua, id: d, ...T, ref: la, style: ea, "aria-labelledby": pa(), "aria-describedby": ra, "aria-invalid": b, "aria-disabled": r, readOnly: r, required: W, disabled: i }),
l && /* @__PURE__ */ e(
"span",
{
className: t(O, a.suffix),
ref: B,
"aria-disabled": i,
children: da
}
),
!l && !S && (D || g) && /* @__PURE__ */ e(G, { ...Y, hideLabel: !0, theme: c, iconName: D, iconSource: g, variant: "ghost", className: V, size: s, onClick: Q, type: "button", disabled: i || r, children: K }),
!l && S && !r && !i && /* @__PURE__ */ f(G, { hideLabel: !0, theme: c, iconName: H(o) ? "calendar" : "clock", variant: "ghost", className: V, size: s, onClick: _a, type: "button", children: [
"Open ",
H(o) ? "date" : "time",
" picker"
] })
] }),
b && y && /* @__PURE__ */ e(Da, { className: a.feedback, message: y, variant: "error", id: X, theme: c })
] });
});
ln.displayName = "DSInput";
export {
ln as DSInput
};