@lax-wp/design-system 0.3.114 → 0.4.0

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

@@ -0,0 +1,40 @@
+import type { FC } from 'react';
+export interface DeleteModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onSuccessClose?: () => void;
+    sectionName?: string;
+    suffix?: string;
+    onAgreementDelete?: () => void;
+    from?: string;
+    text: string;
+    additionalText?: string;
+    title: string;
+    deleteConfirm?: () => void;
+    onDeleteConfirm?: () => void;
+    onConfirmDelete?: () => void;
+    isLoading?: boolean;
+    isMod?: boolean;
+    isBooleanButton?: boolean;
+    cancelText?: string;
+    deleteText?: string;
+    yesText?: string;
+    noText?: string;
+    removeText?: string;
+}
+/**
+ * DeleteModal component for confirming delete operations
+ *
+ * @example
+ * ```tsx
+ * <DeleteModal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Delete Item"
+ *   text="Are you sure you want to delete"
+ *   sectionName="this item"
+ *   onConfirmDelete={handleDelete}
+ * />
+ * ```
+ */
+export declare const DeleteModal: FC<DeleteModalProps>;

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/divider/Divider.d.ts

@@ -0,0 +1,21 @@
+import type { FC, ReactNode } from "react";
+/**
+ * Props for the Divider component
+ */
+export interface DividerProps {
+    /** Optional content to display in the center of the divider */
+    children?: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Divider component displays a horizontal line with optional centered content
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider>OR</Divider>
+ * <Divider className="my-4">Section</Divider>
+ * ```
+ */
+export declare const Divider: FC<DividerProps>;

package/dist/components/data-display/dynamic-data-modal/DynamicDataModal.d.ts

@@ -0,0 +1,26 @@
+import type { FC } from 'react';
+export declare const TABS: readonly ["JSON", "Grid"];
+export type TTabKey = (typeof TABS)[number];
+export interface DynamicDataModalProps {
+    isVisible: boolean;
+    onClose: () => void;
+    onChange: (value: string) => void;
+    defaultValue: string;
+    title?: string;
+    saveText?: string;
+    width?: number;
+}
+/**
+ * DynamicDataModal component for editing JSON data
+ *
+ * @example
+ * ```tsx
+ * <DynamicDataModal
+ *   isVisible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   onChange={handleChange}
+ *   defaultValue={jsonData}
+ * />
+ * ```
+ */
+export declare const DynamicDataModal: FC<DynamicDataModalProps>;

package/dist/components/data-display/dynamic-items-cell/DynamicItemsCell.d.ts

@@ -0,0 +1,50 @@
+interface DynamicItemsCellItem {
+    id?: string | number;
+    [key: string]: unknown;
+}
+/**
+ * Props for the DynamicItemsCell component
+ */
+export interface DynamicItemsCellProps<T extends DynamicItemsCellItem> {
+    /** Array of items to display */
+    items: T[];
+    /** Whether dark mode is enabled */
+    isDarkMode: boolean;
+    /** Function to extract label from item */
+    getLabel: (item: T) => string;
+    /** Function to extract color from item */
+    getColor: (item: T) => string;
+    /** Function to extract unique ID from item */
+    getId?: (item: T) => string | number;
+    /** Color for the "more" tag */
+    moreTagColor?: string;
+    /** Whether to use hash color generation */
+    useHashColor?: boolean;
+    /** Tooltip placement */
+    tooltipPlacement?: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    /** Additional CSS classes */
+    className?: string;
+    /** Container width for calculating visible items */
+    containerWidth?: number;
+}
+/**
+ * DynamicItemsCell component displays a list of tags that automatically
+ * truncates based on container width and shows overflow count
+ *
+ * @example
+ * ```tsx
+ * <DynamicItemsCell
+ *   items={[{ id: 1, name: "Tag 1", color: "blue" }, { id: 2, name: "Tag 2", color: "green" }]}
+ *   isDarkMode={false}
+ *   getLabel={(item) => item.name}
+ *   getColor={(item) => item.color}
+ *   containerWidth={300}
+ * />
+ * ```
+ */
+declare const DynamicItemsCellComponent: {
+    <T extends DynamicItemsCellItem>({ items, isDarkMode, getLabel, getColor, getId, moreTagColor, useHashColor, tooltipPlacement, className, containerWidth, }: DynamicItemsCellProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DynamicItemsCell: typeof DynamicItemsCellComponent;
+export {};

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

@@ -0,0 +1,5 @@
+interface EmptyEventProps {
+    size?: number;
+}
+export declare const EmptyEvent: ({ size }?: EmptyEventProps) => import("react/jsx-runtime").JSX.Element;
+export type { EmptyEventProps };

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

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+export interface NoDataFoundWidgetsProps {
+    /** Widget type to determine which illustration to show */
+    widgetType?: string;
+    /** Custom CSS class name */
+    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * NoDataFoundWidgets component displays an empty state for various widget types
+ *
+ * @example
+ * ```tsx
+ * <NoDataFoundWidgets widgetType="BAR_CHART" />
+ * <NoDataFoundWidgets widgetType="PIE_CHART" />
+ * <NoDataFoundWidgets widgetType="TABLE" />
+ * ```
+ */
+export declare const NoDataFoundWidgets: FC<NoDataFoundWidgetsProps>;

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

@@ -0,0 +1,33 @@
+import type { FC, ReactNode } from 'react';
+export interface PageNotFoundProps {
+    /** Custom icon to display */
+    icon?: 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/empty-widget/EmptyBarChartData.d.ts

@@ -0,0 +1 @@
+export declare const EmptyBarChartData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyCardListChartData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyContentChartData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyCountWidgetData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyDonutChartData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyPieChatData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyTableWidgetData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const EmptyTimelineChartData: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+export * from './EmptyBarChartData';
+export * from './EmptyCountWidgetData';
+export * from './EmptyCardChartData';
+export * from './EmptyPieChatData';
+export * from './EmptyDonutChartData';
+export * from './EmptyTimelineChartData';
+export * from './EmptyTableWidgetData';
+export * from './EmptyContentChart';

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

@@ -0,0 +1,11 @@
+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';
+export { EmptyEvent } from './EmptyEvent';
+export type { EmptyEventProps } from './EmptyEvent';
+export { NoDataFoundWidgets } from './NoDataFoundWidgets';
+export type { NoDataFoundWidgetsProps } from './NoDataFoundWidgets';
+export { EmptyBarChartData, EmptyCardListChartData, EmptyContentChartData, EmptyCountWidgetData, EmptyDonutChartData, EmptyPieChatData, EmptyTableWidgetData, EmptyTimelineChartData, } from './empty-widget';

package/dist/components/data-display/error-modal/ErrorModal.d.ts

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+export interface ErrorModalProps {
+    visible: boolean;
+    onClose: () => void;
+    content?: string;
+    title?: string;
+    okText?: string;
+}
+/**
+ * ErrorModal component for displaying error messages
+ *
+ * @example
+ * ```tsx
+ * <ErrorModal
+ *   visible={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Error"
+ *   content="An error occurred while processing your request."
+ * />
+ * ```
+ */
+export declare const ErrorModal: FC<ErrorModalProps>;

package/dist/components/data-display/floating-element-wrapper/floating-element-dragger.d.ts

@@ -0,0 +1 @@
+export declare const FloatingElementWrapper: ({ children, showAsModal, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/in-progress/InProgress.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+export interface InProgressProps {
+    containerClass?: string;
+}
+/**
+ * InProgress component for displaying a coming soon message
+ *
+ * @example
+ * ```tsx
+ * <InProgress containerClass="custom-class" />
+ * ```
+ */
+export declare const InProgress: FC<InProgressProps>;

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[];
+};