aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
67 lines • 2.52 kB
TypeScript
import React from "react";
export interface GlassChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
/** Chip content */
children: React.ReactNode;
/** Visual variant */
variant?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "info" | "outline" | "filled";
/** Size of the chip */
size?: "xs" | "sm" | "md" | "lg";
/** Whether the chip is removable */
removable?: boolean;
/** Whether the chip is selected/active */
selected?: boolean;
/** Whether the chip is disabled */
disabled?: boolean;
/** Whether the chip is clickable */
clickable?: boolean;
/** Left icon or avatar */
avatar?: React.ReactNode;
/** Left icon */
icon?: React.ReactNode;
/** Custom remove icon */
removeIcon?: React.ReactNode;
/** Remove handler */
onRemove?: (event: React.MouseEvent) => void;
/** Selection handler */
onSelect?: (selected: boolean) => void;
/** Click handler */
onClick?: (event: React.MouseEvent) => void;
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassChip: React.ForwardRefExoticComponent<GlassChipProps & React.RefAttributes<HTMLDivElement>>;
export interface GlassChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
/** Array of chip data */
chips: Array<{
id: string;
label: React.ReactNode;
value?: string;
removable?: boolean;
disabled?: boolean;
avatar?: React.ReactNode;
icon?: React.ReactNode;
}>;
/** Selection mode */
selectionMode?: "none" | "single" | "multiple";
/** Selected values */
selectedValues?: string[];
/** Default selected values */
defaultSelectedValues?: string[];
/** Selection change handler */
onChange?: (selectedValues: string[]) => void;
/** Chip remove handler */
onRemove?: (chipId: string) => void;
/** Chip size */
size?: "xs" | "sm" | "md" | "lg";
/** Chip variant */
variant?: GlassChipProps["variant"];
/** Spacing between chips */
spacing?: "tight" | "normal" | "relaxed";
/** Whether chips should wrap */
wrap?: boolean;
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassChipGroup: React.ForwardRefExoticComponent<GlassChipGroupProps & React.RefAttributes<HTMLDivElement>>;
export default GlassChip;
//# sourceMappingURL=GlassChip.d.ts.map