claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
72 lines • 1.98 kB
TypeScript
interface Widget {
id: string;
type: string;
title: string;
component?: any;
props?: Record<string, any>;
size: {
w: number;
h: number;
};
position: {
x: number;
y: number;
};
minSize?: {
w: number;
h: number;
};
maxSize?: {
w: number;
h: number;
};
resizable?: boolean;
draggable?: boolean;
removable?: boolean;
className?: string;
}
interface Layout {
columns: number;
rowHeight: number;
margin: [number, number];
containerPadding: [number, number];
}
interface Breakpoints {
[key: string]: {
columns: number;
minWidth: number;
};
}
interface Props {
widgets: Widget[];
layout?: Partial<Layout>;
editable?: boolean;
responsive?: boolean;
breakpoints?: Breakpoints;
focusMode?: boolean;
focusedWidget?: string | null;
onLayoutChange?: (widgets: Widget[]) => void;
onWidgetAdd?: (widget: Partial<Widget>) => void;
onWidgetRemove?: (widgetId: string) => void;
onWidgetFocus?: (widgetId: string | null) => void;
class?: string;
'data-testid'?: string;
}
/**
* DashboardGrid
*
* Modular dashboard layout system with drag-and-drop, responsive grid, and ADHD-optimized design.
*
* @prop {Array} widgets - Array of widget configurations
* @prop {Object} [layout] - Grid layout configuration
* @prop {boolean} [editable] - Enable drag and drop editing
* @prop {boolean} [responsive] - Enable responsive behavior
* @prop {Object} [breakpoints] - Custom breakpoints
* @prop {Function} [onLayoutChange] - Layout change callback
* @prop {Function} [onWidgetAdd] - Widget add callback
* @prop {Function} [onWidgetRemove] - Widget remove callback
*/
declare const DashboardGrid: import("svelte").Component<Props, {}, "">;
type DashboardGrid = ReturnType<typeof DashboardGrid>;
export default DashboardGrid;
//# sourceMappingURL=DashboardGrid.svelte.d.ts.map