@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-5W5E.1

package/dist/types/components/tabs/MrlTabLink/MrlTabLink.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+export interface MrlTabLinkProps extends NavLinkProps {
+    /** Class to be applied to the NavLink element of the MrlTabLink */
+    className?: string;
+    /** Children to be rendered within the text component */
+    children?: React.ReactNode;
+    icon?: React.ReactElement;
+    /**
+     * The id that will be passed to the MrlTabContext to set the active state.
+     * NOTE: This must match the `tabId` set on `MrlTabContent`!
+     */
+    id: string;
+    /** An addition function to call when clicking on a tab */
+    hookClick?: () => void;
+    /**
+     * Textual content when it's a static string; if you have nested elements,
+     * use children to provide content
+     */
+    text?: string;
+}
+/**
+ * Renders a tab component
+ *
+ * @param {MrlTabLinkProps} props the props for your MrlTabLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlTabLink: ({ className, children, icon, id, hookClick, text, to, ...remainingProps }: MrlTabLinkProps) => React.ReactElement;

package/dist/types/components/tabs/MrlTabLink/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabLink';

package/dist/types/components/tabs/MrlTabs/MrlTabs.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { MrlTabContextProps } from '../../../';
+export type MrlTabSize = 'small' | 'large';
+export interface MrlTabsPropTypes {
+    /** Sets the tabs to be styled with capital case */
+    capitalizeTabTitles?: boolean;
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabs */
+    className?: string;
+    /** Sets the default active tab by id */
+    selectedTab?: string;
+    size?: MrlTabSize;
+    spaceTabsEvenly?: boolean;
+}
+export declare const MrlTabs: React.FC<MrlTabsPropTypes>;
+/**
+ * Tab context to prevent us from having to do any prop drilling.
+ *
+ * @returns {MrlTabContextProps} the context of the tabs
+ */
+export declare function useMrlTabContext(): MrlTabContextProps;

package/dist/types/components/tabs/MrlTabs/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabs';

package/dist/types/components/tabs/constants.d.ts

@@ -0,0 +1 @@
+export type TabActionType = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | null;

package/dist/types/components/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MrlTab';
+export * from './MrlTabContent';
+export * from './MrlTabGroup';
+export * from './MrlTabLink';
+export * from './MrlTabs';

package/dist/types/components/text/MrlText/MrlText.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { TextSizes } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+interface MrlTextProps extends React.ComponentPropsWithoutRef<'p'>, DataQa {
+    /**
+     * Applies additional HTML attributes to the text element
+     *
+     * @deprecated - use the regular HTML attributes instead.
+     */
+    attrs?: AttrsObject;
+    /** Children to be rendered within the text component */
+    children?: React.ReactNode;
+    /** Visual size of the text element */
+    size?: TextSizes;
+    /** Textual content when it's a static string; if you have nested elements, use children to provide content */
+    text?: string;
+}
+/**
+ * MrlText Component
+ *
+ * @param {MrlTextProps} props - MrlText component props
+ * @returns a paragraph element
+ */
+export declare function MrlText(props: MrlTextProps): JSX.Element;
+export {};

package/dist/types/components/text/MrlText/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlText';

package/dist/types/components/text/MrlTextHeading/MrlTextHeading.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { LevelType, HeadingHierarchies, HeadingSizes, TextSizes, HeadingKinds } from '../constants';
+import { DataQa } from '../../../utils/dataQa';
+interface MrlTextHeadingProps extends React.ComponentPropsWithRef<'h1'>, DataQa {
+    /**
+     * Applies additional HTML attributes to the text element
+     *
+     * @deprecated - use the regular HTML attributes instead.
+     */
+    attrs?: AttrsObject;
+    /** Children to be rendered within the text heading component */
+    children?: React.ReactNode;
+    /** Set the semantic level of the heading based on its usage in the page hierarchy */
+    level?: LevelType;
+    /** Visual styling use case for the heading */
+    kind?: HeadingKinds;
+    /**
+     * Visual size of the heading
+     * xsmall and xxsmall are only supported when kind="title"
+     */
+    size?: HeadingSizes | TextSizes;
+    /**
+     * Clear and concise description of the content that the heading describes
+     *
+     * Note: hierarchy only impacts MrlTextHeading components with `kind="title"`
+     */
+    hierarchy?: HeadingHierarchies;
+    text?: string;
+}
+/**
+ * MuralTextHeading component
+ * Used for creating semantic headings within a page
+ *
+ * @param {MrlTextHeadingProps} props - MrlTextHeading component props
+ * @returns a heading element
+ */
+export declare function MrlTextHeading(props: MrlTextHeadingProps): JSX.Element;
+export {};

