@makolabs/ripple 1.7.11 → 1.9.0

package/dist/index.js

@@ -8,10 +8,15 @@ import { ChartColor, Color, Size } from './variants.js';
  * - ChartColors: Record type mapping ChartColor enum to string values
  */
 export { Color, Size, ChartColor };
+export { buildTestId } from './helper/testid.js';
+// ============================================================================
 // Helper utilities
+// ============================================================================
 export { tv, cn } from './helper/cls.js';
 export { isRouteActive } from './helper/nav.svelte.js';
+// ============================================================================
 // Direct Component Exports
+// ============================================================================
 // Button
 export { default as Button } from './button/Button.svelte';
 // Modal
@@ -34,6 +39,7 @@ export { default as RankedCard } from './layout/card/RankedCard.svelte';
 // Elements - Alert
 export { default as Alert } from './elements/alert/Alert.svelte';
 export { default as Pagination } from './elements/pagination/Pagination.svelte';
+// Elements - Tabs
 export { default as Tab } from './layout/tabs/Tab.svelte';
 export { default as TabContent } from './layout/tabs/TabContent.svelte';
 export { default as TabGroup } from './layout/tabs/TabGroup.svelte';
@@ -48,18 +54,15 @@ export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 // Elements - ActivityList
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
-// Component Variant Utilities
-export { dropdownMenu } from './elements/dropdown/dropdown.js';
-export { badge } from './elements/badge/badge.js';
-export { buttonVariants } from './button/button.js';
-export { modal } from './modal/modal.js';
-export { drawer } from './drawer/drawer.js';
-export { selectTV } from './elements/dropdown/select.js';
-export { breadcrumbs } from './header/breadcrumbs.js';
-export { metricCard } from './layout/card/metric-card.js';
-export { rankedCard } from './layout/card/ranked-card.js';
-export { activityList } from './layout/activity-list/activity-list.js';
+// Elements - Progress
+export { default as Progress } from './elements/progress/Progress.svelte';
+// Elements - Accordion
+export { default as Accordion } from './elements/accordion/Accordion.svelte';
+// Elements - Timeline
+export { default as Timeline } from './elements/timeline/Timeline.svelte';
+// Chart
 export { default as Chart } from './charts/Chart.svelte';
+// File Upload
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 // Toaster: Should be registered in +layout.svelte
@@ -81,19 +84,40 @@ export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as DateRange } from './forms/DateRange.svelte';
 export { default as Tags } from './forms/Tags.svelte';
 export { default as RadioPill } from './forms/RadioPill.svelte';
-export { default as Progress } from './elements/progress/Progress.svelte';
-export { default as Accordion } from './elements/accordion/Accordion.svelte';
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
+// ============================================================================
+// Component Variant Utilities
+// ============================================================================
+export { dropdownMenu } from './elements/dropdown/dropdown.js';
+export { badge } from './elements/badge/badge.js';
+export { buttonVariants } from './button/button.js';
+export { modal } from './modal/modal.js';
+export { drawer } from './drawer/drawer.js';
+export { selectTV } from './elements/dropdown/select.js';
+export { breadcrumbs } from './header/breadcrumbs.js';
+export { metricCard } from './layout/card/metric-card.js';
+export { rankedCard } from './layout/card/ranked-card.js';
+export { activityList } from './layout/activity-list/activity-list.js';
+export { slider } from './forms/slider.js';
+// ============================================================================
 // Re-export filters
+// ============================================================================
 export { CompactFilters } from './filters/index.js';
+// ============================================================================
 // File Browser and Storage Adapters
+// ============================================================================
 export * from './file-browser/index.js';
 export * from './adapters/storage/index.js';
+// ============================================================================
 // AI Adapters
+// ============================================================================
 export * from './adapters/ai/index.js';
+// ============================================================================
 // User Management Helper Functions
+// ============================================================================
 export { getUserDisplayName, getUserInitials } from './user-management/user-management.js';
+// ============================================================================
 // User Management Components
+// ============================================================================
 export { default as UserManagement } from './user-management/UserManagement.svelte';
 export { default as UserTable } from './user-management/UserTable.svelte';
 export { default as UserModal } from './user-management/UserModal.svelte';

package/dist/layout/activity-list/activity-list-types.d.ts

