@wealthx/shadcn 1.5.31 → 1.5.33

package/package.json

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

package/src/components/index.tsx

@@ -216,6 +216,7 @@ export type {
   AppointmentBookingSlot,
   AppointmentClient,
   AppointmentOfflineLocation,
+  AppointmentOnlinePlatform,
 } from "./ui/appointment-book-dialog";
 
 export { AppointmentCalendarView } from "./ui/appointment-calendar-view";
@@ -236,6 +237,7 @@ export type {
 export { AppointmentGmailConnect } from "./ui/appointment-gmail-connect";
 export type {
   AppointmentGmailConnectProps,
+  EmailProvider,
   GmailConnection,
 } from "./ui/appointment-gmail-connect";
 
@@ -951,6 +953,7 @@ export {
   PopoverHeader,
   PopoverTitle,
   PopoverDescription,
+  PopoverPortalProvider,
 } from "./ui/popover";
 export type {
   PopoverProps,
@@ -960,6 +963,7 @@ export type {
   PopoverHeaderProps,
   PopoverTitleProps,
   PopoverDescriptionProps,
+  PopoverPortalProviderProps,
 } from "./ui/popover";
 
 export { PageHeader } from "./ui/page-header";

package/src/components/ui/appointment-availability-settings.tsx

@@ -88,9 +88,11 @@ export interface AppointmentAvailabilitySettingsProps {
   publicHolidays?: AppointmentBlockedDate[];
   onSave?: (
     schedule: AppointmentDaySchedule[],
-    prefs: AppointmentAvailabilityPrefs,
+    prefs: AppointmentAvailabilityPrefs
   ) => void;
   onBlockedDatesChange?: (dates: AppointmentBlockedDate[]) => void;
+  /** Fired immediately whenever any booking preference value changes (before Save). */
+  onPrefsChange?: (prefs: AppointmentAvailabilityPrefs) => void;
 }
 
 // ---------------------------------------------------------------------------
@@ -376,21 +378,22 @@ export function AppointmentAvailabilitySettings({
   publicHolidays: publicHolidaysProp,
   onSave,
   onBlockedDatesChange,
+  onPrefsChange,
 }: AppointmentAvailabilitySettingsProps) {
   const [schedule, setSchedule] =
     React.useState<AppointmentDaySchedule[]>(initialSchedule);
 
   const [meetingDuration, setMeetingDuration] = React.useState(
-    prefsProp?.meetingDuration ?? "30",
+    prefsProp?.meetingDuration ?? "30"
   );
   const [schedulingBuffer, setSchedulingBuffer] = React.useState(
-    prefsProp?.schedulingBuffer ?? "0",
+    prefsProp?.schedulingBuffer ?? "0"
   );
   const [maxSlotsPerDay, setMaxSlotsPerDay] = React.useState(
-    prefsProp?.maxSlotsPerDay ?? "8",
+    prefsProp?.maxSlotsPerDay ?? "8"
   );
   const [timezone, setTimezone] = React.useState(
-    prefsProp?.timezone ?? "Australia/Sydney",
+    prefsProp?.timezone ?? "Australia/Sydney"
   );
   const [defaultMeetingPlatform, setDefaultMeetingPlatform] = React.useState<
     "google-meet" | "microsoft-teams" | "any"
@@ -416,7 +419,7 @@ export function AppointmentAvailabilitySettings({
         }
       });
       return entries.sort((a, b) => a.date.localeCompare(b.date));
-    },
+    }
   );
   const [addMoreOpen, setAddMoreOpen] = React.useState(false);
 
@@ -443,11 +446,12 @@ export function AppointmentAvailabilitySettings({
       maxSlotsPerDay,
       timezone,
       defaultMeetingPlatform,
-    ],
+    ]
   );
 
   const saveGuard = React.useRef(false);
   const timeOffGuard = React.useRef(false);
