@wealthx/shadcn 1.5.10 → 1.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/index.tsx

@@ -73,6 +73,7 @@ export type {
   AdvisorCardProps,
   AdvisorInviteCardProps,
   AdvisorAppointmentStrip,
+  AdvisorCardMenuItem,
 } from "./ui/advisor-card";
 
 export { AppointmentUpcomingCard } from "./ui/appointment-upcoming-card";
@@ -492,10 +493,13 @@ export type {
 export {
   ShareDetailsDialog,
   EmailTemplateDialog,
+  ShareContactDialog,
 } from "./ui/share-details-dialog";
 export type {
   ShareDetailsDialogProps,
   EmailTemplateDialogProps,
+  ShareContactDialogProps,
+  InternalAdvisor,
 } from "./ui/share-details-dialog";
 
 export { FilePreviewDialog } from "./ui/file-preview-dialog";

package/src/components/ui/advisor-card.tsx

@@ -3,6 +3,12 @@ import { Badge } from "./badge";
 import { Button } from "./button";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
 import { Separator } from "./separator";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
 import {
   Calendar,
   CalendarCheck,
@@ -18,6 +24,18 @@ import type { AppointmentStatus } from "./appointment-time-slot-picker";
 // Types
 // ---------------------------------------------------------------------------
 
+/** A single item in the ⋮ overflow DropdownMenu */
+export interface AdvisorCardMenuItem {
+  /** Display label */
+  label: string;
+  /** Called when the item is clicked */
+  onClick: () => void;
+  /** Visual variant — use "destructive" for delete/remove actions */
+  variant?: "default" | "destructive";
+  /** Disables the item without removing it */
+  disabled?: boolean;
+}
+
 /** Appointment data shown in the strip inside the advisor card */
 export interface AdvisorAppointmentStrip {
   status: AppointmentStatus;
@@ -57,7 +75,12 @@ export interface AdvisorCardProps {
   appointments?: AdvisorAppointmentStrip[] | null;
   /** Called when "Refer [name] to Others" is clicked */
   onRefer?: () => void;
-  /** Called when the ⋮ overflow menu is clicked */
+  /**
+   * Items to render in the ⋮ overflow DropdownMenu.
+   * When provided, the button opens an inline dropdown — `onMoreOptions` is ignored.
+   */
+  menuItems?: AdvisorCardMenuItem[];
+  /** @deprecated Pass `menuItems` for an inline DropdownMenu instead */
   onMoreOptions?: () => void;
   /** Called when "Book Appointment" is clicked */
   onBookAppointment?: () => void;
@@ -113,6 +136,7 @@ export function AdvisorCard({
   isPrimary = false,
   appointments,
   onRefer,
+  menuItems,
   onMoreOptions,
   onBookAppointment,
   onViewAppointment,
@@ -132,7 +156,7 @@ export function AdvisorCard({
           {companyLogoUrl && (
             <AvatarImage src={companyLogoUrl} alt={`${name} company logo`} />
           )}
-          <AvatarFallback className="text-sm">
+          <AvatarFallback className="text-caption">
             {avatarInitials ??
               (companyName
                 ? companyName
@@ -146,14 +170,14 @@ export function AdvisorCard({
         </Avatar>
 
         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <p className="text-sm font-semibold leading-tight">{name}</p>
-          <p className="text-sm text-muted-foreground">{role}</p>
+          <p className="text-label-large leading-tight">{name}</p>
+          <p className="text-body-small text-muted-foreground">{role}</p>
           <div className="mt-2 flex flex-col gap-1">
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1.5 text-body-small text-muted-foreground">
               <Phone className="h-4 w-4 shrink-0" />
               <span>{phone}</span>
             </div>
-            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1.5 text-body-small text-muted-foreground">
               <Mail className="h-4 w-4 shrink-0" />
               <span>{email}</span>
             </div>
@@ -163,15 +187,44 @@ export function AdvisorCard({
         {/* Badge + overflow menu */}
         <div className="flex shrink-0 items-center gap-1.5">
           {isPrimary && <Badge variant="success">Primary</Badge>}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onMoreOptions}
-            aria-label="More options"
-          >
-            <MoreVertical className="h-4 w-4" />
-          </Button>
+          {menuItems && menuItems.length > 0 ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-7 w-7"
+                    aria-label="More options"
+                  />
+                }
+              >
+                <MoreVertical className="h-4 w-4" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {menuItems.map((item, i) => (
+                  <DropdownMenuItem
+                    key={i}
+                    variant={item.variant}
+                    disabled={item.disabled}
+                    onClick={item.onClick}
+                  >
+                    {item.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={onMoreOptions}
+              aria-label="More options"
+            >
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          )}
         </div>
       </div>
 
@@ -189,19 +242,16 @@ export function AdvisorCard({
                   <CalendarCheck className="h-4 w-4 shrink-0 text-muted-foreground" />
                   <div className="flex min-w-0 flex-1 flex-col gap-0.5">
                     <div className="flex items-center gap-2">
-                      <Badge
-                        variant={STATUS_VARIANT[appt.status]}
-                        className="text-[10px]"
-                      >
+                      <Badge variant={STATUS_VARIANT[appt.status]}>
                         {STATUS_LABEL[appt.status]}
                       </Badge>
                       {appt.appointmentType && (
-                        <span className="truncate text-sm font-semibold">
+                        <span className="truncate text-h6">
                           {appt.appointmentType}
                         </span>
                       )}
                     </div>
-                    <p className="whitespace-nowrap text-sm text-muted-foreground">
+                    <p className="whitespace-nowrap text-body-small text-muted-foreground">
                       {appt.date} · {appt.timeStart}–{appt.timeEnd}
                     </p>
                   </div>
@@ -223,7 +273,7 @@ export function AdvisorCard({
             /* Empty state */
             <div className="flex items-center gap-3 px-4 py-3">
               <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
-              <p className="flex-1 text-xs text-muted-foreground">
+              <p className="flex-1 text-caption text-muted-foreground">
                 No upcoming appointments
               </p>
             </div>
@@ -246,7 +296,7 @@ export function AdvisorCard({
         )}
         {onRefer && (
           <Button
-            variant="outline"
+            variant="default"
             size="sm"
             className="w-full"
             onClick={onRefer}
@@ -274,8 +324,8 @@ export function AdvisorInviteCard({ onInvite }: AdvisorInviteCardProps) {
         <Plus className="h-5 w-5 text-muted-foreground" />
       </div>
       <div className="flex flex-col gap-1">
-        <p className="text-sm font-medium">Add Another Advisor</p>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-label-large">Add Another Advisor</p>
+        <p className="text-caption text-muted-foreground">
           Connect more advisors to your account
         </p>
       </div>

package/src/components/ui/appointment-book-dialog.tsx

@@ -236,11 +236,14 @@ function ClientSearch({
 // Meeting format sub-component
 // ---------------------------------------------------------------------------
 
-const FORMAT_OPTIONS: {
+interface FormatOption {
   value: AppointmentMeetingFormat;
   label: string;
   icon: React.ReactNode;
-}[] = [
+}
+
+/** All four formats — shown in advisor mode */
+const FORMAT_OPTIONS: FormatOption[] = [
   { value: "call", label: "Call", icon: <Phone className="h-4 w-4" /> },
   {
     value: "google-meet",
@@ -259,6 +262,21 @@ const FORMAT_OPTIONS: {
   },
 ];
 
+/** Simplified three-option set shown in client mode */
+const CLIENT_FORMAT_OPTIONS: FormatOption[] = [
+  { value: "call", label: "Call", icon: <Phone className="h-4 w-4" /> },
+  {
+    value: "online",
+    label: "Online Meeting",
+    icon: <Video className="h-4 w-4" />,
+  },
+  {
+    value: "offline",
+    label: "Offline Meeting",
+    icon: <MapPin className="h-4 w-4" />,
+  },
+];
+
 function MeetingFormatSection({
   format,
   onFormatChange,
@@ -269,6 +287,7 @@ function MeetingFormatSection({
   advisorOfficeAddress,
   clientHomeAddress,
   isClientMode,
+  formatOptions,
 }: {
   format: AppointmentMeetingFormat;
   onFormatChange: (f: AppointmentMeetingFormat) => void;
@@ -279,11 +298,12 @@ function MeetingFormatSection({
   advisorOfficeAddress?: string;
   clientHomeAddress?: string;
   isClientMode?: boolean;
+  formatOptions: FormatOption[];
 }) {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex gap-2">
-        {FORMAT_OPTIONS.map((opt) => (
+        {formatOptions.map((opt) => (
           <Toggle
             key={opt.value}
             variant="outline"
@@ -681,6 +701,9 @@ export function AppointmentBookDialog({
                     advisorOfficeAddress={advisorOfficeAddress}
                     clientHomeAddress={clientHomeAddress}
                     isClientMode={isClientMode}
+                    formatOptions={
+                      isClientMode ? CLIENT_FORMAT_OPTIONS : FORMAT_OPTIONS
+                    }
                   />
                 </div>
               )}

package/src/components/ui/appointment-time-slot-picker.tsx

@@ -18,6 +18,7 @@ export type AppointmentMeetingFormat =
   | "call"
   | "google-meet"
   | "microsoft-teams"
+  | "online"
   | "offline";
 
 // ---------------------------------------------------------------------------

package/src/components/ui/badge.tsx

@@ -14,7 +14,7 @@ import { Slot } from "@/lib/slot";
  * This gives softer, more readable badges and works correctly in light and dark mode.
  */
 const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium font-sans whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-caption whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {

package/src/components/ui/contact-alert-dialog/contact-alert-dialog.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { AlertCircleIcon, EyeIcon, InfoIcon } from "lucide-react";
 import {
   Query,
   Utils as QbUtils,
@@ -17,6 +18,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Field, FieldLabel } from "@/components/ui/field";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { cn } from "@/lib/utils";
 import type {
   ContactAlertDialogProps,
   ContactAlertQueryBuilderProps,
@@ -161,7 +163,23 @@ export function ContactAlertDialog({
             {(
               ["NEED_ACTION", "WATCH", "HEALTHY"] as ContactAlertSeverity[]
             ).map((s) => (
-              <ToggleGroupItem key={s} value={s}>
+              <ToggleGroupItem
+                key={s}
+                value={s}
+                className={cn(
+                  s === "NEED_ACTION" &&
+                    "data-pressed:bg-destructive/10 data-pressed:inset-ring-destructive data-pressed:text-destructive-text data-pressed:hover:bg-destructive/10",
+                  s === "WATCH" &&
+                    "data-pressed:bg-warning/10 data-pressed:inset-ring-warning data-pressed:text-warning-text data-pressed:hover:bg-warning/10",
+                  s === "HEALTHY" &&
+                    "data-pressed:bg-info/10 data-pressed:inset-ring-info data-pressed:text-info-text data-pressed:hover:bg-info/10",
+                )}
+              >
+                {s === "NEED_ACTION" && (
+                  <AlertCircleIcon className="size-3.5" />
+                )}
+                {s === "WATCH" && <EyeIcon className="size-3.5" />}
+                {s === "HEALTHY" && <InfoIcon className="size-3.5" />}
                 {SEVERITY_LABELS[s]}
               </ToggleGroupItem>
             ))}

package/src/components/ui/opportunity-card.tsx

@@ -6,6 +6,8 @@ import {
   Users,
   Calendar,
   Check,
+  Copy,
+  Link2,
   MoreVertical,
   Clock,
   ArrowRight,
@@ -782,6 +784,54 @@ export function OpportunityCard({
 // Primary action: send them the loan application link.
 // ---------------------------------------------------------------------------
 
+function normalizeUrl(url: string): string {
+  return `https://${url.replace(/^https?:\/\//, "")}`;
+}
+
+/** Shortened + copyable loan application URL row. */
+function LoanApplicationLink({ url }: { url: string }) {
+  const [copied, setCopied] = useState(false);
+  const href = normalizeUrl(url);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(href).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <p className="text-caption text-muted-foreground">
+        Or the link below to fill out the loan application directly.
+      </p>
+      <div className="flex items-center gap-1.5">
+        <Link2 className="size-4 shrink-0 text-muted-foreground" />
+        <a
+          href={href}
+          target="_blank"
+          rel="noreferrer"
+          className="min-w-0 flex-1 truncate text-body-small text-primary underline-offset-2 hover:underline"
+        >
+          {url}
+        </a>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="shrink-0 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
+          aria-label="Copy link"
+        >
+          {copied ? (
+            <Check className="size-4 text-success-text" />
+          ) : (
+            <Copy className="size-4" />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export interface LeadCardProps {
   id: string;
   customerName: string;
@@ -816,18 +866,18 @@ export function LeadCard({
       {/* ── Customer info + delete menu ── */}
       <div className="flex items-start justify-between gap-2">
         <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <span className="text-sm font-semibold text-foreground">
+          <span className="text-label-medium text-foreground">
             {customerName}
           </span>
           {customerPhone && (
-            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Phone className="size-3 shrink-0" aria-hidden="true" />
+            <span className="flex items-center gap-1.5 text-caption text-muted-foreground">
+              <Phone className="size-3.5 shrink-0" aria-hidden="true" />
               {customerPhone}
             </span>
           )}
           {customerEmail && (
-            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <Mail className="size-3 shrink-0" aria-hidden="true" />
+            <span className="flex items-center gap-1.5 text-caption text-muted-foreground">
+              <Mail className="size-3.5 shrink-0" aria-hidden="true" />
               <span className="truncate">{customerEmail}</span>
             </span>
           )}
@@ -871,21 +921,7 @@ export function LeadCard({
             Send Loan Application Request
           </Button>
           {loanApplicationUrl && (
-            <p className="text-xs text-muted-foreground">
-              Or the link below to fill out the loan application directly.
-              <br />
-              <a
-                href={`https://${loanApplicationUrl.replace(
-                  /^https?:\/\//,
-                  "",
-                )}`}
-                target="_blank"
-                rel="noreferrer"
-                className="text-primary underline-offset-2 hover:underline"
-              >
-                {loanApplicationUrl}
-              </a>
-            </p>
+            <LoanApplicationLink url={loanApplicationUrl} />
           )}
         </div>
       )}