@lax-wp/design-system 0.1.8 → 0.2.1

package/dist/components/buttons/option-button/OptionButton.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode, type MouseEvent } from "react";
+/**
+ * Available button sizes
+ */
+export type OptionButtonSize = "small" | "medium" | "large";
+/**
+ * Available button variants
+ */
+export type OptionButtonVariant = "default" | "highlight" | "destructive";
+/**
+ * Props for the OptionButton component
+ */
+export interface OptionButtonProps {
+    /** Button text content */
+    text: string;
+    /** Click handler for the button */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button should be hidden */
+    hidden?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Button size variant */
+    size?: OptionButtonSize;
+    /** Button visual variant */
+    variant?: OptionButtonVariant;
+    /** Icon to display before the text */
+    icon?: ReactNode;
+    /** Icon to display after the text (trailing) */
+    trailingIcon?: ReactNode;
+    /** Whether to hide hover effects */
+    hideHoverEffect?: boolean;
+    /** Callback when the button is closed */
+    onClose?: () => void;
+    /** Whether to stop event propagation on click */
+    stopPropagation?: boolean;
+    /** Toggle functionality props */
+    onToggle?: (checked: boolean) => void;
+    /** Whether the toggle is checked (if onToggle is provided) */
+    checked?: boolean;
+    /** Text to highlight within the button text */
+    highlightText?: string;
+    /** Whether to truncate text */
+    truncateText?: boolean;
+    /** Whether to show a checkmark tick */
+    showTick?: boolean;
+    /** Custom width for the text container */
+    textWidth?: string;
+    /** Tooltip text to display */
+    tooltip?: string;
+    /** Suffix badge content */
+    suffixBadge?: ReactNode;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+    /** Test ID for testing purposes */
+    "data-testid"?: string;
+    /** Whether the button should take full width */
+    fullWidth?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Loading state */
+    loading?: boolean;
+}
+/**
+ * OptionButton component provides a flexible button for lists, menus, and option selections
+ *
+ * @example
+ * ```tsx
+ * <OptionButton
+ *   text="Save Document"
+ *   icon={<SaveIcon />}
+ *   onClick={() => console.log('Save clicked')}
+ *   size="medium"
+ *   variant="default"
+ * />
+ * ```
+ */
+export declare const OptionButton: import("react").ForwardRefExoticComponent<OptionButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/data-display/diff-viewer/DiffViewer.d.ts

@@ -0,0 +1,64 @@
+import { type Change } from "diff";
+/**
+ * Available diff types for comparison
+ */
+export type DiffType = "words" | "lines" | "chars";
+/**
+ * Theme variants for diff display
+ */
+export type DiffTheme = "default" | "minimal" | "github";
+/**
+ * Props for the DiffViewer component
+ */
+export interface DiffViewerProps {
+    /** The original/old text content */
+    oldText: string;
+    /** The new/updated text content */
+    newText: string;
+    /** Type of diff comparison to perform */
+    diffType?: DiffType;
+    /** Visual theme for the diff display */
+    theme?: DiffTheme;
+    /** Whether to show line numbers (for line diffs) */
+    showLineNumbers?: boolean;
+    /** Whether to enable word wrapping */
+    wordWrap?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for diff segments */
+    segmentClassName?: string;
+    /** Custom styles for added content */
+    addedClassName?: string;
+    /** Custom styles for removed content */
+    removedClassName?: string;
+    /** Custom styles for unchanged content */
+    unchangedClassName?: string;
+    /** Whether to ignore case differences */
+    ignoreCase?: boolean;
+    /** Whether to ignore whitespace (for line diffs only) */
+    ignoreWhitespace?: boolean;
+    /** Maximum width for the diff container */
+    maxWidth?: string | number;
+    /** Custom aria-label for accessibility */
+    "aria-label"?: string;
+    /** Callback when diff changes are calculated */
+    onDiffCalculated?: (changes: Change[]) => void;
+}
+/**
+ * DiffViewer component displays text differences with visual highlighting
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   oldText="Hello world"
+ *   newText="Hello beautiful world"
+ *   diffType="words"
+ *   theme="github"
+ * />
+ * ```
+ */
+export declare const DiffViewer: import("react").ForwardRefExoticComponent<DiffViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Legacy export for backward compatibility
+ */
+export declare const InlineDiffHighlighter: import("react").ForwardRefExoticComponent<DiffViewerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,121 @@
+import React 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;
+    [key: string]: any;
+}
+/**
+ * Master data modal component props
+ */
+export interface MasterDataModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    masterdataInfo: any;
+}
+/**
+ * Props for the LabelValue component
+ */
+export interface LabelValueProps {
+    /** The label text to display */
+    label?: string;
+    /** The value to display */
+    value?: string | number | boolean;
+    /** 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;
+    /** 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 */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** 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/modal/Modal.d.ts

@@ -0,0 +1,77 @@
+import { type ReactNode } from "react";
+/**
+ * Modal size variants
+ */
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+/**
+ * Modal appearance variants
+ */
+export type ModalAppearance = "default" | "centered" | "fullscreen";
+/**
+ * Props for the Modal component
+ */
+export interface ModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Modal content */
+    children: ReactNode;
+    /** Modal title */
+    title?: string | ReactNode;
+    /** Whether to show the backdrop mask */
+    mask?: boolean;
+    /** Whether to show only the body content without header */
+    onlyBody?: boolean;
+    /** Whether to add spacing to the body */
+    bodySpacing?: boolean;
+    /** Custom header content on the right side */
+    headerRightContent?: ReactNode;
+    /** Container element ID for portal rendering */
+    parentContainer?: string;
+    /** 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;
+    /** Cancel handler */
+    onCancel?: () => void;
+    /** Upload handler function */
+    onUpload?: (files: FileList | null) => void;
+    /** Modal size */
+    size?: ModalSize;
+    /** Modal appearance */
+    appearance?: ModalAppearance;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom width */
+    width?: number | string;
+    /** Custom height */
+    height?: number | string;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Whether the modal is closable by clicking outside */
+    closable?: boolean;
+    /** Whether to center the modal */
+    centered?: boolean;
+    /** Custom styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Modal component for displaying overlay content
+ *
+ * @example
+ * ```tsx
+ * <Modal open={isOpen} onClose={() => setIsOpen(false)} title="Example Modal">
+ *   <p>Modal content goes here</p>
+ * </Modal>
+ * ```
+ */
+export declare const Modal: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,54 @@
+/**
+ * Sidebar placement options
+ */
+export type ResizableSidebarPlacement = "left" | "right";
+/**
+ * Theme options for the sidebar
+ */
+export type ResizableSidebarTheme = "light" | "dark";
+/**
+ * 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;
+    /** Theme for styling */
+    theme?: ResizableSidebarTheme;
+}
+export declare const ResizableSidebar: import("react").ForwardRefExoticComponent<ResizableSidebarProps & import("react").RefAttributes<HTMLDivElement>>;

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>>;

