@makolabs/ripple 2.0.0 → 2.2.0

package/dist/index.d.ts

@@ -43,9 +43,8 @@ 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 } from './layout/activity-list/activity-list-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';
 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, UserViewModalProps, UserManagementAdapter, UserManagementProps, FormErrors } from './user-management/user-management-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

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { activityList } from './activity-list.js';
+	import {
+		activityList,
+		iconCircleClasses,
+		accentBarClasses,
+		highlightedRowClasses,
+		highlightedRingClasses
+	} from './activity-list.js';
+	import Badge from '../../elements/badge/Badge.svelte';
+	import Button from '../../button/Button.svelte';
+	import { Color, Size } from '../../variants.js';
 	import type { ActivityListProps } from '../../index.js';
-	import { Color } from '../../variants.js';
 
 	let {
 		title,
 		items = [],
 		color = Color.DEFAULT,
+		size = 'md',
+		timeline = false,
 		class: className = '',
 		headerClass = '',
 		titleClass = '',
 		contentClass = '',
 		itemClass = '',
 		onItemClick,
-		children
+		children,
+		customContent
 	}: ActivityListProps = $props();
 
 	const {
@@ -23,18 +34,24 @@
 		title: titleSlot,
 		content,
 		item,
+		accentBar,
+		timelineLine,
+		iconWrapper,
+		iconInner,
+		timelineDot,
 		itemContent,
 		itemMain,
 		itemHeader,
 		itemTitle,
 		itemSubtitle,
+		itemTimestamp,
 		itemActions
-	} = $derived(activityList({ color }));
+	} = $derived(activityList({ color, size }));
 
 	const baseClass = $derived(cn(base(), className));
 	const headerClasses = $derived(cn(header(), headerClass));
 	const titleClasses = $derived(cn(titleSlot(), titleClass));
-	const contentClasses = $derived(cn(content(), contentClass));
+	const contentClasses = $derived(cn(content(), contentClass, timeline && 'relative divide-y-0'));
 </script>
 
 <div class={baseClass}>
