@handled-ai/design-system 0.8.0 → 0.9.0

package/src/components/inbox-row.tsx

@@ -0,0 +1,132 @@
+import * as React from "react"
+import { Phone, Mail, MessageSquare, AlertCircle, ChevronDown } from "lucide-react"
+import { cn } from "../lib/utils"
+
+export interface InboxRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  itemId: string
+  statusColor: "red" | "orange" | "gray"
+  primaryText: string
+  secondaryText: string
+  tertiaryText: string
+  isAtRisk?: boolean
+  isSelected?: boolean
+  contactMethods?: { phone?: boolean; email?: boolean; message?: boolean }
+  interactionCount: number | string
+  assignee: string
+  status: string
+  time: string
+}
+
+export const InboxRow = React.forwardRef<HTMLDivElement, InboxRowProps>(
+  (
+    {
+      className,
+      itemId,
+      statusColor,
+      primaryText,
+      secondaryText,
+      tertiaryText,
+      isAtRisk = false,
+      isSelected = false,
+      contactMethods = { phone: true, email: true, message: true },
+      interactionCount,
+      assignee,
+      status,
+      time,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "group flex items-center gap-4 py-2.5 px-4 border-b border-border cursor-pointer transition-colors text-[13px] border-l-2",
+          isSelected
+            ? "bg-muted/30 border-l-brand-purple"
+            : "bg-background hover:bg-muted/50 border-l-transparent",
+          className
+        )}
+        {...props}
+      >
+        <div className="w-[100px] shrink-0 text-muted-foreground font-mono text-xs">
+          {itemId}
+        </div>
+
+        <div className="flex-1 min-w-0 flex items-center gap-3">
+          <div
+            className={cn("w-2 h-2 rounded-full shrink-0", {
+              "bg-red-500": statusColor === "red",
+              "bg-orange-500": statusColor === "orange",
+              "bg-gray-300": statusColor === "gray",
+            })}
+          />
+          <div className="flex items-center gap-1.5 truncate">
+            <span className="font-semibold text-foreground text-sm">{primaryText}</span>
+            <span className="text-muted-foreground text-xs">via {secondaryText}</span>
+            <span className="text-muted-foreground text-xs">&rarr;</span>
+            <span className="text-muted-foreground text-xs">{tertiaryText}</span>
+          </div>
+        </div>
+
+        <div className="w-24 shrink-0 flex items-center justify-end px-2">
+          {isAtRisk && (
+            <div className="flex items-center gap-1 text-red-600 bg-red-50 px-1.5 py-0.5 rounded-md text-[10px] font-semibold border border-red-100">
+              <AlertCircle className="w-3 h-3" />
+              At Risk
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 text-muted-foreground/40 shrink-0 w-20 justify-center">
+          <Phone className={cn("w-3.5 h-3.5", contactMethods.phone && "text-muted-foreground/80")} />
+          <Mail className={cn("w-3.5 h-3.5", contactMethods.email && "text-muted-foreground/80")} />
+          <MessageSquare className={cn("w-3.5 h-3.5", contactMethods.message && "text-muted-foreground/80")} />
+        </div>
+
+        <div className="w-12 shrink-0 flex items-center justify-center">
+          <div
+            className={cn(
+              "text-[10px] font-semibold px-1.5 py-0.5 rounded border",
+              typeof interactionCount === "string" && interactionCount.includes("+")
+                ? "bg-red-50 border-red-200 text-red-700"
+                : Number(interactionCount) > 2
+                ? "bg-yellow-50 border-yellow-200 text-yellow-700"
+                : "bg-muted border-border text-foreground"
+            )}
+          >
+            {interactionCount}
+          </div>
+        </div>
+
+        <div className="w-32 shrink-0 text-xs font-medium text-foreground truncate">
+          {assignee}
+        </div>
+
+        <div className="w-28 shrink-0">
+          <div className="inline-flex items-center bg-muted/80 px-2 py-0.5 rounded text-[10px] font-medium text-muted-foreground">
+            {status}
+          </div>
+        </div>
+
+        <div className="w-24 shrink-0 text-right text-xs text-muted-foreground">
+          {time}
+        </div>
+      </div>
+    )
+  }
+)
+
+InboxRow.displayName = "InboxRow"
+
+export function InboxGroupHeader({ title, count }: { title: string; count: number }) {
+  return (
+    <div className="flex items-center gap-2 py-2 px-4 bg-muted/30 border-b border-border text-[11px] font-bold text-muted-foreground uppercase tracking-wider">
+      <ChevronDown className="w-3.5 h-3.5" />
+      {title}
+      <span className="bg-background border border-border px-1.5 py-0.5 rounded text-[10px]">
+        {count}
+      </span>
+    </div>
+  )
+}

