@lax-wp/design-system 0.3.59 → 0.3.61

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

@@ -1,72 +1,69 @@
-/**
- * Date range value type
- */
-export interface DateRangeValue {
-    /** Start date */
-    startDate: Date | null;
-    /** End date */
-    endDate: Date | null;
-}
 /**
  * Props for the DateRange component
+ * Matches the lax-web-portal implementation for drop-in replacement
  */
-export interface DateRangeProps {
+export type TDateRangeProps = {
     /** 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;
+    /** 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: (value: DateRangeValue) => void;
-    /** Whether the date range is disabled */
-    disabled?: boolean;
+    onChange(data: any): void;
+    /** Callback function called when calendar selection changes */
+    onCalendarChange?(data: any): void;
     /** 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 */
+    /** 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;
-    /** 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>;
-}
+    /** 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 the component is in dark mode */
+    isDarkMode?: boolean;
+};
 /**
- * A highly customizable date range component with label, validation, and styling support.
+ * 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"
- *   value={dateRange}
- *   onChange={(range) => setDateRange(range)}
+ *   startDate={startDate}
+ *   endDate={endDate}
+ *   onChange={(dates) => {
+ *     setStartDate(dates[0]);
+ *     setEndDate(dates[1]);
+ *   }}
  *   required
  * />
  * ```
  */
-export declare const DateRange: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DateRange: {
+    ({ onCalendarChange, onChange, required, label, startDate, endDate, errorMessage, className, id, disabled, dateFormat, shouldPopOnParent, getPopupContainer: customGetPopupContainer, maxDateRange, open, onOpenChange, placement, isDarkMode, }: 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/debounce-input/DebounceInputField.d.ts

@@ -1,65 +1,49 @@
+import type { LabelType } from "../../data-display/label/Label";
 /**
  * Props for the DebounceInputField component
+ * Drop-in replacement matching the lax-web-portal API
  */
-export interface DebounceInputFieldProps {
-    /** Unique identifier for the input */
-    id: string;
-    /** Label text to display above the input */
-    label?: string;
+export type DebounceInputFieldProps = any & {
     /** Current value of the input */
-    value?: string;
+    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;
-    /** Callback function called when value changes (debounced) */
-    onChange: (value: string) => void;
-    /** Callback function called on every keystroke (immediate) */
-    onImmediateChange?: (value: string) => void;
     /** 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;
-    /** Placeholder text for the input */
+    /** 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;
-    /** 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";
-    /** Input type */
-    type?: "text" | "email" | "url" | "search" | "tel" | "password";
     /** Debounce timeout in milliseconds */
     debounceTimeout?: number;
-    /** Minimum value for number inputs */
-    min?: number;
-    /** Maximum value for number inputs */
-    max?: number;
-    /** Maximum length for text inputs */
-    maxLength?: number;
-    /** Pattern for input validation */
-    pattern?: string;
-    /** Additional props to pass to the input element */
-    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    /** 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;
-}
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether dark mode is enabled (optional - uses CSS dark: classes if not provided) */
+    isDarkMode?: boolean;
+};
 /**
- * A highly customizable debounced input component with label, validation, and styling support.
- * Features configurable debounce timing, immediate change callbacks, and comprehensive prop support.
+ * 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
@@ -70,7 +54,11 @@ export interface DebounceInputFieldProps {
  *   onChange={(value) => setSearchTerm(value)}
  *   debounceTimeout={300}
  *   placeholder="Type to search..."
+ *   errorMessage=""
  * />
  * ```
  */
-export declare const DebounceInputField: import("react").ForwardRefExoticComponent<DebounceInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+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/index.d.ts

@@ -24,8 +24,10 @@ export type { CustomizableSelectFieldProps, CustomizableSelectOption, OptionConf
 export { CurrencyInputField } 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 { DateRange2 } from "./components/forms/date-range/DateRange2";
+export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange2";
 export { DateRange } from "./components/forms/date-range/DateRange";
-export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange";
+export type { TDateRangeProps } 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";