@lax-wp/design-system 0.3.37 → 0.3.39

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

@@ -0,0 +1,134 @@
+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>;
+    /** 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/select-field/SelectField.d.ts

@@ -110,8 +110,6 @@ export interface SelectFieldProps extends Omit<SelectProps, 'onChange'> {
     isRiskAnalysisOpen?: boolean;
     /** Custom risk details card component */
     RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
-    /** AI extracted indicator component */
-    AIExtractedIndicator?: React.ComponentType;
     /** Required indicator component */
     RequiredIndicator?: React.ComponentType;
     /** Add to document icon component */

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

@@ -78,8 +78,6 @@ export interface TextAreaFieldProps extends Omit<React.TextareaHTMLAttributes<HT
     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;

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

@@ -1,12 +1,7 @@
 import { type ReactNode } from "react";
 import type { TToggleDirection } from "../../../constants/toggle";
-/**
- * Label type for tags
- */
-export type LabelType = {
-    label: string;
-    color?: string;
-};
+import { type LabelType } from "../../data-display/label/Label";
+export type { LabelType };
 /**
  * Props for the Toggle component
  */

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

@@ -1,5 +1,7 @@
 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";
@@ -13,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";