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

package/components/InputSearch/InputSearch.utils.d.ts

@@ -1,4 +1,5 @@
-import type { InputSearchProps } from './InputSearch';
+import { InputSearchProps } from './InputSearch';
+
 type ValidationProps = Pick<InputSearchProps, 'id' | 'label'>;
 /**
  * Validates the given properties of the DSInputSearch component for common configuration errors.

package/components/InputStepper/InputStepper.d.ts

@@ -1,7 +1,8 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type InputSize } from '../Input/Input.utils';
-export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { InputSize } from '../Input/Input.utils';
+
+export interface InputStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
     /** Unique id for the input */
     id: string;
     /** Label text displayed above the input */

package/components/InputStepper/InputStepper.utils.d.ts

@@ -1,4 +1,5 @@
-import type { InputStepperProps } from './InputStepper';
+import { InputStepperProps } from './InputStepper';
+
 type ValidationProps = Pick<InputStepperProps, 'id' | 'label' | 'prefix' | 'suffix'>;
 /**
  * Validates the given properties of the DSInputStepper component for common configuration errors.

package/components/Link/Link.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
-import { type IconProps } from '../Icon/Icon';
-import type { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
+import { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
+
 export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** ARIA attributes to enhance accessibility
      *  `{'aria-label'? string;`

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { type CommonLinkProps } from '../Link/Link';
-import { type LinkStandaloneVariant } from './LinkStandalone.utils';
+import { CommonLinkProps } from '../Link/Link';
+import { LinkStandaloneVariant } from './LinkStandalone.utils';
+
 export interface LinkStandaloneProps extends CommonLinkProps {
     /** Content within the link */
     children: React.ReactNode;

package/components/Logo/Logo.d.ts

@@ -1,6 +1,7 @@
-import type { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, Theme } from '../../types';
-import type { LogoAriaAttribute, LogoTarget } from './Logo.utils';
+import { HTMLAttributes } from 'react';
+import { SelectedAriaAttributes, Theme } from '../../types';
+import { LogoAriaAttribute, LogoTarget, LogoVariant } from './Logo.utils';
+
 export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | HTMLAnchorElement> {
     /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for
      *  `{'aria-label'? string;}`
@@ -12,10 +13,12 @@ export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | HTMLAnchorE
     target?: LogoTarget;
     /** Defines the theme */
     theme?: Theme;
+    /** Defines the variant, **standard** is only available with **light** theme */
+    variant?: LogoVariant;
 }
 /**
  * This component is used to display the logo.
  *
  * It can be also used as a link by providing a `href` and an `aria-label`.
  */
-export declare const DSLogo: ({ aria, className, href, target, theme, ...rest }: LogoProps) => JSX.Element;
+export declare const DSLogo: ({ aria, className, href, target, theme, variant, ...rest }: LogoProps) => JSX.Element;

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

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

package/components/Radio/Radio.d.ts

@@ -1,5 +1,6 @@
-import { type InputHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed next to the radio */
     label: React.ReactNode;
@@ -24,4 +25,4 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
  * Generally used in radio groups—collections of radio buttons describing a set of related options.
  * Only one radio button in a given group can be selected at the same time.
  * */
-export declare const DSRadio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DSRadio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,13 +1,14 @@
-import { type FieldsetHTMLAttributes } from 'react';
-import { type FieldsetProps } from '../Fieldset/Fieldset';
-import { type RadioGroupOption } from './RadioGroup.utils';
+import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetProps } from '../Fieldset/Fieldset';
+import { RadioGroupOption } from './RadioGroup.utils';
+
 export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
      * 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
@@ -53,4 +54,4 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
  * complete with customizable legends, alignment options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
-export declare const DSRadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,6 @@
-import type { RadioProps } from '../Radio/Radio';
-import type { RadioGroupProps } from './RadioGroup';
+import { RadioProps } from '../Radio/Radio';
+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;

package/components/Select/Select.d.ts

