components/ui/right-cheveron.tsx (1)

32-38: Hardcoded container width may conflict with size prop.

The container has a fixed w-8 (32px) width, but the SVG uses the dynamic size prop (default 24). If a larger size is passed (e.g., 48), the icon could overflow its container.

♻️ Suggested fix: use inline style for dynamic sizing

       <motion.div
         ref={scope}
-        className={`flex w-8 items-center justify-center ${className}`}
+        className={`flex items-center justify-center ${className}`}
+        style={{ width: size, height: size }}
         onHoverStart={start}
         onHoverEnd={stop}
       >

components/ui/bug-icon.tsx (1)

8-8: Consider aligning the default size with other icons.

The default size = 40 differs from other animated icons in this PR (e.g., BrandReactIcon uses size = 24). If this is intentional for the bug icon's visual appearance, it's fine—but worth confirming for consistency across the icon library.

icons/wallet-icon.tsx (1)

5-9: Missing disableHover prop support.

Unlike MoonIcon and LayoutDashboardIcon, this component doesn't destructure or handle the disableHover prop from AnimatedIconProps. This creates an inconsistent API across icon components.

♻️ Proposed fix to add disableHover support

 const WalletIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
-    { size = 40, className = "", strokeWidth = 2, color = "currentColor" },
+    { size = 40, className = "", strokeWidth = 2, color = "currentColor", disableHover = false },
     ref,
   ) => {

Then update the SVG hover handlers (around lines 42-43):

-        onHoverStart={start}
-        onHoverEnd={stop}
+        onHoverStart={disableHover ? undefined : start}
+        onHoverEnd={disableHover ? undefined : stop}

icons/bug-icon.tsx (1)

5-9: Missing disableHover prop support.

Same issue as WalletIcon — the disableHover prop is not destructured or handled, creating an inconsistent API.

♻️ Proposed fix to add disableHover support

 const BugIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
-    { size = 40, className = "", strokeWidth = 2, color = "currentColor" },
+    { size = 40, className = "", strokeWidth = 2, color = "currentColor", disableHover = false },
     ref,
   ) => {

Then update the SVG hover handlers (around lines 48-49):

-        onHoverStart={start}
-        onHoverEnd={stop}
+        onHoverStart={disableHover ? undefined : start}
+        onHoverEnd={disableHover ? undefined : stop}

components/ui/lock-icon.tsx (1)

5-9: Missing disableHover prop support.

The component already has handleHoverStart and handleHoverEnd wrapper functions but doesn't destructure or utilize the disableHover prop to conditionally disable hover animations.

♻️ Proposed fix to add disableHover support

 const LockIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
-    { size = 48, color = "currentColor", strokeWidth = 2, className = "" },
+    { size = 48, color = "currentColor", strokeWidth = 2, className = "", disableHover = false },
     ref,
   ) => {

Then update the SVG hover handlers (around lines 44-45):

-        onHoverStart={handleHoverStart}
-        onHoverEnd={handleHoverEnd}
+        onHoverStart={disableHover ? undefined : handleHoverStart}
+        onHoverEnd={disableHover ? undefined : handleHoverEnd}

icons/layout-dashboard-icon.tsx (2)

5-60: Add disableHover (and gate hover handlers) for consistency with other animated icons.

Right now this icon always wires onHoverStart/onHoverEnd and always shows cursor-pointer, which makes it harder to use as a purely-decorative/icon-only element and diverges from WalletIcon’s disableHover behavior.

Proposed diff

 const LayoutDashboardIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
-    { size = 40, className = "", strokeWidth = 2, color = "currentColor" },
+    {
+      size = 40,
+      className = "",
+      strokeWidth = 2,
+      color = "currentColor",
+      disableHover = false,
+    },
     ref,
   ) => {
@@
     return (
       <motion.svg
         ref={scope}
-        onHoverStart={start}
-        onHoverEnd={stop}
+        onHoverStart={disableHover ? undefined : start}
+        onHoverEnd={disableHover ? undefined : stop}
@@
-        className={`cursor-pointer ${className}`}
+        className={`${disableHover ? "" : "cursor-pointer"} ${className}`}
         initial={{ x: 0, y: 0 }}
       >

---

12-35: Drop async from start/stop (no awaits).

These functions don’t await anything, so marking them async is noise and can mislead readers about sequencing.

public/r/layout-dashboard-icon.json (1)

1-20: Watch for API drift between embedded registry content and real source files.

Since the full TS source is duplicated into JSON content, any follow-up change (e.g., adding disableHover) needs to be updated in both places or generated from a single source of truth.

components/ui/question-mark.tsx (1)

18-52: Tighten stop() selector/properties (avoid pathLength on the SVG group).
Right now the same animation payload is applied to paths and the .question-group svg. Safer to separate path vs group animations, and set a transform origin for consistent scaling.

Proposed diff

@@
-    const stop = useCallback(() => {
-      animate(
-        ".question-mark, .question-mark-dot, .question-group",
-        { pathLength: 1, y: 0, scale: 1 },
-        { duration: 0.2, ease: "easeInOut" },
-      );
-    }, [animate]);
+    const stop = useCallback(() => {
+      animate(
+        ".question-mark, .question-mark-dot",
+        { pathLength: 1, y: 0 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+      animate(
+        ".question-group",
+        { scale: 1 },
+        { duration: 0.2, ease: "easeInOut" },
+      );
+    }, [animate]);
@@
-    useImperativeHandle(ref, () => ({
-      startAnimation: start,
-      stopAnimation: stop,
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        startAnimation: start,
+        stopAnimation: stop,
+      }),
+      [start, stop],
+    );

@@
-        <motion.svg
+        <motion.svg
           className={`question-group cursor-pointer ${className}`}
+          style={{ transformOrigin: "50% 50%" }}
           xmlns="http://www.w3.org/2000/svg"

icons/user-icon.tsx (1)

12-43: Optional: drop async on start/stop (no awaits).
Both callbacks are async but never await; removing async avoids implying sequencing that isn’t happening.

public/r/user-icon.json (2)

8-17: Avoid async without await in embedded icons/user-icon.tsx + add deps to useImperativeHandle.

In Line 10’s embedded code, start/stop are declared async but don’t await (easy to drop async), and useImperativeHandle could include a deps array to avoid re-creating the handle every render.

Proposed patch (within the embedded content)

-    const start = useCallback(async () => {
+    const start = useCallback(() => {
       animate(
         ".user-avatar",
         {
           scale: 1.05,
           y: -1,
         },
         {
           duration: 0.25,
           ease: "easeOut",
         },
       );
     }, [animate]);

-    const stop = useCallback(async () => {
+    const stop = useCallback(() => {
       animate(
         ".user-avatar",
         {
           scale: 1,
           y: 0,
         },
         {
           duration: 0.2,
           ease: "easeInOut",
         },
       );
     }, [animate]);

-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       startAnimation: start,
       stopAnimation: stop,
-    }));
+    }), [start, stop]);

---

14-17: Keep icons/types.ts consistent across registry items to avoid drift.

Since multiple registry items appear to ship icons/types.ts, ensure they stay byte-identical (or consider a single source via registry deps) so consumers don’t get subtle mismatches when installing multiple icons.

components/ui/gear-icon.tsx (1)

18-52: Simplify hover handlers + stabilize imperative handle.

handleHoverStart/End just call start/stop (Lines 45-51). Also consider memoizing start/stop and adding deps to useImperativeHandle to avoid re-creating the handle each render.

Proposed refactor

-import { forwardRef, useImperativeHandle } from "react";
+import { forwardRef, useCallback, useImperativeHandle } from "react";
 import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
 import { motion, useAnimate } from "motion/react";

 const GearIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
   (
@@
   ) => {
     const [scope, animate] = useAnimate();

-    const start = () => {
+    const start = useCallback(() => {
       animate(".gear-body", { scale: [1, 1.02, 1] }, { duration: 0.6 });
@@
       animate(
         ".gear-rotator",
         { rotate: 360 },
         { duration: 0.9, ease: "easeInOut" },
       );
-    };
+    }, [animate]);

-    const stop = () => {
+    const stop = useCallback(() => {
       animate(".gear-rotator", { rotate: 0 }, { duration: 0.2 });
       animate(".gear-center", { scale: 1 }, { duration: 0.2 });
       animate(".gear-body", { scale: 1 }, { duration: 0.2 });
-    };
+    }, [animate]);

-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       startAnimation: start,
       stopAnimation: stop,
-    }));
-
-    const handleHoverStart = () => {
-      start();
-    };
-
-    const handleHoverEnd = () => {
-      stop();
-    };
+    }), [start, stop]);

     return (
       <motion.svg
         ref={scope}
-        onHoverStart={disableHover ? undefined : handleHoverStart}
-        onHoverEnd={disableHover ? undefined : handleHoverEnd}
+        onHoverStart={disableHover ? undefined : start}
+        onHoverEnd={disableHover ? undefined : stop}

components/ui/logout-icon.tsx (1)

49-52: Add deps to useImperativeHandle to avoid re-creating the handle every render.

Proposed patch

-    useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       startAnimation: start,
       stopAnimation: stop,
-    }));
+    }), [start, stop]);

components/ui/down-cheveron.tsx (1)

5-62: Consider standardizing naming + hover-disable behavior (Cheveron vs Chevron, optional disableHover).

If there are already *Cheveron* components in the repo, keep consistent; otherwise consider renaming to DownChevron/down-chevron.tsx to avoid ongoing typo friction. Also, if other icons support disableHover, adding it here would keep the icon API uniform.

public/r/wallet-icon.json (2)

8-12: Double-check rotateY/perspective behavior on SVG across target browsers.

The embedded icons/wallet-icon.tsx uses rotateY on an SVG path and sets style={{ perspective: "400px" }} on the <motion.svg>. Depending on motion/react semantics and browser SVG transform support, the 3D effect may not render as expected (often perspective needs to be applied on a parent, or via a library-specific transformPerspective).

---

14-17: Shared icons/types.ts drift risk (same as user-icon).

Since this registry item also ships icons/types.ts, ensure all registry items that include it keep it identical (or centralize it via registry dependencies).

Configuration used: defaults

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

components/examples/takeuforward-navbar.tsx (2)

248-259: Add an accessible name to the icon-only dropdown trigger (aria-label).

Proposed diff

         <motion.button
           type="button"
           aria-haspopup="menu"
           aria-expanded={isDropdownOpen}
           aria-controls="user-dropdown-menu"
+          aria-label={isDropdownOpen ? "Close user menu" : "Open user menu"}
           onClick={() => setIsDropdownOpen(!isDropdownOpen)}
           className="group flex cursor-pointer items-center"
         >

---

280-287: Remove hard-coded personal name/email (PII) from the example.
Even in demos, committing real-looking PII is a compliance/privacy risk.

Proposed diff

-                  <span className="text-[14px] font-semibold text-zinc-900 dark:text-zinc-100">
-                    Abhijit Jha
-                  </span>
-                  <span className="text-[11px] text-zinc-500">
-                    [email protected]
-                  </span>
+                  <span className="text-[14px] font-semibold text-zinc-900 dark:text-zinc-100">
+                    Your Name
+                  </span>
+                  <span className="text-[11px] text-zinc-500">
+                    [email protected]
+                  </span>

components/examples/takeuforward-navbar.tsx (1)

22-63: Use meaningful alt text for the logo images (not just "logo").
Helps screen readers and improves overall a11y.

Proposed diff

-        alt="logo"
+        alt="TakeUForward logo"
@@
-        alt="logo"
+        alt="TakeUForward logo"
@@
-        alt="logo"
+        alt="TakeUForward logo"
@@
-        alt="logo"
+        alt="TakeUForward logo"

Configuration used: defaults

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

icons/right-chevron.tsx (2)

35-35: Minor styling inconsistency with DownChevron.

This component uses flex w-8 while DownChevron uses inline-flex without a fixed width. Consider aligning the container styling for consistency across chevron icons.

Suggested change for consistency

-        className={`flex w-8 items-center justify-center ${className}`}
+        className={`inline-flex cursor-pointer items-center justify-center ${className}`}

---

49-49: Minor: consider using a more specific class selector.

DownChevron uses .chevron-down while this uses .chevron. For consistency and to avoid potential conflicts, consider using .chevron-right.

Suggested change

-          className="chevron cursor-pointer"
+          className="chevron-right cursor-pointer"

And update the animation selectors accordingly:

-        ".chevron",
+        ".chevron-right",

Configuration used: defaults

Review profile: CHILL

Plan: Pro

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}