@lax-wp/design-system 0.3.114 → 0.4.0

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

@@ -0,0 +1,110 @@
+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 - generic to allow consumer-specific risk types
+ */
+export interface RiskDetailsCardProps<T = any> {
+    riskDetails: T;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the CurrencyInputField component
+ */
+export interface CurrencyInputFieldProps {
+    /** Unique identifier for the currency input */
+    id: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Current value of the input (string for compatibility) */
+    value: string;
+    /** Callback function called when value changes */
+    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;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Current currency code */
+    currencyCode?: string;
+    /** 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<any>>;
+}
+/**
+ * A highly customizable currency input component with label, validation, and styling support.
+ * Features currency selection, formatting, validation, GTN integration, risk analysis support,
+ * and comprehensive prop support for various use cases.
+ *
+ * @example
+ * ```tsx
+ * <CurrencyInputField
+ *   id="price"
+ *   label="Price"
+ *   value={price}
+ *   onChange={(value, currency) => setPrice(value)}
+ *   currencyCode="USD"
+ *   allowMultiCurrency
+ *   required
+ * />
+ * ```
+ */
+export declare const CurrencyInputField: import("react").ForwardRefExoticComponent<CurrencyInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,13 @@
+/**
+ * Available currencies for the CurrencyInputField component
+ */
+export declare const CURRENCIES: {
+    value: string;
+    label: string;
+}[];
+/**
+ * Currency symbols mapping for display purposes
+ */
+export declare const CURRENCY_SYMBOLS: {
+    [key: string]: string;
+};

package/dist/components/forms/customizable-select-field/CustomizableSelectField.d.ts

@@ -0,0 +1,126 @@
+interface ColorShades {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    850: string;
+    900: string;
+    950: string;
+    975: string;
+}
+/**
+ * Option type for CustomizableSelectField
+ */
+export interface CustomizableSelectOption {
+    label: string;
+    value: string;
+    [key: string]: any;
+}
+/**
+ * Option config for customizing option rendering
+ */
+export interface OptionConfig {
+    /** Custom component to render for options */
+    component?: React.ComponentType<any>;
+    /** Props to pass to the custom component */
+    componentProps?: Record<string, any>;
+    /** Indicator to show when option is selected */
+    selectIndecator?: React.ReactNode;
+}
+/**
+ * Menu config for customizing menu rendering
+ */
+export interface MenuConfig {
+    /** Additional CSS class for the menu */
+    className?: string;
+    /** Additional CSS class for each option */
+    optionClassName?: string;
+}
+/**
+ * Props for the CustomizableSelectField component
+ */
+export interface CustomizableSelectFieldProps {
+    /** Unique identifier for the select */
+    id: string;
+    /** Label text to display above the select */
+    label?: string;
+    /** Array of select options */
+    options: CustomizableSelectOption[];
+    /** Placeholder text for the select */
+    placeholder: string;
+    /** Callback function called when selection changes */
+    onChange: (_value: any) => void;
+    /** Whether the select is in loading state */
+    isLoading?: boolean;
+    /** Whether to hide the label */
+    hideLabel?: boolean;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Configuration for option rendering */
+    optionConfig?: OptionConfig;
+    /** Configuration for menu rendering */
+    menuConfig?: MenuConfig;
+    /** Parent container selector (deprecated, not used) */
+    parentContainer?: string;
+    /** Current value of the select */
+    value?: any;
+    /** Whether multiple selections are allowed */
+    isMulti?: boolean;
+    /** Whether the select is clearable */
+    isClearable?: boolean;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether dark mode is enabled */
+    isDark?: boolean;
+    /** Primary color shades for styling */
+    primaryColorShades?: ColorShades;
+    /** Additional props */
+    [key: string]: any;
+}
+/**
+ * A highly customizable select field component with custom option and menu rendering support.
+ * Features dark mode support, multi-select capability, and comprehensive prop support.
+ * Built on top of react-select for advanced functionality.
+ *
+ * @example
+ * ```tsx
+ * <CustomizableSelectField
+ *   id="country"
+ *   label="Country"
+ *   options={[
+ *     { label: 'United States', value: 'us' },
+ *     { label: 'Canada', value: 'ca' }
+ *   ]}
+ *   placeholder="Select a country"
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // With custom option rendering
+ * <CustomizableSelectField
+ *   id="user"
+ *   label="User"
+ *   options={users}
+ *   placeholder="Select a user"
+ *   onChange={(value) => console.log(value)}
+ *   optionConfig={{
+ *     component: UserOption,
+ *     componentProps: { showAvatar: true },
+ *     selectIndecator: <CheckIcon />
+ *   }}
+ * />
+ * ```
+ */
+export declare const CustomizableSelectField: {
+    ({ id, label, options, placeholder, onChange, isLoading, hideLabel, errorMessage, required, optionConfig, menuConfig, value, isMulti, isClearable, disabled, className, isDark, primaryColorShades, }: CustomizableSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/forms/date-range/DateRange.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Props for the DateRange component
+ * Matches the lax-web-portal implementation for drop-in replacement
+ */
+export type TDateRangeProps = {
+    /** Unique identifier for the date range */
+    id: string;
+    /** Label text to display above the date range */
+    label?: string;
+    /** Start date value (ISO string or formatted date string) */
+    startDate: string;
+    /** End date value (ISO string or formatted date string) */
+    endDate: string;
+    /** Callback function called when date range changes */
+    onChange(data: any): void;
+    /** Callback function called when calendar selection changes */
+    onCalendarChange?(data: any): void;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Error message to display below the date range */
+    errorMessage?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Whether the date range is disabled */
+    disabled?: boolean;
+    /** Custom date format */
+    dateFormat?: string;
+    /** Whether popup should render inside parent element */
+    shouldPopOnParent?: boolean;
+    /** Custom function to get popup container */
+    getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;
+    /** Maximum date range in days */
+    maxDateRange?: number;
+    /** Whether the picker is open */
+    open?: boolean;
+    /** Callback function called when open state changes */
+    onOpenChange?(open: boolean): void;
+    /** Placement of the dropdown */
+    placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    /** Whether to render as an icon button that triggers the date picker */
+    renderAsIconButton?: boolean;
+    /** Additional CSS classes for the icon button */
+    iconButtonClassName?: string;
+    /** Additional CSS classes for the calendar icon inside the button */
+    iconClassName?: string;
+};
+/**
+ * A date range picker component with label, validation, and styling support.
+ * Features proper date handling, validation, and comprehensive prop support.
+ * Built on top of Ant Design's RangePicker for advanced functionality.
+ *
+ * This component is designed as a drop-in replacement for the lax-web-portal
+ * DateRange component.
+ *
+ * @example
+ * ```tsx
+ * <DateRange
+ *   id="event-dates"
+ *   label="Event Duration"
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   onChange={(dates) => {
+ *     setStartDate(dates[0]);
+ *     setEndDate(dates[1]);
+ *   }}
+ *   required
+ * />
+ * ```
+ */
+export declare const DateRange: {
+    ({ onCalendarChange, onChange, required, label, startDate, endDate, errorMessage, className, id, disabled, dateFormat, shouldPopOnParent, getPopupContainer: customGetPopupContainer, maxDateRange, open, onOpenChange, placement, renderAsIconButton, iconButtonClassName, iconClassName, }: TDateRangeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/forms/date-range/DateRange2.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Date range value type
+ */
+export interface DateRangeValue {
+    /** Start date */
+    startDate: Date | null;
+    /** End date */
+    endDate: Date | null;
+}
+/**
+ * Props for the DateRange component
+ */
+export interface DateRangeProps {
+    /** Unique identifier for the date range */
+    id: string;
+    /** Label text to display above the date range */
+    label?: string;
+    /** Current date range value */
+    value?: DateRangeValue;
+    /** Default date range value */
+    defaultValue?: DateRangeValue;
+    /** Callback function called when date range changes */
+    onChange: (value: DateRangeValue) => void;
+    /** Whether the date range is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Message to display below the date range */
+    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 containers */
+    inputClassName?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the inputs */
+    size?: "small" | "medium" | "large";
+    /** Date format for display */
+    dateFormat?: string;
+    /** Minimum date allowed */
+    minDate?: Date;
+    /** Maximum date allowed */
+    maxDate?: Date;
+    /** Placeholder text for start date */
+    startPlaceholder?: string;
+    /** Placeholder text for end date */
+    endPlaceholder?: string;
+    /** Whether to allow clearing the selection */
+    allowClear?: boolean;
+    /** Additional props to pass to the input elements */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * A highly customizable date range component with label, validation, and styling support.
+ * Features proper date handling, validation, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <DateRange
+ *   id="event-dates"
+ *   label="Event Duration"
+ *   value={dateRange}
+ *   onChange={(range) => setDateRange(range)}
+ *   required
+ * />
+ * ```
+ */
+export declare const DateRange2: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,129 @@
+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 - generic to allow consumer-specific risk types
+ */
+export interface RiskDetailsCardProps<T = any> {
+    riskDetails: T;
+    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<any>>;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** 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/debounce-input/DebounceInputField.d.ts

@@ -0,0 +1,66 @@
+import { DebounceInput } from "react-debounce-input";
+import type { LabelType } from "../../data-display/label/Label";
+import type { ComponentProps } from "react";
+/**
+ * Props for the DebounceInputField component
+ * Drop-in replacement matching the lax-web-portal API
+ */
+export type DebounceInputFieldProps = Omit<ComponentProps<typeof DebounceInput>, 'onChange'> & {
+    /** Current value of the input */
+    value: string;
+    /** Callback function called when the input value changes (debounced) */
+    onChange(data: any): void;
+    /** Error message to display  */
+    errorMessage?: string;
+    /** Default value for the input */
+    defaultValue?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Maximum value for number inputs */
+    max?: number;
+    /** Minimum value for number inputs */
+    min?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Background color class */
+    bg?: string;
+    /** Tags to display with the label */
+    tags?: (string | LabelType)[];
+    /** Text color class */
+    color?: string;
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text for the input */
+    label?: string;
+    /** Input type (text, email, password, number, etc.) */
+    type?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Debounce timeout in milliseconds */
+    debounceTimeout?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether dark mode is enabled (optional - uses CSS dark: classes if not provided) */
+    isDarkMode?: boolean;
+};
+/**
+ * A debounced input field component that delays onChange calls until the user stops typing.
+ * This is a drop-in replacement for the lax-web-portal DebounceInputField component.
+ *
+ * @example
+ * ```tsx
+ * <DebounceInputField
+ *   id="search"
+ *   label="Search"
+ *   value={searchTerm}
+ *   onChange={(value) => setSearchTerm(value)}
+ *   debounceTimeout={300}
+ *   placeholder="Type to search..."
+ *   errorMessage=""
+ * />
+ * ```
+ */
+export declare const DebounceInputField: {
+    ({ id, label, onChange, errorMessage, required, bg, tags, color, debounceTimeout, className, isDarkMode, ...props }: DebounceInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,64 @@
+import { type FC } from "react";
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * Props for the DynamicDataInput component
+ * Drop-in replacement matching the lax-web-portal API
+ */
+export type DynamicDataInputProps = {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Input type (text, email, password, number, etc.) */
+    type?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Current value of the input (JSON string for dynamic data) */
+    value: string;
+    /** Callback function called when value changes */
+    onChange: (value: string) => void;
+    /** Error message to display below the input */
+    errorMessage?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Background color class */
+    bg?: string;
+    /** Tags/labels to display next to the label */
+    tags?: (string | LabelType)[];
+    /** Index prop used for resetting input state */
+    index?: number;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Whether to use simple mode (no label, just input with edit button) */
+    simpleMode?: boolean;
+    /** Additional CSS classes for the input field in simple mode */
+    inputFieldClassName?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+} & Record<string, any>;
+/**
+ * A dynamic data input component that displays a text input with a button to open
+ * a modal for editing JSON data. The input shows "{DYNAMIC}" when there's a value.
+ *
+ * This is a drop-in replacement for the lax-web-portal DynamicDataInput component.
+ *
+ * @example
+ * ```tsx
+ * <DynamicDataInput
+ *   id="dynamic-field"
+ *   label="Dynamic Field"
+ *   type="text"
+ *   placeholder="Enter value..."
+ *   value={jsonData}
+ *   onChange={(value) => setJsonData(value)}
+ *   errorMessage=""
+ * />
+ * ```
+ */
+export declare const DynamicDataInput: FC<DynamicDataInputProps>;