@opencosmos/ui 1.3.1

package/src/components/overlays/NotificationCenter.tsx

@@ -0,0 +1,364 @@
+'use client'
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface NotificationItem {
+  id: string
+  title: string
+  description?: string
+  timestamp: string | Date
+  read?: boolean
+  icon?: React.ReactNode
+  action?: { label: string; onClick: () => void }
+}
+
+export interface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Array of notification items */
+  notifications: NotificationItem[]
+  /** Callback when a notification is marked as read */
+  onMarkRead?: (id: string) => void
+  /** Callback to mark all notifications as read */
+  onMarkAllRead?: () => void
+  /** Callback when a notification is dismissed */
+  onDismiss?: (id: string) => void
+  /** Custom trigger element (defaults to bell icon with badge) */
+  trigger?: React.ReactNode
+  /** Maximum height of the notification list */
+  maxHeight?: number
+  /** Empty state message */
+  emptyMessage?: string
+}
+
+// ============================================================================
+// Inline Icons (avoiding external dependency)
+// ============================================================================
+
+const BellIcon = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+    className={className}
+  >
+    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+    <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+  </svg>
+)
+
+const XIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+)
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function formatTimestamp(timestamp: string | Date): string {
+  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return date.toLocaleDateString()
+}
+
+function groupNotifications(notifications: NotificationItem[]): Record<string, NotificationItem[]> {
+  const groups: Record<string, NotificationItem[]> = {}
+
+  for (const notification of notifications) {
+    const date = typeof notification.timestamp === 'string'
+      ? new Date(notification.timestamp)
+      : notification.timestamp
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffDays = Math.floor(diffMs / 86400000)
+
+    let group: string
+    if (diffDays === 0) group = 'Today'
+    else if (diffDays === 1) group = 'Yesterday'
+    else if (diffDays < 7) group = 'This Week'
+    else group = 'Older'
+
+    if (!groups[group]) groups[group] = []
+    groups[group].push(notification)
+  }
+
+  return groups
+}
+
+// ============================================================================
+// NotificationCenter Component
+// ============================================================================
+
+function NotificationCenter({
+  className,
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+  onDismiss,
+  trigger,
+  maxHeight = 400,
+  emptyMessage = 'No notifications',
+  ...props
+}: NotificationCenterProps) {
+  const [open, setOpen] = React.useState(false)
+  const panelRef = React.useRef<HTMLDivElement>(null)
+
+  const unreadCount = notifications.filter(n => !n.read).length
+  const grouped = groupNotifications(notifications)
+  const groupOrder = ['Today', 'Yesterday', 'This Week', 'Older']
+
+  // Close on escape
+  React.useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape' && open) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open])
+
+  // Close on click outside
+  React.useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [open])
+
+  return (
+    <div
+      data-slot="notification-center"
+      className={cn("relative inline-block", className)}
+      ref={panelRef}
+      {...props}
+    >
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="relative inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        {trigger || <BellIcon />}
+        {unreadCount > 0 && (
+          <span
+            data-slot="notification-badge"
+            className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-medium text-destructive-foreground"
+            aria-hidden="true"
+          >
+            {unreadCount > 99 ? '99+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {/* Panel */}
+      {open && (
+        <div
+          data-slot="notification-panel"
+          className="absolute right-0 top-full mt-2 z-50 w-80 rounded-lg border border-border bg-popover shadow-lg animate-in fade-in-0 zoom-in-95 slide-in-from-top-2"
+          role="dialog"
+          aria-label="Notifications"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between border-b border-border px-4 py-3">
+            <h3 className="text-sm font-semibold text-foreground">
+              Notifications
+              {unreadCount > 0 && (
+                <span className="ml-1.5 text-xs font-normal text-foreground-secondary">
+                  ({unreadCount} unread)
+                </span>
+              )}
+            </h3>
+            {unreadCount > 0 && onMarkAllRead && (
+              <button
+                type="button"
+                onClick={() => {
+                  onMarkAllRead()
+                }}
+                className="text-xs text-primary hover:text-primary/80 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1"
+              >
+                Mark all read
+              </button>
+            )}
+          </div>
+
+          {/* Notification List */}
+          <div
+            className="overflow-y-auto"
+            style={{ maxHeight }}
+            role="list"
+            aria-label="Notification list"
+          >
+            {notifications.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-8 px-4 text-center">
+                <BellIcon className="text-foreground-secondary mb-2 opacity-40" />
+                <p className="text-sm text-foreground-secondary">{emptyMessage}</p>
+              </div>
+            ) : (
+              groupOrder
+                .filter(group => grouped[group]?.length > 0)
+                .map(group => (
+                  <div key={group}>
+                    <div className="sticky top-0 bg-popover/95 backdrop-blur-xs px-4 py-1.5 border-b border-border/50">
+                      <span className="text-[11px] font-medium uppercase tracking-wider text-foreground-secondary">
+                        {group}
+                      </span>
+                    </div>
+                    {grouped[group].map(notification => (
+                      <div
+                        key={notification.id}
+                        data-slot="notification-item"
+                        className={cn(
+                          "flex gap-3 px-4 py-3 border-b border-border/30 last:border-0 transition-colors",
+                          !notification.read && "bg-primary/5"
+                        )}
+                        role="listitem"
+                      >
+                        {/* Icon */}
+                        {notification.icon && (
+                          <div className="shrink-0 mt-0.5 text-foreground-secondary" aria-hidden="true">
+                            {notification.icon}
+                          </div>
+                        )}
+
+                        {/* Content */}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-start justify-between gap-2">
+                            <p className={cn(
+                              "text-sm truncate",
+                              !notification.read ? "font-semibold text-foreground" : "font-medium text-foreground"
+                            )}>
+                              {notification.title}
+                            </p>
+                            {/* Unread dot */}
+                            {!notification.read && (
+                              <span
+                                className="shrink-0 mt-1.5 h-2 w-2 rounded-full bg-primary"
+                                aria-label="Unread"
+                              />
+                            )}
+                          </div>
+                          {notification.description && (
+                            <p className="text-xs text-foreground-secondary mt-0.5 line-clamp-2">
+                              {notification.description}
+                            </p>
+                          )}
+                          <div className="flex items-center gap-2 mt-1.5">
+                            <span className="text-[11px] text-foreground-secondary">
+                              {formatTimestamp(notification.timestamp)}
+                            </span>
+                            {notification.action && (
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  notification.action!.onClick()
+                                }}
+                                className="text-[11px] font-medium text-primary hover:text-primary/80 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded"
+                              >
+                                {notification.action.label}
+                              </button>
+                            )}
+                          </div>
+                        </div>
+
+                        {/* Actions */}
+                        <div className="shrink-0 flex flex-col gap-1">
+                          {!notification.read && onMarkRead && (
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                onMarkRead(notification.id)
+                              }}
+                              className="rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                              aria-label={`Mark "${notification.title}" as read`}
+                            >
+                              <CheckIcon />
+                            </button>
+                          )}
+                          {onDismiss && (
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                onDismiss(notification.id)
+                              }}
+                              className="rounded-xs p-1 text-foreground-secondary hover:text-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                              aria-label={`Dismiss "${notification.title}"`}
+                            >
+                              <XIcon />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { NotificationCenter }

package/src/components/overlays/Popover.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { Popover, PopoverTrigger, PopoverContent } from './Popover'
+
+describe('Popover', () => {
+  it('renders trigger', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Popover content</PopoverContent>
+      </Popover>
+    )
+    expect(screen.getByRole('button', { name: /open/i })).toBeInTheDocument()
+  })
+
+  it('opens on click', async () => {
+    const user = userEvent.setup()
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Popover content</PopoverContent>
+      </Popover>
+    )
+
+    expect(screen.queryByText('Popover content')).not.toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: /open/i }))
+    expect(screen.getByText('Popover content')).toBeInTheDocument()
+  })
+
+  it('renders open when controlled', () => {
+    render(
+      <Popover open>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Visible content</PopoverContent>
+      </Popover>
+    )
+    expect(screen.getByText('Visible content')).toBeInTheDocument()
+  })
+})

package/src/components/overlays/Popover.tsx

@@ -0,0 +1,46 @@
+"use client";
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = (
+  {
+    ref,
+    className,
+    align = "center",
+    sideOffset = 4,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof PopoverPrimitive.Content>>;
+  }
+) => (<PopoverPrimitive.Portal>
+  <PopoverPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    style={{
+      backgroundColor: 'var(--color-popover, #ffffff)',
+      color: 'var(--color-popover-foreground, #0a0a0a)',
+      border: '1px solid var(--color-border, #d4d4d4)',
+      borderRadius: 'var(--radius, 0.5rem)',
+      boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      zIndex: 50,
+      ...style,
+    }}
+    {...props}
+  />
+</PopoverPrimitive.Portal>)
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/overlays/Sheet.tsx

@@ -0,0 +1,163 @@
+"use client";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = (
+  {
+    ref,
+    className,
+    style,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Overlay>>;
+  }
+) => (<SheetPrimitive.Overlay
+  className={cn(
+    "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    className
+  )}
+  style={{
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 50,
+    ...style,
+  }}
+  {...props}
+  ref={ref}
+/>)
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = (
+  {
+    ref,
+    side = "right",
+    className,
+    children,
+    style,
+    ...props
+  }: SheetContentProps & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Content>>;
+  }
+) => (<SheetPortal>
+  <SheetOverlay />
+  <SheetPrimitive.Content
+    ref={ref}
+    className={cn(sheetVariants({ side }), className)}
+    style={{
+      backgroundColor: 'var(--color-background, #ffffff)',
+      boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      zIndex: 50,
+      ...style,
+    }}
+    {...props}
+  >
+    {children}
+    <SheetPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <X className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPortal>)
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Title>>;
+  }
+) => (<SheetPrimitive.Title
+  ref={ref}
+  className={cn("text-lg font-semibold text-foreground", className)}
+  {...props}
+/>)
+
+const SheetDescription = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
+    ref?: React.Ref<React.ElementRef<typeof SheetPrimitive.Description>>;
+  }
+) => (<SheetPrimitive.Description
+  ref={ref}
+  className={cn("text-sm text-muted-foreground", className)}
+  {...props}
+/>)
+
+export {
+  Sheet,
+  sheetVariants,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/overlays/Tooltip.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect } from 'vitest'
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './Tooltip'
+
+describe('Tooltip', () => {
+  it('renders trigger', () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip text</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+    expect(screen.getByText('Hover me')).toBeInTheDocument()
+  })
+
+  it('shows content on hover', async () => {
+    const user = userEvent.setup()
+    render(
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Helpful info</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+
+    await user.hover(screen.getByText('Hover me'))
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument()
+  })
+})

package/src/components/overlays/Tooltip.tsx

@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = (
+  {
+    ref,
+    className,
+    sideOffset = 4,
+    ...props
+  }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    ref?: React.Ref<React.ElementRef<typeof TooltipPrimitive.Content>>;
+  }
+) => (<TooltipPrimitive.Content
+  ref={ref}
+  sideOffset={sideOffset}
+  className={cn(
+    "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...props}
+/>)
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/overlays/index.ts

@@ -0,0 +1,12 @@
+export * from './AlertDialog';
+export * from './ContextMenu';
+export * from './Dialog';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './DropdownMenu';
+export * from './HoverCard';
+export * from './Modal';
+export * from './Popover';
+export * from './Sheet';
+export * from './Tooltip';
+export * from './NotificationCenter';