@handled-ai/design-system 0.9.28 → 0.11.0

package/src/components/draft-feedback-inline.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from "react"
+import {
+  ThumbsUp,
+  ThumbsDown,
+  Check,
+  RefreshCw,
+} from "lucide-react"
+
+// ---------------------------------------------------------------------------
+// DraftFeedbackInline
+// ---------------------------------------------------------------------------
+
+const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"]
+const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"]
+
+export interface DraftFeedbackInlineProps {
+  initialDirection?: 'up' | 'down' | null
+  onRegenerateRequest?: (pills: string[], detail: string) => void
+  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
+  onDiscardRequest?: (pills: string[], detail: string) => void
+}
+
+export function DraftFeedbackInline({
+  initialDirection,
+  onRegenerateRequest,
+  onSubmitFeedback,
+  onDiscardRequest,
+}: DraftFeedbackInlineProps) {
+  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(initialDirection ?? null)
+  const [selectedPills, setSelectedPills] = React.useState<string[]>([])
+  const [detailText, setDetailText] = React.useState("")
+  const [noted, setNoted] = React.useState(false)
+  const [regenerated, setRegenerated] = React.useState(false)
+
+  const togglePill = React.useCallback((pill: string) => {
+    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))
+  }, [])
+
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return
+    onSubmitFeedback?.(thumbState, selectedPills, detailText)
+    setNoted(true)
+    setTimeout(() => {
+      setThumbState(null)
+      setSelectedPills([])
+      setDetailText("")
+      setNoted(false)
+    }, 3000)
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback])
+
+  const handleRegenerate = React.useCallback(() => {
+    if (!thumbState) return
+    onRegenerateRequest?.(selectedPills, detailText)
+    setRegenerated(true)
+    setTimeout(() => {
+      setThumbState(null)
+      setSelectedPills([])
+      setDetailText("")
+      setRegenerated(false)
+    }, 3000)
+  }, [thumbState, selectedPills, detailText, onRegenerateRequest])
+
+  const handleDiscard = React.useCallback(() => {
+    if (!thumbState) return
+    onDiscardRequest?.(selectedPills, detailText)
+  }, [thumbState, selectedPills, detailText, onDiscardRequest])
+
+  if (noted) {
+    return (
+      <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
+        <Check className="w-3.5 h-3.5 text-emerald-500" />
+        <span className="text-xs text-muted-foreground">Feedback recorded</span>
+      </div>
+    )
+  }
+
+  if (regenerated) {
+    return (
+      <div className="py-2 animate-in fade-in slide-in-from-top-1 duration-200">
+        <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800">
+          <RefreshCw className="w-3 h-3 text-indigo-500 animate-spin" />
+          <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">Regenerating draft...</span>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-0">
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
+        <div className="flex gap-1">
+          <button
+            onClick={() => {
+              setThumbState(thumbState === "up" ? null : "up")
+              setSelectedPills([])
+              setDetailText("")
+            }}
+            className={`p-1.5 rounded transition-colors ${
+              thumbState === "up"
+                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+                : "hover:bg-muted text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
+          </button>
+          <button
+            onClick={() => {
+              setThumbState(thumbState === "down" ? null : "down")
+              setSelectedPills([])
+              setDetailText("")
+            }}
+            className={`p-1.5 rounded transition-colors ${
+              thumbState === "down"
+                ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+                : "hover:bg-muted text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
+          </button>
+        </div>
+      </div>
+
+      {thumbState && (
+        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
+          <div>
+            <span className="text-xs text-muted-foreground mb-2 block font-medium">
+              {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
+                <button
+                  key={pill}
+                  onClick={() => togglePill(pill)}
+                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${
+                    selectedPills.includes(pill)
+                      ? thumbState === "up"
+                        ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
+                        : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
+                      : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
+                  }`}
+                >
+                  {pill}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <textarea
+            value={detailText}
+            onChange={(e) => setDetailText(e.target.value)}
+            placeholder={thumbState === "up" ? "Add specific praise (optional)..." : "Provide specific instructions (optional)..."}
+            className="w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
+          />
+
+          <div className="flex items-center gap-2 pt-1">
+            {thumbState === "down" ? (
+              <>
+                <button
+                  onClick={handleRegenerate}
+                  disabled={selectedPills.length === 0 && detailText.length === 0}
+                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${
+                    selectedPills.length > 0 || detailText.length > 0
+                      ? "bg-foreground text-background hover:bg-foreground/90"
+                      : "bg-muted text-muted-foreground cursor-not-allowed"
+                  }`}
+                >
+                  <RefreshCw className="w-3 h-3" />
+                  Regenerate draft
+                </button>
+                <button
+                  onClick={handleDiscard}
+                  className="flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5"
+                >
+                  Discard draft
+                </button>
+              </>
+            ) : (
+              <button
+                onClick={handleSubmit}
+                className="flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent"
+              >
+                Submit feedback
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title?: string
+  description: string
+  action?: React.ReactNode
+}
+
+function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {
+  return (
+    <div data-slot="empty-state" className={cn("flex flex-col items-center justify-center py-24 gap-3", className)} {...rest}>
+      {icon && (
+        <div data-slot="empty-state-icon" className="text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12">
+          {icon}
+        </div>
+      )}
+      {title && (
+        <p data-slot="empty-state-title" className="text-sm font-medium text-muted-foreground">
+          {title}
+        </p>
+      )}
+      <p data-slot="empty-state-description" className="text-xs text-muted-foreground">
+        {description}
+      </p>
+      {action && (
+        <div data-slot="empty-state-action" className="mt-3">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { EmptyState, type EmptyStateProps }

package/src/components/filter-chip.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Filter, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  active?: boolean
+}
+
+function FilterChip({ icon, children, onClick, active, className, ...rest }: FilterChipProps) {
+  return (
+    <button
+      type="button"
+      data-slot="filter-chip"
+      data-active={active ? "" : undefined}
+      aria-pressed={active}
+      onClick={onClick}
+      className={cn(
+        "text-[11px] px-2.5 py-1 rounded-md border border-border",
+        "text-muted-foreground hover:bg-muted/30 cursor-pointer",
+        "inline-flex items-center gap-1.5 transition-colors",
+        "data-[active]:border-foreground/20 data-[active]:text-foreground",
+        className
+      )}
+      {...rest}
+    >
+      {icon ?? <Filter size={10} />}
+      {children}
+      <ChevronDown size={10} />
+    </button>
+  )
+}
+
+export { FilterChip, type FilterChipProps }

package/src/components/inline-banner.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { Info, AlertTriangle, ShieldAlert, X } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface InlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "warning" | "destructive"
+  icon?: React.ReactNode
+  onDismiss?: () => void
+}
+
+const variantConfig = {
+  info: {
+    icon: Info,
+    classes: "bg-status-info-bg border-status-info-border text-status-info-fg",
+  },
+  warning: {
+    icon: AlertTriangle,
+    classes: "bg-status-warning-bg border-status-warning-border text-status-warning-fg",
+  },
+  destructive: {
+    icon: ShieldAlert,
+    classes: "bg-status-destructive-bg border-status-destructive-border text-status-destructive-fg",
+  },
+}
+
+function InlineBanner({
+  variant = "warning",
+  icon,
+  children,
+  onDismiss,
+  className,
+  ...rest
+}: InlineBannerProps) {
+  const config = variantConfig[variant]
+  const DefaultIcon = config.icon
+
+  return (
+    <div
+      data-slot="inline-banner"
+      data-variant={variant}
+      role={variant === "destructive" || variant === "warning" ? "alert" : "status"}
+      className={cn("rounded-lg border px-3 py-2 flex items-center gap-2", config.classes, className)}
+      {...rest}
+    >
+      <span data-slot="inline-banner-icon" className="shrink-0">
+        {icon ?? <DefaultIcon size={14} />}
+      </span>
+      <div data-slot="inline-banner-content" className="flex-1 min-w-0">
+        {children}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          data-slot="inline-banner-dismiss"
+          onClick={onDismiss}
+          className="shrink-0 p-0.5 rounded hover:bg-black/5 transition-colors"
+        >
+          <X size={14} className="opacity-60" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { InlineBanner, type InlineBannerProps }

package/src/components/kbd-hint.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function KbdHint({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd-hint"
+      className={cn(
+        "inline-block text-[10px] leading-none text-muted-foreground/40 font-sans",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { KbdHint }

package/src/components/rich-text-toolbar.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type RichTextAction =
+  | "undo" | "redo"
+  | "font"
+  | "bold" | "italic" | "underline"
+  | "align" | "list"
+  | "delete"
+
+interface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onAction?: (action: RichTextAction) => void
+}
+
+function ToolbarButton({
+  action,
+  icon: Icon,
+  label,
+  extraClassName,
+  onAction,
+}: {
+  action: RichTextAction
+  icon: LucideIcon
+  label: string
+  extraClassName?: string
+  onAction?: (action: RichTextAction) => void
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="rich-text-toolbar-button"
+      onClick={() => onAction?.(action)}
+      aria-label={label}
+      className={cn("p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground", extraClassName)}
+    >
+      <Icon size={14} />
+    </button>
+  )
+}
+
+function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {
+  return (
+    <div
+      data-slot="rich-text-toolbar"
+      role="toolbar"
+      aria-label="Rich text formatting"
+      className={cn("px-3 py-1.5 flex items-center justify-between", className)}
+      {...rest}
+    >
+      <div className="flex items-center gap-0.5">
+        <ToolbarButton action="undo" icon={Undo2} label="Undo" onAction={onAction} />
+        <ToolbarButton action="redo" icon={Redo2} label="Redo" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <button
+          type="button"
+          data-slot="rich-text-toolbar-button"
+          onClick={() => onAction?.("font")}
+          aria-label="Font family"
+          aria-haspopup="true"
+          className="text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1"
+        >
+          Sans Serif
+          <ChevronDown size={10} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="bold" icon={Bold} label="Bold" onAction={onAction} />
+        <ToolbarButton action="italic" icon={Italic} label="Italic" onAction={onAction} />
+        <ToolbarButton action="underline" icon={Underline} label="Underline" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="align" icon={AlignLeft} label="Align left" onAction={onAction} />
+        <ToolbarButton action="list" icon={List} label="List" onAction={onAction} />
+      </div>
+
+      <ToolbarButton action="delete" icon={Trash2} label="Delete" extraClassName="hover:text-destructive" onAction={onAction} />
+    </div>
+  )
+}
+
+export { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }

package/src/components/step-timeline.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type StepType = "email" | "call" | "task" | "wait" | (string & {})
+
+interface TimelineStep {
+  id: string
+  type: StepType
+  label: string
+}
+
+interface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: TimelineStep[]
+  expandedStepId?: string
+  onStepClick?: (stepId: string) => void
+  onInsert?: (index: number) => void
+  renderStepBody?: (step: TimelineStep) => React.ReactNode
+  renderStepAccessory?: (step: TimelineStep) => React.ReactNode
+}
+
+const stepTypeConfig: Record<string, { icon: LucideIcon; classes: string }> = {
+  email: { icon: Mail, classes: "bg-blue-500/10 text-blue-600" },
+  call: { icon: Phone, classes: "bg-emerald-500/10 text-emerald-600" },
+  task: { icon: CheckSquare, classes: "bg-purple-500/10 text-purple-600" },
+  wait: { icon: Clock, classes: "bg-muted text-muted-foreground" },
+}
+
+const defaultStepConfig: { icon: LucideIcon; classes: string } = { icon: Circle, classes: "bg-muted text-muted-foreground" }
+
+function StepTimeline({
+  steps,
+  expandedStepId,
+  onStepClick,
+  onInsert,
+  renderStepBody,
+  renderStepAccessory,
+  className,
+  ...rest
+}: StepTimelineProps) {
+  return (
+    <div data-slot="step-timeline" className={cn("relative ml-5", className)} {...rest}>
+      <div className="absolute left-0 top-0 bottom-0 border-l-2 border-border" />
+
+      {steps.map((step, index) => {
+        const expanded = step.id === expandedStepId
+        const config = stepTypeConfig[step.type] ?? defaultStepConfig
+        const TypeIcon = config.icon
+        const isInteractive = !!(onStepClick || renderStepBody)
+        const bodyId = `step-timeline-body-${step.id}`
+
+        const headerContent = (
+          <>
+            <div className={cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.classes)}>
+              <TypeIcon size={16} />
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+                {step.type}
+              </span>
+              <span className="text-sm font-medium">{step.label}</span>
+            </div>
+          </>
+        )
+
+        return (
+          <React.Fragment key={step.id}>
+            {index > 0 && onInsert && (
+              <div className="relative pl-8 py-1">
+                <button
+                  type="button"
+                  data-slot="step-timeline-insert"
+                  onClick={() => onInsert(index)}
+                  className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+                >
+                  + Add Step
+                </button>
+              </div>
+            )}
+
+            <div data-slot="step-timeline-step" className="relative pl-8 py-2">
+              <div className="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10" />
+
+              <div data-slot="step-timeline-card" className="border border-border rounded-lg overflow-hidden">
+                {isInteractive ? (
+                  <div className="flex items-center w-full px-4 py-3 gap-3">
+                    <button
+                      type="button"
+                      aria-expanded={expanded}
+                      aria-controls={bodyId}
+                      onClick={() => onStepClick?.(step.id)}
+                      className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left"
+                    >
+                      {headerContent}
+                    </button>
+                    <div className="ml-auto flex items-center gap-2 shrink-0">
+                      {renderStepAccessory && (
+                        <div className="shrink-0">
+                          {renderStepAccessory(step)}
+                        </div>
+                      )}
+                      <div className="shrink-0 text-muted-foreground">
+                        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="w-full px-4 py-3 flex items-center gap-3">
+                    {headerContent}
+                    {renderStepAccessory && (
+                      <div className="ml-auto shrink-0">
+                        {renderStepAccessory(step)}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {expanded && renderStepBody && (
+                  <div id={bodyId} data-slot="step-timeline-body">
+                    {renderStepBody(step)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </React.Fragment>
+        )
+      })}
+
+      {onInsert && (
+        <div className="relative pl-8 py-1">
+          <button
+            type="button"
+            data-slot="step-timeline-insert"
+            onClick={() => onInsert(steps.length)}
+            className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+          >
+            + Add Step
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StepTimeline, type StepTimelineProps, type TimelineStep, type StepType }

package/src/components/sticky-action-bar.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  left?: React.ReactNode
+  right?: React.ReactNode
+  bordered?: boolean
+}
+
+function StickyActionBar({ left, right, bordered = true, className, ...rest }: StickyActionBarProps) {
+  return (
+    <div
+      data-slot="sticky-action-bar"
+      className={cn(
+        "flex items-center justify-between sticky bottom-0 bg-background",
+        bordered && "pt-3 border-t border-border/50",
+        className
+      )}
+      {...rest}
+    >
+      {left && (
+        <div data-slot="sticky-action-bar-left" className="flex items-center gap-1">
+          {left}
+        </div>
+      )}
+      {right && (
+        <div data-slot="sticky-action-bar-right" className="ml-auto flex items-center gap-2">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StickyActionBar, type StickyActionBarProps }