@lax-wp/design-system 0.2.1 → 0.2.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",

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

@@ -1,79 +0,0 @@
-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/badge/Badge.d.ts

@@ -1,44 +0,0 @@
-/**
- * Available badge status options
- */
-export type BadgeStatus = "default" | "primary" | "warning" | "error" | "neutral" | "success" | "info";
-/**
- * Badge appearance variants
- */
-export type BadgeAppearance = "filled" | "outline";
-/**
- * Badge size variants
- */
-export type BadgeSize = "sm" | "md" | "lg";
-/**
- * Props for the Badge component
- */
-export interface BadgeProps {
-    /** The badge status/color variant */
-    status?: BadgeStatus;
-    /** The text content to display */
-    children: string;
-    /** Visual appearance style */
-    appearance?: BadgeAppearance;
-    /** Size variant */
-    size?: BadgeSize;
-    /** Additional CSS classes for the wrapper */
-    className?: string;
-    /** Whether to use rounded pill shape */
-    isRounded?: boolean;
-    /** Whether to capitalize the text */
-    capitalize?: boolean;
-    /** Custom aria-label for accessibility */
-    "aria-label"?: string;
-}
-/**
- * Badge component displays small status indicators or labels
- *
- * @example
- * ```tsx
- * <Badge status="success">Active</Badge>
- * <Badge status="error" appearance="filled">Error</Badge>
- * <Badge status="warning" size="sm" isRounded>Warning</Badge>
- * ```
- */
-export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/data-display/banner/Banner.d.ts

@@ -1,41 +0,0 @@
-/**
- * Available banner status options
- */
-export type BannerStatus = "success" | "error" | "warning" | "info" | "archived" | "canceled" | "queued" | "paused" | "awaiting_action" | "skipped" | "pending";
-/**
- * Props for the Banner component
- */
-export interface BannerProps {
-    /** The banner status/color variant */
-    status: BannerStatus;
-    /** The main content to display */
-    children: React.ReactNode;
-    /** Additional content to display on the right side */
-    additionalChildren?: React.ReactNode;
-    /** Component to render when expanded (for error status) */
-    ExpandedComponent?: React.ComponentType<{
-        children: React.ReactNode;
-    }>;
-    /** Whether the banner is expandable */
-    expandable?: boolean;
-    /** Custom icon to override default status icon */
-    icon?: React.ReactNode;
-    /** Additional CSS classes for the wrapper */
-    className?: string;
-    /** Callback when banner is clicked (if expandable) */
-    onClick?: () => void;
-    /** Custom aria-label for accessibility */
-    "aria-label"?: string;
-}
-/**
- * Banner component displays important information with status-based styling
- *
- * @example
- * ```tsx
- * <Banner status="success">Operation completed successfully</Banner>
- * <Banner status="error" expandable ExpandedComponent={ErrorDetails}>
- *   Error occurred
- * </Banner>
- * ```
- */
-export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/code-editor/CodeEditor.d.ts

@@ -1,4 +0,0 @@
-import { type FC } from 'react';
-import { type CodeEditorProps } from '../../../types';
-export type TTabKey = 'JSON' | 'Grid';
-export declare const CodeEditor: FC<CodeEditorProps>;

package/dist/components/data-display/code-editor/JsonGrid.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface JsonGridProps {
-    isFullScreen: boolean;
-    allExpanded: boolean;
-    toggleAll: () => void;
-    isEditMode: boolean;
-    isDarkMode: boolean;
-    style: React.CSSProperties;
-    value: string;
-    onChange?: (value: string) => void;
-    setIsAddKeyModalOpen: (open: boolean) => void;
-    isAddKeyModalOpen: boolean;
-}
-export declare const JsonGrid: React.FC<JsonGridProps>;

package/dist/components/data-display/code-editor/Tabs.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface TabsProps<T extends string> {
-    variant?: 'default' | 'switch';
-    tabs: T[];
-    activeTab: T;
-    onTabClick: (tab: T) => void;
-    size?: 'sm' | 'md' | 'lg';
-    tabIcons?: Partial<Record<T, React.ReactNode>>;
-    height?: string;
-    className?: string;
-}
-export declare const Tabs: <T extends string>({ variant, tabs, activeTab, onTabClick, size, tabIcons, height, className }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,64 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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/pdf-viewer/PdfViewer.d.ts

@@ -1,45 +0,0 @@
-/**
- * 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/popper/Popper.d.ts

@@ -1,57 +0,0 @@
-/**
- * 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/resizable-sidebar/ResizableSidebar.d.ts

@@ -1,54 +0,0 @@
-/**
- * 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/status-color-mapping/StatusColorMapping.d.ts

@@ -1,29 +0,0 @@
-/**
- * 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>>;