@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/chunks/Popover.C5wtha5l.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx as m, jsxs as O, Fragment as q } from "react/jsx-runtime";
+import { d as H } from "./index.cKLI89Eg.js";
+import { useState as J, useRef as K, useMemo as Q, createContext as X, forwardRef as I, isValidElement as Y, cloneElement as Z, useContext as ee } from "react";
+import { u as oe, o as te, j as re, s as se, k as ne, a as ae, b as ce, c as ie, d as le, e as pe, f as j, g as de, l as ue, F as he, i as ve } from "./floating-ui.react.CP5A99-c.js";
+import { c as k } from "./index.DQOqod3i.js";
+import { g as b, c as M } from "./helpers.CexwVao7.js";
+import { D as fe } from "./Button.DpGeheky.js";
+import '../assets/Popover.mL5g23EK.css';const me = "ds-popover_popover_xg81f_5", ge = "ds-popover_popover--no-arrow_xg81f_64", we = "ds-popover_popover--variant-grey_xg81f_67", Pe = "ds-popover_arrow_xg81f_71", De = "ds-popover_arrow--variant-grey_xg81f_90", Se = "ds-popover_default-anchor_xg81f_107", _ = {
+  popover: me,
+  popoverNoArrow: ge,
+  popoverVariantGrey: we,
+  arrow: Pe,
+  arrowVariantGrey: De,
+  defaultAnchor: Se
+}, Ae = ({
+  initialOpen: t = !1,
+  placement: o = "bottom",
+  isOpen: e,
+  popoverOffset: r = 6,
+  showArrow: a = !0,
+  variant: l = "default",
+  defaultAnchorButtonProps: p,
+  onOpenChange: d
+} = {}) => {
+  const [s, h] = J(t), c = e ?? s, n = d ?? h, i = K(null), u = oe({
+    placement: o,
+    open: c,
+    strategy: "fixed",
+    onOpenChange: n,
+    whileElementsMounted: ae,
+    middleware: [te(r + (a ? 7 : 0)), re({
+      // default configuration taken from https://floating-ui.com/docs/flip
+      crossAxis: o.includes("-"),
+      fallbackAxisSideDirection: "end",
+      padding: r
+    }), se({
+      padding: r
+    }), ...a ? [ne({
+      element: i
+    })] : []]
+  }), v = u.context, C = ce(v, {
+    enabled: !0
+  }), w = ie(v), E = le(v), P = pe([C, w, E]);
+  return Q(() => ({
+    open: c,
+    popoverOffset: r,
+    setOpen: n,
+    arrowRef: i,
+    showArrow: a,
+    defaultAnchorButtonProps: p,
+    variant: l,
+    ...P,
+    ...u
+  }), [c, r, n, i, a, p, l, P, u]);
+}, xe = ({
+  children: t,
+  hasContent: o,
+  hasAnchor: e
+}) => {
+  if (!t)
+    throw new Error(b("DSPopover", "A DSPopover must have children."));
+  if (!o && e)
+    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Content> is missing! Please add it to the children of DSPopover."));
+  if (!e && o)
+    throw new Error(b("DSPopover", "A DSPopover must either have no child components for its most basic usage or have both a <DSPopover.Content> and <DSPopover.Anchor> component as a child. <DSPopover.Anchor> is missing! Please add it to the children of DSPopover."));
+}, ye = ({
+  showArrow: t,
+  variant: o
+}) => {
+  o === "grey" && t === !1 && console.warn(b("DSPopover", "The 'grey' variant is only available when 'showArrow' is true. To use the 'grey' variant, please ensure that 'showArrow' is set to true."));
+}, B = X(null), U = () => {
+  const t = ee(B);
+  if (t == null)
+    throw new Error(b("DSPopover", "Components like DSPopover.Anchor or DSPopover.Content must be wrapped in <DSPopover />."));
+  return t;
+}, f = (t) => {
+  const o = H.c(11), {
+    children: e,
+    ...r
+  } = t, a = Ae({
+    ...r
+  }), l = M(e, f.Content), p = M(e, f.Anchor);
+  process.env.NODE_ENV !== "production" && (xe({
+    children: e,
+    hasContent: l,
+    hasAnchor: p
+  }), ye({
+    showArrow: r.showArrow,
+    variant: r.variant
+  }));
+  const d = !l && !p && e !== null;
+  let s;
+  o[0] !== e || o[1] !== d ? (s = d ? /* @__PURE__ */ O(q, { children: [
+    /* @__PURE__ */ m(f.Anchor, {}),
+    /* @__PURE__ */ m(f.Content, { children: e })
+  ] }) : e, o[0] = e, o[1] = d, o[2] = s) : s = o[2];
+  const h = s, c = l || d, n = p || d;
+  let i;
+  o[3] !== a || o[4] !== c || o[5] !== n ? (i = {
+    ...a,
+    hasContent: c,
+    hasAnchor: n
+  }, o[3] = a, o[4] = c, o[5] = n, o[6] = i) : i = o[6];
+  const g = i;
+  let u;
+  return o[7] !== h || o[8] !== g || o[9] !== r ? (u = /* @__PURE__ */ m(B.Provider, { value: g, ...r, children: h }), o[7] = h, o[8] = g, o[9] = r, o[10] = u) : u = o[10], u;
+}, W = I(({
+  children: t,
+  ...o
+}, e) => {
+  const {
+    context: r,
+    defaultAnchorButtonProps: a,
+    refs: l,
+    hasAnchor: p,
+    getReferenceProps: d
+  } = U(), {
+    label: s = "Toggle popover",
+    ...h
+  } = a || {}, c = t ? t?.ref : null, n = j([l.setReference, e, c]);
+  return p && t && Y(t) ? Z(t, d({
+    ref: n,
+    ...o,
+    ...t.props,
+    "data-state": r.open ? "open" : "closed"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  })) : /* @__PURE__ */ m(
+    fe,
+    {
+      ...h,
+      ref: n,
+      type: "button",
+      "data-state": r.open ? "open" : "closed",
+      ...d(o),
+      size: "small",
+      hideLabel: !0,
+      iconName: "circle-info-inverted",
+      variant: "ghost",
+      className: _.defaultAnchor,
+      children: t ?? s
+    }
+  );
+});
+W.displayName = "DSPopover.Anchor";
+const $ = I((t, o) => {
+  const e = H.c(33), {
+    style: r,
+    className: a,
+    classNameArrow: l,
+    children: p,
+    ...d
+  } = t, {
+    context: s,
+    refs: h,
+    floatingStyles: c,
+    showArrow: n,
+    variant: i,
+    getFloatingProps: g,
+    arrowRef: u
+  } = U();
+  let v;
+  e[0] !== o || e[1] !== h.setFloating ? (v = [h.setFloating, o], e[0] = o, e[1] = h.setFloating, e[2] = v) : v = e[2];
+  const C = j(v);
+  let w;
+  e[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (w = {
+    duration: {
+      open: 250,
+      close: 250
+    }
+  }, e[3] = w) : w = e[3];
+  const {
+    isMounted: E,
+    status: P
+  } = de(s, w);
+  if (!E)
+    return null;
+  const R = ve, F = he, L = !1;
+  let D;
+  e[4] !== c || e[5] !== r ? (D = {
+    ...c,
+    ...r
+  }, e[4] = c, e[5] = r, e[6] = D) : D = e[6];
+  const V = !n, G = i === "grey" && n;
+  let S;
+  e[7] !== a || e[8] !== V || e[9] !== G ? (S = k(_.popover, a, {
+    [_.popoverNoArrow]: V,
+    [_.popoverVariantGrey]: G
+  }), e[7] = a, e[8] = V, e[9] = G, e[10] = S) : S = e[10];
+  const z = s.placement, T = g(d);
+  let A;
+  e[11] !== u || e[12] !== l || e[13] !== s || e[14] !== n || e[15] !== i ? (A = n && /* @__PURE__ */ m(ue, { ref: u, context: s, className: k(_.arrow, l, {
+    [_.arrowVariantGrey]: i === "grey" && n
+  }), strokeWidth: 1, tipRadius: 1, width: 16, height: 7 }), e[11] = u, e[12] = l, e[13] = s, e[14] = n, e[15] = i, e[16] = A) : A = e[16];
+  let x;
+  e[17] !== p || e[18] !== s.placement || e[19] !== C || e[20] !== P || e[21] !== A || e[22] !== D || e[23] !== S || e[24] !== T ? (x = /* @__PURE__ */ O("div", { ref: C, style: D, className: S, "data-placement": z, "data-status": P, ...T, children: [
+    A,
+    p
+  ] }), e[17] = p, e[18] = s.placement, e[19] = C, e[20] = P, e[21] = A, e[22] = D, e[23] = S, e[24] = T, e[25] = x) : x = e[25];
+  let y;
+  e[26] !== F || e[27] !== s || e[28] !== x ? (y = /* @__PURE__ */ m(F, { context: s, modal: L, children: x }), e[26] = F, e[27] = s, e[28] = x, e[29] = y) : y = e[29];
+  let N;
+  return e[30] !== R || e[31] !== y ? (N = /* @__PURE__ */ m(R, { children: y }), e[30] = R, e[31] = y, e[32] = N) : N = e[32], N;
+});
+$.displayName = "DSPopover.Content";
+f.Anchor = W;
+f.Content = $;
+f.displayName = "DSPopover";
+export {
+  f as D,
+  ye as a,
+  Ae as u,
+  xe as v
+};

package/chunks/RadioGroup.B-qTH31u.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as T } from "react/jsx-runtime";
+import { d as X } from "./index.cKLI89Eg.js";
+import { c as J } from "./index.DQOqod3i.js";
+import { forwardRef as Y, useState as Z } from "react";
+import { D as oo } from "./Fieldset.7WM7w62l.js";
+import { DSRadio as eo } from "../radio.DxdVKoxe.js";
+import { g, r as W } from "./helpers.CexwVao7.js";
+import '../assets/RadioGroup.q1lQ-HIZ.css';const to = "ds-radio-group_fieldset--custom-area-above_1r3gv_1", ro = "ds-radio-group_root_1r3gv_5", so = "ds-radio-group_root--horizontal_1r3gv_13", io = "ds-radio-group_root--invalid_1r3gv_16", ao = "ds-radio-group_root--custom-area-above_1r3gv_19", no = "ds-radio-group_root--custom-area-above--horizontal_1r3gv_26", H = {
+  fieldsetCustomAreaAbove: to,
+  root: ro,
+  rootHorizontal: so,
+  rootInvalid: io,
+  rootCustomAreaAbove: ao,
+  rootCustomAreaAboveHorizontal: no
+}, lo = (r) => r.some(({
+  hint: s
+}) => !!s), co = (r) => r.some(({
+  customArea: s,
+  isCustomAreaAbove: o
+}) => !!s && !o), F = (r) => r.some(({
+  customArea: s,
+  isCustomAreaAbove: o
+}) => !!s && o), uo = ({
+  legend: r,
+  name: s,
+  options: o,
+  description: d,
+  direction: p,
+  hideUncheckedHints: a,
+  id: t,
+  systemFeedback: n
+}) => {
+  if (!t && (d || n))
+    throw new Error(g("DSRadioGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSRadioGroup component.'));
+  if (!r)
+    throw new Error(g("DSRadioGroup", W("legend", "DSRadioGroup")));
+  if (!s)
+    throw new Error(g("DSRadioGroup", W("name", "DSRadioGroup")));
+  if (Array.isArray(o)) {
+    if (o.length === 0)
+      throw new Error(g("DSRadioGroup", "The options array must not be empty."));
+  } else throw new Error(g("DSRadioGroup", W("options", "DSRadioGroup")));
+  if (p === "horizontal" && co(o))
+    throw new Error(g("DSRadioGroup", "Horizontal direction is not possible when options contain a custom area without isCustomAreaAbove set to true. Please remove custom areas, change direction property to 'vertical' or set isCustomAreaAbove to true."));
+  p === "horizontal" && a && console.warn(g("DSRadioGroup", "Setting 'hideUncheckedHints' to 'true' is not possible when direction is 'horizontal'. Please remove 'hideUncheckedHints' or change direction property to 'vertical'."));
+}, po = Y((r, s) => {
+  const o = X.c(66);
+  let d, p, a, t, n, v, m, e, A, b, C, c, z, G, R, y, E, k;
+  o[0] !== r ? ({
+    legend: n,
+    name: v,
+    options: e,
+    className: d,
+    defaultValue: p,
+    description: a,
+    direction: z,
+    disabled: G,
+    hideUncheckedHints: R,
+    id: t,
+    invalid: y,
+    popoverContent: A,
+    popoverInfoButtonProps: b,
+    required: E,
+    systemFeedback: c,
+    value: k,
+    onChange: m,
+    ...C
+  } = r, o[0] = r, o[1] = d, o[2] = p, o[3] = a, o[4] = t, o[5] = n, o[6] = v, o[7] = m, o[8] = e, o[9] = A, o[10] = b, o[11] = C, o[12] = c, o[13] = z, o[14] = G, o[15] = R, o[16] = y, o[17] = E, o[18] = k) : (d = o[1], p = o[2], a = o[3], t = o[4], n = o[5], v = o[6], m = o[7], e = o[8], A = o[9], b = o[10], C = o[11], c = o[12], z = o[13], G = o[14], R = o[15], y = o[16], E = o[17], k = o[18]);
+  const u = z === void 0 ? "vertical" : z, l = G === void 0 ? !1 : G, h = R === void 0 ? !1 : R, f = y === void 0 ? !1 : y, D = E === void 0 ? !1 : E;
+  process.env.NODE_ENV !== "production" && uo({
+    legend: n,
+    name: v,
+    options: e,
+    description: a,
+    direction: u,
+    hideUncheckedHints: h,
+    id: t,
+    systemFeedback: c
+  });
+  const [K, Q] = Z(p), N = k !== void 0, q = N ? k : K;
+  let x;
+  o[19] !== d || o[20] !== e ? (x = J({
+    [H.fieldsetCustomAreaAbove]: F(e)
+  }, d), o[19] = d, o[20] = e, o[21] = x) : x = o[21];
+  const V = x, M = u === "horizontal", O = f && !!c;
+  let I;
+  o[22] !== u || o[23] !== e || o[24] !== M || o[25] !== O ? (I = J(H.root, {
+    [H.rootHorizontal]: M,
+    [H.rootInvalid]: O,
+    [H.rootCustomAreaAbove]: F(e),
+    [H.rootCustomAreaAboveHorizontal]: F(e) && u === "horizontal"
+  }), o[22] = u, o[23] = e, o[24] = M, o[25] = O, o[26] = I) : I = o[26];
+  const $ = I;
+  let P;
+  o[27] !== l || o[28] !== N || o[29] !== m ? (P = (i) => {
+    if (l) {
+      i.preventDefault();
+      return;
+    }
+    N || Q(i.target.value), m && m(i);
+  }, o[27] = l, o[28] = N, o[29] = m, o[30] = P) : P = o[30];
+  const j = P;
+  let U;
+  o[31] !== h || o[32] !== e ? (U = lo(e) && !h, o[31] = h, o[32] = e, o[33] = U) : U = o[33];
+  const L = U;
+  let S;
+  o[34] !== u || o[35] !== e ? (S = F(e) && u === "horizontal" ? {
+    maxWidth: `calc(${e.length * 400}px + var(--ds-spacing-dynamic-xs))`
+  } : void 0, o[34] = u, o[35] = e, o[36] = S) : S = o[36];
+  let _;
+  o[37] !== L || o[38] !== q || o[39] !== l || o[40] !== h || o[41] !== t || o[42] !== f || o[43] !== v || o[44] !== e || o[45] !== s || o[46] !== D ? (_ = e.map((i) => /* @__PURE__ */ T(eo, { name: v, checked: i.value === q, disabled: l, fieldsetId: t, hideUncheckedHint: h, hint: i.hint, invalid: f, isBold: L, required: D, ref: i.value === q ? s : null, ...i }, t + i.label + i.value + i.hint)), o[37] = L, o[38] = q, o[39] = l, o[40] = h, o[41] = t, o[42] = f, o[43] = v, o[44] = e, o[45] = s, o[46] = D, o[47] = _) : _ = o[47];
+  let w;
+  o[48] !== $ || o[49] !== S || o[50] !== _ ? (w = /* @__PURE__ */ T("div", { className: $, style: S, children: _ }), o[48] = $, o[49] = S, o[50] = _, o[51] = w) : w = o[51];
+  let B;
+  return o[52] !== a || o[53] !== l || o[54] !== V || o[55] !== j || o[56] !== t || o[57] !== f || o[58] !== n || o[59] !== A || o[60] !== b || o[61] !== D || o[62] !== C || o[63] !== c || o[64] !== w ? (B = /* @__PURE__ */ T(oo, { id: t, legend: n, className: V, description: a, disabled: l, required: D, invalid: f, systemFeedback: c, popoverContent: A, popoverInfoButtonProps: b, ...C, role: "radiogroup", onChange: j, children: w }), o[52] = a, o[53] = l, o[54] = V, o[55] = j, o[56] = t, o[57] = f, o[58] = n, o[59] = A, o[60] = b, o[61] = D, o[62] = C, o[63] = c, o[64] = w, o[65] = B) : B = o[65], B;
+});
+po.displayName = "DSRadioGroup";
+export {
+  po as D,
+  co as a,
+  F as b,
+  lo as o,
+  uo as v
+};

package/chunks/Select.DrDVi9lg.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { c as o } from "./index.DQOqod3i.js";
+import { forwardRef as X, useRef as Y, useState as $, useEffect as z } from "react";
+import { u as A } from "./useBreakpoint.1txsny17.js";
+import "./index.cKLI89Eg.js";
+import { Asterisk as G } from "../asterisk.Dwtdwpkq.js";
+import { D as ee } from "./Icon.m6sMB6vl.js";
+import { D as le } from "./Popover.C5wtha5l.js";
+import { D as se } from "./SystemFeedback.DFN6Y2cw.js";
+import { g as n, r as te } from "./helpers.CexwVao7.js";
+import '../assets/Select.BZYb_HAG.css';const ae = "ds-select_root_1p3qq_1", re = "ds-select_hint_1p3qq_1", ce = "ds-select_label-wrapper_1p3qq_1", oe = "ds-select_label_1p3qq_1", ne = "ds-select_label--disabled_1p3qq_123", ie = "ds-select_label-wrapper--hidden_1p3qq_135", de = "ds-select_feedback_1p3qq_163", pe = "ds-select_select-wrapper_1p3qq_167", he = "ds-select_select_1p3qq_167", me = "ds-select_select--small_1p3qq_181", be = "ds-select_select--invalid_1p3qq_293", _e = "ds-select_select--placeholder_1p3qq_401", fe = "ds-select_chevron_1p3qq_451", Se = "ds-select_chevron--small_1p3qq_455", ue = "ds-select_chevron--disabled_1p3qq_458", e = {
+  root: ae,
+  hint: re,
+  labelWrapper: ce,
+  label: oe,
+  labelDisabled: ne,
+  labelWrapperHidden: ie,
+  feedback: de,
+  selectWrapper: pe,
+  select: he,
+  selectSmall: me,
+  selectInvalid: be,
+  selectPlaceholder: _e,
+  chevron: fe,
+  chevronSmall: Se,
+  chevronDisabled: ue
+}, Ae = ["medium", "small"], qe = ({
+  id: l,
+  label: c,
+  options: r,
+  hideLabel: _,
+  popoverContent: i
+}) => {
+  if (!l)
+    throw new Error(n("DSSelect", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'));
+  if (!c)
+    throw new Error(n("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(r)) {
+    if (r.length === 0)
+      throw new Error(n("DSSelect", "The options array must not be empty."));
+  } else throw new Error(n("DSSelect", te("options", "DSSelect")));
+  _ && i && console.warn(n("DSSelect", "Using a popover when hideLabel is set to true is not supported."));
+}, ve = (l, c, r) => l === "" || c !== void 0 && c !== "" ? !1 : !(r !== void 0 && r !== ""), De = X(({
+  id: l,
+  label: c,
+  options: r,
+  className: _,
+  defaultValue: i,
+  disabled: f = !1,
+  hideLabel: D = !1,
+  hint: S,
+  invalid: d = !1,
+  popoverContent: u,
+  popoverInfoButtonProps: L,
+  placeholder: q = "Select",
+  required: w = !1,
+  size: y = "medium",
+  systemFeedback: v,
+  value: p,
+  onChange: g,
+  ...B
+}, h) => {
+  process.env.NODE_ENV !== "production" && qe({
+    id: l,
+    label: c,
+    options: r,
+    hideLabel: A(D),
+    popoverContent: u
+  });
+  const C = Y(null), [H, N] = $(p), [R, j] = $(ve(q, i, p));
+  z(() => {
+    N(p);
+  }, [p]);
+  const x = (s) => {
+    C.current = s, typeof h == "function" ? h(s) : h && (h.current = s);
+  }, P = A(D), I = `${l}-label`, E = `${l}-feedback`, W = `${l}-hint`, V = S ? ` ${W}` : "", M = [d && v && E].filter(Boolean).join(" ") || void 0, T = (s) => [q && /* @__PURE__ */ a("option", { value: "", children: q }, `${l}-hidden-option-disabled-placeholder`), ...s.map((t) => {
+    if ("options" in t) {
+      const {
+        label: m,
+        options: Q
+      } = t;
+      return /* @__PURE__ */ a("optgroup", { label: m, children: Q.map(k) }, m);
+    } else
+      return k(t);
+  })], k = ({
+    label: s,
+    value: t,
+    isDisabled: m
+  }) => /* @__PURE__ */ a("option", { value: t, disabled: m, children: s }, t), F = o(e.root, _), O = o(e.select, {
+    [e.selectSmall]: y === "small",
+    [e.selectInvalid]: d,
+    [e.selectPlaceholder]: R
+  }), U = o(e.label, {
+    [e.labelDisabled]: f
+  }), Z = o(e.labelWrapper, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelWrapperHidden]: P
+  }), J = o(e.chevron, {
+    [e.chevronSmall]: y === "small",
+    [e.chevronDisabled]: f
+  }), K = (s) => {
+    const {
+      value: t
+    } = s.target;
+    j(t === ""), N(t), g && g(s);
+  };
+  return /* @__PURE__ */ b("div", { className: F, children: [
+    /* @__PURE__ */ b("div", { className: Z, children: [
+      /* @__PURE__ */ b("label", { className: U, id: I, htmlFor: l, children: [
+        c,
+        w && /* @__PURE__ */ a(G, {})
+      ] }),
+      u && !P && /* @__PURE__ */ a(le, { placement: "top", defaultAnchorButtonProps: L, children: u })
+    ] }),
+    S && /* @__PURE__ */ a("div", { className: e.hint, id: W, children: S }),
+    /* @__PURE__ */ b("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ a(
+        "select",
+        {
+          ...B,
+          id: l,
+          ref: x,
+          className: O,
+          "aria-labelledby": `${I}${V}`,
+          "aria-describedby": M,
+          "aria-invalid": d,
+          defaultValue: i,
+          value: H,
+          disabled: f,
+          required: w,
+          onChange: K,
+          children: T(r)
+        }
+      ),
+      /* @__PURE__ */ a(ee, { name: "chevron-down", className: J, "aria-hidden": "true" })
+    ] }),
+    d && v && /* @__PURE__ */ a(se, { className: e.feedback, message: v, variant: "error", id: E })
+  ] });
+});
+De.displayName = "DSSelect";
+export {
+  De as D,
+  Ae as S,
+  ve as g,
+  qe as v
+};