@@ -0,0 +1,30 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors } from '../../index.js';
+export type ActivityItemBadge = {
+    text: string;
+    class: string;
+};
+export type ActivityItemAction = {
+    label: string;
+    onClick?: () => void;
+};
+export type ActivityItem = {
+    title: string;
+    subtitle?: string;
+    badges?: ActivityItemBadge[];
+    actions?: ActivityItemAction[];
+};
+export type ActivityListProps = {
+    title?: string;
+    items?: ActivityItem[];
+    color?: VariantColors;
+    class?: ClassValue;
+    headerClass?: ClassValue;
+    titleClass?: ClassValue;
+    contentClass?: ClassValue;
+    itemClass?: ClassValue;
+    onItemClick?: (item: ActivityItem, index: number) => void;
+    children?: Snippet;
+    testId?: string;
+};

package/dist/layout/activity-list/activity-list-types.js

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

package/dist/layout/activity-list/activity-list.d.ts

@@ -1,37 +1,36 @@
-import { Color } from '../../variants.js';
 export declare const activityList: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
@@ -51,37 +50,37 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     itemActions: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;
@@ -101,37 +100,37 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     itemActions: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             header: string;
             title: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             header: string;
             title: string;

package/dist/layout/card/Card.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { warnDeprecatedProps } from '../../helper/deprecation.js';
 	import { card } from './card.js';
 	import type { CardProps } from '../../index.js';
 	import { Color } from '../../variants.js';
@@ -10,10 +12,22 @@
 		title,
 		color = Color.DEFAULT,
 		class: className = '',
-		titleclass: titleClass = '',
-		bodyclass: bodyClass = ''
+		titleclass,
+		titleClass = titleclass ?? '',
+		bodyclass,
+		bodyClass = bodyclass ?? '',
+		testId
 	}: CardProps = $props();
 
+	warnDeprecatedProps(
+		'Card',
+		{ titleclass, bodyclass },
+		{
+			titleclass: 'titleClass',
+			bodyclass: 'bodyClass'
+		}
+	);
+
 	const { base, title: titleSlot, body: bodySlot } = $derived(card({ color }));
 
 	const baseClass = $derived(cn(base(), className));
@@ -21,15 +35,15 @@
 	const bodyClasses = $derived(cn(bodySlot(), bodyClass));
 </script>
 
