@vibe/core 3.87.0 → 4.0.0-alpha.1

package/dist/components/next/Dialog/Dialog.types.d.ts

@@ -1,218 +0,0 @@
-import type React from "react";
-import type { ReactElement } from "react";
-import type { VibeComponentProps } from "@vibe/shared";
-import type { Middleware, Placement } from "@floating-ui/react-dom";
-export type DialogType = "modal" | "popover";
-export type DialogSize = "none" | "small" | "medium" | "large";
-export type DialogPosition = "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
-export type DialogTriggerEvent = "click" | "clickoutside" | "esckey" | "tab" | "mouseenter" | "mouseleave" | "enter" | "mousedown" | "focus" | "blur" | "onContentClick" | "contextmenu";
-export type DialogAnimationType = "opacity-and-slide" | "expand";
-export type DialogStartingEdge = "top" | "bottom";
-export type DialogOffset = {
-    main?: number;
-    secondary?: number;
-};
-export type DialogEvent = React.MouseEvent | React.KeyboardEvent | KeyboardEvent | React.FocusEvent | CustomEvent;
-export type DialogMiddleware = Middleware;
-export type DialogPlacement = Placement;
-export interface DialogProps extends VibeComponentProps {
-    /**
-     * Event handler for blur events on the reference element.
-     */
-    onBlur?: (e: React.FocusEvent) => void;
-    /**
-     * Event handler for keydown events on the reference element.
-     */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /**
-     * Event handler for click events on the reference element.
-     */
-    onClick?: (e: React.MouseEvent) => void;
-    /**
-     * Event handler for focus events on the reference element.
-     */
-    onFocus?: (e: React.FocusEvent) => void;
-    /**
-     * Event handler for mousedown events on the reference element.
-     */
-    onMouseDown?: (e: React.MouseEvent) => void;
-    /**
-     * Event handler for mouseenter events on the reference element.
-     */
-    onMouseEnter?: (e: React.MouseEvent) => void;
-    /**
-     * Event handler for mouseleave events on the reference element.
-     */
-    onMouseLeave?: (e: React.MouseEvent) => void;
-    /**
-     * Event handler for contextmenu events on the reference element.
-     */
-    onContextMenu?: (e: React.MouseEvent) => void;
-    /**
-     * Class name applied to the reference wrapper element.
-     */
-    referenceWrapperClassName?: string;
-    /**
-     * The wrapper element type to use for React components. Defaults to "span".
-     */
-    referenceWrapperElement?: "span" | "div";
-    /**
-     * The placement of the dialog relative to the reference element.
-     */
-    position?: DialogPosition;
-    /**
-     * Custom Floating UI middleware for positioning logic.
-     * If you provide `offset`, `flip`, or `shift` middleware, the defaults will be skipped.
-     * Other middleware (like `size`, `inline`, `autoPlacement`) are added to the chain.
-     * @see https://floating-ui.com/docs/middleware
-     */
-    middleware?: DialogMiddleware[];
-    /**
-     * The starting edge of the dialog animation.
-     */
-    startingEdge?: DialogStartingEdge;
-    /**
-     * Offset values for positioning adjustments.
-     * `main` - distance from reference element
-     * `secondary` - cross-axis offset (skidding)
-     */
-    moveBy?: {
-        main?: number;
-        secondary?: number;
-    };
-    /**
-     * Delay in milliseconds before showing the dialog.
-     */
-    showDelay?: number;
-    /**
-     * Delay in milliseconds before hiding the dialog.
-     */
-    hideDelay?: number;
-    /**
-     * Events that trigger showing the dialog.
-     */
-    showTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-    /**
-     * Events that trigger hiding the dialog.
-     */
-    hideTrigger?: DialogTriggerEvent | DialogTriggerEvent[];
-    /**
-     * If true, keeps the dialog open when mouse enters it.
-     */
-    showOnDialogEnter?: boolean;
-    /**
-     * If true, shows the dialog when the component mounts.
-     */
-    shouldShowOnMount?: boolean;
-    /**
-     * If true, disables opening the dialog.
-     */
-    disable?: boolean;
-    /**
-     * Controls the open state of the dialog (controlled mode).
-     */
-    open?: boolean;
-    /**
-     * Controlled open state for derived state pattern.
-     */
-    isOpen?: boolean;
-    /**
-     * CSS class names that, when present on target, prevent showing the dialog.
-     */
-    showTriggerIgnoreClass?: string | string[];
-    /**
-     * CSS class names that, when present on target, prevent hiding the dialog.
-     */
-    hideTriggerIgnoreClass?: string | string[];
-    /**
-     * The animation type used for the dialog.
-     */
-    animationType?: DialogAnimationType;
-    /**
-     * Class name applied to the dialog content wrapper.
-     */
-    wrapperClassName?: string;
-    /**
-     * If true, prevents animation when mounting.
-     */
-    preventAnimationOnMount?: boolean;
-    /**
-     * CSS selector of the container where the dialog is portaled.
-     */
-    containerSelector?: string;
-    /**
-     * If true, renders with tooltip arrow styling.
-     */
-    tooltip?: boolean;
-    /**
-     * Class name applied to the tooltip arrow element.
-     */
-    tooltipClassName?: string;
-    /**
-     * Callback fired when the dialog is shown.
-     */
-    onDialogDidShow?: (event?: DialogEvent, eventName?: DialogTriggerEvent | string) => void;
-    /**
-     * Callback fired when the dialog is hidden.
-     */
-    onDialogDidHide?: (event: DialogEvent, eventName: DialogTriggerEvent | string) => void;
-    /**
-     * Callback fired when clicking outside the dialog.
-     */
-    onClickOutside?: (event: React.MouseEvent) => void;
-    /**
-     * Callback fired when clicking inside the dialog content.
-     */
-    onContentClick?: (event: React.MouseEvent) => void;
-    /**
-     * The z-index applied to the dialog.
-     */
-    zIndex?: number;
-    /**
-     * If true, uses derived state from props pattern.
-     */
-    useDerivedStateFromProps?: boolean;
-    /**
-     * If true, hides the dialog when the reference element scrolls out of view.
-     */
-    hideWhenReferenceHidden?: boolean;
-    /**
-     * If true, fires onDialogDidShow callback on mount.
-     */
-    shouldCallbackOnMount?: boolean;
-    /**
-     * If true, shows and hides the dialog without delay.
-     */
-    instantShowAndHide?: boolean;
-    /**
-     * Callback to dynamically adjust show delay and animation behavior.
-     */
-    getDynamicShowDelay?: () => {
-        showDelay: number;
-        preventAnimation: boolean;
-    };
-    /**
-     * The content displayed inside the dialog. Can be a render function.
-     */
-    content?: (() => JSX.Element) | JSX.Element;
-    /**
-     * The reference element(s) that the dialog is positioned relative to.
-     */
-    children?: ReactElement | ReactElement[] | string;
-    /**
-     * If true, keyboard focus/blur events behave like mouse enter/leave.
-     */
-    addKeyboardHideShowTriggersByDefault?: boolean;
-    /**
-     * If true or a selector string, disables scrolling in the container when open.
-     */
-    disableContainerScroll?: boolean | string;
-    /**
-     * If true, automatically updates position when content resizes.
-     */
-    observeContentResize?: boolean;
-    /**
-     * If true, provides LayerProvider context for nested dialogs.
-     */
-    enableNestedDialogLayer?: boolean;
-}

