@stihl-design-system/components 1.0.0-RC.13 → 1.0.0-RC.14

package/chunks/Tabs.D_JAsvoh.js

@@ -0,0 +1,270 @@
+"use client";
+import { j as l } from "./jsx-runtime.C115EyI4.js";
+import { c as T } from "./index.CvOaL64Y.js";
+import { useState as v, useRef as p, useEffect as tt } from "react";
+import { h as R } from "./has-window.ut_-aShB.js";
+import { g as N, r as et } from "./helpers.CcqWV-wZ.js";
+import { u as M } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import { DSButton as H } from "../button.BfcWQZhx.js";
+import { D as rt } from "./Icon.BCmt_XBG.js";
+import { NumberIndicator as st } from "../numberindicator.UU7FSouT.js";
+import { g as z, a as O, T as nt } from "./TabPane.CYuUi0oL.js";
+import '../assets/Tabs.DUqlqP6R.css';const y = () => {
+  if (R) {
+    const o = getComputedStyle(document.documentElement).getPropertyValue("--ds-animation-duration").trim();
+    return o === "0s" || o === "0ms";
+  } else
+    return !0;
+}, ot = "ds-tabs_tabs-wrapper_infm4_1", ct = "ds-tabs_scroll-wrapper_infm4_6", at = "ds-tabs_scroller_infm4_17", lt = "ds-tabs_scroller--centered_infm4_23", it = "ds-tabs_tab_infm4_1", ut = "ds-tabs_scroll-button_infm4_98", dt = "ds-tabs_scroll-button--hidden_infm4_103", ft = "ds-tabs_scroll-button--right_infm4_107", mt = "ds-tabs_indicator_infm4_119", a = {
+  "tabs-wrapper": "ds-tabs_tabs-wrapper_infm4_1",
+  tabsWrapper: ot,
+  "scroll-wrapper": "ds-tabs_scroll-wrapper_infm4_6",
+  scrollWrapper: ct,
+  scroller: at,
+  "scroller--centered": "ds-tabs_scroller--centered_infm4_23",
+  scrollerCentered: lt,
+  tab: it,
+  "scroll-button": "ds-tabs_scroll-button_infm4_98",
+  scrollButton: ut,
+  "scroll-button--hidden": "ds-tabs_scroll-button--hidden_infm4_103",
+  scrollButtonHidden: dt,
+  "scroll-button--right": "ds-tabs_scroll-button--right_infm4_107",
+  scrollButtonRight: ft,
+  indicator: mt
+}, St = ["left", "center"], Bt = ["prev", "next"], m = (o) => R && (o == null ? void 0 : o.getBoundingClientRect()) || DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }), h = 48, pt = ({ id: o, tabs: f }) => {
+  if (!o)
+    throw new Error(
+      N(
+        "DSTabs",
+        'A unique "id" prop is required. Please add a unique "id" prop to the DSTabs component.'
+      )
+    );
+  if (!f)
+    throw new Error(
+      N("DSTabs", et("tabs", "DSTabs"))
+    );
+}, yt = ({
+  id: o,
+  tabs: f,
+  alignment: E = "left",
+  className: q,
+  classNameTabPane: $,
+  defaultSelectedTabIndex: L = 0,
+  onTabChange: I,
+  ...X
+}) => {
+  process.env.NODE_ENV !== "production" && pt({
+    id: o,
+    tabs: f
+  });
+  const [i, G] = v(
+    L
+  ), [C, b] = v(
+    L
+  ), [K, V] = v(!1), [F, Q] = v(!1), _ = p([]), g = p(null), u = p(null), d = p(null), w = p(!1), j = p(i);
+  M(() => {
+    var t;
+    if (R) {
+      const r = [
+        "16px 'STIHL Contraface Digital Text Regular'",
+        "14px 'STIHL Contraface Digital Text Demi'",
+        "16px 'STIHL Contraface Digital Text Bold'"
+      ];
+      Promise.all(r.map((c) => document.fonts.load(c))).then(() => {
+        x(i), D("next", i, "instant"), k(), w.current = !0;
+      }).catch((c) => {
+        throw new Error(
+          N(
+            "DSTabs",
+            `The component requires the fonts to be loaded: ${c}`
+          )
+        );
+      });
+      const e = () => {
+        !w.current || !d.current || (s.matches ? d.current.style.transitionDuration = "0s" : d.current.style.transitionDuration = "");
+      }, s = window.matchMedia("(prefers-reduced-motion: reduce)");
+      s.addEventListener("change", e);
+      const n = () => {
+        k(), J();
+      };
+      return window.addEventListener("resize", n), (t = u.current) == null || t.addEventListener("scroll", n), () => {
+        var c;
+        s.removeEventListener("change", e), window.removeEventListener("resize", n), (c = u.current) == null || c.removeEventListener("scroll", n);
+      };
+    }
+  }, [f, E]), M(() => {
+    w.current && x(i), j.current = i;
+  }, [i]), tt(() => {
+    var t;
+    w.current && ((t = _.current[C]) == null || t.focus());
+  }, [C]);
+  const W = (t) => {
+    const r = m(u.current), e = m(_.current[t]);
+    let s = "next";
+    e.left - h < r.left ? s = "prev" : e.right + h > r.right ? s = "next" : s = i < t ? "next" : "prev", G(t), b(t), D(s, t), I && I(t);
+  }, k = () => {
+    if (u.current && g.current) {
+      const t = m(u.current), r = m(g.current);
+      V(r.left < t.left), Q(r.right > t.right + 4);
+    }
+  }, A = (t = 0) => {
+    R && d.current && !y() && !window.matchMedia("(prefers-reduced-motion: reduce)").matches && setTimeout(() => {
+      d.current && (d.current.style.transitionDuration = "250ms");
+    }, t);
+  }, J = () => {
+    d.current && (d.current.style.transitionDuration = "0s", x(j.current), A());
+  }, x = (t) => {
+    const r = d.current, e = m(_.current[t]), s = m(g.current), n = e.left - s.left;
+    r && (w.current ? (r.style.width = `${e.width}px`, r.style.transform = `translateX(${n}px)`) : (r.style.transitionDuration = "0s", r.style.transform = `translateX(${n}px)`, r.style.width = `${e.width}px`, A(50)));
+  }, U = (t, r) => {
+    let e;
+    switch (t.key) {
+      case "ArrowLeft":
+        e = (r > 0 ? r : f.length) - 1, b(e);
+        break;
+      case "ArrowRight":
+        e = (r + 1) % f.length, b(e);
+        break;
+      case "Home":
+        e = 0, b(e);
+        break;
+      case "End":
+        e = f.length - 1, b(e);
+        break;
+      case "Enter":
+      case " ":
+        W(r);
+        return;
+      default:
+        return;
+    }
+    e !== void 0 && setTimeout(
+      () => D(
+        t.key === "ArrowRight" ? "next" : "prev",
+        e
+      ),
+      0
+    ), t.preventDefault();
+  }, D = (t, r, e = "smooth") => {
+    const s = _.current[r], n = u.current, c = m(s), S = m(n);
+    let B;
+    if (!(!s || !n)) {
+      if (t === "prev") {
+        if (c.left - h > S.left)
+          return;
+        B = s.offsetLeft - h;
+      } else {
+        if (c.right + h < S.right)
+          return;
+        B = s.offsetLeft + s.offsetWidth - S.width + h;
+      }
+      n.scrollTo({
+        left: B,
+        behavior: y() ? "instant" : e
+      });
+    }
+  }, P = (t) => {
+    var e;
+    const r = Y(t);
+    (e = u.current) == null || e.scrollTo({
+      left: r,
+      behavior: y() ? "instant" : "smooth"
+    });
+  }, Y = (t) => {
+    if (!g.current || !u.current)
+      return 0;
+    const { scrollLeft: r, offsetWidth: e } = u.current, s = Math.round(e * 0.2);
+    return t === "next" ? r + s : r - s;
+  }, Z = T(a.scroller, {
+    [a.scrollerCentered]: E === "center"
+  });
+  return /* @__PURE__ */ l.jsxs(
+    "div",
+    {
+      className: T(a.tabs, q),
+      id: o,
+      ...X,
+      children: [
+        /* @__PURE__ */ l.jsxs("div", { className: a.tabsWrapper, children: [
+          /* @__PURE__ */ l.jsxs("div", { className: a.scrollWrapper, ref: u, children: [
+            /* @__PURE__ */ l.jsx("div", { role: "tablist", className: Z, ref: g, children: f.map(
+              ({ id: t, label: r, iconName: e, numberIndicatorValue: s }, n) => /* @__PURE__ */ l.jsxs(
+                "button",
+                {
+                  id: z(o, t),
+                  role: "tab",
+                  "aria-selected": i === n,
+                  "aria-controls": O(o, t, n),
+                  tabIndex: i === n ? 0 : -1,
+                  className: a.tab,
+                  ref: (c) => {
+                    _.current[n] = c;
+                  },
+                  onClick: () => W(n),
+                  onKeyDown: (c) => U(c, n),
+                  children: [
+                    e && /* @__PURE__ */ l.jsx(rt, { name: e, "aria-hidden": "true" }),
+                    r,
+                    s && /* @__PURE__ */ l.jsx(st, { label: s })
+                  ]
+                },
+                z(o, t)
+              )
+            ) }),
+            /* @__PURE__ */ l.jsx("span", { className: a.indicator, ref: d })
+          ] }),
+          /* @__PURE__ */ l.jsx(
+            H,
+            {
+              variant: "filled",
+              className: T(a.scrollButton, {
+                [a.scrollButtonHidden]: !K
+              }),
+              hideLabel: !0,
+              iconName: "chevron-left",
+              tabIndex: -1,
+              size: "small",
+              onClick: () => P("prev"),
+              children: "Left"
+            }
+          ),
+          /* @__PURE__ */ l.jsx(
+            H,
+            {
+              variant: "filled",
+              className: T(a.scrollButton, a.scrollButtonRight, {
+                [a.scrollButtonHidden]: !F
+              }),
+              hideLabel: !0,
+              iconName: "chevron-right",
+              tabIndex: -1,
+              size: "small",
+              onClick: () => P("next"),
+              children: "Right"
+            }
+          )
+        ] }),
+        f.map(({ id: t, content: r }, e) => /* @__PURE__ */ l.jsx(
+          nt,
+          {
+            id: t,
+            content: r,
+            index: e,
+            selectedTabIndex: i,
+            tabListId: o,
+            className: $
+          },
+          O(o, t, e)
+        ))
+      ]
+    }
+  );
+};
+export {
+  yt as D,
+  h as S,
+  St as T,
+  Bt as a,
+  m as g,
+  pt as v
+};