package/dist/types/components/text/MrlTextHeading/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTextHeading';

package/dist/types/components/text/constants.d.ts

@@ -0,0 +1,40 @@
+import { AttrsObject } from '../../utils';
+export type TextSizes = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
+export interface TextDefaults {
+    attrs: AttrsObject;
+    size: TextSizes;
+}
+export declare const textAllowedValues: {
+    sizes: string[];
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export declare const textDefaults: TextDefaults;
+export type LevelType = '1' | '2' | '3' | '4' | '5' | '6';
+export type HeadingKinds = 'display' | 'headline' | 'title';
+export type HeadingSizes = 'small' | 'medium' | 'large';
+export type HeadingHierarchies = 'primary' | 'secondary';
+export interface HeadingDefaults {
+    attrs: AttrsObject;
+    hierarchy: HeadingHierarchies;
+    kind: HeadingKinds;
+    level: LevelType;
+    size: HeadingSizes | TextSizes;
+}
+/**
+ * Defines all of classes allowed for the type attribute;
+ * used for Storybook and testing
+ */
+export declare const headingAllowedValues: {
+    hierarchy: string[];
+    kinds: string[];
+    level: string[];
+    sizes: string[];
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export declare const headingDefaults: HeadingDefaults;

package/dist/types/components/text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlText';
+export * from './MrlTextHeading';

package/dist/types/components/toolbar/MrlToolbar/MrlToolbar.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { MrlIconButtonProps, MrlMenuProps } from '../../../';
+/**
+ * Props for the MrlToolbar component.
+ */
+export interface MrlToolbarProps extends React.ComponentPropsWithRef<'div'> {
+    children?: React.ReactNode;
+    kind?: 'default' | 'inverse' | 'skeleton';
+    /**
+     * An optional prop to apply an aria-label to the MrlToobar
+     */
+    label?: string;
+    lastToolbarInRow?: boolean;
+    /**
+     * An optional prop to set the maximum number of visible items in a toolbar.
+     * Additional items will appear in a menu.
+     */
+    maxVisibleItems?: number;
+    menuButtonProps?: MrlIconButtonProps;
+    menuProps?: MrlMenuProps;
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * A boolean prop that sets RovingTabindex in the MrlToolbar
+     */
+    shouldUseRti?: boolean;
+    /**
+     * Sets the size of the toolbar - defaults to 'small'
+     */
+    size?: 'xsmall' | 'small' | 'medium';
+    spaced?: boolean;
+}
+/**
+ * MrlToolbar component.
+ *
+ * @param props The MrlToolbar component properties.
+ * @param ref The ref to forward to the toolbar div element.
+ * @returns The MrlToolbar component.
+ */
+export declare const MrlToolbar: React.ForwardRefExoticComponent<Omit<MrlToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/toolbar/MrlToolbar/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlToolbar';

package/dist/types/components/toolbar/MrlToolbarButton/MrlToolbarButton.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { MrlIconButtonProps, MrlMenuItemProps } from '../../../';
+/**
+ * Props for the MrlToolbarButton component.
+ */
+export interface MrlToolbarButtonProps {
+    /** Additional class to add to the Toolbar button */
+    className?: string;
+    /**
+     * The icon that will be rendered.
+     */
+    icon: React.ReactElement;
+    includeInRoving?: boolean;
+    /**
+     * A prop used to set a toolbar button to never move into the menu.
+     */
+    lockedInToolbar?: boolean;
+    /**
+     * onClick event for the button.
+     */
+    onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Props used to control the display of the button in the menu.
+     */
+    menuItemProps?: Omit<MrlMenuItemProps, 'onClick'>;
+    qa?: string;
+    /**
+     * A prop used to render the item in the menu instead of the toolbar.
+     */
+    renderInMenu?: boolean;
+    text: string;
+    /**
+     * Props used to control the display of the button in the toolbar.
+     */
+    toolbarButtonProps?: {
+        badge?: MrlIconButtonProps['badge'];
+        disableEvents?: MrlIconButtonProps['disableEvents'];
+        kind?: MrlIconButtonProps['kind'];
+        loading?: MrlIconButtonProps['loading'];
+        loadingText?: MrlIconButtonProps['loadingText'];
+        onKeyUp?: MrlIconButtonProps['onKeyUp'];
+        onMouseUp?: MrlIconButtonProps['onMouseUp'];
+        position?: MrlIconButtonProps['position'];
+        size?: MrlIconButtonProps['size'];
+        state?: MrlIconButtonProps['state'];
+        tipAnchor?: MrlIconButtonProps['tipAnchor'];
+        toggleAria?: MrlIconButtonProps['toggleAria'];
+        toggleStyle?: MrlIconButtonProps['toggleStyle'];
+        tooltipKind?: MrlIconButtonProps['tooltipKind'];
+    };
+}
+/**
+ * MrlToolbarButton component.
+ * @param props The MrlToolbarButton component properties.
+ * @returns The MrlToolbarButton component.
+ */
+export declare const MrlToolbarButton: React.ForwardRefExoticComponent<MrlToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/toolbar/MrlToolbarButton/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlToolbarButton';

package/dist/types/components/toolbar/MrlToolbarItem/MrlToolbarItem.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+/**
+ * Props for the MrlToolbarItem component.
+ */
+export interface MrlToolbarItemProps {
+    /**
+     * A prop used to set a toolbar button to never move into the menu.
+     */
+    lockedInToolbar?: boolean;
+    /**
+     * The rendered component in the overflow menu.
+     * If nothing is passed, the toolbarItem will be rendered in the menu.
+     */
+    menuItem?: JSX.Element;
+    /**
+     * A prop used to render the item in the menu instead of the toolbar.
+     */
+    renderInMenu?: boolean;
+    /**
+     * The rendered markup in the toolbar.
+     */
+    toolbarItem: JSX.Element;
+}
+/**
+ * MrlToolbarItem component.
+ *
+ * @param props The MrlToolbarItem component properties.
+ * @returns The MrlToolbarItem component.
+ */
+export declare const MrlToolbarItem: (props: MrlToolbarItemProps) => JSX.Element | null;

package/dist/types/components/toolbar/MrlToolbarItem/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlToolbarItem';

package/dist/types/components/toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlToolbar';
+export * from './MrlToolbarButton';
+export * from './MrlToolbarItem';

package/dist/types/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipState, MrlTooltipVariant } from '../constants';
+import '../../../styles/shared/a11y-helpers/a11y.global.scss';
+interface MrlTooltipProps {
+    /** The arrow position of the tooltip in relation to its trigger's content */
+    anchor?: MrlTooltipAnchor;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     * @deprecated please use props for component instead
+     */
+    attrs?: AttrsObject;
+    /**
+     * Children to be rendered within the tooltip. The first child is used as the trigger.
+     *
+     * Warning: The tooltip is only setup to work with a single trigger. If multiple children
+     * are passed in the component will not have event handling for the additional child elements.
+     */
+    children: React.ReactElement;
+    /** Whether the tooltip should close when clicked */
+    clickToClose?: boolean;
+    /** The data-qa attribute for the tooltip */
+    dataQa?: string;
+    /** The state value to determine if the tooltip should be displayed */
+    display?: MrlTooltipState;
+    /** Whether to disable the tooltip hover action that keeps it open */
+    disableTooltipHover?: boolean;
+    /** The kind of tooltip to be rendered */
+    kind?: MrlTooltipVariant;
+    /** The placement of the tooltip in relation to its trigger */
+    position?: MrlTooltipPosition;
+    /** Whether to announce the tooltip content to screen readers */
+    srAnnouncement?: boolean;
+    /** The textual label of tooltip */
+    text: string;
+    /** A custom class selector to be applied to the tooltip wrapper */
+    tooltipClass?: string;
+    /** A class to be applied ot the tooltip content */
+    tooltipContentClass?: string;
+    /** A custom render function to render the tooltip content */
+    customRender?: (text?: string) => React.ReactNode;
+}
+/**
+ * MrlTooltip Component
+ *
+ * This component is not displayed when rendering this component if the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.
+ * Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this criteria. For example, a touchscreen where a long press is treated as hovering.
+ * @param {MrlTooltipProps} props - The props of the component
+ * @returns {HTMLElement} a configured Tooltip component
+ */
+export declare const MrlTooltip: React.MemoExoticComponent<(props: MrlTooltipProps) => React.ReactElement>;
+export {};

package/dist/types/components/tooltip/MrlTooltip/index.d.ts

@@ -0,0 +1 @@
+export { MrlTooltip } from './MrlTooltip';

package/dist/types/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { AttrsObject } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipVariant } from '../constants';
+import './MrlTooltipContent.global.scss';
+interface MrlTooltipContentProps {
+    /**
+     * The arrow position of the tooltip in relation to its trigger's content.
+     * Note, if the content is shorter than the width of the trigger, always use
+     * "center" to ensure the arrow does not become misaligned.
+     */
+    anchor: MrlTooltipAnchor;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     * @deprecated please use props for component instead
+     */
+    attrs: AttrsObject;
+    /** dataQa attribute for tooltip */
+    dataQa?: string;
+    /** The kind of tooltip to be rendered */
+    kind: MrlTooltipVariant;
+    /** The id of the tooltip used for aria-describedby in the parent component */
+    id?: string;
+    /** The placement of the tooltip in relation to its trigger */
+    position: MrlTooltipPosition;
+    /** The tooltip content to display */
+    text: string;
+    /** A class to be applied ot the tooltip content */
+    tooltipContentClass?: string;
+    /** A custom render function to render the tooltip content */
+    customRender?: (text?: string) => React.ReactNode;
+}
+/**
+ * MrlTooltipContent Component
+ *
+ * The tooltip content is the text that is displayed when the user hovers over the trigger.
+ * IMPORTANT: This component is not intended to be used directly, it should always be a child of MrlTooltip.
+ * @param {MrlTooltipContentProps} props - the props of the tooltip content
+ * @returns {HTMLElement} a configured Tooltip Content component
+ */
+export declare const MrlTooltipContent: (props: MrlTooltipContentProps) => React.ReactElement;
+export {};

