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

package/components/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,18 @@
+import { LinkProps } from '../Link/Link';
+
+export interface SkipToContentProps extends Pick<LinkProps, 'className' | 'theme'> {
+    /** Content within the SkipToContent Link.
+     * @default 'Skip to main content'
+     */
+    children?: string;
+    /** id of the element to be focused by the SkipToContent Link.
+     * @default 'main'
+     */
+    targetElementId?: string;
+}
+/**
+ * The `<DSSkipToContent />` component is an accessibility feature that allows users, especially those using screen readers or keyboard navigation, to quickly jump to the targeted content of a webpage without having to focus all the navigation items first. This improves the user experience by making it easier and faster to access important information.
+ *
+ * Focus the section below by using the tab key to see the "Skip To Content" component in action.
+ */
+export declare const DSSkipToContent: ({ children, className, targetElementId, theme, ...rest }: SkipToContentProps) => JSX.Element;

package/components/SkipToContent/SkipToContent.test.d.ts

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

package/components/Spinner/Spinner.d.ts

@@ -1,14 +1,19 @@
-import type { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, Theme } from '../../types';
-import type { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
+import { HTMLAttributes } from 'react';
+import { SelectedAriaAttributes, Theme } from '../../types';
+import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
+
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
-    /** Size of the spinner */
+    /** Size of the spinner.
+     * @default 'small'
+     */
     size?: SpinnerSize;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 export declare const DSSpinner: ({ aria, className, size, theme, ...rest }: SpinnerProps) => JSX.Element;

package/components/Switch/Switch.d.ts

@@ -1,26 +1,37 @@
-import { type ButtonHTMLAttributes } from 'react';
-import type { SelectedAriaAttributes } from '../../types';
-import type { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
+import { ButtonHTMLAttributes } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
+
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the label */
+    /** Content within the label. */
     children: React.ReactNode;
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
-    /** Alignment of the label */
+    /** Alignment of the label.
+     * @default 'left'
+     */
     alignLabel?: SwitchLabelPosition;
-    /** Controls whether the switch is checked. */
+    /** Controls whether the switch is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Identifier for analytics tracking */
+    /** Identifier for analytics tracking. */
     dataTrackingid?: string;
-    /** Disables the switch, preventing user interaction */
+    /** Disables the switch, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Stretches the Switch over the parent's width */
+    /** Stretches the Switch over the parent's width.
+     * @default false
+     */
     stretched?: boolean;
-    /** Callback function triggered when the switch is clicked */
+    /** Callback function called when the switch is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,9 +1,10 @@
-import type { HTMLAttributes } from 'react';
-import { type SystemFeedbackType } from './SystemFeedback.utils';
+import { HTMLAttributes } from 'react';
+import { SystemFeedbackType } from './SystemFeedback.utils';
+
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the message */
+    /** Defines the message. */
     message: string;
-    /** Defines the type */
+    /** Defines the type. */
     type: SystemFeedbackType;
 }
 export declare const DSSystemFeedback: ({ className, message, type, ...rest }: SystemFeedbackProps) => JSX.Element;

package/components/Text/Text.d.ts

@@ -1,16 +1,25 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { TextSize, TextTag, TextWeight } from './Text.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { TextSize, TextTag, TextWeight } from './Text.utils';
+
 export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
-    /** Content of the text */
+    /** Content of the text. */
     children: React.ReactNode;
-    /** Size of the text */
+    /** Size of the text.
+     * @default 'medium'
+     */
     size?: TextSize;
-    /** Specifies the HTML tag to be used for the text */
+    /** Specifies the HTML tag to be used for the text.
+     * @default 'p'
+     */
     tag?: TextTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
-    /** Defines the weight, `size='xx-small'` does not have a bold variant */
+    /** Defines the weight, `size='xx-small'` does not have a bold variant.
+     * @default 'normal'
+     */
     weight?: TextWeight;
 }
 /**

package/components/Textarea/Textarea.d.ts

@@ -1,36 +1,54 @@
-import { type TextareaHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type TextareaSize } from './Textarea.utils';
+import { TextareaHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { TextareaSize } from './Textarea.utils';
+
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
-    /** Unique id for the textarea */
+    /** Unique id for the textarea. */
     id: string;
