xertica-ui 2.0.4 → 2.0.6

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.0.3-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.0.6-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---
@@ -14,7 +14,8 @@ Xertica UI is specifically designed to be consumed by AI Agents (LLMs, code assi
 | File | Purpose |
 |---|---|
 | [`llms.txt`](./llms.txt) | Standard index for AI crawlers and context-aware agents. |
-| [`llms-full.txt`](./llms-full.txt) | **Complete documentation** of all 96 components in a single file for large-context LLMs. |
+| [`llms-compact.txt`](./llms-compact.txt) | **Compact documentation** of all components in a single file for LLMs with limited context. |
+| [`llms-full.txt`](./llms-full.txt) | **Complete documentation** of all components in a single file for LLMs with large-context. |
 | `docs/llms.md` | Master index for agents to navigate the documentation folder. |
 
 ---
@@ -31,6 +32,8 @@ npm run dev
 
 The CLI scaffolds a complete Vite + React + TypeScript project with Portuguese UI localization and English AI-ready documentation.
 
+> **Note:** Always use `@latest` with npx. Without it, npx may execute a locally cached older version instead of fetching the latest from the registry.
+
 ---
 
 ## 📦 Installation as a Library
@@ -47,10 +50,24 @@ npm install xertica-ui
 import 'xertica-ui/style.css';
 ```
 
-**2. Wrap your app** with `XerticaProvider`:
-
-```tsx
-import { XerticaProvider } from 'xertica-ui/brand';
+**2. Import components from the matching subpath**:
+
+```tsx
+import { Button, Card } from 'xertica-ui/ui';
+
+export function Example() {
+  return (
+    <Card className="p-4">
+      <Button>Continue</Button>
+    </Card>
+  );
+}
+```
+
+**3. Optionally wrap your app** with `XerticaProvider` when you want coordinated theme, layout, assistant, maps, tooltip, API-key, and toast services:
+
+```tsx
+import { XerticaProvider } from 'xertica-ui/brand';
 
 function App() {
   return (
@@ -70,16 +87,24 @@ Xertica UI v2 exposes **granular subpath entries** — import only what your lay
 ```tsx
 import { Button, Card, Input }       from 'xertica-ui/ui';        // shared/ui — primitives
 import { Sidebar, Header }           from 'xertica-ui/layout';    // layout shell
-import { XerticaProvider }           from 'xertica-ui/brand';     // app-level — providers & brand
-import { XerticaAssistant }          from 'xertica-ui/assistant'; // feature — AI assistant
-import { VideoPlayer, AudioPlayer }  from 'xertica-ui/media';     // feature — media players
-import { useLayout, useTheme }       from 'xertica-ui/hooks';     // shared/lib — hooks & contexts
-import 'xertica-ui/style.css';                                     // styles — import once at root
-```
-
-The root `from 'xertica-ui'` barrel remains available for full backward compatibility.
-
-> **TypeScript**: requires `"moduleResolution": "bundler"` (or `"node16"` / `"nodenext"`) in `tsconfig.json` to resolve subpath exports.
+import { XerticaProvider }           from 'xertica-ui/brand';     // app-level — providers & brand
+import { XerticaAssistant }          from 'xertica-ui/assistant'; // feature — AI assistant
+import { VideoPlayer, AudioPlayer }  from 'xertica-ui/media';     // feature — media players
+import { useLayout, useOptionalLayout, useTheme } from 'xertica-ui/hooks'; // shared/lib — hooks & contexts
+import 'xertica-ui/style.css';                                     // styles — import once at root
+```
+
+The root `from 'xertica-ui'` barrel remains available for full backward compatibility.
+
+> **TypeScript**: requires `"moduleResolution": "bundler"` (or `"node16"` / `"nodenext"`) in `tsconfig.json` to resolve subpath exports.
+
+### Component Independence Contract
+
+`xertica-ui/style.css` is the only required global import. Public components are designed to render independently whenever possible, so importing one component into a consumer project should also bring the runtime logic that component needs.
+
+`XerticaProvider` remains the recommended app-level convenience wrapper, but it is not required for most primitives. It composes the library providers for theme, brand colors, language, layout, assistant state, API keys, Google Maps, tooltips, and toasts.
+
+Components with unavoidable external configuration, such as Google Maps, should render a configuration or error state instead of crashing the app.
 
 ---
 
@@ -108,13 +133,22 @@ export function MyPage() {
 }
 ```
 
-### `useLayout()` Hook
-Access the sidebar state, width, and toggle functions anywhere in the component tree:
-```tsx
-import { useLayout } from 'xertica-ui/hooks';
-
-const { sidebarWidth, isSidebarOpen, toggleSidebar } = useLayout();
-```
+### `useLayout()` Hook
+Access the sidebar state, width, and toggle functions anywhere in the component tree:
+```tsx
+import { useLayout } from 'xertica-ui/hooks';
+
+const { sidebarWidth, isSidebarOpen, toggleSidebar } = useLayout();
+```
+
+Use `useLayout()` when a page must fail early without a layout provider. Use `useOptionalLayout()` inside reusable components that should still render with internal fallbacks when imported in isolation.
+
+```tsx
+import { useOptionalLayout } from 'xertica-ui/hooks';
+
+const layout = useOptionalLayout();
+const sidebarWidth = layout?.sidebarWidth ?? 0;
+```
 
 ---
 
@@ -160,7 +194,7 @@ Each feature only imports from `shared/` or its own domain. Pages only compose f
 
 ---
 
-## 🌟 Specialized Modules
+## 🌟 Specialized Modules
 
 ### 🤖 AI Assistant
 Integrated AI chat panel with workspace support.
@@ -170,12 +204,20 @@ Integrated AI chat panel with workspace support.
 First-class Google Maps integration.
 - `Map` · `RouteMap` · `SimpleMap` · `GoogleMapsLoader`
 
-### 🎙️ Media
-- `AudioPlayer` · `VideoPlayer` · `FloatingMediaWrapper`
-
----
-
-## 🎨 Design Tokens
+### 🎙️ Media
+- `AudioPlayer` · `VideoPlayer` · `FloatingMediaWrapper`
+
+---
+
+## 📚 Storybook Documentation
+
+Storybook Docs pages use each component's real story variations instead of repeating a single usage example. UI component MDX files now render the story list directly, so docs stay aligned with the component's public stories.
+
+Map stories use a wider responsive preview frame, making `Map`, `RouteMap`, and related map examples readable in the Docs canvas.
+
+---
+
+## 🎨 Design Tokens
 
 Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind color classes**:
 
@@ -225,5 +267,5 @@ Border:         border-border
 
 ## ⚖️ License
 
-Proprietary — Xertica AI Team.
+Proprietary — Xertica.ai Team.
 

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('2.0.4');
+    .version('2.0.6');
 
 program
     .command('init')

package/components/assistant/xertica-assistant/xertica-assistant.tsx

@@ -241,8 +241,7 @@ export type AssistantTab = 'chat' | 'historico' | 'favoritos';
 // Component Props
 // ============================================================================
 
-import type { MockResponse } from '../../../contexts/AssistenteContext';
-import { gerarResposta } from '../../shared/assistant-utils';
+import { gerarResposta, type MockResponse } from '../../shared/assistant-utils';
 
 export interface XerticaAssistantProps {
   /**
@@ -1861,4 +1860,4 @@ export function XerticaAssistant({
       </Dialog>
     </>
   );
-}
+}

package/components/blocks/card-patterns/ActivityCard.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardContent, CardAction } from "../../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
+import { Badge } from "../../ui/badge"
+import { cn } from "../../shared/utils"
+
+export interface ActivityItem {
+  id: string
+  user: { name: string; avatar?: string; initials: string }
+  action: string
+  target: string
+  time: string
+  type?: "create" | "update" | "delete" | "comment" | "deploy"
+}
+
+export interface ActivityCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  items: ActivityItem[]
+  action?: React.ReactNode
+  maxItems?: number
+}
+
+const activityTypeBadge: Record<NonNullable<ActivityItem["type"]>, { label: string; variant: React.ComponentProps<typeof Badge>["variant"] }> = {
+  create:  { label: "Criado",     variant: "success" },
+  update:  { label: "Atualizado", variant: "info" },
+  delete:  { label: "Removido",   variant: "destructive" },
+  comment: { label: "Comentou",   variant: "secondary" },
+  deploy:  { label: "Deploy",     variant: "default" },
+}
+
+export function ActivityCard({ title = "Atividade Recente", items, action, maxItems = 5, className, ...props }: ActivityCardProps) {
+  const visible = items.slice(0, maxItems)
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {action && <CardAction>{action}</CardAction>}
+      </CardHeader>
+      <CardContent className="px-6 pb-6">
+        <ul className="space-y-4">
+          {visible.map((item) => {
+            const badge = item.type ? activityTypeBadge[item.type] : null
+            return (
+              <li key={item.id} className="flex items-start gap-3">
+                <Avatar className="size-8 shrink-0">
+                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
+                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm leading-snug">
+                    <span className="font-medium">{item.user.name}</span>
+                    {" "}{item.action}{" "}
+                    <span className="font-medium">{item.target}</span>
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{item.time}</p>
+                </div>
+                {badge && (
+                  <Badge variant={badge.variant} className="shrink-0 text-xs">
+                    {badge.label}
+                  </Badge>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

package/components/blocks/card-patterns/FeatureCard.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../ui/card"
+import { Button } from "../../ui/button"
+import { Badge } from "../../ui/badge"
+import { cn } from "../../shared/utils"
+
+export type FeatureCardColor =
+  | "primary"
+  | "chart-1"
+  | "chart-2"
+  | "chart-3"
+  | "chart-4"
+  | "chart-5"
+  | "success"
+  | "info"
+  | "warning"
+  | "destructive"
+
+const colorTokens: Record<FeatureCardColor, { bg: string; icon: string }> = {
+  primary:     { bg: "bg-primary/10",     icon: "text-primary" },
+  "chart-1":   { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2":   { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3":   { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4":   { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5":   { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success:     { bg: "bg-success/10",     icon: "text-success" },
+  info:        { bg: "bg-info/10",        icon: "text-info" },
+  warning:     { bg: "bg-warning/10",     icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" },
+}
+
+export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description: string
+  icon: React.ReactNode
+  color?: FeatureCardColor
+  badge?: string
+  badgeVariant?: React.ComponentProps<typeof Badge>["variant"]
+  actionLabel?: string
+  actionVariant?: React.ComponentProps<typeof Button>["variant"]
+  onAction?: () => void
+}
+
+export function FeatureCard({
+  title,
+  description,
+  icon,
+  color = "primary",
+  badge,
+  badgeVariant = "default",
+  actionLabel,
+  actionVariant = "outline",
+  onAction,
+  className,
+  ...props
+}: FeatureCardProps) {
+  const { bg, icon: iconColor } = colorTokens[color]
+
+  return (
+    <Card
+      className={cn(
+        "flex flex-col h-full hover:shadow-md transition-shadow duration-200",
+        className,
+      )}
+      {...props}
+    >
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className={cn("p-2 rounded-[var(--radius)] shrink-0", bg)}>
+            <div className={cn("size-6 flex items-center justify-center [&>svg]:size-6", iconColor)}>
+              {icon}
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
+            <CardTitle className="text-sm">{title}</CardTitle>
+            {badge && (
+              <Badge variant={badgeVariant} className="text-xs">
+                {badge}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1">
+        <CardDescription className="text-sm leading-relaxed">{description}</CardDescription>
+      </CardContent>
+
+      {actionLabel && (
+        <CardFooter>
+          <Button variant={actionVariant} className="w-full" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

package/components/blocks/card-patterns/NotificationCard.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter, CardAction } from "../../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
+import { Badge } from "../../ui/badge"
+import { Button } from "../../ui/button"
+import { cn } from "../../shared/utils"
+
+export type NotificationType = "info" | "warning" | "success" | "error" | "default"
+
+export interface NotificationItem {
+  id: string
+  title: string
+  message: string
+  time: string
+  read?: boolean
+  type?: NotificationType
+  user?: { name: string; initials: string; avatar?: string }
+}
+
+export interface NotificationCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  items: NotificationItem[]
+  unreadCount?: number
+  onMarkAllRead?: () => void
+  onViewAll?: () => void
+  maxItems?: number
+}
+
+const typeVariant: Record<NotificationType, React.ComponentProps<typeof Badge>["variant"]> = {
+  info:    "info",
+  warning: "warning",
+  success: "success",
+  error:   "destructive",
+  default: "secondary",
+}
+
+export function NotificationCard({
+  title = "Notificações",
+  items,
+  unreadCount,
+  onMarkAllRead,
+  onViewAll,
+  maxItems = 4,
+  className,
+  ...props
+}: NotificationCardProps) {
+  const visible = items.slice(0, maxItems)
+  const count = unreadCount ?? items.filter((i) => !i.read).length
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>{title}</CardTitle>
+          {count > 0 && (
+            <Badge variant="destructive" className="h-5 text-[11px] px-1.5">{count}</Badge>
+          )}
+        </div>
+        {onMarkAllRead && count > 0 && (
+          <CardAction>
+            <Button variant="ghost" size="sm" className="text-xs h-7" onClick={onMarkAllRead}>
+              Marcar todas como lidas
+            </Button>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="px-0 pb-0">
+        <ul className="divide-y divide-border">
+          {visible.map((item) => (
+            <li
+              key={item.id}
+              className={cn(
+                "flex items-start gap-3 px-6 py-3 transition-colors",
+                !item.read && "bg-muted/40",
+              )}
+            >
+              {item.user ? (
+                <Avatar className="size-8 shrink-0 mt-0.5">
+                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
+                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
+                </Avatar>
+              ) : (
+                <div className="size-8 shrink-0 mt-0.5 rounded-full bg-muted flex items-center justify-center">
+                  <div className={cn(
+                    "size-2 rounded-full",
+                    item.type === "error"   ? "bg-destructive" :
+                    item.type === "warning" ? "bg-warning"     :
+                    item.type === "success" ? "bg-success"     :
+                    item.type === "info"    ? "bg-info"        : "bg-muted-foreground",
+                  )} />
+                </div>
+              )}
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="text-sm font-medium truncate">{item.title}</p>
+                  {item.type && item.type !== "default" && (
+                    <Badge variant={typeVariant[item.type]} className="text-[10px] px-1.5 h-4 shrink-0">
+                      {item.type}
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{item.message}</p>
+                <p className="text-[11px] text-muted-foreground/70 mt-1">{item.time}</p>
+              </div>
+
+              {!item.read && (
+                <div className="size-2 rounded-full bg-primary shrink-0 mt-2" />
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+
+      {onViewAll && (
+        <CardFooter className="pt-2">
+          <Button variant="ghost" size="sm" className="w-full text-xs" onClick={onViewAll}>
+            Ver todas as notificações
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

package/components/blocks/card-patterns/ProfileCard.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardContent } from "../../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
+import { Badge } from "../../ui/badge"
+import { Button } from "../../ui/button"
+import { cn } from "../../shared/utils"
+
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  role: string
+  department?: string
+  avatar?: string
+  initials: string
+  status?: "online" | "offline" | "away" | "busy"
+  stats?: Array<{ label: string; value: string | number }>
+  primaryAction?: { label: string; onClick?: () => void }
+  secondaryAction?: { label: string; onClick?: () => void }
+}
+
+const statusConfig = {
+  online:  { label: "Online",     variant: "success"     as const },
+  offline: { label: "Offline",    variant: "secondary"   as const },
+  away:    { label: "Ausente",    variant: "warning"     as const },
+  busy:    { label: "Ocupado",    variant: "destructive" as const },
+}
+
+export function ProfileCard({
+  name, role, department, avatar, initials, status,
+  stats, primaryAction, secondaryAction, className, ...props
+}: ProfileCardProps) {
+  const s = status ? statusConfig[status] : null
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
+        <div className="relative">
+          <Avatar className="size-16">
+            {avatar && <AvatarImage src={avatar} alt={name} />}
+            <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
+          </Avatar>
+          {s && (
+            <span className="absolute -bottom-0.5 -right-0.5">
+              <Badge variant={s.variant} className="text-[10px] px-1.5 py-0 h-5">{s.label}</Badge>
+            </span>
+          )}
+        </div>
+
+        <div className="space-y-0.5">
+          <p className="font-semibold text-base leading-tight">{name}</p>
+          <p className="text-sm text-muted-foreground">{role}</p>
+          {department && <p className="text-xs text-muted-foreground">{department}</p>}
+        </div>
+
+        {stats && stats.length > 0 && (
+          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
+            {stats.map((stat) => (
+              <div key={stat.label} className="flex flex-col items-center gap-0.5 px-2">
+                <span className="text-base font-bold">{stat.value}</span>
+                <span className="text-[11px] text-muted-foreground">{stat.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(primaryAction || secondaryAction) && (
+          <div className="flex gap-2 w-full">
+            {secondaryAction && (
+              <Button variant="outline" className="flex-1" size="sm" onClick={secondaryAction.onClick}>
+                {secondaryAction.label}
+              </Button>
+            )}
+            {primaryAction && (
+              <Button className="flex-1" size="sm" onClick={primaryAction.onClick}>
+                {primaryAction.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/blocks/card-patterns/ProjectCard.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from "../../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
+import { Badge } from "../../ui/badge"
+import { Progress } from "../../ui/progress"
+import { cn } from "../../shared/utils"
+import type { ProgressVariant } from "../../ui/progress"
+
+export type ProjectStatus = "active" | "review" | "done" | "paused" | "at-risk"
+
+export interface ProjectMember {
+  name: string
+  initials: string
+  avatar?: string
+}
+
+export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description?: string
+  status: ProjectStatus
+  progress: number
+  dueDate?: string
+  members?: ProjectMember[]
+  maxMembers?: number
+  action?: React.ReactNode
+}
+
+const statusConfig: Record<ProjectStatus, { label: string; variant: React.ComponentProps<typeof Badge>["variant"]; progressVariant: ProgressVariant }> = {
+  active:   { label: "Em andamento", variant: "info",        progressVariant: "info" },
+  review:   { label: "Em revisão",   variant: "warning",     progressVariant: "warning" },
+  done:     { label: "Concluído",    variant: "success",     progressVariant: "success" },
+  paused:   { label: "Pausado",      variant: "secondary",   progressVariant: "default" },
+  "at-risk":{ label: "Em risco",     variant: "destructive", progressVariant: "destructive" },
+}
+
+export function ProjectCard({
+  title, description, status, progress, dueDate,
+  members = [], maxMembers = 4, action, className, ...props
+}: ProjectCardProps) {
+  const { label, variant, progressVariant } = statusConfig[status]
+  const visible = members.slice(0, maxMembers)
+  const overflow = members.length - maxMembers
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardHeader>
+        <div className="flex flex-col gap-1 min-w-0">
+          <CardTitle className="truncate">{title}</CardTitle>
+          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
+        </div>
+        <CardAction className="flex items-center gap-2">
+          <Badge variant={variant}>{label}</Badge>
+          {action}
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>Progresso</span>
+            <span>{progress}%</span>
+          </div>
+          <Progress value={progress} variant={progressVariant} className="h-2" />
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex items-center justify-between">
+        <div className="flex -space-x-2">
+          {visible.map((m) => (
+            <Avatar key={m.name} className="size-7 border-2 border-background">
+              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
+              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
+            </Avatar>
+          ))}
+          {overflow > 0 && (
+            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
+              +{overflow}
+            </div>
+          )}
+        </div>
+        {dueDate && (
+          <span className="text-xs text-muted-foreground">{dueDate}</span>
+        )}
+      </CardFooter>
+    </Card>
+  )
+}