@makolabs/ripple/dist/index.d.ts

Simple Svelte 5 powered component library ✨

import { ChartColor, Color, Size } from './variants.js';
/**
 * Size System:
 * - Size.*: Component dimensions (XS, SM, BASE, LG, XL, XXL)
 */
export type VariantSizes = (typeof Size)[keyof typeof Size];
export type VariantColors = (typeof Color)[keyof typeof Color];
/**
 * Color System:
 * - Color.*: UI component colors (buttons, text, backgrounds)
 *   Options: DEFAULT, PRIMARY, SECONDARY, INFO, SUCCESS, WARNING, DANGER
 * - ChartColor.*: Chart-specific colors, only supported within series configurations (lines, areas, bars)
 *   Options: HEALTH, PROPERTY, AUTO, LIFE, OTHER, DEFAULT
 * - ChartColors: Record type mapping ChartColor enum to string values
 */
export { Color, Size, ChartColor };
import type { ClassValue } from 'tailwind-variants';
import type { Snippet } from 'svelte';
import type { Component } from 'svelte';
import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget, DOMAttributes } from 'svelte/elements';
import type { ECharts } from 'echarts/types/src/export/core.js';
import type { SuperForm } from 'sveltekit-superforms';
import type { FileAction, StorageAdapter } from './adapters/storage/types.js';
export type BadgeProps = {
    size?: VariantSizes;
    color?: VariantColors;
    class?: ClassValue;
    children: Snippet;
    onclose?: (event: MouseEvent) => void;
};
export type BaseButtonProps = {
    class?: ClassValue;
    variant?: 'solid' | 'outline' | 'ghost' | 'link';
    color?: VariantColors;
    size?: VariantSizes;
    rounded?: 'none' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'full';
    disabled?: boolean | undefined | null;
    isLoading?: boolean;
    children?: Snippet;
};
export type ButtonHTMLProps = {
    href?: never;
} & HTMLButtonAttributes;
export type AnchorHTMLProps = {
    rel?: string | undefined | null;
    target?: HTMLAttributeAnchorTarget | undefined | null;
    referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined | null;
    href: string;
} & Record<string, unknown>;
export type ButtonProps = BaseButtonProps & (ButtonHTMLProps | AnchorHTMLProps);
export type MakeModalProps = {
    open?: boolean;
    onclose?: () => void;
    title?: string;
    description?: string;
    hideCloseButton?: boolean;
    closeOnBackdropClick?: boolean;
    closeOnEsc?: boolean;
    position?: 'top' | 'center' | 'bottom';
    class?: string;
    backdropclass?: string;
    contentclass?: string;
    headerclass?: string;
    bodyclass?: string;
    titleclass?: string;
    children?: Snippet;
    header?: Snippet;
    footer?: Snippet;
    custom?: Snippet;
};
export type DrawerProps = {
    open?: boolean;
    onclose?: () => void;
    title?: string;
    position?: 'left' | 'right';
    size?: VariantSizes;
    class?: string;
    backdropclass?: string;
    contentclass?: string;
    headerclass?: string;
    bodyclass?: string;
    titleclass?: string;
    footerclass?: string;
    children?: Snippet;
    header?: Snippet;
    footer?: Snippet;
};
export type DropdownItem = {
    label: string;
    href?: string;
    icon?: Component;
    onclick?: () => void;
    active?: boolean;
};
export type DropSection = {
    items: DropdownItem[];
};
export type DropHeaderConfig = {
    title?: string;
    subtitle?: string;
    content?: Snippet<[]>;
    class?: ClassValue;
    titleClass?: ClassValue;
    subtitleClass?: ClassValue;
    onclick?: () => void;
};
export type DropdownMenuProps = {
    open?: boolean;
    sections: DropSection[];
    label?: string;
    icon?: Component;
    containerClass?: ClassValue;
    itemClass?: ClassValue;
    class?: ClassValue;
    size?: VariantSizes;
    disabled?: boolean;
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    width?: string;
    header?: DropHeaderConfig;
};
export type SelectItem = {
    label: string;
    value: string;
    disabled?: boolean;
    icon?: Component;
};
export type SelectProps = {
    items: SelectItem[];
    value?: string | string[];
    multiple?: boolean;
    placeholder?: string;
    searchable?: boolean;
    disabled?: boolean;
    size?: VariantSizes;
    class?: ClassValue;
    containerClass?: ClassValue;
    listClass?: ClassValue;
    itemClass?: ClassValue;
    triggerClass?: ClassValue;
    searchInputClass?: ClassValue;
    clearable?: boolean;
    icon?: Component;
    iconClass?: ClassValue;
    onselect?: ({ value }: {
        value: string | string[];
    }) => void;
    onopen?: () => void;
    onclose?: () => void;
};
export type CardProps = {
    color?: VariantColors;
    title?: string;
    class?: ClassValue;
    titleclass?: ClassValue;
    bodyclass?: ClassValue;
    children?: Snippet;
    custom?: Snippet;
};
export type AlertProps = {
    title?: string;
    message: string;
    color?: VariantColors;
    class?: string;
    onclose?: () => void;
    footer?: Snippet;
    icon?: Component;
};
export type MetricDetail = {
    label: string;
    value: string | number;
    color?: VariantColors;
};
export type MetricCardProps = {
    title: string;
    value: string | number;
    details?: MetricDetail[];
    percent?: number;
    segments?: ProgressSegment[];
    class?: ClassValue;
};
export type DataRow = Record<string, any>;
export type KeyType = keyof DataRow;
export type StatusType = 'active' | 'inactive' | 'pending' | 'error' | 'default';
export type TableColumn<T extends DataRow = any> = {
    key: KeyType;
    header: string;
    cell?: Snippet<[row: T, key: KeyType, index?: number]>;
    sortable?: boolean;
    sortKey?: string;
    align?: 'left' | 'center' | 'right';
    width?: string;
    class?: ClassValue;
};
export type SortDirection = 'asc' | 'desc' | null;
export type SortState = {
    column: string | null;
    direction: SortDirection;
};
export type TableProps<T extends DataRow = any> = {
    data: T[];
    columns: TableColumn<T>[];
    bordered?: boolean;
    striped?: boolean;
    pageSize?: number;
    currentPage?: number;
    totalItems?: number;
    selectable?: boolean;
    selected?: T[];
    class?: ClassValue;
    wrapperclass?: ClassValue;
    tableclass?: ClassValue;
    theadclass?: ClassValue;
    tbodyclass?: ClassValue;
    trclass?: ClassValue;
    thclass?: ClassValue;
    tdclass?: ClassValue;
    footerclass?: ClassValue;
    paginationclass?: ClassValue;
    onrowclick?: (row: T, index: number) => void;
    onsort?: (sortState: SortState) => void;
    onselect?: (selected: T[]) => void;
    onpagechange?: (page: number) => void;
    rowclass?: (row: T, index: number) => ClassValue;
    loading?: boolean;
    expandedContent?: Snippet<[T]>;
    pagination?: boolean;
    showPagination?: boolean;
    showPageSize?: boolean;
    pageSizeOptions?: number[];
    onpagesizechange?: (pageSize: number) => void;
    paginationPosition?: 'top' | 'bottom' | 'both';
    paginationTemplate?: 'simple' | 'full';
};
export type BreadcrumbItem = {
    label: string;
    href: string;
    current?: boolean;
};
export type BreadcrumbsProps = {
    items: BreadcrumbItem[];
    size?: 'xs' | 'sm' | 'base' | 'lg';
    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
    color?: VariantColors;
    icon?: Component;
    class?: string;
    listclass?: string;
    itemclass?: string;
    separatorclass?: string;
    wrapperclass?: string;
};
export type PageHeaderProps = {
    title: string;
    subtitle?: string;
    breadcrumbs?: BreadcrumbItem[];
    children?: Snippet;
    class?: ClassValue;
    titleclass?: ClassValue;
    layout?: 'vertical' | 'horizontal';
};
export type TabItem = {
    value: string;
    label: string;
    icon?: Component;
    disabled?: boolean;
};
export type TabsProps = {
    tabs: TabItem[];
    selected?: string;
    color?: VariantColors;
    size?: VariantSizes;
    class?: ClassValue;
    listClass?: ClassValue;
    panelClass?: ClassValue;
    onchange?: (value: string) => void;
    children?: Snippet<[string]>;
};
export type NavbarLinkItem = {
    label: string;
    href: string;
    icon?: Component;
    active?: boolean;
    children?: NavbarLinkItem[];
};
export type NavbarProps = {
    logo?: string | Component;
    links?: NavbarLinkItem[];
    class?: ClassValue;
    brand?: Snippet;
    children?: Snippet;
    actions?: Snippet;
};
export type MenuBar = {
    collapsed: boolean;
};
export interface BaseNavigationItem {
    label: string;
}
export interface WithIcon {
    Icon?: Component;
}
export interface Activatable {
    active?: boolean;
}
export interface LinkItem extends BaseNavigationItem, WithIcon, Activatable {
    href: string;
    meta?: string;
}
export interface ParentItem extends BaseNavigationItem, Activatable {
    children: LinkItem[];
}
export interface DividerItem {
    type: 'horizontal-divider';
}
export type NavigationItem = LinkItem | ParentItem | DividerItem;
export type LogoType = {
    src?: string;
    title: string;
};
export interface NavGroupProps {
    labelArea: Snippet<[string, string]>;
    active?: boolean;
    children?: Snippet;
    class?: ClassValue;
}
export interface NavItemProps {
    href: string;
    active?: boolean;
    children: Snippet<[ClassValue]>;
    class?: ClassValue;
}
export interface SidebarProps {
    items?: NavigationItem[];
    logo: LogoType;
}
export { tv, cn } from './helper/cls.js';
export { isRouteActive } from './helper/nav.svelte.js';
export { default as Button } from './button/Button.svelte';
export { default as Modal } from './modal/Modal.svelte';
export { default as Drawer } from './drawer/Drawer.svelte';
export { default as PageHeader } from './header/PageHeader.svelte';
export { default as Breadcrumbs } from './header/Breadcrumbs.svelte';
export { default as Badge } from './elements/badge/Badge.svelte';
export { default as Dropdown } from './elements/dropdown/Dropdown.svelte';
export { default as Select } from './elements/dropdown/Select.svelte';
export { default as Card } from './layout/card/Card.svelte';
export { default as MetricCard } from './layout/card/MetricCard.svelte';
export { default as Alert } from './elements/alert/Alert.svelte';
export type TabProps = {
    value: string;
    label: string;
    icon?: Component;
    selected?: boolean;
    disabled?: boolean;
    color?: VariantColors;
    size?: VariantSizes;
    variant?: 'line' | 'pill';
    onclick?: (event: Event) => void;
};
export type TabsGroupProps = {
    tabs: TabItem[];
    selected?: string;
    color?: VariantColors;
    size?: VariantSizes;
    variant?: 'line' | 'pill';
    class?: ClassValue;
    listClass?: ClassValue;
    triggerClass?: ClassValue;
    panelClass?: ClassValue;
    children?: Snippet<[active: string]>;
    onchange?: (value: string) => void;
};
export type TabContentProps = {
    value: string;
    persisted?: boolean;
    panelClass?: ClassValue;
    children?: Snippet<[value: string]>;
};
export { default as Tab } from './layout/tabs/Tab.svelte';
export { default as TabContent } from './layout/tabs/TabContent.svelte';
export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
export { default as Table } from './layout/table/Table.svelte';
export { default as Cells } from './layout/table/Cells.svelte';
export { default as Navbar } from './layout/navbar/Navbar.svelte';
export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
export { default as NavItem } from './layout/sidebar/NavItem.svelte';
export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
export { dropdownMenu } from './elements/dropdown/dropdown.js';
export { badge } from './elements/badge/badge.js';
export { buttonVariants } from './button/button.js';
export { modal } from './modal/modal.js';
export { drawer } from './drawer/drawer.js';
export { selectTV } from './elements/dropdown/select.js';
export { breadcrumbs } from './header/breadcrumbs.js';
export { metricCard } from './layout/card/metric-card.js';
export type ChartColorKey = keyof typeof ChartColor;
export type ChartColorValue = (typeof ChartColor)[ChartColorKey];
export type ChartColors = {
    [K in ChartColorValue]: string;
};
export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie' | 'stacked-bar';
export type ChartColorString = `#${string}` | keyof ChartColors;
export type XAxisConfig<T> = {
    dataKey: keyof T;
    label?: string;
    format?: (value: any) => string;
    tick?: {
        fontSize?: number;
        rotate?: number;
        interval?: number | 'auto' | Function;
    };
    axisLine?: {
        show?: boolean;
        lineStyle?: {
            color?: string;
            width?: number;
            type?: 'solid' | 'dashed' | 'dotted';
        };
    };
};
export type YAxisConfig<T> = {
    dataKey: keyof T;
    label?: string;
    format?: (value: any) => string;
    unit?: string;
    position?: 'left' | 'right';
    min?: number;
    max?: number;
    axisLine?: {
        show?: boolean;
        lineStyle?: {
            color?: string;
            width?: number;
            type?: 'solid' | 'dashed' | 'dotted';
        };
    };
};
export interface SeriesConfig<T> {
    dataKey: keyof T;
    name?: string;
    type?: ChartType;
    color?: ChartColorString;
    yAxisIndex?: number;
    stack?: string;
    barWidth?: string;
    showArea?: boolean;
    showSymbol?: boolean;
    showLabel?: boolean;
    smooth?: boolean;
    areaOpacity?: number;
    lineWidth?: number;
    opacity?: number;
    lineStyle?: {
        type?: 'solid' | 'dashed' | 'dotted';
        width?: number;
        color?: string;
    };
    emphasis?: {
        focus?: 'series' | 'self' | 'none';
    };
    radius?: [string, string];
    centerText?: string;
}
export interface GridConfig {
    horizontal?: boolean;
    vertical?: boolean;
    containLabel?: boolean;
    top?: number | string;
    right?: number | string;
    bottom?: number | string;
    left?: number | string;
}
export interface LegendConfig {
    show?: boolean;
    position?: 'top' | 'bottom' | 'left' | 'right';
    orient?: 'horizontal' | 'vertical';
}
export interface TooltipConfig {
    show?: boolean;
    trigger?: 'item' | 'axis' | 'none';
    formatter?: string | ((params: any) => string);
}
export interface ToolboxConfig {
    show?: boolean;
    features?: {
        saveAsImage?: boolean;
        dataView?: boolean;
        dataZoom?: boolean;
        magicType?: boolean;
        restore?: boolean;
    };
}
export type ChartConfig<T> = {
    xAxis: XAxisConfig<T>;
    yAxis: YAxisConfig<T>[];
    series: SeriesConfig<T>[];
    grid?: GridConfig;
    legend?: LegendConfig;
    tooltip?: TooltipConfig;
    toolbox?: ToolboxConfig;
    showAxisLines?: boolean;
};
export interface PointClickType<T> {
    detail: {
        seriesIndex: number;
        dataIndex: number;
        seriesName: string;
        name: string;
        value?: number | string | null;
        originalData: T;
    };
}
export interface ChartRenderType<T> {
    detail: {
        chart: ECharts;
        options: ChartConfig<T>;
    };
}
export interface ChartProps<T> {
    data: T[];
    config: ChartConfig<T>;
    colors?: Partial<ChartColors>;
    height?: string;
    width?: string;
    class?: string;
    onpointclick?: (event: PointClickType<T>) => void;
    onchartrender?: (event: ChartRenderType<T>) => void;
}
export { default as Chart } from './charts/Chart.svelte';
export interface FileUploadProps {
    /**
     * Array of allowed file MIME types or extensions
     * @example ['image/jpeg', 'image/png']
     */
    allowedMimeTypes?: string[];
    /**
     * Maximum file size in bytes
     */
    maxSize?: number;
    /**
     * Maximum number of files that can be uploaded; maxFiles<=0 is disabled, maxFiles=1 is singular, maxFiles>1 is multiple
     * @default 10
     */
    maxFiles?: number;
    /**
     * CSS class for the component container
     */
    class?: string;
    /**
     * CSS class for the dropzone
     */
    dropzoneClass?: string;
    /**
     * ID for the file input element
     * @default 'file-upload'
     */
    id?: string;
    /**
     * Callback when files are selected or dropped
     */
    onfiles?: (files: FileList | File[]) => void;
    /**
     * Content to display when no files are uploaded
     */
    uploadContent?: Snippet;
}
export interface FilePreviewProps {
    files: UploadedFile[];
    ondelete?: (fileId: string, index: number) => void;
    class?: string;
}
export interface UploadedFile {
    FileID: string;
    OriginalFilename: string;
    Size: number;
    ContentType: string;
    MD5Hash: string;
    UploadTimestamp: string;
    Expiry?: string;
    CustomMetadata?: Record<string, string>;
    /**
     * Current status of the file
     */
    status: 'uploading' | 'success' | 'error';
    /**
     * Upload progress (0-100)
     */
    progress?: number;
    /**
     * Error message if upload failed
     */
    error?: string;
}
export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
export { default as Toaster } from './sonner/sonner.svelte';
export interface FormProps<T extends Record<string, unknown>> {
    form: SuperForm<any>;
    class?: string;
    method?: 'GET' | 'POST' | 'dialog' | 'get' | 'post' | 'DIALOG' | null | undefined;
    action?: string;
    enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null | undefined;
    autocomplete?: 'on' | 'off';
    novalidate?: boolean;
    children?: Snippet;
}
export type InputProps = {
    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
    value?: string | number;
    name: string;
    label?: string;
    placeholder?: string;
    required?: boolean;
    disabled?: boolean;
    class?: string;
    size?: VariantSizes;
    color?: VariantColors;
    id?: string;
    errors?: string[];
} & DOMAttributes<HTMLInputElement>;
export type RadioOption = {
    value: string;
    label: string;
};
export type RadioInputsProps = {
    name: string;
    label?: string;
    options: RadioOption[];
    value?: string;
    disabled?: boolean;
    class?: string;
    size?: VariantSizes;
    color?: VariantColors;
    errors?: string[];
    required?: boolean;
};
export type CheckboxProps = {
    name: string;
    label?: string;
    value?: boolean;
    disabled?: boolean;
    class?: string;
    size?: VariantSizes;
    color?: VariantColors;
    errors?: string[];
    required?: boolean;
};
export interface ToggleProps {
    name: string;
    label?: string;
    disabled?: boolean;
    class?: string;
    value?: boolean;
    size?: VariantSizes;
    color?: VariantColors;
    id?: string;
    errors?: string[];
    offColor?: string;
    onColor?: string;
}
export type CurrencyOption = {
    value: string;
    icon?: any;
};
export type NumberInputProps = {
    value?: number;
    name?: string;
    label?: string;
    placeholder?: string;
    size?: VariantSizes;
    class?: string;
    unit?: string;
    units?: CurrencyOption[];
    errors?: string[];
    disabled?: boolean;
    dropdownicon?: any;
    onunitchange?: (prevUnit: string, newUnit: string) => void;
};
export interface DateRangeProps {
    startDate?: Date;
    endDate?: Date;
    minDate?: Date;
    maxDate?: Date;
    disabled?: boolean;
    class?: string;
    placeholder?: string;
    startLabel?: string;
    endLabel?: string;
    format?: string;
    onselect?: ({ startDate, endDate }: {
        startDate?: Date;
        endDate?: Date;
    }) => void;
    id?: string;
    name?: string;
}
export interface DateSelectEvent {
    startDate: Date | null;
    endDate: Date | null;
}
export type TagsProps = {
    value?: string[];
    name?: string;
    label?: string;
    errors?: string[];
    placeholder?: string;
    size?: VariantSizes;
    class?: string;
    suggestions?: string[];
    onaddtag?: (tag: string) => void;
    onremovetag?: (tag: string) => void;
};
export { default as Form } from './forms/Form.svelte';
export { default as Input } from './forms/Input.svelte';
export { default as RadioInputs } from './forms/RadioInputs.svelte';
export { default as Checkbox } from './forms/Checkbox.svelte';
export { default as Toggle } from './forms/Toggle.svelte';
export { default as Slider } from './forms/Slider.svelte';
export { default as NumberInput } from './forms/NumberInput.svelte';
export { default as DateRange } from './forms/DateRange.svelte';
export { default as Tags } from './forms/Tags.svelte';
export { default as RadioPill } from './forms/RadioPill.svelte';
export type SliderMode = 'single' | 'range' | 'enum';
export type NotationType = 'standard' | 'compact' | 'scientific' | 'engineering';
export type EnumOption = {
    value: string | number;
    label: string;
};
export interface SliderProps {
    name: string;
    label?: string;
    mode?: SliderMode;
    disabled?: boolean;
    size?: VariantSizes;
    errors?: string[];
    class?: string;
    min?: number;
    max?: number;
    step?: number;
    value?: number | string;
    valueStart?: number;
    valueEnd?: number;
    showValue?: boolean;
    valuePrefix?: string;
    valueSuffix?: string;
    options?: EnumOption[];
    formatOptions?: Intl.NumberFormatOptions & {
        notation?: NotationType;
    };
}
export type ProgressSegment = {
    value: number;
    color: VariantColors;
    label?: string;
};
export type ProgressProps = {
    value: number;
    max?: number;
    size?: VariantSizes;
    color?: VariantColors;
    showLabel?: boolean;
    labelPosition?: 'top' | 'bottom' | 'right';
    segments?: ProgressSegment[];
    showLabels?: boolean;
    showValues?: boolean;
    class?: ClassValue;
    labelClass?: string;
    barClass?: string;
};
export { default as Progress } from './elements/progress/Progress.svelte';
export type AccordionProps = {
    id?: string;
    title?: string;
    description?: string;
    children?: Snippet;
    summary?: Snippet;
    open?: boolean;
    color?: VariantColors;
    class?: ClassValue;
    titleclass?: ClassValue;
    bodyclass?: ClassValue;
    headerclass?: ClassValue;
    icon?: Component;
    iconPosition?: 'start' | 'end';
    bordered?: boolean;
    onexpand?: () => void;
    oncollapse?: () => void;
};
export { default as Accordion } from './elements/accordion/Accordion.svelte';
export interface TimelineItem {
    title: string;
    time: Date | string;
    link?: {
        text: string;
        url: string;
    };
    Icon?: Component;
    details?: string;
}
export { default as Timeline } from './elements/timeline/Timeline.svelte';
export type RadioPillProps = {
    name: string;
    options: RadioOption[];
    value?: string;
    label?: string;
    class?: string;
    errors?: string[];
    onchange?: (value: string) => void;
};
export type FilterTab = {
    value: string;
    label: string;
};
export type FilterGroup = {
    key: string;
    label: string;
    tabs: FilterTab[];
    selectedValue: string;
    onChange: (value: string) => void;
    minWidth?: string;
};
export type CompactFiltersProps = {
    filterGroups: FilterGroup[];
    isExpanded?: boolean;
    title?: string;
    class?: ClassValue;
    summaryClass?: ClassValue;
    expandedClass?: ClassValue;
    FilterIcon?: Component;
};
export { CompactFilters } from './filters/index.js';
export * from './file-browser/index.js';
export * from './adapters/storage/index.js';
export interface FileBrowserProps {
    adapter: StorageAdapter;
    startPath?: string;
    actions?: FileAction[];
    selectedFiles?: string[];
    infoSection?: (props: {
        selectedFiles: string[];
        navToFileFolder: (fileKey: string) => void;
    }) => any;
}