kyd-shared-badge 0.3.74 → 0.3.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.74",
+  "version": "0.3.76",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -22,6 +22,7 @@
     "@chatscope/chat-ui-kit-react": "^2.1.1",
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "ai": "5.0.47",
     "class-variance-authority": "^0.7.1",
     "framer-motion": "^12.23.24",

package/src/connect/ConnectAccounts.tsx

@@ -7,6 +7,7 @@ import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink } from 'l
 import { AnimatePresence, motion } from 'framer-motion';
 import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
 import Link from 'next/link';
+import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
 function byPriority(a: string, b: string) {
   const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
@@ -35,12 +36,15 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     handleBackButton,
     headerTitle,
     headerDescription,
+    requiredProviders,
+    companyName,
   } = props;
 
   const router = useRouter();
   const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
   const [linkUrl, setLinkUrl] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDisconnecting, setIsDisconnecting] = useState<string | null>(null);
 
   const apiBase = apiGatewayUrl || (typeof process !== 'undefined' ? (process.env.NEXT_PUBLIC_API_GATEWAY_URL as string) : '');
   const connectedIds = useMemo(() => new Set((connected || []).map(c => c.id.toLowerCase())), [connected]);
@@ -78,6 +82,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   };
 
   const onDisconnect = async (providerId: string) => {
+    setIsDisconnecting(providerId);
     try {
       const res = await fetch(`${apiBase}/user/disconnect`, {
         method: 'POST',
@@ -93,6 +98,8 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
     } catch (e) {
       const err = e as Error;
       if (onError) onError(err.message || 'Failed to disconnect');
+    } finally {
+      setIsDisconnecting(null);
     }
   };
 
@@ -254,7 +261,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
             <motion.div key="platform-list-shared" variants={cardVariants} initial="initial" animate="animate" exit="exit" transition={{ duration: 0.3 }}>
               <CardHeader className="pb-4">
                 {handleBackButton && (
-                  <button onClick={() => handleBackButton()} className="flex items-center gap-2 text-sm sm:mb-1 mb-4 text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors">
+                  <button onClick={() => handleBackButton()} className="flex items-center gap-2 text-sm mb-4 text-[var(--text-secondary)] hover:text-[var(--text-main)] transition-colors">
                     <ArrowLeft className="w-4 h-4" /> Back
                   </button>
                 )}
@@ -268,6 +275,7 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
 
                   const Row = (provider: typeof list[number]) => {
                     const providerId = provider.id;
+                    const isRequired = requiredProviders?.includes(providerId);
                     const isConnected = connectedIds.has(providerId.toLowerCase());
                     const needsReconnect = reconnectIds.has(providerId.toLowerCase());
                     const isOauth = provider.connectionType === 'oauth'
@@ -281,6 +289,21 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                       </span>
                     );
 
+                    const requiredFlag = () => (
+                      <TooltipProvider>
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <div className="flex items-center justify-center size-4 sm:size-5 rounded-full bg-[var(--icon-accent)] cursor-help">
+                              <span className="text-white text-xs font-bold -translate-y-px select-none">!</span>
+                            </div>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Required by <span className="font-semibold">{companyName || 'your recruiter'}</span></p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </TooltipProvider>
+                    );
+
                     return (
                       <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
                         <div className="flex items-center gap-3">
@@ -289,17 +312,19 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                             <Link href={connectedUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 hover:underline">
                               <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
                               <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                              {isRequired && !isConnected ? (requiredFlag()) : null}
                             </Link>
                           ) : (
                             <div className="flex items-center gap-3">
                               <ProviderIcon name={provider.id} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
                               <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                              {isRequired && !isConnected ? (requiredFlag()) : null}
                             </div>
                           )}
                           {provider.beta ? betaFlag() : null}
                         </div>
 
-                        {isConnected ? (
+                        {isConnected && isDisconnecting !== providerId ? (
                           <div className="relative flex items-center">
                             <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
                               <CheckCircle className="size-3 sm:size-4" />
@@ -315,6 +340,11 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
                               </button>
                             </div>
                           </div>
+
+                        ) : isDisconnecting === providerId ? (
+                          <div className="relative flex items-center">
+                            <Spinner />
+                          </div>
                         ) : (
                           <div className="flex items-center gap-2">
                             <>

package/src/connect/types.ts

@@ -36,6 +36,9 @@ export interface ConnectAccountsProps {
   handleBackButton?: () => void;
   headerTitle: string;
   headerDescription: string;
+  isDisconnecting?: string | null;
+  requiredProviders?: string[];
+  companyName?: string;
 }
 
 

package/src/ui/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
 export * from './card';
 export * from './input';
-export * from './spinner';
+export * from './spinner';
+export * from './tooltip';

package/src/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }