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

package/lib/types/components/highlight-slider/HighlightSlider.d.ts

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { HighlightSliderItemColors } from './highlight-slider-item/HighlightSliderItem';
+export type HighlightSliderProps = {
+    /**
+     * The Colors of the slider.
+     */
+    colors?: HighlightSliderItemColors;
+    /**
+     * The total number of sections, that should be displayed.
+     */
+    count: number;
+    /**
+     * The current index.
+     */
+    currentIndex: number;
+    /**
+     * The duration of the animation of a single item in seconds.
+     */
+    duration?: number;
+    /**
+     * Function to be executed if the index has changed.
+     */
+    onIndexChange?: (index: number) => void;
+};
+declare const HighlightSlider: FC<HighlightSliderProps>;
+export default HighlightSlider;

package/lib/types/components/highlight-slider/HighlightSlider.styles.d.ts

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

package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+export interface HighlightSliderItemColors {
+    backgroundColor: string;
+    fillColor: string;
+}
+export type HighlightSliderItemProps = {
+    index: number;
+    isActive: boolean;
+    isFinished: boolean;
+    onClick: (index: number) => void;
+    onFinish: (index: number) => void;
+    duration: number;
+    colors: HighlightSliderItemColors;
+};
+declare const HighlightSliderItem: FC<HighlightSliderItemProps>;
+export default HighlightSliderItem;

package/lib/types/components/highlight-slider/highlight-slider-item/HighlightSliderItem.styles.d.ts

@@ -0,0 +1,15 @@
+import { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+export declare const StyledHighlightSliderItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+type StyledHighlightSliderItemProgressProps = WithTheme<{
+    $backgroundColor: string;
+}>;
+export declare const StyledHighlightSliderItemProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledHighlightSliderItemProgressProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
+type StyledHighlightSliderItemBackgroundProps = WithTheme<{
+    $backgroundColor: string;
+}>;
+export declare const StyledHighlightSliderItemBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledHighlightSliderItemBackgroundProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
+export {};

package/lib/types/components/icon/Icon.d.ts

@@ -1,41 +1,99 @@
 import { FC, MouseEventHandler } from 'react';
 export type IconProps = {
     /**
-     * Additional class names for the root element
+     * Additional class name for the icon wrapper element.
+     * @description
+     * This class name is applied to the wrapper element that contains the icon. It can be used to
+     * style the icon wrapper element.
+     * @example
+     * <Icon className="my-custom-class" icons={['fa-user']} />
+     * @optional
      */
     className?: string;
     /**
-     * The color of the icon
+     * The color of the icon.
+     * @description
+     * This property can be used to set the color of the icon. The color is only used for icons that
+     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is
+     * specified, the icon color of the theme or the text color will be used.
+     * @example
+     * <Icon color="red" icons={['fa-user']} />
+     * @optional
      */
     color?: string;
     /**
-     * The FontAwesome or tobit icons to render. Multiple icons are stacked.
+     * The icon(s) to be displayed.
+     * @description
+     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as
+     * an array of strings. Each string must be a valid icon name.
+     * @example
+     * <Icon icons={['fa-user']} />
+     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />
      */
     icons: string[];
     /**
-     * Disables the icon so that it cannot be clicked anymore
+     * Whether the icon should be disabled.
+     * @description
+     * This property can be used to disable the icon. When the icon is disabled, it will not be
+     * clickable, and it will not emit any events.
+     * @example
+     * <Icon icons={['fa-user']} isDisabled />
+     * @optional
      */
     isDisabled?: boolean;
     /**
-     * Function to be executed when the icon was clicked
+     * Function to be executed when the icon is clicked.
+     * @description
+     * This function is executed when the icon is clicked. It can be used to handle the click event.
+     * @example
+     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />
+     * @optional
      */
     onClick?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Function to be executed when the icon was double-clicked
+     * Function to be executed when the icon is double-clicked.
+     * @description
+     * This function is executed when the icon is double-clicked. It can be used to handle the
+     * double-click event.
+     * @example
+     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />
+     * @optional
      */
     onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Function to be executed when a mouse button is pressed on the icon
+     * Function to be executed when the icon is pressed.
+     * @description
+     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.
+     * @example
+     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />
+     * @optional
      */
     onMouseDown?: MouseEventHandler<HTMLSpanElement>;
     /**
-     * Size of the icon in pixel
+     * The size of the icon.
+     * @description
+     * This property can be used to set the size of the icon. The size must be specified as a number
+     * in pixels.
+     * @default 15
+     * @example
+     * <Icon icons={['fa-user']} size={20} />
+     * @optional
      */
     size?: number;
     /**
-     * Stops event propagation on click
+     * Stops event propagation on click.
+     * @description
+     * This property can be used to prevent the icon from propagating the click event to its parent
+     * elements.
+     * @example
+     * <Icon icons={['fa-user']} shouldStopPropagation />
+     * @optional
      */
     shouldStopPropagation?: boolean;
+    /**
+     * Optional tab index for the icon.
+     */
+    tabIndex?: number;
 };
 declare const Icon: FC<IconProps>;
 export default Icon;

package/lib/types/components/icon/Icon.styles.d.ts

@@ -4,12 +4,16 @@ type StyledIconWrapperProps = {
     $isOnClick: boolean;
     $size: number;
 };
-export declare const StyledIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledIconWrapperProps>> & string;
+export declare const StyledIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledIconWrapperProps>> & string;
 type StyledIconProps = WithTheme<{
     $fontSize: number;
     $isStacked?: boolean;
     $color?: string;
     $size: number;
 }>;
-export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledIconProps>> & string;
+export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, StyledIconProps>> & string;
+type StyledUnicodeIconProps = WithTheme<{
+    $icon: string;
+}>;
+export declare const StyledUnicodeIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, StyledUnicodeIconProps>> & string;
 export {};

package/lib/types/components/input/Input.d.ts

@@ -1,13 +1,19 @@
-import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, ReactNode, type ReactElement } from 'react';
-export type InputRef = {
+import React, { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler, type ReactElement, ReactNode } from 'react';
+export interface InputRef {
     focus: VoidFunction;
-};
+    blur: VoidFunction;
+}
 type InputMode = 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal' | undefined;
+type AutoComplete = 'on' | 'off' | 'name' | 'username' | 'email' | 'new-password' | 'current-password' | 'tel' | 'url' | 'street-address' | 'postal-code' | 'country' | undefined;
 export declare enum InputSize {
     Small = "small",
     Medium = "medium"
 }
 export type InputProps = {
+    /**
+     * If set and the input is disabled, the input will display a tooltip with this message.
+     */
+    disabledHint?: string;
     /**
      * An element to be displayed on the left side of the input field
      */
@@ -20,6 +26,10 @@ export type InputProps = {
      * Defines the input mode of the input
      */
     inputMode?: InputMode;
+    /**
+     * Defines the auto Complete of the input
+     */
+    autoComplete?: AutoComplete;
     /**
      * Disables the input so that it cannot be changed anymore
      */
@@ -76,6 +86,10 @@ export type InputProps = {
      * Whether only the bottom border should be displayed
      */
     shouldShowOnlyBottomBorder?: boolean;
+    /**
+     * Whether the background should be transparent.
+     */
+    shouldShowTransparentBackground?: boolean;
     /**
      * If true, the input field is focused when the component is mounted
      */
@@ -85,7 +99,7 @@ export type InputProps = {
      */
     size?: InputSize;
     /**
-     * Input type set for input element (e.g. 'text', 'number' or 'password')
+     * Input type set for an input element (e.g. 'text', 'number' or 'password')
      */
     type?: HTMLInputTypeAttribute;
     /**