@makolabs/ripple 1.7.11 → 1.9.0

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.svelte

@@ -4,6 +4,8 @@
 	import { fade, fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { drawer } from './drawer.js';
 	import type { DrawerProps } from '../index.js';
 
@@ -17,14 +19,34 @@
 		header,
 		footer,
 		class: className = '',
-		backdropclass: backdropClassName = '',
-		contentclass: contentClassName = '',
-		headerclass: headerClassName = '',
-		bodyclass: bodyClassName = '',
-		titleclass: titleClassName = '',
-		footerclass: footerClassName = ''
+		backdropclass,
+		backdropClass = backdropclass ?? '',
+		contentclass,
+		contentClass = contentclass ?? '',
+		headerclass,
+		headerClass = headerclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		titleclass,
+		titleClass = titleclass ?? '',
+		footerclass,
+		footerClass = footerclass ?? '',
+		testId
 	}: DrawerProps = $props();
 
+	warnDeprecatedProps(
+		'Drawer',
+		{ backdropclass, contentclass, headerclass, bodyclass, titleclass, footerclass },
+		{
+			backdropclass: 'backdropClass',
+			contentclass: 'contentClass',
+			headerclass: 'headerClass',
+			bodyclass: 'bodyClass',
+			titleclass: 'titleClass',
+			footerclass: 'footerClass'
+		}
+	);
+
 	let drawerElement: HTMLDivElement | undefined = $state();
 
 	const {
@@ -35,7 +57,7 @@
 		header: headerVClass,
 		body,
 		footer: footerVClass,
-		title: titleClass,
+		title: titleVClass,
 		closeButton
 	} = $derived(
 		drawer({
@@ -45,15 +67,15 @@
 		})
 	);
 
-	const baseClass = $derived(cn(base(), className));
-	const backdropClass = $derived(cn(backdrop(), backdropClassName));
-	const contentWrapperClass = $derived(cn(contentWrapper(), contentClassName));
-	const contentClass = $derived(cn(content(), ''));
-	const headerClass = $derived(cn(headerVClass(), headerClassName));
-	const bodyClass = $derived(cn(body(), bodyClassName));
-	const titleClasses = $derived(cn(titleClass(), titleClassName));
+	const baseClasses = $derived(cn(base(), className));
+	const backdropClasses = $derived(cn(backdrop(), backdropClass));
+	const contentWrapperClasses = $derived(cn(contentWrapper(), contentClass));
+	const contentClasses = $derived(cn(content(), ''));
+	const headerClasses = $derived(cn(headerVClass(), headerClass));
+	const bodyClasses = $derived(cn(body(), bodyClass));
+	const titleClasses = $derived(cn(titleVClass(), titleClass));
 	const closeButtonClasses = $derived(cn(closeButton(), ''));