package/dist/components/floating-bar/FloatingBar.d.ts

@@ -0,0 +1,147 @@
+import { type ReactNode, type MouseEvent } from "react";
+/**
+ * Available floating bar sizes
+ */
+export type FloatingBarSize = "small" | "medium" | "large";
+/**
+ * Available floating bar positions
+ */
+export type FloatingBarPosition = "top" | "bottom";
+/**
+ * Available floating bar themes
+ */
+export type FloatingBarTheme = "primary" | "dark" | "light";
+/**
+ * Configuration for action buttons in the floating bar
+ */
+export interface FloatingBarActionConfig {
+    /** Unique identifier for the action */
+    id: string;
+    /** Button label text */
+    label?: string;
+    /** Icon element to display */
+    icon: ReactNode;
+    /** Click handler for the action */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Icon for dropdown mode */
+    dropdownIcon?: ReactNode;
+    /** Whether the action is visible */
+    visible?: boolean;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Whether to hide the label text */
+    hideLabel?: boolean;
+    /** Action type */
+    type?: "button" | "dropdown";
+    /** Dropdown menu items */
+    dropdownItems?: Array<{
+        label: ReactNode;
+        key: string;
+        disabled?: boolean;
+        onClick?: () => void;
+    }>;
+    /** Custom CSS classes */
+    className?: string;
+    /** Test ID for testing */
+    "data-testid"?: string;
+}
+/**
+ * Configuration for the delete action
+ */
+export interface FloatingBarDeleteConfig {
+    /** Delete button label */
+    label?: string;
+    /** Whether delete is disabled */
+    disabled?: boolean;
+    /** Delete action handler */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Custom icon for delete */
+    icon?: ReactNode;
+    /** Delete confirmation required */
+    confirmRequired?: boolean;
+    /** Confirmation message */
+    confirmMessage?: string;
+}
+/**
+ * Props for the FloatingBar component
+ */
+export interface FloatingBarProps {
+    /** Whether the floating bar is visible */
+    show?: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Array of action configurations */
+    actionItems: FloatingBarActionConfig[];
+    /** Number of selected items */
+    selectedItemsCount?: number;
+    /** Delete action configuration */
+    deleteConfig?: FloatingBarDeleteConfig;
+    /** Whether to show action background */
+    showActionBackground?: boolean;
+    /** Floating bar size */
+    size?: FloatingBarSize;
+    /** Floating bar position */
+    position?: FloatingBarPosition;
+    /** Floating bar theme */
+    theme?: FloatingBarTheme;
+    /** Custom width */
+    width?: string | number;
+    /** Custom CSS classes */
+    className?: string;
+    /** Custom selected text */
+    selectedText?: string;
+    /** Custom actions text for collapsed mode */
+    actionsText?: string;
+    /** Whether to auto-hide on small screens */
+    autoHide?: boolean;
+    /** Maximum items before collapsing */
+    maxVisibleItems?: number;
+    /** Animation duration in seconds */
+    animationDuration?: number;
+    /** Custom aria-label */
+    "aria-label"?: string;
+    /** Test ID for testing */
+    "data-testid"?: string;
+    /** Error state */
+    error?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    errorMessage?: string;
+    /** Callback when actions overflow */
+    onOverflow?: (isOverflowing: boolean) => void;
+}
+/**
+ * FloatingBar component provides a floating action bar for bulk operations
+ *
+ * @example
+ * ```tsx
+ * <FloatingBar
+ *   show={selectedItems.length > 0}
+ *   onClose={() => setSelectedItems([])}
+ *   selectedItemsCount={selectedItems.length}
+ *   actionItems={[
+ *     {
+ *       id: "edit",
+ *       label: "Edit",
+ *       icon: <EditIcon />,
+ *       onClick: handleEdit,
+ *     },
+ *     {
+ *       id: "archive",
+ *       label: "Archive",
+ *       icon: <ArchiveIcon />,
+ *       onClick: handleArchive,
+ *     },
+ *   ]}
+ *   deleteConfig={{
+ *     label: "Delete",
+ *     onClick: handleDelete,
+ *     confirmRequired: true,
+ *   }}
+ * />
+ * ```
+ */
+export declare const FloatingBar: import("react").ForwardRefExoticComponent<FloatingBarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/currency-input/currency.constant.d.ts

