@makolabs/ripple 1.8.0 → 1.9.1

package/README.md

@@ -637,3 +637,19 @@ For CI environments (GitHub Actions, etc.), use:
 - name: Run tests
   run: npm run test:unit -- --run
 ```
+
+## Troubleshooting
+
+### Missing color tokens (components render without color)
+
+Ripple UI uses custom color tokens (e.g. `primary`, `secondary`, `danger`) that must be defined in your app's CSS. If components appear unstyled or use fallback colors, add the `@theme` block with all required color token definitions to your `app.css`. See the full token list in the [Usage](#usage) section above.
+
+### TailwindCSS 4 `@source` configuration
+
+TailwindCSS 4 does not automatically scan `node_modules` for class names. You must add the following directive to your `app.css` so that Tailwind generates the utility classes used by Ripple UI components:
+
+```css
+@source '../node_modules/@makolabs/ripple';
+```
+
+Without this, component styles that rely on Tailwind utilities will be missing from your build output.

package/dist/ai/ai-types.d.ts

@@ -0,0 +1,44 @@
+import type { Component } from 'svelte';
+import type { FileAction, StorageAdapter } from '../adapters/storage/types.js';
+export type ChatMessageType = 'chat' | 'action' | 'thinking';
+export type StreamingCallback = (response: ChatResponse) => void;
+export interface ChatAction {
+    type: string;
+    data: any;
+    metadata?: Record<string, any>;
+}
+export interface ChatMessage {
+    id: string;
+    type: ChatMessageType;
+    content: string;
+    timestamp: Date;
+    action?: ChatAction;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface ChatResponse {
+    type: ChatMessageType;
+    content: string;
+    action?: ChatAction;
+    messageId?: string;
+    isStreaming?: boolean;
+    isStreamEnd?: boolean;
+    thinkingContent?: string;
+    isThinkingComplete?: boolean;
+}
+export interface QuickAction {
+    label: string;
+    prompt: string;
+    icon?: Component;
+}
+export interface FileBrowserProps {
+    adapter: StorageAdapter;
+    startPath?: string;
+    actions?: FileAction[];
+    selectedFiles?: string[];
+    infoSection?: (props: {
+        selectedFiles: string[];
+        navToFileFolder: (fileKey: string) => void;
+    }) => any;
+    testId?: string;
+}

package/dist/ai/ai-types.js

@@ -0,0 +1 @@
+export {};

package/dist/button/button-types.d.ts

@@ -0,0 +1,25 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes, HTMLAttributeAnchorTarget } from 'svelte/elements';
+import type { VariantColors, VariantSizes } from '../index.js';
+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;
+    testId?: string;
+};
+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);

package/dist/button/button-types.js

@@ -0,0 +1 @@
+export {};

package/dist/charts/Chart.svelte

@@ -2,29 +2,18 @@
 	import { onMount, onDestroy } from 'svelte';
 	import { cn } from '../helper/cls.js';
 	import * as echarts from 'echarts/core';
-	// @ts-expect-error - ECharts types are not available
 	import { LineChart, BarChart, PieChart } from 'echarts/charts';
 	import {
-		// @ts-expect-error - ECharts types are not available
 		GridComponent,
-		// @ts-expect-error - ECharts types are not available
 		TooltipComponent,
-		// @ts-expect-error - ECharts types are not available
 		TitleComponent,
-		// @ts-expect-error - ECharts types are not available
 		LegendComponent,
-		// @ts-expect-error - ECharts types are not available
 		DataZoomComponent,
-		// @ts-expect-error - ECharts types are not available
 		ToolboxComponent,
-		// @ts-expect-error - ECharts types are not available
 		MarkLineComponent,
-		// @ts-expect-error - ECharts types are not available
 		MarkPointComponent,
-		// @ts-expect-error - ECharts types are not available
 		GraphicComponent
 	} from 'echarts/components';
-	// @ts-expect-error - ECharts types are not available
 	import { SVGRenderer } from 'echarts/renderers';
 	import {
 		type ChartProps,
@@ -34,7 +23,6 @@
 	} from '../index.js';
 	import { defaultChartColors } from '../variants.js';
 
-	// @ts-expect-error - ECharts types are not available
 	echarts.use([
 		LineChart,
 		BarChart,
@@ -107,7 +95,6 @@
 	const hasPieChart = $derived(series.some((s) => s.type === 'pie'));
 
 	let chartContainer: HTMLDivElement;
-	// @ts-expect-error - ECharts types are not available
 	let chart: echarts.ECharts;
 	let resizeObserver: ResizeObserver;
 	let resizeTimeoutId: ReturnType<typeof setTimeout>;
@@ -287,8 +274,8 @@
 				label: {
 					show: seriesConfig.showLabel || false,
 					position: actualType === 'line' ? 'top' : 'inside',
-					// @ts-expect-error - ECharts types are not available
-					formatter: (params) => {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					formatter: (params: any) => {
 						const yAxisIndex = seriesConfig.yAxisIndex || 0;
 						const axisConfig = yAxis[yAxisIndex];
 						return formatValue(params.value, axisConfig.format, axisConfig.unit);
@@ -375,8 +362,8 @@
 			// Add center text if specified in the first pie series
 			const pieSeriesWithCenterText = series.find((s) => s.type === 'pie' && s.centerText);
 			if (pieSeriesWithCenterText?.centerText) {
-				// @ts-expect-error - ECharts types are not available
-				pieOptions.graphic = {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				(pieOptions as any).graphic = {
 					elements: [
 						{
 							type: 'text',
@@ -464,8 +451,8 @@
 						show: false
 					},
 					axisLabel: {
-						// @ts-expect-error - ECharts types are not available
-						formatter: (value) => formatValue(value, axis.format, axis.unit)
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						formatter: (value: any) => formatValue(value, axis.format, axis.unit)
 					},
 					splitLine: {
 						show: index === 0 ? grid.horizontal || true : false
@@ -503,7 +490,6 @@
 	}
 
 	onMount(() => {
-		// @ts-expect-error - ECharts types are not available
 		chart = echarts.init(chartContainer, theme);
 
 		// Instantly triggering resizes disables animation, hence the timeout
@@ -516,8 +502,7 @@
 		}, AnimationDuration);
 
 		updateChart();
-		// @ts-expect-error - ECharts types are not available
-		chart.on('click', (params) => {
+		chart.on('click', (params: echarts.ECElementEvent) => {
 			if (onpointclick) {
 				onpointclick({
 					detail: {

package/dist/charts/chart-types.d.ts

@@ -0,0 +1,137 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { ECharts } from 'echarts/types/src/export/core.js';
+import { ChartColor } from '../variants.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?: ClassValue;
+    onpointclick?: (event: PointClickType<T>) => void;
+    onchartrender?: (event: ChartRenderType<T>) => void;
+    testId?: string;
+}

package/dist/charts/chart-types.js

@@ -0,0 +1 @@
+import { ChartColor } from '../variants.js';

package/dist/drawer/drawer-types.d.ts

@@ -0,0 +1,33 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantSizes } from '../index.js';
+export type DrawerProps = {
+    open?: boolean;
+    onclose?: () => void;
+    title?: string;
+    position?: 'left' | 'right';
+    size?: VariantSizes;
+    class?: ClassValue;
+    /** @deprecated Use backdropClass instead */
+    backdropclass?: ClassValue;
+    backdropClass?: ClassValue;
+    /** @deprecated Use contentClass instead */
+    contentclass?: ClassValue;
+    contentClass?: ClassValue;
+    /** @deprecated Use headerClass instead */
+    headerclass?: ClassValue;
+    headerClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use footerClass instead */
+    footerclass?: ClassValue;
+    footerClass?: ClassValue;
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    testId?: string;
+};

package/dist/drawer/drawer-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/accordion/accordion-types.d.ts

@@ -0,0 +1,29 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantColors } from '../../index.js';
+export type AccordionProps = {
+    id?: string;
+    title?: string;
+    description?: string;
+    children?: Snippet;
+    summary?: Snippet;
+    open?: boolean;
+    color?: VariantColors;
+    class?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    /** @deprecated Use headerClass instead */
+    headerclass?: ClassValue;
+    headerClass?: ClassValue;
+    icon?: Component;
+    iconPosition?: 'start' | 'end';
+    bordered?: boolean;
+    onexpand?: () => void;
+    oncollapse?: () => void;
+    testId?: string;
+};

package/dist/elements/accordion/accordion-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/badge/badge-types.d.ts

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export type BadgeProps = {
+    size?: VariantSizes;
+    color?: VariantColors;
+    class?: ClassValue;
+    children: Snippet;
+    onclose?: (event: MouseEvent) => void;
+    testId?: string;
+};

package/dist/elements/badge/badge-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/dropdown/dropdown-types.d.ts

@@ -0,0 +1,68 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantSizes } from '../../index.js';
+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;
+    testId?: string;
+};
+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;
+    testId?: string;
+};

package/dist/elements/dropdown/dropdown-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/file-upload/file-upload-types.d.ts

@@ -0,0 +1,68 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from '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?: ClassValue;
+    /**
+     * CSS class for the dropzone
+     */
+    dropzoneClass?: ClassValue;
+    /**
+     * 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;
+    testId?: string;
+}
+export interface FilePreviewProps {
+    files: UploadedFile[];
+    ondelete?: (fileId: string, index: number) => void;
+    class?: ClassValue;
+    testId?: 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;
+}

package/dist/elements/file-upload/file-upload-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/progress/progress-types.d.ts

@@ -0,0 +1,22 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantColors, VariantSizes } from '../../index.js';
+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?: ClassValue;
+    barClass?: ClassValue;
+    testId?: string;
+};

package/dist/elements/progress/progress-types.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/timeline/timeline-types.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+export interface TimelineItem {
+    title: string;
+    time: Date | string;
+    link?: {
+        text: string;
+        url: string;
+    };
+    Icon?: Component;
+    details?: string;
+}

package/dist/elements/timeline/timeline-types.js

@@ -0,0 +1 @@
+export {};

package/dist/filters/filter-types.d.ts

@@ -0,0 +1,24 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Component } from 'svelte';
+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;
+    testId?: string;
+};

package/dist/filters/filter-types.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/Input.svelte

@@ -49,7 +49,9 @@
 		disabled,
 		class: inputClasses,
 		'aria-invalid': !!errors.length,
-		'aria-describedby': errors.length ? `${name}-errors` : undefined
+		'aria-describedby': errors.length
+			? errors.map((_, i) => `${name}-error-${i}`).join(' ')
+			: undefined
 	});
 
 	const inputProps = $derived({
@@ -78,7 +80,7 @@
 	{#if errors.length}
 		{#each errors as error, i (i)}
 			<p
-				id="{name}-errors"
+				id="{name}-error-{i}"
 				class="text-danger-600 mt-1 text-sm"
 				role="alert"
 				data-testid={buildTestId('input', 'error', testId, i)}