@lax-wp/design-system 0.3.114 → 0.4.0

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/label/Label.d.ts

@@ -0,0 +1,10 @@
+export type LabelType = {
+    id?: string;
+    label: string;
+    color: string;
+};
+type LabelProps = {
+    labels?: (string | LabelType)[];
+};
+export declare const Label: React.FC<LabelProps>;
+export {};

package/dist/components/data-display/label-value/LabelValue.d.ts

@@ -0,0 +1,139 @@
+import React, { type ReactNode } from 'react';
+/**
+ * Available label value size options
+ */
+export type LabelValueSize = 'small' | 'medium' | 'large';
+/**
+ * Available highlight color options
+ */
+export type HighlightColor = 'success' | 'warning' | 'error' | 'info';
+/**
+ * Theme mode for styling
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Upload handler function type
+ */
+export type UploadHandler = (file: File) => void | Promise<void>;
+/**
+ * Master data item interface
+ */
+export interface MasterDataItem {
+    is_master_data?: boolean;
+    reference?: string;
+    group_technical_name?: string;
+    currency_code?: string;
+}
+/**
+ * Risk details interface
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    [key: string]: any;
+}
+/**
+ * Master data modal component props
+ */
+export interface MasterDataModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    masterdataInfo: any;
+}
+/**
+ * Risk details card component props
+ * Using generic to allow custom risk detail types from consumers
+ */
+export interface RiskDetailsCardProps<TRisk = any> {
+    riskDetails: TRisk;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the LabelValue component
+ */
+export interface LabelValueProps {
+    /** The id of the label value */
+    id?: string;
+    /** The label text to display */
+    label?: string;
+    /** The value to display */
+    value?: string | number | boolean | ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Data type for formatting */
+    type?: 'string' | 'number' | 'boolean' | 'currency' | 'date' | 'datetime' | 'percentage' | 'url';
+    /** Tags to display with the label */
+    tags?: Array<{
+        label: string;
+        color?: string;
+        value?: string;
+    }>;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Master data item information */
+    items?: MasterDataItem;
+    /** Whether the value has been modified */
+    isModified?: boolean;
+    /** Whether the value has been changed */
+    isChanged?: boolean;
+    /** Size variant */
+    size?: LabelValueSize;
+    /** Whether the value is highlighted */
+    isHighlighted?: boolean;
+    /** Deleted value for diff display */
+    deletedValue?: string;
+    /** Highlight color for changes */
+    highlightColor?: HighlightColor;
+    /** Whether search is active */
+    isSearchActive?: boolean;
+    /** Whether to show original boolean value */
+    originalValue?: boolean;
+    /** Whether to show diff between old and new values */
+    showDiff?: boolean;
+    /** Whether this is a live field (shows bolt icon) */
+    isLiveField?: boolean;
+    /** Delta change value for currency fields */
+    deltaChange?: number;
+    /** Theme mode */
+    theme?: ThemeMode;
+    /** Upload handler function */
+    onUpload?: UploadHandler;
+    /** Whether the component accepts file uploads */
+    acceptsUpload?: boolean;
+    /** Master data modal component */
+    MasterDataModal?: React.ComponentType<MasterDataModalProps>;
+    /** Risk analysis data - accepts any risk object extending RiskDetails */
+    riskDetails?: RiskDetails | any;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component - accepts components with custom risk types */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;
+    /** Custom aria-label for accessibility */
+    'aria-label'?: string;
+}
+/**
+ * LabelValue component displays a label-value pair with various formatting options
+ *
+ * @example
+ * ```tsx
+ * <LabelValue
+ *   label="Status"
+ *   value="Active"
+ *   type="string"
+ *   size="medium"
+ * />
+ * <LabelValue
+ *   label="Price"
+ *   value={99.99}
+ *   type="currency"
+ *   items={{ currency_code: 'USD' }}
+ * />
+ * <LabelValue
+ *   label="Upload File"
+ *   acceptsUpload
+ *   onUpload={handleUpload}
+ * />
+ * ```
+ */
+export declare const LabelValue: React.ForwardRefExoticComponent<LabelValueProps & React.RefAttributes<HTMLDivElement>>;

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/modal/Modal.d.ts

@@ -0,0 +1,41 @@
+import { type ModalProps as AntDModalProps } from "antd";
+import type { ReactNode } from "react";
+/**
+ * Custom props extending Ant Design Modal props
+ */
+export interface ModalProps extends AntDModalProps {
+    /** Whether to show only the body content without header */
+    onlyBody?: boolean;
+    /** Whether to add spacing to the body */
+    bodySpacing?: boolean;
+    /** Container element ID for portal rendering */
+    parentContainer?: string;
+    /** Custom header content on the right side */
+    headerRightContent?: ReactNode;
+    /** Whether to add a line after the header */
+    addLineAfterHeader?: boolean;
+    /** Custom z-index for the modal */
+    zIndex?: number;
+    /** Whether to render as a form */
+    asForm?: boolean;
+    /** Form submit handler */
+    onSubmit?: () => void;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Whether to remove padding */
+    noPadding?: boolean;
+    /** Close handler */
+    onClose?: () => void;
+}
+/**
+ * Modal component for displaying overlay content
+ *
+ * @example
+ * ```tsx
+ * <Modal open={isOpen} onCancel={() => setIsOpen(false)} title="Example Modal">
+ *   <p>Modal content goes here</p>
+ * </Modal>
+ * ```
+ */
+export declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/components/data-display/pdf-viewer/PdfViewer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Props for the PdfViewer component
+ */
+export interface PdfViewerProps {
+    /** URL of the PDF file to display */
+    pdfUrl: string;
+    /** Width of the viewer */
+    width?: string | number;
+    /** Height of the viewer */
+    height?: string | number;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for the iframe */
+    iframeClassName?: string;
+    /** Title for the PDF viewer iframe */
+    title?: string;
+    /** Whether to show loading state */
+    showLoading?: boolean;
+    /** Custom loading component */
+    loadingComponent?: React.ReactNode;
+    /** Custom error component */
+    errorComponent?: React.ReactNode;
+    /** Callback when PDF fails to load */
+    onError?: () => void;
+    /** Callback when PDF loads successfully */
+    onLoad?: () => void;
+    /** Whether to allow fullscreen */
+    allowFullScreen?: boolean;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+}
+/**
+ * PdfViewer component displays PDF documents in an embedded iframe
+ *
+ * @example
+ * ```tsx
+ * <PdfViewer
+ *   pdfUrl="/documents/report.pdf"
+ *   width="100%"
+ *   height="600px"
+ *   title="Monthly Report"
+ * />
+ * ```
+ */
+export declare const PdfViewer: import("react").ForwardRefExoticComponent<PdfViewerProps & import("react").RefAttributes<HTMLDivElement>>;

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/data-display/popper/Popper.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Available placement options for the Popper
+ */
+export type PopperPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+/**
+ * Props for the Popper component
+ */
+export interface PopperProps {
+    /** The trigger element (button content) */
+    children: React.ReactNode;
+    /** The popper content to display */
+    component: React.ReactNode;
+    /** Placement position relative to trigger */
+    placement?: PopperPlacement;
+    /** Whether the popper is open */
+    isOpen: boolean;
+    /** Function to toggle the popper open/closed state */
+    toggleMenu?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Portal container ID (defaults to document.body) */
+    parentContainer?: string;
+    /** Whether to remove default spacing on trigger */
+    noSpacing?: boolean;
+    /** Additional CSS classes for the trigger button */
+    triggerClassName?: string;
+    /** Additional CSS classes for the popper container */
+    containerClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to show arrow pointing to trigger */
+    showArrow?: boolean;
+    /** Custom offset from trigger element */
+    offset?: number;
+    /** Whether to disable outside click handling */
+    disableOutsideClick?: boolean;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+    /** Whether trigger is disabled */
+    disabled?: boolean;
+}
+/**
+ * Popper component provides positioned floating content relative to a trigger element
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Popper
+ *   isOpen={isOpen}
+ *   toggleMenu={() => setIsOpen(!isOpen)}
+ *   placement="bottom-start"
+ *   component={<MenuContent />}
+ * >
+ *   <button>Open Menu</button>
+ * </Popper>
+ * ```
+ */
+export declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/progress-bar/CircularProgressBar.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+export interface CircularProgressBarProps {
+    /** Target value to animate to */
+    value: number;
+    /** Maximum value for the progress */
+    max?: number;
+    /** Size of the circular progress bar in pixels */
+    size?: number;
+    /** Width of the stroke in pixels */
+    strokeWidth?: number;
+    /** Color of the progress arc */
+    color?: string;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Callback to receive the animated display value during animation */
+    setAnimatedDisplayValue?: (value: number) => void;
+    /** Children to render in the center of the circle */
+    children: ReactNode;
+}
+/**
+ * CircularProgressBar component that animates from 0 to a target value
+ */
+export declare const CircularProgressBar: React.FC<CircularProgressBarProps>;

package/dist/components/data-display/progress-bar/LinearProgressBar.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+export interface LinearProgressBarProps {
+    /** Target value to animate to (0-100 by default, or based on max) */
+    stopAt?: number;
+    /** Maximum value for the progress bar */
+    max?: number;
+    /** Height of the progress bar in pixels */
+    height?: number;
+    /** Single color for the progress bar */
+    color?: string;
+    /** Start color for gradient (requires toColor) */
+    fromColor?: string;
+    /** End color for gradient (requires fromColor) */
+    toColor?: string;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Callback to receive the animated display value during animation */
+    setAnimatedDisplayValue?: (value: number) => void;
+    /** Children to render below the progress bar */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * LinearProgressBar component that animates from 0 to a target value
+ */
+export declare const LinearProgressBar: React.FC<LinearProgressBarProps>;

package/dist/components/data-display/progress-bar/index.d.ts

@@ -0,0 +1,4 @@
+export { LinearProgressBar } from './LinearProgressBar';
+export type { LinearProgressBarProps } from './LinearProgressBar';
+export { CircularProgressBar } from './CircularProgressBar';
+export type { CircularProgressBarProps } from './CircularProgressBar';

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

@@ -0,0 +1,48 @@
+/**
+ * Sidebar placement options
+ */
+export type ResizableSidebarPlacement = "left" | "right";
+/**
+ * Props for the ResizableSidebar component
+ */
+export interface ResizableSidebarProps {
+    /** Whether the sidebar is open */
+    isOpen: boolean;
+    /** Content to display in the sidebar */
+    children: React.ReactNode;
+    /** Whether to display in full screen mode */
+    fullScreen?: boolean;
+    /** Callback when drag/resize ends */
+    onDragEnd?: (() => void) | null;
+    /** Callback when resize occurs */
+    onResize?: (width: number) => void;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Default size of the sidebar */
+    defaultSize?: string;
+    /** Minimum width of the sidebar */
+    minWidth?: number;
+    /** Placement of the sidebar */
+    placement?: ResizableSidebarPlacement;
+    /** Parent container ID for portal rendering */
+    parentContainer?: string;
+    /** Header content */
+    header?: React.ReactNode;
+    /** Unique ID for the sidebar */
+    id?: string;
+    /** Additional CSS classes for the container */
+    containerClassName?: string;
+    /** Whether to ignore parent container height */
+    ignoreParentContainerHeight?: boolean;
+    /** Custom height */
+    height?: string;
+    /** Whether the main sidebar is expanded (affects max width calculation) */
+    isMainSidebarExpanded?: boolean;
+    /** Width of the main sidebar when expanded */
+    mainSidebarExpandedWidth?: number;
+    /** Width of the main sidebar when collapsed */
+    mainSidebarCollapsedWidth?: number;
+    /** Height offset for navbar */
+    navbarHeight?: number;
+}
+export declare const ResizableSidebar: import("react").ForwardRefExoticComponent<ResizableSidebarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+/**
+ * Props for the Skeleton component
+ */
+export interface SkeletonProps {
+    /** Whether to show animation */
+    active?: boolean;
+}
+/**
+ * Skeleton component displays a placeholder loading state
+ *
+ * @example
+ * ```tsx
+ * <Skeleton />
+ * <Skeleton active={false} />
+ * ```
+ */
+export declare const Skeleton: FC<SkeletonProps>;

package/dist/components/data-display/status-color-mapping/StatusColorMapping.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Available status color options for the StatusColorMapping component
+ */
+export type StatusColor = "blue" | "green" | "yellow" | "orange" | "red" | "navy" | "grey" | "purple" | "teal" | "peach";
+/**
+ * Props for the StatusColorMapping component
+ */
+export interface StatusColorMappingProps {
+    /** The status color variant to apply */
+    status?: StatusColor;
+    /** The text content to display */
+    children: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to use small size variant */
+    size?: "small" | "medium" | "large";
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+}
+/**
+ * StatusColorMapping component displays text with status-based color styling
+ *
+ * @example
+ * ```tsx
+ * <StatusColorMapping status="green">Active</StatusColorMapping>
+ * <StatusColorMapping status="red" size="small">Error</StatusColorMapping>
+ * ```
+ */
+export declare const StatusColorMapping: import("react").ForwardRefExoticComponent<StatusColorMappingProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/tag/Tag.d.ts

@@ -0,0 +1,53 @@
+import { COLORS } from "../../../constants/colors";
+/**
+ * Available tag size options
+ */
+export type TagSize = "xs" | "sm" | "md" | "lg";
+/**
+ * Available color names for tags
+ */
+export type TagColor = keyof typeof COLORS;
+/**
+ * Theme mode for styling
+ */
+export type ThemeMode = "light" | "dark";
+/**
+ * Upload handler function type
+ */
+export type UploadHandler = (file: File) => void | Promise<void>;
+/**
+ * Props for the Tag component
+ */
+export interface TagProps {
+    /** The text content to display */
+    label: string;
+    /** Color name or hex color value */
+    color?: TagColor | string;
+    /** Size variant */
+    size?: TagSize;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the tag */
+    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Mouse down handler */
+    onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Maximum character length before truncation */
+    truncate?: number;
+    /** Whether to use hash color generation for string colors */
+    isHashColor?: boolean;
+    /** Icon to display before the label */
+    icon?: React.ReactNode;
+    /** Whether the tag is removable (shows close button) */
+    removable?: boolean;
+    /** Handler for remove button click */
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Upload handler function */
+    onUpload?: UploadHandler;
+    /** Whether the tag accepts file uploads */
+    acceptsUpload?: boolean;
+    /** Theme mode for styling */
+    theme?: ThemeMode;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+}
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLDivElement>>;