@stihl-design-system/components/input.hBWqQr3X.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as u, jsx as s } from "react/jsx-runtime";
import { c as i } from "./chunks/index.DL9mof6u.js";
import { forwardRef as ft, useState as b, useRef as C, useEffect as _t } from "react";
import { u as X } from "./chunks/useBreakpoint.1txsny17.js";
import { u as j } from "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
import "./chunks/index.D-sRdssb.js";
import { Asterisk as mt } from "./asterisk.B2ih8VwF.js";
import { D as M } from "./chunks/Button.Cn5yg7dG.js";
import { D as bt } from "./chunks/Icon.CDLyB7Pv.js";
import { D as gt } from "./chunks/Popover.D7McfVaH.js";
import { D as ht } from "./chunks/SystemFeedback.CjlARKki.js";
import { v as vt, b as It, M as xt, a as St, s as Dt, i as H, c as yt } from "./chunks/Input.utils.CL1u4Ctq.js";
import './assets/input.RPDR8qdT.css';const Bt = "ds-input_input_1v89g_1", Nt = "ds-input_input--small_1v89g_9", kt = "ds-input_input--invalid_1v89g_121", Ct = "ds-input_input--has-leading-icon_1v89g_179", Ht = "ds-input_input--has-action-button_1v89g_182", Rt = "ds-input_input--has-affix_1v89g_197", Lt = "ds-input_input--is-ready_1v89g_211", wt = "ds-input_root_1v89g_218", At = "ds-input_hint_1v89g_218", Wt = "ds-input_label-wrapper_1v89g_218", Pt = "ds-input_wrapper_1v89g_222", Tt = "ds-input_affix_1v89g_228", Et = "ds-input_affix--small_1v89g_249", Ft = "ds-input_prefix_1v89g_262", Ot = "ds-input_suffix_1v89g_268", $t = "ds-input_affix--disabled_1v89g_274", Xt = "ds-input_affix--readonly_1v89g_285", jt = "ds-input_leading-icon_1v89g_321", Mt = "ds-input_leading-icon--small_1v89g_333", Vt = "ds-input_leading-icon--disabled_1v89g_336", Gt = "ds-input_action-button_1v89g_345", Ut = "ds-input_label_1v89g_218", Jt = "ds-input_label--disabled_1v89g_364", Kt = "ds-input_label-wrapper--hidden_1v89g_376", Qt = "ds-input_feedback_1v89g_404", t = {
  input: Bt,
  inputSmall: Nt,
  inputInvalid: kt,
  inputHasLeadingIcon: Ct,
  inputHasActionButton: Ht,
  inputHasAffix: Rt,
  inputIsReady: Lt,
  root: wt,
  hint: At,
  labelWrapper: Wt,
  wrapper: Pt,
  affix: Tt,
  affixSmall: Et,
  prefix: Ft,
  suffix: Ot,
  affixDisabled: $t,
  affixReadonly: Xt,
  leadingIcon: jt,
  leadingIconSmall: Mt,
  leadingIconDisabled: Vt,
  actionButton: Gt,
  label: Ut,
  labelDisabled: Jt,
  labelWrapperHidden: Kt,
  feedback: Qt
}, Yt = ft(({
  id: c,
  label: R,
  actionButtonProps: L,
  className: V,
  disabled: n = !1,
  hint: g,
  hideLabel: w = !1,
  invalid: p = !1,
  leadingIconName: f,
  leadingIconSource: _,
  prefix: r,
  popoverContent: h,
  popoverInfoButtonProps: G,
  readonly: d = !1,
  required: A = !1,
  size: e = "medium",
  suffix: l,
  systemFeedback: v,
  type: o = "text",
  ...W
}, m) => {
  process.env.NODE_ENV !== "production" && (vt({
    hideLabel: X(w),
    id: c,
    label: R,
    prefix: r,
    popoverContent: h,
    suffix: l,
    leadingIconName: f,
    leadingIconSource: _,
    actionButtonProps: L
  }), It(o, W.autoComplete));
  const {
    iconName: I,
    iconSource: x,
    label: U,
    onClick: J,
    ...K
  } = L || {}, [Q, Y] = b(!1), [Z, q] = b(!1), [S, z] = b(!1), [tt, at] = b({}), D = C(null), nt = (a) => {
    D.current = a, typeof m == "function" ? m(a) : m && (m.current = a);
  }, st = r?.substring(0, xt), y = C(null), it = l?.substring(0, St), B = C(null), P = X(w);
  j(() => {
    const a = e === "medium" ? 16 : 8, N = {};
    if (y.current) {
      const k = y.current.offsetWidth;
      N.paddingInlineStart = a + k + "px";
    }
    if (B.current) {
      const k = B.current.offsetWidth;
      N.paddingInlineEnd = a + k + "px";
    }
    at(N), Y(!0);
  }, [r, l, e, Z]), j(() => {
    (async () => {
      "fonts" in document && (await document.fonts.load('1em "STIHL Contraface Digital Text Regular"'), q(!0));
    })();
  }, []), _t(() => {
    const a = Dt(H(o), yt(o));
    z(a);
  }, [o]);
  const T = i(t.affix, {
    [t.affixSmall]: e === "small",
    [t.affixDisabled]: n,
    [t.affixReadonly]: d
  }), E = `${c}-label`, F = `${c}-feedback`, O = `${c}-hint`, et = g ? ` ${O}` : "", lt = [p && v && F].filter(Boolean).join(" ") || void 0, ot = i(t.root, V), ct = i(t.input, {
    // small input
    [t.inputSmall]: e === "small",
    // invalid state
    [t.inputInvalid]: p,
    // leading icon
    [t.inputHasLeadingIcon]: f || _,
    // prefix/suffix
    [t.inputHasAffix]: r || l,
    // action button
    [t.inputHasActionButton]: I || x || S,
    [t.inputIsReady]: Q
  }), rt = i(t.label, {
    [t.labelDisabled]: n
  }), dt = i(t.labelWrapper, {
    // hide label only visually to keep them available for assistive technologies
    [t.labelWrapperHidden]: P
  }), ut = i(t.leadingIcon, {
    [t.leadingIconSmall]: e === "small",
    [t.leadingIconDisabled]: n
  }), $ = i(t.actionButton, {
    [t.actionButtonSmall]: e === "small"
  }), pt = (a) => {
    D.current && !n && !d && D.current.showPicker(), a.preventDefault();
  };
  return /* @__PURE__ */ u("div", { className: ot, children: [
    /* @__PURE__ */ u("div", { className: dt, children: [
      /* @__PURE__ */ u("label", { className: rt, id: E, htmlFor: c, children: [
        R,
        A && /* @__PURE__ */ s(mt, {})
      ] }),
      h && !P && /* @__PURE__ */ s(gt, { placement: "top", defaultAnchorButtonProps: G, children: h })
    ] }),
    g && /* @__PURE__ */ s("div", { className: t.hint, id: O, children: g }),
    /* @__PURE__ */ u("div", { className: t.wrapper, children: [
      r && /* @__PURE__ */ s(
        "span",
        {
          className: i(T, t.prefix),
          ref: y,
          "aria-disabled": n,
          children: st
        }
      ),
      !r && (f || _) && /* @__PURE__ */ s(bt, { name: f, theme: "light", source: _, className: ut, "aria-hidden": "true" }),
      /* @__PURE__ */ s(
        "input",
        {
          type: o,
          className: ct,
          id: c,
          ...W,
          ref: nt,
          style: tt,
          "aria-labelledby": `${E}${et}`,
          "aria-describedby": lt,
          "aria-invalid": p,
          "aria-disabled": d,
          readOnly: d,
          required: A,
          disabled: n
        }
      ),
      l && /* @__PURE__ */ s(
        "span",
        {
          className: i(T, t.suffix),
          ref: B,
          "aria-disabled": n,
          children: it
        }
      ),
      !l && !S && (I || x) && /* @__PURE__ */ s(M, { ...K, hideLabel: !0, theme: "light", iconName: I, iconSource: x, variant: "ghost", className: $, size: e, onClick: J, type: "button", disabled: n || d, children: U }),
      !l && S && !d && !n && /* @__PURE__ */ u(M, { hideLabel: !0, theme: "light", iconName: H(o) ? "calendar" : "clock", variant: "ghost", className: $, size: e, onClick: pt, type: "button", children: [
        "Open ",
        H(o) ? "date" : "time",
        " picker"
      ] })
    ] }),
    p && v && /* @__PURE__ */ s(ht, { className: t.feedback, message: v, variant: "error", id: F })
  ] });
});
Yt.displayName = "DSInput";
export {
  Yt as DSInput
};