@wealthx/shadcn 1.5.10 → 1.5.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.10",
+  "version": "1.5.12",
   "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/ai-conversations.tsx

@@ -659,16 +659,31 @@ export function ChatBubble({ message, className }: ChatBubbleProps) {
 // ChatComposer
 // ---------------------------------------------------------------------------
 
+export interface AiConvEmailPayload {
+  content: string;
+  to: string;
+  cc: string;
+  subject: string;
+}
+
 export interface ChatComposerProps {
   mode: AiConvMode;
   /** Active reply channel. Defaults to "chat". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false —
+   * consumers must opt in once their tenant's email integration is wired up.
+   */
+  isEmailIntegrated?: boolean;
   /** Lead's email address — pre-fills the To field in email compose. */
   contactEmail?: string;
   inputValue?: string;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   className?: string;
@@ -678,16 +693,21 @@ export function ChatComposer({
   mode,
   channel: channelProp = "chat",
   onChannelChange,
+  isEmailIntegrated = false,
   contactEmail = "",
   inputValue = "",
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   className,
 }: ChatComposerProps) {
-  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change
-  const [channel, setChannel] = React.useState<AiConvChannel>(channelProp);
+  // Semi-controlled: owns channel state for uncontrolled usage, notifies parent on change.
+  // Force chat when email isn't integrated so the panel never lands on a hidden tab.
+  const [channel, setChannel] = React.useState<AiConvChannel>(
+    isEmailIntegrated ? channelProp : "chat",
+  );
   const [emailTo, setEmailTo] = React.useState(contactEmail);
   const [emailCc, setEmailCc] = React.useState("");
   const [showCc, setShowCc] = React.useState(false);
@@ -754,23 +774,25 @@ export function ChatComposer({
         className,
       )}
     >
-      <div className="border-b border-border px-3 py-2">
-        <Tabs
-          value={channel}
-          onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
-        >
-          <TabsList variant="default" className="w-full">
-            <TabsTrigger value="chat" className="flex-1 gap-1.5">
-              <MessageSquare className="size-3.5" />
-              Chat
-            </TabsTrigger>
-            <TabsTrigger value="email" className="flex-1 gap-1.5">
-              <Mail className="size-3.5" />
-              Email
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
-      </div>
+      {isEmailIntegrated && (
+        <div className="border-b border-border px-3 py-2">
+          <Tabs
+            value={channel}
+            onValueChange={(v) => v && handleChannelChange(v as AiConvChannel)}
+          >
+            <TabsList variant="default" className="w-full">
+              <TabsTrigger value="chat" className="flex-1 gap-1.5">
+                <MessageSquare className="size-3.5" />
+                Chat
+              </TabsTrigger>
+              <TabsTrigger value="email" className="flex-1 gap-1.5">
+                <Mail className="size-3.5" />
+                Email
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      )}
 
       {mode === "ai" ? (
         <div className="flex items-center gap-2 bg-muted/30 px-4 py-2.5 text-[12px] text-muted-foreground">
@@ -867,7 +889,14 @@ export function ChatComposer({
               </div>
               <Button
                 size="sm"
-                onClick={() => onSend?.(inputValue)}
+                onClick={() =>
+                  onSendEmail?.({
+                    content: inputValue,
+                    to: emailTo,
+                    cc: emailCc,
+                    subject: emailSubject,
+                  })
+                }
                 disabled={!inputValue.trim() || !emailTo.trim()}
               >
                 <Send className="mr-1.5 size-3.5" />
@@ -920,9 +949,16 @@ export interface ChatThreadProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false.
+   */
+  isEmailIntegrated?: boolean;
   inputValue?: string;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   onReopen?: () => void;
@@ -930,6 +966,12 @@ export interface ChatThreadProps {
   onUnmarkUrgent?: () => void;
   onArchive?: () => void;
   onAssignToAdvisor?: () => void;
+  /** True when older messages can be loaded (e.g. paginated history). */
+  hasMoreMessages?: boolean;
+  /** True while a `onLoadMoreMessages` request is in-flight. */
+  isLoadingMoreMessages?: boolean;
+  /** Fired when the consumer should fetch older messages. */
+  onLoadMoreMessages?: () => void;
   /** Mobile only — back to conversation list. */
   onBack?: () => void;
   /** Mobile only — show lead info panel. */
@@ -945,9 +987,11 @@ export function ChatThread({
   isAiTyping = false,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -955,6 +999,9 @@ export function ChatThread({
   onUnmarkUrgent,
   onArchive,
   onAssignToAdvisor,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   onBack,
   onShowLeadInfo,
   className,
@@ -962,6 +1009,61 @@ export function ChatThread({
   const aiIsHandling = mode === "ai";
   const isClosed = status === "closed";
 
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+  // Captures scrollHeight just before older messages are prepended, so we can
+  // restore the user's visible scroll offset once the new nodes render.
+  const preLoadScrollHeightRef = React.useRef<number | null>(null);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    if (!hasMoreMessages || isLoadingMoreMessages || !onLoadMoreMessages) {
+      return;
+    }
+    if (e.currentTarget.scrollTop <= 80) {
+      preLoadScrollHeightRef.current = e.currentTarget.scrollHeight;
+      onLoadMoreMessages();
+    }
+  };
+
+  // Tracks the last "tail" message id so we can tell an append (new message,
+  // tail changed) apart from a prepend (older history loaded, tail unchanged).
+  const prevLastMessageIdRef = React.useRef<string | undefined>(undefined);
+  const prevContactIdRef = React.useRef<string>(contact.id);
+
+  React.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    // Prepend (older messages just loaded) — restore scroll so the user
+    // stays anchored to the message they were reading.
+    if (preLoadScrollHeightRef.current !== null) {
+      el.scrollTop = el.scrollHeight - preLoadScrollHeightRef.current;
+      preLoadScrollHeightRef.current = null;
+      prevLastMessageIdRef.current = messages[messages.length - 1]?.id;
+      prevContactIdRef.current = contact.id;
+      return;
+    }
+
+    const currentLastId = messages[messages.length - 1]?.id;
+    const contactChanged = prevContactIdRef.current !== contact.id;
+    const tailChanged = prevLastMessageIdRef.current !== currentLastId;
+
+    // Opening a conversation or appending a new message (sent, received,
+    // or system) — pin to the bottom.
+    if (contactChanged || tailChanged) {
+      el.scrollTop = el.scrollHeight;
+    }
+
+    prevLastMessageIdRef.current = currentLastId;
+    prevContactIdRef.current = contact.id;
+  }, [contact.id, messages]);
+
+  // Typing indicator adds DOM height — keep the view pinned to bottom.
+  React.useLayoutEffect(() => {
+    if (!isAiTyping) return;
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [isAiTyping]);
+
   return (
     <div className={cn("flex flex-col bg-background", className)}>
       {/* Header */}
@@ -1071,9 +1173,16 @@ export function ChatThread({
 
       {/* Messages */}
       <div
+        ref={scrollRef}
+        onScroll={handleScroll}
         className="flex flex-1 flex-col gap-4 overflow-y-auto p-4"
         tabIndex={0}
       >
+        {isLoadingMoreMessages && (
+          <div className="flex justify-center py-1 text-caption text-muted-foreground">
+            Loading older messages...
+          </div>
+        )}
         {messages.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-2 text-muted-foreground">
             <MessageSquare className="size-8 opacity-30" />
@@ -1120,10 +1229,12 @@ export function ChatThread({
           mode={mode}
           channel={channel}
           onChannelChange={onChannelChange}
+          isEmailIntegrated={isEmailIntegrated}
           contactEmail={contact.email}
           inputValue={inputValue}
           onInputChange={onInputChange}
           onSend={onSend}
+          onSendEmail={onSendEmail}
           onTakeOver={onTakeOver}
           onLetAiHandle={onLetAiHandle}
         />
@@ -1584,18 +1695,31 @@ export interface ConversationsPageProps {
   /** Active reply channel — "chat" (default) or "email". */
   channel?: AiConvChannel;
   onChannelChange?: (channel: AiConvChannel) => void;
+  /**
+   * When true, the Email tab is shown in the composer. Defaults to false.
+   */
+  isEmailIntegrated?: boolean;
   inputValue?: string;
   internalNotes?: string;
   showLeadPanel?: boolean;
   hasMore?: boolean;
   isLoadingMore?: boolean;
+  /** True when older messages can be loaded for the active conversation. */
+  hasMoreMessages?: boolean;
+  /** True while a `onLoadMoreMessages` request is in-flight. */
+  isLoadingMoreMessages?: boolean;
+  /** Fired when the consumer should fetch older messages for the active conversation. */
+  onLoadMoreMessages?: () => void;
   onSelectConversation?: (id: string) => void;
   onRead?: (id: string) => void;
   onSearchChange?: (v: string) => void;
   onFilterChange?: (f: AiConvFilterTab) => void;
   onChannelFilterChange?: (f: AiConvChannelFilter) => void;
   onInputChange?: (v: string) => void;
-  onSend?: (v: string) => void;
+  /** Fired when the user sends a chat message. */
+  onSend?: (content: string) => void;
+  /** Fired when the user sends an email. */
+  onSendEmail?: (payload: AiConvEmailPayload) => void;
   onTakeOver?: () => void;
   onLetAiHandle?: () => void;
   onReopen?: () => void;
@@ -1637,11 +1761,15 @@ export function ConversationsPage({
   onChannelFilterChange,
   channel,
   onChannelChange,
+  isEmailIntegrated,
   inputValue,
   internalNotes,
   showLeadPanel = true,
   hasMore,
   isLoadingMore,
+  hasMoreMessages,
+  isLoadingMoreMessages,
+  onLoadMoreMessages,
   isAiTyping,
   notesSaveStatus,
   onSelectConversation,
@@ -1650,6 +1778,7 @@ export function ConversationsPage({
   onFilterChange,
   onInputChange,
   onSend,
+  onSendEmail,
   onTakeOver,
   onLetAiHandle,
   onReopen,
@@ -1723,9 +1852,11 @@ export function ConversationsPage({
             isAiTyping={isAiTyping}
             channel={channel}
             onChannelChange={onChannelChange}
+            isEmailIntegrated={isEmailIntegrated}
             inputValue={inputValue}
             onInputChange={onInputChange}
             onSend={onSend}
+            onSendEmail={onSendEmail}
             onTakeOver={onTakeOver}
             onLetAiHandle={onLetAiHandle}
             onReopen={onReopen}
@@ -1733,6 +1864,9 @@ export function ConversationsPage({
             onUnmarkUrgent={onUnmarkUrgent}
             onArchive={onArchive}
             onAssignToAdvisor={onAssignToAdvisor}
+            hasMoreMessages={hasMoreMessages}
+            isLoadingMoreMessages={isLoadingMoreMessages}
+            onLoadMoreMessages={onLoadMoreMessages}
             onBack={() => setMobilePanel("list")}
             onShowLeadInfo={() => setMobilePanel("lead")}
             className={cn(

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: {