@makolabs/ripple 1.7.11 → 1.9.0

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}

package/dist/forms/Toggle.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
 	import { Color, Size } from '../variants.js';
-	import type { ToggleProps } from '../index.js';
+	import { buildTestId } from '../helper/testid.js';
+	import type { ToggleProps, VariantColors, VariantSizes } from '../index.js';
 
 	let {
 		name,
@@ -15,44 +16,76 @@
 		errors = [],
 		offColor = 'bg-default-200',
 		onColor,
+		testId,
 		...restProps
 	}: ToggleProps = $props();
 
 	const activeColor = $derived(
 		onColor ||
-			{
-				[Color.PRIMARY]: 'bg-primary-500',
-				[Color.SECONDARY]: 'bg-secondary-500',
-				[Color.SUCCESS]: 'bg-green-500',
-				[Color.DANGER]: 'bg-danger-500',
-				[Color.WARNING]: 'bg-yellow-500',
-				[Color.INFO]: 'bg-blue-500',
-				[Color.DEFAULT]: 'bg-default-800'
-			}[color]
+			(
+				{
+					[Color.DEFAULT]: 'bg-default-800',
+					[Color.PRIMARY]: 'bg-primary-500',
+					[Color.SECONDARY]: 'bg-secondary-500',
+					[Color.INFO]: 'bg-info-500',
+					[Color.SUCCESS]: 'bg-success-500',
+					[Color.WARNING]: 'bg-warning-500',
+					[Color.DANGER]: 'bg-danger-500'
+				} satisfies Record<VariantColors, string>
+			)[color]
 	);
 
 	const toggleSize = $derived(
-		{
-			[Size.SM]: 'w-8 h-4',
-			[Size.BASE]: 'w-10 h-5',
-			[Size.LG]: 'w-12 h-6'
-		}[size]
+		(
+			{
+				[Size.XS]: 'w-8 h-4',
+				[Size.SM]: 'w-8 h-4',
+				[Size.BASE]: 'w-10 h-5',
+				[Size.LG]: 'w-12 h-6',
+				[Size.XL]: 'w-12 h-6',
+				[Size.XXL]: 'w-12 h-6'
+			} satisfies Record<VariantSizes, string>
+		)[size]
 	);
 
 	const thumbSize = $derived(
-		{
-			[Size.SM]: 'h-3 w-3',
-			[Size.BASE]: 'h-4 w-4',
-			[Size.LG]: 'h-5 w-5'
-		}[size]
+		(
+			{
+				[Size.XS]: 'h-3 w-3',
+				[Size.SM]: 'h-3 w-3',
+				[Size.BASE]: 'h-4 w-4',
+				[Size.LG]: 'h-5 w-5',
+				[Size.XL]: 'h-5 w-5',
+				[Size.XXL]: 'h-5 w-5'
+			} satisfies Record<VariantSizes, string>
+		)[size]
 	);
 
 	const thumbPosition = $derived(
-		{
-			[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
-			[Size.BASE]: value ? 'translate-x-5' : 'translate-x-0.5',
-			[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5'
-		}[size]
+		(
+			{
+				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.BASE]: value ? 'translate-x-5' : 'translate-x-0.5',
+				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
+				[Size.XL]: value ? 'translate-x-6' : 'translate-x-0.5',
+				[Size.XXL]: value ? 'translate-x-6' : 'translate-x-0.5'
+			} satisfies Record<VariantSizes, string>
+		)[size]
+	);
+
+	const focusRingColor = $derived(
+		(
+			{
+				[Color.DEFAULT]: 'focus:ring-default-500',
+				[Color.PRIMARY]: 'focus:ring-primary-500',
+				[Color.SECONDARY]: 'focus:ring-secondary-500',
+				[Color.INFO]: 'focus:ring-info-500',
+				[Color.SUCCESS]: 'focus:ring-success-500',
+				[Color.WARNING]: 'focus:ring-warning-500',
+				[Color.DANGER]: 'focus:ring-danger-500'
+			} satisfies Record<VariantColors, string>
+		)[color]
 	);
 
 	const toggleWrapperClasses = $derived(
@@ -63,9 +96,9 @@
 			{
 				'opacity-50 cursor-not-allowed': disabled,
 				'cursor-pointer': !disabled,
-				'focus:ring-danger-500': errors.length,
-				[`focus:ring-${color}-500`]: !errors.length
+				'focus:ring-danger-500': errors.length
 			},
+			!errors.length && focusRingColor,
 			className
 		)
 	);
