├── .npmrc
├── server
    └── tsconfig.json
├── app
    ├── app.vue
    ├── assets
    │   └── css
    │   │   └── main.css
    ├── app.config.ts
    └── components
    │   ├── ThemeToggle.vue
    │   ├── AnimatedIconButton.vue
    │   ├── Lucide
    │       ├── RotateCCW.vue
    │       ├── RotateCW.vue
    │       ├── Moon.vue
    │       ├── MoonAlt.vue
    │       ├── Bell.vue
    │       ├── ArrowBigDown.vue
    │       ├── ArrowBigRight.vue
    │       ├── ArrowBigUp.vue
    │       ├── ArrowBigLeft.vue
    │       ├── RefreshCW.vue
    │       ├── CircleHelp.vue
    │       ├── ChartSpline.vue
    │       ├── RefreshCCWDot.vue
    │       ├── SmartphoneCharging.vue
    │       ├── KeyCircle.vue
    │       ├── Vibrate.vue
    │       ├── Logout.vue
    │       ├── Cart.vue
    │       ├── WavesLadder.vue
    │       ├── CircleCheck.vue
    │       ├── KeySquare.vue
    │       ├── RefreshCWOff.vue
    │       ├── ArrowBigDownDash.vue
    │       ├── ArrowBigRightDash.vue
    │       ├── ArrowBigUpDash.vue
    │       ├── Facebook.vue
    │       ├── ArrowBigLeftDash.vue
    │       ├── Home.vue
    │       ├── Sun.vue
    │       ├── SunDim.vue
    │       ├── Key.vue
    │       ├── Waves.vue
    │       ├── SunMedium.vue
    │       ├── Twitter.vue
    │       ├── ArrowUp.vue
    │       ├── ArrowDown.vue
    │       ├── Users.vue
    │       ├── Settings.vue
    │       ├── Search.vue
    │       ├── CloudRain.vue
    │       ├── CloudRainWind.vue
    │       ├── UserRound.vue
    │       ├── Redo.vue
    │       ├── FileStack.vue
    │       ├── Sunset.vue
    │       ├── Workflow.vue
    │       ├── CalendarDays.vue
    │       ├── AirVent.vue
    │       ├── Menu.vue
    │       ├── SunMoon.vue
    │       ├── BluetoothSearching.vue
    │       ├── AArrowUp.vue
    │       ├── AArrowDown.vue
    │       ├── SquareArrowDown.vue
    │       ├── SquareArrowRight.vue
    │       ├── SquareArrowLeft.vue
    │       ├── SquareArrowUp.vue
    │       ├── CloudSun.vue
    │       ├── Clock.vue
    │       ├── SquareStack.vue
    │       ├── SquareActivity.vue
    │       ├── UndoDot.vue
    │       ├── RedoDot.vue
    │       ├── Tornado.vue
    │       ├── Twitch.vue
    │       ├── Youtube.vue
    │       ├── Delete.vue
    │       ├── Earth.vue
    │       ├── History.vue
    │       ├── WindArrowDown.vue
    │       ├── Dribbble.vue
    │       ├── AudioLines.vue
    │       ├── Discord.vue
    │       ├── Linkedin.vue
    │       ├── Instagram.vue
    │       ├── Stethoscope.vue
    │       ├── Connect.vue
    │       └── AlarmClock.vue
    │   └── ThemePicker.vue
├── public
    └── favicon.ico
├── tsconfig.json
├── eslint.config.mjs
├── .gitignore
├── nuxt.config.ts
├── README.md
├── package.json
└── .cursor
    └── rules
        └── create-new-vue-motion-icon.mdc


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <UApp>
3 |     <NuxtPage />
4 |   </UApp>
5 | </template>


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fayazara/animated-lucide-vue/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/app/assets/css/main.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss" theme(static);
2 | @import "@nuxt/ui";
3 | 
4 | @theme {
5 |   --font-sans: 'Public Sans', sans-serif;
6 | }


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import withNuxt from './.nuxt/eslint.config.mjs'
3 | 
4 | export default withNuxt(
5 |   // Your custom configs here
6 | )
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/app/app.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineAppConfig({
 2 |   // https://ui3.nuxt.dev/getting-started/theme#design-system
 3 |   ui: {
 4 |     colors: {
 5 |       primary: 'emerald',
 6 |       neutral: 'neutral',
 7 |     },
 8 |     button: {
 9 |       defaultVariants: {
10 |         // Set default button color to neutral
11 |         // color: 'neutral'
12 |       }
13 |     }
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 | 
 5 |   modules: [
 6 |     '@nuxt/ui',
 7 |     '@nuxt/eslint',
 8 |     '@nuxt/content',
 9 |     '@nuxt/scripts',
10 |     'motion-v/nuxt'
11 |   ],
12 | 
13 |   css: ['~/assets/css/main.css'],
14 | 
15 |   future: {
16 |     compatibilityVersion: 4
17 |   },
18 | 
19 |   compatibilityDate: '2024-11-27'
20 | })
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | Build and Ship Nuxt 3 fullstack starter apps with Auth, DB, Payments, Email & File storage, Teams - All written in Typescript
 3 | 
 4 | Try [Supersaas today](https://supersaas.dev)
 5 | ---
 6 | 
 7 | 
 8 | [<img src="https://essentials.supersaas.dev/supersaas-banner.png">](https://supersaas.dev?ref=github-onelink)
 9 | 
10 | 
11 | # Lucide Animated Icons for Vue 
12 | 
13 | Ported from - https://icons.pqoqubbw.dev
14 | 
15 | Work in progress
16 | 
17 | ## Usage
18 | Install Motion Vue
19 | 
20 | ```sh
21 | #pnpm
22 | pnpm i motion-v
23 | 
24 | # npm
25 | npm i motion-v
26 | ```
27 | 
28 | Copy the code from the icon component file from `/app/components/Lucide`
29 | 
30 | ## Contributions
31 | 1. Animate these icons
32 | 2. Build the site - Needs copy code button, maybe a show code as well
33 | 


--------------------------------------------------------------------------------
/app/components/ThemeToggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ClientOnly v-if="!colorMode?.forced">
 3 |     <UButton
 4 |       :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
 5 |       :aria-label="`Switch to ${isDark ? 'light' : 'dark'} mode`"
 6 |       color="neutral"
 7 |       variant="ghost"
 8 |       @click="isDark = !isDark"
 9 |     />
10 | 
11 |     <template #fallback>
12 |       <div class="h-8 w-8" />
13 |     </template>
14 |   </ClientOnly>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | defineOptions({
19 |   inheritAttrs: false,
20 | })
21 | 
22 | const colorMode = useColorMode()
23 | 
24 | const isDark = computed({
25 |   get() {
26 |     return colorMode.value === 'dark'
27 |   },
28 |   set() {
29 |     colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
30 |   },
31 | })
32 | </script>
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare",
11 |     "lint": "eslint .",
12 |     "lint:fix": "eslint --fix ."
13 |   },
14 |   "dependencies": {
15 |     "@iconify-json/lucide": "^1.2.32",
16 |     "@iconify-json/simple-icons": "^1.2.29",
17 |     "@nuxt/content": "3.4.0",
18 |     "@nuxt/scripts": "0.11.2",
19 |     "@nuxt/ui": "^3.0.0",
20 |     "@unhead/vue": "^2.0.0-rc.8",
21 |     "motion-v": "^0.13.1",
22 |     "nuxt": "^3.16.1"
23 |   },
24 |   "devDependencies": {
25 |     "@nuxt/eslint": "^1.2.0",
26 |     "eslint": "^9.22.0",
27 |     "typescript": "^5.8.2"
28 |   },
29 |   "packageManager": "pnpm@9.15.3+sha512.1f79bc245a66eb0b07c5d4d83131240774642caaa86ef7d0434ab47c0d16f66b04e21e0c086eb61e62c77efc4d7f7ec071afad3796af64892fae66509173893a"
30 | }
31 | 


--------------------------------------------------------------------------------
/app/components/AnimatedIconButton.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | interface Props {
 3 |   class?: string;
 4 | }
 5 | 
 6 | const props = defineProps<Props>();
 7 | 
 8 | const iconRef = ref();
 9 | 
10 | const startAnimation = () => {
11 |   iconRef.value?.startAnimation();
12 | };
13 | 
14 | const stopAnimation = () => {
15 |   iconRef.value?.stopAnimation();
16 | };
17 | 
18 | const handleButtonEnter = () => {
19 |   startAnimation();
20 | };
21 | 
22 | const handleButtonLeave = () => {
23 |   stopAnimation();
24 | };
25 | 
26 | // Expose the ref so parent can access it if needed
27 | defineExpose({
28 |   iconRef,
29 | });
30 | </script>
31 | 
32 | <template>
33 |   <button
34 |     :class="[
35 |       'h-full w-full aspect-square bg-neutral-50 hover:bg-neutral-100 dark:bg-white/10 dark:hover:bg-white/20 rounded-xl cursor-pointer',
36 |       props.class,
37 |     ]"
38 |     @mouseenter="handleButtonEnter"
39 |     @mouseleave="handleButtonLeave"
40 |   >
41 |     <slot :ref="(el) => (iconRef = el)" :controlled="true" />
42 |   </button>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/app/components/Lucide/RotateCCW.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { rotate: '0deg' },
21 |   animate: { rotate: '-50deg' },
22 |   transition: { type: 'spring', stiffness: 250, damping: 25 }
23 | };
24 | 
25 | const isControlled = ref(false);
26 | const currentState = ref('normal');
27 | 
28 | const startAnimation = () => {
29 |   currentState.value = 'animate';
30 | };
31 | 
32 | const stopAnimation = () => {
33 |   currentState.value = 'normal';
34 | };
35 | 
36 | const handleMouseEnter = () => {
37 |   if (!isControlled.value) {
38 |     startAnimation();
39 |   } else {
40 |     emit('startAnimation');
41 |   }
42 | };
43 | 
44 | const handleMouseLeave = () => {
45 |   if (!isControlled.value) {
46 |     stopAnimation();
47 |   } else {
48 |     emit('stopAnimation');
49 |   }
50 | };
51 | 
52 | defineExpose({
53 |   startAnimation,
54 |   stopAnimation,
55 | });
56 | </script>
57 | 
58 | <template>
59 |   <div
60 |     :class="[
61 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
62 |       props.class,
63 |     ]"
64 |     @mouseenter="handleMouseEnter"
65 |     @mouseleave="handleMouseLeave"
66 |   >
67 |     <motion.svg
68 |       xmlns="http://www.w3.org/2000/svg"
69 |       :width="size"
70 |       :height="size"
71 |       viewBox="0 0 24 24"
72 |       fill="none"
73 |       stroke="currentColor"
74 |       stroke-width="2"
75 |       stroke-linecap="round"
76 |       stroke-linejoin="round"
77 |       :animate="currentState"
78 |       :variants="svgVariants"
79 |     >
80 |       <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
81 |       <path d="M3 3v5h5" />
82 |     </motion.svg>
83 |   </div>
84 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/RotateCW.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { rotate: '0deg' },
21 |   animate: { rotate: '50deg' },
22 |   transition: { type: 'spring', stiffness: 250, damping: 25 }
23 | };
24 | 
25 | const isControlled = ref(false);
26 | const currentState = ref('normal');
27 | 
28 | const startAnimation = () => {
29 |   currentState.value = 'animate';
30 | };
31 | 
32 | const stopAnimation = () => {
33 |   currentState.value = 'normal';
34 | };
35 | 
36 | const handleMouseEnter = () => {
37 |   if (!isControlled.value) {
38 |     startAnimation();
39 |   } else {
40 |     emit('startAnimation');
41 |   }
42 | };
43 | 
44 | const handleMouseLeave = () => {
45 |   if (!isControlled.value) {
46 |     stopAnimation();
47 |   } else {
48 |     emit('stopAnimation');
49 |   }
50 | };
51 | 
52 | defineExpose({
53 |   startAnimation,
54 |   stopAnimation,
55 | });
56 | </script>
57 | 
58 | <template>
59 |   <div
60 |     :class="[
61 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
62 |       props.class,
63 |     ]"
64 |     @mouseenter="handleMouseEnter"
65 |     @mouseleave="handleMouseLeave"
66 |   >
67 |     <motion.svg
68 |       xmlns="http://www.w3.org/2000/svg"
69 |       :width="size"
70 |       :height="size"
71 |       viewBox="0 0 24 24"
72 |       fill="none"
73 |       stroke="currentColor"
74 |       stroke-width="2"
75 |       stroke-linecap="round"
76 |       stroke-linejoin="round"
77 |       :animate="currentState"
78 |       :variants="svgVariants"
79 |     >
80 |       <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
81 |       <path d="M21 3v5h-5" />
82 |     </motion.svg>
83 |   </div>
84 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Moon.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: {
21 |     rotate: 0,
22 |   },
23 |   animate: {
24 |     rotate: [0, -10, 10, -5, 5, 0],
25 |   },
26 | };
27 | 
28 | const svgTransition = {
29 |   duration: 1.2,
30 |   ease: 'easeInOut',
31 | };
32 | 
33 | const isControlled = ref(false);
34 | const currentState = ref('normal');
35 | 
36 | const startAnimation = () => {
37 |   currentState.value = 'animate';
38 | };
39 | 
40 | const stopAnimation = () => {
41 |   currentState.value = 'normal';
42 | };
43 | 
44 | const handleMouseEnter = () => {
45 |   if (!isControlled.value) {
46 |     startAnimation();
47 |   } else {
48 |     emit('startAnimation');
49 |   }
50 | };
51 | 
52 | const handleMouseLeave = () => {
53 |   if (!isControlled.value) {
54 |     stopAnimation();
55 |   } else {
56 |     emit('stopAnimation');
57 |   }
58 | };
59 | 
60 | defineExpose({
61 |   startAnimation,
62 |   stopAnimation,
63 | });
64 | </script>
65 | 
66 | <template>
67 |   <div
68 |     :class="[
69 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
70 |       props.class,
71 |     ]"
72 |     @mouseenter="handleMouseEnter"
73 |     @mouseleave="handleMouseLeave"
74 |   >
75 |     <motion.svg
76 |       :width="size"
77 |       :height="size"
78 |       viewBox="0 0 24 24"
79 |       fill="none"
80 |       stroke="currentColor"
81 |       stroke-width="2"
82 |       stroke-linecap="round"
83 |       stroke-linejoin="round"
84 |       :variants="svgVariants"
85 |       :animate="currentState"
86 |       :transition="svgTransition"
87 |     >
88 |       <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
89 |     </motion.svg>
90 |   </div>
91 | </template>
92 | 


