@stihl-design-system/components 1.0.0-RC.14 → 1.0.0-RC.16

package/chunks/Select.DsLnW29U.js

@@ -1,194 +0,0 @@
-"use client";
-import { j as t } from "./jsx-runtime.C115EyI4.js";
-import { c as r } from "./index.CvOaL64Y.js";
-import { useRef as C, useState as q, useEffect as W } from "react";
-import { u as F } from "./useBreakpoint.B8XxjSVJ.js";
-import { Asterisk as M } from "../asterisk.DpzETKdT.js";
-import { D as O } from "./Icon.BCmt_XBG.js";
-import { DSSystemFeedback as T } from "../systemfeedback.C3Pfxxpp.js";
-import { g as p } from "./helpers.CcqWV-wZ.js";
-import '../assets/Select.D4EXgIbz.css';const V = "ds-select_root_1ui0h_1", Z = "ds-select_hint_1ui0h_9", J = "ds-select_label_1ui0h_9", K = "ds-select_wrapper_1ui0h_13", Q = "ds-select_affix_1ui0h_19", U = "ds-select_affix--small_1ui0h_40", X = "ds-select_affix--disabled_1ui0h_53", Y = "ds-select_prefix_1ui0h_61", z = "ds-select_affix--readonly_1ui0h_64", G = "ds-select_suffix_1ui0h_74", ee = "ds-select_action-button_1ui0h_81", se = "ds-select_label--hidden_1ui0h_99", te = "ds-select_label--disabled_1ui0h_112", le = "ds-select_feedback_1ui0h_132", ce = "ds-select_select-wrapper_1ui0h_137", ae = "ds-select_select_1ui0h_137", ne = "ds-select_select--invalid_1ui0h_262", ie = "ds-select_select--small_1ui0h_269", oe = "ds-select_input--has-leading-icon_1ui0h_322", de = "ds-select_input--has-action-button_1ui0h_325", re = "ds-select_input--has-second-action-button_1ui0h_328", _e = "ds-select_select--has-leading-icon_1ui0h_331", ue = "ds-select_select--has-action-button_1ui0h_334", he = "ds-select_select--has-second-action-button_1ui0h_337", fe = "ds-select_select--has-affix_1ui0h_340", pe = "ds-select_select--is-ready_1ui0h_354", be = "ds-select_select--placeholder_1ui0h_371", me = "ds-select_chevron_1ui0h_410", xe = "ds-select_chevron--small_1ui0h_414", ve = "ds-select_chevron--disabled_1ui0h_417", e = {
-  root: V,
-  hint: Z,
-  label: J,
-  wrapper: K,
-  affix: Q,
-  "affix--small": "ds-select_affix--small_1ui0h_40",
-  affixSmall: U,
-  "affix--disabled": "ds-select_affix--disabled_1ui0h_53",
-  affixDisabled: X,
-  prefix: Y,
-  "affix--readonly": "ds-select_affix--readonly_1ui0h_64",
-  affixReadonly: z,
-  suffix: G,
-  "action-button": "ds-select_action-button_1ui0h_81",
-  actionButton: ee,
-  "label--hidden": "ds-select_label--hidden_1ui0h_99",
-  labelHidden: se,
-  "label--disabled": "ds-select_label--disabled_1ui0h_112",
-  labelDisabled: te,
-  feedback: le,
-  "select-wrapper": "ds-select_select-wrapper_1ui0h_137",
-  selectWrapper: ce,
-  select: ae,
-  "select--invalid": "ds-select_select--invalid_1ui0h_262",
-  selectInvalid: ne,
-  "select--small": "ds-select_select--small_1ui0h_269",
-  selectSmall: ie,
-  "input--has-leading-icon": "ds-select_input--has-leading-icon_1ui0h_322",
-  inputHasLeadingIcon: oe,
-  "input--has-action-button": "ds-select_input--has-action-button_1ui0h_325",
-  inputHasActionButton: de,
-  "input--has-second-action-button": "ds-select_input--has-second-action-button_1ui0h_328",
-  inputHasSecondActionButton: re,
-  "select--has-leading-icon": "ds-select_select--has-leading-icon_1ui0h_331",
-  selectHasLeadingIcon: _e,
-  "select--has-action-button": "ds-select_select--has-action-button_1ui0h_334",
-  selectHasActionButton: ue,
-  "select--has-second-action-button": "ds-select_select--has-second-action-button_1ui0h_337",
-  selectHasSecondActionButton: he,
-  "select--has-affix": "ds-select_select--has-affix_1ui0h_340",
-  selectHasAffix: fe,
-  "select--is-ready": "ds-select_select--is-ready_1ui0h_354",
-  selectIsReady: pe,
-  "select--placeholder": "ds-select_select--placeholder_1ui0h_371",
-  selectPlaceholder: be,
-  chevron: me,
-  "chevron--small": "ds-select_chevron--small_1ui0h_414",
-  chevronSmall: xe,
-  "chevron--disabled": "ds-select_chevron--disabled_1ui0h_417",
-  chevronDisabled: ve
-}, Ee = ["medium", "small"], Se = ({
-  id: s,
-  label: a,
-  options: c
-}) => {
-  if (!s)
-    throw new Error(
-      p(
-        "DSSelect",
-        'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'
-      )
-    );
-  if (!a)
-    throw new Error(
-      p(
-        "DSSelect",
-        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
-      )
-    );
-  if (!c || c.length === 0)
-    throw new Error(
-      p(
-        "DSSelect",
-        'Options are always required. Please add an "options" prop to the DSSelect component.'
-      )
-    );
-}, ge = (s, a, c) => s === "" || a !== void 0 && a !== "" ? !1 : !(c !== void 0 && c !== ""), Le = ({
-  id: s,
-  label: a,
-  options: c,
-  className: H,
-  defaultValue: b,
-  disabled: _ = !1,
-  hideLabel: I = !1,
-  hint: u,
-  invalid: d = !1,
-  placeholder: h = "Select",
-  required: m = !1,
-  size: x = "medium",
-  systemFeedback: f,
-  value: v,
-  ...w
-}) => {
-  process.env.NODE_ENV !== "production" && Se({
-    id: s,
-    label: a,
-    options: c
-  });
-  const o = C(null), [j, A] = q(
-    ge(h, b, v)
-  );
-  W(() => {
-    if (!o.current) return;
-    const n = () => {
-      if (!o.current) return;
-      const i = o.current.value;
-      A(i === "");
-    }, l = o.current;
-    return l.addEventListener("change", n), () => {
-      l.removeEventListener("change", n);
-    };
-  }, []);
-  const B = F(I), S = `${s}-label`, g = `${s}-feedback`, D = `${s}-hint`, E = u ? ` ${D}` : "", L = (n) => [
-    h && /* @__PURE__ */ t.jsx("option", { value: "", children: h }, `${s}-hidden-option-disabled-placeholder`),
-    ...n.map((l) => {
-      if ("options" in l) {
-        const { label: i, options: $ } = l;
-        return /* @__PURE__ */ t.jsx("optgroup", { label: i, children: $.map(y) }, i);
-      } else
-        return y(l);
-    })
-  ], y = ({ label: n, value: l, isDisabled: i }) => /* @__PURE__ */ t.jsx("option", { value: l, disabled: i, children: n }, l), N = r(e.root, H), P = r(e.select, {
-    [e.selectSmall]: x === "small",
-    [e.selectInvalid]: d,
-    [e.selectPlaceholder]: j
-  }), k = r(e.label, {
-    // hide label only visually to keep them available for assistive technologies
-    [e.labelHidden]: B,
-    [e.labelDisabled]: _
-  }), R = r(e.chevron, {
-    [e.chevronSmall]: x === "small",
-    [e.chevronDisabled]: _
-  });
-  return /* @__PURE__ */ t.jsxs("div", { className: N, children: [
-    /* @__PURE__ */ t.jsxs("label", { className: k, id: S, htmlFor: s, children: [
-      a,
-      m && /* @__PURE__ */ t.jsx(M, {})
-    ] }),
-    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: D, children: u }),
-    d && f && /* @__PURE__ */ t.jsx(
-      T,
-      {
-        className: e.feedback,
-        message: f,
-        type: "invalid",
-        id: g,
-        "aria-live": "assertive"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
-      /* @__PURE__ */ t.jsx(
-        "select",
-        {
-          ...w,
-          id: s,
-          ref: o,
-          className: P,
-          "aria-labelledby": `${S}${E}`,
-          "aria-describedby": d && f ? g : void 0,
-          "aria-invalid": d,
-          defaultValue: b,
-          value: v,
-          disabled: _,
-          required: m,
-          children: L(c)
-        }
-      ),
-      /* @__PURE__ */ t.jsx(
-        O,
-        {
-          name: "chevron-down",
-          className: R,
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  Le as D,
-  Ee as S,
-  ge as g,
-  Se as v
-};

package/chunks/TabPane.CYuUi0oL.js

@@ -1,51 +0,0 @@
-"use client";
-import { j as u } from "./jsx-runtime.C115EyI4.js";
-import { c as i } from "./index.CvOaL64Y.js";
-import { useRef as f, useState as m, useEffect as p } from "react";
-import '../assets/TabPane.zywjfwo8.css';const T = "ds-tabs_tabpane_30tnb_1", d = {
-  tabpane: T
-}, E = (e) => [
-  "A",
-  "BUTTON",
-  "INPUT",
-  "SELECT",
-  "TEXTAREA",
-  "AUDIO",
-  "VIDEO"
-].includes(e.tagName) || e.hasAttribute("contenteditable"), g = (e) => {
-  const t = (a) => E(a) ? !0 : Array.from(a.children).some(
-    (s) => t(s)
-  );
-  return t(e);
-}, A = (e, t) => `tabs-${e}-tabbutton-${t}`, h = (e, t, a) => `tabs-${e}-tabpanel-${t}-${a}`, x = ({
-  id: e,
-  content: t,
-  index: a,
-  selectedTabIndex: s,
-  tabListId: r,
-  className: o
-}) => {
-  const n = f(null), [c, l] = m(!1);
-  p(() => {
-    n.current && l(g(n.current));
-  }, [t]);
-  const b = i(d.tabpane, o);
-  return /* @__PURE__ */ u.jsx(
-    "div",
-    {
-      id: h(r, e, a),
-      role: "tabpanel",
-      "aria-labelledby": A(r, e),
-      hidden: s !== a,
-      tabIndex: c ? void 0 : 0,
-      ref: n,
-      className: b,
-      children: t
-    }
-  );
-};
-export {
-  x as T,
-  h as a,
-  A as g
-};

package/chunks/Tabs.D_JAsvoh.js

@@ -1,270 +0,0 @@
-"use client";
-import { j as l } from "./jsx-runtime.C115EyI4.js";
-import { c as T } from "./index.CvOaL64Y.js";
-import { useState as v, useRef as p, useEffect as tt } from "react";
-import { h as R } from "./has-window.ut_-aShB.js";
-import { g as N, r as et } from "./helpers.CcqWV-wZ.js";
-import { u as M } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
-import { DSButton as H } from "../button.BfcWQZhx.js";
-import { D as rt } from "./Icon.BCmt_XBG.js";
-import { NumberIndicator as st } from "../numberindicator.UU7FSouT.js";
-import { g as z, a as O, T as nt } from "./TabPane.CYuUi0oL.js";
-import '../assets/Tabs.DUqlqP6R.css';const y = () => {
-  if (R) {
-    const o = getComputedStyle(document.documentElement).getPropertyValue("--ds-animation-duration").trim();
-    return o === "0s" || o === "0ms";
-  } else
-    return !0;
-}, ot = "ds-tabs_tabs-wrapper_infm4_1", ct = "ds-tabs_scroll-wrapper_infm4_6", at = "ds-tabs_scroller_infm4_17", lt = "ds-tabs_scroller--centered_infm4_23", it = "ds-tabs_tab_infm4_1", ut = "ds-tabs_scroll-button_infm4_98", dt = "ds-tabs_scroll-button--hidden_infm4_103", ft = "ds-tabs_scroll-button--right_infm4_107", mt = "ds-tabs_indicator_infm4_119", a = {
-  "tabs-wrapper": "ds-tabs_tabs-wrapper_infm4_1",
-  tabsWrapper: ot,
-  "scroll-wrapper": "ds-tabs_scroll-wrapper_infm4_6",
-  scrollWrapper: ct,
-  scroller: at,
-  "scroller--centered": "ds-tabs_scroller--centered_infm4_23",
-  scrollerCentered: lt,
-  tab: it,
-  "scroll-button": "ds-tabs_scroll-button_infm4_98",
-  scrollButton: ut,
-  "scroll-button--hidden": "ds-tabs_scroll-button--hidden_infm4_103",
-  scrollButtonHidden: dt,
-  "scroll-button--right": "ds-tabs_scroll-button--right_infm4_107",
-  scrollButtonRight: ft,
-  indicator: mt
-}, St = ["left", "center"], Bt = ["prev", "next"], m = (o) => R && (o == null ? void 0 : o.getBoundingClientRect()) || DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }), h = 48, pt = ({ id: o, tabs: f }) => {
-  if (!o)
-    throw new Error(
-      N(
-        "DSTabs",
-        'A unique "id" prop is required. Please add a unique "id" prop to the DSTabs component.'
-      )
-    );
-  if (!f)
-    throw new Error(
-      N("DSTabs", et("tabs", "DSTabs"))
-    );
-}, yt = ({
-  id: o,
-  tabs: f,
-  alignment: E = "left",
-  className: q,
-  classNameTabPane: $,
-  defaultSelectedTabIndex: L = 0,
-  onTabChange: I,
-  ...X
-}) => {
-  process.env.NODE_ENV !== "production" && pt({
-    id: o,
-    tabs: f
-  });
-  const [i, G] = v(
-    L
-  ), [C, b] = v(
-    L
-  ), [K, V] = v(!1), [F, Q] = v(!1), _ = p([]), g = p(null), u = p(null), d = p(null), w = p(!1), j = p(i);
-  M(() => {
-    var t;
-    if (R) {
-      const r = [
-        "16px 'STIHL Contraface Digital Text Regular'",
-        "14px 'STIHL Contraface Digital Text Demi'",
-        "16px 'STIHL Contraface Digital Text Bold'"
-      ];
-      Promise.all(r.map((c) => document.fonts.load(c))).then(() => {
-        x(i), D("next", i, "instant"), k(), w.current = !0;
-      }).catch((c) => {
-        throw new Error(
-          N(
-            "DSTabs",
-            `The component requires the fonts to be loaded: ${c}`
-          )
-        );
-      });
-      const e = () => {
-        !w.current || !d.current || (s.matches ? d.current.style.transitionDuration = "0s" : d.current.style.transitionDuration = "");
-      }, s = window.matchMedia("(prefers-reduced-motion: reduce)");
-      s.addEventListener("change", e);
-      const n = () => {
-        k(), J();
-      };
-      return window.addEventListener("resize", n), (t = u.current) == null || t.addEventListener("scroll", n), () => {
-        var c;
-        s.removeEventListener("change", e), window.removeEventListener("resize", n), (c = u.current) == null || c.removeEventListener("scroll", n);
-      };
-    }
-  }, [f, E]), M(() => {
-    w.current && x(i), j.current = i;
-  }, [i]), tt(() => {
-    var t;
-    w.current && ((t = _.current[C]) == null || t.focus());
-  }, [C]);
-  const W = (t) => {
-    const r = m(u.current), e = m(_.current[t]);
-    let s = "next";
-    e.left - h < r.left ? s = "prev" : e.right + h > r.right ? s = "next" : s = i < t ? "next" : "prev", G(t), b(t), D(s, t), I && I(t);
-  }, k = () => {
-    if (u.current && g.current) {
-      const t = m(u.current), r = m(g.current);
-      V(r.left < t.left), Q(r.right > t.right + 4);
-    }
-  }, A = (t = 0) => {
-    R && d.current && !y() && !window.matchMedia("(prefers-reduced-motion: reduce)").matches && setTimeout(() => {
-      d.current && (d.current.style.transitionDuration = "250ms");
-    }, t);
-  }, J = () => {
-    d.current && (d.current.style.transitionDuration = "0s", x(j.current), A());
-  }, x = (t) => {
-    const r = d.current, e = m(_.current[t]), s = m(g.current), n = e.left - s.left;
-    r && (w.current ? (r.style.width = `${e.width}px`, r.style.transform = `translateX(${n}px)`) : (r.style.transitionDuration = "0s", r.style.transform = `translateX(${n}px)`, r.style.width = `${e.width}px`, A(50)));
-  }, U = (t, r) => {
-    let e;
-    switch (t.key) {
-      case "ArrowLeft":
-        e = (r > 0 ? r : f.length) - 1, b(e);
-        break;
-      case "ArrowRight":
-        e = (r + 1) % f.length, b(e);
-        break;
-      case "Home":
-        e = 0, b(e);
-        break;
-      case "End":
-        e = f.length - 1, b(e);
-        break;
-      case "Enter":
-      case " ":
-        W(r);
-        return;
-      default:
-        return;
-    }
-    e !== void 0 && setTimeout(
-      () => D(
-        t.key === "ArrowRight" ? "next" : "prev",
-        e
-      ),
-      0
-    ), t.preventDefault();
-  }, D = (t, r, e = "smooth") => {
-    const s = _.current[r], n = u.current, c = m(s), S = m(n);
-    let B;
-    if (!(!s || !n)) {
-      if (t === "prev") {
-        if (c.left - h > S.left)
-          return;
-        B = s.offsetLeft - h;
-      } else {
-        if (c.right + h < S.right)
-          return;
-        B = s.offsetLeft + s.offsetWidth - S.width + h;
-      }
-      n.scrollTo({
-        left: B,
-        behavior: y() ? "instant" : e
-      });
-    }
-  }, P = (t) => {
-    var e;
-    const r = Y(t);
-    (e = u.current) == null || e.scrollTo({
-      left: r,
-      behavior: y() ? "instant" : "smooth"
-    });
-  }, Y = (t) => {
-    if (!g.current || !u.current)
-      return 0;
-    const { scrollLeft: r, offsetWidth: e } = u.current, s = Math.round(e * 0.2);
-    return t === "next" ? r + s : r - s;
-  }, Z = T(a.scroller, {
-    [a.scrollerCentered]: E === "center"
-  });
-  return /* @__PURE__ */ l.jsxs(
-    "div",
-    {
-      className: T(a.tabs, q),
-      id: o,
-      ...X,
-      children: [
-        /* @__PURE__ */ l.jsxs("div", { className: a.tabsWrapper, children: [
-          /* @__PURE__ */ l.jsxs("div", { className: a.scrollWrapper, ref: u, children: [
-            /* @__PURE__ */ l.jsx("div", { role: "tablist", className: Z, ref: g, children: f.map(
-              ({ id: t, label: r, iconName: e, numberIndicatorValue: s }, n) => /* @__PURE__ */ l.jsxs(
-                "button",
-                {
-                  id: z(o, t),
-                  role: "tab",
-                  "aria-selected": i === n,
-                  "aria-controls": O(o, t, n),
-                  tabIndex: i === n ? 0 : -1,
-                  className: a.tab,
-                  ref: (c) => {
-                    _.current[n] = c;
-                  },
-                  onClick: () => W(n),
-                  onKeyDown: (c) => U(c, n),
-                  children: [
-                    e && /* @__PURE__ */ l.jsx(rt, { name: e, "aria-hidden": "true" }),
-                    r,
-                    s && /* @__PURE__ */ l.jsx(st, { label: s })
-                  ]
-                },
-                z(o, t)
-              )
-            ) }),
-            /* @__PURE__ */ l.jsx("span", { className: a.indicator, ref: d })
-          ] }),
-          /* @__PURE__ */ l.jsx(
-            H,
-            {
-              variant: "filled",
-              className: T(a.scrollButton, {
-                [a.scrollButtonHidden]: !K
-              }),
-              hideLabel: !0,
-              iconName: "chevron-left",
-              tabIndex: -1,
-              size: "small",
-              onClick: () => P("prev"),
-              children: "Left"
-            }
-          ),
-          /* @__PURE__ */ l.jsx(
-            H,
-            {
-              variant: "filled",
-              className: T(a.scrollButton, a.scrollButtonRight, {
-                [a.scrollButtonHidden]: !F
-              }),
-              hideLabel: !0,
-              iconName: "chevron-right",
-              tabIndex: -1,
-              size: "small",
-              onClick: () => P("next"),
-              children: "Right"
-            }
-          )
-        ] }),
-        f.map(({ id: t, content: r }, e) => /* @__PURE__ */ l.jsx(
-          nt,
-          {
-            id: t,
-            content: r,
-            index: e,
-            selectedTabIndex: i,
-            tabListId: o,
-            className: $
-          },
-          O(o, t, e)
-        ))
-      ]
-    }
-  );
-};
-export {
-  yt as D,
-  h as S,
-  St as T,
-  Bt as a,
-  m as g,
-  pt as v
-};