@handled-ai/design-system 0.8.0 → 0.9.1

package/src/components/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

package/src/components/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/timeline-activity.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
+
+export interface TimelineEvent {
+  id: string
+  icon: React.ReactNode
+  title: React.ReactNode
+  time: string
+  preview?: React.ReactNode
+  email?: {
+    from: string
+    fromEmail?: string
+    to: string
+    cc?: string
+    bcc?: string
+    date?: string
+    subject?: string
+    body: React.ReactNode
+  }
+  content?: React.ReactNode
+  source?: {
+    label: string
+    url: string
+  }
+  defaultExpanded?: boolean
+  isInteractive?: boolean
+  onSourceClick?: () => void
+}
+
+export interface TimelineActivityProps {
+  events: TimelineEvent[]
+  className?: string
+}
+
+export function TimelineActivity({ events, className }: TimelineActivityProps) {
+  return (
+    <div className={cn("space-y-0", className)}>
+      {events.map((event, index) => (
+        <TimelineItem
+          key={event.id}
+          event={event}
+          isLast={index === events.length - 1}
+        />
+      ))}
+    </div>
+  )
+}
+
+function TimelineItem({ event, isLast }: { event: TimelineEvent; isLast: boolean }) {
+  const [expanded, setExpanded] = React.useState(event.defaultExpanded ?? false)
+  const [showAllRecipients, setShowAllRecipients] = React.useState(false)
+  const hasContent = !!event.content
+  const hasEmail = !!event.email
+
+  return (
+    <div className="group relative flex gap-3.5">
+      {!isLast && (
+        <div className="absolute left-[9px] top-5 bottom-[-6px] w-px bg-border/60" />
+      )}
+
+      <div className="relative z-10 mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-background">
+        <div className="flex h-4.5 w-4.5 items-center justify-center rounded-full border border-border/60 bg-background text-muted-foreground ring-4 ring-background">
+          {event.icon}
+        </div>
+      </div>
+
+      <div className="flex-1 pb-5 pt-0.5">
+        <div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+          <div className="pr-4 text-[13px] leading-relaxed text-foreground">
+            {event.title}
+          </div>
+          <span className="mt-0.5 shrink-0 whitespace-nowrap text-[11px] text-muted-foreground/70">
+            {event.time}
+          </span>
+        </div>
+
+        {(hasContent || hasEmail) && (
+          <div className="mt-2">
+            {event.isInteractive ? (
+              hasEmail ? (
+                <div className="overflow-hidden rounded-md border border-border/80 bg-muted/20">
+                  <div
+                    className={cn(
+                      "px-3 py-2.5 text-sm",
+                      !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+                    )}
+                    onClick={() => !expanded && setExpanded(true)}
+                  >
+                    {expanded && event.email ? (
+                      <div className="space-y-3">
+                        <div>
+                          <div className="flex items-center justify-between gap-4">
+                            <div className="flex min-w-0 items-baseline gap-1.5">
+                              <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{event.email.from}</span>
+                              {event.email.fromEmail && (
+                                <span className="text-muted-foreground/60 text-xs truncate">{event.email.fromEmail}</span>
+                              )}
+                            </div>
+                            {event.email.date && (
+                              <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{event.email.date}</span>
+                            )}
+                          </div>
+                          <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+                            <span className="truncate">
+                              To {event.email.to}
+                              {!showAllRecipients && (event.email.cc || event.email.bcc) ? (
+                                <>, ...</>
+                              ) : null}
+                              {showAllRecipients && event.email.cc ? (
+                                <>, {event.email.cc}</>
+                              ) : null}
+                              {showAllRecipients && event.email.bcc ? (
+                                <> <span className="text-muted-foreground/40">bcc</span> {event.email.bcc}</>
+                              ) : null}
+                            </span>
+                            {(event.email.cc || event.email.bcc) && (
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  setShowAllRecipients((prev) => !prev)
+                                }}
+                                className="shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+                              >
+                                <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
+                              </button>
+                            )}
+                          </div>
+                        </div>
+
+                        <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+                          {event.email.body}
+                        </div>
+
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setExpanded(false)
+                          }}
+                          className="mt-2 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                        >
+                          Show less <ChevronUp className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-between gap-2 text-muted-foreground">
+                        <span className="line-clamp-1 pr-3 text-[13px]">
+                          <span className="text-muted-foreground">{event.email?.from}</span>
+                          <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
+                          {event.email?.subject ? (
+                            <>
+                              <span className="text-muted-foreground">{event.email.subject}</span>
+                              <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
+                            </>
+                          ) : null}
+                          <span className="text-muted-foreground">{event.preview}</span>
+                        </span>
+                        <button className="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground">
+                          Expand <ChevronDown className="h-3 w-3" />
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div className="overflow-hidden rounded-md border border-border/80 bg-muted/20">
+                  <div
+                    className={cn(
+                      "px-3 py-2.5 text-sm",
+                      !expanded && "cursor-pointer hover:bg-muted/30 transition-colors"
+                    )}
+                    onClick={() => !expanded && setExpanded(true)}
+                  >
+                    {expanded ? (
+                      <div className="space-y-2">
+                        {event.content}
+                        <div className="mt-2 flex items-center gap-3">
+                          {event.source ? (
+                            event.onSourceClick ? (
+                              <button
+                                type="button"
+                                onClick={(e) => { e.stopPropagation(); event.onSourceClick?.(); }}
+                                className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                              >
+                                Open in {event.source.label}
+                                <ExternalLink className="h-3 w-3" />
+                              </button>
+                            ) : (
+                              <a
+                                href={event.source.url}
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                              >
+                                Open in {event.source.label}
+                                <ExternalLink className="h-3 w-3" />
+                              </a>
+                            )
+                          ) : null}
+                          <button
+                            onClick={(e) => { e.stopPropagation(); setExpanded(false); }}
+                            className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                          >
+                            Show less <ChevronUp className="h-3 w-3" />
+                          </button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-between gap-2 text-muted-foreground">
+                        <span className="line-clamp-1 pr-3">
+                          {event.preview ?? event.content}
+                        </span>
+                        <button className="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground">
+                          Expand <ChevronDown className="h-3 w-3" />
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            ) : (
+              <div className="pr-2 text-sm leading-relaxed text-muted-foreground">
+                {event.content}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/components/view-mode-toggle.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export interface ViewMode {
+  id: string
+  icon: React.ReactNode
+  label: string
+}
+
+export interface ViewModeToggleProps {
+  modes: ViewMode[]
+  activeMode: string
+  onModeChange: (modeId: string) => void
+  className?: string
+}
+
+export function ViewModeToggle({ modes, activeMode, onModeChange, className }: ViewModeToggleProps) {
+  return (
+    <div className={cn("flex items-center rounded-lg bg-muted p-0.5 gap-0.5", className)}>
+      {modes.map((mode) => (
+        <button
+          key={mode.id}
+          onClick={() => onModeChange(mode.id)}
+          title={mode.label}
+          className={cn(
+            "h-7 w-8 flex items-center justify-center rounded-md transition-all",
+            activeMode === mode.id
+              ? "bg-background shadow-sm text-foreground"
+              : "text-muted-foreground hover:text-foreground hover:bg-muted/80"
+          )}
+        >
+          {mode.icon}
+        </button>
+      ))}
+    </div>
+  )
+}