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

package/chunks/{Input.utils.f8f3286f.js → Input.utils.ChV6RJsh.js}

@@ -1,7 +1,9 @@
 "use client";
-import { g as t } from "./helpers.ea3ca41a.js";
-import "react";
-const p = typeof document < "u", a = 8, i = 5, u = [
+import { useLayoutEffect as p, useEffect as u } from "react";
+import { h } from "./useBreakpoint.5xBNDiCf.js";
+import { g as t } from "./helpers.B1JT5ShS.js";
+import { h as l } from "./has-document.r9i9TxKV.js";
+const f = h ? p : u, a = 8, i = 5, U = ["medium", "small"], S = [
   "color",
   "date",
   "datetime-local",
@@ -14,7 +16,7 @@ const p = typeof document < "u", a = 8, i = 5, u = [
   "text",
   "time",
   "url"
-], l = [
+], w = [
   "week",
   "hidden",
   "button",
@@ -26,15 +28,15 @@ const p = typeof document < "u", a = 8, i = 5, u = [
   "submit",
   "image",
   "datetime"
-], I = ({
+], P = ({
   id: e,
   label: n,
   prefix: o,
   suffix: s,
   leadingIconName: r,
   leadingIconSource: d,
-  actionButtonIconName: c,
-  actionButtonIconSource: m
+  actionButtonIconName: m,
+  actionButtonIconSource: c
 }) => {
   if (!e)
     throw new Error(
@@ -65,14 +67,14 @@ const p = typeof document < "u", a = 8, i = 5, u = [
       "DSInput",
       "Prefix and a leading Icon cannot be used at the same time."
     )
-  ), s && (c || m) && console.warn(
+  ), s && (m || c) && console.warn(
     t(
       "DSInput",
       "Suffix and an action button cannot be used at the same time."
     )
   );
-}, b = (e) => {
-  if (!u.includes(e) && !l.includes(e))
+}, g = (e) => {
+  if (!S.includes(e) && !w.includes(e))
     throw new Error(
       t(
         "DSInput",
@@ -94,13 +96,18 @@ const p = typeof document < "u", a = 8, i = 5, u = [
     hidden: 'Type hidden is not supported by DSInput component. Use a default <input type="hidden" /> element instead.'
   };
   n[e] && console.warn(t("DSInput", n[e]));
-}, h = () => p && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), D = (e, n) => h() && (e || n), T = (e) => e === "date" || e === "datetime-local" || e === "month", y = (e) => e === "time";
+}, I = () => l && "showPicker" in HTMLInputElement.prototype && !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i), E = (e, n) => I() && (e || n), k = (e) => e === "date" || e === "datetime-local" || e === "month", x = (e) => e === "time";
 export {
+  U as I,
   a as M,
-  b as a,
-  i as b,
-  y as c,
-  T as i,
-  D as s,
-  I as v
+  S,
+  w as U,
+  i as a,
+  g as b,
+  x as c,
+  I as h,
+  k as i,
+  E as s,
+  f as u,
+  P as v
 };

package/chunks/InputPassword.C7pNeWGx.js

@@ -0,0 +1,143 @@
+"use client";
+import { j as n } from "./jsx-runtime.C115EyI4.js";
+import { c as e } from "./index.CvOaL64Y.js";
+import { useState as A } from "react";
+import { u as C } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as L } from "../asterisk.DDn-yX4P.js";
+import { DSButton as $ } from "../button.C5opEJ6x.js";
+import { DSSystemFeedback as E } from "../systemfeedback.ZzRUAVYX.js";
+import { g as h } from "./helpers.B1JT5ShS.js";
+import '../assets/InputPassword.DOAAzj-O.css';const q = "_input_l9tjo_226", R = "_input--invalid_l9tjo_343", V = "_input--small_l9tjo_350", O = "_input--has-leading-icon_l9tjo_404", F = "_input--has-action-button_l9tjo_407", M = "_input--has-second-action-button_l9tjo_410", T = "_input--has-affix_l9tjo_422", G = "_input--is-ready_l9tjo_436", J = "_root_l9tjo_443", K = "_hint_l9tjo_451", Q = "_label_l9tjo_451", U = "_wrapper_l9tjo_455", W = "_action-button_l9tjo_461", X = "_label--hidden_l9tjo_480", Y = "_label--disabled_l9tjo_493", Z = "_feedback_l9tjo_514", t = {
+  input: q,
+  "input--invalid": "_input--invalid_l9tjo_343",
+  inputInvalid: R,
+  "input--small": "_input--small_l9tjo_350",
+  inputSmall: V,
+  "input--has-leading-icon": "_input--has-leading-icon_l9tjo_404",
+  inputHasLeadingIcon: O,
+  "input--has-action-button": "_input--has-action-button_l9tjo_407",
+  inputHasActionButton: F,
+  "input--has-second-action-button": "_input--has-second-action-button_l9tjo_410",
+  inputHasSecondActionButton: M,
+  "input--has-affix": "_input--has-affix_l9tjo_422",
+  inputHasAffix: T,
+  "input--is-ready": "_input--is-ready_l9tjo_436",
+  inputIsReady: G,
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: U,
+  "action-button": "_action-button_l9tjo_461",
+  actionButton: W,
+  "label--hidden": "_label--hidden_l9tjo_480",
+  labelHidden: X,
+  "label--disabled": "_label--disabled_l9tjo_493",
+  labelDisabled: Y,
+  feedback: Z
+}, z = ({ id: a, label: o }) => {
+  if (!a)
+    throw new Error(
+      h(
+        "DSInputPassword",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputPassword component.'
+      )
+    );
+  if (!o)
+    throw new Error(
+      h(
+        "DSInputPassword",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+}, ut = ({
+  id: a,
+  label: o,
+  autocomplete: j = "new-password",
+  className: f,
+  disabled: i = !1,
+  hidePasswordText: w = "Hide password",
+  hint: l,
+  hideLabel: y = !1,
+  invalid: s = !1,
+  readonly: c = !1,
+  required: r = !1,
+  showPasswordText: S = "Show password",
+  size: u = "medium",
+  systemFeedback: p,
+  ...x
+}) => {
+  process.env.NODE_ENV !== "production" && z({
+    id: a,
+    label: o
+  });
+  const [d, I] = A(!1), _ = `${a}-label`, b = `${a}-feedback`, m = `${a}-hint`, v = l ? ` ${m}` : "", B = C(y), H = e(t.root, f), g = e(t.input, {
+    // small input
+    [t.inputSmall]: u === "small",
+    // invalid state
+    [t.inputInvalid]: s,
+    // action button - input password always has an action button
+    [t.inputHasActionButton]: !0
+  }), D = e(t.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [t.labelHidden]: B,
+    [t.labelDisabled]: i
+  }), P = e(t.actionButton, {
+    [t.actionButtonSmall]: u === "small"
+  }), N = () => {
+    I((k) => !k);
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: H, children: [
+    /* @__PURE__ */ n.jsxs("label", { className: D, id: _, htmlFor: a, children: [
+      o,
+      r && /* @__PURE__ */ n.jsx(L, {})
+    ] }),
+    l && /* @__PURE__ */ n.jsx("div", { className: t.hint, id: m, children: l }),
+    s && p && /* @__PURE__ */ n.jsx(
+      E,
+      {
+        className: t.feedback,
+        message: p,
+        type: "invalid",
+        id: b
+      }
+    ),
+    /* @__PURE__ */ n.jsxs("div", { className: t.wrapper, children: [
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          className: g,
+          id: a,
+          ...x,
+          "aria-labelledby": `${_}${v}`,
+          "aria-describedby": s && p ? b : void 0,
+          "aria-invalid": s,
+          "aria-disabled": c,
+          readOnly: c,
+          required: r,
+          disabled: i,
+          autoComplete: j,
+          type: d ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        $,
+        {
+          hideLabel: !0,
+          theme: "light",
+          iconName: d ? "eye-closed" : "eye",
+          variant: "ghost",
+          className: P,
+          size: u,
+          onClick: N,
+          type: "button",
+          disabled: i,
+          children: d ? w : S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  ut as D,
+  z as v
+};

package/{inputsearch.6e913fc6.js → chunks/InputSearch.B24rcIJ_.js}

@@ -1,40 +1,42 @@
-import "./assets/InputSearch.888f630a.css";
-import { j as e } from "./chunks/jsx-runtime.5c071667.js";
-import { c } from "./chunks/index.8021d3e0.js";
-import { useState as J, useRef as w, useEffect as A } from "react";
-import { g as y, a as K } from "./chunks/helpers.ea3ca41a.js";
-import { u as Q } from "./chunks/useBreakpoint.6c1b06c2.js";
-import { Asterisk as U } from "./asterisk.cb74ea72.js";
-import { DSButton as D } from "./button.87ad387c.js";
-import { DSSystemFeedback as X } from "./systemfeedback.8515a4e0.js";
-const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small_1ym7n_190", tt = "_input--has-leading-icon_1ym7n_236", nt = "_input--has-action-button_1ym7n_239", et = "_input--has-second-action-button_1ym7n_242", at = "_input--has-affix_1ym7n_254", ot = "_input--is-ready_1ym7n_266", st = "_root_1ym7n_273", it = "_hint_1ym7n_281", ct = "_label_1ym7n_281", ut = "_wrapper_1ym7n_285", lt = "_action-button_1ym7n_291", rt = "_second-action-button_1ym7n_295", pt = "_label--hidden_1ym7n_312", mt = "_feedback_1ym7n_339", t = {
+"use client";
+import { j as e } from "./jsx-runtime.C115EyI4.js";
+import { c as l } from "./index.CvOaL64Y.js";
+import { useState as J, useRef as N, useEffect as w } from "react";
+import { g as y, a as K } from "./helpers.B1JT5ShS.js";
+import { u as Q } from "./useBreakpoint.5xBNDiCf.js";
+import { Asterisk as U } from "../asterisk.DDn-yX4P.js";
+import { DSButton as A } from "../button.C5opEJ6x.js";
+import { DSSystemFeedback as X } from "../systemfeedback.ZzRUAVYX.js";
+import '../assets/InputSearch.CxPYaQGZ.css';const Y = "_input_eh22y_226", Z = "_input--invalid_eh22y_343", z = "_input--small_eh22y_350", tt = "_input--has-leading-icon_eh22y_404", nt = "_input--has-action-button_eh22y_407", et = "_input--has-second-action-button_eh22y_410", at = "_input--has-affix_eh22y_422", st = "_input--is-ready_eh22y_436", ot = "_root_eh22y_443", it = "_hint_eh22y_451", ct = "_label_eh22y_451", lt = "_wrapper_eh22y_455", ut = "_action-button_eh22y_461", rt = "_second-action-button_eh22y_465", pt = "_label--hidden_eh22y_484", ht = "_label--disabled_eh22y_497", _t = "_feedback_eh22y_518", t = {
   input: Y,
-  "input--invalid": "_input--invalid_1ym7n_183",
+  "input--invalid": "_input--invalid_eh22y_343",
   inputInvalid: Z,
-  "input--small": "_input--small_1ym7n_190",
+  "input--small": "_input--small_eh22y_350",
   inputSmall: z,
-  "input--has-leading-icon": "_input--has-leading-icon_1ym7n_236",
+  "input--has-leading-icon": "_input--has-leading-icon_eh22y_404",
   inputHasLeadingIcon: tt,
-  "input--has-action-button": "_input--has-action-button_1ym7n_239",
+  "input--has-action-button": "_input--has-action-button_eh22y_407",
   inputHasActionButton: nt,
-  "input--has-second-action-button": "_input--has-second-action-button_1ym7n_242",
+  "input--has-second-action-button": "_input--has-second-action-button_eh22y_410",
   inputHasSecondActionButton: et,
-  "input--has-affix": "_input--has-affix_1ym7n_254",
+  "input--has-affix": "_input--has-affix_eh22y_422",
   inputHasAffix: at,
-  "input--is-ready": "_input--is-ready_1ym7n_266",
-  inputIsReady: ot,
-  root: st,
+  "input--is-ready": "_input--is-ready_eh22y_436",
+  inputIsReady: st,
+  root: ot,
   hint: it,
   label: ct,
-  wrapper: ut,
-  "action-button": "_action-button_1ym7n_291",
-  actionButton: lt,
-  "second-action-button": "_second-action-button_1ym7n_295",
+  wrapper: lt,
+  "action-button": "_action-button_eh22y_461",
+  actionButton: ut,
+  "second-action-button": "_second-action-button_eh22y_465",
   secondActionButton: rt,
-  "label--hidden": "_label--hidden_1ym7n_312",
+  "label--hidden": "_label--hidden_eh22y_484",
   labelHidden: pt,
-  feedback: mt
-}, _t = ({ id: n, label: u }) => {
+  "label--disabled": "_label--disabled_eh22y_497",
+  labelDisabled: ht,
+  feedback: _t
+}, dt = ({ id: n, label: u }) => {
   if (!n)
     throw new Error(
       y(
@@ -49,69 +51,69 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
         `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputSearch component. If you don't want to display a label, set hideLabel={true}.`
       )
     );
-}, dt = (n) => !!K(n, "form"), xt = ({
+}, bt = (n) => !!K(n, "form"), Dt = ({
   id: n,
   label: u,
   className: H,
   clearButtonLabel: E = "Clear search field",
-  disabled: l = !1,
+  disabled: s = !1,
   hint: d,
   hideLabel: j = !1,
   invalid: r = !1,
   readonly: o = !1,
   required: S = !1,
-  size: s = "medium",
+  size: i = "medium",
   submitButtonLabel: C = "Search",
-  systemFeedback: h,
-  value: b,
+  systemFeedback: b,
+  value: m,
   submitButtonOnClick: k,
   onChange: I,
   ...L
 }) => {
-  process.env.NODE_ENV !== "production" && _t({
+  process.env.NODE_ENV !== "production" && dt({
     id: n,
     label: u
   });
-  const [p, g] = J(b), f = w(null), m = w(null), V = Q(j);
-  A(() => {
-    g(b);
-  }, [b]), A(() => {
-    f.current && !dt(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
+  const [p, g] = J(m), f = N(null), h = N(null), V = Q(j);
+  w(() => {
+    g(m);
+  }, [m]), w(() => {
+    f.current && !bt(f.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(
       y(
         "DSInputSearch",
         `The DSInputSearch component with the id "${n}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`
       )
     );
   }, []);
-  const v = `${n}-label`, B = `${n}-feedback`, x = `${n}-hint`, O = d ? ` ${x}` : "", N = p !== "" && p !== void 0 && p !== null, P = c(t.root, H), $ = c(t.input, {
+  const v = `${n}-label`, B = `${n}-feedback`, D = `${n}-hint`, O = d ? ` ${D}` : "", x = p !== "" && p !== void 0 && p !== null, P = l(t.root, H), $ = l(t.input, {
     // small input
-    [t.inputSmall]: s === "small",
+    [t.inputSmall]: i === "small",
     // invalid state
     [t.inputInvalid]: r,
     // action button - input password always has an action button
     [t.inputHasActionButton]: !0,
     // action second action button
-    [t.inputHasSecondActionButton]: N && !o && !l
-  }), R = c(t.label, {
+    [t.inputHasSecondActionButton]: x && !o && !s
+  }), R = l(t.label, {
     // hide label only visually to keep them available for assistive technologies
-    [t.labelHidden]: V
-  }), q = c(t.actionButton, {
-    [t.actionButtonSmall]: s === "small"
-  }), T = c(t.secondActionButton, {
-    [t.secondActionButtonSmall]: s === "small"
-  }), F = (a, i) => {
+    [t.labelHidden]: V,
+    [t.labelDisabled]: s
+  }), q = l(t.actionButton, {
+    [t.actionButtonSmall]: i === "small"
+  }), T = l(t.secondActionButton, {
+    [t.secondActionButtonSmall]: i === "small"
+  }), F = (a, c) => {
     const G = Object.getPrototypeOf(a), _ = Object.getOwnPropertyDescriptor(
       G,
       "value"
     );
-    _ != null && _.set ? _.set.call(a, i) : a.value = i;
+    _ != null && _.set ? _.set.call(a, c) : a.value = c;
   }, M = () => {
-    var i;
-    if (!m.current)
-      return;
-    F(m.current, "");
+    var c;
+    if (!h.current) return;
+    F(h.current, "");
     const a = new Event("change", { bubbles: !0 });
-    (i = m.current) == null || i.dispatchEvent(a);
+    (c = h.current) == null || c.dispatchEvent(a);
   }, W = (a) => {
     g(a.target.value), I && I(a);
   };
@@ -120,12 +122,12 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
       u,
       S && /* @__PURE__ */ e.jsx(U, {})
     ] }),
-    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: x, children: d }),
-    r && h && /* @__PURE__ */ e.jsx(
+    d && /* @__PURE__ */ e.jsx("div", { className: t.hint, id: D, children: d }),
+    r && b && /* @__PURE__ */ e.jsx(
       X,
       {
         className: t.feedback,
-        message: h,
+        message: b,
         type: "invalid",
         id: B
       }
@@ -136,29 +138,29 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
         {
           className: $,
           id: n,
-          ref: m,
+          ref: h,
           ...L,
           "aria-labelledby": `${v}${O}`,
-          "aria-describedby": r && h ? B : void 0,
+          "aria-describedby": r && b ? B : void 0,
           "aria-invalid": r,
           "aria-disabled": o,
           readOnly: o,
           required: S,
-          disabled: l,
+          disabled: s,
           type: "search",
           value: p,
           onChange: W
         }
       ),
-      N && !o && !l && /* @__PURE__ */ e.jsx(
-        D,
+      x && !o && !s && /* @__PURE__ */ e.jsx(
+        A,
         {
           hideLabel: !0,
           theme: "light",
           iconName: "cross",
           className: T,
           variant: "ghost",
-          size: s,
+          size: i,
           onClick: M,
           type: "button",
           tabIndex: -1,
@@ -166,17 +168,17 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
         }
       ),
       /* @__PURE__ */ e.jsx(
-        D,
+        A,
         {
           hideLabel: !0,
           theme: "light",
           iconName: "magnifying-glass",
           className: q,
           variant: "ghost",
-          size: s,
+          size: i,
           onClick: k,
           type: "submit",
-          disabled: l || o,
+          disabled: s || o,
           children: C
         }
       )
@@ -184,5 +186,7 @@ const Y = "_input_1ym7n_73", Z = "_input--invalid_1ym7n_183", z = "_input--small
   ] });
 };
 export {
-  xt as DSInputSearch
+  Dt as D,
+  bt as i,
+  dt as v
 };