@handled-ai/design-system 0.18.22 → 0.18.24

package/src/components/contextual-quick-action-launcher.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { ArrowRight, ChevronDown, Zap } from "lucide-react"
+import { ChevronDown, Zap } from "lucide-react"
 
 import { cn } from "../lib/utils"
 import {
@@ -19,11 +19,15 @@ export interface ContextualQuickActionItem {
   icon?: React.ReactNode
   disabled?: boolean
   disabledReason?: string
+  meta?: React.ReactNode
 }
 
+export type ContextualQuickActionLauncherVariant = "default" | "case-panel"
+
 export interface ContextualQuickActionContextLabelProps {
   contextLabel: string
   contextSecondary?: string
+  variant?: ContextualQuickActionLauncherVariant
   className?: string
 }
 
@@ -35,6 +39,7 @@ export interface ContextualQuickActionLauncherProps {
   onBrowseAll?: () => void
   showHint?: boolean
   align?: "start" | "end"
+  variant?: ContextualQuickActionLauncherVariant
   className?: string
   open?: boolean
   defaultOpen?: boolean
@@ -44,19 +49,35 @@ export interface ContextualQuickActionLauncherProps {
 function ContextualQuickActionContextLabel({
   contextLabel,
   contextSecondary,
+  variant = "default",
   className,
 }: ContextualQuickActionContextLabelProps) {
+  const isCasePanel = variant === "case-panel"
+
   return (
     <div
       data-slot="contextual-quick-action-context-label"
+      data-variant={variant}
       className={cn(
-        "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
+        isCasePanel
+          ? "-mx-2 -mt-2 mb-1 flex items-center gap-1.5 whitespace-nowrap border-b px-3 py-2.5 text-[13px] text-muted-foreground"
+          : "-mx-1 -mt-1 mb-1 flex items-center gap-1.5 border-b px-3 py-2 text-[11px] text-muted-foreground",
         className
       )}
     >
-      <Zap className="h-3 w-3 shrink-0" strokeWidth={2.25} aria-hidden="true" />
+      <Zap
+        className={cn(isCasePanel ? "h-3.5 w-3.5 shrink-0" : "h-3 w-3 shrink-0")}
+        strokeWidth={2.25}
+        aria-hidden="true"
+      />
       <span>Acting on</span>
-      <strong className="max-w-[180px] truncate font-semibold text-foreground">
+      <strong
+        className={cn(
+          isCasePanel
+            ? "max-w-[260px] truncate font-semibold text-foreground"
+            : "max-w-[180px] truncate font-semibold text-foreground"
+        )}
+      >
         {contextLabel}
       </strong>
       {contextSecondary ? (
@@ -80,12 +101,14 @@ function ContextualQuickActionLauncher({
   onBrowseAll,
   showHint = false,
   align = "start",
+  variant = "default",
   className,
   open,
   defaultOpen,
   onOpenChange,
 }: ContextualQuickActionLauncherProps) {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false)
+  const isCasePanel = variant === "case-panel"
   const isControlled = open !== undefined
   const isOpen = isControlled ? open : uncontrolledOpen
 
@@ -154,11 +177,16 @@ function ContextualQuickActionLauncher({
           align={align}
           side="bottom"
           sideOffset={6}
-          className="pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+          className={cn(
+            isCasePanel
+              ? "pointer-events-auto w-[432px] rounded-[13px] border border-border bg-popover p-2 text-[13px] shadow-[0_18px_44px_rgba(0,0,0,0.14),0_2px_10px_rgba(0,0,0,0.06)]"
+              : "pointer-events-auto w-[308px] rounded-[10px] p-1.5 text-[12.5px] shadow-[0_12px_28px_rgba(0,0,0,0.12),0_2px_6px_rgba(0,0,0,0.04)]"
+          )}
         >
           <ContextualQuickActionContextLabel
             contextLabel={contextLabel}
             contextSecondary={contextSecondary}
+            variant={variant}
           />
 
           {items.map((item) => (
@@ -167,48 +195,97 @@ function ContextualQuickActionLauncher({
               disabled={item.disabled}
               onSelect={(event) => handleSelect(item, event)}
               className={cn(
-                "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
+                isCasePanel
+                  ? "grid cursor-pointer grid-cols-[34px_minmax(0,1fr)_auto] items-center gap-3 rounded-[9px] px-2.5 py-[9px] text-left outline-none focus:bg-muted/60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100"
+                  : "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus:bg-accent data-[disabled]:cursor-not-allowed data-[disabled]:opacity-100",
                 item.disabled && "text-muted-foreground"
               )}
             >
               <span
                 data-slot="contextual-quick-action-item-icon"
                 className={cn(
-                  "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
+                  isCasePanel
+                    ? "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[9px] border border-border/70 bg-muted/60 text-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]"
+                    : "flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-md bg-secondary text-foreground",
                   item.disabled && "opacity-60"
                 )}
               >
                 {item.icon ?? <DefaultActionIcon />}
               </span>
               <span className="min-w-0 flex-1">
-                <span className="block truncate text-[12.5px] font-medium leading-tight text-current">
+                <span
+                  className={cn(
+                    isCasePanel
+                      ? "block truncate text-[13.5px] font-semibold leading-tight text-current"
+                      : "block truncate text-[12.5px] font-medium leading-tight text-current"
+                  )}
+                >
                   {item.label}
                 </span>
                 {item.description ? (
-                  <span className="mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground">
+                  <span
+                    className={cn(
+                      isCasePanel
+                        ? "mt-1 block truncate text-[12px] leading-tight text-muted-foreground"
+                        : "mt-0.5 block truncate text-[11px] leading-tight text-muted-foreground"
+                    )}
+                  >
                     {item.description}
                   </span>
                 ) : null}
               </span>
               {item.disabled && item.disabledReason ? (
-                <span className="ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80">
+                <span
+                  data-slot="contextual-quick-action-item-disabled-meta"
+                  className={cn(
+                    isCasePanel
+                      ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70"
+                      : "ml-auto shrink-0 text-[10.5px] italic text-muted-foreground/80"
+                  )}
+                >
                   {item.disabledReason}
                 </span>
+              ) : item.meta ? (
+                <span
+                  data-slot="contextual-quick-action-item-meta"
+                  className={cn(
+                    isCasePanel
+                      ? "ml-auto shrink-0 whitespace-nowrap text-[12px] italic text-muted-foreground/70"
+                      : "ml-auto shrink-0 text-[10.5px] text-muted-foreground/80"
+                  )}
+                >
+                  {item.meta}
+                </span>
               ) : null}
             </DropdownMenuItem>
           ))}
 
-          <DropdownMenuSeparator className="-mx-1.5 my-1" />
-          <div className="flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground">
+          <DropdownMenuSeparator className={cn(isCasePanel ? "-mx-2 mt-1 mb-1" : "-mx-1.5 my-1")} />
+          <div
+            className={cn(
+              isCasePanel
+                ? "flex items-center justify-between whitespace-nowrap px-2.5 py-2 text-[13px] text-muted-foreground"
+                : "flex items-center justify-between px-2 py-1.5 text-[11px] text-muted-foreground"
+            )}
+          >
             <button
               type="button"
-              className="inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className={cn(
+                isCasePanel
+                  ? "inline-flex items-center gap-1 font-semibold text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  : "inline-flex items-center gap-1 font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              )}
               onClick={handleBrowseAll}
             >
               Browse all actions
-              <ArrowRight className="h-3 w-3" strokeWidth={2} aria-hidden="true" />
             </button>
-            <span className="inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+            <span
+              className={cn(
+                isCasePanel
+                  ? "inline-flex items-center rounded-[5px] border border-border bg-muted/50 px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none text-muted-foreground"
+                  : "inline-flex items-center rounded border border-border px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground"
+              )}
+            >
               ⌘K
             </span>
           </div>

package/src/index.ts

@@ -20,6 +20,10 @@ export * from "./components/avatar"
 export * from "./components/badge"
 export * from "./components/button"
 export * from "./components/card"
+export * from "./components/case-panel-email-composer"
+export * from "./components/case-panel-activity-timeline"
+export * from "./components/case-panel-detail"
+export * from "./components/case-panel-why"
 export { CollapsibleSection, type CollapsibleSectionProps } from "./components/collapsible-section"
 export * from "./components/compliance-badge"
 export * from "./components/contact-chip"