@kinetixui/ui 0.11.0 → 0.12.0

package/src/components/markdown-editor.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import * as React from "react";
+import { Bold, Code, Eye, EyeOff, Heading2, Italic, Link as LinkIcon, List, ListOrdered, Quote } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Textarea } from "./textarea";
+
+export interface MarkdownEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows?: number;
+}
+
+function wrapSelection(text: string, start: number, end: number, before: string, after: string, placeholder: string) {
+  const selected = text.slice(start, end) || placeholder;
+  const next = text.slice(0, start) + before + selected + after + text.slice(end);
+  return { text: next, selectionStart: start + before.length, selectionEnd: start + before.length + selected.length };
+}
+
+function prefixLines(text: string, start: number, end: number, prefix: (lineIndex: number) => string) {
+  const lineStart = text.lastIndexOf("\n", Math.max(start - 1, 0)) + 1;
+  let lineEnd = text.indexOf("\n", Math.max(end, lineStart));
+  if (lineEnd === -1) lineEnd = text.length;
+  const block = text.slice(lineStart, lineEnd);
+  const lines = block.split("\n");
+  const prefixed = lines.map((line, i) => prefix(i) + line).join("\n");
+  return {
+    text: text.slice(0, lineStart) + prefixed + text.slice(lineEnd),
+    selectionStart: start + prefix(0).length,
+    selectionEnd: end + (prefixed.length - block.length),
+  };
+}
+
+/** HTML-escapes source text before any markup is inserted — see the render call below. */
+function escapeHtml(s: string) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function renderInline(escaped: string): string {
+  return escaped
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/\*([^*]+)\*/g, "<em>$1</em>")
+    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label: string, url: string) => {
+      const safe = /^(https?:|mailto:|\/|#)/i.test(url.trim());
+      return safe ? `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>` : match;
+    });
+}
+
+/**
+ * A small hand-rolled Markdown → HTML renderer covering exactly the syntax
+ * the toolbar below produces (headings, bold, italic, links, inline/block
+ * code, bullet/numbered lists, blockquotes, paragraphs) — not a full
+ * CommonMark implementation. Kept dependency-free and simple enough to
+ * port identically to Compose/SwiftUI/Flutter, the same reasoning as
+ * `DiffViewer`'s hand-rolled LCS diff.
+ */
+
+/**
+ * Matches `markerRe` at the start of `line`, then requires at least one
+ * space/tab before returning the rest as `content`. Deliberately not a
+ * single `markerRe` + `\s+(.*)$` regex: two adjacent unbounded quantifiers
+ * over overlapping character classes (`\s` and `.` both match a space) is
+ * a catastrophic-backtracking shape CodeQL flags as a ReDoS — walking the
+ * whitespace run by hand is linear and can't backtrack.
+ */
+function matchMarker(line: string, markerRe: RegExp): { marker: string; content: string } | null {
+  const m = markerRe.exec(line);
+  if (!m) return null;
+  let i = m[0].length;
+  if (line[i] !== " " && line[i] !== "\t") return null;
+  while (line[i] === " " || line[i] === "\t") i++;
+  return { marker: m[0], content: line.slice(i) };
+}
+
+function renderMarkdown(source: string): string {
+  const lines = source.split("\n");
+  const out: string[] = [];
+  let inCode = false;
+  let codeLines: string[] = [];
+  let listType: "ul" | "ol" | null = null;
+
+  const closeList = () => {
+    if (listType) {
+      out.push(`</${listType}>`);
+      listType = null;
+    }
+  };
+
+  for (const line of lines) {
+    if (line.trim().startsWith("```")) {
+      if (inCode) {
+        out.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+        codeLines = [];
+        inCode = false;
+      } else {
+        closeList();
+        inCode = true;
+      }
+      continue;
+    }
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+
+    const heading = matchMarker(line, /^#{1,6}/);
+    if (heading) {
+      closeList();
+      const level = heading.marker.length;
+      out.push(`<h${level}>${renderInline(escapeHtml(heading.content))}</h${level}>`);
+      continue;
+    }
+
+    const quote = line.match(/^>\s?(.*)$/);
+    if (quote) {
+      closeList();
+      out.push(`<blockquote>${renderInline(escapeHtml(quote[1]!))}</blockquote>`);
+      continue;
+    }
+
+    const bullet = matchMarker(line, /^[-*]/);
+    if (bullet) {
+      if (listType !== "ul") {
+        closeList();
+        out.push("<ul>");
+        listType = "ul";
+      }
+      out.push(`<li>${renderInline(escapeHtml(bullet.content))}</li>`);
+      continue;
+    }
+
+    const numbered = matchMarker(line, /^\d+\./);
+    if (numbered) {
+      if (listType !== "ol") {
+        closeList();
+        out.push("<ol>");
+        listType = "ol";
+      }
+      out.push(`<li>${renderInline(escapeHtml(numbered.content))}</li>`);
+      continue;
+    }
+
+    closeList();
+    if (line.trim() === "") continue;
+    out.push(`<p>${renderInline(escapeHtml(line))}</p>`);
+  }
+  closeList();
+  if (inCode) out.push(`<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre>`);
+
+  return out.join("\n");
+}
+
+/**
+ * MarkdownEditor — toolbar + a plain `Textarea` (the markdown source) with
+ * an optional rendered preview pane. Deliberately *not* `contenteditable`
+ * (no Tiptap/Lexical): `contenteditable` has no native-platform analogue,
+ * so a WYSIWYG rich-text editor would be a web-only, eighth standing
+ * non-port. A markdown textarea is just a text buffer the toolbar inserts
+ * syntax into — SwiftUI's `TextEditor`, Compose's `BasicTextField`, and
+ * Flutter's `TextField` all support the same selection-based insertion, so
+ * this ports cleanly to all four platforms instead.
+ */
+const MarkdownEditor = React.forwardRef<HTMLDivElement, MarkdownEditorProps>(
+  ({ value, onChange, placeholder, rows = 10, className, ...props }, ref) => {
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+    const [showPreview, setShowPreview] = React.useState(false);
+    const pendingSelection = React.useRef<{ start: number; end: number } | null>(null);
+
+    React.useEffect(() => {
+      if (pendingSelection.current && textareaRef.current) {
+        const { start, end } = pendingSelection.current;
+        textareaRef.current.focus();
+        textareaRef.current.setSelectionRange(start, end);
+        pendingSelection.current = null;
+      }
+    }, [value]);
+
+    const applyInline = (before: string, after: string, placeholder: string) => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const result = wrapSelection(value, el.selectionStart, el.selectionEnd, before, after, placeholder);
+      pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
+      onChange(result.text);
+    };
+
+    const applyLinePrefix = (prefix: (lineIndex: number) => string) => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const result = prefixLines(value, el.selectionStart, el.selectionEnd, prefix);
+      pendingSelection.current = { start: result.selectionStart, end: result.selectionEnd };
+      onChange(result.text);
+    };
+
+    return (
+      <div ref={ref} className={cn("overflow-hidden rounded-md border font-sans", className)} {...props}>
+        <div role="toolbar" aria-label="Formatting" className="flex items-center gap-0.5 border-b bg-muted/40 p-1">
+          <ToolbarButton label="Bold" onClick={() => applyInline("**", "**", "bold text")}>
+            <Bold className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Italic" onClick={() => applyInline("*", "*", "italic text")}>
+            <Italic className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Heading" onClick={() => applyLinePrefix(() => "## ")}>
+            <Heading2 className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Link" onClick={() => applyInline("[", "](https://)", "link text")}>
+            <LinkIcon className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Bulleted list" onClick={() => applyLinePrefix(() => "- ")}>
+            <List className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Numbered list" onClick={() => applyLinePrefix((i) => `${i + 1}. `)}>
+            <ListOrdered className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Code" onClick={() => applyInline("`", "`", "code")}>
+            <Code className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton label="Quote" onClick={() => applyLinePrefix(() => "> ")}>
+            <Quote className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            label={showPreview ? "Hide preview" : "Show preview"}
+            onClick={() => setShowPreview((v) => !v)}
+            active={showPreview}
+            className="ml-auto"
+          >
+            {showPreview ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </ToolbarButton>
+        </div>
+        <div className={cn("grid", showPreview && "grid-cols-2 divide-x")}>
+          <Textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            rows={rows}
+            className="resize-none rounded-none border-0 font-mono text-[13px] focus-visible:border-transparent focus-visible:shadow-none"
+          />
+          {showPreview && (
+            <div
+              className="overflow-auto p-3 text-sm [&_a]:text-primary [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground [&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em] [&_h1]:text-xl [&_h1]:font-semibold [&_h2]:text-lg [&_h2]:font-semibold [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_p]:mb-2 [&_pre]:overflow-auto [&_pre]:rounded-sm [&_pre]:bg-muted [&_pre]:p-2 [&_ul]:list-disc"
+              // Rendered from renderMarkdown above, which HTML-escapes all
+              // source text before inserting any markup — safe from
+              // injection, same trust boundary as any other self-generated
+              // innerHTML (not raw user HTML).
+              dangerouslySetInnerHTML={{ __html: renderMarkdown(value) }}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+MarkdownEditor.displayName = "MarkdownEditor";
+
+function ToolbarButton({
+  label,
+  onClick,
+  active,
+  className,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  active?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      aria-pressed={active}
+      className={cn(
+        "inline-flex size-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground",
+        active && "bg-accent text-foreground",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+
+export { MarkdownEditor };

package/src/components/message-bubble.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React from "react";
+import { Check, CheckCheck } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * MessageBubble — a sent/received chat bubble with grouping, timestamp,
+ * and a status tick. `grouped` is a lightweight consecutive-run cue
+ * (reduces the outer top corner's radius, the side that would otherwise
+ * repeat the previous bubble's rounding) rather than full first/middle/
+ * last position tracking — the caller already knows which messages are
+ * consecutive, so it stays a single boolean rather than the component
+ * inferring group position itself. Gap-fill addition (not in the
+ * original Figma source), the last pick from the `COMPONENT-ADDITIONS.md`
+ * Tier 2 backlog.
+ */
+export interface MessageBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "sent" | "received";
+  timestamp?: React.ReactNode;
+  status?: "sent" | "delivered" | "read";
+  /** part of a consecutive run of bubbles from the same sender */
+  grouped?: boolean;
+  avatar?: React.ReactNode;
+}
+
+const MessageBubble = React.forwardRef<HTMLDivElement, MessageBubbleProps>(
+  ({ className, variant = "received", timestamp, status, grouped = false, avatar, children, ...props }, ref) => {
+    const sent = variant === "sent";
+    return (
+      <div ref={ref} className={cn("flex items-end gap-2 font-sans", sent && "flex-row-reverse", className)} {...props}>
+        {avatar && !sent && <div className="shrink-0 self-end">{avatar}</div>}
+        <div className={cn("flex max-w-[75%] flex-col gap-1", sent ? "items-end" : "items-start")}>
+          <div
+            className={cn(
+              "min-w-0 rounded-2xl px-3.5 py-2 text-body-sm",
+              sent ? "bg-primary text-primary-foreground" : "bg-muted text-foreground",
+              sent && grouped && "rounded-tr-md",
+              !sent && grouped && "rounded-tl-md",
+            )}
+          >
+            {children}
+          </div>
+          {(timestamp || (sent && status)) && (
+            <div className="flex items-center gap-1 px-1 text-label-sm text-muted-foreground">
+              {timestamp}
+              {sent && status && (
+                <span className={cn(status === "read" && "text-primary")}>
+                  {status === "sent" ? <Check className="size-3.5" /> : <CheckCheck className="size-3.5" />}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+MessageBubble.displayName = "MessageBubble";
+
+const TypingIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="status"
+      aria-label="Typing"
+      className={cn("flex w-fit items-center gap-1 rounded-2xl bg-muted px-3.5 py-2.5", className)}
+      {...props}
+    >
+      {[0, 1, 2].map((i) => (
+        <span
+          key={i}
+          aria-hidden
+          className="size-1.5 animate-typing-dot rounded-full bg-muted-foreground"
+          style={{ animationDelay: `${i * 150}ms` }}
+        />
+      ))}
+    </div>
+  ),
+);
+TypingIndicator.displayName = "TypingIndicator";
+
+export { MessageBubble, TypingIndicator };

package/src/components/multi-select.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover";
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./command";
+import { Tag } from "./tag";
+import { cn } from "../lib/utils";
+
+/**
+ * MultiSelect — a `Combobox` that keeps multiple chips; a free-entry
+ * token field with `creatable`. `Combobox` (the existing Popover +
+ * Command recipe) is single-value and `Tag` is display-only, so this
+ * composes both into an actual shippable component rather than another
+ * "recipe" doc page. The trigger is `role="combobox"` on a plain `div`,
+ * not a `<button>` — `Tag`'s own remove control is a real `<button>`,
+ * and a `<button>` can't nest inside a `<button>` (invalid HTML); using
+ * `PopoverAnchor` + manual open-state instead of `PopoverTrigger` avoids
+ * that while keeping the whole thing keyboard-operable. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: MultiSelectOption[];
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  placeholder?: string;
+  /** allow adding free-entry tags that aren't in `options` */
+  creatable?: boolean;
+}
+
+const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
+  (
+    { className, options, value, defaultValue = [], onValueChange, placeholder = "Select…", creatable = false, ...props },
+    ref,
+  ) => {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+
+    const set = (next: string[]) => {
+      setInternal(next);
+      onValueChange?.(next);
+    };
+    const toggle = (v: string) => set(current.includes(v) ? current.filter((x) => x !== v) : [...current, v]);
+    const remove = (v: string) => set(current.filter((x) => x !== v));
+    const labelFor = (v: string) => options.find((o) => o.value === v)?.label ?? v;
+
+    const trimmed = query.trim();
+    const canCreate = creatable && trimmed.length > 0 && !options.some((o) => o.label.toLowerCase() === trimmed.toLowerCase());
+    const visibleOptions = creatable
+      ? options.filter((o) => o.label.toLowerCase().includes(trimmed.toLowerCase()))
+      : options;
+
+    return (
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverAnchor asChild>
+          <div
+            ref={ref}
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            tabIndex={0}
+            onClick={() => setOpen(true)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setOpen(true);
+              }
+            }}
+            className={cn(
+              "flex min-h-11 w-full flex-wrap items-center gap-1.5 border border-input bg-background px-3 py-2 font-sans",
+              "outline-none focus-visible:border-primary focus-visible:shadow-focus",
+              "aria-expanded:border-primary aria-expanded:shadow-focus",
+              className,
+            )}
+            {...props}
+          >
+            {current.length === 0 && <span className="text-body-sm text-muted-foreground">{placeholder}</span>}
+            {current.map((v) => (
+              <Tag key={v} variant="secondary" onRemove={() => remove(v)} onClick={(e) => e.stopPropagation()}>
+                {labelFor(v)}
+              </Tag>
+            ))}
+          </div>
+        </PopoverAnchor>
+        <PopoverContent
+          align="start"
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <Command shouldFilter={!creatable}>
+            <CommandInput placeholder="Search…" value={query} onValueChange={setQuery} />
+            <CommandList>
+              <CommandEmpty>
+                {canCreate ? (
+                  <button
+                    type="button"
+                    className="flex w-full items-center px-2 py-1.5 text-left text-body-sm text-foreground hover:bg-accent"
+                    onClick={() => {
+                      toggle(trimmed);
+                      setQuery("");
+                    }}
+                  >
+                    Create “{trimmed}”
+                  </button>
+                ) : (
+                  "No results."
+                )}
+              </CommandEmpty>
+              <CommandGroup>
+                {visibleOptions.map((option) => (
+                  <CommandItem key={option.value} value={option.label} onSelect={() => toggle(option.value)}>
+                    <Check className={cn("size-4", current.includes(option.value) ? "opacity-100" : "opacity-0")} />
+                    {option.label}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+MultiSelect.displayName = "MultiSelect";
+
+export { MultiSelect };

package/src/components/notification-center.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { Bell } from "lucide-react";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+
+/**
+ * NotificationCenter — a bell trigger opening a popover list of
+ * read/unread items with a "mark all read" action. Composed directly
+ * from `Popover` (re-exported as the root — no new open-state logic)
+ * and `Button`; `NotificationItem` follows `ListItem`'s interactive-row
+ * convention. `unreadCount`/`unread`/`onMarkAllRead` are plain props —
+ * the read-state itself stays the caller's, same as every other
+ * controlled/stateless component in this library. Gap-fill addition
+ * (not in the original Figma source).
+ */
+const NotificationCenter = Popover;
+
+export interface NotificationCenterTriggerProps extends React.ComponentPropsWithoutRef<typeof Button> {
+  unreadCount?: number;
+}
+
+const NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(
+  ({ className, unreadCount = 0, children, ...props }, ref) => (
+    <PopoverTrigger asChild>
+      <Button
+        ref={ref}
+        variant="Ghost"
+        size="icon"
+        aria-label={unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"}
+        className={cn("relative", className)}
+        {...props}
+      >
+        {children ?? <Bell className="size-5" />}
+        {unreadCount > 0 && (
+          <span className="absolute right-1.5 top-1.5 flex size-2 rounded-full bg-destructive ring-2 ring-background" />
+        )}
+      </Button>
+    </PopoverTrigger>
+  ),
+);
+NotificationCenterTrigger.displayName = "NotificationCenterTrigger";
+
+export interface NotificationCenterContentProps extends React.ComponentPropsWithoutRef<typeof PopoverContent> {
+  onMarkAllRead?: () => void;
+}
+
+const NotificationCenterContent = React.forwardRef<HTMLDivElement, NotificationCenterContentProps>(
+  ({ className, onMarkAllRead, children, align = "end", ...props }, ref) => (
+    <PopoverContent ref={ref} align={align} className={cn("w-80 p-0", className)} {...props}>
+      <div className="flex items-center justify-between border-b border-border px-4 py-3">
+        <p className="text-title-sm font-medium text-foreground">Notifications</p>
+        {onMarkAllRead && (
+          <button
+            type="button"
+            onClick={onMarkAllRead}
+            className="text-label-md font-medium text-primary outline-none hover:underline focus-visible:underline"
+          >
+            Mark all read
+          </button>
+        )}
+      </div>
+      <div className="flex max-h-80 flex-col divide-y divide-border overflow-y-auto">{children}</div>
+    </PopoverContent>
+  ),
+);
+NotificationCenterContent.displayName = "NotificationCenterContent";
+
+export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  time?: React.ReactNode;
+  unread?: boolean;
+  onSelect?: () => void;
+}
+
+const NotificationItem = React.forwardRef<HTMLDivElement, NotificationItemProps>(
+  ({ className, title, description, time, unread, onSelect, ...props }, ref) => {
+    const interactive = !!onSelect;
+    return (
+      <div
+        ref={ref}
+        role={interactive ? "button" : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        onClick={onSelect}
+        onKeyDown={
+          interactive
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelect?.();
+                }
+              }
+            : undefined
+        }
+        className={cn(
+          "flex items-start gap-3 px-4 py-3 font-sans outline-none",
+          interactive && "cursor-pointer hover:bg-accent focus-visible:bg-accent",
+          className,
+        )}
+        {...props}
+      >
+        <span className={cn("mt-1.5 size-2 shrink-0 rounded-full", unread ? "bg-primary" : "bg-transparent")} />
+        <div className="min-w-0 flex-1">
+          <p className={cn("truncate text-body-sm", unread ? "font-medium text-foreground" : "text-muted-foreground")}>
+            {title}
+          </p>
+          {description && <p className="truncate text-body-sm text-muted-foreground">{description}</p>}
+          {time && <p className="mt-0.5 text-label-sm text-muted-foreground">{time}</p>}
+        </div>
+      </div>
+    );
+  },
+);
+NotificationItem.displayName = "NotificationItem";
+
+export { NotificationCenter, NotificationCenterTrigger, NotificationCenterContent, NotificationItem };