@lax-wp/design-system 0.3.88 → 0.3.90

package/dist/components/data-display/context-menu/ContextMenu.d.ts

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+export interface ContextMenuProps {
+    /** Whether the context menu is visible */
+    visible: boolean;
+    /** X position of the menu */
+    xPos: number;
+    /** Y position of the menu */
+    yPos: number;
+    /** Menu content */
+    children: ReactNode;
+    /** Custom CSS class name */
+    className?: string;
+    /** Container element ID for the portal (defaults to body) */
+    containerId?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * ContextMenu component creates a portal-based context menu at specified coordinates
+ *
+ * @example
+ * ```tsx
+ * const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
+ *
+ * <div onContextMenu={(e) => {
+ *   e.preventDefault();
+ *   setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+ * }}>
+ *   Right click me
+ * </div>
+ *
+ * <ContextMenu
+ *   visible={contextMenu.visible}
+ *   xPos={contextMenu.x}
+ *   yPos={contextMenu.y}
+ * >
+ *   <MenuItem onClick={() => console.log('clicked')}>Action</MenuItem>
+ * </ContextMenu>
+ * ```
+ */
+export declare const ContextMenu: FC<ContextMenuProps>;
+export default ContextMenu;

package/dist/components/data-display/datatype-icon/DataTypeIcon.d.ts

@@ -0,0 +1,104 @@
+import { FC, ReactNode } from 'react';
+/**
+ * Available data types for the icon
+ */
+export declare const APP_DATA_TYPES: {
+    readonly BOOLEAN: "boolean";
+    readonly CHOICE: "choice";
+    readonly CURRENCY: "currency";
+    readonly DATE: "date";
+    readonly DATETIME: "datetime";
+    readonly DYNAMIC: "dynamic";
+    readonly EMAIL: "email";
+    readonly MASTER_DATA: "master data";
+    readonly NUMBER: "number";
+    readonly PERCENTAGE: "percentage";
+    readonly STRING: "string";
+    readonly TAG: "tag";
+    readonly TEXT: "text";
+    readonly URL: "url";
+};
+/**
+ * Options for data type select fields
+ */
+export declare const APP_DATA_TYPES_OPTIONS: ({
+    label: string;
+    value: "boolean";
+} | {
+    label: string;
+    value: "choice";
+} | {
+    label: string;
+    value: "currency";
+} | {
+    label: string;
+    value: "date";
+} | {
+    label: string;
+    value: "datetime";
+} | {
+    label: string;
+    value: "dynamic";
+} | {
+    label: string;
+    value: "email";
+} | {
+    label: string;
+    value: "master data";
+} | {
+    label: string;
+    value: "number";
+} | {
+    label: string;
+    value: "percentage";
+} | {
+    label: string;
+    value: "string";
+} | {
+    label: string;
+    value: "tag";
+} | {
+    label: string;
+    value: "text";
+} | {
+    label: string;
+    value: "url";
+})[];
+/**
+ * Background colors for light mode
+ */
+export declare const BG_COLORS: Record<string, string>;
+/**
+ * Background colors for light mode on hover
+ */
+export declare const BG_COLORS_HOVER: Record<string, string>;
+/**
+ * Background colors for dark mode
+ */
+export declare const BG_COLORS_DARK: Record<string, string>;
+/**
+ * Background colors for dark mode on hover
+ */
+export declare const BG_COLORS_DARK_HOVER: Record<string, string>;
+export interface DataTypeIconProps {
+    /** The data type to display */
+    dataType?: string;
+    /** Custom tooltip content */
+    tooltip?: ReactNode;
+    /** Whether dark mode is enabled (passed as prop instead of using context) */
+    isDarkMode?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * DataTypeIcon displays an icon representing a data type with appropriate styling
+ *
+ * @example
+ * ```tsx
+ * <DataTypeIcon dataType="text" isDarkMode={false} />
+ * <DataTypeIcon dataType="number" tooltip="Custom tooltip" isDarkMode={true} />
+ * ```
+ */
+export declare const DataTypeIcon: FC<DataTypeIconProps>;

package/dist/components/data-display/empty-state/NoDataFound.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from 'react';
+export interface NoDataFoundProps {
+    /** Main text to display */
+    text: string;
+    /** Additional descriptive text */
+    additionaltext?: string;
+    /** Children elements (e.g., action buttons) */
+    children?: ReactNode;
+    /** Custom icon to display instead of default */
+    icon?: ReactNode;
+    /** Custom CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * NoDataFound component displays an empty state message
+ *
+ * @example
+ * ```tsx
+ * <NoDataFound
+ *   text="No results found"
+ *   additionaltext="Try adjusting your search or filters"
+ * />
+ * ```
+ */
+export declare const NoDataFound: FC<NoDataFoundProps>;

package/dist/components/data-display/empty-state/PageNotFound.d.ts

@@ -0,0 +1,38 @@
+import { FC, ReactNode } from 'react';
+export interface PageNotFoundProps {
+    /** Custom icon to display */
+    icon?: ReactNode;
+    /** Link component for the back to home button (e.g., from react-router-dom) */
+    linkComponent?: FC<{
+        to: string;
+        children: ReactNode;
+    }>;
+    /** Path to navigate on back to home click */
+    homePath?: string;
+    /** Custom back to home text */
+    backToHomeText?: string;
+    /** Custom 404 title */
+    title?: string;
+    /** Custom subtitle */
+    subtitle?: string;
+    /** Custom description */
+    description?: string;
+    /** Custom CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * PageNotFound component displays a 404 error page
+ *
+ * @example
+ * ```tsx
+ * import { Link } from 'react-router-dom';
+ *
+ * <PageNotFound
+ *   linkComponent={Link}
+ *   homePath="/home"
+ * />
+ * ```
+ */
+export declare const PageNotFound: FC<PageNotFoundProps>;

package/dist/components/data-display/empty-state/UserNotFound.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+export interface UserNotFoundProps {
+    /** Custom CSS class name */
+    className?: string;
+    /** Title text */
+    title?: ReactNode;
+    /** Description text */
+    description?: ReactNode;
+    /** Warning title */
+    warningTitle?: string;
+    /** Warning description */
+    warningDescription?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Custom warning icon */
+    warningIcon?: ReactNode;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * UserNotFound component displays when a user account is not linked
+ *
+ * @example
+ * ```tsx
+ * <UserNotFound />
+ * ```
+ */
+export declare const UserNotFound: FC<UserNotFoundProps>;

package/dist/components/data-display/empty-state/index.d.ts

@@ -0,0 +1,6 @@
+export { NoDataFound } from './NoDataFound';
+export type { NoDataFoundProps } from './NoDataFound';
+export { PageNotFound } from './PageNotFound';
+export type { PageNotFoundProps } from './PageNotFound';
+export { UserNotFound } from './UserNotFound';
+export type { UserNotFoundProps } from './UserNotFound';

package/dist/components/data-display/json-grid-viewer/AddKeyModal.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface AddKeyModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    parentContainer: string;
+}
+export declare const AddKeyModal: FC<AddKeyModalProps>;

package/dist/components/data-display/json-grid-viewer/JsonGridBulkFloatingBar.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const JsonGridBulkFloatingBar: FC;

package/dist/components/data-display/json-grid-viewer/JsonGridCore.d.ts

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

package/dist/components/data-display/json-grid-viewer/JsonGridViewer.d.ts

@@ -0,0 +1,47 @@
+import { Dispatch, SetStateAction, FC } from 'react';
+export interface JsonGridViewerProps {
+    /** Whether the viewer is in full screen mode */
+    isFullScreen: boolean;
+    /** Whether all nodes are expanded */
+    allExpanded: boolean;
+    /** Toggle all nodes expanded/collapsed */
+    toggleAll: () => void;
+    /** Whether edit mode is enabled */
+    isEditMode: boolean;
+    /** Whether dark mode is enabled */
+    isDarkMode: boolean;
+    /** Custom styles for the grid */
+    style: React.CSSProperties;
+    /** JSON value as a string */
+    value: string;
+    /** Callback when the JSON value changes */
+    onChange?: (v: string) => void;
+    /** Setter for add key modal open state */
+    setIsAddKeyModalOpen: Dispatch<SetStateAction<boolean>>;
+    /** Whether the add key modal is open */
+    isAddKeyModalOpen: boolean;
+}
+/**
+ * JsonGridViewer component provides a visual grid editor for JSON data
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('{"key": "value"}');
+ * const [allExpanded, setAllExpanded] = useState(false);
+ * const [isAddKeyModalOpen, setIsAddKeyModalOpen] = useState(false);
+ *
+ * <JsonGridViewer
+ *   isFullScreen={false}
+ *   allExpanded={allExpanded}
+ *   toggleAll={() => setAllExpanded(!allExpanded)}
+ *   isEditMode={true}
+ *   isDarkMode={false}
+ *   style={{ maxHeight: '500px' }}
+ *   value={value}
+ *   onChange={setValue}
+ *   setIsAddKeyModalOpen={setIsAddKeyModalOpen}
+ *   isAddKeyModalOpen={isAddKeyModalOpen}
+ * />
+ * ```
+ */
+export declare const JsonGridViewer: FC<JsonGridViewerProps>;

package/dist/components/data-display/json-grid-viewer/JsonGridViewerContext.d.ts

@@ -0,0 +1,4 @@
+import { IJsonGridViewerContext } from './types';
+export declare const JsonGridViewerContext: import("react").Context<IJsonGridViewerContext>;
+export declare const JsonGridViewerContextProvider: import("react").Provider<IJsonGridViewerContext>;
+export declare const useJsonGridViewerContext: () => IJsonGridViewerContext;

package/dist/components/data-display/json-grid-viewer/JsonValueDisplay.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { JsonValue } from './types';
+export declare const JsonValueDisplay: FC<{
+    value: JsonValue;
+    path: string;
+    onChange: (path: string, newValue: JsonValue) => void;
+    isDarkMode?: boolean;
+}>;

package/dist/components/data-display/json-grid-viewer/NestedJsonGrid.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { JsonArray, JsonObject, JsonValue } from './types';
+export declare const NestedJsonGrid: FC<{
+    data: JsonObject | JsonArray;
+    path: string;
+    onChange: (path: string, newValue: JsonValue) => void;
+}>;

package/dist/components/data-display/json-grid-viewer/hooks.d.ts

@@ -0,0 +1,6 @@
+import { JsonArray, JsonObject, JsonValue } from './types';
+export declare const useCheckboxSelection: (selectedPaths: string[], setSelectedPaths: (paths: string[]) => void) => {
+    handleCheckboxChange: (fullPath: string, isChecked: boolean, value: JsonValue, isExpandable: boolean) => void;
+    isPathSelected: (path: string) => boolean;
+    getAllChildPaths: (parentPath: string, sourceData: JsonObject | JsonArray) => string[];
+};

package/dist/components/data-display/json-grid-viewer/index.d.ts

@@ -0,0 +1,12 @@
+export { JsonGridViewer } from './JsonGridViewer';
+export type { JsonGridViewerProps } from './JsonGridViewer';
+export { JsonGridViewerContextProvider, useJsonGridViewerContext } from './JsonGridViewerContext';
+export { JsonGridCore } from './JsonGridCore';
+export { NestedJsonGrid } from './NestedJsonGrid';
+export { JsonValueDisplay } from './JsonValueDisplay';
+export { JsonGridBulkFloatingBar } from './JsonGridBulkFloatingBar';
+export { AddKeyModal } from './AddKeyModal';
+export type { AddKeyModalProps } from './AddKeyModal';
+export { useCheckboxSelection } from './hooks';
+export * from './types';
+export * from './utils';

package/dist/components/data-display/json-grid-viewer/types.d.ts

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction } from 'react';
+export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
+export type JsonObject = {
+    [key: string]: JsonValue;
+};
+export type JsonArray = JsonValue[];
+export interface IJsonGridProps {
+    onChange?: (value: string) => void;
+    isEditMode?: boolean;
+    isDarkMode?: boolean;
+    style?: React.CSSProperties;
+}
+export interface IJsonGridViewerContext {
+    allExpanded: boolean;
+    toggleAll: () => void;
+    isEditMode: boolean;
+    isDarkMode: boolean;
+    selectedPaths: string[];
+    setSelectedPaths: Dispatch<SetStateAction<string[]>>;
+    selectedTopLevelPaths: string[];
+    setSelectedTopLevelPaths: Dispatch<SetStateAction<string[]>>;
+    selectedPathModification: string | null;
+    setSelectedPathModification: Dispatch<SetStateAction<string | null>>;
+    selectedPathForEdit: string | null;
+    setSelectedPathForEdit: Dispatch<SetStateAction<string | null>>;
+    jsonData: JsonObject | JsonArray;
+    setJsonData: Dispatch<SetStateAction<JsonObject | JsonArray>>;
+    error: string | null;
+    setError: Dispatch<SetStateAction<string | null>>;
+    handleDelete: (paths: string[]) => void;
+    handleDuplicate: (paths: string[]) => void;
+    handleCopy: (paths: string[]) => Promise<boolean>;
+    setIsAddKeyModalOpen: Dispatch<SetStateAction<boolean>>;
+    isAddKeyModalOpen: boolean;
+    handleAddKey: (path: string, key: string, v: string | number | boolean | null | JsonArray | JsonObject | undefined) => void;
+}
+export declare const DataType: {
+    readonly STRING: "string";
+    readonly NUMBER: "number";
+    readonly BOOLEAN: "boolean";
+    readonly NULL: "null";
+    readonly OBJECT: "object";
+    readonly ARRAY: "array";
+};
+export declare const DataTypeBadgeClass: Record<string, string>;
+export declare const DataTypeOptions: ({
+    label: string;
+    value: "string";
+} | {
+    label: string;
+    value: "number";
+} | {
+    label: string;
+    value: "boolean";
+} | {
+    label: string;
+    value: "null";
+} | {
+    label: string;
+    value: "object";
+} | {
+    label: string;
+    value: "array";
+})[];

package/dist/components/data-display/json-grid-viewer/utils.d.ts

@@ -0,0 +1,4 @@
+import { JsonValue } from './types';
+export declare const getDataType: (value: JsonValue) => string;
+export declare const filterTopLevelPaths: (paths: string[]) => string[];
+export declare const parseJson: (value: string) => any;

package/dist/components/data-display/lottie-animation/LottieAnimation.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+export interface LottieAnimationProps {
+    /** Lottie animation JSON data */
+    animationData: any;
+    /** Width of the animation container */
+    width?: number | string;
+    /** Height of the animation container */
+    height?: number | string;
+    /** Whether the animation should loop */
+    loop?: boolean;
+    /** Whether the animation should autoplay */
+    autoplay?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * LottieAnimation component renders Lottie animations
+ *
+ * @example
+ * ```tsx
+ * import animationData from './animation.json';
+ *
+ * <LottieAnimation
+ *   animationData={animationData}
+ *   width={200}
+ *   height={200}
+ *   loop={true}
+ *   autoplay={true}
+ * />
+ * ```
+ */
+export declare const LottieAnimation: FC<LottieAnimationProps>;

package/dist/components/data-display/permission-wrapper/PermissionWrapper.d.ts

@@ -0,0 +1,28 @@
+import { FC, ReactNode } from 'react';
+export interface PermissionWrapperProps {
+    /** Whether the user has permission to view the content */
+    hasPermission: boolean;
+    /** Content to display when user has permission */
+    children: ReactNode;
+    /** Custom title for the no permission message */
+    title?: string;
+    /** Custom subtitle for the no permission message */
+    subtitle?: string;
+    /** Custom icon for the no permission state */
+    icon?: ReactNode;
+    /** Custom CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * PermissionWrapper component that shows content only if user has permission
+ *
+ * @example
+ * ```tsx
+ * <PermissionWrapper hasPermission={user.canViewDashboard}>
+ *   <Dashboard />
+ * </PermissionWrapper>
+ * ```
+ */
+export declare const PermissionWrapper: FC<PermissionWrapperProps>;

package/dist/components/forms/file-upload-dragger/FileUploadDragger.d.ts

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+/**
+ * Context interface for global agreement draggable functionality
+ */
+export interface GlobalAgreementDraggableContext {
+    isOpenedAnotherFileUpload?: boolean;
+    setIsOpenedAnotherFileUpload?: (value: boolean) => void;
+}
+/**
+ * File upload service interface
+ */
+export interface FileUploadService {
+    uploadFileToFileServer: (formData: FormData, queryParams: string) => Promise<{
+        fileUrl: string;
+        fileName: string;
+    }>;
+    deleteFileFromFileServer: (fileName: string, queryParams: string) => Promise<void>;
+}
+/**
+ * System messages interface
+ */
+export interface SystemMessages {
+    fileSizeLimit: (size: string, unit: string) => string;
+}
+export type FileUploadDraggerProps = {
+    /** Callback to receive the uploaded file */
+    getFile: (file: any, fileName?: string) => any;
+    /** Description text to display */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: any;
+    /** Accepted file types */
+    acceptedFiles?: string;
+    /** Whether loading state is active */
+    isLoading?: boolean;
+    /** Convert file to base64 */
+    asBase64?: boolean;
+    /** Upload to file server */
+    toFileServer?: boolean;
+    /** Whether file is currently uploading */
+    fileUploading?: boolean;
+    /** Callback to set file uploading state */
+    setFileUploading?: (fileUploading: boolean) => void;
+    /** Upload to document server path */
+    uploadToDocServer?: boolean;
+    /** Unique identifier for the upload */
+    id?: string;
+    /** Allow multiple file uploads */
+    multiple?: boolean;
+    /** Get original file name */
+    getRealFileName?: boolean;
+    /** Callback when file is deleted */
+    onDelete?: () => void;
+    /** Hide the selected file display */
+    hideSelectedFile?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Translation function */
+    t?: (key: string) => string;
+    /** Toast function for notifications */
+    toast?: {
+        error: (message: string, options?: {
+            toastId: string;
+        }) => void;
+    };
+    /** File upload service */
+    fileUploadService?: FileUploadService;
+    /** System messages */
+    systemMessages?: SystemMessages;
+    /** Build query params function */
+    buildQueryParams?: (params: Record<string, string | null>) => string;
+    /** Get token function */
+    getToken?: () => string | null;
+    /** Context for global agreement draggable */
+    globalAgreementDraggableContext?: GlobalAgreementDraggableContext;
+    /** Custom click to upload text */
+    clickToUploadText?: string;
+    /** Custom drag and drop text */
+    dragAndDropText?: string;
+};
+export declare const FileUploadDragger: FC<FileUploadDraggerProps>;

package/dist/components/forms/file-upload-dragger/icons.d.ts

@@ -0,0 +1,12 @@
+import { FC, SVGProps } from 'react';
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
+    fill?: string;
+    size?: number;
+    className?: string;
+}
+export declare const TrashOutlineIcon: FC<IconProps>;
+export declare const DownloadIcon: FC<IconProps>;
+export declare const FilePdfIcon: FC<IconProps>;
+export declare const FileDescriptionIcon: FC<IconProps>;
+export declare const SpinnerIcon: FC<IconProps>;
+export {};

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

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export type NameInitialLogoProps = {
+    initials: string;
+    rounded: boolean;
+    className?: string;
+};
+/**
+ * NameInitialLogo component displays user initials in a styled container
+ *
+ * @example
+ * ```tsx
+ * <NameInitialLogo initials="JD" rounded={true} />
+ * ```
+ */
+export declare const NameInitialLogo: FC<NameInitialLogoProps>;

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

@@ -33,6 +33,8 @@ export type UserAvatarProps = {
     isFetchingUserDetails?: boolean;
     /** Optional token for authenticated image loading */
     authToken?: string;
+    /** Callback triggered when mouse enters the avatar */
+    onHover?: () => void;
 };
 /**
  * UserAvatar component for displaying user profile pictures with hover popper

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export type UserProfilePicProps = {
+    url?: string;
+    className: string;
+    username?: string;
+};
+/**
+ * UserProfilePic component displays a user's profile picture with fallback to initials
+ *
+ * @example
+ * ```tsx
+ * <UserProfilePic url="/avatar.jpg" username="John Doe" className="w-10 h-10 rounded-full" />
+ * ```
+ */
+export declare const UserProfilePic: React.FC<UserProfilePicProps>;

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

@@ -7,3 +7,7 @@ export type { StatusInfoRowProps } from './StatusInfoRow';
 export { PersonIcon } from './PersonIcon';
 export { sizeClasses, getInitials } from './constants';
 export { useDynamicPosition } from './useDynamicPosition';
+export { NameInitialLogo } from './NameInitialLogo';
+export type { NameInitialLogoProps } from './NameInitialLogo';
+export { UserProfilePic } from './UserProfilePic';
+export type { UserProfilePicProps } from './UserProfilePic';