@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/types/components/select-button/SelectButton.d.ts

@@ -24,7 +24,7 @@ export type SelectButtonProps = {
     /**
      * Function to be executed after an item is selected.
      */
-    onSelect?: (ids: number[]) => void;
+    onSelect?: (ids: (number | string)[]) => void;
     /**
      * If a string is given and `shouldAllowMultiSelect` is true, the dialog displays a checkbox to select all items at once.
      */
@@ -32,7 +32,7 @@ export type SelectButtonProps = {
     /**
      * The id of an item that should be preselected.
      */
-    selectedItemIds?: number[];
+    selectedItemIds?: (number | string)[];
     /**
      * Whether more than one item should be selectable.
      */

package/lib/types/components/select-button/SelectButton.styles.d.ts

@@ -1 +1 @@
-export declare const StyledSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSelectButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/setup-wizard/SetupWizard.d.ts

@@ -9,10 +9,10 @@ interface SetupWizardContextProps {
     updateActiveId?: UpdateActiveId;
 }
 export declare const SetupWizardContext: React.Context<SetupWizardContextProps>;
-export type SetupWizardRef = {
+export interface SetupWizardRef {
     next: (stepId?: number) => void;
     reset: () => void;
-};
+}
 export type SetupWizardProps = {
     /**
      * The steps of the setup. Use the SetupWizardItem component.

package/lib/types/components/setup-wizard/SetupWizard.styles.d.ts

@@ -1 +1 @@
-export declare const StyledSetupWizard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSetupWizard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/setup-wizard/setup-wizard-item/SetupWizardItem.styles.d.ts

@@ -1 +1 @@
-export declare const StyledSetupWizardItemBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSetupWizardItemBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/sharing-bar/SharingBar.d.ts

@@ -1,14 +1,10 @@
 import { FC } from 'react';
-import type { ContextMenuAlignment } from '../../types/contextMenu';
+import type { ContextMenuAlignment } from '../context-menu/ContextMenu.types';
 export type SharingBarProps = {
     /**
      * The element where the content of the `SharingBar` should be rendered via React Portal.
      */
     container?: Element;
-    /**
-     * Whether the ContextMenu is inside a dialog.
-     */
-    isInDialog?: boolean;
     /**
      * The label that should be displayed.
      */

package/lib/types/components/sharing-bar/SharingBar.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledSharingBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSharingBarIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSharingBarText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+export declare const StyledSharingBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSharingBarIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSharingBarText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string;

package/lib/types/components/signature/Signature.styles.d.ts

@@ -1,6 +1,6 @@
-export declare const StyledSignature: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSignatureImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledSignatureImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+export declare const StyledSignature: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSignatureImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSignatureImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string;
-export declare const StyledSignatureDeleteIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSignatureDeleteIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/slider/Slider.d.ts

@@ -5,43 +5,140 @@ export interface SliderInterval {
 }
 export type SliderProps = {
     /**
-     * The range that can be selected with two thumbs..
+     * The current interval of the slider.
+     * @description
+     * The `interval` prop is used to define a range for the slider, allowing users to select a minimum and maximum value.
+     * This is particularly useful for scenarios where you want to allow users to select a range of values, such as price ranges or date ranges.
+     * When provided, the slider will display two thumbs, one for the minimum value and one for the maximum value.
+     * @example
+     * <Slider interval={{ minValue: 10, maxValue: 50 }} />
+     * @optional
      */
     interval?: SliderInterval;
     /**
-     * Whether the slider is disabled.
+     * Disables the slider, preventing user interaction.
+     * @description
+     * The `isDisabled` prop is used to disable the slider, making it unresponsive to user input.
+     * When set to `true`, the slider cannot be moved, and its appearance may change to indicate that it is disabled.
+     * This is useful for scenarios where the slider should not be interacted with, such as when the data it controls is not available or when the user does not have permission to change the value.
+     * @default false
+     * @example
+     * <Slider isDisabled={true} />
+     * @optional
      */
     isDisabled?: boolean;
+    /**
+     * The maximum enabled value of the slider.
+     * @description
+     * The `maxEnabledValue` prop is used to define the maximum value that can be selected on the slider.
+     * It is particularly useful when you want to set an upper limit for the slider's range, ensuring that users cannot select values above this threshold.
+     * This prop is optional and can be used in conjunction with the `maxValue` prop to create a more flexible slider.
+     * @example
+     * <Slider maxEnabledValue={75} />
+     * @optional
+     */
+    maxEnabledValue?: number;
     /**
      * The maximum value of the slider.
+     * @description
+     * The `maxValue` prop defines the upper limit of the slider's range. It is used to set the maximum value that can be selected by the user.
+     * This value should be greater than or equal to `minValue`.
+     * @example
+     * <Slider maxValue={200} />
      */
     maxValue: number;
+    /**
+     * The minimum enabled value of the slider.
+     * @description
+     * The `minEnabledValue` prop is used to define the minimum value that can be selected on the slider.
+     * It is particularly useful when you want to set a lower limit for the slider's range, ensuring that users cannot select values below this threshold.
+     * This prop is optional and can be used in conjunction with the `minValue` prop to create a more flexible slider.
+     * @example
+     * <Slider minEnabledValue={25} />
+     * @optional
+     */
+    minEnabledValue?: number;
     /**
      * The minimum value of the slider.
+     * @description
+     * The `minValue` prop defines the lower limit of the slider's range. It is used to set the minimum value that can be selected by the user.
+     * This value should be less than or equal to `maxValue`.
+     * @example
+     * <Slider minValue={0} />
      */
     minValue: number;
     /**
-     * Function that will be executed when the value is selected.
+     * Callback function that is called when the slider value changes.
+     * @description
+     * The `onChange` prop is a callback function that is triggered whenever the slider value changes.
+     * It receives the new value or interval of the slider as an argument, allowing you to update your application state or perform other actions based on the new value.
+     * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.
+     * @example
+     * <Slider onChange={(value, interval) => console.log('Slider changed', { value, interval })} />
+     */
+    onChange?: (value?: number, interval?: SliderInterval) => void;
+    /**
+     * Callback function that is called when the slider selection is finalized.
+     * @description
+     * The `onSelect` prop is a callback function that is triggered when the user finishes interacting with the slider, such as releasing the mouse or touch after dragging the thumb.
+     * It receives the selected value or interval as arguments, allowing you to perform actions based on the final selection.
+     * If the slider is configured as an interval, it will receive an object with `minValue` and `maxValue`.
+     * @example
+     * <Slider onSelect={(value, interval) => console.log('Slider selected', { value, interval })} />
      */
     onSelect?: (value?: number, interval?: SliderInterval) => void;
     /**
-     * Function that will be executed when the value is changed.
+     * Indicates whether the slider should highlight steps.
+     * @description
+     * The `shouldHighlightSteps` prop determines whether the slider should visually indicate the steps between values.
+     * When set to `true`, the slider will show visual markers for each step, making it easier for users to see the increments.
+     * @default false
+     * @example
+     * <Slider shouldHighlightSteps={true} />
+     * @optional
      */
-    onChange?: (value?: number, interval?: SliderInterval) => void;
+    shouldHighlightSteps?: boolean;
     /**
-     * Whether the current value should be displayed inside the slider thumb.
+     * Indicates whether the slider should show a label on the thumb.
+     * @description
+     * The `shouldShowThumbLabel` prop determines whether the slider should display a label on the thumb that shows the current value.
+     * When set to `true`, a label will be shown above the thumb, providing users with immediate feedback on the selected value.
+     * @default false
+     * @example
+     * <Slider shouldShowThumbLabel={true} />
+     * @optional
      */
     shouldShowThumbLabel?: boolean;
     /**
-     * The steps of the slider.
+     * The step size for the slider.
+     * @description
+     * The `step` prop defines the increment by which the slider value changes when the user interacts with it.
+     * It is used to control the granularity of the slider's movement. For example, if `step` is set to 1, the slider will move in increments of 1.
+     * @default 1
+     * @example
+     * <Slider step={5} />
+     * @optional
      */
-    steps?: number;
+    step?: number;
     /**
      * A function to format the thumb label.
+     * @description
+     * The `thumbLabelFormatter` prop is a function that formats the value displayed on the thumb label.
+     * It receives the current value as an argument and should return a string that will be displayed on the thumb label.
+     * This is useful for customizing the appearance of the label, such as adding currency symbols or units.
+     * @example
+     * <Slider thumbLabelFormatter={(value) => `${value} €`} />
+     * @optional
      */
     thumbLabelFormatter?: (value: number) => string;
     /**
-     * the Value that the slider should have.
+     * The current value of the slider.
+     * @description
+     * The `value` prop is used to set the current value of the slider when it is not configured as an interval.
+     * It should be a number between `minValue` and `maxValue`. If the slider is configured as an interval, this prop will be ignored.
+     * @example
+     * <Slider value={50} />
+     * @optional
      */
     value?: number;
 };