@makolabs/ripple 2.1.0 → 2.2.0

package/dist/index.d.ts

@@ -43,7 +43,6 @@ export type { CollapsibleProps } from './elements/collapsible/collapsible-types.
 export type { TooltipProps, TooltipPlacement } from './elements/tooltip/tooltip-types.js';
 export type { ComboboxItem, ComboboxProps } from './elements/combobox/combobox-types.js';
 export type { AccordionProps } from './elements/accordion/accordion-types.js';
-export type { TimelineItem } from './elements/timeline/timeline-types.js';
 export type { FilterTab, FilterGroup, CompactFiltersProps } from './filters/filter-types.js';
 export type { ActivityItemBadge, ActivityItemAction, ActivityItem, ActivityListProps, ActivityListSize } from './layout/activity-list/activity-list-types.js';
 export type { FileUploadProps, FileUploadSize, FilePreviewProps, UploadedFile, StagedFile } from './elements/file-upload/file-upload-types.js';
@@ -88,7 +87,6 @@ export { default as Collapsible } from './elements/collapsible/Collapsible.svelt
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 export { default as Combobox } from './elements/combobox/Combobox.svelte';
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
 export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';

package/dist/index.js

@@ -75,8 +75,6 @@ export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 export { default as Combobox } from './elements/combobox/Combobox.svelte';
 // Elements - Accordion
 export { default as Accordion } from './elements/accordion/Accordion.svelte';
-// Elements - Timeline
-export { default as Timeline } from './elements/timeline/Timeline.svelte';
 // Chart
 export { default as Chart } from './charts/Chart.svelte';
 // File Upload

package/dist/layout/activity-list/ActivityList.svelte

@@ -105,6 +105,61 @@
 						<div class="min-w-0 flex-1" data-activity-custom="">
 							{@render customContent?.(activityItem, index)}
 						</div>
