@vibe/core 4.0.0-alpha.1 → 4.0.0-alpha.2

package/dist/components/MenuButton/MenuButton.d.ts

@@ -1,146 +1,146 @@
-import React from "react";
-import { type DialogOffset, type DialogPosition, type DialogSize, type DialogStartingEdge, type DialogTriggerEvent } from "@vibe/dialog";
-import { type TooltipProps } from "@vibe/tooltip";
-import { type ElementContent, type VibeComponentProps } from "../../types";
-import { type MenuButtonComponentPosition, type MenuButtonSize } from "./MenuButton.types";
-import { type TooltipPositions } from "@vibe/tooltip";
-export interface MenuButtonProps extends VibeComponentProps {
-    /**
-     * If true, the button is in an active state.
-     */
-    active?: boolean;
-    /**
-     * Class name applied to the button when the dialog is open.
-     */
-    openDialogComponentClassName?: string;
-    /**
-     * The component used as the button icon.
-     */
-    component?: (() => JSX.Element) | React.ElementType;
-    /**
-     * The size of the button.
-     */
-    size?: MenuButtonSize;
-    /**
-     * If true, the menu is open.
-     */
-    open?: boolean;
-    /**
-     * Callback fired when the button is clicked.
-     */
-    onClick?: (event: React.MouseEvent) => void;
-    /**
-     * The z-index of the menu.
-     */
-    zIndex?: number;
-    /**
-     * The label of the button for accessibility.
-     */
-    "aria-label"?: string;
-    /**
-     * Class name applied to the menu dialog wrapper.
-     */
-    dialogClassName?: string;
-    /**
-     * The offset of the menu relative to the button.
-     */
-    dialogOffset?: DialogOffset;
-    /**
-     * The padding size inside the menu dialog.
-     */
-    dialogPaddingSize?: DialogSize;
-    /**
-     * The position of the menu dialog relative to the button.
-     */
-    dialogPosition?: DialogPosition;
-    /**
-     * Classes that prevent showing the dialog when present.
-     */
-    dialogShowTriggerIgnoreClass?: string | Array<string>;
-    /**
-     * Classes that prevent hiding the dialog when present.
-     */
-    dialogHideTriggerIgnoreClass?: string | Array<string>;
-    /**
-     * The container selector in which to append the dialog.
-     */
-    dialogContainerSelector?: string;
-    /**
-     * The starting edge alignment of the menu.
-     */
-    startingEdge?: DialogStartingEdge;
-    /**
-     * Callback fired when the menu is shown.
-     */
-    onMenuShow?: () => void;
-    /**
-     * Callback fired when the menu is hidden.
-     */
-    onMenuHide?: () => void;
-    /**
-     * The text displayed inside the button.
-     */
-    text?: string;
-    /**
-     * If true, the button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * The tooltip content displayed when hovering over the button.
-     */
-    tooltipContent?: string;
-    /**
-     * If true, removes the tab key from the hide trigger.
-     */
-    removeTabCloseTrigger?: boolean;
-    /**
-     * The triggers that cause the tooltip to show or hide.
-     */
-    tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];
-    /**
-     * The position of the tooltip.
-     */
-    tooltipPosition?: TooltipPositions;
-    /**
-     * Class name applied to the tooltip reference wrapper.
-     */
-    tooltipReferenceClassName?: string;
-    /**
-     * Additional props for customizing the tooltip.
-     */
-    tooltipProps?: Partial<TooltipProps>;
-    /**
-     * If true, hides the menu and tooltip when the button is not visible.
-     */
-    hideWhenReferenceHidden?: boolean;
-    /**
-     * The content inside the menu button.
-     */
-    children?: ElementContent;
-    /**
-     * The position of the component relative to the text.
-     */
-    componentPosition?: MenuButtonComponentPosition;
-    /**
-     * The element used as the trigger for the menu.
-     */
-    triggerElement?: React.ElementType;
-    /**
-     * If true, closes the menu when a menu item is clicked.
-     */
-    closeMenuOnItemClick?: boolean;
-    /**
-     * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.
-     */
-    showTooltipOnlyOnTriggerElement?: boolean;
-    /**
-     * If true, closes the menu when clicking inside the dialog.
-     */
-    closeDialogOnContentClick?: boolean;
-    /**
-     * The ARIA control of the menu button for accessibility.
-     */
-    "aria-controls"?: string;
-}
-declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLElement>>;
-export default MenuButton;
+import React from "react";
+import { type DialogOffset, type DialogPosition, type DialogSize, type DialogStartingEdge, type DialogTriggerEvent } from "@vibe/dialog";
+import { type TooltipProps } from "@vibe/tooltip";
+import { type ElementContent, type VibeComponentProps } from "../../types";
+import { type MenuButtonComponentPosition, type MenuButtonSize } from "./MenuButton.types";
+import { type TooltipPositions } from "@vibe/tooltip";
+export interface MenuButtonProps extends VibeComponentProps {
+    /**
+     * If true, the button is in an active state.
+     */
+    active?: boolean;
+    /**
+     * Class name applied to the button when the dialog is open.
+     */
+    openDialogComponentClassName?: string;
+    /**
+     * The component used as the button icon.
+     */
+    component?: (() => JSX.Element) | React.ElementType;
+    /**
+     * The size of the button.
+     */
+    size?: MenuButtonSize;
+    /**
+     * If true, the menu is open.
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the button is clicked.
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * The z-index of the menu.
+     */
+    zIndex?: number;
+    /**
+     * The label of the button for accessibility.
+     */
+    "aria-label"?: string;
+    /**
+     * Class name applied to the menu dialog wrapper.
+     */
+    dialogClassName?: string;
+    /**
+     * The offset of the menu relative to the button.
+     */
+    dialogOffset?: DialogOffset;
+    /**
+     * The padding size inside the menu dialog.
+     */
+    dialogPaddingSize?: DialogSize;
+    /**
+     * The position of the menu dialog relative to the button.
+     */
+    dialogPosition?: DialogPosition;
+    /**
+     * Classes that prevent showing the dialog when present.
+     */
+    dialogShowTriggerIgnoreClass?: string | Array<string>;
+    /**
+     * Classes that prevent hiding the dialog when present.
+     */
+    dialogHideTriggerIgnoreClass?: string | Array<string>;
+    /**
+     * The container selector in which to append the dialog.
+     */
+    dialogContainerSelector?: string;
+    /**
+     * The starting edge alignment of the menu.
+     */
+    startingEdge?: DialogStartingEdge;
+    /**
+     * Callback fired when the menu is shown.
+     */
+    onMenuShow?: () => void;
+    /**
+     * Callback fired when the menu is hidden.
+     */
+    onMenuHide?: () => void;
+    /**
+     * The text displayed inside the button.
+     */
+    text?: string;
+    /**
+     * If true, the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The tooltip content displayed when hovering over the button.
+     */
+    tooltipContent?: string;
+    /**
+     * If true, removes the tab key from the hide trigger.
+     */
+    removeTabCloseTrigger?: boolean;
+    /**
+     * The triggers that cause the tooltip to show or hide.
+     */
+    tooltipTriggers?: DialogTriggerEvent | DialogTriggerEvent[];
+    /**
+     * The position of the tooltip.
+     */
+    tooltipPosition?: TooltipPositions;
+    /**
+     * Class name applied to the tooltip reference wrapper.
+     */
+    tooltipReferenceClassName?: string;
+    /**
+     * Additional props for customizing the tooltip.
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /**
+     * If true, hides the menu and tooltip when the button is not visible.
+     */
+    hideWhenReferenceHidden?: boolean;
+    /**
+     * The content inside the menu button.
+     */
+    children?: ElementContent;
+    /**
+     * The position of the component relative to the text.
+     */
+    componentPosition?: MenuButtonComponentPosition;
+    /**
+     * The element used as the trigger for the menu.
+     */
+    triggerElement?: React.ElementType;
+    /**
+     * If true, closes the menu when a menu item is clicked.
+     */
+    closeMenuOnItemClick?: boolean;
+    /**
+     * If true, the tooltip appears only when hovering over the trigger element, not the menu dialog.
+     */
+    showTooltipOnlyOnTriggerElement?: boolean;
+    /**
+     * If true, closes the menu when clicking inside the dialog.
+     */
+    closeDialogOnContentClick?: boolean;
+    /**
+     * The ARIA control of the menu button for accessibility.
+     */
+    "aria-controls"?: string;
+}
+declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLElement>>;
+export default MenuButton;

