@handled-ai/design-system 0.8.0 → 0.9.0

package/src/components/score-breakdown.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { ThumbsUp, ThumbsDown } from "lucide-react"
+import { cn } from "../lib/utils"
+
+export interface ScoreFactor {
+  key: string
+  label: string
+  score: number | null
+  risk?: "Low" | "Medium" | "High"
+  why: string
+}
+
+function getFactorBarColor(score: number) {
+  if (score >= 70) return "bg-emerald-500"
+  if (score >= 40) return "bg-amber-500"
+  return "bg-red-500"
+}
+
+function getRiskBadgeStyle(risk: "Low" | "Medium" | "High") {
+  switch (risk) {
+    case "Low":
+      return "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30"
+    case "Medium":
+      return "text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-950/30"
+    case "High":
+      return "text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30"
+  }
+}
+
+interface ScoreBreakdownProps {
+  factors: ScoreFactor[]
+  onFactorFeedback?: (factorKey: string, type: "up" | "down" | null, detail?: string) => void
+  className?: string
+}
+
+function ScoreBreakdown({ factors, onFactorFeedback, className }: ScoreBreakdownProps) {
+  const [feedback, setFeedback] = React.useState<Record<string, "up" | "down" | null>>({})
+  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>({})
+  const [savedText, setSavedText] = React.useState<Record<string, string>>({})
+  const [editingKey, setEditingKey] = React.useState<string | null>(null)
+
+  const handleFeedback = (factorKey: string, type: "up" | "down") => {
+    const newState = feedback[factorKey] === type ? null : type
+    setFeedback((prev) => ({ ...prev, [factorKey]: newState }))
+    if (newState === null) {
+      setEditingKey(null)
+      onFactorFeedback?.(factorKey, null)
+    } else {
+      setEditingKey(factorKey)
+      onFactorFeedback?.(factorKey, newState)
+    }
+  }
+
+  const submitFeedbackText = (factorKey: string) => {
+    const text = (feedbackText[factorKey] ?? "").trim()
+    if (feedback[factorKey]) {
+      onFactorFeedback?.(factorKey, feedback[factorKey]!, text || undefined)
+      if (text) {
+        setSavedText((prev) => ({ ...prev, [factorKey]: text }))
+      }
+    }
+    setEditingKey(null)
+  }
+
+  return (
+    <div className={cn("border border-border rounded-lg overflow-hidden divide-y divide-border/40", className)}>
+      {factors.map((factor) => {
+        const feedbackState = feedback[factor.key]
+        const hasThumb = feedbackState === "up" || feedbackState === "down"
+        const isEditing = editingKey === factor.key
+        const saved = savedText[factor.key]
+
+        return (
+          <div key={factor.key} className="px-3 py-3 space-y-1.5">
+            {/* Row 1: Factor name + score + rating buttons */}
+            <div className="flex items-center gap-2">
+              <span className="text-[13px] font-semibold text-foreground flex-1">{factor.label}</span>
+
+              {factor.score !== null ? (
+                <span className="text-xs font-bold text-foreground tabular-nums">{factor.score}<span className="text-muted-foreground font-normal">/100</span></span>
+              ) : factor.risk ? (
+                <span
+                  className={cn(
+                    "text-[11px] font-semibold px-1.5 py-0.5 rounded",
+                    getRiskBadgeStyle(factor.risk)
+                  )}
+                >
+                  {factor.risk}
+                </span>
+              ) : null}
+
+              <div className="flex items-center gap-0.5 ml-1">
+                <button
+                  type="button"
+                  onClick={() => handleFeedback(factor.key, "up")}
+                  className={cn(
+                    "p-1 rounded transition-colors",
+                    feedbackState === "up"
+                      ? "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30"
+                      : "text-muted-foreground/40 hover:text-emerald-600 hover:bg-emerald-50/50"
+                  )}
+                  title="This factor is accurate"
+                >
+                  <ThumbsUp className="w-3 h-3" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleFeedback(factor.key, "down")}
+                  className={cn(
+                    "p-1 rounded transition-colors",
+                    feedbackState === "down"
+                      ? "text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30"
+                      : "text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50"
+                  )}
+                  title="Report issue with this factor"
+                >
+                  <ThumbsDown className="w-3 h-3" />
+                </button>
+              </div>
+            </div>
+
+            {/* Row 2: Score bar */}
+            {factor.score !== null && (
+              <div className="w-full h-1 bg-muted rounded-full overflow-hidden">
+                <div
+                  className={cn("h-full rounded-full", getFactorBarColor(factor.score))}
+                  style={{ width: `${factor.score}%` }}
+                />
+              </div>
+            )}
+
+            {/* Row 3: Why text */}
+            <p className="text-xs text-muted-foreground leading-relaxed">{factor.why}</p>
+
+            {/* Feedback input */}
+            {hasThumb && isEditing && (
+              <input
+                type="text"
+                autoFocus
+                value={feedbackText[factor.key] ?? ""}
+                onChange={(e) =>
+                  setFeedbackText((prev) => ({ ...prev, [factor.key]: e.target.value }))
+                }
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") submitFeedbackText(factor.key)
+                  if (e.key === "Escape") setEditingKey(null)
+                }}
+                onBlur={() => submitFeedbackText(factor.key)}
+                placeholder={
+                  feedbackState === "up"
+                    ? "What\u2019s accurate? (optional)"
+                    : "What\u2019s wrong? (optional)"
+                }
+                className="w-full h-6 rounded border border-border bg-background px-2 text-[11px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-ring"
+              />
+            )}
+            {hasThumb && !isEditing && saved && (
+              <button
+                type="button"
+                onClick={() => {
+                  setFeedbackText((prev) => ({ ...prev, [factor.key]: saved }))
+                  setEditingKey(factor.key)
+                }}
+                className="text-[11px] text-muted-foreground/70 hover:text-muted-foreground transition-colors text-left leading-snug"
+              >
+                {saved}
+              </button>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export { ScoreBreakdown }
+export type { ScoreBreakdownProps }

package/src/components/score-feedback.tsx

@@ -0,0 +1,288 @@
+"use client"
+
+import * as React from "react"
+import { ThumbsUp, ThumbsDown, Check } from "lucide-react"
+import { cn } from "../lib/utils"
+
+const positivePills = [
+  "Right timing",
+  "Accurate data",
+  "Good prospect fit",
+  "Actionable",
+]
+
+const negativePills = [
+  "Bad timing",
+  "Inaccurate data",
+  "Wrong prospect",
+  "Already handled",
+  "Not actionable",
+  "Other",
+]
+
+interface SubmittedScoreFeedback {
+  type: "up" | "down"
+  pills: string[]
+  detail: string
+}
+
+interface ScoreFeedbackState {
+  thumbState: "up" | "down" | null
+  selectedPills: string[]
+  detailText: string
+  notedType: "up" | "down" | null
+  submittedFeedback: SubmittedScoreFeedback | null
+  otherSelected: boolean
+  hasRequiredInput: boolean
+  handleThumbClick: (type: "up" | "down") => void
+  togglePill: (pill: string) => void
+  setDetailText: (text: string) => void
+  handleSubmit: () => void
+  editSubmitted: () => void
+}
+
+const ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)
+
+function useScoreFeedback() {
+  const ctx = React.useContext(ScoreFeedbackCtx)
+  if (!ctx) throw new Error("Must be used within ScoreFeedback.Root")
+  return ctx
+}
+
+interface RootProps {
+  children: React.ReactNode
+  onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
+}
+
+function Root({ children, onSubmitFeedback }: RootProps) {
+  const [thumbState, setThumbState] = React.useState<"up" | "down" | null>(null)
+  const [selectedPills, setSelectedPills] = React.useState<string[]>([])
+  const [detailText, setDetailTextState] = React.useState("")
+  const [notedType, setNotedType] = React.useState<"up" | "down" | null>(null)
+  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(null)
+
+  const otherSelected = selectedPills.includes("Other")
+
+  const hasRequiredInput =
+    thumbState === "down"
+      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)
+      : selectedPills.length > 0 || detailText.trim().length > 0
+
+  const togglePill = React.useCallback((pill: string) => {
+    setSelectedPills((prev) =>
+      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]
+    )
+  }, [])
+
+  const handleThumbClick = React.useCallback((type: "up" | "down") => {
+    setThumbState((prev) => (prev === type ? null : type))
+    setSelectedPills([])
+    setDetailTextState("")
+  }, [])
+
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return
+    onSubmitFeedback?.(thumbState, selectedPills, detailText)
+    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })
+    setNotedType(thumbState)
+    setThumbState(null)
+    setSelectedPills([])
+    setDetailTextState("")
+    setTimeout(() => setNotedType(null), 3000)
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback])
+
+  const editSubmitted = React.useCallback(() => {
+    if (!submittedFeedback) return
+    setThumbState(submittedFeedback.type)
+    setSelectedPills([...submittedFeedback.pills])
+    setDetailTextState(submittedFeedback.detail)
+    setNotedType(null)
+  }, [submittedFeedback])
+
+  return (
+    <ScoreFeedbackCtx.Provider
+      value={{
+        thumbState,
+        selectedPills,
+        detailText,
+        notedType,
+        submittedFeedback,
+        otherSelected,
+        hasRequiredInput,
+        handleThumbClick,
+        togglePill,
+        setDetailText: setDetailTextState,
+        handleSubmit,
+        editSubmitted,
+      }}
+    >
+      {children}
+    </ScoreFeedbackCtx.Provider>
+  )
+}
+
+function Trigger({ className }: { className?: string }) {
+  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()
+
+  if (notedType || (submittedFeedback && !thumbState)) {
+    return (
+      <div className={cn("shrink-0", className)}>
+        <div className="flex items-center gap-1">
+          <Check className="w-3 h-3 text-emerald-500" />
+          <span className="text-[11px] text-muted-foreground">
+            {notedType
+              ? notedType === "up" ? "Noted" : "Recorded"
+              : submittedFeedback?.type === "up" ? "Noted" : "Recorded"}
+          </span>
+        </div>
+        {submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && (
+          <button
+            type="button"
+            onClick={editSubmitted}
+            className="mt-1.5 w-full text-left space-y-1 group cursor-pointer"
+          >
+            {submittedFeedback.pills.length > 0 && (
+              <div className="flex flex-wrap gap-1">
+                {submittedFeedback.pills.map((p) => (
+                  <span
+                    key={p}
+                    className={cn(
+                      "rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80",
+                      submittedFeedback.type === "up"
+                        ? "border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70"
+                        : "border-red-200/60 bg-red-50/50 text-red-700/70"
+                    )}
+                  >
+                    {p}
+                  </span>
+                ))}
+              </div>
+            )}
+            {submittedFeedback.detail && (
+              <p className="text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors">{submittedFeedback.detail}</p>
+            )}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex gap-0.5 shrink-0", className)}>
+      <button
+        type="button"
+        onClick={() => handleThumbClick("up")}
+        className={cn(
+          "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-3.5 h-3.5" fill={thumbState === "up" ? "currentColor" : "none"} />
+      </button>
+      <button
+        type="button"
+        onClick={() => handleThumbClick("down")}
+        className={cn(
+          "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-3.5 h-3.5" fill={thumbState === "down" ? "currentColor" : "none"} />
+      </button>
+    </div>
+  )
+}
+
+function Panel({ className }: { className?: string }) {
+  const {
+    thumbState,
+    selectedPills,
+    detailText,
+    otherSelected,
+    hasRequiredInput,
+    togglePill,
+    setDetailText,
+    handleSubmit,
+  } = useScoreFeedback()
+
+  if (!thumbState) return null
+
+  return (
+    <div className={cn("overflow-hidden", className)}>
+      <div className="mt-4 pt-4 pb-1 space-y-3 border-t border-border/60">
+        <span className="text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider">
+          How&apos;s this score?
+        </span>
+        <div>
+          <span className="text-xs text-muted-foreground mb-2 block font-medium">
+            {thumbState === "up" ? "What was useful?" : "What\u2019s the issue?"}
+          </span>
+          <div className="flex flex-wrap gap-1.5">
+            {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
+              <button
+                key={pill}
+                type="button"
+                onClick={() => togglePill(pill)}
+                className={cn(
+                  "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>
+
+        <div className="space-y-1">
+          <input
+            type="text"
+            value={detailText}
+            onChange={(e) => setDetailText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && hasRequiredInput) handleSubmit()
+            }}
+            placeholder={
+              thumbState === "up"
+                ? "Tell us more (optional)"
+                : "e.g., The risk factors are outdated"
+            }
+            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-ring"
+          />
+          {otherSelected && detailText.trim().length === 0 && (
+            <span className="text-[10px] text-red-500">
+              Please describe when &ldquo;Other&rdquo; is selected
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 pt-1">
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={!hasRequiredInput}
+            className={cn(
+              "flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors",
+              hasRequiredInput
+                ? "bg-foreground text-background hover:bg-foreground/90"
+                : "bg-muted text-muted-foreground cursor-not-allowed"
+            )}
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const ScoreFeedback = { Root, Trigger, Panel }
+export { useScoreFeedback }

package/src/components/score-ring.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+function getScoreColor(score: number, denominator: number) {
+  const pct = (score / denominator) * 100
+  if (pct >= 70) return "text-emerald-500"
+  if (pct >= 40) return "text-amber-500"
+  return "text-red-500"
+}
+
+function getScoreTrackColor(score: number, denominator: number) {
+  const pct = (score / denominator) * 100
+  if (pct >= 70) return "text-emerald-500/15"
+  if (pct >= 40) return "text-amber-500/15"
+  return "text-red-500/15"
+}
+
+interface ScoreRingProps {
+  score: number
+  denominator?: number
+  size?: number
+  strokeWidth?: number
+  className?: string
+  showLabel?: boolean
+}
+
+function ScoreRing({
+  score,
+  denominator = 100,
+  size = 120,
+  strokeWidth = 10,
+  className,
+  showLabel = true,
+}: ScoreRingProps) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const pct = Math.min(score / denominator, 1)
+  const offset = circumference * (1 - pct)
+
+  return (
+    <div className={cn("relative inline-flex items-center justify-center", className)}>
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="-rotate-90"
+      >
+        {/* Track */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          className={getScoreTrackColor(score, denominator)}
+        />
+        {/* Fill */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          className={cn("transition-all duration-500", getScoreColor(score, denominator))}
+        />
+      </svg>
+      {showLabel && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span className="text-2xl font-bold text-foreground leading-none">
+            {score}
+          </span>
+          <span className="text-xs text-muted-foreground mt-0.5">
+            /{denominator}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { ScoreRing, getScoreColor }
+export type { ScoreRingProps }

package/src/components/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }