@handled-ai/design-system 0.17.1 → 0.18.1

package/dist/components/feedback-primitives.js

@@ -0,0 +1,295 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ThumbsUp, ThumbsDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const CHIP_SELECTED_CLASSES = {
+  negative: "bg-red-50 text-red-700 border-red-200",
+  positive: "bg-muted text-foreground border-border"
+};
+const CHIP_IDLE_CLASS = "bg-background text-muted-foreground border-border hover:bg-muted/50";
+function FeedbackChipGroup({
+  chips,
+  selected,
+  onToggle,
+  flavor,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-1.5", className), children: chips.map((chip) => {
+    const isSelected = selected.includes(chip);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onToggle(chip),
+        className: cn(
+          "rounded-md px-2.5 py-1 text-[11px] font-medium border transition-colors",
+          isSelected ? CHIP_SELECTED_CLASSES[flavor] : CHIP_IDLE_CLASS
+        ),
+        children: chip
+      },
+      chip
+    );
+  }) });
+}
+function FeedbackInput({
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && onSubmit) {
+          e.preventDefault();
+          onSubmit();
+        }
+      },
+      placeholder,
+      className: cn(
+        "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",
+        className
+      )
+    }
+  );
+}
+function FeedbackActions({
+  onSubmit,
+  onCancel,
+  submitDisabled = false,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  hint,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onSubmit,
+        disabled: submitDisabled,
+        className: "bg-foreground text-background rounded-md px-3 py-1.5 text-xs font-semibold disabled:opacity-50",
+        children: submitLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onCancel,
+        className: "border border-border rounded-md px-3 py-1.5 text-xs font-medium",
+        children: cancelLabel
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("span", { className: "ml-auto text-[11px] text-muted-foreground", children: hint })
+  ] });
+}
+const SENTIMENT_BUTTON_ACTIVE = {
+  negative: "text-red-600 bg-red-50 border-red-200",
+  positive: "text-foreground bg-muted border-border"
+};
+const SENTIMENT_BUTTON_IDLE = "text-muted-foreground hover:text-foreground";
+function FeedbackFooter({
+  feedback,
+  onFeedbackChange,
+  onSubmit,
+  metaText,
+  positivePrompt = "Thanks! Anything to keep about this score?",
+  negativePrompt = "What's the issue?",
+  negativeChips = [],
+  positiveChips = [],
+  className
+}) {
+  const [expanded, setExpanded] = React.useState(false);
+  const [selectedTier1, setSelectedTier1] = React.useState(null);
+  const [selectedTier2, setSelectedTier2] = React.useState(null);
+  const [additionalPills, setAdditionalPills] = React.useState([]);
+  const [detailText, setDetailText] = React.useState("");
+  const [activeTreeIndex, setActiveTreeIndex] = React.useState(
+    null
+  );
+  const resetState = React.useCallback(() => {
+    setExpanded(false);
+    setSelectedTier1(null);
+    setSelectedTier2(null);
+    setAdditionalPills([]);
+    setDetailText("");
+    setActiveTreeIndex(null);
+  }, []);
+  const handleSentimentClick = React.useCallback(
+    (sentiment) => {
+      onFeedbackChange(sentiment);
+      resetState();
+      setExpanded(true);
+    },
+    [onFeedbackChange, resetState]
+  );
+  const handleTier1Toggle = React.useCallback(
+    (chipLabel) => {
+      if (selectedTier1 === chipLabel) {
+        setSelectedTier1(null);
+        setSelectedTier2(null);
+        setActiveTreeIndex(null);
+      } else if (selectedTier1 === null) {
+        setSelectedTier1(chipLabel);
+        setSelectedTier2(null);
+        const idx = negativeChips.findIndex((c) => c.label === chipLabel);
+        if (idx !== -1 && negativeChips[idx].subChips) {
+          setActiveTreeIndex(idx);
+        } else {
+          setActiveTreeIndex(null);
+        }
+      } else {
+        setAdditionalPills(
+          (prev) => prev.includes(chipLabel) ? prev.filter((p) => p !== chipLabel) : [...prev, chipLabel]
+        );
+      }
+    },
+    [selectedTier1, negativeChips]
+  );
+  const handleTier2Toggle = React.useCallback((subChip) => {
+    setSelectedTier2((prev) => prev === subChip ? null : subChip);
+  }, []);
+  const handlePositiveChipToggle = React.useCallback(
+    (chip) => {
+      if (selectedTier1 === chip) {
+        setSelectedTier1(null);
+      } else if (selectedTier1 === null) {
+        setSelectedTier1(chip);
+      } else {
+        setAdditionalPills(
+          (prev) => prev.includes(chip) ? prev.filter((p) => p !== chip) : [...prev, chip]
+        );
+      }
+    },
+    [selectedTier1]
+  );
+  const handleSubmit = React.useCallback(() => {
+    if (!feedback) return;
+    onSubmit({
+      sentiment: feedback,
+      reasonTop: selectedTier1 != null ? selectedTier1 : void 0,
+      reasonSub: selectedTier2 != null ? selectedTier2 : void 0,
+      pills: additionalPills,
+      detail: detailText
+    });
+    resetState();
+  }, [
+    feedback,
+    selectedTier1,
+    selectedTier2,
+    additionalPills,
+    detailText,
+    onSubmit,
+    resetState
+  ]);
+  const handleCancel = React.useCallback(() => {
+    resetState();
+    onFeedbackChange(null);
+  }, [resetState, onFeedbackChange]);
+  const allSelectedChips = React.useMemo(() => {
+    const result = [];
+    if (selectedTier1) result.push(selectedTier1);
+    result.push(...additionalPills);
+    return result;
+  }, [selectedTier1, additionalPills]);
+  const activeTree = activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSentimentClick("positive"),
+            className: cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "positive" ? SENTIMENT_BUTTON_ACTIVE.positive : SENTIMENT_BUTTON_IDLE
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ThumbsUp, { className: "h-[11px] w-[11px]" }),
+              "Helpful"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSentimentClick("negative"),
+            className: cn(
+              "flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors",
+              feedback === "negative" ? SENTIMENT_BUTTON_ACTIVE.negative : SENTIMENT_BUTTON_IDLE
+            ),
+            children: [
+              /* @__PURE__ */ jsx(ThumbsDown, { className: "h-[11px] w-[11px]" }),
+              "Not helpful"
+            ]
+          }
+        )
+      ] }),
+      metaText && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: metaText })
+    ] }),
+    expanded && feedback && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: feedback === "negative" ? negativePrompt : positivePrompt }),
+      feedback === "negative" && negativeChips.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          FeedbackChipGroup,
+          {
+            chips: negativeChips.map((c) => c.label),
+            selected: allSelectedChips,
+            onToggle: handleTier1Toggle,
+            flavor: "negative"
+          }
+        ),
+        activeTree && activeTree.subChips && /* @__PURE__ */ jsxs("div", { className: "pl-3 space-y-1.5", children: [
+          activeTree.subPrompt && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: activeTree.subPrompt }),
+          /* @__PURE__ */ jsx(
+            FeedbackChipGroup,
+            {
+              chips: activeTree.subChips,
+              selected: selectedTier2 ? [selectedTier2] : [],
+              onToggle: handleTier2Toggle,
+              flavor: "negative"
+            }
+          )
+        ] })
+      ] }),
+      feedback === "positive" && positiveChips.length > 0 && /* @__PURE__ */ jsx(
+        FeedbackChipGroup,
+        {
+          chips: positiveChips,
+          selected: allSelectedChips,
+          onToggle: handlePositiveChipToggle,
+          flavor: "positive"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FeedbackInput,
+        {
+          placeholder: "Add optional detail\u2026",
+          value: detailText,
+          onChange: setDetailText,
+          onSubmit: handleSubmit
+        }
+      ),
+      /* @__PURE__ */ jsx(FeedbackActions, { onSubmit: handleSubmit, onCancel: handleCancel })
+    ] })
+  ] });
+}
+export {
+  FeedbackActions,
+  FeedbackChipGroup,
+  FeedbackFooter,
+  FeedbackInput
+};
+//# sourceMappingURL=feedback-primitives.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/feedback-primitives.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ThumbsUp, ThumbsDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Structured feedback data shape.\n *\n * Preserves the tree structure for DB persistence:\n *   reasonTop  -> tier-1 chip label (maps to case_feedback.reason_top)\n *   reasonSub  -> tier-2 sub-chip label (maps to case_feedback.reason_sub)\n *   pills      -> any additional selected chips (maps to case_feedback.pills)\n *   detail     -> free-text input (maps to case_feedback.free_text)\n */\nexport interface FeedbackSubmitData {\n  sentiment: \"positive\" | \"negative\"\n  reasonTop?: string\n  reasonSub?: string\n  pills: string[]\n  detail: string\n}\n\n/**\n * Defines a tier-1 chip that may have tier-2 sub-chips.\n */\nexport interface FeedbackChipTree {\n  label: string\n  subPrompt?: string\n  subChips?: string[]\n}\n\n// ---------------------------------------------------------------------------\n// FeedbackChipGroup\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackChipGroupProps {\n  chips: string[]\n  selected: string[]\n  onToggle: (chip: string) => void\n  flavor: \"positive\" | \"negative\"\n  className?: string\n}\n\nconst CHIP_SELECTED_CLASSES: Record<\"positive\" | \"negative\", string> = {\n  negative: \"bg-red-50 text-red-700 border-red-200\",\n  positive: \"bg-muted text-foreground border-border\",\n}\n\nconst CHIP_IDLE_CLASS =\n  \"bg-background text-muted-foreground border-border hover:bg-muted/50\"\n\nexport function FeedbackChipGroup({\n  chips,\n  selected,\n  onToggle,\n  flavor,\n  className,\n}: FeedbackChipGroupProps) {\n  return (\n    <div className={cn(\"flex flex-wrap gap-1.5\", className)}>\n      {chips.map((chip) => {\n        const isSelected = selected.includes(chip)\n        return (\n          <button\n            key={chip}\n            type=\"button\"\n            onClick={() => onToggle(chip)}\n            className={cn(\n              \"rounded-md px-2.5 py-1 text-[11px] font-medium border transition-colors\",\n              isSelected ? CHIP_SELECTED_CLASSES[flavor] : CHIP_IDLE_CLASS,\n            )}\n          >\n            {chip}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// FeedbackInput\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackInputProps {\n  placeholder?: string\n  value: string\n  onChange: (value: string) => void\n  onSubmit?: () => void\n  className?: string\n}\n\nexport function FeedbackInput({\n  placeholder,\n  value,\n  onChange,\n  onSubmit,\n  className,\n}: FeedbackInputProps) {\n  return (\n    <input\n      type=\"text\"\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" && onSubmit) {\n          e.preventDefault()\n          onSubmit()\n        }\n      }}\n      placeholder={placeholder}\n      className={cn(\n        \"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        className,\n      )}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// FeedbackActions\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackActionsProps {\n  onSubmit: () => void\n  onCancel: () => void\n  submitDisabled?: boolean\n  submitLabel?: string\n  cancelLabel?: string\n  hint?: string\n  className?: string\n}\n\nexport function FeedbackActions({\n  onSubmit,\n  onCancel,\n  submitDisabled = false,\n  submitLabel = \"Submit\",\n  cancelLabel = \"Cancel\",\n  hint,\n  className,\n}: FeedbackActionsProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <button\n        type=\"button\"\n        onClick={onSubmit}\n        disabled={submitDisabled}\n        className=\"bg-foreground text-background rounded-md px-3 py-1.5 text-xs font-semibold disabled:opacity-50\"\n      >\n        {submitLabel}\n      </button>\n      <button\n        type=\"button\"\n        onClick={onCancel}\n        className=\"border border-border rounded-md px-3 py-1.5 text-xs font-medium\"\n      >\n        {cancelLabel}\n      </button>\n      {hint && (\n        <span className=\"ml-auto text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// FeedbackFooter\n// ---------------------------------------------------------------------------\n\nexport interface FeedbackFooterProps {\n  feedback: \"positive\" | \"negative\" | null\n  onFeedbackChange: (value: \"positive\" | \"negative\" | null) => void\n  onSubmit: (data: FeedbackSubmitData) => void\n  metaText?: string\n  positivePrompt?: string\n  negativePrompt?: string\n  negativeChips?: FeedbackChipTree[]\n  positiveChips?: string[]\n  className?: string\n}\n\nconst SENTIMENT_BUTTON_ACTIVE: Record<\"positive\" | \"negative\", string> = {\n  negative: \"text-red-600 bg-red-50 border-red-200\",\n  positive: \"text-foreground bg-muted border-border\",\n}\n\nconst SENTIMENT_BUTTON_IDLE =\n  \"text-muted-foreground hover:text-foreground\"\n\nexport function FeedbackFooter({\n  feedback,\n  onFeedbackChange,\n  onSubmit,\n  metaText,\n  positivePrompt = \"Thanks! Anything to keep about this score?\",\n  negativePrompt = \"What's the issue?\",\n  negativeChips = [],\n  positiveChips = [],\n  className,\n}: FeedbackFooterProps) {\n  const [expanded, setExpanded] = React.useState(false)\n  const [selectedTier1, setSelectedTier1] = React.useState<string | null>(null)\n  const [selectedTier2, setSelectedTier2] = React.useState<string | null>(null)\n  const [additionalPills, setAdditionalPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [activeTreeIndex, setActiveTreeIndex] = React.useState<number | null>(\n    null,\n  )\n\n  // Reset state when feedback collapses\n  const resetState = React.useCallback(() => {\n    setExpanded(false)\n    setSelectedTier1(null)\n    setSelectedTier2(null)\n    setAdditionalPills([])\n    setDetailText(\"\")\n    setActiveTreeIndex(null)\n  }, [])\n\n  const handleSentimentClick = React.useCallback(\n    (sentiment: \"positive\" | \"negative\") => {\n      onFeedbackChange(sentiment)\n      // Reset chip state when switching sentiment, then expand\n      resetState()\n      setExpanded(true)\n    },\n    [onFeedbackChange, resetState],\n  )\n\n  const handleTier1Toggle = React.useCallback(\n    (chipLabel: string) => {\n      if (selectedTier1 === chipLabel) {\n        // Deselect the tier-1 chip\n        setSelectedTier1(null)\n        setSelectedTier2(null)\n        setActiveTreeIndex(null)\n      } else if (selectedTier1 === null) {\n        // First selection becomes the primary reasonTop\n        setSelectedTier1(chipLabel)\n        setSelectedTier2(null)\n        // Find the chip's tree index to show sub-chips\n        const idx = negativeChips.findIndex((c) => c.label === chipLabel)\n        if (idx !== -1 && negativeChips[idx].subChips) {\n          setActiveTreeIndex(idx)\n        } else {\n          setActiveTreeIndex(null)\n        }\n      } else {\n        // Additional selections become pills\n        setAdditionalPills((prev) =>\n          prev.includes(chipLabel)\n            ? prev.filter((p) => p !== chipLabel)\n            : [...prev, chipLabel],\n        )\n      }\n    },\n    [selectedTier1, negativeChips],\n  )\n\n  const handleTier2Toggle = React.useCallback((subChip: string) => {\n    setSelectedTier2((prev) => (prev === subChip ? null : subChip))\n  }, [])\n\n  const handlePositiveChipToggle = React.useCallback(\n    (chip: string) => {\n      if (selectedTier1 === chip) {\n        setSelectedTier1(null)\n      } else if (selectedTier1 === null) {\n        setSelectedTier1(chip)\n      } else {\n        setAdditionalPills((prev) =>\n          prev.includes(chip)\n            ? prev.filter((p) => p !== chip)\n            : [...prev, chip],\n        )\n      }\n    },\n    [selectedTier1],\n  )\n\n  const handleSubmit = React.useCallback(() => {\n    if (!feedback) return\n    onSubmit({\n      sentiment: feedback,\n      reasonTop: selectedTier1 ?? undefined,\n      reasonSub: selectedTier2 ?? undefined,\n      pills: additionalPills,\n      detail: detailText,\n    })\n    resetState()\n  }, [\n    feedback,\n    selectedTier1,\n    selectedTier2,\n    additionalPills,\n    detailText,\n    onSubmit,\n    resetState,\n  ])\n\n  const handleCancel = React.useCallback(() => {\n    resetState()\n    onFeedbackChange(null)\n  }, [resetState, onFeedbackChange])\n\n  // Determine which chips are selected (combining tier1 + additionalPills)\n  const allSelectedChips = React.useMemo(() => {\n    const result: string[] = []\n    if (selectedTier1) result.push(selectedTier1)\n    result.push(...additionalPills)\n    return result\n  }, [selectedTier1, additionalPills])\n\n  // Active tier-1 chip tree (for showing sub-chips)\n  const activeTree =\n    activeTreeIndex !== null ? negativeChips[activeTreeIndex] : null\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {/* Sentiment buttons + meta text bar */}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <button\n            type=\"button\"\n            onClick={() => handleSentimentClick(\"positive\")}\n            className={cn(\n              \"flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors\",\n              feedback === \"positive\"\n                ? SENTIMENT_BUTTON_ACTIVE.positive\n                : SENTIMENT_BUTTON_IDLE,\n            )}\n          >\n            <ThumbsUp className=\"h-[11px] w-[11px]\" />\n            Helpful\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => handleSentimentClick(\"negative\")}\n            className={cn(\n              \"flex gap-1 items-center text-[11px] font-medium rounded-md px-2 py-1 transition-colors\",\n              feedback === \"negative\"\n                ? SENTIMENT_BUTTON_ACTIVE.negative\n                : SENTIMENT_BUTTON_IDLE,\n            )}\n          >\n            <ThumbsDown className=\"h-[11px] w-[11px]\" />\n            Not helpful\n          </button>\n        </div>\n        {metaText && (\n          <span className=\"text-[11px] text-muted-foreground\">{metaText}</span>\n        )}\n      </div>\n\n      {/* Expanded feedback area */}\n      {expanded && feedback && (\n        <div className=\"space-y-3\">\n          {/* Prompt text */}\n          <p className=\"text-xs text-muted-foreground\">\n            {feedback === \"negative\" ? negativePrompt : positivePrompt}\n          </p>\n\n          {/* Chip area */}\n          {feedback === \"negative\" && negativeChips.length > 0 && (\n            <div className=\"space-y-2\">\n              {/* Tier-1 chips */}\n              <FeedbackChipGroup\n                chips={negativeChips.map((c) => c.label)}\n                selected={allSelectedChips}\n                onToggle={handleTier1Toggle}\n                flavor=\"negative\"\n              />\n\n              {/* Tier-2 sub-chips (shown when a tier-1 with sub-chips is active) */}\n              {activeTree && activeTree.subChips && (\n                <div className=\"pl-3 space-y-1.5\">\n                  {activeTree.subPrompt && (\n                    <p className=\"text-[11px] text-muted-foreground\">\n                      {activeTree.subPrompt}\n                    </p>\n                  )}\n                  <FeedbackChipGroup\n                    chips={activeTree.subChips}\n                    selected={selectedTier2 ? [selectedTier2] : []}\n                    onToggle={handleTier2Toggle}\n                    flavor=\"negative\"\n                  />\n                </div>\n              )}\n            </div>\n          )}\n\n          {feedback === \"positive\" && positiveChips.length > 0 && (\n            <FeedbackChipGroup\n              chips={positiveChips}\n              selected={allSelectedChips}\n              onToggle={handlePositiveChipToggle}\n              flavor=\"positive\"\n            />\n          )}\n\n          {/* Detail text input */}\n          <FeedbackInput\n            placeholder=\"Add optional detail…\"\n            value={detailText}\n            onChange={setDetailText}\n            onSubmit={handleSubmit}\n          />\n\n          {/* Action buttons */}\n          <FeedbackActions onSubmit={handleSubmit} onCancel={handleCancel} />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/insights-filter-bar.d.ts

@@ -11,11 +11,12 @@ interface FilterDefinition {
 }
 interface InsightsFilterBarProps {
     filters: FilterDefinition[];
+    variant?: "default" | "compact";
     values: Record<string, string>;
     onChange: (filterId: string, value: string) => void;
     onClearAll?: () => void;
     className?: string;
 }
-declare function InsightsFilterBar({ filters, values, onChange, onClearAll, className, }: InsightsFilterBarProps): React.JSX.Element;
+declare function InsightsFilterBar({ filters, values, onChange, onClearAll, className, variant, }: InsightsFilterBarProps): React.JSX.Element;
 
 export { type FilterDefinition, InsightsFilterBar, type InsightsFilterBarProps };

package/dist/components/insights-filter-bar.js

@@ -24,7 +24,8 @@ function InsightsFilterBar({
   values,
   onChange,
   onClearAll,
-  className
+  className,
+  variant = "default"
 }) {
   const showClearAll = onClearAll && hasNonDefaultValue(filters, values);
   return /* @__PURE__ */ jsxs(
@@ -32,11 +33,12 @@ function InsightsFilterBar({
     {
       "data-slot": "insights-filter-bar",
       className: cn(
-        "flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm",
+        "flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm",
+        variant === "compact" ? "gap-2 p-2" : "gap-3 p-4",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", variant === "compact" && "sr-only"), children: [
           /* @__PURE__ */ jsx(FilterIcon, { className: "h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: "Filters:" })
         ] }),
@@ -51,7 +53,10 @@ function InsightsFilterBar({
               {
                 variant: "outline",
                 size: "sm",
-                className: "h-8 gap-1.5 text-xs font-normal shadow-none",
+                className: cn(
+                  "gap-1.5 text-xs font-normal shadow-none",
+                  variant === "compact" ? "h-7 px-2" : "h-8"
+                ),
                 children: [
                   IconComp ? /* @__PURE__ */ jsx(IconComp, { className: "h-3.5 w-3.5 text-muted-foreground" }) : null,
                   filter.label,
@@ -84,7 +89,10 @@ function InsightsFilterBar({
           {
             variant: "ghost",
             size: "sm",
-            className: "h-8 text-xs text-destructive hover:text-destructive",
+            className: cn(
+              "text-xs text-destructive hover:text-destructive",
+              variant === "compact" ? "h-7 px-2" : "h-8"
+            ),
             onClick: onClearAll,
             children: "Clear All"
           }

package/dist/components/insights-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/insights-filter-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon, ChevronDownIcon, FilterIcon } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterDefinition {\n  id: string\n  label: string\n  options: string[]\n  defaultValue?: string\n  icon?: \"calendar\" | React.ComponentType<{ className?: string }>\n}\n\nexport interface InsightsFilterBarProps {\n  filters: FilterDefinition[]\n  values: Record<string, string>\n  onChange: (filterId: string, value: string) => void\n  onClearAll?: () => void\n  className?: string\n}\n\nfunction hasNonDefaultValue(\n  filters: FilterDefinition[],\n  values: Record<string, string>\n) {\n  return filters.some((filter) => {\n    const defaultVal = filter.defaultValue ?? filter.options[0] ?? \"All\"\n    return values[filter.id] !== undefined && values[filter.id] !== defaultVal\n  })\n}\n\nfunction InsightsFilterBar({\n  filters,\n  values,\n  onChange,\n  onClearAll,\n  className,\n}: InsightsFilterBarProps) {\n  const showClearAll = onClearAll && hasNonDefaultValue(filters, values)\n\n  return (\n    <div\n      data-slot=\"insights-filter-bar\"\n      className={cn(\n        \"flex flex-wrap items-center gap-3 rounded-md border border-border bg-card p-4 shadow-sm\",\n        className\n      )}\n    >\n      <div className=\"flex items-center gap-2\">\n        <FilterIcon className=\"h-4 w-4 text-muted-foreground\" />\n        <span className=\"text-sm font-medium text-muted-foreground\">\n          Filters:\n        </span>\n      </div>\n\n      {filters.map((filter) => {\n        const current = values[filter.id] ?? filter.defaultValue ?? \"All\"\n        const isCheckbox = filter.options.length > 0\n\n        const IconComp =\n          filter.icon === \"calendar\"\n            ? CalendarIcon\n            : typeof filter.icon === \"function\"\n              ? filter.icon\n              : null\n\n        return (\n          <DropdownMenu key={filter.id}>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"h-8 gap-1.5 text-xs font-normal shadow-none\"\n              >\n                {IconComp ? (\n                  <IconComp className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                ) : null}\n                {filter.label}: {current}\n                <ChevronDownIcon className=\"h-3.5 w-3.5 opacity-50\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              {isCheckbox\n                ? filter.options.map((option) => (\n                    <DropdownMenuCheckboxItem\n                      key={option}\n                      checked={current === option}\n                      onCheckedChange={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuCheckboxItem>\n                  ))\n                : filter.options.map((option) => (\n                    <DropdownMenuItem\n                      key={option}\n                      onSelect={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuItem>\n                  ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )\n      })}\n\n      {showClearAll ? (\n        <div className=\"ml-auto\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 text-xs text-destructive hover:text-destructive\"\n            onClick={onClearAll}\n          >\n            Clear All\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { InsightsFilterBar }\n"],"mappings":";AA0DM,SACE,KADF;AAvDN,SAAS,cAAc,iBAAiB,kBAAkB;AAE1D,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkBP,SAAS,mBACP,SACA,QACA;AACA,SAAO,QAAQ,KAAK,CAAC,WAAW;AAnClC;AAoCI,UAAM,cAAa,kBAAO,iBAAP,YAAuB,OAAO,QAAQ,CAAC,MAAvC,YAA4C;AAC/D,WAAO,OAAO,OAAO,EAAE,MAAM,UAAa,OAAO,OAAO,EAAE,MAAM;AAAA,EAClE,CAAC;AACH;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,eAAe,cAAc,mBAAmB,SAAS,MAAM;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,cAAW,WAAU,iCAAgC;AAAA,UACtD,oBAAC,UAAK,WAAU,6CAA4C,sBAE5D;AAAA,WACF;AAAA,QAEC,QAAQ,IAAI,CAAC,WAAW;AAjE/B;AAkEQ,gBAAM,WAAU,kBAAO,OAAO,EAAE,MAAhB,YAAqB,OAAO,iBAA5B,YAA4C;AAC5D,gBAAM,aAAa,OAAO,QAAQ,SAAS;AAE3C,gBAAM,WACJ,OAAO,SAAS,aACZ,eACA,OAAO,OAAO,SAAS,aACrB,OAAO,OACP;AAER,iBACE,qBAAC,gBACC;AAAA,gCAAC,uBAAoB,SAAO,MAC1B;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET;AAAA,6BACC,oBAAC,YAAS,WAAU,qCAAoC,IACtD;AAAA,kBACH,OAAO;AAAA,kBAAM;AAAA,kBAAG;AAAA,kBACjB,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA;AAAA;AAAA,YACtD,GACF;AAAA,YACA,oBAAC,uBAAoB,OAAM,SACxB,uBACG,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAS,YAAY;AAAA,gBACrB,iBAAiB,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEhD;AAAA;AAAA,cAJI;AAAA,YAKP,CACD,IACD,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,UAAU,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEzC;AAAA;AAAA,cAHI;AAAA,YAIP,CACD,GACP;AAAA,eAjCiB,OAAO,EAkC1B;AAAA,QAEJ,CAAC;AAAA,QAEA,eACC,oBAAC,SAAI,WAAU,WACb;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACV;AAAA;AAAA,QAED,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/insights-filter-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon, ChevronDownIcon, FilterIcon } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\nimport { Button } from \"./button\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\"\n\nexport interface FilterDefinition {\n  id: string\n  label: string\n  options: string[]\n  defaultValue?: string\n  icon?: \"calendar\" | React.ComponentType<{ className?: string }>\n}\n\nexport interface InsightsFilterBarProps {\n  filters: FilterDefinition[]\n  variant?: \"default\" | \"compact\"\n  values: Record<string, string>\n  onChange: (filterId: string, value: string) => void\n  onClearAll?: () => void\n  className?: string\n}\n\nfunction hasNonDefaultValue(\n  filters: FilterDefinition[],\n  values: Record<string, string>\n) {\n  return filters.some((filter) => {\n    const defaultVal = filter.defaultValue ?? filter.options[0] ?? \"All\"\n    return values[filter.id] !== undefined && values[filter.id] !== defaultVal\n  })\n}\n\nfunction InsightsFilterBar({\n  filters,\n  values,\n  onChange,\n  onClearAll,\n  className,\n  variant = \"default\",\n}: InsightsFilterBarProps) {\n  const showClearAll = onClearAll && hasNonDefaultValue(filters, values)\n\n  return (\n    <div\n      data-slot=\"insights-filter-bar\"\n      className={cn(\n        \"flex flex-wrap items-center rounded-md border border-border bg-card shadow-sm\",\n        variant === \"compact\" ? \"gap-2 p-2\" : \"gap-3 p-4\",\n        className\n      )}\n    >\n      <div className={cn(\"flex items-center gap-2\", variant === \"compact\" && \"sr-only\")}>\n        <FilterIcon className=\"h-4 w-4 text-muted-foreground\" />\n        <span className=\"text-sm font-medium text-muted-foreground\">\n          Filters:\n        </span>\n      </div>\n\n      {filters.map((filter) => {\n        const current = values[filter.id] ?? filter.defaultValue ?? \"All\"\n        const isCheckbox = filter.options.length > 0\n\n        const IconComp =\n          filter.icon === \"calendar\"\n            ? CalendarIcon\n            : typeof filter.icon === \"function\"\n              ? filter.icon\n              : null\n\n        return (\n          <DropdownMenu key={filter.id}>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn(\n                  \"gap-1.5 text-xs font-normal shadow-none\",\n                  variant === \"compact\" ? \"h-7 px-2\" : \"h-8\"\n                )}\n              >\n                {IconComp ? (\n                  <IconComp className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                ) : null}\n                {filter.label}: {current}\n                <ChevronDownIcon className=\"h-3.5 w-3.5 opacity-50\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              {isCheckbox\n                ? filter.options.map((option) => (\n                    <DropdownMenuCheckboxItem\n                      key={option}\n                      checked={current === option}\n                      onCheckedChange={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuCheckboxItem>\n                  ))\n                : filter.options.map((option) => (\n                    <DropdownMenuItem\n                      key={option}\n                      onSelect={() => onChange(filter.id, option)}\n                    >\n                      {option}\n                    </DropdownMenuItem>\n                  ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )\n      })}\n\n      {showClearAll ? (\n        <div className=\"ml-auto\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className={cn(\n              \"text-xs text-destructive hover:text-destructive\",\n              variant === \"compact\" ? \"h-7 px-2\" : \"h-8\"\n            )}\n            onClick={onClearAll}\n          >\n            Clear All\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { InsightsFilterBar }\n"],"mappings":";AA6DM,SACE,KADF;AA1DN,SAAS,cAAc,iBAAiB,kBAAkB;AAE1D,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAmBP,SAAS,mBACP,SACA,QACA;AACA,SAAO,QAAQ,KAAK,CAAC,WAAW;AApClC;AAqCI,UAAM,cAAa,kBAAO,iBAAP,YAAuB,OAAO,QAAQ,CAAC,MAAvC,YAA4C;AAC/D,WAAO,OAAO,OAAO,EAAE,MAAM,UAAa,OAAO,OAAO,EAAE,MAAM;AAAA,EAClE,CAAC;AACH;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAA2B;AACzB,QAAM,eAAe,cAAc,mBAAmB,SAAS,MAAM;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,YAAY,YAAY,cAAc;AAAA,QACtC;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAW,GAAG,2BAA2B,YAAY,aAAa,SAAS,GAC9E;AAAA,8BAAC,cAAW,WAAU,iCAAgC;AAAA,UACtD,oBAAC,UAAK,WAAU,6CAA4C,sBAE5D;AAAA,WACF;AAAA,QAEC,QAAQ,IAAI,CAAC,WAAW;AApE/B;AAqEQ,gBAAM,WAAU,kBAAO,OAAO,EAAE,MAAhB,YAAqB,OAAO,iBAA5B,YAA4C;AAC5D,gBAAM,aAAa,OAAO,QAAQ,SAAS;AAE3C,gBAAM,WACJ,OAAO,SAAS,aACZ,eACA,OAAO,OAAO,SAAS,aACrB,OAAO,OACP;AAER,iBACE,qBAAC,gBACC;AAAA,gCAAC,uBAAoB,SAAO,MAC1B;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,YAAY,aAAa;AAAA,gBACvC;AAAA,gBAEC;AAAA,6BACC,oBAAC,YAAS,WAAU,qCAAoC,IACtD;AAAA,kBACH,OAAO;AAAA,kBAAM;AAAA,kBAAG;AAAA,kBACjB,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA;AAAA;AAAA,YACtD,GACF;AAAA,YACA,oBAAC,uBAAoB,OAAM,SACxB,uBACG,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,SAAS,YAAY;AAAA,gBACrB,iBAAiB,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEhD;AAAA;AAAA,cAJI;AAAA,YAKP,CACD,IACD,OAAO,QAAQ,IAAI,CAAC,WAClB;AAAA,cAAC;AAAA;AAAA,gBAEC,UAAU,MAAM,SAAS,OAAO,IAAI,MAAM;AAAA,gBAEzC;AAAA;AAAA,cAHI;AAAA,YAIP,CACD,GACP;AAAA,eApCiB,OAAO,EAqC1B;AAAA,QAEJ,CAAC;AAAA,QAEA,eACC,oBAAC,SAAI,WAAU,WACb;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAW;AAAA,cACT;AAAA,cACA,YAAY,YAAY,aAAa;AAAA,YACvC;AAAA,YACA,SAAS;AAAA,YACV;AAAA;AAAA,QAED,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/linked-entity-cell.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    name: React.ReactNode;
+    href?: string;
+    subtitle?: React.ReactNode;
+    meta?: React.ReactNode;
+    icon?: React.ReactNode;
+    external?: boolean;
+    onNavigate?: () => void;
+}
+declare function LinkedEntityCell({ name, href, subtitle, meta, icon, external, onNavigate, className, ...props }: LinkedEntityCellProps): React.JSX.Element;
+
+export { LinkedEntityCell, type LinkedEntityCellProps };

package/dist/components/linked-entity-cell.js

@@ -0,0 +1,96 @@
+"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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function LinkedEntityCell(_a) {
+  var _b = _a, {
+    name,
+    href,
+    subtitle,
+    meta,
+    icon,
+    external = false,
+    onNavigate,
+    className
+  } = _b, props = __objRest(_b, [
+    "name",
+    "href",
+    "subtitle",
+    "meta",
+    "icon",
+    "external",
+    "onNavigate",
+    "className"
+  ]);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+    external ? /* @__PURE__ */ jsx(ExternalLink, { className: "h-3 w-3 shrink-0 opacity-60", "aria-hidden": "true" }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "linked-entity-cell",
+      className: cn("flex min-w-0 items-center gap-2", className)
+    }, props), {
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-icon", className: "shrink-0 text-muted-foreground", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              "data-slot": "linked-entity-cell-link",
+              href,
+              target: external ? "_blank" : void 0,
+              rel: external ? "noreferrer" : void 0,
+              onClick: onNavigate,
+              className: "inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline",
+              children: content
+            }
+          ) : /* @__PURE__ */ jsx("span", { "data-slot": "linked-entity-cell-name", className: "block truncate font-medium text-foreground", children: name }),
+          subtitle || meta ? /* @__PURE__ */ jsxs("div", { "data-slot": "linked-entity-cell-meta", className: "mt-0.5 truncate text-xs text-muted-foreground", children: [
+            subtitle,
+            subtitle && meta ? /* @__PURE__ */ jsx("span", { className: "px-1", children: "\xB7" }) : null,
+            meta
+          ] }) : null
+        ] })
+      ]
+    })
+  );
+}
+export {
+  LinkedEntityCell
+};
+//# sourceMappingURL=linked-entity-cell.js.map