--------------------------------------------------------------------------------
/app/components/Lucide/MoonAlt.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: {
21 |     rotate: 0,
22 |   },
23 |   animate: {
24 |     rotate: [0, -10, 10, -5, 5, 0],
25 |     transition: {
26 |       duration: 1.2,
27 |       ease: 'easeInOut',
28 |     },
29 |   },
30 | };
31 | 
32 | const isControlled = ref(false);
33 | const currentState = ref('normal');
34 | 
35 | const startAnimation = () => {
36 |   currentState.value = 'animate';
37 | };
38 | 
39 | const stopAnimation = () => {
40 |   currentState.value = 'normal';
41 | };
42 | 
43 | const handleMouseEnter = () => {
44 |   if (!isControlled.value) {
45 |     startAnimation();
46 |   } else {
47 |     emit('startAnimation');
48 |   }
49 | };
50 | 
51 | const handleMouseLeave = () => {
52 |   if (!isControlled.value) {
53 |     stopAnimation();
54 |   } else {
55 |     emit('stopAnimation');
56 |   }
57 | };
58 | 
59 | defineExpose({
60 |   startAnimation,
61 |   stopAnimation,
62 | });
63 | </script>
64 | 
65 | <template>
66 |   <div
67 |     :class="[
68 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
69 |       props.class,
70 |     ]"
71 |     @mouseenter="handleMouseEnter"
72 |     @mouseleave="handleMouseLeave"
73 |   >
74 |     <motion.svg
75 |       xmlns="http://www.w3.org/2000/svg"
76 |       :width="size"
77 |       :height="size"
78 |       viewBox="0 0 24 24"
79 |       fill="none"
80 |       stroke="currentColor"
81 |       stroke-width="2"
82 |       stroke-linecap="round"
83 |       stroke-linejoin="round"
84 |       :variants="svgVariants"
85 |       :animate="currentState"
86 |     >
87 |       <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
88 |     </motion.svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Bell.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v'
 3 | 
 4 | interface Props {
 5 |   size?: number
 6 |   class?: string
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: ''
12 | })
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: []
16 |   stopAnimation: []
17 | }>()
18 | 
19 | const svgVariants = {
20 |   normal: { rotate: 0 },
21 |   animate: { rotate: [0, -10, 10, -10, 0] }
22 | }
23 | 
24 | const isControlled = ref(false)
25 | const currentState = ref('normal')
26 | 
27 | const startAnimation = () => {
28 |   currentState.value = 'animate'
29 | }
30 | 
31 | const stopAnimation = () => {
32 |   currentState.value = 'normal'
33 | }
34 | 
35 | const handleMouseEnter = () => {
36 |   if (!isControlled.value) {
37 |     startAnimation()
38 |   } else {
39 |     emit('startAnimation')
40 |   }
41 | }
42 | 
43 | const handleMouseLeave = () => {
44 |   if (!isControlled.value) {
45 |     stopAnimation()
46 |   } else {
47 |     emit('stopAnimation')
48 |   }
49 | }
50 | 
51 | defineExpose({
52 |   startAnimation,
53 |   stopAnimation
54 | })
55 | </script>
56 | 
57 | <template>
58 |   <div
59 |     :class="[
60 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
61 |       props.class
62 |     ]"
63 |     @mouseenter="handleMouseEnter"
64 |     @mouseleave="handleMouseLeave"
65 |   >
66 |     <motion.svg
67 |       xmlns="http://www.w3.org/2000/svg"
68 |       :width="size"
69 |       :height="size"
70 |       viewBox="0 0 24 24"
71 |       fill="none"
72 |       stroke="currentColor"
73 |       stroke-width="2"
74 |       stroke-linecap="round"
75 |       stroke-linejoin="round"
76 |       :variants="svgVariants"
77 |       :animate="currentState"
78 |       :transition="{
79 |         duration: 0.5,
80 |         ease: 'easeInOut'
81 |       }"
82 |     >
83 |       <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
84 |       <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
85 |     </motion.svg>
86 |   </div>
87 | </template>
88 | 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigDown.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { d: 'M15 6v6h4l-7 7-7-7h4V6h6z', translateY: 0 },
21 |   animate: {
22 |     d: 'M15 6v6h4l-7 7-7-7h4V6h6z',
23 |     translateY: [0, +3, 0],
24 |     transition: {
25 |       duration: 0.4,
26 |     },
27 |   },
28 | };
29 | 
30 | const isControlled = ref(false);
31 | const currentState = ref('normal');
32 | 
33 | const startAnimation = () => {
34 |   currentState.value = 'animate';
35 | };
36 | 
37 | const stopAnimation = () => {
38 |   currentState.value = 'normal';
39 | };
40 | 
41 | const handleMouseEnter = () => {
42 |   if (!isControlled.value) {
43 |     startAnimation();
44 |   } else {
45 |     emit('startAnimation');
46 |   }
47 | };
48 | 
49 | const handleMouseLeave = () => {
50 |   if (!isControlled.value) {
51 |     stopAnimation();
52 |   } else {
53 |     emit('stopAnimation');
54 |   }
55 | };
56 | 
57 | defineExpose({
58 |   startAnimation,
59 |   stopAnimation,
60 | });
61 | </script>
62 | 
63 | <template>
64 |   <div
65 |     :class="[
66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
67 |       props.class,
68 |     ]"
69 |     @mouseenter="handleMouseEnter"
70 |     @mouseleave="handleMouseLeave"
71 |   >
72 |     <svg
73 |       xmlns="http://www.w3.org/2000/svg"
74 |       :width="size"
75 |       :height="size"
76 |       viewBox="0 0 24 24"
77 |       fill="none"
78 |       stroke="currentColor"
79 |       stroke-width="2"
80 |       stroke-linecap="round"
81 |       stroke-linejoin="round"
82 |     >
83 |       <motion.path
84 |         d="M15 6v6h4l-7 7-7-7h4V6h6z"
85 |         :variants="pathVariants"
86 |         :animate="currentState"
87 |       />
88 |     </svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigRight.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { d: 'M6 9h6V5l7 7-7 7v-4H6V9z', translateX: 0 },
21 |   animate: {
22 |     d: 'M6 9h6V5l7 7-7 7v-4H6V9z',
23 |     translateX: [0, 3, 0],
24 |     transition: {
25 |       duration: 0.4,
26 |     },
27 |   },
28 | };
29 | 
30 | const isControlled = ref(false);
31 | const currentState = ref('normal');
32 | 
33 | const startAnimation = () => {
34 |   currentState.value = 'animate';
35 | };
36 | 
37 | const stopAnimation = () => {
38 |   currentState.value = 'normal';
39 | };
40 | 
41 | const handleMouseEnter = () => {
42 |   if (!isControlled.value) {
43 |     startAnimation();
44 |   } else {
45 |     emit('startAnimation');
46 |   }
47 | };
48 | 
49 | const handleMouseLeave = () => {
50 |   if (!isControlled.value) {
51 |     stopAnimation();
52 |   } else {
53 |     emit('stopAnimation');
54 |   }
55 | };
56 | 
57 | defineExpose({
58 |   startAnimation,
59 |   stopAnimation,
60 | });
61 | </script>
62 | 
63 | <template>
64 |   <div
65 |     :class="[
66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
67 |       props.class,
68 |     ]"
69 |     @mouseenter="handleMouseEnter"
70 |     @mouseleave="handleMouseLeave"
71 |   >
72 |     <svg
73 |       xmlns="http://www.w3.org/2000/svg"
74 |       :width="size"
75 |       :height="size"
76 |       viewBox="0 0 24 24"
77 |       fill="none"
78 |       stroke="currentColor"
79 |       stroke-width="2"
80 |       stroke-linecap="round"
81 |       stroke-linejoin="round"
82 |     >
83 |       <motion.path
84 |         d="M6 9h6V5l7 7-7 7v-4H6V9z"
85 |         :variants="pathVariants"
86 |         :animate="currentState"
87 |       />
88 |     </svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigUp.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { d: 'M9 18v-6H5l7-7 7 7h-4v6H9z', translateY: 0 },
21 |   animate: {
22 |     d: 'M9 18v-6H5l7-7 7 7h-4v6H9z',
23 |     translateY: [0, -3, 0],
24 |     transition: {
25 |       duration: 0.4,
26 |     },
27 |   },
28 | };
29 | 
30 | const isControlled = ref(false);
31 | const currentState = ref('normal');
32 | 
33 | const startAnimation = () => {
34 |   currentState.value = 'animate';
35 | };
36 | 
37 | const stopAnimation = () => {
38 |   currentState.value = 'normal';
39 | };
40 | 
41 | const handleMouseEnter = () => {
42 |   if (!isControlled.value) {
43 |     startAnimation();
44 |   } else {
45 |     emit('startAnimation');
46 |   }
47 | };
48 | 
49 | const handleMouseLeave = () => {
50 |   if (!isControlled.value) {
51 |     stopAnimation();
52 |   } else {
53 |     emit('stopAnimation');
54 |   }
55 | };
56 | 
57 | defineExpose({
58 |   startAnimation,
59 |   stopAnimation,
60 | });
61 | </script>
62 | 
63 | <template>
64 |   <div
65 |     :class="[
66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
67 |       props.class,
68 |     ]"
69 |     @mouseenter="handleMouseEnter"
70 |     @mouseleave="handleMouseLeave"
71 |   >
72 |     <svg
73 |       xmlns="http://www.w3.org/2000/svg"
74 |       :width="size"
75 |       :height="size"
76 |       viewBox="0 0 24 24"
77 |       fill="none"
78 |       stroke="currentColor"
79 |       stroke-width="2"
80 |       stroke-linecap="round"
81 |       stroke-linejoin="round"
82 |     >
83 |       <motion.path
84 |         d="M9 18v-6H5l7-7 7 7h-4v6H9z"
85 |         :variants="pathVariants"
86 |         :animate="currentState"
87 |       />
88 |     </svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigLeft.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { d: 'M18 15h-6v4l-7-7 7-7v4h6v6z', translateX: 0 },
21 |   animate: {
22 |     d: 'M18 15h-6v4l-7-7 7-7v4h6v6z',
23 |     translateX: [0, -3, 0],
24 |     transition: {
25 |       duration: 0.4,
26 |     },
27 |   },
28 | };
29 | 
30 | const isControlled = ref(false);
31 | const currentState = ref('normal');
32 | 
33 | const startAnimation = () => {
34 |   currentState.value = 'animate';
35 | };
36 | 
37 | const stopAnimation = () => {
38 |   currentState.value = 'normal';
39 | };
40 | 
41 | const handleMouseEnter = () => {
42 |   if (!isControlled.value) {
43 |     startAnimation();
44 |   } else {
45 |     emit('startAnimation');
46 |   }
47 | };
48 | 
49 | const handleMouseLeave = () => {
50 |   if (!isControlled.value) {
51 |     stopAnimation();
52 |   } else {
53 |     emit('stopAnimation');
54 |   }
55 | };
56 | 
57 | defineExpose({
58 |   startAnimation,
59 |   stopAnimation,
60 | });
61 | </script>
62 | 
63 | <template>
64 |   <div
65 |     :class="[
66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
67 |       props.class,
68 |     ]"
69 |     @mouseenter="handleMouseEnter"
70 |     @mouseleave="handleMouseLeave"
71 |   >
72 |     <svg
73 |       xmlns="http://www.w3.org/2000/svg"
74 |       :width="size"
75 |       :height="size"
76 |       viewBox="0 0 24 24"
77 |       fill="none"
78 |       stroke="currentColor"
79 |       stroke-width="2"
80 |       stroke-linecap="round"
81 |       stroke-linejoin="round"
82 |     >
83 |       <motion.path
84 |         d="M18 15h-6v4l-7-7 7-7v4h6v6z"
85 |         :variants="pathVariants"
86 |         :animate="currentState"
87 |       />
88 |     </svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/RefreshCW.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { rotate: '0deg' },
21 |   animate: { rotate: '50deg' },
22 |   transition: { type: 'spring', stiffness: 250, damping: 25 }
23 | };
24 | 
25 | const isControlled = ref(false);
26 | const currentState = ref('normal');
27 | 
28 | const startAnimation = () => {
29 |   currentState.value = 'animate';
30 | };
31 | 
32 | const stopAnimation = () => {
33 |   currentState.value = 'normal';
34 | };
35 | 
36 | const handleMouseEnter = () => {
37 |   if (!isControlled.value) {
38 |     startAnimation();
39 |   } else {
40 |     emit('startAnimation');
41 |   }
42 | };
43 | 
44 | const handleMouseLeave = () => {
45 |   if (!isControlled.value) {
46 |     stopAnimation();
47 |   } else {
48 |     emit('stopAnimation');
49 |   }
50 | };
51 | 
52 | defineExpose({
53 |   startAnimation,
54 |   stopAnimation,
55 | });
56 | </script>
57 | 
58 | <template>
59 |   <div
60 |     :class="[
61 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
62 |       props.class,
63 |     ]"
64 |     @mouseenter="handleMouseEnter"
65 |     @mouseleave="handleMouseLeave"
66 |   >
67 |     <motion.svg
68 |       xmlns="http://www.w3.org/2000/svg"
69 |       :width="size"
70 |       :height="size"
71 |       viewBox="0 0 24 24"
72 |       fill="none"
73 |       stroke="currentColor"
74 |       stroke-width="2"
75 |       stroke-linecap="round"
76 |       stroke-linejoin="round"
77 |       :animate="currentState"
78 |       :variants="svgVariants"
79 |     >
80 |       <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
81 |       <path d="M21 3v5h-5" />
82 |       <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
83 |       <path d="M8 16H3v5" />
84 |     </motion.svg>
85 |   </div>
86 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CircleHelp.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const variants = {
20 |   normal: { rotate: 0 },
21 |   animate: { rotate: [0, -10, 10, -10, 0] },
22 | };
23 | 
24 | const isControlled = ref(false);
25 | const currentState = ref('normal');
26 | 
27 | const startAnimation = () => {
28 |   currentState.value = 'animate';
29 | };
30 | 
31 | const stopAnimation = () => {
32 |   currentState.value = 'normal';
33 | };
34 | 
35 | const handleMouseEnter = () => {
36 |   if (!isControlled.value) {
37 |     startAnimation();
38 |   } else {
39 |     emit('startAnimation');
40 |   }
41 | };
42 | 
43 | const handleMouseLeave = () => {
44 |   if (!isControlled.value) {
45 |     stopAnimation();
46 |   } else {
47 |     emit('stopAnimation');
48 |   }
49 | };
50 | 
51 | defineExpose({
52 |   startAnimation,
53 |   stopAnimation,
54 | });
55 | </script>
56 | 
57 | <template>
58 |   <div
59 |     :class="[
60 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
61 |       props.class,
62 |     ]"
63 |     @mouseenter="handleMouseEnter"
64 |     @mouseleave="handleMouseLeave"
65 |   >
66 |     <svg
67 |       xmlns="http://www.w3.org/2000/svg"
68 |       :width="size"
69 |       :height="size"
70 |       viewBox="0 0 24 24"
71 |       fill="none"
72 |       stroke="currentColor"
73 |       stroke-width="2"
74 |       stroke-linecap="round"
75 |       stroke-linejoin="round"
76 |     >
77 |       <circle cx="12" cy="12" r="10" />
78 |       <motion.g
79 |         :variants="variants"
80 |         :animate="currentState"
81 |         :transition="{
82 |           duration: 0.5,
83 |           ease: 'easeInOut',
84 |         }"
85 |       >
86 |         <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
87 |         <path d="M12 17h.01" />
88 |       </motion.g>
89 |     </svg>
90 |   </div>
91 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ChartSpline.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const variants = {
20 |   normal: {
21 |     pathLength: 1,
22 |     opacity: 1,
23 |   },
24 |   animate: {
25 |     pathLength: [0, 1],
26 |     opacity: [0, 1],
27 |     transition: {
28 |       delay: 0.15,
29 |       duration: 0.3,
30 |       opacity: { delay: 0.1 },
31 |     },
32 |   },
33 | };
34 | 
35 | const isControlled = ref(false);
36 | const currentState = ref('normal');
37 | 
38 | const startAnimation = () => {
39 |   currentState.value = 'animate';
40 | };
41 | 
42 | const stopAnimation = () => {
43 |   currentState.value = 'normal';
44 | };
45 | 
46 | const handleMouseEnter = () => {
47 |   if (!isControlled.value) {
48 |     startAnimation();
49 |   } else {
50 |     emit('startAnimation');
51 |   }
52 | };
53 | 
54 | const handleMouseLeave = () => {
55 |   if (!isControlled.value) {
56 |     stopAnimation();
57 |   } else {
58 |     emit('stopAnimation');
59 |   }
60 | };
61 | 
62 | defineExpose({
63 |   startAnimation,
64 |   stopAnimation,
65 | });
66 | </script>
67 | 
68 | <template>
69 |   <div
70 |     :class="[
71 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
72 |       props.class,
73 |     ]"
74 |     @mouseenter="handleMouseEnter"
75 |     @mouseleave="handleMouseLeave"
76 |   >
77 |     <svg
78 |       xmlns="http://www.w3.org/2000/svg"
79 |       :width="size"
80 |       :height="size"
81 |       viewBox="0 0 24 24"
82 |       fill="none"
83 |       stroke="currentColor"
84 |       stroke-width="2"
85 |       stroke-linecap="round"
86 |       stroke-linejoin="round"
87 |     >
88 |       <path d="M3 3v16a2 2 0 0 0 2 2h16" />
89 |       <motion.path
90 |         d="M7 16c.5-2 1.5-7 4-7 2 0 2 3 4 3 2.5 0 4.5-5 5-7"
91 |         :variants="variants"
92 |         :animate="currentState"
93 |       />
94 |     </svg>
95 |   </div>
96 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/RefreshCCWDot.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const groupVariants = {
20 |   normal: { rotate: '0deg' },
21 |   animate: { rotate: '-50deg' },
22 |   transition: { type: 'spring', stiffness: 250, damping: 25 }
23 | };
24 | 
25 | const isControlled = ref(false);
26 | const currentState = ref('normal');
27 | 
28 | const startAnimation = () => {
29 |   currentState.value = 'animate';
30 | };
31 | 
32 | const stopAnimation = () => {
33 |   currentState.value = 'normal';
34 | };
35 | 
36 | const handleMouseEnter = () => {
37 |   if (!isControlled.value) {
38 |     startAnimation();
39 |   } else {
40 |     emit('startAnimation');
41 |   }
42 | };
43 | 
44 | const handleMouseLeave = () => {
45 |   if (!isControlled.value) {
46 |     stopAnimation();
47 |   } else {
48 |     emit('stopAnimation');
49 |   }
50 | };
51 | 
52 | defineExpose({
53 |   startAnimation,
54 |   stopAnimation,
55 | });
56 | </script>
57 | 
58 | <template>
59 |   <div
60 |     :class="[
61 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
62 |       props.class,
63 |     ]"
64 |     @mouseenter="handleMouseEnter"
65 |     @mouseleave="handleMouseLeave"
66 |   >
67 |     <svg
68 |       xmlns="http://www.w3.org/2000/svg"
69 |       :width="size"
70 |       :height="size"
71 |       viewBox="0 0 24 24"
72 |       fill="none"
73 |       stroke="currentColor"
74 |       stroke-width="2"
75 |       stroke-linecap="round"
76 |       stroke-linejoin="round"
77 |     >
78 |       <motion.g
79 |         :animate="currentState"
80 |         :variants="groupVariants"
81 |       >
82 |         <path d="M3 2v6h6" />
83 |         <path d="M21 12A9 9 0 0 0 6 5.3L3 8" />
84 |         <path d="M21 22v-6h-6" />
85 |         <path d="M3 12a9 9 0 0 0 15 6.7l3-2.7" />
86 |       </motion.g>
87 |       <circle cx="12" cy="12" r="1" />
88 |     </svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/SmartphoneCharging.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { 
21 |     opacity: 1 
22 |   },
23 |   animate: {
24 |     opacity: [1, 0.4, 1],
25 |     transition: {
26 |       duration: 1,
27 |       repeat: Infinity,
28 |       ease: 'easeInOut',
29 |     },
30 |   },
31 | };
32 | 
33 | const isControlled = ref(false);
34 | const currentState = ref('normal');
35 | 
36 | const startAnimation = () => {
37 |   currentState.value = 'animate';
38 | };
39 | 
40 | const stopAnimation = () => {
41 |   currentState.value = 'normal';
42 | };
43 | 
44 | const handleMouseEnter = () => {
45 |   if (!isControlled.value) {
46 |     startAnimation();
47 |   } else {
48 |     emit('startAnimation');
49 |   }
50 | };
51 | 
52 | const handleMouseLeave = () => {
53 |   if (!isControlled.value) {
54 |     stopAnimation();
55 |   } else {
56 |     emit('stopAnimation');
57 |   }
58 | };
59 | 
60 | defineExpose({
61 |   startAnimation,
62 |   stopAnimation,
63 | });
64 | </script>
65 | 
66 | <template>
67 |   <div
68 |     :class="[
69 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
70 |       props.class,
71 |     ]"
72 |     @mouseenter="handleMouseEnter"
73 |     @mouseleave="handleMouseLeave"
74 |   >
75 |     <svg
76 |       xmlns="http://www.w3.org/2000/svg"
77 |       :width="size"
78 |       :height="size"
79 |       viewBox="0 0 24 24"
80 |       fill="none"
81 |       stroke="currentColor"
82 |       stroke-width="2"
83 |       stroke-linecap="round"
84 |       stroke-linejoin="round"
85 |       style="overflow: visible"
86 |     >
87 |       <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
88 |       <motion.path
89 |         d="M12.667 8 10 12h4l-2.667 4"
90 |         :variants="pathVariants"
91 |         :initial="'normal'"
92 |         :animate="currentState"
93 |       />
94 |     </svg>
95 |   </div>
96 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/KeyCircle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { y: 0, rotate: 0 },
21 |   animate: {
22 |     y: [0, -3, 0, -2, 0],
23 |     rotate: [0, 3, -3, 0],
24 |     transition: {
25 |       duration: 0.9,
26 |       bounce: 0.5,
27 |     }
28 |   },
29 | };
30 | 
31 | const isControlled = ref(false);
32 | const currentState = ref('normal');
33 | 
34 | const startAnimation = () => {
35 |   currentState.value = 'animate';
36 | };
37 | 
38 | const stopAnimation = () => {
39 |   currentState.value = 'normal';
40 | };
41 | 
42 | const handleMouseEnter = () => {
43 |   if (!isControlled.value) {
44 |     startAnimation();
45 |   } else {
46 |     emit('startAnimation');
47 |   }
48 | };
49 | 
50 | const handleMouseLeave = () => {
51 |   if (!isControlled.value) {
52 |     stopAnimation();
53 |   } else {
54 |     emit('stopAnimation');
55 |   }
56 | };
57 | 
58 | defineExpose({
59 |   startAnimation,
60 |   stopAnimation,
61 | });
62 | </script>
63 | 
64 | <template>
65 |   <div
66 |     :class="[
67 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
68 |       props.class,
69 |     ]"
70 |     @mouseenter="handleMouseEnter"
71 |     @mouseleave="handleMouseLeave"
72 |   >
73 |     <motion.svg
74 |       xmlns="http://www.w3.org/2000/svg"
75 |       :width="size"
76 |       :height="size"
77 |       viewBox="0 0 24 24"
78 |       fill="none"
79 |       stroke="currentColor"
80 |       stroke-width="2"
81 |       stroke-linecap="round"
82 |       stroke-linejoin="round"
83 |       :animate="currentState"
84 |       :variants="svgVariants"
85 |     >
86 |       <path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" />
87 |       <circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />
88 |     </motion.svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Vibrate.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const rectVariants = {
20 |   normal: {
21 |     rotate: 0,
22 |   },
23 |   animate: {
24 |     rotate: [0, -5, 5, -5, 5, 0],
25 |     transition: {
26 |       duration: 0.4,
27 |       times: [0, 0.2, 0.4, 0.6, 0.8, 1],
28 |     },
29 |   },
30 | };
31 | 
32 | const isControlled = ref(false);
33 | const currentState = ref('normal');
34 | 
35 | const startAnimation = () => {
36 |   currentState.value = 'animate';
37 | };
38 | 
39 | const stopAnimation = () => {
40 |   currentState.value = 'normal';
41 | };
42 | 
43 | const handleMouseEnter = () => {
44 |   if (!isControlled.value) {
45 |     startAnimation();
46 |   } else {
47 |     emit('startAnimation');
48 |   }
49 | };
50 | 
51 | const handleMouseLeave = () => {
52 |   if (!isControlled.value) {
53 |     stopAnimation();
54 |   } else {
55 |     emit('stopAnimation');
56 |   }
57 | };
58 | 
59 | defineExpose({
60 |   startAnimation,
61 |   stopAnimation,
62 | });
63 | </script>
64 | 
65 | <template>
66 |   <div
67 |     :class="[
68 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
69 |       props.class,
70 |     ]"
71 |     @mouseenter="handleMouseEnter"
72 |     @mouseleave="handleMouseLeave"
73 |   >
74 |     <svg
75 |       xmlns="http://www.w3.org/2000/svg"
76 |       :width="size"
77 |       :height="size"
78 |       viewBox="0 0 24 24"
79 |       fill="none"
80 |       stroke="currentColor"
81 |       stroke-width="2"
82 |       stroke-linecap="round"
83 |       stroke-linejoin="round"
84 |     >
85 |       <path d="m2 8 2 2-2 2 2 2-2 2" />
86 |       <path d="m22 8-2 2 2 2-2 2 2 2" />
87 |       <motion.rect
88 |         width="8"
89 |         height="14"
90 |         x="8"
91 |         y="5"
92 |         rx="1"
93 |         :variants="rectVariants"
94 |         :animate="currentState"
95 |         style="transform-origin: center"
96 |       />
97 |     </svg>
98 |   </div>
99 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Logout.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const pathVariants = {
20 |   normal: { x: 0, translateX: 0 },
21 |   animate: {
22 |     x: 2,
23 |     translateX: [0, -3, 0],
24 |     transition: {
25 |       duration: 0.4,
26 |     },
27 |   },
28 | };
29 | 
30 | const isControlled = ref(false);
31 | const currentState = ref('normal');
32 | 
33 | const startAnimation = () => {
34 |   currentState.value = 'animate';
35 | };
36 | 
37 | const stopAnimation = () => {
38 |   currentState.value = 'normal';
39 | };
40 | 
41 | const handleMouseEnter = () => {
42 |   if (!isControlled.value) {
43 |     startAnimation();
44 |   } else {
45 |     emit('startAnimation');
46 |   }
47 | };
48 | 
49 | const handleMouseLeave = () => {
50 |   if (!isControlled.value) {
51 |     stopAnimation();
52 |   } else {
53 |     emit('stopAnimation');
54 |   }
55 | };
56 | 
57 | defineExpose({
58 |   startAnimation,
59 |   stopAnimation,
60 | });
61 | </script>
62 | 
63 | <template>
64 |   <div
65 |     :class="[
66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
67 |       props.class,
68 |     ]"
69 |     @mouseenter="handleMouseEnter"
70 |     @mouseleave="handleMouseLeave"
71 |   >
72 |     <svg
73 |       xmlns="http://www.w3.org/2000/svg"
74 |       :width="size"
75 |       :height="size"
76 |       viewBox="0 0 24 24"
77 |       fill="none"
78 |       stroke="currentColor"
79 |       stroke-width="2"
80 |       stroke-linecap="round"
81 |       stroke-linejoin="round"
82 |     >
83 |       <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
84 |       <motion.polyline
85 |         points="16 17 21 12 16 7"
86 |         :variants="pathVariants"
87 |         :animate="currentState"
88 |       />
89 |       <motion.line
90 |         x1="21"
91 |         x2="9"
92 |         y1="12"
93 |         y2="12"
94 |         :variants="pathVariants"
95 |         :animate="currentState"
96 |       />
97 |     </svg>
98 |   </div>
99 | </template> 


--------------------------------------------------------------------------------
/app/components/ThemePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <UPopover
  3 |     mode="hover"
  4 |     :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4' }"
  5 |   >
  6 |     <template #default="{ open }">
  7 |       <UButton
  8 |         icon="i-lucide-swatch-book"
  9 |         :variant="open ? 'soft' : 'ghost'"
 10 |         square
 11 |         aria-label="Color picker"
 12 |       />
 13 |     </template>
 14 |     <template #content>
 15 |       <div class="grid grid-cols-2 gap-1 -mx-2">
 16 |         <UButton
 17 |           v-for="color in colors"
 18 |           :key="color.label"
 19 |           :class="color.color"
 20 |           color="neutral"
 21 |           variant="outline"
 22 |           size="sm"
 23 |           icon="i-ph-circle-duotone"
 24 |           :label="color.label"
 25 |           @click="model = color.color"
 26 |         />
 27 |       </div>
 28 |     </template>
 29 |   </UPopover>
 30 | </template>
 31 | 
 32 | <script setup lang="ts">
 33 | const model = defineModel();
 34 | 
 35 | const colors = [
 36 |   {
 37 |     label: 'Gray',
 38 |     color: 'text-neutral-900',
 39 |   },
 40 |   {
 41 |     label: 'Red',
 42 |     color: 'text-red-500',
 43 |   },
 44 |   {
 45 |     label: 'Orange',
 46 |     color: 'text-orange-500',
 47 |   },
 48 |   {
 49 |     label: 'Yellow',
 50 |     color: 'text-yellow-500',
 51 |   },
 52 |   {
 53 |     label: 'Lime',
 54 |     color: 'text-lime-500',
 55 |   },
 56 |   {
 57 |     label: 'Green',
 58 |     color: 'text-green-500',
 59 |   },
 60 |   {
 61 |     label: 'Emerald',
 62 |     color: 'text-emerald-500',
 63 |   },
 64 |   {
 65 |     label: 'Teal',
 66 |     color: 'text-teal-500',
 67 |   },
 68 |   {
 69 |     label: 'Cyan',
 70 |     color: 'text-cyan-500',
 71 |   },
 72 |   {
 73 |     label: 'Sky',
 74 |     color: 'text-sky-500',
 75 |   },
 76 |   {
 77 |     label: 'Blue',
 78 |     color: 'text-blue-500',
 79 |   },
 80 |   {
 81 |     label: 'Indigo',
 82 |     color: 'text-indigo-500',
 83 |   },
 84 |   {
 85 |     label: 'Purple',
 86 |     color: 'text-purple-500',
 87 |   },
 88 |   {
 89 |     label: 'Fuchsia',
 90 |     color: 'text-fuchsia-500',
 91 |   },
 92 |   {
 93 |     label: 'Pink',
 94 |     color: 'text-pink-500',
 95 |   },
 96 |   {
 97 |     label: 'Rose',
 98 |     color: 'text-rose-500',
 99 |   },
100 | ];
101 | </script>
102 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Cart.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const cartVariants = {
20 |   normal: { scale: 1 },
21 |   animate: {
22 |     scale: 1.1,
23 |     y: [0, -5, 0],
24 |     transition: {
25 |       duration: 0.3,
26 |       ease: 'easeInOut',
27 |       y: { repeat: 1, delay: 0.1, duration: 0.4 },
28 |     },
29 |   },
30 | };
31 | 
32 | const isControlled = ref(false);
33 | const currentState = ref('normal');
34 | 
35 | const startAnimation = () => {
36 |   currentState.value = 'animate';
37 | };
38 | 
39 | const stopAnimation = () => {
40 |   currentState.value = 'normal';
41 | };
42 | 
43 | const handleMouseEnter = () => {
44 |   if (!isControlled.value) {
45 |     startAnimation();
46 |   } else {
47 |     emit('startAnimation');
48 |   }
49 | };
50 | 
51 | const handleMouseLeave = () => {
52 |   if (!isControlled.value) {
53 |     stopAnimation();
54 |   } else {
55 |     emit('stopAnimation');
56 |   }
57 | };
58 | 
59 | defineExpose({
60 |   startAnimation,
61 |   stopAnimation,
62 | });
63 | </script>
64 | 
65 | <template>
66 |   <div
67 |     :class="[
68 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
69 |       props.class,
70 |     ]"
71 |     @mouseenter="handleMouseEnter"
72 |     @mouseleave="handleMouseLeave"
73 |   >
74 |     <motion.svg
75 |       xmlns="http://www.w3.org/2000/svg"
76 |       :width="size"
77 |       :height="size"
78 |       viewBox="0 0 24 24"
79 |       fill="none"
80 |       stroke="currentColor"
81 |       stroke-width="2"
82 |       stroke-linecap="round"
83 |       stroke-linejoin="round"
84 |       :variants="cartVariants"
85 |       :animate="currentState"
86 |     >
87 |       <path d="M6.29977 5H21L19 12H7.37671M20 16H8L6 3H3M9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19C8.55228 19 9 19.4477 9 20ZM20 20C20 20.5523 19.5523 21 19 21C18.4477 21 18 20.5523 18 20C18 19.4477 18.4477 19 19 19C19.5523 19 20 19.4477 20 20Z" />
88 |     </motion.svg>
89 |   </div>
90 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/WavesLadder.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const gVariants = {
20 |   normal: { y: 0, opacity: 1 },
21 |   animate: {
22 |     y: [13, 0],
23 |     opacity: [0, 0, 1],
24 |     transition: { 
25 |       duration: 1, 
26 |       times: [0, 0.5, 1], 
27 |       repeat: 0 
28 |     },
29 |   },
30 | };
31 | 
32 | const isControlled = ref(false);
33 | const currentState = ref('normal');
34 | 
35 | const startAnimation = () => {
36 |   currentState.value = 'animate';
37 | };
38 | 
39 | const stopAnimation = () => {
40 |   currentState.value = 'normal';
41 | };
42 | 
43 | const handleMouseEnter = () => {
44 |   if (!isControlled.value) {
45 |     startAnimation();
46 |   } else {
47 |     emit('startAnimation');
48 |   }
49 | };
50 | 
51 | const handleMouseLeave = () => {
52 |   if (!isControlled.value) {
53 |     stopAnimation();
54 |   } else {
55 |     emit('stopAnimation');
56 |   }
57 | };
58 | 
59 | defineExpose({
60 |   startAnimation,
61 |   stopAnimation,
62 | });
63 | </script>
64 | 
65 | <template>
66 |   <div
67 |     :class="[
68 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
69 |       props.class,
70 |     ]"
71 |     @mouseenter="handleMouseEnter"
72 |     @mouseleave="handleMouseLeave"
73 |   >
74 |     <svg
75 |       xmlns="http://www.w3.org/2000/svg"
76 |       :width="size"
77 |       :height="size"
78 |       viewBox="0 0 24 24"
79 |       fill="none"
80 |       stroke="currentColor"
81 |       stroke-width="2"
82 |       stroke-linecap="round"
83 |       stroke-linejoin="round"
84 |     >
85 |       <path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" />
86 |       <motion.g
87 |         :variants="gVariants"
88 |         :animate="currentState"
89 |       >
90 |         <path d="M19 5a2 2 0 0 0-2 2v11" />
91 |         <path d="M7 13h10" />
92 |         <path d="M7 9h10" />
93 |         <path d="M9 5a2 2 0 0 0-2 2v11" />
94 |       </motion.g>
95 |     </svg>
96 |   </div>
97 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CircleCheck.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     transition: {
 24 |       duration: 0.3,
 25 |       opacity: { duration: 0.1 }
 26 |     }
 27 |   },
 28 |   animate: {
 29 |     opacity: [0, 1],
 30 |     pathLength: [0, 1],
 31 |     transition: {
 32 |       duration: 0.4,
 33 |       opacity: { duration: 0.1 }
 34 |     }
 35 |   }
 36 | }
 37 | 
 38 | const isControlled = ref(false)
 39 | const currentState = ref('normal')
 40 | 
 41 | const startAnimation = () => {
 42 |   currentState.value = 'animate'
 43 | }
 44 | 
 45 | const stopAnimation = () => {
 46 |   currentState.value = 'normal'
 47 | }
 48 | 
 49 | const handleMouseEnter = () => {
 50 |   if (!isControlled.value) {
 51 |     startAnimation()
 52 |   } else {
 53 |     emit('startAnimation')
 54 |   }
 55 | }
 56 | 
 57 | const handleMouseLeave = () => {
 58 |   if (!isControlled.value) {
 59 |     stopAnimation()
 60 |   } else {
 61 |     emit('stopAnimation')
 62 |   }
 63 | }
 64 | 
 65 | defineExpose({
 66 |   startAnimation,
 67 |   stopAnimation
 68 | })
 69 | </script>
 70 | 
 71 | <template>
 72 |   <div
 73 |     :class="[
 74 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 75 |       props.class
 76 |     ]"
 77 |     @mouseenter="handleMouseEnter"
 78 |     @mouseleave="handleMouseLeave"
 79 |   >
 80 |     <svg
 81 |       xmlns="http://www.w3.org/2000/svg"
 82 |       :width="size"
 83 |       :height="size"
 84 |       viewBox="0 0 24 24"
 85 |       fill="none"
 86 |       stroke="currentColor"
 87 |       stroke-width="2"
 88 |       stroke-linecap="round"
 89 |       stroke-linejoin="round"
 90 |     >
 91 |       <circle cx="12" cy="12" r="10" />
 92 |       <motion.path
 93 |         d="m9 12 2 2 4-4"
 94 |         :variants="pathVariants"
 95 |         :initial="'normal'"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template>
