feat: the toggle buttons component has been added

Author: genixxavier

src/components/Buttons/ToggleButtonGroup.tsx

@@ -42,13 +42,22 @@ const ToggleButtonGroup: React.FC<ToggleGroupProps> = ({
   // Current value
   const currentValue = value !== undefined ? value : internalValue
 
+  // Helper function to get selected ID
+  const getSelectedId = (
+    kind: 'single' | 'group',
+    currentValue: string | boolean | null,
+    items: ToggleOption[]
+  ): string | null => {
+    if (kind === 'single') {
+      const isFirstItemSelected =
+        currentValue === true || currentValue === items[0]?.id
+      return isFirstItemSelected ? items[0]?.id : null
+    }
+    return currentValue as string | null
+  }
+
   // Convert to internal format
-  const selectedId =
-    kind === 'single'
-      ? currentValue === true || currentValue === items[0]?.id
-        ? items[0]?.id
-        : null
-      : (currentValue as string | null)
+  const selectedId = getSelectedId(kind, currentValue, items)
 
   const handleChange = (newValue: string | null) => {
     const finalValue = kind === 'single' ? newValue === items[0]?.id : newValue

src/stories/ToggleButtonGroup.stories.tsx

@@ -82,15 +82,13 @@ export const Group: Story = {
         <div className="p-4 border border-gray-200 rounded-lg">
           {tab === 'sold' && (
             <div className="space-y-2">
-              <h3 className="font-semibold text-gray-900">Ventas Panel</h3>
+              <h3 className="font-semibold text-gray-900">Sales Dashboard</h3>
               <p className="text-gray-600">Showing sales data and metrics...</p>
             </div>
           )}
           {tab === 'deeded' && (
             <div className="space-y-2">
-              <h3 className="font-semibold text-gray-900">
-                Escrituradas Panel
-              </h3>
+              <h3 className="font-semibold text-gray-900">Deeded Dashboard</h3>
               <p className="text-gray-600">Showing deeded properties data...</p>
             </div>
           )}