@stihl-design-system/components 1.0.0-RC.47 → 1.0.0-RC.48

package/chunks/Checkbox.BxOGR1bR.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { c as k } from "./index.DQOqod3i.js";
+import { forwardRef as L, useRef as V, useState as $, useEffect as A, useCallback as O } from "react";
+import { D as C } from "./Icon.DYtaQgbw.js";
+import { D as G } from "./SystemFeedback.DhWcYjnu.js";
+import { g as v } from "./helpers.CexwVao7.js";
+import { u as T } from "./useBreakpoint.1txsny17.js";
+import '../assets/Checkbox.C6RWhy0V.css';const U = "ds-checkbox_root_1fk9p_1", z = "ds-checkbox_root--disabled_1fk9p_21", J = "ds-checkbox_root--dark_1fk9p_24", K = "ds-checkbox_checkbox_1fk9p_48", Q = "ds-checkbox_icon-check_1fk9p_64", R = "ds-checkbox_icon-minus_1fk9p_65", W = "ds-checkbox_checkbox--dark_1fk9p_89", X = "ds-checkbox_checkbox--invalid_1fk9p_130", Y = "ds-checkbox_label--hidden_1fk9p_139", Z = "ds-checkbox_input_1fk9p_152", ee = "ds-checkbox_label_1fk9p_139", ce = "ds-checkbox_input--dark_1fk9p_265", oe = "ds-checkbox_feedback_1fk9p_338", e = {
+  root: U,
+  rootDisabled: z,
+  rootDark: J,
+  checkbox: K,
+  iconCheck: Q,
+  iconMinus: R,
+  checkboxDark: W,
+  checkboxInvalid: X,
+  labelHidden: Y,
+  input: Z,
+  label: ee,
+  inputDark: ce,
+  feedback: oe
+}, ae = ({
+  label: t,
+  id: o,
+  invalid: s,
+  systemFeedback: i
+}) => {
+  if (!t)
+    throw new Error(v("DSCheckbox", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSCheckbox component. If you don't want to display a label, set hideLabel={true}.`));
+  if (i && s && !o)
+    throw new Error(v("DSCheckbox", `A unique "id" prop is required when passing in the systemFeedback prop and setting invalid to true. Please add a unique "id" prop to the DSCheckbox component with label: "${t}".`));
+}, se = L((t, o) => {
+  const {
+    label: s,
+    checkboxGroupId: i,
+    checked: _,
+    className: y,
+    defaultChecked: N = !1,
+    disabled: r = !1,
+    hideLabel: g = !1,
+    id: b,
+    indeterminate: m = !1,
+    invalid: a = !1,
+    systemFeedback: d,
+    theme: x = "light",
+    onChange: h,
+    ...S
+  } = t;
+  process.env.NODE_ENV !== "production" && ae({
+    label: s,
+    id: b,
+    invalid: a,
+    systemFeedback: d
+  });
+  const p = x === "dark", l = V(null), [w, I] = $(N), E = T(g);
+  A(() => {
+    l && l.current && (l.current.indeterminate = m);
+  }, [m]);
+  const u = _ !== void 0, q = u ? _ : w, D = `${b}-feedback`, F = [a && d && D, a && i && `${i}-feedback`].filter(Boolean).join(" ") || void 0, M = k(e.root, {
+    [e.rootDark]: p,
+    [e.rootDisabled]: r
+  }), P = k(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: E
+  }), j = k(e.checkbox, {
+    [e.checkboxDark]: p,
+    [e.checkboxInvalid]: a
+  }), B = k(e.input, {
+    [e.inputDark]: p
+  }), H = O((c) => {
+    if (r) {
+      c.preventDefault();
+      return;
+    }
+    u || I(c.target.checked), h && h(c);
+  }, [r, u, h]);
+  return /* @__PURE__ */ f("div", { className: y, children: [
+    /* @__PURE__ */ f("label", { className: M, children: [
+      /* @__PURE__ */ n("input", { id: b, type: "checkbox", className: B, ref: (c) => {
+        typeof o == "function" ? o(c) : o !== null && (o.current = c), l.current = c;
+      }, ...S, checked: q, disabled: r, "aria-label": s, "aria-describedby": F, "aria-invalid": a, onChange: H }),
+      /* @__PURE__ */ f("div", { className: j, children: [
+        /* @__PURE__ */ n(C, { name: "check", className: e.iconCheck, "aria-hidden": "true" }),
+        /* @__PURE__ */ n(C, { name: "minus", className: e.iconMinus, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ n("span", { className: P, children: s })
+    ] }),
+    a && d && /* @__PURE__ */ n(G, { id: D, variant: "error", className: e.feedback, message: d, theme: x })
+  ] });
+});
+se.displayName = "DSCheckbox";
+export {
+  se as D,
+  ae as v
+};

package/chunks/CheckboxGroup.TneO0tuE.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as L } from "react/jsx-runtime";
+import { d as H } from "./index.cKLI89Eg.js";
+import { c as O } from "./index.DQOqod3i.js";
+import { D as T } from "./Fieldset.BBMuLKps.js";
+import P from "react";
+import { D as V } from "./Checkbox.BxOGR1bR.js";
+import { g as x, r as $ } from "./helpers.CexwVao7.js";
+import '../assets/CheckboxGroup.Dd-Huo7x.css';const j = "ds-checkbox-group_root_12fot_1", M = "ds-checkbox-group_root--horizontal_12fot_9", R = "ds-checkbox-group_root--invalid_12fot_12", I = {
+  root: j,
+  rootHorizontal: M,
+  rootInvalid: R
+}, A = ({
+  children: k,
+  description: e,
+  hideLegend: p,
+  id: t,
+  legend: s,
+  popoverContent: r,
+  systemFeedback: i
+}) => {
+  if (!t && (e || i))
+    throw new Error(x("DSCheckboxGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSCheckboxGroup component.'));
+  if (!s)
+    throw new Error(x("DSCheckboxGroup", $("legend", "DSCheckboxGroup")));
+  if (!k)
+    throw new Error(x("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."));
+  p && r && console.warn(x("DSCheckboxGroup", 'Setting "hideLegend" and "popoverContent" at the same time is not supported. The popover info button is part of the legend and will be hidden along with it. Please remove either "hideLegend" or "popoverContent".')), P.Children.forEach(k, (o) => {
+    if (!P.isValidElement(o) || // Object.keys(child.type)[1] !== '_payload' checks if the object is currently in a hydration phase
+    o.type !== V && Object.keys(o.type)[1] !== "_payload") {
+      const n = P.isValidElement(o) ? `Currently you are passing a child of type: ${JSON.stringify(o.type)}.` : "Currently you are passing an invalid React element.";
+      throw new Error(x("DSCheckboxGroup", `The component requires the children to be DSCheckbox elements. ${n} Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group.`));
+    }
+  });
+}, Y = (k) => {
+  const e = H.c(39), p = k;
+  let t, s, r, i, o, n, l, a, c, h, u, m, f, b, v;
+  e[0] !== p ? ({
+    children: t,
+    legend: o,
+    className: s,
+    description: r,
+    direction: h,
+    disabled: u,
+    hideLegend: m,
+    id: i,
+    invalid: f,
+    popoverContent: n,
+    popoverInfoButtonProps: l,
+    required: b,
+    systemFeedback: c,
+    theme: v,
+    ...a
+  } = p, e[0] = p, e[1] = t, e[2] = s, e[3] = r, e[4] = i, e[5] = o, e[6] = n, e[7] = l, e[8] = a, e[9] = c, e[10] = h, e[11] = u, e[12] = m, e[13] = f, e[14] = b, e[15] = v) : (t = e[1], s = e[2], r = e[3], i = e[4], o = e[5], n = e[6], l = e[7], a = e[8], c = e[9], h = e[10], u = e[11], m = e[12], f = e[13], b = e[14], v = e[15]);
+  const F = h === void 0 ? "vertical" : h, w = u === void 0 ? !1 : u, g = m === void 0 ? !1 : m, C = f === void 0 ? !1 : f, _ = b === void 0 ? !1 : b, E = v === void 0 ? "light" : v;
+  process.env.NODE_ENV !== "production" && A({
+    children: t,
+    description: r,
+    hideLegend: g,
+    id: i,
+    legend: o,
+    popoverContent: n,
+    systemFeedback: c
+  });
+  const G = F === "horizontal", q = C && !!c;
+  let D;
+  e[16] !== G || e[17] !== q ? (D = O(I.root, {
+    [I.rootHorizontal]: G,
+    [I.rootInvalid]: q
+  }), e[16] = G, e[17] = q, e[18] = D) : D = e[18];
+  const N = D;
+  let S;
+  e[19] !== E ? (S = {
+    theme: E
+  }, e[19] = E, e[20] = S) : S = e[20];
+  const z = S;
+  let d;
+  e[21] !== t || e[22] !== N ? (d = /* @__PURE__ */ L("div", { className: N, children: t }), e[21] = t, e[22] = N, e[23] = d) : d = e[23];
+  let y;
+  return e[24] !== s || e[25] !== r || e[26] !== w || e[27] !== g || e[28] !== i || e[29] !== C || e[30] !== o || e[31] !== n || e[32] !== l || e[33] !== _ || e[34] !== a || e[35] !== c || e[36] !== z || e[37] !== d ? (y = /* @__PURE__ */ L(T, { id: i, legend: o, className: s, description: r, disabled: w, hideLegend: g, required: _, invalid: C, systemFeedback: c, popoverContent: n, popoverInfoButtonProps: l, ...z, ...a, children: d }), e[24] = s, e[25] = r, e[26] = w, e[27] = g, e[28] = i, e[29] = C, e[30] = o, e[31] = n, e[32] = l, e[33] = _, e[34] = a, e[35] = c, e[36] = z, e[37] = d, e[38] = y) : y = e[38], y;
+};
+export {
+  Y as D,
+  A as v
+};

package/chunks/Chip.DffaXMkV.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsxs as O, jsx as I } from "react/jsx-runtime";
+import { d as j } from "./index.cKLI89Eg.js";
+import { c as B } from "./index.DQOqod3i.js";
+import { forwardRef as W } from "react";
+import { D as q } from "./Icon.DYtaQgbw.js";
+import { Tooltip as z } from "../tooltip.BFQG-7VR.js";
+import { g as x, r as H } from "./helpers.CexwVao7.js";
+import { t as Z } from "./translate.DSb-TdWR.js";
+import '../assets/Chip.DfamkUPw.css';const J = "ds-chip-group_chip_kwgno_1", K = "ds-chip-group_chip--small_kwgno_30", Q = "ds-chip-group_chip--dark_kwgno_133", F = {
+  chip: J,
+  chipSmall: K,
+  chipDark: Q
+}, pe = ({
+  chips: t,
+  id: l,
+  label: e
+}) => {
+  if (!Array.isArray(t))
+    throw new Error(x("DSChipGroup", H("chips", "DSChipGroup")));
+  if (!l)
+    throw new Error(x("DSChipGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSChipGroup component.'));
+  if (!e)
+    throw new Error(x("DSChipGroup", H("label", "DSChipGroup")));
+}, de = ["medium", "small"], V = {
+  disabled: "disabled",
+  selected: "selected",
+  notSelected: "not selected",
+  removed: "removed",
+  selectChip: "press space to {action}",
+  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",
+  tooltipDisabled: "Disabled",
+  tooltipRemovable: "Remove filter",
+  tooltipDeactivate: "Deactivate property",
+  tooltipActivate: "Activate property",
+  countSelected: "{count, plural, one {# item selected} other {# items selected}}",
+  countRemaining: "{count, plural, one {# item remaining} other {# items remaining}}"
+}, X = {
+  disabled: "deaktiviert",
+  selected: "ausgewählt",
+  notSelected: "nicht ausgewählt",
+  removed: "entfernt",
+  selectChip: "drücke Leertaste, um {action}",
+  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",
+  tooltipDisabled: "Deaktiviert",
+  tooltipRemovable: "Filter entfernen",
+  tooltipDeactivate: "Eigenschaft deaktivieren",
+  tooltipActivate: "Eigenschaft aktivieren",
+  countSelected: "{count, plural, one {# Element ausgewählt} other {# Elemente ausgewählt}}",
+  countRemaining: "{count, plural, one {# Element verbleibend} other {# Elemente verbleibend}}"
+}, U = {
+  en: V,
+  de: X
+}, Y = (t, l, e, i, a, r) => {
+  if (e)
+    return `${l}, ${t("disabled")}`;
+  if (r)
+    return `${l}, ${t("removeChip")}`;
+  {
+    const c = t(a === "single" ? i ? "unselectAction" : "selectAction" : i ? "removeFromSelection" : "addToSelection");
+    return `${l}, ${i ? `${t("selected")}, ` : ""}${t("selectChip", {
+      action: c
+    })}`;
+  }
+}, ee = (t, l, e, i) => t(i ? "tooltipRemovable" : l ? "tooltipDisabled" : e ? "tooltipDeactivate" : "tooltipActivate"), te = W((t, l) => {
+  const e = j.c(54);
+  let i, a, r, c, o, p, n, m, h, u, f, _, C, A, v, S;
+  e[0] !== t ? ({
+    id: c,
+    label: n,
+    disableTooltips: i,
+    groupId: a,
+    isRemovable: o,
+    selectionMode: u,
+    disabled: _,
+    iconName: r,
+    isSelected: p,
+    lang: C,
+    size: f,
+    tabIndex: v,
+    theme: A,
+    translations: S,
+    onClick: m,
+    ...h
+  } = t, e[0] = t, e[1] = i, e[2] = a, e[3] = r, e[4] = c, e[5] = o, e[6] = p, e[7] = n, e[8] = m, e[9] = h, e[10] = u, e[11] = f, e[12] = _, e[13] = C, e[14] = A, e[15] = v, e[16] = S) : (i = e[1], a = e[2], r = e[3], c = e[4], o = e[5], p = e[6], n = e[7], m = e[8], h = e[9], u = e[10], f = e[11], _ = e[12], C = e[13], A = e[14], v = e[15], S = e[16]);
+  const k = _ === void 0 ? !1 : _, w = C === void 0 ? "en" : C, s = A === void 0 ? "light" : A;
+  let d, g;
+  if (e[17] !== i || e[18] !== k || e[19] !== a || e[20] !== r || e[21] !== c || e[22] !== o || e[23] !== p || e[24] !== n || e[25] !== w || e[26] !== m || e[27] !== l || e[28] !== h || e[29] !== u || e[30] !== f || e[31] !== v || e[32] !== s || e[33] !== S) {
+    g = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
+    e: {
+      const L = Z(S || U[w] || U.en, w), N = s === "dark", P = f === "small";
+      let y;
+      e[36] !== N || e[37] !== P ? (y = B(F.chip, {
+        [F.chipDark]: N,
+        [F.chipSmall]: P
+      }), e[36] = N, e[37] = P, e[38] = y) : y = e[38];
+      const M = y;
+      let R;
+      e[39] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (R = {
+        display: "contents"
+      }, e[39] = R) : R = e[39];
+      let b;
+      e[40] !== r || e[41] !== s ? (b = r && /* @__PURE__ */ I(q, { name: r, theme: s, "aria-hidden": "true" }), e[40] = r, e[41] = s, e[42] = b) : b = e[42];
+      let E;
+      e[43] !== n || e[44] !== b ? (E = /* @__PURE__ */ O("div", { role: "gridcell", "aria-colindex": 1, style: R, children: [
+        b,
+        n
+      ] }), e[43] = n, e[44] = b, e[45] = E) : E = e[45];
+      let T;
+      if (e[46] !== o || e[47] !== s ? (T = o && /* @__PURE__ */ I(q, { name: "cross", theme: s }), e[46] = o, e[47] = s, e[48] = T) : T = e[48], d = /* @__PURE__ */ O("div", { role: "row", "aria-label": Y(L, n, k, p, u, o), "aria-selected": p && !o, "aria-disabled": k && !o, id: `${a}-chip-${c}`, className: M, tabIndex: v, onClick: m, ref: l, ...h, children: [
+        E,
+        T
+      ] }), !i) {
+        let D;
+        e[49] !== d ? (D = /* @__PURE__ */ I(z.Anchor, { children: d }), e[49] = d, e[50] = D) : D = e[50];
+        const $ = /* @__PURE__ */ I(z.Content, { children: ee(L, k, p, o) });
+        let G;
+        e[51] !== D || e[52] !== $ ? (G = /* @__PURE__ */ O(z, { placement: "top", tooltipOffset: 6, children: [
+          D,
+          $
+        ] }), e[51] = D, e[52] = $, e[53] = G) : G = e[53], g = G;
+        break e;
+      }
+    }
+    e[17] = i, e[18] = k, e[19] = a, e[20] = r, e[21] = c, e[22] = o, e[23] = p, e[24] = n, e[25] = w, e[26] = m, e[27] = l, e[28] = h, e[29] = u, e[30] = f, e[31] = v, e[32] = s, e[33] = S, e[34] = d, e[35] = g;
+  } else
+    d = e[34], g = e[35];
+  return g !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel") ? g : d;
+});
+te.displayName = "DSChip";
+export {
+  de as C,
+  U as D,
+  X as a,
+  V as b,
+  ee as c,
+  te as d,
+  Y as g,
+  pe as v
+};