infinity-ui-elements/dist/components/DatePicker/DatePicker.d.ts

A React TypeScript component library with Tailwind CSS design system

import * as React from "react";
import "react-calendar/dist/Calendar.css";
declare const datePickerVariants: (props?: ({
    size?: "medium" | "large" | "small" | null | undefined;
    validationState?: "none" | "positive" | "negative" | null | undefined;
    isDisabled?: boolean | null | undefined;
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
    /**
     * Selected date (controlled)
     */
    value?: Date | string | null;
    /**
     * Default selected date (uncontrolled)
     */
    defaultValue?: Date | string | null;
    /**
     * Callback when date changes
     */
    onChange?: (date: Date | null) => void;
    /**
     * Placeholder text when no date is selected
     */
    placeholder?: string;
    /**
     * Label for the date picker
     */
    label?: string;
    /**
     * Helper text below the date picker
     */
    helperText?: string;
    /**
     * Error text (overrides helperText when present)
     */
    errorText?: string;
    /**
     * Success text (overrides helperText when present)
     */
    successText?: string;
    /**
     * Validation state for the date picker
     */
    validationState?: "none" | "positive" | "negative";
    /**
     * Whether the date picker is disabled
     */
    isDisabled?: boolean;
    /**
     * Whether the date picker is required
     */
    isRequired?: boolean;
    /**
     * Whether the date picker is optional
     */
    isOptional?: boolean;
    /**
     * Size of the date picker
     */
    size?: "small" | "medium" | "large";
    /**
     * Show clear button when value is selected
     */
    showClearButton?: boolean;
    /**
     * Callback when clear button is clicked
     */
    onClear?: () => void;
    /**
     * Custom class for the container
     */
    containerClassName?: string;
    /**
     * Custom class for the label
     */
    labelClassName?: string;
    /**
     * Custom class for the trigger button
     */
    triggerClassName?: string;
    /**
     * Custom class for the calendar popup
     */
    calendarClassName?: string;
    /**
     * Minimum selectable date
     */
    minDate?: Date | string;
    /**
     * Maximum selectable date
     */
    maxDate?: Date | string;
    /**
     * Date format function
     */
    formatDate?: (date: Date) => string;
    /**
     * Date format pattern string (e.g., "YYYY-MM-DD", "MM/DD/YYYY")
     * If provided, this will be used instead of formatDate
     */
    format?: string;
    /**
     * Info heading for tooltip
     */
    infoHeading?: string;
    /**
     * Info description for tooltip
     */
    infoDescription?: string;
    /**
     * Custom Link component to render on the right side
     */
    LinkComponent?: React.ReactNode;
    /**
     * Link text
     */
    linkText?: string;
    /**
     * Link href
     */
    linkHref?: string;
    /**
     * Link click handler
     */
    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}
export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
export { datePickerVariants };
//# sourceMappingURL=DatePicker.d.ts.map