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

package/inputsearch.6e913fc6.js

@@ -0,0 +1,188 @@
+import "./assets/InputSearch.888f630a.css";
+import { j as e } from "./chunks/jsx-runtime.5c071667.js";
+import { c } from "./chunks/index.8021d3e0.js";
+import { useState as J, useRef as w, useEffect as A } from "react";
+import { g as y, a as K } from "./chunks/helpers.ea3ca41a.js";
+import { u as Q } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { Asterisk as U } from "./asterisk.cb74ea72.js";
+import { DSButton as D } from "./button.87ad387c.js";
+import { DSSystemFeedback as X } from "./systemfeedback.8515a4e0.js";
+const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small_1ym7n_190", tt = "_input--has-leading-icon_1ym7n_236", nt = "_input--has-action-button_1ym7n_239", et = "_input--has-second-action-button_1ym7n_242", at = "_input--has-affix_1ym7n_254", ot = "_input--is-ready_1ym7n_266", st = "_root_1ym7n_273", it = "_hint_1ym7n_281", ct = "_label_1ym7n_281", ut = "_wrapper_1ym7n_285", lt = "_action-button_1ym7n_291", rt = "_second-action-button_1ym7n_295", pt = "_label--hidden_1ym7n_312", mt = "_feedback_1ym7n_339", t = {
+  input: Y,
+  "input--invalid": "_input--invalid_1ym7n_183",
+  inputInvalid: Z,
+  "input--small": "_input--small_1ym7n_190",
+  inputSmall: z,
+  "input--has-leading-icon": "_input--has-leading-icon_1ym7n_236",
+  inputHasLeadingIcon: tt,
+  "input--has-action-button": "_input--has-action-button_1ym7n_239",
+  inputHasActionButton: nt,
+  "input--has-second-action-button": "_input--has-second-action-button_1ym7n_242",
+  inputHasSecondActionButton: et,
+  "input--has-affix": "_input--has-affix_1ym7n_254",
+  inputHasAffix: at,
+  "input--is-ready": "_input--is-ready_1ym7n_266",
+  inputIsReady: ot,
+  root: st,
+  hint: it,
+  label: ct,
+  wrapper: ut,
+  "action-button": "_action-button_1ym7n_291",
+  actionButton: lt,
+  "second-action-button": "_second-action-button_1ym7n_295",
+  secondActionButton: rt,
+  "label--hidden": "_label--hidden_1ym7n_312",
+  labelHidden: pt,
+  feedback: mt
+}, _t = ({ id: n, label: u }) => {
+  if (!n)
+    throw new Error(
+      y(
+        "DSInputSearch",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
+      )
+    );
+  if (!u)
+    throw new Error(
+      y(
+        "DSInputSearch",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputSearch component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+}, dt = (n) => !!K(n, "form"), xt = ({
+  id: n,
+  label: u,
+  className: H,
+  clearButtonLabel: E = "Clear search field",
+  disabled: l = !1,
+  hint: d,
+  hideLabel: j = !1,
+  invalid: r = !1,
+  readonly: o = !1,
+  required: S = !1,
+  size: s = "medium",
+  submitButtonLabel: C = "Search",
+  systemFeedback: h,
+  value: b,
+  submitButtonOnClick: k,
+  onChange: I,
+  ...L
+}) => {
+  process.env.NODE_ENV !== "production" && _t({
+    id: n,
+    label: u
+  });
+  const [p, g] = J(b), f = w(null), m = w(null), V = Q(j);
+  A(() => {
+    g(b);
+  }, [b]), A(() => {
+    f.current && !dt(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
+      y(
+        "DSInputSearch",
+        `The DSInputSearch component with the id "${n}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`
+      )
+    );
+  }, []);
+  const v = `${n}-label`, B = `${n}-feedback`, x = `${n}-hint`, O = d ? ` ${x}` : "", N = p !== "" && p !== void 0 && p !== null, P = c(t.root, H), $ = c(t.input, {
+    // small input
+    [t.inputSmall]: s === "small",
+    // invalid state
+    [t.inputInvalid]: r,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0,
+    // action second action button
+    [t.inputHasSecondActionButton]: N && !o && !l
+  }), R = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: V
+  }), q = c(t.actionButton, {
+    [t.actionButtonSmall]: s === "small"
+  }), T = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: s === "small"
+  }), F = (a, i) => {
+    const G = Object.getPrototypeOf(a), _ = Object.getOwnPropertyDescriptor(
+      G,
+      "value"
+    );
+    _ != null && _.set ? _.set.call(a, i) : a.value = i;
+  }, M = () => {
+    var i;
+    if (!m.current)
+      return;
+    F(m.current, "");
+    const a = new Event("change", { bubbles: !0 });
+    (i = m.current) == null || i.dispatchEvent(a);
+  }, W = (a) => {
+    g(a.target.value), I && I(a);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: P, ref: f, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: R, id: v, htmlFor: n, children: [
+      u,
+      S && /* @__PURE__ */ e.jsx(U, {})
+    ] }),
+    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: x, children: d }),
+    r && h && /* @__PURE__ */ e.jsx(
+      X,
+      {
+        className: t.feedback,
+        message: h,
+        type: "invalid",
+        id: B
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: $,
+          id: n,
+          ref: m,
+          ...L,
+          "aria-labelledby": `${v}${O}`,
+          "aria-describedby": r && h ? B : void 0,
+          "aria-invalid": r,
+          "aria-disabled": o,
+          readOnly: o,
+          required: S,
+          disabled: l,
+          type: "search",
+          value: p,
+          onChange: W
+        }
+      ),
+      N && !o && !l && /* @__PURE__ */ e.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "cross",
+          className: T,
+          variant: "ghost",
+          size: s,
+          onClick: M,
+          type: "button",
+          tabIndex: -1,
+          children: E
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "magnifying-glass",
+          className: q,
+          variant: "ghost",
+          size: s,
+          onClick: k,
+          type: "submit",
+          disabled: l || o,
+          children: C
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  xt as DSInputSearch
+};