-<div class={baseClass}>
+<div class={baseClass} data-testid={buildTestId('card', undefined, testId)}>
 	{#if custom}
 		{@render custom()}
 	{:else}
 		{#if title}
-			<h3 class={titleClasses}>{title}</h3>
+			<h3 class={titleClasses} data-testid={buildTestId('card', 'title', testId)}>{title}</h3>
 		{/if}
 		{#if children}
-			<div class={bodyClasses}>
+			<div class={bodyClasses} data-testid={buildTestId('card', 'body', testId)}>
 				{@render children()}
 			</div>
 		{/if}

package/dist/layout/card/card-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';
+import type { ProgressSegment } from '../../elements/progress/progress-types.js';
+export type CardProps = {
+    color?: VariantColors;
+    title?: string;
+    class?: ClassValue;
+    /** @deprecated Use titleClass instead */
+    titleclass?: ClassValue;
+    titleClass?: ClassValue;
+    /** @deprecated Use bodyClass instead */
+    bodyclass?: ClassValue;
+    bodyClass?: ClassValue;
+    children?: Snippet;
+    custom?: Snippet;
+    testId?: string;
+};
+export type AlertProps = {
+    title?: string;
+    message: string;
+    color?: VariantColors;
+    class?: ClassValue;
+    onclose?: () => void;
+    footer?: Snippet;
+    icon?: Component;
+    testId?: string;
+};
+export type MetricDetail = {
+    label: string;
+    value: string | number;
+    color?: VariantColors;
+};
+export type MetricCardProps = {
+    title: string;
+    value: string | number;
+    details?: MetricDetail[];
+    percent?: number;
+    segments?: ProgressSegment[];
+    class?: ClassValue;
+    testId?: string;
+};

package/dist/layout/card/card-types.js

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

package/dist/layout/card/card.d.ts

@@ -1,37 +1,36 @@
-import { Color } from '../../variants.js';
 export declare const card: import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;
@@ -43,37 +42,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, undefined, {
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;
@@ -85,37 +84,37 @@ export declare const card: import("tailwind-variants").TVReturnType<{
     body: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
-        [Color.DEFAULT]: {
+        default: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.PRIMARY]: {
+        primary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SECONDARY]: {
+        secondary: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.INFO]: {
+        info: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.SUCCESS]: {
+        success: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.WARNING]: {
+        warning: {
             base: string;
             title: string;
             body: string;
         };
-        [Color.DANGER]: {
+        danger: {
             base: string;
             title: string;
             body: string;

package/dist/layout/card/metric-card.d.ts

@@ -2,8 +2,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };
@@ -12,8 +12,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };
@@ -28,8 +28,8 @@ export declare const metricCard: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
             value?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             progress?: import("tailwind-merge").ClassNameValue;
             detail?: import("tailwind-merge").ClassNameValue;
         };

package/dist/layout/card/ranked-card.d.ts

@@ -1,3 +1,4 @@
+import type { ClassValue } from 'tailwind-variants';
 export declare const rankedCard: import("tailwind-variants").TVReturnType<{
     columns: {
         1: {
@@ -100,5 +101,5 @@ export type RankedCardItem = {
 export type RankedCardProps = {
     items: RankedCardItem[];
     columns?: 1 | 2 | 3 | 4;
-    class?: string;
+    class?: ClassValue;
 };

package/dist/layout/navbar/Navbar.svelte

@@ -5,12 +5,19 @@
 	import { isRouteActive } from '../../helper/nav.svelte.js';
 	import { slide } from 'svelte/transition';
 	import { resolve } from '$app/paths';
+	import { buildTestId } from '../../helper/testid.js';
 
-	let { logo, links = [], class: className = '', brand, children, actions }: NavbarProps = $props();
+	let {
+		logo,
+		links = [],
+		class: className = '',
+		brand,
+		children,
+		actions,
+		testId
+	}: NavbarProps = $props();
 
 	let mobileMenuOpen = $state(false);
-	let scrolled = $state(false);
-	let isScrollingDown = $state(false);
 
 	onNavigate(() => {
 		mobileMenuOpen = false;
@@ -31,13 +38,7 @@
 		actions: actionsSlot
 	} = $derived(navbar());
 
-	const baseClass = $derived(
-		cn(base(), className, {
-			'shadow-md': scrolled,
-			'translate-y-0': !isScrollingDown || mobileMenuOpen,
-			'-translate-y-full': isScrollingDown && !mobileMenuOpen && scrolled
-		})
-	);
+	const baseClass = $derived(cn(base(), className));
 	const wrapperClasses = $derived(cn(wrapper()));
 	const containerClasses = $derived(cn(container()));
 	const brandClasses = $derived(cn(brandSlot()));
@@ -79,13 +80,9 @@
 </script>
 
 <nav
-	class={baseClass}
+	class={cn(baseClass, 'z-10')}
 	aria-label="Main navigation"
-	class:sticky={scrolled}
-	class:top-0={scrolled}
-	class:z-10={true}
-	class:transition-transform={true}
-	class:duration-300={true}
+	data-testid={buildTestId('navbar', undefined, testId)}
 >
 	<div class={wrapperClasses}>
 		<div class={containerClasses}>
@@ -112,6 +109,7 @@
 					aria-controls="mobile-menu"
 					aria-expanded={mobileMenuOpen}
 					onclick={toggleMobileMenu}
+					data-testid={buildTestId('navbar', 'toggle', testId)}
 				>
 					<span class="sr-only">Open main menu</span>
 					{#if mobileMenuOpen}

package/dist/layout/navbar/navbar-types.d.ts

@@ -0,0 +1,19 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
+export type NavbarLinkItem = {
+    label: string;
+    href: string;
+    icon?: Component;
+    active?: boolean;
+    children?: NavbarLinkItem[];
+};
+export type NavbarProps = {
+    logo?: string | Component;
+    links?: NavbarLinkItem[];
+    class?: ClassValue;
+    brand?: Snippet;
+    children?: Snippet;
+    actions?: Snippet;
+    testId?: string;
+};

package/dist/layout/navbar/navbar-types.js

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