package/dist/types/components/tooltip/MrlTooltipContent/index.d.ts

@@ -0,0 +1 @@
+export { MrlTooltipContent } from './MrlTooltipContent';

package/dist/types/components/tooltip/constants.d.ts

@@ -0,0 +1,27 @@
+import { AttrsObject } from '../../utils';
+/**
+ * Defines all the values allowed for tooltip props.
+ * Used for Storybook and testing
+ */
+export declare const allowedMrlTooltipValues: {
+    anchors: readonly ["start", "center", "end"];
+    positions: readonly ["top", "bottom", "left", "right"];
+    state: readonly ["show", "hide"];
+};
+export type MrlTooltipPosition = (typeof allowedMrlTooltipValues.positions)[number];
+export type MrlTooltipAnchor = (typeof allowedMrlTooltipValues.anchors)[number];
+export type MrlTooltipState = (typeof allowedMrlTooltipValues.state)[number];
+export interface MrlTooltipDefaults {
+    anchor: MrlTooltipAnchor;
+    attrs: AttrsObject;
+    position: MrlTooltipPosition;
+    state: MrlTooltipState;
+}
+/**
+ * Default values for props on the Tooltip component;
+ * Shared between the component and Storybook
+ */
+export declare const MrlTooltipDefaults: MrlTooltipDefaults;
+export type MrlTooltipVariant = 'default' | 'inverse';
+export type TooltipAlignment = 'start' | 'end' | 'center';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

package/dist/types/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MrlTooltip';
+export * from './constants';

package/dist/types/components/tooltip/useTooltipPosition/constants.d.ts

@@ -0,0 +1,9 @@
+import { TooltipAlignment, TooltipPosition } from '../constants';
+export interface TooltipPlacement {
+    align: TooltipAlignment;
+    position: TooltipPosition;
+}
+export interface Position {
+    top: number;
+    left: number;
+}

package/dist/types/components/tooltip/useTooltipPosition/index.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { TooltipPlacement, Position } from './constants';
+/**
+ * A custom hook to calculate and manage the position of a tooltip element relative to its trigger element.
+ *
+ * @param {RefObject<HTMLElement>} triggerRef - Reference to the DOM element that triggers the menu.
+ * @param {RefObject<HTMLElement>} elementRef - Reference to the DOM element that is the menu.
+ * @param {TooltipPlacement} placement - The alignment configuration of the menu.
+ * @param {boolean} isElementVisible - Tells the hook if the element is visible. If false, the hook will not calculate the position.
+ * @param {number} tooltipOffset - The offset of the menu from the trigger element.
+ * @param {boolean} disable - Whether to disable the hook.
+ * @returns {Position} The calculated position of the menu element.
+ */
+export declare const useTooltipPosition: (triggerRef: RefObject<HTMLElement> | undefined, elementRef: RefObject<HTMLElement>, placement: TooltipPlacement, isElementVisible?: boolean, tooltipOffset?: number, disable?: boolean) => Position;