@@ -48,43 +65,153 @@
 		{#if children}
 			{@render children()}
 		{:else}
+			{#if timeline && items.length > 1}
+				<span class={timelineLine()} aria-hidden="true"></span>
+			{/if}
 			{#each items as activityItem, index (activityItem.title + index)}
-				<div class={cn(item(), itemClass)} role="button" tabindex="0">
-					<div class={itemContent()}>
-						<div class={itemMain()}>
-							<div class={itemHeader()}>
-								<button class={itemTitle()} onclick={() => onItemClick?.(activityItem, index)}>
-									{activityItem.title}
-								</button>
-								{#if activityItem.badges}
-									{#each activityItem.badges as badge (badge.text)}
-										<span
-											class="ml-3 inline-flex rounded-full px-2 py-1 text-xs font-medium {badge.class}"
+				{@const IconComponent = activityItem.icon}
+				{@const iconColorKey = activityItem.iconColor ?? 'default'}
+				{@const iconCircle = iconCircleClasses[iconColorKey] ?? iconCircleClasses.default}
+				{@const accentBarColor =
+					activityItem.accentColor && accentBarClasses[activityItem.accentColor]}
+				{@const highlightKey = activityItem.accentColor ?? 'primary'}
+				{@const highlightClass =
+					activityItem.highlighted &&
+					(highlightedRowClasses[highlightKey] ?? highlightedRowClasses.primary)}
+				{@const ringClass =
+					activityItem.highlighted &&
+					(highlightedRingClasses[highlightKey] ?? highlightedRingClasses.primary)}
+				{@const isCustom = activityItem.custom && customContent}
+				<div
+					class={cn(item(), highlightClass, itemClass)}
+					data-activity-row=""
+					data-activity-highlighted={activityItem.highlighted ? '' : undefined}
+				>
+					{#if accentBarColor}
+						<span class={cn(accentBar(), accentBarColor)} aria-hidden="true"></span>
+					{/if}
+
+					{#if IconComponent}
+						<span class={cn(iconWrapper(), iconCircle, ringClass)} aria-hidden="true">
+							<IconComponent class={iconInner()} />
+						</span>
+					{:else if timeline}
+						<span class={cn(timelineDot(), ringClass)} aria-hidden="true">
+							<span class={cn('size-3 rounded-full', iconCircle)}></span>
+						</span>
+					{/if}
+
+					{#if isCustom}
+						<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?.()}
 										>
-											{badge.text}
-										</span>
+											{action.label}
+										</Button>
 									{/each}
-								{/if}
-							</div>
-							{#if activityItem.subtitle}
-								<div class={itemSubtitle()}>
-									{activityItem.subtitle}
 								</div>
 							{/if}
 						</div>
-						{#if activityItem.actions}
-							<div class={itemActions()}>
-								{#each activityItem.actions as action (action.label)}
-									<button
-										class="border-default-300 text-default-700 hover:bg-default-50 inline-flex items-center rounded-md border bg-white px-3 py-1.5 text-xs font-medium shadow-sm focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none"
-										onclick={() => action.onClick?.()}
-									>
-										{action.label}
+					{:else}
+						<div class={itemContent()}>
+							<div class={itemMain()}>
+								<div class={itemHeader()}>
+									<button class={itemTitle()} onclick={() => onItemClick?.(activityItem, index)}>
+										{activityItem.title}
 									</button>
-								{/each}
+									{#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.subtitle}
+									<div class={itemSubtitle()}>
+										{activityItem.subtitle}
+									</div>
+								{/if}
 							</div>
-						{/if}
-					</div>
+
+							{#if activityItem.timestamp}
+								<div class={itemTimestamp()} data-activity-timestamp="">
+									{activityItem.timestamp}
+								</div>
+							{/if}
+
+							{#if activityItem.actions}
+								<div class={itemActions()}>
+									{#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>
+					{/if}
 				</div>
 			{/each}
 		{/if}

package/dist/layout/activity-list/activity-list-types.d.ts

@@ -1,24 +1,98 @@
 import type { ClassValue } from 'tailwind-variants';
-import type { Snippet } from 'svelte';
+import type { Snippet, Component } from 'svelte';
 import type { VariantColors } from '../../index.js';
 export type ActivityItemBadge = {
     text: string;
-    class: string;
+    /**
+     * Ripple color for the badge. Renders as a `<Badge color={color}>`
+     * in ripple's design system. Preferred over `class` for new code.
+     */
+    color?: VariantColors;
+    /**
+     * Legacy Tailwind class string for the badge (e.g. 'bg-green-100 text-green-800').
+     * Kept for backward compatibility with pre-v2.1 callers. If both `color`
+     * and `class` are provided, `color` wins.
+     */
+    class?: string;
 };
 export type ActivityItemAction = {
     label: string;
     onClick?: () => void;
+    /** Optional ripple button color variant. @default 'default' */
+    color?: VariantColors;
+    /** Optional ripple button variant. @default 'outline' */
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
 };
 export type ActivityItem = {
     title: string;
     subtitle?: string;
     badges?: ActivityItemBadge[];
     actions?: ActivityItemAction[];
+    /**
+     * Optional icon component rendered on the left of the row inside a
+     * colored circle. Use any component that accepts a `class` prop (most
+     * icon libraries satisfy this). When the parent list is in
+     * `timeline` mode, the icon also acts as the "node" that the
+     * connector line passes through.
+     */
+    icon?: Component;
+    /**
+     * Background/foreground color for the icon circle. Only has effect
+     * when `icon` is provided (or when the list is in `timeline` mode,
+     * which renders a fallback dot when no `icon` is set). Defaults to
+     * `default`.
+     */
+    iconColor?: VariantColors;
+    /**
+     * Optional right-aligned timestamp string. Format at will —
+     * 'Jan 15', '2h ago', '15:04:23', etc. The component just renders
+     * the string with a muted text style.
+     */
+    timestamp?: string;
+    /**
+     * Optional left-edge accent bar color. Renders as a 3px vertical bar
+     * on the left of the row in the chosen ripple color. Good for
+     * at-a-glance status scanning down a long list.
+     */
+    accentColor?: VariantColors;
+    /**
+     * When true, the row gets a tinted background and a slightly
+     * stronger accent to draw attention — useful for pinned, flagged,
+     * or otherwise-notable items in an otherwise-uniform list.
+     */
+    highlighted?: boolean;
+    /**
+     * When true, the row's content area is rendered by the parent
+     * list's `customContent` snippet instead of the default
+     * title/subtitle/badges/timestamp/actions block. The icon column,
+     * accent bar, and highlighted background still apply, so the row
+     * keeps its place in the list visually. Use this to inline charts,
+     * progress bars, or any other arbitrary markup into a single row.
+     *
+     * Items can also carry their own arbitrary fields — define a
+     * sub-type that extends `ActivityItem` if you need typed access
+     * inside the snippet.
+     */
+    custom?: boolean;
 };
+export type ActivityListSize = 'sm' | 'md';
 export type ActivityListProps = {
     title?: string;
     items?: ActivityItem[];
     color?: VariantColors;
+    /**
+     * Visual density. `md` (default) matches the original spacious look;
+     * `sm` tightens padding, shrinks the icon column, and is well-suited
+     * to compact panels and sidebars.
+     */
+    size?: ActivityListSize;
+    /**
+     * When true, render items as a vertical timeline — a connector
+     * line runs through the icon column tying items together. Items
+     * without an `icon` render a fallback dot. Has no effect when
+     * using the custom `children` snippet.
+     */
+    timeline?: boolean;
     class?: ClassValue;
     headerClass?: ClassValue;
     titleClass?: ClassValue;
@@ -26,5 +100,11 @@ export type ActivityListProps = {
     itemClass?: ClassValue;
     onItemClick?: (item: ActivityItem, index: number) => void;
     children?: Snippet;
+    /**
+     * Optional snippet used to render the content area of any item
+     * with `custom: true`. Receives `(item, index)`. Items without
+     * `custom: true` continue to use the default rendering.
+     */
+    customContent?: Snippet<[ActivityItem, number]>;
     testId?: string;
 };

package/dist/layout/activity-list/activity-list.d.ts

@@ -1,4 +1,32 @@
 export declare const activityList: import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+        sm: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+    };
     color: {
         default: {
             base: string;
@@ -42,13 +70,47 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     title: string;
     content: string;
     item: string;
+    accentBar: string;
+    timelineLine: string;
+    iconWrapper: string;
+    iconInner: string;
+    timelineDot: string;
     itemContent: string;
     itemMain: string;
     itemHeader: string;
     itemTitle: string;
     itemSubtitle: string;
+    itemTimestamp: string;
     itemActions: string;
 }, undefined, {
+    size: {
+        md: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+        sm: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+    };
     color: {
         default: {
             base: string;
@@ -92,13 +154,47 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     title: string;
     content: string;
     item: string;
+    accentBar: string;
+    timelineLine: string;
+    iconWrapper: string;
+    iconInner: string;
+    timelineDot: string;
     itemContent: string;
     itemMain: string;
     itemHeader: string;
     itemTitle: string;
     itemSubtitle: string;
+    itemTimestamp: string;
     itemActions: string;
 }, import("tailwind-variants").TVReturnType<{
+    size: {
+        md: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+        sm: {
+            header: string;
+            title: string;
+            item: string;
+            timelineLine: string;
+            iconWrapper: string;
+            iconInner: string;
+            timelineDot: string;
+            itemHeader: string;
+            itemTitle: string;
+            itemSubtitle: string;
+            itemTimestamp: string;
+        };
+    };
     color: {
         default: {
             base: string;
@@ -142,10 +238,38 @@ export declare const activityList: import("tailwind-variants").TVReturnType<{
     title: string;
     content: string;
     item: string;
+    accentBar: string;
+    timelineLine: string;
+    iconWrapper: string;
+    iconInner: string;
+    timelineDot: string;
     itemContent: string;
     itemMain: string;
     itemHeader: string;
     itemTitle: string;
     itemSubtitle: string;
+    itemTimestamp: string;
     itemActions: string;
 }, undefined, unknown, unknown, undefined>>;
+/**
+ * Maps a ripple VariantColor to Tailwind classes for the icon circle
+ * (background + foreground text color). Used per-row, not per-list.
+ */
+export declare const iconCircleClasses: Record<string, string>;
+/**
+ * Maps a ripple VariantColor to a Tailwind `bg-*` class for the
+ * left-edge accent bar.
+ */
+export declare const accentBarClasses: Record<string, string>;
+/**
+ * Maps a ripple VariantColor to a tinted background for highlighted
+ * rows. Picked to sit harmoniously alongside the matching accent bar
+ * and icon circle.
+ */
+export declare const highlightedRowClasses: Record<string, string>;
+/**
+ * Ring color used by the icon wrapper to mask the timeline line. Must
+ * match the row background — for highlighted rows the white default
+ * would draw a visible square, so swap it for the matching tint.
+ */
+export declare const highlightedRingClasses: Record<string, string>;

package/dist/layout/activity-list/activity-list.js

@@ -3,18 +3,52 @@ import { Color } from '../../variants.js';
 export const activityList = tv({
     slots: {
         base: 'rounded-lg bg-white shadow-sm',
-        header: 'border-b border-default-200 px-6 py-4',
-        title: 'text-lg font-medium text-default-900',
+        header: '',
+        title: 'font-medium text-default-900',
         content: 'divide-y divide-default-200',
-        item: 'px-6 py-4 hover:bg-default-50 transition-colors',
-        itemContent: 'flex items-center justify-between',
-        itemMain: 'flex-1',
-        itemHeader: 'flex items-center',
-        itemTitle: 'text-sm font-medium text-default-900 hover:text-blue-600 focus:outline-none focus:text-blue-600 cursor-pointer',
-        itemSubtitle: 'mt-1 text-xs text-default-500',
-        itemActions: 'flex items-center space-x-2'
+        item: 'relative flex items-start hover:bg-default-50 transition-colors',
+        accentBar: 'absolute inset-y-0 left-0 w-[3px]',
+        timelineLine: 'absolute top-0 bottom-0 w-[2px] bg-default-200',
+        iconWrapper: 'relative z-10 flex shrink-0 items-center justify-center rounded-full ring-4 ring-white',
+        iconInner: '',
+        timelineDot: 'relative z-10 flex shrink-0 items-center justify-center ring-4 ring-white',
+        itemContent: 'flex flex-1 items-start justify-between gap-3',
+        itemMain: 'flex-1 min-w-0',
+        itemHeader: 'flex items-center flex-wrap',
+        itemTitle: 'font-medium text-default-900 hover:text-primary-600 focus:outline-none focus:text-primary-600 cursor-pointer text-left',
+        itemSubtitle: 'text-default-500',
+        itemTimestamp: 'text-default-400 shrink-0 whitespace-nowrap',
+        itemActions: 'flex items-center gap-2 shrink-0'
     },
     variants: {
+        size: {
+            md: {
+                header: 'border-b border-default-200 px-6 py-4',
+                title: 'text-lg',
+                item: 'gap-3 px-6 py-4',
+                timelineLine: 'left-[calc(1.5rem+1rem-1px)]',
+                iconWrapper: 'size-8 mt-0.5',
+                iconInner: 'size-4',
+                timelineDot: 'size-8 mt-0.5',
+                itemHeader: 'gap-2',
+                itemTitle: 'text-sm',
+                itemSubtitle: 'mt-1 text-xs',
+                itemTimestamp: 'text-xs'
+            },
+            sm: {
+                header: 'border-b border-default-200 px-4 py-2.5',
+                title: 'text-base',
+                item: 'gap-2 px-4 py-2.5',
+                timelineLine: 'left-[calc(1rem+0.75rem-1px)]',
+                iconWrapper: 'size-6 mt-0',
+                iconInner: 'size-3.5',
+                timelineDot: 'size-6 mt-0',
+                itemHeader: 'gap-1.5',
+                itemTitle: 'text-xs',
+                itemSubtitle: 'mt-0.5 text-[11px]',
+                itemTimestamp: 'text-[11px]'
+            }
+        },
         color: {
             [Color.DEFAULT]: {
                 base: 'bg-white border-default-200',
@@ -54,6 +88,61 @@ export const activityList = tv({
         }
     },
     defaultVariants: {
+        size: 'md',
         color: Color.DEFAULT
     }
 });
+/**
+ * Maps a ripple VariantColor to Tailwind classes for the icon circle
+ * (background + foreground text color). Used per-row, not per-list.
+ */
+export const iconCircleClasses = {
+    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'
+};
+/**
+ * Maps a ripple VariantColor to a Tailwind `bg-*` class for the
+ * left-edge accent bar.
+ */
+export const accentBarClasses = {
+    default: 'bg-default-300',
+    primary: 'bg-primary-500',
+    secondary: 'bg-secondary-500',
+    info: 'bg-info-500',
+    success: 'bg-success-500',
+    warning: 'bg-warning-500',
+    danger: 'bg-danger-500'
+};
+/**
+ * Maps a ripple VariantColor to a tinted background for highlighted
+ * rows. Picked to sit harmoniously alongside the matching accent bar
+ * and icon circle.
+ */
+export const highlightedRowClasses = {
+    default: 'bg-default-50 hover:bg-default-100',
+    primary: 'bg-primary-50 hover:bg-primary-100',
+    secondary: 'bg-secondary-50 hover:bg-secondary-100',
+    info: 'bg-info-50 hover:bg-info-100',
+    success: 'bg-success-50 hover:bg-success-100',
+    warning: 'bg-warning-50 hover:bg-warning-100',
+    danger: 'bg-danger-50 hover:bg-danger-100'
+};
+/**
+ * Ring color used by the icon wrapper to mask the timeline line. Must
+ * match the row background — for highlighted rows the white default
+ * would draw a visible square, so swap it for the matching tint.
+ */
+export const highlightedRingClasses = {
+    default: 'ring-default-50',
+    primary: 'ring-primary-50',
+    secondary: 'ring-secondary-50',
+    info: 'ring-info-50',
+    success: 'ring-success-50',
+    warning: 'ring-warning-50',
+    danger: 'ring-danger-50'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "2.0.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 {};