101 | 


--------------------------------------------------------------------------------
/app/components/Lucide/KeySquare.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { rotate: 0, scale: 1 },
21 |   animate: {
22 |     rotate: [0, 15, -15, 0],
23 |     scale: [1, 1.05, 1, 1],
24 |     transition: {
25 |       duration: 0.6,
26 |       bounce: 0.4,
27 |     }
28 |   },
29 | };
30 | 
31 | const isControlled = ref(false);
32 | const currentState = ref('normal');
33 | 
34 | const startAnimation = () => {
35 |   currentState.value = 'animate';
36 | };
37 | 
38 | const stopAnimation = () => {
39 |   currentState.value = 'normal';
40 | };
41 | 
42 | const handleMouseEnter = () => {
43 |   if (!isControlled.value) {
44 |     startAnimation();
45 |   } else {
46 |     emit('startAnimation');
47 |   }
48 | };
49 | 
50 | const handleMouseLeave = () => {
51 |   if (!isControlled.value) {
52 |     stopAnimation();
53 |   } else {
54 |     emit('stopAnimation');
55 |   }
56 | };
57 | 
58 | defineExpose({
59 |   startAnimation,
60 |   stopAnimation,
61 | });
62 | </script>
63 | 
64 | <template>
65 |   <div
66 |     :class="[
67 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
68 |       props.class,
69 |     ]"
70 |     @mouseenter="handleMouseEnter"
71 |     @mouseleave="handleMouseLeave"
72 |   >
73 |     <motion.svg
74 |       xmlns="http://www.w3.org/2000/svg"
75 |       :width="size"
76 |       :height="size"
77 |       viewBox="0 0 24 24"
78 |       fill="none"
79 |       stroke="currentColor"
80 |       stroke-width="2"
81 |       stroke-linecap="round"
82 |       stroke-linejoin="round"
83 |       :animate="currentState"
84 |       :variants="svgVariants"
85 |     >
86 |       <path d="M12.4 2.7a2.5 2.5 0 0 1 3.4 0l5.5 5.5a2.5 2.5 0 0 1 0 3.4l-3.7 3.7a2.5 2.5 0 0 1-3.4 0L8.7 9.8a2.5 2.5 0 0 1 0-3.4z" />
87 |       <path d="m14 7 3 3" />
88 |       <path d="m9.4 10.6-6.814 6.814A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814" />
89 |     </motion.svg>
90 |   </div>
91 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/RefreshCWOff.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v';
 3 | 
 4 | interface Props {
 5 |   size?: number;
 6 |   class?: string;
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: '',
12 | });
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: [];
16 |   stopAnimation: [];
17 | }>();
18 | 
19 | const svgVariants = {
20 |   normal: { x: 0 },
21 |   animate: {
22 |     x: [-3, 3, -3, 3, 0],
23 |     transition: { duration: 0.4 },
24 |   },
25 |   transition: { type: 'spring', stiffness: 500, damping: 20 }
26 | };
27 | 
28 | const isControlled = ref(false);
29 | const currentState = ref('normal');
30 | 
31 | const startAnimation = () => {
32 |   currentState.value = 'animate';
33 | };
34 | 
35 | const stopAnimation = () => {
36 |   currentState.value = 'normal';
37 | };
38 | 
39 | const handleMouseEnter = () => {
40 |   if (!isControlled.value) {
41 |     startAnimation();
42 |   } else {
43 |     emit('startAnimation');
44 |   }
45 | };
46 | 
47 | const handleMouseLeave = () => {
48 |   if (!isControlled.value) {
49 |     stopAnimation();
50 |   } else {
51 |     emit('stopAnimation');
52 |   }
53 | };
54 | 
55 | defineExpose({
56 |   startAnimation,
57 |   stopAnimation,
58 | });
59 | </script>
60 | 
61 | <template>
62 |   <div
63 |     :class="[
64 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
65 |       props.class,
66 |     ]"
67 |     @mouseenter="handleMouseEnter"
68 |     @mouseleave="handleMouseLeave"
69 |   >
70 |     <motion.svg
71 |       xmlns="http://www.w3.org/2000/svg"
72 |       :width="size"
73 |       :height="size"
74 |       viewBox="0 0 24 24"
75 |       fill="none"
76 |       stroke="currentColor"
77 |       stroke-width="2"
78 |       stroke-linecap="round"
79 |       stroke-linejoin="round"
80 |       :animate="currentState"
81 |       :variants="svgVariants"
82 |     >
83 |       <path d="M21 8L18.74 5.74A9.75 9.75 0 0 0 12 3C11 3 10.03 3.16 9.13 3.47" />
84 |       <path d="M8 16H3v5" />
85 |       <path d="M3 12C3 9.51 4 7.26 5.64 5.64" />
86 |       <path d="m3 16 2.26 2.26A9.75 9.75 0 0 0 12 21c2.49 0 4.74-1 6.36-2.64" />
87 |       <path d="M21 12c0 1-.16 1.97-.47 2.87" />
88 |       <path d="M21 3v5h-5" />
89 |       <path d="M22 22 2 2" />
90 |     </motion.svg>
91 |   </div>
92 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigDownDash.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const dashVariants = {
 20 |   normal: { translateY: 0 },
 21 |   animate: {
 22 |     translateY: [0, 1, 0],
 23 |     transition: {
 24 |       duration: 0.4,
 25 |     },
 26 |   },
 27 | };
 28 | 
 29 | const arrowVariants = {
 30 |   normal: { translateY: 0 },
 31 |   animate: {
 32 |     translateY: [0, 3, 0],
 33 |     transition: {
 34 |       duration: 0.4,
 35 |     },
 36 |   },
 37 | };
 38 | 
 39 | const isControlled = ref(false);
 40 | const currentState = ref('normal');
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate';
 44 | };
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal';
 48 | };
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation();
 53 |   } else {
 54 |     emit('startAnimation');
 55 |   }
 56 | };
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation();
 61 |   } else {
 62 |     emit('stopAnimation');
 63 |   }
 64 | };
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation,
 69 | });
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class,
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |     >
 92 |       <motion.path d="M15 5H9" :variants="dashVariants" :animate="currentState" />
 93 |       <motion.path
 94 |         d="M15 9v3h4l-7 7-7-7h4V9z"
 95 |         :variants="arrowVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigRightDash.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const dashVariants = {
 20 |   normal: { translateX: 0 },
 21 |   animate: {
 22 |     translateX: [0, 1, 0],
 23 |     transition: {
 24 |       duration: 0.4,
 25 |     },
 26 |   },
 27 | };
 28 | 
 29 | const arrowVariants = {
 30 |   normal: { translateX: 0 },
 31 |   animate: {
 32 |     translateX: [0, 3, 0],
 33 |     transition: {
 34 |       duration: 0.4,
 35 |     },
 36 |   },
 37 | };
 38 | 
 39 | const isControlled = ref(false);
 40 | const currentState = ref('normal');
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate';
 44 | };
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal';
 48 | };
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation();
 53 |   } else {
 54 |     emit('startAnimation');
 55 |   }
 56 | };
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation();
 61 |   } else {
 62 |     emit('stopAnimation');
 63 |   }
 64 | };
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation,
 69 | });
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class,
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |     >
 92 |       <motion.path d="M5 9v6" :variants="dashVariants" :animate="currentState" />
 93 |       <motion.path
 94 |         d="M9 9h3V5l7 7-7 7v-4H9V9z"
 95 |         :variants="arrowVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigUpDash.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const dashVariants = {
 20 |   normal: { translateY: 0 },
 21 |   animate: {
 22 |     translateY: [0, -1, 0],
 23 |     transition: {
 24 |       duration: 0.4,
 25 |     },
 26 |   },
 27 | };
 28 | 
 29 | const arrowVariants = {
 30 |   normal: { translateY: 0 },
 31 |   animate: {
 32 |     translateY: [0, -3, 0],
 33 |     transition: {
 34 |       duration: 0.4,
 35 |     },
 36 |   },
 37 | };
 38 | 
 39 | const isControlled = ref(false);
 40 | const currentState = ref('normal');
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate';
 44 | };
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal';
 48 | };
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation();
 53 |   } else {
 54 |     emit('startAnimation');
 55 |   }
 56 | };
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation();
 61 |   } else {
 62 |     emit('stopAnimation');
 63 |   }
 64 | };
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation,
 69 | });
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class,
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |     >
 92 |       <motion.path d="M9 19h6" :variants="dashVariants" :animate="currentState" />
 93 |       <motion.path
 94 |         d="M9 15v-3H5l7-7 7 7h-4v3H9z"
 95 |         :variants="arrowVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Facebook.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const facebookVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       fill="none"
 88 |       stroke="currentColor"
 89 |       stroke-width="2"
 90 |       stroke-linecap="round"
 91 |       stroke-linejoin="round"
 92 |     >
 93 |       <motion.path
 94 |         d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
 95 |         :variants="facebookVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowBigLeftDash.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const dashVariants = {
 20 |   normal: { translateX: 0 },
 21 |   animate: {
 22 |     translateX: [0, -1, 0],
 23 |     transition: {
 24 |       duration: 0.4,
 25 |     },
 26 |   },
 27 | };
 28 | 
 29 | const arrowVariants = {
 30 |   normal: { translateX: 0 },
 31 |   animate: {
 32 |     translateX: [0, -3, 0],
 33 |     transition: {
 34 |       duration: 0.4,
 35 |     },
 36 |   },
 37 | };
 38 | 
 39 | const isControlled = ref(false);
 40 | const currentState = ref('normal');
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate';
 44 | };
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal';
 48 | };
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation();
 53 |   } else {
 54 |     emit('startAnimation');
 55 |   }
 56 | };
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation();
 61 |   } else {
 62 |     emit('stopAnimation');
 63 |   }
 64 | };
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation,
 69 | });
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class,
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |     >
 92 |       <motion.path d="M19 15V9" :variants="dashVariants" :animate="currentState" />
 93 |       <motion.path
 94 |         d="M15 15h-3v4l-7-7 7-7v4h3v6z"
 95 |         :variants="arrowVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |     </svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Home.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const defaultTransition = {
 20 |   duration: 0.6,
 21 |   opacity: { duration: 0.2 },
 22 | };
 23 | 
 24 | const pathVariants = {
 25 |   normal: {
 26 |     pathLength: 1,
 27 |     opacity: 1,
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |   },
 33 | };
 34 | 
 35 | const isControlled = ref(false);
 36 | const currentState = ref('normal');
 37 | 
 38 | const startAnimation = () => {
 39 |   currentState.value = 'animate';
 40 | };
 41 | 
 42 | const stopAnimation = () => {
 43 |   currentState.value = 'normal';
 44 | };
 45 | 
 46 | const handleMouseEnter = () => {
 47 |   if (!isControlled.value) {
 48 |     startAnimation();
 49 |   } else {
 50 |     emit('startAnimation');
 51 |   }
 52 | };
 53 | 
 54 | const handleMouseLeave = () => {
 55 |   if (!isControlled.value) {
 56 |     stopAnimation();
 57 |   } else {
 58 |     emit('stopAnimation');
 59 |   }
 60 | };
 61 | 
 62 | defineExpose({
 63 |   startAnimation,
 64 |   stopAnimation,
 65 | });
 66 | </script>
 67 | 
 68 | <template>
 69 |   <div
 70 |     :class="[
 71 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 72 |       props.class,
 73 |     ]"
 74 |     @mouseenter="handleMouseEnter"
 75 |     @mouseleave="handleMouseLeave"
 76 |   >
 77 |     <svg
 78 |       xmlns="http://www.w3.org/2000/svg"
 79 |       :width="size"
 80 |       :height="size"
 81 |       viewBox="0 0 24 24"
 82 |       fill="none"
 83 |       stroke="currentColor"
 84 |       stroke-width="2"
 85 |       stroke-linecap="round"
 86 |       stroke-linejoin="round"
 87 |     >
 88 |       <path
 89 |         d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
 90 |       />
 91 |       <motion.path
 92 |         d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
 93 |         :variants="pathVariants"
 94 |         :transition="defaultTransition"
 95 |         :animate="currentState"
 96 |       />
 97 |     </svg>
 98 |   </div>
 99 | </template>
100 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Sun.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const pathVariants = {
 20 |   normal: { opacity: 1 },
 21 |   animate: (i: number) => ({
 22 |     opacity: [0, 1],
 23 |     transition: { delay: i * 0.1, duration: 0.3 }
 24 |   })
 25 | }
 26 | 
 27 | const sunRays = [
 28 |   'M12 2v2',
 29 |   'm19.07 4.93-1.41 1.41',
 30 |   'M20 12h2',
 31 |   'm17.66 17.66 1.41 1.41',
 32 |   'M12 20v2',
 33 |   'm6.34 17.66-1.41 1.41',
 34 |   'M2 12h2',
 35 |   'm4.93 4.93 1.41 1.41'
 36 | ]
 37 | 
 38 | const isControlled = ref(false)
 39 | const currentState = ref('normal')
 40 | 
 41 | const startAnimation = () => {
 42 |   currentState.value = 'animate'
 43 | }
 44 | 
 45 | const stopAnimation = () => {
 46 |   currentState.value = 'normal'
 47 | }
 48 | 
 49 | const handleMouseEnter = () => {
 50 |   if (!isControlled.value) {
 51 |     startAnimation()
 52 |   } else {
 53 |     emit('startAnimation')
 54 |   }
 55 | }
 56 | 
 57 | const handleMouseLeave = () => {
 58 |   if (!isControlled.value) {
 59 |     stopAnimation()
 60 |   } else {
 61 |     emit('stopAnimation')
 62 |   }
 63 | }
 64 | 
 65 | defineExpose({
 66 |   startAnimation,
 67 |   stopAnimation
 68 | })
 69 | </script>
 70 | 
 71 | <template>
 72 |   <div
 73 |     :class="[
 74 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 75 |       props.class
 76 |     ]"
 77 |     @mouseenter="handleMouseEnter"
 78 |     @mouseleave="handleMouseLeave"
 79 |   >
 80 |     <svg
 81 |       xmlns="http://www.w3.org/2000/svg"
 82 |       :width="size"
 83 |       :height="size"
 84 |       viewBox="0 0 24 24"
 85 |       fill="none"
 86 |       stroke="currentColor"
 87 |       stroke-width="2"
 88 |       stroke-linecap="round"
 89 |       stroke-linejoin="round"
 90 |     >
 91 |       <circle cx="12" cy="12" r="4" />
 92 |       <motion.path
 93 |         v-for="(d, index) in sunRays"
 94 |         :key="d"
 95 |         :d="d"
 96 |         :animate="currentState"
 97 |         :variants="pathVariants"
 98 |         :custom="index + 1"
 99 |       />
100 |     </svg>
101 |   </div>
102 | </template>
103 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SunDim.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: { opacity: 1 },
 21 |   animate: (i: unknown) => ({
 22 |     opacity: [0, 1],
 23 |     transition: { delay: Number(i) * 0.1, duration: 0.3 },
 24 |   }),
 25 | };
 26 | 
 27 | const isControlled = ref(false);
 28 | const currentState = ref('normal');
 29 | 
 30 | const startAnimation = () => {
 31 |   currentState.value = 'animate';
 32 | };
 33 | 
 34 | const stopAnimation = () => {
 35 |   currentState.value = 'normal';
 36 | };
 37 | 
 38 | const handleMouseEnter = () => {
 39 |   if (!isControlled.value) {
 40 |     startAnimation();
 41 |   } else {
 42 |     emit('startAnimation');
 43 |   }
 44 | };
 45 | 
 46 | const handleMouseLeave = () => {
 47 |   if (!isControlled.value) {
 48 |     stopAnimation();
 49 |   } else {
 50 |     emit('stopAnimation');
 51 |   }
 52 | };
 53 | 
 54 | defineExpose({
 55 |   startAnimation,
 56 |   stopAnimation,
 57 | });
 58 | 
 59 | const rays = [
 60 |   'M12 4h.01',
 61 |   'M20 12h.01',
 62 |   'M12 20h.01',
 63 |   'M4 12h.01',
 64 |   'M17.657 6.343h.01',
 65 |   'M17.657 17.657h.01',
 66 |   'M6.343 17.657h.01',
 67 |   'M6.343 6.343h.01',
 68 | ];
 69 | </script>
 70 | 
 71 | <template>
 72 |   <div
 73 |     :class="[
 74 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 75 |       props.class,
 76 |     ]"
 77 |     @mouseenter="handleMouseEnter"
 78 |     @mouseleave="handleMouseLeave"
 79 |   >
 80 |     <svg
 81 |       xmlns="http://www.w3.org/2000/svg"
 82 |       :width="size"
 83 |       :height="size"
 84 |       viewBox="0 0 24 24"
 85 |       fill="none"
 86 |       stroke="currentColor"
 87 |       stroke-width="2"
 88 |       stroke-linecap="round"
 89 |       stroke-linejoin="round"
 90 |     >
 91 |       <circle cx="12" cy="12" r="4" />
 92 |       <motion.path
 93 |         v-for="(d, index) in rays"
 94 |         :key="d"
 95 |         :d="d"
 96 |         :variants="pathVariants"
 97 |         :animate="currentState"
 98 |         :custom="index + 1"
 99 |       />
100 |     </svg>
101 |   </div>
102 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Key.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const svgVariants = {
 20 |   normal: {
 21 |     rotate: 0,
 22 |     transition: {
 23 |       type: 'spring',
 24 |       stiffness: 120,
 25 |       damping: 14,
 26 |       duration: 0.8,
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     rotate: [-3, -33, -25, -28],
 31 |     transition: {
 32 |       duration: 0.6,
 33 |       times: [0, 0.6, 0.8, 1],
 34 |       ease: 'easeInOut',
 35 |     },
 36 |   },
 37 | };
 38 | 
 39 | const isControlled = ref(false);
 40 | const currentState = ref('normal');
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate';
 44 | };
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal';
 48 | };
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation();
 53 |   } else {
 54 |     emit('startAnimation');
 55 |   }
 56 | };
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation();
 61 |   } else {
 62 |     emit('stopAnimation');
 63 |   }
 64 | };
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation,
 69 | });
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class,
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <motion.svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |       :animate="currentState"
 92 |       :variants="svgVariants"
 93 |       style="transform-origin: 30% 70%;"
 94 |     >
 95 |       <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
 96 |       <path d="m21 2-9.6 9.6" />
 97 |       <circle cx="7.5" cy="15.5" r="5.5" />
 98 |     </motion.svg>
 99 |   </div>
100 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Waves.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v'
 3 | 
 4 | interface Props {
 5 |   size?: number
 6 |   class?: string
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: ''
12 | })
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: []
16 |   stopAnimation: []
17 | }>()
18 | 
19 | const pathVariants = {
20 |   normal: { pathLength: 1 },
21 |   animate: {
22 |     pathLength: [0, 1],
23 |     transition: { duration: 0.4, ease: 'linear' }
24 |   }
25 | }
26 | 
27 | const isControlled = ref(false)
28 | const currentState = ref('normal')
29 | 
30 | const startAnimation = () => {
31 |   currentState.value = 'animate'
32 | }
33 | 
34 | const stopAnimation = () => {
35 |   currentState.value = 'normal'
36 | }
37 | 
38 | const handleMouseEnter = () => {
39 |   if (!isControlled.value) {
40 |     startAnimation()
41 |   } else {
42 |     emit('startAnimation')
43 |   }
44 | }
45 | 
46 | const handleMouseLeave = () => {
47 |   if (!isControlled.value) {
48 |     stopAnimation()
49 |   } else {
50 |     emit('stopAnimation')
51 |   }
52 | }
53 | 
54 | defineExpose({
55 |   startAnimation,
56 |   stopAnimation
57 | })
58 | </script>
59 | 
60 | <template>
61 |   <div
62 |     :class="[
63 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
64 |       props.class
65 |     ]"
66 |     @mouseenter="handleMouseEnter"
67 |     @mouseleave="handleMouseLeave"
68 |   >
69 |     <svg
70 |       xmlns="http://www.w3.org/2000/svg"
71 |       :width="size"
72 |       :height="size"
73 |       viewBox="0 0 24 24"
74 |       fill="none"
75 |       stroke="currentColor"
76 |       stroke-width="2"
77 |       stroke-linecap="round"
78 |       stroke-linejoin="round"
79 |     >
80 |       <motion.path
81 |         d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
82 |         :variants="pathVariants"
83 |         :animate="currentState"
84 |       />
85 |       <motion.path
86 |         d="M2 12c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
87 |         :variants="pathVariants"
88 |         :animate="currentState"
89 |       />
90 |       <motion.path
91 |         d="M2 18c.6.5 1.2 1 2.5 1c2.5 0 2.5-2 5-2c2.6 0 2.4 2 5 2c2.5 0 2.5-2 5-2c1.3 0 1.9.5 2.5 1"
92 |         :variants="pathVariants"
93 |         :animate="currentState"
94 |       />
95 |     </svg>
96 |   </div>
97 | </template>
98 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SunMedium.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: { opacity: 1 },
 21 |   animate: (i: unknown) => ({
 22 |     opacity: [0, 1],
 23 |     transition: { delay: Number(i) * 0.1, duration: 0.3 },
 24 |   }),
 25 | };
 26 | 
 27 | const isControlled = ref(false);
 28 | const currentState = ref('normal');
 29 | 
 30 | const startAnimation = () => {
 31 |   currentState.value = 'animate';
 32 | };
 33 | 
 34 | const stopAnimation = () => {
 35 |   currentState.value = 'normal';
 36 | };
 37 | 
 38 | const handleMouseEnter = () => {
 39 |   if (!isControlled.value) {
 40 |     startAnimation();
 41 |   } else {
 42 |     emit('startAnimation');
 43 |   }
 44 | };
 45 | 
 46 | const handleMouseLeave = () => {
 47 |   if (!isControlled.value) {
 48 |     stopAnimation();
 49 |   } else {
 50 |     emit('stopAnimation');
 51 |   }
 52 | };
 53 | 
 54 | defineExpose({
 55 |   startAnimation,
 56 |   stopAnimation,
 57 | });
 58 | 
 59 | const rays = [
 60 |   'M12 3v1',
 61 |   'M12 20v1',
 62 |   'M3 12h1',
 63 |   'M20 12h1',
 64 |   'm18.364 5.636-.707.707',
 65 |   'm6.343 17.657-.707.707',
 66 |   'm5.636 5.636.707.707',
 67 |   'm17.657 17.657.707.707',
 68 | ];
 69 | </script>
 70 | 
 71 | <template>
 72 |   <div
 73 |     :class="[
 74 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 75 |       props.class,
 76 |     ]"
 77 |     @mouseenter="handleMouseEnter"
 78 |     @mouseleave="handleMouseLeave"
 79 |   >
 80 |     <svg
 81 |       xmlns="http://www.w3.org/2000/svg"
 82 |       :width="size"
 83 |       :height="size"
 84 |       viewBox="0 0 24 24"
 85 |       fill="none"
 86 |       stroke="currentColor"
 87 |       stroke-width="2"
 88 |       stroke-linecap="round"
 89 |       stroke-linejoin="round"
 90 |     >
 91 |       <circle cx="12" cy="12" r="4" />
 92 |       <motion.path
 93 |         v-for="(d, index) in rays"
 94 |         :key="d"
 95 |         :d="d"
 96 |         :variants="pathVariants"
 97 |         :animate="currentState"
 98 |         :custom="index + 1"
 99 |       />
100 |     </svg>
101 |   </div>
102 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Twitter.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.path
 95 |         d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
 96 |         :variants="pathVariants"
 97 |         :animate="currentState"
 98 |       />
 99 |     </svg>
