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

package/chunks/Toast.CLYrwQVO.js

@@ -0,0 +1,89 @@
+"use client";
+import { j as n } from "./jsx-runtime.C-kxDJ4g.js";
+import { c as e } from "./index.CvOaL64Y.js";
+import { forwardRef as f } from "react";
+import { DSButton as u } from "../button.DX_nxoJC.js";
+import { D as k } from "./Icon.9gDIp6p4.js";
+import '../assets/Toast.CAP_EwDX.css';const y = "_root_pyklq_67", g = "_root--closing_pyklq_76", q = "_fade-out_pyklq_1", h = "_move-in_pyklq_1", x = "_root--success_pyklq_111", I = "_root--info_pyklq_115", S = "_root--warning_pyklq_119", N = "_content_pyklq_124", j = "_content--hide-icon_pyklq_131", v = "_icon_pyklq_135", w = "_message_pyklq_139", o = {
+  root: y,
+  "root--closing": "_root--closing_pyklq_76",
+  rootClosing: g,
+  "fade-out": "_fade-out_pyklq_1",
+  fadeOut: q,
+  "move-in": "_move-in_pyklq_1",
+  moveIn: h,
+  "root--success": "_root--success_pyklq_111",
+  rootSuccess: x,
+  "root--info": "_root--info_pyklq_115",
+  rootInfo: I,
+  "root--warning": "_root--warning_pyklq_119",
+  rootWarning: S,
+  content: N,
+  "content--hide-icon": "_content--hide-icon_pyklq_131",
+  contentHideIcon: j,
+  icon: v,
+  message: w
+}, C = {
+  success: "circle-check-colored",
+  warning: "triangle-exclamationmark-colored",
+  info: "circle-info-colored"
+}, D = f(
+  ({
+    message: s,
+    className: r,
+    hideIcon: c = !1,
+    variant: t = "info",
+    onClick: i,
+    onMouseEnter: a,
+    onMouseLeave: _,
+    ...l
+  }, m) => {
+    const p = e(o.root, r, {
+      [o.rootSuccess]: t === "success",
+      [o.rootWarning]: t === "warning",
+      [o.rootInfo]: t === "info"
+    }), d = e(o.content, {
+      [o.contentHideIcon]: c
+    });
+    return /* @__PURE__ */ n.jsx(
+      "aside",
+      {
+        className: p,
+        ref: m,
+        popover: "manual",
+        "data-ds-toast": !0,
+        onMouseEnter: a,
+        onMouseLeave: _,
+        "aria-label": s,
+        ...l,
+        children: /* @__PURE__ */ n.jsxs("div", { className: d, children: [
+          !c && /* @__PURE__ */ n.jsx(
+            k,
+            {
+              name: C[t],
+              className: o.icon,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ n.jsx("div", { className: o.message, children: s }),
+          /* @__PURE__ */ n.jsx(
+            u,
+            {
+              hideLabel: !0,
+              iconName: "cross",
+              size: "small",
+              variant: "ghost",
+              onClick: i,
+              children: "Close toast"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+D.displayName = "DSToast";
+export {
+  D,
+  o as s
+};

package/chunks/{circle-info-colored.DLY6BTL4.js → circle-info-colored.D2pp54gf.js}

@@ -1,10 +1,10 @@
 "use client";
 import * as e from "react";
-const o = ({
+const n = ({
   title: l,
   titleId: t,
   ...a
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#666", fillRule: "evenodd", d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16M6.575 3.35C6.575 2.6 7.175 2 8 2s1.425.6 1.425 1.35c0 .825-.6 1.425-1.425 1.425A1.424 1.424 0 0 1 6.575 3.35M9.05 6.775H6.875v6.75H9.05z", clipRule: "evenodd" }));
+}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", focusable: "false", width: "100%", height: "100%", "aria-labelledby": t, ...a }, l ? /* @__PURE__ */ e.createElement("title", { id: t }, l) : null, /* @__PURE__ */ e.createElement("path", { fill: "#666", fillRule: "evenodd", d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16", clipRule: "evenodd" }), /* @__PURE__ */ e.createElement("path", { fill: "#fff", d: "M6.575 3.35C6.575 2.6 7.175 2 8 2s1.425.6 1.425 1.35c0 .825-.6 1.425-1.425 1.425A1.424 1.424 0 0 1 6.575 3.35M9.05 6.775H6.875v6.75H9.05z" }));
 export {
-  o as default
+  n as default
 };

package/{combobox.BXHAo4Wx.js → combobox.BaSkiD6f.js}

@@ -1,6 +1,6 @@
 "use client";
 import { j as u } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { v as x, C } from "./chunks/CustomReactSelect.uzWNynay.js";
+import { v as x, c as C } from "./chunks/CustomReactSelect.DtmbYZUf.js";
 const v = ({
   id: s,
   label: o,
@@ -8,9 +8,9 @@ const v = ({
   disabled: a = !1,
   dropdownOnFocus: e = !1,
   hideLabel: l = !1,
-  invalid: m = !1,
-  lang: r = "en",
-  required: c = !1,
+  invalid: c = !1,
+  lang: m = "en",
+  required: r = !1,
   variant: f = "single",
   ...t
 }) => {
@@ -32,12 +32,12 @@ const v = ({
       disabled: a,
       hideLabel: l,
       isMulti: i,
-      invalid: m,
-      lang: r,
+      invalid: c,
+      lang: m,
       openMenuOnClick: e,
       openMenuOnFocus: e,
       isClearable: !e || i,
-      required: c,
+      required: r,
       ...t
     }
   );

package/components/AriaLiveRegions/AriaLiveRegions.d.ts

@@ -0,0 +1,4 @@
+/**
+ * A component that provides hidden ARIA live regions for accessibility, allowing screen readers to announce changes dynamically.
+ */
+export declare const DSAriaLiveRegions: () => JSX.Element;

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

@@ -0,0 +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 validateMultipleDSAriaLiveRegionsOnPage: () => void;

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

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

package/components/Checkbox/Checkbox.d.ts

@@ -8,7 +8,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     checked?: boolean;
     /** Disables the checkbox, preventing user interaction */
     disabled?: boolean;
-    /** Hide the checkbox label, can be responsive
+    /** Hides the checkbox label, can be responsive
      * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
      * */
     hideLabel?: BreakpointCustomizable<boolean>;

package/components/CheckboxGroup/CheckboxGroup.utils.d.ts

@@ -1,5 +1,5 @@
 import { CheckboxGroupProps } from './CheckboxGroup';
 
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
-export declare const validateProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateCheckboxGroupProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/Dialog/Dialog.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+
+type DialogProps = {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    isOpen?: boolean;
+    onClose?: () => void;
+} & HTMLAttributes<HTMLDialogElement>;
+export declare const DSDialog: ({ children, className, footer, header, isOpen, onClose, }: DialogProps) => JSX.Element;
+export {};

package/components/Fieldset/Fieldset.utils.d.ts

@@ -7,5 +7,5 @@ export type Legend = string | {
     headingTag?: HeadingTag;
 };
 type ValidationProps = Pick<FieldsetProps, 'description' | 'id' | 'legend' | 'systemFeedback'>;
-export declare const validateProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateFieldsetProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

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.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.CipgVXTR.js → customreactselect.LTbjaBN2.js}

@@ -2,12 +2,12 @@
 import "./chunks/jsx-runtime.C-kxDJ4g.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import { C as l } from "./chunks/CustomReactSelect.uzWNynay.js";
+import { c as l } from "./chunks/CustomReactSelect.DtmbYZUf.js";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
 import "./asterisk.DU8THnoC.js";
-import "./icon.PX9_1kNB.js";
-import "./systemfeedback.C7iXO5A1.js";
-import "./optioncheckbox.-DRnW_ch.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.DzHD39NY.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.PX9_1kNB.js";
-import { DSSpinner as D } from "./spinner.Diy_EeFY.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/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';