@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/chunks/Accordion.CB6jB3s_.js

@@ -0,0 +1,125 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c as a } from "./index.CvOaL64Y.js";
+import { forwardRef as A, useRef as F, useState as I, useImperativeHandle as R, useEffect as w } from "react";
+import { DSHeading as T } from "../heading.IPIYc5vW.js";
+import { D as L } from "./Icon.BCmt_XBG.js";
+import { g } from "./helpers.B1JT5ShS.js";
+import '../assets/Accordion.i4k5SMQM.css';const M = "ds-accordion_details_1385s_1", b = "ds-accordion_summary_1385s_120", H = "ds-accordion_summary--utility--m_1385s_159", P = "ds-accordion_summary--flush_1385s_188", U = "ds-accordion_summary--small_1385s_256", q = "ds-accordion_summary-content-wrapper_1385s_261", V = "ds-accordion_summary-content-wrapper--flush_1385s_267", z = "ds-accordion_summary-content-wrapper--chevron-left_1385s_271", Z = "ds-accordion_heading-summary-wrapper_1385s_276", k = "ds-accordion_hint_1385s_280", B = "ds-accordion_icon_1385s_294", G = "ds-accordion_icon--open_1385s_305", J = "ds-accordion_content-wrapper_1385s_317", K = "ds-accordion_content-wrapper--flush_1385s_323", Q = "ds-accordion_content-wrapper--small_1385s_327", r = {
+  details: M,
+  summary: b,
+  "summary--utility--m": "ds-accordion_summary--utility--m_1385s_159",
+  summaryUtilityM: H,
+  "summary--flush": "ds-accordion_summary--flush_1385s_188",
+  summaryFlush: P,
+  "summary--small": "ds-accordion_summary--small_1385s_256",
+  summarySmall: U,
+  "summary-content-wrapper": "ds-accordion_summary-content-wrapper_1385s_261",
+  summaryContentWrapper: q,
+  "summary-content-wrapper--flush": "ds-accordion_summary-content-wrapper--flush_1385s_267",
+  summaryContentWrapperFlush: V,
+  "summary-content-wrapper--chevron-left": "ds-accordion_summary-content-wrapper--chevron-left_1385s_271",
+  summaryContentWrapperChevronLeft: z,
+  "heading-summary-wrapper": "ds-accordion_heading-summary-wrapper_1385s_276",
+  headingSummaryWrapper: Z,
+  hint: k,
+  icon: B,
+  "icon--open": "ds-accordion_icon--open_1385s_305",
+  iconOpen: G,
+  "content-wrapper": "ds-accordion_content-wrapper_1385s_317",
+  contentWrapper: J,
+  "content-wrapper--flush": "ds-accordion_content-wrapper--flush_1385s_323",
+  contentWrapperFlush: K,
+  "content-wrapper--small": "ds-accordion_content-wrapper--small_1385s_327",
+  contentWrapperSmall: Q
+}, or = ["medium", "small"], tr = ["left", "right"], X = ({
+  children: o,
+  summary: n
+}) => {
+  if (!o)
+    throw new Error(
+      g(
+        "DSAccordion",
+        "The component requires children to be set."
+      )
+    );
+  if (!n)
+    throw new Error(
+      g(
+        "DSAccordion",
+        "The summary prop is required. Please add the summary prop to the DSAccordion component."
+      )
+    );
+}, Y = A(
+  ({
+    children: o,
+    summary: n,
+    chevronPosition: C = "right",
+    className: S,
+    hint: p,
+    isFlush: t = !1,
+    isOpen: c = !1,
+    size: i = "medium",
+    ...W
+  }, v) => {
+    process.env.NODE_ENV !== "production" && X({ children: o, summary: n });
+    const s = F(null), [D, l] = I(c);
+    R(v, () => s.current), w(() => {
+      s.current && l(s.current.open);
+    }, [c]), w(() => {
+      var h;
+      const y = () => {
+        s.current && l(s.current.open);
+      };
+      return (h = s.current) == null || h.addEventListener("toggle", y), () => {
+        var f;
+        (f = s.current) == null || f.removeEventListener("toggle", y);
+      };
+    }, []);
+    let d, u, _;
+    const m = typeof n == "object" && n !== void 0;
+    m && ({ headingSize: d, headingTag: u, headingText: _ } = n);
+    const N = a(r.details, S), j = a(r.summary, {
+      [r.summaryFlush]: t,
+      [r.summarySmall]: i === "small",
+      [r.summaryUtilityM]: !m
+    }), x = a(
+      r.summaryContentWrapper,
+      {
+        [r.summaryContentWrapperFlush]: t,
+        [r.summaryContentWrapperChevronLeft]: C === "left"
+      }
+    ), E = a(r.icon, {
+      [r.iconOpen]: D
+    }), O = a(r.contentWrapper, {
+      [r.contentWrapperFlush]: t,
+      [r.contentWrapperSmall]: i === "small"
+    });
+    return /* @__PURE__ */ e.jsxs(
+      "details",
+      {
+        ...W,
+        ref: s,
+        className: N,
+        open: c,
+        children: [
+          /* @__PURE__ */ e.jsx("summary", { className: j, children: /* @__PURE__ */ e.jsxs("div", { className: x, children: [
+            /* @__PURE__ */ e.jsxs("div", { className: r.headingSummaryWrapper, children: [
+              m ? /* @__PURE__ */ e.jsx(T, { tag: u, size: d, children: _ }) : n,
+              p && /* @__PURE__ */ e.jsx("div", { className: r.hint, children: p })
+            ] }),
+            /* @__PURE__ */ e.jsx(L, { name: "chevron-down", className: E })
+          ] }) }),
+          /* @__PURE__ */ e.jsx("div", { className: O, children: o })
+        ]
+      }
+    );
+  }
+);
+Y.displayName = "DSAccordion";
+export {
+  or as A,
+  tr as C,
+  Y as D,
+  X as v
+};

