@muraldevkit/ui-toolkit 2.32.0 → 2.33.0

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './pagination';
 export * from './popover';
 export * from './svg';
 export * from './table';
+export * from './tabs';
 export * from './text';
 export * from './tooltip';
 export * from './portal';

package/dist/components/menu/MrlMenu/utilities.d.ts

@@ -5,14 +5,6 @@
  * @returns The closest menu parent or null if none is found
  */
 export declare const findClosestMenuParent: (el: HTMLElement | null) => HTMLElement | null | undefined;
-/**
- * Find the interactive element immediately before or after a reference element
- *
- * @param ref - The reference element
- * @param direction - The direction to search in
- * @returns The interactive element or null if none is found
- */
-export declare const findInteractiveElement: (ref: React.RefObject<HTMLElement> | undefined, direction?: 'next' | 'previous') => HTMLElement | null;
 /**
  * Calculate the horizontal positioning of the submenu
  *
@@ -35,9 +27,3 @@ export declare const calculateLeftPosition: (overlapsRight: boolean, overlapsLef
  * @returns The top position of the menu
  */
 export declare const calculateTopPosition: (overlapsRight: boolean, overlapsLeft: boolean, triggerRef: React.RefObject<HTMLElement>, menuRect: DOMRect, parentMenu: HTMLElement, triggerRect: DOMRect) => string;
-/**
- * Prevent default on event
- *
- * @param e - The event
- */
-export declare const preventDefault: (e: React.MouseEvent | React.KeyboardEvent | MouseEvent | KeyboardEvent) => void;

package/dist/components/svg/config.d.ts

@@ -115,7 +115,7 @@ export declare const colorPictoStoryData: {
 export declare const animateStoryData: {
     args: {
         delay: number;
-        state: "stop" | "play";
+        state: "play" | "stop";
     };
     argTypes: {
         delay: {

package/dist/components/tabs/MrlTab/MrlTab.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface MrlTabProps extends React.ComponentProps<'button'> {
+    /** Class to be applied to the button element of the MrlTab */
+    className?: string;
+    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;
+    text: string;
+}
+/**
+ * Renders a tab component
+ *
+ * @param {MrlTabProps} props the props for your MrlTab
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export declare const MrlTab: ({ className, icon, id, hookClick, text }: MrlTabProps) => React.ReactElement;

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

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

package/dist/components/tabs/MrlTabContent/MrlTabContent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MrlTabContentPropTypes {
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabContent */
+    className?: string;
+    /** The id of the tab button associated to this content */
+    tabId: string;
+}
+export declare const MrlTabContent: React.FC<MrlTabContentPropTypes>;

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

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

package/dist/components/tabs/MrlTabGroup/MrlTabGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MrlTabGroupPropTypes {
+    children: React.ReactNode;
+    /** Class to be applied to the container element of the MrlTabGroup */
+    className?: string;
+    disablePageControls?: boolean;
+    /** A hidden label for the tab group for accessiblity purposes */
+    label?: string;
+}
+export declare const MrlTabGroup: React.FC<MrlTabGroupPropTypes>;

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

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

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

@@ -0,0 +1,19 @@
+import 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;
+    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/components/tabs/MrlTabs/index.d.ts

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

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

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

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

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

package/dist/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/contexts/MrlTabContext/index.d.ts

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

package/dist/contexts/index.d.ts

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