@lax-wp/design-system 0.2.10 → 0.3.0

package/dist/components/button/Button.d.ts

@@ -0,0 +1,25 @@
+import { type ItemType } from 'antd/es/menu/interface';
+import React from 'react';
+export interface IButtonProps {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    primary?: boolean;
+    title?: string;
+    id: string;
+    status?: IButtonStatus;
+    appearance?: IButtonAppearance;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    badge?: string | number;
+    type?: 'button' | 'submit' | 'reset';
+    options?: ItemType[];
+    tooltip?: string;
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    theme?: 'light' | 'dark';
+}
+export type IButtonStatus = 'secondary-neutral' | 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'error-secondary' | 'cancel' | 'no-background' | 'publish' | 'default';
+export type IButtonAppearance = 'filled' | 'outline' | 'ghost' | 'dashed';
+declare const Button: React.FC<IButtonProps>;
+export default Button;

package/dist/components/buttons/more-button/MoreButton.d.ts

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import type { TSuffixRecord } from '../../navigation/tab-switch';
+/**
+ * Available tab variants
+ */
+export type TabVariant = 'default' | 'secondary' | 'switch';
+/**
+ * Size variants for the MoreButton
+ */
+export type MoreButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Props for the MoreButton component
+ */
+export interface MoreButtonProps {
+    /** The visual variant of the button */
+    variant: TabVariant;
+    /** Size of the button */
+    size: MoreButtonSize;
+    /** ID of the tab that is currently being dragged over */
+    draggingOver: string | null;
+    /** Title text for the button */
+    title: string;
+    /** Whether the more dropdown is currently shown */
+    showMoreDropdown: boolean;
+    /** Handler for showing/hiding the more dropdown */
+    handleShowMoreDropdown: () => void;
+    /** ID of the currently selected tab */
+    selectedId: string;
+    /** Record of suffix values to display on tabs */
+    suffixRecord: TSuffixRecord;
+    /** Additional CSS classes */
+    className?: string;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Color theme of the button */
+    color?: 'light' | 'dark';
+}
+/**
+ * MoreButton component for tab navigation
+ *
+ * Used to display a "More" button that can show additional tabs in a dropdown.
+ * Integrates with TabSwitch component for consistent tab behavior.
+ *
+ * @example
+ * ```tsx
+ * <MoreButton
+ *   variant="default"
+ *   size="md"
+ *   draggingOver={null}
+ *   title="More..."
+ *   showMoreDropdown={false}
+ *   handleShowMoreDropdown={() => setShowDropdown(!showDropdown)}
+ *   selectedId="tab1"
+ *   suffixRecord={{}}
+ * />
+ * ```
+ */
+export declare const MoreButton: React.FC<MoreButtonProps>;

package/dist/components/buttons/more-button/index.d.ts

@@ -0,0 +1,2 @@
+export { MoreButton } from './MoreButton';
+export type { MoreButtonProps, MoreButtonSize, TabVariant } from './MoreButton';

package/dist/components/buttons/tab-drag-overlay/TabDragOverlay.d.ts

@@ -0,0 +1,12 @@
+import type { TResolveToConfig, TSize, TSuffixRecord, TabVariant } from '../../navigation/tab-switch/types';
+export interface TabDragOverlayProps {
+    draggingTab: string;
+    suffixRecord: TSuffixRecord;
+    linkConfig?: TResolveToConfig;
+    size?: TSize;
+    parentContainer: string;
+    variant: TabVariant;
+    selectedId: string;
+}
+declare const TabDragOverlay: React.FC<TabDragOverlayProps>;
+export default TabDragOverlay;

package/dist/components/data-display/modal/Modal.d.ts

@@ -1,13 +1,9 @@
 import { type ModalProps as AntDModalProps } from "antd";
 import type { ReactNode } from "react";
 /**
- * Modal size variants
+ * Custom props extending Ant Design Modal props
  */
