react-chrono
Version:
A Modern Timeline component for React
579 lines • 15.5 kB
TypeScript
export declare const cardWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
mode: {
horizontal: {
minWidth: "280px";
maxWidth: "320px";
};
vertical: {
width: "100%";
maxWidth: "100%";
};
alternating: {
width: "100%";
maxWidth: "100%";
};
};
side: {
left: {};
right: {};
center: string[];
};
size: {
sm: (string | {
minHeight: "120px";
})[];
md: (string | {
minHeight: "160px";
})[];
lg: (string | {
minHeight: "200px";
})[];
};
elevation: {
flat: string[];
low: string[];
medium: string[];
high: string[];
};
interactive: {
true: (string | {
cursor: "pointer";
selectors: {
'&:hover': {
boxShadow: `var(--${string})`;
transform: "translateY(-2px) scale(1.02)";
};
'&:active': {
transform: "translateY(0px) scale(0.98)";
transition: `all var(--${string}) var(--${string})`;
};
};
})[];
false: {};
};
selected: {
true: {
borderColor: `var(--${string})`;
boxShadow: `0 0 0 2px var(--${string})20, var(--${string})`;
};
false: {};
};
theme: {
default: {};
primary: {
borderColor: `var(--${string})`;
'::before': {
background: `linear-gradient(135deg, var(--${string})10 0%, transparent 50%, var(--${string})05 100%)`;
};
};
minimal: {
background: "transparent";
border: "none";
boxShadow: "none";
};
};
visible: {
true: (string | {
animationName: "slideInCard";
animationDuration: `var(--${string})`;
animationTimingFunction: `var(--${string})`;
animationFillMode: "both";
})[];
false: (string | {
transform: "translateY(20px) scale(0.9)";
})[];
};
}>;
export declare const cardHeader: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
default: {};
minimal: {
border: "none";
paddingBottom: number;
};
emphasized: {
background: `var(--${string})05`;
borderRadius: `var(--${string})`;
padding: `var(--${string})`;
marginBottom: `var(--${string})`;
};
};
}>;
export declare const cardTitle: import('@vanilla-extract/recipes').RuntimeFn<{
size: {
sm: string[];
md: string[];
lg: string[];
};
truncate: {
true: string[];
false: {};
};
align: {
left: string[];
center: string[];
right: string[];
};
}>;
export declare const cardSubtitle: import('@vanilla-extract/recipes').RuntimeFn<{
truncate: {
true: string[];
false: {};
};
align: {
left: string[];
center: string[];
right: string[];
};
}>;
export declare const cardContent: import('@vanilla-extract/recipes').RuntimeFn<{
spacing: {
tight: string[];
normal: string[];
loose: string[];
};
scrollable: {
true: (string | {
maxHeight: "300px";
scrollBehavior: "smooth";
})[];
false: {};
};
}>;
export declare const cardMedia: import('@vanilla-extract/recipes').RuntimeFn<{
aspectRatio: {
auto: {
aspectRatio: "auto";
};
square: {
aspectRatio: "1/1";
};
video: {
aspectRatio: "16/9";
};
photo: {
aspectRatio: "4/3";
};
wide: {
aspectRatio: "21/9";
};
};
size: {
sm: {
height: "120px";
};
md: {
height: "180px";
};
lg: {
height: "240px";
};
auto: {
height: "auto";
};
};
position: {
top: {
order: number;
marginBottom: `var(--${string})`;
};
bottom: {
order: number;
marginTop: `var(--${string})`;
};
background: (string | {
inset: number;
zIndex: number;
'::after': {
content: "\"\"";
position: "absolute";
inset: number;
background: "linear-gradient(45deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%)";
};
})[];
};
}>;
export declare const cardActions: import('@vanilla-extract/recipes').RuntimeFn<{
alignment: {
start: string[];
center: string[];
end: string[];
between: string[];
};
variant: {
default: {};
minimal: {
border: "none";
paddingTop: number;
marginTop: `var(--${string})`;
};
};
}>;
export declare const cardButton: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
ghost: {};
filled: {
background: `var(--${string})`;
color: "white";
selectors: {
'&:hover': {
background: `var(--${string})`;
borderColor: `var(--${string})`;
};
};
};
outline: {
border: `1px solid var(--${string})`;
color: `var(--${string})`;
selectors: {
'&:hover': {
background: `var(--${string})`;
color: "white";
};
};
};
};
size: {
sm: string[];
md: string[];
};
}>;
export declare const cardBadge: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
default: {};
filled: {
background: `var(--${string})`;
color: "white";
border: `1px solid var(--${string})`;
};
outline: {
background: "transparent";
border: `1px solid var(--${string})`;
};
};
size: {
sm: (string | {
minHeight: "20px";
})[];
md: (string | {
minHeight: "24px";
})[];
};
position: {
inline: {};
absolute: (string | {
top: `var(--${string})`;
right: `var(--${string})`;
})[];
};
}>;
export declare const cardSkeleton: import('@vanilla-extract/recipes').RuntimeFn<{
lines: {
1: {};
2: {};
3: {};
4: {};
};
}>;
export declare const skeletonLine: string;
export declare const cardAnimations: {
slideInCard: string;
slideInFromLeft: string;
slideInFromRight: string;
pulse: string;
bounce: string;
};
export declare const cardSystem: {
wrapper: import('@vanilla-extract/recipes').RuntimeFn<{
mode: {
horizontal: {
minWidth: "280px";
maxWidth: "320px";
};
vertical: {
width: "100%";
maxWidth: "100%";
};
alternating: {
width: "100%";
maxWidth: "100%";
};
};
side: {
left: {};
right: {};
center: string[];
};
size: {
sm: (string | {
minHeight: "120px";
})[];
md: (string | {
minHeight: "160px";
})[];
lg: (string | {
minHeight: "200px";
})[];
};
elevation: {
flat: string[];
low: string[];
medium: string[];
high: string[];
};
interactive: {
true: (string | {
cursor: "pointer";
selectors: {
'&:hover': {
boxShadow: `var(--${string})`;
transform: "translateY(-2px) scale(1.02)";
};
'&:active': {
transform: "translateY(0px) scale(0.98)";
transition: `all var(--${string}) var(--${string})`;
};
};
})[];
false: {};
};
selected: {
true: {
borderColor: `var(--${string})`;
boxShadow: `0 0 0 2px var(--${string})20, var(--${string})`;
};
false: {};
};
theme: {
default: {};
primary: {
borderColor: `var(--${string})`;
'::before': {
background: `linear-gradient(135deg, var(--${string})10 0%, transparent 50%, var(--${string})05 100%)`;
};
};
minimal: {
background: "transparent";
border: "none";
boxShadow: "none";
};
};
visible: {
true: (string | {
animationName: "slideInCard";
animationDuration: `var(--${string})`;
animationTimingFunction: `var(--${string})`;
animationFillMode: "both";
})[];
false: (string | {
transform: "translateY(20px) scale(0.9)";
})[];
};
}>;
header: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
default: {};
minimal: {
border: "none";
paddingBottom: number;
};
emphasized: {
background: `var(--${string})05`;
borderRadius: `var(--${string})`;
padding: `var(--${string})`;
marginBottom: `var(--${string})`;
};
};
}>;
title: import('@vanilla-extract/recipes').RuntimeFn<{
size: {
sm: string[];
md: string[];
lg: string[];
};
truncate: {
true: string[];
false: {};
};
align: {
left: string[];
center: string[];
right: string[];
};
}>;
subtitle: import('@vanilla-extract/recipes').RuntimeFn<{
truncate: {
true: string[];
false: {};
};
align: {
left: string[];
center: string[];
right: string[];
};
}>;
content: import('@vanilla-extract/recipes').RuntimeFn<{
spacing: {
tight: string[];
normal: string[];
loose: string[];
};
scrollable: {
true: (string | {
maxHeight: "300px";
scrollBehavior: "smooth";
})[];
false: {};
};
}>;
media: import('@vanilla-extract/recipes').RuntimeFn<{
aspectRatio: {
auto: {
aspectRatio: "auto";
};
square: {
aspectRatio: "1/1";
};
video: {
aspectRatio: "16/9";
};
photo: {
aspectRatio: "4/3";
};
wide: {
aspectRatio: "21/9";
};
};
size: {
sm: {
height: "120px";
};
md: {
height: "180px";
};
lg: {
height: "240px";
};
auto: {
height: "auto";
};
};
position: {
top: {
order: number;
marginBottom: `var(--${string})`;
};
bottom: {
order: number;
marginTop: `var(--${string})`;
};
background: (string | {
inset: number;
zIndex: number;
'::after': {
content: "\"\"";
position: "absolute";
inset: number;
background: "linear-gradient(45deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%)";
};
})[];
};
}>;
actions: import('@vanilla-extract/recipes').RuntimeFn<{
alignment: {
start: string[];
center: string[];
end: string[];
between: string[];
};
variant: {
default: {};
minimal: {
border: "none";
paddingTop: number;
marginTop: `var(--${string})`;
};
};
}>;
button: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
ghost: {};
filled: {
background: `var(--${string})`;
color: "white";
selectors: {
'&:hover': {
background: `var(--${string})`;
borderColor: `var(--${string})`;
};
};
};
outline: {
border: `1px solid var(--${string})`;
color: `var(--${string})`;
selectors: {
'&:hover': {
background: `var(--${string})`;
color: "white";
};
};
};
};
size: {
sm: string[];
md: string[];
};
}>;
badge: import('@vanilla-extract/recipes').RuntimeFn<{
variant: {
default: {};
filled: {
background: `var(--${string})`;
color: "white";
border: `1px solid var(--${string})`;
};
outline: {
background: "transparent";
border: `1px solid var(--${string})`;
};
};
size: {
sm: (string | {
minHeight: "20px";
})[];
md: (string | {
minHeight: "24px";
})[];
};
position: {
inline: {};
absolute: (string | {
top: `var(--${string})`;
right: `var(--${string})`;
})[];
};
}>;
skeleton: import('@vanilla-extract/recipes').RuntimeFn<{
lines: {
1: {};
2: {};
3: {};
4: {};
};
}>;
skeletonLine: string;
animations: {
slideInCard: string;
slideInFromLeft: string;
slideInFromRight: string;
pulse: string;
bounce: string;
};
};
export declare const cardUtils: {
getCardWidth: (mode: "horizontal" | "vertical" | "alternating", isMobile: boolean) => "100%" | "280px" | "320px";
getAnimationDelay: (index: number, staggerDelay?: number) => string;
shouldTruncateContent: (content: string, maxLength?: number) => boolean;
getElevation: (isInteractive: boolean, isSelected: boolean, isHovered: boolean) => "high" | "low" | "medium";
};
//# sourceMappingURL=card-system-v2.css.d.ts.map