@lax-wp/design-system 0.3.114 → 0.4.0

package/dist/components/forms/number-input-field/NumberInputField.d.ts

@@ -0,0 +1,47 @@
+import type { FC } from "react";
+/**
+ * Props for the NumberInputField component
+ */
+export interface NumberInputFieldProps {
+    /** Label text to display above the input */
+    label?: string;
+    /** Additional CSS classes for the input */
+    className?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Callback when the value changes */
+    onChange?: (value: string | number) => void;
+    /** Current value of the input */
+    value?: string | number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for number input */
+    step?: number;
+    /** Number format type: 'comma', 'currency', 'percent' */
+    numberFormat?: string;
+    /** Number of decimal places */
+    precision?: number;
+    /** Unique identifier for the input */
+    id?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * NumberInputField component provides a number input with optional formatting
+ *
+ * @example
+ * ```tsx
+ * <NumberInputField
+ *   label="Amount"
+ *   value={1000}
+ *   onChange={setValue}
+ *   numberFormat="comma"
+ *   precision={2}
+ * />
+ * ```
+ */
+export declare const NumberInputField: FC<NumberInputFieldProps>;

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

@@ -0,0 +1,107 @@
+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 PercentageInputField component
+ */
+export interface PercentageInputFieldProps {
+    /** Unique identifier for the input */
+    id: string;
+    /** Label text to display above the input */
+    label?: string;
+    /** Current value of the input */
+    value: string;
+    /** Callback function called when value changes */
+    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;
+    /** Maximum value allowed */
+    max?: number;
+    /** 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;
+    /** 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<any>>;
+    /** Input placeholder */
+    placeholder?: string;
+}
+/**
+ * A highly customizable percentage input component with label, validation, and styling support.
+ * Features GTN integration, risk analysis support, AI extraction indicator, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <PercentageInputField
+ *   id="discount"
+ *   label="Discount Percentage"
+ *   value={discount}
+ *   onChange={(value) => setDiscount(value)}
+ *   required
+ * />
+ * ```
+ */
+export declare const PercentageInputField: import("react").ForwardRefExoticComponent<PercentageInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/forms/search-bar/SearchBar.d.ts

@@ -0,0 +1,28 @@
+import { type FC, type HTMLAttributes } from 'react';
+export type TSearchConfig = {
+    searchCount?: number;
+    searchPointer?: number;
+    setSearchPointer?: React.Dispatch<React.SetStateAction<number | undefined>>;
+};
+export type TSearchBarProps = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    value?: string;
+    onChange?(value: string): void;
+    debounceTimeout?: number;
+    classValues?: string;
+    handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    isClearable?: boolean;
+    id: string;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    isAnimated?: boolean;
+    onFocusText?: string;
+    autoComplete?: string;
+    searchRef?: React.RefObject<HTMLInputElement>;
+    placeholder?: string;
+    autoFocus?: boolean;
+    hasNavigation?: boolean;
+    searchConfig?: TSearchConfig;
+    hideSearchIcon?: boolean;
+    allowAStarSearch?: boolean;
+};
+export declare const SearchBar: FC<TSearchBarProps>;

package/dist/components/forms/select-field/SelectField.d.ts

@@ -0,0 +1,162 @@
+import type { SelectProps } from 'antd';
+import type { ReactNode } from 'react';
+import type { LabelType } from '../../data-display/label/Label';
+/**
+ * Label-value pair for select options
+ */
+export type TLabelValue = {
+    label: string;
+    value: string;
+    icon?: JSX.Element;
+};
+/**
+ * Select option interface
+ */
+export interface SelectOption {
+    label: string | any;
+    value: string | number;
+    color?: string;
+}
+type TagRender = SelectProps['tagRender'];
+/**
+ * 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 SelectField component
+ */
+export interface SelectFieldProps extends Omit<SelectProps, 'onChange'> {
+    /** Select mode - multiple or tags */
+    mode?: 'multiple' | 'tags';
+    /** The label text to display above the select */
+    label?: string | ReactNode;
+    /** Current value of the select */
+    value?: string | string[] | SelectOption | SelectOption[] | any;
+    /** Array of select options */
+    selectOptions?: SelectOption[];
+    /** Whether content is loading */
+    hasContentLoading?: boolean;
+    /** Callback function called when the select value changes */
+    onChange?: (value: any) => void;
+    /** Callback function for search */
+    onSearch?: (searchValue: string) => void;
+    /** Callback function for scroll */
+    onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    /** Callback function for input change */
+    onInputChange?: (newValue: string) => void;
+    /** Debounce timeout for search */
+    debounceTimeout?: number;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Tooltip text for the help icon */
+    tooltip?: string;
+    /** Tags to display with the label */
+    tags?: (string | LabelType)[];
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether this is a GTN (Global Technical Name) field */
+    isGTN?: boolean;
+    /** GTN name for the field */
+    gtnName?: any;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Whether the field is hovered */
+    isHovered?: boolean;
+    /** Whether to enable filter option */
+    filterOption?: boolean;
+    /** Whether the select is loading */
+    isLoading?: boolean;
+    /** Whether to auto clear search value */
+    autoClearSearchValue?: boolean;
+    /** Whether to show label with full opacity */
+    fullOpacityLabel?: boolean;
+    /** Color for the select */
+    color?: string;
+    /** Whether to show all tags */
+    showAllTags?: boolean;
+    /** Custom tag render function */
+    customTagRender?: TagRender;
+    /** Custom inline styles for the select */
+    inputStyles?: React.CSSProperties;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether to show select all option */
+    showSelectAll?: boolean;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps<any>>;
+    /** Add to document icon component */
+    AddToDocumentIcon?: React.ComponentType<{
+        fontSize?: number;
+        color?: string;
+    }>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+    /** User avatar component for option rendering */
+    UserAvatar?: React.ComponentType<{
+        firstName: string;
+        lastName: string;
+        profilePic: string;
+        size: string;
+        enablePopper: boolean;
+        userId: string;
+    }>;
+    /** Whether the required indicator shows as conditional (yellow instead of red) */
+    isRequiredConditional?: boolean;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+}
+/**
+ * SelectField component - A feature-rich select dropdown with multi-select, tags, search, and more
+ *
+ * @example
+ * ```tsx
+ * <SelectField
+ *   label="Country"
+ *   value="us"
+ *   selectOptions={[
+ *     { label: 'United States', value: 'us' },
+ *     { label: 'Canada', value: 'ca' }
+ *   ]}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * <SelectField
+ *   label="Tags"
+ *   mode="multiple"
+ *   value={['tag1', 'tag2']}
+ *   selectOptions={tagOptions}
+ *   onChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+export declare const SelectField: import("react").ForwardRefExoticComponent<SelectFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/forms/text-area-field/TextAreaField.d.ts

@@ -0,0 +1,114 @@
+import type { RefObject } from "react";
+import type { LabelType } from "../../data-display/label/Label";
+/**
+ * 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 TextAreaField component
+ */
+export interface TextAreaFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "maxLength"> {
+    /** The label text to display above the textarea */
+    label?: string;
+    /** Placeholder text for the textarea */
+    placeholder: string;
+    /** Current value of the textarea */
+    value?: string | any;
+    /** Callback function called when the textarea value changes */
+    onChange: (value: string) => void;
+    /** Number of visible text lines for the textarea (alias for rows) */
+    row?: number;
+    /** Error message to display below the textarea */
+    errorMessage?: string;
+    /** Default value for the textarea */
+    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)[];
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the textarea element */
+    className?: string;
+    /** Ref object for the textarea element */
+    inputRef?: RefObject<HTMLTextAreaElement>;
+    /** Maximum character length allowed */
+    maxLength?: number | null;
+    /** Tooltip text to display */
+    tooltip?: string;
+    /** 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 field name for document integration */
+    gtnName?: any;
+    /** Whether to remove border styling */
+    noBorder?: boolean;
+    /** Unique identifier for the textarea */
+    id?: string;
+    /** Custom inline styles for the textarea */
+    inputStyle?: React.CSSProperties;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Callback function called when the textarea loses focus */
+    onBlur?: () => void;
+    /** 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;
+}
+/**
+ * A customizable textarea field component with label, validation, GTN integration,
+ * risk analysis support, and styling support. Features dark mode support,
+ * accessibility enhancements, and character count display.
+ *
+ * @example
+ * ```tsx
+ * <TextAreaField
+ *   label="Description"
+ *   placeholder="Enter a description..."
+ *   value={description}
+ *   onChange={(value) => setDescription(value)}
+ *   required
+ * />
+ *
+ * <TextAreaField
+ *   label="Comments"
+ *   placeholder="Enter comments..."
+ *   value={comments}
+ *   onChange={(value) => setComments(value)}
+ *   maxLength={500}
+ *   isGTN
+ *   gtnName="comments_field"
+ *   onAddGTNToDocument={(kv) => handleAddToDocument(kv)}
+ * />
+ * ```
+ */
+export declare const TextAreaField: import("react").ForwardRefExoticComponent<TextAreaFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/forms/text-field/TextField.d.ts

@@ -0,0 +1,48 @@
+import type { RefObject } from "react";
+/**
+ * Props for the TextAreaField component
+ */
+export interface TextFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** The label text to display above the textarea */
+    label?: string;
+    /** Placeholder text for the textarea */
+    placeholder: string;
+    /** Current value of the textarea */
+    value?: string;
+    /** Callback function called when the textarea value changes */
+    onChange: (value: string) => void;
+    /** Number of visible text lines for the textarea */
+    rows?: number;
+    /** Message to display below the textarea */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Default value for the textarea */
+    defaultValue?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the textarea is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Ref object for the textarea element */
+    inputRef?: RefObject<HTMLTextAreaElement>;
+    /** Maximum character length allowed */
+    maxLength?: number;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Whether to remove border styling */
+    noBorder?: boolean;
+    /** Unique identifier for the textarea */
+    id?: string;
+    /** Custom inline styles for the textarea */
+    inputStyle?: React.CSSProperties;
+}
+/**
+ * A customizable textarea field component with label, validation, and styling support.
+ * Features dark mode support, accessibility enhancements, and character count display.
+ *
+ * @param props - The props for the TextAreaField component
+ * @returns The rendered TextAreaField component
+ */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/forms/toggle/Toggle.d.ts

@@ -0,0 +1,108 @@
+import { type ReactNode } from "react";
+import type { TToggleDirection } from "../../../constants/toggle";
+import { type LabelType } from "../../data-display/label/Label";
+export type { LabelType };
+/**
+ * Props for the Toggle component
+ */
+export interface ToggleProps {
+    /** Whether this is a GTN (Global Term Name) field */
+    isGTN?: boolean;
+    /** Unique identifier for the toggle */
+    id?: string;
+    /** Whether the toggle is checked */
+    isChecked: boolean;
+    /** Callback function called when toggle state changes */
+    onChange: (val: boolean) => void;
+    /** Label text or element to display */
+    label?: ReactNode;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** 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)[];
+    /** Whether to hide the status text (Yes/No) */
+    hideStatus?: boolean;
+    /** Label direction relative to toggle */
+    labelDirection?: TToggleDirection;
+    /** Custom status text instead of Yes/No */
+    statusText?: string;
+    /** Whether to show icons in the toggle */
+    withIcon?: boolean;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Tooltip text to display */
+    tooltip?: string;
+    /** Additional CSS classes for the toggle input */
+    className?: string;
+    /** Whether the toggle is disabled */
+    isDisabled?: boolean;
+    /** Custom icons for checked/unchecked states */
+    icon?: {
+        checkedIcon: ReactNode;
+        uncheckedIcon: ReactNode;
+    };
+    /** Whether to stop click propagation */
+    stopClickPropagation?: boolean;
+    /** GTN field name for document integration */
+    gtnName?: any;
+    /** Visual variant for the toggle */
+    variant?: 'primary' | 'secondary';
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Whether this is a live field */
+    isLiveField?: boolean;
+    /** Message to display below the toggle */
+    message?: string;
+    /** Type of message to display */
+    messageType?: "success" | "error" | "info" | "default";
+    /** Additional CSS classes for the wrapper container */
+    wrapperClassName?: string;
+    /** Help text to display below the label */
+    helpText?: string;
+    /** Size variant for the toggle */
+    size?: "small" | "medium" | "large";
+    /** Custom render function for AI extracted indicator */
+    renderAiExtractedIndicator?: () => ReactNode;
+    /** Custom render function for labels/tags */
+    renderLabels?: (labels?: (string | LabelType)[]) => ReactNode;
+    /** Custom render function for required indicator */
+    renderRequired?: (isConditional: boolean) => ReactNode;
+    /** Custom render function for tooltip */
+    renderTooltip?: (tooltip: string) => ReactNode;
+    /** Custom render function for live field icon */
+    renderLiveFieldIcon?: () => ReactNode;
+    /** Custom render function for GTN add to document button */
+    renderGTNAddButton?: (onClick: () => void) => ReactNode;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Add to document icon component */
+    AddToDocumentIcon?: React.ComponentType<{
+        fontSize?: number;
+        color?: string;
+    }>;
+    /** Primary color shades for styling */
+    primaryColorShades?: Record<number, string>;
+}
+/**
+ * A highly customizable toggle component with label, validation, and styling support.
+ * Features multiple sizes, variants, icon support, GTN integration, and comprehensive prop support.
+ *
+ * @example
+ * ```tsx
+ * <Toggle
+ *   id="notifications"
+ *   label="Enable Notifications"
+ *   isChecked={notificationsEnabled}
+ *   onChange={(checked) => setNotificationsEnabled(checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/icons/AIExtractedIndicator.d.ts

@@ -0,0 +1,7 @@
+import { type TooltipPlacement } from "../tooltip/Tooltip";
+type TProps = {
+    position?: TooltipPlacement;
+    title?: string;
+};
+export declare const AIExtractedIndicator: ({ position, title, }: TProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icons/AIStarIcon.d.ts

@@ -0,0 +1,8 @@
+import { type FC, type SVGAttributes } from 'react';
+type TProps = SVGAttributes<SVGElement> & {
+    size?: number;
+    fill?: string;
+    fillSecondary?: string;
+};
+export declare const AIStarIcon: FC<TProps>;
+export {};

package/dist/components/icons/ArchivedIcon.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface ArchivedIconProps {
+    className?: string;
+    size?: string;
+    fill?: string;
+}
+export declare const ArchivedIcon: FC<ArchivedIconProps>;

package/dist/components/icons/CheckCircle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface CheckCircleProps {
+    fill?: string;
+    size?: number;
+    className?: string;
+}
+export declare const CheckCircle: FC<CheckCircleProps>;

package/dist/components/icons/CheckSmallIcon.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface IconProps {
+    className?: string;
+    fill?: string;
+    size?: number;
+}
+export declare const CheckSmallIcon: FC<IconProps>;

package/dist/components/icons/CloseIcon.d.ts

@@ -0,0 +1,16 @@
+import { type SVGAttributes } from "react";
+/**
+ * Props for the Close icon component
+ */
+export interface CloseIconProps extends SVGAttributes<SVGElement> {
+    /** Size of the icon */
+    size?: number;
+    /** Fill color of the icon */
+    fill?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Close icon component
+ */
+export declare const CloseIcon: import("react").ForwardRefExoticComponent<CloseIconProps & import("react").RefAttributes<SVGSVGElement>>;