@wealthx/shadcn 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -238,6 +238,11 @@
       "import": "./dist/components/ui/data-table.mjs",
       "require": "./dist/components/ui/data-table.js"
     },
+    "./document-checklist-template": {
+      "types": "./src/components/ui/document-checklist-template.tsx",
+      "import": "./dist/components/ui/document-checklist-template.mjs",
+      "require": "./dist/components/ui/document-checklist-template.js"
+    },
     "./drawer": {
       "types": "./src/components/ui/drawer.tsx",
       "import": "./dist/components/ui/drawer.mjs",
@@ -283,6 +288,11 @@
       "import": "./dist/components/ui/accordion.mjs",
       "require": "./dist/components/ui/accordion.js"
     },
+    "./ai-builder": {
+      "types": "./src/components/ui/ai-builder.tsx",
+      "import": "./dist/components/ui/ai-builder.mjs",
+      "require": "./dist/components/ui/ai-builder.js"
+    },
     "./empty": {
       "types": "./src/components/ui/empty.tsx",
       "import": "./dist/components/ui/empty.mjs",
@@ -393,6 +403,11 @@
       "import": "./dist/components/ui/pipeline-primitives.mjs",
       "require": "./dist/components/ui/pipeline-primitives.js"
     },
+    "./onboarding-layout": {
+      "types": "./src/components/ui/onboarding-layout.tsx",
+      "import": "./dist/components/ui/onboarding-layout.mjs",
+      "require": "./dist/components/ui/onboarding-layout.js"
+    },
     "./opportunity-card": {
       "types": "./src/components/ui/opportunity-card.tsx",
       "import": "./dist/components/ui/opportunity-card.mjs",
@@ -448,6 +463,21 @@
       "import": "./dist/components/ui/ai-assistant-drawer.mjs",
       "require": "./dist/components/ui/ai-assistant-drawer.js"
     },
+    "./ai-conversations": {
+      "types": "./src/components/ui/ai-conversations.tsx",
+      "import": "./dist/components/ui/ai-conversations.mjs",
+      "require": "./dist/components/ui/ai-conversations.js"
+    },
+    "./chat-widget-primitives": {
+      "types": "./src/components/ui/chat-widget-primitives.tsx",
+      "import": "./dist/components/ui/chat-widget-primitives.mjs",
+      "require": "./dist/components/ui/chat-widget-primitives.js"
+    },
+    "./chat-widget": {
+      "types": "./src/components/ui/chat-widget.tsx",
+      "import": "./dist/components/ui/chat-widget.mjs",
+      "require": "./dist/components/ui/chat-widget.js"
+    },
     "./opportunity-edit-modals": {
       "types": "./src/components/ui/opportunity-edit-modals.tsx",
       "import": "./dist/components/ui/opportunity-edit-modals.mjs",
@@ -517,6 +547,36 @@
       "types": "./src/components/ui/appointment-availability-settings.tsx",
       "import": "./dist/components/ui/appointment-availability-settings.mjs",
       "require": "./dist/components/ui/appointment-availability-settings.js"
+    },
+    "./auth-logo": {
+      "types": "./src/components/ui/auth-logo.tsx",
+      "import": "./dist/components/ui/auth-logo.mjs",
+      "require": "./dist/components/ui/auth-logo.js"
+    },
+    "./auth-page-layout": {
+      "types": "./src/components/ui/auth-page-layout.tsx",
+      "import": "./dist/components/ui/auth-page-layout.mjs",
+      "require": "./dist/components/ui/auth-page-layout.js"
+    },
+    "./password-strength-tooltip": {
+      "types": "./src/components/ui/password-strength-tooltip.tsx",
+      "import": "./dist/components/ui/password-strength-tooltip.mjs",
+      "require": "./dist/components/ui/password-strength-tooltip.js"
+    },
+    "./two-fa-setup-form": {
+      "types": "./src/components/ui/two-fa-setup-form.tsx",
+      "import": "./dist/components/ui/two-fa-setup-form.mjs",
+      "require": "./dist/components/ui/two-fa-setup-form.js"
+    },
+    "./video-background": {
+      "types": "./src/components/ui/video-background.tsx",
+      "import": "./dist/components/ui/video-background.mjs",
+      "require": "./dist/components/ui/video-background.js"
+    },
+    "./upload-card": {
+      "types": "./src/components/ui/upload-card.tsx",
+      "import": "./dist/components/ui/upload-card.mjs",
+      "require": "./dist/components/ui/upload-card.js"
     }
   }
 }

