aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
118 lines • 2.91 kB
TypeScript
import React from "react";
export interface GlassBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
/**
* Badge variant
*/
variant?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "info" | "outline" | "ghost" | (string & {});
/**
* Badge size
*/
size?: "xs" | "sm" | "md" | "lg";
/**
* Badge shape
*/
shape?: "glass-radius-md" | "pill" | "square";
/**
* Whether badge has a dot indicator
*/
dot?: boolean;
/**
* Left icon
*/
leftIcon?: React.ReactNode;
/**
* Right icon
*/
rightIcon?: React.ReactNode;
/**
* Whether badge is removable
*/
removable?: boolean;
/**
* Remove callback
*/
onRemove?: () => void;
/**
* Animation on mount
*/
animate?: boolean;
/**
* Animation preset
*/
animation?: "scale" | "fade" | "bounce";
/**
* Respect user's motion preferences
*/
respectMotionPreference?: boolean;
/**
* ARIA label for the badge
*/
"aria-label"?: string;
}
/**
* GlassBadge component
* A glassmorphism badge with various styles and states
*/
export declare const GlassBadge: React.ForwardRefExoticComponent<GlassBadgeProps & React.RefAttributes<HTMLSpanElement>>;
/**
* StatusBadge component
*/
export interface StatusBadgeProps extends Omit<GlassBadgeProps, "variant" | "dot"> {
/**
* Status type
*/
status: "online" | "offline" | "away" | "busy" | "pending" | "active" | "inactive";
/**
* Whether to show as dot only
*/
dotOnly?: boolean;
}
export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLSpanElement>>;
/**
* CountBadge component
*/
export interface CountBadgeProps extends Omit<GlassBadgeProps, "children"> {
/**
* Count value
*/
count: number;
/**
* Maximum count to display
*/
max?: number;
/**
* Whether to show zero count
*/
showZero?: boolean;
}
export declare const CountBadge: React.ForwardRefExoticComponent<CountBadgeProps & React.RefAttributes<HTMLSpanElement>>;
/**
* BadgeGroup component
*/
export interface BadgeGroupProps {
/**
* Badges to display
*/
badges: Array<{
id: string;
label: string;
variant?: GlassBadgeProps["variant"];
removable?: boolean;
onRemove?: () => void;
}>;
/**
* Maximum badges to show
*/
max?: number;
/**
* Spacing between badges
*/
spacing?: "tight" | "normal" | "relaxed";
/**
* Whether badges wrap to new lines
*/
wrap?: boolean;
className?: string;
}
export declare function BadgeGroup({ badges, max, spacing, wrap, className, }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=GlassBadge.d.ts.map