@stihl-design-system/components 1.0.0-RC.11 → 1.0.0-RC.13

package/chunks/InputStepper.xmWGU9pU.js

@@ -0,0 +1,294 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c as u } from "./index.CvOaL64Y.js";
+import { useState as m, useRef as N, useEffect as w } from "react";
+import { u as mt } from "./useBreakpoint.5xBNDiCf.js";
+import { M as E, a as H, u as M } from "./Input.utils.ChV6RJsh.js";
+import { Asterisk as ft } from "../asterisk.DpzETKdT.js";
+import { DSButton as X } from "../button.M4nXjcUn.js";
+import { DSSystemFeedback as bt } from "../systemfeedback.C3Pfxxpp.js";
+import { g as S } from "./helpers.B1JT5ShS.js";
+import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_1pm8g_1", ht = "ds-input-stepper_input--invalid_1pm8g_113", xt = "ds-input-stepper_input--small_1pm8g_120", St = "ds-input-stepper_input--has-leading-icon_1pm8g_173", yt = "ds-input-stepper_input--has-action-button_1pm8g_176", It = "ds-input-stepper_input--has-second-action-button_1pm8g_179", vt = "ds-input-stepper_input--has-affix_1pm8g_191", At = "ds-input-stepper_input--is-ready_1pm8g_205", Dt = "ds-input-stepper_root_1pm8g_215", Bt = "ds-input-stepper_hint_1pm8g_223", Nt = "ds-input-stepper_label_1pm8g_223", wt = "ds-input-stepper_wrapper_1pm8g_227", Et = "ds-input-stepper_affix_1pm8g_233", Ht = "ds-input-stepper_affix--small_1pm8g_254", Lt = "ds-input-stepper_affix--disabled_1pm8g_267", jt = "ds-input-stepper_prefix_1pm8g_275", Rt = "ds-input-stepper_affix--readonly_1pm8g_278", kt = "ds-input-stepper_suffix_1pm8g_288", Ct = "ds-input-stepper_action-button_1pm8g_295", $t = "ds-input-stepper_label--hidden_1pm8g_313", Ft = "ds-input-stepper_label--disabled_1pm8g_326", Vt = "ds-input-stepper_feedback_1pm8g_346", Pt = "ds-input-stepper_second-action-button_1pm8g_360", Tt = "ds-input-stepper_value-announcer_1pm8g_364", e = {
+  input: gt,
+  "input--invalid": "ds-input-stepper_input--invalid_1pm8g_113",
+  inputInvalid: ht,
+  "input--small": "ds-input-stepper_input--small_1pm8g_120",
+  inputSmall: xt,
+  "input--has-leading-icon": "ds-input-stepper_input--has-leading-icon_1pm8g_173",
+  inputHasLeadingIcon: St,
+  "input--has-action-button": "ds-input-stepper_input--has-action-button_1pm8g_176",
+  inputHasActionButton: yt,
+  "input--has-second-action-button": "ds-input-stepper_input--has-second-action-button_1pm8g_179",
+  inputHasSecondActionButton: It,
+  "input--has-affix": "ds-input-stepper_input--has-affix_1pm8g_191",
+  inputHasAffix: vt,
+  "input--is-ready": "ds-input-stepper_input--is-ready_1pm8g_205",
+  inputIsReady: At,
+  root: Dt,
+  hint: Bt,
+  label: Nt,
+  wrapper: wt,
+  affix: Et,
+  "affix--small": "ds-input-stepper_affix--small_1pm8g_254",
+  affixSmall: Ht,
+  "affix--disabled": "ds-input-stepper_affix--disabled_1pm8g_267",
+  affixDisabled: Lt,
+  prefix: jt,
+  "affix--readonly": "ds-input-stepper_affix--readonly_1pm8g_278",
+  affixReadonly: Rt,
+  suffix: kt,
+  "action-button": "ds-input-stepper_action-button_1pm8g_295",
+  actionButton: Ct,
+  "label--hidden": "ds-input-stepper_label--hidden_1pm8g_313",
+  labelHidden: $t,
+  "label--disabled": "ds-input-stepper_label--disabled_1pm8g_326",
+  labelDisabled: Ft,
+  feedback: Vt,
+  "second-action-button": "ds-input-stepper_second-action-button_1pm8g_360",
+  secondActionButton: Pt,
+  "value-announcer": "ds-input-stepper_value-announcer_1pm8g_364",
+  valueAnnouncer: Tt
+}, Wt = ({
+  id: s,
+  label: f,
+  prefix: b,
+  suffix: g
+}) => {
+  if (!s)
+    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}.`
+      )
+    );
+  b && b.length > E && console.warn(
+    S(
+      "DSInputStepper",
+      `Prefix length must not exceed ${E} characters.`
+    )
+  ), g && g.length > H && console.warn(
+    S(
+      "DSInputStepper",
+      `Suffix length must not exceed ${H} characters.`
+    )
+  );
+}, Yt = ({
+  id: s,
+  label: f,
+  announcementText: b = "Value changed to",
+  className: g,
+  disabled: l = !1,
+  decreaseAmountButtonLabel: q = "Decrease",
+  hint: y,
+  hideLabel: G = !1,
+  invalid: h = !1,
+  increaseAmountButtonLabel: O = "Increase",
+  prefix: r,
+  max: L = 100,
+  min: j = 0,
+  readonly: d = !1,
+  required: R = !1,
+  size: p = "medium",
+  step: U = 1,
+  suffix: c,
+  systemFeedback: I,
+  value: x,
+  onChange: k,
+  ...J
+}) => {
+  process.env.NODE_ENV !== "production" && Wt({
+    id: s,
+    label: f,
+    prefix: r,
+    suffix: c
+  });
+  const [K, Q] = m(!1), [_, v] = m(x), [A, C] = m(""), [Y, Z] = m(!1), [z, tt] = m({}), a = N(null), et = r == null ? void 0 : r.substring(0, E), D = N(null), nt = c == null ? void 0 : c.substring(0, H), B = N(null), st = mt(G);
+  w(() => {
+    x && v(x);
+  }, [x]), w(() => {
+    if (A) {
+      const t = setTimeout(() => {
+        C("");
+      }, 3e3);
+      return () => clearTimeout(t);
+    }
+  }, [A]), w(() => {
+    var i;
+    const t = (o) => {
+      o.preventDefault();
+    };
+    return (i = a.current) == null || i.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 o;
+      (o = a.current) == null || o.removeEventListener("wheel", t);
+    };
+  }, []), M(() => {
+    const t = p === "medium" ? 16 : 8, i = {};
+    if (D.current) {
+      const o = D.current.offsetWidth;
+      i.paddingInlineStart = t + o + "px";
+    }
+    if (B.current) {
+      const o = B.current.offsetWidth;
+      i.paddingInlineEnd = t + o + "px";
+    }
+    tt(i), Q(!0);
+  }, [r, c, p, Y]), M(() => {
+    (async () => {
+      "fonts" in document && (await document.fonts.load(
+        '1em "STIHL Contraface Digital Text Regular"'
+      ), Z(!0));
+    })();
+  }, []);
+  const $ = u(e.affix, {
+    [e.affixSmall]: p === "small",
+    [e.affixDisabled]: l,
+    [e.affixReadonly]: d
+  }), F = `${s}-label`, V = `${s}-feedback`, P = `${s}-hint`, T = `${s}-value-announcer`, at = y ? ` ${P}` : "", pt = u(e.root, g), it = u(e.input, {
+    // small input
+    [e.inputSmall]: p === "small",
+    // invalid state
+    [e.inputInvalid]: h,
+    // prefix/suffix
+    [e.inputHasAffix]: r || c,
+    [e.inputIsReady]: K
+  }), ot = u(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: st,
+    [e.labelDisabled]: l
+  }), ut = u(e.secondActionButton, {
+    [e.secondActionButtonSmall]: p === "small"
+  }), lt = u(e.actionButton, {
+    [e.actionButtonSmall]: p === "small"
+  }), rt = () => {
+    const t = [T];
+    return h && I && t.push(V), t.join(" ");
+  }, W = () => {
+    var t;
+    if (a.current) {
+      v(a.current.value);
+      const i = new Event("change", { bubbles: !0 });
+      (t = a.current) == null || t.dispatchEvent(i), C(`${b} ${a.current.value}`);
+    }
+  }, ct = () => {
+    var t;
+    (t = a.current) == null || t.stepDown(), W();
+  }, dt = () => {
+    var t;
+    (t = a.current) == null || t.stepUp(), W();
+  }, _t = (t) => {
+    v(t.target.value), k && k(t);
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: pt, children: [
+    /* @__PURE__ */ n.jsxs("label", { className: ot, id: F, htmlFor: s, children: [
+      f,
+      R && /* @__PURE__ */ n.jsx(ft, {})
+    ] }),
+    y && /* @__PURE__ */ n.jsx("div", { className: e.hint, id: P, children: y }),
+    /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: e.valueAnnouncer,
+        id: T,
+        children: A
+      }
+    ),
+    h && I && /* @__PURE__ */ n.jsx(
+      bt,
+      {
+        className: e.feedback,
+        message: I,
+        type: "invalid",
+        id: V
+      }
+    ),
+    /* @__PURE__ */ n.jsxs("div", { className: e.wrapper, children: [
+      r && /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: u($, e.prefix),
+          ref: D,
+          "aria-disabled": l,
+          children: et
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          className: it,
+          id: s,
+          ref: a,
+          ...J,
+          style: z,
+          "aria-labelledby": `${F}${at}`,
+          "aria-describedby": rt(),
+          "aria-invalid": h,
+          "aria-disabled": d,
+          disabled: l,
+          min: j,
+          max: L,
+          readOnly: d,
+          required: R,
+          step: U,
+          type: "number",
+          value: _,
+          onChange: _t
+        }
+      ),
+      c && /* @__PURE__ */ n.jsx(
+        "span",
+        {
+          className: u($, e.suffix),
+          ref: B,
+          "aria-disabled": l,
+          children: nt
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "minus",
+          variant: "filled",
+          className: ut,
+          size: p,
+          onClick: ct,
+          disabled: l || d || !!_ && Number(_) <= j,
+          type: "button",
+          children: q
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        X,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: "plus",
+          variant: "filled",
+          className: lt,
+          size: p,
+          onClick: dt,
+          disabled: l || d || !!_ && Number(_) >= L,
+          type: "button",
+          children: O
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Yt as D,
+  Wt as v
+};

package/chunks/Notification.nx5vTamN.js

@@ -0,0 +1,92 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c as s } from "./index.CvOaL64Y.js";
+import { DSButton as f } from "../button.M4nXjcUn.js";
+import { D as u } from "./Icon.BCmt_XBG.js";
+import '../assets/Notification.DbRapUJo.css';const j = "ds-notification_root_1cajm_1", g = "ds-notification_root--success_1cajm_26", N = "ds-notification_root--error_1cajm_30", h = "ds-notification_root--warning_1cajm_34", I = "ds-notification_root--hide-icon_1cajm_38", x = "ds-notification_content_1cajm_52", A = "ds-notification_content--hide-close-button_1cajm_59", H = "ds-notification_content--hide-icon_1cajm_62", C = "ds-notification_icon_1cajm_66", S = "ds-notification_message_1cajm_70", p = "ds-notification_custom-action-area_1cajm_167", o = {
+  root: j,
+  "root--success": "ds-notification_root--success_1cajm_26",
+  rootSuccess: g,
+  "root--error": "ds-notification_root--error_1cajm_30",
+  rootError: N,
+  "root--warning": "ds-notification_root--warning_1cajm_34",
+  rootWarning: h,
+  "root--hide-icon": "ds-notification_root--hide-icon_1cajm_38",
+  rootHideIcon: I,
+  content: x,
+  "content--hide-close-button": "ds-notification_content--hide-close-button_1cajm_59",
+  contentHideCloseButton: A,
+  "content--hide-icon": "ds-notification_content--hide-icon_1cajm_62",
+  contentHideIcon: H,
+  icon: C,
+  message: S,
+  "custom-action-area": "ds-notification_custom-action-area_1cajm_167",
+  customActionArea: p
+}, k = [
+  "success",
+  "error",
+  "warning",
+  "info"
+], w = {
+  success: "circle-check-colored",
+  error: "diamond-exclamationmark-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, O = {
+  error: "alert",
+  warning: "alert",
+  info: "status",
+  success: "status"
+}, B = ({
+  children: r,
+  variant: t = "info",
+  className: a,
+  closeButtonLabel: _ = "Close notification",
+  customActionArea: e,
+  hideIcon: c = !1,
+  onClose: i,
+  ...d
+}) => {
+  const m = s(o.root, a, {
+    [o.rootSuccess]: t === "success",
+    [o.rootError]: t === "error",
+    [o.rootWarning]: t === "warning",
+    [o.rootInfo]: t === "info",
+    [o.rootHideIcon]: c
+  }), l = s(o.content, {
+    [o.contentHideCloseButton]: !i,
+    [o.contentHideIcon]: c
+  });
+  return /* @__PURE__ */ n.jsxs("div", { className: m, ...d, role: O[t], children: [
+    /* @__PURE__ */ n.jsxs("div", { className: l, children: [
+      !c && /* @__PURE__ */ n.jsx(
+        u,
+        {
+          name: w[t],
+          className: o.icon,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ n.jsx("div", { className: o.message, children: r }),
+      i && /* @__PURE__ */ n.jsx(
+        f,
+        {
+          hideLabel: !0,
+          iconName: "cross",
+          isFlush: !0,
+          variant: "ghost",
+          size: "small",
+          onClick: i,
+          type: "button",
+          children: _
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ n.jsx("div", { className: s({ [o.customActionArea]: !c }), children: e })
+  ] });
+};
+export {
+  B as D,
+  k as N,
+  w as a
+};

package/chunks/RadioGroup.Crj7NoOs.js

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