100 |   </div>
101 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowUp.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: { d: 'm5 12 7-7 7 7', translateY: 0 },
 21 |   animate: {
 22 |     d: 'm5 12 7-7 7 7',
 23 |     translateY: [0, 3, 0],
 24 |     transition: {
 25 |       duration: 0.4,
 26 |     },
 27 |   },
 28 | };
 29 | 
 30 | const secondPathVariants = {
 31 |   normal: { d: 'M12 19V5' },
 32 |   animate: {
 33 |     d: ['M12 19V5', 'M12 19V10', 'M12 19V5'],
 34 |     transition: {
 35 |       duration: 0.4,
 36 |     },
 37 |   },
 38 | };
 39 | 
 40 | const isControlled = ref(false);
 41 | const currentState = ref('normal');
 42 | 
 43 | const startAnimation = () => {
 44 |   currentState.value = 'animate';
 45 | };
 46 | 
 47 | const stopAnimation = () => {
 48 |   currentState.value = 'normal';
 49 | };
 50 | 
 51 | const handleMouseEnter = () => {
 52 |   if (!isControlled.value) {
 53 |     startAnimation();
 54 |   } else {
 55 |     emit('startAnimation');
 56 |   }
 57 | };
 58 | 
 59 | const handleMouseLeave = () => {
 60 |   if (!isControlled.value) {
 61 |     stopAnimation();
 62 |   } else {
 63 |     emit('stopAnimation');
 64 |   }
 65 | };
 66 | 
 67 | defineExpose({
 68 |   startAnimation,
 69 |   stopAnimation,
 70 | });
 71 | </script>
 72 | 
 73 | <template>
 74 |   <div
 75 |     :class="[
 76 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 77 |       props.class,
 78 |     ]"
 79 |     @mouseenter="handleMouseEnter"
 80 |     @mouseleave="handleMouseLeave"
 81 |   >
 82 |     <svg
 83 |       xmlns="http://www.w3.org/2000/svg"
 84 |       :width="size"
 85 |       :height="size"
 86 |       viewBox="0 0 24 24"
 87 |       fill="none"
 88 |       stroke="currentColor"
 89 |       stroke-width="2"
 90 |       stroke-linecap="round"
 91 |       stroke-linejoin="round"
 92 |     >
 93 |       <motion.path
 94 |         d="m5 12 7-7 7 7"
 95 |         :variants="pathVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |       <motion.path
 99 |         d="M12 19V5"
100 |         :variants="secondPathVariants"
101 |         :animate="currentState"
102 |       />
103 |     </svg>
104 |   </div>
105 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/ArrowDown.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: { d: 'm19 12-7 7-7-7', translateY: 0 },
 21 |   animate: {
 22 |     d: 'm19 12-7 7-7-7',
 23 |     translateY: [0, -3, 0],
 24 |     transition: {
 25 |       duration: 0.4,
 26 |     },
 27 |   },
 28 | };
 29 | 
 30 | const secondPathVariants = {
 31 |   normal: { d: 'M12 5v14' },
 32 |   animate: {
 33 |     d: ['M12 5v14', 'M12 5v9', 'M12 5v14'],
 34 |     transition: {
 35 |       duration: 0.4,
 36 |     },
 37 |   },
 38 | };
 39 | 
 40 | const isControlled = ref(false);
 41 | const currentState = ref('normal');
 42 | 
 43 | const startAnimation = () => {
 44 |   currentState.value = 'animate';
 45 | };
 46 | 
 47 | const stopAnimation = () => {
 48 |   currentState.value = 'normal';
 49 | };
 50 | 
 51 | const handleMouseEnter = () => {
 52 |   if (!isControlled.value) {
 53 |     startAnimation();
 54 |   } else {
 55 |     emit('startAnimation');
 56 |   }
 57 | };
 58 | 
 59 | const handleMouseLeave = () => {
 60 |   if (!isControlled.value) {
 61 |     stopAnimation();
 62 |   } else {
 63 |     emit('stopAnimation');
 64 |   }
 65 | };
 66 | 
 67 | defineExpose({
 68 |   startAnimation,
 69 |   stopAnimation,
 70 | });
 71 | </script>
 72 | 
 73 | <template>
 74 |   <div
 75 |     :class="[
 76 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 77 |       props.class,
 78 |     ]"
 79 |     @mouseenter="handleMouseEnter"
 80 |     @mouseleave="handleMouseLeave"
 81 |   >
 82 |     <svg
 83 |       xmlns="http://www.w3.org/2000/svg"
 84 |       :width="size"
 85 |       :height="size"
 86 |       viewBox="0 0 24 24"
 87 |       fill="none"
 88 |       stroke="currentColor"
 89 |       stroke-width="2"
 90 |       stroke-linecap="round"
 91 |       stroke-linejoin="round"
 92 |     >
 93 |       <motion.path
 94 |         d="m19 12-7 7-7-7"
 95 |         :variants="pathVariants"
 96 |         :animate="currentState"
 97 |       />
 98 |       <motion.path
 99 |         d="M12 5v14"
100 |         :variants="secondPathVariants"
101 |         :animate="currentState"
102 |       />
103 |     </svg>
104 |   </div>
105 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Users.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     translateX: 0,
 22 |     transition: {
 23 |       type: 'spring',
 24 |       stiffness: 200,
 25 |       damping: 13
 26 |     }
 27 |   },
 28 |   animate: {
 29 |     translateX: [-6, 0],
 30 |     transition: {
 31 |       delay: 0.1,
 32 |       type: 'spring',
 33 |       stiffness: 200,
 34 |       damping: 13
 35 |     }
 36 |   }
 37 | }
 38 | 
 39 | const isControlled = ref(false)
 40 | const currentState = ref('normal')
 41 | 
 42 | const startAnimation = () => {
 43 |   currentState.value = 'animate'
 44 | }
 45 | 
 46 | const stopAnimation = () => {
 47 |   currentState.value = 'normal'
 48 | }
 49 | 
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation()
 53 |   } else {
 54 |     emit('startAnimation')
 55 |   }
 56 | }
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation()
 61 |   } else {
 62 |     emit('stopAnimation')
 63 |   }
 64 | }
 65 | 
 66 | defineExpose({
 67 |   startAnimation,
 68 |   stopAnimation
 69 | })
 70 | </script>
 71 | 
 72 | <template>
 73 |   <div
 74 |     :class="[
 75 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 76 |       props.class
 77 |     ]"
 78 |     @mouseenter="handleMouseEnter"
 79 |     @mouseleave="handleMouseLeave"
 80 |   >
 81 |     <svg
 82 |       xmlns="http://www.w3.org/2000/svg"
 83 |       :width="size"
 84 |       :height="size"
 85 |       viewBox="0 0 24 24"
 86 |       fill="none"
 87 |       stroke="currentColor"
 88 |       stroke-width="2"
 89 |       stroke-linecap="round"
 90 |       stroke-linejoin="round"
 91 |     >
 92 |       <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
 93 |       <circle cx="9" cy="7" r="4" />
 94 |       <motion.path
 95 |         d="M22 21v-2a4 4 0 0 0-3-3.87"
 96 |         :variants="pathVariants"
 97 |         :animate="currentState"
 98 |       />
 99 |       <motion.path
100 |         d="M16 3.13a4 4 0 0 1 0 7.75"
101 |         :variants="pathVariants"
102 |         :animate="currentState"
103 |       />
104 |     </svg>
105 |   </div>
106 | </template>
107 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Settings.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { motion } from 'motion-v'
 3 | 
 4 | interface Props {
 5 |   size?: number
 6 |   class?: string
 7 | }
 8 | 
 9 | const props = withDefaults(defineProps<Props>(), {
10 |   size: 28,
11 |   class: ''
12 | })
13 | 
14 | const emit = defineEmits<{
15 |   startAnimation: []
16 |   stopAnimation: []
17 | }>()
18 | 
19 | const isControlled = ref(false)
20 | const currentState = ref('normal')
21 | 
22 | const startAnimation = () => {
23 |   currentState.value = 'animate'
24 | }
25 | 
26 | const stopAnimation = () => {
27 |   currentState.value = 'normal'
28 | }
29 | 
30 | const handleMouseEnter = () => {
31 |   if (!isControlled.value) {
32 |     startAnimation()
33 |   } else {
34 |     emit('startAnimation')
35 |   }
36 | }
37 | 
38 | const handleMouseLeave = () => {
39 |   if (!isControlled.value) {
40 |     stopAnimation()
41 |   } else {
42 |     emit('stopAnimation')
43 |   }
44 | }
45 | 
46 | defineExpose({
47 |   startAnimation,
48 |   stopAnimation
49 | })
50 | </script>
51 | 
52 | <template>
53 |   <div
54 |     :class="[
55 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
56 |       props.class
57 |     ]"
58 |     @mouseenter="handleMouseEnter"
59 |     @mouseleave="handleMouseLeave"
60 |   >
61 |     <motion.svg
62 |       xmlns="http://www.w3.org/2000/svg"
63 |       :width="size"
64 |       :height="size"
65 |       viewBox="0 0 24 24"
66 |       fill="none"
67 |       stroke="currentColor"
68 |       stroke-width="2"
69 |       stroke-linecap="round"
70 |       stroke-linejoin="round"
71 |       :transition="{ type: 'spring', stiffness: 50, damping: 10 }"
72 |       :variants="{
73 |         normal: {
74 |           rotate: 0
75 |         },
76 |         animate: {
77 |           rotate: 180
78 |         }
79 |       }"
80 |       :animate="currentState"
81 |     >
82 |       <path
83 |         d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
84 |       />
85 |       <circle cx="12" cy="12" r="3" />
86 |     </motion.svg>
87 |   </div>
88 | </template>
89 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Search.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | // Define animation with three distinct points like in the React version
 20 | const searchVariants = {
 21 |   normal: { 
 22 |     x: 0, 
 23 |     y: 0,
 24 |     transition: {
 25 |       duration: 0.3,
 26 |       type: 'spring',
 27 |       stiffness: 400,
 28 |       damping: 25
 29 |     }
 30 |   },
 31 |   animate: { 
 32 |     x: [0, 0, -3, 0],
 33 |     y: [0, -4, 0, 0],
 34 |     transition: {
 35 |       duration: 1,
 36 |       bounce: 0.3
 37 |     }
 38 |   }
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |       style="overflow: visible"
 94 |     >
 95 |       <motion.circle 
 96 |         cx="11" 
 97 |         cy="11" 
 98 |         r="8"
 99 |         :variants="searchVariants"
100 |         :animate="currentState" 
101 |       />
102 |       <motion.path 
103 |         d="m21 21-4.3-4.3"
104 |         :variants="searchVariants"
105 |         :animate="currentState" 
106 |       />
107 |     </svg>
108 |   </div>
109 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CloudRain.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const rainVariants = {
 20 |   animate: {
 21 |     transition: {
 22 |       staggerChildren: 0.2,
 23 |     },
 24 |   },
 25 | };
 26 | 
 27 | const rainChildVariants = {
 28 |   normal: {
 29 |     opacity: 1,
 30 |   },
 31 |   animate: {
 32 |     opacity: [1, 0.2, 1],
 33 |     transition: {
 34 |       duration: 1,
 35 |       repeat: Infinity,
 36 |       ease: 'easeInOut',
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <!-- Cloud - static -->
 95 |       <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
 96 |       <!-- Rain lines - opacity animation -->
 97 |       <motion.g :variants="rainVariants" :animate="currentState">
 98 |         <motion.path :variants="rainChildVariants" d="M16 14v6" />
 99 |         <motion.path :variants="rainChildVariants" d="M8 14v6" />
100 |         <motion.path :variants="rainChildVariants" d="M12 16v6" />
101 |       </motion.g>
102 |     </svg>
103 |   </div>
104 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CloudRainWind.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const windVariants = {
 20 |   animate: {
 21 |     transition: {
 22 |       staggerChildren: 0.2,
 23 |     },
 24 |   },
 25 | };
 26 | 
 27 | const windChildVariants = {
 28 |   normal: {
 29 |     opacity: 1,
 30 |   },
 31 |   animate: {
 32 |     opacity: [1, 0.2, 1],
 33 |     transition: {
 34 |       duration: 1,
 35 |       repeat: Infinity,
 36 |       ease: 'easeInOut',
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <!-- Cloud - static -->
 95 |       <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
 96 |       <!-- Wind lines - opacity animation -->
 97 |       <motion.g :variants="windVariants" :animate="currentState">
 98 |         <motion.path :variants="windChildVariants" d="m9.2 22 3-7" />
 99 |         <motion.path :variants="windChildVariants" d="m9 13-3 7" />
100 |         <motion.path :variants="windChildVariants" d="m17 13-3 7" />
101 |       </motion.g>
102 |     </svg>
103 |   </div>
104 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/UserRound.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariant = {
 20 |   normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
 21 |   animate: {
 22 |     pathLength: [0, 1],
 23 |     opacity: [0, 1],
 24 |     pathOffset: [1, 0],
 25 |   },
 26 | };
 27 | 
 28 | const circleVariant = {
 29 |   normal: {
 30 |     pathLength: 1,
 31 |     pathOffset: 0,
 32 |     scale: 1,
 33 |   },
 34 |   animate: {
 35 |     pathLength: [0, 1],
 36 |     pathOffset: [1, 0],
 37 |     scale: [0.5, 1],
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.circle
 95 |         cx="12"
 96 |         cy="8"
 97 |         r="5"
 98 |         :animate="currentState"
 99 |         :variants="circleVariant"
100 |       />
101 |       <motion.path
102 |         d="M20 21a8 8 0 0 0-16 0"
103 |         :variants="pathVariant"
104 |         :transition="{
105 |           delay: 0.2,
106 |           duration: 0.4,
107 |         }"
108 |         :animate="currentState"
109 |       />
110 |     </svg>
111 |   </div>
112 | </template>
113 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Redo.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | // Custom easing function similar to cubicBezier in Framer Motion
 20 | const customEasing = [0.25, 0.1, 0.25, 1];
 21 | 
 22 | const firstPathVariants = {
 23 |   normal: { translateX: 0, translateY: 0, rotate: 0 },
 24 |   animate: {
 25 |     translateX: [0, -2.1, 0],
 26 |     translateY: [0, -1.4, 0],
 27 |     rotate: [0, -12, 0],
 28 |     transition: { duration: 0.6, ease: customEasing }
 29 |   }
 30 | };
 31 | 
 32 | const secondPathVariants = {
 33 |   normal: { pathLength: 1 },
 34 |   animate: { 
 35 |     pathLength: [1, 0.8, 1],
 36 |     transition: { duration: 0.6, ease: customEasing }
 37 |   }
 38 | };
 39 | 
 40 | const isControlled = ref(false);
 41 | const currentState = ref('normal');
 42 | 
 43 | const startAnimation = () => {
 44 |   currentState.value = 'animate';
 45 | };
 46 | 
 47 | const stopAnimation = () => {
 48 |   currentState.value = 'normal';
 49 | };
 50 | 
 51 | const handleMouseEnter = () => {
 52 |   if (!isControlled.value) {
 53 |     startAnimation();
 54 |   } else {
 55 |     emit('startAnimation');
 56 |   }
 57 | };
 58 | 
 59 | const handleMouseLeave = () => {
 60 |   if (!isControlled.value) {
 61 |     stopAnimation();
 62 |   } else {
 63 |     emit('stopAnimation');
 64 |   }
 65 | };
 66 | 
 67 | defineExpose({
 68 |   startAnimation,
 69 |   stopAnimation,
 70 | });
 71 | </script>
 72 | 
 73 | <template>
 74 |   <div
 75 |     :class="[
 76 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 77 |       props.class,
 78 |     ]"
 79 |     @mouseenter="handleMouseEnter"
 80 |     @mouseleave="handleMouseLeave"
 81 |   >
 82 |     <svg
 83 |       xmlns="http://www.w3.org/2000/svg"
 84 |       :width="size"
 85 |       :height="size"
 86 |       viewBox="0 0 24 24"
 87 |       fill="none"
 88 |       stroke="currentColor"
 89 |       stroke-width="2"
 90 |       stroke-linecap="round"
 91 |       stroke-linejoin="round"
 92 |     >
 93 |       <motion.path
 94 |         d="M21 7v6h-6"
 95 |         :animate="currentState"
 96 |         :variants="firstPathVariants"
 97 |       />
 98 |       <motion.path
 99 |         d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"
100 |         :animate="currentState"
101 |         :variants="secondPathVariants"
102 |       />
103 |     </svg>
104 |   </div>
105 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/FileStack.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const isControlled = ref(false);
 20 | const currentState = ref('normal');
 21 | 
 22 | const startAnimation = () => {
 23 |   currentState.value = 'animate';
 24 | };
 25 | 
 26 | const stopAnimation = () => {
 27 |   currentState.value = 'normal';
 28 | };
 29 | 
 30 | const handleMouseEnter = () => {
 31 |   if (!isControlled.value) {
 32 |     startAnimation();
 33 |   } else {
 34 |     emit('startAnimation');
 35 |   }
 36 | };
 37 | 
 38 | const handleMouseLeave = () => {
 39 |   if (!isControlled.value) {
 40 |     stopAnimation();
 41 |   } else {
 42 |     emit('stopAnimation');
 43 |   }
 44 | };
 45 | 
 46 | defineExpose({
 47 |   startAnimation,
 48 |   stopAnimation,
 49 | });
 50 | </script>
 51 | 
 52 | <template>
 53 |   <div
 54 |     :class="[
 55 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 56 |       props.class,
 57 |     ]"
 58 |     @mouseenter="handleMouseEnter"
 59 |     @mouseleave="handleMouseLeave"
 60 |   >
 61 |     <svg
 62 |       xmlns="http://www.w3.org/2000/svg"
 63 |       :width="size"
 64 |       :height="size"
 65 |       viewBox="0 0 24 24"
 66 |       fill="none"
 67 |       stroke="currentColor"
 68 |       stroke-width="2"
 69 |       stroke-linecap="round"
 70 |       stroke-linejoin="round"
 71 |     >
 72 |       <motion.path
 73 |         d="M21 7h-3a2 2 0 0 1-2-2V2"
 74 |         :variants="{
 75 |           normal: { translateX: 0, translateY: 0 },
 76 |           animate: { translateX: -4, translateY: 4 },
 77 |         }"
 78 |         :animate="currentState"
 79 |       />
 80 |       <motion.path
 81 |         d="M21 6v6.5c0 .8-.7 1.5-1.5 1.5h-7c-.8 0-1.5-.7-1.5-1.5v-9c0-.8.7-1.5 1.5-1.5H17Z"
 82 |         :variants="{
 83 |           normal: { translateX: 0, translateY: 0 },
 84 |           animate: { translateX: -4, translateY: 4 },
 85 |         }"
 86 |         :animate="currentState"
 87 |       />
 88 |       <path d="M7 8v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H15" />
 89 |       <motion.path
 90 |         d="M3 12v8.8c0 .3.2.6.4.8.2.2.5.4.8.4H11"
 91 |         :variants="{
 92 |           normal: { translateX: 0, translateY: 0 },
 93 |           animate: { translateX: 4, translateY: -4 },
 94 |         }"
 95 |         :animate="currentState"
 96 |       />
 97 |     </svg>
 98 |   </div>
 99 | </template>
100 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Sunset.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const arrowVariants = {
 20 |   normal: {
 21 |     y: 0,
 22 |   },
 23 |   animate: {
 24 |     y: [0, 1, 0],
 25 |   },
 26 | };
 27 | 
 28 | const raysVariants = {
 29 |   normal: { opacity: 1 },
 30 |   animate: (i: unknown) => ({
 31 |     opacity: [0, 1],
 32 |     transition: { delay: Number(i) * 0.1, duration: 0.3 },
 33 |   }),
 34 | };
 35 | 
 36 | const isControlled = ref(false);
 37 | const currentState = ref('normal');
 38 | 
 39 | const startAnimation = () => {
 40 |   currentState.value = 'animate';
 41 | };
 42 | 
 43 | const stopAnimation = () => {
 44 |   currentState.value = 'normal';
 45 | };
 46 | 
 47 | const handleMouseEnter = () => {
 48 |   if (!isControlled.value) {
 49 |     startAnimation();
 50 |   } else {
 51 |     emit('startAnimation');
 52 |   }
 53 | };
 54 | 
 55 | const handleMouseLeave = () => {
 56 |   if (!isControlled.value) {
 57 |     stopAnimation();
 58 |   } else {
 59 |     emit('stopAnimation');
 60 |   }
 61 | };
 62 | 
 63 | defineExpose({
 64 |   startAnimation,
 65 |   stopAnimation,
 66 | });
 67 | 
 68 | const rays = [
 69 |   'm4.93 10.93 1.41 1.41',
 70 |   'M2 18h2',
 71 |   'M20 18h2',
 72 |   'm19.07 10.93-1.41 1.41',
 73 |   'M22 22H2',
 74 | ];
 75 | </script>
 76 | 
 77 | <template>
 78 |   <div
 79 |     :class="[
 80 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 81 |       props.class,
 82 |     ]"
 83 |     @mouseenter="handleMouseEnter"
 84 |     @mouseleave="handleMouseLeave"
 85 |   >
 86 |     <svg
 87 |       xmlns="http://www.w3.org/2000/svg"
 88 |       :width="size"
 89 |       :height="size"
 90 |       viewBox="0 0 24 24"
 91 |       fill="none"
 92 |       stroke="currentColor"
 93 |       stroke-width="2"
 94 |       stroke-linecap="round"
 95 |       stroke-linejoin="round"
 96 |     >
 97 |       <motion.g
 98 |         :variants="arrowVariants"
 99 |         :animate="currentState"
100 |       >
101 |         <path d="M12 10V2" />
102 |         <path d="m16 6-4 4-4-4" />
103 |       </motion.g>
104 | 
105 |       <motion.path
106 |         v-for="(d, index) in rays"
107 |         :key="d"
108 |         :d="d"
109 |         :variants="raysVariants"
110 |         :animate="currentState"
111 |         :custom="index + 1"
112 |       />
113 |       <path d="M16 18a4 4 0 0 0-8 0" />
114 |     </svg>
115 |   </div>
116 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Workflow.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const variants = {
 20 |   normal: {
 21 |     pathLength: 1,
 22 |     opacity: 1,
 23 |   },
 24 |   animate: (custom: unknown) => ({
 25 |     pathLength: [0, 1],
 26 |     opacity: [0, 1],
 27 |     transition: {
 28 |       duration: 0.3,
 29 |       opacity: { delay: 0.15 },
 30 |       delay: Number(custom) * 0.1,
 31 |     },
 32 |   }),
 33 | };
 34 | 
 35 | const isControlled = ref(false);
 36 | const currentState = ref('normal');
 37 | 
 38 | const startAnimation = () => {
 39 |   currentState.value = 'animate';
 40 | };
 41 | 
 42 | const stopAnimation = () => {
 43 |   currentState.value = 'normal';
 44 | };
 45 | 
 46 | const handleMouseEnter = () => {
 47 |   if (!isControlled.value) {
 48 |     startAnimation();
 49 |   } else {
 50 |     emit('startAnimation');
 51 |   }
 52 | };
 53 | 
 54 | const handleMouseLeave = () => {
 55 |   if (!isControlled.value) {
 56 |     stopAnimation();
 57 |   } else {
 58 |     emit('stopAnimation');
 59 |   }
 60 | };
 61 | 
 62 | defineExpose({
 63 |   startAnimation,
 64 |   stopAnimation,
 65 | });
 66 | </script>
 67 | 
 68 | <template>
 69 |   <div
 70 |     :class="[
 71 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 72 |       props.class,
 73 |     ]"
 74 |     @mouseenter="handleMouseEnter"
 75 |     @mouseleave="handleMouseLeave"
 76 |   >
 77 |     <svg
 78 |       xmlns="http://www.w3.org/2000/svg"
 79 |       :width="size"
 80 |       :height="size"
 81 |       viewBox="0 0 24 24"
 82 |       fill="none"
 83 |       stroke="currentColor"
 84 |       stroke-width="2"
 85 |       stroke-linecap="round"
 86 |       stroke-linejoin="round"
 87 |     >
 88 |       <motion.rect
 89 |         width="8"
 90 |         height="8"
 91 |         x="3"
 92 |         y="3"
 93 |         rx="2"
 94 |         :variants="variants"
 95 |         :animate="currentState"
 96 |         :custom="0"
 97 |       />
 98 |       <motion.path
 99 |         d="M7 11v4a2 2 0 0 0 2 2h4"
100 |         :variants="variants"
101 |         :animate="currentState"
102 |         :custom="3"
103 |       />
104 |       <motion.rect
105 |         width="8"
106 |         height="8"
107 |         x="13"
108 |         y="13"
109 |         rx="2"
110 |         :variants="variants"
111 |         :animate="currentState"
112 |         :custom="0"
113 |       />
114 |     </svg>
115 |   </div>
116 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CalendarDays.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const DOTS = [
 20 |   { cx: 8, cy: 14 },
 21 |   { cx: 12, cy: 14 },
 22 |   { cx: 16, cy: 14 },
 23 |   { cx: 8, cy: 18 },
 24 |   { cx: 12, cy: 18 },
 25 |   { cx: 16, cy: 18 }
 26 | ]
 27 | 
 28 | const variants = {
 29 |   normal: {
 30 |     opacity: 1,
 31 |     transition: {
 32 |       duration: 0.2
 33 |     }
 34 |   },
 35 |   animate: (i: number) => ({
 36 |     opacity: [1, 0.3, 1],
 37 |     transition: {
 38 |       delay: i * 0.1,
 39 |       duration: 0.4,
 40 |       times: [0, 0.5, 1]
 41 |     }
 42 |   })
 43 | }
 44 | 
 45 | const isControlled = ref(false)
 46 | const currentState = ref('normal')
 47 | 
 48 | const startAnimation = () => {
 49 |   currentState.value = 'animate'
 50 | }
 51 | 
 52 | const stopAnimation = () => {
 53 |   currentState.value = 'normal'
 54 | }
 55 | 
 56 | const handleMouseEnter = () => {
 57 |   if (!isControlled.value) {
 58 |     startAnimation()
 59 |   } else {
 60 |     emit('startAnimation')
 61 |   }
 62 | }
 63 | 
 64 | const handleMouseLeave = () => {
 65 |   if (!isControlled.value) {
 66 |     stopAnimation()
 67 |   } else {
 68 |     emit('stopAnimation')
 69 |   }
 70 | }
 71 | 
 72 | defineExpose({
 73 |   startAnimation,
 74 |   stopAnimation
 75 | })
 76 | </script>
 77 | 
 78 | <template>
 79 |   <div
 80 |     :class="[
 81 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 82 |       props.class
 83 |     ]"
 84 |     @mouseenter="handleMouseEnter"
 85 |     @mouseleave="handleMouseLeave"
 86 |   >
 87 |     <svg
 88 |       xmlns="http://www.w3.org/2000/svg"
 89 |       :width="size"
 90 |       :height="size"
 91 |       viewBox="0 0 24 24"
 92 |       fill="none"
 93 |       stroke="currentColor"
 94 |       stroke-width="2"
 95 |       stroke-linecap="round"
 96 |       stroke-linejoin="round"
 97 |     >
 98 |       <path d="M8 2v4" />
 99 |       <path d="M16 2v4" />
