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

package/lib/types/components/multi-action-button/MultiActionButton.types.d.ts

@@ -0,0 +1,183 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { MotionValue } from 'motion/react';
+/**
+ * Supported status types for the multi action button.
+ */
+export declare enum MultiActionButtonStatusType {
+    /**
+     * Pulsing background effect.
+     * @description Applies a subtle animated overlay on the action background to draw attention.
+     * This is intended for temporary states like recording or live activity indicators.
+     */
+    Pulse = "pulse"
+}
+/**
+ * Supported heights for the multi action button.
+ */
+export declare enum MultiActionButtonHeight {
+    /**
+     * Medium height (42px).
+     */
+    Medium = 42,
+    /**
+     * Large height (52px).
+     */
+    Large = 52
+}
+/**
+ * Minimal status configuration for an action.
+ */
+export type MultiActionButtonActionStatus = {
+    /**
+     * Optional pulse colors for the animation.
+     * @description Defines the two colors for the pulsing background animation. If not provided, defaults to ['#A50000', '#630000'].
+     * @optional
+     */
+    pulseColors?: [string, string];
+    /**
+     * Status type to apply.
+     * @description Selects the visual emphasis type applied to the action. The component currently
+     * supports a pulsing overlay, and additional types may be added later.
+     * @optional
+     */
+    type?: MultiActionButtonStatusType;
+};
+/**
+ * Event payload emitted on action click.
+ */
+export type MultiActionButtonActionEvent = {
+    /**
+     * Which action was clicked.
+     * @description Indicates whether the primary or secondary action fired. This is helpful when
+     * sharing a handler between both actions.
+     */
+    action: 'primary' | 'secondary';
+    /**
+     * Original click event.
+     * @description Useful to access modifier keys, prevent default, or stop propagation.
+     */
+    event: MouseEvent<HTMLButtonElement>;
+    /**
+     * Whether the secondary action is currently extended.
+     * @description Useful for flows that need to distinguish between a collapsed and expanded
+     * secondary action, especially on touch devices.
+     */
+    isExtended: boolean;
+    /**
+     * Whether the device is considered touch.
+     * @description Derived from pointer capabilities and used to decide between hover and click behavior.
+     */
+    isTouch: boolean;
+};
+/**
+ * Configuration for a single action.
+ */
+export type MultiActionButtonAction = {
+    /**
+     * Optional color for the icon and label.
+     * @description Overrides the default text/icon color. If omitted, the current theme text color is used.
+     * @optional
+     */
+    color?: string;
+    /**
+     * The icon for the action.
+     * @description Can be a FontAwesome class string (e.g., 'fa fa-microphone') or a custom ReactNode.
+     * The icon is always rendered inside a fixed-size slot to keep alignment stable.
+     */
+    icon: string | ReactNode;
+    /**
+     * Whether the action is disabled.
+     * @description Disabled actions do not respond to hover or click and are visually dimmed.
+     * @optional
+     */
+    isDisabled?: boolean;
+    /**
+     * The optional label for the action.
+     * @description The label is shown next to the icon and will be truncated with ellipsis when
+     * there is not enough horizontal space.
+     * @optional
+     */
+    label: ReactNode;
+    /**
+     * Click handler for the action.
+     * @description Receives a payload that includes the action type, extension state, and device info.
+     * This allows external logic to decide whether the click should trigger an action immediately.
+     * @optional
+     */
+    onClick?: (info: MultiActionButtonActionEvent) => void;
+    /**
+     * Status effect configuration for the action.
+     * @description Controls optional visual emphasis like pulsing, without changing layout or sizing.
+     * @optional
+     */
+    status?: MultiActionButtonActionStatus;
+};
+/**
+ * Props for the MultiActionButton component.
+ */
+export type MultiActionButtonProps = {
+    /**
+     * Optional background color for both actions.
+     * @description Overrides the default background color for the action buttons.
+     * @optional
+     */
+    backgroundColor?: string;
+    /**
+     * Additional class name for the wrapper element.
+     * @description Useful for custom styling or testing hooks.
+     * @optional
+     */
+    className?: string;
+    /**
+     * Auto-reset timeout for the extended state (ms).
+     * @description Applies only when the secondary action is clicked (not when hovered). After the timeout,
+     * the secondary action collapses automatically.
+     * @default 2000
+     * @optional
+     */
+    extendedTimeoutMs?: number;
+    /**
+     * Whether the button is collapsed to a single icon.
+     * @description When collapsed, only the primary icon is shown and the overall width shrinks to a circle.
+     * Use this to provide compact states or toolbar modes.
+     * @optional
+     */
+    isCollapsed?: boolean;
+    /**
+     * Whether the whole control is disabled.
+     * @description Disables interactions for both actions, including hover expansion and clicks.
+     * @optional
+     */
+    isDisabled?: boolean;
+    /**
+     * Primary action configuration.
+     * @description Required action shown on the left side (or as the only action when no secondary is provided).
+     */
+    primaryAction: MultiActionButtonAction;
+    /**
+     * Secondary action configuration.
+     * @description Optional action shown on the right side. When present, it can expand on hover or click.
+     * @optional
+     */
+    secondaryAction?: MultiActionButtonAction;
+    /**
+     * Height of the button.
+     * @description Controls the height of the button. Use values from MultiActionButtonHeight enum or custom number.
+     * @default 42
+     * @optional
+     */
+    height?: number;
+    /**
+     * Whether the button should take the full width of its parent.
+     * @description When true, the control stretches to 100% width unless `width` is provided.
+     * @optional
+     */
+    shouldUseFullWidth?: boolean;
+    /**
+     * Optional width override for the whole button.
+     * @description Can be a fixed number or a MotionValue for external animations. When omitted,
+     * the width is driven by the content unless `shouldUseFullWidth` is true.
+     * @optional
+     */
+    width?: number | MotionValue<number>;
+};

