claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
124 lines • 3.83 kB
TypeScript
import type { Snippet } from 'svelte';
export type GalleryViewVariant = 'default' | 'compact' | 'detailed';
export type GalleryViewSize = 'sm' | 'md' | 'lg';
export type GalleryViewState = 'loading' | 'error' | 'empty' | undefined;
export type GridSize = 1 | 2 | 3 | 4 | 5 | 6;
export type SortDirection = 'asc' | 'desc';
export type SortKey = 'name' | 'date' | 'size' | 'type' | 'modified';
export type ContentType = 'image' | 'document' | 'block' | 'card' | 'video' | 'audio' | 'folder';
export interface GalleryItem {
id: string | number;
title: string;
type: ContentType;
thumbnail?: string;
description?: string;
size?: number;
date?: Date;
modified?: Date;
metadata?: Record<string, any>;
tags?: string[];
selected?: boolean;
alt?: string;
dimensions?: {
width: number;
height: number;
};
extension?: string;
mimeType?: string;
content?: string;
category?: string;
}
export interface GallerySort {
key: SortKey;
direction: SortDirection;
}
export interface GalleryFilter {
type?: ContentType[];
search?: string;
tags?: string[];
dateRange?: {
start?: Date;
end?: Date;
};
sizeRange?: {
min?: number;
max?: number;
};
}
export interface GallerySelection {
selectedItems: Set<string | number>;
selectAll: boolean;
indeterminate: boolean;
}
export interface BulkAction {
id: string;
label: string;
icon?: string;
variant?: 'default' | 'destructive';
action: (selectedItems: (string | number)[]) => void | Promise<void>;
disabled?: (selectedItems: (string | number)[]) => boolean;
}
export interface ViewOptions {
gridSize: GridSize;
showThumbnails: boolean;
showMetadata: boolean;
showSelection: boolean;
enableFiltering: boolean;
enableSorting: boolean;
enableBulkActions: boolean;
}
export interface GalleryViewProps {
items: GalleryItem[];
variant?: GalleryViewVariant;
size?: GalleryViewSize;
state?: GalleryViewState;
defaultGridSize?: GridSize;
defaultSort?: GallerySort;
defaultFilter?: GalleryFilter;
viewOptions?: Partial<ViewOptions>;
bulkActions?: BulkAction[];
selectable?: boolean;
multiSelect?: boolean;
maxSelections?: number;
virtualized?: boolean;
itemsPerPage?: number;
lazyLoading?: boolean;
ariaLabel?: string;
ariaDescription?: string;
itemRenderer?: Snippet<[GalleryItem, number]>;
emptyRenderer?: Snippet;
loadingRenderer?: Snippet;
errorRenderer?: Snippet<[Error]>;
class?: string;
itemClass?: string;
gridClass?: string;
onItemClick?: (item: GalleryItem, index: number) => void;
onItemDoubleClick?: (item: GalleryItem, index: number) => void;
onSelectionChange?: (selection: GallerySelection) => void;
onSortChange?: (sort: GallerySort) => void;
onFilterChange?: (filter: GalleryFilter) => void;
onBulkAction?: (action: BulkAction, selectedItems: (string | number)[]) => void;
onLoadMore?: () => void;
onRetry?: () => void;
}
export declare const GALLERY_BREAKPOINTS: {
readonly sm: "640px";
readonly md: "768px";
readonly lg: "1024px";
readonly xl: "1280px";
readonly '2xl': "1536px";
};
export declare const DEFAULT_GRID_SIZES: Record<string, GridSize>;
export declare const CONTENT_TYPE_ICONS: {
readonly image: "🖼️";
readonly document: "📄";
readonly block: "🧱";
readonly card: "🗃️";
readonly video: "🎥";
readonly audio: "🎵";
readonly folder: "📁";
};
export declare const formatFileSize: (bytes: number) => string;
export declare const formatDate: (date: Date) => string;
export declare const generateItemId: (item: GalleryItem) => string;
//# sourceMappingURL=types.d.ts.map