@makolabs/ripple 1.7.11 → 1.9.0

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

@@ -1,4 +1,3 @@
-import { Size } from '../../variants.js';
 export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
     position: {
         'top-left': {
@@ -15,7 +14,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -23,7 +22,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -31,7 +30,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -39,7 +38,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -47,7 +46,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -55,7 +54,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -98,7 +97,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -106,7 +105,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -114,7 +113,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -122,7 +121,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -130,7 +129,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -138,7 +137,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -181,7 +180,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -189,7 +188,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -197,7 +196,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -205,7 +204,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -213,7 +212,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             item: string;
             itemIcon: string;
@@ -221,7 +220,7 @@ export declare const dropdownMenu: import("tailwind-variants").TVReturnType<{
             headerTitle: string;
             headerSubtitle: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             item: string;
             itemIcon: string;

package/dist/elements/dropdown/select.d.ts

@@ -1,42 +1,41 @@
-import { Size } from '../../variants.js';
 export declare const selectTV: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -67,42 +66,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, undefined, {
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             triggerIcon: string;
             container: string;
@@ -133,42 +132,42 @@ export declare const selectTV: import("tailwind-variants").TVReturnType<{
     emptyMessage: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XL]: {
+        xl: {
             trigger: string;
             triggerIcon: string;
             container: string;
             item: string;
             base: string;
         };
-        [Size.XXL]: {
+        "2xl": {
             trigger: string;
             triggerIcon: string;
             container: string;

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/pagination/Pagination.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
 	import type { ClassValue } from 'tailwind-variants';
 
 	/**
@@ -54,6 +55,7 @@
 		activeButtonClass?: ClassValue;
 		/** Use internal state management (when currentPage is not provided) */
 		internalState?: boolean;
+		testId?: string;
 	}
 
 	let {
@@ -80,7 +82,8 @@
 		infoClass = '',
 		buttonClass = '',
 		activeButtonClass = '',
-		internalState = false
+		internalState = false,
+		testId
 	}: PaginationProps = $props();
 
 	// Internal state management
@@ -256,7 +259,10 @@
 </script>
 
 {#if shouldShowPagination}
-	<div class={cn(defaultWrapperClass, wrapperClass)}>
+	<div
+		class={cn(defaultWrapperClass, wrapperClass)}
+		data-testid={buildTestId('pagination', undefined, testId)}
+	>
 		{#if showInfo}
 			<div class="flex items-center gap-2">
 				{#if showPageSize}
@@ -271,6 +277,7 @@
 							value={pageSize}
 							onchange={handlePageSizeChange}
 							{disabled}
+							data-testid={buildTestId('pagination', 'size', testId)}
 						>
 							{#each pageSizeOptions as option (option)}
 								<option value={option}>{option}</option>
@@ -316,6 +323,7 @@
 							: defaultInactiveButtonClass
 					)}
 					aria-label="Previous page"
+					data-testid={buildTestId('pagination', 'prev', testId)}
 					type="button"
 				>
 					‹
@@ -338,6 +346,7 @@
 								)}
 								aria-label="Page {pageNum}"
 								aria-current={validCurrentPage === pageNum ? 'page' : undefined}
+								data-testid={buildTestId('pagination', 'page', testId, pageNum)}
 								type="button"
 							>
 								{pageNum}
@@ -363,6 +372,7 @@
 								)}
 								aria-label="Page 1"
 								aria-current={validCurrentPage === 1 ? 'page' : undefined}
+								data-testid={buildTestId('pagination', 'page', testId, 1)}
 								type="button"
 							>
 								1
@@ -385,6 +395,7 @@
 								)}
 								aria-label="Page {pageNum}"
 								aria-current={validCurrentPage === pageNum ? 'page' : undefined}
+								data-testid={buildTestId('pagination', 'page', testId, pageNum)}
 								type="button"
 							>
 								{pageNum}
@@ -407,6 +418,7 @@
 								)}
 								aria-label="Page {totalPages}"
 								aria-current={validCurrentPage === totalPages ? 'page' : undefined}
