@handled-ai/design-system 0.18.30 → 0.18.32

package/dist/components/badge.d.ts

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

package/dist/components/button.d.ts

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

package/dist/components/pill.d.ts

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

package/dist/components/related-record-action-card.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic";
+type RelatedRecordActionIcon = "salesforce" | React.ReactNode;
+interface RelatedRecordActionCardProps {
+    kind: RelatedRecordActionCardKind;
+    label: string;
+    subtitle?: string;
+    disabledReason?: string;
+    href?: string;
+    external?: boolean;
+    icon?: RelatedRecordActionIcon;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    testId?: string;
+}
+declare function RelatedRecordActionCard({ kind, label, subtitle, disabledReason, href, external, icon, onClick, className, testId, }: RelatedRecordActionCardProps): React.JSX.Element;
+
+export { RelatedRecordActionCard, type RelatedRecordActionCardKind, type RelatedRecordActionCardProps, type RelatedRecordActionIcon };

package/dist/components/related-record-action-card.js

@@ -0,0 +1,150 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink } from "lucide-react";
+import { BRAND_ICONS } from "../lib/icons.js";
+import { cn } from "../lib/utils.js";
+function renderActionIcon(icon, kind) {
+  if (icon === "salesforce" || kind === "salesforce") {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: BRAND_ICONS.salesforce,
+        alt: "Salesforce",
+        className: "h-4 w-4 object-contain",
+        draggable: false
+      }
+    );
+  }
+  if (icon) {
+    return icon;
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: kind.slice(0, 1).toUpperCase() });
+}
+function RelatedRecordActionCard({
+  kind,
+  label,
+  subtitle,
+  disabledReason,
+  href,
+  external,
+  icon,
+  onClick,
+  className,
+  testId
+}) {
+  const isDisabled = Boolean(disabledReason) || !href && !onClick;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "related-record-action-card-icon",
+        className: cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
+          isDisabled ? "border-border/60 bg-muted/40 text-muted-foreground" : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
+        ),
+        children: renderActionIcon(icon, kind)
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-label",
+          className: cn(
+            "block truncate text-sm font-medium transition-colors",
+            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
+          ),
+          children: label
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-subtitle",
+          className: "mt-0.5 block truncate text-xs text-muted-foreground",
+          children: subtitle
+        }
+      ),
+      disabledReason && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "related-record-action-card-disabled-reason",
+          className: "mt-1 block text-xs text-muted-foreground",
+          children: disabledReason
+        }
+      )
+    ] }),
+    external && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "opens in a new tab" }),
+      /* @__PURE__ */ jsx(
+        ExternalLink,
+        {
+          "aria-hidden": "true",
+          "data-slot": "related-record-action-card-external-icon",
+          className: cn(
+            "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
+            isDisabled ? "" : "group-active:text-primary"
+          )
+        }
+      )
+    ] })
+  ] });
+  if (isDisabled) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-disabled": "true",
+        "data-kind": kind,
+        "data-slot": "related-record-action-card",
+        "data-testid": testId,
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
+          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
+          className
+        ),
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        "data-kind": kind,
+        "data-slot": "related-record-action-card",
+        "data-testid": testId,
+        className: cn(
+          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+          className
+        ),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "data-kind": kind,
+      "data-slot": "related-record-action-card",
+      "data-testid": testId,
+      className: cn(
+        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+        className
+      ),
+      children: content
+    }
+  );
+}
+export {
+  RelatedRecordActionCard
+};
+//# sourceMappingURL=related-record-action-card.js.map

