aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
112 lines • 3.38 kB
TypeScript
/**
* Card Composition Patterns
* Common card layouts and patterns
*/
import React from "react";
/**
* Basic Card Pattern
*/
export interface BasicCardProps {
title: string;
description?: string;
children: React.ReactNode;
actions?: React.ReactNode;
className?: string;
/** Glass surface intent */
intent?: "neutral" | "primary" | "success" | "warning" | "danger" | "info";
/** Glass surface elevation */
elevation?: "level1" | "level2" | "level3" | "level4";
/** Performance tier */
tier?: "low" | "medium" | "high";
}
export declare function BasicCard({ title, description, children, actions, className, }: BasicCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Feature Card Pattern
*/
export interface FeatureCardProps {
title: string;
description: string;
icon?: React.ReactNode;
image?: string;
badge?: string;
actions?: React.ReactNode;
className?: string;
onClick?: () => void;
}
export declare function FeatureCard({ title, description, icon, image, badge, actions, className, onClick, }: FeatureCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Stat Card Pattern
*/
export interface StatCardProps {
title: string;
value: string | number;
change?: {
value: string | number;
trend: "up" | "down" | "neutral";
};
description?: string;
icon?: React.ReactNode;
className?: string;
}
export declare function StatCard({ title, value, change, description, icon, className, }: StatCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Profile Card Pattern
*/
export interface ProfileCardProps {
name: string;
role?: string;
avatar?: string;
bio?: string;
stats?: Array<{
label: string;
value: string | number;
}>;
actions?: React.ReactNode;
className?: string;
}
export declare function ProfileCard({ name, role, avatar, bio, stats, actions, className, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Notification Card Pattern
*/
export interface NotificationCardProps {
title: string;
message: string;
type?: "info" | "success" | "warning" | "error";
timestamp?: string;
read?: boolean;
avatar?: string;
actions?: React.ReactNode;
onDismiss?: () => void;
className?: string;
}
export declare function NotificationCard({ title, message, type, timestamp, read, avatar, actions, onDismiss, className, }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Pricing Card Pattern
*/
export interface PricingCardProps {
name: string;
price: string;
period?: string;
description?: string;
features: string[];
popular?: boolean;
actions?: React.ReactNode;
className?: string;
}
export declare function PricingCard({ name, price, period, description, features, popular, actions, className, }: PricingCardProps): import("react/jsx-runtime").JSX.Element;
/**
* Activity Card Pattern
*/
export interface ActivityCardProps {
title: string;
items: Array<{
id: string;
action: string;
user?: string;
timestamp: string;
details?: string;
}>;
className?: string;
}
export declare function ActivityCard({ title, items, className }: ActivityCardProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=patterns.d.ts.map