100 |       <rect width="18" height="18" x="3" y="4" rx="2" />
101 |       <path d="M3 10h18" />
102 |       <motion.circle
103 |         v-for="(dot, index) in DOTS"
104 |         :key="`${dot.cx}-${dot.cy}`"
105 |         :cx="dot.cx"
106 |         :cy="dot.cy"
107 |         r="1"
108 |         fill="currentColor"
109 |         stroke="none"
110 |         :initial="'normal'"
111 |         :variants="variants"
112 |         :animate="currentState"
113 |         :custom="index"
114 |       />
115 |     </svg>
116 |   </div>
117 | </template>
118 | 


--------------------------------------------------------------------------------
/app/components/Lucide/AirVent.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const windVariants = {
 20 |   normal: (custom: unknown) => ({
 21 |     pathLength: 1,
 22 |     opacity: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.3,
 26 |       ease: 'easeInOut',
 27 |       delay: custom as number,
 28 |     },
 29 |   }),
 30 |   animate: (custom: unknown) => ({
 31 |     pathLength: [0, 1],
 32 |     opacity: [0, 1],
 33 |     pathOffset: [1, 0],
 34 |     transition: {
 35 |       duration: 0.5,
 36 |       ease: 'easeInOut',
 37 |       delay: custom as number,
 38 |     },
 39 |   }),
 40 | };
 41 | 
 42 | const isControlled = ref(false);
 43 | const currentState = ref('normal');
 44 | 
 45 | const startAnimation = () => {
 46 |   currentState.value = 'animate';
 47 | };
 48 | 
 49 | const stopAnimation = () => {
 50 |   currentState.value = 'normal';
 51 | };
 52 | 
 53 | const handleMouseEnter = () => {
 54 |   if (!isControlled.value) {
 55 |     startAnimation();
 56 |   } else {
 57 |     emit('startAnimation');
 58 |   }
 59 | };
 60 | 
 61 | const handleMouseLeave = () => {
 62 |   if (!isControlled.value) {
 63 |     stopAnimation();
 64 |   } else {
 65 |     emit('stopAnimation');
 66 |   }
 67 | };
 68 | 
 69 | defineExpose({
 70 |   startAnimation,
 71 |   stopAnimation,
 72 | });
 73 | </script>
 74 | 
 75 | <template>
 76 |   <div
 77 |     :class="[
 78 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 79 |       props.class,
 80 |     ]"
 81 |     @mouseenter="handleMouseEnter"
 82 |     @mouseleave="handleMouseLeave"
 83 |   >
 84 |     <svg
 85 |       xmlns="http://www.w3.org/2000/svg"
 86 |       :width="size"
 87 |       :height="size"
 88 |       viewBox="0 0 24 24"
 89 |       fill="none"
 90 |       stroke="currentColor"
 91 |       stroke-width="2"
 92 |       stroke-linecap="round"
 93 |       stroke-linejoin="round"
 94 |     >
 95 |       <path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
 96 |       <path d="M6 8h12" />
 97 |       <motion.path
 98 |         d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"
 99 |         :variants="windVariants"
100 |         :animate="currentState"
101 |         :custom="0"
102 |       />
103 |       <motion.path
104 |         d="M6.6 15.6A2 2 0 1 0 10 17v-5"
105 |         :variants="windVariants"
106 |         :animate="currentState"
107 |         :custom="0.2"
108 |       />
109 |     </svg>
110 |   </div>
111 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Menu.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const lineVariants = {
 20 |   normal: {
 21 |     rotate: 0,
 22 |     y: 0,
 23 |     opacity: 1
 24 |   },
 25 |   animate: (custom: number) => ({
 26 |     rotate: custom === 1 ? 45 : custom === 3 ? -45 : 0,
 27 |     y: custom === 1 ? 6 : custom === 3 ? -6 : 0,
 28 |     opacity: custom === 2 ? 0 : 1,
 29 |     transition: {
 30 |       type: 'spring',
 31 |       stiffness: 260,
 32 |       damping: 20
 33 |     }
 34 |   })
 35 | }
 36 | 
 37 | const isControlled = ref(false)
 38 | const currentState = ref('normal')
 39 | 
 40 | const startAnimation = () => {
 41 |   currentState.value = 'animate'
 42 | }
 43 | 
 44 | const stopAnimation = () => {
 45 |   currentState.value = 'normal'
 46 | }
 47 | 
 48 | const handleMouseEnter = () => {
 49 |   if (!isControlled.value) {
 50 |     startAnimation()
 51 |   } else {
 52 |     emit('startAnimation')
 53 |   }
 54 | }
 55 | 
 56 | const handleMouseLeave = () => {
 57 |   if (!isControlled.value) {
 58 |     stopAnimation()
 59 |   } else {
 60 |     emit('stopAnimation')
 61 |   }
 62 | }
 63 | 
 64 | defineExpose({
 65 |   startAnimation,
 66 |   stopAnimation
 67 | })
 68 | </script>
 69 | 
 70 | <template>
 71 |   <div
 72 |     :class="[
 73 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 74 |       props.class
 75 |     ]"
 76 |     @mouseenter="handleMouseEnter"
 77 |     @mouseleave="handleMouseLeave"
 78 |   >
 79 |     <svg
 80 |       xmlns="http://www.w3.org/2000/svg"
 81 |       :width="size"
 82 |       :height="size"
 83 |       viewBox="0 0 24 24"
 84 |       fill="none"
 85 |       stroke="currentColor"
 86 |       stroke-width="2"
 87 |       stroke-linecap="round"
 88 |       stroke-linejoin="round"
 89 |     >
 90 |       <motion.line
 91 |         x1="4"
 92 |         y1="6"
 93 |         x2="20"
 94 |         y2="6"
 95 |         :variants="lineVariants"
 96 |         :animate="currentState"
 97 |         :custom="1"
 98 |       />
 99 |       <motion.line
100 |         x1="4"
101 |         y1="12"
102 |         x2="20"
103 |         y2="12"
104 |         :variants="lineVariants"
105 |         :animate="currentState"
106 |         :custom="2"
107 |       />
108 |       <motion.line
109 |         x1="4"
110 |         y1="18"
111 |         x2="20"
112 |         y2="18"
113 |         :variants="lineVariants"
114 |         :animate="currentState"
115 |         :custom="3"
116 |       />
117 |     </svg>
118 |   </div>
119 | </template>
120 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SunMoon.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const sunVariants = {
 20 |   normal: {
 21 |     rotate: 0,
 22 |   },
 23 |   animate: {
 24 |     rotate: [0, -5, 5, -2, 2, 0],
 25 |     transition: {
 26 |       duration: 1.5,
 27 |       ease: 'easeInOut',
 28 |     },
 29 |   },
 30 | };
 31 | 
 32 | const moonVariants = {
 33 |   normal: { opacity: 1 },
 34 |   animate: (i: unknown) => ({
 35 |     opacity: [0, 1],
 36 |     transition: { delay: Number(i) * 0.1, duration: 0.3 },
 37 |   }),
 38 | };
 39 | 
 40 | const isControlled = ref(false);
 41 | const currentState = ref('normal');
 42 | 
 43 | const startAnimation = () => {
 44 |   currentState.value = 'animate';
 45 | };
 46 | 
 47 | const stopAnimation = () => {
 48 |   currentState.value = 'normal';
 49 | };
 50 | 
 51 | const handleMouseEnter = () => {
 52 |   if (!isControlled.value) {
 53 |     startAnimation();
 54 |   } else {
 55 |     emit('startAnimation');
 56 |   }
 57 | };
 58 | 
 59 | const handleMouseLeave = () => {
 60 |   if (!isControlled.value) {
 61 |     stopAnimation();
 62 |   } else {
 63 |     emit('stopAnimation');
 64 |   }
 65 | };
 66 | 
 67 | defineExpose({
 68 |   startAnimation,
 69 |   stopAnimation,
 70 | });
 71 | 
 72 | const rays = [
 73 |   'M12 2v2',
 74 |   'M12 20v2',
 75 |   'm4.9 4.9 1.4 1.4',
 76 |   'm17.7 17.7 1.4 1.4',
 77 |   'M2 12h2',
 78 |   'M20 12h2',
 79 |   'm6.3 17.7-1.4 1.4',
 80 |   'm19.1 4.9-1.4 1.4',
 81 | ];
 82 | </script>
 83 | 
 84 | <template>
 85 |   <div
 86 |     :class="[
 87 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 88 |       props.class,
 89 |     ]"
 90 |     @mouseenter="handleMouseEnter"
 91 |     @mouseleave="handleMouseLeave"
 92 |   >
 93 |     <svg
 94 |       xmlns="http://www.w3.org/2000/svg"
 95 |       :width="size"
 96 |       :height="size"
 97 |       viewBox="0 0 24 24"
 98 |       fill="none"
 99 |       stroke="currentColor"
100 |       stroke-width="2"
101 |       stroke-linecap="round"
102 |       stroke-linejoin="round"
103 |     >
104 |       <motion.g
105 |         :variants="sunVariants"
106 |         :animate="currentState"
107 |       >
108 |         <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4" />
109 |       </motion.g>
110 |       <motion.path
111 |         v-for="(d, index) in rays"
112 |         :key="d"
113 |         :d="d"
114 |         :variants="moonVariants"
115 |         :animate="currentState"
116 |         :custom="index + 1"
117 |       />
118 |     </svg>
119 |   </div>
120 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/BluetoothSearching.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     scale: 1,
 22 |     transition: {
 23 |       repeat: 0,
 24 |     },
 25 |   },
 26 |   animate: {
 27 |     scale: [0, 1, 0.8],
 28 |   },
 29 | };
 30 | 
 31 | const secondVariants = {
 32 |   normal: {
 33 |     opacity: 1,
 34 |   },
 35 |   animate: {
 36 |     opacity: [1, 0.8, 1],
 37 |     transition: { repeat: Infinity },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.path
 95 |         d="m7 7 10 10-5 5V2l5 5L7 17"
 96 |         :variants="secondVariants"
 97 |         :animate="currentState"
 98 |       />
 99 |       <motion.path
100 |         d="M20.83 14.83a4 4 0 0 0 0-5.66"
101 |         :variants="pathVariants"
102 |         :animate="currentState"
103 |         :transition="{
104 |           duration: 0.6,
105 |           delay: 0.2,
106 |           repeat: Infinity,
107 |         }"
108 |       />
109 |       <motion.path
110 |         d="M18 12h.01"
111 |         :variants="pathVariants"
112 |         :animate="currentState"
113 |         :transition="{
114 |           duration: 0.6,
115 |           repeat: Infinity,
116 |         }"
117 |       />
118 |     </svg>
119 |   </div>
120 | </template> 
121 | 


--------------------------------------------------------------------------------
/app/components/Lucide/AArrowUp.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const letterVariants = {
 20 |   normal: { opacity: 1, scale: 1 },
 21 |   animate: {
 22 |     opacity: [0, 1],
 23 |     scale: [0.8, 1],
 24 |     transition: { duration: 0.3 },
 25 |   },
 26 | };
 27 | 
 28 | const arrowVariants = {
 29 |   normal: { opacity: 1, y: 0 },
 30 |   animate: {
 31 |     opacity: [0, 1],
 32 |     y: [10, 0], // Changed from [-10, 0] to animate upward
 33 |     transition: { duration: 0.3, delay: 0.2 },
 34 |   },
 35 | };
 36 | 
 37 | const isControlled = ref(false);
 38 | const currentState = ref('normal');
 39 | 
 40 | const startAnimation = () => {
 41 |   currentState.value = 'animate';
 42 | };
 43 | 
 44 | const stopAnimation = () => {
 45 |   currentState.value = 'normal';
 46 | };
 47 | 
 48 | const handleMouseEnter = () => {
 49 |   if (!isControlled.value) {
 50 |     startAnimation();
 51 |   } else {
 52 |     emit('startAnimation');
 53 |   }
 54 | };
 55 | 
 56 | const handleMouseLeave = () => {
 57 |   if (!isControlled.value) {
 58 |     stopAnimation();
 59 |   } else {
 60 |     emit('stopAnimation');
 61 |   }
 62 | };
 63 | 
 64 | defineExpose({
 65 |   startAnimation,
 66 |   stopAnimation,
 67 | });
 68 | </script>
 69 | 
 70 | <template>
 71 |   <div
 72 |     :class="[
 73 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 74 |       props.class,
 75 |     ]"
 76 |     @mouseenter="handleMouseEnter"
 77 |     @mouseleave="handleMouseLeave"
 78 |   >
 79 |     <svg
 80 |       xmlns="http://www.w3.org/2000/svg"
 81 |       :width="size"
 82 |       :height="size"
 83 |       viewBox="0 0 24 24"
 84 |       fill="none"
 85 |       stroke="currentColor"
 86 |       stroke-width="2"
 87 |       stroke-linecap="round"
 88 |       stroke-linejoin="round"
 89 |     >
 90 |       <!-- Letter A - unchanged -->
 91 |       <motion.path
 92 |         d="M3.5 13h6"
 93 |         :animate="currentState"
 94 |         :variants="letterVariants"
 95 |       />
 96 |       <motion.path
 97 |         d="m2 16 4.5-9 4.5 9"
 98 |         :animate="currentState"
 99 |         :variants="letterVariants"
100 |       />
101 |       <!-- Arrow pointing up - modified -->
102 |       <motion.path
103 |         d="M18 16V7"
104 |         :animate="currentState"
105 |         :variants="arrowVariants"
106 |       />
107 |       <motion.path
108 |         d="m14 11 4-4 4 4"
109 |         :animate="currentState"
110 |         :variants="arrowVariants"
111 |       />
112 |     </svg>
113 |   </div>
114 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/AArrowDown.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const letterVariants = {
 20 |   normal: { opacity: 1, scale: 1 },
 21 |   animate: {
 22 |     opacity: [0, 1],
 23 |     scale: [0.8, 1],
 24 |     transition: { duration: 0.3 },
 25 |   }
 26 | }
 27 | 
 28 | const arrowVariants = {
 29 |   normal: { opacity: 1, y: 0 },
 30 |   animate: {
 31 |     opacity: [0, 1],
 32 |     y: [-10, 0],
 33 |     transition: { duration: 0.3, delay: 0.2 },
 34 |   }
 35 | }
 36 | 
 37 | const isControlled = ref(false)
 38 | const currentState = ref('normal')
 39 | 
 40 | // Animation controls
 41 | const startAnimation = () => {
 42 |   currentState.value = 'animate'
 43 | }
 44 | 
 45 | const stopAnimation = () => {
 46 |   currentState.value = 'normal'
 47 | }
 48 | 
 49 | // Mouse event handlers
 50 | const handleMouseEnter = () => {
 51 |   if (!isControlled.value) {
 52 |     startAnimation()
 53 |   } else {
 54 |     emit('startAnimation')
 55 |   }
 56 | }
 57 | 
 58 | const handleMouseLeave = () => {
 59 |   if (!isControlled.value) {
 60 |     stopAnimation()
 61 |   } else {
 62 |     emit('stopAnimation')
 63 |   }
 64 | }
 65 | 
 66 | // Expose methods for external control
 67 | defineExpose({
 68 |   startAnimation,
 69 |   stopAnimation
 70 | })
 71 | </script>
 72 | 
 73 | <template>
 74 |   <div
 75 |     :class="[
 76 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 77 |       props.class
 78 |     ]"
 79 |     @mouseenter="handleMouseEnter"
 80 |     @mouseleave="handleMouseLeave"
 81 |   >
 82 |     <svg
 83 |       xmlns="http://www.w3.org/2000/svg"
 84 |       :width="size"
 85 |       :height="size"
 86 |       viewBox="0 0 24 24"
 87 |       fill="none"
 88 |       stroke="currentColor"
 89 |       stroke-width="2"
 90 |       stroke-linecap="round"
 91 |       stroke-linejoin="round"
 92 |     >
 93 |       <!-- Letter A -->
 94 |       <motion.path
 95 |         d="M3.5 13h6"
 96 |         :animate="currentState"
 97 |         :variants="letterVariants"
 98 |       />
 99 |       <motion.path
