@handled-ai/design-system 0.18.20 → 0.18.22

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/dist/components/pill.d.ts

@@ -12,7 +12,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 type PillStatus = "success" | "warning" | "error" | "neutral" | "info";
 declare const pillVariants: (props?: ({
-    variant?: "error" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "info" | "neutral" | "warning" | "success" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "error" | "info" | "neutral" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PillProps extends React.ComponentProps<"span">, VariantProps<typeof pillVariants> {
 }

package/dist/components/score-breakdown.js

@@ -24,9 +24,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ThumbsUp, ThumbsDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
-import { getScoreColor } from "./score-ring.js";
+import { getScoreToneClasses } from "./score-semantics.js";
 function getFactorBarColor(score, intent = "positive") {
-  return getScoreColor(score, 100, intent).replace("text-", "bg-");
+  return getScoreToneClasses(score, intent).bar;
 }
 function getRiskBadgeStyle(risk) {
   switch (risk) {

package/dist/components/score-breakdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/score-breakdown.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport type { ScoreIntent } from \"./score-semantics\"\nimport { getScoreColor } from \"./score-ring\"\n\nexport interface ScoreFactor {\n  key: string\n  label: string\n  score: number | null\n  risk?: \"Low\" | \"Medium\" | \"High\"\n  why: string\n}\n\nfunction getFactorBarColor(score: number, intent: ScoreIntent = \"positive\") {\n  return getScoreColor(score, 100, intent).replace(\"text-\", \"bg-\")\n}\n\nfunction getRiskBadgeStyle(risk: \"Low\" | \"Medium\" | \"High\") {\n  switch (risk) {\n    case \"Low\":\n      return \"text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30\"\n    case \"Medium\":\n      return \"text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-950/30\"\n    case \"High\":\n      return \"text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30\"\n  }\n}\n\ninterface ScoreBreakdownProps {\n  factors: ScoreFactor[]\n  onFactorFeedback?: (factorKey: string, type: \"up\" | \"down\" | null, detail?: string) => void\n  className?: string\n  initialFeedback?: Record<string, { type: \"up\" | \"down\"; detail: string }>\n  scoreIntent?: ScoreIntent\n}\n\nfunction deriveInitialState<T>(\n  init: Record<string, { type: \"up\" | \"down\"; detail: string }> | undefined,\n  mapFn: (v: { type: \"up\" | \"down\"; detail: string }) => T,\n  filterFn?: (v: { type: \"up\" | \"down\"; detail: string }) => boolean,\n): Record<string, T> {\n  if (!init) return {}\n  const entries = Object.entries(init)\n  const filtered = filterFn ? entries.filter(([, v]) => filterFn(v)) : entries\n  return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))\n}\n\nfunction ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback, scoreIntent = \"positive\" }: ScoreBreakdownProps) {\n  const [feedback, setFeedback] = React.useState<Record<string, \"up\" | \"down\" | null>>(\n    () => deriveInitialState(initialFeedback, (v) => v.type)\n  )\n  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>(\n    () => deriveInitialState(initialFeedback, (v) => v.detail)\n  )\n  const [savedText, setSavedText] = React.useState<Record<string, string>>(\n    () => deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)\n  )\n  const [editingKey, setEditingKey] = React.useState<string | null>(null)\n\n  // Sync state when initialFeedback prop changes (e.g. async hydration).\n  // Skip keys the user is actively editing to avoid clobbering in-progress input.\n  React.useEffect(() => {\n    setFeedback((prev) => {\n      const next: Record<string, \"up\" | \"down\" | null> = deriveInitialState(initialFeedback, (v) => v.type)\n      // Preserve any key the user is currently editing\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n    setFeedbackText((prev) => {\n      const next = deriveInitialState(initialFeedback, (v) => v.detail)\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n    setSavedText((prev) => {\n      const next = deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- reads editingKey as guard, not trigger\n\n  const handleFeedback = (factorKey: string, type: \"up\" | \"down\") => {\n    const newState = feedback[factorKey] === type ? null : type\n    setFeedback((prev) => ({ ...prev, [factorKey]: newState }))\n    if (newState === null) {\n      setEditingKey(null)\n      onFactorFeedback?.(factorKey, null)\n    } else {\n      setEditingKey(factorKey)\n      onFactorFeedback?.(factorKey, newState)\n    }\n  }\n\n  const submitFeedbackText = (factorKey: string) => {\n    const text = (feedbackText[factorKey] ?? \"\").trim()\n    if (feedback[factorKey]) {\n      onFactorFeedback?.(factorKey, feedback[factorKey]!, text ?? \"\")\n      if (text) {\n        setSavedText((prev) => ({ ...prev, [factorKey]: text }))\n      }\n    }\n    setEditingKey(null)\n  }\n\n  return (\n    <div className={cn(\"border border-border rounded-lg overflow-hidden divide-y divide-border/40\", className)}>\n      {factors.map((factor) => {\n        const feedbackState = feedback[factor.key]\n        const hasThumb = feedbackState === \"up\" || feedbackState === \"down\"\n        const isEditing = editingKey === factor.key\n        const saved = savedText[factor.key]\n\n        return (\n          <div key={factor.key} className=\"px-3 py-3 space-y-1.5\">\n            {/* Row 1: Factor name + score + rating buttons */}\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-[13px] font-semibold text-foreground flex-1\">{factor.label}</span>\n\n              {factor.score !== null ? (\n                <span className=\"text-xs font-bold text-foreground tabular-nums\">{factor.score}<span className=\"text-muted-foreground font-normal\">/100</span></span>\n              ) : factor.risk ? (\n                <span\n                  className={cn(\n                    \"text-[11px] font-semibold px-1.5 py-0.5 rounded\",\n                    getRiskBadgeStyle(factor.risk)\n                  )}\n                >\n                  {factor.risk}\n                </span>\n              ) : null}\n\n              <div className=\"flex items-center gap-0.5 ml-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => handleFeedback(factor.key, \"up\")}\n                  className={cn(\n                    \"p-1 rounded transition-colors\",\n                    feedbackState === \"up\"\n                      ? \"text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30\"\n                      : \"text-muted-foreground/40 hover:text-emerald-600 hover:bg-emerald-50/50\"\n                  )}\n                  title=\"This factor is accurate\"\n                >\n                  <ThumbsUp className=\"w-3 h-3\" />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => handleFeedback(factor.key, \"down\")}\n                  className={cn(\n                    \"p-1 rounded transition-colors\",\n                    feedbackState === \"down\"\n                      ? \"text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30\"\n                      : \"text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50\"\n                  )}\n                  title=\"Report issue with this factor\"\n                >\n                  <ThumbsDown className=\"w-3 h-3\" />\n                </button>\n              </div>\n            </div>\n\n            {/* Row 2: Score bar */}\n            {factor.score !== null && (\n              <div className=\"w-full h-1 bg-muted rounded-full overflow-hidden\">\n                <div\n                  className={cn(\"h-full rounded-full\", getFactorBarColor(factor.score, scoreIntent))}\n                  style={{ width: `${factor.score}%` }}\n                />\n              </div>\n            )}\n\n            {/* Row 3: Why text */}\n            <p className=\"text-xs text-muted-foreground leading-relaxed\">{factor.why}</p>\n\n            {/* Feedback input */}\n            {hasThumb && isEditing && (\n              <input\n                type=\"text\"\n                autoFocus\n                value={feedbackText[factor.key] ?? \"\"}\n                onChange={(e) =>\n                  setFeedbackText((prev) => ({ ...prev, [factor.key]: e.target.value }))\n                }\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") submitFeedbackText(factor.key)\n                  if (e.key === \"Escape\") setEditingKey(null)\n                }}\n                onBlur={() => submitFeedbackText(factor.key)}\n                placeholder={\n                  feedbackState === \"up\"\n                    ? \"What\\u2019s accurate? (optional)\"\n                    : \"What\\u2019s wrong? (optional)\"\n                }\n                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\"\n              />\n            )}\n            {hasThumb && !isEditing && saved && (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setFeedbackText((prev) => ({ ...prev, [factor.key]: saved }))\n                  setEditingKey(factor.key)\n                }}\n                className=\"text-[11px] text-muted-foreground/70 hover:text-muted-foreground transition-colors text-left leading-snug\"\n              >\n                {saved}\n              </button>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ScoreBreakdown }\nexport type { ScoreBreakdownProps }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/score-breakdown.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport type { ScoreIntent } from \"./score-semantics\"\nimport { getScoreToneClasses } from \"./score-semantics\"\n\nexport interface ScoreFactor {\n  key: string\n  label: string\n  score: number | null\n  risk?: \"Low\" | \"Medium\" | \"High\"\n  why: string\n}\n\nfunction getFactorBarColor(score: number, intent: ScoreIntent = \"positive\") {\n  return getScoreToneClasses(score, intent).bar\n}\n\nfunction getRiskBadgeStyle(risk: \"Low\" | \"Medium\" | \"High\") {\n  switch (risk) {\n    case \"Low\":\n      return \"text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30\"\n    case \"Medium\":\n      return \"text-amber-600 bg-amber-50 dark:text-amber-400 dark:bg-amber-950/30\"\n    case \"High\":\n      return \"text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30\"\n  }\n}\n\ninterface ScoreBreakdownProps {\n  factors: ScoreFactor[]\n  onFactorFeedback?: (factorKey: string, type: \"up\" | \"down\" | null, detail?: string) => void\n  className?: string\n  initialFeedback?: Record<string, { type: \"up\" | \"down\"; detail: string }>\n  scoreIntent?: ScoreIntent\n}\n\nfunction deriveInitialState<T>(\n  init: Record<string, { type: \"up\" | \"down\"; detail: string }> | undefined,\n  mapFn: (v: { type: \"up\" | \"down\"; detail: string }) => T,\n  filterFn?: (v: { type: \"up\" | \"down\"; detail: string }) => boolean,\n): Record<string, T> {\n  if (!init) return {}\n  const entries = Object.entries(init)\n  const filtered = filterFn ? entries.filter(([, v]) => filterFn(v)) : entries\n  return Object.fromEntries(filtered.map(([k, v]) => [k, mapFn(v)]))\n}\n\nfunction ScoreBreakdown({ factors, onFactorFeedback, className, initialFeedback, scoreIntent = \"positive\" }: ScoreBreakdownProps) {\n  const [feedback, setFeedback] = React.useState<Record<string, \"up\" | \"down\" | null>>(\n    () => deriveInitialState(initialFeedback, (v) => v.type)\n  )\n  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>(\n    () => deriveInitialState(initialFeedback, (v) => v.detail)\n  )\n  const [savedText, setSavedText] = React.useState<Record<string, string>>(\n    () => deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)\n  )\n  const [editingKey, setEditingKey] = React.useState<string | null>(null)\n\n  // Sync state when initialFeedback prop changes (e.g. async hydration).\n  // Skip keys the user is actively editing to avoid clobbering in-progress input.\n  React.useEffect(() => {\n    setFeedback((prev) => {\n      const next: Record<string, \"up\" | \"down\" | null> = deriveInitialState(initialFeedback, (v) => v.type)\n      // Preserve any key the user is currently editing\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n    setFeedbackText((prev) => {\n      const next = deriveInitialState(initialFeedback, (v) => v.detail)\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n    setSavedText((prev) => {\n      const next = deriveInitialState(initialFeedback, (v) => v.detail, (v) => !!v.detail)\n      if (editingKey && prev[editingKey] !== undefined) {\n        next[editingKey] = prev[editingKey]\n      }\n      return next\n    })\n  }, [initialFeedback]) // eslint-disable-line react-hooks/exhaustive-deps -- reads editingKey as guard, not trigger\n\n  const handleFeedback = (factorKey: string, type: \"up\" | \"down\") => {\n    const newState = feedback[factorKey] === type ? null : type\n    setFeedback((prev) => ({ ...prev, [factorKey]: newState }))\n    if (newState === null) {\n      setEditingKey(null)\n      onFactorFeedback?.(factorKey, null)\n    } else {\n      setEditingKey(factorKey)\n      onFactorFeedback?.(factorKey, newState)\n    }\n  }\n\n  const submitFeedbackText = (factorKey: string) => {\n    const text = (feedbackText[factorKey] ?? \"\").trim()\n    if (feedback[factorKey]) {\n      onFactorFeedback?.(factorKey, feedback[factorKey]!, text ?? \"\")\n      if (text) {\n        setSavedText((prev) => ({ ...prev, [factorKey]: text }))\n      }\n    }\n    setEditingKey(null)\n  }\n\n  return (\n    <div className={cn(\"border border-border rounded-lg overflow-hidden divide-y divide-border/40\", className)}>\n      {factors.map((factor) => {\n        const feedbackState = feedback[factor.key]\n        const hasThumb = feedbackState === \"up\" || feedbackState === \"down\"\n        const isEditing = editingKey === factor.key\n        const saved = savedText[factor.key]\n\n        return (\n          <div key={factor.key} className=\"px-3 py-3 space-y-1.5\">\n            {/* Row 1: Factor name + score + rating buttons */}\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-[13px] font-semibold text-foreground flex-1\">{factor.label}</span>\n\n              {factor.score !== null ? (\n                <span className=\"text-xs font-bold text-foreground tabular-nums\">{factor.score}<span className=\"text-muted-foreground font-normal\">/100</span></span>\n              ) : factor.risk ? (\n                <span\n                  className={cn(\n                    \"text-[11px] font-semibold px-1.5 py-0.5 rounded\",\n                    getRiskBadgeStyle(factor.risk)\n                  )}\n                >\n                  {factor.risk}\n                </span>\n              ) : null}\n\n              <div className=\"flex items-center gap-0.5 ml-1\">\n                <button\n                  type=\"button\"\n                  onClick={() => handleFeedback(factor.key, \"up\")}\n                  className={cn(\n                    \"p-1 rounded transition-colors\",\n                    feedbackState === \"up\"\n                      ? \"text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30\"\n                      : \"text-muted-foreground/40 hover:text-emerald-600 hover:bg-emerald-50/50\"\n                  )}\n                  title=\"This factor is accurate\"\n                >\n                  <ThumbsUp className=\"w-3 h-3\" />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => handleFeedback(factor.key, \"down\")}\n                  className={cn(\n                    \"p-1 rounded transition-colors\",\n                    feedbackState === \"down\"\n                      ? \"text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-950/30\"\n                      : \"text-muted-foreground/40 hover:text-red-600 hover:bg-red-50/50\"\n                  )}\n                  title=\"Report issue with this factor\"\n                >\n                  <ThumbsDown className=\"w-3 h-3\" />\n                </button>\n              </div>\n            </div>\n\n            {/* Row 2: Score bar */}\n            {factor.score !== null && (\n              <div className=\"w-full h-1 bg-muted rounded-full overflow-hidden\">\n                <div\n                  className={cn(\"h-full rounded-full\", getFactorBarColor(factor.score, scoreIntent))}\n                  style={{ width: `${factor.score}%` }}\n                />\n              </div>\n            )}\n\n            {/* Row 3: Why text */}\n            <p className=\"text-xs text-muted-foreground leading-relaxed\">{factor.why}</p>\n\n            {/* Feedback input */}\n            {hasThumb && isEditing && (\n              <input\n                type=\"text\"\n                autoFocus\n                value={feedbackText[factor.key] ?? \"\"}\n                onChange={(e) =>\n                  setFeedbackText((prev) => ({ ...prev, [factor.key]: e.target.value }))\n                }\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") submitFeedbackText(factor.key)\n                  if (e.key === \"Escape\") setEditingKey(null)\n                }}\n                onBlur={() => submitFeedbackText(factor.key)}\n                placeholder={\n                  feedbackState === \"up\"\n                    ? \"What\\u2019s accurate? (optional)\"\n                    : \"What\\u2019s wrong? (optional)\"\n                }\n                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\"\n              />\n            )}\n            {hasThumb && !isEditing && saved && (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setFeedbackText((prev) => ({ ...prev, [factor.key]: saved }))\n                  setEditingKey(factor.key)\n                }}\n                className=\"text-[11px] text-muted-foreground/70 hover:text-muted-foreground transition-colors text-left leading-snug\"\n              >\n                {saved}\n              </button>\n            )}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { ScoreBreakdown }\nexport type { ScoreBreakdownProps }\n"],"mappings":"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","names":[]}

package/dist/components/score-ring.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ScoreIntent } from './score-semantics.js';
 
-declare function getScoreColor(score: number, denominator: number, intent?: ScoreIntent): "text-orange-500" | "text-red-600" | "text-amber-500" | "text-neutral-400" | "text-emerald-500" | "text-red-500";
-declare function getScoreTrackColor(score: number, denominator: number, intent?: ScoreIntent): "text-red-600/15" | "text-orange-500/15" | "text-amber-500/15" | "text-neutral-400/15" | "text-emerald-500/15" | "text-red-500/15";
+declare function getScoreColor(score: number, denominator: number, intent?: ScoreIntent): string;
+declare function getScoreTrackColor(score: number, denominator: number, intent?: ScoreIntent): string;
 interface ScoreRingProps {
     score: number;
     denominator?: number;

package/dist/components/score-ring.js

@@ -1,38 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+import { getScoreToneClasses } from "./score-semantics.js";
 function getScoreColor(score, denominator, intent = "positive") {
-  const pct = score / denominator * 100;
-  if (intent === "urgency") {
-    if (pct >= 80) return "text-red-600";
-    if (pct >= 60) return "text-orange-500";
-    if (pct >= 35) return "text-amber-500";
-    return "text-neutral-400";
-  }
-  if (intent === "risk") {
-    if (pct >= 70) return "text-red-600";
-    if (pct >= 40) return "text-amber-500";
-    return "text-neutral-400";
-  }
-  if (pct >= 70) return "text-emerald-500";
-  if (pct >= 40) return "text-amber-500";
-  return "text-red-500";
+  return getScoreToneClasses(score / denominator * 100, intent).text;
 }
 function getScoreTrackColor(score, denominator, intent = "positive") {
-  const pct = score / denominator * 100;
-  if (intent === "urgency") {
-    if (pct >= 80) return "text-red-600/15";
-    if (pct >= 60) return "text-orange-500/15";
-    if (pct >= 35) return "text-amber-500/15";
-    return "text-neutral-400/15";
-  }
-  if (intent === "risk") {
-    if (pct >= 70) return "text-red-600/15";
-    if (pct >= 40) return "text-amber-500/15";
-    return "text-neutral-400/15";
-  }
-  if (pct >= 70) return "text-emerald-500/15";
-  if (pct >= 40) return "text-amber-500/15";
-  return "text-red-500/15";
+  return getScoreToneClasses(score / denominator * 100, intent).track;
 }
 function ScoreRing({
   score,

package/dist/components/score-ring.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/score-ring.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport type { ScoreIntent } from \"./score-semantics\"\n\nfunction getScoreColor(score: number, denominator: number, intent: ScoreIntent = \"positive\") {\n  const pct = (score / denominator) * 100\n\n  if (intent === \"urgency\") {\n    if (pct >= 80) return \"text-red-600\"\n    if (pct >= 60) return \"text-orange-500\"\n    if (pct >= 35) return \"text-amber-500\"\n    return \"text-neutral-400\"\n  }\n\n  if (intent === \"risk\") {\n    if (pct >= 70) return \"text-red-600\"\n    if (pct >= 40) return \"text-amber-500\"\n    return \"text-neutral-400\"\n  }\n\n  if (pct >= 70) return \"text-emerald-500\"\n  if (pct >= 40) return \"text-amber-500\"\n  return \"text-red-500\"\n}\n\nfunction getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = \"positive\") {\n  const pct = (score / denominator) * 100\n\n  if (intent === \"urgency\") {\n    if (pct >= 80) return \"text-red-600/15\"\n    if (pct >= 60) return \"text-orange-500/15\"\n    if (pct >= 35) return \"text-amber-500/15\"\n    return \"text-neutral-400/15\"\n  }\n\n  if (intent === \"risk\") {\n    if (pct >= 70) return \"text-red-600/15\"\n    if (pct >= 40) return \"text-amber-500/15\"\n    return \"text-neutral-400/15\"\n  }\n\n  if (pct >= 70) return \"text-emerald-500/15\"\n  if (pct >= 40) return \"text-amber-500/15\"\n  return \"text-red-500/15\"\n}\n\ninterface ScoreRingProps {\n  score: number\n  denominator?: number\n  size?: number\n  strokeWidth?: number\n  className?: string\n  showLabel?: boolean\n  intent?: ScoreIntent\n}\n\nfunction ScoreRing({\n  score,\n  denominator = 100,\n  size = 120,\n  strokeWidth = 10,\n  className,\n  showLabel = true,\n  intent = \"positive\",\n}: ScoreRingProps) {\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const pct = Math.min(score / denominator, 1)\n  const offset = circumference * (1 - pct)\n\n  return (\n    <div className={cn(\"relative inline-flex items-center justify-center\", className)}>\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        className=\"-rotate-90\"\n      >\n        {/* Track */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          className={getScoreTrackColor(score, denominator, intent)}\n        />\n        {/* Fill */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={cn(\"transition-all duration-500\", getScoreColor(score, denominator, intent))}\n        />\n      </svg>\n      {showLabel && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n          <span className=\"text-2xl font-bold text-foreground leading-none\">\n            {score}\n          </span>\n          <span className=\"text-xs text-muted-foreground mt-0.5\">\n            /{denominator}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { ScoreRing, getScoreColor, getScoreTrackColor }\nexport type { ScoreRingProps }\n"],"mappings":"AAwEM,SAOE,KAPF;AAvEN,SAAS,UAAU;AAGnB,SAAS,cAAc,OAAe,aAAqB,SAAsB,YAAY;AAC3F,QAAM,MAAO,QAAQ,cAAe;AAEpC,MAAI,WAAW,WAAW;AACxB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ;AACrB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,GAAI,QAAO;AACtB,MAAI,OAAO,GAAI,QAAO;AACtB,SAAO;AACT;AAEA,SAAS,mBAAmB,OAAe,aAAqB,SAAsB,YAAY;AAChG,QAAM,MAAO,QAAQ,cAAe;AAEpC,MAAI,WAAW,WAAW;AACxB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,QAAQ;AACrB,QAAI,OAAO,GAAI,QAAO;AACtB,QAAI,OAAO,GAAI,QAAO;AACtB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,GAAI,QAAO;AACtB,MAAI,OAAO,GAAI,QAAO;AACtB,SAAO;AACT;AAYA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAAmB;AACjB,QAAM,UAAU,OAAO,eAAe;AACtC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,MAAM,KAAK,IAAI,QAAQ,aAAa,CAAC;AAC3C,QAAM,SAAS,iBAAiB,IAAI;AAEpC,SACE,qBAAC,SAAI,WAAW,GAAG,oDAAoD,SAAS,GAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,OAAO,IAAI,IAAI,IAAI;AAAA,QAC5B,WAAU;AAAA,QAGV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,IAAI,OAAO;AAAA,cACX,GAAG;AAAA,cACH,MAAK;AAAA,cACL,QAAO;AAAA,cACP;AAAA,cACA,WAAW,mBAAmB,OAAO,aAAa,MAAM;AAAA;AAAA,UAC1D;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,IAAI,OAAO;AAAA,cACX,GAAG;AAAA,cACH,MAAK;AAAA,cACL,QAAO;AAAA,cACP;AAAA,cACA,eAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,kBAAkB;AAAA,cAClB,WAAW,GAAG,+BAA+B,cAAc,OAAO,aAAa,MAAM,CAAC;AAAA;AAAA,UACxF;AAAA;AAAA;AAAA,IACF;AAAA,IACC,aACC,qBAAC,SAAI,WAAU,8DACb;AAAA,0BAAC,UAAK,WAAU,mDACb,iBACH;AAAA,MACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,QACnD;AAAA,SACJ;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/score-ring.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\nimport type { ScoreIntent } from \"./score-semantics\"\nimport { getScoreToneClasses } from \"./score-semantics\"\n\nfunction getScoreColor(score: number, denominator: number, intent: ScoreIntent = \"positive\") {\n  return getScoreToneClasses((score / denominator) * 100, intent).text\n}\n\nfunction getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = \"positive\") {\n  return getScoreToneClasses((score / denominator) * 100, intent).track\n}\n\ninterface ScoreRingProps {\n  score: number\n  denominator?: number\n  size?: number\n  strokeWidth?: number\n  className?: string\n  showLabel?: boolean\n  intent?: ScoreIntent\n}\n\nfunction ScoreRing({\n  score,\n  denominator = 100,\n  size = 120,\n  strokeWidth = 10,\n  className,\n  showLabel = true,\n  intent = \"positive\",\n}: ScoreRingProps) {\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const pct = Math.min(score / denominator, 1)\n  const offset = circumference * (1 - pct)\n\n  return (\n    <div className={cn(\"relative inline-flex items-center justify-center\", className)}>\n      <svg\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        className=\"-rotate-90\"\n      >\n        {/* Track */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          className={getScoreTrackColor(score, denominator, intent)}\n        />\n        {/* Fill */}\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          className={cn(\"transition-all duration-500\", getScoreColor(score, denominator, intent))}\n        />\n      </svg>\n      {showLabel && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n          <span className=\"text-2xl font-bold text-foreground leading-none\">\n            {score}\n          </span>\n          <span className=\"text-xs text-muted-foreground mt-0.5\">\n            /{denominator}\n          </span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { ScoreRing, getScoreColor, getScoreTrackColor }\nexport type { ScoreRingProps }\n"],"mappings":"AAuCM,SAOE,KAPF;AAtCN,SAAS,UAAU;AAEnB,SAAS,2BAA2B;AAEpC,SAAS,cAAc,OAAe,aAAqB,SAAsB,YAAY;AAC3F,SAAO,oBAAqB,QAAQ,cAAe,KAAK,MAAM,EAAE;AAClE;AAEA,SAAS,mBAAmB,OAAe,aAAqB,SAAsB,YAAY;AAChG,SAAO,oBAAqB,QAAQ,cAAe,KAAK,MAAM,EAAE;AAClE;AAYA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAAmB;AACjB,QAAM,UAAU,OAAO,eAAe;AACtC,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,MAAM,KAAK,IAAI,QAAQ,aAAa,CAAC;AAC3C,QAAM,SAAS,iBAAiB,IAAI;AAEpC,SACE,qBAAC,SAAI,WAAW,GAAG,oDAAoD,SAAS,GAC9E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS,OAAO,IAAI,IAAI,IAAI;AAAA,QAC5B,WAAU;AAAA,QAGV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,IAAI,OAAO;AAAA,cACX,GAAG;AAAA,cACH,MAAK;AAAA,cACL,QAAO;AAAA,cACP;AAAA,cACA,WAAW,mBAAmB,OAAO,aAAa,MAAM;AAAA;AAAA,UAC1D;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cACX,IAAI,OAAO;AAAA,cACX,GAAG;AAAA,cACH,MAAK;AAAA,cACL,QAAO;AAAA,cACP;AAAA,cACA,eAAc;AAAA,cACd,iBAAiB;AAAA,cACjB,kBAAkB;AAAA,cAClB,WAAW,GAAG,+BAA+B,cAAc,OAAO,aAAa,MAAM,CAAC;AAAA;AAAA,UACxF;AAAA;AAAA;AAAA,IACF;AAAA,IACC,aACC,qBAAC,SAAI,WAAU,8DACb;AAAA,0BAAC,UAAK,WAAU,mDACb,iBACH;AAAA,MACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,QACnD;AAAA,SACJ;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/score-semantics.d.ts

@@ -9,6 +9,9 @@ type ScoreSemanticClasses = {
     trigger: string;
     hover: string;
     open: string;
+    text: string;
+    track: string;
+    bar: string;
 };
 declare const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses>;
 declare const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses>;

package/dist/components/score-semantics.js

@@ -5,7 +5,10 @@ const URGENCY_SCORE_CLASSES = {
     dot: "bg-red-600",
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
-    open: "bg-red-100"
+    open: "bg-red-100",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600"
   },
   High: {
     solid: "bg-orange-500 text-white",
@@ -13,7 +16,10 @@ const URGENCY_SCORE_CLASSES = {
     dot: "bg-orange-500",
     trigger: "border-orange-300 bg-orange-50 text-orange-800",
     hover: "hover:bg-orange-100",
-    open: "bg-orange-100"
+    open: "bg-orange-100",
+    text: "text-orange-500",
+    track: "text-orange-500/15",
+    bar: "bg-orange-500"
   },
   Medium: {
     solid: "bg-amber-500 text-white",
@@ -21,7 +27,10 @@ const URGENCY_SCORE_CLASSES = {
     dot: "bg-amber-500",
     trigger: "border-amber-300 bg-amber-50 text-amber-800",
     hover: "hover:bg-amber-100",
-    open: "bg-amber-100"
+    open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500"
   },
   Low: {
     solid: "bg-neutral-300 text-neutral-900",
@@ -29,7 +38,10 @@ const URGENCY_SCORE_CLASSES = {
     dot: "bg-neutral-400",
     trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
     hover: "hover:bg-neutral-100",
-    open: "bg-neutral-100"
+    open: "bg-neutral-100",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400"
   }
 };
 const RISK_SCORE_CLASSES = {
@@ -39,15 +51,21 @@ const RISK_SCORE_CLASSES = {
     dot: "bg-red-600",
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
-    open: "bg-red-100"
+    open: "bg-red-100",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600"
   },
   "Medium Risk": {
-    solid: "bg-orange-500 text-white",
-    outline: "border-orange-300 bg-orange-50 text-orange-800",
-    dot: "bg-orange-500",
-    trigger: "border-orange-300 bg-orange-50 text-orange-800",
-    hover: "hover:bg-orange-100",
-    open: "bg-orange-100"
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500"
   },
   "Low Risk": {
     solid: "bg-neutral-300 text-neutral-900",
@@ -55,7 +73,10 @@ const RISK_SCORE_CLASSES = {
     dot: "bg-neutral-400",
     trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
     hover: "hover:bg-neutral-100",
-    open: "bg-neutral-100"
+    open: "bg-neutral-100",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400"
   }
 };
 const POSITIVE_SCORE_CLASSES = {
@@ -65,7 +86,10 @@ const POSITIVE_SCORE_CLASSES = {
     dot: "bg-emerald-500",
     trigger: "border-emerald-300 bg-emerald-50 text-emerald-800",
     hover: "hover:bg-emerald-100",
-    open: "bg-emerald-100"
+    open: "bg-emerald-100",
+    text: "text-emerald-500",
+    track: "text-emerald-500/15",
+    bar: "bg-emerald-500"
   },
   Medium: {
     solid: "bg-amber-500 text-white",
@@ -73,7 +97,10 @@ const POSITIVE_SCORE_CLASSES = {
     dot: "bg-amber-500",
     trigger: "border-amber-300 bg-amber-50 text-amber-800",
     hover: "hover:bg-amber-100",
-    open: "bg-amber-100"
+    open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500"
   },
   Low: {
     solid: "bg-red-500 text-white",
@@ -81,7 +108,10 @@ const POSITIVE_SCORE_CLASSES = {
     dot: "bg-red-500",
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
-    open: "bg-red-100"
+    open: "bg-red-100",
+    text: "text-red-500",
+    track: "text-red-500/15",
+    bar: "bg-red-500"
   }
 };
 const SCORE_TONE_CLASSES = {

package/dist/components/score-semantics.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/score-semantics.ts"],"sourcesContent":["export type ScoreIntent = \"urgency\" | \"risk\" | \"positive\"\n\nexport type UrgencyLevel = \"Low\" | \"Medium\" | \"High\" | \"Urgent\"\nexport type RiskLevel = \"Low Risk\" | \"Medium Risk\" | \"High Risk\"\nexport type PositiveLevel = \"Low\" | \"Medium\" | \"High\"\n\nexport type ScoreSemanticClasses = {\n  solid: string\n  outline: string\n  dot: string\n  trigger: string\n  hover: string\n  open: string\n}\n\nexport const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> = {\n  Urgent: {\n    solid: \"bg-red-600 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-600\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n  },\n  High: {\n    solid: \"bg-orange-500 text-white\",\n    outline: \"border-orange-300 bg-orange-50 text-orange-800\",\n    dot: \"bg-orange-500\",\n    trigger: \"border-orange-300 bg-orange-50 text-orange-800\",\n    hover: \"hover:bg-orange-100\",\n    open: \"bg-orange-100\",\n  },\n  Medium: {\n    solid: \"bg-amber-500 text-white\",\n    outline: \"border-amber-300 bg-amber-50 text-amber-800\",\n    dot: \"bg-amber-500\",\n    trigger: \"border-amber-300 bg-amber-50 text-amber-800\",\n    hover: \"hover:bg-amber-100\",\n    open: \"bg-amber-100\",\n  },\n  Low: {\n    solid: \"bg-neutral-300 text-neutral-900\",\n    outline: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    dot: \"bg-neutral-400\",\n    trigger: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    hover: \"hover:bg-neutral-100\",\n    open: \"bg-neutral-100\",\n  },\n}\n\nexport const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {\n  \"High Risk\": {\n    solid: \"bg-red-600 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-600\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n  },\n  \"Medium Risk\": {\n    solid: \"bg-orange-500 text-white\",\n    outline: \"border-orange-300 bg-orange-50 text-orange-800\",\n    dot: \"bg-orange-500\",\n    trigger: \"border-orange-300 bg-orange-50 text-orange-800\",\n    hover: \"hover:bg-orange-100\",\n    open: \"bg-orange-100\",\n  },\n  \"Low Risk\": {\n    solid: \"bg-neutral-300 text-neutral-900\",\n    outline: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    dot: \"bg-neutral-400\",\n    trigger: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    hover: \"hover:bg-neutral-100\",\n    open: \"bg-neutral-100\",\n  },\n}\n\nexport const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses> = {\n  High: {\n    solid: \"bg-emerald-500 text-white\",\n    outline: \"border-emerald-300 bg-emerald-50 text-emerald-800\",\n    dot: \"bg-emerald-500\",\n    trigger: \"border-emerald-300 bg-emerald-50 text-emerald-800\",\n    hover: \"hover:bg-emerald-100\",\n    open: \"bg-emerald-100\",\n  },\n  Medium: {\n    solid: \"bg-amber-500 text-white\",\n    outline: \"border-amber-300 bg-amber-50 text-amber-800\",\n    dot: \"bg-amber-500\",\n    trigger: \"border-amber-300 bg-amber-50 text-amber-800\",\n    hover: \"hover:bg-amber-100\",\n    open: \"bg-amber-100\",\n  },\n  Low: {\n    solid: \"bg-red-500 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-500\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n  },\n}\n\nexport const SCORE_TONE_CLASSES: Record<string, string> = {\n  alert: \"bg-red-50 text-red-600\",\n  warn: \"bg-amber-50 text-amber-600\",\n  info: \"bg-blue-50 text-blue-600\",\n}\n\nexport const DEFAULT_SCORE_TONE_CLASS = \"bg-muted text-muted-foreground\"\n\nexport function getUrgencyLevel(score: number): UrgencyLevel {\n  if (score >= 80) return \"Urgent\"\n  if (score >= 60) return \"High\"\n  if (score >= 35) return \"Medium\"\n  return \"Low\"\n}\n\nexport function getUrgencyRange(label: UrgencyLevel): string {\n  switch (label) {\n    case \"Urgent\":\n      return \"80-100\"\n    case \"High\":\n      return \"60-79\"\n    case \"Medium\":\n      return \"35-59\"\n    case \"Low\":\n      return \"0-34\"\n  }\n}\n\nexport function getRiskLevel(score: number): RiskLevel {\n  if (score >= 70) return \"High Risk\"\n  if (score >= 40) return \"Medium Risk\"\n  return \"Low Risk\"\n}\n\nexport function getPositiveLevel(score: number): PositiveLevel {\n  if (score >= 70) return \"High\"\n  if (score >= 40) return \"Medium\"\n  return \"Low\"\n}\n\nexport function getScoreToneClasses(score: number, intent: ScoreIntent): ScoreSemanticClasses {\n  switch (intent) {\n    case \"urgency\":\n      return URGENCY_SCORE_CLASSES[getUrgencyLevel(score)]\n    case \"risk\":\n      return RISK_SCORE_CLASSES[getRiskLevel(score)]\n    case \"positive\":\n      return POSITIVE_SCORE_CLASSES[getPositiveLevel(score)]\n  }\n}\n"],"mappings":"AAeO,MAAM,wBAAoE;AAAA,EAC/E,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,qBAA8D;AAAA,EACzE,aAAa;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,yBAAsE;AAAA,EACjF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,KAAK;AAAA,IACH,OAAO;AAAA,IACP,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,qBAA6C;AAAA,EACxD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,2BAA2B;AAEjC,SAAS,gBAAgB,OAA6B;AAC3D,MAAI,SAAS,GAAI,QAAO;AACxB,MAAI,SAAS,GAAI,QAAO;AACxB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEO,SAAS,gBAAgB,OAA6B;AAC3D,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EACX;AACF;AAEO,SAAS,aAAa,OAA0B;AACrD,MAAI,SAAS,GAAI,QAAO;AACxB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEO,SAAS,iBAAiB,OAA8B;AAC7D,MAAI,SAAS,GAAI,QAAO;AACxB,MAAI,SAAS,GAAI,QAAO;AACxB,SAAO;AACT;AAEO,SAAS,oBAAoB,OAAe,QAA2C;AAC5F,UAAQ,QAAQ;AAAA,IACd,KAAK;AACH,aAAO,sBAAsB,gBAAgB,KAAK,CAAC;AAAA,IACrD,KAAK;AACH,aAAO,mBAAmB,aAAa,KAAK,CAAC;AAAA,IAC/C,KAAK;AACH,aAAO,uBAAuB,iBAAiB,KAAK,CAAC;AAAA,EACzD;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/score-semantics.ts"],"sourcesContent":["export type ScoreIntent = \"urgency\" | \"risk\" | \"positive\"\n\nexport type UrgencyLevel = \"Low\" | \"Medium\" | \"High\" | \"Urgent\"\nexport type RiskLevel = \"Low Risk\" | \"Medium Risk\" | \"High Risk\"\nexport type PositiveLevel = \"Low\" | \"Medium\" | \"High\"\n\nexport type ScoreSemanticClasses = {\n  solid: string\n  outline: string\n  dot: string\n  trigger: string\n  hover: string\n  open: string\n  text: string\n  track: string\n  bar: string\n}\n\nexport const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> = {\n  Urgent: {\n    solid: \"bg-red-600 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-600\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n    text: \"text-red-600\",\n    track: \"text-red-600/15\",\n    bar: \"bg-red-600\",\n  },\n  High: {\n    solid: \"bg-orange-500 text-white\",\n    outline: \"border-orange-300 bg-orange-50 text-orange-800\",\n    dot: \"bg-orange-500\",\n    trigger: \"border-orange-300 bg-orange-50 text-orange-800\",\n    hover: \"hover:bg-orange-100\",\n    open: \"bg-orange-100\",\n    text: \"text-orange-500\",\n    track: \"text-orange-500/15\",\n    bar: \"bg-orange-500\",\n  },\n  Medium: {\n    solid: \"bg-amber-500 text-white\",\n    outline: \"border-amber-300 bg-amber-50 text-amber-800\",\n    dot: \"bg-amber-500\",\n    trigger: \"border-amber-300 bg-amber-50 text-amber-800\",\n    hover: \"hover:bg-amber-100\",\n    open: \"bg-amber-100\",\n    text: \"text-amber-500\",\n    track: \"text-amber-500/15\",\n    bar: \"bg-amber-500\",\n  },\n  Low: {\n    solid: \"bg-neutral-300 text-neutral-900\",\n    outline: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    dot: \"bg-neutral-400\",\n    trigger: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    hover: \"hover:bg-neutral-100\",\n    open: \"bg-neutral-100\",\n    text: \"text-neutral-400\",\n    track: \"text-neutral-400/15\",\n    bar: \"bg-neutral-400\",\n  },\n}\n\nexport const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {\n  \"High Risk\": {\n    solid: \"bg-red-600 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-600\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n    text: \"text-red-600\",\n    track: \"text-red-600/15\",\n    bar: \"bg-red-600\",\n  },\n  \"Medium Risk\": {\n    solid: \"bg-amber-500 text-white\",\n    outline: \"border-amber-300 bg-amber-50 text-amber-800\",\n    dot: \"bg-amber-500\",\n    trigger: \"border-amber-300 bg-amber-50 text-amber-800\",\n    hover: \"hover:bg-amber-100\",\n    open: \"bg-amber-100\",\n    text: \"text-amber-500\",\n    track: \"text-amber-500/15\",\n    bar: \"bg-amber-500\",\n  },\n  \"Low Risk\": {\n    solid: \"bg-neutral-300 text-neutral-900\",\n    outline: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    dot: \"bg-neutral-400\",\n    trigger: \"border-neutral-200 bg-neutral-50 text-neutral-700\",\n    hover: \"hover:bg-neutral-100\",\n    open: \"bg-neutral-100\",\n    text: \"text-neutral-400\",\n    track: \"text-neutral-400/15\",\n    bar: \"bg-neutral-400\",\n  },\n}\n\nexport const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses> = {\n  High: {\n    solid: \"bg-emerald-500 text-white\",\n    outline: \"border-emerald-300 bg-emerald-50 text-emerald-800\",\n    dot: \"bg-emerald-500\",\n    trigger: \"border-emerald-300 bg-emerald-50 text-emerald-800\",\n    hover: \"hover:bg-emerald-100\",\n    open: \"bg-emerald-100\",\n    text: \"text-emerald-500\",\n    track: \"text-emerald-500/15\",\n    bar: \"bg-emerald-500\",\n  },\n  Medium: {\n    solid: \"bg-amber-500 text-white\",\n    outline: \"border-amber-300 bg-amber-50 text-amber-800\",\n    dot: \"bg-amber-500\",\n    trigger: \"border-amber-300 bg-amber-50 text-amber-800\",\n    hover: \"hover:bg-amber-100\",\n    open: \"bg-amber-100\",\n    text: \"text-amber-500\",\n    track: \"text-amber-500/15\",\n    bar: \"bg-amber-500\",\n  },\n  Low: {\n    solid: \"bg-red-500 text-white\",\n    outline: \"border-red-300 bg-red-50 text-red-800\",\n    dot: \"bg-red-500\",\n    trigger: \"border-red-300 bg-red-50 text-red-800\",\n    hover: \"hover:bg-red-100\",\n    open: \"bg-red-100\",\n    text: \"text-red-500\",\n    track: \"text-red-500/15\",\n    bar: \"bg-red-500\",\n  },\n}\n\nexport const SCORE_TONE_CLASSES: Record<string, string> = {\n  alert: \"bg-red-50 text-red-600\",\n  warn: \"bg-amber-50 text-amber-600\",\n  info: \"bg-blue-50 text-blue-600\",\n}\n\nexport const DEFAULT_SCORE_TONE_CLASS = \"bg-muted text-muted-foreground\"\n\nexport function getUrgencyLevel(score: number): UrgencyLevel {\n  if (score >= 80) return \"Urgent\"\n  if (score >= 60) return \"High\"\n  if (score >= 35) return \"Medium\"\n  return \"Low\"\n}\n\nexport function getUrgencyRange(label: UrgencyLevel): string {\n  switch (label) {\n    case \"Urgent\":\n      return \"80-100\"\n    case \"High\":\n      return \"60-79\"\n    case \"Medium\":\n      return \"35-59\"\n    case \"Low\":\n      return \"0-34\"\n  }\n}\n\nexport function getRiskLevel(score: number): RiskLevel {\n  if (score >= 70) return \"High Risk\"\n  if (score >= 40) return \"Medium Risk\"\n  return \"Low Risk\"\n}\n\nexport function getPositiveLevel(score: number): PositiveLevel {\n  if (score >= 70) return \"High\"\n  if (score >= 40) return \"Medium\"\n  return \"Low\"\n}\n\nexport function getScoreToneClasses(score: number, intent: ScoreIntent): ScoreSemanticClasses {\n  switch (intent) {\n    case \"urgency\":\n      return URGENCY_SCORE_CLASSES[getUrgencyLevel(score)]\n    case \"risk\":\n      return RISK_SCORE_CLASSES[getRiskLevel(score)]\n    case \"positive\":\n      return POSITIVE_SCORE_CLASSES[getPositiveLevel(score)]\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components/tabs.d.ts

@@ -5,7 +5,7 @@ import { Tabs as Tabs$1 } from 'radix-ui';
 
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
 declare const tabsListVariants: (props?: ({
-    variant?: "line" | "default" | null | undefined;
+    variant?: "default" | "line" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.20",
+  "version": "0.18.22",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/__tests__/score-semantics.test.ts

@@ -32,23 +32,29 @@ describe("score semantics", () => {
   })
 
   it("uses the approved urgency palette", () => {
-    expect(URGENCY_SCORE_CLASSES.Urgent).toEqual({
+    expect(URGENCY_SCORE_CLASSES.Urgent).toMatchObject({
       solid: "bg-red-600 text-white",
       outline: "border-red-300 bg-red-50 text-red-800",
       dot: "bg-red-600",
       trigger: "border-red-300 bg-red-50 text-red-800",
       hover: "hover:bg-red-100",
       open: "bg-red-100",
+      text: "text-red-600",
+      track: "text-red-600/15",
+      bar: "bg-red-600",
     })
     expect(URGENCY_SCORE_CLASSES.High.trigger).toBe("border-orange-300 bg-orange-50 text-orange-800")
     expect(URGENCY_SCORE_CLASSES.Medium.dot).toBe("bg-amber-500")
-    expect(URGENCY_SCORE_CLASSES.Low).toEqual({
+    expect(URGENCY_SCORE_CLASSES.Low).toMatchObject({
       solid: "bg-neutral-300 text-neutral-900",
       outline: "border-neutral-200 bg-neutral-50 text-neutral-700",
       dot: "bg-neutral-400",
       trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
       hover: "hover:bg-neutral-100",
       open: "bg-neutral-100",
+      text: "text-neutral-400",
+      track: "text-neutral-400/15",
+      bar: "bg-neutral-400",
     })
   })
 
@@ -59,7 +65,7 @@ describe("score semantics", () => {
     expect(getRiskLevel(69)).toBe("Medium Risk")
     expect(getRiskLevel(70)).toBe("High Risk")
     expect(RISK_SCORE_CLASSES["High Risk"].solid).toBe("bg-red-600 text-white")
-    expect(RISK_SCORE_CLASSES["Medium Risk"].dot).toBe("bg-orange-500")
+    expect(RISK_SCORE_CLASSES["Medium Risk"].dot).toBe("bg-amber-500")
     expect(RISK_SCORE_CLASSES["Low Risk"].trigger).toBe("border-neutral-200 bg-neutral-50 text-neutral-700")
   })
 

package/src/components/score-breakdown.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { ThumbsUp, ThumbsDown } from "lucide-react"
 import { cn } from "../lib/utils"
 import type { ScoreIntent } from "./score-semantics"
-import { getScoreColor } from "./score-ring"
+import { getScoreToneClasses } from "./score-semantics"
 
 export interface ScoreFactor {
   key: string
@@ -15,7 +15,7 @@ export interface ScoreFactor {
 }
 
 function getFactorBarColor(score: number, intent: ScoreIntent = "positive") {
-  return getScoreColor(score, 100, intent).replace("text-", "bg-")
+  return getScoreToneClasses(score, intent).bar
 }
 
 function getRiskBadgeStyle(risk: "Low" | "Medium" | "High") {

package/src/components/score-ring.tsx

@@ -1,47 +1,14 @@
 import * as React from "react"
 import { cn } from "../lib/utils"
 import type { ScoreIntent } from "./score-semantics"
+import { getScoreToneClasses } from "./score-semantics"
 
 function getScoreColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
-  const pct = (score / denominator) * 100
-
-  if (intent === "urgency") {
-    if (pct >= 80) return "text-red-600"
-    if (pct >= 60) return "text-orange-500"
-    if (pct >= 35) return "text-amber-500"
-    return "text-neutral-400"
-  }
-
-  if (intent === "risk") {
-    if (pct >= 70) return "text-red-600"
-    if (pct >= 40) return "text-amber-500"
-    return "text-neutral-400"
-  }
-
-  if (pct >= 70) return "text-emerald-500"
-  if (pct >= 40) return "text-amber-500"
-  return "text-red-500"
+  return getScoreToneClasses((score / denominator) * 100, intent).text
 }
 
 function getScoreTrackColor(score: number, denominator: number, intent: ScoreIntent = "positive") {
-  const pct = (score / denominator) * 100
-
-  if (intent === "urgency") {
-    if (pct >= 80) return "text-red-600/15"
-    if (pct >= 60) return "text-orange-500/15"
-    if (pct >= 35) return "text-amber-500/15"
-    return "text-neutral-400/15"
-  }
-
-  if (intent === "risk") {
-    if (pct >= 70) return "text-red-600/15"
-    if (pct >= 40) return "text-amber-500/15"
-    return "text-neutral-400/15"
-  }
-
-  if (pct >= 70) return "text-emerald-500/15"
-  if (pct >= 40) return "text-amber-500/15"
-  return "text-red-500/15"
+  return getScoreToneClasses((score / denominator) * 100, intent).track
 }
 
 interface ScoreRingProps {

package/src/components/score-semantics.ts

@@ -11,6 +11,9 @@ export type ScoreSemanticClasses = {
   trigger: string
   hover: string
   open: string
+  text: string
+  track: string
+  bar: string
 }
 
 export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> = {
@@ -21,6 +24,9 @@ export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> =
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
     open: "bg-red-100",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600",
   },
   High: {
     solid: "bg-orange-500 text-white",
@@ -29,6 +35,9 @@ export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> =
     trigger: "border-orange-300 bg-orange-50 text-orange-800",
     hover: "hover:bg-orange-100",
     open: "bg-orange-100",
+    text: "text-orange-500",
+    track: "text-orange-500/15",
+    bar: "bg-orange-500",
   },
   Medium: {
     solid: "bg-amber-500 text-white",
@@ -37,6 +46,9 @@ export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> =
     trigger: "border-amber-300 bg-amber-50 text-amber-800",
     hover: "hover:bg-amber-100",
     open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
   },
   Low: {
     solid: "bg-neutral-300 text-neutral-900",
@@ -45,6 +57,9 @@ export const URGENCY_SCORE_CLASSES: Record<UrgencyLevel, ScoreSemanticClasses> =
     trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
     hover: "hover:bg-neutral-100",
     open: "bg-neutral-100",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400",
   },
 }
 
@@ -56,14 +71,20 @@ export const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
     open: "bg-red-100",
+    text: "text-red-600",
+    track: "text-red-600/15",
+    bar: "bg-red-600",
   },
   "Medium Risk": {
-    solid: "bg-orange-500 text-white",
-    outline: "border-orange-300 bg-orange-50 text-orange-800",
-    dot: "bg-orange-500",
-    trigger: "border-orange-300 bg-orange-50 text-orange-800",
-    hover: "hover:bg-orange-100",
-    open: "bg-orange-100",
+    solid: "bg-amber-500 text-white",
+    outline: "border-amber-300 bg-amber-50 text-amber-800",
+    dot: "bg-amber-500",
+    trigger: "border-amber-300 bg-amber-50 text-amber-800",
+    hover: "hover:bg-amber-100",
+    open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
   },
   "Low Risk": {
     solid: "bg-neutral-300 text-neutral-900",
@@ -72,6 +93,9 @@ export const RISK_SCORE_CLASSES: Record<RiskLevel, ScoreSemanticClasses> = {
     trigger: "border-neutral-200 bg-neutral-50 text-neutral-700",
     hover: "hover:bg-neutral-100",
     open: "bg-neutral-100",
+    text: "text-neutral-400",
+    track: "text-neutral-400/15",
+    bar: "bg-neutral-400",
   },
 }
 
@@ -83,6 +107,9 @@ export const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses>
     trigger: "border-emerald-300 bg-emerald-50 text-emerald-800",
     hover: "hover:bg-emerald-100",
     open: "bg-emerald-100",
+    text: "text-emerald-500",
+    track: "text-emerald-500/15",
+    bar: "bg-emerald-500",
   },
   Medium: {
     solid: "bg-amber-500 text-white",
@@ -91,6 +118,9 @@ export const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses>
     trigger: "border-amber-300 bg-amber-50 text-amber-800",
     hover: "hover:bg-amber-100",
     open: "bg-amber-100",
+    text: "text-amber-500",
+    track: "text-amber-500/15",
+    bar: "bg-amber-500",
   },
   Low: {
     solid: "bg-red-500 text-white",
@@ -99,6 +129,9 @@ export const POSITIVE_SCORE_CLASSES: Record<PositiveLevel, ScoreSemanticClasses>
     trigger: "border-red-300 bg-red-50 text-red-800",
     hover: "hover:bg-red-100",
     open: "bg-red-100",
+    text: "text-red-500",
+    track: "text-red-500/15",
+    bar: "bg-red-500",
   },
 }