package/dist/components/related-record-action-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/related-record-action-card.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ExternalLink } from \"lucide-react\"\n\nimport { BRAND_ICONS } from \"../lib/icons\"\nimport { cn } from \"../lib/utils\"\n\nexport type RelatedRecordActionCardKind = \"case\" | \"account\" | \"opportunity\" | \"salesforce\" | \"generic\"\n\nexport type RelatedRecordActionIcon = \"salesforce\" | React.ReactNode\n\nexport interface RelatedRecordActionCardProps {\n  kind: RelatedRecordActionCardKind\n  label: string\n  subtitle?: string\n  disabledReason?: string\n  href?: string\n  external?: boolean\n  icon?: RelatedRecordActionIcon\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n  className?: string\n  testId?: string\n}\n\nfunction renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {\n  if (icon === \"salesforce\" || kind === \"salesforce\") {\n    return (\n      <img\n        src={BRAND_ICONS.salesforce}\n        alt=\"Salesforce\"\n        className=\"h-4 w-4 object-contain\"\n        draggable={false}\n      />\n    )\n  }\n\n  if (icon) {\n    return icon\n  }\n\n  return <span aria-hidden=\"true\">{kind.slice(0, 1).toUpperCase()}</span>\n}\n\nexport function RelatedRecordActionCard({\n  kind,\n  label,\n  subtitle,\n  disabledReason,\n  href,\n  external,\n  icon,\n  onClick,\n  className,\n  testId,\n}: RelatedRecordActionCardProps) {\n  const isDisabled = Boolean(disabledReason) || (!href && !onClick)\n\n  const content = (\n    <>\n      <span\n        data-slot=\"related-record-action-card-icon\"\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors\",\n          isDisabled\n            ? \"border-border/60 bg-muted/40 text-muted-foreground\"\n            : \"border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary\"\n        )}\n      >\n        {renderActionIcon(icon, kind)}\n      </span>\n      <span className=\"min-w-0 flex-1\">\n        <span\n          data-slot=\"related-record-action-card-label\"\n          className={cn(\n            \"block truncate text-sm font-medium transition-colors\",\n            isDisabled ? \"text-muted-foreground\" : \"text-foreground group-active:text-primary\"\n          )}\n        >\n          {label}\n        </span>\n        {subtitle && (\n          <span\n            data-slot=\"related-record-action-card-subtitle\"\n            className=\"mt-0.5 block truncate text-xs text-muted-foreground\"\n          >\n            {subtitle}\n          </span>\n        )}\n        {disabledReason && (\n          <span\n            data-slot=\"related-record-action-card-disabled-reason\"\n            className=\"mt-1 block text-xs text-muted-foreground\"\n          >\n            {disabledReason}\n          </span>\n        )}\n      </span>\n      {external && (\n        <>\n          <span className=\"sr-only\">opens in a new tab</span>\n          <ExternalLink\n            aria-hidden=\"true\"\n            data-slot=\"related-record-action-card-external-icon\"\n            className={cn(\n              \"h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors\",\n              isDisabled ? \"\" : \"group-active:text-primary\"\n            )}\n          />\n        </>\n      )}\n    </>\n  )\n\n  if (isDisabled) {\n    return (\n      <div\n        aria-disabled=\"true\"\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors\",\n          \"cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70\",\n          className\n        )}\n      >\n        {content}\n      </div>\n    )\n  }\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        data-kind={kind}\n        data-slot=\"related-record-action-card\"\n        data-testid={testId}\n        className={cn(\n          \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n          \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n          className\n        )}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      data-kind={kind}\n      data-slot=\"related-record-action-card\"\n      data-testid={testId}\n      className={cn(\n        \"group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors\",\n        \"cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary\",\n        className\n      )}\n    >\n      {content}\n    </button>\n  )\n}\n"],"mappings":";AA4BM,SAuEE,UAvEF,KA2CA,YA3CA;AAzBN,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAmBnB,SAAS,iBAAiB,MAA2C,MAAmC;AACtG,MAAI,SAAS,gBAAgB,SAAS,cAAc;AAClD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,UAAK,eAAY,QAAQ,eAAK,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE;AAClE;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,aAAa,QAAQ,cAAc,KAAM,CAAC,QAAQ,CAAC;AAEzD,QAAM,UACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,aACI,uDACA;AAAA,QACN;AAAA,QAEC,2BAAiB,MAAM,IAAI;AAAA;AAAA,IAC9B;AAAA,IACA,qBAAC,UAAK,WAAU,kBACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,0BAA0B;AAAA,UACzC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAED,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,IACC,YACC,iCACE;AAAA,0BAAC,UAAK,WAAU,WAAU,gCAAkB;AAAA,MAC5C;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,aAAa,KAAK;AAAA,UACpB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KAEJ;AAGF,MAAI,YAAY;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAc;AAAA,QACd,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,QAAQ,WAAW,WAAW;AAAA,QAC9B,KAAK,WAAW,wBAAwB;AAAA,QACxC,aAAW;AAAA,QACX,aAAU;AAAA,QACV,eAAa;AAAA,QACb,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,aAAW;AAAA,MACX,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/tabs.d.ts

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

package/dist/index.d.ts

@@ -59,6 +59,7 @@ export { QuickSegment, QuickSegmentProps } from './components/quick-segment.js';
 export { QuickActionModal, QuickActionPriority, QuickActionTaskDraft, QuickActionTemplate } from './components/quick-action-modal.js';
 export { ActiveVariant, QuickActionSidebarNav, SidebarNavItem, SidebarNavSection, SidebarUserProfile, UserMenuItem } from './components/quick-action-sidebar-nav.js';
 export { RecommendedAction, RecommendedActionsSection } from './components/recommended-actions-section.js';
+export { RelatedRecordActionCard, RelatedRecordActionCardKind, RelatedRecordActionCardProps, RelatedRecordActionIcon } from './components/related-record-action-card.js';
 export { ReportCard, ReportCardProps } from './components/report-card.js';
 export { RichTextAction, RichTextToolbar, RichTextToolbarProps } from './components/rich-text-toolbar.js';
 export { ScoreAnalysisModal, ScoreAnalysisModalProps, ScoreAnalysisPanel, getScoreLabel } from './components/score-analysis-modal.js';

package/dist/index.js

@@ -61,6 +61,7 @@ import {
 } from "./components/quick-action-modal.js";
 export * from "./components/quick-action-sidebar-nav.js";
 export * from "./components/recommended-actions-section.js";
+export * from "./components/related-record-action-card.js";
 export * from "./components/report-card.js";
 export * from "./components/rich-text-toolbar.js";
 export * from "./components/score-analysis-modal.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\nexport { displayName, getInitials, shortName, type ProfileLike } from \"./lib/user-display\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/case-panel-email-composer\"\nexport * from \"./components/case-panel-activity-timeline\"\nexport * from \"./components/case-panel-detail\"\nexport * from \"./components/case-panel-why\"\nexport { CollapsibleSection, type CollapsibleSectionProps } from \"./components/collapsible-section\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/contextual-quick-action-launcher\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-condition-filter\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/detail-drawer\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from \"./components/feedback-primitives\"\nexport { SignalPriorityPopover } from \"./components/signal-priority-popover\"\nexport type { SignalPriorityPopoverProps, PriorityFactor } from \"./components/signal-priority-popover\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/days-open-cell\"\nexport * from \"./components/linked-entity-cell\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/pill\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport * from \"./components/quick-segment\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-semantics\"\nexport * from \"./components/score-why-chips\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/user-display\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa,aAAa,iBAAmC;AAGtE,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,0BAAwD;AACjE,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB,mBAAmB,eAAe,iBAAiB,6BAA6B;AAEzG,SAAS,6BAA6B;AAEtC,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS, BRAND_GRAPHICS } from \"./lib/icons\"\nexport { displayName, getInitials, shortName, type ProfileLike } from \"./lib/user-display\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/case-panel-email-composer\"\nexport * from \"./components/case-panel-activity-timeline\"\nexport * from \"./components/case-panel-detail\"\nexport * from \"./components/case-panel-why\"\nexport { CollapsibleSection, type CollapsibleSectionProps } from \"./components/collapsible-section\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/contextual-quick-action-launcher\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-condition-filter\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/detail-drawer\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport { FeedbackFooter, FeedbackChipGroup, FeedbackInput, FeedbackActions, InlineFeedbackControl } from \"./components/feedback-primitives\"\nexport type { FeedbackFooterProps, FeedbackChipTree, FeedbackChipGroupProps, FeedbackInputProps, FeedbackActionsProps, FeedbackSubmitData, PersistedFeedbackData, InlineFeedbackControlProps } from \"./components/feedback-primitives\"\nexport { SignalPriorityPopover } from \"./components/signal-priority-popover\"\nexport type { SignalPriorityPopoverProps, PriorityFactor } from \"./components/signal-priority-popover\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/days-open-cell\"\nexport * from \"./components/linked-entity-cell\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/pill\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport * from \"./components/quick-segment\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/related-record-action-card\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-semantics\"\nexport * from \"./components/score-why-chips\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport { DraftFeedbackInline } from \"./components/draft-feedback-inline\"\nexport type { DraftFeedbackInlineProps } from \"./components/draft-feedback-inline\"\nexport { AccountContactsPopover, BrandIcon } from \"./components/account-contacts-popover\"\nexport type { AccountContactsPopoverProps } from \"./components/account-contacts-popover\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/user-display\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\nexport type { ColumnSizingState } from \"@tanstack/react-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa,aAAa,iBAAmC;AAGtE,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,0BAAwD;AACjE,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB,mBAAmB,eAAe,iBAAiB,6BAA6B;AAEzG,SAAS,6BAA6B;AAEtC,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB,iBAAiB;AAElD,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAId,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

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

