@makolabs/ripple 3.0.7 → 3.0.8

package/dist/layout/card/card.js

@@ -1,51 +1,216 @@
 import { tv } from 'tailwind-variants';
-import { Color } from '../../variants.js';
+import { Color, Size } from '../../variants.js';
 export const card = tv({
     slots: {
-        base: 'flex flex-col p-4 gap-2 border rounded-md shadow-sm',
-        title: 'text-base font-semibold',
-        body: 'text-base'
+        base: 'flex flex-col overflow-hidden border bg-white',
+        header: 'flex items-center justify-between gap-3',
+        headerLeft: 'flex min-w-0 flex-col',
+        headerEnd: 'text-default-700 flex shrink-0 items-center gap-3',
+        title: 'font-semibold leading-tight',
+        subtitle: 'text-default-500 font-normal',
+        body: ''
     },
     variants: {
         color: {
             [Color.DEFAULT]: {
-                base: 'bg-default-50 border-default-200',
+                base: 'border-default-200',
                 title: 'text-default-900',
                 body: 'text-default-700'
             },
             [Color.PRIMARY]: {
-                base: 'bg-primary-50 border-primary-200',
+                base: 'border-primary-200',
                 title: 'text-primary-900',
-                body: 'text-primary-700'
+                body: 'text-primary-800'
             },
             [Color.SECONDARY]: {
-                base: 'bg-secondary-50 border-secondary-200',
+                base: 'border-secondary-200',
                 title: 'text-secondary-900',
-                body: 'text-secondary-700'
+                body: 'text-secondary-800'
             },
             [Color.INFO]: {
-                base: 'bg-info-50 border-info-200',
+                base: 'border-info-200',
                 title: 'text-info-900',
-                body: 'text-info-700'
+                body: 'text-info-800'
             },
             [Color.SUCCESS]: {
-                base: 'bg-success-50 border-success-200',
+                base: 'border-success-200',
                 title: 'text-success-900',
-                body: 'text-success-700'
+                body: 'text-success-800'
             },
             [Color.WARNING]: {
-                base: 'bg-warning-50 border-warning-200',
+                base: 'border-warning-200',
                 title: 'text-warning-900',
-                body: 'text-warning-700'
+                body: 'text-warning-800'
             },
             [Color.DANGER]: {
-                base: 'bg-danger-50 border-danger-200',
+                base: 'border-danger-200',
                 title: 'text-danger-900',
-                body: 'text-danger-700'
+                body: 'text-danger-800'
+            }
+        },
+        size: {
+            [Size.XS]: {
+                title: 'text-[11px]',
+                subtitle: 'text-[10px]',
+                body: 'text-[11px]'
+            },
+            [Size.SM]: {
+                title: 'text-xs',
+                subtitle: 'text-[11px]',
+                body: 'text-xs'
+            },
+            [Size.MD]: {
+                title: 'text-sm',
+                subtitle: 'text-xs',
+                body: 'text-sm'
+            },
+            [Size.LG]: {
+                title: 'text-base',
+                subtitle: 'text-sm',
+                body: 'text-base'
+            },
+            [Size.XL]: {
+                title: 'text-lg',
+                subtitle: 'text-sm',
+                body: 'text-base'
+            },
+            [Size.XXL]: {
+                title: 'text-lg',
+                subtitle: 'text-sm',
+                body: 'text-base'
+            }
+        },
+        headerStyle: {
+            tinted: {
+                // `bg-default-50` is pure white in this theme, so the next step up
+                // (`default-100`) is needed for the tint to be visible. /50 keeps it
+                // soft so the chrome reads as ambient texture, not a hard fill.
+                header: 'bg-default-100/50 border-default-200 border-b'
+            },
+            plain: {
+                header: ''
             }
         }
     },
+    compoundVariants: [
+        // Tinted style: outer has no padding, regions own their padding (size variant adds shadow).
+        {
+            headerStyle: 'tinted',
+            class: { base: 'p-0' }
+        },
+        // Plain style: outer has padding (size variant) + a vertical gap between header & body.
+        {
+            headerStyle: 'plain',
+            class: { header: 'mb-2' }
+        },
+        // Size × headerStyle: per-region paddings + radius for tinted; uniform padding for plain.
+        // Tinted: chrome is generous-but-compact (matches dashboard-panel reference);
+        // typography is compact (set in size variant above).
+        {
+            size: Size.XS,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-sm', header: 'px-2 py-1.5', body: 'p-2' }
+        },
+        {
+            size: Size.SM,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-md shadow-xs', header: 'px-3 py-2', body: 'p-3' }
+        },
+        {
+            size: Size.MD,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-lg shadow-sm', header: 'px-4 py-2.5', body: 'p-4' }
+        },
+        {
+            size: Size.LG,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-lg shadow-sm', header: 'px-5 py-3', body: 'p-5' }
+        },
+        {
+            size: Size.XL,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-xl shadow-md', header: 'px-6 py-4', body: 'p-6' }
+        },
+        {
+            size: Size.XXL,
+            headerStyle: 'tinted',
+            class: { base: 'rounded-xl shadow-md', header: 'px-6 py-4', body: 'p-6' }
+        },
+        // Plain (uniform outer padding; shadow ladder mirrors tinted)
+        { size: Size.XS, headerStyle: 'plain', class: { base: 'rounded-sm p-2' } },
+        { size: Size.SM, headerStyle: 'plain', class: { base: 'rounded-md shadow-xs p-3' } },
+        { size: Size.MD, headerStyle: 'plain', class: { base: 'rounded-lg shadow-sm p-4' } },
+        { size: Size.LG, headerStyle: 'plain', class: { base: 'rounded-lg shadow-sm p-5' } },
+        { size: Size.XL, headerStyle: 'plain', class: { base: 'rounded-xl shadow-md p-6' } },
+        { size: Size.XXL, headerStyle: 'plain', class: { base: 'rounded-xl shadow-md p-6' } },
+        // Color × tinted: replace header bg + body bg to keep the tint family.
+        // Default keeps the neutral header. Other colors get a slightly stronger
+        // tinted header so the chrome still reads as "header" within a tinted card.
+        {
+            color: Color.PRIMARY,
+            headerStyle: 'tinted',
+            class: { base: 'bg-primary-50/30', header: 'bg-primary-100/40 border-primary-200' }
+        },
+        {
+            color: Color.SECONDARY,
+            headerStyle: 'tinted',
+            class: { base: 'bg-secondary-50/30', header: 'bg-secondary-100/40 border-secondary-200' }
+        },
+        {
+            color: Color.INFO,
+            headerStyle: 'tinted',
+            class: { base: 'bg-info-50/30', header: 'bg-info-100/40 border-info-200' }
+        },
+        {
+            color: Color.SUCCESS,
+            headerStyle: 'tinted',
+            class: { base: 'bg-success-50/30', header: 'bg-success-100/40 border-success-200' }
+        },
+        {
+            color: Color.WARNING,
+            headerStyle: 'tinted',
+            class: { base: 'bg-warning-50/30', header: 'bg-warning-100/40 border-warning-200' }
+        },
+        {
+            color: Color.DANGER,
+            headerStyle: 'tinted',
+            class: { base: 'bg-danger-50/30', header: 'bg-danger-100/40 border-danger-200' }
+        },
+        // Color × plain: keep the legacy "tinted whole card" look (back-compat).
+        {
+            color: Color.PRIMARY,
+            headerStyle: 'plain',
+            class: { base: 'bg-primary-50' }
+        },
+        {
+            color: Color.SECONDARY,
+            headerStyle: 'plain',
+            class: { base: 'bg-secondary-50' }
+        },
+        {
+            color: Color.INFO,
+            headerStyle: 'plain',
+            class: { base: 'bg-info-50' }
+        },
+        {
+            color: Color.SUCCESS,
+            headerStyle: 'plain',
+            class: { base: 'bg-success-50' }
+        },
+        {
+            color: Color.WARNING,
+            headerStyle: 'plain',
+            class: { base: 'bg-warning-50' }
+        },
+        {
+            color: Color.DANGER,
+            headerStyle: 'plain',
+            class: { base: 'bg-danger-50' }
+        }
+    ],
     defaultVariants: {
-        color: Color.DEFAULT
+        color: Color.DEFAULT,
+        size: Size.MD,
+        headerStyle: 'tinted'
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {

package/dist/layout/card/RankedCard.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import { buildTestId } from '../../helper/testid.js';
-	import { rankedCard, type RankedCardProps } from './ranked-card.js';
-
-	let { items, columns = 3, class: className = '', testId }: RankedCardProps = $props();
-
-	const {
-		container,
-		card,
-		header,
-		rank,
-		title,
-		metricsContainer,
-		metricRow,
-		metricLabel,
-		metricValue,
-		actionContainer,
-		actionText,
-		actionLabel
-	} = $derived(rankedCard({ columns }));
-
-	const containerClass = $derived(cn(container(), className));
-</script>
-
-<div class={containerClass} data-testid={buildTestId('ranked-card', undefined, testId)}>
-	{#each items as item, index (item.rank)}
-		<div class={card()} data-testid={buildTestId('ranked-card', 'card', testId, index)}>
-			<!-- Header with Rank and Title -->
-			<div class={header()}>
-				<span class={rank()} data-testid={buildTestId('ranked-card', 'rank', testId, index)}
-					>#{item.rank}</span
-				>
-				<h4 class={title()} data-testid={buildTestId('ranked-card', 'title', testId, index)}>
-					{item.title}
-				</h4>
-			</div>
-
-			<!-- Metrics -->
-			<div class={metricsContainer()}>
-				{#each item.metrics as metric, metricIndex (metric.label)}
-					<div class={metricRow()}>
-						<span
-							class={metricLabel()}
-							data-testid={buildTestId(
-								'ranked-card',
-								'metric-label',
-								testId,
-								`${index}-${metricIndex}`
-							)}>{metric.label}:</span
-						>
-						<span
-							class={cn(metricValue(), metric.color || '')}
-							data-testid={buildTestId(
-								'ranked-card',
-								'metric-value',
-								testId,
-								`${index}-${metricIndex}`
-							)}>{metric.value}</span
-						>
-					</div>
-				{/each}
-			</div>
-
-			<!-- Action/Recommendation -->
-			{#if item.action}
-				<div
-					class={actionContainer()}
-					data-testid={buildTestId('ranked-card', 'action', testId, index)}
-				>
-					<p class={actionText()}>
-						<span class={actionLabel()}>Action:</span>
-						<span class={item.action.color || ''}>{item.action.text}</span>
-					</p>
-				</div>
-			{/if}
-		</div>
-	{/each}
-</div>

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

@@ -1,4 +0,0 @@
-import { type RankedCardProps } from './ranked-card.js';
-declare const RankedCard: import("svelte").Component<RankedCardProps, {}, "">;
-type RankedCard = ReturnType<typeof RankedCard>;
-export default RankedCard;

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

@@ -1,115 +0,0 @@
-import type { ClassValue } from 'tailwind-variants';
-export declare const rankedCard: import("tailwind-variants").TVReturnType<{
-    columns: {
-        1: {
-            container: string;
-        };
-        2: {
-            container: string;
-        };
-        3: {
-            container: string;
-        };
-        4: {
-            container: string;
-        };
-    };
-}, {
-    container: string;
-    card: string;
-    header: string;
-    rank: string;
-    title: string;
-    metricsContainer: string;
-    metricRow: string;
-    metricLabel: string;
-    metricValue: string;
-    actionContainer: string;
-    actionText: string;
-    actionLabel: string;
-}, undefined, {
-    columns: {
-        1: {
-            container: string;
-        };
-        2: {
-            container: string;
-        };
-        3: {
-            container: string;
-        };
-        4: {
-            container: string;
-        };
-    };
-}, {
-    container: string;
-    card: string;
-    header: string;
-    rank: string;
-    title: string;
-    metricsContainer: string;
-    metricRow: string;
-    metricLabel: string;
-    metricValue: string;
-    actionContainer: string;
-    actionText: string;
-    actionLabel: string;
-}, import("tailwind-variants").TVReturnType<{
-    columns: {
-        1: {
-            container: string;
-        };
-        2: {
-            container: string;
-        };
-        3: {
-            container: string;
-        };
-        4: {
-            container: string;
-        };
-    };
-}, {
-    container: string;
-    card: string;
-    header: string;
-    rank: string;
-    title: string;
-    metricsContainer: string;
-    metricRow: string;
-    metricLabel: string;
-    metricValue: string;
-    actionContainer: string;
-    actionText: string;
-    actionLabel: string;
-}, undefined, unknown, unknown, undefined>>;
-export type RankedCardMetric = {
-    label: string;
-    value: string;
-    color?: string;
-};
-export type RankedCardItem = {
-    rank: number;
-    title: string;
-    metrics: RankedCardMetric[];
-    action?: {
-        text: string;
-        color?: string;
-    };
-};
-export type RankedCardProps = {
-    items: RankedCardItem[];
-    columns?: 1 | 2 | 3 | 4;
-    class?: ClassValue;
-    /**
-     * Test ID prefix. When set, the component emits these selectors:
-     * - `{testId}-ranked-card` — root wrapper
-     * - `{testId}-ranked-card-item-{i}` — each card
-     * - `{testId}-ranked-card-rank-{i}` — rank number
-     * - `{testId}-ranked-card-title-{i}` — title
-     * - `{testId}-ranked-card-metric-label-{i}-{j}` — metric label
-     * - `{testId}-ranked-card-metric-value-{i}-{j}` — metric value
-     */
-    testId?: string;
-};

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

@@ -1,28 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const rankedCard = tv({
-    slots: {
-        container: 'grid gap-4',
-        card: 'border border-default-200 rounded-lg p-4',
-        header: 'flex items-center gap-2 mb-3',
-        rank: 'text-base font-bold text-default-400',
-        title: 'text-sm font-semibold text-default-900',
-        metricsContainer: 'space-y-2 mb-3',
-        metricRow: 'flex items-center justify-between text-sm',
-        metricLabel: 'text-default-600',
-        metricValue: 'font-medium text-default-900',
-        actionContainer: 'pt-3 border-t border-default-200',
-        actionText: 'text-xs text-default-600',
-        actionLabel: 'font-semibold text-default-700'
-    },
-    variants: {
-        columns: {
-            1: { container: 'grid-cols-1' },
-            2: { container: 'grid-cols-1 md:grid-cols-2' },
-            3: { container: 'grid-cols-1 md:grid-cols-3' },
-            4: { container: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4' }
-        }
-    },
-    defaultVariants: {
-        columns: 3
-    }
-});