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

package/lib/types/components/button/Button.types.d.ts

@@ -0,0 +1,92 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+export type ButtonProps = {
+    /**
+     * The label of the button.
+     * @description
+     * The content to be displayed inside the button. This can be text, icons, or any React node.
+     * It serves as the primary label for the button's action.
+     * @optional
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names for the button element.
+     * @description
+     * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.
+     * Multiple classes can be provided as a space-separated string.
+     * @optional
+     */
+    className?: string;
+    /**
+     * An icon that is displayed on the left-hand side of the button text.
+     * @description
+     * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.
+     * This enhances the visual representation of the button's function.
+     * @optional
+     */
+    icon?: string;
+    /**
+     * Whether the button is disabled and cannot be clicked anymore.
+     * @description
+     * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.
+     * This is useful for scenarios where the action is temporarily unavailable.
+     * @optional
+     */
+    isDisabled?: boolean;
+    /**
+     * Displays the button in the secondary style.
+     * @description
+     * Applies a secondary visual style to the button, typically with a different background color or border.
+     * This is used to differentiate less prominent actions from primary ones.
+     * @optional
+     */
+    isSecondary?: boolean;
+    /**
+     * Function to be executed when the button is clicked.
+     * @description
+     * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,
+     * such as submitting forms, navigating to pages, or performing any custom action.
+     */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether the button should be displayed as a selectButton.
+     * @description
+     * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.
+     * This changes the styling to indicate a selection state.
+     * @optional
+     * @default false
+     */
+    shouldShowAsSelectButton?: boolean;
+    /**
+     * Whether the text should be 'Roboto Medium'.
+     * @description
+     * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.
+     * This can improve readability or match design guidelines.
+     * @optional
+     * @default true
+     */
+    shouldShowTextAsRobotoMedium?: boolean;
+    /**
+     * Shows a wait cursor instead of button text.
+     * @description
+     * Replaces the button content with a wait cursor animation, indicating that an action is in progress.
+     * This provides visual feedback during loading or processing states.
+     * @optional
+     */
+    shouldShowWaitCursor?: boolean;
+    /**
+     * Stops event propagation on click.
+     * @description
+     * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.
+     * Useful in complex UI structures where event handling needs to be contained.
+     * @optional
+     */
+    shouldStopPropagation?: boolean;
+    /**
+     * Optional button design override.
+     * @description
+     * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.
+     * This provides flexibility for custom theming.
+     * @optional
+     */
+    buttonDesign?: number;
+};

package/lib/types/components/button/wait-cursor/WaitCursor.styles.d.ts

@@ -2,12 +2,12 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
 type StyledWaitCursorProps = WithTheme<{
     $shouldShowWaitCursor: boolean;
 }>;
-export declare const StyledWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorProps>> & string;
-export declare const StyledWaitCursorBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorProps>> & string;
+export declare const StyledWaitCursorBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & string;
 type StyledWaitCursorWaitCursorProps = WithTheme<{
     $color: string;
 }>;
-export declare const StyledWaitCursorWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorWaitCursorProps>> & string;
+export declare const StyledWaitCursorWaitCursor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledWaitCursorWaitCursorProps>> & string;
 export {};

package/lib/types/components/checkbox/Checkbox.styles.d.ts

@@ -1,17 +1,21 @@
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { CheckboxProps } from './Checkbox';
-export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+type StyledCheckboxBoxWrapperProps = WithTheme<{
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
+}>;
+export declare const StyledCheckboxBoxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledCheckboxBoxWrapperProps>> & string;
 type StyledCheckboxBoxProps = WithTheme<{
     $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
     $isDisabled?: CheckboxProps['isDisabled'];
     $isChecked?: CheckboxProps['isChecked'];
-    $lineHeight?: number;
 }>;
-export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
+export declare const StyledCheckboxBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxBoxProps>> & string;
 type StyledCheckboxLabelProps = WithTheme<{
     $isDisabled?: CheckboxProps['isDisabled'];
     $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];
+    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];
 }>;
-export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>> & string;
+export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, StyledCheckboxLabelProps>> & string;
 export {};

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.d.ts

@@ -1,6 +1,5 @@
-import { ColorMode } from 'chayns-api';
+import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';
 import React, { FC, ReactNode } from 'react';
-import type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';
 export type ColorSchemeProviderProps = {
     /**
      * The content of the application or the components for which the styles should be set
@@ -10,28 +9,10 @@ export type ColorSchemeProviderProps = {
      * The hex color to be used for the children
      */
     color?: string;
-    /**
-     * The colors of the components
-     */
-    colors?: Theme;
     /**
      * The color mode to be used for the children
      */
     colorMode?: ColorMode;
-    /**
-     * Css variables to be added in addition to the chayns variables
-     */
-    cssVariables?: {
-        [key: string]: string | number;
-    };
-    /**
-     * The design settings of a page.
-     */
-    designSettings?: DesignSettings;
-    /**
-     * The general format settings.
-     */
-    paragraphFormat?: ParagraphFormat[];
     /**
      * The secondary hex color to be used for the children
      */
@@ -47,9 +28,13 @@ export type ColorSchemeProviderProps = {
         [key: string]: string | number;
     };
     /**
-     * The theme for the components
+     * Additional variables to extend the theme
+     */
+    customVariables?: Record<string, string>;
+    /**
+     * An optional color for all icons
      */
-    theme?: Theme;
+    iconColor?: string;
 };
 export interface Theme {
     [key: string]: string;
@@ -57,10 +42,9 @@ export interface Theme {
 export type WithTheme<T> = T & {
     theme: Theme;
 };
-export type FramerMotionBugFix = WithTheme<unknown>;
 export interface ColorSchemeContextProps {
-    designSettings: DesignSettings;
-    paragraphFormat: ParagraphFormat[];
+    designSettings?: ChaynsDesignSettings;
+    paragraphFormat: ChaynsParagraphFormat[];
     theme: Theme;
 }
 export declare const ColorSchemeContext: React.Context<ColorSchemeContextProps | undefined>;

package/lib/types/components/color-scheme-provider/ColorSchemeProvider.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const StyledColorSchemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledColorSchemeProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     theme: import("./ColorSchemeProvider").Theme;
 }>> & string;

package/lib/types/components/color-scheme-provider/hooks/useChaynsTheme.d.ts

@@ -0,0 +1,21 @@
+import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode } from 'chayns-api';
+import type { Theme } from '../ColorSchemeProvider';
+export type ThemeOptions = {
+    colors?: Theme;
+    colorMode: ColorMode;
+    iconColor?: string;
+    color: string;
+    secondaryColor?: string;
+    designSettings?: ChaynsDesignSettings & {
+        fontSizePx?: number;
+    };
+    paragraphFormat?: ChaynsParagraphFormat[];
+    siteId?: string;
+    theme?: Theme;
+    customVariables?: Record<string, string>;
+};
+export declare const useChaynsTheme: ({ colors, colorMode, color, secondaryColor, designSettings: designSettingsProp, paragraphFormat: paragraphFormatProp, siteId, iconColor, theme, customVariables, }: ThemeOptions) => {
+    theme: Theme;
+    designSettings: ChaynsDesignSettings | undefined;
+    paragraphFormat: ChaynsParagraphFormat[];
+};

package/lib/types/components/color-scheme-provider/hooks/useDesignSettings.d.ts

@@ -0,0 +1,9 @@
+import { ChaynsDesignSettings, ColorMode } from 'chayns-api';
+interface UseDesignSettingsOptions {
+    color?: string;
+    colorMode?: ColorMode;
+    designSettings?: ChaynsDesignSettings;
+    siteId?: string;
+}
+export declare const useDesignSettings: ({ color, colorMode, designSettings, siteId, }: UseDesignSettingsOptions) => ChaynsDesignSettings | undefined;
+export {};

