@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/chunks/Dialog.CudsqNag.js

@@ -0,0 +1,148 @@
+"use client";
+import { j as r } from "./jsx-runtime.C115EyI4.js";
+import { c as l } from "./index.CvOaL64Y.js";
+import { useRef as h, useState as x, useEffect as q } from "react";
+import { DSButton as j } from "../button.M4nXjcUn.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Dialog.BgzebVk4.css';const E = "ds-dialog_root_1e2qq_5", C = "ds-dialog_content-wrapper_1e2qq_159", F = "ds-dialog_content-wrapper--no-footer_1e2qq_165", W = "ds-dialog_close-button_1e2qq_173", k = "ds-dialog_header_1e2qq_186", R = "ds-dialog_content_1e2qq_159", y = "ds-dialog_footer_1e2qq_188", z = "ds-dialog_header--scrollable_1e2qq_209", L = "ds-dialog_header--close-button_1e2qq_218", M = "ds-dialog_content--no-footer_1e2qq_231", H = "ds-dialog_footer--scrollable_1e2qq_238", o = {
+  root: E,
+  "content-wrapper": "ds-dialog_content-wrapper_1e2qq_159",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "ds-dialog_content-wrapper--no-footer_1e2qq_165",
+  contentWrapperNoFooter: F,
+  "close-button": "ds-dialog_close-button_1e2qq_173",
+  closeButton: W,
+  header: k,
+  content: R,
+  footer: y,
+  "header--scrollable": "ds-dialog_header--scrollable_1e2qq_209",
+  headerScrollable: z,
+  "header--close-button": "ds-dialog_header--close-button_1e2qq_218",
+  headerCloseButton: L,
+  "content--no-footer": "ds-dialog_content--no-footer_1e2qq_231",
+  contentNoFooter: M,
+  "footer--scrollable": "ds-dialog_footer--scrollable_1e2qq_238",
+  footerScrollable: H
+}, I = ({ tabIndex: n }) => {
+  if (n || n === 0)
+    throw new Error(
+      B(
+        "DSDialog",
+        "Do not pass the tabindex property to the DSDialog component as it is not interactive and does not receive focus. The DSDialogs contents, including the close button contained in the DSDialog, can receive focus and be interactive."
+      )
+    );
+}, G = ({
+  children: n,
+  className: b,
+  closeButtonLabel: m = "Close dialog",
+  disableBackdropClose: D = !1,
+  footer: s,
+  header: S,
+  hideCloseButton: a = !1,
+  isOpen: d = !1,
+  onClose: c,
+  ...i
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = i;
+    I({
+      tabIndex: e
+    });
+  }
+  const t = h(null), _ = h(null), [f, v] = x(!1);
+  q(() => {
+    const e = _.current;
+    if (e) {
+      const p = () => {
+        v(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      p();
+      const g = new ResizeObserver(p);
+      return g.observe(e), () => {
+        g.disconnect();
+      };
+    }
+  }, []), q(() => {
+    const e = t.current;
+    if (e)
+      return e.addEventListener("close", u), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", u);
+      };
+  }, [d, c]);
+  const u = () => {
+    c && c();
+  }, N = (e) => {
+    D || t.current && e.target === t.current && t.current.close();
+  }, w = () => {
+    t.current && t.current.close();
+  };
+  return /* @__PURE__ */ r.jsx(
+    "dialog",
+    {
+      ...i,
+      ref: t,
+      className: o.root,
+      onMouseDown: (e) => N(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ r.jsxs(
+        "div",
+        {
+          className: l(o.contentWrapper, b, {
+            [o.contentWrapperNoFooter]: !s
+          }),
+          children: [
+            !a && /* @__PURE__ */ r.jsx(
+              j,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => w(),
+                children: m
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "header",
+              {
+                className: l(o.header, {
+                  [o.headerCloseButton]: !a,
+                  [o.headerScrollable]: f
+                }),
+                children: S
+              }
+            ),
+            /* @__PURE__ */ r.jsx(
+              "div",
+              {
+                ref: _,
+                className: l(o.content, {
+                  [o.contentNoFooter]: !s
+                }),
+                tabIndex: 0,
+                children: n
+              }
+            ),
+            s && /* @__PURE__ */ r.jsx(
+              "footer",
+              {
+                className: l(o.footer, {
+                  [o.footerScrollable]: f
+                }),
+                children: s
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  G as D,
+  I as v
+};

package/chunks/Drawer.ueG2Bzr9.js

@@ -0,0 +1,154 @@
+"use client";
+import { j as t } from "./jsx-runtime.C115EyI4.js";
+import { c as n } from "./index.CvOaL64Y.js";
+import { useRef as w, useState as g, useEffect as b } from "react";
+import { DSButton as j } from "../button.M4nXjcUn.js";
+import { g as B } from "./helpers.B1JT5ShS.js";
+import '../assets/Drawer.Bauwxrk7.css';const R = "ds-drawer_root_1qhpc_10", W = "ds-drawer_root--end_1qhpc_68", C = "ds-drawer_content-wrapper_1qhpc_169", F = "ds-drawer_content-wrapper--no-footer_1qhpc_175", k = "ds-drawer_close-button_1qhpc_178", I = "ds-drawer_header_1qhpc_191", O = "ds-drawer_content_1qhpc_169", y = "ds-drawer_footer_1qhpc_193", z = "ds-drawer_header--scrollable_1qhpc_214", L = "ds-drawer_header--close-button_1qhpc_223", M = "ds-drawer_content--no-footer_1qhpc_237", H = "ds-drawer_footer--scrollable_1qhpc_244", o = {
+  root: R,
+  "root--end": "ds-drawer_root--end_1qhpc_68",
+  rootEnd: W,
+  "content-wrapper": "ds-drawer_content-wrapper_1qhpc_169",
+  contentWrapper: C,
+  "content-wrapper--no-footer": "ds-drawer_content-wrapper--no-footer_1qhpc_175",
+  contentWrapperNoFooter: F,
+  "close-button": "ds-drawer_close-button_1qhpc_178",
+  closeButton: k,
+  header: I,
+  content: O,
+  footer: y,
+  "header--scrollable": "ds-drawer_header--scrollable_1qhpc_214",
+  headerScrollable: z,
+  "header--close-button": "ds-drawer_header--close-button_1qhpc_223",
+  headerCloseButton: L,
+  "content--no-footer": "ds-drawer_content--no-footer_1qhpc_237",
+  contentNoFooter: M,
+  "footer--scrollable": "ds-drawer_footer--scrollable_1qhpc_244",
+  footerScrollable: H
+}, K = ["start", "end"], P = ({ tabIndex: c }) => {
+  if (c || c === 0)
+    throw new Error(
+      B(
+        "DSDrawer",
+        "Do not pass the tabindex property to the DSDrawer component as it is not interactive and does not receive focus. The DSDrawers contents, including the close button contained in the DSDrawer, can receive focus and be interactive."
+      )
+    );
+}, Q = ({
+  children: c,
+  className: m,
+  closeButtonLabel: q = "Close modal",
+  disableBackdropClose: D = !1,
+  footer: s,
+  header: S,
+  hideCloseButton: l = !1,
+  position: N = "start",
+  isOpen: d = !1,
+  onClose: a,
+  ..._
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    const { tabIndex: e } = _;
+    P({
+      tabIndex: e
+    });
+  }
+  const r = w(null), p = w(null), [h, v] = g(!1);
+  b(() => {
+    const e = p.current;
+    if (e) {
+      const f = () => {
+        v(
+          e.scrollHeight > e.clientHeight
+        );
+      };
+      f();
+      const u = new ResizeObserver(f);
+      return u.observe(e), () => {
+        u.disconnect();
+      };
+    }
+  }, []), b(() => {
+    const e = r.current;
+    if (e)
+      return e.addEventListener("close", i), d ? e.showModal() : e.close(), () => {
+        e.removeEventListener("close", i);
+      };
+  }, [d, a]);
+  const i = () => {
+    a && a();
+  }, E = (e) => {
+    D || r.current && e.target === r.current && r.current.close();
+  }, x = () => {
+    r.current && r.current.close();
+  };
+  return /* @__PURE__ */ t.jsx(
+    "dialog",
+    {
+      ..._,
+      ref: r,
+      className: n(o.root, {
+        [o.rootEnd]: N === "end"
+      }),
+      onMouseDown: (e) => E(e),
+      "aria-modal": "true",
+      children: /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          className: n(o.contentWrapper, m, {
+            [o.contentWrapperNoFooter]: !s
+          }),
+          children: [
+            !l && /* @__PURE__ */ t.jsx(
+              j,
+              {
+                className: o.closeButton,
+                hideLabel: !0,
+                iconName: "cross",
+                size: "small",
+                type: "button",
+                variant: "ghost",
+                onClick: () => x(),
+                children: q
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              "header",
+              {
+                className: n(o.header, {
+                  [o.headerCloseButton]: !l,
+                  [o.headerScrollable]: h
+                }),
+                children: S
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              "div",
+              {
+                ref: p,
+                className: n(o.content, {
+                  [o.contentNoFooter]: !s
+                }),
+                tabIndex: 0,
+                children: c
+              }
+            ),
+            s && /* @__PURE__ */ t.jsx(
+              "footer",
+              {
+                className: n(o.footer, {
+                  [o.footerScrollable]: h
+                }),
+                children: s
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Q as D,
+  K as a,
+  P as v
+};

package/chunks/Fieldset.Cjmkgxxk.js

@@ -0,0 +1,99 @@
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c } from "./index.CvOaL64Y.js";
+import "react";
+import { Asterisk as y } from "../asterisk.DpzETKdT.js";
+import { DSHeading as v } from "../heading.IPIYc5vW.js";
+import { DSSystemFeedback as w } from "../systemfeedback.C3Pfxxpp.js";
+import { g as j } from "./helpers.B1JT5ShS.js";
+import '../assets/Fieldset.DOdTbb7C.css';const N = "ds-fieldset_root_1opm7_1", E = "ds-fieldset_child-wrapper_1opm7_95", M = "ds-fieldset_legend_1opm7_102", q = "ds-fieldset_legend--utility--m_1opm7_106", C = "ds-fieldset_description_1opm7_118", P = "ds-fieldset_description--small_1opm7_132", T = "ds-fieldset_system-feedback_1opm7_136", i = {
+  root: N,
+  "child-wrapper": "ds-fieldset_child-wrapper_1opm7_95",
+  childWrapper: E,
+  legend: M,
+  "legend--utility--m": "ds-fieldset_legend--utility--m_1opm7_106",
+  legendUtilityM: q,
+  description: C,
+  "description--small": "ds-fieldset_description--small_1opm7_132",
+  descriptionSmall: P,
+  "system-feedback": "ds-fieldset_system-feedback_1opm7_136",
+  systemFeedback: T
+}, U = ({
+  description: r,
+  id: s,
+  legend: a,
+  systemFeedback: t
+}) => {
+  if (!s && (r || t))
+    throw new Error(
+      j(
+        "DSFieldset",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
+      )
+    );
+  if (!a)
+    throw new Error(
+      j(
+        "DSFieldset",
+        "The legend prop is required. Please add the legend prop to the DSFieldset component."
+      )
+    );
+}, H = ({
+  children: r,
+  legend: s,
+  className: a,
+  description: t,
+  disabled: S = !1,
+  id: n,
+  invalid: p = !1,
+  required: m = !1,
+  systemFeedback: o,
+  ...b
+}) => {
+  process.env.NODE_ENV !== "production" && U({ description: t, id: n, legend: s, systemFeedback: o });
+  let d, _, f;
+  const l = typeof s == "object" && s !== void 0;
+  l && ({ headingSize: d, headingTag: _, headingText: f } = s);
+  const g = `${n}-feedback`, h = `${n}-description`, u = [
+    o && g,
+    t && h
+  ].filter(Boolean).join(" "), x = !l || d === "small" || d === "small-uppercase", D = c(i.root, a), F = c(i.legend, {
+    [i.legendUtilityM]: !l
+  }), k = c(i.description, {
+    [i.descriptionSmall]: x
+  });
+  return /* @__PURE__ */ e.jsxs(
+    "fieldset",
+    {
+      className: D,
+      disabled: S,
+      ...b,
+      "aria-invalid": p,
+      "aria-describedby": u || void 0,
+      children: [
+        /* @__PURE__ */ e.jsx("legend", { className: F, children: l ? /* @__PURE__ */ e.jsxs(v, { tag: _, size: d, children: [
+          f,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          s,
+          m && /* @__PURE__ */ e.jsx(y, {})
+        ] }) }),
+        t && /* @__PURE__ */ e.jsx("span", { id: h, className: k, children: t }),
+        p && o && /* @__PURE__ */ e.jsx(
+          w,
+          {
+            id: g,
+            type: "invalid",
+            message: o,
+            className: i.systemFeedback
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: r })
+      ]
+    }
+  );
+};
+export {
+  H as D,
+  U as v
+};