+								data-testid={buildTestId('pagination', 'page', testId, totalPages)}
 								type="button"
 							>
 								{totalPages}
@@ -430,6 +442,7 @@
 							: defaultInactiveButtonClass
 					)}
 					aria-label="Next page"
+					data-testid={buildTestId('pagination', 'next', testId)}
 					type="button"
 				>
 					›

package/dist/elements/pagination/Pagination.svelte.d.ts

@@ -51,6 +51,7 @@ export interface PaginationProps {
     activeButtonClass?: ClassValue;
     /** Use internal state management (when currentPage is not provided) */
     internalState?: boolean;
+    testId?: string;
 }
 declare const Pagination: import("svelte").Component<PaginationProps, {}, "">;
 type Pagination = ReturnType<typeof Pagination>;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type { CheckboxProps } from '../index.js';
 
 	let {
@@ -8,7 +9,8 @@
 		value = $bindable(false),
 		disabled = false,
 		errors = [],
-		required = false
+		required = false,
+		testId
 	}: CheckboxProps = $props();
 
 	const checkboxClass = $derived(
@@ -36,16 +38,26 @@
 			class={checkboxClass}
 			{disabled}
 			{required}
-			aria-describedby={errors.length ? `${name}-errors` : undefined}
+			aria-describedby={errors.length
+				? errors.map((_, i) => `${name}-error-${i}`).join(' ')
+				: undefined}
+			data-testid={buildTestId('checkbox', undefined, testId)}
 		/>
 		{#if label}
-			<label for={name} class={labelClass}>{label}</label>
+			<label for={name} class={labelClass} data-testid={buildTestId('checkbox', 'label', testId)}
+				>{label}</label
+			>
 		{/if}
 	</div>
 
 	{#if errors.length}
 		{#each errors as error, i (i)}
-			<p id={`${name}-errors`} class="text-danger-600 mt-1 text-sm" role="alert">
+			<p
+				id={`${name}-error-${i}`}
+				class="text-danger-600 mt-1 text-sm"
+				role="alert"
+				data-testid={buildTestId('checkbox', 'error', testId, i)}
+			>
 				{error}
 			</p>
 		{/each}

package/dist/forms/Form.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
 	import { cn } from '../helper/cls.js';
 	import type { FormProps } from '../index.js';
 
@@ -17,7 +16,6 @@
 	}: FormProps<any> = $props();
 
 	const { enhance, delayed } = form;
-	setContext('form', form);
 
 	const formClasses = $derived(cn('space-y-4', className));
 </script>

package/dist/forms/Input.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { Size } from '../variants.js';
 	import type { InputProps } from '../index.js';
 
@@ -14,6 +15,7 @@
 		size = Size.BASE,
 		value = $bindable(),
 		errors = [],
+		testId,
 		...restProps
 	}: InputProps = $props();
 
@@ -47,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({
@@ -65,13 +69,22 @@
 <div class="w-full">
 	{@render Label('mb-2')}
 	{#if type === 'textarea'}
-		<textarea {...textareaProps as unknown as Record<string, unknown>} bind:value></textarea>
+		<textarea
+			{...textareaProps as unknown as Record<string, unknown>}
+			data-testid={buildTestId('input', undefined, testId)}
+			bind:value
+		></textarea>
 	{:else}
-		<input {...inputProps} bind:value />
+		<input {...inputProps} data-testid={buildTestId('input', undefined, testId)} bind:value />
 	{/if}
 	{#if errors.length}
 		{#each errors as error, i (i)}
-			<p id="{name}-errors" class="text-danger-600 mt-1 text-sm" role="alert">
+			<p
+				id="{name}-error-{i}"
+				class="text-danger-600 mt-1 text-sm"
+				role="alert"
+				data-testid={buildTestId('input', 'error', testId, i)}
+			>
 				{error}
 			</p>
 		{/each}
@@ -89,7 +102,8 @@
 					'text-danger-600': errors.length
 				},
 				extraClass
-			)}>{label}</label
+			)}
+			data-testid={buildTestId('input', 'label', testId)}>{label}</label
 		>
 	{/if}
 {/snippet}