-    /** Label text displayed above the textarea */
+    /** Label text displayed above the textarea. */
     label: string;
-    /** Text displayed when maximum characters are reached */
+    /** Text displayed when maximum characters are reached.
+     * @default 'Character limit reached'
+     */
     charsLimitText?: string;
-    /** Text used for assistive technologies when the characters remaining amount changes */
+    /** Text used for assistive technologies when the characters remaining amount changes.
+     * @default 'Characters remaining:'
+     */
     charsRemainingText?: string;
-    /** Disables the textarea, preventing user interaction */
+    /** Disables the textarea, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the textarea label, can be responsive
+    /** Hides the textarea label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the textarea as invalid, typically used for form validation */
+    /** Marks the textarea as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea */
+    /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea. */
     maxLength?: number;
-    /** Enables the readonly state of the textarea */
+    /** Enables the readonly state of the textarea.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the textarea is required */
+    /** Indicates that the textarea is required.
+     * @default false
+     */
     required?: boolean;
-    /** Controls whether the textarea is resizable manually or automatically adjusts to user input */
+    /** Controls whether the textarea is resizable manually or automatically adjusts to user input.
+     * @default 'vertical'
+     */
     resize?: 'vertical' | 'auto';
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the textarea */
+    /** Size of the textarea.
+     * @default 'medium'
+     */
     size?: TextareaSize;
     /** CSS className that can be set on the wrapping container of `<DSTextarea />`.  */
     wrapperClassName?: string;

package/components/Textarea/Textarea.utils.d.ts

@@ -1,4 +1,5 @@
-import type { TextareaProps } from './Textarea';
+import { TextareaProps } from './Textarea';
+
 export declare const TEXTAREA_SIZE: readonly ["medium", "small"];
 export type TextareaSize = (typeof TEXTAREA_SIZE)[number];
 type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;

package/components/Title/Title.d.ts

@@ -1,14 +1,21 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { TitleSize, TitleTag } from './Title.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { TitleSize, TitleTag } from './Title.utils';
+
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    /** Content of the title */
+    /** Content of the title. */
     children: React.ReactNode;
-    /** Size of the title */
+    /** Size of the title.
+     * @default 'x-large'
+     */
     size?: TitleSize;
-    /** Specifies the HTML tag to be used for the title */
+    /** Specifies the HTML tag to be used for the title.
+     * @default 'h1'
+     */
     tag?: TitleTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**

package/components/Toast/Toast.d.ts

@@ -0,0 +1,28 @@
+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.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
+    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.
+ *
+ * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
+ *
+ * */
+export declare const DSToast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+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 = {
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /** Hides the icon of the Toast.
+     * @default false
+     */
+    hideIcon?: boolean;
+};

package/components/Toast/ToastManager.d.ts

@@ -0,0 +1,10 @@
+import { ToastOptions } from './Toast.utils';
+
+type ToastContextType = {
+    queueDSToastMessage: (message: string, options?: ToastOptions) => void;
+};
+export declare const useDSToast: () => ToastContextType;
+export declare const DSToastProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

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.Dg8Kgq3e.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import { c as l } from "./chunks/CustomReactSelect.ChAtL6fu.js";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.DDn-yX4P.js";
+import "./chunks/Icon.C2o2seDb.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import "./optioncheckbox.DZWwtx6f.js";
+export {
+  l as CustomReactSelect
+};

package/dialog.D3bJ0rsW.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.DH0h6uPs.js";
+import { D as e } from "./chunks/Dialog.Z5ESJQMi.js";
+export {
+  e as DSDialog
+};

package/dialog.d.ts

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

package/drawer.CNPF1-Kc.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.DH0h6uPs.js";
+import { D as e } from "./chunks/Drawer.BdowMqE0.js";
+export {
+  e as DSDrawer
+};

package/drawer.d.ts

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

package/fieldset.CTshPWYX.js

@@ -0,0 +1,11 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./asterisk.DDn-yX4P.js";
+import "./heading.CAkraI2D.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import { D as l } from "./chunks/Fieldset.COGbZwry.js";
+export {
+  l as DSFieldset
+};

package/floatingactionbutton.CCIj9Fjr.js

