aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
110 lines • 2.48 kB
TypeScript
import React from "react";
export interface DetailField {
id: string;
label: string;
value: any;
type?: "text" | "number" | "date" | "boolean" | "badge" | "link" | "custom";
render?: (value: any) => React.ReactNode;
copyable?: boolean;
width?: "auto" | "full" | "half" | "third" | "quarter";
}
export interface DetailSection {
id: string;
title: string;
description?: string;
fields?: DetailField[];
component?: React.ReactNode;
collapsible?: boolean;
defaultExpanded?: boolean;
}
export interface DetailTab {
id: string;
label: string;
icon?: React.ReactNode;
badge?: string | number;
content: React.ReactNode;
}
export interface DetailAction {
id: string;
label: string;
icon?: React.ReactNode;
variant?: "default" | "primary" | "secondary" | "error";
onClick: () => void;
disabled?: boolean;
loading?: boolean;
}
export interface GlassDetailViewProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Detail item title
*/
title?: string;
/**
* Detail item subtitle
*/
subtitle?: string;
/**
* Status badge
*/
status?: {
label: string;
variant?: "default" | "primary" | "secondary" | "success" | "warning" | "error";
};
/**
* Breadcrumb navigation
*/
breadcrumb?: React.ReactNode;
/**
* Header actions
*/
actions?: DetailAction[];
/**
* Detail sections
*/
sections?: DetailSection[];
/**
* Detail tabs
*/
tabs?: DetailTab[];
/**
* Active tab
*/
activeTab?: string;
/**
* Tab change handler
*/
onTabChange?: (tabId: string) => void;
/**
* Layout variant
*/
layout?: "default" | "sidebar" | "tabs" | "accordion";
/**
* Sidebar content (for sidebar layout)
*/
sidebar?: React.ReactNode;
/**
* Loading state
*/
loading?: boolean;
/**
* Error state
*/
error?: string;
/**
* Back action
*/
onBack?: () => void;
/**
* Share action
*/
onShare?: () => void;
/**
* Print action
*/
onPrint?: () => void;
}
/**
* GlassDetailView component
* Comprehensive detail view with multiple layout options
*/
export declare const GlassDetailView: React.ForwardRefExoticComponent<GlassDetailViewProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=GlassDetailView.d.ts.map