@lax-wp/design-system 0.3.85 → 0.3.87

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

@@ -0,0 +1,6 @@
+import React, { type ReactNode } from 'react';
+export interface ButtonGroupProps {
+    children: ReactNode;
+    variant: 'group' | 'ungroup';
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/components/cards/card-header-view/CardHeaderView.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+export type CardHeaderViewProps = {
+    title: string;
+    /** The link destination. If not provided, no link will be shown */
+    to?: string;
+    /** Whether the user has permission to see the link. Defaults to true */
+    hasUserPermissions?: boolean;
+    /** Custom view more text. Defaults to "View More" */
+    viewMoreText?: string;
+    /** Custom link component to use instead of anchor tag (for React Router, Next.js, etc) */
+    LinkComponent?: FC<{
+        to: string;
+        className?: string;
+        onClick?: () => void;
+        onMouseDown?: (e: React.MouseEvent) => void;
+        onTouchStart?: (e: React.TouchEvent) => void;
+        children: ReactNode;
+    }>;
+};
+/**
+ * CardHeaderView component for card headers with optional "View More" link
+ *
+ * @example
+ * ```tsx
+ * // With default anchor link
+ * <CardHeaderView title="Recent Items" to="/items" />
+ *
+ * // With React Router Link
+ * import { Link } from 'react-router-dom';
+ * <CardHeaderView title="Recent Items" to="/items" LinkComponent={Link} />
+ * ```
+ */
+export declare const CardHeaderView: FC<CardHeaderViewProps>;

package/dist/components/cards/card-header-view/index.d.ts

@@ -0,0 +1,2 @@
+export { CardHeaderView } from './CardHeaderView';
+export type { CardHeaderViewProps } from './CardHeaderView';

package/dist/components/cards/card-main/CardMain.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+export type CardMainProps = {
+    title?: string;
+    children: ReactNode;
+    noPadding?: boolean;
+    className?: string;
+    noHeight?: boolean;
+    noBanner?: boolean;
+    noScrollbar?: boolean;
+    /** Current mode - can be 'edit', 'focusEdit', 'comparison' */
+    mode?: string | null;
+    /** Display ID to show in banner */
+    displayId?: string | null;
+};
+/**
+ * CardMain component for main content areas with optional edit/comparison banners
+ *
+ * @example
+ * ```tsx
+ * <CardMain title="Page Title" mode="edit" displayId="DOC-001">
+ *   <div>Page content</div>
+ * </CardMain>
+ * ```
+ */
+export declare const CardMain: FC<CardMainProps>;

package/dist/components/cards/card-main/index.d.ts

@@ -0,0 +1,2 @@
+export { CardMain } from './CardMain';
+export type { CardMainProps } from './CardMain';

package/dist/components/cards/tab-content/TabContent.d.ts

@@ -0,0 +1,30 @@
+import { FC, ReactNode } from 'react';
+export type TabContentDrawerConfig = {
+    open: boolean;
+    onClose: () => void;
+    content: ReactNode;
+    header: ReactNode;
+};
+export type TabContentProps = {
+    tabs?: ReactNode | false | null;
+    title?: string;
+    content: ReactNode;
+    className?: string;
+    noPadding?: boolean;
+    noBorder?: boolean;
+    drawerConfig?: TabContentDrawerConfig | null;
+    noBorderTopContent?: boolean;
+};
+/**
+ * TabContent component for tabbed content with optional drawer
+ *
+ * @example
+ * ```tsx
+ * <TabContent
+ *   title="Page Title"
+ *   tabs={<Tabs items={tabItems} />}
+ *   content={<div>Tab content here</div>}
+ * />
+ * ```
+ */
+export declare const TabContent: FC<TabContentProps>;

package/dist/components/cards/tab-content/index.d.ts

@@ -0,0 +1,2 @@
+export { TabContent } from './TabContent';
+export type { TabContentProps, TabContentDrawerConfig } from './TabContent';

package/dist/components/drag-and-drop/drag-overlay/DragOverlay.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export type DragOverlayProps = {
+    children: ReactNode;
+    /** ID of the container to portal the overlay into. Defaults to 'full-screen-container' then document.body */
+    containerId?: string;
+};
+/**
+ * DragOverlay component for rendering dragged item preview
+ *
+ * @example
+ * ```tsx
+ * <DraggableContainer onDragEnd={handleDragEnd}>
+ *   <SortableContext items={items}>
+ *     {items.map((item) => <SortableItem key={item.id} {...item} />)}
+ *   </SortableContext>
+ *   <DragOverlay>
+ *     {activeItem ? <ItemPreview {...activeItem} /> : null}
+ *   </DragOverlay>
+ * </DraggableContainer>
+ * ```
+ */
+export declare const DragOverlay: {
+    ({ children, containerId }: DragOverlayProps): import("react").ReactPortal;
+    displayName: string;
+};

package/dist/components/drag-and-drop/drag-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { DragOverlay } from './DragOverlay';
+export type { DragOverlayProps } from './DragOverlay';

package/dist/components/drag-and-drop/draggable-container/DraggableContainer.d.ts

@@ -0,0 +1,29 @@
+import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
+import { ReactNode } from 'react';
+export type DraggableContainerProps = {
+    onDragEnd: (event: DragEndEvent) => void;
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragOver?: (event: DragOverEvent) => void;
+    children: ReactNode;
+};
+/**
+ * DraggableContainer component wraps dnd-kit DndContext with sensible defaults
+ *
+ * @example
+ * ```tsx
+ * <DraggableContainer
+ *   onDragEnd={(event) => handleDragEnd(event)}
+ *   onDragStart={(event) => handleDragStart(event)}
+ * >
+ *   <SortableContext items={items}>
+ *     {items.map((item) => (
+ *       <SortableItem key={item.id} id={item.id} />
+ *     ))}
+ *   </SortableContext>
+ * </DraggableContainer>
+ * ```
+ */
+export declare const DraggableContainer: {
+    ({ onDragEnd, onDragStart, onDragOver, children }: DraggableContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/drag-and-drop/draggable-container/index.d.ts

@@ -0,0 +1,2 @@
+export { DraggableContainer } from './DraggableContainer';
+export type { DraggableContainerProps } from './DraggableContainer';

package/dist/components/modal/confirm-popup/ConfirmPopUp.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export type IButtonStatus = 'primary' | 'secondary' | 'secondary-neutral' | 'error' | 'success' | 'warning';
+export type ConfirmPopUpProps = {
+    children?: React.ReactElement;
+    onCancel?: (closeByIcon?: boolean) => void;
+    onOk: () => void;
+    title: string;
+    content: string;
+    footer?: {
+        justify?: string;
+        okText?: string;
+        cancelText?: string;
+        okBtnType?: IButtonStatus;
+        cancelBtnType?: IButtonStatus;
+    };
+    async?: (cb: ({ error }: {
+        error: boolean;
+    }) => void) => Promise<void>;
+    width?: number;
+    forceVisible?: boolean;
+    isVisibleOutside?: boolean;
+    ableToConfirmByChildren?: boolean;
+    parentContainer?: string;
+};
+declare const _default: React.NamedExoticComponent<ConfirmPopUpProps>;
+export default _default;

package/dist/components/modal/confirm-popup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfirmPopUp } from './ConfirmPopUp';
+export type { ConfirmPopUpProps, IButtonStatus } from './ConfirmPopUp';

package/dist/components/modal/drawer/Drawer.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export type DrawerProps = {
+    children: React.ReactNode;
+    onClose: () => void;
+    open: boolean;
+    title: React.ReactNode;
+    parentContainer?: string;
+    resizable?: boolean;
+    width?: number;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    closable?: boolean;
+    mask?: boolean;
+    classNames?: {
+        content?: string;
+        body?: string;
+        header?: string;
+        footer?: string;
+    };
+    styles?: {
+        body?: React.CSSProperties;
+        content?: React.CSSProperties;
+        header?: React.CSSProperties;
+        footer?: React.CSSProperties;
+    };
+    getContainer?: false | HTMLElement | (() => HTMLElement);
+    zIndex?: number;
+    footer?: React.ReactNode;
+};
+/**
+ * Drawer component for sliding panels from screen edges
+ *
+ * @example
+ * ```tsx
+ * <Drawer
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Drawer Title"
+ *   width={400}
+ * >
+ *   <div>Drawer content</div>
+ * </Drawer>
+ * ```
+ */
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/components/modal/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer, default as DrawerDefault } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/navigation/accordion/Accordion.d.ts

@@ -0,0 +1,39 @@
+import { FC, HTMLAttributes } from 'react';
+export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
+    title: any;
+    toggle: () => void;
+    isOpen: boolean;
+    hoveringIndex?: number | null;
+    index?: number;
+    viewOnly?: boolean;
+    onTitleClick?: (e: React.MouseEvent) => void;
+    onSelect?: () => void;
+    isChecked?: boolean;
+    subTitle?: string;
+    noSpace?: boolean;
+    isDraggable?: boolean;
+    sortableConfig?: Record<string, any>;
+    headerClass?: string;
+    icon?: JSX.Element;
+    additionalHeader?: JSX.Element;
+    id: string;
+    isEditMode?: boolean;
+    mainClass?: string;
+    childrenClass?: string;
+};
+/**
+ * Accordion component for collapsible content sections
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   id="my-accordion"
+ *   title="Section Title"
+ *   isOpen={isOpen}
+ *   toggle={() => setIsOpen(!isOpen)}
+ * >
+ *   <div>Accordion content</div>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: FC<AccordionProps>;

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';

package/dist/components/navigation/stepper/Stepper.d.ts

@@ -0,0 +1,45 @@
+export type TStep = {
+    label: string;
+    description?: string;
+    isLocked?: boolean;
+    tooltipText?: string;
+};
+export type TStepperProps = {
+    steps: TStep[];
+    currentStep: number;
+    onClick?: (index: number) => void;
+    appearance?: 'linear' | 'parallel';
+    labelPosition?: 'top' | 'bottom' | 'inline' | 'top-right' | 'bottom-right';
+    className?: string;
+    showIndex?: boolean;
+    disableOneMore?: boolean;
+    lockConfig?: {
+        isLocked?: boolean;
+        tooltipText?: string;
+    };
+    /** Whether the main sidebar is open (affects responsive calculations) */
+    isMainSideBarOpen?: boolean;
+    /** Whether the authoring panel is open (affects responsive calculations) */
+    isAuthoringOpen?: boolean;
+};
+/**
+ * Stepper component for multi-step workflows
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   steps={[
+ *     { label: 'Step 1', description: 'First step' },
+ *     { label: 'Step 2', description: 'Second step' },
+ *     { label: 'Step 3', description: 'Third step' },
+ *   ]}
+ *   currentStep={1}
+ *   onClick={(index) => setCurrentStep(index)}
+ * />
+ * ```
+ */
+declare const Stepper: {
+    ({ steps, currentStep, appearance, labelPosition, onClick, className, showIndex, disableOneMore, isMainSideBarOpen, isAuthoringOpen, }: TStepperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Stepper;

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

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper';
+export type { TStep, TStepperProps } from './Stepper';

package/dist/components/sidebar/Sidebar.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export type SidebarProps = {
+    children: ReactNode;
+    /** Whether the sidebar should take full screen width minus the main sidebar */
+    isFullScreen?: boolean;
+    className?: string;
+    /** Default width when not in fullscreen mode */
+    defaultSize?: number | string;
+    /** Custom height. Defaults to viewport height minus navbar */
+    height?: string;
+    /** Whether the main sidebar is expanded */
+    isMainSideBarOpen?: boolean;
+};
+declare const _default: React.NamedExoticComponent<SidebarProps>;
+export default _default;

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

@@ -0,0 +1,2 @@
+export { default as Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar';

package/dist/components/user-avatar/PersonIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type PersonIconProps = {
+    fill?: string;
+    className?: string;
+};
+export declare const PersonIcon: React.FC<PersonIconProps>;
+export {};

package/dist/components/user-avatar/StatusInfoRow.d.ts

@@ -0,0 +1,5 @@
+export interface StatusInfoRowProps {
+    isActive?: boolean;
+    lastViewedOn?: string;
+}
+export declare const StatusInfoRow: ({ isActive, lastViewedOn }: StatusInfoRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/user-avatar/UserAvatar.d.ts

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+export type UserAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type UserDetailsTeam = {
+    id?: string;
+    name: string;
+    color?: string;
+};
+export type UserDetails = {
+    email?: string;
+    username?: string;
+    teams?: UserDetailsTeam[];
+    group?: string;
+    clearanceLevel?: number | string;
+    region?: string;
+};
+export type UserAvatarProps = {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    enablePopper?: boolean;
+    profilePic?: string;
+    size?: UserAvatarSize;
+    hoverSize?: UserAvatarSize;
+    containerClassName?: string;
+    className?: string;
+    userId?: string;
+    lastViewedOn?: string;
+    isActive?: boolean;
+    statusIndicator?: boolean;
+    /** User details to display in the popper - replaces the useTeamMemberFilter hook */
+    userDetails?: UserDetails | null;
+    /** Whether user details are being fetched */
+    isFetchingUserDetails?: boolean;
+    /** Optional token for authenticated image loading */
+    authToken?: string;
+};
+/**
+ * UserAvatar component for displaying user profile pictures with hover popper
+ *
+ * @example
+ * ```tsx
+ * <UserAvatar
+ *   firstName="John"
+ *   lastName="Doe"
+ *   email="john@example.com"
+ *   profilePic="/avatar.jpg"
+ *   userDetails={{ teams: [{ name: 'Engineering', color: '#0066cc' }], group: 'Admin' }}
+ * />
+ * ```
+ */
+export declare const UserAvatar: FC<UserAvatarProps>;

package/dist/components/user-avatar/UserAvatarPopper.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type UserAvatarPopperPlacement = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
+export interface UserAvatarPopperProps {
+    isOpen: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+    placement?: UserAvatarPopperPlacement;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const UserAvatarPopper: ({ isOpen, onClose, anchorEl, placement, children, className }: UserAvatarPopperProps) => React.ReactPortal;

package/dist/components/user-avatar/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const sizeClasses: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const getInitials: (name: string) => string;

package/dist/components/user-avatar/index.d.ts

@@ -0,0 +1,9 @@
+export { UserAvatar } from './UserAvatar';
+export type { UserAvatarProps, UserAvatarSize, UserDetails, UserDetailsTeam } from './UserAvatar';
+export { UserAvatarPopper } from './UserAvatarPopper';
+export type { UserAvatarPopperProps, UserAvatarPopperPlacement } from './UserAvatarPopper';
+export { StatusInfoRow } from './StatusInfoRow';
+export type { StatusInfoRowProps } from './StatusInfoRow';
+export { PersonIcon } from './PersonIcon';
+export { sizeClasses, getInitials } from './constants';
+export { useDynamicPosition } from './useDynamicPosition';

package/dist/components/user-avatar/useDynamicPosition.d.ts

@@ -0,0 +1,13 @@
+type Position = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'right';
+};
+export declare const useDynamicPosition: () => {
+    triggerRef: import("react").MutableRefObject<HTMLDivElement>;
+    dropdownRef: import("react").MutableRefObject<HTMLDivElement>;
+    position: Position;
+    isVisible: boolean;
+    show: () => void;
+    hide: () => void;
+};
+export {};

package/dist/index.d.ts

@@ -46,8 +46,6 @@ export { MdInput } from "./components/forms/md-input/MdInput";
 export type { MdInputProps } from "./components/forms/md-input/MdInput";
 export { MultiFileUpload } from "./components/forms/multi-file-upload/MultiFileUpload";
 export type { MultiFileUploadProps, FileUploadResult, FileChangeValue, } from "./components/forms/multi-file-upload/MultiFileUpload";
-export { FileUpload } from "./components/forms/file-upload/FileUpload";
-export type { FileUploadProps, FileUploadSize, FileUploadVariant, } from "./components/forms/file-upload/FileUpload";
 export { IconPicker, IconRenderer } from "./components/forms/icon-picker/IconPicker";
 export type { IconPickerContentProps } from "./components/forms/icon-picker/IconPicker";
 export { StatusColorMapping } from "./components/data-display/status-color-mapping/StatusColorMapping";
@@ -129,6 +127,8 @@ export { default as Radio } from "./components/button/Radio";
 export type { RadioProps, } from "./components/button/Radio";
 export { ButtonThreeDots } from "./components/button/ButtonThreeDots";
 export type { TButtonThreeDotsProps, } from "./components/button/ButtonThreeDots";
+export { ButtonGroup } from "./components/button/ButtonGroup";
+export type { ButtonGroupProps, } from "./components/button/ButtonGroup";
 export { FloatingBar } from "./components/floating-bar/FloatingBar";
 export type { FloatingBarProps, FloatingBarActionConfig, FloatingBarDeleteConfig, FloatingBarSize, FloatingBarPosition, FloatingBarTheme, } from "./components/floating-bar/FloatingBar";
 export { SearchBar } from "./components/forms/search-bar/SearchBar";
@@ -157,3 +157,25 @@ export type { DynamicItemsCellProps } from "./components/data-display/dynamic-it
 export { NumberInputField } from "./components/forms/number-input-field/NumberInputField";
 export type { NumberInputFieldProps } from "./components/forms/number-input-field/NumberInputField";
 export { MODES, OPEN_DURATION_MS } from "./constants/layout";
+export { Accordion } from "./components/navigation/accordion";
+export type { AccordionProps } from "./components/navigation/accordion";
+export { Stepper } from "./components/navigation/stepper";
+export type { TStep, TStepperProps } from "./components/navigation/stepper";
+export { Drawer } from "./components/modal/drawer";
+export type { DrawerProps } from "./components/modal/drawer";
+export { ConfirmPopUp } from "./components/modal/confirm-popup";
+export type { ConfirmPopUpProps, IButtonStatus as ConfirmPopUpButtonStatus } from "./components/modal/confirm-popup";
+export { CardHeaderView } from "./components/cards/card-header-view";
+export type { CardHeaderViewProps } from "./components/cards/card-header-view";
+export { CardMain } from "./components/cards/card-main";
+export type { CardMainProps } from "./components/cards/card-main";
+export { TabContent } from "./components/cards/tab-content";
+export type { TabContentProps, TabContentDrawerConfig } from "./components/cards/tab-content";
+export { DraggableContainer } from "./components/drag-and-drop/draggable-container";
+export type { DraggableContainerProps } from "./components/drag-and-drop/draggable-container";
+export { DragOverlay } from "./components/drag-and-drop/drag-overlay";
+export type { DragOverlayProps } from "./components/drag-and-drop/drag-overlay";
+export { Sidebar } from "./components/sidebar";
+export type { SidebarProps } from "./components/sidebar";
+export { UserAvatar, UserAvatarPopper, StatusInfoRow, PersonIcon, sizeClasses as userAvatarSizeClasses, getInitials, useDynamicPosition } from "./components/user-avatar";
+export type { UserAvatarProps, UserAvatarSize, UserDetails, UserDetailsTeam, UserAvatarPopperProps, UserAvatarPopperPlacement, StatusInfoRowProps, } from "./components/user-avatar";