package/lib/types/components/multi-action-button/action-button/ActionButton.d.ts

@@ -0,0 +1,25 @@
+import { FC, MouseEvent } from 'react';
+import type { MultiActionButtonAction } from '../MultiActionButton.types';
+export type ActionButtonProps = {
+    action: MultiActionButtonAction;
+    actionType: 'primary' | 'secondary';
+    backgroundColor?: string;
+    isCollapsed: boolean;
+    isDisabled: boolean;
+    isExpanded?: boolean;
+    isHidden?: boolean;
+    isShrunk?: boolean;
+    isSolo?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    showLabel: boolean;
+    shouldUseContentWidth: boolean;
+    height: number;
+};
+/**
+ * Shared action button UI used by both primary and secondary actions.
+ * Keeps layout and animations consistent while isolating styling details.
+ */
+declare const ActionButton: FC<ActionButtonProps>;
+export default ActionButton;

package/lib/types/components/multi-action-button/action-button/ActionButton.styles.d.ts

@@ -0,0 +1,26 @@
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+import { MultiActionButtonStatusType } from '../MultiActionButton.types';
+type StyledActionButtonProps = WithTheme<{
+    $backgroundColor?: string;
+    $isCollapsed?: boolean;
+    $isExpanded?: boolean;
+    $isHidden?: boolean;
+    $isPrimary?: boolean;
+    $isSecondary?: boolean;
+    $isShrunk?: boolean;
+    $isSolo?: boolean;
+    $pulseColors?: [string, string];
+    $height: number;
+    $statusType?: MultiActionButtonStatusType;
+    $shouldUseContentWidth?: boolean;
+}>;
+export declare const StyledActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledActionButtonProps>> & string;
+export declare const StyledActionContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledIconSlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $height: number;
+}>> & string;
+export declare const StyledLabelWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | 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]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLSpanElement, import("motion/react").HTMLMotionProps<"span">>, keyof React.Component<any, {}, any>>;
+export declare const StyledSecondaryLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export {};

package/lib/types/components/number-input/NumberInput.d.ts