100 |         d="m2 16 4.5-9 4.5 9"
101 |         :animate="currentState"
102 |         :variants="letterVariants"
103 |       />
104 |       <!-- Arrow -->
105 |       <motion.path
106 |         d="M18 7v9"
107 |         :animate="currentState"
108 |         :variants="arrowVariants"
109 |       />
110 |       <motion.path
111 |         d="m14 12 4 4 4-4"
112 |         :animate="currentState"
113 |         :variants="arrowVariants"
114 |       />
115 |     </svg>
116 |   </div>
117 | </template>
118 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareArrowDown.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const squareVariants = {
 20 |   normal: { transition: { duration: 0.4 } },
 21 |   animate: { transition: { duration: 0.6, ease: 'easeInOut' } },
 22 | };
 23 | 
 24 | const pathVariants = {
 25 |   normal: { d: 'm8 12 4 4 4-4', translateY: 0, opacity: 1 },
 26 |   animate: {
 27 |     d: 'm8 12 4 4 4-4',
 28 |     translateY: [0, -3, 0],
 29 |     transition: { duration: 0.4 },
 30 |   },
 31 | };
 32 | 
 33 | const secondPathVariants = {
 34 |   normal: { d: 'M12 8v8', opacity: 1 },
 35 |   animate: {
 36 |     d: ['M12 8v8', 'M12 8v5', 'M12 8v8'],
 37 |     transition: { duration: 0.4 },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.rect
 95 |         width="18"
 96 |         height="18"
 97 |         x="3"
 98 |         y="3"
 99 |         rx="2"
100 |         :variants="squareVariants"
101 |         :animate="currentState"
102 |       />
103 |       <motion.path
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         d="m8 12 4 4 4-4"
107 |       />
108 |       <motion.path
109 |         :variants="secondPathVariants"
110 |         :animate="currentState"
111 |         d="M12 8v8"
112 |       />
113 |     </svg>
114 |   </div>
115 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareArrowRight.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const squareVariants = {
 20 |   normal: { transition: { duration: 0.4 } },
 21 |   animate: { transition: { duration: 0.6, ease: 'easeInOut' } },
 22 | };
 23 | 
 24 | const pathVariants = {
 25 |   normal: { d: 'M8 12h8', opacity: 1 },
 26 |   animate: {
 27 |     d: ['M8 12h8', 'M8 12h5', 'M8 12h8'],
 28 |     transition: { duration: 0.4 },
 29 |   },
 30 | };
 31 | 
 32 | const secondPathVariants = {
 33 |   normal: { d: 'm12 8 4 4-4 4', translateX: 0, opacity: 1 },
 34 |   animate: {
 35 |     d: 'm12 8 4 4-4 4',
 36 |     translateX: [0, -3, 0],
 37 |     transition: { duration: 0.4 },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.rect
 95 |         width="18"
 96 |         height="18"
 97 |         x="3"
 98 |         y="3"
 99 |         rx="2"
100 |         :variants="squareVariants"
101 |         :animate="currentState"
102 |       />
103 |       <motion.path
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         d="M8 12h8"
107 |       />
108 |       <motion.path
109 |         :variants="secondPathVariants"
110 |         :animate="currentState"
111 |         d="m12 8 4 4-4 4"
112 |       />
113 |     </svg>
114 |   </div>
115 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareArrowLeft.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const squareVariants = {
 20 |   normal: { transition: { duration: 0.4 } },
 21 |   animate: { transition: { duration: 0.6, ease: 'easeInOut' } },
 22 | };
 23 | 
 24 | const pathVariants = {
 25 |   normal: { d: 'm12 8-4 4 4 4', translateX: 0, opacity: 1 },
 26 |   animate: {
 27 |     d: 'm12 8-4 4 4 4',
 28 |     translateX: [0, 3, 0],
 29 |     transition: { duration: 0.4 },
 30 |   },
 31 | };
 32 | 
 33 | const secondPathVariants = {
 34 |   normal: { d: 'M16 12H8', opacity: 1 },
 35 |   animate: {
 36 |     d: ['M16 12H8', 'M16 12H13', 'M16 12H8'],
 37 |     transition: { duration: 0.4 },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.rect
 95 |         width="18"
 96 |         height="18"
 97 |         x="3"
 98 |         y="3"
 99 |         rx="2"
100 |         :variants="squareVariants"
101 |         :animate="currentState"
102 |       />
103 |       <motion.path
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         d="m12 8-4 4 4 4"
107 |       />
108 |       <motion.path
109 |         :variants="secondPathVariants"
110 |         :animate="currentState"
111 |         d="M16 12H8"
112 |       />
113 |     </svg>
114 |   </div>
115 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareArrowUp.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const squareVariants = {
 20 |   normal: { transition: { duration: 0.4 } },
 21 |   animate: { transition: { duration: 0.6, ease: 'easeInOut' } },
 22 | };
 23 | 
 24 | const pathVariants = {
 25 |   normal: { d: 'm16 12-4-4-4 4', translateY: 0, opacity: 1 },
 26 |   animate: {
 27 |     d: 'm16 12-4-4-4 4',
 28 |     translateY: [0, 3, 0],
 29 |     transition: { duration: 0.4 },
 30 |   },
 31 | };
 32 | 
 33 | const secondPathVariants = {
 34 |   normal: { d: 'M12 16V8', opacity: 1 },
 35 |   animate: {
 36 |     d: ['M12 16V8', 'M12 16V13', 'M12 16V8'],
 37 |     transition: { duration: 0.4 },
 38 |   },
 39 | };
 40 | 
 41 | const isControlled = ref(false);
 42 | const currentState = ref('normal');
 43 | 
 44 | const startAnimation = () => {
 45 |   currentState.value = 'animate';
 46 | };
 47 | 
 48 | const stopAnimation = () => {
 49 |   currentState.value = 'normal';
 50 | };
 51 | 
 52 | const handleMouseEnter = () => {
 53 |   if (!isControlled.value) {
 54 |     startAnimation();
 55 |   } else {
 56 |     emit('startAnimation');
 57 |   }
 58 | };
 59 | 
 60 | const handleMouseLeave = () => {
 61 |   if (!isControlled.value) {
 62 |     stopAnimation();
 63 |   } else {
 64 |     emit('stopAnimation');
 65 |   }
 66 | };
 67 | 
 68 | defineExpose({
 69 |   startAnimation,
 70 |   stopAnimation,
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div
 76 |     :class="[
 77 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 78 |       props.class,
 79 |     ]"
 80 |     @mouseenter="handleMouseEnter"
 81 |     @mouseleave="handleMouseLeave"
 82 |   >
 83 |     <svg
 84 |       xmlns="http://www.w3.org/2000/svg"
 85 |       :width="size"
 86 |       :height="size"
 87 |       viewBox="0 0 24 24"
 88 |       fill="none"
 89 |       stroke="currentColor"
 90 |       stroke-width="2"
 91 |       stroke-linecap="round"
 92 |       stroke-linejoin="round"
 93 |     >
 94 |       <motion.rect
 95 |         width="18"
 96 |         height="18"
 97 |         x="3"
 98 |         y="3"
 99 |         rx="2"
100 |         :variants="squareVariants"
101 |         :animate="currentState"
102 |       />
103 |       <motion.path
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         d="m16 12-4-4-4 4"
107 |       />
108 |       <motion.path
109 |         :variants="secondPathVariants"
110 |         :animate="currentState"
111 |         d="M12 16V8"
112 |       />
113 |     </svg>
114 |   </div>
115 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/CloudSun.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const cloudVariants = {
 20 |   normal: {
 21 |     x: 0,
 22 |     y: 0,
 23 |   },
 24 |   animate: {
 25 |     x: [-1, 1, -1, 1, 0],
 26 |     y: [-1, 1, -1, 1, 0],
 27 |     transition: {
 28 |       duration: 1,
 29 |       ease: 'easeInOut',
 30 |     },
 31 |   },
 32 | };
 33 | 
 34 | const sunVariants = {
 35 |   normal: { opacity: 1 },
 36 |   animate: (i: unknown) => ({
 37 |     opacity: [0, 1],
 38 |     transition: { delay: Number(i) * 0.1, duration: 0.3 },
 39 |   }),
 40 | };
 41 | 
 42 | const isControlled = ref(false);
 43 | const currentState = ref('normal');
 44 | 
 45 | const startAnimation = () => {
 46 |   currentState.value = 'animate';
 47 | };
 48 | 
 49 | const stopAnimation = () => {
 50 |   currentState.value = 'normal';
 51 | };
 52 | 
 53 | const handleMouseEnter = () => {
 54 |   if (!isControlled.value) {
 55 |     startAnimation();
 56 |   } else {
 57 |     emit('startAnimation');
 58 |   }
 59 | };
 60 | 
 61 | const handleMouseLeave = () => {
 62 |   if (!isControlled.value) {
 63 |     stopAnimation();
 64 |   } else {
 65 |     emit('stopAnimation');
 66 |   }
 67 | };
 68 | 
 69 | defineExpose({
 70 |   startAnimation,
 71 |   stopAnimation,
 72 | });
 73 | 
 74 | const sunRays = [
 75 |   'M12 2v2',
 76 |   'm4.93 4.93 1.41 1.41',
 77 |   'M20 12h2',
 78 |   'm19.07 4.93-1.41 1.41',
 79 |   'M15.947 12.65a4 4 0 0 0-5.925-4.128',
 80 | ];
 81 | </script>
 82 | 
 83 | <template>
 84 |   <div
 85 |     :class="[
 86 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 87 |       props.class,
 88 |     ]"
 89 |     @mouseenter="handleMouseEnter"
 90 |     @mouseleave="handleMouseLeave"
 91 |   >
 92 |     <svg
 93 |       xmlns="http://www.w3.org/2000/svg"
 94 |       :width="size"
 95 |       :height="size"
 96 |       viewBox="0 0 24 24"
 97 |       fill="none"
 98 |       stroke="currentColor"
 99 |       stroke-width="2"
100 |       stroke-linecap="round"
101 |       stroke-linejoin="round"
102 |       style="overflow: visible"
103 |     >
104 |       <motion.g
105 |         :variants="cloudVariants"
106 |         :animate="currentState"
107 |       >
108 |         <path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z" />
109 |       </motion.g>
110 |       <motion.path
111 |         v-for="(d, index) in sunRays"
112 |         :key="d"
113 |         :d="d"
114 |         :variants="sunVariants"
115 |         :animate="currentState"
116 |         :custom="index + 1"
117 |       />
118 |     </svg>
119 |   </div>
120 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Clock.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const handTransition = {
 20 |   duration: 0.6,
 21 |   ease: [0.4, 0, 0.2, 1]
 22 | }
 23 | 
 24 | const handVariants = {
 25 |   normal: {
 26 |     rotate: 0,
 27 |     originX: '50%',
 28 |     originY: '50%'
 29 |   },
 30 |   animate: {
 31 |     rotate: 360
 32 |   }
 33 | }
 34 | 
 35 | const minuteHandTransition = {
 36 |   duration: 0.5,
 37 |   ease: 'easeInOut'
 38 | }
 39 | 
 40 | const minuteHandVariants = {
 41 |   normal: {
 42 |     rotate: 0,
 43 |     originX: '50%',
 44 |     originY: '50%'
 45 |   },
 46 |   animate: {
 47 |     rotate: 45
 48 |   }
 49 | }
 50 | 
 51 | const isControlled = ref(false)
 52 | const currentState = ref('normal')
 53 | 
 54 | const startAnimation = () => {
 55 |   currentState.value = 'animate'
 56 | }
 57 | 
 58 | const stopAnimation = () => {
 59 |   currentState.value = 'normal'
 60 | }
 61 | 
 62 | const handleMouseEnter = () => {
 63 |   if (!isControlled.value) {
 64 |     startAnimation()
 65 |   } else {
 66 |     emit('startAnimation')
 67 |   }
 68 | }
 69 | 
 70 | const handleMouseLeave = () => {
 71 |   if (!isControlled.value) {
 72 |     stopAnimation()
 73 |   } else {
 74 |     emit('stopAnimation')
 75 |   }
 76 | }
 77 | 
 78 | defineExpose({
 79 |   startAnimation,
 80 |   stopAnimation
 81 | })
 82 | </script>
 83 | 
 84 | <template>
 85 |   <div
 86 |     :class="[
 87 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 88 |       props.class
 89 |     ]"
 90 |     @mouseenter="handleMouseEnter"
 91 |     @mouseleave="handleMouseLeave"
 92 |   >
 93 |     <svg
 94 |       xmlns="http://www.w3.org/2000/svg"
 95 |       :width="size"
 96 |       :height="size"
 97 |       viewBox="0 0 24 24"
 98 |       fill="none"
 99 |       stroke="currentColor"
100 |       stroke-width="2"
101 |       stroke-linecap="round"
102 |       stroke-linejoin="round"
103 |     >
104 |       <circle cx="12" cy="12" r="10" />
105 |       <motion.line
106 |         x1="12"
107 |         y1="12"
108 |         x2="12"
109 |         y2="6"
110 |         :variants="handVariants"
111 |         :animate="currentState"
112 |         :initial="'normal'"
113 |         :transition="handTransition"
114 |       />
115 |       <motion.line
116 |         x1="12"
117 |         y1="12"
118 |         x2="16"
119 |         y2="12"
120 |         :variants="minuteHandVariants"
121 |         :animate="currentState"
122 |         :initial="'normal'"
123 |         :transition="minuteHandTransition"
124 |       />
125 |     </svg>
126 |   </div>
127 | </template>
128 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareStack.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const rectVariants = {
 20 |   normal: { scale: 1 },
 21 |   animate: {
 22 |     scale: [1, 0.8, 1],
 23 |     transition: { duration: 0.4 },
 24 |   }
 25 | }
 26 | 
 27 | const pathVariants = {
 28 |   normal: { scale: 1 },
 29 |   animate: {
 30 |     scale: [1, 0.9, 1]
 31 |   }
 32 | }
 33 | 
 34 | const isControlled = ref(false)
 35 | const currentState = ref('normal')
 36 | 
 37 | // Animation controls
 38 | const startAnimation = () => {
 39 |   currentState.value = 'animate'
 40 | }
 41 | 
 42 | const stopAnimation = () => {
 43 |   currentState.value = 'normal'
 44 | }
 45 | 
 46 | // Mouse event handlers
 47 | const handleMouseEnter = () => {
 48 |   if (!isControlled.value) {
 49 |     startAnimation()
 50 |   } else {
 51 |     emit('startAnimation')
 52 |   }
 53 | }
 54 | 
 55 | const handleMouseLeave = () => {
 56 |   if (!isControlled.value) {
 57 |     stopAnimation()
 58 |   } else {
 59 |     emit('stopAnimation')
 60 |   }
 61 | }
 62 | 
 63 | // Expose methods for external control
 64 | defineExpose({
 65 |   startAnimation,
 66 |   stopAnimation
 67 | })
 68 | </script>
 69 | 
 70 | <template>
 71 |   <div
 72 |     :class="[
 73 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 74 |       props.class
 75 |     ]"
 76 |     @mouseenter="handleMouseEnter"
 77 |     @mouseleave="handleMouseLeave"
 78 |   >
 79 |     <svg
 80 |       xmlns="http://www.w3.org/2000/svg"
 81 |       :width="size"
 82 |       :height="size"
 83 |       viewBox="0 0 24 24"
 84 |       fill="none"
 85 |       stroke="currentColor"
 86 |       stroke-width="2"
 87 |       stroke-linecap="round"
 88 |       stroke-linejoin="round"
 89 |     >
 90 |       <motion.path
 91 |         d="M4 10c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"
 92 |         :variants="pathVariants"
 93 |         :animate="currentState"
 94 |         :transition="{
 95 |           delay: 0.3,
 96 |           duration: 0.4
 97 |         }"
 98 |       />
 99 |       <motion.path
100 |         d="M10 16c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2"
101 |         :variants="pathVariants"
102 |         :animate="currentState"
103 |         :transition="{
104 |           delay: 0.2,
105 |           duration: 0.2
106 |         }"
107 |       />
108 |       <motion.rect
109 |         width="8"
110 |         height="8"
111 |         x="14"
112 |         y="14"
113 |         rx="2"
114 |         :variants="rectVariants"
115 |         :animate="currentState"
116 |       />
117 |     </svg>
118 |   </div>
119 | </template>
120 | 


--------------------------------------------------------------------------------
/app/components/Lucide/SquareActivity.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const squareVariants = {
 42 |   normal: {
 43 |     transition: {
 44 |       duration: 0.4,
 45 |     },
 46 |   },
 47 |   animate: {
 48 |     transition: {
 49 |       duration: 0.6,
 50 |       ease: 'easeInOut',
 51 |     },
 52 |   },
 53 | };
 54 | 
 55 | const isControlled = ref(false);
 56 | const currentState = ref('normal');
 57 | 
 58 | const startAnimation = () => {
 59 |   currentState.value = 'animate';
 60 | };
 61 | 
 62 | const stopAnimation = () => {
 63 |   currentState.value = 'normal';
 64 | };
 65 | 
 66 | const handleMouseEnter = () => {
 67 |   if (!isControlled.value) {
 68 |     startAnimation();
 69 |   } else {
 70 |     emit('startAnimation');
 71 |   }
 72 | };
 73 | 
 74 | const handleMouseLeave = () => {
 75 |   if (!isControlled.value) {
 76 |     stopAnimation();
 77 |   } else {
 78 |     emit('stopAnimation');
 79 |   }
 80 | };
 81 | 
 82 | defineExpose({
 83 |   startAnimation,
 84 |   stopAnimation,
 85 | });
 86 | </script>
 87 | 
 88 | <template>
 89 |   <div
 90 |     :class="[
 91 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 92 |       props.class,
 93 |     ]"
 94 |     @mouseenter="handleMouseEnter"
 95 |     @mouseleave="handleMouseLeave"
 96 |   >
 97 |     <svg
 98 |       xmlns="http://www.w3.org/2000/svg"
 99 |       :width="size"
100 |       :height="size"
101 |       viewBox="0 0 24 24"
102 |       fill="none"
103 |       stroke="currentColor"
104 |       stroke-width="2"
105 |       stroke-linecap="round"
106 |       stroke-linejoin="round"
107 |     >
108 |       <motion.rect
109 |         width="18"
110 |         height="18"
111 |         x="3"
112 |         y="3"
113 |         rx="2"
114 |         :variants="squareVariants"
115 |         :animate="currentState"
116 |         :initial="'normal'"
117 |       />
118 |       <motion.path
119 |         d="M17 12h-2l-2 5-2-10-2 5H7"
120 |         :variants="pathVariants"
121 |         :animate="currentState"
122 |         :initial="'normal'"
123 |       />
124 |     </svg>
125 |   </div>
126 | </template>
127 | 


--------------------------------------------------------------------------------
/app/components/Lucide/UndoDot.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | // Custom easing function similar to cubicBezier in Framer Motion
 20 | const customEasing = [0.25, 0.1, 0.25, 1];
 21 | 
 22 | const firstPathVariants = {
 23 |   normal: { translateX: 0, translateY: 0, rotate: 0 },
 24 |   animate: {
 25 |     translateX: [0, 2.1, 0],
 26 |     translateY: [0, -1.4, 0],
 27 |     rotate: [0, 12, 0],
 28 |     transition: { duration: 0.6, ease: customEasing }
 29 |   }
 30 | };
 31 | 
 32 | const secondPathVariants = {
 33 |   normal: { pathLength: 1 },
 34 |   animate: { 
 35 |     pathLength: [1, 0.8, 1],
 36 |     transition: { duration: 0.6, ease: customEasing }
 37 |   }
 38 | };
 39 | 
 40 | const circleVariants = {
 41 |   normal: { scale: 1 },
 42 |   animate: { 
 43 |     scale: [1, 1.2, 1],
 44 |     transition: { duration: 0.6, ease: customEasing }
 45 |   }
 46 | };
 47 | 
 48 | const isControlled = ref(false);
 49 | const currentState = ref('normal');
 50 | 
 51 | const startAnimation = () => {
 52 |   currentState.value = 'animate';
 53 | };
 54 | 
 55 | const stopAnimation = () => {
 56 |   currentState.value = 'normal';
 57 | };
 58 | 
 59 | const handleMouseEnter = () => {
 60 |   if (!isControlled.value) {
 61 |     startAnimation();
 62 |   } else {
 63 |     emit('startAnimation');
 64 |   }
 65 | };
 66 | 
 67 | const handleMouseLeave = () => {
 68 |   if (!isControlled.value) {
 69 |     stopAnimation();
 70 |   } else {
 71 |     emit('stopAnimation');
 72 |   }
 73 | };
 74 | 
 75 | defineExpose({
 76 |   startAnimation,
 77 |   stopAnimation,
 78 | });
 79 | </script>
 80 | 
 81 | <template>
 82 |   <div
 83 |     :class="[
 84 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 85 |       props.class,
 86 |     ]"
 87 |     @mouseenter="handleMouseEnter"
 88 |     @mouseleave="handleMouseLeave"
 89 |   >
 90 |     <svg
 91 |       xmlns="http://www.w3.org/2000/svg"
 92 |       :width="size"
 93 |       :height="size"
 94 |       viewBox="0 0 24 24"
 95 |       fill="none"
 96 |       stroke="currentColor"
 97 |       stroke-width="2"
 98 |       stroke-linecap="round"
 99 |       stroke-linejoin="round"
100 |     >
101 |       <motion.path
102 |         d="M3 7v6h6"
103 |         :animate="currentState"
104 |         :variants="firstPathVariants"
105 |       />
106 |       <motion.path
107 |         d="M21 17a9 9 0 0 0-15-6.7L3 13"
108 |         :animate="currentState"
109 |         :variants="secondPathVariants"
110 |       />
111 |       <motion.circle
112 |         cx="12"
113 |         cy="17"
114 |         r="1"
115 |         :animate="currentState"
116 |         :variants="circleVariants"
117 |       />
118 |     </svg>
119 |   </div>
120 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/RedoDot.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | // Custom easing function similar to cubicBezier in Framer Motion
 20 | const customEasing = [0.25, 0.1, 0.25, 1];
 21 | 
 22 | const firstPathVariants = {
 23 |   normal: { translateX: 0, translateY: 0, rotate: 0 },
 24 |   animate: {
 25 |     translateX: [0, -2.1, 0],
 26 |     translateY: [0, -1.4, 0],
 27 |     rotate: [0, -12, 0],
 28 |     transition: { duration: 0.6, ease: customEasing }
 29 |   }
 30 | };
 31 | 
 32 | const secondPathVariants = {
 33 |   normal: { pathLength: 1 },
 34 |   animate: { 
 35 |     pathLength: [1, 0.8, 1],
 36 |     transition: { duration: 0.6, ease: customEasing }
 37 |   }
 38 | };
 39 | 
 40 | const circleVariants = {
 41 |   normal: { scale: 1 },
 42 |   animate: { 
 43 |     scale: [1, 1.2, 1],
 44 |     transition: { duration: 0.6, ease: customEasing }
 45 |   }
 46 | };
 47 | 
 48 | const isControlled = ref(false);
 49 | const currentState = ref('normal');
 50 | 
 51 | const startAnimation = () => {
 52 |   currentState.value = 'animate';
 53 | };
 54 | 
 55 | const stopAnimation = () => {
 56 |   currentState.value = 'normal';
 57 | };
 58 | 
 59 | const handleMouseEnter = () => {
 60 |   if (!isControlled.value) {
 61 |     startAnimation();
 62 |   } else {
 63 |     emit('startAnimation');
 64 |   }
 65 | };
 66 | 
 67 | const handleMouseLeave = () => {
 68 |   if (!isControlled.value) {
 69 |     stopAnimation();
 70 |   } else {
 71 |     emit('stopAnimation');
 72 |   }
 73 | };
 74 | 
 75 | defineExpose({
 76 |   startAnimation,
 77 |   stopAnimation,
 78 | });
 79 | </script>
 80 | 
 81 | <template>
 82 |   <div
 83 |     :class="[
 84 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 85 |       props.class,
 86 |     ]"
 87 |     @mouseenter="handleMouseEnter"
 88 |     @mouseleave="handleMouseLeave"
 89 |   >
 90 |     <svg
 91 |       xmlns="http://www.w3.org/2000/svg"
 92 |       :width="size"
 93 |       :height="size"
 94 |       viewBox="0 0 24 24"
 95 |       fill="none"
 96 |       stroke="currentColor"
 97 |       stroke-width="2"
 98 |       stroke-linecap="round"
 99 |       stroke-linejoin="round"
100 |     >
101 |       <motion.path
102 |         d="M21 7v6h-6"
103 |         :animate="currentState"
104 |         :variants="firstPathVariants"
105 |       />
106 |       <motion.path
107 |         d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"
108 |         :animate="currentState"
109 |         :variants="secondPathVariants"
110 |       />
111 |       <motion.circle
112 |         cx="12"
113 |         cy="17"
114 |         r="1"
115 |         :animate="currentState"
116 |         :variants="circleVariants"
117 |       />
118 |     </svg>
119 |   </div>
120 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Tornado.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     x: 0,
 22 |     opacity: 1,
 23 |     transition: {
 24 |       duration: 0.3,
 25 |       ease: 'easeInOut',
 26 |     },
 27 |   },
 28 |   animate: (custom: unknown) => ({
 29 |     x: [0, (custom as number) * 1, 0],
 30 |     opacity: 1,
 31 |     transition: {
 32 |       x: {
 33 |         duration: 0.6,
 34 |         repeat: 0.7,
 35 |         repeatType: 'reverse',
 36 |         ease: 'easeInOut',
 37 |         delay: (custom as number) * 0.1,
 38 |       },
 39 |     },
 40 |   }),
 41 | };
 42 | 
 43 | const isControlled = ref(false);
 44 | const currentState = ref('normal');
 45 | 
 46 | const startAnimation = () => {
 47 |   currentState.value = 'animate';
 48 | };
 49 | 
 50 | const stopAnimation = () => {
 51 |   currentState.value = 'normal';
 52 | };
 53 | 
 54 | const handleMouseEnter = () => {
 55 |   if (!isControlled.value) {
 56 |     startAnimation();
 57 |   } else {
 58 |     emit('startAnimation');
 59 |   }
 60 | };
 61 | 
 62 | const handleMouseLeave = () => {
 63 |   if (!isControlled.value) {
 64 |     stopAnimation();
 65 |   } else {
 66 |     emit('stopAnimation');
 67 |   }
 68 | };
 69 | 
 70 | defineExpose({
 71 |   startAnimation,
 72 |   stopAnimation,
 73 | });
 74 | </script>
 75 | 
 76 | <template>
 77 |   <div
 78 |     :class="[
 79 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 80 |       props.class,
 81 |     ]"
 82 |     @mouseenter="handleMouseEnter"
 83 |     @mouseleave="handleMouseLeave"
 84 |   >
 85 |     <svg
 86 |       xmlns="http://www.w3.org/2000/svg"
 87 |       :width="size"
 88 |       :height="size"
 89 |       viewBox="0 0 24 24"
 90 |       fill="none"
 91 |       stroke="currentColor"
 92 |       stroke-width="2"
 93 |       stroke-linecap="round"
 94 |       stroke-linejoin="round"
 95 |     >
 96 |       <motion.path
 97 |         d="M21 4H3"
 98 |         :variants="pathVariants"
 99 |         :animate="currentState"
100 |         :custom="1"
101 |       />
102 |       <motion.path
103 |         d="M18 8H6"
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         :custom="2"
107 |       />
108 |       <motion.path
109 |         d="M19 12H9"
110 |         :variants="pathVariants"
111 |         :animate="currentState"
112 |         :custom="3"
113 |       />
114 |       <motion.path
115 |         d="M16 16h-6"
116 |         :variants="pathVariants"
117 |         :animate="currentState"
118 |         :custom="4"
119 |       />
120 |       <motion.path
121 |         d="M11 20H9"
122 |         :variants="pathVariants"
123 |         :animate="currentState"
124 |         :custom="5"
125 |       />
126 |     </svg>
127 |   </div>
128 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Twitch.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const lineVariants = {
 42 |   normal: {
 43 |     opacity: 1,
 44 |     pathLength: 1,
 45 |     pathOffset: 0,
 46 |     transition: {
 47 |       duration: 0.4,
 48 |       opacity: { duration: 0.1 },
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     opacity: [0, 1],
 53 |     pathLength: [0, 1],
 54 |     pathOffset: [1, 0],
 55 |     transition: {
 56 |       duration: 0.6,
 57 |       ease: 'linear',
 58 |       opacity: { duration: 0.1 },
 59 |     },
 60 |   },
 61 | };
 62 | 
 63 | const isControlled = ref(false);
 64 | const currentState = ref('normal');
 65 | 
 66 | const startAnimation = () => {
 67 |   currentState.value = 'animate';
 68 | };
 69 | 
 70 | const stopAnimation = () => {
 71 |   currentState.value = 'normal';
 72 | };
 73 | 
 74 | const handleMouseEnter = () => {
 75 |   if (!isControlled.value) {
 76 |     startAnimation();
 77 |   } else {
 78 |     emit('startAnimation');
 79 |   }
 80 | };
 81 | 
 82 | const handleMouseLeave = () => {
 83 |   if (!isControlled.value) {
 84 |     stopAnimation();
 85 |   } else {
 86 |     emit('stopAnimation');
 87 |   }
 88 | };
 89 | 
 90 | defineExpose({
 91 |   startAnimation,
 92 |   stopAnimation,
 93 | });
 94 | </script>
 95 | 
 96 | <template>
 97 |   <div
 98 |     :class="[
 99 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
100 |       props.class,
101 |     ]"
102 |     @mouseenter="handleMouseEnter"
103 |     @mouseleave="handleMouseLeave"
104 |   >
105 |     <svg
106 |       xmlns="http://www.w3.org/2000/svg"
107 |       :width="size"
108 |       :height="size"
109 |       viewBox="0 0 24 24"
110 |       fill="none"
111 |       stroke="currentColor"
112 |       stroke-width="2"
113 |       stroke-linecap="round"
114 |       stroke-linejoin="round"
115 |     >
116 |       <motion.path
117 |         d="M21 2H3v16h5v4l4-4h5l4-4V2z"
118 |         :variants="pathVariants"
119 |         :animate="currentState"
120 |       />
121 |       <motion.path
122 |         d="M11 11V7"
123 |         :variants="lineVariants"
124 |         :animate="currentState"
125 |       />
126 |       <motion.path
127 |         d="M16 11V7"
128 |         :variants="lineVariants"
129 |         :animate="currentState"
130 |       />
131 |     </svg>
132 |   </div>
133 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Youtube.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const triangleVariants = {
 42 |   normal: {
 43 |     opacity: 1,
 44 |     pathLength: 1,
 45 |     pathOffset: 0,
 46 |     transition: {
 47 |       duration: 0.4,
 48 |       opacity: { duration: 0.1 },
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     opacity: [0, 1],
 53 |     pathLength: [0, 1],
 54 |     pathOffset: [1, 0],
 55 |     transition: {
 56 |       duration: 0.6,
 57 |       ease: 'linear',
 58 |       opacity: { duration: 0.1 },
 59 |     },
 60 |   },
 61 | };
 62 | 
 63 | const isControlled = ref(false);
 64 | const currentState = ref('normal');
 65 | 
 66 | const startAnimation = () => {
 67 |   currentState.value = 'animate';
 68 | };
 69 | 
 70 | const stopAnimation = () => {
 71 |   currentState.value = 'normal';
 72 | };
 73 | 
 74 | const handleMouseEnter = () => {
 75 |   if (!isControlled.value) {
 76 |     startAnimation();
 77 |   } else {
 78 |     emit('startAnimation');
 79 |   }
 80 | };
 81 | 
 82 | const handleMouseLeave = () => {
 83 |   if (!isControlled.value) {
 84 |     stopAnimation();
 85 |   } else {
 86 |     emit('stopAnimation');
 87 |   }
 88 | };
 89 | 
 90 | defineExpose({
 91 |   startAnimation,
 92 |   stopAnimation,
 93 | });
 94 | </script>
 95 | 
 96 | <template>
 97 |   <div
 98 |     :class="[
 99 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
100 |       props.class,
101 |     ]"
102 |     @mouseenter="handleMouseEnter"
103 |     @mouseleave="handleMouseLeave"
104 |   >
105 |     <svg
106 |       xmlns="http://www.w3.org/2000/svg"
107 |       :width="size"
108 |       :height="size"
109 |       viewBox="0 0 24 24"
110 |       fill="none"
111 |       stroke="currentColor"
112 |       stroke-width="2"
113 |       stroke-linecap="round"
114 |       stroke-linejoin="round"
115 |     >
116 |       <motion.path
117 |         d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"
118 |         :variants="pathVariants"
119 |         :animate="currentState"
120 |       />
121 |       <motion.path
122 |         d="M10 15l5-3-5-3z"
123 |         :variants="triangleVariants"
124 |         :animate="currentState"
125 |       />
126 |     </svg>
127 |   </div>
128 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Delete.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const lidVariants = {
 20 |   normal: { y: 0 },
 21 |   animate: { y: -1.1, rotate: 4 },
 22 | };
 23 | 
 24 | const springTransition = {
 25 |   type: 'spring',
 26 |   stiffness: 500,
 27 |   damping: 30,
 28 | };
 29 | 
 30 | const isControlled = ref(false);
 31 | const currentState = ref('normal');
 32 | 
 33 | const startAnimation = () => {
 34 |   currentState.value = 'animate';
 35 | };
 36 | 
 37 | const stopAnimation = () => {
 38 |   currentState.value = 'normal';
 39 | };
 40 | 
 41 | const handleMouseEnter = () => {
 42 |   if (!isControlled.value) {
 43 |     startAnimation();
 44 |   } else {
 45 |     emit('startAnimation');
 46 |   }
 47 | };
 48 | 
 49 | const handleMouseLeave = () => {
 50 |   if (!isControlled.value) {
 51 |     stopAnimation();
 52 |   } else {
 53 |     emit('stopAnimation');
 54 |   }
 55 | };
 56 | 
 57 | defineExpose({
 58 |   startAnimation,
 59 |   stopAnimation,
 60 | });
 61 | </script>
 62 | 
 63 | <template>
 64 |   <div
 65 |     :class="[
 66 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 67 |       props.class,
 68 |     ]"
 69 |     @mouseenter="handleMouseEnter"
 70 |     @mouseleave="handleMouseLeave"
 71 |   >
 72 |     <svg
 73 |       xmlns="http://www.w3.org/2000/svg"
 74 |       :width="size"
 75 |       :height="size"
 76 |       viewBox="0 0 24 24"
 77 |       fill="none"
 78 |       stroke="currentColor"
 79 |       stroke-width="2"
 80 |       stroke-linecap="round"
 81 |       stroke-linejoin="round"
 82 |     >
 83 |       <motion.g
 84 |         :variants="lidVariants"
 85 |         :animate="currentState"
 86 |         :transition="springTransition"
 87 |       >
 88 |         <path d="M3 6h18" />
 89 |         <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
 90 |       </motion.g>
 91 |       <motion.path
 92 |         d="M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8"
 93 |         :variants="{
 94 |           normal: { d: 'M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8' },
 95 |           animate: { d: 'M19 9v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V9' },
 96 |         }"
 97 |         :animate="currentState"
 98 |         :transition="springTransition"
 99 |       />
