@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.6

package/chunks/InputStepper.BkncCNwJ.js

@@ -0,0 +1,291 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import { useState as _, useRef as N, useEffect as w, useLayoutEffect as M } from "react";
+import { u as _t } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as ft } from "../asterisk.Cjbk-xZi.js";
+import { DSButton as X } from "../button.L1lgCuM9.js";
+import { M as E, a as H } from "./Input.utils.AKWCNkpA.js";
+import { DSSystemFeedback as ht } from "../systemfeedback.CUWch42u.js";
+import { g as y } from "./helpers.B1JT5ShS.js";
+import '../assets/InputStepper.BKjqNi-i.css';const mt = "_input_xdphx_226", bt = "_input--invalid_xdphx_336", St = "_input--small_xdphx_343", yt = "_input--has-leading-icon_xdphx_395", vt = "_input--has-action-button_xdphx_398", It = "_input--has-second-action-button_xdphx_401", gt = "_input--has-affix_xdphx_413", At = "_input--is-ready_xdphx_427", Bt = "_root_xdphx_437", Dt = "_hint_xdphx_445", Nt = "_label_xdphx_445", wt = "_wrapper_xdphx_449", Et = "_affix_xdphx_455", Ht = "_affix--small_xdphx_475", Lt = "_affix--disabled_xdphx_487", jt = "_prefix_xdphx_490", Rt = "_affix--readonly_xdphx_493", kt = "_suffix_xdphx_503", Ct = "_action-button_xdphx_510", $t = "_label--hidden_xdphx_527", Ft = "_feedback_xdphx_554", Vt = "_second-action-button_xdphx_568", Pt = "_value-announcer_xdphx_572", n = {
+  input: mt,
+  "input--invalid": "_input--invalid_xdphx_336",
+  inputInvalid: bt,
+  "input--small": "_input--small_xdphx_343",
+  inputSmall: St,
+  "input--has-leading-icon": "_input--has-leading-icon_xdphx_395",
+  inputHasLeadingIcon: yt,
+  "input--has-action-button": "_input--has-action-button_xdphx_398",
+  inputHasActionButton: vt,
+  "input--has-second-action-button": "_input--has-second-action-button_xdphx_401",
+  inputHasSecondActionButton: It,
+  "input--has-affix": "_input--has-affix_xdphx_413",
+  inputHasAffix: gt,
+  "input--is-ready": "_input--is-ready_xdphx_427",
+  inputIsReady: At,
+  root: Bt,
+  hint: Dt,
+  label: Nt,
+  wrapper: wt,
+  affix: Et,
+  "affix--small": "_affix--small_xdphx_475",
+  affixSmall: Ht,
+  "affix--disabled": "_affix--disabled_xdphx_487",
+  affixDisabled: Lt,
+  prefix: jt,
+  "affix--readonly": "_affix--readonly_xdphx_493",
+  affixReadonly: Rt,
+  suffix: kt,
+  "action-button": "_action-button_xdphx_510",
+  actionButton: Ct,
+  "label--hidden": "_label--hidden_xdphx_527",
+  labelHidden: $t,
+  feedback: Ft,
+  "second-action-button": "_second-action-button_xdphx_568",
+  secondActionButton: Vt,
+  "value-announcer": "_value-announcer_xdphx_572",
+  valueAnnouncer: Pt
+}, Tt = ({
+  id: a,
+  label: f,
+  prefix: h,
+  suffix: m
+}) => {
+  if (!a)
+    throw new Error(
+      y(
+        "DSInputStepper",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+      )
+    );
+  if (!f)
+    throw new Error(
+      y(
+        "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 > E && console.warn(
+    y(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), m && m.length > H && console.warn(
+    y(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Qt = ({
+  id: a,
+  label: f,
+  announcementText: h = "Value changed to",
+  className: m,
+  disabled: r = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: v,
+  hideLabel: G = !1,
+  invalid: b = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: u,
+  max: L = 100,
+  min: j = 0,
+  readonly: p = !1,
+  required: R = !1,
+  size: i = "medium",
+  step: U = 1,
+  suffix: d,
+  systemFeedback: I,
+  value: S,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Tt({
+    id: a,
+    label: f,
+    prefix: u,
+    suffix: d
+  });
+  const [K, Q] = _(!1), [x, g] = _(S), [A, C] = _(""), [Y, Z] = _(!1), [z, tt] = _({}), s = N(null), nt = u == null ? void 0 : u.substring(0, E), B = N(null), et = d == null ? void 0 : d.substring(0, H), D = N(null), at = _t(G);
+  w(() => {
+    S && g(S);
+  }, [S]), w(() => {
+    if (A) {
+      const t = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(t);
+    }
+  }, [A]), w(() => {
+    var o;
+    const t = (l) => {
+      l.preventDefault();
+    };
+    return (o = s.current) == null || o.addEventListener("wheel", t, {
+      // 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 = s.current) == null || l.removeEventListener("wheel", t);
+    };
+  }, []), M(() => {
+    const t = i === "medium" ? 16 : 8, o = {};
+    if (B.current) {
+      const l = B.current.offsetWidth;
+      o.paddingInlineStart = t + l + "px";
+    }
+    if (D.current) {
+      const l = D.current.offsetWidth;
+      o.paddingInlineEnd = t + l + "px";
+    }
+    tt(o), Q(!0);
+  }, [u, d, i, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = c(n.affix, {
+    [n.affixSmall]: i === "small",
+    [n.affixDisabled]: r,
+    [n.affixReadonly]: p
+  }), F = `${a}-label`, V = `${a}-feedback`, P = `${a}-hint`, T = `${a}-value-announcer`, st = v ? ` ${P}` : "", it = c(n.root, m), ot = c(n.input, {
+    // small input
+    [n.inputSmall]: i === "small",
+    // invalid state
+    [n.inputInvalid]: b,
+    // prefix/suffix
+    [n.inputHasAffix]: u || d,
+    [n.inputIsReady]: K
+  }), lt = c(n.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [n.labelHidden]: at
+  }), ct = c(n.secondActionButton, {
+    [n.secondActionButtonSmall]: i === "small"
+  }), ut = c(n.actionButton, {
+    [n.actionButtonSmall]: i === "small"
+  }), dt = () => {
+    const t = [T];
+    return b && I && t.push(V), t.join(" ");
+  }, W = () => {
+    var t;
+    if (s.current) {
+      g(s.current.value);
+      const o = new Event("change", { bubbles: !0 });
+      (t = s.current) == null || t.dispatchEvent(o), C(`${h} ${s.current.value}`);
+    }
+  }, rt = () => {
+    var t;
+    (t = s.current) == null || t.stepDown(), W();
+  }, pt = () => {
+    var t;
+    (t = s.current) == null || t.stepUp(), W();
+  }, xt = (t) => {
+    g(t.target.value), k && k(t);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: it, children: [
+    /* @__PURE__ */ e.jsxs("label", { className: lt, id: F, htmlFor: a, children: [
+      f,
+      R && /* @__PURE__ */ e.jsx(ft, {})
+    ] }),
+    v && /* @__PURE__ */ e.jsx("div", { className: n.hint, id: P, children: v }),
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: n.valueAnnouncer,
+        id: T,
+        children: A
+      }
+    ),
+    b && I && /* @__PURE__ */ e.jsx(
+      ht,
+      {
+        className: n.feedback,
+        message: I,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ e.jsxs("div", { className: n.wrapper, children: [
+      u && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, n.prefix),
+          ref: B,
+          "aria-disabled": r,
+          children: nt
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          className: ot,
+          id: a,
+          ref: s,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${st}`,
+          "aria-describedby": dt(),
+          "aria-invalid": b,
+          "aria-disabled": p,
+          disabled: r,
+          min: j,
+          max: L,
+          readOnly: p,
+          required: R,
+          step: U,
+          type: "number",
+          value: x,
+          onChange: xt
+        }
+      ),
+      d && /* @__PURE__ */ e.jsx(
+        "span",
+        {
+          className: c($, n.suffix),
+          ref: D,
+          "aria-disabled": r,
+          children: et
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: ct,
+          size: i,
+          onClick: rt,
+          disabled: r || p || !!x && Number(x) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: ut,
+          size: i,
+          onClick: pt,
+          disabled: r || p || !!x && Number(x) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Qt as D,
+  Tt as v
+};

package/chunks/Notification.DVVuSOqG.js

@@ -0,0 +1,93 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c as s } from "./index.CvOaL64Y.js";
+import { D as p } from "./Icon.n4XZrQ4N.js";
+import { DSButton as g } from "../button.L1lgCuM9.js";
+import '../assets/Notification.Bg63cvs4.css';const N = "_root_l12pe_76", f = "_root--success_l12pe_100", h = "_root--error_l12pe_104", I = "_root--warning_l12pe_108", x = "_root--hide-icon_l12pe_112", A = "_content_l12pe_126", C = "_content--hide-close-button_l12pe_133", H = "_content--hide-icon_l12pe_136", j = "_icon_l12pe_140", S = "_message_l12pe_144", w = "_custom-action-area_l12pe_157", o = {
+  root: N,
+  "root--success": "_root--success_l12pe_100",
+  rootSuccess: f,
+  "root--error": "_root--error_l12pe_104",
+  rootError: h,
+  "root--warning": "_root--warning_l12pe_108",
+  rootWarning: I,
+  "root--hide-icon": "_root--hide-icon_l12pe_112",
+  rootHideIcon: x,
+  content: A,
+  "content--hide-close-button": "_content--hide-close-button_l12pe_133",
+  contentHideCloseButton: C,
+  "content--hide-icon": "_content--hide-icon_l12pe_136",
+  contentHideIcon: H,
+  icon: j,
+  message: S,
+  "custom-action-area": "_custom-action-area_l12pe_157",
+  customActionArea: w
+}, R = [
+  "success",
+  "error",
+  "warning",
+  "info"
+], O = {
+  success: "circle-check-colored",
+  error: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, T = {
+  error: "alert",
+  warning: "alert",
+  info: "status",
+  success: "status"
+}, B = ({
+  children: i,
+  variant: t = "info",
+  customActionArea: c,
+  className: a,
+  closeButtonLabel: _ = "Close notification",
+  hideCloseButton: r = !1,
+  hideIcon: n = !1,
+  onClose: l,
+  ...m
+}) => {
+  const d = s(o.root, a, {
+    [o.rootSuccess]: t === "success",
+    [o.rootError]: t === "error",
+    [o.rootWarning]: t === "warning",
+    [o.rootInfo]: t === "info",
+    [o.rootHideIcon]: n
+  }), u = s(o.content, {
+    [o.contentHideCloseButton]: r,
+    [o.contentHideIcon]: n
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: d, ...m, role: T[t], children: [
+    /* @__PURE__ */ e.jsxs("div", { className: u, children: [
+      !n && /* @__PURE__ */ e.jsx(
+        p,
+        {
+          name: O[t],
+          className: o.icon,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { className: o.message, children: i }),
+      !r && /* @__PURE__ */ e.jsx(
+        g,
+        {
+          hideLabel: !0,
+          iconName: "cross",
+          isFlush: !0,
+          variant: "ghost",
+          size: "small",
+          onClick: l,
+          type: "button",
+          children: _
+        }
+      )
+    ] }),
+    c && /* @__PURE__ */ e.jsx("div", { className: s({ [o.customActionArea]: !n }), children: c })
+  ] });
+};
+export {
+  B as D,
+  R as N,
+  O as a
+};

package/chunks/RadioGroup.BO4pbAJw.js

@@ -0,0 +1,132 @@
+"use client";
+import { j as h } from "./jsx-runtime.C115EyI4.js";
+import { c as C } from "./index.CvOaL64Y.js";
+import { forwardRef as N, useState as A } from "react";
+import { D as B } from "./Fieldset.B1vsrHNv.js";
+import { DSRadio as M } from "../radio.epf54-sG.js";
+import { s as m } from "./RadioGroup.module.BBZwHDjW.js";
+import { g as t } from "./helpers.B1JT5ShS.js";
+const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, D = (o) => o.some(({ hint: a }) => !!a), E = (o) => o.some(({ customArea: a }) => !!a), O = ({
+  legend: o,
+  name: a,
+  options: e,
+  alignment: s,
+  description: i,
+  id: l,
+  systemFeedback: n
+}) => {
+  if (!l && (i || n))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSRadioGroup component.'
+      )
+    );
+  if (!o)
+    throw new Error(
+      t("DSRadioGroup", f("legend"))
+    );
+  if (!a)
+    throw new Error(
+      t("DSRadioGroup", f("name"))
+    );
+  if (!e)
+    throw new Error(
+      t("DSRadioGroup", f("options"))
+    );
+  if (s === "horizontal" && D(e))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        "Horizontal alignment is not possible when options contain a hint. Please remove hints or change alignment property to 'vertical'."
+      )
+    );
+  if (s === "horizontal" && E(e))
+    throw new Error(
+      t(
+        "DSRadioGroup",
+        "Horizontal alignment is not possible when options contain a custom area. Please remove custom areas or change alignment property to 'vertical'."
+      )
+    );
+}, V = N(
+  ({
+    legend: o,
+    name: a,
+    options: e,
+    alignment: s = "vertical",
+    className: i,
+    defaultValue: l,
+    description: n,
+    disabled: p = !1,
+    hideUncheckedHints: g = !1,
+    id: u,
+    invalid: c = !1,
+    required: w = !1,
+    systemFeedback: d,
+    value: S,
+    onChange: v,
+    ...x
+  }, z) => {
+    process.env.NODE_ENV !== "production" && O({
+      legend: o,
+      name: a,
+      options: e,
+      alignment: s,
+      description: n,
+      id: u,
+      systemFeedback: d
+    });
+    const [H, P] = A(l), R = S !== void 0, G = R ? S : H, j = C(m.group, {
+      // In case of longer copy, use vertical alignment
+      [m.groupHorizontal]: s === "horizontal" && !D(e) && !E(e),
+      [m.groupInvalid]: c && !!d
+    }), q = (r) => {
+      if (p) {
+        r.preventDefault();
+        return;
+      }
+      R || P(
+        r.target.value
+      ), v && v(r);
+    }, y = D(e) && !g;
+    return /* @__PURE__ */ h.jsx(
+      B,
+      {
+        id: u,
+        legend: o,
+        className: i,
+        description: n,
+        disabled: p,
+        required: w,
+        invalid: c,
+        systemFeedback: d,
+        ...x,
+        role: "radiogroup",
+        onChange: q,
+        children: /* @__PURE__ */ h.jsx("div", { className: j, children: e.map((r) => /* @__PURE__ */ h.jsx(
+          M,
+          {
+            name: a,
+            checked: r.value === G,
+            disabled: p,
+            hideUncheckedHint: g,
+            hint: r.hint,
+            invalid: c,
+            isBold: y,
+            required: w,
+            ref: r.value === G ? z : null,
+            ...r
+          },
+          u + r.label + r.value + r.hint
+        )) })
+      }
+    );
+  }
+);
+V.displayName = "DSRadioGroup";
+export {
+  V as D,
+  E as a,
+  D as o,
+  O as v
+};

package/chunks/RadioGroup.module.BBZwHDjW.js

@@ -0,0 +1,11 @@
+"use client";
+import '../assets/RadioGroup.Bz3_xkZU.css';const o = "_group_2f5rk_76", r = "_group--horizontal_2f5rk_84", n = "_group--invalid_2f5rk_87", _ = {
+  group: o,
+  "group--horizontal": "_group--horizontal_2f5rk_84",
+  groupHorizontal: r,
+  "group--invalid": "_group--invalid_2f5rk_87",
+  groupInvalid: n
+};
+export {
+  _ as s
+};