aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
82 lines • 2.55 kB
TypeScript
import React from "react";
export interface PatternElement {
type: "circle" | "square" | "triangle" | "line" | "arc" | "polygon" | "text";
x: number;
y: number;
width: number;
height: number;
rotation: number;
color: string;
opacity: number;
strokeColor: string;
strokeWidth: number;
id: string;
properties?: Record<string, any>;
}
export interface PatternLayer {
name: string;
elements: PatternElement[];
visible: boolean;
locked: boolean;
opacity: number;
blendMode: string;
id: string;
}
export interface PatternTemplate {
name: string;
category: string;
preview: string;
layers: PatternLayer[];
id: string;
}
export interface GlassPatternBuilderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
/** Canvas width */
width?: number;
/** Canvas height */
height?: number;
/** Current pattern layers */
layers?: PatternLayer[];
/** Active layer index */
activeLayerIndex?: number;
/** Selected element IDs */
selectedElements?: string[];
/** Whether grid is visible */
showGrid?: boolean;
/** Grid size */
gridSize?: number;
/** Whether to snap to grid */
snapToGrid?: boolean;
/** Zoom level */
zoom?: number;
/** Pattern templates */
templates?: PatternTemplate[];
/** Available colors */
colorPalette?: string[];
/** Whether to show rulers */
showRulers?: boolean;
/** Background color */
backgroundColor?: string;
/** Export format */
exportFormat?: "png" | "svg" | "json";
/** Pattern change handler */
onChange?: (layers: PatternLayer[]) => void;
/** Layer change handler */
onLayerChange?: (layers: PatternLayer[], activeIndex: number) => void;
/** Element selection handler */
onElementSelect?: (elementIds: string[]) => void;
/** Template apply handler */
onTemplateApply?: (template: PatternTemplate) => void;
/** Export handler */
onExport?: (data: string, format: string) => void;
/** Show controls */
showControls?: boolean;
/** Show layer panel */
showLayerPanel?: boolean;
/** Show element properties */
showProperties?: boolean;
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassPatternBuilder: React.ForwardRefExoticComponent<GlassPatternBuilderProps & React.RefAttributes<HTMLDivElement>>;
export default GlassPatternBuilder;
//# sourceMappingURL=GlassPatternBuilder.d.ts.map