@makolabs/ripple 1.7.10 → 1.8.0

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/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: {

package/dist/header/Breadcrumbs.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import { breadcrumbs } from './breadcrumbs.js';
 	import type { BreadcrumbsProps } from '../index.js';
 	import { resolve } from '$app/paths';
@@ -9,15 +10,29 @@
 		size = 'sm',
 		color = 'default',
 		weight = 'medium',
-		icon: Icon,
+		icon: SeparatorIcon,
 		class: className = '',
-		listclass: listClassName = '',
-		itemclass: itemClassName = '',
-		separatorclass: separatorClassName = '',
-		wrapperclass: wrapperClassName = ''
+		listclass,
+		listClass = listclass ?? '',
+		itemclass,
+		itemClass = itemclass ?? '',
+		separatorclass,
+		separatorClass = separatorclass ?? '',
+		wrapperclass,
+		wrapperClass = wrapperclass ?? ''
 	}: BreadcrumbsProps = $props();
 
-	// Get the slots from the breadcrumbs
+	warnDeprecatedProps(
+		'Breadcrumbs',
+		{ listclass, itemclass, separatorclass, wrapperclass },
+		{
+			listclass: 'listClass',
+			itemclass: 'itemClass',
+			separatorclass: 'separatorClass',
+			wrapperclass: 'wrapperClass'
+		}
+	);
+
 	const { base, list, item, separator, wrapper } = $derived(
 		breadcrumbs({
 			size,
@@ -27,21 +42,22 @@
 	);
 
 	const baseClass = $derived(cn(base(), className));
-	const listClass = $derived(cn(list(), listClassName));
-	const itemClasses = $derived(cn(item(), itemClassName));
-	const separatorClasses = $derived(cn(separator(), separatorClassName));
-	const wrapperClasses = $derived(cn(wrapper(), wrapperClassName));
+	const listClasses = $derived(cn(list(), listClass));
+	const itemClasses = $derived(cn(item(), itemClass));
+	const activeItemClasses = $derived(cn(item(), itemClass, breadcrumbs({ active: true }).item()));
+	const separatorClasses = $derived(cn(separator(), separatorClass));
+	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
 </script>
 
 <nav class={baseClass} aria-label="Breadcrumb">
-	<ol role="list" class={listClass}>
+	<ol role="list" class={listClasses}>
 		{#each items as breadcrumbItem, index (index)}
 			<li>
 				<div class={wrapperClasses}>
 					{#if index > 0}
-						<span class={separatorClasses}>
-							{#if Icon}
-								<Icon />
+						<span class={separatorClasses} aria-hidden="true">
+							{#if SeparatorIcon}
+								<SeparatorIcon />
 							{:else}
 								<svg
 									xmlns="http://www.w3.org/2000/svg"
@@ -57,16 +73,23 @@
 							{/if}
 						</span>
 					{/if}
-					<a
-						href={resolve(breadcrumbItem.href as `/`)}
-						class={cn(
-							itemClasses,
-							breadcrumbItem.current ? breadcrumbs({ active: true }).item() : ''
-						)}
-						aria-current={breadcrumbItem.current ? 'page' : undefined}
-					>
-						{breadcrumbItem.label}
-					</a>
+					{#if breadcrumbItem.current}
+						<span class={activeItemClasses} aria-current="page">
+							{#if breadcrumbItem.icon}
+								{@const ItemIcon = breadcrumbItem.icon}
+								<ItemIcon class="size-4 flex-shrink-0" />
+							{/if}
+							{breadcrumbItem.label}
+						</span>
+					{:else}
+						<a href={resolve(breadcrumbItem.href as `/`)} class={itemClasses}>
+							{#if breadcrumbItem.icon}
+								{@const ItemIcon = breadcrumbItem.icon}
+								<ItemIcon class="size-4 flex-shrink-0" />
+							{/if}
+							{breadcrumbItem.label}
+						</a>
+					{/if}
 				</div>
 			</li>
 		{/each}

package/dist/header/PageHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { warnDeprecatedProps } from '../helper/deprecation.js';
 	import type { PageHeaderProps } from '../index.js';
 	import Breadcrumbs from './Breadcrumbs.svelte';
 
@@ -9,15 +10,24 @@
 		breadcrumbs = [],
 		children,
 		class: className = '',
-		titleclass: titleClassName = '',
+		titleclass,
+		titleClass = titleclass ?? '',
 		layout = 'vertical'
 	}: PageHeaderProps = $props();
 
+	warnDeprecatedProps(
+		'PageHeader',
+		{ titleclass },
+		{
+			titleclass: 'titleClass'
+		}
+	);
+
 	const defaultTitleClasses =
 		'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl';
 
 	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
-	const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
+	const titleClasses = $derived(cn(defaultTitleClasses, titleClass));
 	const containerClass = $derived(cn('space-y-4', className as string));
 </script>
 

package/dist/header/breadcrumbs.d.ts

@@ -1,5 +1,5 @@
+import type { ClassValue } from 'tailwind-variants';
 import type { Component } from 'svelte';
-import { Size, Color } from '../variants.js';
 type BreadcrumbItem = {
     label: string;
     href: string;
@@ -7,16 +7,16 @@ type BreadcrumbItem = {
 };
 export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
         };
     };
@@ -35,31 +35,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             item: string;
             wrapper: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             item: string;
             wrapper: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             item: string;
             wrapper: string;
         };
-        [Color.INFO]: {
+        info: {
             item: string;
             wrapper: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             item: string;
             wrapper: string;
         };
-        [Color.WARNING]: {
+        warning: {
             item: string;
             wrapper: string;
         };
-        [Color.DANGER]: {
+        danger: {
             item: string;
             wrapper: string;
         };
@@ -80,16 +80,16 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, undefined, {
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
         };
     };
@@ -108,31 +108,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             item: string;
             wrapper: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             item: string;
             wrapper: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             item: string;
             wrapper: string;
         };
-        [Color.INFO]: {
+        info: {
             item: string;
             wrapper: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             item: string;
             wrapper: string;
         };
-        [Color.WARNING]: {
+        warning: {
             item: string;
             wrapper: string;
         };
-        [Color.DANGER]: {
+        danger: {
             item: string;
             wrapper: string;
         };
@@ -153,16 +153,16 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
     wrapper: string;
 }, import("tailwind-variants").TVReturnType<{
     size: {
-        [Size.XS]: {
+        xs: {
             base: string;
         };
-        [Size.SM]: {
+        sm: {
             base: string;
         };
-        [Size.BASE]: {
+        base: {
             base: string;
         };
-        [Size.LG]: {
+        lg: {
             base: string;
         };
     };
@@ -181,31 +181,31 @@ export declare const breadcrumbs: import("tailwind-variants").TVReturnType<{
         };
     };
     color: {
-        [Color.DEFAULT]: {
+        default: {
             item: string;
             wrapper: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             item: string;
             wrapper: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             item: string;
             wrapper: string;
         };
-        [Color.INFO]: {
+        info: {
             item: string;
             wrapper: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             item: string;
             wrapper: string;
         };
-        [Color.WARNING]: {
+        warning: {
             item: string;
             wrapper: string;
         };
-        [Color.DANGER]: {
+        danger: {
             item: string;
             wrapper: string;
         };
@@ -231,10 +231,18 @@ export type BreadcrumbsProps = {
     weight?: keyof typeof breadcrumbs.variants.weight;
     color?: keyof typeof breadcrumbs.variants.color;
     icon?: Component;
-    class?: string;
-    listclass?: string;
-    itemclass?: string;
-    separatorclass?: string;
-    wrapperclass?: string;
+    class?: ClassValue;
+    /** @deprecated Use listClass instead */
+    listclass?: ClassValue;
+    listClass?: ClassValue;
+    /** @deprecated Use itemClass instead */
+    itemclass?: ClassValue;
+    itemClass?: ClassValue;
+    /** @deprecated Use separatorClass instead */
+    separatorclass?: ClassValue;
+    separatorClass?: ClassValue;
+    /** @deprecated Use wrapperClass instead */
+    wrapperclass?: ClassValue;
+    wrapperClass?: ClassValue;
 };
 export type { BreadcrumbItem };

package/dist/helper/deprecation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Logs a console.warn once per component+prop combination when a deprecated prop is used.
+ * @param component - Component name (e.g. 'Modal', 'Card')
+ * @param props - The raw props object from $props()
+ * @param map - Map of deprecated prop names to their replacements (e.g. { titleclass: 'titleClass' })
+ */
+export declare function warnDeprecatedProps(component: string, props: Record<string, unknown>, map: Record<string, string>): void;
+/**
+ * Reset warnings — only for testing.
+ * Note: In SSR, the warned Set persists across requests within the same process,
+ * so warnings will only fire once per server lifetime. This is acceptable for
+ * development-time deprecation notices.
+ */
+export declare function resetDeprecationWarnings(): void;