@vllnt/ui 0.1.11 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,104 @@
+# Changelog
+
+All notable changes to `@vllnt/ui` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.0] - 2026-04-21
+
+### Added
+
+- **AI family** — `AiChatInput`, `AiMessageBubble`, `AiSourceCitation`, `AiStreamingText`, `AiToolCallDisplay`, `ThinkingBlock`, `ModelSelector`.
+- **Financial family** — `CandlestickChart`, `MarketTreemap`, `OrderBook`, `TickerTape`, `SparklineGrid`, `WalletCard`, `Watchlist`.
+- **Ops / Status family** — `StatusBoard`, `StatusIndicator`, `LiveFeed`, `WorldClockBar`, `SeverityBadge`, `RoleBadge`, `ScopeSelector`.
+- **Billing & Plans family** — `SubscriptionCard`, `PlanBadge`, `CreditBadge`, `UsageBreakdown`.
+- **Animation family** — `AnimatedText`, `BorderBeam`, `Marquee`, `NumberTicker`, and a standalone spinner library exported via `Spinner`.
+- **Educational family** — `Flashcard`, `Stepper`, `Tour`, `Annotation`, `CompletionDialog`, `TruncatedText`, `TableOfContentsPanel`.
+- **Form additions** — `DatePicker`, `FileUpload`, `NumberInput`, `PasswordInput`, `InlineInput`, `Combobox`, `Rating`.
+- **Data / metric additions** — `DataTable`, `DataList`, `StatCard`, `MetricGauge`, `ActivityHeatmap`, `ActivityLog`.
+- **App shell additions** — `CategoryFilter`, `FilterBar`, `CookieConsent`, `Slideshow`, `CountdownTimer`, `AvatarGroup`, `FloatingActionButton`, `SocialFab`, `KeyboardShortcutsHelp`, `ShareDialog`, `HorizontalScrollRow`, `ViewSwitcher`.
+- Total component count: **144** (up from 93).
+- Full Storybook integration with E2E smoke tests in CI.
+- OG image generation for every registry page.
+- Signed provenance attestations on every published artifact (sigstore).
+
+### Changed
+
+- Documentation domain moved to `ui.vllnt.ai` / `storybook.vllnt.ai`.
+- Default package registry is the public npm registry (no longer GitHub Packages).
+- README component tables expanded to cover all 144 components organized by family.
+
+### Fixed
+
+- Publish workflow now uses `npx --yes npm@latest publish` so OIDC trusted publishing survives GitHub runners that ship pre-11.5.1 npm.
+
+## [0.1.11] - 2026-04 *(last canary-era release)*
+
+### Fixed
+
+- Re-extract tarball path from `pnpm pack` output for publish step.
+
+## [0.1.10]
+
+### Changed
+
+- Switched to `pnpm pack` + `npm publish` flow to support `publishConfig` with OIDC auth.
+
+## [0.1.9]
+
+### Fixed
+
+- Use `pnpm publish` and repair release creation step in CI.
+
+## [0.1.8]
+
+### Fixed
+
+- Annotated tags + `--notes-file` for release creation.
+
+## [0.1.7]
+
+### Added
+
+- `HorizontalScrollRow`, `ViewSwitcher`, and `useHorizontalScroll` hook.
+
+### Fixed
+
+- `Comparison`: defensive prop validation to prevent runtime crash on malformed input.
+
+## [0.1.6]
+
+### Fixed
+
+- Bundle-free build to preserve per-file `"use client"` directives in published chunks.
+
+## [0.1.5]
+
+### Fixed
+
+- Add `"use client"` to all dist JS including `index.js`.
+
+## [0.1.4]
+
+### Fixed
+
+- Exclude `index.js` from `"use client"` banner.
+
+## [0.1.3]
+
+### Fixed
+
+- Add `"use client"` directive to published dist chunks.
+
+## [0.1.2]
+
+### Added
+
+- Initial public publish to the public npm registry.
+
+[0.2.0]: https://github.com/vllnt/ui/releases/tag/v0.2.0
+[0.1.11]: https://github.com/vllnt/ui/releases/tag/v0.1.11
+[0.1.10]: https://github.com/vllnt/ui/releases/tag/v0.1.10
+[0.1.9]: https://github.com/vllnt/ui/releases/tag/v0.1.9
+[0.1.8]: https://github.com/vllnt/ui/releases/tag/v0.1.8
+[0.1.2]: https://github.com/vllnt/ui/releases/tag/v0.1.2

