@lax-wp/design-system 0.3.36 → 0.3.38

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

@@ -1,4 +1,6 @@
 import { type FC } from 'react';
 import { type CodeEditorProps } from '../../../types';
-export type TTabKey = 'JSON' | 'Grid';
+declare const TABS: ('JSON' | 'Grid')[];
+export type TTabKey = (typeof TABS)[number];
 export declare const CodeEditor: FC<CodeEditorProps>;
+export {};

package/dist/components/forms/base-input-field/BaseInputField.d.ts

@@ -0,0 +1,136 @@
+import React 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
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    maxWidth?: string;
+    showAllRisksSuggestions?: boolean;
+}
+/**
+ * Props for the BaseInputField component
+ */
+export type TBaseInputFieldProps = any & {
+    /** Current value of the input */
+    value: string;
+    /** Callback function called when the input value changes */
+    onChange(data: any): void;
+    /** Callback function for key down events */
+    onKeyDown?: 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;
+    /** Whether the required indicator shows as conditional */
+    isRequiredConditional?: 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;
+    /** Value to revert back to */
+    revertBackValue?: any;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether this is a password field with visibility toggle */
+    isPasswordField?: boolean;
+    /** Callback to set password visibility */
+    setIsPasswordVisible?: any;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Whether to preserve original case in the label */
+    originalCase?: boolean;
+    /** Icon or element to display at the end of the input */
+    suffixIcon?: React.ReactNode;
+    /** Text size class */
+    textSize?: string;
+    /** Whether the value was AI extracted */
+    isAiExtracted?: boolean;
+    /** Whether this is a GTN field */
+    isGTN?: boolean;
+    /** GTN name for document integration */
+    gtnName?: any;
+    /** Success message to display */
+    successMessage?: string;
+    /** Additional CSS classes for the input element */
+    inputClassName?: 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 for blur events */
+    onBlur?: () => void;
+    /** Whether the input is clearable */
+    isClearable?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Ref for the input element */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** Risk details data */
+    riskDetails?: RiskDetails;
+    /** Whether risk analysis is open */
+    isRiskAnalysisOpen?: boolean;
+    /** Custom risk details card component */
+    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
+    /** AI extracted indicator component */
+    AIExtractedIndicator?: React.ComponentType;
+    /** Required indicator component */
+    RequiredIndicator?: React.ComponentType<{
+        isConditional?: boolean;
+    }>;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Translation function */
+    t?: (key: string) => string;
+};
+/**
+ * A feature-rich input field component with label, validation, GTN integration,
+ * risk analysis support, and comprehensive styling options.
+ *
+ * @example
+ * ```tsx
+ * <BaseInputField
+ *   id="email"
+ *   label="Email Address"
+ *   type="email"
+ *   value={email}
+ *   onChange={setEmail}
+ *   placeholder="Enter your email"
+ *   required
+ *   errorMessage={emailError}
+ * />
+ * ```
+ */
+export declare const BaseInputField: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default BaseInputField;

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

@@ -0,0 +1,112 @@
+/**
+ * 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?: Record<number, string>;
+    /** Required indicator component */
+    RequiredIndicator?: React.ComponentType;
+    /** 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, RequiredIndicator, }: CustomizableSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,122 @@
+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
+ */
+export interface RiskDetailsCardProps {
+    riskDetails: RiskDetails;
+    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>;
+    /** AI extracted indicator component */
+    AIExtractedIndicator?: React.ComponentType;
+    /** Required indicator component */
+    RequiredIndicator?: React.ComponentType<{
+        isConditional?: boolean;
+    }>;
+    /** Handler for adding GTN to document */
+    onAddGTNToDocument?: (keyValuePair: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Translation function */
+    t?: (key: string) => string;
+}
+/**
+ * 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/toggle/Toggle.d.ts

@@ -87,6 +87,15 @@ export interface ToggleProps {
         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>;
+    /** Translation function */
+    t?: (key: string) => string;
 }
 /**
  * A highly customizable toggle component with label, validation, and styling support.

package/dist/index.d.ts

@@ -1,8 +1,12 @@
 export { InputField } from "./components/forms/input-field/InputField";
 export type { InputFieldProps } from "./components/forms/input-field/InputField";
+export { BaseInputField, default as BaseInputFieldDefault } from "./components/forms/base-input-field/BaseInputField";
+export type { TBaseInputFieldProps, RiskDetails as BaseInputFieldRiskDetails, RiskDetailsCardProps as BaseInputFieldRiskDetailsCardProps, } from "./components/forms/base-input-field/BaseInputField";
 export * from "./components/data-display/typography/Typography";
 export { TextField } from "./components/forms/text-field/TextField";
 export type { TextFieldProps } from "./components/forms/text-field/TextField";
+export { TextAreaField } from "./components/forms/text-area-field/TextAreaField";
+export type { TextAreaFieldProps, RiskDetails as TextAreaFieldRiskDetails, RiskDetailsCardProps as TextAreaFieldRiskDetailsCardProps, } from "./components/forms/text-area-field/TextAreaField";
 export { SelectField } from "./components/forms/select-field/SelectField";
 export type { SelectFieldProps, SelectOption as SelectFieldOption, TLabelValue, } from "./components/forms/select-field/SelectField";
 export { Checkbox } from "./components/forms/checkbox/Checkbox";
@@ -11,6 +15,8 @@ export { ColorPicker } from "./components/forms/color-picker/ColorPicker";
 export type { ColorPickerProps, ColorPickerComponentProps, } from "./components/forms/color-picker/ColorPicker";
 export { CreatableSelectField } from "./components/forms/creatable-select/CreatableSelect";
 export type { CreatableSelectProps, SelectOption, TProps, } from "./components/forms/creatable-select/CreatableSelect";
+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 { CURRENCIES, CURRENCY_SYMBOLS } from "./components/forms/currency-input/currency.constant";