@handled-ai/design-system 0.18.31 → 0.18.33

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

@@ -1,166 +0,0 @@
-"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 && (
-        <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>
-  )
-}