@stihl-design-system/components 1.0.0-RC.0

package/buttonround.c60c8034.js

@@ -0,0 +1,118 @@
+import "./assets/ButtonRound.ca8748cf.css";
+import { j as r } from "./chunks/jsx-runtime.5c071667.js";
+import { c as a } from "./chunks/index.8021d3e0.js";
+import { DSIcon as y } from "./icon.b4211784.js";
+import { DSSpinner as p } from "./spinner.ee015469.js";
+const H = "_root_nejad_49", F = "_root--highlight_nejad_118", O = "_root--dark-highlight_nejad_118", G = "_root--filled_nejad_196", I = "_root--outline_nejad_224", S = "_root--ghost_nejad_251", x = "_root--ghost-flush_nejad_276", L = "_root--small_nejad_282", C = "_root--dark-filled_nejad_357", N = "_root--dark-outline_nejad_416", R = "_root--dark-ghost_nejad_474", B = "_root--dark-ghost-flush_nejad_530", E = "_root--icon-left_nejad_589", T = "_root--icon-only_nejad_605", q = "_root--icon-only-small_nejad_609", w = "_loader_nejad_616", z = "_icon--hidden_nejad_628", A = "_label--hidden_nejad_632", J = "_label--loading_nejad_644", o = {
+  root: H,
+  "root--highlight": "_root--highlight_nejad_118",
+  rootHighlight: F,
+  "root--dark-highlight": "_root--dark-highlight_nejad_118",
+  rootDarkHighlight: O,
+  "root--filled": "_root--filled_nejad_196",
+  rootFilled: G,
+  "root--outline": "_root--outline_nejad_224",
+  rootOutline: I,
+  "root--ghost": "_root--ghost_nejad_251",
+  rootGhost: S,
+  "root--ghost-flush": "_root--ghost-flush_nejad_276",
+  rootGhostFlush: x,
+  "root--small": "_root--small_nejad_282",
+  rootSmall: L,
+  "root--dark-filled": "_root--dark-filled_nejad_357",
+  rootDarkFilled: C,
+  "root--dark-outline": "_root--dark-outline_nejad_416",
+  rootDarkOutline: N,
+  "root--dark-ghost": "_root--dark-ghost_nejad_474",
+  rootDarkGhost: R,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_nejad_530",
+  rootDarkGhostFlush: B,
+  "root--icon-left": "_root--icon-left_nejad_589",
+  rootIconLeft: E,
+  "root--icon-only": "_root--icon-only_nejad_605",
+  rootIconOnly: T,
+  "root--icon-only-small": "_root--icon-only-small_nejad_609",
+  rootIconOnlySmall: q,
+  loader: w,
+  "icon--hidden": "_icon--hidden_nejad_628",
+  iconHidden: z,
+  "label--hidden": "_label--hidden_nejad_632",
+  labelHidden: A,
+  "label--loading": "_label--loading_nejad_644",
+  labelLoading: J
+}, V = ({
+  children: h,
+  aria: c,
+  className: g,
+  dataTrackingid: j,
+  disabled: e = !1,
+  iconName: d = "placeholder",
+  iconSource: _,
+  loading: t = !1,
+  theme: n = "light",
+  variant: l = "filled",
+  onClick: i,
+  ...k
+}) => {
+  const u = a(
+    o.root,
+    o.rootIconOnlySmall,
+    g,
+    {
+      // variant
+      [o.rootFilled]: l === "filled",
+      [o.rootHighlight]: l === "highlight",
+      // dark theme
+      [o.rootDarkFilled]: n === "dark" && l === "filled",
+      [o.rootDarkHighlight]: n === "dark" && l === "highlight"
+    }
+  ), f = a(o.label, o.labelHidden, {
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: t
+  }), m = a(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: t
+  }), b = n === "light" && l === "filled" ? "dark" : "light", D = (s) => {
+    if (e || t) {
+      s.preventDefault();
+      return;
+    }
+    i && i(s);
+  };
+  return /* @__PURE__ */ r.jsxs(
+    "button",
+    {
+      className: u,
+      "data-trackingid": j,
+      type: "button",
+      onClick: D,
+      ...c,
+      ...k,
+      "aria-disabled": e || t,
+      "aria-busy": t,
+      children: [
+        t && /* @__PURE__ */ r.jsx(
+          p,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ r.jsx("span", { className: f, children: h }),
+        (d || _) && /* @__PURE__ */ r.jsx(
+          y,
+          {
+            name: d,
+            theme: b,
+            source: _,
+            className: m,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as DSButtonRound
+};

package/buttonround.d.ts

@@ -0,0 +1 @@
+export * from './components/ButtonRound/ButtonRound'

package/checkbox.7d414047.js

@@ -0,0 +1,112 @@
+import "./assets/Checkbox.84cf6398.css";
+import { j as e } from "./chunks/jsx-runtime.5c071667.js";
+import { c as d } from "./chunks/index.8021d3e0.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 k } from "./icon.b4211784.js";
+import { DSSystemFeedback as V } from "./systemfeedback.6bbd1505.js";
+const w = "_root_1rc21_49", L = "_root--disabled_1rc21_68", O = "_checkbox_1rc21_72", P = "_icon-check_1rc21_86", R = "_icon-minus_1rc21_87", U = "_checkbox--invalid_1rc21_108", q = "_label--hidden_1rc21_113", z = "_input_1rc21_126", A = "_label_1rc21_113", F = "_feedback_1rc21_240", c = {
+  root: w,
+  "root--disabled": "_root--disabled_1rc21_68",
+  rootDisabled: L,
+  checkbox: O,
+  "icon-check": "_icon-check_1rc21_86",
+  iconCheck: P,
+  "icon-minus": "_icon-minus_1rc21_87",
+  iconMinus: R,
+  "checkbox--invalid": "_checkbox--invalid_1rc21_108",
+  checkboxInvalid: U,
+  "label--hidden": "_label--hidden_1rc21_113",
+  labelHidden: q,
+  input: z,
+  label: A,
+  feedback: F
+}, G = I(
+  ({
+    label: _,
+    checked: h,
+    className: m,
+    defaultChecked: f = !1,
+    disabled: s = !1,
+    hideLabel: x = !1,
+    indeterminate: i = !1,
+    invalid: l = !1,
+    systemFeedback: u,
+    onChange: r,
+    ...p
+  }, n) => {
+    const a = H(null), [C, j] = M(f), N = E(x);
+    g(() => {
+      a && a.current && (a.current.indeterminate = i);
+    }, [i]);
+    const t = h !== void 0, b = t ? h : C, D = d(c.root, {
+      [c.rootDisabled]: s
+    }), v = d(c.label, {
+      // hide label only visually to keep them available for assistive technologies
+      [c.labelHidden]: N
+    }), S = d(c.checkbox, {
+      [c.checkboxInvalid]: l
+    }), y = B(
+      (o) => {
+        if (s) {
+          o.preventDefault();
+          return;
+        }
+        t || j(o.target.checked), r && r(o);
+      },
+      [s, t, r]
+    );
+    return /* @__PURE__ */ e.jsxs("div", { className: m, children: [
+      /* @__PURE__ */ e.jsxs("label", { className: D, 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;
+            },
+            ...p,
+            checked: b,
+            disabled: s,
+            "aria-label": _,
+            "aria-invalid": l,
+            "aria-checked": i ? "mixed" : b,
+            onChange: y
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("span", { className: S, children: [
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              name: "check",
+              className: c.iconCheck,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            k,
+            {
+              name: "minus",
+              className: c.iconMinus,
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsx("span", { className: v, children: _ })
+      ] }),
+      l && u && /* @__PURE__ */ e.jsx(
+        V,
+        {
+          className: c.feedback,
+          message: u,
+          type: "invalid"
+        }
+      )
+    ] });
+  }
+);
+G.displayName = "DSCheckbox";
+export {
+  G as DSCheckbox
+};

package/checkbox.d.ts

@@ -0,0 +1 @@
+export * from './components/Checkbox/Checkbox'

package/checkboxgroup.d.ts

@@ -0,0 +1 @@
+export * from './components/CheckboxGroup/CheckboxGroup'

package/checkboxgroup.e9e25471.js

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

package/chunks/360.3f3132d9.js

@@ -0,0 +1,11 @@
+"use client";
+import * as M from "react";
+const u = ({
+  title: L,
+  titleId: j,
+  ...N
+}) => /* @__PURE__ */ M.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#252525", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": j, ...N }, L ? /* @__PURE__ */ M.createElement("title", { id: j }, L) : null, /* @__PURE__ */ M.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__ */ M.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__ */ M.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__ */ M.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" })), I = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMyNTI1MjUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZm9jdXNhYmxlPSJmYWxzZSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNTcyIDUuNTM3Yy45ODEgMCAxLjk0My0uNjk1IDEuOTQzLTIuMjY4IDAtMS41NzQtLjk2Mi0yLjI2OS0xLjk0My0yLjI2OXMtMS45NDQuNjk2LTEuOTQ0IDIuMjY5YzAgMS41NzIuOTYyIDIuMjY4IDEuOTQ0IDIuMjY4bTAtLjgwNmMtLjU3MiAwLS45OTUtLjQ1NS0uOTk1LTEuNDYyIDAtMS4wMDguNDIzLTEuNDYzLjk5NS0xLjQ2M3MuOTk0LjQ1NS45OTQgMS40NjNjMCAxLjAwNy0uNDIyIDEuNDYyLS45OTQgMS40NjIiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik01LjEyNyA0LjAyM2MwIC45OTQtLjc0OCAxLjUxNC0xLjY3NyAxLjUxNC0uODIgMC0xLjQ5NS0uNDM2LTEuNzYyLTEuMDRsLjc4LS40MDNjLjE1Ni4zMDUuNDM2LjYxNy45NDMuNjE3LjQ3NCAwIC43ODYtLjI5OS43ODYtLjczNCAwLS40NDItLjMzOC0uNzIxLS45MS0uNzIxLS4zMTIgMC0uNTIuMDY1LS42MzcuMTFsLS4wNDUtLjA3MS44OTctMS4yMDNjLjA5LS4xMTcuMjItLjI1NC4yMi0uMjU0cy0uMTk0LjAyLS4zNS4wMkgyLjA5OHYtLjhINS4xdi4wNzlsLS44NjUgMS4xN2EyIDIgMCAwIDEtLjI4Ni4zMThjLjYzLjE0MyAxLjE3Ny42MDQgMS4xNzcgMS4zOTgiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjA2NyAzLjk1OGMwIC44Ny0uNjkgMS41NzktMS43MSAxLjU3OS0xIDAtMS43MS0uNjg5LTEuNzEtMS41NCAwLS40MjMuMTc2LS44MjYuNDM2LTEuMjE2bDEuMTY0LTEuNzIzaDEuMDI3bC0uNjUuOTYzYTMgMyAwIDAgMS0uNDg4LjUzM2MuMTE3LS4wNDYuMzI1LS4wNzkuNDQ5LS4wNzkuODE5IDAgMS40ODIuNTk5IDEuNDgyIDEuNDgzbS0yLjQ5IDBjMCAuNDAyLjI5My43Ni43NzQuNzYuNSAwIC43NzMtLjM1Ny43NzMtLjc2IDAtLjQxLS4yNi0uNzgtLjc3My0uNzgtLjQ4MSAwLS43NzQuMzU3LS43NzQuNzhtOS40MDctMS45OTZjMCAuNTMzLS40NjEuOTYyLTEuMDIuOTYyLS41NiAwLTEuMDItLjQyOS0xLjAyLS45NjIgMC0uNTQ2LjQ2LS45NTUgMS4wMi0uOTU1LjU1OSAwIDEuMDIuNDA5IDEuMDIuOTU1bS0xLjQwNCAwYzAgLjIzNC4xNTYuMzk2LjM4NC4zOTYuMjI3IDAgLjM4My0uMTYyLjM4My0uMzk2cy0uMTU2LS4zOS0uMzgzLS4zOWMtLjIyOCAwLS4zODQuMTU2LS4zODQuMzkiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGQ9Ik0yLjAwNiA5Ljk3OWEuOC44IDAgMCAwIC4xOS4yMDljLjIyOS4xOTMuNjIuNDEzIDEuMTkuNjE3LjkyNC4zMyAyLjE4LjU3IDMuNjE0LjY0N1Y5LjgzbDMgMi41OTgtMyAyLjU5OHYtMS41NzJjLTEuNjMtLjA3OS0zLjEyLS4zNS00LjI4Ni0uNzY2LS42OTYtLjI0OC0xLjMzLS41NjgtMS44MS0uOTcyQy40MyAxMS4zMTYgMCAxMC43MzIgMCA5Ljk3OVMuNDMgOC42NDIuOTA1IDguMjRjLjQ3OS0uNDA0IDEuMTEzLS43MjMgMS44MDktLjk3MiAxLjQtLjUgMy4yNy0uNzkgNS4yODYtLjc5IDIuMDE3IDAgMy44ODYuMjkgNS4yODYuNzkuNjk2LjI0OSAxLjMzLjU2OCAxLjgxLjk3Mi40NzMuNDAxLjkwNC45ODQuOTA0IDEuNzM4IDAgLjcyMy0uMzk4IDEuMjktLjg0NyAxLjY4N2E0IDQgMCAwIDEtLjU2NC40MTNxLS4yOTIuMTgtLjYyMi4zMzJjLS43NTkuMzUxLTEuNjk3LjYyMS0yLjczMy44MDFsLS4zNDMtMS45N2MuOTE4LS4xNiAxLjY3OS0uMzg4IDIuMjM1LS42NDZxLjIzNy0uMTEuNDEyLS4yMTguMTgzLS4xMTQuMjkyLS4yMTJhLjguOCAwIDAgMCAuMTYyLS4xODVsLjAwMi0uMDAyYS44LjggMCAwIDAtLjE5LS4yMWMtLjIyOS0uMTkzLS42Mi0uNDEzLTEuMTktLjYxN0MxMS40OCA4Ljc0OCA5Ljg0OCA4LjQ4IDggOC40OGMtMS44NSAwLTMuNDguMjY5LTQuNjEzLjY3My0uNTcxLjIwNC0uOTYyLjQyNC0xLjE5Mi42MTdhLjguOCAwIDAgMC0uMTg5LjIxIi8+PC9zdmc+";
+export {
+  u as ReactComponent,
+  I as default
+};