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

package/input.abb902e3.js

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

package/input.d.ts

@@ -0,0 +1 @@
+export * from './components/Input/Input'

package/inputpassword.11c12c66.js

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

package/inputpassword.d.ts

@@ -0,0 +1 @@
+export * from './components/InputPassword/InputPassword'

package/inputsearch.0c88e71a.js

@@ -0,0 +1,188 @@
+import "./assets/InputSearch.8f986307.css";
+import { j as a } from "./chunks/jsx-runtime.5c071667.js";
+import { c as l } from "./chunks/index.8021d3e0.js";
+import { useState as J, useRef as w, useEffect as A } from "react";
+import { g as S, a as K } from "./chunks/helpers.ea3ca41a.js";
+import { u as Q } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { Asterisk as U } from "./asterisk.91abccec.js";
+import { DSButton as D } from "./button.89b2675b.js";
+import { DSSystemFeedback as X } from "./systemfeedback.6bbd1505.js";
+const Y = "_input_ps4al_73", Z = "_input--invalid_ps4al_183", z = "_input--small_ps4al_190", tt = "_input--has-leading-icon_ps4al_236", nt = "_input--has-action-button_ps4al_239", at = "_input--has-second-action-button_ps4al_242", et = "_input--has-affix_ps4al_254", st = "_input--is-ready_ps4al_266", ot = "_root_ps4al_273", it = "_hint_ps4al_281", lt = "_label_ps4al_281", ct = "_wrapper_ps4al_285", ut = "_action-button_ps4al_291", pt = "_second-action-button_ps4al_295", rt = "_label--hidden_ps4al_312", _t = "_feedback_ps4al_339", t = {
+  input: Y,
+  "input--invalid": "_input--invalid_ps4al_183",
+  inputInvalid: Z,
+  "input--small": "_input--small_ps4al_190",
+  inputSmall: z,
+  "input--has-leading-icon": "_input--has-leading-icon_ps4al_236",
+  inputHasLeadingIcon: tt,
+  "input--has-action-button": "_input--has-action-button_ps4al_239",
+  inputHasActionButton: nt,
+  "input--has-second-action-button": "_input--has-second-action-button_ps4al_242",
+  inputHasSecondActionButton: at,
+  "input--has-affix": "_input--has-affix_ps4al_254",
+  inputHasAffix: et,
+  "input--is-ready": "_input--is-ready_ps4al_266",
+  inputIsReady: st,
+  root: ot,
+  hint: it,
+  label: lt,
+  wrapper: ct,
+  "action-button": "_action-button_ps4al_291",
+  actionButton: ut,
+  "second-action-button": "_second-action-button_ps4al_295",
+  secondActionButton: pt,
+  "label--hidden": "_label--hidden_ps4al_312",
+  labelHidden: rt,
+  feedback: _t
+}, dt = ({ id: n, label: c }) => {
+  if (!n)
+    throw new Error(
+      S(
+        "DSInputSearch",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
+      )
+    );
+  if (!c)
+    throw new Error(
+      S(
+        "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}.`
+      )
+    );
+}, ht = (n) => !!K(n, "form"), xt = ({
+  id: n,
+  label: c,
+  className: H,
+  clearButtonLabel: E = "Clear search field",
+  disabled: u = !1,
+  hint: h,
+  hideLabel: j = !1,
+  invalid: p = !1,
+  readonly: s = !1,
+  required: I = !1,
+  size: o = "medium",
+  submitButtonLabel: C = "Search",
+  systemFeedback: m,
+  value: b,
+  submitButtonOnClick: k,
+  onChange: g,
+  ...L
+}) => {
+  process.env.NODE_ENV !== "production" && dt({
+    id: n,
+    label: c
+  });
+  const [r, v] = J(b), f = w(null), _ = w(null), V = Q(j);
+  A(() => {
+    v(b);
+  }, [b]), A(() => {
+    f.current && !ht(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
+      S(
+        "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 B = `${n}-label`, y = `${n}-feedback`, x = `${n}-hint`, O = h ? ` ${x}` : "", N = r !== "" && r !== void 0 && r !== null, P = l(t.root, H), $ = l(t.input, {
+    // small input
+    [t.inputSmall]: o === "small",
+    // invalid state
+    [t.inputInvalid]: p,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0,
+    // action second action button
+    [t.inputHasSecondActionButton]: N && !s && !u
+  }), R = l(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: V
+  }), q = l(t.actionButton, {
+    [t.actionButtonSmall]: o === "small"
+  }), T = l(t.secondActionButton, {
+    [t.secondActionButtonSmall]: o === "small"
+  }), F = (e, i) => {
+    const G = Object.getPrototypeOf(e), d = Object.getOwnPropertyDescriptor(
+      G,
+      "value"
+    );
+    d != null && d.set ? d.set.call(e, i) : e.value = i;
+  }, M = () => {
+    var i;
+    if (!_.current)
+      return;
+    F(_.current, "");
+    const e = new Event("change", { bubbles: !0 });
+    (i = _.current) == null || i.dispatchEvent(e);
+  }, W = (e) => {
+    v(e.target.value), g && g(e);
+  };
+  return /* @__PURE__ */ a.jsxs("div", { className: P, ref: f, children: [
+    /* @__PURE__ */ a.jsxs("label", { className: R, id: B, htmlFor: n, children: [
+      c,
+      I && /* @__PURE__ */ a.jsx(U, {})
+    ] }),
+    h && /* @__PURE__ */ a.jsx("div", { className: t.hint, id: x, children: h }),
+    p && m && /* @__PURE__ */ a.jsx(
+      X,
+      {
+        className: t.feedback,
+        message: m,
+        type: "invalid",
+        id: y
+      }
+    ),
+    /* @__PURE__ */ a.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          className: $,
+          id: n,
+          ref: _,
+          ...L,
+          "aria-labelledby": `${B}${O}`,
+          "aria-describedby": p && m ? y : void 0,
+          "aria-invalid": p,
+          "aria-disabled": s,
+          readOnly: s,
+          required: I,
+          disabled: u,
+          type: "search",
+          value: r,
+          onChange: W
+        }
+      ),
+      N && !s && !u && /* @__PURE__ */ a.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "cross",
+          className: T,
+          variant: "ghost",
+          size: o,
+          onClick: M,
+          type: "button",
+          tabIndex: -1,
+          children: E
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "magnifying-glass",
+          className: q,
+          variant: "ghost",
+          size: o,
+          onClick: k,
+          type: "submit",
+          disabled: u || s,
+          children: C
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  xt as DSInputSearch
+};

package/inputsearch.d.ts

@@ -0,0 +1 @@
+export * from './components/InputSearch/InputSearch'