@@ -1,6 +1,7 @@
-import { type SelectHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type SelectOptionsOrOptGroups, type SelectSize } from './Select.utils';
+import { SelectHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
+
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
     /** Unique id for the select */
     id: string;

package/components/Select/Select.utils.d.ts

@@ -1,6 +1,7 @@
-import type { HTMLAttributes } from 'react';
-import type { GroupBase, OptionsOrGroups } from 'react-select';
-import type { SelectProps } from './Select';
+import { HTMLAttributes } from 'react';
+import { GroupBase, OptionsOrGroups } from 'react-select';
+import { SelectProps } from './Select';
+
 type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;

package/components/Spinner/Spinner.d.ts

@@ -1,6 +1,7 @@
-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-label'? string;}`

package/components/Switch/Switch.d.ts

@@ -1,6 +1,7 @@
-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 */
     children: React.ReactNode;

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,5 +1,6 @@
-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 */
     message: string;

package/components/Text/Text.d.ts

@@ -1,6 +1,7 @@
-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 */
     children: React.ReactNode;

package/components/Textarea/Textarea.d.ts

@@ -1,6 +1,7 @@
-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 */
     id: 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,6 +1,7 @@
-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 */
     children: React.ReactNode;

package/customreactselect.CipgVXTR.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.uzWNynay.js";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.DU8THnoC.js";
+import "./icon.PX9_1kNB.js";
+import "./systemfeedback.C7iXO5A1.js";
+import "./optioncheckbox.-DRnW_ch.js";
+export {
+  l as CustomReactSelect
+};

package/fieldset.DGcIKzDI.js

@@ -0,0 +1,98 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import "react";
+import { Asterisk as f } from "./asterisk.DU8THnoC.js";
+import { DSHeading as w } from "./heading.DqGbFfj2.js";
+import { DSSystemFeedback as N } from "./systemfeedback.C7iXO5A1.js";
+import { g as y } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/fieldset.xazpUXJX.css';const v = "_root_189b3_63", E = "_child-wrapper_189b3_69", M = "_legend_189b3_76", q = "_legend--utility--m_189b3_80", C = "_description_189b3_91", P = "_description--small_189b3_104", T = "_system-feedback_189b3_108", i = {
+  root: v,
+  "child-wrapper": "_child-wrapper_189b3_69",
+  childWrapper: E,
+  legend: M,
+  "legend--utility--m": "_legend--utility--m_189b3_80",
+  legendUtilityM: q,
+  description: C,
+  "description--small": "_description--small_189b3_104",
+  descriptionSmall: P,
+  "system-feedback": "_system-feedback_189b3_108",
+  systemFeedback: T
+}, U = ({
+  description: n,
+  id: s,
+  legend: a,
+  systemFeedback: t
+}) => {
+  if (!s && (n || t))
+    throw new Error(
+      y(
+        "DSFieldset",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
+      )
+    );
+  if (!a)
+    throw new Error(
+      y(
+        "DSFieldset",
+        "The legend prop is required. Please add the legend prop to the DSFieldset component."
+      )
+    );
+}, H = ({
+  children: n,
+  legend: s,
+  className: a,
+  description: t,
+  disabled: j = !1,
+  id: d,
+  invalid: p = !1,
+  required: m = !1,
+  systemFeedback: o,
+  ...S
+}) => {
+  process.env.NODE_ENV !== "production" && U({ description: t, id: d, legend: s, systemFeedback: o });
+  let r, _, b;
+  const l = typeof s == "object" && s !== void 0;
+  l && ({ headingSize: r, headingTag: _, headingText: b } = s);
+  const g = `${d}-feedback`, h = `${d}-description`, u = [
+    o && g,
+    t && h
+  ].filter(Boolean).join(" "), x = !l || r === "small" || r === "small-uppercase", D = c(i.root, a), F = c(i.legend, {
+    [i.legendUtilityM]: !l
+  }), k = c(i.description, {
+    [i.descriptionSmall]: x
+  });
+  return /* @__PURE__ */ e.jsxs(
+    "fieldset",
+    {
+      className: D,
+      disabled: j,
+      ...S,
+      "aria-invalid": p,
+      "aria-describedby": u || void 0,
+      children: [
+        /* @__PURE__ */ e.jsx("legend", { className: F, children: l ? /* @__PURE__ */ e.jsxs(w, { tag: _, size: r, children: [
+          b,
+          m && /* @__PURE__ */ e.jsx(f, {})
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          s,
+          m && /* @__PURE__ */ e.jsx(f, {})
+        ] }) }),
+        t && /* @__PURE__ */ e.jsx("span", { id: h, className: k, children: t }),
+        p && o && /* @__PURE__ */ e.jsx(
+          N,
+          {
+            id: g,
+            type: "invalid",
+            message: o,
+            className: i.systemFeedback
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: n })
+      ]
+    }
+  );
+};
+export {
+  H as DSFieldset
+};

package/floatingactionbutton.DzHD39NY.js

@@ -0,0 +1,87 @@
+"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 './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",
+  rootDark: j,
+  "root--small": "_root--small_1milf_160",
+  rootSmall: H,
+  loader: y,
+  "icon--hidden": "_icon--hidden_1milf_191",
+  iconHidden: N,
+  "label--hidden": "_label--hidden_1milf_195",
+  labelHidden: C
+}, E = ({
+  aria: m,
+  children: c,
+  className: _,
+  dataTrackingid: f,
+  disabled: r = !1,
+  iconName: i = "placeholder",
+  iconSource: s,
+  loading: l = !1,
+  size: b = "medium",
+  theme: e = "light",
+  onClick: n,
+  ...p
+}) => {
+  const u = t(
+    o.root,
+    o.rootIconOnlySmall,
+    _,
+    {
+      // dark theme
+      [o.rootDark]: e === "dark",
+      // size
+      [o.rootSmall]: b === "small"
+    }
+  ), h = t(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: l
+  }), k = (d) => {
+    if (r || l) {
+      d.preventDefault();
+      return;
+    }
+    n && n(d);
+  };
+  return /* @__PURE__ */ a.jsxs(
+    "button",
+    {
+      className: u,
+      "data-trackingid": f,
+      type: "button",
+      onClick: k,
+      ...m,
+      ...p,
+      "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: c }),
+        (i || s) && /* @__PURE__ */ a.jsx(
+          x,
+          {
+            name: i,
+            theme: e,
+            source: s,
+            className: h,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as DSFloatingActionButton
+};

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
+};