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

package/chunks/{RadioGroup.D10-pe9H.js → RadioGroup.DVyupPKV.js}

@@ -1,17 +1,17 @@
 "use client";
-import { j as f } from "./jsx-runtime.C115EyI4.js";
-import { c as y } from "./index.CvOaL64Y.js";
-import { forwardRef as C, useState as q } from "react";
-import { D as I } from "./Fieldset.Ct_JFRs9.js";
-import { DSRadio as A } from "../radio.B-2uuWHq.js";
-import { g as a, r as h } from "./helpers.CcqWV-wZ.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", m = {
-  root: B,
+import { j as h } from "./jsx-runtime.BteaETFx.js";
+import { c as P } from "./index.CEyLAtio.js";
+import { forwardRef as A, useState as C } from "react";
+import { D as q } from "./Fieldset.CPuNSQNU.js";
+import { DSRadio as I } from "../radio.DZEIaDlU.js";
+import { g as a, r as f } from "./helpers.CcqWV-wZ.js";
+import '../assets/RadioGroup.CM2mYOzc.css';const b = "ds-radio-group_root_12fot_1", B = "ds-radio-group_root--horizontal_12fot_9", M = "ds-radio-group_root--invalid_12fot_12", m = {
+  root: b,
   "root--horizontal": "ds-radio-group_root--horizontal_12fot_9",
-  rootHorizontal: M,
+  rootHorizontal: B,
   "root--invalid": "ds-radio-group_root--invalid_12fot_12",
-  rootInvalid: O
-}, v = (t) => t.some(({ hint: e }) => !!e), G = (t) => t.some(({ customArea: e }) => !!e), V = ({
+  rootInvalid: M
+}, D = (t) => t.some(({ hint: e }) => !!e), G = (t) => t.some(({ customArea: e }) => !!e), O = ({
   legend: t,
   name: e,
   options: r,
@@ -31,24 +31,28 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
     throw new Error(
       a(
         "DSRadioGroup",
-        h("legend", "DSRadioGroup")
+        f("legend", "DSRadioGroup")
       )
     );
   if (!e)
     throw new Error(
       a(
         "DSRadioGroup",
-        h("name", "DSRadioGroup")
+        f("name", "DSRadioGroup")
       )
     );
-  if (!r)
-    throw new Error(
-      a(
-        "DSRadioGroup",
-        h("options", "DSRadioGroup")
-      )
-    );
-  if (i === "horizontal" && v(r))
+  if (Array.isArray(r)) {
+    if (r.length === 0)
+      throw new Error(
+        a("DSRadioGroup", "The options array must not be empty.")
+      );
+  } else throw new Error(
+    a(
+      "DSRadioGroup",
+      f("options", "DSRadioGroup")
+    )
+  );
+  if (i === "horizontal" && D(r))
     throw new Error(
       a(
         "DSRadioGroup",
@@ -62,7 +66,7 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
         "Horizontal direction is not possible when options contain a custom area. Please remove custom areas or change direction property to 'vertical'."
       )
     );
-}, b = C(
+}, V = A(
   ({
     legend: t,
     name: e,
@@ -72,7 +76,7 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
     description: s,
     direction: n = "vertical",
     disabled: d = !1,
-    hideUncheckedHints: D = !1,
+    hideUncheckedHints: v = !1,
     id: p,
     invalid: u = !1,
     required: S = !1,
@@ -81,7 +85,7 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
     onChange: R,
     ...z
   }, E) => {
-    process.env.NODE_ENV !== "production" && V({
+    process.env.NODE_ENV !== "production" && O({
       legend: t,
       name: e,
       options: r,
@@ -90,21 +94,21 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
       id: p,
       systemFeedback: c
     });
-    const [H, x] = q(i), _ = w !== void 0, g = _ ? w : H, j = y(m.root, {
+    const [y, H] = C(i), g = w !== void 0, _ = g ? w : y, x = P(m.root, {
       // In case of longer copy, use vertical direction
-      [m.rootHorizontal]: n === "horizontal" && !v(r) && !G(r),
+      [m.rootHorizontal]: n === "horizontal" && !D(r) && !G(r),
       [m.rootInvalid]: u && !!c
-    }), N = (o) => {
+    }), j = (o) => {
       if (d) {
         o.preventDefault();
         return;
       }
-      _ || x(
+      g || H(
         o.target.value
       ), R && R(o);
-    }, P = v(r) && !D;
-    return /* @__PURE__ */ f.jsx(
-      I,
+    }, N = D(r) && !v;
+    return /* @__PURE__ */ h.jsx(
+      q,
       {
         id: p,
         legend: t,
@@ -116,19 +120,19 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
         systemFeedback: c,
         ...z,
         role: "radiogroup",
-        onChange: N,
-        children: /* @__PURE__ */ f.jsx("div", { className: j, children: r.map((o) => /* @__PURE__ */ f.jsx(
-          A,
+        onChange: j,
+        children: /* @__PURE__ */ h.jsx("div", { className: x, children: r.map((o) => /* @__PURE__ */ h.jsx(
+          I,
           {
             name: e,
-            checked: o.value === g,
+            checked: o.value === _,
             disabled: d,
-            hideUncheckedHint: D,
+            hideUncheckedHint: v,
             hint: o.hint,
             invalid: u,
-            isBold: P,
+            isBold: N,
             required: S,
-            ref: o.value === g ? E : null,
+            ref: o.value === _ ? E : null,
             ...o
           },
           p + o.label + o.value + o.hint
@@ -137,10 +141,10 @@ import '../assets/RadioGroup.BfMo157q.css';const B = "ds-radio-group_root_12fot_
     );
   }
 );
-b.displayName = "DSRadioGroup";
+V.displayName = "DSRadioGroup";
 export {
-  b as D,
+  V as D,
   G as a,
-  v as o,
-  V as v
+  D as o,
+  O as v
 };

package/chunks/Select.ByKUcvrB.js

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

package/chunks/TabPane.utils.CWMN6Tsy.js

@@ -0,0 +1,20 @@
+"use client";
+const n = (t) => [
+  "A",
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "AUDIO",
+  "VIDEO"
+].includes(t.tagName) || t.hasAttribute("contenteditable"), r = (t) => {
+  const e = (a) => n(a) ? !0 : Array.from(a.children).some(
+    (s) => e(s)
+  );
+  return e(t);
+}, c = (t, e) => `tabs-${t}-tabbutton-${e}`, o = (t, e, a) => `tabs-${t}-tabpanel-${e}-${a}`;
+export {
+  c as a,
+  r as c,
+  o as g
+};

package/chunks/Tabs.UwweipbU.js

@@ -0,0 +1,84 @@
+"use client";
+import { j as t } from "./jsx-runtime.BteaETFx.js";
+import { useState as h } from "react";
+import { TabList as l } from "../tablist.BCOOuiX4.js";
+import { TabPane as S } from "../tabpane.CAy_cIi3.js";
+import { g as d } from "./TabPane.utils.CWMN6Tsy.js";
+import { g as o, r as g } from "./helpers.CcqWV-wZ.js";
+const j = ["left", "center"], P = ["prev", "next"], w = ({
+  id: e,
+  tabs: r,
+  defaultSelectedTabIndex: s = 0
+}) => {
+  if (!e)
+    throw new Error(
+      o(
+        "DSTabs",
+        'A unique "id" prop is required. Please add a unique "id" prop to the DSTabs component.'
+      )
+    );
+  if (Array.isArray(r)) {
+    if (r.length === 0)
+      throw new Error(
+        o("DSTabs", "The tabs array must not be empty.")
+      );
+  } else throw new Error(
+    o("DSTabs", g("tabs", "DSTabs"))
+  );
+  if (s < 0 || s >= r.length)
+    throw new Error(
+      o(
+        "DSTabs",
+        `Invalid defaultSelectedTabIndex: ${s}. It must be between 0 and ${r.length - 1}.`
+      )
+    );
+}, q = ({
+  id: e,
+  tabs: r,
+  alignment: s = "left",
+  className: m,
+  classNameTabPane: T,
+  defaultSelectedTabIndex: a = 0,
+  onTabChange: c,
+  ...u
+}) => {
+  process.env.NODE_ENV !== "production" && w({
+    id: e,
+    tabs: r,
+    defaultSelectedTabIndex: a
+  });
+  const [n, f] = h(
+    a
+  );
+  return /* @__PURE__ */ t.jsxs("div", { className: m, id: e, ...u, children: [
+    /* @__PURE__ */ t.jsx(
+      l,
+      {
+        id: e,
+        tabs: r,
+        setSelectedTabIndex: f,
+        selectedTabIndex: n,
+        alignment: s,
+        onTabChange: c
+      }
+    ),
+    r.map(({ id: i, content: D }, p) => /* @__PURE__ */ t.jsx(
+      S,
+      {
+        id: i,
+        content: D,
+        index: p,
+        selectedTabIndex: n,
+        tabListId: e,
+        className: T
+      },
+      d(e, i, p)
+    ))
+  ] });
+};
+export {
+  q as D,
+  j as T,
+  P as a,
+  w as v
+};