package/src/components/inbox-toolbar.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  User,
+  Users,
+  List,
+  Filter,
+  ChevronDown,
+  X,
+} from "lucide-react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Badge } from "./badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+export type AssigneeFilter = "me" | "team" | "all"
+
+export interface InboxFilterCategory {
+  id: string
+  label: string
+  icon: React.ReactNode
+  options: string[]
+}
+
+export interface InboxToolbarProps {
+  assignee: AssigneeFilter
+  onAssigneeChange: (value: AssigneeFilter) => void
+  filterCategories: InboxFilterCategory[]
+  selectedFilters: Record<string, string>
+  onFilterChange: (categoryId: string, value: string) => void
+  onClearFilters: () => void
+  className?: string
+}
+
+const FILTER_PILL_COLORS: Record<string, string> = {
+  status: "bg-muted text-foreground border-border hover:bg-muted/80",
+  category: "bg-blue-50 text-blue-700 border-blue-100 hover:bg-blue-100",
+  account: "bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100",
+  company: "bg-purple-50 text-purple-700 border-purple-100 hover:bg-purple-100",
+}
+
+function getFilterPillColor(categoryId: string) {
+  return FILTER_PILL_COLORS[categoryId] ?? FILTER_PILL_COLORS.status
+}
+
+export function InboxToolbar({
+  assignee,
+  onAssigneeChange,
+  filterCategories,
+  selectedFilters,
+  onFilterChange,
+  onClearFilters,
+  className,
+}: InboxToolbarProps) {
+  const hasActiveFilters = Object.values(selectedFilters).some(
+    (v) => v !== "all"
+  )
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2 overflow-x-auto px-4 py-2 border-b border-border",
+        className
+      )}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 shrink-0 gap-1.5 border-border bg-background text-xs font-medium shadow-sm"
+          >
+            {assignee === "me" && (
+              <User className="h-3.5 w-3.5 text-brand-purple" />
+            )}
+            {assignee === "team" && (
+              <Users className="h-3.5 w-3.5 text-blue-600" />
+            )}
+            {assignee === "all" && (
+              <List className="h-3.5 w-3.5 text-muted-foreground" />
+            )}
+            <span>
+              {assignee === "me" && "Assigned to me"}
+              {assignee === "team" && "My Team"}
+              {assignee === "all" && "All Cases"}
+            </span>
+            <ChevronDown className="h-3 w-3 opacity-50" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-[180px]">
+          <DropdownMenuLabel>Assignee</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup
+            value={assignee}
+            onValueChange={(v) => onAssigneeChange(v as AssigneeFilter)}
+          >
+            <DropdownMenuRadioItem value="me" className="gap-2 text-xs">
+              <User className="h-3.5 w-3.5 text-brand-purple" />
+              Assigned to me
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="team" className="gap-2 text-xs">
+              <Users className="h-3.5 w-3.5 text-blue-600" />
+              My Team
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="all" className="gap-2 text-xs">
+              <List className="h-3.5 w-3.5 text-muted-foreground" />
+              All Cases
+            </DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 shrink-0 gap-1.5 border-dashed border-border bg-transparent text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            <Filter className="h-3.5 w-3.5" />
+            Filter
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-[220px]">
+          <DropdownMenuLabel>Add Filter</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {filterCategories.map((category) => (
+            <DropdownMenuSub key={category.id}>
+              <DropdownMenuSubTrigger className="gap-2 text-xs">
+                {category.icon}
+                {category.label}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="max-h-[300px] w-[180px] overflow-y-auto">
+                <DropdownMenuRadioGroup
+                  value={selectedFilters[category.id] ?? "all"}
+                  onValueChange={(v) => onFilterChange(category.id, v)}
+                >
+                  <DropdownMenuRadioItem value="all" className="text-xs">
+                    All
+                  </DropdownMenuRadioItem>
+                  {category.options.map((option) => (
+                    <DropdownMenuRadioItem
+                      key={option}
+                      value={option}
+                      className="text-xs"
+                    >
+                      {option}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {Object.entries(selectedFilters).map(([categoryId, value]) => {
+        if (value === "all") return null
+        const category = filterCategories.find((c) => c.id === categoryId)
+        if (!category) return null
+
+        return (
+          <Badge
+            key={categoryId}
+            variant="secondary"
+            className={cn(
+              "h-7 shrink-0 gap-1 border pl-2 pr-1 font-normal transition-colors",
+              getFilterPillColor(categoryId)
+            )}
+          >
+            <span className="text-[10px] opacity-60">{category.label}:</span>
+            <span className="max-w-[120px] truncate text-[10px] font-medium">
+              {value}
+            </span>
+            <button
+              type="button"
+              onClick={() => onFilterChange(categoryId, "all")}
+              className="ml-0.5 rounded-sm p-0.5 hover:bg-foreground/10"
+            >
+              <X className="h-2.5 w-2.5" />
+              <span className="sr-only">Remove</span>
+            </button>
+          </Badge>
+        )
+      })}
+
+      {hasActiveFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="ml-auto h-7 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground"
+          onClick={onClearFilters}
+        >
+          Clear All
+        </Button>
+      )}
+    </div>
+  )
+}

package/src/components/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/insights-filter-bar.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { CalendarIcon, ChevronDownIcon, FilterIcon } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu"
+
+export interface FilterDefinition {
+  id: string
+  label: string
+  options: string[]
+  defaultValue?: string
+  icon?: "calendar" | React.ComponentType<{ className?: string }>
+}
+
+export interface InsightsFilterBarProps {
+  filters: FilterDefinition[]
+  values: Record<string, string>
+  onChange: (filterId: string, value: string) => void
+  onClearAll?: () => void
+  className?: string
+}
+
+function hasNonDefaultValue(
+  filters: FilterDefinition[],
+  values: Record<string, string>
+) {
+  return filters.some((filter) => {
+    const defaultVal = filter.defaultValue ?? filter.options[0] ?? "All"
+    return values[filter.id] !== undefined && values[filter.id] !== defaultVal
+  })
+}
+
+function InsightsFilterBar({
+  filters,
+  values,
+  onChange,
+  onClearAll,
+  className,
+}: InsightsFilterBarProps) {
+  const showClearAll = onClearAll && hasNonDefaultValue(filters, values)
+
+  return (
+    <div
+      data-slot="insights-filter-bar"
+      className={cn(
+        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <FilterIcon className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm font-medium text-muted-foreground">
+          Filters:
+        </span>
+      </div>
+
+      {filters.map((filter) => {
+        const current = values[filter.id] ?? filter.defaultValue ?? "All"
+        const isCheckbox = filter.options.length > 0
+
+        const IconComp =
+          filter.icon === "calendar"
+            ? CalendarIcon
+            : typeof filter.icon === "function"
+              ? filter.icon
+              : null
+
+        return (
+          <DropdownMenu key={filter.id}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 gap-1.5 text-xs font-normal shadow-none"
+              >
+                {IconComp ? (
+                  <IconComp className="h-3.5 w-3.5 text-muted-foreground" />
+                ) : null}
+                {filter.label}: {current}
+                <ChevronDownIcon className="h-3.5 w-3.5 opacity-50" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              {isCheckbox
+                ? filter.options.map((option) => (
+                    <DropdownMenuCheckboxItem
+                      key={option}
+                      checked={current === option}
+                      onCheckedChange={() => onChange(filter.id, option)}
+                    >
+                      {option}
+                    </DropdownMenuCheckboxItem>
+                  ))
+                : filter.options.map((option) => (
+                    <DropdownMenuItem
+                      key={option}
+                      onSelect={() => onChange(filter.id, option)}
+                    >
+                      {option}
+                    </DropdownMenuItem>
+                  ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )
+      })}
+
+      {showClearAll ? (
+        <div className="ml-auto">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 text-xs text-destructive hover:text-destructive"
+            onClick={onClearAll}
+          >
+            Clear All
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export { InsightsFilterBar }