package/chunks/{AriaLiveRegions.utils.D2ni4Yrf.js → AriaLiveRegions.utils.BGSZafnS.js}

@@ -28,7 +28,7 @@ const e = "ds-alert-live-region", t = "ds-status-live-region", g = () => documen
 export {
   e as A,
   t as a,
-  c as b,
-  g,
+  g as b,
+  c as g,
   m as v
 };

package/chunks/CheckboxGroup.S6i5EOc4.js

@@ -0,0 +1,92 @@
+"use client";
+import { j as u } from "./jsx-runtime.C115EyI4.js";
+import { c as m } from "./index.CvOaL64Y.js";
+import { D as f } from "./Fieldset.Cjmkgxxk.js";
+import l from "react";
+import { g as i } from "./helpers.B1JT5ShS.js";
+import { DSCheckbox as k } from "../checkbox.Cb2_ey6U.js";
+import '../assets/CheckboxGroup.BH1Br1dg.css';const D = "ds-checkbox-group_root_12fot_1", _ = "ds-checkbox-group_root--horizontal_12fot_9", C = "ds-checkbox-group_root--invalid_12fot_12", h = {
+  root: D,
+  "root--horizontal": "ds-checkbox-group_root--horizontal_12fot_9",
+  rootHorizontal: _,
+  "root--invalid": "ds-checkbox-group_root--invalid_12fot_12",
+  rootInvalid: C
+}, S = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSCheckboxGroup component.`, v = ({
+  children: o,
+  description: e,
+  id: n,
+  legend: r,
+  systemFeedback: s
+}) => {
+  if (!n && (e || s))
+    throw new Error(
+      i(
+        "DSCheckboxGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSCheckboxGroup component.'
+      )
+    );
+  if (!r)
+    throw new Error(
+      i("DSCheckboxGroup", S("legend"))
+    );
+  if (!o)
+    throw new Error(
+      i(
+        "DSCheckboxGroup",
+        "The component requires DSCheckbox components to be explicitly set as its children. Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group."
+      )
+    );
+  l.Children.forEach(o, (t) => {
+    if (!(l.isValidElement(t) && t.type === k))
+      throw new Error(
+        i(
+          "DSCheckboxGroup",
+          "The component requires the children to be DSCheckbox elements. Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group."
+        )
+      );
+  });
+}, y = ({
+  children: o,
+  legend: e,
+  className: n,
+  description: r,
+  direction: s = "vertical",
+  disabled: t = !1,
+  id: a,
+  invalid: p = !1,
+  required: d = !1,
+  systemFeedback: c,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && v({
+    children: o,
+    legend: e,
+    description: r,
+    id: a,
+    systemFeedback: c
+  });
+  const b = m(h.root, {
+    // In case of longer copy, use vertical direction
+    [h.rootHorizontal]: s === "horizontal",
+    [h.rootInvalid]: p && !!c
+  });
+  return /* @__PURE__ */ u.jsx(
+    f,
+    {
+      id: a,
+      legend: e,
+      className: n,
+      description: r,
+      disabled: t,
+      required: d,
+      invalid: p,
+      systemFeedback: c,
+      ...x,
+      children: /* @__PURE__ */ u.jsx("div", { className: b, children: o })
+    }
+  );
+};
+export {
+  y as D,
+  v
+};

package/chunks/Chip.CMlPUyOJ.js

@@ -0,0 +1,142 @@
+"use client";
+import { j as o } from "./jsx-runtime.C115EyI4.js";
+import { c as _ } from "./index.CvOaL64Y.js";
+import { forwardRef as w } from "react";
+import { t as y } from "./translate.isa3FHb8.js";
+import { D as d } from "./Icon.BCmt_XBG.js";
+import { g as a } from "./helpers.B1JT5ShS.js";
+import { g as P } from "./AriaLiveRegions.utils.BGSZafnS.js";
+import '../assets/Chip.DSdLuzoi.css';const T = "ds-chip-group_chip_aidwn_1", b = "ds-chip-group_chip--small_aidwn_30", h = {
+  chip: T,
+  "chip--small": "ds-chip-group_chip--small_aidwn_30",
+  chipSmall: b
+}, u = (e) => `The "${e}" prop is required. Please add the "${e}" prop to the DSChipGroup component.`, F = ({
+  chips: e,
+  id: i,
+  label: r
+}) => {
+  if (!Array.isArray(e))
+    throw new Error(
+      a("DSChipGroup", u("chips"))
+    );
+  if (!i)
+    throw new Error(
+      a(
+        "DSChipGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSChipGroup component.'
+      )
+    );
+  if (!r)
+    throw new Error(
+      a("DSChipGroup", u("label"))
+    );
+}, H = () => {
+  if (!P())
+    throw new Error(
+      a(
+        "DSChipGroup",
+        'The DSAriaLiveRegions component has to be placed at the root of your application, as close to the "body" as possible, e.g. in your "App.tsx" or "layout.tsx".'
+      )
+    );
+}, U = ["medium", "small"], R = {
+  disabled: "disabled",
+  selected: "selected",
+  // {0} is the action (e.g., select/unselect)
+  selectChip: "press space to {0}",
+  unselectAction: "unselect",
+  selectAction: "select",
+  addToSelection: "add this option to selection",
+  removeFromSelection: "remove this option from selection",
+  removeChip: "press Backspace to remove the currently focused value",
+  titleDisabled: "Disabled",
+  titleRemovable: "Remove filter",
+  titleDeactivate: "Deactivate property",
+  titleActivate: "Activate property"
+}, $ = {
+  disabled: "deaktiviert",
+  selected: "ausgewählt",
+  // {0} is the action (e.g., select/unselect)
+  selectChip: "drücke Leertaste, um {0}",
+  unselectAction: "abzuwählen",
+  selectAction: "auszuwählen",
+  addToSelection: "diese Option zur Auswahl hinzuzufügen",
+  removeFromSelection: "diese Option aus der Auswahl zu entfernen",
+  removeChip: "drücke Backspace, um den aktuell fokussierten Wert zu entfernen",
+  titleDisabled: "Deaktiviert",
+  titleRemovable: "Filter entfernen",
+  titleDeactivate: "Eigenschaft deaktivieren",
+  titleActivate: "Eigenschaft aktivieren"
+}, k = {
+  en: R,
+  de: $
+}, E = (e, i, r, t, n, s) => r ? `${i}, ${e("disabled")}` : s ? `${i}, ${e("removeChip")}` : `${i}, ${t ? `${e("selected")}, ` : ""}${e(
+  "selectChip",
+  [
+    e(n === "single" ? t ? "unselectAction" : "selectAction" : t ? "removeFromSelection" : "addToSelection")
+  ]
+)}`, G = (e, i, r, t) => e(i ? "titleDisabled" : t ? "titleRemovable" : r ? "titleDeactivate" : "titleActivate"), x = w(
+  ({
+    id: e,
+    label: i,
+    groupId: r,
+    isRemovable: t,
+    selectionMode: n,
+    disabled: s = !1,
+    iconName: c,
+    isSelected: l,
+    lang: m = "en",
+    size: v,
+    tabIndex: f,
+    translations: S,
+    onClick: D,
+    ...A
+  }, g) => {
+    const p = y(
+      S || k[m]
+    ), C = _(h.chip, {
+      [h.chipSmall]: v === "small"
+    });
+    return /* @__PURE__ */ o.jsxs(
+      "div",
+      {
+        role: "row",
+        "aria-label": E(
+          p,
+          i,
+          s,
+          l,
+          n,
+          t
+        ),
+        "aria-selected": l && !t,
+        "aria-disabled": s && !t,
+        id: `${r}-chip-${e}`,
+        className: C,
+        tabIndex: f,
+        onClick: D,
+        ref: g,
+        ...A,
+        title: G(p, s, l, t),
+        children: [
+          /* @__PURE__ */ o.jsxs("div", { role: "gridcell", "aria-colindex": 1, style: { display: "contents" }, children: [
+            c && /* @__PURE__ */ o.jsx(d, { name: c, "aria-hidden": "true" }),
+            i
+          ] }),
+          t && /* @__PURE__ */ o.jsx(d, { name: "cross" })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "DSChip";
+export {
+  U as C,
+  R as D,
+  H as a,
+  $ as b,
+  k as c,
+  G as d,
+  x as e,
+  E as g,
+  F as v
+};