feat: integrate lucide-react icons in DailyAddForm and DailySection

- Replaced text icons with lucide-react icons for 'task' and 'meeting' options in DailyAddForm and DailySection for improved visual consistency.
- Updated DailyAddForm to use ToggleButton for better UI interaction and added default icons for options.
- Enhanced FormsSection to reflect these changes in the DailyAddForm usage.

src/components/ui-showcase/sections/FormsSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { CheckSquare2, Calendar, Circle } from 'lucide-react';
 import { Input } from '@/components/ui/Input';
 import { SearchInput } from '@/components/ui/SearchInput';
 import { TagInput } from '@/components/ui/TagInput';
@@ -137,7 +138,12 @@ export function FormsSection() {
           <h3 className="text-lg font-medium text-[var(--foreground)]">Daily Add Form</h3>
           <DailyAddForm
             placeholder="Add new daily item..."
-            onAdd={async () => console.log('Add item')}
+            onAdd={async (text, option) => console.log('Add item:', text, option)}
+            options={[
+              { value: 'task', label: 'Task', icon: <CheckSquare2 size={14} />, color: 'green' },
+              { value: 'meeting', label: 'Meeting', icon: <Calendar size={14} />, color: 'blue' },
+              { value: 'event', label: 'Event', icon: <Circle size={14} />, color: 'gray' }
+            ]}
           />
         </div>
       </div>