@lax-wp/design-system 0.3.59 → 0.3.60

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/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";