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

package/buttonround.ddSqXjYf.js

@@ -0,0 +1,118 @@
+"use client";
+import { j as r } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as h } from "./chunks/index.CvOaL64Y.js";
+import { D as H } from "./chunks/Icon.n4XZrQ4N.js";
+import { DSSpinner as p } from "./spinner.DVa112nj.js";
+import './assets/buttonround.pR4StXA7.css';const F = "_root_lfeh_151", O = "_root--highlight_lfeh_219", G = "_root--dark-highlight_lfeh_219", I = "_root--filled_lfeh_297", S = "_root--outline_lfeh_325", x = "_root--ghost_lfeh_352", j = "_root--ghost-flush_lfeh_377", L = "_root--small_lfeh_383", C = "_root--dark-filled_lfeh_460", N = "_root--dark-outline_lfeh_519", R = "_root--dark-ghost_lfeh_577", B = "_root--dark-ghost-flush_lfeh_633", E = "_root--icon-left_lfeh_692", T = "_root--icon-only_lfeh_708", q = "_root--icon-only-small_lfeh_717", w = "_loader_lfeh_734", z = "_icon--hidden_lfeh_746", A = "_label--hidden_lfeh_750", J = "_label--loading_lfeh_762", o = {
+  root: F,
+  "root--highlight": "_root--highlight_lfeh_219",
+  rootHighlight: O,
+  "root--dark-highlight": "_root--dark-highlight_lfeh_219",
+  rootDarkHighlight: G,
+  "root--filled": "_root--filled_lfeh_297",
+  rootFilled: I,
+  "root--outline": "_root--outline_lfeh_325",
+  rootOutline: S,
+  "root--ghost": "_root--ghost_lfeh_352",
+  rootGhost: x,
+  "root--ghost-flush": "_root--ghost-flush_lfeh_377",
+  rootGhostFlush: j,
+  "root--small": "_root--small_lfeh_383",
+  rootSmall: L,
+  "root--dark-filled": "_root--dark-filled_lfeh_460",
+  rootDarkFilled: C,
+  "root--dark-outline": "_root--dark-outline_lfeh_519",
+  rootDarkOutline: N,
+  "root--dark-ghost": "_root--dark-ghost_lfeh_577",
+  rootDarkGhost: R,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_lfeh_633",
+  rootDarkGhostFlush: B,
+  "root--icon-left": "_root--icon-left_lfeh_692",
+  rootIconLeft: E,
+  "root--icon-only": "_root--icon-only_lfeh_708",
+  rootIconOnly: T,
+  "root--icon-only-small": "_root--icon-only-small_lfeh_717",
+  rootIconOnlySmall: q,
+  loader: w,
+  "icon--hidden": "_icon--hidden_lfeh_746",
+  iconHidden: z,
+  "label--hidden": "_label--hidden_lfeh_750",
+  labelHidden: A,
+  "label--loading": "_label--loading_lfeh_762",
+  labelLoading: J
+}, U = ({
+  children: d,
+  aria: f,
+  className: c,
+  dataTrackingid: g,
+  disabled: _ = !1,
+  iconName: i = "placeholder",
+  iconSource: n,
+  loading: l = !1,
+  theme: e = "light",
+  variant: t = "filled",
+  onClick: s,
+  ...k
+}) => {
+  const u = h(
+    o.root,
+    o.rootIconOnlySmall,
+    c,
+    {
+      // variant
+      [o.rootFilled]: t === "filled",
+      [o.rootHighlight]: t === "highlight",
+      // dark theme
+      [o.rootDarkFilled]: e === "dark" && t === "filled",
+      [o.rootDarkHighlight]: e === "dark" && t === "highlight"
+    }
+  ), m = h(o.label, o.labelHidden, {
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: l
+  }), b = h(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: l
+  }), D = e === "light" && t === "filled" ? "dark" : "light", y = (a) => {
+    if (_ || l) {
+      a.preventDefault();
+      return;
+    }
+    s && s(a);
+  };
+  return /* @__PURE__ */ r.jsxs(
+    "button",
+    {
+      className: u,
+      "data-trackingid": g,
+      type: "button",
+      onClick: y,
+      ...f,
+      ...k,
+      "aria-disabled": _ || l,
+      "aria-busy": l,
+      children: [
+        l && /* @__PURE__ */ r.jsx(
+          p,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ r.jsx("span", { className: m, children: d }),
+        (i || n) && /* @__PURE__ */ r.jsx(
+          H,
+          {
+            name: i,
+            theme: D,
+            source: n,
+            className: b,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  U as DSButtonRound
+};

package/checkbox.DNHdo6_n.js

@@ -0,0 +1,113 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as h } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as R, useRef as S, useState as I, useEffect as H, useCallback as M } from "react";
+import { u as g } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { D as x } from "./chunks/Icon.n4XZrQ4N.js";
+import { DSSystemFeedback as B } from "./systemfeedback.CUWch42u.js";
+import './assets/checkbox.BjIn2stV.css';const E = "_checkbox-root_vryww_151", V = "_checkbox-root--disabled_vryww_170", L = "_checkbox_vryww_151", O = "_icon-check_vryww_190", P = "_icon-minus_vryww_191", U = "_checkbox--invalid_vryww_215", q = "_label--hidden_vryww_220", z = "_input_vryww_233", A = "_label_vryww_220", F = "_feedback_vryww_347", c = {
+  "checkbox-root": "_checkbox-root_vryww_151",
+  checkboxRoot: E,
+  "checkbox-root--disabled": "_checkbox-root--disabled_vryww_170",
+  checkboxRootDisabled: V,
+  checkbox: L,
+  "icon-check": "_icon-check_vryww_190",
+  iconCheck: O,
+  "icon-minus": "_icon-minus_vryww_191",
+  iconMinus: P,
+  "checkbox--invalid": "_checkbox--invalid_vryww_215",
+  checkboxInvalid: U,
+  "label--hidden": "_label--hidden_vryww_220",
+  labelHidden: q,
+  input: z,
+  label: A,
+  feedback: F
+}, G = R(
+  ({
+    label: b,
+    checked: _,
+    className: u,
+    defaultChecked: w = !1,
+    disabled: s = !1,
+    hideLabel: m = !1,
+    indeterminate: i = !1,
+    invalid: l = !1,
+    systemFeedback: d,
+    onChange: t,
+    ...f
+  }, n) => {
+    const a = S(null), [v, y] = I(w), p = g(m);
+    H(() => {
+      a && a.current && (a.current.indeterminate = i);
+    }, [i]);
+    const r = _ !== void 0, k = r ? _ : v, C = h(c.checkboxRoot, {
+      [c.checkboxRootDisabled]: s
+    }), j = h(c.label, {
+      // hide label only visually to keep them available for assistive technologies
+      [c.labelHidden]: p
+    }), D = h(c.checkbox, {
+      [c.checkboxInvalid]: l
+    }), N = M(
+      (o) => {
+        if (s) {
+          o.preventDefault();
+          return;
+        }
+        r || y(o.target.checked), t && t(o);
+      },
+      [s, r, t]
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: u, children: [
+      /* @__PURE__ */ e.jsxs("label", { className: C, children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: c.input,
+            ref: (o) => {
+              typeof n == "function" ? n(o) : n !== null && (n.current = o), a.current = o;
+            },
+            ...f,
+            checked: k,
+            disabled: s,
+            "aria-label": b,
+            "aria-invalid": l,
+            "aria-checked": i ? "mixed" : k,
+            onChange: N
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("span", { className: D, children: [
+          /* @__PURE__ */ e.jsx(
+            x,
+            {
+              name: "check",
+              className: c.iconCheck,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            x,
+            {
+              name: "minus",
+              className: c.iconMinus,
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("span", { className: j, children: b })
+      ] }),
+      l && d && /* @__PURE__ */ e.jsx(
+        B,
+        {
+          className: c.feedback,
+          message: d,
+          type: "invalid"
+        }
+      )
+    ] });
+  }
+);
+G.displayName = "DSCheckbox";
+export {
+  G as DSCheckbox
+};

package/checkboxgroup.DqWlzAeR.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "./chunks/Fieldset.B1vsrHNv.js";
+import "./chunks/RadioGroup.module.BBZwHDjW.js";
+import { D as e } from "./chunks/CheckboxGroup.DsQ6lI5a.js";
+export {
+  e as DSCheckboxGroup
+};

package/chunks/{CheckboxGroup.CS6Q_TeZ.js → CheckboxGroup.DsQ6lI5a.js}

@@ -1,19 +1,19 @@
 "use client";
-import { j as u } from "./jsx-runtime.C-kxDJ4g.js";
+import { j as u } from "./jsx-runtime.C115EyI4.js";
 import { c as D } from "./index.CvOaL64Y.js";
-import { D as b } from "./Fieldset.BokeZzG5.js";
-import { s as p } from "./RadioGroup.module.bi3leRes.js";
+import { D as b } from "./Fieldset.B1vsrHNv.js";
+import { s as c } from "./RadioGroup.module.BBZwHDjW.js";
 import l from "react";
 import { g as s } from "./helpers.B1JT5ShS.js";
-import { DSCheckbox as f } from "../checkbox.B43oeMeC.js";
-const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSCheckboxGroup component.`, k = ({
-  children: o,
-  description: e,
+import { DSCheckbox as f } from "../checkbox.DNHdo6_n.js";
+const C = (e) => `The "${e}" prop is required. Please add the "${e}" prop to the DSCheckboxGroup component.`, k = ({
+  children: e,
+  description: o,
   id: i,
   legend: n,
   systemFeedback: r
 }) => {
-  if (!i && (e || r))
+  if (!i && (o || r))
     throw new Error(
       s(
         "DSCheckboxGroup",
@@ -24,14 +24,14 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
     throw new Error(
       s("DSCheckboxGroup", C("legend"))
     );
-  if (!o)
+  if (!e)
     throw new Error(
       s(
         "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) => {
+  l.Children.forEach(e, (t) => {
     if (!(l.isValidElement(t) && t.type === f))
       throw new Error(
         s(
@@ -41,8 +41,8 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
       );
   });
 }, y = ({
-  children: o,
-  legend: e,
+  children: e,
+  legend: o,
   alignment: i = "vertical",
   className: n,
   description: r,
@@ -50,34 +50,34 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
   id: h,
   invalid: a = !1,
   required: m = !1,
-  systemFeedback: c,
+  systemFeedback: p,
   ...x
 }) => {
   process.env.NODE_ENV !== "production" && k({
-    children: o,
-    legend: e,
+    children: e,
+    legend: o,
     description: r,
     id: h,
-    systemFeedback: c
+    systemFeedback: p
   });
-  const d = D(p.root, {
+  const d = D(c.group, {
     // In case of longer copy, use vertical alignment
-    [p.rootHorizontal]: i === "horizontal",
-    [p.rootInvalid]: a && !!c
+    [c.groupHorizontal]: i === "horizontal",
+    [c.groupInvalid]: a && !!p
   });
   return /* @__PURE__ */ u.jsx(
     b,
     {
       id: h,
-      legend: e,
+      legend: o,
       className: n,
       description: r,
       disabled: t,
       required: m,
       invalid: a,
-      systemFeedback: c,
+      systemFeedback: p,
       ...x,
-      children: /* @__PURE__ */ u.jsx("div", { className: d, children: o })
+      children: /* @__PURE__ */ u.jsx("div", { className: d, children: e })
     }
   );
 };