-export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
-/**
- * Props for the Modal component
- */
-export interface ModalProps extends Omit<AntDModalProps, "title" | "footer"> {
+export interface ModalProps extends AntDModalProps {
     /** Whether to show only the body content without header */
     onlyBody?: boolean;
     /** Whether to add spacing to the body */
@@ -30,24 +26,16 @@ export interface ModalProps extends Omit<AntDModalProps, "title" | "footer"> {
     noPadding?: boolean;
     /** Close handler */
     onClose?: () => void;
-    /** Modal title - can be string or ReactNode */
-    title?: string | ReactNode;
-    /** Footer content */
-    footer?: ReactNode;
-    /** Modal size */
-    size?: ModalSize;
 }
 /**
  * Modal component for displaying overlay content
  *
  * @example
  * ```tsx
- * <Modal open={isOpen} onClose={() => setIsOpen(false)} title="Example Modal">
+ * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title="Example Modal">
  *   <p>Modal content goes here</p>
  * </Modal>
  * ```
  */
-export declare const Modal: {
-    (props: ModalProps): import("react").ReactPortal;
-    displayName: string;
-};
+export declare const Modal: (props: ModalProps) => import("react").ReactPortal;
+export default Modal;

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.d.ts

@@ -2,10 +2,6 @@
  * Sidebar placement options
  */
 export type ResizableSidebarPlacement = "left" | "right";
-/**
- * Theme options for the sidebar
- */
-export type ResizableSidebarTheme = "light" | "dark";
 /**
  * Props for the ResizableSidebar component
  */
@@ -48,7 +44,5 @@ export interface ResizableSidebarProps {
     mainSidebarCollapsedWidth?: number;
     /** Height offset for navbar */
     navbarHeight?: number;
-    /** Theme for styling */
-    theme?: ResizableSidebarTheme;
 }
 export declare const ResizableSidebar: import("react").ForwardRefExoticComponent<ResizableSidebarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/feedback/confirmation-modal/ConfirmationModal.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type IButtonStatus } from '../../button/Button';
+export interface ConfirmationModalProps {
+    /** Child element that triggers the popup when clicked (optional) */
+    children?: React.ReactElement;
+    /** Callback when cancel is triggered */
+    onCancel?: (closeByIcon?: boolean) => void;
+    /** Callback when OK is clicked */
+    onOk: () => void;
+    /** Title of the confirmation popup */
+    title: string;
+    /** Content/message of the confirmation popup */
+    content: string;
+    /** Footer configuration */
+    footer?: {
+        /** Justify content alignment (e.g., 'justify-end', 'justify-center') */
+        justify?: string;
+        /** Text for OK button */
+        okText?: string;
+        /** Text for cancel button */
+        cancelText?: string;
+        /** Button style for OK button */
+        okBtnType?: IButtonStatus;
+        /** Button style for cancel button */
+        cancelBtnType?: IButtonStatus;
+    };
+    /** Async handler that receives a callback with error status */
+    async?: (cb: ({ error }: {
+        error: boolean;
+    }) => void) => Promise<void>;
+    /** Width of the modal in pixels */
+    width?: number;
+    /** Control visibility from outside */
+    isVisibleOutside?: boolean;
+    /** Whether clicking children can open the popup */
+    ableToConfirmByChildren?: boolean;
+    /** Container element ID for portal rendering */
+    parentContainer?: string;
+}
+/**
+ * ConfirmationModal component for displaying confirmation dialogs
+ *
+ * @example
+ * ```tsx
+ * <ConfirmationModal
+ *   title="Delete Item"
+ *   content="Are you sure you want to delete this item?"
+ *   onOk={() => console.log('Confirmed')}
+ *   onCancel={() => console.log('Cancelled')}
+ * >
+ *   <button>Delete</button>
+ * </ConfirmationModal>
+ * ```
+ */
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/feedback/toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import 'react-toastify/dist/ReactToastify.css';
 import './styles.css';
 export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'in-progress';

package/dist/components/navigation/tab-switch/Children.d.ts

@@ -0,0 +1,3 @@
+import type { TChildrenProps } from './types';
+import type { FC } from 'react';
+export declare const Children: FC<TChildrenProps>;

package/dist/components/navigation/tab-switch/TabSwitch.d.ts

@@ -0,0 +1,11 @@
+import type { TSwitchProps, TTypeKey } from './types';
+import type { ReactNode } from 'react';
+type TProps<T extends TTypeKey> = TSwitchProps<T> & {
+    iconsOnly?: boolean;
+    draggingTab?: boolean;
+    disableAnimation?: boolean;
+    tabOptions?: ReactNode;
+    color?: string;
+};
+declare const TabSwitch: <T extends TTypeKey>(props: TProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TabSwitch;

package/dist/components/navigation/tab-switch/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TabSwitch } from './TabSwitch';
+export { Children as TabSwitchChildren } from './Children';
+export { useResolveTo } from './useResolveTo';
+export * from './types';

package/dist/components/navigation/tab-switch/types.d.ts

@@ -0,0 +1,51 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { LinkProps } from 'react-router-dom';
+export type THtmlButton = HTMLAttributes<HTMLButtonElement>;
+export type THtmlAnchor = HTMLAttributes<HTMLAnchorElement>;
+export type TBaseLinkProps = LinkProps & HTMLAttributes<HTMLAnchorElement>;
+export type TChildrenElement = JSX.Element | JSX.Element[];
+export type TChildren = string | TChildrenElement | null;
+export type TSize = 'sm' | 'md' | 'lg';
+export type TabVariant = 'default' | 'secondary' | 'switch';
+export type TSuffixRecord<T extends string = string, V = string | number> = Record<T, V>;
+export type TResolveToConfig = {
+    key: string;
+    defaultLink: string;
+    resolver?(title?: string): string;
+    onResolve?(searchParams?: URLSearchParams): void;
+};
+export type TPassedProps<T extends string = string> = {
+    linkConfig?: TResolveToConfig;
+    size?: TSize;
+    suffixRecord?: TSuffixRecord<T>;
+    title?: T;
+};
+export type TSharedProps = TPassedProps & {
+    onClick?(): void;
+    size?: TSize;
+    classValue: string;
+    selectedClassValue: string;
+    textClassValue: string;
+    isSelected?: boolean;
+    selectedId?: string;
+    icon?: ReactNode;
+};
+export type TChildrenProps = Pick<TSharedProps, 'isSelected' | 'selectedClassValue' | 'textClassValue' | 'selectedId'> & {
+    children: TChildren;
+    disableAnimation?: boolean;
+    color?: string;
+};
+export declare const TYPES: readonly ["link", "button"];
+export type TTypeKey = (typeof TYPES)[number];
+export type TParentSharedProps = Pick<TSharedProps, 'classValue'>;
+export type TLinkProps = TBaseLinkProps & TParentSharedProps;
+export type TButtonProps = THtmlButton & TParentSharedProps;
+export type TSwitchProps<T extends TTypeKey = 'button'> = {
+    link: TLinkProps & TSharedProps;
+    button: TButtonProps & TSharedProps;
+    activeTab: string;
+    iconsOnly: boolean;
+    draggingTab?: boolean;
+    disableAnimation?: boolean;
+    tabOptions?: ReactNode;
+}[T];

package/dist/components/navigation/tab-switch/useResolveTo.d.ts

@@ -0,0 +1,2 @@
+import type { TResolveToConfig } from './types';
+export declare const useResolveTo: (title: string, config?: TResolveToConfig) => string;

package/dist/components/navigation/tabs/DropableWrapper.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for DropableWrapper component
+ */
+type DropableWrapperProps = {
+    /** Children to render */
+    children: ReactNode;
+    /** Unique identifier for the droppable area */
+    id: string;
+    /** Whether the droppable area is enabled */
+    enabled?: boolean;
+};
+/**
+ * DropableWrapper component
+ *
+ * Wrapper component that creates a droppable area using @dnd-kit/core.
+ * Used to create drop zones for draggable items.
+ *
+ * @example
+ * ```tsx
+ * <DropableWrapper id="drop-zone-1">
+ *   <div>Drop area content</div>
+ * </DropableWrapper>
+ * ```
+ */
+export declare const DropableWrapper: ({ children, id, enabled, }: DropableWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/tabs/SortableTab.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for SortableTab component
+ */
+type SortableTabProps = {
+    /** Unique identifier for the tab */
+    title: string;
+    /** Children to render */
+    children: ReactNode;
+    /** Whether the tab is currently being dragged */
+    isDragging?: boolean;
+};
+/**
+ * SortableTab component
+ *
+ * Wrapper component that makes a tab draggable and sortable using @dnd-kit/sortable.
+ * Shows a visual indicator when the tab is being dragged.
+ *
+ * @example
+ * ```tsx
+ * <SortableTab title="Tab 1" isDragging={false}>
+ *   <div>Tab content</div>
+ * </SortableTab>
+ * ```
+ */
+export declare const SortableTab: ({ title, children, isDragging }: SortableTabProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/tabs/Tabs.d.ts

@@ -0,0 +1,155 @@
+import type { CommonContextProps, SetTabSettingsAction, TabSettingSelector, TabUtilServices, TBaseTabProps, TPassedProps, TSuffixRecord } from './types';
+import type { ReactNode, ComponentType } from 'react';
+import type { OptionButtonProps } from '../../buttons/option-button/OptionButton';
+/**
+ * Components that need to be provided from the consuming application
+ */
+export interface TabsExternalComponents {
+    /** SearchBar component */
+    SearchBar: ComponentType<{
+        id: string;
+        value: string;
+        classValues?: string;
+        onChange: (value: string) => void;
+    }>;
+    /** OptionButton component */
+    OptionButton: ComponentType<OptionButtonProps & {
+        suffixRecord?: TSuffixRecord;
+        highlight?: string;
+        truncateText?: boolean;
+    }>;
+    /** Tooltip component */
+    Tooltip: ComponentType<{
+        title: string;
+        color?: string;
+        children: ReactNode;
+    }>;
+    /** Icons */
+    icons: {
+        MoreVerticalIcon: ComponentType<{
+            size?: number;
+            className?: string;
+        }>;
+        PinIcon: ComponentType<{
+            fill?: string;
+            height?: number;
+            width?: number;
+        }>;
+        UnpinIcon: ComponentType<any>;
+        FiArrowDown: ComponentType<{
+            size?: number;
+            className?: string;
+        }>;
+        FiArrowUp: ComponentType<{
+            size?: number;
+            className?: string;
+        }>;
+        FiArrowUpRight: ComponentType<{
+            size?: number;
+            className?: string;
+        }>;
+        MdContentCopy: ComponentType<{
+            size?: number;
+            className?: string;
+        }>;
+        RemoveRedEyeRounded: ComponentType<{
+            sx?: any;
+        }>;
+        EditIcon: ComponentType<any>;
+        Trash: ComponentType<{
+            size?: number;
+            fill?: string;
+        }>;
+    };
+}
+/**
+ * Props for the Tabs component
+ */
+export type TabsProps<T extends string> = TBaseTabProps<T> & TPassedProps & {
+    /** Unique key for storing tab settings */
+    tabKey?: string;
+    /** Show all items without overflow handling */
+    showAllItems?: boolean;
+    /** Enable copy link functionality */
+    copyLink?: boolean;
+    /** Disable tab animations */
+    disableAnimation?: boolean;
+    /** Container element ID for portals */
+    parentContainer?: string;
+    /** Fit content width */
+    fitContentWidth?: boolean;
+    /** Height class for switch variant */
+    height?: string;
+    /** Callback when tab is deleted */
+    onDelete?: (name: T) => void;
+    /** Callback when tab is edited */
+    onEdit?: (name: T) => void;
+    /** Allow pinning tabs */
+    allowPin?: boolean;
+    /** Sort tabs alphabetically */
+    sortAlphabetically?: boolean;
+    /** Right section configuration */
+    rightSection?: {
+        className?: string;
+        width: number;
+        component: React.ReactNode;
+    };
+    /** Color theme */
+    color?: string;
+    /** Context props from CommonContext */
+    contextProps?: CommonContextProps;
+    /** Redux selector for tab settings */
+    selectTabSetting?: TabSettingSelector;
+    /** Redux action to set tab settings */
+    setTabSettingsAction?: SetTabSettingsAction;
+    /** Utility services for API calls */
+    utilServices?: TabUtilServices;
+    /** Dispatch function from Redux */
+    dispatch?: (action: any) => void;
+    /** System messages utility */
+    systemMessages?: {
+        copyToClipboard: (text: string) => string;
+    };
+    /** Number formatting utility */
+    formatNumber?: (value: number, locale: string, decimals: number, useGrouping: boolean) => string;
+    /** Random hex string generator */
+    randomHexString?: (length: number) => string;
+    /** Event listener hook */
+    useEventListener?: (event: string, handler: () => void) => void;
+    /** External components required by Tabs */
+    components: TabsExternalComponents;
+};
+/**
+ * Tabs Component
+ *
+ * A comprehensive tab navigation component with drag-and-drop, pinning, hiding,
+ * and overflow handling capabilities.
+ *
+ * Features:
+ * - Multiple variants: default, secondary, switch
+ * - Drag and drop reordering
+ * - Tab pinning
+ * - Tab hiding/showing
+ * - Overflow handling with "More" dropdown
+ * - Responsive design
+ * - Suffix badges
+ * - Custom icons
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   tabs={['Tab 1', 'Tab 2', 'Tab 3']}
+ *   activeTab="Tab 1"
+ *   onTabClick={(tab) => console.log(tab)}
+ *   variant="default"
+ *   draggable={true}
+ *   components={{
+ *     SearchBar,
+ *     OptionButton,
+ *     Tooltip,
+ *     icons: { ... }
+ *   }}
+ * />
+ * ```
+ */
+export declare const Tabs: <T extends string>({ variant, linkConfig, tabs, activeTab, onTabClick, suffixRecord, isLoading, size, className, draggable, tabKey, parentContainer, showAllItems, copyLink, isDisabled, color, iconsOnly, tabIcons, height, fullWidth, fitContentWidth, onDelete, onEdit, allowPin, sortAlphabetically, rightSection, contextProps, selectTabSetting, setTabSettingsAction, utilServices, dispatch, systemMessages, formatNumber, randomHexString, useEventListener, components, }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsExternalComponents } from './Tabs';
+export { SortableTab } from './SortableTab';
+export { DropableWrapper } from './DropableWrapper';
+export type { Tab, TBaseTabProps, TPassedProps, TSuffixRecord, TSize, TabVariant, TResolveToConfig, TabSetting, TabUtilServices, TabSettingSelector, SetTabSettingsAction, CommonContextProps, } from './types';

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

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import type { TResolveToConfig, TSuffixRecord, TSize, TabVariant } from '../tab-switch/types';
+/**
+ * Represents a tab item with its configuration
+ */
+export type Tab<T extends string> = {
+    /** Name/ID of the tab */
+    name: T;
+    /** Whether this is a default tab */
+    is_default: boolean;
+    /** Whether the tab is hidden */
+    is_hidden: boolean;
+    /** Whether the tab is pinned */
+    is_pinned?: boolean;
+};
+/**
+ * Base props for tab components
+ */
+export type TBaseTabProps<T extends string> = {
+    /** Array of tab names */
+    tabs: readonly T[];
+    /** Initially hidden tabs */
+    initialHiddenTabs?: readonly T[];
+    /** Currently active tab */
+    activeTab: T;
+    /** Callback when a tab is clicked */
+    onTabClick?(id: T): void;
+    /** Count values for each tab */
+    counts?: Record<T, number>;
+    /** Whether tabs are disabled */
+    isDisabled?: boolean;
+    /** Icon elements for each tab */
+    tabIcons?: Record<string, ReactNode>;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Title for the tabs */
+    title?: string;
+    /** Show only icons without text */
+    iconsOnly?: boolean;
+    /** Enable drag and drop */
+    draggable?: boolean;
+    /** Visual variant of tabs */
+    variant?: TabVariant;
+    /** Full width tabs */
+    fullWidth?: boolean;
+    /** Color theme */
+    color?: 'light' | 'dark';
+};
+/**
+ * Props passed through tab components
+ */
+export type TPassedProps<T extends string = string> = {
+    /** Link configuration */
+    linkConfig?: TResolveToConfig;
+    /** Size variant */
+    size?: TSize;
+    /** Suffix values to display on tabs */
+    suffixRecord?: TSuffixRecord<T>;
+};
+/**
+ * Tab settings data from API
+ */
+export type TabSetting = {
+    tab_type: string;
+    tab_items: Tab<string>[];
+};
+/**
+ * Utility services for tab settings
+ */
+export type TabUtilServices = {
+    /** Upsert tab settings to backend */
+    UpsertTabSettings: (data: {
+        tab_type?: string;
+        tab_items: Tab<string>[];
+    }) => Promise<void>;
+    /** Get tab settings from backend */
+    GetTabSettings: () => Promise<{
+        status: string;
+        data: TabSetting[];
+    }>;
+};
+/**
+ * Redux selector for tab settings
+ */
+export type TabSettingSelector = (tabKey?: string) => TabSetting | undefined;
+/**
+ * Redux action to set tab settings
+ */
+export type SetTabSettingsAction = (data: TabSetting[]) => {
+    type: string;
+    payload: TabSetting[];
+};
+/**
+ * Props from CommonContext
+ */
+export type CommonContextProps = {
+    /** Whether document view is shown */
+    isShowDocument?: boolean;
+    /** Whether sidebar is expanded */
+    isExpanded?: boolean;
+    /** Disable actions handler */
+    setDisableActions?: (disabled: boolean) => void;
+    /** Whether authoring view is shown */
+    isShowAuthoring?: boolean;
+};
+export type { TResolveToConfig, TSuffixRecord, TSize, TabVariant } from '../tab-switch/types';