package/dist/components/MenuButton/MenuButton.types.d.ts

@@ -1,2 +1,2 @@
-export type MenuButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
-export type MenuButtonComponentPosition = "start" | "end";
+export type MenuButtonSize = "xxs" | "xs" | "small" | "medium" | "large";
+export type MenuButtonComponentPosition = "start" | "end";

package/dist/components/MenuButton/index.d.ts

@@ -1,2 +1,2 @@
-export { default as MenuButton, type MenuButtonProps } from "./MenuButton";
-export * from "./MenuButton.types";
+export { default as MenuButton, type MenuButtonProps } from "./MenuButton";
+export * from "./MenuButton.types";

package/dist/components/Modal/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { type ModalProps } from "./Modal.types";
-declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export default Modal;
+import React from "react";
+import { type ModalProps } from "./Modal.types";
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/dist/components/Modal/Modal/Modal.types.d.ts

@@ -1,114 +1,114 @@
-import { type VibeComponentProps } from "../../../types";
-import type React from "react";
-import { type ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
-import { type PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
-import { type FocusEscapeTarget } from "../hooks/useFocusEscapeTargets/useFocusEscapeTargets.types";
-export type ModalSize = "small" | "medium" | "large" | "full-view";
-export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
-export interface ModalProps extends VibeComponentProps {
-    /**
-     * Unique identifier for the modal.
-     */
-    id: string;
-    /**
-     * Controls the visibility of the modal.
-     */
-    show: boolean;
-    /**
-     * Determines the width and max-height of the modal.
-     */
-    size?: ModalSize;
-    /**
-     * Theme color for the close button.
-     */
-    closeButtonTheme?: ModalTopActionsProps["theme"];
-    /**
-     * Accessibility label for the close button.
-     */
-    closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
-    /**
-     * Callback fired when the modal should close.
-     */
-    onClose?: (event: ModalCloseEvent) => void;
-    /**
-     * This is intended for advanced use-cases.
-     * It allows you to control the default focus behavior when the modal mounts.
-     * Make sure to use this prop only when you understand the implications.
-     *
-     * Determines if focus should automatically move to the first focusable element when the component mounts.
-     * When set to `false` - disables the automatic focus behavior.
-     * - Notice this might break keyboard and general accessibility and should be used with caution.
-     */
-    autoFocus?: boolean;
-    /**
-     * Specifies elements/containers that should be allowed to receive focus outside this modal.
-     * When focus moves to these elements, the focus lock will ignore them.
-     * This allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.
-     *
-     * Accepts:
-     * - CSS selectors (string)
-     * - Refs to elements (React.RefObject<HTMLElement>)
-     * - Direct element references (HTMLElement)
-     */
-    allowFocusEscapeTo?: FocusEscapeTarget[];
-    /**
-     * This is intended for advanced use-cases.
-     * It allows you to control which elements the focus lock should manage.
-     * Make sure to use this prop only when you understand the implications.
-     *
-     * **Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.
-     *
-     * Called whenever focus is attempting to move to any element (inside or outside the modal).
-     * Return:
-     * - `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).
-     * - `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).
-     * - An HTMLElement to redirect focus to that element instead.
-     * - Any other value (e.g., null, undefined) would act as `false`.
-     *
-     * @example
-     * // Complex custom logic
-     * <Modal
-     *   onFocusAttempt={(el) => {
-     *     if (el?.dataset.customBehavior) return false;
-     *     return true;
-     *   }}
-     * />
-     */
-    onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
-    /**
-     * Additional action to render in the header area.
-     */
-    renderHeaderAction?: ModalTopActionsProps["renderAction"];
-    /**
-     * Reference to an element that triggered the modal, used for animations.
-     */
-    anchorElementRef?: React.RefObject<HTMLElement>;
-    /**
-     * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
-     */
-    alertModal?: boolean;
-    /**
-     * The target element to render the modal into.
-     */
-    container?: PortalTarget;
-    /**
-     * Modal content.
-     */
-    children: React.ReactNode;
-    /**
-     * Additional inline styles for the modal.
-     */
-    style?: React.CSSProperties;
-    /**
-     * The z-index to be used for the modal and overlay.
-     */
-    zIndex?: number;
-    /**
-     * If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.
-     */
-    "aria-labelledby"?: string;
-    /**
-     * If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.
-     */
-    "aria-describedby"?: string;
-}
+import { type VibeComponentProps } from "../../../types";
+import type React from "react";
+import { type ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types";
+import { type PortalTarget } from "../hooks/usePortalTarget/usePortalTarget.types";
+import { type FocusEscapeTarget } from "../hooks/useFocusEscapeTargets/useFocusEscapeTargets.types";
+export type ModalSize = "small" | "medium" | "large" | "full-view";
+export type ModalCloseEvent = React.MouseEvent<HTMLDivElement | HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>;
+export interface ModalProps extends VibeComponentProps {
+    /**
+     * Unique identifier for the modal.
+     */
+    id: string;
+    /**
+     * Controls the visibility of the modal.
+     */
+    show: boolean;
+    /**
+     * Determines the width and max-height of the modal.
+     */
+    size?: ModalSize;
+    /**
+     * Theme color for the close button.
+     */
+    closeButtonTheme?: ModalTopActionsProps["theme"];
+    /**
+     * Accessibility label for the close button.
+     */
+    closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"];
+    /**
+     * Callback fired when the modal should close.
+     */
+    onClose?: (event: ModalCloseEvent) => void;
+    /**
+     * This is intended for advanced use-cases.
+     * It allows you to control the default focus behavior when the modal mounts.
+     * Make sure to use this prop only when you understand the implications.
+     *
+     * Determines if focus should automatically move to the first focusable element when the component mounts.
+     * When set to `false` - disables the automatic focus behavior.
+     * - Notice this might break keyboard and general accessibility and should be used with caution.
+     */
+    autoFocus?: boolean;
+    /**
+     * Specifies elements/containers that should be allowed to receive focus outside this modal.
+     * When focus moves to these elements, the focus lock will ignore them.
+     * This allows other UI components (tooltips, dropdowns, nested modals, etc.) to receive focus.
+     *
+     * Accepts:
+     * - CSS selectors (string)
+     * - Refs to elements (React.RefObject<HTMLElement>)
+     * - Direct element references (HTMLElement)
+     */
+    allowFocusEscapeTo?: FocusEscapeTarget[];
+    /**
+     * This is intended for advanced use-cases.
+     * It allows you to control which elements the focus lock should manage.
+     * Make sure to use this prop only when you understand the implications.
+     *
+     * **Note:** If you only need to allow focus to specific selectors, use `allowFocusEscapeTo` instead.
+     *
+     * Called whenever focus is attempting to move to any element (inside or outside the modal).
+     * Return:
+     * - `true` to let focus-lock **manage** this element (keep it within the modal's focus trap).
+     * - `false` to let focus-lock **ignore** this element (allow focus to move outside the modal).
+     * - An HTMLElement to redirect focus to that element instead.
+     * - Any other value (e.g., null, undefined) would act as `false`.
+     *
+     * @example
+     * // Complex custom logic
+     * <Modal
+     *   onFocusAttempt={(el) => {
+     *     if (el?.dataset.customBehavior) return false;
+     *     return true;
+     *   }}
+     * />
+     */
+    onFocusAttempt?: (nextFocusedElement?: HTMLElement) => boolean | HTMLElement;
+    /**
+     * Additional action to render in the header area.
+     */
+    renderHeaderAction?: ModalTopActionsProps["renderAction"];
+    /**
+     * Reference to an element that triggered the modal, used for animations.
+     */
+    anchorElementRef?: React.RefObject<HTMLElement>;
+    /**
+     * When true, prevents closing the modal when clicking the overlay ("click-outside") or pressing ESC.
+     */
+    alertModal?: boolean;
+    /**
+     * The target element to render the modal into.
+     */
+    container?: PortalTarget;
+    /**
+     * Modal content.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional inline styles for the modal.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The z-index to be used for the modal and overlay.
+     */
+    zIndex?: number;
+    /**
+     * If provided, overrides the automatically generated aria-labelledby, that is assigned when used with ModalHeader.
+     */
+    "aria-labelledby"?: string;
+    /**
+     * If provided, overrides the automatically generated aria-describedby, that is assigned when used with ModalHeader.
+     */
+    "aria-describedby"?: string;
+}

package/dist/components/Modal/Modal/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Modal } from "./Modal";
-export { type ModalProps } from "./Modal.types";
+export { default as Modal } from "./Modal";
+export { type ModalProps } from "./Modal.types";

package/dist/components/Modal/ModalContent/ModalContent.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { type ModalContentProps } from "./ModalContent.types";
-declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
-export default ModalContent;
+import React from "react";
+import { type ModalContentProps } from "./ModalContent.types";
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+export default ModalContent;

package/dist/components/Modal/ModalContent/ModalContent.types.d.ts

@@ -1,8 +1,8 @@
-import type React from "react";
-import { type VibeComponentProps } from "../../../types";
-export interface ModalContentProps extends VibeComponentProps {
-    /**
-     * The main content of the modal.
-     */
-    children?: React.ReactNode;
-}
+import type React from "react";
+import { type VibeComponentProps } from "../../../types";
+export interface ModalContentProps extends VibeComponentProps {
+    /**
+     * The main content of the modal.
+     */
+    children?: React.ReactNode;
+}

package/dist/components/Modal/ModalContent/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ModalContent } from "./ModalContent";
-export { type ModalContentProps } from "./ModalContent.types";
+export { default as ModalContent } from "./ModalContent";
+export { type ModalContentProps } from "./ModalContent.types";

package/dist/components/Modal/ModalHeader/ModalHeader.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import { type ModalHeaderProps } from "./ModalHeader.types";
-declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export default ModalHeader;
+import React from "react";
+import { type ModalHeaderProps } from "./ModalHeader.types";
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default ModalHeader;