100 |       <motion.line
101 |         x1="10"
102 |         x2="10"
103 |         y1="11"
104 |         y2="17"
105 |         :variants="{
106 |           normal: { y1: 11, y2: 17 },
107 |           animate: { y1: 11.5, y2: 17.5 },
108 |         }"
109 |         :animate="currentState"
110 |         :transition="springTransition"
111 |       />
112 |       <motion.line
113 |         x1="14"
114 |         x2="14"
115 |         y1="11"
116 |         y2="17"
117 |         :variants="{
118 |           normal: { y1: 11, y2: 17 },
119 |           animate: { y1: 11.5, y2: 17.5 },
120 |         }"
121 |         :animate="currentState"
122 |         :transition="springTransition"
123 |       />
124 |     </svg>
125 |   </div>
126 | </template>
127 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Earth.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const circleVariants = {
 20 |   normal: {
 21 |     pathLength: 1,
 22 |     opacity: 1,
 23 |   },
 24 |   animate: {
 25 |     pathLength: [0, 1],
 26 |     opacity: [0, 1],
 27 |   },
 28 | };
 29 | 
 30 | const pathVariants = {
 31 |   normal: {
 32 |     pathLength: 1,
 33 |     opacity: 1,
 34 |     pathOffset: 0,
 35 |   },
 36 |   animate: {
 37 |     pathLength: [0, 1],
 38 |     opacity: [0, 1],
 39 |     pathOffset: [1, 0],
 40 |   },
 41 | };
 42 | 
 43 | const isControlled = ref(false);
 44 | const currentState = ref('normal');
 45 | 
 46 | const startAnimation = () => {
 47 |   currentState.value = 'animate';
 48 | };
 49 | 
 50 | const stopAnimation = () => {
 51 |   currentState.value = 'normal';
 52 | };
 53 | 
 54 | const handleMouseEnter = () => {
 55 |   if (!isControlled.value) {
 56 |     startAnimation();
 57 |   } else {
 58 |     emit('startAnimation');
 59 |   }
 60 | };
 61 | 
 62 | const handleMouseLeave = () => {
 63 |   if (!isControlled.value) {
 64 |     stopAnimation();
 65 |   } else {
 66 |     emit('stopAnimation');
 67 |   }
 68 | };
 69 | 
 70 | defineExpose({
 71 |   startAnimation,
 72 |   stopAnimation,
 73 | });
 74 | </script>
 75 | 
 76 | <template>
 77 |   <div
 78 |     :class="[
 79 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 80 |       props.class,
 81 |     ]"
 82 |     @mouseenter="handleMouseEnter"
 83 |     @mouseleave="handleMouseLeave"
 84 |   >
 85 |     <svg
 86 |       xmlns="http://www.w3.org/2000/svg"
 87 |       :width="size"
 88 |       :height="size"
 89 |       viewBox="0 0 24 24"
 90 |       fill="none"
 91 |       stroke="currentColor"
 92 |       stroke-width="2"
 93 |       stroke-linecap="round"
 94 |       stroke-linejoin="round"
 95 |     >
 96 |       <motion.path
 97 |         d="M21.54 15H17a2 2 0 0 0-2 2v4.54"
 98 |         :variants="pathVariants"
 99 |         :animate="currentState"
100 |         :transition="{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }"
101 |       />
102 |       <motion.path
103 |         d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
104 |         :variants="pathVariants"
105 |         :animate="currentState"
106 |         :transition="{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }"
107 |       />
108 |       <motion.path
109 |         d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"
110 |         :variants="pathVariants"
111 |         :animate="currentState"
112 |         :transition="{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }"
113 |       />
114 |       <motion.circle
115 |         cx="12"
116 |         cy="12"
117 |         r="10"
118 |         :variants="circleVariants"
119 |         :animate="currentState"
120 |         :transition="{ duration: 0.3, delay: 0.1, opacity: { delay: 0.15 } }"
121 |       />
122 |     </svg>
123 |   </div>
124 | </template>
125 | 


--------------------------------------------------------------------------------
/app/components/Lucide/History.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const arrowTransition = {
 20 |   type: 'spring',
 21 |   stiffness: 250,
 22 |   damping: 25,
 23 | };
 24 | 
 25 | const arrowVariants = {
 26 |   normal: {
 27 |     rotate: '0deg',
 28 |   },
 29 |   animate: {
 30 |     rotate: '-50deg',
 31 |   },
 32 | };
 33 | 
 34 | const handTransition = {
 35 |   duration: 0.6,
 36 |   ease: [0.4, 0, 0.2, 1],
 37 | };
 38 | 
 39 | const handVariants = {
 40 |   normal: {
 41 |     rotate: 0,
 42 |     originX: '50%',
 43 |     originY: '50%',
 44 |   },
 45 |   animate: {
 46 |     rotate: -360,
 47 |   },
 48 | };
 49 | 
 50 | const minuteHandTransition = {
 51 |   duration: 0.5,
 52 |   ease: 'easeInOut',
 53 | };
 54 | 
 55 | const minuteHandVariants = {
 56 |   normal: {
 57 |     rotate: 0,
 58 |     originX: '50%',
 59 |     originY: '50%',
 60 |   },
 61 |   animate: {
 62 |     rotate: -45,
 63 |   },
 64 | };
 65 | 
 66 | const isControlled = ref(false);
 67 | const currentState = ref('normal');
 68 | 
 69 | const startAnimation = () => {
 70 |   currentState.value = 'animate';
 71 | };
 72 | 
 73 | const stopAnimation = () => {
 74 |   currentState.value = 'normal';
 75 | };
 76 | 
 77 | const handleMouseEnter = () => {
 78 |   if (!isControlled.value) {
 79 |     startAnimation();
 80 |   } else {
 81 |     emit('startAnimation');
 82 |   }
 83 | };
 84 | 
 85 | const handleMouseLeave = () => {
 86 |   if (!isControlled.value) {
 87 |     stopAnimation();
 88 |   } else {
 89 |     emit('stopAnimation');
 90 |   }
 91 | };
 92 | 
 93 | defineExpose({
 94 |   startAnimation,
 95 |   stopAnimation,
 96 | });
 97 | </script>
 98 | 
 99 | <template>
100 |   <div
101 |     :class="[
102 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
103 |       props.class,
104 |     ]"
105 |     @mouseenter="handleMouseEnter"
106 |     @mouseleave="handleMouseLeave"
107 |   >
108 |     <svg
109 |       xmlns="http://www.w3.org/2000/svg"
110 |       :width="size"
111 |       :height="size"
112 |       viewBox="0 0 24 24"
113 |       fill="none"
114 |       stroke="currentColor"
115 |       stroke-width="2"
116 |       stroke-linecap="round"
117 |       stroke-linejoin="round"
118 |     >
119 |       <motion.g
120 |         :transition="arrowTransition"
121 |         :variants="arrowVariants"
122 |         :animate="currentState"
123 |       >
124 |         <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
125 |         <path d="M3 3v5h5" />
126 |       </motion.g>
127 |       <motion.line
128 |         x1="12"
129 |         y1="12"
130 |         x2="12"
131 |         y2="7"
132 |         :variants="handVariants"
133 |         :animate="currentState"
134 |         :transition="handTransition"
135 |       />
136 |       <motion.line
137 |         x1="12"
138 |         y1="12"
139 |         x2="16"
140 |         y2="14"
141 |         :variants="minuteHandVariants"
142 |         :animate="currentState"
143 |         :transition="minuteHandTransition"
144 |       />
145 |     </svg>
146 |   </div>
147 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/WindArrowDown.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const windVariants = {
 20 |   normal: (custom: unknown) => ({
 21 |     pathLength: 1,
 22 |     opacity: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.3,
 26 |       ease: 'easeInOut',
 27 |       delay: custom as number,
 28 |     },
 29 |   }),
 30 |   animate: (custom: unknown) => ({
 31 |     pathLength: [0, 1],
 32 |     opacity: [0, 1],
 33 |     pathOffset: [1, 0],
 34 |     transition: {
 35 |       duration: 0.5,
 36 |       ease: 'easeInOut',
 37 |       delay: custom as number,
 38 |     },
 39 |   }),
 40 | };
 41 | 
 42 | const arrowVariants = {
 43 |   normal: {
 44 |     y: 0,
 45 |     opacity: 1,
 46 |     transition: {
 47 |       duration: 0.3,
 48 |       ease: 'easeInOut',
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     y: [-10, 0],
 53 |     opacity: [0, 1],
 54 |     transition: {
 55 |       duration: 0.5,
 56 |       ease: 'easeInOut',
 57 |       delay: 0.35,
 58 |     },
 59 |   },
 60 | };
 61 | 
 62 | const isControlled = ref(false);
 63 | const currentState = ref('normal');
 64 | 
 65 | const startAnimation = () => {
 66 |   currentState.value = 'animate';
 67 | };
 68 | 
 69 | const stopAnimation = () => {
 70 |   currentState.value = 'normal';
 71 | };
 72 | 
 73 | const handleMouseEnter = () => {
 74 |   if (!isControlled.value) {
 75 |     startAnimation();
 76 |   } else {
 77 |     emit('startAnimation');
 78 |   }
 79 | };
 80 | 
 81 | const handleMouseLeave = () => {
 82 |   if (!isControlled.value) {
 83 |     stopAnimation();
 84 |   } else {
 85 |     emit('stopAnimation');
 86 |   }
 87 | };
 88 | 
 89 | defineExpose({
 90 |   startAnimation,
 91 |   stopAnimation,
 92 | });
 93 | </script>
 94 | 
 95 | <template>
 96 |   <div
 97 |     :class="[
 98 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 99 |       props.class,
100 |     ]"
101 |     @mouseenter="handleMouseEnter"
102 |     @mouseleave="handleMouseLeave"
103 |   >
104 |     <svg
105 |       xmlns="http://www.w3.org/2000/svg"
106 |       :width="size"
107 |       :height="size"
108 |       viewBox="0 0 24 24"
109 |       fill="none"
110 |       stroke="currentColor"
111 |       stroke-width="2"
112 |       stroke-linecap="round"
113 |       stroke-linejoin="round"
114 |     >
115 |       <!-- Wind paths -->
116 |       <motion.path
117 |         d="M12.8 21.6A2 2 0 1 0 14 18H2"
118 |         :variants="windVariants"
119 |         :animate="currentState"
120 |         :custom="0.2"
121 |       />
122 |       <motion.path
123 |         d="M17.5 10a2.5 2.5 0 1 1 2 4H2"
124 |         :variants="windVariants"
125 |         :animate="currentState"
126 |         :custom="0.4"
127 |       />
128 |       <motion.path
129 |         d="M10 2v8"
130 |         :variants="arrowVariants"
131 |         :animate="currentState"
132 |       />
133 |       <motion.path
134 |         d="m6 6 4 4 4-4"
135 |         :variants="arrowVariants"
136 |         :animate="currentState"
137 |       />
138 |     </svg>
139 |   </div>
140 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Dribbble.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const circleVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const pathVariants = {
 42 |   normal: {
 43 |     opacity: 1,
 44 |     pathLength: 1,
 45 |     pathOffset: 0,
 46 |     transition: {
 47 |       duration: 0.4,
 48 |       opacity: { duration: 0.1 },
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     opacity: [0, 1],
 53 |     pathLength: [0, 1],
 54 |     pathOffset: [1, 0],
 55 |     transition: {
 56 |       duration: 0.6,
 57 |       ease: 'linear',
 58 |       opacity: { duration: 0.1 },
 59 |     },
 60 |   },
 61 | };
 62 | 
 63 | const isControlled = ref(false);
 64 | const currentState = ref('normal');
 65 | 
 66 | const startAnimation = () => {
 67 |   currentState.value = 'animate';
 68 | };
 69 | 
 70 | const stopAnimation = () => {
 71 |   currentState.value = 'normal';
 72 | };
 73 | 
 74 | const handleMouseEnter = () => {
 75 |   if (!isControlled.value) {
 76 |     startAnimation();
 77 |   } else {
 78 |     emit('startAnimation');
 79 |   }
 80 | };
 81 | 
 82 | const handleMouseLeave = () => {
 83 |   if (!isControlled.value) {
 84 |     stopAnimation();
 85 |   } else {
 86 |     emit('stopAnimation');
 87 |   }
 88 | };
 89 | 
 90 | defineExpose({
 91 |   startAnimation,
 92 |   stopAnimation,
 93 | });
 94 | </script>
 95 | 
 96 | <template>
 97 |   <div
 98 |     :class="[
 99 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
100 |       props.class,
101 |     ]"
102 |     @mouseenter="handleMouseEnter"
103 |     @mouseleave="handleMouseLeave"
104 |   >
105 |     <svg
106 |       xmlns="http://www.w3.org/2000/svg"
107 |       :width="size"
108 |       :height="size"
109 |       viewBox="0 0 24 24"
110 |       fill="none"
111 |       stroke="currentColor"
112 |       stroke-width="2"
113 |       stroke-linecap="round"
114 |       stroke-linejoin="round"
115 |     >
116 |       <motion.circle
117 |         cx="12"
118 |         cy="12"
119 |         r="10"
120 |         :variants="circleVariants"
121 |         :animate="currentState"
122 |       />
123 |       <motion.path
124 |         d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94"
125 |         :variants="pathVariants"
126 |         :animate="currentState"
127 |       />
128 |       <motion.path
129 |         d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32"
130 |         :variants="pathVariants"
131 |         :animate="currentState"
132 |       />
133 |       <motion.path
134 |         d="M8.56 2.75c4.37 6 6 9.42 8 17.72"
135 |         :variants="pathVariants"
136 |         :animate="currentState"
137 |       />
138 |     </svg>
139 |   </div>
140 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/AudioLines.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const lineVariants = {
 20 |   line6: {
 21 |     normal: { d: 'M6 6v11' },
 22 |     animate: {
 23 |       d: ['M6 6v11', 'M6 10v3', 'M6 6v11'],
 24 |       transition: {
 25 |         duration: 1.5,
 26 |         repeat: Infinity,
 27 |       },
 28 |     },
 29 |   },
 30 |   line10: {
 31 |     normal: { d: 'M10 3v18' },
 32 |     animate: {
 33 |       d: ['M10 3v18', 'M10 9v5', 'M10 3v18'],
 34 |       transition: {
 35 |         duration: 1,
 36 |         repeat: Infinity,
 37 |       },
 38 |     },
 39 |   },
 40 |   line14: {
 41 |     normal: { d: 'M14 8v7' },
 42 |     animate: {
 43 |       d: ['M14 8v7', 'M14 6v11', 'M14 8v7'],
 44 |       transition: {
 45 |         duration: 0.8,
 46 |         repeat: Infinity,
 47 |       },
 48 |     },
 49 |   },
 50 |   line18: {
 51 |     normal: { d: 'M18 5v13' },
 52 |     animate: {
 53 |       d: ['M18 5v13', 'M18 7v9', 'M18 5v13'],
 54 |       transition: {
 55 |         duration: 1.5,
 56 |         repeat: Infinity,
 57 |       },
 58 |     },
 59 |   },
 60 | };
 61 | 
 62 | const isControlled = ref(false);
 63 | const currentState = ref('normal');
 64 | 
 65 | // Animation controls
 66 | const startAnimation = () => {
 67 |   currentState.value = 'animate';
 68 | };
 69 | 
 70 | const stopAnimation = () => {
 71 |   currentState.value = 'normal';
 72 | };
 73 | 
 74 | // Mouse event handlers
 75 | const handleMouseEnter = () => {
 76 |   if (!isControlled.value) {
 77 |     startAnimation();
 78 |   } else {
 79 |     emit('startAnimation');
 80 |   }
 81 | };
 82 | 
 83 | const handleMouseLeave = () => {
 84 |   if (!isControlled.value) {
 85 |     stopAnimation();
 86 |   } else {
 87 |     emit('stopAnimation');
 88 |   }
 89 | };
 90 | 
 91 | // Expose methods for external control
 92 | defineExpose({
 93 |   startAnimation,
 94 |   stopAnimation,
 95 | });
 96 | </script>
 97 | 
 98 | <template>
 99 |   <div
100 |     :class="[
101 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
102 |       props.class,
103 |     ]"
104 |     @mouseenter="handleMouseEnter"
105 |     @mouseleave="handleMouseLeave"
106 |   >
107 |     <svg
108 |       xmlns="http://www.w3.org/2000/svg"
109 |       :width="size"
110 |       :height="size"
111 |       viewBox="0 0 24 24"
112 |       fill="none"
113 |       stroke="currentColor"
114 |       stroke-width="2"
115 |       stroke-linecap="round"
116 |       stroke-linejoin="round"
117 |     >
118 |       <path d="M2 10v3" />
119 |       <motion.path
120 |         d="M6 6v11"
121 |         :animate="currentState"
122 |         :variants="lineVariants.line6"
123 |       />
124 |       <motion.path
125 |         d="M10 3v18"
126 |         :animate="currentState"
127 |         :variants="lineVariants.line10"
128 |       />
129 |       <motion.path
130 |         d="M14 8v7"
131 |         :animate="currentState"
132 |         :variants="lineVariants.line14"
133 |       />
134 |       <motion.path
135 |         d="M18 5v13"
136 |         :animate="currentState"
137 |         :variants="lineVariants.line18"
138 |       />
139 |       <path d="M22 10v3" />
140 |     </svg>
141 |   </div>
142 | </template>
143 | 


--------------------------------------------------------------------------------
/app/components/Lucide/Discord.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const variants = {
 20 |   normal: {
 21 |     translateX: 0,
 22 |     opacity: 1,
 23 |     transition: {
 24 |       duration: 0.2,
 25 |     },
 26 |   },
 27 |   animate: {
 28 |     translateX: [0, -2, 2, -2, 2, 0],
 29 |     opacity: 1,
 30 |     transition: {
 31 |       duration: 0.4,
 32 |       times: [0, 0.2, 0.4, 0.6, 0.8, 1],
 33 |       ease: 'easeInOut',
 34 |     },
 35 |   },
 36 | };
 37 | 
 38 | const isControlled = ref(false);
 39 | const currentState = ref('normal');
 40 | 
 41 | const startAnimation = () => {
 42 |   currentState.value = 'animate';
 43 | };
 44 | 
 45 | const stopAnimation = () => {
 46 |   currentState.value = 'normal';
 47 | };
 48 | 
 49 | const handleMouseEnter = () => {
 50 |   if (!isControlled.value) {
 51 |     startAnimation();
 52 |   } else {
 53 |     emit('startAnimation');
 54 |   }
 55 | };
 56 | 
 57 | const handleMouseLeave = () => {
 58 |   if (!isControlled.value) {
 59 |     stopAnimation();
 60 |   } else {
 61 |     emit('stopAnimation');
 62 |   }
 63 | };
 64 | 
 65 | defineExpose({
 66 |   startAnimation,
 67 |   stopAnimation,
 68 | });
 69 | </script>
 70 | 
 71 | <template>
 72 |   <div
 73 |     :class="[
 74 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 75 |       props.class,
 76 |     ]"
 77 |     @mouseenter="handleMouseEnter"
 78 |     @mouseleave="handleMouseLeave"
 79 |   >
 80 |     <svg
 81 |       xmlns="http://www.w3.org/2000/svg"
 82 |       :width="size"
 83 |       :height="size"
 84 |       viewBox="0 0 44 44"
 85 |       fill="none"
 86 |       stroke="currentColor"
 87 |       stroke-width="3"
 88 |       stroke-linecap="round"
 89 |       stroke-linejoin="round"
 90 |       style="overflow: visible"
 91 |     >
 92 |       <motion.path
 93 |         d="M17.54,34.22A47.42,47.42,0,0,1,14.68,38C7.3,37.79,4.5,33,4.5,33A44.83,44.83,0,0,1,9.31,13.48,16.47,16.47,0,0,1,18.69,10l1,2.31"
 94 |         :variants="variants"
 95 |         :animate="currentState"
 96 |       />
 97 |       <motion.path
 98 |         d="M17.85,22.67a3.48,3.48,0,0,0-3.37,3.9,3.38,3.38,0,0,0,3.31,3.22,3.53,3.53,0,0,0,3.43-3.9A3.45,3.45,0,0,0,17.85,22.67Z"
 99 |         :variants="variants"
