@makolabs/ripple 1.7.11 → 1.8.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/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/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();
 
@@ -65,13 +67,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}-errors"
+				class="text-danger-600 mt-1 text-sm"
+				role="alert"
+				data-testid={buildTestId('input', 'error', testId, i)}
+			>
 				{error}
 			</p>
 		{/each}
@@ -89,7 +100,8 @@
 					'text-danger-600': errors.length
 				},
 				extraClass
-			)}>{label}</label
+			)}
+			data-testid={buildTestId('input', 'label', testId)}>{label}</label
 		>
 	{/if}
 {/snippet}

package/dist/forms/NumberInput.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 { NumberInputProps } from '../index.js';
 
@@ -16,6 +17,7 @@
 		disabled = false,
 		dropdownicon: DropdownIcon,
 		onunitchange: onUnitChange,
+		testId,
 		...restProps
 	}: NumberInputProps = $props();
 
@@ -79,7 +81,11 @@
 
 <div class="space-y-1">
 	{#if label}
-		<label for={name} class="text-default-700 block text-sm font-medium">{label}</label>
+		<label
+			for={name}
+			class="text-default-700 block text-sm font-medium"
+			data-testid={buildTestId('numberinput', 'label', testId)}>{label}</label
+		>
 	{/if}
 	<div class={containerClass} bind:this={containerRef}>
 		<svg
@@ -106,6 +112,7 @@
 			{placeholder}
 			{disabled}
 			class={inputClass}
+			data-testid={buildTestId('numberinput', undefined, testId)}
 			{...restProps}
 		/>
 

package/dist/forms/RadioInputs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import type { RadioInputsProps } from '../index.js';
 
 	let {
@@ -10,7 +11,8 @@
 		disabled = false,
 		class: className = '',
 		errors = [],
-		required = false
+		required = false,
+		testId
 	}: RadioInputsProps = $props();
 
 	const containerClass = $derived(cn('space-y-2', className));
@@ -35,7 +37,7 @@
 		<label class={labelClass} for={`${name}-${value || options[0].value}`}>{label}</label>
 	{/if}
 	<div class="space-y-2">
-		{#each options as option (option.value)}
+		{#each options as option, index (option.value)}
 			<div class="flex items-center gap-2">
 				<input
 					type="radio"
@@ -46,9 +48,16 @@
 					class={radioClass}
 					{disabled}
 					{required}
-					aria-describedby={errors.length ? `${name}-errors` : undefined}
+					aria-describedby={errors.length
+						? errors.map((_, i) => `${name}-error-${i}`).join(' ')
+						: undefined}
+					data-testid={buildTestId('radio', 'option', testId, index)}
 				/>
-				<label for={`${name}-${option.value}`} class="text-default-700 text-sm">
+				<label
+					for={`${name}-${option.value}`}
+					class="text-default-700 text-sm"
+					data-testid={buildTestId('radio', 'label', testId, index)}
+				>
 					{option.label}
 				</label>
 			</div>
@@ -56,7 +65,7 @@
 	</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">
 				{error}
 			</p>
 		{/each}

package/dist/forms/Slider.svelte

@@ -1,6 +1,7 @@
 <!-- A unified slider component supporting enum, single value, and range selection -->
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
 	import { slider } from './slider.js';
 	import { Size } from '../variants.js';
 	import type { SliderProps } from '../index.js';
@@ -36,7 +37,8 @@
 			notation: 'standard' as NotationType,
 			maximumFractionDigits: 1,
 			minimumFractionDigits: 0
-		}
+		},
+		testId
 	}: SliderProps = $props();
 
 	$effect(() => {
@@ -242,13 +244,13 @@
 {/if}
 <input type="hidden" name={`${name}[mode]`} bind:value={mode} />
 
-<div class={baseClass}>
+<div class={baseClass} data-testid={buildTestId('slider', undefined, testId)}>
 	<div class="flex items-center justify-between">
 		{#if label}
 			<label for={name} class={labelClass_}>{label}</label>
 		{/if}
 		{#if showValue && mode !== 'enum'}
-			<div class={valueClass_}>
+			<div class={valueClass_} data-testid={buildTestId('slider', 'value', testId)}>
 				{#if mode === 'range'}
 					<span>{formatValue(valueStart)}</span>
 					<span class="mx-1">-</span>
@@ -258,7 +260,7 @@
 				{/if}
 			</div>
 		{:else if showValue && mode === 'enum'}
-			<div class={valueClass_}>
+			<div class={valueClass_} data-testid={buildTestId('slider', 'value', testId)}>
 				<span>{options[getEnumIndex()]?.label || ''}</span>
 			</div>
 		{/if}