package/chunks/{Textarea.DUBSOpNL.js → Textarea.Dh9R9YdZ.js}

@@ -2,11 +2,12 @@
 import { j as s } from "./jsx-runtime.C115EyI4.js";
 import { c as g } from "./index.CvOaL64Y.js";
 import { useState as d, useRef as re, useEffect as x } from "react";
-import { u as ne, h as oe } from "./useBreakpoint.5xBNDiCf.js";
-import { g as V, p as z } from "./helpers.B1JT5ShS.js";
+import { h as ne } from "./has-window.ut_-aShB.js";
+import { g as V, p as z } from "./helpers.CcqWV-wZ.js";
+import { u as oe } from "./useBreakpoint.B8XxjSVJ.js";
 import { Asterisk as ie } from "../asterisk.DpzETKdT.js";
 import { DSSystemFeedback as le } from "../systemfeedback.C3Pfxxpp.js";
-import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_1", ce = "ds-textarea_textarea--invalid_18bj7_113", _e = "ds-textarea_textarea--small_18bj7_120", ue = "ds-textarea_textarea--resize-auto_18bj7_139", be = "ds-textarea_root_18bj7_149", fe = "ds-textarea_hint_18bj7_157", xe = "ds-textarea_label_18bj7_157", je = "ds-textarea_affix_18bj7_161", me = "ds-textarea_affix--small_18bj7_182", he = "ds-textarea_affix--disabled_18bj7_195", pe = "ds-textarea_prefix_18bj7_203", ve = "ds-textarea_affix--readonly_18bj7_206", ge = "ds-textarea_suffix_18bj7_216", Se = "ds-textarea_leading-icon_18bj7_223", Ie = "ds-textarea_leading-icon--small_18bj7_235", Ce = "ds-textarea_leading-icon--disabled_18bj7_238", ye = "ds-textarea_action-button_18bj7_247", De = "ds-textarea_label--hidden_18bj7_265", Ae = "ds-textarea_label--disabled_18bj7_278", we = "ds-textarea_feedback_18bj7_298", Re = "ds-textarea_char-count_18bj7_303", Te = "ds-textarea_char-count-announcer_18bj7_319", t = {
+import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_1", ce = "ds-textarea_textarea--invalid_18bj7_113", _e = "ds-textarea_textarea--small_18bj7_120", ue = "ds-textarea_textarea--resize-auto_18bj7_139", fe = "ds-textarea_root_18bj7_149", be = "ds-textarea_hint_18bj7_157", xe = "ds-textarea_label_18bj7_157", je = "ds-textarea_affix_18bj7_161", me = "ds-textarea_affix--small_18bj7_182", he = "ds-textarea_affix--disabled_18bj7_195", pe = "ds-textarea_prefix_18bj7_203", ve = "ds-textarea_affix--readonly_18bj7_206", ge = "ds-textarea_suffix_18bj7_216", Se = "ds-textarea_leading-icon_18bj7_223", Ie = "ds-textarea_leading-icon--small_18bj7_235", Ce = "ds-textarea_leading-icon--disabled_18bj7_238", ye = "ds-textarea_action-button_18bj7_247", De = "ds-textarea_label--hidden_18bj7_265", Ae = "ds-textarea_label--disabled_18bj7_278", we = "ds-textarea_feedback_18bj7_298", Re = "ds-textarea_char-count_18bj7_303", Te = "ds-textarea_char-count-announcer_18bj7_319", t = {
   textarea: de,
   "textarea--invalid": "ds-textarea_textarea--invalid_18bj7_113",
   textareaInvalid: ce,