package/dist/components/linked-entity-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/linked-entity-cell.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: React.ReactNode\n  href?: string\n  subtitle?: React.ReactNode\n  meta?: React.ReactNode\n  icon?: React.ReactNode\n  external?: boolean\n  onNavigate?: () => void\n}\n\nexport function LinkedEntityCell({\n  name,\n  href,\n  subtitle,\n  meta,\n  icon,\n  external = false,\n  onNavigate,\n  className,\n  ...props\n}: LinkedEntityCellProps) {\n  const content = (\n    <>\n      <span className=\"truncate\">{name}</span>\n      {external ? <ExternalLink className=\"h-3 w-3 shrink-0 opacity-60\" aria-hidden=\"true\" /> : null}\n    </>\n  )\n\n  return (\n    <div\n      data-slot=\"linked-entity-cell\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      {icon ? (\n        <span data-slot=\"linked-entity-cell-icon\" className=\"shrink-0 text-muted-foreground\">\n          {icon}\n        </span>\n      ) : null}\n      <div className=\"min-w-0 flex-1\">\n        {href ? (\n          <a\n            data-slot=\"linked-entity-cell-link\"\n            href={href}\n            target={external ? \"_blank\" : undefined}\n            rel={external ? \"noreferrer\" : undefined}\n            onClick={onNavigate}\n            className=\"inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline\"\n          >\n            {content}\n          </a>\n        ) : (\n          <span data-slot=\"linked-entity-cell-name\" className=\"block truncate font-medium text-foreground\">\n            {name}\n          </span>\n        )}\n        {subtitle || meta ? (\n          <div data-slot=\"linked-entity-cell-meta\" className=\"mt-0.5 truncate text-xs text-muted-foreground\">\n            {subtitle}\n            {subtitle && meta ? <span className=\"px-1\">·</span> : null}\n            {meta}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BI,mBACE,KADF;AA1BJ,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AAYZ,SAAS,iBAAiB,IAUP;AAVO,eAC/B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EAzBF,IAiBiC,IAS5B,kBAT4B,IAS5B;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAK,WAAU,YAAY,gBAAK;AAAA,IAChC,WAAW,oBAAC,gBAAa,WAAU,+BAA8B,eAAY,QAAO,IAAK;AAAA,KAC5F;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,OACtD,QAHL;AAAA,MAKE;AAAA,eACC,oBAAC,UAAK,aAAU,2BAA0B,WAAU,kCACjD,gBACH,IACE;AAAA,QACJ,qBAAC,SAAI,WAAU,kBACZ;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV;AAAA,cACA,QAAQ,WAAW,WAAW;AAAA,cAC9B,KAAK,WAAW,eAAe;AAAA,cAC/B,SAAS;AAAA,cACT,WAAU;AAAA,cAET;AAAA;AAAA,UACH,IAEA,oBAAC,UAAK,aAAU,2BAA0B,WAAU,8CACjD,gBACH;AAAA,UAED,YAAY,OACX,qBAAC,SAAI,aAAU,2BAA0B,WAAU,iDAChD;AAAA;AAAA,YACA,YAAY,OAAO,oBAAC,UAAK,WAAU,QAAO,kBAAC,IAAU;AAAA,YACrD;AAAA,aACH,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/metric-card.d.ts

@@ -20,6 +20,19 @@ interface MetricCardProps {
     showExternalLink?: boolean;
     showInfo?: boolean;
 }
+interface KpiStripItem {
+    id?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    unit?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    change?: MetricCardProps["change"];
+}
+interface KpiStripProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: KpiStripItem[];
+    columns?: 2 | 3 | 4;
+}
+declare function KpiStrip({ items, columns, className, ...props }: KpiStripProps): React.JSX.Element;
 declare function MetricCard({ title, value, unit, subtitle, change, footerText, dataPoints, showExternalLink, showInfo, }: MetricCardProps): React.JSX.Element;
 
-export { MetricCard, type MetricCardProps, type MetricDataPoint };
+export { KpiStrip, type KpiStripItem, type KpiStripProps, MetricCard, type MetricCardProps, type MetricDataPoint };