+  const prefsChangeGuard = React.useRef(false);
 
   React.useEffect(() => {
     if (!saveGuard.current) {
@@ -458,6 +462,15 @@ export function AppointmentAvailabilitySettings({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [schedule, currentPrefs]);
 
+  React.useEffect(() => {
+    if (!prefsChangeGuard.current) {
+      prefsChangeGuard.current = true;
+      return;
+    }
+    onPrefsChange?.(currentPrefs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPrefs]);
+
   React.useEffect(() => {
     if (!timeOffGuard.current) {
       timeOffGuard.current = true;
@@ -481,17 +494,17 @@ export function AppointmentAvailabilitySettings({
 
   const toggleDay = (index: number) => {
     setSchedule((prev) =>
-      prev.map((d, i) => (i === index ? { ...d, enabled: !d.enabled } : d)),
+      prev.map((d, i) => (i === index ? { ...d, enabled: !d.enabled } : d))
     );
   };
 
   const updateTime = (
     index: number,
     field: "startTime" | "endTime",
-    value: string,
+    value: string
   ) => {
     setSchedule((prev) =>
-      prev.map((d, i) => (i === index ? { ...d, [field]: value } : d)),
+      prev.map((d, i) => (i === index ? { ...d, [field]: value } : d))
     );
   };
 
@@ -501,7 +514,7 @@ export function AppointmentAvailabilitySettings({
 
   const toggleTimeOff = (date: string, enabled: boolean) => {
     setTimeOffEntries((prev) =>
-      prev.map((e) => (e.date === date ? { ...e, enabled } : e)),
+      prev.map((e) => (e.date === date ? { ...e, enabled } : e))
     );
   };
 
@@ -522,7 +535,7 @@ export function AppointmentAvailabilitySettings({
           timeStart: entry.timeStart,
           timeEnd: entry.timeEnd,
         },
-      ].sort((a, b) => a.date.localeCompare(b.date)),
+      ].sort((a, b) => a.date.localeCompare(b.date))
     );
   };
 
@@ -592,7 +605,7 @@ export function AppointmentAvailabilitySettings({
                 value={meetingDuration}
                 onValueChange={(v) => setMeetingDuration(v as string)}
               >
-                <SelectTrigger className="w-40">
+                <SelectTrigger className="w-64">
                   <SelectValue>
                     {(v) => selectLabel(MEETING_DURATION_OPTIONS, v)}
                   </SelectValue>
@@ -615,7 +628,7 @@ export function AppointmentAvailabilitySettings({
                 value={schedulingBuffer}
                 onValueChange={(v) => setSchedulingBuffer(v as string)}
               >
-                <SelectTrigger className="w-40">
+                <SelectTrigger className="w-64">
                   <SelectValue>
                     {(v) => selectLabel(SCHEDULING_BUFFER_OPTIONS, v)}
                   </SelectValue>
@@ -638,7 +651,7 @@ export function AppointmentAvailabilitySettings({
                 value={maxSlotsPerDay}
                 onValueChange={(v) => setMaxSlotsPerDay(v as string)}
               >
-                <SelectTrigger className="w-40">
+                <SelectTrigger className="w-64">
                   <SelectValue>
                     {(v) => selectLabel(MAX_SLOTS_OPTIONS, v)}
                   </SelectValue>
@@ -661,7 +674,7 @@ export function AppointmentAvailabilitySettings({
                 value={timezone}
                 onValueChange={(v) => setTimezone(v as string)}
               >
-                <SelectTrigger className="w-56">
+                <SelectTrigger className="w-64">
                   <SelectValue>
                     {(v) => selectLabel(TIMEZONE_OPTIONS, v)}
                   </SelectValue>
@@ -684,11 +697,11 @@ export function AppointmentAvailabilitySettings({
                 value={defaultMeetingPlatform}
                 onValueChange={(v) =>
                   setDefaultMeetingPlatform(
-                    v as "google-meet" | "microsoft-teams" | "any",
+                    v as "google-meet" | "microsoft-teams" | "any"
                   )
                 }
               >
-                <SelectTrigger className="w-48">
+                <SelectTrigger className="w-64">
                   <SelectValue>
                     {(v) => selectLabel(MEETING_PLATFORM_OPTIONS, v)}
                   </SelectValue>
@@ -744,7 +757,7 @@ export function AppointmentAvailabilitySettings({
                       htmlFor={`toff-${entry.date}`}
                       className={cn(
                         "cursor-pointer text-sm font-medium",
-                        !entry.enabled && "text-muted-foreground",
+                        !entry.enabled && "text-muted-foreground"
                       )}
                     >
                       {entry.label ?? formattedDate}

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

@@ -145,19 +145,16 @@ export interface AppointmentBookDialogProps {
    */
   defaultMeetingFormat?: AppointmentMeetingFormat;
   /**
-   * Which online meeting platform the advisor has integrated.
+   * Which online meeting platform(s) the advisor has integrated.
    *
+   * - `"online"` — 1 email connected; show a generic "Online Meeting" button
    * - `"google-meet"` — show only Google Meet
    * - `"microsoft-teams"` — show only MS Teams
-   * - `"any"` — show both Google Meet and MS Teams
+   * - `"any"` — 2 emails connected; show both Google Meet and MS Teams
    *
-   * In **client mode**, this replaces the generic "Online Meeting" option
-   * with the specific platform(s). In **advisor mode** this has no effect
-   * (advisors always see all four formats).
-   *
-   * When omitted in client mode, the generic "Online Meeting" option is shown.
+   * When omitted, no online option is shown (advisor has no email integration).
    */
-  onlinePlatform?: "google-meet" | "microsoft-teams" | "any";
+  onlinePlatform?: AppointmentOnlinePlatform;
   /**
    * Guest identity for **client / public booking mode** only.
    * When all fields are provided the guest form is hidden; when any field is
@@ -303,69 +300,49 @@ interface FormatOption {
   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",
-    label: "Google Meet",
-    icon: <Video className="h-4 w-4" />,
-  },
-  {
-    value: "microsoft-teams",
-    label: "MS Teams",
-    icon: <Users className="h-4 w-4" />,
-  },
-  {
-    value: "offline",
-    label: "Offline",
-    icon: <MapPin className="h-4 w-4" />,
-  },
-];
-
-/** 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" />,
-  },
-];
+export type AppointmentOnlinePlatform =
+  | "online"
+  | "google-meet"
+  | "microsoft-teams"
+  | "any";
+
+const FMT_CALL: FormatOption = {
+  value: "call",
+  label: "Call",
+  icon: <Phone className="h-4 w-4" />,
+};
+const FMT_ONLINE: FormatOption = {
+  value: "online",
+  label: "Online Meeting",
+  icon: <Video className="h-4 w-4" />,
+};
+const FMT_GOOGLE_MEET: FormatOption = {
+  value: "google-meet",
+  label: "Google Meet",
+  icon: <Video className="h-4 w-4" />,
+};
+const FMT_MS_TEAMS: FormatOption = {
+  value: "microsoft-teams",
+  label: "MS Teams",
+  icon: <Users className="h-4 w-4" />,
+};
+const FMT_OFFLINE: FormatOption = {
+  value: "offline",
+  label: "Offline Meeting",
+  icon: <MapPin className="h-4 w-4" />,
+};
 
 function getFormatOptions(
-  platform?: "google-meet" | "microsoft-teams" | "any",
+  platform?: AppointmentOnlinePlatform
 ): FormatOption[] {
-  const call: FormatOption = {
-    value: "call",
-    label: "Call",
-    icon: <Phone className="h-4 w-4" />,
-  };
-  const googleMeet: FormatOption = {
-    value: "google-meet",
-    label: "Google Meet",
-    icon: <Video className="h-4 w-4" />,
-  };
-  const msTeams: FormatOption = {
-    value: "microsoft-teams",
-    label: "MS Teams",
-    icon: <Users className="h-4 w-4" />,
-  };
-  const offline: FormatOption = {
-    value: "offline",
-    label: "Offline Meeting",
-    icon: <MapPin className="h-4 w-4" />,
-  };
-
-  if (platform === "google-meet") return [call, googleMeet, offline];
-  if (platform === "microsoft-teams") return [call, msTeams, offline];
-  if (platform === "any") return [call, googleMeet, msTeams, offline];
-  return [call, offline];
+  if (platform === "online") return [FMT_CALL, FMT_ONLINE, FMT_OFFLINE];
+  if (platform === "google-meet")
+    return [FMT_CALL, FMT_GOOGLE_MEET, FMT_OFFLINE];
+  if (platform === "microsoft-teams")
+    return [FMT_CALL, FMT_MS_TEAMS, FMT_OFFLINE];
+  if (platform === "any")
+    return [FMT_CALL, FMT_GOOGLE_MEET, FMT_MS_TEAMS, FMT_OFFLINE];
+  return [FMT_CALL, FMT_OFFLINE];
 }
 
 function MeetingFormatSection({
@@ -474,7 +451,9 @@ function SummaryRow({
 }) {
   return (
     <div
-      className={`flex items-center justify-between px-4 py-3 ${border ? "border-b border-border" : ""}`}
+      className={`flex items-center justify-between px-4 py-3 ${
+        border ? "border-b border-border" : ""
+      }`}
     >
       <span className="text-xs text-muted-foreground">{label}</span>
       {typeof value === "string" ? (
@@ -578,7 +557,7 @@ export function AppointmentBookDialog({
         ?.filter((d) => !d.enabled)
         .map((d) => DAY_MAP[d.day])
         .filter((n): n is number => n !== undefined),
-    [schedule],
+    [schedule]
   );
 
   // Stable "today" reference — avoids prop identity churn on CalendarPicker each render
@@ -590,7 +569,7 @@ export function AppointmentBookDialog({
     React.useState<AppointmentMeetingFormat>(defaultMeetingFormat ?? "call");
   const [offlineLocation, setOfflineLocation] =
     React.useState<AppointmentOfflineLocation>(
-      advisorOfficeAddress ? "office" : "custom",
+      advisorOfficeAddress ? "office" : "custom"
     );
   const [customAddress, setCustomAddress] = React.useState("");
   const [date, setDate] = React.useState<Date | undefined>(() => new Date());
@@ -599,7 +578,7 @@ export function AppointmentBookDialog({
   >(undefined);
   const [notes, setNotes] = React.useState("");
   const [selectedPhone, setSelectedPhone] = React.useState<string | undefined>(
-    undefined,
+    undefined
   );
 
   // Guest identity — client / public booking mode only
@@ -613,7 +592,7 @@ export function AppointmentBookDialog({
 
   const selectedClient = React.useMemo(
     () => clients.find((c) => c.id === clientId),
-    [clients, clientId],
+    [clients, clientId]
   );
 
   // Pre-select client when dialog opens with an initialClientId (e.g. rebook after cancellation)

package/src/components/ui/appointment-detail-sheet.tsx

@@ -100,7 +100,7 @@ export interface AppointmentDetailSheetProps {
     id: string,
     date: Date,
     slot: AppointmentTimeSlot,
-    note: string,
+    note: string
   ) => void;
   /** Called when "Book a New Appointment" is clicked on a cancelled appointment */
   onBookNew?: (clientId?: string) => void;
@@ -159,6 +159,7 @@ const MEETING_FORMAT_META: Record<
     icon: <Users className={ICON_CLASS} />,
     label: "Microsoft Teams",
   },
+  online: { icon: <Video className={ICON_CLASS} />, label: "Online Meeting" },
   offline: { icon: <MapPin className={ICON_CLASS} />, label: "In Person" },
 };
 
@@ -166,6 +167,7 @@ const MEETING_FORMAT_META: Record<
 const ONLINE_FORMATS = new Set<AppointmentMeetingFormat>([
   "google-meet",
   "microsoft-teams",
+  "online",
 ]);
 
 // ---------------------------------------------------------------------------

package/src/components/ui/appointment-gmail-connect.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { Badge } from "./badge";
 import { Button } from "./button";
 import { Input } from "./input";
@@ -8,6 +9,8 @@ import { Check, Copy, ExternalLink, Link2, Mail, Settings } from "lucide-react";
 // Types
 // ---------------------------------------------------------------------------
 
+export type EmailProvider = "gmail" | "outlook";
+
 export interface GmailConnection {
   connected: boolean;
   email?: string;
@@ -16,13 +19,20 @@ export interface GmailConnection {
 }
 
 export interface AppointmentGmailConnectProps {
-  /** Global Gmail connection state sourced from Settings > Integrations */
+  /**
+   * Email provider that is connected. Determines displayed labels.
+   * Defaults to "gmail".
+   */
+  provider?: EmailProvider;
+  /** Email connection state sourced from Settings > Integrations */
   connection: GmailConnection;
   /** Booking link to display when connected */
   calendarLink?: string;
+  /** Highlights the card with a primary-colored border — used when this provider matches the default meeting platform. */
+  highlighted?: boolean;
   /** Called when user clicks the copy button next to the calendar link */
   onCopyLink?: () => void;
-  /** Called when user clicks "Go to Integrations" in the not-connected state */
+  /** Called when user clicks "Go to Integrations" */
   onGoToIntegrations?: () => void;
 }
 
@@ -30,6 +40,38 @@ export interface AppointmentGmailConnectProps {
 // Constants
 // ---------------------------------------------------------------------------
 
+function GmailIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <path
+        fill="#EA4335"
+        d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"
+      />
+    </svg>
+  );
+}
+
+function OutlookIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
+      <path
+        fill="#0078D4"
+        d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"
+      />
+    </svg>
+  );
+}
+
+type IconComponent = (props: { className?: string }) => JSX.Element;
+
+const PROVIDER_META: Record<
+  EmailProvider,
+  { label: string; iconBg: string; Icon: IconComponent }
+> = {
+  gmail: { label: "Gmail", iconBg: "bg-[#EA4335]/10", Icon: GmailIcon },
+  outlook: { label: "Outlook", iconBg: "bg-[#0078D4]/10", Icon: OutlookIcon },
+};
+
 const PERMISSIONS = [
   "Read your calendar availability",
   "Send appointment confirmation emails",
@@ -41,43 +83,61 @@ const PERMISSIONS = [
 // ---------------------------------------------------------------------------
 
 export function AppointmentGmailConnect({
+  provider = "gmail",
   connection,
   calendarLink,
+  highlighted = false,
   onCopyLink,
   onGoToIntegrations,
 }: AppointmentGmailConnectProps) {
+  const { label, iconBg, Icon } = PROVIDER_META[provider];
+
   if (connection.connected) {
     return (
-      <div className="flex flex-col border border-border bg-card">
+      <div
+        className={cn(
+          "flex flex-col border bg-card",
+          highlighted ? "border-primary" : "border-border"
+        )}
+      >
         {/* Header */}
-        <div className="flex items-center gap-3 px-5 py-4">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-primary/10">
-            <Mail className="h-5 w-5 text-primary" />
+        <div className="flex items-start gap-3 px-5 py-4">
+          <div
+            className={cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center",
+              iconBg
+            )}
+          >
+            <Icon className="h-5 w-5" />
           </div>
-          <div className="flex-1 min-w-0">
-            <p className="text-base font-semibold">Gmail Connected</p>
+          <div className="min-w-0 flex-1">
+            <p className="text-base font-semibold">{label} Connected</p>
             <p className="truncate text-sm text-muted-foreground">
               {connection.email}
             </p>
           </div>
-          <Badge variant="success">
-            <Check size={10} />
-            Active
-          </Badge>
-          {connection.connectedAt && (
-            <p className="shrink-0 text-xs text-muted-foreground">
-              Connected since {connection.connectedAt}
-            </p>
-          )}
-          <Button
-            size="sm"
-            variant="ghost"
-            className="shrink-0 gap-1.5 text-muted-foreground"
-            onClick={onGoToIntegrations}
-          >
-            <Settings className="h-3.5 w-3.5" />
-            Manage
-          </Button>
+          <div className="flex shrink-0 flex-col items-end gap-1.5">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="gap-1.5 text-muted-foreground"
+              onClick={onGoToIntegrations}
+            >
+              <Settings className="h-3.5 w-3.5" />
+              Manage
+            </Button>
+            <div className="flex items-center gap-2">
+              <Badge variant="success">
+                <Check size={10} />
+                Active
+              </Badge>
+              {connection.connectedAt && (
+                <p className="text-xs text-muted-foreground">
+                  Connected since {connection.connectedAt}
+                </p>
+              )}
+            </div>
+          </div>
         </div>
 
         <Separator />
@@ -141,10 +201,10 @@ export function AppointmentGmailConnect({
       </div>
 
       <div className="flex flex-col gap-1.5">
-        <p className="text-base font-semibold">Gmail not connected</p>
+        <p className="text-base font-semibold">{label} not connected</p>
         <p className="max-w-xs text-sm text-muted-foreground">
-          Connect your Gmail account in Integrations to enable calendar booking
-          and appointment confirmations.
+          Connect your {label} account in Integrations to enable calendar
+          booking and appointment confirmations.
         </p>
       </div>
 

package/src/components/ui/color-picker.tsx

@@ -107,7 +107,7 @@ function ColorSwatch({
         size === "md" ? "size-7" : "size-5",
         selected &&
           "ring-2 ring-foreground ring-offset-1 ring-offset-background",
-        className,
+        className
       )}
       style={{ backgroundColor: color }}
     />
@@ -130,16 +130,24 @@ function ColorPickerContent({
   presets = COLOR_PICKER_PRESETS,
 }: ColorPickerContentProps) {
   const [hexInput, setHexInput] = React.useState(value);
+  const hexInputRef = React.useRef(hexInput);
+  hexInputRef.current = hexInput;
 
   React.useEffect(() => {
-    setHexInput(value);
+    // Only sync from external value (e.g. swatch click) when the user's current
+    // input doesn't already produce the same color — prevents cursor jump mid-type.
+    if (value !== hexInputRef.current) {
+      setHexInput(value);
+    }
   }, [value]);
 
   function handleHexInputChange(e: React.ChangeEvent<HTMLInputElement>) {
     const raw = e.target.value;
     setHexInput(raw);
     const normalized = normalizeHex(raw);
-    if (isValidHex(normalized)) {
+    // Only commit on a complete 6-digit hex so intermediate 3-digit matches
+    // (#abc shorthand) don't fire onChange mid-type and shift the cursor.
+    if (/^#[0-9A-Fa-f]{6}$/.test(normalized)) {
       onChange(normalized);
     }
   }
@@ -271,7 +279,7 @@ function ColorPicker({
             "flex h-9 min-w-[140px] cursor-pointer items-center gap-2.5 border border-input bg-background px-3 text-sm outline-none transition-colors",
             "hover:border-ring",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-            "disabled:cursor-not-allowed disabled:opacity-50",
+            "disabled:cursor-not-allowed disabled:opacity-50"
           )}
         >
           <span