@lax-wp/design-system 0.3.42 → 0.3.43

package/dist/components/button/IconButton.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from 'react';
+interface IconButtonProps {
+    children: ReactNode;
+    className?: string;
+    onClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    variant?: 'default' | 'secondary' | 'native' | 'ghost';
+    disabled?: boolean;
+    tooltip?: string;
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    noborder?: boolean;
+    id?: string;
+}
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

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

@@ -1,3 +1,23 @@
+import { type ReactNode } from "react";
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface for risk analysis integration
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
 /**
  * Props for the CurrencyInputField component
  */
@@ -6,56 +26,78 @@ export interface CurrencyInputFieldProps {
     id: string;
     /** Label text to display above the input */
     label?: string;
-    /** Current value of the input (number) */
-    value?: number | null;
-    /** Default value for the input */
-    defaultValue?: number | null;
+    /** Current value of the input (string for compatibility) */
+    value: string;
     /** Callback function called when value changes */
-    onChange: (value: number | null, currencyCode: string) => void;
-    /** Whether the input is disabled */
-    disabled?: boolean;
+    onChange: (data: any, currencyCode?: string) => void;
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Default value for the input */
+    defaultValue?: string;
     /** Whether the field is required */
     required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether to use simple mode (inline label style) */
+    simpleMode?: boolean;
+    /** Additional CSS classes for the input field */
+    inputFieldClassName?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: any;
+    /** Whether to allow multi-currency selection with dropdown */
+    allowMultiCurrency?: boolean;
     /** Placeholder text for the input */
     placeholder?: string;
-    /** Message to display below the input */
-    message?: string;
-    /** Type of message to display */
-    messageType?: "success" | "error" | "info" | "default";
-    /** Additional CSS classes for the wrapper container */
-    wrapperClassName?: string;
-    /** Additional CSS classes for the input */
-    inputClassName?: string;
-    /** Additional CSS classes for the label */
-    labelClassName?: string;
-    /** Help text to display below the label */
-    helpText?: string;
-    /** Size variant for the input */
-    size?: "small" | "medium" | "large";
+    /** Whether the input is disabled */
+    disabled?: boolean;
     /** Current currency code */
     currencyCode?: string;
-    /** Whether to allow currency selection */
-    allowCurrencyChange?: boolean;
-    /** Available currency options (defaults to all) */
-    availableCurrencies?: string[];
-    /** Whether to show currency symbol */
-    showSymbol?: boolean;
-    /** Whether to format value display */
-    formatValue?: boolean;
-    /** Minimum value allowed */
-    min?: number;
-    /** Maximum value allowed */
-    max?: number;
-    /** Number of decimal places */
-    decimalPlaces?: number;
-    /** Additional props to pass to the input element */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     /** Inline styles for the input element */
     inputStyle?: React.CSSProperties;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Callback function called when input loses focus */
+    onBlur?: () => void;
+    /** Whether the input should auto-focus */
+    autoFocus?: boolean;
+    /** Whether recording is active (for pilot context) */
+    isRecording?: boolean;
+    /** Whether playback is active (for pilot context) */
+    isPlaying?: boolean;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** Translation function */
+    t?: (key: string) => string;
+    /** Function to get flag component for currency */
+    getFlagComponent?: (currencyCode: string) => ReactNode;
 }
 /**
  * A highly customizable currency input component with label, validation, and styling support.
- * Features currency selection, formatting, validation, and comprehensive prop support.
+ * Features currency selection, formatting, validation, GTN integration, risk analysis support,
+ * and comprehensive prop support for various use cases.
  *
  * @example
  * ```tsx
@@ -65,7 +107,7 @@ export interface CurrencyInputFieldProps {
  *   value={price}
  *   onChange={(value, currency) => setPrice(value)}
  *   currencyCode="USD"
- *   allowCurrencyChange
+ *   allowMultiCurrency
  *   required
  * />
  * ```

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

@@ -4,9 +4,10 @@
 export declare const CURRENCIES: {
     value: string;
     label: string;
-    symbol: string;
 }[];
 /**
  * Currency symbols mapping for display purposes
  */
-export declare const CURRENCY_SYMBOLS: Record<string, string>;
+export declare const CURRENCY_SYMBOLS: {
+    [key: string]: string;
+};

package/dist/components/forms/date-time-field/DateTimeField.d.ts

@@ -0,0 +1,131 @@
+import { type DatePickerProps } from "antd";
+import type { LabelType } from "../../data-display/label/Label";
+export declare const UNIVERSAL_DATE_FORMAT = "MM/DD/YYYY";
+export declare const UNIVERSAL_DATETIME_FORMAT = "MM/DD/YYYY - hh:mm A";
+/**
+ * Risk details interface
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the DateTimeField component
+ */
+export interface DateTimeFieldProps extends Omit<DatePickerProps, "onChange" | "value"> {
+    /** The label text to display above the date picker */
+    label?: string;
+    /** Current value of the date picker (ISO string or formatted date string) */
+    value?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the date picker is disabled */
+    disabled?: boolean;
+    /** Callback function called when date changes */
+    handleOnChange: (value: string | null) => void;
+    /** Whether to use simple mode (minimal styling) */
+    simpleMode?: boolean;
+    /** Whether to show time picker */
+    showTime?: boolean;
+    /** Custom date format */
+    dateFormat?: string;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Tags to display with the label */
+    tags?: (string | LabelType)[];
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN name for the field */
+    gtnName?: any;
+    /** Whether to allow timezone conversion */
+    allowTimezoneConversion?: boolean;
+    /** Whether to allow copying */
+    allowCopy?: boolean;
+    /** Unique identifier for the date picker */
+    id: string;
+    /** Date picker type */
+    picker?: "date" | "week" | "month" | "quarter" | "year";
+    /** Whether popup should render inside parent element */
+    shouldPopOnParent?: boolean;
+    /** Custom inline styles for the input */
+    inputStyle?: React.CSSProperties;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Translation function */
+    t?: (key: string) => string;
+    /** Custom format date function for GTN values */
+    formatDateForGTN?: (value: string, options: {
+        skipTimezone: boolean;
+        withTime: boolean;
+    }) => string;
+}
+/**
+ * DateTimeField component - A feature-rich date/time picker with support for
+ * GTN integration, risk analysis, AI extraction indicators, and more.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateTimeField
+ *   id="start-date"
+ *   label="Start Date"
+ *   value={startDate}
+ *   handleOnChange={(date) => setStartDate(date)}
+ * />
+ *
+ * // With time picker
+ * <DateTimeField
+ *   id="event-datetime"
+ *   label="Event Date & Time"
+ *   value={eventDateTime}
+ *   handleOnChange={(date) => setEventDateTime(date)}
+ *   showTime={true}
+ * />
+ *
+ * // With GTN integration
+ * <DateTimeField
+ *   id="contract-date"
+ *   label="Contract Date"
+ *   value={contractDate}
+ *   handleOnChange={(date) => setContractDate(date)}
+ *   isGTN={true}
+ *   gtnName="contract_date"
+ *   onAddGTNToDocument={(kv) => dispatch(setVariableValueToEditor(kv))}
+ * />
+ * ```
+ */
+export declare const DateTimeField: import("react").ForwardRefExoticComponent<Omit<DateTimeFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/dynamic-data-input/DynamicDataInputField.d.ts

@@ -0,0 +1,120 @@
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface for risk analysis integration
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the DynamicDataModal component
+ */
+export interface DynamicDataModalProps {
+    isVisible: boolean;
+    onSelect: (data: string | number | readonly string[] | undefined) => void;
+    onClose: () => void;
+    dataKey: string;
+    dataSource: string;
+}
+/**
+ * Props for the DynamicDataInputField component
+ */
+export interface DynamicDataInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Color for the input text */
+    color?: string;
+    /** Current value of the input */
+    value: string | number | readonly string[] | undefined;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Default value for the input */
+    defaultValue?: string | number | readonly string[] | undefined;
+    /** Data source for dynamic data */
+    dataSource: string;
+    /** Data key for dynamic data */
+    dataKey: string;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback function called when value changes */
+    onChange: (value: string | number | readonly string[] | undefined) => void;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+    /** Translation function */
+    t?: (key: string) => string;
+    /** Whether recording is active (for pilot context) */
+    isRecording?: boolean;
+    /** Whether playback is active (for pilot context) */
+    isPlaying?: boolean;
+    /** Callback to set disable actions state */
+    setDisableActions?: (disabled: boolean) => void;
+    /** Toast function for deprecated field warning */
+    showDeprecatedFieldWarning?: () => void;
+    /** Dynamic data modal component */
+    DynamicDataModal?: React.ComponentType<DynamicDataModalProps>;
+}
+/**
+ * A highly customizable dynamic data input component with label, validation, and styling support.
+ * Features dynamic data modal integration, GTN support, risk analysis support,
+ * and comprehensive prop support for various use cases.
+ *
+ * @example
+ * ```tsx
+ * <DynamicDataInputField
+ *   id="dynamic-field"
+ *   label="Dynamic Field"
+ *   value={fieldValue}
+ *   onChange={(value) => setFieldValue(value)}
+ *   dataSource="sourceTable"
+ *   dataKey="fieldKey"
+ *   required
+ * />
+ * ```
+ */
+export declare const DynamicDataInputField: import("react").ForwardRefExoticComponent<DynamicDataInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/percentage-input/PercentageInputField.d.ts

@@ -1,3 +1,22 @@
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Risk details interface for risk analysis integration
+ */
+export interface RiskDetails {
+    color?: string;
+    description?: string;
+    hexBgColor?: string;
+    hexBorderColor?: string;
+    [key: string]: any;
+}
+/**
+ * Risk details card component props
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
 /**
  * Props for the PercentageInputField component
  */
