aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
60 lines • 2 kB
TypeScript
import React from "react";
export interface DrawingTool {
type: "pen" | "brush" | "eraser" | "line" | "rectangle" | "circle" | "text";
size: number;
color: string;
opacity: number;
}
export interface DrawingStroke {
id: string;
tool: DrawingTool;
points: Array<{
x: number;
y: number;
pressure?: number;
}>;
timestamp: number;
}
export interface GlassDrawingCanvasProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
/** Canvas width */
width?: number;
/** Canvas height */
height?: number;
/** Current drawing tool */
tool?: DrawingTool;
/** Whether the canvas is read-only */
readOnly?: boolean;
/** Background color */
backgroundColor?: string;
/** Background image URL */
backgroundImage?: string;
/** Whether to show grid */
showGrid?: boolean;
/** Grid size */
gridSize?: number;
/** Whether to enable pressure sensitivity */
pressureSensitive?: boolean;
/** Whether to smooth strokes */
smoothStrokes?: boolean;
/** Maximum undo history */
maxHistory?: number;
/** Drawing data */
data?: DrawingStroke[];
/** Change handler */
onChange?: (strokes: DrawingStroke[]) => void;
/** Stroke complete handler */
onStrokeComplete?: (stroke: DrawingStroke) => void;
/** Export handler */
onExport?: (dataUrl: string, format: "png" | "jpeg" | "svg") => void;
/** Available tools */
availableTools?: DrawingTool["type"][];
/** Tool panel position */
toolPanelPosition?: "top" | "bottom" | "left" | "right" | "floating";
/** Whether to show tool panel */
showToolPanel?: boolean;
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassDrawingCanvas: React.ForwardRefExoticComponent<GlassDrawingCanvasProps & React.RefAttributes<HTMLDivElement>>;
export default GlassDrawingCanvas;
//# sourceMappingURL=GlassDrawingCanvas.d.ts.map