@@ -0,0 +1,87 @@
+"use client";
+import { j as a } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as t } from "./chunks/index.CvOaL64Y.js";
+import { D as k } from "./chunks/Icon.C2o2seDb.js";
+import { DSSpinner as D } from "./spinner.D-xrotcu.js";
+import './assets/floatingactionbutton.DRYentYC.css';const S = "_root_pixlx_76", j = "_root--dark_pixlx_137", H = "_root--small_pixlx_177", y = "_loader_pixlx_198", N = "_icon--hidden_pixlx_210", C = "_label--hidden_pixlx_214", o = {
+  root: S,
+  "root--dark": "_root--dark_pixlx_137",
+  rootDark: j,
+  "root--small": "_root--small_pixlx_177",
+  rootSmall: H,
+  loader: y,
+  "icon--hidden": "_icon--hidden_pixlx_210",
+  iconHidden: N,
+  "label--hidden": "_label--hidden_pixlx_214",
+  labelHidden: C
+}, E = ({
+  aria: c,
+  children: _,
+  className: x,
+  dataTrackingid: m,
+  disabled: r = !1,
+  iconName: s = "placeholder",
+  iconSource: i,
+  loading: l = !1,
+  size: p = "medium",
+  theme: e = "light",
+  onClick: n,
+  ...b
+}) => {
+  const u = t(
+    o.root,
+    o.rootIconOnlySmall,
+    x,
+    {
+      // dark theme
+      [o.rootDark]: e === "dark",
+      // size
+      [o.rootSmall]: p === "small"
+    }
+  ), h = t(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: l
+  }), f = (d) => {
+    if (r || l) {
+      d.preventDefault();
+      return;
+    }
+    n && n(d);
+  };
+  return /* @__PURE__ */ a.jsxs(
+    "button",
+    {
+      className: u,
+      "data-trackingid": m,
+      type: "button",
+      onClick: f,
+      ...c,
+      ...b,
+      "aria-disabled": r || l,
+      "aria-busy": l,
+      children: [
+        l && /* @__PURE__ */ a.jsx(
+          D,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ a.jsx("span", { className: t(o.label, o.labelHidden), children: _ }),
+        (s || i) && /* @__PURE__ */ a.jsx(
+          k,
+          {
+            name: s,
+            theme: e,
+            source: i,
+            className: h,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as DSFloatingActionButton
+};

package/heading.CAkraI2D.js

@@ -0,0 +1,50 @@
+"use client";
+import { j as l } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import './assets/heading.6bER-Eac.css';const u = "_root_11ho3_76", g = "_root--x-large_11ho3_79", h = "_root--x-large-uppercase_11ho3_95", d = "_root--large_11ho3_112", n = "_root--large-uppercase_11ho3_128", i = "_root--medium_11ho3_145", x = "_root--medium-uppercase_11ho3_155", L = "_root--small_11ho3_166", U = "_root--small-uppercase_11ho3_176", k = "_root--theme-dark_11ho3_187", o = {
+  root: u,
+  "root--x-large": "_root--x-large_11ho3_79",
+  rootXLarge: g,
+  "root--x-large-uppercase": "_root--x-large-uppercase_11ho3_95",
+  rootXLargeUppercase: h,
+  "root--large": "_root--large_11ho3_112",
+  rootLarge: d,
+  "root--large-uppercase": "_root--large-uppercase_11ho3_128",
+  rootLargeUppercase: n,
+  "root--medium": "_root--medium_11ho3_145",
+  rootMedium: i,
+  "root--medium-uppercase": "_root--medium-uppercase_11ho3_155",
+  rootMediumUppercase: x,
+  "root--small": "_root--small_11ho3_166",
+  rootSmall: L,
+  "root--small-uppercase": "_root--small-uppercase_11ho3_176",
+  rootSmallUppercase: U,
+  "root--theme-dark": "_root--theme-dark_11ho3_187",
+  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.BoMgOmC1.js

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

package/index.d.ts

@@ -1,23 +1,55 @@
+export * from './components/Accordion/Accordion';
+export * from './components/Accordion/Accordion.utils';
+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/Dialog/Dialog';
+export * from './components/Dialog/Dialog.utils';
+export * from './components/Drawer/Drawer';
+export * from './components/Drawer/Drawer.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/SkipToContent/SkipToContent';
 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';
+export * from './components/Toast/ToastManager';