@makolabs/ripple 3.2.0 → 3.4.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/forms/Textarea.svelte

@@ -23,6 +23,7 @@
 		class: className = '',
 		oninput,
 		onblur,
+		onkeydown,
 		testId
 	}: TextareaProps = $props();
 
@@ -103,6 +104,7 @@
 		{value}
 		oninput={handleInput}
 		onblur={handleBlur}
+		{onkeydown}
 	></textarea>
 
 	{#if showCount && maxLength !== undefined}

package/dist/forms/form-types.d.ts

@@ -468,6 +468,12 @@ export interface TextareaProps {
     oninput?: (value: string) => void;
     /** Fires on blur with the current value. */
     onblur?: (value: string) => void;
+    /**
+     * Raw keydown handler on the underlying `<textarea>`. Useful for
+     * keyboard shortcuts like ⌘/Ctrl+Enter to submit. The event is
+     * forwarded as-is so callers can `preventDefault()` when needed.
+     */
+    onkeydown?: (event: KeyboardEvent) => void;
     testId?: string;
 }
 /**

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';
@@ -58,6 +58,7 @@ export type { FilterTab, FilterGroup, FilterSelectionValue, DatePreset, DateRang
 export { defaultDatePresets, toIsoDate, fromIsoDate } from './filters/date-presets.js';
 export type { StepperProps, StepperStep, StepState, StepperOrientation } from './layout/stepper/stepper-types.js';
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
+export type { CommentComposerProps, CommentComposerSize } from './layout/comment-composer/comment-composer-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
 export type { ChatMessageType, StreamingCallback, ChatAction, ChatMessage, ChatResponse, QuickAction, FileBrowserProps } from './ai/ai-types.js';
 export type { GetUsersOptions, GetUsersResult, UserEmail, UserPhone, User, Permission, Role, UserTableProps, UserModalProps, UserModalSavePayload, UserViewModalProps, UserApproveModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-types.js';
@@ -90,6 +91,7 @@ export { default as Sidebar } from './layout/sidebar/Sidebar.svelte';
 export { default as NavItem } from './layout/sidebar/NavItem.svelte';
 export { default as NavGroup } from './layout/sidebar/NavGroup.svelte';
 export { default as ActivityList } from './layout/activity-list/ActivityList.svelte';
+export { default as CommentComposer } from './layout/comment-composer/CommentComposer.svelte';
 export { default as Stepper } from './layout/stepper/Stepper.svelte';
 export { default as Progress } from './elements/progress/Progress.svelte';
 export { default as Spinner } from './elements/spinner/Spinner.svelte';

package/dist/index.js

@@ -62,6 +62,8 @@ 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';
+// Elements - CommentComposer
+export { default as CommentComposer } from './layout/comment-composer/CommentComposer.svelte';
 // Elements - Stepper
 export { default as Stepper } from './layout/stepper/Stepper.svelte';
 // Elements - Progress

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/dist/layout/comment-composer/CommentComposer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { commentComposer, avatarCircleClasses } from './comment-composer.js';
+	import Card from '../card/Card.svelte';
+	import Textarea from '../../forms/Textarea.svelte';
+	import Button from '../../button/Button.svelte';
+	import { Color, Size } from '../../variants.js';
+	import type { CommentComposerProps } from '../../index.js';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Add a comment…',
+		submitLabel = 'Post',
+		avatar,
+		avatarInitials,
+		avatarColor = Color.DEFAULT,
+		disabled = false,
+		loading = false,
+		size = 'md',
+		rows = 3,
+		maxLength,
+		showCount = false,
+		class: className = '',
+		testId,
+		onsubmit
+	}: CommentComposerProps = $props();
+
+	const slots = $derived(commentComposer({ size }));
+	const cardSize = $derived(size === 'sm' ? Size.SM : Size.MD);
+	const textareaSize = $derived(size === 'sm' ? Size.SM : Size.MD);
+	const buttonSize = $derived(size === 'sm' ? Size.XS : Size.SM);
+
+	const trimmed = $derived((value ?? '').trim());
+	const canSubmit = $derived(trimmed.length > 0 && !disabled && !loading);
+	const avatarTint = $derived(avatarCircleClasses[avatarColor] ?? avatarCircleClasses.default);
+
+	function submit() {
+		if (!canSubmit) return;
+		onsubmit?.(trimmed);
+		value = '';
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			submit();
+		}
+	}
+</script>
+
+<Card size={cardSize} bodyClass="p-0" class={cn(className)} {testId}>
+	<div
+		class={slots.body()}
+		role="group"
+		aria-label="Comment composer"
+		data-testid={buildTestId('comment-composer', undefined, testId)}
+	>
+		<div
+			class={cn(slots.avatarWrapper(), !avatar && avatarTint)}
+			data-testid={buildTestId('comment-composer', 'avatar', testId)}
+			aria-hidden={avatar ? undefined : 'true'}
+		>
+			{#if avatar}
+				{@render avatar()}
+			{:else if avatarInitials}
+				<span class={slots.avatarInitials()}>{avatarInitials}</span>
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					class={size === 'sm' ? 'size-3.5' : 'size-4'}
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<path
+						d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.5 6.5c0-2.485 2.462-4.5 5.5-4.5s5.5 2.015 5.5 4.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5Z"
+					/>
+				</svg>
+			{/if}
+		</div>
+
+		<div class={slots.main()}>
+			<Textarea
+				name={buildTestId('comment-composer', 'field', testId)}
+				bind:value
+				{placeholder}
+				{rows}
+				{maxLength}
+				{showCount}
+				disabled={disabled || loading}
+				size={textareaSize}
+				onkeydown={handleKeydown}
+				testId={buildTestId('comment-composer', undefined, testId)}
+			/>
+			<div class={slots.footer()}>
+				<Button
+					size={buttonSize}
+					color={Color.PRIMARY}
+					variant="solid"
+					disabled={!canSubmit}
+					{loading}
+					onclick={submit}
+					testId={buildTestId('comment-composer', 'submit', testId)}
+				>
+					{submitLabel}
+				</Button>
+			</div>
+		</div>
+	</div>
+</Card>

package/dist/layout/comment-composer/CommentComposer.svelte.d.ts

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

package/dist/layout/comment-composer/comment-composer-types.d.ts

@@ -0,0 +1,99 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+import type { VariantColors } from '../../index.js';
+/** Density variants for `<CommentComposer>`. Mirrors `ActivityListSize`. */
+export type CommentComposerSize = 'sm' | 'md';
+/**
+ * Props for `<CommentComposer>` — a comment input surface meant to sit
+ * directly under an `<ActivityList>` (or any feed/timeline). Composes
+ * Card + Textarea + Button so the styling matches the rest of ripple.
+ *
+ * State is self-managed by default (`value` is bindable and clears
+ * after a successful `onsubmit`). Bind `value` externally if you need
+ * full control.
+ *
+ * Submit triggers: clicking the action button, or pressing
+ * ⌘/Ctrl+Enter while the textarea is focused.
+ *
+ * @example
+ * ```svelte
+ * <CommentComposer
+ *   avatarInitials="BB"
+ *   avatarColor="primary"
+ *   onsubmit={(text) => savedComments.push({ text, at: new Date() })}
+ * />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Custom avatar (e.g., img or icon component) -->
+ * <CommentComposer onsubmit={post}>
+ *   {#snippet avatar()}
+ *     <img src={user.photoUrl} alt="" class="size-8 rounded-full" />
+ *   {/snippet}
+ * </CommentComposer>
+ * ```
+ */
+export type CommentComposerProps = {
+    /** Bindable comment text. Cleared after a successful submit unless externally bound. @default '' */
+    value?: string;
+    /** Placeholder shown in the textarea. @default 'Add a comment…' */
+    placeholder?: string;
+    /** Label for the submit button. @default 'Post' */
+    submitLabel?: string;
+    /**
+     * Custom avatar slot. When provided, it wins over `avatarInitials`.
+     * Use this to render an `<img>`, an icon component, or any markup.
+     * The composer reserves a 32px (md) / 24px (sm) square slot — render
+     * accordingly.
+     */
+    avatar?: Snippet;
+    /**
+     * Fallback initials shown in a colored circle when no `avatar`
+     * snippet is provided. Typically 1–2 characters.
+     */
+    avatarInitials?: string;
+    /**
+     * Tints the initials circle. Has no effect when `avatar` is
+     * provided. @default 'default'
+     */
+    avatarColor?: VariantColors;
+    /** Disables both the textarea and the submit button. */
+    disabled?: boolean;
+    /**
+     * Marks the composer as in-flight. Disables interaction and renders
+     * the submit button in its loading state (ripple's `Button` already
+     * supports this).
+     */
+    loading?: boolean;
+    /** Visual density. @default 'md' */
+    size?: CommentComposerSize;
+    /** Initial textarea row count. @default 3 */
+    rows?: number;
+    /** Optional max character length, passed through to the underlying `<Textarea>`. */
+    maxLength?: number;
+    /** Show a "n / max" counter. Requires `maxLength`. @default false */
+    showCount?: boolean;
+    class?: ClassValue;
+    /**
+     * Test ID prefix. When set, the component emits these selectors
+     * (all built via `buildTestId`):
+     * - `{testId}-card` — root card wrapper (from `<Card>`)
+     * - `{testId}-comment-composer` — composer body
+     * - `{testId}-comment-composer-avatar` — avatar slot
+     * - `{testId}-comment-composer-textarea` — `<textarea>` element
+     * - `{testId}-comment-composer-textarea-wrapper` — textarea wrapper div
+     * - `{testId}-comment-composer-submit-button` — submit button
+     *
+     * When `testId` is unset the same selectors emit without the prefix
+     * (e.g. `comment-composer-submit-button`). Pass a unique `testId`
+     * if you render multiple composers on the same page.
+     */
+    testId?: string;
+    /**
+     * Fires when the user submits a non-empty trimmed comment, either
+     * via the submit button or ⌘/Ctrl+Enter. The composer auto-clears
+     * `value` after this fires (unless externally bound).
+     */
+    onsubmit?: (text: string) => void;
+};

package/dist/layout/comment-composer/comment-composer-types.js

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

package/dist/layout/comment-composer/comment-composer.d.ts

@@ -0,0 +1,76 @@
+export declare const commentComposer: import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            body: string;
+            avatarWrapper: string;
+            main: string;
+            footer: string;
+        };
+        sm: {
+            body: string;
+            avatarWrapper: string;
+            avatarInitials: string;
+            main: string;
+            footer: string;
+        };
+    };
+}, {
+    body: string;
+    avatarWrapper: string;
+    avatarInitials: string;
+    main: string;
+    textareaSlot: string;
+    footer: string;
+}, undefined, {
+    size: {
+        md: {
+            body: string;
+            avatarWrapper: string;
+            main: string;
+            footer: string;
+        };
+        sm: {
+            body: string;
+            avatarWrapper: string;
+            avatarInitials: string;
+            main: string;
+            footer: string;
+        };
+    };
+}, {
+    body: string;
+    avatarWrapper: string;
+    avatarInitials: string;
+    main: string;
+    textareaSlot: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            body: string;
+            avatarWrapper: string;
+            main: string;
+            footer: string;
+        };
+        sm: {
+            body: string;
+            avatarWrapper: string;
+            avatarInitials: string;
+            main: string;
+            footer: string;
+        };
+    };
+}, {
+    body: string;
+    avatarWrapper: string;
+    avatarInitials: string;
+    main: string;
+    textareaSlot: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Tailwind classes for the avatar fallback circle, keyed by ripple
+ * VariantColor. Mirrors `iconCircleClasses` in activity-list.ts so
+ * a composer placed under an ActivityList visually matches its rows.
+ */
+export declare const avatarCircleClasses: Record<string, string>;

package/dist/layout/comment-composer/comment-composer.js

@@ -0,0 +1,47 @@
+import { tv } from 'tailwind-variants';
+// Item-level slots only. The card chrome (border, radius, shadow) is
+// delegated to <Card>, matching how ActivityList composes Card.
+export const commentComposer = tv({
+    slots: {
+        body: 'flex',
+        avatarWrapper: 'shrink-0 inline-flex items-center justify-center rounded-full ring-4 ring-white',
+        avatarInitials: 'text-xs font-medium leading-none uppercase select-none',
+        main: 'flex-1 min-w-0',
+        textareaSlot: '',
+        footer: 'flex items-center justify-end'
+    },
+    variants: {
+        size: {
+            md: {
+                body: 'gap-3 p-4',
+                avatarWrapper: 'size-8 mt-1',
+                main: 'space-y-3',
+                footer: 'gap-2'
+            },
+            sm: {
+                body: 'gap-2 p-3',
+                avatarWrapper: 'size-6 mt-0.5',
+                avatarInitials: 'text-[10px]',
+                main: 'space-y-2',
+                footer: 'gap-1.5'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+/**
+ * Tailwind classes for the avatar fallback circle, keyed by ripple
+ * VariantColor. Mirrors `iconCircleClasses` in activity-list.ts so
+ * a composer placed under an ActivityList visually matches its rows.
+ */
+export const avatarCircleClasses = {
+    default: 'bg-default-100 text-default-600',
+    primary: 'bg-primary-100 text-primary-600',
+    secondary: 'bg-secondary-100 text-secondary-600',
+    info: 'bg-info-100 text-info-600',
+    success: 'bg-success-100 text-success-700',
+    warning: 'bg-warning-100 text-warning-700',
+    danger: 'bg-danger-100 text-danger-700'
+};

package/package.json

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