package/src/components/__tests__/related-record-action-card.test.tsx

@@ -0,0 +1,123 @@
+import "@testing-library/jest-dom/vitest"
+
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { BRAND_ICONS } from "../../lib/icons"
+import { RelatedRecordActionCard } from "../related-record-action-card"
+
+describe("RelatedRecordActionCard", () => {
+  it("renders an enabled href as a link with pointer affordance", () => {
+    render(
+      <RelatedRecordActionCard
+        kind="account"
+        label="Open account"
+        subtitle="Acme Corp"
+        href="/accounts/acme"
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("A")
+    expect(card).toHaveAttribute("href", "/accounts/acme")
+    expect(card.className).toContain("cursor-pointer")
+    expect(card.className).toContain("hover:bg-muted/50")
+    expect(card.className).toContain("hover:border-border/80")
+    expect(card.className).toContain("focus-visible:ring-2")
+    expect(card.className).toContain("active:text-primary")
+    expect(screen.getByText("Acme Corp")).toBeInTheDocument()
+  })
+
+  it("renders an enabled onClick action as a button and invokes the callback", () => {
+    const onClick = vi.fn()
+
+    render(
+      <RelatedRecordActionCard
+        kind="case"
+        label="Open case"
+        onClick={onClick}
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByRole("button", { name: /open case/i })
+
+    expect(card.tagName).toBe("BUTTON")
+    expect(card).toHaveAttribute("type", "button")
+    expect(card.className).toContain("cursor-pointer")
+
+    fireEvent.click(card)
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("renders a disabled card when disabledReason is present", () => {
+    render(
+      <RelatedRecordActionCard
+        kind="opportunity"
+        label="Open opportunity"
+        disabledReason="Connect Salesforce to view this opportunity."
+        href="/opportunities/1"
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("DIV")
+    expect(card).toHaveAttribute("aria-disabled", "true")
+    expect(card.className).toContain("cursor-not-allowed")
+    expect(card.className).toContain("text-muted-foreground")
+    expect(card.className).not.toContain("cursor-pointer")
+    expect(card.className).not.toContain("hover:bg-muted/50")
+    expect(screen.getByText("Connect Salesforce to view this opportunity.")).toBeInTheDocument()
+  })
+
+  it("renders a disabled card when no action is available", () => {
+    render(<RelatedRecordActionCard kind="generic" label="Unavailable record" testId="record-card" />)
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("DIV")
+    expect(card).toHaveAttribute("aria-disabled", "true")
+    expect(card.className).toContain("cursor-not-allowed")
+  })
+
+  it("sets external link attributes and exposes an accessible external-link cue", () => {
+    const { container } = render(
+      <RelatedRecordActionCard
+        kind="salesforce"
+        label="Open in Salesforce"
+        href="https://example.salesforce.com/001"
+        external
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card).toHaveAttribute("target", "_blank")
+    expect(card).toHaveAttribute("rel", "noopener noreferrer")
+    expect(screen.getByText("opens in a new tab")).toHaveClass("sr-only")
+    expect(container.querySelector('[data-slot="related-record-action-card-external-icon"]')).not.toBeNull()
+  })
+
+  it("renders the Salesforce brand icon when icon is salesforce", () => {
+    const { container } = render(
+      <RelatedRecordActionCard
+        kind="generic"
+        label="Salesforce record"
+        href="https://example.salesforce.com/001"
+        icon="salesforce"
+      />
+    )
+
+    const icon = container.querySelector('[data-slot="related-record-action-card-icon"] img')
+
+    expect(icon).toHaveAttribute("src", BRAND_ICONS.salesforce)
+    expect(icon).toHaveAttribute("alt", "Salesforce")
+  })
+})

package/src/components/related-record-action-card.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from "react"
+import { ExternalLink } from "lucide-react"
+
+import { BRAND_ICONS } from "../lib/icons"
+import { cn } from "../lib/utils"
+
+export type RelatedRecordActionCardKind = "case" | "account" | "opportunity" | "salesforce" | "generic"
+
+export type RelatedRecordActionIcon = "salesforce" | React.ReactNode
+
+export interface RelatedRecordActionCardProps {
+  kind: RelatedRecordActionCardKind
+  label: string
+  subtitle?: string
+  disabledReason?: string
+  href?: string
+  external?: boolean
+  icon?: RelatedRecordActionIcon
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  className?: string
+  testId?: string
+}
+
+function renderActionIcon(icon: RelatedRecordActionIcon | undefined, kind: RelatedRecordActionCardKind) {
+  if (icon === "salesforce" || kind === "salesforce") {
+    return (
+      <img
+        src={BRAND_ICONS.salesforce}
+        alt="Salesforce"
+        className="h-4 w-4 object-contain"
+        draggable={false}
+      />
+    )
+  }
+
+  if (icon) {
+    return icon
+  }
+
+  return <span aria-hidden="true">{kind.slice(0, 1).toUpperCase()}</span>
+}
+
+export function RelatedRecordActionCard({
+  kind,
+  label,
+  subtitle,
+  disabledReason,
+  href,
+  external,
+  icon,
+  onClick,
+  className,
+  testId,
+}: RelatedRecordActionCardProps) {
+  const isDisabled = Boolean(disabledReason) || (!href && !onClick)
+
+  const content = (
+    <>
+      <span
+        data-slot="related-record-action-card-icon"
+        className={cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border text-xs font-semibold transition-colors",
+          isDisabled
+            ? "border-border/60 bg-muted/40 text-muted-foreground"
+            : "border-border bg-muted/30 text-muted-foreground group-hover:bg-muted/60 group-active:text-primary"
+        )}
+      >
+        {renderActionIcon(icon, kind)}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span
+          data-slot="related-record-action-card-label"
+          className={cn(
+            "block truncate text-sm font-medium transition-colors",
+            isDisabled ? "text-muted-foreground" : "text-foreground group-active:text-primary"
+          )}
+        >
+          {label}
+        </span>
+        {subtitle && (
+          <span
+            data-slot="related-record-action-card-subtitle"
+            className="mt-0.5 block truncate text-xs text-muted-foreground"
+          >
+            {subtitle}
+          </span>
+        )}
+        {disabledReason && (
+          <span
+            data-slot="related-record-action-card-disabled-reason"
+            className="mt-1 block text-xs text-muted-foreground"
+          >
+            {disabledReason}
+          </span>
+        )}
+      </span>
+      {external && (
+        <>
+          <span className="sr-only">opens in a new tab</span>
+          <ExternalLink
+            aria-hidden="true"
+            data-slot="related-record-action-card-external-icon"
+            className={cn(
+              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors",
+              isDisabled ? "" : "group-active:text-primary"
+            )}
+          />
+        </>
+      )}
+    </>
+  )
+
+  if (isDisabled) {
+    return (
+      <div
+        aria-disabled="true"
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors",
+          "cursor-not-allowed border-border/60 bg-muted/20 text-muted-foreground opacity-70",
+          className
+        )}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        data-kind={kind}
+        data-slot="related-record-action-card"
+        data-testid={testId}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+          "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+          className
+        )}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      data-kind={kind}
+      data-slot="related-record-action-card"
+      data-testid={testId}
+      className={cn(
+        "group flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2 text-left transition-colors",
+        "cursor-pointer hover:bg-muted/50 hover:border-border/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:text-primary",
+        className
+      )}
+    >
+      {content}
+    </button>
+  )
+}

package/src/index.ts

@@ -76,6 +76,7 @@ export {
 } from "./components/quick-action-modal"
 export * from "./components/quick-action-sidebar-nav"
 export * from "./components/recommended-actions-section"
+export * from "./components/related-record-action-card"
 export * from "./components/report-card"
 export * from "./components/rich-text-toolbar"
 export * from "./components/score-analysis-modal"