import { OffsetOptions, Placement, UseHoverProps, UseTransitionStylesProps } from '@floating-ui/react';
import { CSSProperties, ForwardedRef, HTMLAttributes, JSXElementConstructor, ReactElement, SVGAttributes } from 'react';

export type Activity = {
	date: string;
	count: number;
	level: number;
};
export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
export type DayName = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
export type Labels = Partial<{
	months: Array<string>;
	weekdays: Array<string>;
	totalCount: string;
	legend: Partial<{
		less: string;
		more: string;
	}>;
}>;
export type Color = string;
export type ThemeInput = {
	light: Array<Color>;
	dark?: Array<Color>;
} | {
	light?: Array<Color>;
	dark: Array<Color>;
};
export type ColorScheme = "light" | "dark";
export type BlockElement = ReactElement<SVGAttributes<SVGRectElement> & HTMLAttributes<SVGRectElement>, JSXElementConstructor<SVGRectElement>>;
export type TooltipConfig = {
	placement?: Placement;
	offset?: OffsetOptions;
	transitionStyles?: UseTransitionStylesProps;
	hoverRestMs?: UseHoverProps["restMs"];
	withArrow?: boolean;
};
export type Props = {
	/**
	 * List of calendar entries. Each Activity object requires an ISO 8601 date
	 * string in the `yyyy-MM-dd` format, a `count` property indicating the amount
	 * of tracked data, and a `level` property in the range `[minLevel, maxLevel]`
	 * representing activity intensity. By default, `minLevel` is 0 and `maxLevel`
	 * is 4, resulting in five activity levels.
	 *
	 * Dates without corresponding entries are assumed to have no activity. This
	 * allows you to set arbitrary start and end dates for the calendar by passing
	 * empty entries as the first and last items.
	 *
	 * @example
	 * {
	 *   date: "2021-02-20",
	 *   count: 16,
	 *   level: 3
	 * }
	 */
	data: Array<Activity>;
	/**
	 * Margin between blocks in pixels.
	 */
	blockMargin?: number;
	/**
	 * Border radius of blocks in pixels.
	 */
	blockRadius?: number;
	/**
	 * Block size in pixels.
	 */
	blockSize?: number;
	/**
	 * Class name to add to the component container.
	 */
	className?: string;
	/**
	 * Use the `'light'` or `'dark'` color scheme instead of the system one.
	 */
	colorScheme?: ColorScheme;
	/**
	 * Font size for text in pixels.
	 */
	fontSize?: number;
	/**
	 * Localization strings for all calendar labels.
	 * `totalCount` supports the placeholders `{{count}}` and `{{year}}`.
	 */
	labels?: Labels;
	/**
	 * Maximum activity level, 4 by default.
	 * @see minLevel
	 */
	maxLevel?: number;
	/**
	 * Minimum activity level, 0 by default.
	 * @see maxLevel
	 */
	minLevel?: number;
	/**
	 * Toggle to display the calendar loading state. The `data` property is
	 * ignored if set.
	 */
	loading?: boolean;
	/**
	 * Ref to access the calendar DOM node.
	 */
	ref?: ForwardedRef<HTMLElement>;
	/**
	 * Render prop for calendar blocks (activities). Useful to attach event
	 * handlers or to wrap the element with a link. Use `React.cloneElement` to
	 * pass additional props to the element if necessary.
	 */
	renderBlock?: (block: BlockElement, activity: Activity) => ReactElement;
	/**
	 * Render prop for color legend blocks. Use `React.cloneElement` to pass
	 * additional props to the element if necessary.
	 */
	renderColorLegend?: (block: BlockElement, level: number) => ReactElement;
	/**
	 * Toggle to hide the color legend below the calendar.
	 */
	showColorLegend?: boolean;
	/**
	 * Toggle to hide the month labels above the calendar.
	 */
	showMonthLabels?: boolean;
	/**
	 * Toggle to hide the total count below the calendar.
	 */
	showTotalCount?: boolean;
	/**
	 * Toggle to show weekday labels left to the calendar.
	 * Alternatively, provide an array of ISO 8601 weekday names to display.
	 *
	 * @example ['mon', 'wed', 'fri']
	 */
	showWeekdayLabels?: boolean | Array<DayName>;
	/**
	 * Style object to pass to the component container.
	 */
	style?: CSSProperties;
	/**
	 * Set the calendar colors for the light and dark color schemes. Provide
	 * the colors for all activity levels per scheme explicitly or specify two
	 * colors (the zero and maximum intensity) to calculate a scale automatically.
	 * The number of activity levels is controlled by the `minLevel` and
	 * `maxLevel` properties.
	 * If you have negative activity levels, you can also pass three colors,
	 * representing the negative, zero, and positive levels, to calculate a
	 * corresponding scale. For explicit themes the color count must match the
	 * number of activity levels. Colors can be specified in any valid CSS format.
	 *
	 * For undefined color schemes the default theme is used. By default, the
	 * current system color scheme is applied, but you can enforce a specific
	 * scheme with the `colorScheme` prop.
	 *
	 * Example:
	 *
	 * ```tsx
	 * <ActivityCalendar
	 *   data={data}
	 *   theme={{
	 *     light: ['hsl(0, 0%, 92%)', 'firebrick'],
	 *     dark: ['#333', 'rgb(214, 16, 174)'],
	 *   }}
	 * />
	 * ```
	 *
	 * @see colorScheme
	 * @see minLevel
	 * @see maxLevel
	 */
	theme?: ThemeInput;
	/**
	 * Tooltips to display when hovering over activity blocks or the color legend
	 * below the calendar.
	 *
	 * @see [Documentation](https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--tooltips)
	 *
	 */
	tooltips?: {
		activity?: TooltipConfig & {
			text: (activity: Activity) => string;
		};
		colorLegend?: TooltipConfig & {
			text: (level: number) => string;
		};
	};
	/**
	 * Index of day to be used as the week start. 0 represents Sunday.
	 */
	weekStart?: DayIndex;
};
export declare const ActivityCalendar: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;

export {};