tharikida-ui
Version:
A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.
57 lines (56 loc) • 2.86 kB
TypeScript
/**
* `Calendar` is a date picker component with theming, custom styles, and initial date support.
*
* @param {object} props - The properties to customize the `Calendar` component.
* @param {(day: number | null) => void} [props.handleDateClick] - Callback when a date is selected.
* @param {string} [props.size] - Width of the calendar component.
* @param {Date} [props.initialDate] - The initial date to display as selected.
* @param {number} [props.cornerRadius] - Custom border radius for the calendar. Overrides theme.cornerRadius if provided.
* @param {string} [props.primaryColor] - Primary color for selected date and highlights.
* @param {string} [props.textColor] - Text color for calendar.
* @param {string} [props.backgroundColor] - Background color for calendar.
* @param {number} [props.fontSize] - Font size for calendar text.
* @param {string} [props.fontFamily] - Font family for calendar text.
* @param {string} [props.borderColor] - Border color for calendar.
* @param {string} [props.borderWidth] - Border width for calendar.
* @param {string} [props.borderStyle] - Border style for calendar.
* @param {string} [props.fontWeight] - Font weight for calendar text.
* @param {string} [props.transitionDuration] - Transition duration for calendar popup.
* @param {string} [props.hoverColor] - Hover color for date cells.
*
* @returns {JSX.Element} A styled calendar date picker component.
*/
interface CalendarProps {
/** Callback when a date is selected */
handleDateClick?: (day: number | null) => void;
/** Width of the calendar component */
size?: string;
/** The initial date to display as selected */
initialDate?: Date;
/** Custom border radius for the calendar. Overrides theme.cornerRadius if provided. */
cornerRadius?: number;
/** Primary color for selected date and highlights */
primaryColor?: string;
/** Text color for calendar */
textColor?: string;
/** Background color for calendar */
backgroundColor?: string;
/** Font size for calendar text */
fontSize?: number;
/** Font family for calendar text */
fontFamily?: string;
/** Border color for calendar */
borderColor?: string;
/** Border width for calendar */
borderWidth?: string;
/** Border style for calendar */
borderStyle?: string;
/** Font weight for calendar text */
fontWeight?: string;
/** Transition duration for calendar popup */
transitionDuration?: string;
/** Hover color for date cells */
hoverColor?: string;
}
declare const Calendar: ({ size, handleDateClick, initialDate, cornerRadius, primaryColor, textColor, backgroundColor, fontSize, fontFamily, borderColor, borderWidth, borderStyle, fontWeight, transitionDuration, hoverColor, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
export default Calendar;