@@ -1,6 +1,12 @@
+/**
+ * Available currencies for the CurrencyInputField component
+ */
 export declare const CURRENCIES: {
     value: string;
     label: string;
     symbol: string;
 }[];
+/**
+ * Currency symbols mapping for display purposes
+ */
 export declare const CURRENCY_SYMBOLS: Record<string, string>;

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode } from "react";
+/**
+ * File upload size options
+ */
+export type FileUploadSize = "small" | "medium" | "large";
+/**
+ * File upload variant options
+ */
+export type FileUploadVariant = "primary" | "secondary";
+/**
+ * Props for the FileUpload component
+ */
+export interface FileUploadProps {
+    /** Unique identifier for the file upload */
+    id?: string;
+    /** Callback function called when file is selected */
+    onFileSelect: (file: File | File[] | null, fileName?: string) => void;
+    /** Custom upload handler function */
+    onUpload?: (file: File | File[]) => Promise<void>;
+    /** Description text to display */
+    description?: string;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the upload is disabled */
+    disabled?: boolean;
+    /** Default file to display */
+    defaultFile?: File | null;
+    /** Accepted file types (e.g., ".pdf,.doc,.docx") */
+    acceptedFiles?: string;
+    /** Whether the upload is in loading state */
+    isLoading?: boolean;
+    /** Whether to convert file to base64 */
+    asBase64?: boolean;
+    /** Whether to allow multiple file selection */
+    multiple?: boolean;
+    /** Whether to hide the selected file display */
+    hideSelectedFile?: boolean;
+    /** Callback when file is deleted */
+    onDelete?: () => void;
+    /** Maximum file size in bytes (default: 200MB) */
+    maxSize?: number;
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Additional CSS classes for the upload area */
+    uploadClassName?: string;
+    /** Size variant for the upload area */
+    size?: FileUploadSize;
+    /** Visual variant for the upload area */
+    variant?: FileUploadVariant;
+    /** Custom upload icon */
+    uploadIcon?: ReactNode;
+    /** Custom delete icon */
+    deleteIcon?: ReactNode;
+    /** Custom file type icons */
+    fileTypeIcons?: {
+        pdf?: ReactNode;
+        default?: ReactNode;
+    };
+    /** Whether to show file size */
+    showFileSize?: boolean;
+    /** Whether to show upload progress */
+    showProgress?: boolean;
+    /** Upload progress percentage */
+    progress?: number;
+}
+/**
+ * A highly customizable file upload component with drag-and-drop support.
+ * Features multiple sizes, variants, file type detection, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <FileUpload
+ *   id="document-upload"
+ *   onFileSelect={(file) => console.log('File selected:', file)}
+ *   description="Upload your document here"
+ *   acceptedFiles=".pdf,.doc,.docx"
+ *   maxSize={10 * 1024 * 1024} // 10MB
+ * />
+ * ```
+ */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<HTMLDivElement>>;