package/README.md

@@ -1,6 +1,8 @@
 # @vllnt/ui
 
-React component library — 93 components built on Radix UI primitives, Tailwind CSS, and CVA.
+React component library — 144 components built on Radix UI primitives, Tailwind CSS, and CVA.
+
+See [CHANGELOG.md](./CHANGELOG.md) for release history.
 
 ## Install
 
@@ -271,6 +273,109 @@ import {
 | `CodePlayground` | `{ CodePlayground, FileTree }` | Code editor with file tree |
 | `Terminal` | `{ Terminal, SimpleTerminal }` | Terminal emulator UI |
 | `VideoEmbed` | `{ VideoEmbed }` | Responsive video embed |
+| `Flashcard` | `{ Flashcard }` | Flip-card for spaced repetition |
+| `Stepper` | `{ Stepper }` | Linear progress stepper |
+| `Tour` | `{ Tour }` | Guided product tour |
+| `Annotation` | `{ Annotation }` | Inline annotation / highlight |
+| `CompletionDialog` | `{ CompletionDialog }` | End-of-flow celebration dialog |
+| `TruncatedText` | `{ TruncatedText }` | Expand-on-overflow text block |
+| `TableOfContentsPanel` | `{ TableOfContentsPanel }` | Sidebar TOC panel |
+| `ThinkingBlock` | `{ ThinkingBlock }` | Collapsible reasoning block |
+
+### AI
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `AiChatInput` | `{ AiChatInput }` | Chat composer with submit + attachments |
+| `AiMessageBubble` | `{ AiMessageBubble }` | User/assistant message bubble |
+| `AiStreamingText` | `{ AiStreamingText }` | Token-stream renderer |
+| `AiToolCallDisplay` | `{ AiToolCallDisplay }` | Tool-use invocation render |
+| `AiSourceCitation` | `{ AiSourceCitation }` | Inline citation reference |
+| `ModelSelector` | `{ ModelSelector }` | Model picker (provider-agnostic) |
+
+### Financial
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `CandlestickChart` | `{ CandlestickChart }` | OHLC candlestick chart |
+| `MarketTreemap` | `{ MarketTreemap }` | Market-cap treemap |
+| `OrderBook` | `{ OrderBook }` | Bid/ask depth book |
+| `TickerTape` | `{ TickerTape }` | Horizontal ticker marquee |
+| `SparklineGrid` | `{ SparklineGrid }` | Grid of inline sparklines |
+| `WalletCard` | `{ WalletCard }` | Balance / portfolio card |
+| `Watchlist` | `{ Watchlist }` | Tracked-symbol list |
+
+### Ops / Status
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `StatusBoard` | `{ StatusBoard }` | Grid of service statuses |
+| `StatusIndicator` | `{ StatusIndicator }` | Inline dot + label |
+| `LiveFeed` | `{ LiveFeed }` | Append-only event feed |
+| `WorldClockBar` | `{ WorldClockBar }` | Multi-timezone clock bar |
+| `SeverityBadge` | `{ SeverityBadge }` | Severity-level badge |
+| `RoleBadge` | `{ RoleBadge }` | User-role badge |
+| `ScopeSelector` | `{ ScopeSelector }` | Scope / environment picker |
+
+### Billing & Plans
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `SubscriptionCard` | `{ SubscriptionCard }` | Plan pricing / feature card |
+| `PlanBadge` | `{ PlanBadge }` | Tier indicator |
+| `CreditBadge` | `{ CreditBadge }` | Remaining-credit pill |
+| `UsageBreakdown` | `{ UsageBreakdown }` | Usage-by-category breakdown |
+
+### Animation
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `AnimatedText` | `{ AnimatedText }` | Text enter-animations |
+| `BorderBeam` | `{ BorderBeam }` | Animated gradient border |
+| `Marquee` | `{ Marquee }` | Infinite scroll marquee |
+| `NumberTicker` | `{ NumberTicker }` | Animated number counter |
+| `Spinner` | `{ Spinner }` | Rich loading-spinner library |
+
+### Form Additions
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `DatePicker` | `{ DatePicker }` | Composed `Calendar` + `Popover` |
+| `FileUpload` | `{ FileUpload }` | Drag-drop file input |
+| `NumberInput` | `{ NumberInput }` | Numeric input w/ steppers |
+| `PasswordInput` | `{ PasswordInput }` | Input w/ show-password toggle |
+| `InlineInput` | `{ InlineInput }` | Click-to-edit inline input |
+| `Combobox` | `{ Combobox }` | Typeahead select |
+| `Rating` | `{ Rating }` | Star rating input |
+
+### Data & Metrics
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `DataTable` | `{ DataTable }` | High-level table w/ sort/filter (TanStack) |
+| `DataList` | `{ DataList }` | Label/value list |
+| `StatCard` | `{ StatCard }` | KPI tile |
+| `MetricGauge` | `{ MetricGauge }` | Gauge chart |
+| `ActivityHeatmap` | `{ ActivityHeatmap }` | GitHub-style contribution grid |
+| `ActivityLog` | `{ ActivityLog }` | Audit-trail feed |
+| `TableOfContents` | `{ TableOfContents }` | Inline TOC |
+
+### App Shell (extended)
+
+| Component | Import | Notes |
+|-----------|--------|-------|
+| `CategoryFilter` | `{ CategoryFilter }` | Chip-based category filter |
+| `FilterBar` | `{ FilterBar }` | Multi-facet filter row |
+| `CookieConsent` | `{ CookieConsent }` | Cookie-consent banner |
+| `Slideshow` | `{ Slideshow }` | Hero slideshow |
+| `CountdownTimer` | `{ CountdownTimer }` | Event countdown |
+| `AvatarGroup` | `{ AvatarGroup }` | Stacked avatar group |
+| `FloatingActionButton` | `{ FloatingActionButton }` | Anchored FAB |
+| `SocialFab` | `{ SocialFab }` | Social-links FAB |
+| `KeyboardShortcutsHelp` | `{ KeyboardShortcutsHelp }` | Cmd-? shortcut dialog |
+| `ShareDialog` | `{ ShareDialog }` | Shareable-link dialog |
+| `HorizontalScrollRow` | `{ HorizontalScrollRow }` | Scroll-snap row |
+| `ViewSwitcher` | `{ ViewSwitcher }` | Grid/list toggle |
 
 ## Utilities
 

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const VISIBLE_DAY_LABELS = /* @__PURE__ */ new Set(["Mon", "Wed", "Fri"]);
+const LEVEL_CLASS_NAMES = [
+  "bg-muted",
+  "bg-emerald-500/25",
+  "bg-emerald-500/45",
+  "bg-emerald-500/65",
+  "bg-emerald-500"
+];
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function toUtcDate(date) {
+  return new Date(
+    Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
+  );
+}
+function addUtcDays(date, days) {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate() + days
+    )
+  );
+}
+function formatDayKey(date) {
+  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, "0")}-${String(date.getUTCDate()).padStart(2, "0")}`;
+}
+function getIntensityLevel(count, maxCount) {
+  if (count <= 0 || maxCount <= 0) {
+    return 0;
+  }
+  const ratio = count / maxCount;
+  if (ratio < 0.25) {
+    return 1;
+  }
+  if (ratio < 0.5) {
+    return 2;
+  }
+  if (ratio < 0.75) {
+    return 3;
+  }
+  return 4;
+}
+function getGridData(data, endDate, weeks) {
+  const normalizedEnd = toUtcDate(endDate);
+  const startDate = addUtcDays(normalizedEnd, -(weeks * 7 - 1));
+  const countsByDate = /* @__PURE__ */ new Map();
+  data.forEach((item) => {
+    const normalizedDate = toUtcDate(normalizeDate(item.date));
+    countsByDate.set(formatDayKey(normalizedDate), item.count);
+  });
+  const maxCount = Math.max(...data.map((item) => item.count), 0);
+  return Array.from({ length: weeks }, (_, weekIndex) => {
+    return Array.from({ length: 7 }, (_2, dayIndex) => {
+      const date = addUtcDays(startDate, weekIndex * 7 + dayIndex);
+      const key = formatDayKey(date);
+      const count = countsByDate.get(key) ?? 0;
+      return {
+        count,
+        date,
+        key,
+        level: getIntensityLevel(count, maxCount)
+      };
+    });
+  });
+}
+function formatMonthLabel(date) {
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    timeZone: "UTC"
+  }).format(date);
+}
+function formatTooltip(date, count) {
+  const formattedDate = new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    month: "short",
+    timeZone: "UTC",
+    year: "numeric"
+  }).format(date);
+  return `${count} activity ${count === 1 ? "event" : "events"} on ${formattedDate}`;
+}
+function HeatmapGrid({
+  gridData,
+  weeks
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-[640px] space-y-3", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid gap-2 text-xs text-muted-foreground",
+        style: { gridTemplateColumns: `40px repeat(${weeks}, minmax(0, 1fr))` },
+        children: [
+          /* @__PURE__ */ jsx("span", {}),
+          gridData.map((week) => /* @__PURE__ */ jsx("span", { className: "text-center", children: week[0] && week[0].date.getUTCDate() <= 7 ? formatMonthLabel(week[0].date) : "" }, `month-${week[0]?.key}`))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid gap-2",
+        style: { gridTemplateColumns: `40px repeat(${weeks}, minmax(0, 1fr))` },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "grid grid-rows-7 gap-2 pt-1 text-xs text-muted-foreground", children: WEEKDAY_LABELS.map((label) => /* @__PURE__ */ jsx("span", { className: "h-4 leading-4", children: VISIBLE_DAY_LABELS.has(label) ? label : "" }, label)) }),
+          gridData.map((week) => /* @__PURE__ */ jsx("div", { className: "grid grid-rows-7 gap-2", children: week.map((day) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "h-4 rounded-sm border border-border/40 transition-colors",
+                LEVEL_CLASS_NAMES[day.level]
+              ),
+              role: "img",
+              title: formatTooltip(day.date, day.count)
+            },
+            day.key
+          )) }, `week-${week[0]?.key}`))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { children: "Less" }),
+      LEVEL_CLASS_NAMES.map((className, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-3 w-3 rounded-[3px] border border-border/40",
+            className
+          )
+        },
+        `legend-${index}`
+      )),
+      /* @__PURE__ */ jsx("span", { children: "More" })
+    ] })
+  ] });
+}
+const ActivityHeatmap = React.forwardRef(
+  ({
+    className,
+    data,
+    description,
+    endDate = /* @__PURE__ */ new Date(),
+    title = "Activity heatmap",
+    weeks = 12,
+    ...props
+  }, ref) => {
+    const normalizedEndDate = normalizeDate(endDate);
+    const gridData = getGridData(data, normalizedEndDate, weeks);
+    return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold tracking-tight", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border bg-card p-4 shadow-sm", children: /* @__PURE__ */ jsx(HeatmapGrid, { gridData, weeks }) })
+    ] });
+  }
+);
+ActivityHeatmap.displayName = "ActivityHeatmap";
+export {
+  ActivityHeatmap
+};

package/dist/components/activity-heatmap/index.js

@@ -0,0 +1,6 @@
+import {
+  ActivityHeatmap
+} from "./activity-heatmap";
+export {
+  ActivityHeatmap
+};

package/dist/components/activity-log/activity-log.js

@@ -0,0 +1,256 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Avatar, AvatarFallback } from "../avatar";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+import { ScrollArea } from "../scroll-area";
+import { Separator } from "../separator";
+const toneConfig = {
+  danger: {
+    badgeClassName: "border-destructive/20 bg-destructive/10 text-destructive dark:text-destructive",
+    markerClassName: "bg-destructive"
+  },
+  default: {
+    badgeClassName: "border-border bg-muted text-muted-foreground",
+    markerClassName: "bg-primary"
+  },
+  success: {
+    badgeClassName: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    markerClassName: "bg-emerald-500"
+  },
+  warning: {
+    badgeClassName: "border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    markerClassName: "bg-amber-500"
+  }
+};
+function getInitials(name) {
+  return name.split(" ").map((segment) => segment[0]).join("").slice(0, 2).toUpperCase();
+}
+function buildPageNumbers(currentPage, totalPages) {
+  if (totalPages <= 1) return [1];
+  const start = Math.max(1, currentPage - 1);
+  const end = Math.min(totalPages, start + 2);
+  const normalizedStart = Math.max(1, end - 2);
+  return Array.from(
+    { length: end - normalizedStart + 1 },
+    (_, index) => normalizedStart + index
+  );
+}
+function ActivityLogHeader({
+  currentPage,
+  description,
+  title,
+  totalPages
+}) {
+  return /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Badge, { className: "w-fit", variant: "outline", children: [
+      "Page ",
+      currentPage,
+      " of ",
+      totalPages
+    ] })
+  ] }) });
+}
+function PaginationControls({
+  currentPage,
+  onPageChange,
+  pageNumbers,
+  totalPages
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: currentPage === 1,
+        onClick: () => {
+          onPageChange(currentPage - 1);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          "Previous"
+        ]
+      }
+    ),
+    pageNumbers.map((pageNumber) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Go to page ${pageNumber}`,
+        onClick: () => {
+          onPageChange(pageNumber);
+        },
+        size: "sm",
+        variant: pageNumber === currentPage ? "default" : "outline",
+        children: pageNumber
+      },
+      pageNumber
+    )),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled: currentPage === totalPages,
+        onClick: () => {
+          onPageChange(currentPage + 1);
+        },
+        size: "sm",
+        variant: "outline",
+        children: [
+          "Next",
+          /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+        ]
+      }
+    )
+  ] });
+}
+function ActivityRow({ item }) {
+  const palette = toneConfig[item.tone ?? "default"];
+  return /* @__PURE__ */ jsxs("li", { className: "relative pl-12", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute bottom-[-1.5rem] left-[18px] top-11 w-px bg-border last:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "absolute left-4 top-3 h-3 w-3 rounded-full ring-4 ring-background",
+          palette.markerClassName
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9 border bg-muted", children: /* @__PURE__ */ jsx(AvatarFallback, { children: getInitials(item.actor) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.actor }),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: item.action }),
+            item.target ? /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: item.target }) : null
+          ] }),
+          item.description ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.description }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 sm:justify-end", children: [
+        item.scope ? /* @__PURE__ */ jsx(Badge, { className: palette.badgeClassName, variant: "outline", children: item.scope }) : null,
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: item.timestamp })
+      ] })
+    ] }) })
+  ] });
+}
+function ActivityLogBody({
+  currentPage,
+  emptyMessage,
+  items,
+  onPageChange,
+  pageNumbers,
+  pageSize,
+  totalPages
+}) {
+  const visibleItems = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return items.slice(start, start + pageSize);
+  }, [currentPage, items, pageSize]);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[26rem] pr-4", children: /* @__PURE__ */ jsx("ol", { className: "space-y-4 pb-2", children: visibleItems.map((item) => /* @__PURE__ */ jsx(ActivityRow, { item }, item.id)) }) }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Showing ",
+        (currentPage - 1) * pageSize + 1,
+        " - ",
+        (currentPage - 1) * pageSize + visibleItems.length,
+        " of ",
+        items.length
+      ] }),
+      /* @__PURE__ */ jsx(
+        PaginationControls,
+        {
+          currentPage,
+          onPageChange,
+          pageNumbers,
+          totalPages
+        }
+      )
+    ] })
+  ] });
+}
+const ActivityLog = forwardRef(
+  ({
+    className,
+    defaultPage = 1,
+    description,
+    emptyMessage = "No activity recorded yet.",
+    items,
+    onPageChange,
+    page,
+    pageSize = 5,
+    title = "Activity log",
+    ...props
+  }, ref) => {
+    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+    const currentPage = Math.min(
+      Math.max(page ?? uncontrolledPage, 1),
+      totalPages
+    );
+    const pageNumbers = useMemo(
+      () => buildPageNumbers(currentPage, totalPages),
+      [currentPage, totalPages]
+    );
+    function handlePageChange(nextPage) {
+      if (page === void 0) {
+        setUncontrolledPage(nextPage);
+      }
+      onPageChange?.(nextPage);
+    }
+    return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), ref, ...props, children: [
+      /* @__PURE__ */ jsx(
+        ActivityLogHeader,
+        {
+          currentPage,
+          description,
+          title,
+          totalPages
+        }
+      ),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsx(
+        ActivityLogBody,
+        {
+          currentPage,
+          emptyMessage,
+          items,
+          onPageChange: handlePageChange,
+          pageNumbers,
+          pageSize,
+          totalPages
+        }
+      ) })
+    ] });
+  }
+);
+ActivityLog.displayName = "ActivityLog";
+export {
+  ActivityLog
+};

package/dist/components/activity-log/index.js

@@ -0,0 +1,6 @@
+import {
+  ActivityLog
+} from "./activity-log";
+export {
+  ActivityLog
+};