@handled-ai/design-system 0.8.0 → 0.9.0

package/src/components/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "radix-ui"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/contact-list.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { Plus, X } from "lucide-react"
+import { Badge } from "./badge"
+import { Button } from "./button"
+
+export interface ContactChannel {
+  type: "linkedin" | "gmail" | "salesforce" | "phone" | "custom"
+  icon: React.ReactNode
+  label?: string
+  onClick?: () => void
+}
+
+export interface ContactItem {
+  id: string
+  name: string
+  role: string
+  badge?: {
+    label: string
+    color?: "indigo" | "green" | "amber" | "red" | "muted"
+  }
+  channels?: ContactChannel[]
+  action?: {
+    label: string
+    onClick?: () => void
+  }
+  description?: string
+  onDismiss?: () => void
+}
+
+export interface ContactListProps {
+  title?: string
+  count?: string
+  contacts: ContactItem[]
+  onAdd?: () => void
+  addLabel?: string
+}
+
+const badgeColors: Record<string, string> = {
+  indigo: "bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800",
+  green: "bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800",
+  amber: "bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800",
+  red: "bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
+  muted: "bg-muted text-muted-foreground border-border",
+}
+
+function ContactRow({ contact }: { contact: ContactItem }) {
+  return (
+    <div className="flex items-center justify-between gap-3 group py-2.5 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors">
+      <div className="flex items-center gap-2.5 min-w-0">
+        {contact.badge && (
+          <Badge
+            variant="outline"
+            className={`shadow-none px-2 py-0 text-[11px] font-medium shrink-0 ${badgeColors[contact.badge.color ?? "muted"]}`}
+          >
+            {contact.badge.label}
+          </Badge>
+        )}
+        <span className="font-medium text-sm text-foreground truncate">{contact.name}</span>
+        <span className="text-muted-foreground text-sm shrink-0">&middot;</span>
+        <span className="text-muted-foreground text-sm truncate">{contact.role}</span>
+      </div>
+
+      <div className="flex items-center gap-1 shrink-0">
+        {contact.channels?.map((ch, i) => (
+          <button
+            key={i}
+            onClick={ch.onClick}
+            className="h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors"
+            title={ch.label}
+          >
+            {ch.icon}
+          </button>
+        ))}
+        {contact.action && (
+          <Button
+            size="sm"
+            className="bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1"
+            onClick={contact.action.onClick}
+          >
+            <Plus className="w-3 h-3 mr-1" />
+            {contact.action.label}
+          </Button>
+        )}
+        {contact.onDismiss && (
+          <button
+            onClick={contact.onDismiss}
+            className="h-6 w-6 flex items-center justify-center text-muted-foreground/40 hover:text-foreground hover:bg-muted rounded-md transition-colors opacity-0 group-hover:opacity-100"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function ContactList({ title, count, contacts, onAdd, addLabel }: ContactListProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+        <div className="flex items-center gap-3">
+          {count && <span className="text-xs text-muted-foreground">{count}</span>}
+          {onAdd && (
+            <Button variant="ghost" size="sm" onClick={onAdd} className="h-7 text-xs font-medium hover:bg-muted/50">
+              <Plus className="w-3.5 h-3.5 mr-1" /> {addLabel ?? "Add"}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="space-y-0">
+        {contacts.map((contact) => (
+          <ContactRow key={contact.id} contact={contact} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/dashboard-cards.tsx

@@ -0,0 +1,170 @@
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardContent } from "./card"
+import { Button } from "./button"
+import { Badge } from "./badge"
+import { PreviewList, PreviewListItem } from "./preview-list"
+import { Square, Clock, Video, CheckCircle2, CheckSquare, Eye } from "lucide-react"
+
+export function TopTasksCard({ onViewAll }: { onViewAll?: () => void }) {
+  return (
+    <Card className="rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0">
+      <CardHeader className="flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20">
+        <CardTitle className="text-sm font-bold tracking-tight">Top Tasks</CardTitle>
+        <Button 
+          variant="ghost" 
+          size="sm" 
+          onClick={onViewAll} 
+          className="text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10"
+        >
+          View all tasks &rarr;
+        </Button>
+      </CardHeader>
+      <CardContent className="p-0">
+        <PreviewList>
+          <PreviewListItem
+            icon={<Square className="w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" />}
+            title="Follow up with Lunchclub"
+            subtitle="Churn Mitigation"
+            meta={
+              <>
+                <span className="text-[11px] font-medium text-muted-foreground">Due in 2h</span>
+                <Badge variant="destructive" className="text-[10px] px-2 py-0 h-4 uppercase tracking-wider rounded-full shadow-none font-bold bg-foreground text-background hover:bg-foreground/90">Urgent</Badge>
+              </>
+            }
+            onClick={onViewAll}
+          />
+          <PreviewListItem
+            icon={<Square className="w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" />}
+            title="Outbound opportunity: CloudKitchen"
+            subtitle="Outbound"
+            meta={<span className="text-[11px] font-medium text-muted-foreground">Due tomorrow</span>}
+            onClick={onViewAll}
+          />
+          <PreviewListItem
+            icon={<Square className="w-4 h-4 text-muted-foreground hover:text-brand-purple transition-colors" />}
+            title="New CFO welcome: Loom"
+            subtitle="Relationship"
+            meta={<span className="text-[11px] font-medium text-muted-foreground">Due next week</span>}
+            onClick={onViewAll}
+          />
+        </PreviewList>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function UpcomingMeetingsCard() {
+  return (
+    <Card className="rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0">
+      <CardHeader className="flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20">
+        <CardTitle className="text-sm font-bold tracking-tight">Upcoming Meetings</CardTitle>
+        <Button variant="ghost" size="sm" className="text-xs h-7 text-brand-purple hover:text-brand-purple/80 hover:bg-brand-purple/10">
+          View all meetings &rarr;
+        </Button>
+      </CardHeader>
+      <CardContent className="p-0">
+        <PreviewList>
+          <PreviewListItem
+            icon={<Clock className="w-4 h-4 text-blue-500" />}
+            title="Q3 Review - Acme Corp"
+            subtitle="2:00 PM - 3:00 PM"
+            meta={<span className="text-[11px] font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">Starts in 10 mins</span>}
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <Video className="w-3.5 h-3.5 mr-1.5" /> Join
+              </Button>
+            }
+          />
+          <PreviewListItem
+            icon={<Clock className="w-4 h-4 text-blue-500" />}
+            title="Initial Sync - Initech"
+            subtitle="4:30 PM - 5:00 PM"
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <Video className="w-3.5 h-3.5 mr-1.5" /> Join
+              </Button>
+            }
+          />
+        </PreviewList>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function RecentlyCompletedCard() {
+  return (
+    <Card className="rounded-xl border border-border shadow-sm overflow-hidden opacity-80 bg-muted/5 gap-0 py-0">
+      <CardHeader className="flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/10">
+        <CardTitle className="text-sm font-bold tracking-tight text-muted-foreground">Recently Completed</CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <PreviewList>
+          <PreviewListItem
+            icon={<CheckCircle2 className="w-4 h-4 text-emerald-500" />}
+            title={<span className="text-muted-foreground font-medium">Sync - Globex Inc</span>}
+            subtitle="10:00 AM"
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <Eye className="w-3.5 h-3.5 mr-1.5" /> View
+              </Button>
+            }
+          />
+          <PreviewListItem
+            icon={<CheckCircle2 className="w-4 h-4 text-emerald-500" />}
+            title={<span className="text-muted-foreground font-medium">Check-in - Pied Piper</span>}
+            subtitle="9:00 AM"
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <Eye className="w-3.5 h-3.5 mr-1.5" /> View
+              </Button>
+            }
+          />
+        </PreviewList>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function CheckInsCard() {
+  return (
+    <Card className="rounded-xl border border-border shadow-sm overflow-hidden gap-0 py-0">
+      <CardHeader className="flex flex-row items-center justify-between pt-4 pb-3 px-6 border-b border-border bg-muted/20">
+        <CardTitle className="text-sm font-bold tracking-tight">Today&apos;s Check-ins</CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <PreviewList>
+          <PreviewListItem
+            icon={
+              <div className="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
+                <CheckSquare className="w-4 h-4 text-emerald-600" />
+              </div>
+            }
+            title="Morning Standup"
+            subtitle="9:00 AM"
+            meta={<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 hover:bg-emerald-100 shadow-none border-transparent font-semibold text-[10px]">Done</Badge>}
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <Eye className="w-3.5 h-3.5 mr-1.5" /> View
+              </Button>
+            }
+          />
+          <PreviewListItem
+            icon={
+              <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+                <Clock className="w-4 h-4 text-muted-foreground" />
+              </div>
+            }
+            title="Evening Wrap-up"
+            subtitle="5:00 PM"
+            meta={<Badge variant="outline" className="text-muted-foreground shadow-none font-semibold text-[10px]">Pending</Badge>}
+            action={
+              <Button size="sm" variant="outline" className="h-7 text-xs shadow-sm bg-background hover:bg-muted">
+                <CheckSquare className="w-3.5 h-3.5 mr-1.5" /> Complete
+              </Button>
+            }
+          />
+        </PreviewList>
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/data-table-display.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { ArrowDown, ArrowUp, ArrowUpDown, LayoutGrid } from "lucide-react"
+import type { SortingState } from "@tanstack/react-table"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+
+export interface DataTableDisplayColumn {
+  id: string
+  label: string
+  visible: boolean
+  canHide: boolean
+}
+
+interface DataTableDisplayProps {
+  sorting: SortingState
+  onSortingChange: (next: SortingState) => void
+  columns: DataTableDisplayColumn[]
+  onToggleColumn: (columnId: string) => void
+  onReset: () => void
+}
+
+export function DataTableDisplay({
+  sorting,
+  onSortingChange,
+  columns,
+  onToggleColumn,
+  onReset,
+}: DataTableDisplayProps) {
+  const sortableColumns = columns
+  const currentSortId = sorting[0]?.id ?? sortableColumns[0]?.id ?? ""
+  const isDescending = Boolean(sorting[0]?.desc)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 gap-2 rounded-md border-border/60 bg-background text-xs font-normal shadow-none hover:bg-muted/50"
+        >
+          <LayoutGrid className="h-3.5 w-3.5" />
+          Display
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[320px] p-4">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <span className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+              <ArrowUpDown className="h-3.5 w-3.5" />
+              Sorting
+            </span>
+            <div className="flex items-center gap-2">
+              <Select
+                value={currentSortId}
+                onValueChange={(value) =>
+                  onSortingChange([{ id: value, desc: sorting[0]?.desc ?? false }])
+                }
+              >
+                <SelectTrigger className="h-8 w-full text-xs">
+                  <SelectValue placeholder="Sort by..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {sortableColumns.map((column) => (
+                    <SelectItem key={column.id} value={column.id} className="text-xs">
+                      {column.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-8 w-8 shrink-0"
+                onClick={() =>
+                  onSortingChange([{ id: currentSortId, desc: !isDescending }])
+                }
+                disabled={!currentSortId}
+              >
+                {isDescending ? (
+                  <ArrowDown className="h-3.5 w-3.5" />
+                ) : (
+                  <ArrowUp className="h-3.5 w-3.5" />
+                )}
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <span className="text-xs font-medium text-muted-foreground">
+              Display properties
+            </span>
+            <div className="flex flex-wrap gap-2">
+              {columns.map((column) => (
+                <button
+                  key={column.id}
+                  disabled={!column.canHide}
+                  onClick={() => onToggleColumn(column.id)}
+                  className={cn(
+                    "rounded-md border px-2.5 py-1 text-[11px] font-medium transition-all",
+                    column.visible
+                      ? "border-brand-purple/30 bg-brand-purple/10 text-brand-purple"
+                      : "border-border bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground",
+                    !column.canHide && "cursor-not-allowed opacity-50"
+                  )}
+                >
+                  {column.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-2 flex items-center justify-start border-t border-border pt-2">
+            <button
+              className="text-[10px] font-medium text-muted-foreground transition-colors hover:text-foreground"
+              onClick={onReset}
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}