kyd-shared-badge 0.3.120 → 0.3.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.120",
+  "version": "0.3.121",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/connect/ConnectAccounts.tsx

@@ -5,7 +5,7 @@ import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
 import { CheckCircle, Link2, LinkIcon, Unlink, ArrowLeft, ExternalLink, Settings, Shield, InfoIcon } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle, ConnectProgress } from '../ui';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter, CardTitle } from '../ui';
 import Link from 'next/link';
 import { Tooltip, TooltipTrigger, TooltipProvider, TooltipContent } from '../ui/';
 
@@ -226,17 +226,6 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
   
   return (
     <>
-      {/* Mobile: relative summary above content */}
-      {providers?.length ? (
-        <div className="sm:hidden px-4 mb-3">
-          <ConnectProgress layout="inline" providers={providers} connectedIds={connectedIds} />
-        </div>
-      ) : null}
-
-      {/* Desktop: fixed top-right summary */}
-      {providers?.length ? (
-        <ConnectProgress providers={providers} connectedIds={connectedIds} />
-      ) : null}
 
       <AnimatePresence initial={false} mode="wait">
       {showDataHandling ? (

package/src/ui/connect-progress.tsx

@@ -60,6 +60,12 @@ export function ConnectProgress(props: ConnectProgressProps) {
         body: 'You are near complete coverage. 100% is not required, but additional platforms can further increase confidence.'
       }
     }
+    if (score === 100) {
+      return {
+        headline: 'Complete — high confidence',
+        body: 'You\'ve achieved the recommended coverage for a very strong profile! Connecting even more accounts can further strengthen your verification.'
+      }
+    }
     return {
       headline: 'Keep going',
       body: 'Connect more platforms to strengthen your profile. 70%+ is strong; 100% is optional.'
@@ -72,11 +78,11 @@ export function ConnectProgress(props: ConnectProgressProps) {
         <div className="flex items-center gap-3">
           <ProgressCircle value={progressPercent} size={64} thickness={6} />
           <div className="min-w-0 max-w-xs">
-            <div className="text-sm font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
-            <div className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)'}}>
+            <div className="text-base font-semibold truncate" style={{ color: 'var(--text-main)'}}>{progressCopy.headline}</div>
+            <div className="text-sm mt-0.5" style={{ color: 'var(--text-secondary)'}}>
               {progressCopy.body}
             </div>
-            <div className="text-[10px] mt-1" style={{ color: 'var(--text-secondary)'}}>
+            <div className="text-sm mt-1" style={{ color: 'var(--text-secondary)'}}>
               Weighted score • {progressPercent}%
             </div>
           </div>
@@ -95,3 +101,4 @@ export function ConnectProgress(props: ConnectProgressProps) {
 export default ConnectProgress
 
 
+

package/src/ui/progress-circle.tsx

@@ -13,6 +13,9 @@ export type ProgressCircleProps = {
 export function ProgressCircle(props: ProgressCircleProps) {
   const { value, size = 72, thickness = 6, className, showLabel = true, label } = props
 
+  const rawId = React.useId()
+  const gradientId = React.useMemo(() => `kyd-pc-${String(rawId).replace(/:/g, '')}` , [rawId])
+
   const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0))
   const radius = (size - thickness) / 2
   const circumference = 2 * Math.PI * radius
@@ -22,7 +25,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
     <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
       <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
         <defs>
-          <linearGradient id="kyd-progress-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%" stopColor="var(--icon-accent)" />
             <stop offset="100%" stopColor="var(--icon-accent-hover)" />
           </linearGradient>
@@ -41,7 +44,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
           cy={size / 2}
           r={radius}
           fill="none"
-          stroke="url(#kyd-progress-gradient)"
+          stroke={`url(#${gradientId})`}
           strokeWidth={thickness}
           strokeLinecap="round"
           strokeDasharray={circumference}
@@ -76,3 +79,4 @@ export function ProgressCircle(props: ProgressCircleProps) {
 export default ProgressCircle
 
 
+