@multicomma/arkcn 0.1.0

package/registry/items/virtual-list.json

@@ -0,0 +1,16 @@
+{
+  "name": "virtual-list",
+  "type": "ui",
+  "description": "-------------------------------- context --------------------------------",
+  "dependencies": {},
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/virtual-list.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/* -------------------------------- context -------------------------------- */\n\ntype VirtualItem = {\n  index: number\n  key: React.Key\n  /** Offset from the top of the content, in px. */\n  start: number\n  size: number\n  end: number\n  /** False until the row's real height has been measured. */\n  measured: boolean\n}\n\ntype ScrollAlign = \"auto\" | \"start\" | \"center\" | \"end\"\n\ntype VirtualListContextValue = {\n  count: number\n  items: VirtualItem[]\n  totalSize: number\n  /** First and last rendered index (overscan included), or null when empty. */\n  range: { start: number; end: number } | null\n  measure: (index: number, size: number) => void\n  scrollToIndex: (index: number, options?: { align?: ScrollAlign; behavior?: ScrollBehavior }) => void\n  scrollToOffset: (offset: number, behavior?: ScrollBehavior) => void\n  viewportRef: React.RefObject<HTMLDivElement | null>\n  getItemKey: (index: number) => React.Key\n}\n\nconst VirtualListContext = React.createContext<VirtualListContextValue | null>(null)\n\nfunction useVirtualList() {\n  const ctx = React.useContext(VirtualListContext)\n  if (!ctx) throw new Error(\"VirtualList parts must be used inside <VirtualList>\")\n  return ctx\n}\n\n/* -------------------------------- helpers -------------------------------- */\n\n/** Largest index whose start is <= offset. */\nfunction findIndex(starts: Float64Array, count: number, offset: number) {\n  let lo = 0\n  let hi = count - 1\n  while (lo < hi) {\n    const mid = (lo + hi + 1) >> 1\n    if (starts[mid] <= offset) lo = mid\n    else hi = mid - 1\n  }\n  return lo\n}\n\n/* ---------------------------------- root --------------------------------- */\n\ntype VirtualListProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  count: number\n  /** Row height before measurement (a number, or per index). */\n  estimateSize?: number | ((index: number) => number)\n  /** Rows rendered beyond the visible window on each side. */\n  overscan?: number\n  gap?: number\n  paddingStart?: number\n  paddingEnd?: number\n  getItemKey?: (index: number) => React.Key\n  /** Fires when the rendered window changes. */\n  onRangeChange?: (range: { start: number; end: number } | null) => void\n  children: React.ReactNode\n}\n\nfunction VirtualList({\n  count,\n  estimateSize = 36,\n  overscan = 6,\n  gap = 0,\n  paddingStart = 0,\n  paddingEnd = 0,\n  getItemKey = (index) => index,\n  onRangeChange,\n  className,\n  children,\n  ...props\n}: VirtualListProps) {\n  const viewportRef = React.useRef<HTMLDivElement | null>(null)\n  const sizes = React.useRef(new Map<number, number>())\n  const [version, setVersion] = React.useState(0)\n  const [scrollTop, setScrollTop] = React.useState(0)\n  const [viewportSize, setViewportSize] = React.useState(0)\n  const estimate = React.useCallback(\n    (index: number) => (typeof estimateSize === \"function\" ? estimateSize(index) : estimateSize),\n    [estimateSize]\n  )\n\n  // Prefix sums of row starts; recomputed when a measurement or the count changes.\n  const layout = React.useMemo(() => {\n    const starts = new Float64Array(count)\n    let offset = paddingStart\n    for (let i = 0; i < count; i++) {\n      starts[i] = offset\n      offset += (sizes.current.get(i) ?? estimate(i)) + (i < count - 1 ? gap : 0)\n    }\n    return { starts, totalSize: offset + paddingEnd }\n    // `version` is the measurement tick.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [count, estimate, gap, paddingStart, paddingEnd, version])\n\n  const range = React.useMemo(() => {\n    if (count === 0 || viewportSize === 0) return count === 0 ? null : { start: 0, end: Math.min(count - 1, overscan) }\n    const first = findIndex(layout.starts, count, scrollTop)\n    const last = findIndex(layout.starts, count, scrollTop + viewportSize)\n    return { start: Math.max(0, first - overscan), end: Math.min(count - 1, last + overscan) }\n  }, [count, viewportSize, scrollTop, layout, overscan])\n\n  const items = React.useMemo(() => {\n    if (!range) return []\n    const out: VirtualItem[] = []\n    for (let i = range.start; i <= range.end; i++) {\n      const measured = sizes.current.has(i)\n      const size = sizes.current.get(i) ?? estimate(i)\n      out.push({ index: i, key: getItemKey(i), start: layout.starts[i], size, end: layout.starts[i] + size, measured })\n    }\n    return out\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [range, layout, estimate, getItemKey, version])\n\n  const onRangeRef = React.useRef(onRangeChange)\n  onRangeRef.current = onRangeChange\n  const lastRange = React.useRef<string>(\"\")\n  React.useEffect(() => {\n    const key = range ? `${range.start}-${range.end}` : \"none\"\n    if (key === lastRange.current) return\n    lastRange.current = key\n    onRangeRef.current?.(range)\n  }, [range])\n\n  // Drop stale measurements when the list shrinks.\n  React.useEffect(() => {\n    let dirty = false\n    for (const index of sizes.current.keys()) {\n      if (index >= count) {\n        sizes.current.delete(index)\n        dirty = true\n      }\n    }\n    if (dirty) setVersion((v) => v + 1)\n  }, [count])\n\n  const measure = React.useCallback((index: number, size: number) => {\n    const prev = sizes.current.get(index)\n    if (prev !== undefined && Math.abs(prev - size) < 0.5) return\n    sizes.current.set(index, size)\n    setVersion((v) => v + 1)\n  }, [])\n\n  React.useLayoutEffect(() => {\n    const el = viewportRef.current\n    if (!el) return\n    const update = () => setViewportSize(el.clientHeight)\n    update()\n    const ro = new ResizeObserver(update)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const scrollToOffset = React.useCallback((offset: number, behavior: ScrollBehavior = \"auto\") => {\n    viewportRef.current?.scrollTo({ top: offset, behavior })\n  }, [])\n\n  const pending = React.useRef<{ index: number; align: ScrollAlign; tries: number } | null>(null)\n  const offsetFor = React.useCallback(\n    (index: number, align: ScrollAlign) => {\n      const el = viewportRef.current\n      if (!el) return 0\n      const start = layout.starts[index] ?? 0\n      const size = sizes.current.get(index) ?? estimate(index)\n      const height = el.clientHeight\n      let resolved = align\n      if (align === \"auto\") {\n        if (start < el.scrollTop) resolved = \"start\"\n        else if (start + size > el.scrollTop + height) resolved = \"end\"\n        else return el.scrollTop\n      }\n      if (resolved === \"start\") return start\n      if (resolved === \"end\") return start + size - height\n      return start + size / 2 - height / 2\n    },\n    [layout, estimate]\n  )\n\n  const scrollToIndex = React.useCallback(\n    (index: number, options?: { align?: ScrollAlign; behavior?: ScrollBehavior }) => {\n      const clamped = Math.max(0, Math.min(count - 1, index))\n      const align = options?.align ?? \"auto\"\n      pending.current = { index: clamped, align, tries: 0 }\n      scrollToOffset(offsetFor(clamped, align), options?.behavior)\n    },\n    [count, offsetFor, scrollToOffset]\n  )\n\n  // Estimated rows shift as they get measured: re-aim at the target a few times.\n  React.useLayoutEffect(() => {\n    const p = pending.current\n    const el = viewportRef.current\n    if (!p || !el) return\n    if (p.tries >= 4 || !sizes.current.has(p.index)) {\n      if (p.tries >= 4) pending.current = null\n      return\n    }\n    const target = offsetFor(p.index, p.align === \"auto\" ? \"start\" : p.align)\n    if (Math.abs(el.scrollTop - target) > 1) {\n      p.tries += 1\n      el.scrollTop = target\n    } else pending.current = null\n  })\n\n  const ctx: VirtualListContextValue = {\n    count,\n    items,\n    totalSize: layout.totalSize,\n    range,\n    measure,\n    scrollToIndex,\n    scrollToOffset,\n    viewportRef,\n    getItemKey,\n  }\n\n  return (\n    <VirtualListContext.Provider value={ctx}>\n      <VirtualListScroll onScroll={setScrollTop} />\n      <div data-slot=\"virtual-list\" className={cn(\"flex min-h-0 flex-col\", className)} {...props}>\n        {children}\n      </div>\n    </VirtualListContext.Provider>\n  )\n}\n\n/** Attaches the scroll listener once the viewport mounts (kept out of the root's render). */\nfunction VirtualListScroll({ onScroll }: { onScroll: (top: number) => void }) {\n  const ctx = useVirtualList()\n  React.useEffect(() => {\n    const el = ctx.viewportRef.current\n    if (!el) return\n    const handler = () => onScroll(el.scrollTop)\n    el.addEventListener(\"scroll\", handler, { passive: true })\n    return () => el.removeEventListener(\"scroll\", handler)\n  }, [ctx.viewportRef, onScroll])\n  return null\n}\n\n/* --------------------------------- parts --------------------------------- */\n\nfunction VirtualListViewport({ className, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useVirtualList()\n  return (\n    <div\n      ref={ctx.viewportRef}\n      data-slot=\"virtual-list-viewport\"\n      className={cn(\"relative min-h-0 overflow-y-auto overscroll-contain\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Sized to the whole list so the scrollbar is right; rows position inside it. */\nfunction VirtualListContent({ className, style, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useVirtualList()\n  return (\n    <div\n      data-slot=\"virtual-list-content\"\n      className={cn(\"relative w-full\", className)}\n      style={{ height: ctx.totalSize, ...style }}\n      {...props}\n    />\n  )\n}\n\n/** Renders the visible window. The child renders one row and must return a `VirtualListItem`. */\nfunction VirtualListItems({ children }: { children: (item: VirtualItem) => React.ReactNode }) {\n  const ctx = useVirtualList()\n  return (\n    <>\n      {ctx.items.map((item) => (\n        <React.Fragment key={item.key}>{children(item)}</React.Fragment>\n      ))}\n    </>\n  )\n}\n\nfunction VirtualListItem({ index, className, style, ...props }: React.ComponentProps<\"div\"> & { index: number }) {\n  const { items, measure } = useVirtualList()\n  const item = items.find((i) => i.index === index)\n  const ref = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (!el) return\n      const run = () => measure(index, el.getBoundingClientRect().height)\n      run()\n      const ro = new ResizeObserver(run)\n      ro.observe(el)\n      // React 19 ref cleanup\n      return () => ro.disconnect()\n    },\n    [measure, index]\n  )\n  return (\n    <div\n      ref={ref}\n      data-slot=\"virtual-list-item\"\n      data-index={index}\n      className={cn(\"absolute inset-x-0 top-0\", className)}\n      style={{ transform: `translateY(${item?.start ?? 0}px)`, ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction VirtualListEmpty({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  const ctx = useVirtualList()\n  if (ctx.count > 0) return null\n  return (\n    <div\n      data-slot=\"virtual-list-empty\"\n      className={cn(\"flex flex-1 items-center justify-center py-8 text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"Nothing to show\"}\n    </div>\n  )\n}\n\nexport {\n  VirtualList,\n  VirtualListContent,\n  VirtualListEmpty,\n  VirtualListItem,\n  VirtualListItems,\n  VirtualListViewport,\n  useVirtualList,\n  type VirtualItem,\n  type VirtualListProps,\n}\n"
+    }
+  ],
+  "docs": "## Virtual list\n`src/components/ui/virtual-list.tsx` is a dependency-free windowed list. `VirtualList { count,\nestimateSize (number or per index), overscan, gap, paddingStart/End, getItemKey, onRangeChange }`\nowns scroll offset, viewport size, and measured row heights (prefix sums + binary search; rows\nmeasure themselves with a ResizeObserver and estimates are replaced as rows appear). Parts:\n`VirtualListViewport` (the scroll container; **the consumer gives it a height**, it must never be\n`flex-1` in an auto-height column or it grows to the whole content and renders every row) >\n`VirtualListContent` (sized to `totalSize`) > `VirtualListItems` (render-prop child gets\n`{ index, key, start, size, measured }` and returns a `VirtualListItem index=`, absolutely\npositioned via translateY, `data-index`), `VirtualListEmpty`. `useVirtualList()` exposes `items`,\n`range`, `totalSize`, `scrollToIndex(index, { align: auto|start|center|end })` (re-aims a few times\nwhile estimated rows get measured) and `scrollToOffset`. Keyboard is the consumer's: keep focus on\nthe viewport with `aria-activedescendant` and call `scrollToIndex` for the active row, as the\ncontacts listbox in `src/demo/virtual-list/` does (`/audit-log`, \"Audit log\": a 100k-line log with mixed\nheights and go-to-line, and a 10k-contact listbox with search)."
+}

package/src/components/ui/accordion.tsx

@@ -0,0 +1,111 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Accordion as AccordionPrimitive } from "@ark-ui/react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({
+  className,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionContext({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Context>) {
+  return <AccordionPrimitive.Context {...props} />
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item data-slot="accordion-item" className={cn("not-last:border-b", className)} {...props} />
+  )
+}
+
+function AccordionItemContext({ ...props }: React.ComponentProps<typeof AccordionPrimitive.ItemContext>) {
+  return <AccordionPrimitive.ItemContext {...props} />
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.ItemTrigger>) {
+  return (
+    <AccordionPrimitive.ItemTrigger
+      data-slot="accordion-trigger"
+      className={cn(
+        "group/accordion-trigger relative flex w-full flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        data-slot="accordion-trigger-icon"
+        className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+      />
+      <ChevronUpIcon
+        data-slot="accordion-trigger-icon"
+        className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+      />
+    </AccordionPrimitive.ItemTrigger>
+  )
+}
+
+function AccordionItemIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.ItemIndicator>) {
+  return (
+    <AccordionPrimitive.ItemIndicator
+      data-slot="accordion-item-indicator"
+      className={cn(
+        "ml-auto size-4 shrink-0 text-muted-foreground transition-transform data-open:rotate-180",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.ItemContent>) {
+  return (
+    <AccordionPrimitive.ItemContent
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm [--accordion-panel-height:var(--height)] data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.ItemContent>
+  )
+}
+
+export {
+  Accordion,
+  AccordionContent,
+  AccordionContext,
+  AccordionItem,
+  AccordionItemContext,
+  AccordionItemIndicator,
+  AccordionTrigger,
+}

package/src/components/ui/activity-feed.tsx

@@ -0,0 +1,228 @@
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { formatRelativeTime } from "@/lib/time"
+import { cn } from "@/lib/utils"
+
+/**
+ * ActivityFeed — a compositional, data-agnostic timeline of events. The
+ * consumer maps its events to items; the feed adds the connector line, the
+ * marker column, relative times and the WAI-ARIA feed pattern (articles are
+ * focusable; PageUp/PageDown move between them, Ctrl+Home/End jump).
+ *
+ * Anatomy:
+ *   ActivityFeed
+ *     ActivityFeedGroup > ActivityFeedGroupLabel + ActivityFeedItems
+ *       ActivityFeedItem value=…
+ *         ActivityFeedItemMarker        dot / icon / avatar on the line
+ *         ActivityFeedItemContent
+ *           ActivityFeedItemHeader > ActivityFeedItemActor … ActivityFeedItemTime date=…
+ *           ActivityFeedItemBody
+ *           ActivityFeedItemActions
+ *     ActivityFeedLoadMoreTrigger / ActivityFeedEmpty
+ */
+
+function ActivityFeed({ className, busy, onKeyDown, ...props }: React.ComponentProps<"div"> & { busy?: boolean }) {
+  const ref = React.useRef<HTMLDivElement>(null)
+  return (
+    <div
+      ref={ref}
+      data-slot="activity-feed"
+      role="feed"
+      aria-busy={busy || undefined}
+      className={cn("flex flex-col gap-6", className)}
+      onKeyDown={(event) => {
+        onKeyDown?.(event)
+        if (event.defaultPrevented) return
+        const articles = Array.from(ref.current?.querySelectorAll<HTMLElement>("[data-slot=activity-feed-item]") ?? [])
+        const current = (event.target as HTMLElement).closest<HTMLElement>("[data-slot=activity-feed-item]")
+        const index = current ? articles.indexOf(current) : -1
+        const meta = event.metaKey || event.ctrlKey
+        let next: number | null = null
+        if (event.key === "PageDown") next = Math.min(articles.length - 1, index + 1)
+        else if (event.key === "PageUp") next = Math.max(0, index - 1)
+        else if (event.key === "Home" && meta) next = 0
+        else if (event.key === "End" && meta) next = articles.length - 1
+        if (next === null || !articles[next]) return
+        event.preventDefault()
+        articles[next].focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedGroup({ className, ...props }: React.ComponentProps<"section">) {
+  return <section data-slot="activity-feed-group" className={cn("flex flex-col gap-3", className)} {...props} />
+}
+
+function ActivityFeedGroupLabel({ className, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="activity-feed-group-label"
+      className={cn("text-xs font-medium tracking-wide text-muted-foreground uppercase", className)}
+      {...props}
+    />
+  )
+}
+
+/** The list; draws the vertical connector behind the markers. */
+function ActivityFeedItems({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="activity-feed-items"
+      className={cn(
+        "relative flex flex-col gap-5 before:absolute before:inset-y-2 before:inset-s-4 before:w-px before:-translate-x-1/2 before:bg-border",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedItem({ value, className, ...props }: React.ComponentProps<"li"> & { value: string }) {
+  return (
+    <li
+      data-slot="activity-feed-item"
+      data-value={value}
+      role="article"
+      tabIndex={0}
+      className={cn(
+        "group/activity relative flex gap-3 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Sits on the line: pass an icon, an Avatar, or nothing for a dot. */
+function ActivityFeedItemMarker({ className, children, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-item-marker"
+      className={cn(
+        "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full bg-background ring-4 ring-background",
+        "[&>svg]:size-4 [&>svg]:text-muted-foreground",
+        !children && "after:size-2 after:rounded-full after:bg-muted-foreground/60",
+        children && "border bg-muted",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+function ActivityFeedItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-item-content"
+      className={cn("flex min-w-0 flex-1 flex-col gap-1.5 pt-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-item-header"
+      className={cn("flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedItemActor({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span data-slot="activity-feed-item-actor" className={cn("font-medium text-foreground", className)} {...props} />
+  )
+}
+
+/** `<time>` with a relative label by default; the full date is in the title. */
+function ActivityFeedItemTime({
+  date,
+  now,
+  className,
+  children,
+  ...props
+}: Omit<React.ComponentProps<"time">, "dateTime"> & { date: Date; now?: Date }) {
+  return (
+    <time
+      data-slot="activity-feed-item-time"
+      dateTime={date.toISOString()}
+      title={date.toLocaleString()}
+      className={cn("text-xs whitespace-nowrap text-muted-foreground/80", className)}
+      {...props}
+    >
+      {children ?? formatRelativeTime(date, { now })}
+    </time>
+  )
+}
+
+/** Optional detail block: a quote, a diff, a preview card. */
+function ActivityFeedItemBody({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-item-body"
+      className={cn("rounded-lg border bg-muted/40 px-3 py-2 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-item-actions"
+      className={cn("flex items-center gap-1 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function ActivityFeedLoadMoreTrigger({ asChild, children, className, ...props }: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="activity-feed-load-more-trigger"
+      variant="outline"
+      size="sm"
+      asChild={asChild}
+      className={cn("self-center", className)}
+      {...props}
+    >
+      {asChild ? children : (children ?? "Load older activity")}
+    </Button>
+  )
+}
+
+function ActivityFeedEmpty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="activity-feed-empty"
+      className={cn(
+        "flex h-32 flex-col items-center justify-center gap-1 rounded-lg border border-dashed text-sm text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ActivityFeed,
+  ActivityFeedGroup,
+  ActivityFeedGroupLabel,
+  ActivityFeedItems,
+  ActivityFeedItem,
+  ActivityFeedItemMarker,
+  ActivityFeedItemContent,
+  ActivityFeedItemHeader,
+  ActivityFeedItemActor,
+  ActivityFeedItemTime,
+  ActivityFeedItemBody,
+  ActivityFeedItemActions,
+  ActivityFeedLoadMoreTrigger,
+  ActivityFeedEmpty,
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,204 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Dialog as AlertDialogPrimitive, Portal as PortalPrimitive } from "@ark-ui/react"
+
+import { Button } from "@/components/ui/button"
+
+function getDefaultInitialFocusEl() {
+  return document.querySelector<HTMLElement>(
+    '[data-slot="alert-dialog-content"][data-state="open"] [data-slot="alert-dialog-cancel"]'
+  )
+}
+
+function AlertDialog({
+  role = "alertdialog",
+  closeOnInteractOutside = false,
+  initialFocusEl = getDefaultInitialFocusEl,
+  lazyMount = true,
+  unmountOnExit = true,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return (
+    <AlertDialogPrimitive.Root
+      role={role}
+      closeOnInteractOutside={closeOnInteractOutside}
+      initialFocusEl={initialFocusEl}
+      lazyMount={lazyMount}
+      unmountOnExit={unmountOnExit}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof PortalPrimitive>) {
+  return <PortalPrimitive {...props} />
+}
+
+function AlertDialogContext({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Context>) {
+  return <AlertDialogPrimitive.Context {...props} />
+}
+
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogPositioner({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Positioner>) {
+  return (
+    <AlertDialogPrimitive.Positioner
+      data-slot="alert-dialog-positioner"
+      className={cn("fixed inset-0 z-50 flex items-center justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPositioner>
+        <AlertDialogPrimitive.Content
+          data-slot="alert-dialog-content"
+          data-size={size}
+          className={cn(
+            "group/alert-dialog-content relative grid w-full gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </AlertDialogPositioner>
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.CloseTrigger data-slot="alert-dialog-action" className={cn(className)} {...props} />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.CloseTrigger> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.CloseTrigger data-slot="alert-dialog-cancel" className={cn(className)} {...props} />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogContext,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogPositioner,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }