[BUG]: components/profile-card

[Steeefun]

Describe the issue

Your generated code is producing the props which don't exist:
showIcon
showBehindGlow
customInnerGradient

I presume others, like me, may run into compilation issues when their component definition has undefined props

Reproduction Link

No response

Steps to reproduce

nav to: https://reactbits.dev/components/profile-card
click on "code" button.
Usage has aforementioned options which are not in your props section of your preview tab.

Validations

• I have checked other issues to see if my issue was already reported or addressed

[EC-code1]

Hello,

Have you used "npx shadcn@latest add @react-bits/ProfileCard-TS-CSS" and afterwards
`import ProfileCard from './ProfileCard'

<ProfileCard
name="Javi A. Torres"
title="Software Engineer"
handle="javicodes"
status="Online"
contactText="Contact Me"
avatarUrl="/path/to/avatar.jpg"
showUserInfo={false}
enableTilt={true}
enableMobileTilt={false}
onContactClick={() => console.log('Contact clicked')}
showIcon
showBehindGlow
behindGlowColor="rgba(125, 190, 255, 0.67)"
customInnerGradient="linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)"
/>`

`import React, { useEffect, useRef, useCallback, useMemo } from 'react';
import './ProfileCard.css';

interface ProfileCardProps {
avatarUrl: string;
iconUrl?: string;
grainUrl?: string;
innerGradient?: string;
behindGlowEnabled?: boolean;
behindGlowColor?: string;
behindGlowSize?: string;
className?: string;
enableTilt?: boolean;
enableMobileTilt?: boolean;
mobileTiltSensitivity?: number;
miniAvatarUrl?: string;
name?: string;
title?: string;
handle?: string;
status?: string;
contactText?: string;
showUserInfo?: boolean;
onContactClick?: () => void;
}

const DEFAULT_INNER_GRADIENT = 'linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%)';

const ANIMATION_CONFIG = {
INITIAL_DURATION: 1200,
INITIAL_X_OFFSET: 70,
INITIAL_Y_OFFSET: 60,
DEVICE_BETA_OFFSET: 20,
ENTER_TRANSITION_MS: 180
} as const;

const clamp = (v: number, min = 0, max = 100): number => Math.min(Math.max(v, min), max);
const round = (v: number, precision = 3): number => parseFloat(v.toFixed(precision));
const adjust = (v: number, fMin: number, fMax: number, tMin: number, tMax: number): number =>
round(tMin + ((tMax - tMin) * (v - fMin)) / (fMax - fMin));

const ProfileCardComponent: React.FC = ({
avatarUrl = '',
iconUrl = '',
grainUrl = '',
innerGradient,
behindGlowEnabled = true,
behindGlowColor,
behindGlowSize,
className = '',
enableTilt = true,
enableMobileTilt = false,
mobileTiltSensitivity = 5,
miniAvatarUrl,
name = 'Javi A. Torres',
title = 'Software Engineer',
handle = 'javicodes',
status = 'Online',
contactText = 'Contact',
showUserInfo = true,
onContactClick
}) => {
const wrapRef = useRef(null);
const shellRef = useRef(null);

const enterTimerRef = useRef<number | null>(null);
const leaveRafRef = useRef<number | null>(null);

const tiltEngine = useMemo(() => {
if (!enableTilt) return null;

let rafId: number | null = null;
let running = false;
let lastTs = 0;

let currentX = 0;
let currentY = 0;
let targetX = 0;
let targetY = 0;

const DEFAULT_TAU = 0.14;
const INITIAL_TAU = 0.6;
let initialUntil = 0;

const setVarsFromXY = (x: number, y: number) => {
  const shell = shellRef.current;
  const wrap = wrapRef.current;
  if (!shell || !wrap) return;

  const width = shell.clientWidth || 1;
  const height = shell.clientHeight || 1;

  const percentX = clamp((100 / width) * x);
  const percentY = clamp((100 / height) * y);

  const centerX = percentX - 50;
  const centerY = percentY - 50;

  const properties = {
    '--pointer-x': `${percentX}%`,
    '--pointer-y': `${percentY}%`,
    '--background-x': `${adjust(percentX, 0, 100, 35, 65)}%`,
    '--background-y': `${adjust(percentY, 0, 100, 35, 65)}%`,
    '--pointer-from-center': `${clamp(Math.hypot(percentY - 50, percentX - 50) / 50, 0, 1)}`,
    '--pointer-from-top': `${percentY / 100}`,
    '--pointer-from-left': `${percentX / 100}`,
    '--rotate-x': `${round(-(centerX / 5))}deg`,
    '--rotate-y': `${round(centerY / 4)}deg`
  } as Record<string, string>;

  for (const [k, v] of Object.entries(properties)) wrap.style.setProperty(k, v);
};

const step = (ts: number) => {
  if (!running) return;
  if (lastTs === 0) lastTs = ts;
  const dt = (ts - lastTs) / 1000;
  lastTs = ts;

  const tau = ts < initialUntil ? INITIAL_TAU : DEFAULT_TAU;
  const k = 1 - Math.exp(-dt / tau);

  currentX += (targetX - currentX) * k;
  currentY += (targetY - currentY) * k;

  setVarsFromXY(currentX, currentY);

  const stillFar = Math.abs(targetX - currentX) > 0.05 || Math.abs(targetY - currentY) > 0.05;

  if (stillFar || document.hasFocus()) {
    rafId = requestAnimationFrame(step);
  } else {
    running = false;
    lastTs = 0;
    if (rafId) {
      cancelAnimationFrame(rafId);
      rafId = null;
    }
  }
};

const start = () => {
  if (running) return;
  running = true;
  lastTs = 0;
  rafId = requestAnimationFrame(step);
};

return {
  setImmediate(x: number, y: number) {
    currentX = x;
    currentY = y;
    setVarsFromXY(currentX, currentY);
  },
  setTarget(x: number, y: number) {
    targetX = x;
    targetY = y;
    start();
  },
  toCenter() {
    const shell = shellRef.current;
    if (!shell) return;
    this.setTarget(shell.clientWidth / 2, shell.clientHeight / 2);
  },
  beginInitial(durationMs: number) {
    initialUntil = performance.now() + durationMs;
    start();
  },
  getCurrent() {
    return { x: currentX, y: currentY, tx: targetX, ty: targetY };
  },
  cancel() {
    if (rafId) cancelAnimationFrame(rafId);
    rafId = null;
    running = false;
    lastTs = 0;
  }
};

}, [enableTilt]);

const getOffsets = (evt: PointerEvent, el: HTMLElement) => {
const rect = el.getBoundingClientRect();
return { x: evt.clientX - rect.left, y: evt.clientY - rect.top };
};

const handlePointerMove = useCallback(
(event: PointerEvent) => {
const shell = shellRef.current;
if (!shell || !tiltEngine) return;
const { x, y } = getOffsets(event, shell);
tiltEngine.setTarget(x, y);
},
[tiltEngine]
);

const handlePointerEnter = useCallback(
(event: PointerEvent) => {
const shell = shellRef.current;
if (!shell || !tiltEngine) return;

  shell.classList.add('active');
  shell.classList.add('entering');
  if (enterTimerRef.current) window.clearTimeout(enterTimerRef.current);
  enterTimerRef.current = window.setTimeout(() => {
    shell.classList.remove('entering');
  }, ANIMATION_CONFIG.ENTER_TRANSITION_MS);

  const { x, y } = getOffsets(event, shell);
  tiltEngine.setTarget(x, y);
},
[tiltEngine]

);

const handlePointerLeave = useCallback(() => {
const shell = shellRef.current;
if (!shell || !tiltEngine) return;

tiltEngine.toCenter();

const checkSettle = () => {
  const { x, y, tx, ty } = tiltEngine.getCurrent();
  const settled = Math.hypot(tx - x, ty - y) < 0.6;
  if (settled) {
    shell.classList.remove('active');
    leaveRafRef.current = null;
  } else {
    leaveRafRef.current = requestAnimationFrame(checkSettle);
  }
};
if (leaveRafRef.current) cancelAnimationFrame(leaveRafRef.current);
leaveRafRef.current = requestAnimationFrame(checkSettle);

}, [tiltEngine]);

const handleDeviceOrientation = useCallback(
(event: DeviceOrientationEvent) => {
const shell = shellRef.current;
if (!shell || !tiltEngine) return;

  const { beta, gamma } = event;
  if (beta == null || gamma == null) return;

  const centerX = shell.clientWidth / 2;
  const centerY = shell.clientHeight / 2;
  const x = clamp(centerX + gamma * mobileTiltSensitivity, 0, shell.clientWidth);
  const y = clamp(
    centerY + (beta - ANIMATION_CONFIG.DEVICE_BETA_OFFSET) * mobileTiltSensitivity,
    0,
    shell.clientHeight
  );

  tiltEngine.setTarget(x, y);
},
[tiltEngine, mobileTiltSensitivity]

);

useEffect(() => {
if (!enableTilt || !tiltEngine) return;

const shell = shellRef.current;
if (!shell) return;

const pointerMoveHandler = handlePointerMove as EventListener;
const pointerEnterHandler = handlePointerEnter as EventListener;
const pointerLeaveHandler = handlePointerLeave as EventListener;
const deviceOrientationHandler = handleDeviceOrientation as EventListener;

shell.addEventListener('pointerenter', pointerEnterHandler);
shell.addEventListener('pointermove', pointerMoveHandler);
shell.addEventListener('pointerleave', pointerLeaveHandler);

const handleClick = () => {
  if (!enableMobileTilt || location.protocol !== 'https:') return;
  const anyMotion = window.DeviceMotionEvent as any;
  if (anyMotion && typeof anyMotion.requestPermission === 'function') {
    anyMotion
      .requestPermission()
      .then((state: string) => {
        if (state === 'granted') {
          window.addEventListener('deviceorientation', deviceOrientationHandler);
        }
      })
      .catch(console.error);
  } else {
    window.addEventListener('deviceorientation', deviceOrientationHandler);
  }
};
shell.addEventListener('click', handleClick);

const initialX = (shell.clientWidth || 0) - ANIMATION_CONFIG.INITIAL_X_OFFSET;
const initialY = ANIMATION_CONFIG.INITIAL_Y_OFFSET;
tiltEngine.setImmediate(initialX, initialY);
tiltEngine.toCenter();
tiltEngine.beginInitial(ANIMATION_CONFIG.INITIAL_DURATION);

return () => {
  shell.removeEventListener('pointerenter', pointerEnterHandler);
  shell.removeEventListener('pointermove', pointerMoveHandler);
  shell.removeEventListener('pointerleave', pointerLeaveHandler);
  shell.removeEventListener('click', handleClick);
  window.removeEventListener('deviceorientation', deviceOrientationHandler);
  if (enterTimerRef.current) window.clearTimeout(enterTimerRef.current);
  if (leaveRafRef.current) cancelAnimationFrame(leaveRafRef.current);
  tiltEngine.cancel();
  shell.classList.remove('entering');
};

}, [
enableTilt,
enableMobileTilt,
tiltEngine,
handlePointerMove,
handlePointerEnter,
handlePointerLeave,
handleDeviceOrientation
]);

const cardStyle = useMemo(
() =>
({
'--icon': iconUrl ? url(${iconUrl}) : 'none',
'--grain': grainUrl ? url(${grainUrl}) : 'none',
'--inner-gradient': innerGradient ?? DEFAULT_INNER_GRADIENT,
'--behind-glow-color': behindGlowColor ?? 'rgba(125, 190, 255, 0.67)',
'--behind-glow-size': behindGlowSize ?? '50%'
}) as React.CSSProperties,
[iconUrl, grainUrl, innerGradient, behindGlowColor, behindGlowSize]
);

const handleContactClick = useCallback(() => {
onContactClick?.();
}, [onContactClick]);

return (
<div ref={wrapRef} className={pc-card-wrapper ${className}.trim()} style={cardStyle}>
{behindGlowEnabled &&

}

<img
className="avatar"
src={avatarUrl}
alt={${name || 'User'} avatar}
loading="lazy"
onError={e => {
const t = e.target as HTMLImageElement;
t.style.display = 'none';
}}
/>
{showUserInfo && (

<img
src={miniAvatarUrl || avatarUrl}
alt={${name || 'User'} mini avatar}
loading="lazy"
onError={e => {
const t = e.target as HTMLImageElement;
t.style.opacity = '0.5';
t.src = avatarUrl;
}}
/>

@{handle}

{status}

<button
className="pc-contact-btn"
onClick={handleContactClick}
style={{ pointerEvents: 'auto' }}
type="button"
aria-label={Contact ${name || 'user'}}
>
{contactText}

)}

{name}

{title}

);
};

const ProfileCard = React.memo(ProfileCardComponent);
export default ProfileCard;
`

and etc...
Everything is showing how to use it, how to install and usage.