@stihl-design-system/components 1.0.0-RC.2 → 1.0.0-RC.4

package/components/Logo/Logo.utils.d.ts

@@ -1,4 +1,5 @@
 import { LinkTarget } from '../../types';
 
 export type LogoTarget = LinkTarget;
+export type LogoVariant = 'standard' | 'background';
 export type LogoAriaAttribute = 'aria-label';

package/components/Notification/Notification.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+import { NotificationVariant } from './Notification.utils';
+
+export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content within the Notification */
+    children: React.ReactNode;
+    /** Content within the Notification's action bar. For example a CTA button. */
+    customActionArea?: React.ReactNode;
+    /** Label for the close button */
+    closeButtonLabel?: string;
+    /** Hides the close button */
+    hideCloseButton?: boolean;
+    /** Hides the icon */
+    hideIcon?: boolean;
+    /** Defines the variant */
+    variant?: NotificationVariant;
+    /** Callback function triggered when the close button is clicked */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * An inline notification component that can be used to provide system feedback messages
+ * or highlight important content.
+ *
+ * The background color and icon vary based on the value of the `variant` prop.
+ */
+export declare const DSNotification: ({ children, variant, customActionArea, className, closeButtonLabel, hideCloseButton, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

package/components/Notification/Notification.test.d.ts

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

package/components/Notification/Notification.utils.d.ts

@@ -0,0 +1,5 @@
+import { IconName } from '../../types';
+
+export declare const NOTIFICATION_VARIANT: readonly ["success", "error", "warning", "info"];
+export type NotificationVariant = (typeof NOTIFICATION_VARIANT)[number];
+export declare const NOTIFICATION_ICONS: Record<NotificationVariant, IconName>;

package/components/RadioGroup/RadioGroup.d.ts

@@ -8,7 +8,7 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
      * When provided as a string, it represents the legend text directly.
      * When provided as an object, it allows for more detailed configuration, including:
      * - `headingText: string` The text content for the legend.
-     * - `headingSize?: 'x-large' | 'large' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
      * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
      *
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend

package/components/RadioGroup/RadioGroup.utils.d.ts

@@ -3,5 +3,5 @@ import { RadioGroupProps } from './RadioGroup';
 
 export type RadioGroupOption = Pick<RadioProps, 'label' | 'value'>;
 type ValidationProps = Pick<RadioGroupProps, 'description' | 'id' | 'legend' | 'name' | 'options' | 'systemFeedback'>;
-export declare const validateProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
+export declare const validateRadioGroupProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/Toast/Toast.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+import { ToastVariant } from './Toast.utils';
+
+export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
+    /** Message displayed in the Toast */
+    message: string;
+    /** Hides the icon of the Toast */
+    hideIcon?: boolean;
+    /** Visual style variant of the Toast */
+    variant?: ToastVariant;
+    /** Used by the ToastManager to clear the timeout of the toast removal */
+    onClick: () => void;
+    /** Used by the ToastManager to clear the timeout of the toast removal */
+    onMouseEnter: () => void;
+    /** Used by the ToastManager to start timeout of the toast removal again */
+    onMouseLeave: () => void;
+}
+/**
+ * Toasts are small, non-intrusive messages that appear temporarily to provide feedback or information.
+ * */
+export declare const DSToast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/Toast/Toast.utils.d.ts

@@ -0,0 +1,9 @@
+import { IconName } from '../../types';
+
+export declare const TOAST_VARIANT: readonly ["info", "success", "warning"];
+export type ToastVariant = (typeof TOAST_VARIANT)[number];
+export declare const TOAST_ICONS: Record<ToastVariant, IconName>;
+export type ToastOptions = {
+    variant?: ToastVariant;
+    hideIcon?: boolean;
+};

package/components/Toast/ToastManager.d.ts

@@ -0,0 +1,6 @@
+import { ToastOptions } from './Toast.utils';
+
+export declare const useToast: () => {
+    toast: import("react/jsx-runtime").JSX.Element | undefined;
+    queueToastMessage: (message: string, options?: ToastOptions) => void;
+};

package/components/Toast/ToastManager.test.d.ts

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

package/components/Toast/ToastManager.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const validateIsLiveRegionPresent: () => void;
+export declare const validateMultipleToastsOnPage: () => void;

package/components/Toast/ToastManager.utils.test.d.ts

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

package/customreactselect.LTbjaBN2.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C-kxDJ4g.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import { c as l } from "./chunks/CustomReactSelect.DtmbYZUf.js";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.DU8THnoC.js";
+import "./chunks/Icon.9gDIp6p4.js";
+import "./systemfeedback.4Hkfigi-.js";
+import "./optioncheckbox.CUV1MQhh.js";
+export {
+  l as CustomReactSelect
+};

package/dialog.BkXwcbUh.js

@@ -0,0 +1,45 @@
+"use client";
+import { j as r } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as f } from "./chunks/index.CvOaL64Y.js";
+import { useRef as u, useEffect as l } from "react";
+import { DSButton as m } from "./button.DX_nxoJC.js";
+import './assets/dialog.BGK3mgk7.css';const _ = "_root_5faj1_63", d = "_success_5faj1_67", g = "_info_5faj1_71", j = "_warning_5faj1_75", p = {
+  root: _,
+  success: d,
+  info: g,
+  warning: j
+}, D = ({
+  children: c,
+  className: i,
+  footer: n,
+  header: a,
+  isOpen: t,
+  onClose: s
+}) => {
+  const e = u(null);
+  return l(() => {
+    const o = e.current;
+    return o && (t ? o.showModal() : o.close(), s && o.addEventListener("close", s)), () => {
+      o && s && o.removeEventListener("close", s);
+    };
+  }, [t, s]), /* @__PURE__ */ r.jsxs("dialog", { ref: e, className: f(p.root, i), children: [
+    /* @__PURE__ */ r.jsx(
+      m,
+      {
+        type: "button",
+        iconName: "cross",
+        variant: "ghost",
+        hideLabel: !0,
+        onClick: s,
+        autoFocus: !0,
+        children: "Close Dialog"
+      }
+    ),
+    a,
+    c,
+    n
+  ] });
+};
+export {
+  D as DSDialog
+};

package/dialog.d.ts

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

package/fieldset.BXOWK-B-.js

@@ -0,0 +1,11 @@
+"use client";
+import "./chunks/jsx-runtime.C-kxDJ4g.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./asterisk.DU8THnoC.js";
+import "./heading.DqGbFfj2.js";
+import "./systemfeedback.4Hkfigi-.js";
+import { D as l } from "./chunks/Fieldset.BokeZzG5.js";
+export {
+  l as DSFieldset
+};

package/{floatingactionbutton.BtQVIj6W.js → floatingactionbutton.-nDRRiXY.js}

@@ -1,8 +1,8 @@
 "use client";
 import { j as a } from "./chunks/jsx-runtime.C-kxDJ4g.js";
 import { c as t } from "./chunks/index.CvOaL64Y.js";
-import { DSIcon as x } from "./icon.CmAhxgHK.js";
-import { DSSpinner as D } from "./spinner.CSzQEBx2.js";
+import { D } from "./chunks/Icon.9gDIp6p4.js";
+import { DSSpinner as x } from "./spinner.BskX4ovu.js";
 import './assets/floatingactionbutton.D7ywURL3.css';const S = "_root_1milf_63", j = "_root--dark_1milf_120", H = "_root--small_1milf_160", y = "_loader_1milf_179", N = "_icon--hidden_1milf_191", C = "_label--hidden_1milf_195", o = {
   root: S,
   "root--dark": "_root--dark_1milf_120",
@@ -20,8 +20,8 @@ import './assets/floatingactionbutton.D7ywURL3.css';const S = "_root_1milf_63",
   className: _,
   dataTrackingid: f,
   disabled: r = !1,
-  iconName: i = "placeholder",
-  iconSource: s,
+  iconName: s = "placeholder",
+  iconSource: i,
   loading: l = !1,
   size: b = "medium",
   theme: e = "light",
@@ -61,19 +61,19 @@ import './assets/floatingactionbutton.D7ywURL3.css';const S = "_root_1milf_63",
       "aria-busy": l,
       children: [
         l && /* @__PURE__ */ a.jsx(
-          D,
+          x,
           {
             className: o.loader,
             aria: { "aria-label": "Loading state" }
           }
         ),
         /* @__PURE__ */ a.jsx("span", { className: t(o.label, o.labelHidden), children: c }),
-        (i || s) && /* @__PURE__ */ a.jsx(
-          x,
+        (s || i) && /* @__PURE__ */ a.jsx(
+          D,
           {
-            name: i,
+            name: s,
             theme: e,
-            source: s,
+            source: i,
             className: h,
             "aria-hidden": "true"
           }

package/heading.DqGbFfj2.js

@@ -0,0 +1,50 @@
+"use client";
+import { j as l } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import './assets/heading.CGFucb-C.css';const d = "_root_d88h5_63", u = "_root--x-large_d88h5_66", g = "_root--x-large-uppercase_d88h5_80", h = "_root--large_d88h5_94", n = "_root--large-uppercase_d88h5_108", i = "_root--medium_d88h5_122", x = "_root--medium-uppercase_d88h5_130", L = "_root--small_d88h5_138", U = "_root--small-uppercase_d88h5_146", k = "_root--theme-dark_d88h5_154", o = {
+  root: d,
+  "root--x-large": "_root--x-large_d88h5_66",
+  rootXLarge: u,
+  "root--x-large-uppercase": "_root--x-large-uppercase_d88h5_80",
+  rootXLargeUppercase: g,
+  "root--large": "_root--large_d88h5_94",
+  rootLarge: h,
+  "root--large-uppercase": "_root--large-uppercase_d88h5_108",
+  rootLargeUppercase: n,
+  "root--medium": "_root--medium_d88h5_122",
+  rootMedium: i,
+  "root--medium-uppercase": "_root--medium-uppercase_d88h5_130",
+  rootMediumUppercase: x,
+  "root--small": "_root--small_d88h5_138",
+  rootSmall: L,
+  "root--small-uppercase": "_root--small-uppercase_d88h5_146",
+  rootSmallUppercase: U,
+  "root--theme-dark": "_root--theme-dark_d88h5_154",
+  rootThemeDark: k
+}, X = ({
+  children: e,
+  className: a,
+  size: r = "medium",
+  tag: t = "h2",
+  // default tag because of SEO reasons (h1 should be used only once per page)
+  theme: p = "light",
+  ...s
+}) => {
+  const _ = t, m = c(o.root, a, {
+    // sizes
+    [o.rootXLarge]: r === "x-large",
+    [o.rootXLargeUppercase]: r === "x-large-uppercase",
+    [o.rootLarge]: r === "large",
+    [o.rootLargeUppercase]: r === "large-uppercase",
+    [o.rootMedium]: r == "medium",
+    [o.rootMediumUppercase]: r == "medium-uppercase",
+    [o.rootSmall]: r == "small",
+    [o.rootSmallUppercase]: r == "small-uppercase",
+    // dark theme
+    [o.rootThemeDark]: p === "dark"
+  });
+  return /* @__PURE__ */ l.jsx(_, { className: m, ...s, children: e });
+};
+export {
+  X as DSHeading
+};

package/icon.Cpp_9L1I.js

@@ -0,0 +1,8 @@
+"use client";
+import "./chunks/jsx-runtime.C-kxDJ4g.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import { D as p } from "./chunks/Icon.9gDIp6p4.js";
+export {
+  p as DSIcon
+};

package/index.d.ts

@@ -1,23 +1,47 @@
+export * from './components/AriaLiveRegions/AriaLiveRegions';
 export * from './components/Button/Button';
+export * from './components/Button/Button.utils';
 export * from './components/ButtonRound/ButtonRound';
+export * from './components/ButtonRound/ButtonRound.utils';
 export * from './components/Checkbox/Checkbox';
 export * from './components/CheckboxGroup/CheckboxGroup';
+export * from './components/CheckboxGroup/CheckboxGroup.utils';
 export * from './components/Combobox/Combobox';
+export * from './components/Combobox/Combobox.utils';
 export * from './components/Fieldset/Fieldset';
+export * from './components/Fieldset/Fieldset.utils';
 export * from './components/FloatingActionButton/FloatingActionButton';
 export * from './components/Heading/Heading';
+export * from './components/Heading/Heading.utils';
 export * from './components/Icon/Icon';
+export * from './components/Icon/Icon.utils';
 export * from './components/Input/Input';
+export * from './components/Input/Input.utils';
 export * from './components/InputPassword/InputPassword';
+export * from './components/InputPassword/InputPassword.utils';
 export * from './components/InputSearch/InputSearch';
+export * from './components/InputSearch/InputSearch.utils';
 export * from './components/InputStepper/InputStepper';
+export * from './components/InputStepper/InputStepper.utils';
 export * from './components/Link/Link';
+export * from './components/Link/Link.utils';
 export * from './components/LinkStandalone/LinkStandalone';
+export * from './components/LinkStandalone/LinkStandalone.utils';
 export * from './components/Logo/Logo';
+export * from './components/Logo/Logo.utils';
+export * from './components/Notification/Notification';
+export * from './components/Notification/Notification.utils';
 export * from './components/RadioGroup/RadioGroup';
+export * from './components/RadioGroup/RadioGroup.utils';
 export * from './components/Select/Select';
+export * from './components/Select/Select.utils';
 export * from './components/Spinner/Spinner';
+export * from './components/Spinner/Spinner.utils';
 export * from './components/Switch/Switch';
+export * from './components/Switch/Switch.utils';
 export * from './components/Text/Text';
+export * from './components/Text/Text.utils';
 export * from './components/Textarea/Textarea';
+export * from './components/Textarea/Textarea.utils';
 export * from './components/Title/Title';
+export * from './components/Title/Title.utils';

package/index.es.js

@@ -1,49 +1,142 @@
 "use client";
-import { DSButton as t } from "./button.Di5XtChf.js";
-import { DSButtonRound as p } from "./buttonround._w4KDbHE.js";
-import { DSCheckbox as x } from "./checkbox.Bx5D_GAe.js";
-import { DSCheckboxGroup as f } from "./checkboxgroup.gQwSHy4i.js";
-import { DSCombobox as n } from "./combobox.BOJ7aq_B.js";
-import { DSFieldset as u } from "./fieldset.yE6WV6Ls.js";
-import { DSFloatingActionButton as c } from "./floatingactionbutton.BtQVIj6W.js";
-import { DSHeading as l } from "./heading.C6k7Gakb.js";
-import { DSIcon as b } from "./icon.CmAhxgHK.js";
-import { DSInput as k } from "./input.vP5xcwzV.js";
-import { DSInputPassword as g } from "./inputpassword.BiQ8ORmn.js";
-import { DSInputSearch as C } from "./inputsearch.BA9N3RRc.js";
-import { DSInputStepper as T } from "./inputstepper.Cyxeg2Cj.js";
-import { DSLink as F } from "./link.BoSdsZHj.js";
-import { DSLinkStandalone as R } from "./linkstandalone.BoN7nARO.js";
-import { DSLogo as H } from "./logo.DXWgPUY4.js";
-import { DSRadioGroup as j } from "./radiogroup.7ptQiohb.js";
-import { DSSelect as v } from "./select.Dx80W7cW.js";
-import { DSSpinner as z } from "./spinner.CSzQEBx2.js";
-import { DSSwitch as J } from "./switch.BwGtQdnx.js";
-import { DSText as M } from "./text.CPU8IUqY.js";
-import { DSTextarea as O } from "./textarea.C8tp1ciU.js";
-import { DSTitle as U } from "./title.BT-uIobN.js";
+import { DSAriaLiveRegions as x } from "./arialiveregions.49Zyf6mj.js";
+import { DSButton as N } from "./button.DX_nxoJC.js";
+import { DSButtonRound as _ } from "./buttonround.CXsBk9nL.js";
+import { DSCheckbox as h } from "./checkbox.B43oeMeC.js";
+import { D as f, v as A } from "./chunks/CheckboxGroup.CS6Q_TeZ.js";
+import { DSCombobox as g } from "./combobox.BaSkiD6f.js";
+import { C as v, b as C, a as R, D as L, v as B } from "./chunks/CustomReactSelect.DtmbYZUf.js";
+import { D as X, v as b } from "./chunks/Fieldset.BokeZzG5.js";
+import { DSFloatingActionButton as Z } from "./floatingactionbutton.-nDRRiXY.js";
+import { DSHeading as k } from "./heading.DqGbFfj2.js";
+import { D as H, I as w, u as V } from "./chunks/Icon.9gDIp6p4.js";
+import { DSInput as y } from "./input.BM6tyRUm.js";
+import { I as Y, M as q, a as j, S as z, U as J, h as Q, i as $, c as oo, s as eo, v as ao, b as to } from "./chunks/Input.utils.AKWCNkpA.js";
+import { D as so, v as po } from "./chunks/InputPassword.jpUCijp7.js";
+import { D as io, i as lo, v as mo } from "./chunks/InputSearch.BmOtAZcR.js";
+import { D as no, v as To } from "./chunks/InputStepper.DTKjUL4U.js";
+import { DSLink as xo } from "./link.B4XZoLDj.js";
+import { DSLinkStandalone as co } from "./linkstandalone.BSfd95Pd.js";
+import { DSLogo as uo } from "./logo.C_oJ8isW.js";
+import { D as Eo, a as fo, N as Ao } from "./chunks/Notification.CUPOlHAX.js";
+import { D as go, v as Po } from "./chunks/RadioGroup.DpwnVv7u.js";
+import { D as Co, S as Ro, g as Lo, v as Bo } from "./chunks/Select.DkDZo0ky.js";
+import { DSSpinner as Xo } from "./spinner.BskX4ovu.js";
+import { DSSwitch as Go } from "./switch.Bx2tDKx0.js";
+import { DSText as Fo } from "./text.CPU8IUqY.js";
+import { D as Mo, T as Ho, v as wo } from "./chunks/Textarea.C938p79X.js";
+import { DSTitle as Ko } from "./title.icX0VDiO.js";
+const o = ["medium", "small"], e = [
+  "filled",
+  "highlight",
+  "outline",
+  "ghost"
+], a = ["filled", "highlight"], t = [
+  "x-large",
+  "x-large-uppercase",
+  "large",
+  "large-uppercase",
+  "medium",
+  "medium-uppercase",
+  "small",
+  "small-uppercase"
+], r = ["h1", "h2", "h3", "h4", "h5", "h6"], s = ["medium", "small"], p = [
+  "filled",
+  "highlight",
+  "outline",
+  "ghost"
+], S = ["neutral", "highlight"], i = [
+  "small",
+  "medium",
+  "large",
+  "x-large",
+  "inherit"
+], l = [
+  "address",
+  "blockquote",
+  "cite",
+  "div",
+  "figcaption",
+  "legend",
+  "p",
+  "span",
+  "time"
+], m = [
+  "large",
+  "medium",
+  "small",
+  "x-small",
+  "xx-small"
+], I = ["bold", "normal"], n = ["x-large", "large"];
 export {
-  t as DSButton,
-  p as DSButtonRound,
-  x as DSCheckbox,
+  a as BUTTON_ROUND_VARIANT,
+  o as BUTTON_SIZE,
+  e as BUTTON_VARIANT,
+  v as COMBOBOX_SIZE,
+  x as DSAriaLiveRegions,
+  N as DSButton,
+  _ as DSButtonRound,
+  h as DSCheckbox,
   f as DSCheckboxGroup,
-  n as DSCombobox,
-  u as DSFieldset,
-  c as DSFloatingActionButton,
-  l as DSHeading,
-  b as DSIcon,
-  k as DSInput,
-  g as DSInputPassword,
-  C as DSInputSearch,
-  T as DSInputStepper,
-  F as DSLink,
-  R as DSLinkStandalone,
-  H as DSLogo,
-  j as DSRadioGroup,
-  v as DSSelect,
-  z as DSSpinner,
-  J as DSSwitch,
-  M as DSText,
-  O as DSTextarea,
-  U as DSTitle
+  g as DSCombobox,
+  X as DSFieldset,
+  Z as DSFloatingActionButton,
+  k as DSHeading,
+  H as DSIcon,
+  y as DSInput,
+  so as DSInputPassword,
+  io as DSInputSearch,
+  no as DSInputStepper,
+  xo as DSLink,
+  co as DSLinkStandalone,
+  uo as DSLogo,
+  Eo as DSNotification,
+  go as DSRadioGroup,
+  Co as DSSelect,
+  Xo as DSSpinner,
+  Go as DSSwitch,
+  Fo as DSText,
+  Mo as DSTextarea,
+  Ko as DSTitle,
+  C as DS_COMBOBOX_TRANSLATIONS,
+  R as DS_COMBOBOX_TRANSLATIONS_DE,
+  L as DS_COMBOBOX_TRANSLATIONS_EN,
+  t as HEADING_SIZE,
+  r as HEADING_TAG,
+  w as ICON_SIZE,
+  Y as INPUT_SIZE,
+  s as LINK_SIZE,
+  S as LINK_STANDALONE_VARIANT,
+  p as LINK_VARIANT,
+  q as MAX_PREFIX_LENGTH,
+  j as MAX_SUFFIX_LENGTH,
+  fo as NOTIFICATION_ICONS,
+  Ao as NOTIFICATION_VARIANT,
+  Ro as SELECT_SIZE,
+  i as SPINNER_SIZE,
+  z as SUPPORTED_INPUT_TYPES,
+  Ho as TEXTAREA_SIZE,
+  m as TEXT_SIZE,
+  l as TEXT_TAG,
+  I as TEXT_WEIGHT,
+  n as TITLE_SIZE,
+  J as UNSUPPORTED_INPUT_TYPES,
+  Lo as getIsPlaceholderSelected,
+  Q as hasShowPickerSupport,
+  $ as isCalendarInput,
+  oo as isTimeInput,
+  lo as isWithinForm,
+  eo as showCustomCalendarOrTimeIndicator,
+  V as useDynamicSvgImport,
+  A as validateCheckboxGroupProps,
+  B as validateComboboxProps,
+  b as validateFieldsetProps,
+  po as validateInputPasswordProps,
+  ao as validateInputProps,
+  mo as validateInputSearchProps,
+  To as validateInputStepperProps,
+  Po as validateRadioGroupProps,
+  Bo as validateSelectProps,
+  wo as validateTextareaProps,
+  to as validateType
 };