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

package/input.o8OT6rxJ.js

@@ -0,0 +1,236 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as l } from "./chunks/index.CvOaL64Y.js";
+import { useState as m, useRef as k, useLayoutEffect as B, useEffect as as } from "react";
+import { u as ts } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as es } from "./asterisk.DU8THnoC.js";
+import { DSButton as E } from "./button.BUUGRxIp.js";
+import { DSIcon as ls } from "./icon.PX9_1kNB.js";
+import { DSSystemFeedback as os } from "./systemfeedback.C7iXO5A1.js";
+import { v as cs, a as ds, M as _s, b as us, s as fs, i as v, c as rs } from "./chunks/Input.utils.Bly6ZzLI.js";
+import './assets/input.BcP5kkZ2.css';const ps = "_input_1swsi_187", ms = "_input--invalid_1swsi_297", hs = "_input--small_1swsi_304", bs = "_input--has-leading-icon_1swsi_350", ws = "_input--has-action-button_1swsi_353", xs = "_input--has-second-action-button_1swsi_356", gs = "_input--has-affix_1swsi_368", Is = "_input--is-ready_1swsi_380", Ss = "_root_1swsi_387", ys = "_hint_1swsi_395", Hs = "_label_1swsi_395", ks = "_wrapper_1swsi_399", vs = "_affix_1swsi_405", Cs = "_affix--small_1swsi_425", Rs = "_affix--disabled_1swsi_437", js = "_prefix_1swsi_440", Ls = "_affix--readonly_1swsi_443", As = "_suffix_1swsi_453", Ds = "_leading-icon_1swsi_460", Ns = "_leading-icon--small_1swsi_472", Bs = "_leading-icon--disabled_1swsi_475", Es = "_action-button_1swsi_484", Ts = "_label--hidden_1swsi_501", Fs = "_feedback_1swsi_528", s = {
+  input: ps,
+  "input--invalid": "_input--invalid_1swsi_297",
+  inputInvalid: ms,
+  "input--small": "_input--small_1swsi_304",
+  inputSmall: hs,
+  "input--has-leading-icon": "_input--has-leading-icon_1swsi_350",
+  inputHasLeadingIcon: bs,
+  "input--has-action-button": "_input--has-action-button_1swsi_353",
+  inputHasActionButton: ws,
+  "input--has-second-action-button": "_input--has-second-action-button_1swsi_356",
+  inputHasSecondActionButton: xs,
+  "input--has-affix": "_input--has-affix_1swsi_368",
+  inputHasAffix: gs,
+  "input--is-ready": "_input--is-ready_1swsi_380",
+  inputIsReady: Is,
+  root: Ss,
+  hint: ys,
+  label: Hs,
+  wrapper: ks,
+  affix: vs,
+  "affix--small": "_affix--small_1swsi_425",
+  affixSmall: Cs,
+  "affix--disabled": "_affix--disabled_1swsi_437",
+  affixDisabled: Rs,
+  prefix: js,
+  "affix--readonly": "_affix--readonly_1swsi_443",
+  affixReadonly: Ls,
+  suffix: As,
+  "leading-icon": "_leading-icon_1swsi_460",
+  leadingIcon: Ds,
+  "leading-icon--small": "_leading-icon--small_1swsi_472",
+  leadingIconSmall: Ns,
+  "leading-icon--disabled": "_leading-icon--disabled_1swsi_475",
+  leadingIconDisabled: Bs,
+  "action-button": "_action-button_1swsi_484",
+  actionButton: Es,
+  "label--hidden": "_label--hidden_1swsi_501",
+  labelHidden: Ts,
+  feedback: Fs
+}, Js = ({
+  id: d,
+  label: C,
+  actionButtonLabel: T,
+  actionButtonIconName: u,
+  actionButtonIconSource: h,
+  actionButtonOnClick: F,
+  className: P,
+  disabled: a = !1,
+  hint: b,
+  hideLabel: O = !1,
+  invalid: f = !1,
+  leadingIconName: r,
+  leadingIconSource: p,
+  prefix: t,
+  readonly: _ = !1,
+  required: R = !1,
+  size: e = "medium",
+  suffix: n,
+  systemFeedback: w,
+  type: o = "text",
+  ...$
+}) => {
+  process.env.NODE_ENV !== "production" && (cs({
+    id: d,
+    label: C,
+    prefix: t,
+    suffix: n,
+    leadingIconName: r,
+    leadingIconSource: p,
+    actionButtonIconName: u,
+    actionButtonIconSource: h
+  }), ds(o));
+  const [W, X] = m(!1), [M, V] = m(!1), [x, G] = m(!1), [U, J] = m({}), g = k(null), K = t == null ? void 0 : t.substring(0, _s), I = k(null), Q = n == null ? void 0 : n.substring(0, us), S = k(null), Y = ts(O);
+  B(() => {
+    const c = e === "medium" ? 16 : 8, y = {};
+    if (I.current) {
+      const H = I.current.offsetWidth;
+      y.paddingInlineStart = c + H + "px";
+    }
+    if (S.current) {
+      const H = S.current.offsetWidth;
+      y.paddingInlineEnd = c + H + "px";
+    }
+    J(y), X(!0);
+  }, [t, n, e, M]), B(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), V(!0));
+    })();
+  }, []), as(() => {
+    const c = fs(
+      v(o),
+      rs(o)
+    );
+    G(c);
+  }, [o]);
+  const j = l(s.affix, {
+    [s.affixSmall]: e === "small",
+    [s.affixDisabled]: a,
+    [s.affixReadonly]: _
+  }), L = `${d}-label`, A = `${d}-feedback`, D = `${d}-hint`, Z = b ? ` ${D}` : "", q = l(s.root, P), z = l(s.input, {
+    // small input
+    [s.inputSmall]: e === "small",
+    // invalid state
+    [s.inputInvalid]: f,
+    // leading icon
+    [s.inputHasLeadingIcon]: r || p,
+    // prefix/suffix
+    [s.inputHasAffix]: t || n,
+    // action button
+    [s.inputHasActionButton]: u || h || x,
+    [s.inputIsReady]: W
+  }), ss = l(s.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [s.labelHidden]: Y
+  }), is = l(s.leadingIcon, {
+    [s.leadingIconSmall]: e === "small",
+    [s.leadingIconDisabled]: a
+  }), N = l(s.actionButton, {
+    [s.actionButtonSmall]: e === "small"
+  }), ns = (c) => {
+    g.current && !a && !_ && g.current.showPicker(), c.preventDefault();
+  };
+  return /* @__PURE__ */ i.jsxs("div", { className: q, children: [
+    /* @__PURE__ */ i.jsxs("label", { className: ss, id: L, htmlFor: d, children: [
+      C,
+      R && /* @__PURE__ */ i.jsx(es, {})
+    ] }),
+    b && /* @__PURE__ */ i.jsx("div", { className: s.hint, id: D, children: b }),
+    f && w && /* @__PURE__ */ i.jsx(
+      os,
+      {
+        className: s.feedback,
+        message: w,
+        type: "invalid",
+        id: A
+      }
+    ),
+    /* @__PURE__ */ i.jsxs("div", { className: s.wrapper, children: [
+      t && /* @__PURE__ */ i.jsx(
+        "span",
+        {
+          className: l(j, s.prefix),
+          ref: I,
+          "aria-disabled": a,
+          children: K
+        }
+      ),
+      !t && (r || p) && /* @__PURE__ */ i.jsx(
+        ls,
+        {
+          name: r,
+          theme: "light",
+          source: p,
+          className: is,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: o,
+          className: z,
+          id: d,
+          ref: g,
+          ...$,
+          style: U,
+          "aria-labelledby": `${L}${Z}`,
+          "aria-describedby": f && w ? A : void 0,
+          "aria-invalid": f,
+          "aria-disabled": _,
+          readOnly: _,
+          required: R,
+          disabled: a
+        }
+      ),
+      n && /* @__PURE__ */ i.jsx(
+        "span",
+        {
+          className: l(j, s.suffix),
+          ref: S,
+          "aria-disabled": a,
+          children: Q
+        }
+      ),
+      !n && !x && (u || h) && /* @__PURE__ */ i.jsx(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: u,
+          variant: "ghost",
+          className: N,
+          size: e,
+          onClick: F,
+          type: "button",
+          disabled: a || _,
+          children: T
+        }
+      ),
+      !n && x && !_ && !a && /* @__PURE__ */ i.jsxs(
+        E,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: v(o) ? "calendar" : "clock",
+          variant: "ghost",
+          className: N,
+          size: e,
+          onClick: ns,
+          type: "button",
+          children: [
+            "Open ",
+            v(o) ? "date" : "time",
+            " picker"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Js as DSInput
+};

package/inputpassword.-MXq8baU.js

@@ -0,0 +1,139 @@
+"use client";
+import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as i } from "./chunks/index.CvOaL64Y.js";
+import { useState as A } from "react";
+import { u as D } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as C } from "./asterisk.DU8THnoC.js";
+import { DSButton as L } from "./button.BUUGRxIp.js";
+import { DSSystemFeedback as $ } from "./systemfeedback.C7iXO5A1.js";
+import { g as b } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/inputpassword.C3Uyj7oA.css';const E = "_input_8z84y_187", q = "_input--invalid_8z84y_297", R = "_input--small_8z84y_304", V = "_input--has-leading-icon_8z84y_350", O = "_input--has-action-button_8z84y_353", F = "_input--has-second-action-button_8z84y_356", M = "_input--has-affix_8z84y_368", T = "_input--is-ready_8z84y_380", G = "_root_8z84y_387", J = "_hint_8z84y_395", K = "_label_8z84y_395", Q = "_wrapper_8z84y_399", U = "_action-button_8z84y_405", W = "_label--hidden_8z84y_422", X = "_feedback_8z84y_449", t = {
+  input: E,
+  "input--invalid": "_input--invalid_8z84y_297",
+  inputInvalid: q,
+  "input--small": "_input--small_8z84y_304",
+  inputSmall: R,
+  "input--has-leading-icon": "_input--has-leading-icon_8z84y_350",
+  inputHasLeadingIcon: V,
+  "input--has-action-button": "_input--has-action-button_8z84y_353",
+  inputHasActionButton: O,
+  "input--has-second-action-button": "_input--has-second-action-button_8z84y_356",
+  inputHasSecondActionButton: F,
+  "input--has-affix": "_input--has-affix_8z84y_368",
+  inputHasAffix: M,
+  "input--is-ready": "_input--is-ready_8z84y_380",
+  inputIsReady: T,
+  root: G,
+  hint: J,
+  label: K,
+  wrapper: Q,
+  "action-button": "_action-button_8z84y_405",
+  actionButton: U,
+  "label--hidden": "_label--hidden_8z84y_422",
+  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}.`
+      )
+    );
+}, lt = ({
+  id: n,
+  label: s,
+  autocomplete: h = "new-password",
+  className: f,
+  disabled: c = !1,
+  hidePasswordText: w = "Hide password",
+  hint: e,
+  hideLabel: z = !1,
+  invalid: o = !1,
+  readonly: r = !1,
+  required: d = !1,
+  showPasswordText: S = "Show password",
+  size: l = "medium",
+  systemFeedback: u,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && Y({
+    id: n,
+    label: s
+  });
+  const [p, I] = A(!1), _ = `${n}-label`, m = `${n}-feedback`, y = `${n}-hint`, B = e ? ` ${y}` : "", 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: y, children: e }),
+    o && u && /* @__PURE__ */ a.jsx(
+      $,
+      {
+        className: t.feedback,
+        message: u,
+        type: "invalid",
+        id: m
+      }
+    ),
+    /* @__PURE__ */ a.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ a.jsx(
+        "input",
+        {
+          className: v,
+          id: n,
+          ...x,
+          "aria-labelledby": `${_}${B}`,
+          "aria-describedby": o && u ? m : void 0,
+          "aria-invalid": o,
+          "aria-disabled": r,
+          readOnly: r,
+          required: d,
+          disabled: c,
+          autoComplete: h,
+          type: p ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ a.jsx(
+        L,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: p ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: N,
+          size: l,
+          onClick: j,
+          type: "button",
+          disabled: c,
+          children: p ? w : S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  lt as DSInputPassword
+};

package/inputsearch.CoYTSjox.js

@@ -0,0 +1,188 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import { useState as J, useRef as w, useEffect as A } from "react";
+import { g as y, a as K } from "./chunks/helpers.B1JT5ShS.js";
+import { u as Q } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as U } from "./asterisk.DU8THnoC.js";
+import { DSButton as D } from "./button.BUUGRxIp.js";
+import { DSSystemFeedback as X } from "./systemfeedback.C7iXO5A1.js";
+import './assets/inputsearch.tL3e9-Ob.css';const Y = "_input_17rym_187", Z = "_input--invalid_17rym_297", z = "_input--small_17rym_304", tt = "_input--has-leading-icon_17rym_350", nt = "_input--has-action-button_17rym_353", et = "_input--has-second-action-button_17rym_356", at = "_input--has-affix_17rym_368", st = "_input--is-ready_17rym_380", ot = "_root_17rym_387", it = "_hint_17rym_395", ct = "_label_17rym_395", rt = "_wrapper_17rym_399", ut = "_action-button_17rym_405", lt = "_second-action-button_17rym_409", pt = "_label--hidden_17rym_426", mt = "_feedback_17rym_453", t = {
+  input: Y,
+  "input--invalid": "_input--invalid_17rym_297",
+  inputInvalid: Z,
+  "input--small": "_input--small_17rym_304",
+  inputSmall: z,
+  "input--has-leading-icon": "_input--has-leading-icon_17rym_350",
+  inputHasLeadingIcon: tt,
+  "input--has-action-button": "_input--has-action-button_17rym_353",
+  inputHasActionButton: nt,
+  "input--has-second-action-button": "_input--has-second-action-button_17rym_356",
+  inputHasSecondActionButton: et,
+  "input--has-affix": "_input--has-affix_17rym_368",
+  inputHasAffix: at,
+  "input--is-ready": "_input--is-ready_17rym_380",
+  inputIsReady: st,
+  root: ot,
+  hint: it,
+  label: ct,
+  wrapper: rt,
+  "action-button": "_action-button_17rym_405",
+  actionButton: ut,
+  "second-action-button": "_second-action-button_17rym_409",
+  secondActionButton: lt,
+  "label--hidden": "_label--hidden_17rym_426",
+  labelHidden: pt,
+  feedback: mt
+}, _t = ({ id: n, label: r }) => {
+  if (!n)
+    throw new Error(
+      y(
+        "DSInputSearch",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputSearch component.'
+      )
+    );
+  if (!r)
+    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"), Bt = ({
+  id: n,
+  label: r,
+  className: H,
+  clearButtonLabel: E = "Clear search field",
+  disabled: u = !1,
+  hint: d,
+  hideLabel: j = !1,
+  invalid: l = !1,
+  readonly: s = !1,
+  required: S = !1,
+  size: o = "medium",
+  submitButtonLabel: C = "Search",
+  systemFeedback: h,
+  value: b,
+  submitButtonOnClick: k,
+  onChange: I,
+  ...L
+}) => {
+  process.env.NODE_ENV !== "production" && _t({
+    id: n,
+    label: r
+  });
+  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]: o === "small",
+    // invalid state
+    [t.inputInvalid]: l,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0,
+    // action second action button
+    [t.inputHasSecondActionButton]: N && !s && !u
+  }), R = c(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: V
+  }), q = c(t.actionButton, {
+    [t.actionButtonSmall]: o === "small"
+  }), T = c(t.secondActionButton, {
+    [t.secondActionButtonSmall]: o === "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: [
+      r,
+      S && /* @__PURE__ */ e.jsx(U, {})
+    ] }),
+    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: x, children: d }),
+    l && 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": l && h ? B : void 0,
+          "aria-invalid": l,
+          "aria-disabled": s,
+          readOnly: s,
+          required: S,
+          disabled: u,
+          type: "search",
+          value: p,
+          onChange: W
+        }
+      ),
+      N && !s && !u && /* @__PURE__ */ e.jsx(
+        D,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "cross",
+          className: T,
+          variant: "ghost",
+          size: o,
+          onClick: M,
+          type: "button",
+          tabIndex: -1,
+          children: E
+        }
+      ),
+      /* @__PURE__ */ e.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 {
+  Bt as DSInputSearch
+};