@makolabs/ripple 1.7.11 → 1.9.0

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

@@ -0,0 +1,43 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+import type { VariantColors } from '../index.js';
+export type BreadcrumbItem = {
+    label: string;
+    href: string;
+    current?: boolean;
+    icon?: Component;
+};
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    size?: 'xs' | 'sm' | 'base' | 'lg';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    color?: VariantColors;
+    icon?: Component;
+    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;
+    testId?: string;
+};
+export type PageHeaderProps = {
+    title: string;
+    subtitle?: string;
+    breadcrumbs?: BreadcrumbItem[];
+    children?: Snippet;
+    class?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    layout?: 'vertical' | 'horizontal';
+    testId?: string;
+};

package/dist/header/header-types.js

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

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;

package/dist/helper/deprecation.js

@@ -0,0 +1,24 @@
+const warned = new Set();
+/**
+ * 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 function warnDeprecatedProps(component, props, map) {
+    for (const [oldName, newName] of Object.entries(map)) {
+        if (props[oldName] !== undefined && !warned.has(`${component}.${oldName}`)) {
+            warned.add(`${component}.${oldName}`);
+            console.warn(`[ripple-ui] ${component}: "${oldName}" is deprecated, use "${newName}" instead.`);
+        }
+    }
+}
+/**
+ * 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 function resetDeprecationWarnings() {
+    warned.clear();
+}

package/dist/helper/testid.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Builds a data-testid value.
+ * Pattern: [prefix-]component[-element][-index]
+ *
+ * @param component - Component name (e.g., 'button', 'input', 'modal')
+ * @param element - Optional sub-element suffix (e.g., 'label', 'close', 'trigger')
+ * @param prefix - Optional consumer-provided prefix for multi-instance disambiguation
+ * @param index - Optional index for dynamic lists (e.g., table rows, select options). Can be a compound string like "0-1" for nested lists.
+ */
+export declare function buildTestId(component: string, element?: string, prefix?: string, index?: number | string): string;

package/dist/helper/testid.js

@@ -0,0 +1,17 @@
+/**
+ * Builds a data-testid value.
+ * Pattern: [prefix-]component[-element][-index]
+ *
+ * @param component - Component name (e.g., 'button', 'input', 'modal')
+ * @param element - Optional sub-element suffix (e.g., 'label', 'close', 'trigger')
+ * @param prefix - Optional consumer-provided prefix for multi-instance disambiguation
+ * @param index - Optional index for dynamic lists (e.g., table rows, select options). Can be a compound string like "0-1" for nested lists.
+ */
+export function buildTestId(component, element, prefix, index) {
+    let id = prefix ? `${prefix}-${component}` : component;
+    if (element)
+        id += `-${element}`;
+    if (index !== undefined)
+        id += `-${index}`;
+    return id;
+}