package/src/components/index.tsx

@@ -11,6 +11,61 @@ export type {
   AccordionContentProps,
 } from "./ui/accordion";
 
+export {
+  AgentCard,
+  AgentMenuModal,
+  IntegrationServiceCard,
+  IntegrationInstructionCard,
+  ServiceConfigurationModal,
+} from "./ui/ai-builder";
+export type {
+  AiBuilderAgentItem,
+  AiBuilderServiceType,
+  AiBuilderServiceData,
+  AgentCardProps,
+  AgentMenuModalProps,
+  IntegrationServiceCardProps,
+  IntegrationInstructionCardProps,
+  ServiceConfigurationModalProps,
+} from "./ui/ai-builder";
+
+export {
+  ConversationStatusChip,
+  ConversationListItem,
+  ConversationList,
+  ChatBubble,
+  ChatComposer,
+  ChatThread,
+  AICollectedDataSection,
+  LeadInfoPanel,
+  ConversationsPage,
+  AiConvAssignAdvisorDialog,
+} from "./ui/ai-conversations";
+export type {
+  AiConvStatus,
+  AiConvMessageRole,
+  AiConvFieldConfidence,
+  AiConvFilterTab,
+  AiConvMode,
+  AiConvMeetingType,
+  AiConvContact,
+  AiConvAdvisor,
+  AiConvListItemData,
+  AiConvMessage,
+  AiConvDataField,
+  AiConvAppointmentData,
+  ConversationStatusChipProps,
+  ConversationListItemProps,
+  ConversationListProps,
+  ChatBubbleProps,
+  ChatComposerProps,
+  ChatThreadProps,
+  AICollectedDataSectionProps,
+  LeadInfoPanelProps,
+  ConversationsPageProps,
+  AiConvAssignAdvisorDialogProps,
+} from "./ui/ai-conversations";
+
 export { AdvisorCard, AdvisorInviteCard } from "./ui/advisor-card";
 export type {
   AdvisorCardProps,
@@ -45,6 +100,47 @@ export type {
   AiTaskSuggestion,
 } from "./ui/ai-assistant-drawer";
 
+export {
+  ChatWidgetLauncher,
+  ChatWidgetHeader,
+  ChatWidgetMessage,
+  ChatWidgetTypingIndicator,
+  ChatWidgetInputBar,
+} from "./ui/chat-widget-primitives";
+export type {
+  ChatWidgetLauncherProps,
+  ChatWidgetHeaderProps,
+  ChatWidgetMessageProps,
+  ChatWidgetMessageRole,
+  ChatWidgetTypingIndicatorProps,
+  ChatWidgetInputBarProps,
+} from "./ui/chat-widget-primitives";
+
+export {
+  ChatWidget,
+  ChatWidgetWindow,
+  ChatWidgetIntakeForm,
+  ChatWidgetTopicCard,
+  ChatWidgetTopicGrid,
+  ChatWidgetInteractiveCard,
+  DEFAULT_CHAT_WIDGET_TOPICS,
+} from "./ui/chat-widget";
+export type {
+  ChatWidgetProps,
+  ChatWidgetWindowProps,
+  ChatWidgetIntakeFormProps,
+  ChatWidgetTopicCardProps,
+  ChatWidgetTopicGridProps,
+  ChatWidgetInteractiveCardProps,
+  ChatWidgetInteractiveCardType,
+  ChatWidgetUser,
+  ChatWidgetTopic,
+  ChatWidgetChatMessage,
+  ChatWidgetScreen,
+  ChatWidgetQuickReplyOption,
+  ChatWidgetAppointmentSlot,
+} from "./ui/chat-widget";
+
 export { Alert, AlertTitle, AlertDescription } from "./ui/alert";
 export type {
   AlertProps,
@@ -126,7 +222,6 @@ export { AppointmentGmailConnect } from "./ui/appointment-gmail-connect";
 export type {
   AppointmentGmailConnectProps,
   GmailConnection,
-  GmailConnectionState,
 } from "./ui/appointment-gmail-connect";
 
 export { AppointmentMiniCard } from "./ui/appointment-mini-card";
@@ -309,6 +404,12 @@ export type {
 } from "./ui/data-table";
 
 export { DatePicker } from "./ui/date-picker";
+
+export { DocumentChecklistTemplate } from "./ui/document-checklist-template";
+export type {
+  DocumentChecklistTemplateProps,
+  ChecklistCategory,
+} from "./ui/document-checklist-template";
 export type { DatePickerProps } from "./ui/date-picker";
 
 export {
@@ -593,6 +694,12 @@ export type { KanbanColumnProps, KanbanColumnStage } from "./ui/kanban-column";
 export { Label } from "./ui/label";
 export type { LabelProps } from "./ui/label";
 
+export { OnboardingLayout } from "./ui/onboarding-layout";
+export type {
+  OnboardingStep,
+  OnboardingLayoutProps,
+} from "./ui/onboarding-layout";
+
 export { OpportunityCard, LeadCard } from "./ui/opportunity-card";
 export type {
   OpportunityCardProps,
@@ -827,6 +934,21 @@ export type {
   StepItemProps,
 } from "./ui/stepper";
 
+export { AuthLogo } from "./ui/auth-logo";
+export type { AuthLogoProps } from "./ui/auth-logo";
+
+export { AuthPageLayout } from "./ui/auth-page-layout";
+export type { AuthPageLayoutProps } from "./ui/auth-page-layout";
+
+export { PasswordStrengthTooltip } from "./ui/password-strength-tooltip";
+export type { PasswordStrengthTooltipProps } from "./ui/password-strength-tooltip";
+
+export { TwoFASetupForm } from "./ui/two-fa-setup-form";
+export type { TwoFASetupFormProps, TwoFAApp } from "./ui/two-fa-setup-form";
+
+export { VideoBackground } from "./ui/video-background";
+export type { VideoBackgroundProps } from "./ui/video-background";
+
 export { Switch, SwitchCard } from "./ui/switch";
 export type { SwitchProps, SwitchCardProps } from "./ui/switch";
 
@@ -868,6 +990,9 @@ export type {
 export { Textarea } from "./ui/textarea";
 export type { TextareaProps } from "./ui/textarea";
 
+export { UploadCard, uploadCardVariants } from "./ui/upload-card";
+export type { UploadCardProps } from "./ui/upload-card";
+
 export { Toggle, toggleVariants } from "./ui/toggle";
 export type { ToggleProps } from "./ui/toggle";
 

package/src/components/ui/add-lead-modal.tsx

@@ -11,21 +11,17 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableHeader,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "@/components/ui/table";
+import { TablePagination } from "@/components/ui/pagination";
 import { cn } from "@/lib/utils";
 
-/**
- * AddLeadModal — WealthX DS (L4 Dialog)
- *
- * Search and select contacts to add as pipeline leads.
- * Pagination and search are server-side — the parent controls them.
- *
- * Data source: `getLeadContactList()` in `loan-crm.ts`
- */
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
 export interface LeadContact {
   id: string;
   name: string;
@@ -36,27 +32,29 @@ export interface LeadContact {
 export interface AddLeadModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  /** Contacts for the current page — supplied and paginated by the parent. */
+  /** Contacts for the current page — server-side pagination, parent slices. */
   contacts: LeadContact[];
   /** Total contacts matching the current search (drives pagination). */
   total: number;
   isLoading?: boolean;
   isSubmitting?: boolean;
-  /** Controlled search query. */
   searchValue?: string;
   onSearchChange?: (value: string) => void;
   /** 0-indexed current page. */
   page?: number;
   pageSize?: number;
+  pageSizeOptions?: number[];
   onPageChange?: (page: number) => void;
-  /** Called with the selected contact IDs when the user clicks Add. */
+  onPageSizeChange?: (pageSize: number) => void;
   onAdd?: (selectedIds: string[]) => void;
   className?: string;
 }
 
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
+function toggleInSet<T>(prev: Set<T>, value: T): Set<T> {
+  const next = new Set(prev);
+  next.has(value) ? next.delete(value) : next.add(value);
+  return next;
+}
 
 export function AddLeadModal({
   open,
@@ -69,13 +67,14 @@ export function AddLeadModal({
   onSearchChange,
   page = 0,
   pageSize = 10,
+  pageSizeOptions,
   onPageChange,
+  onPageSizeChange,
   onAdd,
   className,
 }: AddLeadModalProps) {
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set());
 
-  // Reset selection when dialog opens
   React.useEffect(() => {
     if (open) setSelectedIds(new Set());
   }, [open]);
@@ -96,26 +95,15 @@ export function AddLeadModal({
     });
   }
 
-  function toggleOne(id: string) {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      next.has(id) ? next.delete(id) : next.add(id);
-      return next;
-    });
-  }
-
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
-  const canPrev = page > 0;
-  const canNext = page < totalPages - 1;
 
   return (
     <Dialog open={open} onOpenChange={isSubmitting ? undefined : onOpenChange}>
-      <DialogContent className={cn("sm:max-w-2xl", className)}>
+      <DialogContent size="2xl" align="top" className={className}>
         <DialogHeader>
           <DialogTitle>Add Lead</DialogTitle>
         </DialogHeader>
 
-        {/* Search */}
         <div className="relative">
           <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
           <Input
@@ -139,136 +127,107 @@ export function AddLeadModal({
           )}
         </div>
 
-        {/* Contact table
-            border-separate + border-spacing-0 + inner <div h-12>: row height is
-            anchored to the fixed-height div, not td padding+content+border arithmetic,
-            so selected and unselected rows are always pixel-identical. */}
         <div className="relative min-h-[200px] overflow-auto border border-border">
           {isLoading && (
             <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/60">
               <Spinner />
             </div>
           )}
-          <table className="w-full border-separate border-spacing-0 text-sm">
-            <thead className="sticky top-0 bg-muted/50">
-              <tr>
-                <th className="w-10 border-b border-border">
-                  <div className="flex h-10 w-full items-center justify-center">
-                    <span onClick={(e) => e.stopPropagation()}>
-                      <Checkbox
-                        checked={
-                          somePageSelected && !allPageSelected
-                            ? "indeterminate"
-                            : allPageSelected
-                        }
-                        onCheckedChange={toggleAll}
-                        aria-label="Select all on page"
-                        disabled={contacts.length === 0 || isSubmitting}
-                      />
-                    </span>
-                  </div>
-                </th>
-                {(["Name", "Email", "Phone"] as const).map((col) => (
-                  <th key={col} className="border-b border-border">
-                    <div className="flex h-10 items-center px-3 text-xs font-semibold text-foreground">
-                      {col}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="w-10">
+                  <span onClick={(e) => e.stopPropagation()}>
+                    <Checkbox
+                      checked={
+                        somePageSelected && !allPageSelected
+                          ? "indeterminate"
+                          : allPageSelected
+                      }
+                      onCheckedChange={toggleAll}
+                      aria-label="Select all on page"
+                      disabled={contacts.length === 0 || isSubmitting}
+                    />
+                  </span>
+                </TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Phone</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
               {contacts.length === 0 && !isLoading ? (
-                <tr>
-                  <td
+                <TableRow className="hover:bg-transparent">
+                  <TableCell
                     colSpan={4}
-                    className="py-10 text-center text-xs text-muted-foreground"
+                    className="py-10 text-center text-muted-foreground"
                   >
                     No contacts found.
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               ) : (
-                contacts.map((contact, idx) => {
+                contacts.map((contact) => {
                   const isSelected = selectedIds.has(contact.id);
-                  const tdCls = cn(
-                    idx < contacts.length - 1 && "border-b border-border",
-                  );
                   return (
-                    <tr
+                    <TableRow
                       key={contact.id}
-                      className={cn(
-                        "cursor-pointer",
-                        isSelected
-                          ? "bg-primary/5 hover:bg-primary/10"
-                          : "hover:bg-muted/30",
-                      )}
-                      onClick={() => !isSubmitting && toggleOne(contact.id)}
+                      data-state={isSelected ? "selected" : undefined}
+                      className="cursor-pointer"
+                      onClick={() =>
+                        !isSubmitting &&
+                        setSelectedIds((prev) => toggleInSet(prev, contact.id))
+                      }
                     >
-                      <td className={tdCls}>
-                        <div className="flex h-12 w-full items-center justify-center">
-                          <span onClick={(e) => e.stopPropagation()}>
-                            <Checkbox
-                              checked={isSelected}
-                              onCheckedChange={() => toggleOne(contact.id)}
-                              disabled={isSubmitting}
-                            />
-                          </span>
-                        </div>
-                      </td>
-                      <td className={tdCls}>
-                        <div className="flex h-12 items-center px-3 font-medium text-foreground">
-                          {contact.name}
-                        </div>
-                      </td>
-                      <td className={tdCls}>
-                        <div className="flex h-12 items-center px-3 text-muted-foreground">
-                          {contact.email ?? "—"}
-                        </div>
-                      </td>
-                      <td className={tdCls}>
-                        <div className="flex h-12 items-center px-3 text-muted-foreground">
-                          {contact.phone ?? "—"}
-                        </div>
-                      </td>
-                    </tr>
+                      <TableCell className="h-12">
+                        <span onClick={(e) => e.stopPropagation()}>
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={() =>
+                              setSelectedIds((prev) =>
+                                toggleInSet(prev, contact.id),
+                              )
+                            }
+                            disabled={isSubmitting}
+                          />
+                        </span>
+                      </TableCell>
+                      <TableCell className="h-12 font-medium text-foreground">
+                        {contact.name}
+                      </TableCell>
+                      <TableCell className="h-12 text-muted-foreground">
+                        {contact.email ?? "—"}
+                      </TableCell>
+                      <TableCell className="h-12 text-muted-foreground">
+                        {contact.phone ?? "—"}
+                      </TableCell>
+                    </TableRow>
                   );
                 })
               )}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
 
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <div className="flex items-center justify-between text-xs text-muted-foreground">
-            <span>
-              {total} contact{total !== 1 ? "s" : ""}
-            </span>
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs"
-                onClick={() => onPageChange?.(page - 1)}
-                disabled={!canPrev || isLoading || isSubmitting}
-              >
-                Prev
-              </Button>
-              <span>
-                {page + 1} / {totalPages}
-              </span>
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs"
-                onClick={() => onPageChange?.(page + 1)}
-                disabled={!canNext || isLoading || isSubmitting}
-              >
-                Next
-              </Button>
-            </div>
-          </div>
-        )}
+        {/* TablePagination is 1-indexed; props are 0-indexed — converted here */}
+        <div
+          className={cn(
+            (isLoading || isSubmitting) && "pointer-events-none opacity-50",
+          )}
+        >
+          <TablePagination
+            page={page + 1}
+            pageCount={totalPages}
+            pageSize={pageSize}
+            pageSizeOptions={pageSizeOptions}
+            selectedCount={selectedIds.size || undefined}
+            totalCount={total}
+            onPageChange={(p) => onPageChange?.(p - 1)}
+            onPageSizeChange={(size) => {
+              onPageSizeChange?.(size);
+              onPageChange?.(0);
+            }}
+          />
+        </div>
 
         <DialogFooter>
           <Button