package/inputstepper.2047ec77.js

@@ -0,0 +1,286 @@
+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
+};

package/{link.cd3720d1.js → link.5eb13d6e.js}

@@ -3,7 +3,7 @@ import { j as d } from "./chunks/jsx-runtime.5c071667.js";
 import { c as u } from "./chunks/index.8021d3e0.js";
 import { u as i } from "./chunks/useBreakpoint.6c1b06c2.js";
 import { DSIcon as S } from "./icon.b4211784.js";
-import { s as o } from "./chunks/Link.module.b8230547.js";
+import { s as o } from "./chunks/Link.module.15dedc23.js";
 const F = ({
   children: n,
   aria: c,

package/linkstandalone.edfd6288.js

@@ -0,0 +1,80 @@
+import "./assets/LinkStandalone.19bdab0d.css";
+import { j as r } from "./chunks/jsx-runtime.5c071667.js";
+import { c as x } from "./chunks/index.8021d3e0.js";
+import { DSIcon as H } from "./icon.b4211784.js";
+import "react";
+import "./chunks/Link.module.15dedc23.js";
+const j = "_root_1iiai_25", v = "_root--highlight_1iiai_96", L = "_root--neutral-dark_1iiai_167", N = "_root--highlight-dark_1iiai_238", I = "_root--active_1iiai_309", A = "_root--icon-left_1iiai_315", o = {
+  root: j,
+  "root--highlight": "_root--highlight_1iiai_96",
+  rootHighlight: v,
+  "root--neutral-dark": "_root--neutral-dark_1iiai_167",
+  rootNeutralDark: L,
+  "root--highlight-dark": "_root--highlight-dark_1iiai_238",
+  rootHighlightDark: N,
+  "root--active": "_root--active_1iiai_309",
+  rootActive: I,
+  "root--icon-left": "_root--icon-left_1iiai_315",
+  rootIconLeft: A
+}, R = ({
+  children: e,
+  aria: _,
+  active: g,
+  className: n,
+  dataTrackingid: c,
+  download: k,
+  href: a,
+  iconName: l,
+  iconPosition: d = "left",
+  iconSource: h,
+  referrerPolicy: m,
+  rel: u,
+  target: f = "_self",
+  theme: t = "light",
+  variant: i = "neutral",
+  ...p
+}) => {
+  const D = x(o.root, n, {
+    // variant
+    [o.rootHighlight]: i === "highlight",
+    // theme
+    [o.rootNeutralDark]: t === "dark" && i === "neutral",
+    [o.rootHighlightDark]: t === "dark" && i === "highlight",
+    // active
+    [o.rootActive]: g,
+    // icon position
+    [o.rootIconLeft]: d === "left"
+  }), s = a === void 0 ? "span" : "a";
+  return /* @__PURE__ */ r.jsxs(
+    s,
+    {
+      className: D,
+      "data-trackingid": c,
+      ...s === "a" && {
+        href: a,
+        target: f,
+        rel: u,
+        referrerPolicy: m,
+        download: k
+      },
+      ..._,
+      ...p,
+      children: [
+        /* @__PURE__ */ r.jsx("span", { className: o.label, children: e }),
+        (l || h) && /* @__PURE__ */ r.jsx(
+          H,
+          {
+            name: l,
+            theme: t,
+            source: h,
+            size: "medium",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as DSLinkStandalone
+};

package/optioncheckbox.2369560b.js

@@ -0,0 +1,43 @@
+import "./assets/OptionCheckbox.c56568a3.css";
+import { j as e } from "./chunks/jsx-runtime.5c071667.js";
+import { c as s } from "./chunks/index.8021d3e0.js";
+import { DSIcon as _ } from "./icon.b4211784.js";
+const i = "_root_zs58d_49", l = "_root--disabled_zs58d_68", k = "_checkbox_zs58d_72", n = "_icon-check_zs58d_86", r = "_checkbox--checked_zs58d_105", x = "_checkbox--disabled_zs58d_108", m = "_label_zs58d_125", c = {
+  root: i,
+  "root--disabled": "_root--disabled_zs58d_68",
+  rootDisabled: l,
+  checkbox: k,
+  "icon-check": "_icon-check_zs58d_86",
+  iconCheck: n,
+  "checkbox--checked": "_checkbox--checked_zs58d_105",
+  checkboxChecked: r,
+  "checkbox--disabled": "_checkbox--disabled_zs58d_108",
+  checkboxDisabled: x,
+  label: m
+}, D = ({
+  label: d,
+  checked: h,
+  className: a,
+  disabled: o
+}) => {
+  const t = s(c.root, {
+    [c.rootDisabled]: o
+  }), b = s(c.checkbox, {
+    [c.checkboxDisabled]: o,
+    [c.checkboxChecked]: h
+  });
+  return /* @__PURE__ */ e.jsx("div", { className: a, children: /* @__PURE__ */ e.jsxs("div", { className: t, children: [
+    /* @__PURE__ */ e.jsx("span", { className: b, children: /* @__PURE__ */ e.jsx(
+      _,
+      {
+        name: "check",
+        className: c.iconCheck,
+        "aria-hidden": "true"
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx("span", { className: c.label, children: d })
+  ] }) });
+};
+export {
+  D as OptionCheckbox
+};

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.0",
+  "version": "1.0.0-RC.1",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.stihl.de",
+  "keywords": [
+    "stihl",
+    "design",
+    "system",
+    "web",
+    "component",
+    "library",
+    "react"
+  ],
   "publishConfig": {
     "access": "public",
     "@stihl-design-system:registry": "https://registry.npmjs.org"