@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.3

package/input.064e0bbf.js

@@ -1,230 +0,0 @@
-import "./assets/Input.92913cfe.css";
-import { j as i } from "./chunks/jsx-runtime.5c071667.js";
-import { c as e } from "./chunks/index.8021d3e0.js";
-import { useState as m, useRef as v, useLayoutEffect as D, useEffect as nt } from "react";
-import { u as st } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { Asterisk as et } from "./asterisk.cb74ea72.js";
-import { DSButton as T } from "./button.87ad387c.js";
-import { DSIcon as lt } from "./icon.b4211784.js";
-import { DSSystemFeedback as ot } from "./systemfeedback.8515a4e0.js";
-import { v as ut, a as ct, M as dt, b as _t, s as rt, i as C, c as pt } from "./chunks/Input.utils.f8f3286f.js";
-const ft = "_input_11iuy_73", mt = "_input--invalid_11iuy_183", yt = "_input--small_11iuy_190", ht = "_input--has-leading-icon_11iuy_236", bt = "_input--has-action-button_11iuy_239", xt = "_input--has-second-action-button_11iuy_242", gt = "_input--has-affix_11iuy_254", St = "_input--is-ready_11iuy_266", It = "_root_11iuy_273", Ht = "_hint_11iuy_281", kt = "_label_11iuy_281", vt = "_wrapper_11iuy_285", Ct = "_affix_11iuy_291", Lt = "_affix--small_11iuy_309", jt = "_affix--disabled_11iuy_321", At = "_prefix_11iuy_325", Rt = "_suffix_11iuy_331", Nt = "_leading-icon_11iuy_336", Bt = "_leading-icon--small_11iuy_341", wt = "_action-button_11iuy_345", Dt = "_label--hidden_11iuy_362", Tt = "_feedback_11iuy_389", t = {
-  input: ft,
-  "input--invalid": "_input--invalid_11iuy_183",
-  inputInvalid: mt,
-  "input--small": "_input--small_11iuy_190",
-  inputSmall: yt,
-  "input--has-leading-icon": "_input--has-leading-icon_11iuy_236",
-  inputHasLeadingIcon: ht,
-  "input--has-action-button": "_input--has-action-button_11iuy_239",
-  inputHasActionButton: bt,
-  "input--has-second-action-button": "_input--has-second-action-button_11iuy_242",
-  inputHasSecondActionButton: xt,
-  "input--has-affix": "_input--has-affix_11iuy_254",
-  inputHasAffix: gt,
-  "input--is-ready": "_input--is-ready_11iuy_266",
-  inputIsReady: St,
-  root: It,
-  hint: Ht,
-  label: kt,
-  wrapper: vt,
-  affix: Ct,
-  "affix--small": "_affix--small_11iuy_309",
-  affixSmall: Lt,
-  "affix--disabled": "_affix--disabled_11iuy_321",
-  affixDisabled: jt,
-  prefix: At,
-  suffix: Rt,
-  "leading-icon": "_leading-icon_11iuy_336",
-  leadingIcon: Nt,
-  "leading-icon--small": "_leading-icon--small_11iuy_341",
-  leadingIconSmall: Bt,
-  "action-button": "_action-button_11iuy_345",
-  actionButton: wt,
-  "label--hidden": "_label--hidden_11iuy_362",
-  labelHidden: Dt,
-  feedback: Tt
-}, Ut = ({
-  id: c,
-  label: L,
-  actionButtonLabel: E,
-  actionButtonIconName: _,
-  actionButtonIconSource: y,
-  actionButtonOnClick: F,
-  className: P,
-  disabled: l = !1,
-  hint: h,
-  hideLabel: O = !1,
-  invalid: r = !1,
-  leadingIconName: p,
-  leadingIconSource: f,
-  prefix: n,
-  readonly: d = !1,
-  required: j = !1,
-  size: s = "medium",
-  suffix: a,
-  systemFeedback: b,
-  type: o = "text",
-  ...$
-}) => {
-  process.env.NODE_ENV !== "production" && (ut({
-    id: c,
-    label: L,
-    prefix: n,
-    suffix: a,
-    leadingIconName: p,
-    leadingIconSource: f,
-    actionButtonIconName: _,
-    actionButtonIconSource: y
-  }), ct(o));
-  const [W, X] = m(!1), [M, V] = m(!1), [x, G] = m(!1), [U, J] = m({}), g = v(null), K = n == null ? void 0 : n.substring(0, dt), S = v(null), Q = a == null ? void 0 : a.substring(0, _t), I = v(null), Y = st(O);
-  D(() => {
-    const u = s === "medium" ? 16 : 8, H = {};
-    if (S.current) {
-      const k = S.current.offsetWidth;
-      H.paddingLeft = u + k + "px";
-    }
-    if (I.current) {
-      const k = I.current.offsetWidth;
-      H.paddingRight = u + k + "px";
-    }
-    J(H), X(!0);
-  }, [n, a, s, M]), D(() => {
-    (async () => {
-      "fonts" in document && (await document.fonts.load(
-        '1em "STIHL Contraface Digital Text Regular"'
-      ), V(!0));
-    })();
-  }, []), nt(() => {
-    const u = rt(
-      C(o),
-      pt(o)
-    );
-    G(u);
-  }, [o]);
-  const A = e(t.affix, {
-    [t.affixSmall]: s === "small",
-    [t.affixDisabled]: l
-  }), R = `${c}-label`, N = `${c}-feedback`, B = `${c}-hint`, Z = h ? ` ${B}` : "", q = e(t.root, P), z = e(t.input, {
-    // small input
-    [t.inputSmall]: s === "small",
-    // invalid state
-    [t.inputInvalid]: r,
-    // leading icon
-    [t.inputHasLeadingIcon]: p || f,
-    // prefix/suffix
-    [t.inputHasAffix]: n || a,
-    // action button
-    [t.inputHasActionButton]: _ || y || x,
-    [t.inputIsReady]: W
-  }), tt = e(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: Y
-  }), it = e(t.leadingIcon, {
-    [t.leadingIconSmall]: s === "small"
-  }), w = e(t.actionButton, {
-    [t.actionButtonSmall]: s === "small"
-  }), at = (u) => {
-    g.current && !l && !d && g.current.showPicker(), u.preventDefault();
-  };
-  return /* @__PURE__ */ i.jsxs("div", { className: q, children: [
-    /* @__PURE__ */ i.jsxs("label", { className: tt, id: R, htmlFor: c, children: [
-      L,
-      j && /* @__PURE__ */ i.jsx(et, {})
-    ] }),
-    h && /* @__PURE__ */ i.jsx("div", { className: t.hint, id: B, children: h }),
-    r && b && /* @__PURE__ */ i.jsx(
-      ot,
-      {
-        className: t.feedback,
-        message: b,
-        type: "invalid",
-        id: N
-      }
-    ),
-    /* @__PURE__ */ i.jsxs("div", { className: t.wrapper, children: [
-      n && /* @__PURE__ */ i.jsx(
-        "span",
-        {
-          className: e(A, t.prefix),
-          ref: S,
-          "aria-disabled": l,
-          children: K
-        }
-      ),
-      !n && (p || f) && /* @__PURE__ */ i.jsx(
-        lt,
-        {
-          name: p,
-          theme: "light",
-          source: f,
-          className: it,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ i.jsx(
-        "input",
-        {
-          type: o,
-          className: z,
-          id: c,
-          ref: g,
-          ...$,
-          style: U,
-          "aria-labelledby": `${R}${Z}`,
-          "aria-describedby": r && b ? N : void 0,
-          "aria-invalid": r,
-          "aria-disabled": d,
-          readOnly: d,
-          required: j,
-          disabled: l
-        }
-      ),
-      a && /* @__PURE__ */ i.jsx(
-        "span",
-        {
-          className: e(A, t.suffix),
-          ref: I,
-          "aria-disabled": l,
-          children: Q
-        }
-      ),
-      !a && !x && (_ || y) && /* @__PURE__ */ i.jsx(
-        T,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: _,
-          variant: "ghost",
-          className: w,
-          size: s,
-          onClick: F,
-          type: "button",
-          disabled: l || d,
-          children: E
-        }
-      ),
-      !a && x && !d && !l && /* @__PURE__ */ i.jsxs(
-        T,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: C(o) ? "calendar" : "clock",
-          variant: "ghost",
-          className: w,
-          size: s,
-          onClick: at,
-          type: "button",
-          children: [
-            "Open ",
-            C(o) ? "date" : "time",
-            " picker"
-          ]
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Ut as DSInput
-};

package/inputpassword.f76c2f62.js

@@ -1,139 +0,0 @@
-import "./assets/InputPassword.d7b9c937.css";
-import { j as a } from "./chunks/jsx-runtime.5c071667.js";
-import { c as o } from "./chunks/index.8021d3e0.js";
-import { useState as D } from "react";
-import { u as C } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { Asterisk as L } from "./asterisk.cb74ea72.js";
-import { DSButton as $ } from "./button.87ad387c.js";
-import { DSSystemFeedback as E } from "./systemfeedback.8515a4e0.js";
-import { g as h } from "./chunks/helpers.ea3ca41a.js";
-const q = "_input_1encj_73", R = "_input--invalid_1encj_183", V = "_input--small_1encj_190", O = "_input--has-leading-icon_1encj_236", F = "_input--has-action-button_1encj_239", M = "_input--has-second-action-button_1encj_242", T = "_input--has-affix_1encj_254", G = "_input--is-ready_1encj_266", J = "_root_1encj_273", K = "_hint_1encj_281", Q = "_label_1encj_281", U = "_wrapper_1encj_285", W = "_action-button_1encj_291", X = "_label--hidden_1encj_308", Y = "_feedback_1encj_335", n = {
-  input: q,
-  "input--invalid": "_input--invalid_1encj_183",
-  inputInvalid: R,
-  "input--small": "_input--small_1encj_190",
-  inputSmall: V,
-  "input--has-leading-icon": "_input--has-leading-icon_1encj_236",
-  inputHasLeadingIcon: O,
-  "input--has-action-button": "_input--has-action-button_1encj_239",
-  inputHasActionButton: F,
-  "input--has-second-action-button": "_input--has-second-action-button_1encj_242",
-  inputHasSecondActionButton: M,
-  "input--has-affix": "_input--has-affix_1encj_254",
-  inputHasAffix: T,
-  "input--is-ready": "_input--is-ready_1encj_266",
-  inputIsReady: G,
-  root: J,
-  hint: K,
-  label: Q,
-  wrapper: U,
-  "action-button": "_action-button_1encj_291",
-  actionButton: W,
-  "label--hidden": "_label--hidden_1encj_308",
-  labelHidden: X,
-  feedback: Y
-}, Z = ({ id: t, label: e }) => {
-  if (!t)
-    throw new Error(
-      h(
-        "DSInputPassword",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
-      )
-    );
-  if (!e)
-    throw new Error(
-      h(
-        "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}.`
-      )
-    );
-}, pn = ({
-  id: t,
-  label: e,
-  autocomplete: f = "new-password",
-  className: j,
-  disabled: u = !1,
-  hidePasswordText: w = "Hide password",
-  hint: i,
-  hideLabel: y = !1,
-  invalid: s = !1,
-  readonly: r = !1,
-  required: d = !1,
-  showPasswordText: S = "Show password",
-  size: c = "medium",
-  systemFeedback: l,
-  ...x
-}) => {
-  process.env.NODE_ENV !== "production" && Z({
-    id: t,
-    label: e
-  });
-  const [p, I] = D(!1), _ = `${t}-label`, m = `${t}-feedback`, b = `${t}-hint`, B = i ? ` ${b}` : "", H = C(y), g = o(n.root, j), v = o(n.input, {
-    // small input
-    [n.inputSmall]: c === "small",
-    // invalid state
-    [n.inputInvalid]: s,
-    // action button - input password always has an action button
-    [n.inputHasActionButton]: !0
-  }), P = o(n.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [n.labelHidden]: H
-  }), N = o(n.actionButton, {
-    [n.actionButtonSmall]: c === "small"
-  }), k = () => {
-    I((A) => !A);
-  };
-  return /* @__PURE__ */ a.jsxs("div", { className: g, children: [
-    /* @__PURE__ */ a.jsxs("label", { className: P, id: _, htmlFor: t, children: [
-      e,
-      d && /* @__PURE__ */ a.jsx(L, {})
-    ] }),
-    i && /* @__PURE__ */ a.jsx("div", { className: n.hint, id: b, children: i }),
-    s && l && /* @__PURE__ */ a.jsx(
-      E,
-      {
-        className: n.feedback,
-        message: l,
-        type: "invalid",
-        id: m
-      }
-    ),
-    /* @__PURE__ */ a.jsxs("div", { className: n.wrapper, children: [
-      /* @__PURE__ */ a.jsx(
-        "input",
-        {
-          className: v,
-          id: t,
-          ...x,
-          "aria-labelledby": `${_}${B}`,
-          "aria-describedby": s && l ? m : void 0,
-          "aria-invalid": s,
-          "aria-disabled": r,
-          readOnly: r,
-          required: d,
-          disabled: u,
-          autoComplete: f,
-          type: p ? "text" : "password"
-        }
-      ),
-      /* @__PURE__ */ a.jsx(
-        $,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: p ? "eye-closed" : "eye",
-          variant: "ghost",
-          className: N,
-          size: c,
-          onClick: k,
-          type: "button",
-          disabled: u,
-          children: p ? w : S
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  pn as DSInputPassword
-};

package/inputstepper.2047ec77.js

@@ -1,286 +0,0 @@
-import "./assets/InputStepper.969db0d2.css";
-import { j as e } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
-import { useState as _, useRef as N, useEffect as D, useLayoutEffect as M } from "react";
-import { u as hn } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { Asterisk as mn } from "./asterisk.cb74ea72.js";
-import { DSButton as X } from "./button.87ad387c.js";
-import { M as w, b as L } from "./chunks/Input.utils.f8f3286f.js";
-import { DSSystemFeedback as bn } from "./systemfeedback.8515a4e0.js";
-import { g as S } from "./chunks/helpers.ea3ca41a.js";
-const kn = "_input_hnpik_73", xn = "_input--invalid_hnpik_184", Sn = "_input--small_hnpik_191", vn = "_input--has-leading-icon_hnpik_237", In = "_input--has-action-button_hnpik_240", yn = "_input--has-second-action-button_hnpik_243", gn = "_input--has-affix_hnpik_255", An = "_input--is-ready_hnpik_267", Bn = "_root_hnpik_274", Nn = "_hint_hnpik_282", Dn = "_label_hnpik_282", wn = "_wrapper_hnpik_286", Ln = "_affix_hnpik_292", Hn = "_affix--small_hnpik_310", jn = "_affix--disabled_hnpik_322", En = "_prefix_hnpik_326", Rn = "_suffix_hnpik_332", Cn = "_action-button_hnpik_337", $n = "_label--hidden_hnpik_354", Fn = "_feedback_hnpik_381", Vn = "_second-action-button_hnpik_395", Pn = "_value-announcer_hnpik_399", t = {
-  input: kn,
-  "input--invalid": "_input--invalid_hnpik_184",
-  inputInvalid: xn,
-  "input--small": "_input--small_hnpik_191",
-  inputSmall: Sn,
-  "input--has-leading-icon": "_input--has-leading-icon_hnpik_237",
-  inputHasLeadingIcon: vn,
-  "input--has-action-button": "_input--has-action-button_hnpik_240",
-  inputHasActionButton: In,
-  "input--has-second-action-button": "_input--has-second-action-button_hnpik_243",
-  inputHasSecondActionButton: yn,
-  "input--has-affix": "_input--has-affix_hnpik_255",
-  inputHasAffix: gn,
-  "input--is-ready": "_input--is-ready_hnpik_267",
-  inputIsReady: An,
-  root: Bn,
-  hint: Nn,
-  label: Dn,
-  wrapper: wn,
-  affix: Ln,
-  "affix--small": "_affix--small_hnpik_310",
-  affixSmall: Hn,
-  "affix--disabled": "_affix--disabled_hnpik_322",
-  affixDisabled: jn,
-  prefix: En,
-  suffix: Rn,
-  "action-button": "_action-button_hnpik_337",
-  actionButton: Cn,
-  "label--hidden": "_label--hidden_hnpik_354",
-  labelHidden: $n,
-  feedback: Fn,
-  "second-action-button": "_second-action-button_hnpik_395",
-  secondActionButton: Vn,
-  "value-announcer": "_value-announcer_hnpik_399",
-  valueAnnouncer: Pn
-}, Tn = ({
-  id: a,
-  label: f,
-  prefix: h,
-  suffix: m
-}) => {
-  if (!a)
-    throw new Error(
-      S(
-        "DSInputStepper",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
-      )
-    );
-  if (!f)
-    throw new Error(
-      S(
-        "DSInputStepper",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputStepper component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-  h && h.length > w && console.warn(
-    S(
-      "DSInputStepper",
-      `Prefix length must not exceed ${w} characters.`
-    )
-  ), m && m.length > L && console.warn(
-    S(
-      "DSInputStepper",
-      `Suffix length must not exceed ${L} characters.`
-    )
-  );
-}, Yn = ({
-  id: a,
-  label: f,
-  announcementText: h = "Value changed to",
-  className: m,
-  disabled: p = !1,
-  decreaseAmountButtonLabel: q = "Decrease",
-  hint: v,
-  hideLabel: G = !1,
-  invalid: b = !1,
-  increaseAmountButtonLabel: O = "Increase",
-  prefix: u,
-  max: H = 100,
-  min: j = 0,
-  readonly: k = !1,
-  required: E = !1,
-  size: s = "medium",
-  step: U = 1,
-  suffix: r,
-  systemFeedback: I,
-  value: x,
-  onChange: R,
-  ...J
-}) => {
-  process.env.NODE_ENV !== "production" && Tn({
-    id: a,
-    label: f,
-    prefix: u,
-    suffix: r
-  });
-  const [K, Q] = _(!1), [d, y] = _(x), [g, C] = _(""), [Y, Z] = _(!1), [z, nn] = _({}), i = N(null), tn = u == null ? void 0 : u.substring(0, w), A = N(null), en = r == null ? void 0 : r.substring(0, L), B = N(null), an = hn(G);
-  D(() => {
-    x && y(x);
-  }, [x]), D(() => {
-    if (g) {
-      const n = setTimeout(() => {
-        C("");
-      }, 3e3);
-      return () => clearTimeout(n);
-    }
-  }, [g]), D(() => {
-    var o;
-    const n = (l) => {
-      l.preventDefault();
-    };
-    return (o = i.current) == null || o.addEventListener("wheel", n, {
-      // The { passive: false } option is used to indicate that the event listener wants to cancel the event, allowing preventDefault to work as expected.
-      passive: !1
-    }), () => {
-      var l;
-      (l = i.current) == null || l.removeEventListener("wheel", n);
-    };
-  }, []), M(() => {
-    const n = s === "medium" ? 16 : 8, o = {};
-    if (A.current) {
-      const l = A.current.offsetWidth;
-      o.paddingLeft = n + l + "px";
-    }
-    if (B.current) {
-      const l = B.current.offsetWidth;
-      o.paddingRight = n + l + "px";
-    }
-    nn(o), Q(!0);
-  }, [u, r, s, Y]), M(() => {
-    (async () => {
-      "fonts" in document && (await document.fonts.load(
-        '1em "STIHL Contraface Digital Text Regular"'
-      ), Z(!0));
-    })();
-  }, []);
-  const $ = c(t.affix, {
-    [t.affixSmall]: s === "small"
-  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, sn = v ? ` ${P}` : "", on = c(t.root, m), ln = c(t.input, {
-    // small input
-    [t.inputSmall]: s === "small",
-    // invalid state
-    [t.inputInvalid]: b,
-    // prefix/suffix
-    [t.inputHasAffix]: u || r,
-    [t.inputIsReady]: K
-  }), cn = c(t.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: an
-  }), un = c(t.secondActionButton, {
-    [t.secondActionButtonSmall]: s === "small"
-  }), rn = c(t.actionButton, {
-    [t.actionButtonSmall]: s === "small"
-  }), pn = () => {
-    const n = [T];
-    return b && I && n.push(V), n.join(" ");
-  }, W = () => {
-    var n;
-    if (i.current) {
-      y(i.current.value);
-      const o = new Event("change", { bubbles: !0 });
-      (n = i.current) == null || n.dispatchEvent(o), C(`${h} ${i.current.value}`);
-    }
-  }, dn = () => {
-    var n;
-    (n = i.current) == null || n.stepDown(), W();
-  }, _n = () => {
-    var n;
-    (n = i.current) == null || n.stepUp(), W();
-  }, fn = (n) => {
-    y(n.target.value), R && R(n);
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: on, children: [
-    /* @__PURE__ */ e.jsxs("label", { className: cn, id: F, htmlFor: a, children: [
-      f,
-      E && /* @__PURE__ */ e.jsx(mn, {})
-    ] }),
-    v && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: P, children: v }),
-    /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        className: t.valueAnnouncer,
-        id: T,
-        children: g
-      }
-    ),
-    b && I && /* @__PURE__ */ e.jsx(
-      bn,
-      {
-        className: t.feedback,
-        message: I,
-        type: "invalid",
-        id: V
-      }
-    ),
-    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
-      u && /* @__PURE__ */ e.jsx(
-        "span",
-        {
-          className: c($, t.prefix),
-          ref: A,
-          "aria-disabled": p,
-          children: tn
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        "input",
-        {
-          className: ln,
-          id: a,
-          ref: i,
-          ...J,
-          style: z,
-          "aria-labelledby": `${F}${sn}`,
-          "aria-describedby": pn(),
-          "aria-invalid": b,
-          "aria-disabled": k,
-          disabled: p,
-          min: j,
-          max: H,
-          readOnly: k,
-          required: E,
-          step: U,
-          type: "number",
-          value: d,
-          onChange: fn
-        }
-      ),
-      r && /* @__PURE__ */ e.jsx(
-        "span",
-        {
-          className: c($, t.suffix),
-          ref: B,
-          "aria-disabled": p,
-          children: en
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        X,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: "minus",
-          variant: "filled",
-          className: un,
-          size: s,
-          onClick: dn,
-          disabled: p || k || !!d && Number(d) <= j,
-          type: "button",
-          children: q
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        X,
-        {
-          hideLabel: !0,
-          theme: "light",
-          iconName: "plus",
-          variant: "filled",
-          className: rn,
-          size: s,
-          onClick: _n,
-          disabled: p || k || !!d && Number(d) >= H,
-          type: "button",
-          children: O
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Yn as DSInputStepper
-};