package/dist/types/components/tooltip/useTooltipPosition/utilities.d.ts

@@ -0,0 +1,19 @@
+import { TooltipPlacement, Position } from './constants';
+/**
+ * Calculates the position of an element (e.g., a tooltip or menu) based on alignment and offset.
+ *
+ * @param alignment - Object containing position ('top', 'bottom', 'left', 'right') and anchor ('start', 'center', 'end').
+ * @param offset - Number of pixels to offset the positioned element.
+ * @param elementRect - Bounding rect of the element being positioned.
+ * @param triggerRect - Bounding rect of the trigger element.
+ * @returns {Position} An object with `left` and `top` coordinates for the element (keys sorted alphabetically).
+ */
+export declare const calculatePosition: (alignment: TooltipPlacement, offset: number, elementRect: DOMRect, triggerRect?: DOMRect) => Position;
+/**
+ * Determines if the position of an element has changed significantly.
+ *
+ * @param prev - The previous bounding rectangle of the element.
+ * @param next - The current bounding rectangle of the element.
+ * @returns {boolean} True if the position has changed by more than 0.5 pixels, false otherwise.
+ */
+export declare const positionChanged: (prev: DOMRect, next: DOMRect) => boolean;

package/dist/types/components/tooltip/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Currying function to combine handlers from the parent and child components
+ *
+ * @template T - The type of the event handlers.
+ * @param {T | undefined} ogFunc - The original event handler. This parameter can be undefined.
+ * @param {T} newFunc - The new event handler.
+ * @returns {T} A function that, when invoked, calls both the original event handler (if it exists) and the new event handler.
+ */
+export declare const curryHandlers: <T extends (...args: any[]) => void>(ogFunc: T | undefined, newFunc: T) => T;