package/lib/types/components/color-scheme-provider/hooks/useParagraphFormat.d.ts

@@ -0,0 +1,2 @@
+import { ChaynsParagraphFormat } from 'chayns-api';
+export declare const useParagraphFormat: (siteId?: string, paragraphFormat?: ChaynsParagraphFormat[]) => ChaynsParagraphFormat[];

package/lib/types/components/combobox/ComboBox.d.ts

@@ -1,5 +1,10 @@
-import { ChangeEventHandler, FC, FocusEventHandler, ReactHTML, type CSSProperties, type ReactNode } from 'react';
-import { ComboBoxDirection } from '../../types/comboBox';
+import React, { ChangeEventHandler, type CSSProperties, FocusEventHandler, ReactHTML, type ReactNode } from 'react';
+import { CSSPropertiesWithVars } from 'styled-components/dist/types';
+import { DropdownDirection } from '../../types/dropdown';
+export interface ComboBoxRef {
+    hide: VoidFunction;
+    show: VoidFunction;
+}
 export interface IComboBoxItems {
     groupName?: string;
     list: Array<IComboBoxItem>;
@@ -7,7 +12,8 @@ export interface IComboBoxItems {
 }
 export interface ComboBoxTextStyles {
     tagName?: keyof ReactHTML;
-    styles?: CSSProperties;
+    styles?: CSSPropertiesWithVars;
+    className?: string;
 }
 export interface IComboBoxItem {
     icons?: string[];
@@ -22,6 +28,10 @@ export interface IComboBoxItem {
     textStyles?: ComboBoxTextStyles;
 }
 export type ComboBoxProps = {
+    /**
+     * The width of the body.
+     */
+    bodyWidth?: number;
     /**
      * The element where the content of the `ComboBox` should be rendered via React Portal.
      */
@@ -29,7 +39,7 @@ export type ComboBoxProps = {
     /**
      * The direction in which the combobox should open.
      */
-    direction?: ComboBoxDirection;
+    direction?: DropdownDirection;
     /**
      * The value of the optional input.
      */
@@ -45,7 +55,7 @@ export type ComboBoxProps = {
     /**
      * The maximum height of the combobox content.
      */
-    maxHeight?: CSSProperties['maxHeight'];
+    maxHeight?: number;
     /**
      * Function to be executed when the value of the optional input is changed.
      */
@@ -53,14 +63,15 @@ export type ComboBoxProps = {
     /**
      * Function to be executed when the optional input lost its focus.
      */
-    onInputBlur?: FocusEventHandler<HTMLInputElement> /**
+    onInputBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
      * Function to be executed when the optional input gets its focus.
-     */;
+     */
     onInputFocus?: FocusEventHandler<HTMLInputElement>;
     /**
      * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.
      */
-    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;
+    onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;
     /**
      * A text that should be displayed when no item is selected.
      */
@@ -77,6 +88,14 @@ export type ComboBoxProps = {
      * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.
      */
     shouldShowBigImage?: boolean;
+    /**
+     * If true, a clear icon is displayed at the end of the combo box if an item is selected.
+     */
+    shouldShowClearIcon?: boolean;
+    /**
+     * Whether the background should be transparent.
+     */
+    shouldShowTransparentBackground?: boolean;
     /**
      * If true, the images of the items are displayed in a round shape.
      */
@@ -89,6 +108,14 @@ export type ComboBoxProps = {
      * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.
      */
     shouldUseFullWidth?: boolean;
+    /**
+     * If true, the dropdown will use the maximum width of the items.
+     */
+    shouldDropDownUseMaxItemWidth?: boolean;
+    /**
+     * Optional min width for the prefix element.
+     */
+    prefixMinWidth?: number;
 };
-declare const ComboBox: FC<ComboBoxProps>;
+declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<ComboBoxRef>>;
 export default ComboBox;