@makolabs/ripple 3.0.7 → 3.0.8

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

@@ -1,8 +1,6 @@
 export declare const activityList: import("tailwind-variants").TVReturnType<{
     size: {
         md: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -14,8 +12,6 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
         sm: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -27,47 +23,7 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
     };
-    color: {
-        default: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        primary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        secondary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        info: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        success: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        warning: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        danger: {
-            base: string;
-            header: string;
-            title: string;
-        };
-    };
 }, {
-    base: string;
-    header: string;
-    title: string;
     content: string;
     item: string;
     accentBar: string;
@@ -85,8 +41,6 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     size: {
         md: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -98,8 +52,6 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
         sm: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -111,47 +63,7 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
     };
-    color: {
-        default: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        primary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        secondary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        info: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        success: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        warning: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        danger: {
-            base: string;
-            header: string;
-            title: string;
-        };
-    };
 }, {
-    base: string;
-    header: string;
-    title: string;
     content: string;
     item: string;
     accentBar: string;
@@ -169,8 +81,6 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -182,8 +92,6 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
         sm: {
-            header: string;
-            title: string;
             item: string;
             timelineLine: string;
             iconWrapper: string;
@@ -195,47 +103,7 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
             itemTimestamp: string;
         };
     };
-    color: {
-        default: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        primary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        secondary: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        info: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        success: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        warning: {
-            base: string;
-            header: string;
-            title: string;
-        };
-        danger: {
-            base: string;
-            header: string;
-            title: string;
-        };
-    };
 }, {
-    base: string;
-    header: string;
-    title: string;
     content: string;
     item: string;
     accentBar: string;

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

@@ -1,10 +1,9 @@
 import { tv } from 'tailwind-variants';
-import { Color } from '../../variants.js';
+// Chrome (border, radius, shadow, header bg, title styling) is delegated to
+// <Card>. This file only owns item-level slots — the per-row layout, icons,
+// timeline connectors, badges, etc.
 export const activityList = tv({
     slots: {
-        base: 'rounded-lg bg-white shadow-sm',
-        header: '',
-        title: 'font-medium text-default-900',
         content: 'divide-y divide-default-200',
         item: 'relative flex items-center hover:bg-default-50 transition-colors',
         accentBar: 'absolute inset-y-0 left-0 w-[3px]',
@@ -23,8 +22,6 @@ export const activityList = tv({
     variants: {
         size: {
             md: {
-                header: 'border-b border-default-200 px-6 py-4',
-                title: 'text-lg',
                 item: 'gap-3 px-6 py-4',
                 timelineLine: 'left-[calc(1.5rem+1rem-1px)]',
                 iconWrapper: 'size-8 mt-0.5',
@@ -36,8 +33,6 @@ export const activityList = tv({
                 itemTimestamp: 'text-xs'
             },
             sm: {
-                header: 'border-b border-default-200 px-4 py-2.5',
-                title: 'text-base',
                 item: 'gap-2 px-4 py-2.5',
                 timelineLine: 'left-[calc(1rem+0.75rem-1px)]',
                 iconWrapper: 'size-6 mt-0',
@@ -48,48 +43,10 @@ export const activityList = tv({
                 itemSubtitle: 'mt-0.5 text-[11px]',
                 itemTimestamp: 'text-[11px]'
             }
-        },
-        color: {
-            [Color.DEFAULT]: {
-                base: 'bg-white border-default-200',
-                header: 'border-default-200',
-                title: 'text-default-900'
-            },
-            [Color.PRIMARY]: {
-                base: 'bg-primary-50 border-primary-200',
-                header: 'border-primary-200',
-                title: 'text-primary-900'
-            },
-            [Color.SECONDARY]: {
-                base: 'bg-secondary-50 border-secondary-200',
-                header: 'border-secondary-200',
-                title: 'text-secondary-900'
-            },
-            [Color.INFO]: {
-                base: 'bg-info-50 border-info-200',
-                header: 'border-info-200',
-                title: 'text-info-900'
-            },
-            [Color.SUCCESS]: {
-                base: 'bg-success-50 border-success-200',
-                header: 'border-success-200',
-                title: 'text-success-900'
-            },
-            [Color.WARNING]: {
-                base: 'bg-warning-50 border-warning-200',
-                header: 'border-warning-200',
-                title: 'text-warning-900'
-            },
-            [Color.DANGER]: {
-                base: 'bg-danger-50 border-danger-200',
-                header: 'border-danger-200',
-                title: 'text-danger-900'
-            }
         }
     },
     defaultVariants: {
-        size: 'md',
-        color: Color.DEFAULT
+        size: 'md'
     }
 });
 /**

package/dist/layout/card/Card.svelte

@@ -4,40 +4,72 @@
 	import { card } from './card.js';
 	import Skeleton from '../../elements/skeleton/Skeleton.svelte';
 	import type { CardProps } from '../../index.js';
-	import { Color } from '../../variants.js';
+	import { Color, Size } from '../../variants.js';
 
 	let {
 		children,
 		custom,
 		title,
+		subtitle,
+		headerEnd,
 		color = Color.DEFAULT,
+		size = Size.MD,
+		headerStyle = 'tinted',
 		class: className = '',
 		titleClass = '',
+		subtitleClass = '',
 		bodyClass = '',
 		loading = false,
 		testId
 	}: CardProps = $props();
 
-	const { base, title: titleSlot, body: bodySlot } = $derived(card({ color }));
+	const slots = $derived(card({ color, size, headerStyle }));
+	const baseClass = $derived(cn(slots.base(), className));
+	const headerClass = $derived(slots.header());
+	const headerLeftClass = $derived(slots.headerLeft());
+	const headerEndClass = $derived(slots.headerEnd());
+	const titleClasses = $derived(cn(slots.title(), titleClass));
+	const subtitleClasses = $derived(cn(slots.subtitle(), subtitleClass));
+	const bodyClasses = $derived(cn(slots.body(), bodyClass));
 
-	const baseClass = $derived(cn(base(), className));
-	const titleClasses = $derived(cn(titleSlot(), titleClass));
-	const bodyClasses = $derived(cn(bodySlot(), bodyClass));
+	const hasHeader = $derived(
+		!loading && !custom && (title !== undefined || headerEnd !== undefined)
+	);
 </script>
 
 <div class={baseClass} data-testid={buildTestId('card', undefined, testId)}>
 	{#if loading}
-		<Skeleton class="mb-3 h-5 w-1/2" />
-		<div class="space-y-2">
-			<Skeleton class="h-3 w-full" />
-			<Skeleton class="h-3 w-5/6" />
-			<Skeleton class="h-3 w-3/4" />
+		<div class={bodyClasses}>
+			<Skeleton class="mb-3 h-5 w-1/2" />
+			<div class="space-y-2">
+				<Skeleton class="h-3 w-full" />
+				<Skeleton class="h-3 w-5/6" />
+				<Skeleton class="h-3 w-3/4" />
+			</div>
 		</div>
 	{:else if custom}
 		{@render custom()}
 	{:else}
-		{#if title}
-			<h3 class={titleClasses} data-testid={buildTestId('card', 'title', testId)}>{title}</h3>
+		{#if hasHeader}
+			<div class={headerClass} data-testid={buildTestId('card', 'header', testId)}>
+				<div class={headerLeftClass}>
+					{#if title}
+						<h3 class={titleClasses} data-testid={buildTestId('card', 'title', testId)}>
+							{#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+						</h3>
+					{/if}
+					{#if subtitle}
+						<p class={subtitleClasses} data-testid={buildTestId('card', 'subtitle', testId)}>
+							{#if typeof subtitle === 'string'}{subtitle}{:else}{@render subtitle()}{/if}
+						</p>
+					{/if}
+				</div>
+				{#if headerEnd}
+					<div class={headerEndClass} data-testid={buildTestId('card', 'header-end', testId)}>
+						{@render headerEnd()}
+					</div>
+				{/if}
+			</div>
 		{/if}
 		{#if children}
 			<div class={bodyClasses} data-testid={buildTestId('card', 'body', testId)}>

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

@@ -1,7 +1,7 @@
 import type { ClassValue } from 'tailwind-variants';
 import type { Snippet } from 'svelte';
 import type { Component } from 'svelte';
-import type { VariantColors } from '../../index.js';
+import type { VariantColors, VariantSizes } from '../../index.js';
 import type { ProgressSegment } from '../../elements/progress/progress-types.js';
 /**
  * Props for `<Card>` — a generic bordered container with optional
@@ -9,7 +9,6 @@ import type { ProgressSegment } from '../../elements/progress/progress-types.js'
  * a skeleton placeholder while loading.
  *
  * For number-focused cards (KPIs, metrics), use `<MetricCard>` instead.
- * For ranked lists (leaderboards), use `<RankedCard>`.
  *
  * @example
  * ```svelte
@@ -31,13 +30,32 @@ import type { ProgressSegment } from '../../elements/progress/progress-types.js'
  * ```
  */
 export type CardProps = {
-    /** Background tint. @default 'default' */
+    /** Color tint. Affects title text and (subtly) body background. @default 'default' */
     color?: VariantColors;
-    /** Heading shown at the top. */
-    title?: string;
+    /** Size variant — scales padding, radius, shadow, and typography together. @default 'md' */
+    size?: VariantSizes;
+    /**
+     * Header treatment. `'tinted'` (default) renders a subtle bg + separator above
+     * the body — the dashboard-panel look. `'plain'` matches pre-v3.1 Card with
+     * title flowing into body, no separator or tint. Use 'plain' for inline
+     * grouping cards (alerts, callouts) where the header chrome would be heavy.
+     * @default 'tinted'
+     */
+    headerStyle?: 'tinted' | 'plain';
+    /** Heading shown at the top. Accepts a string or a Snippet for icons/badges in the title. */
+    title?: string | Snippet;
+    /** Smaller muted line directly below the title. */
+    subtitle?: string | Snippet;
+    /**
+     * Right-aligned content in the header (e.g. KPI summary, action buttons,
+     * status pill). Only renders when a header exists.
+     */
+    headerEnd?: Snippet;
     class?: ClassValue;
     /** Classes for the title element only. */
     titleClass?: ClassValue;
+    /** Classes for the subtitle element only. */
+    subtitleClass?: ClassValue;
     /** Classes for the body container only. */
     bodyClass?: ClassValue;
     /** Default body content. */

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

@@ -36,9 +36,53 @@ export declare const card: import("tailwind-variants").TVReturnType<{
             body: string;
         };
     };
+    size: {
+        xs: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        sm: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        md: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        lg: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        xl: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        "2xl": {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+    };
+    headerStyle: {
+        tinted: {
+            header: string;
+        };
+        plain: {
+            header: string;
+        };
+    };
 }, {
     base: string;
+    header: string;
+    headerLeft: string;
+    headerEnd: string;
     title: string;
+    subtitle: string;
     body: string;
 }, undefined, {
     color: {
@@ -78,9 +122,53 @@ export declare const card: import("tailwind-variants").TVReturnType<{
             body: string;
         };
     };
+    size: {
+        xs: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        sm: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        md: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        lg: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        xl: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        "2xl": {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+    };
+    headerStyle: {
+        tinted: {
+            header: string;
+        };
+        plain: {
+            header: string;
+        };
+    };
 }, {
     base: string;
+    header: string;
+    headerLeft: string;
+    headerEnd: string;
     title: string;
+    subtitle: string;
     body: string;
 }, import("tailwind-variants").TVReturnType<{
     color: {
@@ -120,8 +208,52 @@ export declare const card: import("tailwind-variants").TVReturnType<{
             body: string;
         };
     };
+    size: {
+        xs: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        sm: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        md: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        lg: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        xl: {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+        "2xl": {
+            title: string;
+            subtitle: string;
+            body: string;
+        };
+    };
+    headerStyle: {
+        tinted: {
+            header: string;
+        };
+        plain: {
+            header: string;
+        };
+    };
 }, {
     base: string;
+    header: string;
+    headerLeft: string;
+    headerEnd: string;
     title: string;
+    subtitle: string;
     body: string;
 }, undefined, unknown, unknown, undefined>>;