aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
60 lines • 2.41 kB
TypeScript
import React from "react";
export interface GlassTreeNode {
id: string;
label: string;
icon?: React.ReactNode;
children?: GlassTreeNode[];
disabled?: boolean;
metadata?: Record<string, any>;
}
export interface GlassTreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect" | "onDragStart" | "onDrop"> {
/** Tree data */
data?: GlassTreeNode[];
/** Currently selected node */
selectedId?: string;
/** Expanded node IDs */
expandedIds?: string[];
/** Default expanded node IDs */
defaultExpandedIds?: string[];
/** Selection mode */
selectionMode?: "none" | "single" | "multiple";
/** Multiple selected node IDs */
selectedIds?: string[];
/** Default selected node IDs */
defaultSelectedIds?: string[];
/** Whether to show connecting lines */
showLines?: boolean;
/** Whether to show icons */
showIcons?: boolean;
/** Whether nodes are draggable */
draggable?: boolean;
/** Whether to show checkboxes for multi-select */
showCheckboxes?: boolean;
/** Size variant */
size?: "sm" | "md" | "lg";
/** Visual variant */
variant?: "default" | "minimal" | "bordered" | "filled";
/** Indentation per level */
indentation?: number;
/** Custom node renderer */
renderNode?: (node: GlassTreeNode, level: number, isSelected: boolean, isExpanded: boolean) => React.ReactNode;
/** Custom expand/collapse icon */
expandIcon?: React.ReactNode;
/** Custom collapse icon */
collapseIcon?: React.ReactNode;
/** Selection change handler */
onSelect?: (nodeId: string, node: GlassTreeNode) => void;
/** Multi-selection change handler */
onSelectionChange?: (nodeIds: string[], nodes: GlassTreeNode[]) => void;
/** Expand/collapse handler */
onExpand?: (nodeId: string, expanded: boolean) => void;
/** Drag start handler */
onDragStart?: (node: GlassTreeNode, event: React.DragEvent) => void;
/** Drop handler */
onDrop?: (draggedNode: GlassTreeNode, targetNode: GlassTreeNode, position: "before" | "after" | "inside") => void;
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassTreeView: React.ForwardRefExoticComponent<GlassTreeViewProps & React.RefAttributes<HTMLDivElement>>;
export default GlassTreeView;
//# sourceMappingURL=GlassTreeView.d.ts.map