feat: add animated core icon components, documentation, Storybook sto…

app/docs/icons/available-icons.tsx

@@ -14,6 +14,19 @@ import { CalendarIcon } from '@/components/core/calendar-icon';
 import { MobileStoreIcon } from '@/components/core/mobile-store-icon';
 import { BalanceIcon } from '@/components/core/balance-icon';
 import { BuildingIcon } from '@/components/core/building-icon';
+import { GlobalIcon } from '@/components/core/global-icon';
+import { UserIcon } from '@/components/core/user-icon';
+import { GlobalSearchIcon } from '@/components/core/global-search-icon';
+import { ToolsIcon } from '@/components/core/tools-icon';
+import { TrophyIcon } from '@/components/core/trophy-icon';
+import { MicrophoneIcon } from '@/components/core/microphone-icon';
+import { LikeIcon } from '@/components/core/like-icon';
+import { BellIcon } from '@/components/core/bell-icon';
+import { HeartIcon } from '@/components/core/heart-icon';
+import { TrashIcon } from '@/components/core/trash-icon';
+import { ShareIcon } from '@/components/core/share-icon';
+import { PaperPlaneIcon } from '@/components/core/paper-plane-icon';
+import { MailStackIcon } from '@/components/core/mail-stack-icon';
 
 import PhoneIconBasic from './phone-icon-basic';
 import RocketIconBasic from './rocket-icon-basic';
@@ -30,6 +43,19 @@ import CalendarIconBasic from './calendar-icon-basic';
 import MobileStoreIconBasic from './mobile-store-icon-basic';
 import BalanceIconBasic from './balance-icon-basic';
 import BuildingIconBasic from './building-icon-basic';
+import GlobalIconBasic from './global-icon-basic';
+import UserIconBasic from './user-icon-basic';
+import GlobalSearchIconBasic from './global-search-icon-basic';
+import ToolsIconBasic from './tools-icon-basic';
+import TrophyIconBasic from './trophy-icon-basic';
+import MicrophoneIconBasic from './microphone-icon-basic';
+import LikeIconBasic from './like-icon-basic';
+import BellIconBasic from './bell-icon-basic';
+import HeartIconBasic from './heart-icon-basic';
+import TrashIconBasic from './trash-icon-basic';
+import ShareIconBasic from './share-icon-basic';
+import PaperPlaneIconBasic from './paper-plane-icon-basic';
+import MailStackIconBasic from './mail-stack-icon-basic';
 
 export type IconDefinition = {
   name: string;
@@ -153,4 +179,107 @@ export const AVAILABLE_ICONS: IconDefinition[] = [
     example: <BuildingIconBasic />,
     filePath: 'app/docs/icons/building-icon-basic.tsx',
   },
+  {
+    name: 'Global Icon',
+    installName: 'global-icon',
+    component: <GlobalIcon size={48} startOnHover={true} pinColor='#06b6d4' />,
+    example: <GlobalIconBasic />,
+    filePath: 'app/docs/icons/global-icon-basic.tsx',
+  },
+  {
+    name: 'User Icon',
+    installName: 'user-icon',
+    component: <UserIcon size={48} startOnHover={true} userColor='#06b6d4' />,
+    example: <UserIconBasic />,
+    filePath: 'app/docs/icons/user-icon-basic.tsx',
+  },
+  {
+    name: 'Global Search Icon',
+    installName: 'global-search-icon',
+    component: (
+      <GlobalSearchIcon size={48} startOnHover={true} globeColor='#06b6d4' />
+    ),
+    example: <GlobalSearchIconBasic />,
+    filePath: 'app/docs/icons/global-search-icon-basic.tsx',
+  },
+  {
+    name: 'Tools Icon',
+    installName: 'tools-icon',
+    component: (
+      <ToolsIcon size={48} startOnHover={true} screwdriverColor='#06b6d4' />
+    ),
+    example: <ToolsIconBasic />,
+    filePath: 'app/docs/icons/tools-icon-basic.tsx',
+  },
+  {
+    name: 'Trophy Icon',
+    installName: 'trophy-icon',
+    component: <TrophyIcon size={48} startOnHover={true} starColor='#fbbf24' />,
+    example: <TrophyIconBasic />,
+    filePath: 'app/docs/icons/trophy-icon-basic.tsx',
+  },
+  {
+    name: 'Microphone Icon',
+    installName: 'microphone-icon',
+    component: (
+      <MicrophoneIcon size={48} startOnHover={true} standColor='#06b6d4' />
+    ),
+    example: <MicrophoneIconBasic />,
+    filePath: 'app/docs/icons/microphone-icon-basic.tsx',
+  },
+  {
+    name: 'Like Icon',
+    installName: 'like-icon',
+    component: <LikeIcon size={48} startOnHover={true} cuffColor='#06b6d4' />,
+    example: <LikeIconBasic />,
+    filePath: 'app/docs/icons/like-icon-basic.tsx',
+  },
+  {
+    name: 'Bell Icon',
+    installName: 'bell-icon',
+    component: (
+      <BellIcon size={48} startOnHover={true} clapperColor='#06b6d4' />
+    ),
+    example: <BellIconBasic />,
+    filePath: 'app/docs/icons/bell-icon-basic.tsx',
+  },
+  {
+    name: 'Heart Icon',
+    installName: 'heart-icon',
+    component: <HeartIcon size={48} startOnHover={true} shineColor='#06b6d4' />,
+    example: <HeartIconBasic />,
+    filePath: 'app/docs/icons/heart-icon-basic.tsx',
+  },
+  {
+    name: 'Trash Icon',
+    installName: 'trash-icon',
+    component: <TrashIcon size={48} startOnHover={true} lidColor='#06b6d4' />,
+    example: <TrashIconBasic />,
+    filePath: 'app/docs/icons/trash-icon-basic.tsx',
+  },
+  {
+    name: 'Share Icon',
+    installName: 'share-icon',
+    component: <ShareIcon size={48} startOnHover={true} dotColor='#06b6d4' />,
+    example: <ShareIconBasic />,
+    filePath: 'app/docs/icons/share-icon-basic.tsx',
+  },
+  {
+    name: 'Paper Plane Icon',
+    installName: 'paper-plane-icon',
+    component: (
+      <PaperPlaneIcon size={48} startOnHover={true} trailColor='#06b6d4' />
+    ),
+    example: <PaperPlaneIconBasic />,
+    filePath: 'app/docs/icons/paper-plane-icon-basic.tsx',
+  },
+  {
+    name: 'Mail Stack Icon',
+    installName: 'mail-stack-icon',
+    component: (
+      <MailStackIcon size={48} startOnHover={true} stackColor='#06b6d4' />
+    ),
+    example: <MailStackIconBasic />,
+    filePath: 'app/docs/icons/mail-stack-icon-basic.tsx',
+  },
 ];

app/docs/icons/bell-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { BellIcon } from '@/components/core/bell-icon';
+
+export default function BellIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <BellIcon size={48} />
+        <BellIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='ring'
+          color='#000000' // Black Bell
+          clapperColor='#06b6d4' // Cyan Clapper
+        />
+        <BellIcon size={48} animationType='shake' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows ringing bell with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/gallery-wrapper.tsx

@@ -3,6 +3,6 @@ import { IconGallery } from './icon-gallery';
 
 export async function IconGalleryWrapper() {
   const icons = await getIconsData();
-  // @ts-ignore - Valid React Node passing from Server to Client
+
   return <IconGallery icons={icons} />;
 }

app/docs/icons/global-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { GlobalIcon } from '@/components/core/global-icon';
+
+export default function GlobalIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <GlobalIcon size={48} />
+        <GlobalIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='bounce'
+          color='#000000' // Black Globe
+          pinColor='#06b6d4' // Cyan Pins
+        />
+        <GlobalIcon size={48} animationType='spin' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows bouncing pins with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/global-search-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { GlobalSearchIcon } from '@/components/core/global-search-icon';
+
+export default function GlobalSearchIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <GlobalSearchIcon size={48} />
+        <GlobalSearchIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='rotate'
+          color='#000000' // Black Frame
+          globeColor='#06b6d4' // Cyan Globe
+        />
+        <GlobalSearchIcon size={48} animationType='search' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows rotating globe with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/heart-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { HeartIcon } from '@/components/core/heart-icon';
+
+export default function HeartIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <HeartIcon size={48} />
+        <HeartIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='beat'
+          color='#000000' // Black Heart
+          shineColor='#06b6d4' // Cyan Shine
+        />
+        <HeartIcon size={48} animationType='pulse' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows beating heart with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/like-icon-basic.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { LikeIcon } from '@/components/core/like-icon';
+
+export default function LikeIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <LikeIcon size={48} />
+        <LikeIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='like'
+          color='#000000' // Black Hand
+          cuffColor='#06b6d4' // Cyan Cuff
+        />
+        <LikeIcon size={48} animationType='wiggle' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows &quot;like&quot; reaction with
+        custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/mail-stack-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { MailStackIcon } from '@/components/core/mail-stack-icon';
+
+export default function MailStackIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <MailStackIcon size={48} />
+        <MailStackIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='slide'
+          color='#000000' // Black Envelope
+          stackColor='#06b6d4' // Cyan Stack
+        />
+        <MailStackIcon size={48} animationType='rotate' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows sliding stack with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/microphone-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { MicrophoneIcon } from '@/components/core/microphone-icon';
+
+export default function MicrophoneIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <MicrophoneIcon size={48} />
+        <MicrophoneIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='shake'
+          color='#000000' // Black Mic
+          standColor='#06b6d4' // Cyan Stand
+        />
+        <MicrophoneIcon size={48} animationType='pulse' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows shaking mic with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/paper-plane-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { PaperPlaneIcon } from '@/components/core/paper-plane-icon';
+
+export default function PaperPlaneIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <PaperPlaneIcon size={48} />
+        <PaperPlaneIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='fly'
+          color='#000000' // Black Plane
+          trailColor='#06b6d4' // Cyan Trail
+        />
+        <PaperPlaneIcon size={48} animationType='wobble' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows flying plane with custom colors.
+      </p>
+    </div>
+  );
+}

app/docs/icons/phone-icon-basic.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { PhoneIcon } from '@/components/core/phone-icon';
-import { useState } from 'react';
 
 export default function PhoneIconBasic() {
   return (

app/docs/icons/share-icon-basic.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ShareIcon } from '@/components/core/share-icon';
+
+export default function ShareIconBasic() {
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex items-center gap-8'>
+        <ShareIcon size={48} />
+        <ShareIcon
+          size={48}
+          startOnHover={false}
+          isAnimating={true}
+          animationType='rotate'
+          color='#000000' // Black Lines
+          dotColor='#06b6d4' // Cyan Dots
+        />
+        <ShareIcon size={48} animationType='pulse' color='#ef4444' />
+      </div>
+      <p className='text-muted-foreground text-sm'>
+        Hover to see animations. Center shows rotating graph with custom colors.
+      </p>
+    </div>
+  );
+}