@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.3

package/{checkbox.42617f46.js → checkbox.C2Ga9yTK.js}

@@ -1,50 +1,50 @@
-import "./assets/Checkbox.cde01607.css";
-import { j as c } from "./chunks/jsx-runtime.5c071667.js";
-import { c as u } from "./chunks/index.8021d3e0.js";
+"use client";
+import { j as c } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as d } from "./chunks/index.CvOaL64Y.js";
 import { forwardRef as I, useRef as H, useState as M, useEffect as g, useCallback as B } from "react";
-import { u as E } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { DSIcon as p } from "./icon.b4211784.js";
-import { DSSystemFeedback as V } from "./systemfeedback.8515a4e0.js";
-const w = "_root_vu0p0_49", L = "_root--disabled_vu0p0_68", O = "_checkbox_vu0p0_72", P = "_icon-check_vu0p0_86", R = "_icon-minus_vu0p0_87", U = "_checkbox--invalid_vu0p0_108", q = "_label--hidden_vu0p0_113", z = "_input_vu0p0_126", A = "_label_vu0p0_113", F = "_feedback_vu0p0_240", e = {
+import { u as E } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { DSIcon as b } from "./icon.PX9_1kNB.js";
+import { DSSystemFeedback as V } from "./systemfeedback.C7iXO5A1.js";
+import './assets/checkbox.BsFEWfQe.css';const w = "_root_10jm0_125", L = "_root--disabled_10jm0_144", O = "_checkbox_10jm0_148", P = "_icon-check_10jm0_162", R = "_icon-minus_10jm0_163", U = "_checkbox--invalid_10jm0_184", q = "_label--hidden_10jm0_189", z = "_input_10jm0_202", A = "_label_10jm0_189", F = "_feedback_10jm0_316", e = {
   root: w,
-  "root--disabled": "_root--disabled_vu0p0_68",
+  "root--disabled": "_root--disabled_10jm0_144",
   rootDisabled: L,
   checkbox: O,
-  "icon-check": "_icon-check_vu0p0_86",
+  "icon-check": "_icon-check_10jm0_162",
   iconCheck: P,
-  "icon-minus": "_icon-minus_vu0p0_87",
+  "icon-minus": "_icon-minus_10jm0_163",
   iconMinus: R,
-  "checkbox--invalid": "_checkbox--invalid_vu0p0_108",
+  "checkbox--invalid": "_checkbox--invalid_10jm0_184",
   checkboxInvalid: U,
-  "label--hidden": "_label--hidden_vu0p0_113",
+  "label--hidden": "_label--hidden_10jm0_189",
   labelHidden: q,
   input: z,
   label: A,
   feedback: F
 }, G = I(
   ({
-    label: d,
-    checked: _,
+    label: _,
+    checked: m,
     className: k,
-    defaultChecked: m = !1,
+    defaultChecked: f = !1,
     disabled: s = !1,
-    hideLabel: f = !1,
+    hideLabel: x = !1,
     indeterminate: i = !1,
     invalid: l = !1,
     systemFeedback: h,
     onChange: t,
-    ...x
+    ...j
   }, n) => {
-    const a = H(null), [v, C] = M(m), j = E(f);
+    const a = H(null), [p, C] = M(f), N = E(x);
     g(() => {
       a && a.current && (a.current.indeterminate = i);
     }, [i]);
-    const r = _ !== void 0, b = r ? _ : v, N = u(e.root, {
+    const r = m !== void 0, u = r ? m : p, D = d(e.root, {
       [e.rootDisabled]: s
-    }), D = u(e.label, {
+    }), v = d(e.label, {
       // hide label only visually to keep them available for assistive technologies
-      [e.labelHidden]: j
-    }), S = u(e.checkbox, {
+      [e.labelHidden]: N
+    }), S = d(e.checkbox, {
       [e.checkboxInvalid]: l
     }), y = B(
       (o) => {
@@ -57,7 +57,7 @@ const w = "_root_vu0p0_49", L = "_root--disabled_vu0p0_68", O = "_checkbox_vu0p0
       [s, r, t]
     );
     return /* @__PURE__ */ c.jsxs("div", { className: k, children: [
-      /* @__PURE__ */ c.jsxs("label", { className: N, children: [
+      /* @__PURE__ */ c.jsxs("label", { className: D, children: [
         /* @__PURE__ */ c.jsx(
           "input",
           {
@@ -66,18 +66,18 @@ const w = "_root_vu0p0_49", L = "_root--disabled_vu0p0_68", O = "_checkbox_vu0p0
             ref: (o) => {
               typeof n == "function" ? n(o) : n !== null && (n.current = o), a.current = o;
             },
-            ...x,
-            checked: b,
+            ...j,
+            checked: u,
             disabled: s,
-            "aria-label": d,
+            "aria-label": _,
             "aria-invalid": l,
-            "aria-checked": i ? "mixed" : b,
+            "aria-checked": i ? "mixed" : u,
             onChange: y
           }
         ),
         /* @__PURE__ */ c.jsxs("span", { className: S, children: [
           /* @__PURE__ */ c.jsx(
-            p,
+            b,
             {
               name: "check",
               className: e.iconCheck,
@@ -85,7 +85,7 @@ const w = "_root_vu0p0_49", L = "_root--disabled_vu0p0_68", O = "_checkbox_vu0p0
             }
           ),
           /* @__PURE__ */ c.jsx(
-            p,
+            b,
             {
               name: "minus",
               className: e.iconMinus,
@@ -93,7 +93,7 @@ const w = "_root_vu0p0_49", L = "_root--disabled_vu0p0_68", O = "_checkbox_vu0p0
             }
           )
         ] }),
-        /* @__PURE__ */ c.jsx("span", { className: D, children: d })
+        /* @__PURE__ */ c.jsx("span", { className: v, children: _ })
       ] }),
       l && h && /* @__PURE__ */ c.jsx(
         V,

package/checkboxgroup.Cfxz9bk6.js

@@ -0,0 +1,80 @@
+"use client";
+import { j as u } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as b } from "./chunks/index.CvOaL64Y.js";
+import { DSFieldset as f } from "./fieldset.DGcIKzDI.js";
+import { s as p } from "./chunks/RadioGroup.module.bi3leRes.js";
+import l from "react";
+import { g as i } from "./chunks/helpers.B1JT5ShS.js";
+import { DSCheckbox as D } from "./checkbox.C2Ga9yTK.js";
+const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSCheckboxGroup component.`, S = ({
+  children: o,
+  description: e,
+  id: s,
+  legend: n,
+  systemFeedback: r
+}) => {
+  if (!s && (e || r))
+    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 (!n)
+    throw new Error(
+      i("DSCheckboxGroup", C("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 === D))
+      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,
+  alignment: s = "vertical",
+  className: n,
+  description: r,
+  disabled: t = !1,
+  id: h,
+  invalid: a = !1,
+  required: m = !1,
+  systemFeedback: c,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && S({ children: o, legend: e, description: r, id: h, systemFeedback: c });
+  const d = b(p.root, {
+    // In case of longer copy, use vertical alignment
+    [p.rootHorizontal]: s === "horizontal",
+    [p.rootInvalid]: a && !!c
+  });
+  return /* @__PURE__ */ u.jsx(
+    f,
+    {
+      id: h,
+      legend: e,
+      className: n,
+      description: r,
+      disabled: t,
+      required: m,
+      invalid: a,
+      systemFeedback: c,
+      ...x,
+      children: /* @__PURE__ */ u.jsx("div", { className: d, children: o })
+    }
+  );
+};
+export {
+  y as DSCheckboxGroup
+};

package/chunks/360.CfjUtgxq.js

@@ -0,0 +1,10 @@
+"use client";
+import * as e from "react";
+const t = ({
+  title: l,
+  titleId: c,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": c, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: c }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M11.572 5.537c.981 0 1.943-.695 1.943-2.268 0-1.574-.962-2.269-1.943-2.269s-1.944.696-1.944 2.269c0 1.572.962 2.268 1.944 2.268m0-.806c-.572 0-.995-.455-.995-1.462 0-1.008.423-1.463.995-1.463s.994.455.994 1.463c0 1.007-.422 1.462-.994 1.462", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "M5.127 4.023c0 .994-.748 1.514-1.677 1.514-.82 0-1.495-.436-1.762-1.04l.78-.403c.156.305.436.617.943.617.474 0 .786-.299.786-.734 0-.442-.338-.721-.91-.721-.312 0-.52.065-.637.11l-.045-.071.897-1.203c.09-.117.22-.254.22-.254s-.194.02-.35.02H2.098v-.8H5.1v.079l-.865 1.17a2 2 0 0 1-.286.318c.63.143 1.177.604 1.177 1.398" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", d: "M9.067 3.958c0 .87-.69 1.579-1.71 1.579-1 0-1.71-.689-1.71-1.54 0-.423.176-.826.436-1.216l1.164-1.723h1.027l-.65.963a3 3 0 0 1-.488.533c.117-.046.325-.079.449-.079.819 0 1.482.599 1.482 1.483m-2.49 0c0 .402.293.76.774.76.5 0 .773-.357.773-.76 0-.41-.26-.78-.773-.78-.481 0-.774.357-.774.78m9.407-1.996c0 .533-.461.962-1.02.962-.56 0-1.02-.429-1.02-.962 0-.546.46-.955 1.02-.955.559 0 1.02.409 1.02.955m-1.404 0c0 .234.156.396.384.396.227 0 .383-.162.383-.396s-.156-.39-.383-.39c-.228 0-.384.156-.384.39", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { d: "M2.006 9.979a.8.8 0 0 0 .19.209c.229.193.62.413 1.19.617.924.33 2.18.57 3.614.647V9.83l3 2.598-3 2.598v-1.572c-1.63-.079-3.12-.35-4.286-.766-.696-.248-1.33-.568-1.81-.972C.43 11.316 0 10.732 0 9.979S.43 8.642.905 8.24c.479-.404 1.113-.723 1.809-.972 1.4-.5 3.27-.79 5.286-.79 2.017 0 3.886.29 5.286.79.696.249 1.33.568 1.81.972.473.401.904.984.904 1.738 0 .723-.398 1.29-.847 1.687a4 4 0 0 1-.564.413q-.292.18-.622.332c-.759.351-1.697.621-2.733.801l-.343-1.97c.918-.16 1.679-.388 2.235-.646q.237-.11.412-.218.183-.114.292-.212a.8.8 0 0 0 .162-.185l.002-.002a.8.8 0 0 0-.19-.21c-.229-.193-.62-.413-1.19-.617C11.48 8.748 9.848 8.48 8 8.48c-1.85 0-3.48.269-4.613.673-.571.204-.962.424-1.192.617a.8.8 0 0 0-.189.21" }));
+export {
+  t as default
+};