@makolabs/ripple 3.2.0 → 3.3.0

package/dist/elements/alert/Alert.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
-	import { Color } from '../../variants.js';
+	import { Color, Size } from '../../variants.js';
 	import { fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import Button from '../../button/Button.svelte';
 	import type { AlertProps, VariantColors } from '../../index.js';
 
 	let {
@@ -11,7 +12,7 @@
 		message,
 		color = Color.DEFAULT,
 		onclose,
-		footer,
+		actions,
 		icon: Icon,
 		class: className = '',
 		testId
@@ -21,6 +22,9 @@
 		onclose?.();
 	}
 
+	// Container chrome: bg-{c}-50 + border-{c}-200 + body text-{c}-800.
+	// Title and icon get their own steps for stronger hierarchy:
+	// title → text-{c}-900 (darker than body), icon circle → bg-{c}-100 / text-{c}-700.
 	const colorClasses: Record<VariantColors, string> = {
 		[Color.DEFAULT]: 'bg-default-50 border-default-200 text-default-800',
 		[Color.PRIMARY]: 'bg-primary-50 border-primary-200 text-primary-800',
@@ -30,28 +34,79 @@
 		[Color.WARNING]: 'bg-warning-50 border-warning-200 text-warning-800',
 		[Color.DANGER]: 'bg-danger-50 border-danger-200 text-danger-800'
 	};
+
+	const titleColorClasses: Record<VariantColors, string> = {
+		[Color.DEFAULT]: 'text-default-900',
+		[Color.PRIMARY]: 'text-primary-900',
+		[Color.SECONDARY]: 'text-secondary-900',
+		[Color.INFO]: 'text-info-900',
+		[Color.SUCCESS]: 'text-success-900',
+		[Color.WARNING]: 'text-warning-900',
+		[Color.DANGER]: 'text-danger-900'
+	};
+
+	const iconCircleClasses: Record<VariantColors, string> = {
+		[Color.DEFAULT]: 'bg-default-100 text-default-700',
+		[Color.PRIMARY]: 'bg-primary-100 text-primary-700',
+		[Color.SECONDARY]: 'bg-secondary-100 text-secondary-700',
+		[Color.INFO]: 'bg-info-100 text-info-700',
+		[Color.SUCCESS]: 'bg-success-100 text-success-700',
+		[Color.WARNING]: 'bg-warning-100 text-warning-700',
+		[Color.DANGER]: 'bg-danger-100 text-danger-700'
+	};
 </script>
 
 <div
 	role="alert"
-	class={cn('relative rounded-lg border p-4', colorClasses[color], className)}
+	class={cn('relative rounded-lg border p-4 shadow-sm', colorClasses[color], className)}
 	data-testid={buildTestId('alert', undefined, testId)}
 	transition:fade={{ duration: 1000, easing: quintOut }}
 >
-	<div class="flex items-start justify-between gap-4">
+	<div class="flex items-center justify-between gap-4">
 		{#if Icon}
-			<Icon class="mt-0.5 h-5 w-5 shrink-0" />
+			<div
+				class={cn(
+					'flex h-10 w-10 shrink-0 items-center justify-center rounded-full',
+					iconCircleClasses[color]
+				)}
+				aria-hidden="true"
+				data-testid={buildTestId('alert', 'icon', testId)}
+			>
+				<Icon class="h-5 w-5" />
+			</div>
 		{/if}
-		<div class="flex-1">
+		<div class="min-w-0 flex-1">
 			{#if title}
-				<h4 class="font-semibold" data-testid={buildTestId('alert', 'title', testId)}>{title}</h4>
+				<h4
+					class={cn('font-semibold', titleColorClasses[color])}
+					data-testid={buildTestId('alert', 'title', testId)}
+				>
+					{title}
+				</h4>
 			{/if}
 			<p class="text-sm" data-testid={buildTestId('alert', 'message', testId)}>{message}</p>
 		</div>
+		{#if actions && actions.length > 0}
+			<div
+				class="flex shrink-0 items-center gap-2"
+				data-testid={buildTestId('alert', 'actions', testId)}
+			>
+				{#each actions as action, i (action.label + i)}
+					<Button
+						size={Size.SM}
+						variant={action.variant ?? 'solid'}
+						color={action.color ?? color}
+						onclick={() => action.onclick?.()}
+					>
+						{action.label}
+					</Button>
+				{/each}
+			</div>
+		{/if}
 		{#if onclose}
 			<button
 				type="button"
-				class="hover:bg-default-200/20 flex-shrink-0 cursor-pointer rounded-md p-1"
+				class="hover:bg-default-200/20 shrink-0 cursor-pointer rounded-md p-1"
 				onclick={handleClose}
 				aria-label="Close alert"
 				data-testid={buildTestId('alert', 'close', testId)}
@@ -66,7 +121,4 @@
 			</button>
 		{/if}
 	</div>
-	{#if footer}
-		{@render footer()}
-	{/if}
 </div>

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export type { ModalProps } from './modal/modal-types.js';
 export type { ConfirmDialogProps } from './modal/confirm-dialog-types.js';
 export type { DrawerProps } from './drawer/drawer-types.js';
 export type { DropdownItem, DropSection, DropHeaderConfig, DropdownMenuProps, SelectItem, SelectProps } from './elements/dropdown/dropdown-types.js';
-export type { CardProps, AlertProps, MetricDetail, MetricCardProps } from './layout/card/card-types.js';
+export type { CardProps, AlertProps, AlertAction, MetricDetail, MetricCardProps } from './layout/card/card-types.js';
 export type { DataRow, KeyType, StatusType, TableColumn, SortDirection, SortState, TableProps } from './layout/table/table-types.js';
 export type { BreadcrumbItem, BreadcrumbsProps, PageHeaderProps } from './header/header-types.js';
 export type { TabItem, TabProps, TabsGroupProps, TabContentProps } from './layout/tabs/tabs-types.js';

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

@@ -73,6 +73,26 @@ export type CardProps = {
     loading?: boolean;
     testId?: string;
 };
+/**
+ * Button-style action attached to an `<Alert>` (e.g. "Mark as Shipped",
+ * "Upgrade now"). Rendered inline on the right side of the alert,
+ * between the message and the optional close button.
+ *
+ * The same shape as `ActivityItemAction` — consumers building both
+ * activity feeds and alerts only need to learn one action contract.
+ */
+export type AlertAction = {
+    label: string;
+    onclick?: () => void;
+    /**
+     * Override the action button's color. Defaults to the parent
+     * `<Alert>`'s `color` so the CTA visually anchors to the banner
+     * (e.g. a warning alert gets warning-colored buttons).
+     */
+    color?: VariantColors;
+    /** Optional ripple button variant. @default 'solid' */
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+};
 /**
  * Props for `<Alert>` — a prominent inline banner for success / warning /
  * error / info messages. Use at the top of a page or above a form. For
@@ -86,12 +106,14 @@ export type CardProps = {
  *
  * @example
  * ```svelte
- * <!-- Dismissable with a custom footer action -->
- * <Alert color="warning" message="Your trial ends in 3 days." onclose={() => {}}>
- *   {#snippet footer()}
- *     <Button size="sm">Upgrade now</Button>
- *   {/snippet}
- * </Alert>
+ * <!-- Dismissable with an inline action -->
+ * <Alert
+ *   color="warning"
+ *   title="Ready for Shipment"
+ *   message="Payment complete. Notify supplier when dispatched."
+ *   actions={[{ label: 'Mark as Shipped', onclick: openShipModal }]}
+ *   onclose={() => {}}
+ * />
  * ```
  */
 export type AlertProps = {
@@ -104,8 +126,12 @@ export type AlertProps = {
     class?: ClassValue;
     /** When provided, renders a × dismiss button. */
     onclose?: () => void;
-    /** Additional content below the message (e.g. action buttons). */
-    footer?: Snippet;
+    /**
+     * Inline action buttons rendered on the right side of the alert,
+     * between the message and the close button. Each action defaults
+     * to the alert's `color` and `variant: 'solid'`.
+     */
+    actions?: AlertAction[];
     /** Override the default color-appropriate icon. */
     icon?: Component;
     testId?: string;

package/package.json

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