@@ -6,58 +25,73 @@ export interface PercentageInputFieldProps {
     id: string;
     /** Label text to display above the input */
     label?: string;
-    /** Current value of the input (number) */
-    value?: number | null;
-    /** Default value for the input */
-    defaultValue?: number | null;
+    /** Current value of the input */
+    value: string;
     /** Callback function called when value changes */
-    onChange: (value: number | null) => void;
+    onChange: (data: any) => void;
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Default value for the input */
+    defaultValue?: string;
     /** Whether the input is disabled */
     disabled?: boolean;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Placeholder text for the input */
-    placeholder?: string;
-    /** Message to display below the input */
-    message?: string;
-    /** Type of message to display */
-    messageType?: "success" | "error" | "info" | "default";
-    /** Additional CSS classes for the wrapper container */
-    wrapperClassName?: string;
-    /** Additional CSS classes for the input */
-    inputClassName?: string;
-    /** Additional CSS classes for the label */
-    labelClassName?: string;
-    /** Help text to display below the label */
-    helpText?: string;
-    /** Size variant for the input */
-    size?: "small" | "medium" | "large";
-    /** Minimum value allowed */
-    min?: number;
     /** Maximum value allowed */
     max?: number;
-    /** Step value for incrementing */
-    step?: number;
-    /** Number of decimal places */
-    decimalPlaces?: number;
-    /** Whether to show percentage symbol */
-    showSymbol?: boolean;
-    /** Whether to allow negative values */
-    allowNegative?: boolean;
-    /** Additional props to pass to the input element */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /** Minimum value allowed */
+    min?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Background color class */
+    bg?: string;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Text color class */
+    color?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether to use simple mode (inline label style) */
+    simpleMode?: boolean;
+    /** Additional CSS classes for the input field */
+    inputFieldClassName?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: any;
     /** Inline styles for the input element */
     inputStyle?: React.CSSProperties;
-    /** Callback for key down events */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    /** Callback for focus events */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    /** Callback for blur events */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Whether to show dollar sign (for simpleMode) */
+    withDollarSign?: boolean;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Callback function called when input loses focus */
+    onBlur?: () => void;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** Translation function */
+    t?: (key: string) => string;
 }
 /**
  * A highly customizable percentage input component with label, validation, and styling support.
- * Features percentage symbol, decimal control, and comprehensive validation.
+ * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.
  *
  * @example
  * ```tsx
@@ -66,8 +100,6 @@ export interface PercentageInputFieldProps {
  *   label="Discount Percentage"
  *   value={discount}
  *   onChange={(value) => setDiscount(value)}
- *   min={0}
- *   max={100}
  *   required
  * />
  * ```

package/dist/index.d.ts

@@ -18,14 +18,18 @@ export type { CreatableSelectProps, SelectOption, TProps, } from "./components/f
 export { CustomizableSelectField } from "./components/forms/customizable-select-field/CustomizableSelectField";
 export type { CustomizableSelectFieldProps, CustomizableSelectOption, OptionConfig, MenuConfig, } from "./components/forms/customizable-select-field/CustomizableSelectField";
 export { CurrencyInputField } from "./components/forms/currency-input/CurrencyInputField";
-export type { CurrencyInputFieldProps } from "./components/forms/currency-input/CurrencyInputField";
+export type { CurrencyInputFieldProps, RiskDetails as CurrencyInputFieldRiskDetails, RiskDetailsCardProps as CurrencyInputFieldRiskDetailsCardProps, } from "./components/forms/currency-input/CurrencyInputField";
 export { CURRENCIES, CURRENCY_SYMBOLS } from "./components/forms/currency-input/currency.constant";
 export { DateRange } from "./components/forms/date-range/DateRange";
 export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange";
+export { DateTimeField, UNIVERSAL_DATE_FORMAT, UNIVERSAL_DATETIME_FORMAT, } from "./components/forms/date-time-field/DateTimeField";
+export type { DateTimeFieldProps, RiskDetails as DateTimeFieldRiskDetails, RiskDetailsCardProps as DateTimeFieldRiskDetailsCardProps, } from "./components/forms/date-time-field/DateTimeField";
 export { DebounceInputField } from "./components/forms/debounce-input/DebounceInputField";
 export type { DebounceInputFieldProps } from "./components/forms/debounce-input/DebounceInputField";
+export { DynamicDataInputField } from "./components/forms/dynamic-data-input/DynamicDataInputField";
+export type { DynamicDataInputFieldProps, DynamicDataModalProps as DynamicDataInputModalProps, RiskDetails as DynamicDataInputFieldRiskDetails, RiskDetailsCardProps as DynamicDataInputFieldRiskDetailsCardProps, } from "./components/forms/dynamic-data-input/DynamicDataInputField";
 export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
-export type { PercentageInputFieldProps } from "./components/forms/percentage-input/PercentageInputField";
+export type { PercentageInputFieldProps, RiskDetails as PercentageInputFieldRiskDetails, RiskDetailsCardProps as PercentageInputFieldRiskDetailsCardProps, } from "./components/forms/percentage-input/PercentageInputField";
 export { Toggle } from "./components/forms/toggle/Toggle";
 export type { ToggleProps } from "./components/forms/toggle/Toggle";
 export { TOGGLE_LABEL_DIRECTION } from "./constants/toggle";