@@ -47,6 +47,10 @@ export type NumberInputProps = {
      * Whether only the bottom border should be displayed
      */
     shouldShowOnlyBottomBorder?: boolean;
+    /**
+     * Whether the onChange function should be triggert when the value is formatted on the focus or blur
+     */
+    shouldTriggerChangeOnFormat?: boolean;
     /**
      * The value, that should be displayed in the input, when it is in focus.
      * You can also pass a stringified number as default value.

package/lib/types/components/page-provider/PageProvider.d.ts

@@ -1,12 +1,44 @@
 import { FC } from 'react';
 import { type ColorSchemeProviderProps } from '../color-scheme-provider/ColorSchemeProvider';
+/**
+ * Props for the PageProvider component.
+ * @description
+ * This interface defines the props that can be passed to the PageProvider component
+ * for controlling the layout and styling behavior.
+ * @example
+ * <PageProvider shouldRemovePadding={true}>
+ *   {children}
+ * </PageProvider>
+ */
 interface PageProviderProps extends ColorSchemeProviderProps {
     /**
-     * Whether the padding should be removed.
+     * Controls whether the usable height should be reduced by the cover height
+     * @description
+     * When true, the usable height will be reduced by the cover image height. This is useful
+     * when the page should not be scrollable due to the cover image. The property has no effect
+     * when `shouldUseUsableHeight` is false.
+     * @default false
+     * @optional
+     */
+    shouldReduceUsableHeightByCoverHeight?: boolean;
+    /**
+     * Controls whether padding should be removed from the page
+     * @description
+     * When true, the padding around the page content will be removed. This is useful when the
+     * page should not have any padding, for example, when it is embedded in a pagemaker page.
+     * @default false
+     * @optional
      */
     shouldRemovePadding?: boolean;
     /**
-     * Whether the usable height should be used.
+     * Controls whether the component should use the calculated usable height
+     * @description
+     * When true, the page will cover the entire usable height of the screen. This means that
+     * the viewport is not scrollable and the page takes up the full height not required by the
+     * title or bottom bar. Optionally, the height of the cover image can be reduced by setting
+     * `shouldReduceUsableHeightByCoverHeight` to true.
+     * @default false
+     * @optional
      */
     shouldUseUsableHeight?: boolean;
 }

package/lib/types/components/page-provider/PageProvider.styles.d.ts

@@ -3,5 +3,5 @@ type StyledPageProviderProps = {
     $shouldUsePadding?: boolean;
     $usableHeight?: CSSProperties['height'];
 };
-export declare const StyledPageProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPageProviderProps>> & string;
+export declare const StyledPageProvider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPageProviderProps>> & string;
 export {};

package/lib/types/components/popup/Popup.d.ts

@@ -1,6 +1,10 @@
 import React, { ReactNode } from 'react';
-import { PopupRef } from '../../types/popup';
+import { PopupAlignment, PopupRef } from '../../types/popup';
 export type PopupProps = {
+    /**
+     * The alignment of the popup. By default, the popup will calculate the best alignment.
+     */
+    alignment?: PopupAlignment;
     /**
      * The element over which the content of the `ContextMenu` should be displayed.
      */
@@ -25,6 +29,10 @@ export type PopupProps = {
      * Whether the tooltip should be hidden after the children is not hovered.
      */
     shouldHideOnChildrenLeave?: boolean;
+    /**
+     * Whether the popup should scroll with the content.
+     */
+    shouldScrollWithContent?: boolean;
     /**
      * Whether the popup should be opened on hover. If not, the popup will be opened on click.
      */
@@ -33,6 +41,10 @@ export type PopupProps = {
      * Whether the width of the children should be used.
      */
     shouldUseChildrenWidth?: boolean;
+    /**
+     * Whether the popup children should use the full width.
+     */
+    shouldUseFullWidth?: boolean;
     /**
      * The Y offset of the popup to the children.
      */

package/lib/types/components/popup/Popup.styles.d.ts

@@ -1,9 +1,10 @@
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 type StyledPopupProps = WithTheme<{
     $shouldUseChildrenWidth: boolean;
+    $shouldUseFullWidth: boolean;
 }>;
-export declare const StyledPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledPopupProps>> & string;
-export declare const StyledPopupPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledPopupProps>> & string;
+export declare const StyledPopupPseudo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $menuHeight: number;
 }>> & string;
 export {};

package/lib/types/components/popup/popup-content/PopupContent.styles.d.ts

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

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.d.ts

@@ -7,7 +7,9 @@ type PopupContentProps = {
     coordinates: PopupCoordinates;
     onMouseLeave: MouseEventHandler<HTMLSpanElement>;
     onMouseEnter: MouseEventHandler<HTMLSpanElement>;
+    shouldScrollWithContent: boolean;
     width: number;
+    maxHeight?: number;
 };
 declare const PopupContentWrapper: React.ForwardRefExoticComponent<PopupContentProps & React.RefAttributes<HTMLDivElement>>;
 export default PopupContentWrapper;