-	const footerClass = $derived(cn(footerVClass(), 'mt-auto', footerClassName));
+	const footerClasses = $derived(cn(footerVClass(), 'mt-auto', footerClass));
 
 	function handleBackdropClick(e: MouseEvent) {
 		if (e.target === e.currentTarget) {
@@ -156,7 +178,7 @@
 
 {#if browser}
 	<div
-		class={baseClass}
+		class={baseClasses}
 		bind:this={drawerElement}
 		role="dialog"
 		aria-modal="true"
@@ -165,29 +187,41 @@
 		{#key open}
 			<!-- Backdrop -->
 			<button
-				class={backdropClass}
+				class={backdropClasses}
 				onclick={handleBackdropClick}
 				transition:fade={{ duration: 200 }}
 				aria-label="Close drawer"
+				data-testid={buildTestId('drawer', 'backdrop', testId)}
 			></button>
 
 			<!-- Drawer content -->
-			<div class={contentWrapperClass} transition:fly={getTransition()}>
-				<div class={contentClass}>
+			<div
+				class={contentWrapperClasses}
+				transition:fly={getTransition()}
+				data-testid={buildTestId('drawer', 'dialog', testId)}
+			>
+				<div class={contentClasses}>
 					<!-- Header -->
 					{#if header || title}
-						<div class={headerClass}>
+						<div class={headerClasses}>
 							{#if header}
 								{@render header()}
 							{:else}
 								{#if title}
-									<h3 id="drawer-title" class={titleClasses}>{title}</h3>
+									<h3
+										id="drawer-title"
+										class={titleClasses}
+										data-testid={buildTestId('drawer', 'title', testId)}
+									>
+										{title}
+									</h3>
 								{/if}
 								<button
 									type="button"
 									class={closeButtonClasses}
 									onclick={handleCloseClick}
 									aria-label="Close drawer"
+									data-testid={buildTestId('drawer', 'close', testId)}
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -205,7 +239,7 @@
 						</div>
 					{/if}
 
-					<div class={bodyClass}>
+					<div class={bodyClasses} data-testid={buildTestId('drawer', 'body', testId)}>
 						{#if children}
 							{@render children()}
 						{/if}
@@ -213,7 +247,7 @@
 
 					<!-- Add footer section -->
 					{#if footer}
-						<div class={footerClass}>
+						<div class={footerClasses}>
 							{@render footer()}
 						</div>
 					{/if}

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/drawer/drawer.d.ts

@@ -1,4 +1,3 @@
-import { Size } from '../variants.js';
 export declare const drawer: import("tailwind-variants").TVReturnType<{
     open: {
         true: {
@@ -23,22 +22,22 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             contentWrapper: string;
         };
-        [Size.SM]: {
+        sm: {
             contentWrapper: string;
         };
-        [Size.BASE]: {
+        base: {
             contentWrapper: string;
         };
-        [Size.LG]: {
+        lg: {
             contentWrapper: string;
         };
-        [Size.XL]: {
+        xl: {
             contentWrapper: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             contentWrapper: string;
         };
     };
@@ -76,22 +75,22 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             contentWrapper: string;
         };
-        [Size.SM]: {
+        sm: {
             contentWrapper: string;
         };
-        [Size.BASE]: {
+        base: {
             contentWrapper: string;
         };
-        [Size.LG]: {
+        lg: {
             contentWrapper: string;
         };
-        [Size.XL]: {
+        xl: {
             contentWrapper: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             contentWrapper: string;
         };
     };
@@ -129,22 +128,22 @@ export declare const drawer: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             contentWrapper: string;
         };
-        [Size.SM]: {
+        sm: {
             contentWrapper: string;
         };
-        [Size.BASE]: {
+        base: {
             contentWrapper: string;
         };
-        [Size.LG]: {
+        lg: {
             contentWrapper: string;
         };
-        [Size.XL]: {
+        xl: {
             contentWrapper: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             contentWrapper: string;
         };
     };

package/dist/elements/accordion/Accordion.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { twMerge } from 'tailwind-merge';
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import { accordion } from './accordion.js';
 	import type { AccordionProps } from '../../index.js';
 
@@ -13,22 +15,36 @@
 		onexpand,
 		oncollapse,
 		class: className,
+		titleclass,
+		titleClass = titleclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		headerclass,
+		headerClass = headerclass ?? '',
 		summary,
 		children,
-		icon: Icon
+		icon: Icon,
+		testId
 	}: AccordionProps = $props();
 
-	const {
-		base,
-		header,
-		title: titleClass,
-		body
-	} = accordion({
-		color,
-		open,
-		bordered,
-		hasChildren: !!children
-	});
+	warnDeprecatedProps(
+		'Accordion',
+		{ titleclass, bodyclass, headerclass },
+		{
+			titleclass: 'titleClass',
+			bodyclass: 'bodyClass',
+			headerclass: 'headerClass'
+		}
+	);
+
+	const styles = $derived(
+		accordion({
+			color,
+			open,
+			bordered,
+			hasChildren: !!children
+		})
+	);
 
 	function handleClick() {
 		if (!children) return; // Don't toggle if no children
@@ -40,16 +56,17 @@
 		}
 	}
 
-	const baseClasses = $derived(twMerge(base(), className));
+	const baseClasses = $derived(cn(styles.base(), className));
 </script>
 
 <div class={baseClasses}>
 	{#if children}
 		<button
-			class={twMerge(header(), 'flex gap-3')}
+			class={cn(styles.header(), 'flex gap-3', headerClass)}
 			aria-expanded={open}
 			aria-controls={id}
 			onclick={handleClick}
+			data-testid={buildTestId('accordion', 'trigger', testId)}
 		>
 			{@render accordionHeaderContent()}
 			<div class="flex items-center">
@@ -69,12 +86,16 @@
 			</div>
 		</button>
 		{#if open}
-			<div class={body()} {id}>
+			<div
+				class={cn(styles.body(), bodyClass)}
+				{id}
+				data-testid={buildTestId('accordion', 'content', testId)}
+			>
 				{@render children()}
 			</div>
 		{/if}
 	{:else}
-		<div class={twMerge(header(), 'flex gap-3')}>
+		<div class={cn(styles.header(), 'flex gap-3', headerClass)}>
 			{@render accordionHeaderContent()}
 		</div>
 	{/if}
@@ -87,7 +108,7 @@
 		{/if}
 		<div class="flex flex-col items-start text-left">
 			{#if title}
-				<h3 class={titleClass()}>{title}</h3>
+				<h3 class={cn(styles.title(), titleClass)}>{title}</h3>
 			{/if}
 			{#if description}
 				<p class="text-default-500 text-xs whitespace-nowrap">{description}</p>

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/accordion/accordion.d.ts

@@ -1,37 +1,36 @@
-import { Color } from '../../variants.js';
 export declare const accordion: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
@@ -76,37 +75,37 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
     body: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
@@ -151,37 +150,37 @@ export declare const accordion: import("tailwind-variants").TVReturnType<{
     body: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;