+					{:else if timeline && activityItem.subtitle}
+						<div class="min-w-0 flex-1">
+							<div class="flex items-start justify-between gap-3">
+								<div
+									class="ring-default-200 flex-1 rounded-md bg-white p-3 ring-1"
+									data-activity-comment=""
+								>
+									<div class="mb-1 flex justify-between gap-x-4">
+										<div class="flex flex-wrap items-center gap-2">
+											<button
+												class="text-default-900 text-sm font-medium"
+												onclick={() => onItemClick?.(activityItem, index)}
+											>
+												{activityItem.title}
+											</button>
+											{#if activityItem.badges}
+												{#each activityItem.badges as badge (badge.text)}
+													{#if badge.color}
+														<Badge color={badge.color} size={Size.SM}>{badge.text}</Badge>
+													{:else if badge.class}
+														<span
+															class="inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
+														>
+															{badge.text}
+														</span>
+													{:else}
+														<Badge size={Size.SM}>{badge.text}</Badge>
+													{/if}
+												{/each}
+											{/if}
+										</div>
+										{#if activityItem.timestamp}
+											<div class={itemTimestamp()} data-activity-timestamp="">
+												{activityItem.timestamp}
+											</div>
+										{/if}
+									</div>
+									<p class="text-default-500 text-sm">{activityItem.subtitle}</p>
+								</div>
+							</div>
+							{#if activityItem.actions}
+								<div class={cn(itemActions(), 'mt-2')}>
+									{#each activityItem.actions as action (action.label)}
+										<Button
+											size={Size.XS}
+											variant={action.variant ?? 'outline'}
+											color={action.color ?? Color.DEFAULT}
+											onclick={() => action.onClick?.()}
+										>
+											{action.label}
+										</Button>
+									{/each}
+								</div>
+							{/if}
+						</div>
 					{:else}
 						<div class={itemContent()}>
 							<div class={itemMain()}>
@@ -117,7 +172,6 @@
 											{#if badge.color}
 												<Badge color={badge.color} size={Size.SM}>{badge.text}</Badge>
 											{:else if badge.class}
-												<!-- Legacy class-based badge — kept for backward compat -->
 												<span
 													class="inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
 												>

package/package.json

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

package/dist/elements/timeline/Timeline.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import type { TimelineItem } from '../../index.js';
-	import { formatDateTime, getRelativeTime } from '../../helper/date.js';
-	import { resolve } from '$app/paths';
-
-	let { items = [] as TimelineItem[], class: className = '' } = $props();
-</script>
-
-<div class={cn('flow-root', className)}>
-	<ul role="list" class="-mb-8">
-		{#each items as item, index (item.title + index)}
-			<li>
-				<div class="relative pb-8">
-					{#if index !== items.length - 1}
-						<span class="bg-default-200 absolute top-4 left-4 -ml-px h-full w-1" aria-hidden="true"
-						></span>
-					{/if}
-
-					{@render ItemWrap({ item })}
-				</div>
-			</li>
-		{/each}
-	</ul>
-</div>
-
-{#snippet ItemWrap({ item }: { item: TimelineItem })}
-	<div class="relative flex gap-x-3" class:items-center={!item.details}>
-		<div class="relative ml-0.5 flex-shrink-0">
-			{@render TimelineIcon(item)}
-		</div>
-		{#if item.details}
-			{@render CommentItem({ item })}
-		{:else}
-			{@render StandardItem({ item })}
-		{/if}
-	</div>
-{/snippet}
-
-{#snippet StandardItem({ item }: { item: TimelineItem })}
-	<div class="min-w-0 flex-1">
-		<div class="flex items-center justify-between">
-			<p class="text-default-500 text-sm">
-				{item.title}
-				{#if item.link}
-					<a href={resolve(item.link.url as `/`)} class="text-default-900 font-medium"
-						>{item.link.text}</a
-					>
-				{/if}
-			</p>
-			{@render TimeStamp(item.time)}
-		</div>
-	</div>
-{/snippet}
-
-{#snippet CommentItem({ item }: { item: TimelineItem })}
-	<div class="ring-default-200 w-full flex-grow rounded-md bg-white p-3 ring-1">
-		<div class="mb-1 flex justify-between gap-x-4">
-			<div class="text-default-900 text-sm font-medium">{item.title}</div>
-			{@render TimeStamp(item.time)}
-		</div>
-		<p class="text-default-500 text-sm">{item.details}</p>
-	</div>
-{/snippet}
-
-{#snippet TimeStamp(time: Date | string)}
-	<time
-		datetime={time instanceof Date ? time.toISOString() : time}
-		class="text-default-500 text-right text-sm whitespace-nowrap"
-		title={formatDateTime(time)}
-	>
-		{getRelativeTime(time)}
-	</time>
-{/snippet}
-
-{#snippet TimelineIcon(item: TimelineItem, classes = 'size-7 shrink-0')}
-	{#if item.Icon}
-		{@const Icon = item.Icon}
-		<Icon class={classes} />
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			class={classes}
-		>
-			<circle cx="8" cy="8" r="7" fill="white" />
-			<path
-				fill="currentColor"
-				d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m9.854-1.146a.5.5 0 0 0-.708-.708L7.25 9.043L5.854 7.646a.5.5 0 1 0-.708.708l1.75 1.75a.5.5 0 0 0 .708 0z"
-			/>
-		</svg>
-	{/if}
-{/snippet}

package/dist/elements/timeline/Timeline.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { TimelineItem } from '../../index.js';
-declare const Timeline: import("svelte").Component<{
-    items?: TimelineItem[];
-    class?: string;
-}, {}, "">;
-type Timeline = ReturnType<typeof Timeline>;
-export default Timeline;

package/dist/elements/timeline/timeline-types.d.ts

@@ -1,11 +0,0 @@
-import type { Component } from 'svelte';
-export interface TimelineItem {
-    title: string;
-    time: Date | string;
-    link?: {
-        text: string;
-        url: string;
-    };
-    Icon?: Component;
-    details?: string;
-}

package/dist/elements/timeline/timeline-types.js

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