package/dist/components/next/Dialog/components/DialogContent/DialogContent.d.ts

@@ -1,79 +0,0 @@
-import React, { type CSSProperties, type ReactElement } from "react";
-import { type VibeComponentProps } from "@vibe/shared";
-import { type DialogAnimationType, type DialogTriggerEvent, type DialogStartingEdge, type DialogPlacement } from "../../Dialog.types";
-export interface DialogContentProps extends VibeComponentProps {
-    /**
-     * The content inside the dialog.
-     */
-    children?: ReactElement | ReactElement[];
-    /**
-     * The placement of the dialog relative to the reference element.
-     */
-    position?: DialogPlacement;
-    /**
-     * Class name applied to the dialog wrapper.
-     */
-    wrapperClassName?: string;
-    /**
-     * If true, the dialog is open.
-     */
-    isOpen?: boolean;
-    /**
-     * The starting edge for animation direction.
-     */
-    startingEdge?: DialogStartingEdge;
-    /**
-     * The animation type used for showing/hiding the dialog.
-     */
-    animationType?: DialogAnimationType;
-    /**
-     * Callback fired when the Escape key is pressed.
-     */
-    onEsc?: (event: React.KeyboardEvent) => void;
-    /**
-     * Callback fired when the mouse enters the dialog.
-     */
-    onMouseEnter?: (event: React.MouseEvent) => void;
-    /**
-     * Callback fired when the mouse leaves the dialog.
-     */
-    onMouseLeave?: (event: React.MouseEvent) => void;
-    /**
-     * Callback fired when clicking outside the dialog.
-     */
-    onClickOutside?: (event: React.MouseEvent, hideShowEvent: DialogTriggerEvent) => void;
-    /**
-     * Callback fired when clicking inside the dialog.
-     */
-    onClick?: (event: React.MouseEvent) => void;
-    /**
-     * Delay before showing the dialog (used for animation timing).
-     */
-    showDelay?: number;
-    /**
-     * Inline styles applied to the dialog wrapper.
-     */
-    styleObject?: CSSProperties;
-    /**
-     * If true, indicates the reference element is hidden.
-     */
-    isReferenceHidden?: boolean;
-    /**
-     * If true, applies tooltip arrow styling.
-     */
-    hasTooltip?: boolean;
-    /**
-     * CSS selector of the container for scroll disabling.
-     */
-    containerSelector?: string;
-    /**
-     * If true or a selector string, disables scrolling when open.
-     */
-    disableContainerScroll?: boolean | string;
-    /**
-     * Callback fired on context menu (right-click) events.
-     */
-    onContextMenu?: (e: React.MouseEvent) => void;
-}
-declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLElement>>;
-export default DialogContent;

package/dist/components/next/Dialog/components/Refable/Refable.d.ts

@@ -1,18 +0,0 @@
-import React, { type HTMLProps, type ReactElement } from "react";
-import { type VibeComponentProps } from "@vibe/shared";
-export interface RefableProps extends React.PropsWithChildren<HTMLProps<HTMLElement> & VibeComponentProps> {
-    children: ReactElement | ReactElement[] | string;
-    /**
-     * The wrapper element type to use for React components. Defaults to "span".
-     */
-    wrapperElement?: "span" | "div";
-}
-/**
- * Refable is a utility component that enables ref forwarding to children elements.
- *
- * For native HTML elements: Clones the child and merges refs and event handlers.
- * For React components: Wraps in a span/div and attaches the ref to the wrapper.
- *
- * This allows Dialog to get a reference to the trigger element for positioning.
- */
-export declare const Refable: React.ForwardRefExoticComponent<Omit<RefableProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/next/Dialog/hooks/useDisableScroll.d.ts

@@ -1,5 +0,0 @@
-declare const useDisableScroll: (scrollableQuerySelector: string | undefined) => {
-    disableScroll: () => void;
-    enableScroll: () => void;
-};
-export default useDisableScroll;

package/dist/components/next/Dialog/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Dialog } from "./Dialog";
-export * from "./Dialog.types";

package/dist/components/next/Dropdown/Dropdown.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { type BaseDropdownProps } from "./Dropdown.types";
-import { type BaseItemData } from "../../BaseItem";
-declare const _default: <Item extends BaseItemData<Record<string, unknown>>>(props: BaseDropdownProps<Item> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => React.ReactElement;
-export default _default;

package/dist/components/next/Dropdown/Dropdown.types.d.ts

@@ -1,268 +0,0 @@
-import type React from "react";
-import { type DropdownListGroup } from "./components/DropdownBaseList/DropdownBaseList.types";
-import { type VibeComponentProps } from "../../../types";
-import { type BaseItemData } from "../../BaseItem";
-import { type TooltipProps } from "@vibe/tooltip";
-export type DropdownOption<Item = Record<string, unknown>> = BaseItemData<Item>;
-export type DropdownGroupOption<Item = Record<string, unknown>> = DropdownListGroup<Item>[] | BaseItemData<Item>[];
-interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
-    /**
-     * If true, the dropdown allows multiple selections.
-     */
-    multi: true;
-    multiline?: boolean;
-    /**
-     * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
-     */
-    onOptionRemove?: (option: Item) => void;
-    /**
-     * The function to call to render the selected value on single select mode.
-     */
-    valueRenderer?: never;
-    /**
-     * The default selected values for multi-select.
-     */
-    defaultValue?: Item[];
-    /**
-     * The controlled selected values for multi-select.
-     */
-    value?: Item[];
-    /**
-     * Callback fired when the selected values change in multi-select mode.
-     */
-    onChange?: (options: Item[]) => void;
-    /**
-     * Minimum number of selected chips to always show before overflowing to the counter.
-     */
-    minVisibleCount?: number;
-}
-interface SingleSelectSpecifics<Item extends BaseItemData<Record<string, unknown>>> {
-    /**
-     * If true, the dropdown allows multiple selections. Defaults to false.
-     */
-    multi?: false;
-    /**
-     * If true, the dropdown allows multiple lines of selected items. (Not available for single select)
-     */
-    multiline?: never;
-    /**
-     * Callback fired when an option is removed in multi-select mode. (Not available for single select)
-     */
-    onOptionRemove?: never;
-    /**
-     * The function to call to render the selected value on single select mode.
-     */
-    valueRenderer?: (option: Item) => React.ReactNode;
-    /**
-     * The default selected value for single-select.
-     */
-    defaultValue?: Item;
-    /**
-     * The controlled selected value for single-select.
-     */
-    value?: Item;
-    /**
-     * Callback fired when the selected value changes in single-select mode.
-     */
-    onChange?: (option: Item) => void;
-    /**
-     * Minimum number of selected chips to always show before overflowing to the counter. (Not available for single select)
-     */
-    minVisibleCount?: never;
-}
-type BoxModeConstraint = {
-    /**
-     * If true, the dropdown is searchable.
-     */
-    searchable?: false;
-    /**
-     * If true, the dropdown menu is displayed inline without a popup/dialog.
-     */
-    boxMode?: false;
-} | {
-    /**
-     * If true, the dropdown is searchable.
-     */
-    searchable: true;
-    /**
-     * If true, the dropdown menu is displayed inline without a popup/dialog.
-     */
-    boxMode?: boolean;
-};
-export type BaseDropdownProps<Item extends BaseItemData<Record<string, unknown>>> = VibeComponentProps & BoxModeConstraint & {
-    /**
-     * The list of options available in the list.
-     */
-    options: DropdownGroupOption<Item>;
-    /**
-     * Props to be passed to the Tooltip component that wraps the dropdown.
-     */
-    tooltipProps?: Partial<TooltipProps>;
-    /**
-     * If true, displays dividers between grouped options.
-     */
-    withGroupDivider?: boolean;
-    /**
-     * If true, makes the group title sticky.
-     */
-    stickyGroupTitle?: boolean;
-    /**
-     * The size of the dropdown.
-     */
-    size?: DropdownSizes;
-    /**
-     * The direction of the dropdown.
-     */
-    dir?: DropdownDirection;
-    /**
-     * If true, the dropdown has no visible border by default, but shows border on hover, focus, and active states.
-     */
-    borderless?: boolean;
-    /**
-     * The function to call to render an option.
-     */
-    optionRenderer?: (option: Item) => React.ReactNode;
-    /**
-     * The function to call to render the menu.
-     */
-    menuRenderer?: (props: {
-        children: React.ReactNode;
-        filteredOptions: DropdownListGroup<Item>[];
-        selectedItems: Item[];
-        getItemProps: (options: any) => Record<string, unknown>;
-    }) => React.ReactNode;
-    /**
-     * The message to display when there are no options.
-     */
-    noOptionsMessage?: string | React.ReactNode;
-    /**
-     * The placeholder to display when the dropdown is empty.
-     */
-    placeholder?: string;
-    /**
-     * If true, the dropdown is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the dropdown is read only.
-     */
-    readOnly?: boolean;
-    /**
-     * If true, the dropdown is in an error state.
-     */
-    error?: boolean;
-    /**
-     * The helper text to display below the dropdown.
-     */
-    helperText?: string;
-    /**
-     * If true, the dropdown is required.
-     */
-    required?: boolean;
-    /**
-     * The label to display above the dropdown.
-     */
-    label?: string;
-    /**
-     * The ARIA label for the dropdown.
-     */
-    ariaLabel?: string;
-    /**
-     * The ARIA label for the dropdown input.
-     */
-    inputAriaLabel?: string;
-    /**
-     * The ARIA label for the menu container.
-     */
-    menuAriaLabel?: string;
-    /**
-     * The ARIA label for the clear button.
-     */
-    clearAriaLabel?: string;
-    /**
-     * The current value of the input field.
-     */
-    inputValue?: string;
-    /**
-     * The maximum height of the dropdown menu.
-     */
-    maxMenuHeight?: number;
-    /**
-     * If true, controls the menu open state.
-     */
-    isMenuOpen?: boolean;
-    /**
-     * If true, closes the menu when an option is selected.
-     */
-    closeMenuOnSelect?: boolean;
-    /**
-     * If true, the dropdown menu will be auto focused.
-     */
-    autoFocus?: boolean;
-    /**
-     * If true, the dropdown will have a clear button.
-     */
-    clearable?: boolean;
-    /**
-     * Callback fired when the dropdown loses focus.
-     */
-    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the clear button is clicked.
-     */
-    onClear?: () => void;
-    /**
-     * Callback fired when the dropdown gains focus.
-     */
-    onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the dropdown input value changes.
-     */
-    onInputChange?: (input: string | null) => void;
-    /**
-     * Callback fired when a key is pressed inside the dropdown.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    /**
-     * Callback fired when the dropdown menu opens.
-     */
-    onMenuOpen?: () => void;
-    /**
-     * Callback fired when the dropdown menu closes.
-     */
-    onMenuClose?: () => void;
-    /**
-     * Callback fired when an option is selected.
-     */
-    onOptionSelect?: (option: Item) => void;
-    /**
-     * Callback fired when scrolling inside the dropdown.
-     */
-    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
-    /**
-     * A function to customize the filtering of options.
-     * It receives an option and the current input value, and should return true if the option should be included, false otherwise.
-     */
-    filterOption?: (option: Item, inputValue: string) => boolean;
-    /**
-     * If false, selected options will be hidden from the list. Defaults to true.
-     */
-    showSelectedOptions?: boolean;
-    /**
-     * The class name to be applied to the menu wrapper.
-     */
-    menuWrapperClassName?: string;
-    /**
-     * If true, displays a loading indicator in the dropdown controls.
-     */
-    loading?: boolean;
-} & (MultiSelectSpecifics<Item> | SingleSelectSpecifics<Item>);
-export type DropdownSizes = "small" | "medium" | "large";
-export type DropdownDirection = "ltr" | "rtl" | "auto";
-export type DropdownMultiControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof MultiSelectSpecifics<Item> | keyof BoxModeConstraint> & BoxModeConstraint & MultiSelectSpecifics<Item> & {
-    dropdownRef: React.Ref<HTMLDivElement>;
-};
-export type DropdownSingleControllerProps<Item extends BaseItemData<Record<string, unknown>>> = Omit<BaseDropdownProps<Item>, keyof SingleSelectSpecifics<Item> | keyof BoxModeConstraint> & BoxModeConstraint & SingleSelectSpecifics<Item> & {
-    dropdownRef: React.Ref<HTMLDivElement>;
-};
-export {};

package/dist/components/next/Dropdown/components/DropdownBaseList/DropdownBaseList.types.d.ts

@@ -1,86 +0,0 @@
-import { type ReactNode } from "react";
-import type React from "react";
-import { type VibeComponentProps } from "../../../../../types";
-import { type BaseItemData, type BaseItemSizes, type BaseItemDirection } from "../../../../BaseItem";
-export interface DropdownBaseListProps<Item = Record<string, unknown>> extends React.HTMLAttributes<HTMLUListElement>, VibeComponentProps {
-    /**
-     * The list of options available in the list.
-     */
-    options: DropdownListGroup<Item>[];
-    /**
-     * The selected item in the list.
-     */
-    selectedItems?: BaseItemData<Item>[] | null;
-    /**
-     * The index of the highlighted item in the list.
-     */
-    highlightedIndex?: number;
-    /**
-     * The ARIA label for the menu.
-     */
-    menuAriaLabel?: string;
-    /**
-     * Function to get props for the menu container.
-     */
-    getMenuProps?: ((options?: any, otherOptions?: any) => Record<string, unknown>) | null;
-    /**
-     * Function to get props for each item in the list.
-     */
-    getItemProps?: ((options: any) => Record<string, unknown>) | null;
-    /**
-     * The size of the list item.
-     */
-    size?: BaseItemSizes;
-    /**
-     * If true, displays dividers between grouped options.
-     */
-    withGroupDivider?: boolean;
-    /**
-     * If true, makes the group title sticky.
-     */
-    stickyGroupTitle?: boolean;
-    /**
-     * The text direction of the list.
-     */
-    dir?: BaseItemDirection;
-    /**
-     * Custom renderer for options.
-     */
-    itemRenderer?: (item: BaseItemData<Item>) => React.ReactNode;
-    /**
-     * Custom renderer for the entire menu content inside the ul element.
-     */
-    menuRenderer?: (props: {
-        children: React.ReactNode;
-        filteredOptions: DropdownListGroup<Item>[];
-        selectedItem?: Item | null;
-        selectedItems?: Item[];
-    }) => React.ReactNode;
-    /**
-     * Text or function to customize the "No results" message.
-     */
-    noOptionsMessage?: string | ReactNode;
-    /**
-     * If true, the options are rendered.
-     */
-    renderOptions?: boolean;
-    /**
-     * Function to handle scroll events.
-     */
-    onScroll?: (event: React.UIEvent<HTMLUListElement>) => void;
-    /**
-     * The maximum height of the list.
-     */
-    maxMenuHeight?: number;
-}
-export interface DropdownListGroup<Item = Record<string, unknown>> {
-    /**
-     * The label for the group of options.
-     */
-    label?: string;
-    /**
-     * The list of options within this group.
-     */
-    options: BaseItemData<Item>[];
-}
-export type { BaseItemSizes, BaseItemDirection };