@@ -97,7 +130,11 @@
 
 <div class="flex items-center">
 	{#if label}
-		<label for={id} class={cn('mr-3', labelClasses)}>{label}</label>
+		<label
+			for={id}
+			class={cn('mr-3', labelClasses)}
+			data-testid={buildTestId('toggle', 'label', testId)}>{label}</label
+		>
 	{/if}
 	<button
 		type="button"
@@ -114,6 +151,7 @@
 		}}
 		onkeydown={handleKeyDown}
 		tabindex={disabled ? -1 : 0}
+		data-testid={buildTestId('toggle', undefined, testId)}
 		{...restProps}
 	>
 		<span class={thumbClasses} aria-hidden="true"></span>
@@ -122,7 +160,7 @@
 </div>
 
 {#if errors.length}
-	<div id="{name}-errors" class="mt-1">
+	<div id="{name}-errors" class="mt-1" data-testid={buildTestId('toggle', 'error', testId)}>
 		{#each errors as error, i (i)}
 			<p class="text-danger-600 text-sm" role="alert">
 				{error}

package/dist/forms/form-types.d.ts

@@ -0,0 +1,168 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { DOMAttributes } from 'svelte/elements';
+import type { SuperForm } from 'sveltekit-superforms';
+import type { VariantColors, VariantSizes } from '../index.js';
+export interface FormProps<T extends Record<string, unknown>> {
+    form: SuperForm<any>;
+    class?: ClassValue;
+    method?: 'GET' | 'POST' | 'dialog' | 'get' | 'post' | 'DIALOG' | null | undefined;
+    action?: string;
+    enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | null | undefined;
+    autocomplete?: 'on' | 'off';
+    novalidate?: boolean;
+    children?: Snippet;
+    testId?: string;
+}
+export type InputProps = {
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'date' | 'textarea';
+    value?: string | number;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: ClassValue;
+    size?: VariantSizes;
+    id?: string;
+    errors?: string[];
+    testId?: string;
+} & DOMAttributes<HTMLInputElement>;
+export type RadioOption = {
+    value: string;
+    label: string;
+};
+export type RadioInputsProps = {
+    name: string;
+    label?: string;
+    options: RadioOption[];
+    value?: string;
+    disabled?: boolean;
+    class?: ClassValue;
+    size?: VariantSizes;
+    color?: VariantColors;
+    errors?: string[];
+    required?: boolean;
+    testId?: string;
+};
+export type CheckboxProps = {
+    name: string;
+    label?: string;
+    value?: boolean;
+    disabled?: boolean;
+    class?: ClassValue;
+    size?: VariantSizes;
+    color?: VariantColors;
+    errors?: string[];
+    required?: boolean;
+    testId?: string;
+};
+export interface ToggleProps {
+    name: string;
+    label?: string;
+    disabled?: boolean;
+    class?: ClassValue;
+    value?: boolean;
+    size?: VariantSizes;
+    color?: VariantColors;
+    id?: string;
+    errors?: string[];
+    offColor?: string;
+    onColor?: string;
+    testId?: string;
+}
+export type CurrencyOption = {
+    value: string;
+    icon?: Component;
+};
+export type NumberInputProps = {
+    value?: number;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    size?: VariantSizes;
+    class?: ClassValue;
+    unit?: string;
+    units?: CurrencyOption[];
+    errors?: string[];
+    disabled?: boolean;
+    dropdownicon?: Component;
+    onunitchange?: (prevUnit: string, newUnit: string) => void;
+    testId?: string;
+};
+export interface DateRangeProps {
+    startDate?: Date;
+    endDate?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    class?: ClassValue;
+    placeholder?: string;
+    startLabel?: string;
+    endLabel?: string;
+    format?: string;
+    onselect?: ({ startDate, endDate }: {
+        startDate?: Date;
+        endDate?: Date;
+    }) => void;
+    id?: string;
+    name?: string;
+    testId?: string;
+}
+export interface DateSelectEvent {
+    startDate: Date | null;
+    endDate: Date | null;
+}
+export type TagsProps = {
+    value?: string[];
+    name?: string;
+    label?: string;
+    errors?: string[];
+    placeholder?: string;
+    size?: VariantSizes;
+    class?: ClassValue;
+    suggestions?: string[];
+    onaddtag?: (tag: string) => void;
+    onremovetag?: (tag: string) => void;
+    testId?: string;
+};
+export type SliderMode = 'single' | 'range' | 'enum';
+export type NotationType = 'standard' | 'compact' | 'scientific' | 'engineering';
+export type EnumOption = {
+    value: string | number;
+    label: string;
+};
+export interface SliderProps {
+    name: string;
+    label?: string;
+    mode?: SliderMode;
+    disabled?: boolean;
+    size?: VariantSizes;
+    errors?: string[];
+    class?: ClassValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | string;
+    valueStart?: number;
+    valueEnd?: number;
+    showValue?: boolean;
+    valuePrefix?: string;
+    valueSuffix?: string;
+    options?: EnumOption[];
+    formatOptions?: Intl.NumberFormatOptions & {
+        notation?: NotationType;
+    };
+    testId?: string;
+}
+export type RadioPillProps = {
+    name: string;
+    options: RadioOption[];
+    value?: string;
+    label?: string;
+    class?: ClassValue;
+    errors?: string[];
+    onchange?: (value: string) => void;
+    testId?: string;
+};

package/dist/forms/form-types.js

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

package/dist/forms/slider.d.ts

@@ -1,21 +1,41 @@
-import { Size } from '../variants.js';
 export declare const slider: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.SM]: {
+        xs: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.BASE]: {
+        sm: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.LG]: {
+        base: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        xl: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        "2xl": {
             track: string;
             thumb: string;
             mark: string;
@@ -48,21 +68,42 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     value: string;
 }, undefined, {
     size: {
-        [Size.SM]: {
+        xs: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        sm: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        base: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        lg: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.BASE]: {
+        xl: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.LG]: {
+        "2xl": {
             track: string;
             thumb: string;
             mark: string;
@@ -95,21 +136,42 @@ export declare const slider: import("tailwind-variants").TVReturnType<{
     value: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.SM]: {
+        xs: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        sm: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        base: {
+            track: string;
+            thumb: string;
+            mark: string;
+            label: string;
+            value: string;
+        };
+        lg: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.BASE]: {
+        xl: {
             track: string;
             thumb: string;
             mark: string;
             label: string;
             value: string;
         };
-        [Size.LG]: {
+        "2xl": {
             track: string;
             thumb: string;
             mark: string;

package/dist/forms/slider.js

@@ -16,6 +16,13 @@ export const slider = tv({
     },
     variants: {
         size: {
+            [Size.XS]: {
+                track: 'h-1',
+                thumb: 'w-3 h-3',
+                mark: 'text-xs top-4',
+                label: 'text-xs',
+                value: 'text-xs'
+            },
             [Size.SM]: {
                 track: 'h-1',
                 thumb: 'w-3 h-3',
@@ -36,6 +43,20 @@ export const slider = tv({
                 mark: 'text-base top-7',
                 label: 'text-base',
                 value: 'text-base'
+            },
+            [Size.XL]: {
+                track: 'h-3',
+                thumb: 'w-5 h-5',
+                mark: 'text-base top-7',
+                label: 'text-base',
+                value: 'text-base'
+            },
+            [Size.XXL]: {
+                track: 'h-3',
+                thumb: 'w-5 h-5',
+                mark: 'text-base top-7',
+                label: 'text-base',
+                value: 'text-base'
             }
         },
         disabled: {