import { Action, Theme } from '@evlop/commons';
import React$1 from 'react';
import { HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
import { BackgroundProps, BorderProps, ColorProps, FlexboxProps, LayoutProps, OverflowProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';

interface GradientProps {
	opacity?: number;
	angle?: string | number;
	fromColor?: string;
	fromStop?: string | number;
	toColor?: string;
	toStop?: string | number;
	backgroundImageUrl?: string;
}
interface BoxProps extends SpaceProps<Theme>, LayoutProps<Theme>, FlexboxProps<Theme>, BackgroundProps<Theme>, ColorProps<Theme>, BorderProps<Theme>, PositionProps<Theme>, ShadowProps<Theme> {
	gradient?: GradientProps;
	[key: string]: any;
}
export declare const Box: React$1.ComponentType<BoxProps>;
export declare const Flexbox: any;
interface TextGradientProps {
	angle?: string | number;
	fromColor?: string;
	fromStop?: string | number;
	toColor?: string;
	toStop?: string | number;
}
interface TextProps extends SpaceProps<Theme>, LayoutProps<Theme>, ColorProps<Theme>, TypographyProps<Theme>, BorderProps<Theme>, PositionProps<Theme> {
	textVariant?: string;
	variant?: string;
	gradient?: TextGradientProps;
	lines?: number;
	textTransform?: string;
	fontFamily?: string;
	[key: string]: any;
}
declare const Text$1: React$1.ComponentType<TextProps>;
type Dimension = string | number | Array<number> | Array<string>;
type ColorProp = "primary" | "secondary" | "info" | "success" | "danger" | "warining" | "black" | "white";
type SizeProp = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | number;
interface CommonProps {
	margins?: Dimension;
	paddings?: Dimension;
	borderRadiuses?: Dimension;
	textAlign?: "left" | "right" | "center" | "justify";
	minHeight?: number | string;
	hovered?: boolean;
	focused?: boolean;
	className?: string;
	name?: string;
	model?: string;
	dataModel?: string;
	configModel?: string;
}
interface IconProps extends ColorProps<Theme>, CommonProps {
	icon?: string;
	className?: string;
	fontFamily?: string;
	iconSize?: SizeProp;
	size?: SizeProp;
	[key: string]: any;
}
export declare const Icon: React$1.FC<IconProps>;
type ButtonVariant = "filled" | "outlined" | "dim-outlined" | "dim-filled-outlined" | "link" | "ghost";
type ButtonSize = "sm" | "md" | "lg";
interface ButtonProps extends SpaceProps<Theme>, LayoutProps<Theme>, TypographyProps<Theme>, BorderProps<Theme> {
	href?: string;
	action?: Action;
	buttonSize?: ButtonSize;
	size?: ButtonSize | SizeProp;
	buttonStyle?: ButtonVariant;
	variant?: ButtonVariant;
	color?: string | ColorProp;
	fontFamily?: string;
	disabled?: boolean;
	loading?: boolean;
	[key: string]: any;
}
export declare const Button: React$1.FC<ButtonProps>;
interface ImageProps extends Omit<React$1.ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "sizes" | "aspectRatio" | "objectFit" | "height" | "width">, Omit<SpaceProps<Theme>, "minHeight">, Omit<LayoutProps<Theme>, "minHeight" | "height" | "width">, BorderProps<Theme>, Omit<CommonProps, "minHeight"> {
	src: string;
	loadWidth?: number | string | number[];
	objectFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
	aspectRatio?: string | number;
	[key: string]: any;
}
declare const Image$1: React$1.FC<ImageProps>;
export declare const Container: any;
interface CarouselProps extends SpaceProps<Theme>, LayoutProps<Theme>, OverflowProps<Theme> {
	children?: React$1.ReactNode;
	activeIndex?: number;
	noOfItems?: number | number[];
	itemWidth?: string | number;
	gap?: string | number;
	autoPlay?: boolean;
	autoPlayInterval?: number;
	onChangeIndex?: (index: number) => void;
	onChangeVisibleItemsCount?: (count: number) => void;
	paginationType?: "none" | "dots" | "arrows";
	paginationMode?: "single" | "visible-items";
	inactiveItemOpacity?: number;
	inactiveItemScale?: number;
	activeItemStyle?: React$1.CSSProperties;
	inactiveItemStyle?: React$1.CSSProperties;
	itemStart?: "left" | "center";
	alignItems?: "start" | "center" | "end";
}
interface CarouselHandle {
	goToIndex: (index: number) => void;
	next: () => void;
	previous: () => void;
}
export declare const Carousel: React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<CarouselHandle>>;
interface CollapsibleProps extends BoxProps {
	collapsed?: boolean;
	children?: React$1.ReactNode;
}
export declare const Collapsible: React$1.FC<CollapsibleProps>;
export declare const Grid: any;
interface MasonryItem {
	id: string;
}
declare const MasonryItem: any;
interface MasonryProps<T extends MasonryItem> {
	items: T[];
	renderItem: (item: T) => React$1.ReactNode;
	/** Space between items in px */
	gap?: number;
	/** Number of columns (fixed for consistent width) */
	itemsPerRow?: number;
	className?: string;
	style?: React$1.CSSProperties;
}
/**
 * Masonry layout component
 * - Uses a fixed number of columns (default 3) for consistent item width
 * - Uses ResizeObserver to track container width
 * - Positions children with absolute positioning
 * - Sets container height based on tallest column
 */
export declare function Masonry<T extends MasonryItem>({ items, renderItem, gap, itemsPerRow: columnCountProp, className, style, }: MasonryProps<T>): React$1.JSX.Element;
interface HtmlProps {
	content?: string;
	":html"?: string;
}
export declare function Html({ content, ":html": html }: HtmlProps): React$1.JSX.Element;
interface MarkdownProps {
	content?: string;
	":markdown"?: string;
	className?: string;
}
export declare function Markdown({ content, ":markdown": markdown, className }: MarkdownProps): React$1.JSX.Element;
interface InlineMarkdownProps {
	content?: string;
	":markdown"?: string;
}
export declare function InlineMarkdown({ content, ":markdown": markdown }: InlineMarkdownProps): React$1.JSX.Element;
interface PositionObserverProps {
	name?: string;
	children?: React$1.ReactNode;
}
export declare function PositionObserver({ name, children }: PositionObserverProps): React$1.JSX.Element;
interface VisibilitySensorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onVisibilityChange"> {
	name?: string;
	threshold?: number;
	children?: React$1.ReactNode;
	onVisibilityChange?: (isVisible: boolean) => void;
	once?: boolean;
}
export declare function VisibilitySensor({ name, threshold, children, onVisibilityChange, once, ...props }: VisibilitySensorProps): React$1.JSX.Element;
interface LottieProps {
	src?: string;
	animationData?: object;
	renderer?: "svg" | "canvas" | "html";
	loop?: boolean;
	autoplay?: boolean;
	pause?: boolean;
	name?: string;
	style?: React$1.CSSProperties;
	onComplete?: () => void;
	onLoopComplete?: () => void;
	onEnterFrame?: () => void;
	onSegmentStart?: () => void;
	onDestroy?: () => void;
	onConfigReady?: () => void;
	onDataReady?: () => void;
	onDOMLoaded?: () => void;
	onError?: (error: Error) => void;
}
/**
 * <LottieCDN src="/path/to/anim.json" loop autoplay style={{width:200,height:200}} />
 */
export declare function Lottie({ src, // URL of the .json OR omit and pass animationData
animationData, // already‑parsed JSON object
renderer, // svg | canvas | html
loop, autoplay, pause, name, // optional name for debugging
style, // width/height etc.
onComplete, // callback function when animation completes
onLoopComplete, // callback function when a loop completes
onEnterFrame, // callback function on each frame
onSegmentStart, // callback function when a segment starts
onDestroy, // callback function when animation is destroyed
onConfigReady, // callback function when initial config is done
onDataReady, // callback function when all parts are loaded
onDOMLoaded, // callback function when elements are added to DOM
onError, }: LottieProps): React$1.JSX.Element;
export declare const Skeleton: any;

export {
	Image$1 as Image,
	Text$1 as Text,
};

export {};