@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/score-breakdown.js

@@ -0,0 +1,162 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ThumbsUp, ThumbsDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function getFactorBarColor(score) {
+  if (score >= 70) return "bg-emerald-500";
+  if (score >= 40) return "bg-amber-500";
+  return "bg-red-500";
+}
+function getRiskBadgeStyle(risk) {
+  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";
+  }
+}
+function ScoreBreakdown({ factors, onFactorFeedback, className }) {
+  const [feedback, setFeedback] = React.useState({});
+  const [feedbackText, setFeedbackText] = React.useState({});
+  const [savedText, setSavedText] = React.useState({});
+  const [editingKey, setEditingKey] = React.useState(null);
+  const handleFeedback = (factorKey, type) => {
+    const newState = feedback[factorKey] === type ? null : type;
+    setFeedback((prev) => __spreadProps(__spreadValues({}, prev), { [factorKey]: newState }));
+    if (newState === null) {
+      setEditingKey(null);
+      onFactorFeedback == null ? void 0 : onFactorFeedback(factorKey, null);
+    } else {
+      setEditingKey(factorKey);
+      onFactorFeedback == null ? void 0 : onFactorFeedback(factorKey, newState);
+    }
+  };
+  const submitFeedbackText = (factorKey) => {
+    var _a;
+    const text = ((_a = feedbackText[factorKey]) != null ? _a : "").trim();
+    if (feedback[factorKey]) {
+      onFactorFeedback == null ? void 0 : onFactorFeedback(factorKey, feedback[factorKey], text || void 0);
+      if (text) {
+        setSavedText((prev) => __spreadProps(__spreadValues({}, prev), { [factorKey]: text }));
+      }
+    }
+    setEditingKey(null);
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("border border-border rounded-lg overflow-hidden divide-y divide-border/40", className), children: factors.map((factor) => {
+    var _a;
+    const feedbackState = feedback[factor.key];
+    const hasThumb = feedbackState === "up" || feedbackState === "down";
+    const isEditing = editingKey === factor.key;
+    const saved = savedText[factor.key];
+    return /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-foreground flex-1", children: factor.label }),
+        factor.score !== null ? /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold text-foreground tabular-nums", children: [
+          factor.score,
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: "/100" })
+        ] }) : factor.risk ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-[11px] font-semibold px-1.5 py-0.5 rounded",
+              getRiskBadgeStyle(factor.risk)
+            ),
+            children: factor.risk
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 ml-1", children: [
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3 h-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3 h-3" })
+            }
+          )
+        ] })
+      ] }),
+      factor.score !== null && /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-full rounded-full", getFactorBarColor(factor.score)),
+          style: { width: `${factor.score}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: factor.why }),
+      hasThumb && isEditing && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          autoFocus: true,
+          value: (_a = feedbackText[factor.key]) != null ? _a : "",
+          onChange: (e) => setFeedbackText((prev) => __spreadProps(__spreadValues({}, 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 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setFeedbackText((prev) => __spreadProps(__spreadValues({}, prev), { [factor.key]: saved }));
+            setEditingKey(factor.key);
+          },
+          className: "text-[11px] text-muted-foreground/70 hover:text-muted-foreground transition-colors text-left leading-snug",
+          children: saved
+        }
+      )
+    ] }, factor.key);
+  }) });
+}
+export {
+  ScoreBreakdown
+};
+//# sourceMappingURL=score-breakdown.js.map

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

@@ -0,0 +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\"\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) {\n  if (score >= 70) return \"bg-emerald-500\"\n  if (score >= 40) return \"bg-amber-500\"\n  return \"bg-red-500\"\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}\n\nfunction ScoreBreakdown({ factors, onFactorFeedback, className }: ScoreBreakdownProps) {\n  const [feedback, setFeedback] = React.useState<Record<string, \"up\" | \"down\" | null>>({})\n  const [feedbackText, setFeedbackText] = React.useState<Record<string, string>>({})\n  const [savedText, setSavedText] = React.useState<Record<string, string>>({})\n  const [editingKey, setEditingKey] = React.useState<string | null>(null)\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 || undefined)\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))}\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-feedback.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+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;
+}
+declare function useScoreFeedback(): ScoreFeedbackState;
+interface RootProps {
+    children: React.ReactNode;
+    onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
+}
+declare function Root({ children, onSubmitFeedback }: RootProps): React.JSX.Element;
+declare function Trigger({ className }: {
+    className?: string;
+}): React.JSX.Element;
+declare function Panel({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+declare const ScoreFeedback: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Panel: typeof Panel;
+};
+
+export { ScoreFeedback, useScoreFeedback };

package/dist/components/score-feedback.js

@@ -0,0 +1,209 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ThumbsUp, ThumbsDown, Check } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const positivePills = [
+  "Right timing",
+  "Accurate data",
+  "Good prospect fit",
+  "Actionable"
+];
+const negativePills = [
+  "Bad timing",
+  "Inaccurate data",
+  "Wrong prospect",
+  "Already handled",
+  "Not actionable",
+  "Other"
+];
+const ScoreFeedbackCtx = React.createContext(null);
+function useScoreFeedback() {
+  const ctx = React.useContext(ScoreFeedbackCtx);
+  if (!ctx) throw new Error("Must be used within ScoreFeedback.Root");
+  return ctx;
+}
+function Root({ children, onSubmitFeedback }) {
+  const [thumbState, setThumbState] = React.useState(null);
+  const [selectedPills, setSelectedPills] = React.useState([]);
+  const [detailText, setDetailTextState] = React.useState("");
+  const [notedType, setNotedType] = React.useState(null);
+  const [submittedFeedback, setSubmittedFeedback] = React.useState(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) => {
+    setSelectedPills(
+      (prev) => prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]
+    );
+  }, []);
+  const handleThumbClick = React.useCallback((type) => {
+    setThumbState((prev) => prev === type ? null : type);
+    setSelectedPills([]);
+    setDetailTextState("");
+  }, []);
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return;
+    onSubmitFeedback == null ? void 0 : onSubmitFeedback(thumbState, selectedPills, detailText);
+    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() });
+    setNotedType(thumbState);
+    setThumbState(null);
+    setSelectedPills([]);
+    setDetailTextState("");
+    setTimeout(() => setNotedType(null), 3e3);
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback]);
+  const editSubmitted = React.useCallback(() => {
+    if (!submittedFeedback) return;
+    setThumbState(submittedFeedback.type);
+    setSelectedPills([...submittedFeedback.pills]);
+    setDetailTextState(submittedFeedback.detail);
+    setNotedType(null);
+  }, [submittedFeedback]);
+  return /* @__PURE__ */ jsx(
+    ScoreFeedbackCtx.Provider,
+    {
+      value: {
+        thumbState,
+        selectedPills,
+        detailText,
+        notedType,
+        submittedFeedback,
+        otherSelected,
+        hasRequiredInput,
+        handleThumbClick,
+        togglePill,
+        setDetailText: setDetailTextState,
+        handleSubmit,
+        editSubmitted
+      },
+      children
+    }
+  );
+}
+function Trigger({ className }) {
+  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback();
+  if (notedType || submittedFeedback && !thumbState) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Check, { className: "w-3 h-3 text-emerald-500" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: notedType ? notedType === "up" ? "Noted" : "Recorded" : (submittedFeedback == null ? void 0 : submittedFeedback.type) === "up" ? "Noted" : "Recorded" })
+      ] }),
+      submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: editSubmitted,
+          className: "mt-1.5 w-full text-left space-y-1 group cursor-pointer",
+          children: [
+            submittedFeedback.pills.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: submittedFeedback.pills.map((p) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                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"
+                ),
+                children: p
+              },
+              p
+            )) }),
+            submittedFeedback.detail && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors", children: submittedFeedback.detail })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-0.5 shrink-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "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"
+        ),
+        children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-3.5 h-3.5", fill: thumbState === "up" ? "currentColor" : "none" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "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"
+        ),
+        children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-3.5 h-3.5", fill: thumbState === "down" ? "currentColor" : "none" })
+      }
+    )
+  ] });
+}
+function Panel({ className }) {
+  const {
+    thumbState,
+    selectedPills,
+    detailText,
+    otherSelected,
+    hasRequiredInput,
+    togglePill,
+    setDetailText,
+    handleSubmit
+  } = useScoreFeedback();
+  if (!thumbState) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 pb-1 space-y-3 border-t border-border/60", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider", children: "How's this score?" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mb-2 block font-medium", children: thumbState === "up" ? "What was useful?" : "What\u2019s the issue?" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          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"
+          ),
+          children: pill
+        },
+        pill
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(
+        "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 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-red-500", children: "Please describe when \u201COther\u201D is selected" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-1", children: /* @__PURE__ */ jsx(
+      "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"
+        ),
+        children: "Submit"
+      }
+    ) })
+  ] }) });
+}
+const ScoreFeedback = { Root, Trigger, Panel };
+export {
+  ScoreFeedback,
+  useScoreFeedback
+};
+//# sourceMappingURL=score-feedback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/score-feedback.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown, Check } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nconst positivePills = [\n  \"Right timing\",\n  \"Accurate data\",\n  \"Good prospect fit\",\n  \"Actionable\",\n]\n\nconst negativePills = [\n  \"Bad timing\",\n  \"Inaccurate data\",\n  \"Wrong prospect\",\n  \"Already handled\",\n  \"Not actionable\",\n  \"Other\",\n]\n\ninterface SubmittedScoreFeedback {\n  type: \"up\" | \"down\"\n  pills: string[]\n  detail: string\n}\n\ninterface ScoreFeedbackState {\n  thumbState: \"up\" | \"down\" | null\n  selectedPills: string[]\n  detailText: string\n  notedType: \"up\" | \"down\" | null\n  submittedFeedback: SubmittedScoreFeedback | null\n  otherSelected: boolean\n  hasRequiredInput: boolean\n  handleThumbClick: (type: \"up\" | \"down\") => void\n  togglePill: (pill: string) => void\n  setDetailText: (text: string) => void\n  handleSubmit: () => void\n  editSubmitted: () => void\n}\n\nconst ScoreFeedbackCtx = React.createContext<ScoreFeedbackState | null>(null)\n\nfunction useScoreFeedback() {\n  const ctx = React.useContext(ScoreFeedbackCtx)\n  if (!ctx) throw new Error(\"Must be used within ScoreFeedback.Root\")\n  return ctx\n}\n\ninterface RootProps {\n  children: React.ReactNode\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n}\n\nfunction Root({ children, onSubmitFeedback }: RootProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailTextState] = React.useState(\"\")\n  const [notedType, setNotedType] = React.useState<\"up\" | \"down\" | null>(null)\n  const [submittedFeedback, setSubmittedFeedback] = React.useState<SubmittedScoreFeedback | null>(null)\n\n  const otherSelected = selectedPills.includes(\"Other\")\n\n  const hasRequiredInput =\n    thumbState === \"down\"\n      ? selectedPills.length > 0 && (!otherSelected || detailText.trim().length > 0)\n      : selectedPills.length > 0 || detailText.trim().length > 0\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) =>\n      prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]\n    )\n  }, [])\n\n  const handleThumbClick = React.useCallback((type: \"up\" | \"down\") => {\n    setThumbState((prev) => (prev === type ? null : type))\n    setSelectedPills([])\n    setDetailTextState(\"\")\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setSubmittedFeedback({ type: thumbState, pills: [...selectedPills], detail: detailText.trim() })\n    setNotedType(thumbState)\n    setThumbState(null)\n    setSelectedPills([])\n    setDetailTextState(\"\")\n    setTimeout(() => setNotedType(null), 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const editSubmitted = React.useCallback(() => {\n    if (!submittedFeedback) return\n    setThumbState(submittedFeedback.type)\n    setSelectedPills([...submittedFeedback.pills])\n    setDetailTextState(submittedFeedback.detail)\n    setNotedType(null)\n  }, [submittedFeedback])\n\n  return (\n    <ScoreFeedbackCtx.Provider\n      value={{\n        thumbState,\n        selectedPills,\n        detailText,\n        notedType,\n        submittedFeedback,\n        otherSelected,\n        hasRequiredInput,\n        handleThumbClick,\n        togglePill,\n        setDetailText: setDetailTextState,\n        handleSubmit,\n        editSubmitted,\n      }}\n    >\n      {children}\n    </ScoreFeedbackCtx.Provider>\n  )\n}\n\nfunction Trigger({ className }: { className?: string }) {\n  const { thumbState, notedType, submittedFeedback, handleThumbClick, editSubmitted } = useScoreFeedback()\n\n  if (notedType || (submittedFeedback && !thumbState)) {\n    return (\n      <div className={cn(\"shrink-0\", className)}>\n        <div className=\"flex items-center gap-1\">\n          <Check className=\"w-3 h-3 text-emerald-500\" />\n          <span className=\"text-[11px] text-muted-foreground\">\n            {notedType\n              ? notedType === \"up\" ? \"Noted\" : \"Recorded\"\n              : submittedFeedback?.type === \"up\" ? \"Noted\" : \"Recorded\"}\n          </span>\n        </div>\n        {submittedFeedback && (submittedFeedback.pills.length > 0 || submittedFeedback.detail) && (\n          <button\n            type=\"button\"\n            onClick={editSubmitted}\n            className=\"mt-1.5 w-full text-left space-y-1 group cursor-pointer\"\n          >\n            {submittedFeedback.pills.length > 0 && (\n              <div className=\"flex flex-wrap gap-1\">\n                {submittedFeedback.pills.map((p) => (\n                  <span\n                    key={p}\n                    className={cn(\n                      \"rounded-full border px-2 py-0.5 text-[10px] font-medium transition-colors group-hover:opacity-80\",\n                      submittedFeedback.type === \"up\"\n                        ? \"border-emerald-200/60 bg-emerald-50/50 text-emerald-700/70\"\n                        : \"border-red-200/60 bg-red-50/50 text-red-700/70\"\n                    )}\n                  >\n                    {p}\n                  </span>\n                ))}\n              </div>\n            )}\n            {submittedFeedback.detail && (\n              <p className=\"text-[11px] text-muted-foreground/70 leading-snug group-hover:text-muted-foreground transition-colors\">{submittedFeedback.detail}</p>\n            )}\n          </button>\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn(\"flex gap-0.5 shrink-0\", className)}>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"up\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"up\"\n            ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsUp className=\"w-3.5 h-3.5\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n      </button>\n      <button\n        type=\"button\"\n        onClick={() => handleThumbClick(\"down\")}\n        className={cn(\n          \"p-1.5 rounded transition-colors\",\n          thumbState === \"down\"\n            ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n            : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n        )}\n      >\n        <ThumbsDown className=\"w-3.5 h-3.5\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n      </button>\n    </div>\n  )\n}\n\nfunction Panel({ className }: { className?: string }) {\n  const {\n    thumbState,\n    selectedPills,\n    detailText,\n    otherSelected,\n    hasRequiredInput,\n    togglePill,\n    setDetailText,\n    handleSubmit,\n  } = useScoreFeedback()\n\n  if (!thumbState) return null\n\n  return (\n    <div className={cn(\"overflow-hidden\", className)}>\n      <div className=\"mt-4 pt-4 pb-1 space-y-3 border-t border-border/60\">\n        <span className=\"text-[11px] font-bold text-muted-foreground/70 uppercase tracking-wider\">\n          How&apos;s this score?\n        </span>\n        <div>\n          <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n            {thumbState === \"up\" ? \"What was useful?\" : \"What\\u2019s the issue?\"}\n          </span>\n          <div className=\"flex flex-wrap gap-1.5\">\n            {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n              <button\n                key={pill}\n                type=\"button\"\n                onClick={() => togglePill(pill)}\n                className={cn(\n                  \"px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors\",\n                  selectedPills.includes(pill)\n                    ? thumbState === \"up\"\n                      ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                      : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                    : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                )}\n              >\n                {pill}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <div className=\"space-y-1\">\n          <input\n            type=\"text\"\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === \"Enter\" && hasRequiredInput) handleSubmit()\n            }}\n            placeholder={\n              thumbState === \"up\"\n                ? \"Tell us more (optional)\"\n                : \"e.g., The risk factors are outdated\"\n            }\n            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\"\n          />\n          {otherSelected && detailText.trim().length === 0 && (\n            <span className=\"text-[10px] text-red-500\">\n              Please describe when &ldquo;Other&rdquo; is selected\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-2 pt-1\">\n          <button\n            type=\"button\"\n            onClick={handleSubmit}\n            disabled={!hasRequiredInput}\n            className={cn(\n              \"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors\",\n              hasRequiredInput\n                ? \"bg-foreground text-background hover:bg-foreground/90\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\"\n            )}\n          >\n            Submit\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport const ScoreFeedback = { Root, Trigger, Panel }\nexport { useScoreFeedback }\n"],"mappings":";AAsGI,cA2BI,YA3BJ;AApGJ,YAAY,WAAW;AACvB,SAAS,UAAU,YAAY,aAAa;AAC5C,SAAS,UAAU;AAEnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAuBA,MAAM,mBAAmB,MAAM,cAAyC,IAAI;AAE5E,SAAS,mBAAmB;AAC1B,QAAM,MAAM,MAAM,WAAW,gBAAgB;AAC7C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,wCAAwC;AAClE,SAAO;AACT;AAOA,SAAS,KAAK,EAAE,UAAU,iBAAiB,GAAc;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAA+B,IAAI;AAC7E,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAmB,CAAC,CAAC;AACrE,QAAM,CAAC,YAAY,kBAAkB,IAAI,MAAM,SAAS,EAAE;AAC1D,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAA+B,IAAI;AAC3E,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,MAAM,SAAwC,IAAI;AAEpG,QAAM,gBAAgB,cAAc,SAAS,OAAO;AAEpD,QAAM,mBACJ,eAAe,SACX,cAAc,SAAS,MAAM,CAAC,iBAAiB,WAAW,KAAK,EAAE,SAAS,KAC1E,cAAc,SAAS,KAAK,WAAW,KAAK,EAAE,SAAS;AAE7D,QAAM,aAAa,MAAM,YAAY,CAAC,SAAiB;AACrD;AAAA,MAAiB,CAAC,SAChB,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC,MAAM,MAAM,IAAI,IAAI,CAAC,GAAG,MAAM,IAAI;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,MAAM,YAAY,CAAC,SAAwB;AAClE,kBAAc,CAAC,SAAU,SAAS,OAAO,OAAO,IAAK;AACrD,qBAAiB,CAAC,CAAC;AACnB,uBAAmB,EAAE;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,MAAM,YAAY,MAAM;AAC3C,QAAI,CAAC,WAAY;AACjB,yDAAmB,YAAY,eAAe;AAC9C,yBAAqB,EAAE,MAAM,YAAY,OAAO,CAAC,GAAG,aAAa,GAAG,QAAQ,WAAW,KAAK,EAAE,CAAC;AAC/F,iBAAa,UAAU;AACvB,kBAAc,IAAI;AAClB,qBAAiB,CAAC,CAAC;AACnB,uBAAmB,EAAE;AACrB,eAAW,MAAM,aAAa,IAAI,GAAG,GAAI;AAAA,EAC3C,GAAG,CAAC,YAAY,eAAe,YAAY,gBAAgB,CAAC;AAE5D,QAAM,gBAAgB,MAAM,YAAY,MAAM;AAC5C,QAAI,CAAC,kBAAmB;AACxB,kBAAc,kBAAkB,IAAI;AACpC,qBAAiB,CAAC,GAAG,kBAAkB,KAAK,CAAC;AAC7C,uBAAmB,kBAAkB,MAAM;AAC3C,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,iBAAiB,CAAC;AAEtB,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ,EAAE,UAAU,GAA2B;AACtD,QAAM,EAAE,YAAY,WAAW,mBAAmB,kBAAkB,cAAc,IAAI,iBAAiB;AAEvG,MAAI,aAAc,qBAAqB,CAAC,YAAa;AACnD,WACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,SAAM,WAAU,4BAA2B;AAAA,QAC5C,oBAAC,UAAK,WAAU,qCACb,sBACG,cAAc,OAAO,UAAU,cAC/B,uDAAmB,UAAS,OAAO,UAAU,YACnD;AAAA,SACF;AAAA,MACC,sBAAsB,kBAAkB,MAAM,SAAS,KAAK,kBAAkB,WAC7E;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UAET;AAAA,8BAAkB,MAAM,SAAS,KAChC,oBAAC,SAAI,WAAU,wBACZ,4BAAkB,MAAM,IAAI,CAAC,MAC5B;AAAA,cAAC;AAAA;AAAA,gBAEC,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,SAAS,OACvB,+DACA;AAAA,gBACN;AAAA,gBAEC;AAAA;AAAA,cARI;AAAA,YASP,CACD,GACH;AAAA,YAED,kBAAkB,UACjB,oBAAC,OAAE,WAAU,yGAAyG,4BAAkB,QAAO;AAAA;AAAA;AAAA,MAEnJ;AAAA,OAEJ;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,iBAAiB,IAAI;AAAA,QACpC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,OACX,iFACA;AAAA,QACN;AAAA,QAEA,8BAAC,YAAS,WAAU,eAAc,MAAM,eAAe,OAAO,iBAAiB,QAAQ;AAAA;AAAA,IACzF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,iBAAiB,MAAM;AAAA,QACtC,WAAW;AAAA,UACT;AAAA,UACA,eAAe,SACX,iEACA;AAAA,QACN;AAAA,QAEA,8BAAC,cAAW,WAAU,eAAc,MAAM,eAAe,SAAS,iBAAiB,QAAQ;AAAA;AAAA,IAC7F;AAAA,KACF;AAEJ;AAEA,SAAS,MAAM,EAAE,UAAU,GAA2B;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,iBAAiB;AAErB,MAAI,CAAC,WAAY,QAAO;AAExB,SACE,oBAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,GAC7C,+BAAC,SAAI,WAAU,sDACb;AAAA,wBAAC,UAAK,WAAU,2EAA0E,+BAE1F;AAAA,IACA,qBAAC,SACC;AAAA,0BAAC,UAAK,WAAU,wDACb,yBAAe,OAAO,qBAAqB,0BAC9C;AAAA,MACA,oBAAC,SAAI,WAAU,0BACX,0BAAe,OAAO,gBAAgB,eAAe,IAAI,CAAC,SAC1D;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,WAAW,IAAI;AAAA,UAC9B,WAAW;AAAA,YACT;AAAA,YACA,cAAc,SAAS,IAAI,IACvB,eAAe,OACb,4HACA,oGACF;AAAA,UACN;AAAA,UAEC;AAAA;AAAA,QAZI;AAAA,MAaP,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,UAC7C,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,WAAW,iBAAkB,cAAa;AAAA,UAC1D;AAAA,UACA,aACE,eAAe,OACX,4BACA;AAAA,UAEN,WAAU;AAAA;AAAA,MACZ;AAAA,MACC,iBAAiB,WAAW,KAAK,EAAE,WAAW,KAC7C,oBAAC,UAAK,WAAU,4BAA2B,gEAE3C;AAAA,OAEJ;AAAA,IAEA,oBAAC,SAAI,WAAU,gCACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU,CAAC;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,mBACI,yDACA;AAAA,QACN;AAAA,QACD;AAAA;AAAA,IAED,GACF;AAAA,KACF,GACF;AAEJ;AAEO,MAAM,gBAAgB,EAAE,MAAM,SAAS,MAAM;","names":[]}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+declare function getScoreColor(score: number, denominator: number): "text-emerald-500" | "text-amber-500" | "text-red-500";
+interface ScoreRingProps {
+    score: number;
+    denominator?: number;
+    size?: number;
+    strokeWidth?: number;
+    className?: string;
+    showLabel?: boolean;
+}
+declare function ScoreRing({ score, denominator, size, strokeWidth, className, showLabel, }: ScoreRingProps): React.JSX.Element;
+
+export { ScoreRing, type ScoreRingProps, getScoreColor };

package/dist/components/score-ring.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function getScoreColor(score, denominator) {
+  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, denominator) {
+  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";
+}
+function ScoreRing({
+  score,
+  denominator = 100,
+  size = 120,
+  strokeWidth = 10,
+  className,
+  showLabel = true
+}) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const pct = Math.min(score / denominator, 1);
+  const offset = circumference * (1 - pct);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        className: "-rotate-90",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              className: getScoreTrackColor(score, denominator)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r: radius,
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth,
+              strokeLinecap: "round",
+              strokeDasharray: circumference,
+              strokeDashoffset: offset,
+              className: cn("transition-all duration-500", getScoreColor(score, denominator))
+            }
+          )
+        ]
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold text-foreground leading-none", children: score }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground mt-0.5", children: [
+        "/",
+        denominator
+      ] })
+    ] })
+  ] });
+}
+export {
+  ScoreRing,
+  getScoreColor
+};
+//# sourceMappingURL=score-ring.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/score-ring.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"../lib/utils\"\n\nfunction getScoreColor(score: number, denominator: number) {\n  const pct = (score / denominator) * 100\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) {\n  const pct = (score / denominator) * 100\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}\n\nfunction ScoreRing({\n  score,\n  denominator = 100,\n  size = 120,\n  strokeWidth = 10,\n  className,\n  showLabel = true,\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)}\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))}\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 }\nexport type { ScoreRingProps }\n"],"mappings":"AAyCM,SAOE,KAPF;AAxCN,SAAS,UAAU;AAEnB,SAAS,cAAc,OAAe,aAAqB;AACzD,QAAM,MAAO,QAAQ,cAAe;AACpC,MAAI,OAAO,GAAI,QAAO;AACtB,MAAI,OAAO,GAAI,QAAO;AACtB,SAAO;AACT;AAEA,SAAS,mBAAmB,OAAe,aAAqB;AAC9D,QAAM,MAAO,QAAQ,cAAe;AACpC,MAAI,OAAO,GAAI,QAAO;AACtB,MAAI,OAAO,GAAI,QAAO;AACtB,SAAO;AACT;AAWA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,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,WAAW;AAAA;AAAA,UAClD;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,WAAW,CAAC;AAAA;AAAA,UAChF;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/scroll-area.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollArea$1.Root>): React.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): React.JSX.Element;
+
+export { ScrollArea, ScrollBar };