@makolabs/ripple 3.3.0 → 3.4.1

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

@@ -28,7 +28,7 @@ export type CalendarProps = {
      * Day the week starts on. `0` = Sunday, `1` = Monday. @default 1
      */
     weekStartsOn?: 0 | 1;
-    /** Hide the month/year header and navigation buttons. @default false */
+    /** Hide the weekday header row above the scrolling month list. @default false */
     hideHeader?: boolean;
     /** Disable all interaction. */
     disabled?: boolean;
@@ -39,6 +39,17 @@ export type CalendarProps = {
      * oversized. `2xl` aliases `xl`. @default 'md'
      */
     size?: VariantSizes;
+    /**
+     * Distance, in months (fractional allowed), of the open-time
+     * scroll-in flourish. The scroll animation starts this far above
+     * the anchor month and eases into it. Capped against `minDate`,
+     * so dates near the lower bound get a shorter flourish (or none).
+     * Set to `0` to disable. The default is shared by embedded
+     * Calendar and Calendars-inside-popovers (DatePicker, DateRange)
+     * so the open animation feels identical across all date pickers.
+     * @default 0.5
+     */
+    scrollFlourish?: number;
     /** Wrapper class. */
     class?: ClassValue;
     /**
@@ -53,11 +64,10 @@ export type CalendarProps = {
     /**
      * Test ID prefix. When set, the component emits these selectors:
      * - `{testId}-calendar` — root wrapper
-     * - `{testId}-calendar-prev-month` — prev button
-     * - `{testId}-calendar-next-month` — next button
-     * - `{testId}-calendar-month-label` — month/year header
      * - `{testId}-calendar-day-headers` — weekday row
-     * - `{testId}-calendar-day-{dayNumber}` — each day cell
+     * - `{testId}-calendar-scroll` — scrollable month list
+     * - `{testId}-calendar-month-label-{yearMonthKey}` — sticky month/year header per month
+     * - `{testId}-calendar-day-{dayNumber}` — each day cell (repeats across months)
      */
     testId?: string;
 };

package/dist/forms/date-picker/DatePicker.svelte

@@ -38,7 +38,6 @@
 
 	const display = $derived(value ? formatDate(value) : '');
 	const hasErrors = $derived(errors.length > 0);
-
 	const tokens = $derived(formSizeTokens[size]);
 
 	function clear(e: MouseEvent) {

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/forms/month-picker/MonthPicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { Size } from '../../variants.js';
@@ -25,6 +26,8 @@
 
 	let open = $state(false);
 	let listEl = $state<HTMLDivElement | undefined>();
+	let topSentinelEl = $state<HTMLDivElement | undefined>();
+	let bottomSentinelEl = $state<HTMLDivElement | undefined>();
 	const tokens = $derived(formSizeTokens[size]);
 	const hasErrors = $derived(errors.length > 0);
 
@@ -60,52 +63,68 @@
 
 	const display = $derived(value ? `${MONTH_NAMES[value.getMonth()]} ${value.getFullYear()}` : '');
 
-	// Build a flat list of months spanning a range of years. Default:
-	// 5 years before → 5 years after the anchor (selected or today).
-	const RANGE_YEARS = 5;
-	type MonthEntry = { year: number; month: number; date: Date; label: string; disabled: boolean };
+	// Lazy infinite-scroll window over years. The list starts as a small
+	// pad around the anchor (selected month or today) and grows toward
+	// either edge as IntersectionObserver sentinels enter the viewport,
+	// stopping at minDate/maxDate when those are set.
+	const INITIAL_PAD = 3;
+	const EXTEND_BY = 5;
 
-	const anchor = $derived(value ?? new Date());
-	const startYear = $derived(minDate ? minDate.getFullYear() : anchor.getFullYear() - RANGE_YEARS);
-	const endYear = $derived(maxDate ? maxDate.getFullYear() : anchor.getFullYear() + RANGE_YEARS);
+	const anchorYear = $derived((value ?? new Date()).getFullYear());
+	const minYear = $derived(minDate ? minDate.getFullYear() : null);
+	const maxYear = $derived(maxDate ? maxDate.getFullYear() : null);
 
-	const months = $derived.by<MonthEntry[]>(() => {
-		const out: MonthEntry[] = [];
-		for (let y = startYear; y <= endYear; y++) {
-			for (let m = 0; m < 12; m++) {
-				const d = new Date(y, m, 1);
-				let disabled = false;
-				if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) disabled = true;
-				if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) disabled = true;
-				out.push({
-					year: y,
-					month: m,
-					date: d,
-					label: MONTH_NAMES[m],
-					disabled
-				});
-			}
+	let firstYear = $state<number>(new Date().getFullYear());
+	let lastYear = $state<number>(new Date().getFullYear());
+	// `extending` guards against re-entrant extends while a previous
+	// extension is still flushing through tick().
+	let extending = false;
+
+	// Initialize / reset the visible window whenever the anchor or bounds
+	// change. We deliberately do not depend on firstYear/lastYear here so
+	// extensions don't re-trigger this effect.
+	$effect(() => {
+		const a = anchorYear;
+		const lo = minYear;
+		const hi = maxYear;
+		let f = a - INITIAL_PAD;
+		let l = a + INITIAL_PAD;
+		if (lo !== null) f = Math.max(f, lo);
+		if (hi !== null) l = Math.min(l, hi);
+		if (f > l) {
+			f = l = a;
 		}
+		firstYear = f;
+		lastYear = l;
+	});
+
+	const years = $derived.by<number[]>(() => {
+		const out: number[] = [];
+		for (let y = firstYear; y <= lastYear; y++) out.push(y);
 		return out;
 	});
 
-	// Unique sorted years and a fast lookup by year*12+month key.
-	const years = $derived([...new Set(months.map((e) => e.year))]);
-	const monthMap = $derived(new Map(months.map((e) => [e.year * 12 + e.month, e])));
+	function isMonthDisabled(year: number, month: number): boolean {
+		const d = new Date(year, month, 1);
+		if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) return true;
+		if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) return true;
+		return false;
+	}
 
-	function isSelected(entry: MonthEntry): boolean {
-		return !!value && value.getFullYear() === entry.year && value.getMonth() === entry.month;
+	function isSelected(year: number, month: number): boolean {
+		return !!value && value.getFullYear() === year && value.getMonth() === month;
 	}
 
-	function isCurrent(entry: MonthEntry): boolean {
+	function isCurrent(year: number, month: number): boolean {
 		const now = new Date();
-		return entry.year === now.getFullYear() && entry.month === now.getMonth();
+		return year === now.getFullYear() && month === now.getMonth();
 	}
 
-	function pick(entry: MonthEntry) {
-		if (entry.disabled) return;
-		value = entry.date;
-		onselect?.(entry.date);
+	function pick(year: number, month: number) {
+		if (isMonthDisabled(year, month)) return;
+		const d = new Date(year, month, 1);
+		value = d;
+		onselect?.(d);
 		open = false;
 	}
 
@@ -126,6 +145,61 @@
 		open = false;
 	}
 
+	async function extendBackward() {
+		if (extending) return;
+		if (minYear !== null && firstYear <= minYear) return;
+		const el = listEl;
+		if (!el) return;
+		extending = true;
+		const prevHeight = el.scrollHeight;
+		const prevTop = el.scrollTop;
+		let next = firstYear - EXTEND_BY;
+		if (minYear !== null && next < minYear) next = minYear;
+		firstYear = next;
+		// Wait for the new year sections to render, then preserve the
+		// user's visual scroll position by adding the height delta.
+		await tick();
+		const newHeight = el.scrollHeight;
+		el.scrollTop = prevTop + (newHeight - prevHeight);
+		extending = false;
+	}
+
+	async function extendForward() {
+		if (extending) return;
+		if (maxYear !== null && lastYear >= maxYear) return;
+		extending = true;
+		let next = lastYear + EXTEND_BY;
+		if (maxYear !== null && next > maxYear) next = maxYear;
+		lastYear = next;
+		await tick();
+		extending = false;
+	}
+
+	// Wire IntersectionObserver to the sentinels while the panel is open.
+	// Skipped where IO isn't available (SSR / jsdom tests) — the initial
+	// pad still renders, just without lazy extension.
+	$effect(() => {
+		if (!open) return;
+		if (typeof IntersectionObserver === 'undefined') return;
+		const root = listEl;
+		const top = topSentinelEl;
+		const bottom = bottomSentinelEl;
+		if (!root || !top || !bottom) return;
+		const io = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!entry.isIntersecting) continue;
+					if (entry.target === top) extendBackward();
+					else if (entry.target === bottom) extendForward();
+				}
+			},
+			{ root, rootMargin: '200px 0px' }
+		);
+		io.observe(top);
+		io.observe(bottom);
+		return () => io.disconnect();
+	});
+
 	// Auto-scroll to the selected (or current) month when the panel opens.
 	$effect(() => {
 		if (!open || !listEl) return;
@@ -133,7 +207,11 @@
 			const target =
 				listEl?.querySelector('[data-selected="true"]') ??
 				listEl?.querySelector('[data-current="true"]');
-			target?.scrollIntoView({ block: 'center' });
+			// jsdom doesn't implement scrollIntoView — guard so unit tests
+			// don't surface unhandled errors.
+			if (target && typeof (target as HTMLElement).scrollIntoView === 'function') {
+				(target as HTMLElement).scrollIntoView({ block: 'center' });
+			}
 		});
 	});
 </script>
@@ -243,6 +321,7 @@
 			bind:this={listEl}
 			class="max-h-72 overflow-y-auto [scrollbar-width:none] sm:max-h-72 [&::-webkit-scrollbar]:hidden"
 		>
+			<div bind:this={topSentinelEl} aria-hidden="true" class="h-px"></div>
 			{#each years as year (year)}
 				{@const yearSelected = value?.getFullYear() === year}
 				<div
@@ -257,17 +336,16 @@
 				</div>
 				<div class="grid grid-cols-4 gap-0.5 p-1.5">
 					{#each MONTH_SHORT as monthLabel, m (m)}
-						{@const entry = monthMap.get(year * 12 + m)}
-						{@const sel = entry ? isSelected(entry) : false}
-						{@const cur = entry ? isCurrent(entry) : false}
-						{@const dis = entry?.disabled ?? true}
+						{@const sel = isSelected(year, m)}
+						{@const cur = isCurrent(year, m)}
+						{@const dis = isMonthDisabled(year, m)}
 						<button
 							type="button"
 							data-month={m}
 							data-testid={buildTestId('month-picker', 'month', testId, `${year}-${m}`)}
 							data-selected={sel || undefined}
 							data-current={cur || undefined}
-							onclick={() => entry && pick(entry)}
+							onclick={() => pick(year, m)}
 							disabled={dis}
 							class={cn(
 								'cursor-pointer rounded px-1 py-2 text-xs font-medium transition-colors sm:py-1',
@@ -284,6 +362,7 @@
 					{/each}
 				</div>
 			{/each}
+			<div bind:this={bottomSentinelEl} aria-hidden="true" class="h-px"></div>
 		</div>
 
 		<div class="border-default-200 flex items-center justify-between border-t px-3 py-2">

package/dist/index.d.ts

@@ -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/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.3.0",
+	"version": "3.4.1",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {