@loke/design-system
Version:
A design system with individually importable components
60 lines (59 loc) • 2.09 kB
TypeScript
import { type CalendarRangeProps, type CalendarSingleProps, type DateRange } from "@loke/design-system/calendar";
import { type ReactNode } from "react";
type DateTimePickerBaseProps = {
/**
* Placeholder text to display when no date is selected.
*/
placeholder?: string;
/**
* Custom text to display in the trigger button.
*/
triggerDisplay?: ReactNode;
/**
* Additional CSS class name to apply to the root element.
*/
className?: string;
};
type DateTimePickerSingleProps = Omit<CalendarSingleProps, "mode" | "selected" | "onSelect"> & DateTimePickerBaseProps & {
/**
* The selection mode for the datetime picker.
* Only 'single' and 'range' modes are supported.
*/
mode?: "single";
/**
* The selected date and time.
*/
selected?: Date;
/**
* Callback function triggered when a date and time is selected.
*/
onSelect?: (date?: Date) => void;
};
type DateTimePickerRangeProps = Omit<CalendarRangeProps, "mode" | "selected" | "onSelect"> & DateTimePickerBaseProps & {
/**
* The selection mode for the datetime picker.
* Only 'single' and 'range' modes are supported.
*/
mode: "range";
/**
* The selected date range with times.
*/
selected?: DateRange;
/**
* Callback function triggered when a date range is selected.
*/
onSelect?: (range?: DateRange) => void;
};
type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
/**
* DateTimePicker component that provides date and time selection.
*
* Features:
* - Supports single date/time and date/time range selection
* - Combines calendar for date selection with time inputs
* - Proper formatting for display in trigger button
* - Maintains all Calendar component functionality
*/
declare const DateTimePicker: import("react").ForwardRefExoticComponent<DateTimePickerProps & import("react").RefAttributes<HTMLDivElement>>;
export { DateTimePicker };
export type { DateTimePickerProps, DateTimePickerSingleProps, DateTimePickerRangeProps, };