@@ -14,8 +15,8 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
   textareaSmall: _e,
   "textarea--resize-auto": "ds-textarea_textarea--resize-auto_18bj7_139",
   textareaResizeAuto: ue,
-  root: be,
-  hint: fe,
+  root: fe,
+  hint: be,
   label: xe,
   affix: je,
   "affix--small": "ds-textarea_affix--small_18bj7_182",
@@ -43,12 +44,12 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
   charCount: Re,
   "char-count-announcer": "ds-textarea_char-count-announcer_18bj7_319",
   charCountAnnouncer: Te
-}, Pe = ["medium", "small"], Ee = ({ id: r, label: _ }) => {
+}, qe = ["medium", "small"], Ee = ({ id: r, label: _ }) => {
   if (!r)
     throw new Error(
       V(
         "DSTextarea",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSTextarea component.'
+        'A unique "id" prop is required. Please add a unique "id" prop to the DSTextarea component.'
       )
     );
   if (!_)
@@ -58,7 +59,7 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
         `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSTextarea component. If you don't want to display a label, set hideLabel={true}.`
       )
     );
-}, qe = ({
+}, Me = ({
   id: r,
   label: _,
   charsLimitText: P = "Character limit reached",
@@ -85,7 +86,7 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
     id: r,
     label: _
   });
-  const [G, A] = d(O || ""), [l, w] = d(0), [J, R] = d(0), [K, T] = d("off"), [E, h] = d(i), [p, v] = d(n), N = m !== void 0, b = N ? m : G, o = re(null), Q = ne(F);
+  const [G, A] = d(O || ""), [l, w] = d(0), [J, R] = d(0), [K, T] = d("off"), [E, h] = d(i), [p, v] = d(n), N = m !== void 0, f = N ? m : G, o = re(null), Q = oe(F);
   x(() => {
     if (!e || e <= 0)
       return;
@@ -95,11 +96,11 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
     }, 1e3);
     return () => clearTimeout(a);
   }, [l]), x(() => {
-    A(b || ""), c(), e && e > 0 && (w(b.toString().length || 0), R(e - b.toString().length || 0));
+    A(f || ""), c(), e && e > 0 && (w(f.toString().length || 0), R(e - f.toString().length || 0));
   }, [m]), x(() => {
     n && i ? (h(i), v(n)) : !n && e && e >= 0 && l >= e ? (v(!0), h(P)) : (h(i), v(n));
   }, [n, p, i, l]), x(() => {
-    if (oe && u === "auto")
+    if (ne && u === "auto")
       return c(), window.addEventListener("resize", c), () => window.removeEventListener("resize", c);
   }, [u, o.current]);
   const U = g(t.root, X), Y = g(t.textarea, M, {
@@ -116,17 +117,17 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
   }), B = `${r}-label`, $ = `${r}-feedback`, k = `${r}-hint`, H = `${r}-char-count-announcer`, ee = j ? ` ${k}` : "", c = () => {
     if (o.current && u === "auto") {
       o.current.style.height = "auto";
-      const a = z(o.current.scrollHeight), f = z(2);
+      const a = z(o.current.scrollHeight), b = z(2);
       o.current.style.height = `${// We need to add 2px (border-top & border-bottom) to the scrollHeight to prevent the textarea
       // from jumping as soon as the user starts typing.
-      a + f}rem`;
+      a + b}rem`;
     }
   }, ae = () => {
     const a = [];
     return e && e > 0 && a.push(H), n && i && a.push($), a.length > 0 ? a.join(" ") : void 0;
   }, te = (a) => {
-    var f;
-    D && D(a), e && e > 0 && w(((f = o.current) == null ? void 0 : f.value.length) || 0), c();
+    var b;
+    D && D(a), e && e > 0 && w(((b = o.current) == null ? void 0 : b.value.length) || 0), c();
   }, se = (a) => {
     y && y(a), N || A(a.target.value);
   };
@@ -160,7 +161,7 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
         readOnly: I,
         required: C,
         disabled: S,
-        value: b,
+        value: f,
         defaultValue: void 0,
         rows: void 0,
         cols: void 0,
@@ -192,7 +193,7 @@ import '../assets/Textarea.KJGPTYMz.css';const de = "ds-textarea_textarea_18bj7_
   ] });
 };
 export {
-  qe as D,
-  Pe as T,
+  Me as D,
+  qe as T,
   Ee as v
 };

package/chunks/{Toast.DyEi2GEP.js → Toast.j7LPnQ36.js}

@@ -2,7 +2,7 @@
 import { j as t } from "./jsx-runtime.C115EyI4.js";
 import { c } from "./index.CvOaL64Y.js";
 import { forwardRef as u } from "react";
-import { DSButton as y } from "../button.M4nXjcUn.js";
+import { DSButton as y } from "../button.BfcWQZhx.js";
 import { D as g } from "./Icon.BCmt_XBG.js";
 import '../assets/Toast.CuafTAf7.css';const h = "ds-toast_root_58y8a_5", p = "ds-toast_root--closing_58y8a_19", x = "ds-toast_fade-out_58y8a_1", I = "ds-toast_move-in_58y8a_1", S = "ds-toast_root--success_58y8a_54", N = "ds-toast_root--info_58y8a_58", j = "ds-toast_root--warning_58y8a_62", v = "ds-toast_content_58y8a_67", w = "ds-toast_content--hide-icon_58y8a_74", C = "ds-toast_icon_58y8a_78", D = "ds-toast_message_58y8a_82", o = {
   root: h,

package/chunks/has-window.ut_-aShB.js

@@ -0,0 +1,5 @@
+"use client";
+const e = typeof window < "u" && typeof window.document < "u";
+export {
+  e as h
+};

package/chunks/helpers.CcqWV-wZ.js

@@ -0,0 +1,8 @@
+"use client";
+const r = (e) => typeof e != "number" || isNaN(e) ? 0 : e / 16, t = (e, s) => `[STIHL Design System] - [${e}]: ${s}`, o = (e, s) => `The "${e}" prop is required. Please add the "${e}" prop to the ${s} component.`, n = (e, s) => e == null ? void 0 : e.closest(s);
+export {
+  n as a,
+  t as g,
+  r as p,
+  o as r
+};

package/chunks/{useBreakpoint.5xBNDiCf.js → useBreakpoint.B8XxjSVJ.js}

@@ -1,12 +1,13 @@
 "use client";
 import { useState as c, useEffect as k } from "react";
-const a = typeof window < "u", o = {
+import { h as a } from "./has-window.ut_-aShB.js";
+const o = {
   base: 0,
   s: 320,
   m: 768,
   l: 1024,
   xl: 1536
-}, u = ["base", "s", "m", "l", "xl"], f = (e) => {
+}, u = ["base", "s", "m", "l", "xl"], b = (e) => {
   let n = "base";
   for (const t of u)
     if (e >= o[t])
@@ -14,7 +15,7 @@ const a = typeof window < "u", o = {
     else
       break;
   return n;
-}, b = (e) => e && typeof e == "object" && "base" in e, d = () => {
+}, f = (e) => e && typeof e == "object" && "base" in e, l = () => {
   const [e, n] = c("base");
   k(() => {
     if (a)
@@ -23,13 +24,13 @@ const a = typeof window < "u", o = {
   const t = () => {
     if (a) {
       const r = window.innerWidth;
-      n(f(r));
+      n(b(r));
     }
   };
   return e;
-}, B = (e) => {
-  const n = d();
-  if (e && typeof e != "object" || !b(e))
+}, p = (e) => {
+  const n = l();
+  if (e && typeof e != "object" || !f(e))
     return e;
   const t = [...u].reverse();
   let r = e.base;
@@ -43,6 +44,5 @@ const a = typeof window < "u", o = {
   return r;
 };
 export {
-  a as h,
-  B as u
+  p as u
 };

package/chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js

@@ -0,0 +1,7 @@
+"use client";
+import { useLayoutEffect as o, useEffect as t } from "react";
+import { h as e } from "./has-window.ut_-aShB.js";
+const u = e ? o : t;
+export {
+  u
+};

package/{combobox.CzBpi97e.js → combobox.D6zXg976.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as u } from "./chunks/jsx-runtime.C115EyI4.js";
-import { v as x, c as C } from "./chunks/CustomReactSelect.CQ1uexBH.js";
+import { v as x, c as C } from "./chunks/CustomReactSelect.CB41lklE.js";
 const v = ({
   id: s,
   label: o,

package/components/AriaLiveRegions/AriaLiveRegions.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const ARIA_LIVE_REGION_ALERT_ID = "ds-alert-live-region";
 export declare const ARIA_LIVE_REGION_STATUS_ID = "ds-status-live-region";
-export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null;
-export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null;
+export declare const getAriaAlertLiveRegionElement: () => HTMLElement | null | undefined;
+export declare const getAriaStatusLiveRegionElement: () => HTMLElement | null | undefined;
 export declare const validateMultipleDSAriaLiveRegionsOnPage: () => void;

package/components/Combobox/CustomReactSelect/CustomReactSelect.d.ts

@@ -18,7 +18,7 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      *  `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
      * */
     options: ComboboxOptionsOrOptGroups;
-    /** The value of autocomplete to use for the DSCombobox. */
+    /** The value of autoComplete to use for the DSCombobox. */
     autoComplete?: string;
     /** Value of the selected Option in **uncontrolled DSCombobox** component. */
     defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;

package/components/Input/Input.d.ts

@@ -15,6 +15,12 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     actionButtonIconSource?: IconProps['source'];
     /** Callback function called when the action button is clicked. */
     actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Provides hints to the browser for what type of data the input expects.
+     * Use standardized values from the W3C specification for input purposes:
+     * https://www.w3.org/TR/WCAG21/#input-purposes.
+     */
+    autoComplete?: string;
     /** Disables the input, preventing user interaction.
      * @default false
      */

package/components/InputPassword/InputPassword.d.ts

@@ -6,10 +6,10 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
     id: string;
     /** Label text displayed above the input. */
     label: string;
-    /** The value of autocomplete to use for the input.
+    /** The value of autoComplete to use for the input.
      * @default 'new-password'
      */
-    autocomplete?: 'new-password' | 'current-password' | 'off';
+    autoComplete?: 'new-password' | 'current-password' | 'off';
     /** Disables the input, preventing user interaction.
      * @default false
      */
@@ -55,4 +55,4 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
  *
  * The user can toggle the visibility of the password by clicking on the action button.
  */
-export declare const DSInputPassword: ({ id, label, autocomplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;
+export declare const DSInputPassword: ({ id, label, autoComplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;

package/components/NumberIndicator/NumberIndicator.d.ts

@@ -0,0 +1,12 @@
+import { NumberIndicatorVariant } from './NumberIndicator.utils';
+export interface NumberIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Content within the NumberIndicator. */
+    label?: string;
+    /**
+     * Variant of the NumberIndicator.
+     *
+     * @default 'default'
+     */
+    variant?: NumberIndicatorVariant;
+}
+export declare const NumberIndicator: ({ label, className, variant, ...rest }: NumberIndicatorProps) => JSX.Element;

package/components/NumberIndicator/NumberIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/NumberIndicator/NumberIndicator.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const NUMBER_INDICATOR_VARIANT: readonly ["default", "highlight"];
+export type NumberIndicatorVariant = (typeof NUMBER_INDICATOR_VARIANT)[number];

package/components/Tabs/TabPane/TabPane.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface TabPaneProps {
+    id: string;
+    content: ReactNode;
+    index: number;
+    selectedTabIndex: number;
+    tabListId: string;
+    className?: string;
+}
+export declare const TabPane: ({ id, content, index, selectedTabIndex, tabListId, className, }: TabPaneProps) => JSX.Element;

package/components/Tabs/TabPane/TabPane.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const containsFocusableElement: (element: HTMLElement) => boolean;
+export declare const getTabButtonId: (tabListId: string, id: string) => string;
+export declare const getTabPaneId: (tabListId: string, id: string, index: number) => string;

package/components/Tabs/TabPane/TabPane.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from 'react';
+import { IconName } from '../../types';
+import { TabsAlignment } from './Tabs.utils';
+export interface Tab {
+    /** Content displayed when the Tab is active. */
+    content: React.ReactNode;
+    /** Unique id for the Tab. */
+    id: string;
+    /** Label text displayed on the Tab. */
+    label: string;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Number Indicator value displayed next to the label. */
+    numberIndicatorValue?: string;
+}
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique id for the tab list. */
+    id: string;
+    /** An array of Tab Objects containing the id, content, label, and other optional parameters.
+     * `{id: string; content: React.ReactNode; label: string; iconName?: IconName; numberIndicatorValue?: string;}[]`*/
+    tabs: Tab[];
+    /** Alignment of the Tabs.
+     * @default 'left'
+     */
+    alignment?: TabsAlignment;
+    /**
+     * Additional class name to apply to the tab pane.
+     */
+    classNameTabPane?: string;
+    /** Index of the tab to be selected when Tabs are rendered the first time.
+     * @default 0
+     * */
+    defaultSelectedTabIndex?: number;
+    /** Callback function called when the selected tab changes. */
+    onTabChange?: (selectedTabIndex: number) => void;
+}
+/**
+ * A component for organizing content into tabbed sections, allowing users to navigate between them.
+ * Supports single selection to maintain focus on one content area at a time.
+ * Avoid excessive tabs to prevent overwhelming the user.
+ */
+export declare const DSTabs: ({ id: tabListId, tabs, alignment, className, classNameTabPane, defaultSelectedTabIndex, onTabChange, ...rest }: TabsProps) => JSX.Element;

package/components/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Tabs/Tabs.utils.d.ts

@@ -0,0 +1,11 @@
+import { TabsProps } from './Tabs';
+export declare const TABS_ALIGNMENT: readonly ["left", "center"];
+export type TabsAlignment = (typeof TABS_ALIGNMENT)[number];
+export declare const TABS_DIRECTION: readonly ["prev", "next"];
+export type TabsDirection = (typeof TABS_DIRECTION)[number];
+/**
+ * Returns the bounding rectangle of a DOM element or a default DOMRect object with 0 values if unavailable.
+ */
+export declare const getRect: (element: HTMLElement | null) => DOMRect;
+export declare const SCROLL_MARGIN_INLINE = 48;
+export declare const validateTabsProps: ({ id, tabs }: TabsProps) => void;

package/components/Tabs/Tabs.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/{customreactselect.qf7CIeFs.js → customreactselect.BcjDvZG6.js}

@@ -2,8 +2,8 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import { c as l } from "./chunks/CustomReactSelect.CQ1uexBH.js";
-import "./chunks/useBreakpoint.5xBNDiCf.js";
+import { c as l } from "./chunks/CustomReactSelect.CB41lklE.js";
+import "./chunks/useBreakpoint.B8XxjSVJ.js";
 import "./asterisk.DpzETKdT.js";
 import "./chunks/Icon.BCmt_XBG.js";
 import "./systemfeedback.C3Pfxxpp.js";

package/{dialog.DYlBUsOD.js → dialog.BkVOgeWY.js}

@@ -2,8 +2,8 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import "./button.M4nXjcUn.js";
-import { D as e } from "./chunks/Dialog.CudsqNag.js";
+import "./button.BfcWQZhx.js";
+import { D as e } from "./chunks/Dialog.ClBjJWOh.js";
 export {
   e as DSDialog
 };