package/dist/types/contexts/MrlTabContext/MrlTabContext.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+export type MrlTabContextProps = {
+    activeTab: string;
+    setActiveTab: Dispatch<SetStateAction<string>>;
+};
+export declare const MrlTabContext: import("react").Context<MrlTabContextProps>;

package/dist/types/contexts/MrlTabContext/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabContext';

package/dist/types/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './MrlTabContext';

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './useCoordinate';
+export * from './useBreakpoint';
+export * from './useElementDimensions';
+export * from './useHasFocusableDescendant';
+export * from './useScrollbarInfo';

package/dist/types/hooks/useAutoClose/index.d.ts

@@ -0,0 +1 @@
+export * from './useAutoClose';

package/dist/types/hooks/useAutoClose/useAutoClose.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type useAutoClose = (shouldAutoClose?: boolean, closeAfterMs?: number, onClose?: () => unknown) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+/**
+ * Hook that exposes a piece of state that allows components to close themselves after a delay
+ *
+ * @param shouldAutoClose - When false prevents automated close (e.g. can be used to prevent auto-dismissal of interactive elements, an accessibility anti-pattern)
+ * @param closeAfterMs - Delay in milliseconds before the component closes
+ * @param onClose - Callback to be called when component closes
+ * @returns [closed, setClosed] - a boolean tracking closed state, and a setter for that same state
+ */
+export declare const useAutoClose: useAutoClose;

package/dist/types/hooks/useBreakpoint/index.d.ts

@@ -0,0 +1,15 @@
+type Breakpoints = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+/**
+ * React Hook to return the current breakpoint
+ *
+ * @returns {keyof Breakpoints} - the current breakpoint
+ */
+export declare const useBreakpoint: () => keyof Breakpoints;
+export default useBreakpoint;

package/dist/types/hooks/useBreakpoint/useBreakpointDemo.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * Demo for useBreakpoint hook
+ *
+ * @returns JSX.Element
+ */
+export declare const UseBreakpointDemo: () => JSX.Element;

package/dist/types/hooks/useClickOutside/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook to detect clicks outside of a given DOM element, with an optional exclusion for selectors.
+ *
+ * @param menuRef - Reference to the DOM element to detect outside clicks for.
+ * @param triggerRef - Reference to the DOM element that caused this menu to be shown.
+ * @param eventType - Event type to listen for.
+ * @param onOutsideClick - Function to call when a click is detected outside the menuRef element.
+ * @param disabled - If the hook should be disabled.
+ * @param excludeSelectors - Optional array of CSS selectors to exclude from the outside click detection.
+ */
+export declare const useClickOutside: (menuRef: React.RefObject<HTMLElement>, triggerRef: React.RefObject<HTMLElement> | undefined, eventType: "click" | "mousedown" | "mouseup" | undefined, onOutsideClick: () => void, disabled?: boolean, excludeSelectors?: string[]) => void;

package/dist/types/hooks/useCoordinate/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * get coordinates of an element relative to window and listen for changes.
+ *
+ * @param element element of type T
+ * @param disabledScrollTracking boolean to disable scroll tracking.
+ * @param openState boolean to track if the element's open state changed.
+ * @returns coordinate object of element.
+ */
+export declare const useCoordinate: <T extends HTMLElement | null>(element: T, disabledScrollTracking: boolean | undefined, openState: boolean) => {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+    x: number;
+    y: number;
+};

package/dist/types/hooks/useElementDimensions/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+/**
+ * Represents the dimensions of an element's border box.
+ */
+export type ElementDimensions = {
+    height: number | null;
+    width: number | null;
+};
+/**
+ * Calculates the dimensions of an element using the ResizeObserver API.
+ *
+ * @template T - The type of the element or HTMLElement.
+ * @param ref - The ref object that references the element.
+ * @returns {ElementDimensions} - The dimensions of the element.
+ */
+export declare function useElementDimensions<T>(ref: React.RefObject<T extends HTMLElement ? T : HTMLElement>): ElementDimensions;