@makolabs/ripple 0.0.1-dev.6 → 0.0.1-dev.8

package/dist/index.d.ts

@@ -1,10 +1,743 @@
-export * from './button/index.js';
-export * from './modal/index.js';
-export * from './drawer/index.js';
-export * from './header/index.js';
-export * from './layout/index.js';
-export * from './elements/dropdown/index.js';
-export * from './elements/badge/index.js';
-export * from './types/variants.js';
+import { Color, type Size } from './variants.js';
+export type VariantColors = (typeof Color)[keyof typeof Color];
+export type VariantSizes = (typeof Size)[keyof typeof Size];
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget } from 'svelte/elements';
+import type { ECharts } from 'echarts/types/src/export/core.js';
+import type { SuperForm } from 'sveltekit-superforms';
+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';
+    size?: VariantSizes;
+    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;
+};
+export type StatsCardProps = {
+    title: string;
+    value: string | number;
+    prefix?: string;
+    suffix?: string;
+    delta?: number;
+    deltaType?: 'increase' | 'decrease' | 'neutral';
+    description?: string;
+    icon?: Component;
+    loading?: boolean;
+    trend?: number[];
+    trendColor?: VariantColors;
+    trendFill?: boolean;
+    class?: ClassValue;
+    titleClass?: ClassValue;
+    valueClass?: ClassValue;
+    deltaClass?: ClassValue;
+    descriptionClass?: ClassValue;
+    iconClass?: ClassValue;
+    contentClass?: ClassValue;
+    trendClass?: ClassValue;
+};
+export type KeyType = string | number;
+export type DataRow = Record<string, any>;
+export type StatusType = 'idle' | 'loading' | 'error' | 'success' | 'empty';
+export type SortDirection = 'asc' | 'desc';
+export type SortState = {
+    column: string;
+    direction: SortDirection;
+};
+export type TableColumn = {
+    key: string;
+    title: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    cell?: (value: any, row: DataRow) => string | Snippet;
+};
+export type TableProps = {
+    data: DataRow[];
+    columns: TableColumn[];
+    keyField?: string;
+    status?: StatusType;
+    searchable?: boolean;
+    pagination?: boolean;
+    rowsPerPage?: number;
+    sortable?: boolean;
+    defaultSort?: SortState;
+    selectable?: boolean;
+    onRowClick?: (row: DataRow) => void;
+    onSelectionChange?: (selectedRows: DataRow[]) => void;
+    onSortChange?: (sortState: SortState) => void;
+    onPageChange?: (page: number) => void;
+    emptyMessage?: string;
+    errorMessage?: string;
+    searchPlaceholder?: string;
+    class?: ClassValue;
+    headerClass?: ClassValue;
+    rowClass?: ClassValue | ((row: DataRow) => ClassValue);
+    cellClass?: ClassValue | ((value: any, row: DataRow, columnKey: string) => ClassValue);
+    searchClass?: ClassValue;
+    paginationClass?: ClassValue;
+    loadingTemplate?: Snippet;
+    emptyTemplate?: Snippet;
+    errorTemplate?: Snippet;
+    searchDebounceMs?: number;
+    showCount?: boolean;
+    rowsPerPageOptions?: number[];
+};
+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;
+    breadcrumbs?: BreadcrumbItem[];
+    children?: Snippet;
+    class?: ClassValue;
+    titleclass?: ClassValue;
+};
+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 * from './helper/nav.svelte.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 StatsCard } from './layout/card/StatsCard.svelte';
+export { default as Alert } from './elements/alert/Alert.svelte';
+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 type ChartColors = {
+    health: string;
+    property: string;
+    auto: string;
+    life: string;
+    other: string;
+    default: string;
+};
+export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
+export type ChartColorString = `#${string}` | keyof ChartColors;
+export interface YAxisConfig<T> {
+    dataKey: keyof T & string;
+    label?: string;
+    unit?: string;
+    min?: number;
+    max?: number;
+    position?: 'left' | 'right';
+    format?: (value: any) => string;
+    color?: ChartColorString;
+}
+export interface XAxisConfig<T> {
+    dataKey: keyof T & string;
+    label?: string;
+    tick?: {
+        fontSize?: number;
+        rotate?: number;
+        interval?: number | 'auto' | 'preserveStartEnd';
+    };
+    format?: (value: any) => string;
+}
+export interface SeriesConfig<T> {
+    dataKey: keyof T & string;
+    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 ChartConfig<T> {
+    xAxis: XAxisConfig<T>;
+    yAxis: YAxisConfig<T>[];
+    series: SeriesConfig<T>[];
+    grid?: {
+        horizontal?: boolean;
+        vertical?: boolean;
+        containLabel?: boolean;
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    };
+    legend?: {
+        show?: boolean;
+        position?: 'top' | 'bottom' | 'left' | 'right';
+        orient?: 'horizontal' | 'vertical';
+    };
+    tooltip?: {
+        show?: boolean;
+        trigger?: 'item' | 'axis' | 'none';
+        formatter?: string | ((params: any) => string);
+    };
+    toolbox?: {
+        show?: boolean;
+        features?: {
+            saveAsImage?: boolean;
+            dataView?: boolean;
+            dataZoom?: boolean;
+            magicType?: boolean;
+            restore?: 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;
+    /**
+     * CSS class for the preview area
+     */
+    previewClass?: string;
+    /**
+     * ID for the file input element
+     * @default 'file-upload'
+     */
+    id?: string;
+    /**
+     * Callback when files are selected or dropped
+     */
+    onfiles?: (files: FileList | File[]) => void;
+    /**
+     * Callback when a file is deleted
+     */
+    ondelete?: (fileId: string, index: number) => void;
+    /**
+     * Current files array to display
+     */
+    files?: UploadedFile[];
+    /**
+     * API URL for file upload
+     */
+    apiUrl?: string;
+    /**
+     * Authorization token for API requests
+     */
+    apiToken?: string;
+    /**
+     * Handler for unsuccessful file uploads
+     */
+    onerror?: (error: string) => void;
+    /**
+     * Expired time in days
+     */
+    expiry?: `${string}d`;
+    /**
+     * Additional metadata to be sent with the file
+     */
+    metadata?: Record<string, 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 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 BaseInputProps = {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    size?: VariantSizes;
+    color?: VariantColors;
+    id?: string;
+    errors?: string[];
+};
+export type InputProps = {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
+    value?: string | number;
+} & BaseInputProps;
+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 ProgressProps = {
+    value: number;
+    max?: number;
+    size?: VariantSizes;
+    color?: VariantColors;
+    showLabel?: boolean;
+    labelPosition?: 'top' | 'bottom' | 'right';
+    class?: string;
+    labelClass?: string;
+    barClass?: string;
+};
+export { default as Progress } from './elements/progress/Progress.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;
+};