@makolabs/ripple 0.0.1-dev.9 → 0.0.3

package/dist/index.d.ts

@@ -1,6 +1,19 @@
-import { Color, type Size } from './variants.js';
-export type VariantColors = (typeof Color)[keyof typeof Color];
+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';
@@ -43,7 +56,6 @@ export type MakeModalProps = {
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
     position?: 'top' | 'center' | 'bottom';
-    size?: VariantSizes;
     class?: string;
     backdropclass?: string;
     contentclass?: string;
@@ -149,75 +161,86 @@ export type AlertProps = {
     color?: VariantColors;
     class?: string;
     onclose?: () => void;
+    footer?: Snippet;
+    icon?: Component;
 };
 export type StatsCardProps = {
+    label?: string;
+    value?: string | number;
+    previousValue?: string | number;
+    previousValuePrefix?: string;
+    trend?: number;
+    color?: VariantColors;
+    chartData?: number[];
+    children?: Snippet;
+    class?: ClassValue;
+    formatLargeNumbers?: boolean;
+};
+export type MetricDetail = {
+    label: string;
+    value: string | number;
+    color?: VariantColors;
+};
+export type MetricCardProps = {
     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;
+    details?: MetricDetail[];
+    percent?: number;
+    segments?: ProgressSegment[];
     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;
+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;
-    cell?: (value: any, row: DataRow) => string | Snippet;
+    class?: ClassValue;
 };
-export type TableProps = {
-    data: DataRow[];
-    columns: TableColumn[];
-    keyField?: string;
-    status?: StatusType;
-    searchable?: boolean;
-    pagination?: boolean;
-    rowsPerPage?: number;
-    sortable?: boolean;
-    defaultSort?: SortState;
+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;
-    onRowClick?: (row: DataRow) => void;
-    onSelectionChange?: (selectedRows: DataRow[]) => void;
-    onSortChange?: (sortState: SortState) => void;
-    onPageChange?: (page: number) => void;
-    emptyMessage?: string;
-    errorMessage?: string;
-    searchPlaceholder?: string;
+    selected?: T[];
     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[];
+    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;
@@ -238,10 +261,12 @@ export type BreadcrumbsProps = {
 };
 export type PageHeaderProps = {
     title: string;
+    subtitle?: string;
     breadcrumbs?: BreadcrumbItem[];
     children?: Snippet;
     class?: ClassValue;
     titleclass?: ClassValue;
+    layout?: 'vertical' | 'horizontal';
 };
 export type TabItem = {
     value: string;
@@ -330,7 +355,38 @@ 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 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';
@@ -347,38 +403,51 @@ 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 = {
-    health: string;
-    property: string;
-    auto: string;
-    life: string;
-    other: string;
-    default: string;
-};
-export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie';
+    [K in ChartColorValue]: string;
+};
+export type ChartType = 'line' | 'bar' | 'horizontal-bar' | 'pie' | 'stacked-bar';
 export type ChartColorString = `#${string}` | keyof ChartColors;
-export interface YAxisConfig<T> {
-    dataKey: keyof T & string;
+export type XAxisConfig<T> = {
+    dataKey: keyof T;
     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';
+        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 & string;
+    dataKey: keyof T;
     name?: string;
     type?: ChartType;
     color?: ChartColorString;
@@ -403,40 +472,45 @@ export interface SeriesConfig<T> {
     radius?: [string, string];
     centerText?: string;
 }
-export interface ChartConfig<T> {
+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?: {
-        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;
-        };
-    };
-}
+    grid?: GridConfig;
+    legend?: LegendConfig;
+    tooltip?: TooltipConfig;
+    toolbox?: ToolboxConfig;
+    showAxisLines?: boolean;
+};
 export interface PointClickType<T> {
     detail: {
         seriesIndex: number;
@@ -471,7 +545,7 @@ export interface FileUploadProps {
      */
     allowedMimeTypes?: string[];
     /**
-     * Maximum file size in bytes;
+     * Maximum file size in bytes
      */
     maxSize?: number;
     /**
@@ -487,10 +561,6 @@ export interface FileUploadProps {
      * CSS class for the dropzone
      */
     dropzoneClass?: string;
-    /**
-     * CSS class for the preview area
-     */
-    previewClass?: string;
     /**
      * ID for the file input element
      * @default 'file-upload'
@@ -501,33 +571,14 @@ export interface FileUploadProps {
      */
     onfiles?: (files: FileList | File[]) => void;
     /**
-     * Callback when a file is deleted
+     * Content to display when no files are uploaded
      */
+    uploadContent?: Snippet;
+}
+export interface FilePreviewProps {
+    files: UploadedFile[];
     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>;
+    class?: string;
 }
 export interface UploadedFile {
     FileID: string;
@@ -552,6 +603,7 @@ export interface UploadedFile {
     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>;
@@ -709,6 +761,11 @@ export interface SliderProps {
         notation?: NotationType;
     };
 }
+export type ProgressSegment = {
+    value: number;
+    color: VariantColors;
+    label?: string;
+};
 export type ProgressProps = {
     value: number;
     max?: number;
@@ -716,11 +773,33 @@ export type ProgressProps = {
     color?: VariantColors;
     showLabel?: boolean;
     labelPosition?: 'top' | 'bottom' | 'right';
-    class?: string;
+    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;
@@ -741,3 +820,37 @@ export type RadioPillProps = {
     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: any;
+    startPath?: string;
+    actions?: any[];
+    selectedFiles?: string[];
+    infoSection?: (props: {
+        selectedFiles: string[];
+        navToFileFolder: (fileKey: string) => void;
+    }) => any;
+}

package/dist/index.js

@@ -1,4 +1,13 @@
-import { Color } from './variants.js';
+import { ChartColor, Color, Size } from './variants.js';
+/**
+ * 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 };
 // Helper utilities
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
@@ -19,9 +28,9 @@ export { default as Select } from './elements/dropdown/Select.svelte';
 // Elements - Card
 export { default as Card } from './layout/card/Card.svelte';
 export { default as StatsCard } from './layout/card/StatsCard.svelte';
+export { default as MetricCard } from './layout/card/MetricCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
-// Elements - Tabs
 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';
@@ -42,8 +51,10 @@ 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 { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
+export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 // Toaster: Should be registered in +layout.svelte
 export { default as Toaster } from './sonner/sonner.svelte';
 // Form Component Exports
@@ -58,4 +69,10 @@ 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 { default as Progress } from './elements/progress/Progress.svelte';
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
 export { default as Timeline } from './elements/timeline/Timeline.svelte';
+// Re-export filters
+export { CompactFilters } from './filters/index.js';
+// File Browser and Storage Adapters
+export * from './file-browser/index.js';
+export * from './adapters/storage/index.js';

package/dist/layout/card/MetricCard.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { metricCard } from './metric-card.js';
+	import type { MetricCardProps } from '../../index.js';
+	import Progress from '../../elements/progress/Progress.svelte';
+	import { Size, Color } from '../../variants.js';
+
+	let {
+		title,
+		value,
+		details = [],
+		percent,
+		segments,
+		class: className = ''
+	}: MetricCardProps = $props();
+
+	const {
+		base,
+		title: titleSlot,
+		value: valueSlot,
+		detail: detailSlot,
+		progress: progressSlot
+	} = $derived(metricCard());
+
+	const baseClass = $derived(cn(base(), 'flex flex-col h-full', className));
+</script>
+
+<div class={baseClass}>
+	{#if title}
+		<div class={titleSlot()}>{title}</div>
+	{/if}
+
+	{#if value !== undefined}
+		<div class={valueSlot()}>{value}</div>
+	{/if}
+
+	{#if details.length > 0}
+		<div class={detailSlot()}>
+			{#each details as detail, index (detail.label + index)}
+				<div class="flex justify-between text-xs">
+					<span class="text-default-500">{detail.label}</span>
+					<span class="font-medium {detail.color || 'text-default-900'}">{detail.value}</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if segments}
+		<div class={cn(progressSlot(), 'pt-2')}>
+			<Progress
+				value={0}
+				{segments}
+				size={Size.SM}
+				showLabels={false}
+				showValues={false}
+				showLabel={false}
+			/>
+		</div>
+	{:else if percent !== undefined}
+		<div class={cn(progressSlot(), 'pt-2')}>
+			<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
+		</div>
+	{/if}
+</div>

package/dist/layout/card/MetricCard.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MetricCardProps } from '../../index.js';
+declare const MetricCard: import("svelte").Component<MetricCardProps, {}, "">;
+type MetricCard = ReturnType<typeof MetricCard>;
+export default MetricCard;

package/dist/layout/card/StatsCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { statsCard, type StatsCardProps } from './stats-card.js';
+	import { statsCard } from './stats-card.js';
 	import { onMount } from 'svelte';
 	import * as echarts from 'echarts/core';
 
@@ -12,6 +12,7 @@
 	// @ts-expect-error - ECharts types are not available
 	import { SVGRenderer } from 'echarts/renderers';
 	import { Color } from '../../variants.js';
+	import type { StatsCardProps } from '../../index.js';
 
 	// @ts-expect-error - ECharts types are not available
 	echarts.use([LineChart, GridComponent, SVGRenderer]);
@@ -134,7 +135,7 @@
 	const labelClasses = $derived(cn(labelSlot(), 'text-sm font-medium mb-1'));
 	const valueClasses = $derived(cn(valueSlot(), 'text-4xl font-bold'));
 	const trendClasses = $derived(cn(trendSlot(), 'text-sm font-medium ml-2'));
-	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-gray-500 mt-1'));
+	const previousValueClasses = $derived(cn(previousValueSlot(), 'text-sm text-default-500 mt-1'));
 
 	const trendFormatted = $derived.by(() => {
 		if (trend === undefined || trend === null) return '';
@@ -221,7 +222,7 @@
 <div
 	class={cn(
 		base(),
-		'@container flex flex-col rounded-lg border border-gray-200 bg-white p-6 shadow-sm',
+		'@container flex flex-col rounded-lg border border-default-200 bg-white p-6 shadow-sm',
 		className
 	)}
 >

package/dist/layout/card/StatsCard.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type StatsCardProps } from './stats-card.js';
+import type { StatsCardProps } from '../../index.js';
 declare const StatsCard: import("svelte").Component<StatsCardProps, {}, "">;
 type StatsCard = ReturnType<typeof StatsCard>;
 export default StatsCard;