100 |         :animate="currentState"
101 |       />
102 |       <motion.path
103 |         d="M12.2,14.37a28.19,28.19,0,0,1,8.16-2.18A23.26,23.26,0,0,1,24,12a23.26,23.26,0,0,1,3.64.21,28.19,28.19,0,0,1,8.16,2.18m-7.47-2.09l1-2.31a16.47,16.47,0,0,1,9.38,3.51A44.83,44.83,0,0,1,43.5,33S40.7,37.79,33.32,38a47.42,47.42,0,0,1-2.86-3.81"
104 |         :variants="variants"
105 |         :animate="currentState"
106 |       />
107 |       <motion.path
108 |         d="M36.92,31.29a29.63,29.63,0,0,1-8.64,3.49,21.25,21.25,0,0,1-4.28.4h0a21.25,21.25,0,0,1-4.28-.4,29.63,29.63,0,0,1-8.64-3.49"
109 |         :variants="variants"
110 |         :animate="currentState"
111 |       />
112 |       <motion.path
113 |         d="M30.15,22.67a3.48,3.48,0,0,1,3.37,3.9,3.38,3.38,0,0,1-3.31,3.22,3.53,3.53,0,0,1-3.43-3.9A3.45,3.45,0,0,1,30.15,22.67Z"
114 |         :variants="variants"
115 |         :animate="currentState"
116 |       />
117 |     </svg>
118 |   </div>
119 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Linkedin.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const rectVariants = {
 42 |   normal: {
 43 |     opacity: 1,
 44 |     pathLength: 1,
 45 |     pathOffset: 0,
 46 |     transition: {
 47 |       duration: 0.4,
 48 |       opacity: { duration: 0.1 },
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     opacity: [0, 1],
 53 |     pathLength: [0, 1],
 54 |     pathOffset: [1, 0],
 55 |     transition: {
 56 |       duration: 0.6,
 57 |       ease: 'linear',
 58 |       opacity: { duration: 0.1 },
 59 |     },
 60 |   },
 61 | };
 62 | 
 63 | const circleVariants = {
 64 |   normal: {
 65 |     opacity: 1,
 66 |     pathLength: 1,
 67 |     pathOffset: 0,
 68 |     transition: {
 69 |       duration: 0.4,
 70 |       opacity: { duration: 0.1 },
 71 |     },
 72 |   },
 73 |   animate: {
 74 |     opacity: [0, 1],
 75 |     pathLength: [0, 1],
 76 |     pathOffset: [1, 0],
 77 |     transition: {
 78 |       duration: 0.6,
 79 |       ease: 'linear',
 80 |       opacity: { duration: 0.1 },
 81 |     },
 82 |   },
 83 | };
 84 | 
 85 | const isControlled = ref(false);
 86 | const currentState = ref('normal');
 87 | 
 88 | const startAnimation = () => {
 89 |   currentState.value = 'animate';
 90 | };
 91 | 
 92 | const stopAnimation = () => {
 93 |   currentState.value = 'normal';
 94 | };
 95 | 
 96 | const handleMouseEnter = () => {
 97 |   if (!isControlled.value) {
 98 |     startAnimation();
 99 |   } else {
100 |     emit('startAnimation');
101 |   }
102 | };
103 | 
104 | const handleMouseLeave = () => {
105 |   if (!isControlled.value) {
106 |     stopAnimation();
107 |   } else {
108 |     emit('stopAnimation');
109 |   }
110 | };
111 | 
112 | defineExpose({
113 |   startAnimation,
114 |   stopAnimation,
115 | });
116 | </script>
117 | 
118 | <template>
119 |   <div
120 |     :class="[
121 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
122 |       props.class,
123 |     ]"
124 |     @mouseenter="handleMouseEnter"
125 |     @mouseleave="handleMouseLeave"
126 |   >
127 |     <svg
128 |       xmlns="http://www.w3.org/2000/svg"
129 |       :width="size"
130 |       :height="size"
131 |       fill="none"
132 |       stroke="currentColor"
133 |       stroke-width="2"
134 |       stroke-linecap="round"
135 |       stroke-linejoin="round"
136 |       viewBox="0 0 24 24"
137 |     >
138 |       <motion.path
139 |         d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
140 |         :variants="pathVariants"
141 |         :animate="currentState"
142 |       />
143 |       <motion.rect
144 |         x="2"
145 |         y="9"
146 |         width="4"
147 |         height="12"
148 |         :variants="rectVariants"
149 |         :animate="currentState"
150 |       />
151 |       <motion.circle
152 |         cx="4"
153 |         cy="4"
154 |         r="2"
155 |         :variants="circleVariants"
156 |         :animate="currentState"
157 |       />
158 |     </svg>
159 |   </div>
160 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Instagram.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const rectVariants = {
 20 |   normal: {
 21 |     opacity: 1,
 22 |     pathLength: 1,
 23 |     pathOffset: 0,
 24 |     transition: {
 25 |       duration: 0.4,
 26 |       opacity: { duration: 0.1 },
 27 |     },
 28 |   },
 29 |   animate: {
 30 |     opacity: [0, 1],
 31 |     pathLength: [0, 1],
 32 |     pathOffset: [1, 0],
 33 |     transition: {
 34 |       duration: 0.6,
 35 |       ease: 'linear',
 36 |       opacity: { duration: 0.1 },
 37 |     },
 38 |   },
 39 | };
 40 | 
 41 | const pathVariants = {
 42 |   normal: {
 43 |     opacity: 1,
 44 |     pathLength: 1,
 45 |     pathOffset: 0,
 46 |     transition: {
 47 |       duration: 0.4,
 48 |       opacity: { duration: 0.1 },
 49 |     },
 50 |   },
 51 |   animate: {
 52 |     opacity: [0, 1],
 53 |     pathLength: [0, 1],
 54 |     pathOffset: [1, 0],
 55 |     transition: {
 56 |       duration: 0.6,
 57 |       ease: 'linear',
 58 |       opacity: { duration: 0.1 },
 59 |     },
 60 |   },
 61 | };
 62 | 
 63 | const lineVariants = {
 64 |   normal: {
 65 |     opacity: 1,
 66 |     pathLength: 1,
 67 |     pathOffset: 0,
 68 |     transition: {
 69 |       duration: 0.4,
 70 |       opacity: { duration: 0.1 },
 71 |     },
 72 |   },
 73 |   animate: {
 74 |     opacity: [0, 1],
 75 |     pathLength: [0, 1],
 76 |     pathOffset: [1, 0],
 77 |     transition: {
 78 |       duration: 0.6,
 79 |       ease: 'linear',
 80 |       opacity: { duration: 0.1 },
 81 |     },
 82 |   },
 83 | };
 84 | 
 85 | const isControlled = ref(false);
 86 | const currentState = ref('normal');
 87 | 
 88 | const startAnimation = () => {
 89 |   currentState.value = 'animate';
 90 | };
 91 | 
 92 | const stopAnimation = () => {
 93 |   currentState.value = 'normal';
 94 | };
 95 | 
 96 | const handleMouseEnter = () => {
 97 |   if (!isControlled.value) {
 98 |     startAnimation();
 99 |   } else {
100 |     emit('startAnimation');
101 |   }
102 | };
103 | 
104 | const handleMouseLeave = () => {
105 |   if (!isControlled.value) {
106 |     stopAnimation();
107 |   } else {
108 |     emit('stopAnimation');
109 |   }
110 | };
111 | 
112 | defineExpose({
113 |   startAnimation,
114 |   stopAnimation,
115 | });
116 | </script>
117 | 
118 | <template>
119 |   <div
120 |     :class="[
121 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
122 |       props.class,
123 |     ]"
124 |     @mouseenter="handleMouseEnter"
125 |     @mouseleave="handleMouseLeave"
126 |   >
127 |     <svg
128 |       xmlns="http://www.w3.org/2000/svg"
129 |       :width="size"
130 |       :height="size"
131 |       viewBox="0 0 24 24"
132 |       fill="none"
133 |       stroke="currentColor"
134 |       stroke-width="2"
135 |       stroke-linecap="round"
136 |       stroke-linejoin="round"
137 |     >
138 |       <motion.rect
139 |         x="2"
140 |         y="2"
141 |         width="20"
142 |         height="20"
143 |         rx="5"
144 |         ry="5"
145 |         :variants="rectVariants"
146 |         :animate="currentState"
147 |       />
148 |       <motion.path
149 |         d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
150 |         :variants="pathVariants"
151 |         :animate="currentState"
152 |       />
153 |       <motion.line
154 |         x1="17.5"
155 |         y1="6.5"
156 |         x2="17.51"
157 |         y2="6.5"
158 |         :variants="lineVariants"
159 |         :animate="currentState"
160 |       />
161 |     </svg>
162 |   </div>
163 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Stethoscope.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const DURATION = 0.25;
 20 | 
 21 | const calculateDelay = (i: unknown) => {
 22 |   return Number(i) === 0 ? 0.1 : Number(i) * DURATION + 0.1;
 23 | };
 24 | 
 25 | const pathVariants = {
 26 |   normal: {
 27 |     pathLength: 1,
 28 |     pathOffset: 0,
 29 |     opacity: 1,
 30 |     transition: { delay: 0 },
 31 |   },
 32 |   animate: {
 33 |     pathOffset: [1, 0],
 34 |     pathLength: [0, 1],
 35 |     opacity: [0, 1],
 36 |   },
 37 | };
 38 | 
 39 | const circleVariants = {
 40 |   normal: { pathLength: 1, opacity: 1, transition: { delay: 0 } },
 41 |   animate: {
 42 |     pathLength: [0, 1],
 43 |     opacity: [0, 1],
 44 |   },
 45 | };
 46 | 
 47 | const isControlled = ref(false);
 48 | const currentState = ref('normal');
 49 | 
 50 | const startAnimation = () => {
 51 |   currentState.value = 'animate';
 52 | };
 53 | 
 54 | const stopAnimation = () => {
 55 |   currentState.value = 'normal';
 56 | };
 57 | 
 58 | const handleMouseEnter = () => {
 59 |   if (!isControlled.value) {
 60 |     startAnimation();
 61 |   } else {
 62 |     emit('startAnimation');
 63 |   }
 64 | };
 65 | 
 66 | const handleMouseLeave = () => {
 67 |   if (!isControlled.value) {
 68 |     stopAnimation();
 69 |   } else {
 70 |     emit('stopAnimation');
 71 |   }
 72 | };
 73 | 
 74 | defineExpose({
 75 |   startAnimation,
 76 |   stopAnimation,
 77 | });
 78 | </script>
 79 | 
 80 | <template>
 81 |   <div
 82 |     :class="[
 83 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 84 |       props.class,
 85 |     ]"
 86 |     @mouseenter="handleMouseEnter"
 87 |     @mouseleave="handleMouseLeave"
 88 |   >
 89 |     <svg
 90 |       xmlns="http://www.w3.org/2000/svg"
 91 |       :width="size"
 92 |       :height="size"
 93 |       viewBox="0 0 24 24"
 94 |       fill="none"
 95 |       stroke="currentColor"
 96 |       stroke-width="2"
 97 |       stroke-linecap="round"
 98 |       stroke-linejoin="round"
 99 |     >
100 |       <motion.path
101 |         d="M11 2v2"
102 |         :variants="pathVariants"
103 |         :animate="currentState"
104 |         :transition="{
105 |           duration: DURATION,
106 |           delay: calculateDelay(2),
107 |           opacity: { delay: calculateDelay(2) },
108 |         }"
109 |       />
110 |       <motion.path
111 |         d="M5 2v2"
112 |         :variants="pathVariants"
113 |         :animate="currentState"
114 |         :transition="{
115 |           duration: DURATION,
116 |           delay: calculateDelay(2),
117 |           opacity: { delay: calculateDelay(2) },
118 |         }"
119 |       />
120 |       <motion.path
121 |         d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"
122 |         :variants="pathVariants"
123 |         :animate="currentState"
124 |         :transition="{
125 |           duration: DURATION,
126 |           delay: calculateDelay(2),
127 |           opacity: { delay: calculateDelay(2) },
128 |         }"
129 |       />
130 |       <motion.path
131 |         d="M8 15a6 6 0 0 0 12 0v-3"
132 |         :variants="pathVariants"
133 |         :animate="currentState"
134 |         :transition="{
135 |           duration: DURATION,
136 |           delay: calculateDelay(1),
137 |           opacity: { delay: calculateDelay(1) },
138 |         }"
139 |       />
140 |       <motion.circle
141 |         cx="20"
142 |         cy="10"
143 |         r="2"
144 |         :variants="circleVariants"
145 |         :animate="currentState"
146 |         :transition="{
147 |           duration: DURATION,
148 |           delay: calculateDelay(0),
149 |           opacity: { delay: calculateDelay(0) },
150 |         }"
151 |       />
152 |     </svg>
153 |   </div>
154 | </template> 


--------------------------------------------------------------------------------
/app/components/Lucide/Connect.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v'
  3 | 
  4 | interface Props {
  5 |   size?: number
  6 |   class?: string
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: ''
 12 | })
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: []
 16 |   stopAnimation: []
 17 | }>()
 18 | 
 19 | const plugVariants = {
 20 |   normal: {
 21 |     x: 0,
 22 |     y: 0
 23 |   },
 24 |   animate: {
 25 |     x: -3,
 26 |     y: 3
 27 |   }
 28 | }
 29 | 
 30 | const socketVariants = {
 31 |   normal: {
 32 |     x: 0,
 33 |     y: 0
 34 |   },
 35 |   animate: {
 36 |     x: 3,
 37 |     y: -3
 38 |   }
 39 | }
 40 | 
 41 | const pathVariants = {
 42 |   normal: (custom: { x: number; y: number }) => ({
 43 |     d: `M${custom.x} ${custom.y} l2.5 -2.5`
 44 |   }),
 45 |   animate: (custom: { x: number; y: number }) => ({
 46 |     d: `M${custom.x + 2.93} ${custom.y - 2.93} l0.10 -0.10`
 47 |   })
 48 | }
 49 | 
 50 | const isControlled = ref(false)
 51 | const currentState = ref('normal')
 52 | 
 53 | const startAnimation = () => {
 54 |   currentState.value = 'animate'
 55 | }
 56 | 
 57 | const stopAnimation = () => {
 58 |   currentState.value = 'normal'
 59 | }
 60 | 
 61 | const handleMouseEnter = () => {
 62 |   if (!isControlled.value) {
 63 |     startAnimation()
 64 |   } else {
 65 |     emit('startAnimation')
 66 |   }
 67 | }
 68 | 
 69 | const handleMouseLeave = () => {
 70 |   if (!isControlled.value) {
 71 |     stopAnimation()
 72 |   } else {
 73 |     emit('stopAnimation')
 74 |   }
 75 | }
 76 | 
 77 | defineExpose({
 78 |   startAnimation,
 79 |   stopAnimation
 80 | })
 81 | </script>
 82 | 
 83 | <template>
 84 |   <div
 85 |     :class="[
 86 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 87 |       props.class
 88 |     ]"
 89 |     @mouseenter="handleMouseEnter"
 90 |     @mouseleave="handleMouseLeave"
 91 |   >
 92 |     <svg
 93 |       xmlns="http://www.w3.org/2000/svg"
 94 |       :width="size"
 95 |       :height="size"
 96 |       viewBox="0 0 24 24"
 97 |       fill="none"
 98 |       stroke="currentColor"
 99 |       stroke-width="2"
100 |       stroke-linecap="round"
101 |       stroke-linejoin="round"
102 |     >
103 |       <motion.path
104 |         d="M19 5l3 -3"
105 |         :variants="{
106 |           normal: {
107 |             d: 'M19 5l3 -3'
108 |           },
109 |           animate: {
110 |             d: 'M17 7l5 -5'
111 |           }
112 |         }"
113 |         :animate="currentState"
114 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
115 |       />
116 |       <motion.path
117 |         d="m2 22 3-3"
118 |         :variants="{
119 |           normal: {
120 |             d: 'm2 22 3-3'
121 |           },
122 |           animate: {
123 |             d: 'm2 22 6-6'
124 |           }
125 |         }"
126 |         :animate="currentState"
127 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
128 |       />
129 |       <motion.path
130 |         d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"
131 |         :variants="socketVariants"
132 |         :animate="currentState"
133 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
134 |       />
135 |       <motion.path
136 |         :variants="pathVariants"
137 |         :custom="{ x: 7.5, y: 13.5 }"
138 |         :initial="'normal'"
139 |         :animate="currentState"
140 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
141 |       />
142 |       <motion.path
143 |         :variants="pathVariants"
144 |         :custom="{ x: 10.5, y: 16.5 }"
145 |         :initial="'normal'"
146 |         :animate="currentState"
147 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
148 |       />
149 |       <motion.path
150 |         d="m12 6 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.4 2.4 0 0 0-3.4 0Z"
151 |         :variants="plugVariants"
152 |         :animate="currentState"
153 |         :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
154 |       />
155 |     </svg>
156 |   </div>
157 | </template>
158 | 


--------------------------------------------------------------------------------
/.cursor/rules/create-new-vue-motion-icon.mdc:
--------------------------------------------------------------------------------
  1 | ---
  2 | description: 
  3 | globs: app/components/Lucide/*.vue
  4 | alwaysApply: false
  5 | ---
  6 | # Converting React Lucide Icons to Vue: Guide
  7 | 
  8 | Here's a step-by-step guide for converting React animated Lucide icons to Vue components in this project:
  9 | 
 10 | ## 1. Basic Structure
 11 | 
 12 | ```vue
 13 | <script setup lang="ts">
 14 | import { motion } from 'motion-v';
 15 | 
 16 | interface Props {
 17 |   size?: number;
 18 |   class?: string;
 19 | }
 20 | 
 21 | const props = withDefaults(defineProps<Props>(), {
 22 |   size: 28,
 23 |   class: '',
 24 | });
 25 | 
 26 | const emit = defineEmits<{
 27 |   startAnimation: [];
 28 |   stopAnimation: [];
 29 | }>();
 30 | 
 31 | // Define animation variants here
 32 | 
 33 | const isControlled = ref(false);
 34 | const currentState = ref('normal');
 35 | 
 36 | const startAnimation = () => {
 37 |   currentState.value = 'animate';
 38 | };
 39 | 
 40 | const stopAnimation = () => {
 41 |   currentState.value = 'normal';
 42 | };
 43 | 
 44 | const handleMouseEnter = () => {
 45 |   if (!isControlled.value) {
 46 |     startAnimation();
 47 |   } else {
 48 |     emit('startAnimation');
 49 |   }
 50 | };
 51 | 
 52 | const handleMouseLeave = () => {
 53 |   if (!isControlled.value) {
 54 |     stopAnimation();
 55 |   } else {
 56 |     emit('stopAnimation');
 57 |   }
 58 | };
 59 | 
 60 | defineExpose({
 61 |   startAnimation,
 62 |   stopAnimation,
 63 | });
 64 | </script>
 65 | 
 66 | <template>
 67 |   <div
 68 |     :class="[
 69 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
 70 |       props.class,
 71 |     ]"
 72 |     @mouseenter="handleMouseEnter"
 73 |     @mouseleave="handleMouseLeave"
 74 |   >
 75 |     <svg>
 76 |       <!-- SVG elements here -->
 77 |     </svg>
 78 |   </div>
 79 | </template>
 80 | ```
 81 | 
 82 | ## 2. Animation Pattern Conversion
 83 | 
 84 | When converting React motion animations to Vue:
 85 | 
 86 | | React | Vue |
 87 | |-------|-----|
 88 | | `animate={controls}` | `:animate="currentState"` |
 89 | | `variants={...}` | `:variants="iconVariants"` |
 90 | | `<motion.svg>` | `<svg>` with `<motion.path>` inside |
 91 | | `transition={{ ... }}` | Include in each variant or as separate prop |
 92 | 
 93 | ## 3. Converting Animation Arrays
 94 | 
 95 | - Keep animation arrays in the same format: `[val1, val2, val3, ...]`
 96 | - Include all keyframe points from React
 97 | - Use `duration` and `bounce` parameters for spring animations
 98 | - For complex keyframes, use `transition` inside the variant
 99 | 
100 | Example:
101 | ```typescript
102 | const searchVariants = {
103 |   normal: { 
104 |     x: 0, 
105 |     y: 0,
106 |     transition: {
107 |       duration: 0.3,
108 |       type: 'spring',
109 |       stiffness: 400,
110 |       damping: 25
111 |     }
112 |   },
113 |   animate: { 
114 |     x: [0, 0, -3, 0],  // Same array as React
115 |     y: [0, -4, 0, 0],  // Same array as React
116 |     transition: {
117 |       duration: 1,
118 |       bounce: 0.3      // Same as React
119 |     }
120 |   }
121 | };
122 | ```
123 | 
124 | ## 4. SVG Path Conversion
125 | 
126 | - Use `motion.path`, `motion.circle`, etc. for elements that need animation
127 | - Keep all SVG attributes the same (viewBox, fill, stroke, etc.)
128 | - Add `style="overflow: visible"` to the SVG element if needed
129 | 
130 | ## 5. Adding to index.vue
131 | 
132 | After creating a new icon component in `app/components/Lucide/`, add it to `app/pages/index.vue`:
133 | 
134 | ```vue
135 | <AnimatedIconButton>
136 |   <template #default="{ ref, controlled }">
137 |     <LucideYourNewIcon
138 |       :ref="ref"
139 |       :controlled="controlled"
140 |       :class="primaryColor"
141 |     />
142 |   </template>
143 | </AnimatedIconButton>
144 | ```
145 | 
146 | ## Common Gotchas
147 | 
148 | 1. Don't use arrays with spring animations for x/y - use only two keyframes or keyframes with tween animations
149 | 2. Remember all Vue components in the Lucide directory are auto-imported with the "Lucide" prefix
150 | 3. Ignore TypeScript errors about `motion-v` - they appear in all components
151 | 4. Keep animations simple - one normal state and one animate state
152 | 5. Don't add unnecessary timers or complex logic - just toggle the state


--------------------------------------------------------------------------------
/app/components/Lucide/AlarmClock.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { motion } from 'motion-v';
  3 | 
  4 | interface Props {
  5 |   size?: number;
  6 |   class?: string;
  7 | }
  8 | 
  9 | const props = withDefaults(defineProps<Props>(), {
 10 |   size: 28,
 11 |   class: '',
 12 | });
 13 | 
 14 | const emit = defineEmits<{
 15 |   startAnimation: [];
 16 |   stopAnimation: [];
 17 | }>();
 18 | 
 19 | const pathVariants = {
 20 |   normal: {
 21 |     y: 0,
 22 |     x: 0,
 23 |     transition: {
 24 |       duration: 0.2,
 25 |       type: 'spring',
 26 |       stiffness: 200,
 27 |       damping: 25,
 28 |     },
 29 |   },
 30 |   animate: {
 31 |     y: -1.5,
 32 |     x: [-1, 1, -1, 1, -1, 0],
 33 |     transition: {
 34 |       y: {
 35 |         duration: 0.2,
 36 |         type: 'spring',
 37 |         stiffness: 200,
 38 |         damping: 25,
 39 |       },
 40 |       x: {
 41 |         duration: 0.3,
 42 |         repeat: Infinity,
 43 |         ease: 'linear',
 44 |       },
 45 |     },
 46 |   },
 47 | };
 48 | 
 49 | const secondaryPathVariants = {
 50 |   normal: {
 51 |     y: 0,
 52 |     x: 0,
 53 |     transition: {
 54 |       duration: 0.2,
 55 |       type: 'spring',
 56 |       stiffness: 200,
 57 |       damping: 25,
 58 |     },
 59 |   },
 60 |   animate: {
 61 |     y: -2.5,
 62 |     x: [-2, 2, -2, 2, -2, 0],
 63 |     transition: {
 64 |       y: {
 65 |         duration: 0.2,
 66 |         type: 'spring',
 67 |         stiffness: 200,
 68 |         damping: 25,
 69 |       },
 70 |       x: {
 71 |         duration: 0.3,
 72 |         repeat: Infinity,
 73 |         ease: 'linear',
 74 |       },
 75 |     },
 76 |   },
 77 | };
 78 | 
 79 | const isControlled = ref(false);
 80 | const currentState = ref('normal');
 81 | 
 82 | const startAnimation = () => {
 83 |   currentState.value = 'animate';
 84 | };
 85 | 
 86 | const stopAnimation = () => {
 87 |   currentState.value = 'normal';
 88 | };
 89 | 
 90 | const handleMouseEnter = () => {
 91 |   if (!isControlled.value) {
 92 |     startAnimation();
 93 |   } else {
 94 |     emit('startAnimation');
 95 |   }
 96 | };
 97 | 
 98 | const handleMouseLeave = () => {
 99 |   if (!isControlled.value) {
100 |     stopAnimation();
101 |   } else {
102 |     emit('stopAnimation');
103 |   }
104 | };
105 | 
106 | defineExpose({
107 |   startAnimation,
108 |   stopAnimation,
109 | });
110 | </script>
111 | 
112 | <template>
113 |   <div
114 |     :class="[
115 |       'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
116 |       props.class,
117 |     ]"
118 |     @mouseenter="handleMouseEnter"
119 |     @mouseleave="handleMouseLeave"
120 |   >
121 |     <svg
122 |       xmlns="http://www.w3.org/2000/svg"
123 |       :width="size"
124 |       :height="size"
125 |       viewBox="0 0 24 24"
126 |       fill="none"
127 |       stroke="currentColor"
128 |       stroke-width="2"
129 |       stroke-linecap="round"
130 |       stroke-linejoin="round"
131 |       style="overflow: visible"
132 |     >
133 |       <motion.path
134 |         d="M18 20.5L19.5 22"
135 |         :variants="pathVariants"
136 |         :initial="'normal'"
137 |         :animate="currentState"
138 |       />
139 |       <motion.path
140 |         d="M6 20.5L4.5 22"
141 |         :variants="pathVariants"
142 |         :initial="'normal'"
143 |         :animate="currentState"
144 |       />
145 |       <motion.path
146 |         d="M21 13C21 17.968 16.968 22 12 22C7.032 22 3 17.968 3 13C3 8.032 7.032 4 12 4C16.968 4 21 8.032 21 13Z"
147 |         :variants="pathVariants"
148 |         :initial="'normal'"
149 |         :animate="currentState"
150 |       />
151 |       <motion.path
152 |         d="M15.339 15.862L12.549 14.197C12.063 13.909 11.667 13.216 11.667 12.649V8.95898"
153 |         :variants="pathVariants"
154 |         :initial="'normal'"
155 |         :animate="currentState"
156 |       />
157 |       <motion.path
158 |         d="M18 2L21.747 5.31064"
159 |         :variants="secondaryPathVariants"
160 |         :initial="'normal'"
161 |         :animate="currentState"
162 |       />
163 |       <motion.path
164 |         d="M6 2L2.25304 5.31064"
165 |         :variants="secondaryPathVariants"
166 |         :initial="'normal'"
167 |         :animate="currentState"
168 |       />
169 |     </svg>
170 |   </div>
171 | </template>
172 | 


--------------------------------------------------------------------------------